@charset "UTF-8";
/* CSS Document */


@font-face{
font-family: 'Cardo', serif;
font-family: 'Shippori Mincho B1', serif,'Noto Sans JP', sans-serif;
font-weight: 100,200,300,400,500,600;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}

@font-face {

  font-weight: normal;
  font-style: normal;
}

@keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}

@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}


html{
	font-size:62.5%; /*16px×62.5%=10px*/
}

body{
	color: #FFFFFF;
    background-color: #051C1B;	
	font-family: 'Cardo', serif ,'Shippori Mincho B1', serif;
	font-size: 1.6rem;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	letter-spacing: 0.025rem;
}

li{
	list-style: none;
}

button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	-webkit-appearance: none;
	   -moz-appearance: none;
	appearance: none;
}

img{
	max-width: 100%;
	height: auto;
}

a{
	color: #FFFFFF;
	text-decoration:none;
}

p{
	text-align: center;
}




/*---------------------
header
---------------------*/
.header{
	position: absolute;
}

.nav-container{
	position: fixed;
	top: 40px;
	left: 55px;
	z-index: 1;
}

.nav-text{
	font-weight: 100;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	margin-bottom: 24px;
	position: relative;
}

.nav-text:hover{
	letter-spacing: 0.2em;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
	
}


.line::after{
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #ffffff;
	bottom: -2px;
	-webkit-transform: scale(0,1);
	    -ms-transform: scale(0,1);
	        transform: scale(0,1);
	-webkit-transform-origin: left top;
	    -ms-transform-origin: left top;
	        transform-origin: left top;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
}

.line:hover::after{
	-webkit-transform: scale(1,1);
	    -ms-transform: scale(1,1);
	        transform: scale(1,1);
}


.nav-border{
	width: 40px;
}

.icon-container{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.icon{
	margin-right: 20px;	
}

.nav-text.icon:hover{
	-webkit-transform: scale(1.5,1.5);
	    -ms-transform: scale(1.5,1.5);
	        transform: scale(1.5,1.5);
	opacity: 0.7;
}

.icon-size{
	font-size: 1.4rem;
}



.nav-logo{
	width: 100px;
	position: fixed;
	left: 48px;
	bottom: 56px;
	z-index: 1;
}

.nav-logo:hover{
	-webkit-transform: scale(1.2,1.2);
	    -ms-transform: scale(1.2,1.2);
	        transform: scale(1.2,1.2);
	opacity: 0.7;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
}

.header_hamburger{
	display: none;
}

/*---------------------
modal
---------------------*/
.modal{
	position: fixed;
	margin: auto;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
	z-index: 100;
	
}

.modal-inner{
  position: absolute;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 600px;
  height: 480px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0 auto;
  background-color: rgba(152,181,180,0.9);
  color: #051C1B;	
  padding: 40px;
  text-align: center;
  line-height: 3rem;
  font-size: 1.5rem;
  font-family: Noto Sans JP;
  letter-spacing: 0.1em;
 
}

.br-sp{
	display: none;
}

.br-sp-title{
	display: none;
}

.mb16{
	margin-bottom: 16px;
}

.modal-btn{
	padding: 12px 40px;
	border: solid 1px #051C1B;
	letter-spacing: 0.1em;
	background-color: #051C1B;	
	text-transform: uppercase; 
	font-family: 'Cardo', serif ;

}


.modal-btn:hover {
  background-color: #fff;
  border-color: #051C1B;
  letter-spacing: 0.2em;
  color: #051C1B;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;

}



/*---------------------
top
---------------------*/
.bg{
	background: -webkit-gradient(linear,left top, left bottom,from(#051C1B),color-stop(#daf5ea),to(#051C1B)); 
	background: -o-linear-gradient(top,#051C1B,#daf5ea,#051C1B); 
	background: linear-gradient(to bottom,#051C1B,#daf5ea,#051C1B);
	
}

.section-top{
	margin: 0 auto 160px;
	padding-left: 70px;
}

.top-visual{
	margin: 0 auto 24px auto;
	width: 70vw;
}

.top-visual-sp{
	display: none;
}

.menoko-firstlogo{
	text-align: center;
	width: 30vw;
	margin: 0 auto;

}

.logo-text{
	font-size: 1.6rem;
}

/*---------------------
movie
---------------------*/

.section{
	position: relative;
	width: 860px;
	margin: 0 auto 240px;
	padding-left: 70px;
	
}

.movie{
    width: 860px;
	margin-bottom: 16px;
}

.text{
	font-size: 1.2rem;
	font-weight: 100;
	letter-spacing: 0.1em;
	text-align: left;
}

.section-animation-sp{
	display: none;
}

/*---------------------
tsuta-1
---------------------*/

.illust1{
	position: relative;
	margin-bottom: 40px;
}

.tsuta-01_PC{
	position: absolute;
	top: -150px;
	width: 33vw;
}

.tsuta-01_sp{
	display: none;
}

.menoko-01_pc{
	position: absolute; 
	right: 10vw;
	bottom: -50px;
	width: 120px;
}

.element {
/* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(30px);
      -ms-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: opacity 2s, visibility 2s, -webkit-transform 2s;
  transition: opacity 2s, visibility 2s, -webkit-transform 2s;
  -o-transition: opacity 2s, visibility 2s, transform 2s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
  		  transform: translateX(0);
}


/*---------------------
concept
---------------------*/

.section-concept{
	position: relative;
	width: 860px;
	padding-left: 70px;
	padding-top: 120px;
	margin: 0 auto 240px;
	
}

.title-text{
	font-size: 3rem;
	font-weight: 100;
	letter-spacing: 0.5em;
	line-height: 2.7rem;
	margin-bottom: 72px;
	text-align: right;

	
}

.concept{
	text-align: right;
}


.text-contents{
	 -ms-writing-mode: tb-rl;
	-webkit-writing-mode: tb-rl;
	-o-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	font-size: 1.7rem;
	letter-spacing: 0.5rem;
	line-height: 4rem;
	text-align: left;
	padding-bottom: 4vw;

}

.section4{
	padding: 200px 0 0;
	position: relative;
}

.section4-inner{
	position: absolute;
	right: 0;
	top: -14vw;
	width: 40vw;
}

.section-title{
	text-align: center;
	font-size: 2.7rem;
	font-weight: 100;
	margin-bottom: 8px;
}

.section-title.green{
	color: #051C1B;
}

.section-title-jp{
	letter-spacing: 0.2em;
}

.section-title-jp.green{
	color: #051C1B;
}

.mb160{
	margin-bottom: 160px;
}

.section4-inner-sp{
	display: none;
}

/*---------------------
animation
---------------------*/
.section-animation{
	width: 100vw;
	margin: 0 auto 0 auto;
	text-align: center;	
	overflow: hidden;
}

	
.animation-wrapper.video1-wrap{
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 300px;
}

.pc-wrapper{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	    -ms-flex-direction: row-reverse;
	        flex-direction: row-reverse;
	margin-left: 40px;
	margin-bottom: 300px;
}


.video1{
	width: 45vw;
	margin-bottom: 16px;
}

.flex{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.video2-wrap{
	-ms-align-items    : flex-start;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-left: 100px;
}

.video2{
	width: 35vw;

}

.video3-wrap{
	padding-top: 100px;
}

.video3{
	width: 26vw;
}

.animation-wrapper.video4-wrap{
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 300px;
}

.video4{
	width: 68vw;
}

.video5{
	width: 26vw;
	margin-left: 16px;
}

.video6-wrap{
	padding-top: 160px;
}

.video6{
	width: 24vw;
}

.caption{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-flow: column;
	        flex-flow: column;
	padding-left: 16px;
}

.num{
	width: 11px;
	margin-bottom: 4px;
	padding-left: 2px;
}


.animation-text{
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	color: #051C1B;
	text-transform: uppercase;
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
}

.slick-prev {
    left: 18vw;
    z-index: 2;
}

.slick-next{
	right: 18vw;
    z-index: 2;
}

.slick-center li{
	opacity: 1;
	-webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}


.ani_text{
	text-align: left;
	font-size: 1.3rem;
	margin-bottom: 160px;
}

.tsuta-03_sp{
	display: none;
}

.relative{
	position: relative;
}

.tsuta-01_PC:last-child{
	top: -240px;
	
} 
	


/*---------------------
illust
---------------------*/

.section-illust{
	width: 100vw;
	margin: 80px auto 200px;
}

.illust-slider img{
	width: auto;
	height: 80vh;
	-o-object-fit: cover;
	   object-fit: cover;
	margin: 0 30px;
    opacity: .3;
	-webkit-transform: scale(.8);
	    -ms-transform: scale(.8);
	        transform: scale(.8);
	-webkit-transition: opacity .5s, -webkit-transform .5s;
	-o-transition: opacity .5s, transform .5s;
	transition: opacity .5s, transform .5s;
	transition: opacity .5s, transform .5s, -webkit-transform .5s;
}

.slick-center img{
	opacity: 1;
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
}

.illust-sp-wrapper{
	display: none;
}

/*---------------------
colum
---------------------*/

.section-colum{
	position: relative;
	width: 860px;
	margin: 0 auto 160px;
	padding-left: 70px;
	
}

.menoko-secondlogo{
	width: 250px;
	margin: 80px auto;

}

.colum-container{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
}

.colum-inner{
	background-color:rgba(255,255,255,0.1);
	width: 340px;
	padding: 32px;
	text-align: center;
	
}

.colum-title{
	font-size: 2rem;
	letter-spacing: 0.1em;
	margin-top: 8px;
	margin-bottom: 16px;
	
}


.colum-text{
	font-size: 1.3rem;
	font-weight: 100;
	letter-spacing: 0.2em;
	line-height: 2.2rem;
	margin-bottom: 16px;
}


.colum-img{
	width: 300px;
	margin: 8px auto;
}

.db{
	display: block;
}

.colum-btn{
	border: solid 1px;
	padding: 12px;
	width: 180px;
	margin: 16px auto 8px auto;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	
}

.colum-btn:hover{
	background: #ffffff ;
	color: #051C1B;
	border: solid 1px #ffffff;
	letter-spacing: 0.2em;
}

.colum-btn_text{
	font-size: 1.6rem;
	letter-spacing: 0.1em;
}

.cs-btn{
	position: relative;
	border: solid 1px;
	height: 41px;
	width: 180px;
	margin: 16px auto 8px auto;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}

.cs-btn_text{
	position: absolute;
    left: 50%;
    top:50%;
	-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
		transform:translate(-50%,-50%);
   /*アニメーションの指定*/
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
  /*ブロック要素にしてテキスト折り返しなし*/  
  	display: block;
  	white-space: nowrap;
}


.cs-btn span:nth-child(2){
	opacity: 0;
}

.cs-btn:hover span:nth-child(1){
	opacity: 0;
}

.cs-btn:hover span:nth-child(2){
	opacity: 1;
}

.pl40{
	padding-left: 40px;
}

.ml40{
	margin-left: 20px;
}

/*---------------------
profile
---------------------*/

.section-profile{
	position: relative;
    width: 860px;
    margin: 0 auto 80px;
    padding-left: 70px;
}

.profile-container{
	display: block;
	margin-bottom: 160px;
}

.profile-photo{
	margin: 0 auto;
	text-align: center;
}

.kaju-zoe{
	text-align: center;
	width: 300px;
	margin: 0 auto 40px;
}

.profile{
	width: 600px;
	font-size:1.3rem;
	letter-spacing: 0.2em;
	line-height: 3rem;
	margin: 0 auto;
	
}

.t-left{
	text-align: left;
	
}

.m40{
	margin: 40px 0;
}

.mb40{
	margin-bottom: 40px;
}

.pl20{
	padding-left: 20px;
}

.mb400{
	margin-bottom: 400px;
}

.end-logo-box{
	display: none;
}


/*---------------------
footer
---------------------*/

.footer-mb{
	padding-bottom: 56px;
}

.footer-container{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}


.copy-text{
	font-size: 1.2rem;
}


@media screen and (max-width: 920px) {
		
/*---------------------
top
---------------------*/
	
	.top-visual-sp{
		display: none;
	}
	
/*---------------------
movie
---------------------*/
	.section.element{
		text-align: center;
		width: 100vw;
		padding-left: 0;   
	}
	
	.movie{
		width: 85vw;
	}
	
	.text-sp{
		display: block;
		text-transform: uppercase; 
		font-size: 1.5rem;
		text-align: center;
	}
	
/*---------------------
concept
---------------------*/
	.section-concept{
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		width: auto;
	}
	
	.title-text{
		width: 720px;
		margin: 0 auto 72px;
	}
	
	.concept{
		text-align: center;
	}
	
	.text-contents{
		width: 720px;
		font-size: 1.5rem;
	}
	
/*---------------------
animation
---------------------*/
	.section4{
		padding: 40px 0 0;
	}
	
	.pc-wrapper{
		display: block;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		margin-left: 0;
	}

	.video1{
		width: 70vw;
	}
	
	.video2-wrap{
		margin-left: 0;
		margin-bottom: 300px;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: row-reverse;
		        flex-direction: row-reverse;
	}
	
	.video2{
		width: 60vw;
		padding-left: 16px;
	}
	
	.video3-wrap{
		padding-top: 0;
	}
	
	.video3{
		width: 50vw;
	}
	
	.animation-wrapper.video4-wrap{
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
	}
	
	.video4{
		width: 90vw;
	}
	
	.video2-wrap.video5-wrap{
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
	}
	
	.video5{
		width: 50vw;
		margin-left: 16px;
	}
	
	.video6-wrap{
		padding-top: 0;
	}
	
	.video6{
		width: 50vw;
	}
	
	.caption{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
  		-webkit-box-orient: vertical;
  		-webkit-box-direction: normal;
  		    -ms-flex-flow: column;
  		        flex-flow: column;
		padding-left: 16px;
	}
	
	.num{
		width: 11px;
		margin-bottom: 4px;
		padding-left: 2px;
	}
	
	.num_sp{
		width: 13px;
		margin-bottom: 4px;
		padding-left: 2px;
	}
	
	.animation-text{
		font-size: 1.4rem;
		letter-spacing: 0.1em;
		color: #051C1B;
		text-transform: uppercase;
  		-webkit-writing-mode: vertical-lr;
  		-ms-writing-mode: vertical-lr;
		 	writing-mode: vertical-lr;
	}
	
	.tsuta-01_PC:last-child{
		display: none;
	}
	
/*---------------------
illustration
---------------------*/
	.section-illust{
		margin: 80px auto 120px;
	}
	
	
	.illust-slider{
		display: none;
	}
	
	.illust-sp-wrapper{
		display: block;
		margin-bottom: 200px;
	}
	
	.illust-sp{
		width: 85vw;
		margin: 0 auto 80px;
	}
	
/*---------------------
colum
---------------------*/
	.section-colum{
		width: auto;
		padding-left: 0;
		margin-bottom: 200px;
	}
	
	.colum-container{
		display: block;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
	
	.colum-inner{
		width: 50vw;
		margin: 0 auto 64px;
	}
	
	.colum-text{
		font-size: 1.4rem;
	}
	
/*---------------------
profile
---------------------*/
	.section-profile{
		width: 100vw;
		padding-left: 0;
	}
	
	.profile-container{
		display: block;
		width: 600px;
		margin: 0 auto;
	}
	
	
	
	.kaju-zoe{
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 64px;
	}
}


@media screen and (max-width: 720px) {
	

	
/*---------------------
header
---------------------*/
	.header{
		position: fixed;
		z-index: 2;
	}
	
	.nav-container{
		position: absolute;
		background-color: rgba(152,181,180,0.9);
		top: 0;
		margin-left: auto;
		margin-right: 0;
		margin-top: 0;
		width: 90vw;
		height: 100vh;
		-webkit-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		        transform: translateX(100%);
		-webkit-transition: ease .4s;
		-o-transition: ease .4s;
		transition: ease .4s;
	}
	
	.nav{
		margin-top: 100px;
		margin-left: 64px;
		width: 40vw;
	}
	
	.nav-text{
		font-size: 2rem;
		margin-bottom: 40px;
	}
	
	.nav-text:last-child{
		margin-bottom: 64px;
	}
	
	.nav-border{
		display: none;
	}
	
	.icon-container{
		margin-left: 64px;
	}
	
	.icon{
		margin-right: 48px;
	}
	
	.nav-text.icon:hover{
	-webkit-transform: scale(1,1);
		-ms-transform: scale(1,1);
			transform: scale(1,1);
	opacity: 0.7;
	}
	.icon-size{
		font-size: 3rem;
	}
	
	.nav-logo{
		display: none;
	}
	
	.header_hamburger{
		position: absolute;
		display: block;
		width: 28px;
		height: 100%;
		top: 32px;
		left: 85vw;
	}
	
	.hamburger{
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
	}
	
  .hamburger span {
  width: 100%;
  height: 1px;
  background-color: #000;
  position: relative;
  -webkit-transition: ease .4s;
  -o-transition: ease .4s;
  transition: ease .4s;
  display: block;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 8px 0;
}

.hamburger span:nth-child(3) {
  top: 0;
}


/* ハンバーガーメニュークリック後のスタイル */
.nav-container.active {
-webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
  top: 5px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;

}

.hamburger.active span:nth-child(3) {
  top: -13px;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
	
	
/*---------------------
modal
---------------------*/	
	.modal-inner{
		position: absolute;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 85vw;
		height: auto;
		padding: 24px 24px 40px;
		line-height: 2.5rem;
		top: 45%;
		left: 50%;
		-webkit-transform:translate(-50%, -50%);
		-ms-transform:translate(-50%, -50%);
		transform: translate(-50%, -50%);
		font-size: 1.4rem;
	}
	
	.mb40{
		margin-bottom: 24px;
	}
	
	.br-pc{
		display: none;
	}
	
	.br-sp{
		display: block;
	}
	
	.br-sp-title{
		display: block;
	}
	
/*---------------------
top
---------------------*/	
	.top{
		position: relative;
	}
	
	.top-visual{
		display: none;
	}

	.top-visual-sp{
		display: block;
		width: 100vw;
	}
	
	.menoko-firstlogo{
		width: 250px;
		margin-top: 16px;
	}
	
	
	.scrolldown1{
	  text-align:center;
	  position:absolute;
      left:50%;
      bottom:-15%;
      /*全体の高さ*/
      height:50px;
		
	}
	
	.scrolldown1::after{
	  content: "";
		/*描画位置*/
	  position: absolute;
	  top: 0;
		/*線の形状*/
	  width: 1px;
	  height: 30px;
	  background: #eee;
		/*線の動き1.4秒かけて動く。永遠にループ*/
	  -webkit-animation: pathmove 1.4s ease-in-out infinite;
	          animation: pathmove 1.4s ease-in-out infinite;
	  opacity:0;
	}
	
	.scrolldown1 span{
	  position: absolute;
      left:-15px;
      top: -15px;
		 
	}
	
/*---------------------
main
---------------------*/	
	.section{
		width: 100vw;
		padding-left: 0;
		margin-bottom: 40px;
	}
		
/*---------------------
movie
---------------------*/
	
	.tsuta-01_PC{
		display: none;
	}
	
	.menoko-01_pc{
		display: none;
	}
/*---------------------
concept
---------------------*/
	.tsuta-01_sp{
		display: block;
		margin-top: 80px;
		margin-bottom: 40px;
		margin-left: auto;
		width: 92vw;
	}
	
	
	.section-concept{
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 88px 0 0;
	padding: 0 0 0 32px;
	}
	
	.title-text{
		width: 100%;
		margin-left: 0;
		text-align: left;
		letter-spacing: 0.2em;
		font-size: 2.3rem;
		margin-bottom: 40px;
	}
	
	.concept{
		text-align: left;
	}
	
	.text-contents{
		-ms-writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		        writing-mode: horizontal-tb;
		font-size: 1.4rem;
		line-height: 3rem;
		
	}
	
/*---------------------
animation
---------------------*/
	.section-title{
		font-size: 2.3rem;
	}
	
	.section-title-jp{
		font-size: 1.3rem;
	}

	.section4-inner{
		display: none;
	}
	
	.section4-inner-sp{
		display: block;
		margin-bottom: 40px;
		margin-right: auto;
		width: 92vw;
	}
	
	.tsuta-03_sp{
		display: block;
	}
	
	.animation-wrapper.video1-wrap{
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		margin-bottom: 160px;
	}
	
	.pc-wrapper{
		margin-bottom: 160px;
	}
	
	
	.video1{
		width: 83vw;
	}
	
	.video2-wrap{
		margin-bottom: 160px;
	}
	
	.video2{
		width: 79vw;
	}
	
	.video3-wrap{
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
	
	.video3{
		width: 63vw;
	}
	
	.animation-wrapper.video4-wrap{
		margin-bottom: 160px;
	}
	
	.video4{
		width: 85vw;
	}
	
	.video2-wrap.video5-wrap{
		-webkit-box-pack: right;
		    -ms-flex-pack: right;
		        justify-content: right;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: row-reverse;
		        flex-direction: row-reverse;
	}
	
	.video5{
		width: 62vw;
	}
	
	.video6{
		width: 62vw;
	}
	
/*---------------------
colum
---------------------*/
	.section-colum{
		width: 100vw;
		padding-left: 0;
	}
	
	.menoko-secondlogo{
		width: 60vw;
		margin: 0 auto 120px;
	}
	
	.colum{
		display: block;
		text-align: center;
		
	}
	
	.colum-container{
		display: block;
	}
	
	.colum-inner{
		width: 85vw;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		padding: 24px;
		margin: 0 auto 64px;
	}
	
	.colum-text{
		font-size: 1.3rem;
	}
	
/*---------------------
profile
---------------------*/
	.section.profole-section{
		margin-bottom: 200px;
	}
	
	.profile-container{
		display: block;
		width: 85vw;
		margin: 0 auto;
	}
	
	.profile-photo{
		width: 85vw;

	}
	
	.kaju-zoe{
		width: 85vw;
		margin: 0 0 40px;
	}
	
	.profile{
		width: 85vw;
		font-size: 1.3rem;
		margin: 0 auto;
	}
	
	
	.m40{
		margin: 80px 100px;
	}
	
/*---------------------
contact
---------------------*/
	.colum-title.contact{
		font-size: 1.4rem;
		line-height: 2em;
		letter-spacing: 0.2em;
	}
	
	
	.mb400{
		margin-bottom: 200px;
	}
	
	.end-logo-box{
		text-align: center;
	}
	
	.end-logo{
		width: 120px;
		margin: 0 auto 200px;
	}
	
	
}

@media screen and (max-width: 300px) {
	
/*---------------------
modal
---------------------*/	
	.modal-inner{
		width: 90vw;
		height: auto;
		padding: 24px 24px 32px;
		top: 45%;
		left: 50%;
		-webkit-transform:translate(-50%, -50%);
		-ms-transform:translate(-50%, -50%);
		transform: translate(-50%, -50%);
		font-size: 1.3rem;
	}
	
	.br-sp{
		display: none;
	}
	
	.br-pc{
		display: block;
	}
	
	.br-small{
		display: none;
	}
	
	
/*---------------------
concept
---------------------*/
	.section-concept{
		padding: 0 0 0 16px;
	}
	
	.title-text{
		font-size: 2.3rem;
		margin-bottom: 32px;
	}
	
	.text-contents{
		font-size: 1.4rem;
	}
	
/*---------------------
animation
---------------------*/
	.section-title{
		font-size: 2rem;
	}
	
	.section-title-jp{
		font-size: 1.5rem;
	}
	
	.caption{
		padding-left: 10px;
	}
	
	.video2{
		margin-left: 10px;
	}
	
	.video5{
		margin-left: 10px;
	}
	
	.num{
	width: 8px;
	margin-bottom: 4px;
	padding-left: 2px;
	}
	
	.num_4{
		width: 10px;
	}
	
	.animation-text{
		font-size: 1.1rem;
	}
	
/*---------------------
profile
---------------------*/	
	.profile{
		font-size: 1.2rem;
		line-height: 2.5rem;
	}
	
	.m40{
		margin: 48px 80px;
	}
	
/*---------------------
colum
---------------------*/	
	.colum-title{
		font-size: 1.8rem;
	}
	
	
	.colum-title.contact{
		font-size: 1.4rem;
	}
	
	.colum-text{
		font-size: 1.3rem;
	}
	
	.mb16{
		margin-bottom: 16px;
	}

	
	.cs-btn{
		width: auto;
	}
	
	.colum-btn.pl40{
		width: auto;
		padding-left: 12px;
	}
}