@charset "utf-8";
/* CSS Document */
.all {
  overflow: hidden;
}

.is-hide {
    display: none;
}
/* ローディング画面をフェードアウト */
.fadeout-bg {
    transform: translate(0, -100%);
    transition-duration: .5s;
    pointer-events: none;
}
/* ローダーをフェードアウト */
.fadeout-loader {
    transition-property: opacity;
    transition-delay: .8s;
    transition-duration: .3s;
    opacity: 0;
    pointer-events: none;
}
/* ローディング画面 */
#loader-bg {
    background: #474747;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
#loader {
    
    left: 50%;
    margin-left: -14vw;
    margin-top: -5vw;
    position: fixed;
    top: 50%;
    width: 400px;
}
#loader p {
    color:  #F7EABA;
    font-size: 22px;
	font-weight: 800;
    line-height: 1em;
    text-align: center;
}
#loader p img {
    display: inline-block;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}
.loader {
  margin: 2px auto;
  font-size: 8px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #F4ECCD;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@media (max-width: 750px) {
	
/* ローディング画面 */
#loader-bg {
    background: #474747;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
#loader {
    
    left: 25vw;
    margin-left: 0;
    margin-top: 0;
    position: fixed;
    top: 45%;
    width: 50vw;
}
#loader p {
    color:  #F7EABA;
    font-size: 2em;
	font-weight: 800;
    line-height: 1em;
    text-align: center;
}
#loader p img {
    display: inline-block;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}
.loader {
  margin: 2px auto;
  font-size: 8px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #F4ECCD;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
}

body {
  margin: 0;
  width: 100%;
  padding: 0;
  font-size: 18px;
  line-height: 45px;
  letter-spacing: 0;
 font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: #232323;
  background-color: #F7F7F7;
	 cursor: none;
}

a:hover {
	 cursor: none;
}
   /*本物のカーソルを非表示に*/

#cursor-dot{
	position: fixed;     /* 絶対位置になるように指定 */
	z-index: 1001;          /* 重なり順を上に指定。他の要素に合わせて数字を大きくしてください。 */
	pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/
	opacity: 0;
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #000000;
}

/*外枠用*/
#cursor-circle{
	position: fixed;     /* 絶対位置になるように指定 */
	z-index: 1000;          /* 重なり順を上に指定。他の要素に合わせて数字を大きくしてください。 */
	pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。そのため、noneにして対応*/
	opacity: 0;
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid #000000;
	  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
}

/* クラス追加時の指定、ホバー時の色を指定している場所 */
#cursor-dot.visible{
	background-color: #707070;
}
#cursor-circle.visible{
	border: 1px solid #707070;
}

/* w-imagesという特定エリア内に入った時の指定、 カーソル変える*/
#cursor-dot.h-aria{
	background-color: transparent;
	-webkit-transition: 0.2s ease-out;
  -moz-transition: 0s ease-out;
  -o-transition: 0s ease-out;
  transition: 0s ease-out;
}

/*ここにlookの時の外側の円を指定したらいい、もしずれたらマージンで調整
そしてtransitionも入れてみる事*/
#cursor-circle.h-aria-sec{
	position: fixed;     /* 絶対位置になるように指定 */
	z-index: 1000;          /* 重なり順を上に指定。他の要素に合わせて数字を大きくしてください。 */
	pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。そのため、noneにして対応*/
	opacity: 0;
	display: block;
	width: 150px;
	height: 150px;
	margin: -50px;
	border-radius: 50%;
	border: 1px solid #000000;
	  -webkit-transition: 0s ease-out;
  -moz-transition: 0s ease-out;
  -o-transition: 0s ease-out;
  transition: 0s ease-out;
}



#cursor-dot span{
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	font-size: 24px;
	line-height: 120%;
	color: #232323;
}
#cursor-dot.h-aria span{
	opacity: 1;
	text-align: center;
	
	margin: -4px -4px;
	-webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
	
}

@media (max-width: 750px) {
#cursor-dot,#cursor-circle,#cursor-circle.h-aria,#cursor-circle.h-aria-sec:hover {
	display: none;
}
	#cursor-circle.h-aria-sec { 
	position: relative;     /* 絶対位置になるように指定 */
	z-index: -1;          /* 重なり順を上に指定。他の要素に合わせて数字を大きくしてください。 */
		top: -100vw;
		left: -100vw;
	
}
}
/*Dark theme時の設定たち*/
body.darktheme {
  
  color: #F4ECCD;
  background-color: #474747;
	
}


body.darktheme .header-left a {
   color: #F4ECCD;
		border-bottom: solid 0 #333;
	
}



body.darktheme .header-right a:hover {
	text-decoration: none;
	color: #8C876B;
	border-bottom: solid 1px #333;
}


body.darktheme .header-right a:hover::after {
	content: 'Yes!!';
	position: absolute;
	display: inline-block;
	top: 2.2vw;
	left: 3.6vw;
	font-family: 'Libre Baskerville', serif;
	font-size: 1.4em; 
	transform: rotate(-2deg);
		color:  #F4ECCD;
}  
body.darktheme .middle-wrapper .middle-pics::after {
	content: '';
	display: block;
	width: 360px;
	height: 360px;
	position: absolute;
	background-color: #676767;
	z-index: 1;
	top: -160px;
	left: 60px;
	
}
body.darktheme #modeChange {
	position: relative;
	display: block;
	width: 60px;
	height: 30px;
	border-radius: 50em;
	background: #9F9F9F;
	text-indent: -9999px;
	border: 1px solid #9F9F9F;
}

body.darktheme .s-main-top p span,.s-main-sec p span {
	color: #858585;
}



body.darktheme .footer-bottom nav li a:hover{
	text-decoration: none;
	color: #8C876B;
	border-bottom: solid 1px #333;
}

body.darktheme  .intro .fav:hover {
	
	border-bottom: solid 1px #FFFFFF;
	
}

.btns {
	display: flex;
}
/*ここまで*/

/* ボタンのCSS */
#modeChange {
	position: relative;
	display: block;
	width: 60px;
	height: 30px;
	border-radius: 50em;
	background:#FF7B2E;
	text-indent: -9999px;
	border: 1px solid#FF7B2E;
	margin-left: 0;
	margin-top: 10px;
	margin-right: 1.6vw;
}
#modeChange:before {
	content: '';
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50em;
	background: #ffffff;
	top: 0px;
	left: 0px;
	-webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
body.darktheme #modeChange:before {
	content: '';
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50em;
	background: #ffffff;
	top: 0px;
	left: 30px;
	-webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}

@media (max-width: 750px) {
	#modeChange  {
     margin: 0 auto;
		 text-align: center;
	}
	body.darktheme .middle-wrapper .middle-pics::after {
content: '';
	display: block;
	width: 66vw;
	height: 46vw;
	
	z-index: -10;
	top: 60px;
	left:30px;
	
}
}

.selectlang select{
	 font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	background-color: #F7F7F7;
	width: 8vw;
	border: none;
	border-bottom: solid 0.8px #333;
	color: #333;
	line-height: 230%;
 padding: 0.6vw 0.4vw;
	font-weight: 800;
}

.selectlang select:focus{
	 font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	background-color: #F7F7F7;
	width: 8vw;
	outline: 0;
	border-bottom: solid 0.8px #333;
	color: #333;
	line-height: 230%;
 padding: 0.6vw 0.4vw;
	font-weight: 800;
}


body.darktheme .selectlang select{
	
	background-color: #474747;
	
	color: #F4ECCD;
	
}

body.darktheme .selectlang select:focus{
	 
	background-color: #474747;
	
	color: #F4ECCD;
	
}
@media (max-width: 750px) {
	.btns {
	display: flex;
		flex-direction: column;
}
	.selectlang  {
		display: flex;
		justify-content: center;
		
	}
	.selectlang select{
	 font-family: 'Montserrat', sans-serif;
	font-size: 1.4em;
	background-color: #F7F7F7;
	width: 30vw;
		margin: 0 auto;
		border-radius: 0;
	border: none;
	border-bottom: solid 0.8px #333;
	color: #333;
	line-height: 250%;
		margin-top: 4vw;
		margin-bottom: 3vw;
 padding: 1vw 0.4vw;
	font-weight: 800;
		
}

}
@media (min-width: 750px){

/* Bodyにクラスを一つ追加することで背景色変更の命令をしている */
body.collar-on {
	background-color: #FBF4E8;
	color: #232323;
}
body.collar-on .w-images {
	background-color: #8A9B68;
}

/* Bodyにクラスを一つ追加することで背景色変更の命令をしている */
body.collar-sec-on {
	background-color: #FFF;
	color: #232323;

}
body.collar-sec-on .w-images2 {
	background-color:#658FF1;
}

}



h2,h3{
	font-weight: 800;
}

.container {
  max-width: 1300px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.jumbotron {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}



body header {
  display: flex;
  justify-content: space-between;
 
  margin: 0 auto;
  width: 90%;
  padding-top: 26px;
	padding-bottom: 26px;
}
@media (max-width: 750px) {
  .sp-non {
    display: none;
  }
}

.pc-non {
  display: none;
}


@media (max-width: 750px) {
  .pc-non {
    display: inline-block;
  }
}

/*画面が大きい人用のレスポンシブを各部分*/
@media (min-width: 1300px) {
	
}

/*ここまで*/


@media (max-width: 750px) {
  .container {
	  max-width: 750px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
	 
  }
	
	
  body {
    font-size: 2.133333328vw;
  }
  body header {
  
  
  justify-content: center;
 
  margin: 0 auto;
  width: 100%;
  padding-top: 3.4vw;
	padding-bottom: 3.4vw;
}
  }

.btn-line {
	position: relative;
	color: #000000;
	text-decoration: none;
	overflow: hidden;
	display: inline-block;
	height: 2em;
}
.btn-line::after {
	content: '';
	width: 100%;
	height: 1px;
	background-color: #000000;
	position: absolute;
	bottom: 0;
	display: block;
	left: 0%;
	right: 0%;
	}
.btn-line:hover::after {
	animation: btnlinekey 1s ease-in-out both;
}
@keyframes btnlinekey {
0% {
left: 0%;
}
45% {
left: 100%;
}
46% {
opacity: 0;
}
	54% {
opacity: 0;
}
55% {
left: -100%;
}
100% {
left: 0%;
}
}



.header-left a {
	display: inline-block;
	text-decoration: none;
	color: inherit;
    font-weight: 800;
	
	padding-bottom: 4px;
}

.header-left a:hover {
text-decoration: none;
	color: #FF7B2E;
	
}
.header-right a {
	text-decoration: none;
	color: inherit;
	font-weight: 800;
	
	padding-bottom: 4px;
	position: relative;
}

.header-right a:hover {
	text-decoration: none;
	color: #FF7B2E;
	
}

.header-btn {
	position: relative;
}


.header-btn:hover::after {
	content: 'Yes!!';
	position: absolute;
	display: inline-block;
	top: 2.2vw;
	left: 3.6vw;
	font-family: 'Libre Baskerville', serif;
	font-size: 1.4em; 
	transform: rotate(-2deg)
}  

@media (max-width: 750px) {
	header {
		width: 100%;
	}
.header-left a {
	width: 100%;
	line-height: 100%;
	display: inline-block;
	align-content: center;
	text-align: center;
	margin: 0 auto;
	font-size: 0.8em;
 color: #333;
}
	
	
	.header-right {
		display: none;
	}


.header-left a:active {
text-decoration: none;
	color: #F89532;

}
}


.top-wrapper .container {
	display: flex;
	width: 100%;
	position: relative;
	
	margin-top: 80px;
	margin-bottom: 132px;
}

@media (max-width: 750px) {

.top-wrapper .container {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 10vw;
	margin-bottom: 14vw;
}
}


.scroll-bar {
	position: fixed;

	transform: rotate(-90deg);
	top: 570px;
	left: -30px;
	box-sizing: border-box;
}

.scroll-bar p {
	position: relative;
  font-size: 0.7em;
  padding: 0 40px;
	
}


/*ここ、横線が上手く作れなかった部分*/

.scroll-bar p::before, .scroll-bar p::after {
	content: '';
	position: absolute;
	text-emphasis-position: 50%;
	display: block;
	width: 40px;
	height: 0.2px;
	background-color: #333333;
	top: 50%;
	
}

.scroll-bar p::before {
	left: -20px;
	
}

.scroll-bar p::after {
	right: -20px;
}

/*ここまで*/
@media (max-width: 750px) {
.scroll-bar {
	width: 100%;
	position: static;
    text-align: center;
	transform: rotate(0);
	top: 0;
	left: 0;
	box-sizing: border-box;
}

.scroll-bar p {
  position: relative;
  font-size: 0.7em;
  
	
  padding: 0 0.6vw;
	
	}
	.scroll-bar p::before, .scroll-bar p::after {
	content: '';
	position: absolute;
	text-emphasis-position: 50%;
	display: block;
	width: 4em;
	height: 0.2px;
	background-color: #333333;
	top: 50%;
	
}

.scroll-bar p::before {
	left: 20em;
	
}

.scroll-bar p::after {
	right: 20em;
}
}


.top-main {
	margin-left: 124px;
	margin-top: 30px;

}

.top-main h2 {
	font-size: 6.52vw;
	
	line-height: 114%;
	position: relative;
	    	font-weight: 800;
}

.top-main h2::before{
	content: '';
	display: block;
	background-image: url("../images/Top-left.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	width: 56px;
	height: 60px;
	position: absolute;
	top: -70px;
	left: -56px;
}



.top-main h2::after {
	content: '';
	background-image: url("../images/Top-right.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	width: 50px;
	height: 78px;
	position: absolute;
	top: -50px;
	left: 980px;
}




.top-main h3 {
margin-top: 80px;
	font-size: 14em;
	line-height: 36%;
	font-family: 'Roboto', sans-serif;
	    	font-weight: 900;
}

@media (max-width: 750px) {
	
	
.top-main {
	margin-left: 4vw;
	margin-top: 6.6vw;
    width: 100%;
}


.top-main h2 {
	font-size: 9.6vw;
	padding-left: 1vw;
	line-height: 120%;
	position: relative;
	    	font-weight: 800;
}

.top-main h2::before{
	content: '';
	display: block;
	background-image: url("../images/Top-left.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	width: 9vw;
	height: 9vw;
	position: absolute;
	top: -40px;
	left: -10px;
}



.top-main h2::after {
		content: '';
	background-image: url("../images/Top-right.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	width: 8vw;
	height: 11vw;
	position: absolute;
	top: 52px;
	left: 316px;
}




.top-main h3 {
	margin: 0.8vw;
	font-size: 27vw;
	line-height: 100%;

}
}

.top-sub {
	margin-top: 310px;	
	margin-left: -108px;
	
}
.top-sub p {
	margin-bottom: 18px;
	font-size: 0.8em;
	line-height: 220%;
	
}

@media (max-width: 750px) {
	.top-sub {
	
		width: 100%;
		margin: 0 auto;
	margin-top: 6vw;	
}
.top-sub p {
	font-size: 0.8em;
	margin-bottom: 6vw;
	text-align: center;
	line-height: 220%;
	
}
	
	.top-sub img {
		display: none;
	}
}

.middle-wrapper .container {
	width: 100%;
	
}

.middle-main {
	width: 44%;
	margin: 0 0 0 auto;
	line-height: 220%;
	padding-top: 30px;
	
}

.middle-main .intro {
	margin-bottom: 28px;
}

.intro p.jp {
	font-size: 13px;
	margin-left: 2em;
}
.middle-main .intro p.eng {
	position: relative;
	padding-left: 24px;
	display: block;
	font-size: 18px;
}

.middle-main .intro p.eng::before {
	content: '';
	width: 18px;
	height: auto;
	border-top: solid 1px #161616;
	border-right: solid 1px #161616;
	transform: rotate(-64deg);
	position: absolute;
	left: 0;
	top: 20px;
}

.intro span {
	font-weight: bold;
}

.intro .fav {
	font-weight: 400;
	border-bottom: solid 1px #232323;
	padding-bottom: 6px;
	margin-left: 8px;
}

.intro .fav:hover {
	
	border-bottom: solid 1px #FF7B2E;
	
}

.info6 .eng {
	margin-bottom: 0.8vw;
}

@media (max-width: 750px) {

.middle-main {
	width: 88%;
	margin: 0 auto;
	margin-top: 6vw;
	margin-bottom: 30vw;
	padding-left: 8vw;
	line-height: 200%;
}
	.middle-main .intro {
	margin-bottom: 6vw;
}


.middle-main .intro p.eng {
	font-size: 1.2em;
	padding-left: 1.6em;
	line-height: 180%;
	margin-bottom: 2.8vw;
}
	.intro p.jp {
	line-height: 200%;
}

.middle-main .intro p.eng::before {
	content: '';
	width: 1em;
	height: auto;
	border-top: solid 1px #161616;
	border-right: solid 1px #161616;
	transform: rotate(-64deg);
	position: absolute;
	left: 0;
	top: 2.2vw;
}

}




.middle-wrapper .middle-pics {
	position: relative;
	margin-bottom: 52vw;
	display: block;
	

}

.middle-pics::before {
	content: '';
	background-image: url("../images/Pic-left.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: 30px;
	height: 60px;
	position: absolute;
	left: 0;
	top: 0;
}

.middle-pics .dog,.middle-pics .dog2 {
	position: absolute;
	top: 40px;
	left: 220px;
	z-index: 3;
}

.middle-pics .dog {
opacity: 0;
	z-index: 10;
}

.middle-pics .travel,.middle-pics .travel2 {
	position: absolute;
	top: 90px;
	left: 400px;
	z-index: 2; 
}

.middle-pics .travel {
opacity: 0;
	z-index: 10;
}


.middle-pics .nature,.middle-pics .nature2{
	position: absolute;
	top: 56px;
	left: 700px;
	z-index: 1;
}
.middle-pics .nature {
opacity: 0;
	z-index: 10;
}

/*opacityにtransitionを効かせてる*/
.middle-pics .top-position {
transition: 0.7s;
	opacity: 1;
}

.middle-pics .girl{
	position: absolute;
	top: -250px;
	left: 100px;
	z-index: 4;
	display: block;
}

/*後ろに四角を入れたいけど、出来ない*/

.middle-wrapper .middle-pics::after {
	content: '';
	display: block;
	width: 360px;
	height: 360px;
	position: absolute;
	background-color: #FF7B2E;
	z-index: 1;
	top: -160px;
	left: 60px;
}

.middle-pics .circles{
	position: absolute;
	top: -480px;
	left:-30px;
}

@media (max-width: 750px) {
	
.middle-wrapper .middle-pics {
	position: relative;
	padding-bottom: 110vw;
	
	display: block;
	

}

.middle-pics::before {
	content: '';
	background-image: url("../images/Pic-left.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	width: 5vw;
	height: 12vw;
	position: absolute;
	
	left: 20px;
	top: -20px;
	
}

.middle-pics .dog,.middle-pics .dog2 {
	position: absolute;
	width: 68vw;
	height: auto;
	top: 250px;
	left: 110px;
	
}
.middle-pics .travel,.middle-pics .travel2 {
	position: absolute;
	width: 68vw;
	height: auto;
	top: 380px;
	left: 0;
	
}

.middle-pics .nature,.middle-pics .nature2{
	width: 70vw;
	height: auto;
	position: absolute;
	top: 540px;
	left: 100px;
	
}

.middle-pics .girl{
	width: 78vw;
	height: auto;
	position: static;
	top: 0;
	left: 0;
	
    margin-top: 20vw;
	margin-left: 14vw;
}

/*後ろに四角を入れたいけど、出来ない*/

.middle-wrapper .middle-pics::after {
	content: '';
	display: block;
	width: 66vw;
	height: 46vw;
	
	z-index: -10;
	top: 60px;
	left:30px;
}

.middle-pics .circles{
	position: absolute;
	width: 97vw;
	height: auto;
	top: -90px;
	left: 30px;
	z-index: -5;
}
}



.skills-wrapper h2 {
line-height: 88%;
	font-size: 10.6em;
	margin-left: 4.6vw;
	
	
}

.skills-list {
	
	border-top: solid 1px #333333;
	border-bottom: solid 1px #333333;
	margin-top: 4px;
	margin-bottom: 70px;
	
	
   
}

.skill-scroll {
	display: flex;
	padding-top: 63px;
	padding-bottom: 53px;
	padding-left: 100px;
	padding-right: 100px;
	justify-content: center;
	margin-bottom: 10px;
  
}

.s-list {
	border-right: solid 1px #333;
	padding-right: 74px;
	padding-left: 74px;
	
	
}


.sec-right {
	border-left: solid 1px #333;
}

.s-list ul li {
	list-style: none;
	line-height: 280%;
}

.s-list ul li:last-child(){
	margin-bottom: 0;
}

.s-list li.passion {
	font-weight: bold;
	position: relative;
}


.s-list li.passion::after {
	content:'';
	background-image:url("../images/passion.png");
	background-size: cover;
	background-repeat: no-repeat;
	
	position: absolute;
	display: block;
	width: 24px;
	height: 24px;
	right: -22px;
	top: 0.5vw;
	
}

@media (max-width: 750px) {
	

.arrow {
	position: relative;
	display: block;
	
	margin-top: 3vw;
	margin-left: 4vw;

	
}
	
.arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 5em;
	display: block;
	width: 6em;
	height: 1px;
	background-color: #333;
	
}
.arrow::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 10em;
	display: block;
	width: 1em;
	height: 1em;
	border-bottom: solid 1px #333;
	border-right:solid 1px #333;
	margin-top: -0.5em;
	transform: rotate(-45deg);
}


.skills-wrapper h2 {

	font-size: 10em;
	margin-left: 0;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	
	
}

.skills-list {
	
	margin-top: 5vw;
	margin-bottom: 9.4vw;
	padding-bottom: 4vw;
	overflow: hidden;
}
	
	
.skill-scroll {
	display: flex;
	padding-top: 62px;
	padding-bottom: 62px;
	margin-bottom: 10px;
	padding-left: 100px;
	padding-right: 100px;
	justify-content: flex-start;
	overflow-x: scroll;
	
     position: relative;
	
}

.s-list {
		
	padding-right: 9.8vw;
	padding-left:  9.8vw;
	box-sizing: border-box;
	line-height: 280%;
}

	.s-list ul {
	width: 10em;
	text-align: center;
	}




}


.skills-main {
	width: 60%;
	margin: 0 auto;
	align-content: center;
	margin-bottom: 8vw;
}

@media (max-width: 750px) {
	
.skills-main {
	width: 70%;
	margin: 0 auto;
	align-content: center;
	margin-bottom: 8vw;
}
}
.s-main-top,.s-main-sec {
	
	font-weight: bold;
	margin-bottom: 70px;
	line-height: 220%;
}

.s-main-sec p span {
	padding-left: 0.6em;
	padding-right: 0.6em;
}


.s-main-top p span,.s-main-sec p span {
	color: #FF7B2E;
}

.s-profile {
	margin-bottom: 60px;
	line-height: 220%;
}
.s-profile h3 {
	font-weight: bold;
	position: relative;
	padding-left: 30px;
	margin-bottom: 20px;
}
.s-profile h3::before {
	content: '';
	position: absolute;
	text-emphasis-position: 50%;
	display: block;
	width: 18px;
	height: 2px;
	background-color: #333333;
	top: 1em;
	left: 0;

}
.s-profile p {
	line-height: 240%;
}

.works-title {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	border-top: solid 1px #333;
	border-bottom: solid 1px #333;
	margin-top: 66px;
	margin-bottom: 66px;
padding-top: 30px;
		padding-bottom: 30px;


}

@keyframes hscroll2 {
	0% { transform:translateX(4px); }
	100% { transform: translateX(-100%); }
}

.works-title ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	animation: hscroll2 80s linear infinite;
}
.works-title ul li {
	display: inline-block;
	font-size: 169px;
	white-space: nowrap;
	font-weight: 800;
	padding-right: 8vw;
letter-spacing: -0.02em;
	line-height: 90%;
}

@media (max-width: 750px) {
	
.works-title {
	
	margin-top: 6vw;
	margin-bottom: 3vw;
padding-top: 4vw;
		padding-bottom:2.8vw;


}


.works-title ul li {
	font-size: 9em;

;
letter-spacing: -0.03em;
}
	.s-main-sec p span {
	padding-left: 0;
	padding-right: 0.6em;
}

}

.w-images,.w-images2 {
	display: flex;
	background-color: #DEDEDE;
	padding-top: 20px;
		padding-bottom: 20px;

}

.w-images img,.w-images2 img {
		filter: grayscale(100%);
		transition: all 0.3s ease-in;
	box-shadow:5px 10px 20px rgba(0,0,0,0.25);;
	}
	
	.w-images:hover img,.w-images2:hover img {
		filter: grayscale(0%);
	}




@media (max-width: 750px) {
.w-images img,.w-images2 img {
		filter: grayscale(0%);
		transition: all 0.3s ease-in;
	box-shadow:5px 10px 20px rgba(0,0,0,0.25);;
	}
	
	.w-images:hover img,.w-images2:hover img {
		filter: grayscale(0%);
	}

	
.w-images,.w-images2 {
	display: flex;
	overflow-x: scroll;
	padding-top: 6.8vw;
		padding-bottom: 6.8vw;
	margin-bottom: 2vw;
}
	


	

}


.w-contents .container {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 102px;
	
}

.w-name {
	text-align: center;
	
}

.w-name h3 {
	
	font-size: 6vw;
	line-height: 120%;
	
	
	
}

.w-detail {
	display: flex;
	justify-content: center;
	margin-top: 50px;
}
@media (max-width: 750px) {
	.w-contents .container {
	padding-top: 6vw;
	margin-bottom: 14vw;
	
}


.w-name h3 {
	
	font-size: 14vw;
	line-height: 130%;
	
	
	
}

	.w-detail {
	
		flex-direction: column;
	
	margin-top: 0;
}
}


.details {
	width: 352px; 
}

.d-second {
	margin-right: 40px;
	margin-left: 40px;

}
.details h3{
	margin-bottom: 20px;
	
	font-size: 1.2vw;
	font-weight: bold;
	position: relative;
	padding-left: 34px;
}

.details h3::before {
	content: '';
	position: absolute;
	text-emphasis-position: 50%;
	display: block;
	width: 19px;
	height: 1.8px;
	background-color: #333333;
	top: 1.2em;
	left: 0;

}

.details p{
	line-height: 200%;
}

@media (max-width: 750px) {
	
.d-second {
	margin-right: 0;
	margin-left: 0;
	margin: 0 auto;

}
.details {
	width: 70%; 
	margin: 0 auto;
	margin-top: 10vw;
}


.details h3{
	margin-bottom: 5vw;
	font-weight: bold;
	font-size: 4vw;
	
	position: relative;
	padding-left: 6vw;
}

.details h3::before {
	content: '';
	position: absolute;
	text-emphasis-position: 50%;
	display: block;
	width: 1em;
	height: 2px;
	background-color: #333333;
	top: 5.5vw;
	left: 0;

}

.details p{
	line-height: 200%;
}
}






.holder {
	width: 100%;
	padding-top: 30px;
	padding-bottom: 30px;
	
	overflow-x: hidden;
	overflow-y: hidden;
}

@media (max-width: 750px) {
.holder {
	overflow-x: scroll;
}
}


.inner {
	width: 200%;
	height: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
.box {
	
	height: auto;
	text-align: center;
	padding-left: 1.8%;
	padding-right: 1.8%;
	box-sizing: border-box;
	padding-top: 0.8%;
	padding-bottom: 0.8%;
}
.w-images .box:nth-child(1) {
	width: 12%;
	padding-left: 0%;
}
.w-images .box:nth-child(2) {
	width: 24%;
}
.w-images .box:nth-child(3) {
	width: 10%;
}
.w-images .box:nth-child(4) {
	width: 12%;
}
.w-images .box:nth-child(5) {
	width: 12%;
}
.w-images .box:nth-child(6) {
	width: 12%;
	padding-right: 0%;
}

.w-images2 .box:nth-child(1) {
	padding-left: 0%;
	width: 12%;
}
.w-images2 .box:nth-child(2) {
	width: 20%;
}
.w-images2 .box:nth-child(3) {
	width: 12%;
}
.w-images2 .box:nth-child(4) {
	width: 11%;
}
.w-images2 .box:nth-child(5) {
	width: 12%;
}
.w-images2 .box:nth-child(6) {
	width: 11%;
	padding-right: 0%;
}
.box img {
	width: 100%;
	height: auto;
}



.coming-soon .container {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 100px;

}



.coming-soon p {
	
	font-size: 2.88em;
}





.contact-wrapper {
	position: relative;
	padding-top: 84px;
	padding-bottom: 84px;
	border-top: solid 1px #333;
	border-bottom: solid 1px #333;
}
@media (max-width: 750px) {
	
.coming-soon .container {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding-top: 5.4vw;
	padding-bottom: 20vw;

}



.coming-soon p {

	font-size: 3em;
}





.contact-wrapper {
width: 100%;
	padding-top: 0;
	padding-bottom: 0;
	
}
}


.say-hi {
	
		height: 246px;
	
}


.say-hi h2 {
	line-height: 120%;
	font-size: 16.4vw;
	text-align: center;
	
}

.contact-wrapper:hover .say-hi h2 {
	display: none;	
}


a.contact {
	font-size: 12.4vw;
	letter-spacing: -0.07em;
	width: 100%;
	font-weight: bold;
	line-height: 222%;
	position: absolute;
	top: 50%;
	left: 50%;
	color:#F7F7F7;
	text-shadow: -1.6px -1.6px 0 #FF7B2E, -1.6px 0 0 #FF7B2E, -1.6px 1.6px 0 #FF7B2E,
                  0 -1.6px 0 #FF7B2E,0 1.6px 0 #FF7B2E,1.6px -1.6px 0 #FF7B2E, 1.6px 0 0 #FF7B2E,  1.6px 1.6px 0 #FF7B2E;
	background-color:  #F7F7F7;
	border: solid 1.8px #FF7B2E;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: block;
	opacity: 0;
	text-decoration: none;
		transition: 2s;
}




body.darktheme a.contact {
	font-size: 11vw;
	letter-spacing: -0.07em;
	width: 100%;
	font-weight: bold;
	line-height: 250%;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #F4ECCD;
  background-color: #F4ECCD;
	border: solid 1.8px #474747;
	text-shadow: -1.6px -1.6px 0 #474747, -1.6px 0 0 #474747, -1.6px 1.6px 0 #474747,
                  0 -1.6px 0 #474747,                  0 1.6px 0 #474747,
                1.6px -1.6px 0 #474747, 1.6px 0 0 #474747,  1.6px 1.6px 0 #474747;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: block;
	opacity: 0;
	text-decoration: none;
		transition: 2s;
}



.contact-wrapper:hover a.contact {
	display: block;
	opacity: 1;
	transition: 2s;
	
}
@media (max-width: 750px) {
	.say-hi {
	widows: 100%;
		height:50vw;;
	
}


.say-hi h2 {
	line-height: 200%;
	font-size: 23vw;
	text-align: center;
}

.contact-wrapper:hover .say-hi h2 {
	display: none;	
}


a.contact {
	font-size: 13vw;
	letter-spacing: -0.07em;
	line-height: 384%;

	
}



.contact-wrapper:active a.contact {
	display: block;
	
}
}
footer {
	width: 100%;
	margin: 0 auto;
	
}

.footer-top {
	text-align: center;
	margin-top: 66px;
	margin-bottom: 62px;
	line-height: 180%;
}

.footer-top p.jpn {
	margin-top: 2vw;
	font-size: 0.8em;
}
.footer-bottom {
	text-align: center;
	padding-bottom: 136px;
}

.footer-bottom nav{
	list-style: none;
	display: flex;
	justify-content: center;
}
.footer-bottom nav li {
	
		width: 5.6vw;
	margin-right: 60px;
	margin-left: 60px;
}




.footer-bottom nav li a{
	text-decoration: none;
	color: inherit;
	padding-bottom: 2px;

	font-weight: bold;
	
}

.footer-bottom nav li a:hover{
	text-decoration: none;
	color: #F89532;
	
}


@media (max-width: 750px) {



.footer-top {
	
	margin-top: 20vw;
	margin-bottom: 20vw;
	line-height: 180%;
}

.footer-bottom {
	text-align: center;
	padding-bottom: 18vw;
}

.footer-bottom nav{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.footer-bottom nav li {
	line-height: 100%;
		width: 50vw;
	margin-right: 4vw;
	margin-left: 4vw;
	margin-bottom: 12vw;
}




.footer-bottom nav li a{
	width: 50%;
	text-decoration: none;
	color: inherit;
	margin-right: 4vw;
	padding-bottom: 2px;
	
	
}

.footer-bottom nav li a:hover{
	text-decoration: none;
	color: #F89532;
	
}
}