@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;700&display=swap');

/*====================
common
====================*/
.pc_none {
  display: none; }
  @media only screen and (max-width: 688px) {
    .pc_none {
      display: block; } }

.sp_none {
  display: block; }
  @media only screen and (max-width: 688px) {
    .sp_none {
      display: none !important; } }

/*====================
BASE
====================*/
html,body {}
  
*{
font-style: normal;
font-weight: normal;
letter-spacing:0.01em;
color:#707070;
font-family: 'Open Sans', sans-serif;
}

a:hover{
	opacity:0.6;}
p{
	line-height: 1.8em;
}

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


/**/

.movein{
	opacity: 0;
	transition : all 1s;
}

/**/

input[type="button"],
input[type="text"],
input[type="submit"],
input[type="image"],
textarea{
   -webkit-appearance: none;
   border-radius: 0;
}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}



@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}

}

.container{
}
.teaser{
	margin: 0 auto;
	text-align: center;
}
.teaser img{
	max-height: 100vh;
	width: auto;
}
@media only screen and (max-width: 688px) {
	.teaser img{
	max-height: calc(100vh - 100px);
	width: auto;
}
}



.header{
	position: fixed;
	width: 100%;
	z-index: 98;
}
.header .inner{
	position: relative;
}
.header .inner h1{
	padding: 40px 0 0 3%;
}
.header .inner h1 img{
	width: 44px;
	height: 62px;
}


.header .spMenuBt{
	display:block;
	position:absolute;
	right:0;
	top:0;
	z-index: 98;
    transition: all .4s;
    box-sizing: border-box;
    width: 64px;
    height: 60px;
    padding: 22px 0 0 0;
	cursor: pointer;
  }
  .header .spMenuBt span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    position: absolute;
    left: 20px;
    width: 24px;
    height: 2px;
    background-color: #fff;
    border-radius: 0;
  }
  .header .spMenuBt span:nth-of-type(1) {
    top: 22;
  }
  .header .spMenuBt span:nth-of-type(2) {
    top: 29px;
  }
  .header .spMenuBt span:nth-of-type(3) {
    top: 36px;
  }
  .header .spMenuBt.active span:nth-of-type(1) {
    -webkit-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
  }
  .header .spMenuBt.active span:nth-of-type(2) {
    opacity: 0;
  }
  .header .spMenuBt.active span:nth-of-type(3) {
    -webkit-transform: translateY(-8px) rotate(45deg);
    transform: translateY(-8px) rotate(45deg);
  }




nav{
	display: block;
	display: none;
	position: fixed;
	right: 0;
	top: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 97;
	width: 100%;
	height: 100%;
}
nav ul{
	max-width: 800px;
	margin: 0 auto;
	padding: 90px 0 0 0;
	
}
nav ul li{}
nav ul li a{
	display: block;
	font-size: 2.0em;
	color: #fff;
	text-align: center;
	padding: 20px 0;
	border-bottom: solid 1px #ccc;
}
nav ul li:last-child a{
	border-bottom: none;
}

@media only screen and (max-width: 688px) {
	nav ul li a{
		font-size: 1.4em;
		padding: 10px 0;
	}
}


.footer{
	background-color: #64CC47;
	padding: 3%;
}
.footer .inner{
	max-width: 960px;
	margin: 0 auto;
}

.footerLyt{
	display: flex;
}
.footerLyt .footerBox{
	width: 30%;
}
.footerLyt .footerBox:first-child{width: 18%;}
.footerLyt .footerBox:nth-child(2){width: 30%; padding-right: 1%}
.footerLyt .footerBox:last-child{width: 21%;}

@media only screen and (max-width: 688px) {
	.footerLyt{
	flex-direction: column;
}
	.footerLyt .footerBox,
	.footerLyt .footerBox:first-child,
	.footerLyt .footerBox:nth-child(2),
	.footerLyt .footerBox:last-child{
		width: 100%;
	}
}

.footer h2{ margin: 0 auto; padding: 0 0 40px 0; text-align: left;}
.footer h2 img{ width: 70px; height: 99px;}

.footer h3{ font-size: 1.2em; color: #fff;}
.footer p{ font-size: 1.2em; padding: 0 0 1.2em 0; color: #fff;}
.footer p a{ color: #fff;}
.footer address{ font-size: 1.1em; color: #fff;}
@media only screen and (max-width: 688px) {
.footer h2{ text-align: center; padding: 40px 0;}
.footer h3{ font-size: 1.0em;}
.footer p{ font-size: 1.0em;}
.footer p span{ display: inline-block; color: #fff; padding: 0 2px;}
}

.footer .sns{
	text-align: left;
	padding: 15px 0;
}
.footer .sns a{
	margin: 0 5px;
}
.footer .sns img{
	width: 30px;
	height: auto;
}
@media only screen and (max-width: 688px) {
	.footer .sns{text-align: center; padding: 15px 0 30px 0;}
}

.footerLogo{
	display: flex;
	padding: 40px 0;
	justify-content: flex-end;
}
.footerLogo img{
	height: 70px;
	width: auto;
}
.footerLogo a:first-child{
	margin-right: auto;
}
.footerLogo a:last-child{
	margin-left: 5px;
}
.footerLogo a:hover{
	opacity: 1;
}



.topMain{
	background: #64CC47;
	text-align: center;
	position: relative;
	min-height: 100vh;
	max-height: 100vh;
	overflow: hidden;
}
.topMain figure{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 15%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.topMain figure img{
	max-height: 70vh;
}


.p-kv__img{

}
.js-target-parallax img{
     width: 100%;
   }




.about{
	background: #EBEBEB;
}

.aboutMain{
	max-width: 600px;
	margin: 0 auto;
}
.aboutMain .inner{
	background-image: url("../img/about.png");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top;
	width: 100%;
	padding: 135% 0 20% 0; 
}
@media only screen and (max-width: 688px) {
	.aboutMain .inner{padding: 135% 0 70px 0; }
	.topMain img{width: auto; height: auto;}
}
.aboutMain p{
	text-align: center;
	font-size: 2.2em;
	font-weight: bold;
	color: #FF55B9;
}
@media only screen and (max-width: 688px) {
	.aboutMain p{font-size: 1.8em;}
}




.aboutTxt{
	padding: 0 3% 50px 3%;
	max-width: 680px;
	margin: 0 auto;
}
.aboutTxt p{
	font-size: 1.6em;
	padding: 0 0 1em 0;
	color: #FF55B9;
}
@media only screen and (max-width: 688px) {
.aboutTxt p{
	font-size: 1.4em;
}
}

.aboutList h3,
.aboutPlace h3,
.aboutPlan h3{
	text-align: center;
	font-size: 1.8em;
	padding: 0 0 20px 0;
	font-weight: bold;
}

.aboutList{
	padding: 0 0 70px 0;
	max-width: 1400px;
	margin: 0 auto;
}

@media only screen and (max-width: 688px) {}

.aboutList ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.aboutList ul li{
	width: 33%;
	padding: 0 0 15px 0;
}
@media only screen and (max-width: 688px) {
	.aboutList ul{
		justify-content: flex-start;
	}
.aboutList ul li{
	width: 50%;
	padding: 0 0 15px 0;
}
}


.aboutList ul li h4{
	font-size: 1.4em;
	padding: 5px 0 0 3%;
}
@media only screen and (max-width: 688px) {
	.aboutList ul li h4{
	font-size: 1.2em;
}
}

.aboutPlace{
	padding: 0 0 50px 0;
}
.aboutPlace ul li{
	font-size: 1.4em;
	text-align: center;
	padding: 0 0 0.5em 0;
}

.aboutPlan{
	padding: 0 0 50px 0;
}
.aboutPlan p{
	font-size: 2.0em;
	text-align: center;
}


.artist{}
.artistMain{
	background-color:#64CC47;
	width: 100%;
}

.artistMain .inner{
	height: 140vw;
	max-height: 800px;
	background-size: 100%;
	background-position:center;
	max-width: calc(800px + 6%);
	margin: 0 auto;
	position: relative;
}

.artistCtc .inner{
	background-image: url("../img/about_ctc.jpg");
	background-size: cover;
}


.artistKanoshunsuke .inner{
	background-image: url("../img/about_kano.jpg");
}

.artistParkhyunjung .inner{
	background-image: url("../img/about_park.jpg");
}

.artistTamayamatakuro .inner{
	background-image: url("../img/about_tamayama.jpg");
}

.artistTakedayusuke .inner{
	background-image: url("../img/about_takeda_y.jpg");
}

.artistLeeleenam .inner{
	background-image: url("../img/about_lee.jpg");
}

.artistAkiinomata .inner{
	background-image: url("../img/about_inomata.jpg");
}

.artistOhashieiji .inner{
	background-image: url("../img/about_ohashi.jpg");
}

.artistTakedahiroshi .inner{
	background-image: url("../img/about_takeda_h.jpg");
}
	
@media only screen and (max-width: 688px){
.artistKanoshunsuke .inner{
	background-image: url("../img/kano_shunsuke/ph_sp.jpg");
}

.artistParkhyunjung .inner{
	background-image: url("../img/park_hyunjung/ph_sp.jpg");
}

.artistTamayamatakuro .inner{
	background-image: url("../img/tamayama_takuro/ph_sp.jpg");
}

.artistTakedayusuke .inner{
	background-image: url("../img/takeda_yusuke/ph_sp.jpg");
}

.artistLeeleenam .inner{
	background-image: url("../img/lee_lee_nam/ph_sp.jpg");
}

.artistAkiinomata .inner{
	background-image: url("../img/aki_inomata/ph_sp.jpg");
}

.artistOhashieiji .inner{
	background-image: url("../img/ohashi_eiji/ph_sp.jpg");
}

.artistTakedahiroshi .inner{
	background-image: url("../img/takeda_hiroshi/ph_sp.jpg");
}
}


.artistMain h2{
	background: rgba(100,204,71,0.8);
	font-size: 2.8em;
	line-height: 1em;
	color: #fff;
	padding: 3px 5px;
	margin: 0 0 3px 0;
	width: 71%;
	position: absolute;
	left: 3%;
	bottom: 50px;
	white-space: nowrap;
}
.artistMain p{
	background: #FF55B9;
	background: rgba(255,85,185,0.8);
	font-size: 1.3em;
	line-height: 1em;
	color: #fff;
	padding: 3px 5px;
	position: absolute;
	left: 3%;
	bottom: 30px;
	width: 94%;
}
@media only screen and (max-width: 688px){
	.artistMain p{
		font-size: 1.2em;
	}
}

.artistTxt{
	padding: 50px 3% 10px 3%;
	max-width: calc(600px + 6%);
	margin: 0 auto;
}
.artistTxt p{
	font-size: 1.6em;
	padding: 0 0 2em 0;
	color: #5ed45e;
}
.artistTxt h5{
	font-size: 1.8em;
	color: #5ed45e;
	padding: 0 0 0.5em 0;
}
.artistTxt h4,
.artistTxt td,
.artistTxt th{
	font-size: 1.6em;
	color: #5ed45e;
}
.artistTxt table{
	margin-bottom: 30px;
}
.artistTxt td,
.artistTxt th{
	padding: 2px 0;
}
.artistTxt th{
	white-space: nowrap;
	padding-right: 10px;
}
@media only screen and (max-width: 688px) {
	.artistTxt h5{
		font-size: 1.6em;
	}
	.artistTxt p,
	.artistTxt h4,
	.artistTxt td,
.artistTxt th{
	font-size: 1.4em;
	}
}
.artistTxt p a{color: #5ed45e;}
.artistTxt p a:hover{ text-decoration: underline;}



.artistWork{
	padding: 0 3% 3% 3%;
	max-width: calc(600px + 6%);
	margin: 0 auto;
}
.artistWorkBox{
	padding: 0 0 40px 0;
}
.artistWorkBox h3{
	font-size: 1.6em;
	color: #FF55B9;
	padding: 5px 0 0 0;
}
.artistWorkBox h4{
	font-size: 1.8em;
	color: #FF55B9;
	padding: 3px 0;
}
.artistWorkBox h4 a{
	color: #FF55B9;
	text-decoration: underline;
}
.artistWorkBox h4 span{
	font-size: 0.7em;
	color: #FF55B9;
}
.artistWorkBox p{
	font-size: 1.2em;
	color: #FF55B9;
}
.artistWorkBox p a{
	color: #FF55B9;
	text-decoration: underline;
}
.artistWorkBox p a i{
	color: #FF55B9;
}

.artistWork .artistWorkBoxFl{
	display: flex;
}
.artistWork .artistWorkBoxFl figure{
	width: 100px;
	margin-right: 20px;
}
.artistWork .artistWorkBoxFl .artistWorkBox{
	flex: 1;
}
.artistWork .artistWorkBoxFl figure img{
	width: 100%;
	height: auto;
}
@media only screen and (max-width: 688px) {
	.artistWork .artistWorkBoxFl figure{
	width: 100px;
	margin-right: 10px;
}
}

.topExhibition{
	display: flex;
	flex-wrap: wrap;
}
.topExhibition a{
	width: 50%;
}
@media only screen and (max-width: 688px) {
	.topExhibition a{
	width: 100%;
}
}

.exhibitionMain{
	background-size: cover;
	background-position: center;
	height: 100vh;
  min-height: -webkit-fill-available;
	position: relative;
}

.topExhibitionMain{
	background-size: cover;
	background-position: center;
	height: 600px;
	position: relative;
}

.topExhibitionKanoshunsuke,
.exhibitionKanoshunsuke{
	background-image: url("../img/kano_shunsuke/ex.jpg");
}

.topExhibitionParkhyunjung,
.exhibitionParkhyunjung{
	background-image: url("../img/park_hyunjung/ex.jpg");
}

.topExhibitionTamayamatakuro,
.exhibitionTamayamatakuro{
	background-image: url("../img/tamayama_takuro/ex.jpg");
}

.topExhibitionTakedayusuke,
.exhibitionTakedayusuke{
	background-image: url("../img/takeda_yusuke/ex.jpg");
}

.topExhibitionLeeleenam,
.exhibitionLeeleenam{
	background-image: url("../img/lee_lee_nam/ex.jpg");
	background-position: top;
}

.topExhibitionAkiinomata,
.exhibitionAkiinomata{
	background-image: url("../img/aki_inomata/ex.jpg");
}

.topExhibitionOhashieiji,
.exhibitionOhashieiji{
	background-image: url("../img/ohashi_eiji/ex.jpg");
}

.topExhibitionTakedahiroshi,
.exhibitionTakedahiroshi{
	background-image: url("../img/takeda_hiroshi/ex.jpg");
}

.exhibitionMain.on{
	background: #000;
}

.topExhibitionTxt,
.exhibitionTxt{
	position: absolute;
	left: 3%;
	bottom: 6%;
	width: 94%;
	z-index: 96;
}
.exhibitionImg .exhibitionTxt{
	position: relative;
	padding: 3% 3% 5% 3%;
	left: 0;
	width: auto;
	background: #fff;
}

.topExhibitionMain .number{
	position: absolute;
	top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.exhibitionTxt .number{
	padding: 0 0 5px 0;
}

.topExhibitionMain .number img,
.exhibitionTxt .number img{
	height: 100px;
}

.topExhibitionMain h2,
.exhibitionMain h2,
.exhibitionImg h2{
	background: rgba(100,204,71,0.8);
	font-size: 2.8em;
	line-height: 1em;
	color: #fff;
	padding: 3px 5px;
	margin: 0 0 3px 0;
	width: 70%;
}
.exhibitionMain h2 a,
.exhibitionImg h2 a{
	color: #fff;
}
.topExhibitionMain p,
.exhibitionMain p{
	background: #FF55B9;
	background: rgba(255,85,185,0.8);
	font-size: 1.3em;
	line-height: 1em;
	color: #fff;
	padding: 3px 5px;
}
@media only screen and (max-width: 688px) {
	.topExhibitionMain p,
	.exhibitionMain p{font-size: 1.2em;}
}

.exhibitionMain .play{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.exhibitionMain .play img{
	cursor: pointer;
}
.exhibitionMain .stop{
	position: fixed;
	right: 3%;
	top: 3%;
	z-index: 100;
	width: 30px;
	height: 30px;
	cursor: pointer;
	font-size: 4.0em;
	color: #fff;
	display: none;
}

.exhibitionMain .endmov{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.exhibitionMain .endmov span{
	background-color: #000;
	color: #fff;
	font-size: 1.3em;
	padding: 10px;
	line-height: 1em;
	text-align: center;
	display: inline-block;
}


.exhibitionMain #vimeoem{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 99;
	background: rgba(0,0,0,0.7);
}
.exhibitionMain #vimeoem iframe{
	width: 100%;
	height: 100%;
}


.exhibitionImg{
	position: relative;
	padding: 140px 0 0 0;
	background: #64CC47;
}
.exhibitionImg .inner{
	background: #fff;
	padding: 3% 0;
}
.exhibitionImg figure{
	position: relative;
	margin: 0 auto;
	max-width: 1200px;
	padding: 3% 0 0 0;
}
.exhibitionImg figure img{
	width: 100%;
	height: auto;
}

.exhibitionImg p{
	background: #FF55B9;
	font-size: 1.3em;
	line-height: 1em;
	color: #fff;
	padding: 3px 5px;
	max-width: 1200px;
	margin: 0 auto;
	
}
@media only screen and (max-width: 688px) {
	.exhibitionImg p{font-size: 1.2em;}
}
.exhibitionImg .exhibitionTxt p.takedap{
	max-width: 100%;
}






/*Map*/
.map{
	padding: 60px 0 60px 0;
	background: #EBEBEB;
}

.map figure{
	max-width: 800px;
	margin: 0 auto;
	padding: 0 3% 60px 3%;
}

.map h3{
	font-size: 2.0em;
	color: #FF55B9;
	padding: 0 0 60px 0;
	text-align: center;
	font-weight: bold;
}

.map ul{
	display: flex;
	flex-wrap: wrap;
	max-width: 800px;
	margin: 0 auto;
}
.map ul li{
	width: 38%;
	padding: 0 3% 50px 3%;
}
.map ul li:nth-child(odd){
	width: 62%;
	padding: 0 3% 50px 3%;
}

.map h4{
	font-size: 1.8em;
	color: #FF55B9;
	padding: 5px 0 0 0;
}
.map h5{
	font-size: 1.4em;
	color: #FF55B9;
	text-indent: -1em;
	padding-left: 1em;
}
.map p{
	font-size: 1.6em;
	color: #FF55B9;
	padding: 3px 0;
}
.map p a{
	color: #FF55B9;
	text-decoration: underline;
}
.map p a i{
	color: #FF55B9;
	margin-right: 3px;
}

@media only screen and (max-width: 688px) {
	.map ul li,
	.map ul li:nth-child(odd){
		width: 100%;}
}