@charset "utf-8";

#sp-menu { top: 50%; transform: translate(0,-50%);}
body.show #sp-menu {  animation: 1.8s showIn linear 3.0s forwards;}
@media (max-width: 481px) {
	#sp-menu { top: 0; transform: translate(0,0);}
}

#index-hd { position: absolute; left: 0; top: 0; width: 100%; background: url(../img/bg-ptn.png); z-index: 10;
 transition: 1.0s linear 3.0s; opacity: 0;
}
#index-hd .inner-hd { width: 94%; width: calc(100% - 350px); margin: 0 auto; padding: 55px 0; background: #fff;}
#index-hd h1 { text-align: center;}
#index-hd h1 img { width: 60%; max-width: 700px;}
#index-hd h1 img.sp { display: none;}
body.show #index-hd { opacity: 1;}
@media (max-width: 1001px) {
	#index-hd .inner-hd { width: calc(100% - 200px); padding: 30px 0;}
}
@media (max-width: 481px) {
	#index-hd { padding-left: 50px; background: url(../img/bg-ptn-sp.png); background-size: 8px 8px;}
	#index-hd .inner-hd { width: 100%; padding: 30px 0 0 20px;}
	#index-hd h1 { text-align: left;}
	#index-hd h1 img.pc { display: none;}
	#index-hd h1 img.sp { display: block; width: 50%;}
}


#index-kv { position: relative; margin: 0 auto; height: 100vh; height: calc(var(--vh, 1vh) * 100);}
#index-kv .inner-kv { position: relative; width: 100%; width: calc(100% - 350px); margin: 0 auto; height: 100%;}
#index-kv .box { position: relative; width: 94%; max-width: 870px; margin: 0 auto; height: 100%;}
#index-kv .box .inner{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-40%);
 width: 100%; margin: 0 auto; padding-top: 300px;
}

#index-kv .box img.logo-png { position: absolute; width: 45%; max-width: 360px; bottom: 0; transform-origin: center; opacity: 0;}
#index-kv .box img.logo-png.v {  left: 0%; animation: 1.4s showIn-1 cubic-bezier(0, 0.55, 0.45, 1) forwards;}
#index-kv .box img.logo-png.c { left: 50%; transform: translate(-56%,0); animation: 1.4s showIn-2 cubic-bezier(0, 0.55, 0.45, 1) forwards;}
#index-kv .box img.logo-png.a { right: 0%; animation: 1.4s showIn-1 cubic-bezier(0, 0.55, 0.45, 1) forwards;}
/*
#index-kv .box img.logo-svg { position: absolute; transform-origin: center; opacity: 0;}
#index-kv .box img.logo-svg.v { width: 40%; max-width: 400px; bottom: 50px; left: 0;
 animation: .5s showIn-1 linear forwards;
}
#index-kv .box img.logo-svg.c { width: 32%; max-width: 280px; bottom: 0px; left: 50%; transform: translate(-62%,0);
 animation: .5s showIn-2 linear forwards;
}
#index-kv .box img.logo-svg.a { width: 42%; max-width: 360px; bottom: 50px; right: 0;
 animation: .5s showIn-1 linear forwards;
}
*/
#index-kv .box p { position: absolute; right: 0; bottom: 0; width: 100%; padding: 0 15px; text-align: right;}
#index-kv .box p img.txt { position: relative; width: 38%; max-width: 300px;
 animation: 1.0s showIn cubic-bezier(0.33, 1, 0.68, 1) forwards; opacity: 0;
}
#index-kv h2 { position: absolute; top: 50%; width: 100%; text-align: center; transform: translate(0,-60%);}
#index-kv h2 img { width: 80%; max-width: 870px; opacity: 0.6;}

#index-kv .sub { display: none; position: absolute; left: 0; bottom: 70px; width: 100%; padding-right: 50px;
 background: url(../img/bg-ptn-sp.png); background-size: 8px 8px; z-index: 10;
}
#index-kv .sub .inner { padding: 0 20px 60px; background: #fff;}
#index-kv .sub p { text-align: right;}
#index-kv .sub p img { width: auto; height: 70px;}
#index-kv .arw { position: absolute; left: 50%; bottom: 10px; width: 1px; height: 140px; z-index: 11;}
#index-kv .arw:before { content: ''; display: block; width: 1px; height: 0%; background: #000;
 position: absolute; left: 0; top: 0;
 animation: 2.4s moving-2 ease-in infinite; animation-delay: 3.0s;
}

@keyframes moving-2{
	 0% { top:  0%; height: 0%;}
	20% { top:  0%; height: 100%;}
	60% { top:  0%; height: 100%;}
	80% { top: 100%; height: 0%;}
 100% { top:  0%; height: 0%;}
}


#index-kv .side { position: absolute; left: 30px; top: 50%; transform: translate(0,-40%); width: 28px;
 transition: 1.0s linear 3.0s; opacity: 0;
}
#index-kv .side ul li { margin: 0 auto 20px; text-align: center;}
#index-kv .side ul li svg { fill: #000; transition: 0.4s ease;}
#index-kv .side ul li.tw svg { width: 28px;}
#index-kv .side ul li.fb svg { height: 28px;}
#index-kv .side ul li.txt:before { content: ''; display: block; width: 1px; height: 28px; background: #000; margin: 0 auto 20px;}
#index-kv .side ul li.txt img { width: 18px;}
#index-kv .side ul li a:hover svg { fill: #999;}

body.show #index-kv .box img.v { animation-delay: 0.5s;}
body.show #index-kv .box img.c { animation-delay: 0.8s;}
body.show #index-kv .box img.a { animation-delay: 1.1s;}
body.show #index-kv .box p img.txt { animation-delay: 3.0s;}
body.show #index-kv .side{ opacity: 1;}
@keyframes showIn-1{
	0% { opacity: 0; transform: scale(1.2);}
 20% { opacity: 0;}
100% { opacity: 1; transform: scale(1.0);}
}
@keyframes showIn-2{
	0% { opacity: 0; transform: translate(-56%,0) scale(1.2);}
 20% { opacity: 0;}
100% { opacity: 1; transform: translate(-56%,0) scale(1.0);}
}
@keyframes slideIn {
	0% { opacity: 0; transform: translateX(-100px);}
 30% { opacity: 0;}
100% { opacity: 1; transform: translateX(0);}
}
@media (max-width: 1001px) {
	#index-kv .inner-kv { width: calc(100% - 200px);}
	#index-kv .box .inner{ padding-top: 45%;}
}
@media (max-width: 801px) {
}
@media (max-width: 481px) {
	#index-kv .inner-kv { width: 100%;}
	#index-kv .box .inner{ top: 45%;}
	#index-kv .box img.logo-png { width: 42%;}
	#index-kv .box p{ display: none;}
	#index-kv .sub { display: block; transition: 1.0s linear 3.0s; opacity: 0;}
	body.show #index-kv .sub { opacity: 1;}

	#index-kv .arw { height: 100px; left: 20px; bottom: 70px;}
	#index-kv .side{ display: none;}
}


.sct { transition: 0.4s linear; opacity: 0;}

.sct .ctn { display: flex; justify-content: space-between; width: 90%; max-width: 900px; margin: 0 auto 60px; transition: 0.4s linear; opacity: 0;}
.sct .ctn.even { flex-direction: row-reverse;}
.sct .ctn .topic{ width: 20%;}
.sct .ctn .txt { width: 75%;}
.sct .ctn .topic h3 { position: relative;}
.sct .ctn .topic h3 svg.icn-no { position: relative;
 display: block; width: 100%; max-width: 130px; margin-bottom: 30px;
 fill: none; stroke: #ddd; stroke-width: 1px;
 transition: 0.6s linear;
}
.sct .ctn.odd .topic h3 svg.icn-no {}
.sct .ctn.even .topic h3 svg.icn-no {}
.sct .ctn .topic h3 span { position: relative; display: block; width: 100%; max-width: 130px; padding-right: 15px;}
.sct .ctn .topic h3 span img { width: 100%;}
.sct .ctn .topic h3 span img.sp { display: none;}
.sct .ctn .topic h3 span:before,
.sct .ctn .topic h3 span:after { content: ''; display: block; width: 4px;
 background: url(../img/bg-ptn.png) repeat-y 50% 0 / 100% auto; position: absolute; top: 0;
 transition: 0.5s ease-in;
}
.sct .ctn .topic h3 span:before{ right: 0; height: 100%;}
.sct .ctn .topic h3 span:after { left: 34%;}
.sct .ctn .topic h3.topic-1 span:before{ height: 90%;}
.sct .ctn .topic h3.topic-2 span:before{ height: 100%;}
.sct .ctn .topic h3.topic-3 span:before{ height: 80%;}


.sct .ctn .txt p { margin-bottom: 40px; font-size: 20px; letter-spacing: 0.075rem; line-height: 2;}
.sct .ctn.even .txt p { text-align: right;}
.sct .ctn .txt p:last-child { margin-bottom: 0px;}
.sct .ctn .txt p span.br { display: block;}
.sct .ctn .txt p span.marker { display: inline-block; }
.sct .ctn .txt p em { font-weight: 700;}
.sct .ctn .txt p br.sp { display: none;}
.sct figure { position: relative; width: 90%; max-width: 900px; margin: 0 auto;}
.sct figure img { position: relative;}
.sct figure.mb { margin: 0 auto 140px;}
.sct figure img { position: relative; width: 100%;}


.sct.show{ opacity: 1;}
.sct .ctn.show { opacity: 1;}
/*
.sct .ctn .txt.show { opacity: 1;}
.sct .ctn .topic.show h3 svg.icn-no { transform: translateX(0px);}
.sct .ctn .topic.show h3 span { transform: translateY(0px); opacity: 1;}
.sct .ctn .topic.show h3 span:after { height: 100%;}
.sct .ctn .topic.show h3.topic-1 span:before{ height: 90%;}
.sct .ctn .topic.show h3.topic-2 span:before{ height: 100%;}
.sct .ctn .topic.show h3.topic-3 span:before{ height: 80%;}
*/


.board { position: relative; width: 90%; max-width: 900px; margin: 0 auto; padding: 40px 45px; background: url(../img/bg-ptn.png);}
.board .inner { padding: 50px; background: #fff;}
.board p { text-align: center;}
@media (min-width: 800px) {
}
@media (max-width: 1001px) {
	.board { padding: 30px 35px;}
	.board .inner { padding: 35px;}
}
@media (max-width: 801px) {
	.sct .ctn .txt p { margin-bottom: 30px; font-size: 18px;}

	.board { padding: 20px 25px;}
	.board .inner { padding: 30px 20px;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	.sct { padding-top: 10px;}
	.sct .ctn .topic{ width: 22%; overflow: hidden;}
	.sct .ctn .topic h3 svg.icn-no { width: 60px; margin: 0 auto 15px; stroke: #b7b8b8}
	.sct .ctn .topic h3 span { width: 30px; margin: 0 auto; padding-right: 6px;}
	.sct .ctn .topic h3 span img.pc { display: none;}
	.sct .ctn .topic h3 span img.sp { display: block; width: 18px; margin: 0 auto;}
	.sct .ctn .topic h3 span:before { width: 3px;}
	.sct .ctn .topic h3.topic-1 span:before{ height: 100%;}
	.sct .ctn .topic h3.topic-3 span:before{ height: 100%;}

	.sct .ctn .topic h3 span:after { content: none;}
	.sct .ctn .txt p { margin-bottom: 20px; font-size: 14px; letter-spacing: 0.025rem;}
	.sct .ctn .txt p span.sp { display: block;}
	.sct .ctn .txt p br.pc { display: none;}
	.sct .ctn .txt p br.sp { display: block;}
	.sct figure.mb { margin: 0 auto 80px;}

	.sct .ctn .topic.show h3.topic-1 span:before{ height: 100%;}
	.sct .ctn .topic.show h3.topic-3 span:before{ height: 100%;}

	.board { padding: 15px; background: url(../img/bg-ptn-sp.png); background-size: 8px 8px;}
	.board .inner { padding: 20px;}
}



#vca { padding-top: 80px;}
#vca .tit { opacity: 0;}
#vca .tit h2 img { width: 80%; max-width: 120px;}
#vca .tit p { position: absolute; width: 100%; bottom: -15px; text-align: center;
 transition: 0.3s linear 0.2s; opacity: 0; transform: translateY(10px);
}
#vca .tit p img { width: 80%; max-width: 340px;}
#vca .inner-sct { position: relative; padding: 50px 0 200px; transition: 0.4s linear; opacity: 0; transform: translateY(15px);}
#vca .txt { position: relative;}
#vca .txt p { margin-bottom: 50px; letter-spacing: 0.075rem; line-height: 2; text-align: center;}
#vca .txt p span.br { display: block;}
#vca .txt p br { display: none;}
#vca .txt p span.marker { position: relative; display: inline-block; padding-bottom: 4px; font-weight: 700; line-height: 1.6;}
#vca .txt p span.marker:after { content: ''; display: block; width: 100%; height: 4px;
 background: url(../img/bg-ptn.png) repeat-x 50% 100%; background-size: auto 100%;
 position: absolute; left: 0; bottom: 0;
}
#vca .txt p em { font-weight: 700;}
#vca figure img { transition: 0.6s linear; opacity: 0; transform: translateY(15px);}
#vca .tit.show { opacity: 1;}
#vca .tit.show p { opacity: 1; transform: translateY(0px);}
#vca .inner-sct.show { opacity: 1; transform: translateY(0px);}
#vca figure.show img { opacity: 1; transform: translateY(0px);}
@media (min-width: 800px) {
  #vca .txt p { font-size: calc(1.0625rem + ((1vw - 8px) * 1)); min-height: 0vw;}
	#vca .txt p span.marker { font-size: calc(1.3125rem + ((1vw - 8px) * 1.25)); min-height: 0vw;}
}
@media (max-width: 641px) {
	#vca .txt p { margin-bottom: 30px; font-size: 16px;}
	#vca .txt p span.marker { font-size: 21px;}
	#vca .txt p span.marker:after { height: 3px;}
}
@media (max-width: 481px) {
	#vca { padding-top: 40px;}
	#vca .tit .inner-tit { width: calc(100% - 100px); padding: 10px 0px 14px;}
	#vca .inner-sct{ padding: 40px 0 100px;}
	#vca .tit h2 img { width: auto; max-width: auto; height: 28px;}
	#vca .txt p { margin-bottom: 20px; font-size: 14px; letter-spacing: 0.025rem; line-height: 1.75;}
	#vca .txt p br { display: block;}
	#vca .txt p span.sp { display: block;}
	#vca .txt p span.marker { font-size: 16px;}
	#vca .txt p span.marker:after { height: 3px;}
}


#how .tit h2 img { width: 80%; max-width: 310px;}
#how .inner-sct{ padding: 0 0 140px;}
@media (max-width: 801px) {
	#how .inner-sct{ padding: 20px 0 100px;}
}
@media (max-width: 481px) {
	#how .tit h2 img { width: auto; max-width: auto; height: 28px;}
}


#what .tit h2 img { width: 80%; max-width: 340px;}
#what .inner-sct{ padding: 0 0 140px;}
#what .board.price { margin: 0 auto 40px;}
#what .read { position: relative; margin: 0 auto;}
#what .read.mb { margin: 0 auto 40px;}
#what .read p { letter-spacing: 0.075rem; line-height: 2; text-align: center;}
#what .read p span { display: block;}
#what .read p span.event { display: inline-block; padding-left: 20px; font-weight: 700; text-align: left; text-indent: -18px;}
#what figure { margin: 0 auto 60px;}
#what .btn { width: 80%; max-width: 700px; margin: 0 auto 60px;}
#what .btn a br { display: none;}
@media (min-width: 800px) {
  #what .read p { font-size: calc(1rem + ((1vw - 8px) * 1)); min-height: 0vw;}
}
@media (max-width: 801px) {
	#what .inner-sct{ padding: 20px 0 100px;}
}
@media (max-width: 481px) {
	#what .tit h2 img { width: auto; max-width: auto; height: 28px;}
	#what .read { width: 90%; margin: 0 auto;}
	#what .read p { font-size: 14px; text-align: justify;}
	#what .read p span { display: inline;}
	#what .btn { width: 75%;}
	#what .btn a br { display: block;}
}


#gallery{}
#gallery .tit h2 img { width: 80%; max-width: 330px;}
#gallery .inner-sct{ padding: 0 0 160px;}
#gallery .artwork { position: relative; width: 100%; margin-bottom: 50px;}
#gallery .artwork .th { padding-top: 10px;}
#gallery .artwork .th dl { width: 100%; margin: 0 auto;}
#gallery .artwork .th dl dt { margin: 0 auto 40px; text-align: center;}

#gallery .artwork .th dl dt span,
#gallery .artwork .th dl dt a { position: relative; display: block; margin: 0 auto;}

#gallery .artwork .th dl.cir dt span,
#gallery .artwork .th dl.cir dt a{ width: 90%; max-width: 220px;}
#gallery .artwork .th dl.tri dt span,
#gallery .artwork .th dl.tri dt a { width: 85%; max-width: 235px;}
#gallery .artwork .th dl.rect dt span,
#gallery .artwork .th dl.rect dt a{ width: 100%; max-width: 192px;}
#gallery .artwork .th dl dt span:after,
#gallery .artwork .th dl dt a:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 98%; height: 98%;
 transition: 0.4s ease; transform: translate(5px,5px); z-index: 1;
}
#gallery .artwork .th dl.cir-1 dt span:after,
#gallery .artwork .th dl.cir-1 dt a:after { background: url(../img/index/gallery-bg-1.png) no-repeat 100% 100% / 100% 100%;}
#gallery .artwork .th dl.cir-2 dt span:after,
#gallery .artwork .th dl.cir-2 dt a:after { background: url(../img/index/gallery-bg-2.png) no-repeat 100% 100% / 100% 100%;}
#gallery .artwork .th dl.tri-1 dt span:after,
#gallery .artwork .th dl.tri-1 dt a:after { transform: translate(8px,8px); background: url(../img/index/gallery-bg-3.png) no-repeat 100% 100% / 100% 100%;}
#gallery .artwork .th dl.tri-2 dt span:after,
#gallery .artwork .th dl.tri-2 dt a:after { transform: translate(8px,8px); background: url(../img/index/gallery-bg-4.png) no-repeat 100% 100% / 100% 100%;}

#gallery .artwork .th dl.rect-1 dt span:after,
#gallery .artwork .th dl.rect-1 dt a:after { border: solid 1px #000;}
#gallery .artwork .th dl.rect-2 dt span:after,
#gallery .artwork .th dl.rect-2 dt a:after { background: url(../img/bg-ptn.png);}

#gallery .artwork .th dl.rect-1 dt span:after,
#gallery .artwork .th dl.rect-1 dt a:after,
#gallery .artwork .th dl.rect-2 dt span:after,
#gallery .artwork .th dl.rect-2 dt a:after { width: 100%; height: 100%;}
#gallery .artwork .th dl dt span img,
#gallery .artwork .th dl dt a img { position: relative; width: 100%; transform: translate(-5px,-5px); z-index: 2; transition: 0.4s ease;}

#gallery .artwork .th dl dd { font-size: 18px; text-align: center;}
#gallery .artwork .th dl dd.art-name { margin-bottom: 10px; font-weight: 600;}
#gallery .artwork .th dl dd.name {}
#gallery .artwork .th dl dt span:hover img,
#gallery .artwork .th dl dt a:hover img { transform: translate(0px,0px);}
#gallery .artwork .th dl.rect-1 dt span:hover img{ transform: translate(1px,1px);}
#gallery .artwork .th dl dt span:hover:after,
#gallery .artwork .th dl dt a:hover:after { transform: translate(1px,1px);}
#gallery .artwork .th dl.tri-1 dt span:hover:after,
#gallery .artwork .th dl.tri-1 dt a:hover:after { transform: translate(2px,2px);}
#gallery .artwork .th dl.rect-1 dt span:hover:after,
#gallery .artwork .th dl.rect-1 dt a:hover:after,
#gallery .artwork .th dl.rect-2 dt span:hover:after,
#gallery .artwork .th dl.rect-2 dt a:hover:after { transform: translate(0px,0px);}

#gallery .artwork.show { opacity: 1; transform: translateY(0px);}

#gallery .btn { width: 60%; max-width: 360px; margin: 0 auto 50px;}

#gallery .sponsor { position: relative; width: 100%; padding-top: 100px;}
#gallery .sponsor p { text-align: center;}
#gallery .sponsor p img { width: 100%; max-width: 1080px;}
#gallery .sponsor p img.sp { display: none;}
#gallery .sponsor p.txt { margin-bottom: 50px; font-size: 22px; letter-spacing: 0.075rem;}

@media (max-width: 641px) {
	#gallery ul.artwork { flex-wrap: wrap;}
	#gallery ul.artwork li { width: 50%; margin: 0 auto 30px;}

	#gallery .sponsor p img.pc { display: none;}
	#gallery .sponsor p img.sp { display: block;}
	#gallery .sponsor p.txt { margin-bottom: 30px; font-size: 16px;}
}
@media (max-width: 481px) {
	#gallery .inner-sct{ padding: 0px 0 100px;}
	#gallery .tit .inner-tit { padding: 12px 0 8px;}
	#gallery .tit h2 img { width: auto; max-width: auto; height: 36px;}

	#gallery .artwork .th dl dt { width: 92%; margin: 0 auto 15	px;}

	#gallery .artwork .th dl.cir dt span,
	#gallery .artwork .th dl.cir dt a{ width: 83%; max-width: 150px;}
	#gallery .artwork .th dl.tri dt span,
	#gallery .artwork .th dl.tri dt a { width: 88.5%; max-width: 155px;}
	#gallery .artwork .th dl.rect dt span,
	#gallery .artwork .th dl.rect dt a{ width: 90%; max-width: 124px;}

	#gallery .artwork .th dl dt span:after,
	#gallery .artwork .th dl dt a:after { transform: translate(3px,3px);}
	#gallery .artwork .th dl.rect-2 dt span:after,
	#gallery .artwork .th dl.rect-2 dt a:after { background: url(../img/bg-ptn-sp.png); background-size: 6px 6px;}

	#gallery .artwork .th dl dt span img,
	#gallery .artwork .th dl dt a img { transform: translate(-3px,-3px);}
	#gallery .artwork .th dl dd { font-size: 14px;}
	#gallery .artwork .th dl dd.art-name { margin-bottom: 6px; font-weight: 400;}

	#gallery .sponsor { padding-top: 40px;}
	#gallery .sponsor p.txt { margin-bottom: 20px;}
	#gallery .sponsor p.txt span { display: block;}
}


#artists .tit h2 img { width: 80%; max-width: 200px;}
#artists .inner-sct{ padding: 0 0 180px;}
#artists ul.artist { width: 92%; max-width: 1080px; margin: 0 auto; font-size: 0;}
#artists ul.artist li { display: inline-block; width: 25%; margin: 0 auto 50px; vertical-align: top;}
#artists ul.artist li dl { width: 90%; max-width: 200px; margin: 0 auto;}
#artists ul.artist li dl dt { position: relative; margin: 0 auto 30px;}
#artists ul.artist li dl dt a { position: relative; display: block; width: 100%; color: #000; text-decoration: none;}
#artists ul.artist li dl dt a:after { content: ''; display: block; width: 100%; height: 100%;
 position: absolute; top: 0; left: 0; z-index: 1; transition: 0.4s ease;
}
#artists ul.artist li:nth-child(odd) dl dt a:after { background: url(../img/bg-ptn.png); transform: translate(5px,5px);}
#artists ul.artist li:nth-child(even) dl dt a:after{ border: solid 1px #000; transform: translate(-5px,-5px);}

#artists ul.artist li dl dt a img { position: relative; width: 100%; z-index: 2; transition: 0.4s ease;}
#artists ul.artist li:nth-child(odd) dl dt a img { transform: translate(-5px,-5px);}
#artists ul.artist li:nth-child(even) dl dt a img { transform: translate(5px,5px);}

#artists ul.artist li dl dd { font-size: 18px; letter-spacing: 0.075rem; line-height: 1.8; text-align: center;}

#artists .btn { width: 60%; max-width: 360px;}
@media (min-width: 801px) {
	#artists ul.artist li dl dt a:hover img{ transform: translate(1px,1px);}
	#artists ul.artist li:nth-child(odd) dl dt a:hover:after{ transform: translate(1px,1px);}
	#artists ul.artist li:nth-child(even) dl dt a:hover:after{ transform: translate(0px,0px);}
}

@media (max-width: 801px) {
	#artists ul.artist li:nth-child(odd) dl dt a:after { transform: translate(3px,3px);}
	#artists ul.artist li:nth-child(even) dl dt a:after{ transform: translate(-3px,-3px);}

	#artists ul.artist li:nth-child(odd) dl dt a img { transform: translate(-3px,-3px);}
	#artists ul.artist li:nth-child(even) dl dt a img { transform: translate(3px,3px);}
}
@media (max-width: 641px) {
	#artists .inner-sct{ padding: 20px 0 140px;}
	#artists ul.artist li { width: 50%; margin: 0 auto 30px;}

	#artists ul.artist li dl dt { margin: 0 auto 20px;}
	#artists ul.artist li:nth-child(4) dl dt a:after { background: url(../img/bg-ptn.png); border: none;
	 transform: translate(5px,5px);
	}
	#artists ul.artist li:nth-child(3) dl dt a:after{ background:#fff; border: solid 1px #000;
	 transform: translate(-5px,-5px);
	}
	#artists ul.artist li:nth-child(4) dl dt a img { transform: translate(-3px,-3px);}
	#artists ul.artist li:nth-child(3) dl dt a img { transform: translate(3px,3px);}
}
@media (max-width: 481px) {
	#artists .inner-sct{ padding: 0px 0 100px;}
	#artists .tit h2 img { width: auto; max-width: auto; height: 28px;}

	#artists ul.artist li dl dt { margin: 0 auto 12px;}
	#artists ul.artist li:nth-child(1) dl dt a:after,
	#artists ul.artist li:nth-child(4) dl dt a:after { background: url(../img/bg-ptn-sp.png); background-size: 6px 6px;}

	#artists ul.artist li dl dd { font-size: 14px;}
}



#interview {}
#interview .tit h2 img { width: 80%; max-width: 260px;}
#interview ul { width: 92%; max-width: 980px; margin: 0 auto; font-size: 0;}
#interview ul li { display: inline-block; width: 50%; margin: 0 auto 30px; vertical-align: top;}
#interview ul li a { position: relative; display: block; width: 92%; max-width: 420px; margin: 0 auto;
 color: #000; text-decoration: none;
}
#interview ul li a img { position: relative; width: 100%; z-index: 1;}
#interview ul li a dl { position: relative; width: 88%; margin: -50px auto 0; padding: 30px; background: #fff; z-index: 2;}
#interview ul li a dl dt { margin-bottom: 20px; font-size: 18px; font-weight: 700;}
#interview ul li a dl dd { font-size: 16px; letter-spacing: 0.075rem; line-height: 1.8;}
#interview .btn { width: 60%; max-width: 360px;}
@media (max-width: 641px) {
	#interview .inner-sct { padding: 20px 0;}
	#interview ul { margin: 0 auto 50px;}
	#interview ul li { display: block; width: 100%}
	#interview ul li:last-child { margin: 0 auto;}
}
@media (max-width: 481px) {
	#interview .tit h2 img { width: auto; max-width: auto; height: 28px;}
	#interview ul li a dl { margin: -30px auto 0; padding: 15px;}
	#interview ul li a dl dt { margin-bottom: 10px; font-size: 15px;}
	#interview ul li a dl dd { font-size: 14px; letter-spacing: 0.05rem; line-height: 1.6;}
}


#message .inner-sct { padding: 100px 0;}
#message .board h2 { margin-bottom: 40px; font-size: 36px; line-height: 1.4; text-align: center;}
#message .board h2 span { display: inline-block; padding: 0 0 10px; border-bottom: solid 1px #000;}
#message .board h2 br { display: none;}
#message .board p { margin-bottom: 50px; font-size: 20px; line-height: 1.6;}
#message ul.check { margin-bottom: 20px; font-size: 0;}
#message ul.check li { display: inline-block; margin-bottom: 20px; font-size: 19px; font-weight: 700;}
#message ul.check li:nth-child(odd){ width: 45%;}
#message ul.check li:nth-child(even) { width: 55%;}
#message ul.form-parts { margin-bottom: 50px;}
#message ul.form-parts li { width: 100%;}
#message ul.form-parts li dl { display: table; width: 100%;}
#message ul.form-parts li dl dt,
#message ul.form-parts li dl dd { position: relative; display: table-cell; padding: 7px 5px; vertical-align: top;}
#message ul.form-parts li dl dt { width: 25%; font-size: 18px; font-weight: 700;}
#message ul.form-parts li dl dd { width: 75%;}
#message ul.form-parts li dl dd input[type="text"],
#message ul.form-parts li dl dd input[type="email"] { width: 100%; padding: 5px; border: solid 1px #000;
 appearance: none; -webkit-appearance: none;
}
#message ul.form-parts li dl dd textarea { width: 100%; height: 100px; padding: 5px; border: solid 1px #000;
 appearance: none; -webkit-appearance: none;
}
#message ul.form-parts li dl dd label.error {
	position: absolute; top: -30px; left: -10px; padding: 5px 8px; background: #d00; border-radius: 5px; color: #fff; font-size: 12px;
	opacity: 0; animation: .5s showError linear forwards .2s;
}
#message ul.form-parts li dl dd label.error:before{ content: ''; display: block; width: 8px; height: 8px; background: #d00;
	transform: rotate(45deg);
	position: absolute; bottom: -4px; left: 20px;
}
@keyframes showError{
	100%{ opacity: 1;}
}


#message .send-btn { width: 80%; max-width: 450px;}
@media (max-width: 801px) {
	#message .board h2 { font-size: 30px;}
	#message .board ul.check { margin-bottom: 40px;}
	#message .board ul.check li { display: block; margin: 0 auto 20px;}
	#message .board ul.check li:nth-child(odd),
	#message .board ul.check li:nth-child(even) { width: 80%;}
	#message .board ul.check li:last-child{ margin-bottom: 0px;}
}
@media (max-width: 641px) {
	#message .board h2 { margin-bottom: 30px; font-size: 24px;}
	#message .board p { font-size: 18px;}
	#message .board p span{ display: block;}
	#message .board ul.check li { margin: 0 auto 10px; font-size: 15px;}
	#message ul.form-parts { margin: 0 auto 40px;}
	#message ul.form-parts li { margin: 0 auto 8px;}
	#message ul.form-parts li:last-child { margin: 0 auto;}
	#message ul.form-parts li dl dt,
	#message ul.form-parts li dl dd { display: block; width: 100%;}
	#message ul.form-parts li dl dt { padding: 0 5px;}
}
@media (max-width: 481px) {
	#message .board h2 { margin-bottom: 30px; font-size: 21px;}
	#message .board h2 br { display: block;}
	#message .board p { margin-bottom: 30px; font-size: 15px;}
	#message .board ul.check { margin-bottom: 30px;}
	#message .board ul.check li:nth-child(odd),
	#message .board ul.check li:nth-child(even) { width: 100%; font-size: 14px;}
	#message ul.form-parts li dl dt { font-size: 16px;}
	#message ul.form-parts li dl dd input[type="text"],
	#message ul.form-parts li dl dd input[type="email"] { padding: 6px 5px;}
}


.paint { position: absolute;}
.paint.paint-1 { width: 180px; height: 470px; left: 0; top: 10%; transform-origin: 0 50%;
 background: url(../img/index/paint-1.png) no-repeat 100% 50% / auto 100%;
}
.paint.paint-2 { width: 250px; height: 500px; right: 0; bottom: 20%; transform-origin: 100% 50%;
 background: url(../img/index/paint-2.png) no-repeat 0% 50% / auto 100%;
}
.paint.paint-3 { width: 180px; height: 650px; left: 0; top: 32%; transform-origin: 0 50%;
 background: url(../img/index/paint-3.png) no-repeat 100% 50% / auto 100%;
}
.paint.paint-4 { width: 210px; height: 510px; right: 0; top: 68%; transform-origin: 100% 50%;
 background: url(../img/index/paint-4.png) no-repeat 0% 50% / auto 100%;
}
.paint.paint-5 { width: 180px; height: 490px; left: 0; bottom: 15%; transform-origin: 0 50%;
 background: url(../img/index/paint-5.png) no-repeat 100% 50% / auto 100%;
}
.paint.paint-6 { width: 200px; height: 360px; right: 0; bottom: 100px; transform-origin: 100% 50%;
 background: url(../img/index/paint-6.png) no-repeat 0% 50% / auto 100%;
}
.paint.paint-7 { width: 90px; height: 430px; left: 0; top: 25%; transform-origin: 0 50%;
 background: url(../img/index/paint-7.png) no-repeat 100% 50% / auto 100%;
}
.paint.paint-8 { width: 210px; height: 340px; right: 0px; top: 0px; transform-origin: 100% 50%;
 background: url(../img/index/paint-8.png) no-repeat 0% 50% / auto 100%;
}
@media (max-width: 1001px) {
	.paint.paint-1 { width: 100px; height: 260px; top: 15%;}
	.paint.paint-2 { width: 125px; height: 250px; bottom: 30%;}
	.paint.paint-3 { width: 100px; height: 360px; top: 35%;}
	.paint.paint-4 { width: 140px; height: 340px; top: 68%;}
	.paint.paint-5 { width: 90px; height: 295px; bottom: 10%;}
	.paint.paint-6 { width: 100px; height: 180px;}
	.paint.paint-7 { width: 50px; height: 240px; top: 25%;}
	.paint.paint-8 { width: 120px; height: 200px;}
}
@media (max-width: 801px) {
	.paint.paint-5 { bottom: 5%;}
	.paint.paint-7 { top: 40%;}
}
@media (max-width: 641px) {
	.paint.paint-1 { width: 60px; height: 160px; top: 15%;}
	.paint.paint-2 { width: 100px; height: 200px; bottom: 30%;}
	.paint.paint-3 { width: 60px; height: 216px; top: 35%;}
	.paint.paint-4 { width: 100px; height: 245px; top: 70%;}
	.paint.paint-5 { width: 60px; height: 200px; bottom: 5%;}
	.paint.paint-6 { width: 100px; height: 180px;}
	.paint.paint-7 { width: 50px; height: 240px; top: 40%;}
	.paint.paint-8 { width: 60px; height: 100px;}
}
@media (max-width: 481px) {
	.paint.paint-1 { width: 45px; height: 120px; top: 28%;}
	.paint.paint-2 { width: 70px; height: 140px; bottom: 30%;}
	.paint.paint-3 { width: 40px; height: 145px; top: 42%;}
	.paint.paint-4 { width: 70px; height: 190px; top: 74%;}
	.paint.paint-5 { width: 40px; height: 135px; bottom: 28%;}
	.paint.paint-6 { width: 70px; height: 126px;}
	.paint.paint-7 { width: 30px; height: 145px; top: 45%;}
}