@charset "utf-8";

/* = base.php
----------------------------------------------- */

html,body {
  margin: 0; padding: 0; height: 100%; width: 100%; /* フッター固定に必要な記述 */
  max-width:100% !important;overflow-x:hidden;
  font-size:10px;
  }
body {
	font-family: "dnp-shuei-gothic-gin-std", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	letter-spacing:0.05em;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight:400;
	color: #1A1A1A;
	background-color:#E5E5E5;
	font-size:10px;}
	
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}	

.PC {
	display: block;}
.SP {
	display: none;}
a,a:link,a:visited,a:active {
	color: #777;}
a:hover {
	text-decoration: none;}

.contentWrap{
	min-height:100vh;
	width:100%;
	margin:0 auto;
	position:relative;
}



/* = header.php
----------------------------------------------- */

#skrollr-body {
  position: absolute; top: 0px; left: 0; height: 100%; width: 100%; /* フッター固定に必要な記述 */}
#wrap {
  width:100%;
  margin: 0 auto 0;
  min-height: 100%; /* フッター固定に必要な記述 */
  height: auto; /* フッター固定に必要な記述 */
  }
body.page:not(.home) #wrap {
	min-height: calc(100% - 45rem);
}
body.archive #wrap {
	min-height: calc(100% - 45rem);
}
  
  

.logoWrap{
	width:18%;
	position:fixed;
	top: 10%;
	left: 6%;
     z-index:999;
}
.pageHeader .logoWrap{
	width: 9%;
	top: 4%;
	left: 4%;
}

.logo{
	width:100%;
	z-index:999;
}
.logoBk{
	width:100%;
	height:auto;
}
#header{
	position:fixed;
	z-index:900000;
  -webkit-transition: all .5s;
	transition: all .5s;
	opacity:1;
	visibility:visible;
	width: 100%;
	height: 20rem;
	background-image: linear-gradient(180deg, rgba(229, 229, 229, 1) 70%, rgba(229, 229, 229, 0));
}
.big #header{
	-webkit-transition: all .5s;
	transition: all .5s;
	opacity:0;
	visibility:hidden;
}

.langWrap{
	width: 8rem;
	position:fixed;
	top:6%;
	right: calc(8% + 6rem);
	display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
	z-index: 999999;
	-webkit-transition: all .5s;
	transition: all .5s;
	opacity:1;
	visibility:visible;
}
.big .langWrap{
	opacity:0;
	visibility:hidden;
}
.langWrap li:last-child::before{
	width:50px;
	content:"/";
	margin-right:2rem;
	font-size:1.3rem;
	line-height:1.3rem;
	letter-spacing:0.05em;
	font-weight:400;
	text-decoration:none !important;
	color:#000000 !important;
}
.langWrap li a{
	font-size:1.3rem;
	line-height:1.3rem;
	letter-spacing:0.05em;
	font-weight:400;
	color:#000000;
	text-align:left;
	text-decoration:none;
}
.langWrap li:hover a{
	text-decoration:underline !important;
}
.langWrap li.current-lang a{
	text-decoration:underline !important;
}

.menu-trigger{
	width:6rem;
	height:2.8rem;
	position:fixed;
	top:6%;
	right:4%;
	z-index: 99;
	display:block;
}
.menu-trigger span{
	position:absolute;
	content:"";
	width:6rem;
	height:1px;
	background:#000000;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.menu-trigger span:nth-child(1){
	top:0;
	left:0;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.menu-trigger span:nth-child(2){
	bottom:0;
	left:0;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.open .menu-trigger span:nth-of-type(1) {
	-webkit-transform: translateY(0rem) rotate(-45deg);
	transform: translateY(0rem) rotate(-45deg);
	top: 1.6rem;
}
.open .menu-trigger span:nth-of-type(2) {
	-webkit-transform: translateY(0rem) rotate(45deg);
	transform: translateY(0rem) rotate(45deg);
	top: 1.6rem;
}

.closeModal{
	width:6rem;
	height:2.8rem;
	position:fixed;
	top:6%;
	right:4%;
	z-index: 999999;
	display:none;
}
.open .closeModal{
	display:block;
}
.closeModal span{
	position:absolute;
	content:"";
	width:6rem;
	height:1px;
	background:#000000;
	-webkit-transition: all 2s;
	transition: all 2s;
}
.closeModal span:nth-child(1){
	top:0;
	left:0;
	-webkit-transition: all 2s;
	transition: all 2s;
}
.closeModal span:nth-child(2){
	bottom:0;
	left:0;
	-webkit-transition: all 2s;
	transition: all 2s;
}
.open .closeModal span:nth-of-type(1) {
	-webkit-transform: translateY(0rem) rotate(-45deg);
	transform: translateY(0rem) rotate(-45deg);
	top: 1.6rem;
}
.open .closeModal span:nth-of-type(2) {
	-webkit-transform: translateY(0rem) rotate(45deg);
	transform: translateY(0rem) rotate(45deg);
	top: 1.6rem;
}

.modal_pop{
    width: 100vw;
    height: 100vh;
    height: -webkit-fill-available;
    position:fixed;
    top: 0;
    left:0;
    z-index:999999 !important;
    display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	visibility:hidden;
	opacity:0;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.modal_pop.openPop{
	visibility:visible;
	opacity:1;
}
.bg{
    background-color: #91919199;
    width: 100%;
    height: 100%;
    position:fixed;
    z-index:9998 !important;
}
.js-modal-close{
    width: 100%;
    height: 100%;
    position:fixed;
    z-index:99999 !important;
}
.modal_pop_main{
position: relative;
z-index: 9999;
}
.modal_pop_main p{
	color: #ffffff !important;
text-align: center;
font-size: 1.4rem;
line-height: 2rem;
letter-spacing: 0.05em;
font-weight: 400;
margin-bottom:2rem;
}
.modal_pop_main p span{
	font-size: 1.2rem;
	text-decoration:underline;
}
.soundNote{
	width: 5rem;
	height: 5rem;
}

/* = modal
----------------------------------------------- */
#modalBg{
	position:fixed;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.0);
	display:none;
	z-index:1200;
	cursor:pointer;
}
.open #modalBg{
	display:block;
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height:100%;
    overflow: hidden;
	overflow-y: auto; 
	-webkit-overflow-scrolling: touch;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
    -webkit-transition: all .2s;
    transition: all .2s;
    visibility: hidden;
    opacity: 0;
    z-index: 900000;
}
/* 開閉用ボタンがクリックされた時のスタイル */
.open .modal {
    -webkit-transition: all .2s;
    transition: all .2s;
    visibility: visible;
    opacity: 1;
}
.modalInner{
	width:100%;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-direction:normal;
    -moz-box-direction:normal;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    -webkit-flex-direction:row;
    -moz-flex-direction:row;
    flex-direction:row;
    webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	width: 32%;
	margin-left: 68%;
	height: 100%;
	background: #ffffff;
	padding: 0rem 4%;
	padding-right: 4%;
	padding-bottom: calc(8vh + 2rem);
	position:relative;
}
.modalMenuWrap{
	width: 100%;
	margin-top:8rem;
}
.mainMenuWrap, .subMenuWrap{
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	flex-wrap: wrap;
}
.mainMenuWrap{
	padding-bottom: 1.2rem;
}
.subMenuWrap{
	border-top: solid .5px #E3E3E3;
	padding-top: 4rem;
}
.modalMenu{
	position:relative;
	z-index:99999;
	width:100%;
	}


.modalMenuMain li a{
	font-family:"dnp-shuei-gothic-gin-std", sans-serif;
	position:relative;
	font-size:1.5rem;
	line-height:1.8rem;
	letter-spacing:0.05em;
	font-weight:400;
	color:#000000;
	text-align:left;
	text-decoration:none;
	-webkit-transition: all .2s;
	transition: all .2s;
	padding: 2rem 0;
}
.modalMenuMain li a span{
	margin-left:1em;
	-webkit-transition: all .5s;
	transition: all .5s;
	opacity:0;
	visibility:hidden;
}
.modalMenuMain li a:hover span{
	opacity:1;
	visibility:visible;
}
.modalMenuSub{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	flex-wrap: wrap;
}
.modalMenuSub li{
	width:auto
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align:center;
}
.modalMenuSub li a{
	font-family:"dnp-shuei-gothic-gin-std", sans-serif;
	position:relative;
	font-size:1.3rem;
	line-height:1.3rem;
	letter-spacing:0.05em;
	font-weight:400;
	color:#000000;
	text-align:left;
	text-decoration:none;
	-webkit-transition: all .2s;
	transition: all .2s;
	padding: 1.3rem 0;
	text-align:center;
}
.iconYoutube{
height:2rem;
width:auto;
margin-top: -0.6rem;
}
.modalMenuMain li{
	margin-bottom:8rem;
}
.modalMenuMain li:last-child{
	margin-bottom:4rem;
}
.modalMenuSub li{
	margin-top:2rem;
}
.closeBlock{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:0;
	display:none;
	cursor:pointer;
}
.open .closeBlock{
	display:block;
}




/* = home
----------------------------------------------- */

.start{
	display:none;
	opacity:1;
	visibility:visible;
	-webkit-transition: all .5s;
	transition: all .5s;
}
main:not(.big) .start{
	opacity:0;
	visibility:hidden;
}
.startCatch{
	width:100%;
	position:fixed;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 3rem;
	line-height: 8rem;
	color: #000000;
	letter-spacing: 0.2em;
	font-weight: 400;
	text-align:center;
	opacity:0;
	z-index:99999;
	-webkit-transition: all .5s;
	transition: all .5s;
}
main:not(.big) .startCatch{
	opacity:0;
	visibility:hidden;
}
.copyJp{
	width:104rem;
	height:auto;
	max-width:92%;
}
.copyEn{
	width:108rem;
	height:auto;
	max-width:92%;
}

#home{
	-webkit-transition: all .5s;
	transition: all .5s;
	opacity:1;
	visibility:visible;
	width:100%;
	overflow-x:hidden;
}

.big #home{
	-webkit-transition: all .5s;
	transition: all .5s;
	opacity:0;
	visibility:hidden;
}

.movieWrap{
	display:none;
	width:100%;
	height:100vh;
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	-webkit-transition: all .5s;
	transition: all .5s;
	opacity:0;
	visibility:hidden;
}
.big .movieWrap{
	visibility:visible;
	opacity:1
}
.scrollLink{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
	color:#ffffff !important;
	text-align:center;
	font-size: 1.4rem;
	line-height: 2rem;
	letter-spacing: 0.05em;
	font-weight: 400;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	padding-bottom: 4%;
	text-decoration:none !important;
}
.scrollIcon{
	position: relative;
	top: -.6rem;
	width: 1.4rem;
	height: auto;
	margin-left: .8rem;
}

/* 動画の縦横比を意地 */
.movie {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.movieBg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	background-image:url(images/poster.jpg);
}

.movie::before {
  padding-top: 65%;
  display: block;
  content: "";
}

.movie video {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  -webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

.movie__btn {
  margin-top: 1em;
  text-align: center;
  position: fixed;
  top: auto;
	bottom:4%;
  left: auto;
  right:4%;
  -webkit-transform: translate(0%, 0%);
	transform: translate(0%, 0%);
  z-index:99999;
  -webkit-transition: all .5s;
	transition: all .5s;
	opacity:0;
	visibility:hidden;
}
.movieLoaded .movie__btn {
	-webkit-transition: all .5s;
	transition: all .5s;
	opacity:1;
	visibility:visible;
}
.big .movie__btn.muted {
	 top: 64%;
  bottom:auto;
  left: 50%;
  right:auto;
  -webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.big .movie__btn:not(.muted){
	top: auto !important;
	bottom:4% !important;
}
main:not(.big) .movie__btn{
	top: auto !important;
	bottom:4% !important;
}

.movie__btn button {
	position:relative;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  box-shadow: initial;
  display: inline-block;
  appearance: none;
  border: none;
  background-color: initial;
  cursor: pointer;
  text-align:center;
  color:#000000;
  width:9rem;
  padding-top:4rem;
}
.big .movie__btn.muted button {
	color:#ffffff;
	width:9rem;
	font-size: 1.2rem;
	padding-top:6rem;
}
.big .movie__btn button {
	color:#ffffff !important;
}

.js-video-button::after{
	content:"";
	position:absolute;
	top:0;
	right:1.5rem;
	width:2rem;
	height:2rem;
	background-image:url(images/iconSoundOffB.svg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	opacity:.3;
}
.big .muted .js-video-button::after{
	background-image:url(images/iconSoundOffW.svg);
	right:0;
	width:3rem;
	height:3rem;
}
.big .js-video-button::after{
	background-image:url(images/iconSoundOffW.svg) !important;
}
.muted .js-video-button::after{
	
	opacity:1;
}
.js-video-button::before{
	content:"";
	position:absolute;
	top:0;
	left:1.5rem;
	width:2rem;
	height:2rem;
	background-image:url(images/iconSoundOnB.svg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	opacity:1;
}
.big .muted .js-video-button::before{
	background-image:url(images/iconSoundOnW.svg);
	left:0;
	width:3rem;
	height:3rem;
}
.big .js-video-button::before{
	background-image:url(images/iconSoundOnW.svg) !important;
}
.muted .js-video-button::before{
	
	opacity:.3;
}

.btn{
	cursor:pointer !important;
}
.btn a{
	cursor:pointer !important;
	display:inline-block;
}

.iconNavWrap{
	width:100%;
	margin-top:30px;
	height:100vh;
	position:relative;	
}
.pageHeader .iconNavWrap{
	margin-top: 0;
	height: auto;
	position: fixed;
	top: 4%;
	left: 18%;
}

.iconNav{
	position:absolute;
	bottom: 8%;
	left:0;
	width:100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-left: 4%;
	padding-right: 32%;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}
.pageHeader .iconNav{
	position: relative;
	bottom: auto;
	left: auto;
	width: 50%;
	padding-left: 0;
	padding-right: 0;
}
.iconNav li{
	width:20%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
}

.sBtnAWrap{
	width:100%;
	height:auto;
	
	z-index:900;
}
.sBtnAWrap img{
	width:48%;
	height:auto;
}
.pageHeader .sBtnAWrap img{
	width:28.8%;
	height:auto;
}
.sBtnBWrap{
	width:100%;
	height:auto;
	
	z-index:900;
}
.sBtnBWrap img{
	width:48%;
	height:auto;
}
.pageHeader .sBtnBWrap img{
	width:28.8%;
	height:auto;
}
.sBtnCWrap{
	width:100%;
	height:auto;
	
	z-index:900;
}
.sBtnCWrap img{
	width:64%;
	height:auto;
}
.pageHeader .sBtnCWrap img{
	width:38.4%;
	height:auto;
}
.sBtnDWrap{
	width:100%;
	height:auto;
	
	z-index:900;
}
.sBtnDWrap img{
	width:72%;
	height:auto;
}
.pageHeader .sBtnDWrap img{
	width:43.2%;
	height:auto;
}
.sBtnEWrap{
	width:100%;
	height:auto;
	
	z-index:900;
}
.sBtnEWrap img{
	width:64%;
	height:auto;
}
.pageHeader .sBtnEWrap img{
	width:38.4%;
	height:auto;
}
.sBtnEWrap img{
	-webkit-transform:rotate(-76deg);
	transform:rotate(-76deg);
	transform-origin:center;
}
.sBtnFWrap{
	width: 32%;
	height: auto;
	position: absolute;
	top: 20%;
	right: 0%;
	z-index:900;
	visibility:hidden;
	opacity:0;
	visibility:visible;
	opacity:1;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.big .sBtnFWrap{
	visibility:hidden;
	opacity:0;
}
.pageHeader .sBtnFWrap{
	width: 28%;
	position: fixed;
	top: 30rem;
}
.sBtnA, .sBtnB, .sBtnC, .sBtnD, .sBtnE, .sBtnF{
	width:100%;
	height:auto;
}
.btn a{
	width:100%;
	height:auto;
	text-align:center;
	text-decoration:none;
}
.navTitleWrap{
	width:100%;
	margin-top:4rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	flex-wrap: wrap;
}
.pageHeader .navTitleWrap{
	margin-top:1.2rem;
}
.navTitleJP{
	width:100%;
	font-size: 1.4rem;
	line-height: 2.2rem;
	color: #000000;
	letter-spacing: 0.125em;
	font-weight: 400;
	text-decoration: none;
	white-space:nowrap;
	-webkit-transition: all .5s;
	transition: all .5s;
	visibility:hidden;
	opacity:0;
}
.pageHeader .navTitleJP{
	font-size: 1rem;
}
.iconNav li:hover .navTitleJP{
	visibility:visible;
	opacity:1;
}
.navTitleEN{
	width:100%;
	font-size: 1.4rem;
	line-height: 2rem;
	color: #000000;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	margin-bottom:1.2rem;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.pageHeader .navTitleEN{
	font-size: 1.2rem;
	margin-bottom:0rem;
}

/* mute切り替え用スタイル */
.mute_btn {
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 80%;
}

/* = what
-------------------------------------------------------------- */
#what{
	width:100%;
	overflow-x:hidden;
	padding-top:40rem;
}

#what .contentWrap{
	min-height: auto !important;
	width:100%;
	padding:0 16%;
	overflow-x: visible;
}

.sectionWrap{	
	margin-bottom:14rem;
}

.sectionTitle{
	font-size: 1.9rem;
	line-height: 2.3rem;
	color: #000000;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	margin-bottom:9rem;
}
.project .sectionTitle{
	margin-bottom: 5rem;
}
.sectionDes{
	width: 75%;
	font-size: 1.6rem;
	line-height: 3.9rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
	text-decoration: none;
}
.sectionEditor{
	width: 75%;
	font-size: 1.6rem;
	line-height: 3.9rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
	text-decoration: none;
}
.sectionEditor p, .sectionEditor div, .sectionEditor a{
	font-size: 1.6rem;
	line-height: 3.9rem;
	color: #000000;
	letter-spacing: 0.1em;
}


.sectionLine{
	position:relative;
	height: 5rem;
	margin-bottom:14rem;
}
.sectionLine img{
	width:20.6rem;
	height:auto;
	position:absolute;
	left:-6.7rem;
	top:50%;
	z-index:-1;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}
.sectionTitle{
	position:relative;
}
.whatskinon .sectionTitle img{
	width:11.2rem;
	height:auto;
	position:absolute;
	left:-7.2rem;
	bottom:-2.2rem;
	z-index:-1;
}
.supporterThumWrap{
	width:100%;
	max-width:33.5rem;
}
.supporterThum img{
	width:100%;
	height:auto;
}
.projectLink{
	display: inline-block;
	font-size: 1.6rem;
	line-height: 3.2rem;
	color: #000000 !important;
	text-decoration:none !important;
	letter-spacing: 0.1em;
	font-weight: 400;
	margin-top:4rem;
	padding-bottom:1.5rem;
	position:relative;
	border-bottom:solid .5px #707070;
}


/* = team
-------------------------------------------------------------- */
#team{
	width:100%;
	overflow-x:hidden;
	padding-top:40rem;
}

#team .contentWrap{
	min-height: auto !important;
	width:100%;
	padding:0 16%;
	overflow-x: visible;
}
#team .sectionWrap{
	width: 75%;
}
#team .sectionDes{
	width:100%;
}
.member .sectionTitle img{
	width:21.2rem;
	height:auto;
	position:absolute;
	left:-6.7rem;
	bottom:6rem;
	z-index:-1;
}

.memberList{
	margin-top:7rem;
}

.memberList li{
	padding-bottom:12.2rem;
	border-bottom:solid 2px #ffffff;
}
.memberList li:last-child{
	border-bottom:none;
}

.memberThumWrap{
	width:100%;
}
.memberThum img{
	width:100%;
	height:auto;
}
.memberCaption{
	font-size: 1rem;
	line-height: 1.4rem;
	color: #000000;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-align:right;
	text-decoration: none;
	margin-top:.2rem;
}
.memberNameWrap{
	margin:6rem 0;
}
.memberPosition{
	font-size: 1.6rem;
	line-height: 1.6rem;
	color: #6F6F6F;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	margin-bottom:3rem;
}
.memberName{
	font-size: 2.4rem;
	line-height: 3.6rem;
	color: #000000;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
}
.memberTitle{
	font-size: 1.6rem;
	line-height: 1.6rem;
	color: #6F6F6F;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	margin-top:1.5rem;
}
.memberDes, .memberDes p{
	font-size: 1.6rem;
	line-height: 3.2rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
}
.memberDes span{
	font-size: 1.4rem;
}
.memberDes h6{
	font-size: 1.4rem !important;
	font-weight: 400 !important;
}
.memberLink{
	display: inline-block;
	font-size: 1.6rem;
	line-height: 3.2rem;
	color: #000000 !important;
	text-decoration:none !important;
	letter-spacing: 0.1em;
	font-weight: 400;
	margin-top:4rem;
	padding-bottom:1.5rem;
	position:relative;
	border-bottom:solid .5px #707070;
}
.memberNameLink{	
	display: inline-block;
	font-size: 1.6rem;
	line-height: 3.2rem;
	color: #000000 !important;
	text-decoration:none !important;
	letter-spacing: 0.1em;
	font-weight: 400;
	margin-top:2rem;
	padding-bottom:1.5rem;
	position:relative;
	border-bottom:solid .5px #707070;
}

.mapWrap {
	width:100%;
}
.mapWrap img{
	width:100%;
	height:auto;
	max-width:76.6rem;
}
.areaWrap{
	margin-top:14.8rem;
}
.area{
	padding-bottom:12.2rem;
	border-bottom:solid 2px #ffffff;
}
.areaTitleWrap{
	margin-bottom:12.2rem;
}
.areaTitleWrap p{
	font-size: 1.6rem;
	line-height: 1.6rem;
	color: #6F6F6F;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	margin-bottom:3rem;
}
.areaTitle{
	font-size: 2.4rem;
	line-height: 3.6rem;
	color: #000000;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
}
.area.takao .areaTitle{
	color:#018239 !important;
}

.supporterList li{
	margin-bottom:15.6rem;
}
.supporterList li:last-child{
	margin-bottom:0;
}
.supporterNameWrap{
	margin:4rem 0;
}
.supporterPosition{
	font-size: 1.6rem;
	line-height: 1.6rem;
	color: #6F6F6F;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	margin-bottom:3rem;
}
.supporterName{
	font-size: 2.4rem;
	line-height: 3.6rem;
	color: #000000;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
}
.supporterDes, .supporterDes p{
	font-size: 1.6rem;
	line-height: 3.2rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
}

/* = sprinkled
-------------------------------------------------------------- */
#sprinkled{
	width:100%;
	overflow-x:hidden;
	padding-top:40rem;
}

#sprinkled .contentWrap{
	min-height: auto !important;
	width:100%;
	padding:0 16%;
	overflow-x: visible;
}
#sprinkled .sectionWrap{
	width: 75%;
}
#sprinkled .sectionDes{
	width:100%;
}
.sprinkled .sectionTitle img{
	width: 18rem;
	height: auto;
	position: absolute;
	left: -13.4rem;
	bottom: -4rem;
	z-index:-1;
}

.worksList{
	margin-top:14.8rem;
	border-top:solid 2px #ffffff;
}
.worksList li{
	padding-top:12.2rem;
	padding-bottom:12.2rem;
	border-bottom:solid 2px #ffffff;
}
.worksList li:last-child{
	border-bottom:none;
}

.worksNameWrap{
	margin-bottom:6rem;
}
.worksHeadline{
	font-size: 1.6rem;
	line-height: 1.6rem;
	color: #6F6F6F;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	margin-bottom:3rem;
}
.worksName{
	font-size: 2.4rem;
	line-height: 3.6rem;
	color: #000000;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
}
.worksGenre{
	font-size: 1.6rem;
	line-height: 1.6rem;
	color: #6F6F6F;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	margin-top:1.5rem;
}
.worksDesWrap, .worksDesWrap p{
	font-size: 1.6rem;
	line-height: 3.2rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
}

.worksThumWrap{
	width:100%;
	margin-top:8.8rem;
}
.worksThumWrapDouble{
	width:100%;
	margin-top:8.8rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	flex-wrap: wrap;
}
.worksThumWrapDouble .worksThum{
	width:49%;
}
.worksThum img{
	width:100%;
	height:auto;
}

.worksInfoWrap{
	margin-top:6rem;
}
.worksInfoWrap p{
	font-size: 1.6rem;
	line-height: 3.2rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
}
.worksInfoWrap a{
	display: inline-block;
	font-size: 1.6rem;
	line-height: 3.2rem;
	color: #000000 !important;
	text-decoration:none !important;
	letter-spacing: 0.1em;
	font-weight: 400;
	padding-bottom:1.5rem;
	position:relative;
	border-bottom:solid .5px #707070;
}

/* = listen
-------------------------------------------------------------- */
#listen{
	width:100%;
	overflow-x:hidden;
	padding-top:40rem;
}

#listen .contentWrap{
	min-height: auto !important;
	width:100%;
	padding:0 16%;
	overflow-x: visible;
}
#listen .sectionWrap{
	width: 75%;
	margin-bottom:0;
}
#listen .sectionDes{
	width:100%;
}
.listen .sectionTitle img{
	width: 14rem;
	height: auto;
	position: absolute;
	left: -10rem;
	bottom: -4rem;
	z-index:-1;
}

.tabs {
	margin-top:7.2rem;
}

.tab-list {
	width: 118.7648%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.tab-item {
	position:absolute;
  cursor: pointer;
}
.tabNat{
	width:36%;
	height:50%;
	left:2%;
	top:37%;
	
}
.tabMon{
	width:20%;
	height:24%;
	left:54%;
	top:24%;
	
}
.tabNew{
	width:24%;
	height:30%;
	left:60%;
	top:60%;
	
}
.tabSus{
	width:27%;
	height:36%;
	left:26%;
	top:0;
	
}
.tabMar{
	width:20%;
	height:22%;
	left:40%;
	top:48%;
	
}
.tab-content{
	padding-right:10%;
}

.tab-panel {
  display: none;
}

.tab-item.active .fieldName{
	text-decoration:underline !important;
	color:#ffffff !important;
}

.tab-panel.active {
  display: block;
}

.fieldName{
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.tabNat .fieldName{
	margin-left: 14%;
	margin-top: -6%;
}
.tabMon .fieldName{
	margin-left: -3%;
}
.tabNew .fieldName{
	margin-top: -6%;
	margin-left: -6%;
}
.tabSus .fieldName{
	margin-top: 4%;
	margin-left: 8%;
}
.tabMar .fieldName{
	margin-top: -10%;
	margin-left: 10%;
}


.fieldName h2{
	font-size: 1.6rem;
	line-height: 2rem;
	color: #ffffff;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	white-space:nowrap;
}
.fieldYear{
	font-size: 1.4rem;
	line-height: 2.8rem;
	color: #ffffff;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
}
.fieldYear span{
	font-size: 2rem;
}
.map{
	position:absolute;
	z-index:-1;
}
.tab-item:hover .fieldName{
	text-decoration:underline !important;
	color:#ffffff !important;
}
.fieldNat{
top: -40%;
left: -5%;
width: 132.8722%;
height: auto;
}
.fieldMon{
top: -7%;
left: -16%;
width: 111.215%;
height: auto;
}
.fieldNew{
top: -26%;
left: -30%;
width: 130.9875%;
height: auto;
}
.fieldSus{
	top: 0%;
left: -46%;
width: 185.6555%;
height: auto;
}
.fieldMar{
	top: -23%;
left: 0%;
width: 130.91%;
height: auto;
}
.tabWrap{
	width: 100%;
	padding-top: 60%;
	position:relative;
	margin-bottom:20rem;
}
.fieldMap{
	position:absolute;
	top:0;
	left:0;
	width:84.2rem;
	height:auto;
	opacity:0;
	display:none;
}

.listenIcon{
	width:14.365rem;
	height:auto;
	cursor:pointer;
	transform-origin: center;
}
.listenTxt{
	position:relative;
	font-size: 1.4rem;
	line-height: 2.4rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
	text-decoration: none;
	text-align:center;
	padding:1.2rem 1.4rem;
	background:#ffffff;
	white-space:nowrap;
}
.listenList{
	width:100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top:16rem;
}
.listenList li{
	margin-bottom:16rem;
	width:50%;
}
.listenList li:nth-child(2n){
	position:relative;
	right:auto;
	margin-top:8rem;
	padding-right:8%;
}
.listenList li:nth-child(3n){
	position:relative;
	right:auto;
	padding-left:8%;
	padding-right:0;
}
.listenList li:nth-child(4n){
	position:relative;
	right:-8%;
	padding-right:0;
}
.listenList li:nth-child(5n){
	position:relative;
	right:auto;
	padding-left:0;
	padding-right:0;
	margin-left:-8%;
}
.listenList li:nth-child(6n){
	position:relative;
	right:auto;
	padding-left:0;
	padding-right:8%;
}
.listenList li:last-child:nth-child(2n+1){
	position:relative;
	right:auto;
	left:30%;
	padding-left:0;
	padding-right:0;
}

.listenList li .iconWrap{
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-direction:normal;
	-moz-box-direction:normal;
	-webkit-box-orient:horizontal;
	-moz-box-orient:horizontal;
	-webkit-flex-direction:row;
	-moz-flex-direction:row;
	flex-direction:row;
	-webkit-flex-wrap:nowrap;
	-moz-flex-wrap:nowrap;
	flex-wrap:nowrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.listenList li .listenTxt{
	-webkit-transition: all .5s;
	transition: all .5s;
	visibility:hidden;
	opacity:0;
}
.listenList li:hover .listenTxt{
	visibility:visible;
	opacity:1;
}
.listenList li:nth-child(2n) .iconWrap{
	-webkit-justify-content: flex-end;
	-ms-flex-pack: flex-end;
	justify-content: flex-end;
}
.listenList li:nth-child(2n+1) .listenIcon{
	-webkit-box-ordinal-group:2;
	-ms-flex-order:1;
	order:1;
	margin-right:3rem;
}
.listenList li:nth-child(2n+1) .listenTxt{
	-webkit-box-ordinal-group:3;
	-ms-flex-order:3;
	order:2;
}

.listenList li:nth-child(2n) .listenIcon{
	-webkit-box-ordinal-group:3;
	-ms-flex-order:3;
	order:2;
	margin-left:3rem;
}
.listenList li:nth-child(2n) .listenTxt{
	-webkit-box-ordinal-group:2;
	-ms-flex-order:1;
	order:1;
}

.listenList li:nth-child(2n+1) .listenTxt::after{
	content:"";
	position:absolute;
	top:50%;
	left:-1rem;
	margin-top:-.5rem;
  	width: 0;
 	height: 0;
  	border-style: solid;
  	border-right: .5rem solid transparent;
  	border-left: .5rem solid transparent;
  	border-bottom: 1rem solid #ffffff;
  	border-top: 0;
  	transform: rotate(270deg);
}
.listenList li:nth-child(2n) .listenTxt::after{
	content:"";
	position:absolute;
	top:50%;
	right:-1rem;
	margin-top:-.5rem;
  	width: 0;
 	height: 0;
  	border-style: solid;
  	border-right: .5rem solid transparent;
  	border-left: .5rem solid transparent;
  	border-bottom: 1rem solid #ffffff;
  	border-top: 0;
  	transform: rotate(90deg);
}
.tabNameWrap{
	position:relative;
	padding-left:12rem;
}
.tabIcon{
	position:absolute;
	top:50%;
	left:-7.4rem;
	width:14.8rem;
	height:auto;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}
.tabYear{
	font-size: 1.4rem;
	line-height: 2.8rem;
	color: #000000;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
}
.tabYear span{
	font-size: 2rem;
}
.tabNameWrap h2{
	font-size: 2.4rem;
	line-height: 2.8rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
	text-decoration: none;
	margin:.8rem 0;
	white-space: nowrap;
}
.tabArea{
	font-size: 1.4rem;
	line-height: 2.8rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
	text-decoration: none;
}
.tabComing{
	font-size: 1.6rem;
line-height: 3.9rem;
color: #000000;
letter-spacing: 0.1em;
font-weight: 400;
text-decoration: none;
	margin-bottom:16rem;
	margin-top:8rem;
}
.songsList li{
	margin-bottom:4rem;
}
.songsList li:last-child{
	margin-bottom:0;
}

.songsTitle{
	font-size: 1.6rem;
	line-height: 2.8rem;
	color: #000000;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	margin-bottom:10rem;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 3rem;
}

.listenIcon.percussion.active{
	animation: ripple 1s 1 ease-out;
}

.listenIcon.wind.active{
	animation: blinking 1s 1 ease-out;
}
.listenIcon.string.active{
	animation: kurukuru 1s 1 ease-out;
}

@keyframes ripple {
  0% {
    opacity: 1;
    scale:1.0;
  }
  10% {
    opacity: 1;
    scale:1.1;
  }
  20% {
    opacity: 1;
    scale:1;
  }
  40% {
    opacity: 1;
    scale:1.1;
  }
  60% {
    opacity: 1;
    scale:1;
  }
  80% {
    opacity: 1;
    scale:1.1;
  }
  100% {
    opacity: 1;
    scale:1;
  }
}

@keyframes blinking {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  50%{
  	opacity: 0;
  }
  60%{
  	opacity: 1;
  }
  65%{
  	opacity: 0;
  }
  70%{
  	opacity: 1;
  }
  75%{
  	opacity: 0;
  }
  80%{
  	opacity: 1;
  }
  85%{
  	opacity: 0;
  }
  90%{
  	opacity: 1;
  }
  95%{
  	opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes kurukuru {
  0% {
    opacity: 1;
    rotate:0deg;
  }
  40% {
    opacity: 1;
    rotate:40deg;
  }
  80% {
    opacity: 1;
    rotate:-40deg;
  }
  100% {
    opacity: 1;
    rotate:0deg;
  }
}

#tab-content{
	position:relative;
	top:-28rem;
}
.touchMessage{
	position:absolute;
	right:0;
	bottom:-8rem;
}
.touchMessage p{
position: absolute;
white-space: nowrap;
top: -2rem;
left: -10rem;
font-size: 1.4rem;
line-height: 1.4rem;
color: #000000;
letter-spacing: 0.05em;
font-weight: 400;
transform: rotate(15deg);
}
.touchIcon{
	width:17rem;
	height:auto;
}

/* = privacy-policy
-------------------------------------------------------------- */
#privacy-policy{
	width:100%;
	overflow-x:hidden;
	padding-top:40rem;
}

#privacy-policy .contentWrap{
	width:100%;
	padding:0 16%;
	overflow-x: visible;
}
.content{
	width:75%;
}

.content h1{
	font-size: 1.6rem;
	line-height: 2rem;
	color: #000000;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	margin-bottom:9rem;
	margin-top:12rem;
}
.content h1:first-child{
	margin-top:0rem;
}
.content h3{
	font-size: 1.4rem;
	line-height: 2.8rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
	text-decoration: none;
	margin-top:4rem;
	margin-bottom:3.2rem;
}
.content b{
	font-weight: 500;
}
.content p{
font-size: 1.2rem;
	line-height: 2.4rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
	text-decoration: none;
}
.content ul{
	margin:1.2rem 0;
}
.content ul li{
font-size: 1.2rem;
	line-height: 2.4rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
	text-decoration: none;
}
.content > ul > li{
	padding-left:1.2em;
	position:relative;
}
.content > ul > li::before{
	content:"・";
	position:absolute;
	top:0;
	left:0;
}
.content ol li{
	font-size: 1.2rem;
	line-height: 2.4rem;
	color: #000000;
	letter-spacing: 0.1em;
	font-weight: 400;
	text-decoration: none;
}
.content ol{
	padding-left: 2.4em;
	margin:1.2rem 0;
}
.content > ol > li > ul > li{
	padding-left:1.2em;
	position:relative;
}
.content > ol > li > ul > li::before{
	content:"-";
	position:absolute;
	top:0;
	left:0;
}


  
/* = footer.php
-------------------------------------------------------------- */


#footer{
	width:100%;
	position:relative;
}
#footer.pageFooter{
	width:100%;
	background-color:#F5F5F5;
	margin-top:32rem;
	padding:2rem;
	padding-top:2.8rem;
}
.footerMenu{
	margin:0 auto;
	width:56rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	flex-wrap: wrap;
}
.footerMenu li a, .footerMenu li p{
	font-size:1.4rem;
	line-height:2.2rem;
	letter-spacing:0.05em;
	font-weight:400;
	color:#AAAAAA;
	text-align:left;
	text-decoration:none;
}
.footerMenu li a:hover{
	color:#000000;
}
.copyright{
	font-size:1.2rem;
	line-height:2.2rem;
	letter-spacing:0.05em;
	font-weight:400;
	color:#000000;
	text-align:center;
	text-decoration:none;
	margin-top:4.6rem;
}
.copyright a{
	color:#000000 !important;
	text-decoration:none !important;
}


/* = Media (Responsive Setting)
-------------------------------------------------------------- */

@media only screen and (min-width: 2280px){

	html,body {
		font-size:11.2px;
	}

} /*Query End*/

@media only screen and (min-width: 1920px) and (max-width: 2279px){

html,body {
		font-size:10.6px;
	}

} /*Query End*/
@media only screen and (min-width: 1441px) and (max-width: 1919px){

html,body {
		font-size:10px;
	}

} /*Query End*/
@media only screen and (min-width: 1280px) and (max-width: 1440px){

html,body {
		font-size:9px;
	}
}/*Query End*/

@media only screen and (min-width: 960px) and (max-width: 1279px){

html,body {
		font-size:8px;
	}
.touchMessage {
	right: -8rem;
}	

} /*Query End*/

@media only screen and (min-width: 768px) and (max-width: 959px) {
html,body {
		font-size:7px;
	}
	
	.fieldName h2{
	font-size: 1.2rem;
	line-height: 1.6rem;
	color: #ffffff;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	white-space:nowrap;
}
.fieldYear{
	font-size: 1.0rem;
	line-height: 2.4rem;
	color: #ffffff;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
}
.fieldYear span{
	font-size: 1.6rem;
}
.touchMessage {
	right: -8rem;
}

} /*Query End*/
@media only screen and (max-width: 767px) {

.PC {
	display: none;}
.SP {
	display: block;}

html,body {
		font-size:7px;
	}	

body.page:not(.home) #wrap {
	min-height: calc(100% - 22rem);
}
body.archive #wrap {
	min-height: calc(100% - 22rem);
}
  

#header{
	height:24rem;
}

.logoWrap {
width: 36%;
max-width:18rem;
top: 4%;
left: 8%;
}
.pageHeader .logoWrap {
width: 36%;
max-width:18rem;
top: 4%;
left: 8%;
}
.langWrap {
width: 6rem;
top: calc(4% + 5.6rem);
right: 6%;
}
.langWrap li:last-child::before{
margin-right: 1rem;
}
.menu-trigger {
width: 6rem;
height: 2.4rem;
top: 4%;
right: 6%;
}
.open .menu-trigger span:nth-of-type(1) {
top: 1rem;
}
.open .menu-trigger span:nth-of-type(2) {
top: 1rem;
}

.closeModal {
height: 2.4rem;
top: 4%;
right: 6%;
}
.open .closeModal span:nth-of-type(1) {
top: 1rem;
}
.open .closeModal span:nth-of-type(2) {
top: 1rem;
}

.modalInner{
	width: 100%;
margin-left: 0;
padding: 0rem 6%;
padding-right: 6%;
padding-bottom: calc(8vh + 2rem);
}
.pageHeader .iconNavWrap {
display:none;
}
.iconNavWrap {
	padding-top: 38rem;
	padding-bottom: 4rem;
	height: auto;
	min-height: 100vh !important;
}
#pageEnd{
	position: absolute;
	top: 12rem;
}
.iconNav{
	position: relative;
	bottom: auto;
	padding-left: 16%;
	padding-right: 64%;
}
.navTitleWrap {
	margin-top: 1rem;
}
.navTitleEN{
	margin-bottom:.8rem;
}
.sBtnFWrap{
	width: 60%;
	top: auto;
	right: -10%;
	bottom: 16%;
}
.iconNav li {
width: 100%;
margin-bottom: 3.2rem;
}
.iconNav li:last-child {

margin-bottom: 0rem;
}
.scrollLink{
	padding-bottom:8%;
}

/* = what
----------------------------------------------- */

#what{
	padding-top:32rem;
}
#what .contentWrap {
	width: 100%;
	padding: 0 8%;
	overflow-x: visible;
}

.whatskinon .sectionTitle{
	padding-top:6rem;
}
.whatskinon .sectionTitle img{
	left:0;
	bottom:3rem;
}
.sectionLine img {
	left:0;
}
.sectionDes{
	width:100%;
}


/* = team
----------------------------------------------- */

#team{
	padding-top:32rem;
}
#team .contentWrap {
	width: 100%;
	padding: 0 8%;
	overflow-x: visible;
}
.member .sectionTitle{
	padding-top:4rem;
}
.member .sectionTitle img{
	left:0;
	bottom:6rem;
}
#team .sectionWrap{
	width: 100%;
}

/* = sprinkled
----------------------------------------------- */

#sprinkled{
	padding-top:32rem;
}
#sprinkled .contentWrap {
	width: 100%;
	padding: 0 8%;
	overflow-x: visible;
}
.sprinkled .sectionTitle{
	padding-top:10rem;
}
.sprinkled .sectionTitle img{
	left:-2rem;
	bottom:3rem;
}
#sprinkled .sectionWrap{
	width: 100%;
}

/* = listen
----------------------------------------------- */

#listen{
	padding-top:32rem;
}
#listen .contentWrap {
	width: 100%;
	padding: 0 8%;
	overflow-x: visible;
}
.listen .sectionTitle{
	padding-top:10rem;
}
.listen .sectionTitle img{
	width: 13rem;
	left:0rem;
	bottom:3rem;
}
#listen .sectionWrap{
	width: 100%;
}

.fieldName h2{
	font-size: 1rem;
	line-height: 1.4rem;
	color: #ffffff;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
	white-space:nowrap;
}
.fieldYear{
	font-size: 0.8rem;
	line-height: 2.2rem;
	color: #ffffff;
	letter-spacing: 0.05em;
	font-weight: 400;
	text-decoration: none;
}
.fieldYear span{
	font-size: 1.4rem;
}
.tabIcon{
	left: -5.4rem;
}
.tab-content{
	padding:10% !important;
}
.tab-panel.active {
	margin-top: 8rem;
}
.listenList li{
	width:100%;
	margin-top:2rem !important;
	margin-bottom:2rem !important;
}
.songsWrap{
	margin-top:8rem;
	margin-bottom:16rem;
}
.listenList li:last-child:nth-child(2n+1){
	left:10%;
}
.youtube iframe {
  border-radius: 2rem;
}

.listenIcon{
	width:10rem;
	height:auto;
}

.touchMessage {
	right: -4rem;
	bottom: -20rem;
}

.tabWrap {
	margin-bottom: 0rem !important;
}

#tab-content {
	top: -16rem;
}

/* = privacy-policy
-------------------------------------------------------------- */


#privacy-policy{
	padding-top:32rem;
}
#privacy-policy .contentWrap {
	width: 100%;
	padding: 0 8%;
	overflow-x: visible;
}

.content{
	width:100%;
}

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

#footer.pageFooter{
	margin-top:0rem;
	padding: 4rem 8%;
}
.footerMenu{
	width:100%;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-box-direction:normal;
	-moz-box-direction:normal;
	-webkit-box-orient:horizontal;
	-moz-box-orient:horizontal;
	-webkit-flex-direction:row;
	-moz-flex-direction:row;
	flex-direction:row;
}
.footerMenu li{
	margin-bottom:3rem;
	margin-right:3rem;
}
.footerMenu li:last-child{
	width:100%;
	margin-right:0;
}

.copyright {
	text-align: left;
	margin-top: 0rem;
}

} /*Query End*/