@charset "UTF-8";

* {margin:0; padding:0;}
img {border:0;}

body {
	background-color: #eee;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	-webkit-text-size-adjust: 100%;
}

@media screen and (min-width: 768px) {
	.sp {display: none}
 }

@media screen and (max-width: 767px) {
  .pc {display: none}
 }

/*ライン横*/
#profile:before, #about:before {content: ""; position: absolute; border-bottom: 1px solid #FFFFFF; top:0px; left: 0; width: 100%; opacity: 0.5; z-index: -10;}

/*ライン縦*/
#Main span {content: ""; position: absolute; border-left: 1px solid #FFFFFF; top:0px; height: 100%; opacity: 0.5; z-index: -10;}
#Main span:nth-of-type(1) {left: 120px;}
#Main span:nth-of-type(2) {left: 400px;}
#Main span:nth-of-type(3) {left: 420px;}
#Main span:nth-of-type(4) {left: 500px;}
#Main span:nth-of-type(5) {right: 280px;}

@media screen and (max-width: 767px) {
	#Main span:nth-of-type(1) {left: 20px;}
	#Main span:nth-of-type(2) {left: 80px;}
	#Main span:nth-of-type(3) {display: none}
	#Main span:nth-of-type(4) {display: none}
	#Main span:nth-of-type(5) {right: 20px;}
}

.Barlow {font-family: 'Barlow', sans-serif; font-weight: 500;}

/*PC ヘッダー設定*/
@media screen and (min-width: 768px) {
	header {background-color: #FFF; position:fixed ; width: 160px; height: 100%; top: 0; right: 0; z-index: 100; font-size: 14px;}
	/*右エリア回転*/
	header #s-navi {line-height: 17px; transform: rotate(90deg); transform-origin:left 50%; position: absolute; left: 50%; top: 50px; width: 500px; height:17px; }
	/*ライン追加*/
	header .box {float: left;}
	header .box:after {content: ""; float: right; border-bottom: 1px solid; width: 20px; margin: 0 12px 0 11px; padding-top: 8px; }
	header .box:nth-of-type(2):before {content: ""; float: left; border-left: 1px solid; height: 17px; margin: 0 40px;}
	/*アイコン設定*/
	header #s-navi a {float: left; background-color: #fff; line-height: 0; padding: 6px; margin: -6px;}
	/*FB*/
	header #s-navi a:nth-of-type(2) {padding:11px 6px 10px;}
	/*TW*/
	header #s-navi a:nth-of-type(3) {padding: 7px 6px 8px;}
	header #s-navi a:nth-of-type(3) {margin: -6px -6px -6px 6px;}
}

/*SP ヘッダー設定*/
@media screen and (max-width: 767px) {
	header {position:absolute; z-index: 100;}
	/*アイコン設定*/
	header #s-navi a {width: 40px; height: 40px; float: left; background-color: #000; border-radius: 50%; text-align: center; line-height: 40px;}
	header #s-navi a:nth-of-type(2) {line-height: 42px; margin: 0 10px; }
}

/*ハンバーガーメニュー*/
#sp-menu {position: fixed; top: 10px; left: 50%; margin: 0 0 0 -30px; z-index: 200;}
.menu-trigger,.menu-trigger span {display: inline-block; transition: all .2s;}
.menu-trigger {position: relative; width: 60px; height: 60px;}
.menu-trigger span {position: absolute; left: 10px; width: 40px; height: 1px; background-color: #000000;}
.menu-trigger span:nth-of-type(1) {top: 24px;}
.menu-trigger span:nth-of-type(2) {top: 34px;}

.menu-trigger.active span:nth-of-type(1) {transform: translateY(5px) rotate(45deg);}
.menu-trigger.active span:nth-of-type(2) {transform: translateY(-5px) rotate(-45deg);}

/*メインビジュアル*/
#MV {position: relative; border: solid #f6f6f6 20px;}
#MV #logo {position: absolute;}
#MV #text {position: absolute; line-height: 1.8em; left: 40px; font-size: 14px;}

@media screen and (max-width: 767px) {
	#MV {text-align: center; border: solid #f6f6f6 10px;}
  #MV #text {position: relative; font-size: 12px; line-height: 1.6em;  left: 0; text-align: center;}
 }

/*スクロール*/
#MV #scroll {position: absolute; left: 50%; bottom: 20px; width: 17px; height: 28px; margin-left: -8px;}
#MV #scroll img {position: absolute;}

@media screen and (max-width: 767px) {
  #MV #scroll {left:0; bottom: 15px; width: 100%; text-align: center; height: auto; margin: 0; font-size: 12px;}
	
	/*ライン*/
	#MV:after {content:""; position: absolute; left: 50%; bottom: -20px; border-left: 1px solid; height: 30px;}
}


/*スクロール　丸*/
#MV #scroll #maru {position: absolute; left: 6px; top: 5px; animation: sc_maru 2.5s infinite;}
@keyframes sc_maru {
  0% {transform: translate(0, 0);}
  40% {transform: translate(0, 7px);}
	50% {transform: translate(0, 7px);}
  90% {transform: translate(0, 0px);}
	100% {transform: translate(0, 0px);}
}

/*メイン*/
#Main {position: relative;}
#Main > .inner {position: relative; padding-top: 160px;}

@media screen and (max-width: 767px) {
	#Main > .inner {padding-top: 60px;}
}

/*プロフィール*/
#profile {position:relative; width: 100%;}
#profile .inner {position: relative; margin: 0 0 120px 120px; float: left;}
#profile h2 {font-size: 60px; position: absolute; line-height: 0.6em; vertical-align: middle; font-weight: 600; margin-left: -3px;}
#profile dl {font-size: 12px; float: left; position: relative; left: 280px; border-left: solid 2px; padding-left: 20px;}
#profile dt {float: left; font-weight: bold;}
#profile dd {margin-left: 80px; padding-bottom: 10px;}
#profile dd:last-child {padding-bottom: 0px;}

@media screen and (max-width: 767px) {
	#profile .inner {margin: 0 20px 60px; float: none;}
	#profile h2 {line-height: 0.7em; margin-top: 0px; position:static; font-size: 30px; margin-left: -1px;}
	#profile dl {border-top: 2px solid; width: 100%; float: none; left: 0; border-left: 0; padding-left: 0; padding-top: 40px; margin-top: 12px;}
	#profile dd {margin-left: 60px; padding-bottom: 5px;}
}

/*アバウト*/
#about {position:relative; padding-bottom: 200px; clear: both;}
#about .inner {position: relative; margin: 0 280px 0 120px;}
#about p {font-size: 20px; font-weight: 600; margin:0 0 20px; line-height: 0.8em;}
#about p:last-child {font-size: 28px; font-weight: bold; line-height: 2em;}

@media screen and (max-width: 767px) {
	#about {padding-bottom: 100px;}
	#about .inner {margin: 0 20px;}
	#about p {font-size: 12px; margin-bottom: 15px;}
	#about p:last-child {font-size: 16px; line-height: 2em;}
}

/*ページトップ*/
#pagetop {position: fixed; bottom: 40px; right: 51px; line-height: 0; padding: 20px; z-index: 100}
#pagetop .box {border-bottom: 1px solid;}
#pagetop #arrow {background: url("../img/pagetop.svg") no-repeat; height: 17px; width: 17px;}
@media screen and (max-width: 767px) {
	#pagetop {position: absolute; bottom: 100px; right: 0;}
	#pagetop #arrow {background: url("../img/pagetop.svg") no-repeat;}
}

/*フッター*/
footer {background-color: #202020; height: 200px; position: relative;}
footer p {color: #555555; font-size: 12px; padding: 120px 0 0 120px;}

@media screen and (max-width: 767px) {
	footer {height: 100px;}
	footer p {font-size: 10px; padding: 30px 0 0 20px;}
}