@charset "utf-8";
.ttl { text-align: center;}
.ttl h2 { margin-bottom: 12px; font-size: 40px; font-weight: 400; letter-spacing: 0.4rem; line-height: 1;}
.ttl p { font-size: 18px; font-weight: 700;}
@media (max-width: 800px) {
	.ttl h2 { font-size: 32px;}
	.ttl p { font-size: 15px;}
}
@media (max-width: 480px) {
	.ttl h2 { margin-bottom: 6px; font-size: 24px; letter-spacing: 0.2rem;}
	.ttl p { font-size: 13px;}
}



#kv { position: relative;}
#kv .inner-kv { width: 100%;}
#kv img { width: 100%;}
#kv img.sp { display: none;}
#kv .slick-dots { max-width: 250px; position: absolute; bottom: 5%; left: 3%; text-align: left;}
#kv .kv-copy {position: absolute; left:50%; top: 22%; transform: translate(-50%); z-index:10; text-align:left; color:#fff; width:90%; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);}
#kv .kv-copy .kv-copy01 { font-size:7vw; letter-spacing:0.15em; line-height:1.1;}
#kv .kv-copy .kv-copy02 { font-size:2.5vw; font-weight:700; margin:1em 0 0 0.1em;}
#kv .kv-copy .kv-copy03 { width:30%; margin:0.8em 0 0 0;}
@media (max-width: 1280px) {
}
@media (max-width: 800px) {
}
@media (max-width: 640px) {
	#kv img.pc { display: none;}
	#kv img.sp { display: block;}
    #kv .kv-copy .kv-copy01 { font-size:11vw; }
    #kv .kv-copy .kv-copy02 { font-size:3.5vw; }
    #kv .kv-copy .kv-copy03 { width:50%;}
}
.kv-slider {
  aspect-ratio: 192 / 97;
  overflow: hidden;
}
@media (max-width: 640px) {
    .kv-slider {
        aspect-ratio: 40 / 39;
    }
}

#event { background: #000;}
#event .inner-sct { padding: 50px 0 80px;}
#event .ttl { margin-bottom: 40px;}
#event .ttl h2 { color: #fff;}
#event .ttl p { color: #fff;}
#event .ctn { width: 100%; max-width: 1280px; margin: 0 auto 50px;}
#event .ctn ul { width: 100%; font-size: 0;}
#event .ctn ul li { display: inline-block; width: 33.33334%; padding: 0 20px; vertical-align: top;}
#event .ctn ul li a { display: block; min-height: 180px; text-decoration: none;}
#event .ctn ul li a dl { position: relative; padding-left: 200px;}
#event .ctn ul li a dl dt { position: absolute; left: 0; top: 0; width: 180px; padding-top: 180px; background: #fff; overflow: hidden;}
#event .ctn ul li a dl dt img { width: 102%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: 0.4s ease;}
#event .ctn ul li a dl dd { color: #fff; font-size: 20px; font-weight: 700;}
#event .ctn ul li a dl dd time { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 400;}
#event .ctn ul li a dl dd time em { font-size: 17px; font-weight: 400;}
#event .ctn ul li a dl dd span { display: block; }
#event .ctn ul li a dl dd span.tit { margin-bottom: 6px; font-size: 16px; font-weight: 900;}
#event .ctn ul li a dl dd span.status { width: 60px; background: #fff; color: #000; font-size: 14px; text-align: center;}
#event .ctn ul li a:hover dl dt img { opacity: 0.85; transform: translate(-50%,-50%) scale(1.1);}
#event .btn { width: 55%; max-width: 200px; margin: 0 auto;}
#event .btn a { display: block; padding: 6px 0; background: #fff; border: solid 1px #fff;
 color: #000; font-size: 18px; font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
 transition: 0.3s ease;
}
#event .btn a:hover { background: #000; color: #fff;}
@media (max-width: 1000px) {
	#event .ttl { margin-bottom: 20px;}
	#event .ctn ul li a { min-height: 120px;}
	#event .ctn ul li a dl { padding-left: 140px;}
	#event .ctn ul li a dl dt { width: 120px; padding-top: 120px; background: #fff; overflow: hidden;}
	#event .ctn ul li a dl dd time { font-size: 11px;}
	#event .ctn ul li a dl dd time em { font-size: 15px;}
	#event .ctn ul li a dl dd span.tit { font-size: 16px;}
	#event .ctn ul li a dl dd span.status { width: 50px; font-size: 12px;}
}
@media (max-width: 800px) {
	#event .inner-sct { padding: 40px 0 60px;}
	#event .ctn { width: 82%; margin: 0 auto 30px;}
	#event .ctn ul li { display: block; width: 100%; padding: 12px;}
	#event .ctn ul li a { min-height: 26vw;}
	#event .ctn ul li a dl { padding-left: 32%;}
	#event .ctn ul li a dl dt { width: 28%; padding-top: 28%;}
	#event .ctn ul li a dl dd span.tit { font-size: 18px;}
	#event .btn { max-width: 55%;}
}
@media (max-width: 480px) {
	#event .ctn ul li { padding: 10px 0;}
	#event .ctn ul li a dl dd time { margin-bottom: 2px;}
	#event .btn { width: 82%; max-width: 82%;}
	#event .btn a { font-size: 14px;}
}


#bnr-sct .inner { padding: 20px 0 50px;}
#bnr-sct ul.large-bnr { width: 92%; max-width: 1000px; margin: 0 auto;}
#bnr-sct ul.large-bnr li { margin-bottom: 30px;}
#bnr-sct ul.large-bnr li:last-child { margin-bottom: 0px;}
#bnr-sct ul.large-bnr li a { display: block;}
#bnr-sct ul.large-bnr li a img { width: 100%; transition: 0.3s ease;}
#bnr-sct ul.small-bnr { display: flex; width: 100%; max-width: 1080px; margin: 0 auto; flex-wrap:wrap; gap:18px;}
#bnr-sct ul.small-bnr li { width: calc(33.33% - 12px);}
#bnr-sct ul.small-bnr li a { display: block; width: 100%; height:165px; position: relative;}
#bnr-sct ul.small-bnr li a:after { content: ''; display: block; width: 100%; padding-top: 165px; transition: 0.3s ease; background: rgba(0,0,0,0.5);}
#bnr-sct ul.small-bnr li a:before { position: absolute;    right: 20px;    top: 50%;    transform: translateY(-50%);    content: '▶';    display: block;    color:#fff;    font-size:12px;}
#bnr-sct ul.small-bnr li a img { width: 100%; transition: 0.3s ease;}

#bnr-sct ul.small-bnr li a .bnr-icon {position: absolute; top:50%; right:40px; width:30px; transform: translateY(-50%);}
#bnr-sct ul.small-bnr li a.bnr-instagram {background: url('../img/bnr/bnr-instagram.png') no-repeat 50% 50% / cover; }
#bnr-sct ul.small-bnr li a.bnr-youtube {background: url('../img/bnr/bnr-youtube.png') no-repeat 50% 50% / cover; }
#bnr-sct ul.small-bnr li a.bnr-tiktok {background: url('../img/bnr/bnr-tiktok.png') no-repeat 50% 50% / cover; }
#bnr-sct ul.small-bnr li a.bnr-facebook {background: url('../img/bnr/bnr-facebook.png') no-repeat 50% 50% / cover; }
#bnr-sct ul.small-bnr li a.bnr-line {background: url('../img/bnr/bnr-line.png') no-repeat 50% 50% / cover; }
#bnr-sct ul.small-bnr li a dl {
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding-left: 20px;
    position:absolute;
    color:#fff;
}
#bnr-sct ul.small-bnr li a dl dt {
    font-size: 21px;
    letter-spacing: 0.2rem;
    line-height: 1.2;
}
#bnr-sct ul.small-bnr li a dl dd {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15rem;
}

#bnr-sct ul.large-bnr li a:hover img,
#bnr-sct ul.small-bnr li a:hover img { opacity: 0.8;}
@media (max-width: 800px) {
    #bnr-sct ul.small-bnr li a { height:120px;}
    #bnr-sct ul.small-bnr li a:after { padding-top: 120px;}
	#bnr-sct ul.small-bnr { flex-wrap: wrap; gap:5px;}
	#bnr-sct ul.small-bnr li { width: 90%; margin:0 auto; padding: 10px 0;}
}
@media (max-width: 480px) {
	#bnr-sct ul.large-bnr li { margin-bottom: 16px;}
	#bnr-sct ul.small-bnr li { padding: 5px 0;}
}


#works { background: var(--light-gray1);}
#works .inner-sct { padding: 100px 0px;}
#works .bloc { padding: 40px 0;}
#works .bloc .tips { position: relative; z-index: 10; width: 90%; max-width: 680px; margin: 0 auto -20px;}
#works .bloc .tips p { display: inline-block; padding: 4px 10px 6px; background: #000; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#works .works-slider a { position: relative; display: block; width: 680px; background: #fff; margin: 0 10px;}
#works .works-slider a img { width: 100%; height: auto;}
#works .slick-arrow { display: block; width: 40px; height: 64px; padding: 0; background: transparent; border: none; outline: none;
 position: absolute; top: 50%; z-index: 1; transform: translate(0, -50%);
 cursor: pointer; color: transparent; font-size: 0; line-height: 0;
}
#works .slick-prev { left: 0px;}
#works .slick-next { right: 0px;}
#works .slick-dots { max-width: 680px; margin: 0 auto; top: -20px; bottom: auto; left: 0; right: 0; z-index: 10; text-align: right;}

#works .works-desc { width: 90%; max-width: 680px; margin: 0 auto; padding-top: 20px;}
#works .works-desc .creator { position: relative; display: flex; align-items: center; margin-bottom: 20px;}
#works .works-desc .creator ul { font-size: 0; }
#works .works-desc .creator ul li { display: inline-block; width: 56px; margin-right: 8px;}
#works .works-desc .creator ul li:last-child { margin-right: 0px;}
#works .works-desc .creator ul li img { width: 100%; border-radius: 50%;}
#works .works-desc .creator dl { padding-left: 10px;}
#works .works-desc .creator dl dt { font-size: 12px; letter-spacing: 0.05rem;}
#works .works-desc .creator dl dd { font-size: 16px; font-weight: 700; letter-spacing: 0.1rem;}
#works .works-desc h3 { margin-bottom: 12px; font-size: 28px; font-weight: 700; line-height: 1.5;}
#works .works-desc p { letter-spacing: 0.1rem;}

#works .btn { width: 55%; max-width: 200px; margin: 60px auto 0;}
#works .btn a { display: block; padding: 6px 0; background: #000; border: solid 1px #000;
 color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
 transition: 0.3s ease;
}
#works .btn a:hover { background: #fff; color: #000;}
@media (max-width: 1000px) {
	#works .inner-sct { padding: 60px 0px;}
	#works .bloc { padding: 20px 0;}
	#works .btn { margin: 30px auto 0;}
}
@media (max-width: 800px) {
	#works .bloc .tips p { padding: 2px 10px 4px; font-size: 16px;}
	#works .works-slider a { width: 100%; margin: 0;}

	#works .works-desc { width: 80%; max-width: 530px;}
	#works .works-desc .creator { margin-bottom: 12px;}
	#works .works-desc .creator ul li { width: 40px; margin-right: 5px;}
	#works .works-desc .creator dl dt { font-size: 10px;}
	#works .works-desc .creator dl dd { font-size: 14px;}
	#works .works-desc h3 { margin-bottom: 8px; font-size: 20px;}
	#works .btn { max-width: 55%;}
}
@media (max-width: 480px) {
	#works .works-desc p { font-size: 12px;}
	#works .btn { width: 82%; max-width: 82%; margin: 20px auto 0;}
	#works .btn a { font-size: 14px;}
}

#works .works-slider .slick-slide {  position: relative;}
#works .works-slider .slick-slide::before {  content: "";  position: absolute;  top: 0; left: 0; right: 0; bottom: 0;  
background: rgba(220,224,211,0.6);   z-index: 2;  transition: opacity 0.3s ease;  margin:0 10px;}
#works .works-slider .slick-center::before {  opacity: 0; visible:none; display:none;}


#staff { background: var(--dark-gray1);}
#staff .inner-sct { padding: 100px 0;}
#staff .ctn { width: 82%; max-width: 1080px; margin: 0 auto;}
#staff .ctn-staff { position: relative;}
#staff .ctn-top { position: relative; display: flex; align-items: center; width: 100%; margin-bottom: 30px; padding-right: 240px;}
#staff .ctn-top .ttl { width: 32%;}
#staff .ctn-top .ttl h2 { color: #fff; text-align: left;}
#staff .ctn-top .ttl p { color: #fff; text-align: left;}
#staff .ctn-top .txt { width: 68%;}
#staff .ctn-top .txt p { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.1rem;}
#staff .list { margin-bottom: 100px;}
#staff .list ul { display: flex; justify-content: space-between;}
#staff .list ul li { width: 12.5%; max-width: 120px; }
#staff .list ul li a { display: block;}
#staff .list ul li a img { width: 100%;}

#staff .btn-staff { width: 55%; max-width: 200px; position: absolute; right: 0; top: 10%;}
#staff .btn-staff a { display: block; padding: 6px 0; background: #fff; border: solid 1px #fff;
 color: #000; font-size: 18px; font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
 transition: 0.3s ease;
}
#staff .btn-staff a:hover { background: var(--dark-gray1); color: #fff;}

#staff .ctn-blog { position: relative;}
#staff .ctn-blog .blog-ttl { width: calc(100% - 240px); margin-bottom: 32px; padding-bottom: 8px; border-bottom: solid 2px #fff;}
#staff .ctn-blog .blog-ttl h3 { color: #fff; font-size: 18px; font-weight: 900; letter-spacing: 0.1rem; line-height: 1;}
#staff .ctn-blog .blog-ttl h3 span {display: inline-block; vertical-align: middle;}
#staff .ctn-blog .blog-ttl h3 span.eng { margin-right: 10px; font-size: 40px; font-weight: 400; letter-spacing: 0.4rem;}
#staff .ctn-blog ul { display: flex; width: 100%; justify-content: space-between;}
#staff .ctn-blog ul li { width: 31.5%; }
#staff .ctn-blog ul li a { display: block; color: #fff; text-decoration: none;}
#staff .ctn-blog ul li a dl { position: relative; padding-left: 120px;}
#staff .ctn-blog ul li a dl dt { position: absolute; width: 100px; padding-top: 100px; left: 0; top: 0; overflow: hidden; background: #fff;}
#staff .ctn-blog ul li a dl dt img { width: 102%; height: 102%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
 object-fit: cover; transition: 0.4s ease;
}
#staff .ctn-blog ul li a dl dd { font-weight: 700; letter-spacing: 0.05rem;}
#staff .ctn-blog ul li a dl dd time { display: block; font-size: 14px;}
#staff .ctn-blog ul li a dl dd span.tit { font-size: 18px;}
#staff .ctn-blog ul li a dl dd.writter { padding-top: 8px; font-size: 12px; letter-spacing: 0.05rem;}
#staff .ctn-blog ul li a dl dd.writter img { display: inline-block; width: 40px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: #fff;}
#staff .ctn-blog ul li a dl dd.writter span{ display: inline-block; vertical-align: middle;}
#staff .ctn-blog ul li a dl dd.writter span span.eng { margin-right: 5px; font-size: 10px;}

#staff .ctn-blog ul li a:hover dl dt img { opacity: 0.85; transform: translate(-50%,-50%) scale(1.1);}

#staff .ctn-blog .btn-more { width: 55%; max-width: 200px; position: absolute; right: 0; top: 8px;}
#staff .ctn-blog .btn-more a { display: block; padding: 6px 0; background: #fff; border: solid 1px #fff;
 color: #000; font-size: 18px; font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
 transition: 0.3s ease;
}
#staff .ctn-blog .btn-more a:hover { background: var(--dark-gray1); color: #fff;}
@media (max-width: 1000px) {
	#staff .ctn-top { margin-bottom: 20px; padding-right: 200px;}
	#staff .btn-staff { max-width: 180px;}
	#staff .btn-staff a { padding: 4px 0; font-size: 16px;}
	
	#staff .ctn-blog .blog-ttl { width: calc(100% - 200px);}
	#staff .ctn-blog .blog-ttl h3 { font-size: 185x;}
	#staff .ctn-blog .blog-ttl h3 span.eng { font-size: 32px;}
	#staff .ctn-blog ul li a dl { padding-left: 100px;}
	#staff .ctn-blog ul li a dl dt { width: 80px;  padding-top: 80px;}
	#staff .ctn-blog ul li a dl dd time { font-size: 12px;}
	#staff .ctn-blog ul li a dl dd span.tit { font-size: 16px;}
	#staff .ctn-blog .btn-more { max-width: 180px;}
	#staff .ctn-blog .btn-more a { padding: 4px 0; font-size: 16px;}
}
@media (max-width: 800px) {
	#staff .inner-sct { padding: 60px 0;}
	#staff .ctn-staff { margin-bottom: 60px;}
	#staff .ctn-top { display: block; padding-right: 0px;}
	#staff .ctn-top .ttl { width: 100%; margin-bottom: 20px;}
	#staff .ctn-top .ttl h2 { text-align: center;}
	#staff .ctn-top .ttl p { text-align: center;}
	#staff .ctn-top .txt { width: 100%;}
	#staff .ctn-top .txt p { font-size: 16px;}
	#staff .list { margin-bottom: 20px;}

	#staff .btn-staff { max-width: 55%; position: relative; right: auto; top: auto; margin: 0 auto;}


	#staff .list ul { flex-wrap: wrap; justify-content: inherit;}
	#staff .list ul li { width: 25%; max-width: 160px;}

	#staff .ctn-blog .blog-ttl { width: 100%; padding-bottom: 8px; border: none;}
	#staff .ctn-blog .blog-ttl h3 { font-size: 18px; text-align: center;}
	#staff .ctn-blog .blog-ttl h3 span { display: none; vertical-align: middle;}
	#staff .ctn-blog .blog-ttl h3 span.eng { display: inline-block; margin-right: 0px; padding-bottom: 4px; font-size: 21px; letter-spacing: 0.2rem; border-bottom: solid 1px #fff;}

	#staff .ctn-blog ul { display: block; margin-bottom: 30px;}
	#staff .ctn-blog ul li { width: 100%; padding: 12px 0; border-bottom: solid 1px #fff;}
	#staff .ctn-blog ul li a { min-height: 26vw;}
	#staff .ctn-blog ul li a dl { padding-left: 32%;}
	#staff .ctn-blog ul li a dl dt { width: 28%; padding-top: 28%;}

	#staff .ctn-blog .btn-more { max-width: 55%; position: relative; right: auto; top: auto; margin: 0 auto;}
}
@media (max-width: 480px) {
	#staff .ctn-top .txt p { font-size: 13px;}
	#staff .list ul li { width: 32%;}
	#staff .btn-staff { width: 100%; max-width: 100%;}
	#staff .ctn-blog .blog-ttl { margin-bottom: 16px; padding-bottom: 5px; border-width: 1px;}
	#staff .ctn-blog ul { width: 100%; margin: 0 auto 30px;}
	#staff .ctn-blog ul li a dl dd.writter img { width: 26px;}
	#staff .ctn-blog .btn-more { width: 100%; max-width: 100%;}
}


#concept { background: #fff;}
#concept .ctn { position: relative; width: 100%; padding-left: 42%;}
#concept .ctn:before { content: ''; display: block; width: 40%; height: 100%; background:  url('../img/index/concept-bg.webp') no-repeat 50% 50% / 100% auto; position: absolute; left: 0; top: 0;}
#concept .ctn .ttl { position: absolute; top: 50px; left: 0; width: 38%; text-align: left;}
#concept .ctn .ttl h2 { display: block; max-width: 240px; margin: 0 auto; text-align: left;}
#concept .ctn .ttl p { display: block; max-width: 240px; margin: 0 auto; text-align: left;}
#concept .ctn .txt { padding: 40px 0;}
#concept .ctn .txt .inner { width: 100%; max-width: 640px; padding: 20px;}
#concept .ctn .txt p { margin-bottom: 30px; letter-spacing: 0.1rem;}
#concept .ctn .txt p:last-child { margin-bottom: 0px;}
@media (max-width: 800px) {
	#concept { background: #eee;}
	#concept .inner-sct { padding: 40px;}
	#concept .ctn { background: #fff; padding: 30px;}
	#concept .ctn:before { content: none;}
	#concept .ctn .ttl { position: relative; top: auto; left: auto; width: 100%; margin-bottom: 20px; text-align: center;}
	#concept .ctn .ttl h2 { text-align: center;}
	#concept .ctn .ttl p { text-align: center;}
	#concept .ctn .txt { width: 90%; margin: 0 auto; padding: 0;}
	#concept .ctn .txt .inner { padding: 0px;}
	#concept .ctn .txt p { margin-bottom: 20px; font-size: 14px; letter-spacing: 0.05rem;}
}
@media (max-width: 480px) {
	#concept .ctn { padding: 20px;}
	#concept .ctn .ttl { margin-bottom: 12px;}
	#concept .ctn .ttl h2 { margin-bottom: 8px;}
	#concept .ctn .txt p { font-size: 13px;}
}

#about { background: var(--light-gray1);}
#about .inner-sct { padding: 80px 0;}
#about .bloc { width: 90%; max-width: 1080px; margin: 0 auto; padding: 25px 0;}
#about .flex { display: flex; justify-content: space-between; align-items: center;}
#about .tit { width: 240px;}
#about .ctn { width: calc( 100% - 240px);}
#about .tit h2 { font-size: 18px; font-weight: 700; letter-spacing: 0.1rem;}
#about .tit h2 span.eng { display: block; font-size: 40px; font-weight: 400; letter-spacing: 0.2rem;}
#about .ctn ul { font-size: 0; }
#about .ctn ul li { display: inline-block; width: 33.333334%; border-left: solid 1px var(--light-gray1); font-size: 16px;}
#about .ctn ul.link2 { border-left: solid 1px #fff;}
#about .ctn ul.link2 li { border: solid 1px #fff; border-left: 0px;}
#about .ctn ul li a { position: relative; display: block; width: 100%; text-decoration: none;}
#about .ctn ul li a.link1a { color: #fff; background: url('../img/index/link_about_01.webp') no-repeat 50% 50% / cover;}
#about .ctn ul li a.link1b { color: #fff; background: url('../img/index/link_about_02.webp') no-repeat 50% 50% / cover;}
#about .ctn ul li a.link1c { color: #fff; background: url('../img/index/link_about_03.webp') no-repeat 50% 50% / cover;}
#about .ctn ul li a.link2a { color: #fff; background: url('../img/index/link_howto_01.webp') no-repeat 50% 50% / cover;}
#about .ctn ul li a.link2b { color: #fff; background: url('../img/index/link_howto_02.webp') no-repeat 50% 50% / cover;}
#about .ctn ul li a.link2c { color: #fff; background: url('../img/index/link_howto_03.webp') no-repeat 50% 50% / cover;}
#about .ctn ul li a:before,
#about .ctn ul li a:after { content: ''; display: block;}
#about .ctn ul li a:before { width: 0px; height: 0px; border: solid 6px transparent; border-right: 0; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);}
#about .ctn ul li a.link1a:before,
#about .ctn ul li a.link1b:before,
#about .ctn ul li a.link1c:before { border-left: solid 10px #fff;}
#about .ctn ul li a.link2a:before,
#about .ctn ul li a.link2b:before,
#about .ctn ul li a.link2c:before { border-left: solid 10px #fff;}
#about .ctn ul li a:after { content: ''; display: block; width: 100%; padding-top: 80%; transition: 0.3s ease;}
#about .ctn ul li a.link1a:after,
#about .ctn ul li a.link1b:after,
#about .ctn ul li a.link1c:after { background: rgba(40,50,30,0.7);}
#about .ctn ul li a.link2a:after,
#about .ctn ul li a.link2b:after,
#about .ctn ul li a.link2c:after { background: rgba(40,40,40,0.7);}

#about .ctn ul li a.link1a:hover:after,
#about .ctn ul li a.link1b:hover:after,
#about .ctn ul li a.link1c:hover:after { background: rgba(0,0,0,0.8);}
#about .ctn ul li a.link2a:hover:after,
#about .ctn ul li a.link2b:hover:after,
#about .ctn ul li a.link2c:hover:after { background: rgba(0,0,0,0.8);}

#about .ctn ul li a dl { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; padding-left: 20px;}
#about .ctn ul li a dl dt { font-size: 21px; letter-spacing: 0.2rem; line-height: 1.2;}
#about .ctn ul li a dl dd { font-size: 14px; font-weight: 700; letter-spacing: 0.15rem;}
@media (max-width: 1000px) {
	#about .tit { width: 200px;}
	#about .ctn { width: calc( 100% - 160px);}
	#about .tit h2 { font-size: 15px;}
	#about .tit h2 span.eng { font-size: 32px;}
	#about .ctn ul li a:before { right: 10px;}
	#about .ctn ul li a dl dt { font-size: 16px; letter-spacing: 0.1rem;}
	#about .ctn ul li a dl dd { font-size: 12px;}
}
@media (max-width: 800px) {
	#about .inner-sct { padding: 0px; border-top: solid 1px #000;}
	#about .bloc { width: 100%; padding: 0px;}
	#about .bloc.bloc1 { background: #fff;}
	#about .bloc.bloc2 { background: #000;}
	#about .flex { align-items: flex-start;}
	#about .tit { width: 24%; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 40px;}
	#about .ctn { width: calc( 100% - 24%);}
	#about .tit h2 { font-size: 14px; letter-spacing: 0.1rem; writing-mode: vertical-rl;}
	#about .tit h2 span.eng { display: inline-block; margin-bottom: 20px; letter-spacing: 0.1rem;}
	#about .bloc.bloc2 .tit h2 { color: #fff;}

	#about .ctn ul li { display: block; width: 100%; font-size: 16px;}
	#about .ctn ul.link1 li { border: 0px; border-bottom: solid 1px #000;}
	#about .ctn ul.link1 li:last-child { border-bottom: 0px;}
	#about .ctn ul.link2 li { border: 0px; border-bottom: solid 1px #fff;}
	#about .ctn ul.link2 li:last-child { border-bottom: 0px;}
	#about .ctn ul li a:after { padding-top: 40%;}
	#about .ctn ul li a dl dt { font-size: 20px;}
	#about .ctn ul li a dl dd { font-size: 13px; letter-spacing: 0.08rem;}
}
@media (max-width: 800px) {
	#about .tit h2 { letter-spacing: 0.06rem;}
	#about .ctn ul li a:after { padding-top: 60%;}
}


#model { background: #fff;}
#model .inner-sct { padding: 100px 0;}
#model .ttl { margin-bottom: 20px;}
#model .ctn { width: 90%; max-width: 1080px; margin: 0 auto;}
#model ul li { padding: 20px 0;}
#model ul li a { display: block;}
#model ul li a dl { display: table; width: 100%;}
#model ul li a dl dt,
#model ul li a dl dd { position: relative; display: table-cell; vertical-align: middle;}
#model ul li a dl dt { width: 52%; padding-top: 25px;}
#model ul li a dl dd { width: 48%; text-align: center;}
#model ul li a dl dt span.no { color: #000; font-size: 68px; line-height: 1; position: absolute; left: 0; top: -10px;}
#model ul li a dl dt span.area { display: inline-block; padding: 5px 10px; background: #000;
 color: #fff; font-size: 24px; font-weight: 700; letter-spacing: 0.15rem; line-height: 1.2;
 position: absolute; right: 0; top: 6px;
}
#model ul li a dl dt img { width: 100%;}
#model ul li a dl dd img { width: 92%; max-width: 480px;}
#model ul li a dl dt img.sp,
#model ul li a dl dd img.sp { display: none;}
@media (max-width: 800px) {
	#model .inner-sct { padding: 60px 0;}
}
@media (max-width: 640px) {
	#model ul li a dl dt,
	#model ul li a dl dd { display: block;}
	#model ul li a dl dt { width: 100%; padding-top: 40px;}
	#model ul li a dl dd { width: 90%; margin: 0 auto; padding: 20px 0;}
	#model ul li a dl dt img.pc,
	#model ul li a dl dd img.pc { display: none;}
	#model ul li a dl dt img.sp,
	#model ul li a dl dd img.sp { display: block; margin: 0 auto;}
	#model ul li a dl dt span.no { font-size: 100px; left: 8%; top: -16px;}
	#model ul li a dl dt span.area { font-size: 32px; right: 8%; top: 14px;}
}
@media (max-width: 480px) {
	#model .inner-sct { padding: 40px 0;}
	#model .ctn { width: 100%;}
	#model ul li { padding: 12px 0;}
	#model ul li a dl dt { padding-top: 22px;}
	#model ul li a dl dt span.no { font-size: 72px; left: 6%;}
	#model ul li a dl dt span.area { font-size: 24px; right: 6%; top: 2px;}
}


#voice { background: var(--dark-gray1);}
#voice .inner-sct { padding: 100px 0;}

#voice .voice-ttl { width: calc(100% - 240px); margin-bottom: 32px; padding-bottom: 8px; border-bottom: solid 2px #fff;}
#voice .voice-ttl h3 { color: #fff; font-size: 18px; font-weight: 900; letter-spacing: 0.1rem; line-height: 1;}
#voice .voice-ttl h3 span {display: inline-block; vertical-align: middle;}
#voice .voice-ttl h3 span.eng { margin-right: 10px; font-size: 40px; font-weight: 400; letter-spacing: 0.4rem;}
#voice .ctn { position: relative; width: 82%; max-width: 1080px; margin: 0 auto;}
#voice .ctn ul { display: flex; width: 100%; justify-content: space-between;}
#voice .ctn ul > li { position: relative; width: 47.5%; padding: 25px 0;}
#voice .ctn ul li span.no { display: block; width: 50px; height: 50px; background: #fff; border-radius: 50%;
 position: absolute; left: 0; top: 0; z-index: 2;
 color: var(--dark-gray1); font-size: 32px; line-height: 50px; text-align: center;
}
#voice .ctn ul li a { display: block; margin: 0 auto 18px; color: #000; text-decoration: none;}
#voice .ctn ul li a dl { position: relative;}
#voice .ctn ul li a dl dt { position: relative; width: 100%; padding-top: 65%; margin-bottom: 10px; overflow: hidden; background: #fff;}
#voice .ctn ul li a dl dt img { width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
 object-fit: cover; transition: 0.4s ease;
}
#voice .ctn ul li a dl dd {}
#voice .ctn ul li a dl dd:before { content: ''; display: block; width: 0px; height: 0px; margin: 0 auto;
 border: solid 25px transparent; border-top: 0; border-bottom: solid 20px #fff;
}
#voice .ctn ul li a dl dd span { display: block; background: #fff;}
#voice .ctn ul li a dl dd span.tit { padding: 20px 20px 6px; font-size: 20px; font-weight: 700; letter-spacing: 0.05rem;}
#voice .ctn ul li a dl dd span.txt { padding: 6px 20px 20px;}
#voice .ctn ul li a:hover dl dt img { opacity: 0.85; transform: translate(-50%,-50%) scale(1.06);}

#voice .works-desc { width: 100%; margin: 0 auto;}
#voice .works-desc .creator { position: relative;}
#voice .works-desc .creator ul { display: inline-block; width: 130px; font-size: 0; vertical-align: middle;}
#voice .works-desc .creator ul li { display: inline-block; width: 56px; margin-bottom: 0px; margin-right: 8px; padding: 0;}
#voice .works-desc .creator ul li:last-child { margin-right: 0px;}
#voice .works-desc .creator ul li img { width: 100%; border-radius: 50%;}
#voice .works-desc .creator dl { display: inline-block; vertical-align: middle;}
#voice .works-desc .creator dl dt { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.05rem;}
#voice .works-desc .creator dl dd { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.1rem;}

#voice .ctn .btn-more { width: 60%; max-width: 200px; position: absolute; right: 0; top: 8px;}
#voice .ctn .btn-more a { display: block; padding: 6px 0; background: #fff; border: solid 1px #fff;
 color: #000; font-size: 18px; font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
 transition: 0.3s ease;
}
#voice .btn-more a:hover { background: var(--dark-gray1); color: #fff;}

@media screen and (max-width: 800px) {
	#voice .inner-sct { padding: 60px 0;}
	#voice .ctn ul { display: block;}
	#voice .ctn ul > li { width: 100%; margin-bottom: 20px; padding: 25px 0;}
	#voice .ctn ul > li:last-child { margin-bottom: 0px;}
}
@media (max-width: 480px) {
	#voice .voice-ttl { width: 100%; margin-bottom: 20px; border-width: 1px;}
	#voice .voice-ttl h3 { font-size: 13px;}
	#voice .voice-ttl h3 span.eng { font-size: 24px; letter-spacing: 0.2rem;}
	#voice .ctn ul { margin: 0 auto 20px;}
	#voice .ctn ul > li { margin-bottom: 12px; padding: 15px 0;}
	#voice .ctn ul li span.no { width: 40px; height: 40px; font-size: 21px; line-height: 38px;}
	#voice .ctn ul li a dl dt { margin: 0;}
	#voice .ctn ul li a dl dd:before { border: solid 20px transparent; border-top: 0; border-bottom: solid 16px #fff;}
	#voice .ctn ul li a dl dd span.tit { padding: 18px 18px 4px; font-size: 17px;}
	#voice .ctn ul li a dl dd span.txt { padding: 4px 18px 20px; font-size: 14px;}
	#voice .works-desc .creator ul { width: 92px; margin: 0px;}
	#voice .works-desc .creator ul li { width: 40px; margin-right: 4px;}
	#voice .works-desc .creator dl dt { font-size: 10px;}
	#voice .works-desc .creator dl dd { font-size: 15px; letter-spacing: 0.08rem;}
	#voice .ctn .btn-more { width: 100%; max-width: 100%; position: relative; right: auto; top: auto; margin: 0 auto;}
	#voice .ctn .btn-more a { padding: 4px 0; font-size: 14px;}
}


#contact { background: var(--light-gray1);}
#contact .inner-sct { padding: 100px 0;}
#contact .ttl { margin-bottom: 40px;}
#contact .ctn { width: 90%; max-width: 1080px; margin: 0 auto 50px;}
#contact .ctn .txt { margin-bottom: 30px; text-align: center;}
#contact .ctn ul { display: inline-block; text-align: left;}
#contact .ctn ul li { font-size: 18px;}
#contact .ctn ul.storeinfo { text-align:center;}
#contact .ctn ul li.storename { position: relative; font-size: 36px;}
#contact .ctn ul li.tel { position: relative; padding-left: 50px; font-size: 36px;}
#contact .ctn ul li.tel:before { content: ''; display: block; width: 36px; height: 36px; background: url('../img/icn-tel.svg') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
#contact .ctn ul li.tel span { font-weight: 400; letter-spacing: 0.1rem;}
#contact .ctn .map { width: 100%; height: 600px; margin: 0 auto;}
#contact .ctn .map iframe { width: 100%; height: 100%;}
#contact .ctn .btn-reserve { width: 60%; max-width: 300px; margin: 0 auto 40px;}
#contact .ctn .btn-reserve a { display: block; padding: 6px 0; background: #000; border: solid 1px #000;
 color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
 transition: 0.3s ease;
}
#contact .ctn .btn-reserve a:hover { background: #fff; color: #000;}
@media (max-width: 800px) {
	#contact .inner-sct { padding: 60px 0;}
	#contact .ttl { margin-bottom: 20px;}
	#contact .ctn .btn a { text-align: center;}
	#contact .ctn .btn a span { padding-left: 0px;}
}
@media (max-width: 480px) {
	#contact .inner-sct { padding: 30px 0 0px;}
	#contact .ctn { margin: 0 auto 20px;}
	#contact .ctn .txt { margin-bottom: 20px;}
	#contact .ctn ul li { font-size: 14px;}
	#contact .ctn .btn-reserve { width: 80%; max-width: 80%; margin: 0 auto 30px;}
	#contact .ctn .btn-reserve a { font-size: 14px;}
	#contact .ctn .map { height: 350px;}
}


#news { background: var(--dark-gray1);}
#news .inner-sct { padding: 100px 0;}
#news .ctn { position: relative; width: 82%; max-width: 1080px; margin: 0 auto;}
#news .ctn .news-ttl { width: calc(100% - 240px); margin-bottom: 32px; padding-bottom: 8px; border-bottom: solid 2px #fff;}
#news .ctn .news-ttl h3 { color: #fff; font-size: 18px; font-weight: 900; letter-spacing: 0.1rem; line-height: 1;}
#news .ctn .news-ttl h3 span {display: inline-block; vertical-align: middle;}
#news .ctn .news-ttl h3 span.eng { margin-right: 10px; font-size: 40px; font-weight: 400; letter-spacing: 0.4rem;}
#news .ctn ul { display: flex; width: 100%; justify-content: space-between;}
#news .ctn ul li { width: 30%; }
#news .ctn ul li a { display: block; color: #fff; text-decoration: none;}
#news .ctn ul li a dl { position: relative; padding-left: 120px;}
#news .ctn ul li a dl dt { position: absolute; width: 100px; padding-top: 100px; left: 0; top: 0; overflow: hidden; background: #fff;}
#news .ctn ul li a dl dt img { width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
 object-fit: cover; transition: 0.4s ease;
}
#news .ctn ul li a dl dd { font-weight: 700; letter-spacing: 0.05rem;}
#news .ctn ul li a dl dd time { display: block; margin-bottom: 6px; font-size: 14px;}
#news .ctn ul li a dl dd span.tit { font-size: 18px;}
#news .ctn ul li a:hover dl dt img { opacity: 0.85; transform: translate(-50%,-50%) scale(1.1);}

#news .ctn .btn-more { width: 55%; max-width: 200px; position: absolute; right: 0; top: 8px;}
#news .ctn .btn-more a { display: block; padding: 6px 0; background: #fff; border: solid 1px #fff;
 color: #000; font-size: 18px; font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
 transition: 0.3s ease;
}
#news .ctn .btn-more a:hover { background: var(--dark-gray1); color: #fff;}
@media (max-width: 1000px) {
	#news .ctn ul li a dl dd span.tit { font-size: 16px;}
}
@media (max-width: 800px) {
	#news .inner-sct { padding: 40px 0 60px;}
	#news .ctn .news-ttl { width: 100%; margin-bottom: 20px;}
	#news .ctn ul { display: block; margin-bottom: 30px;}
	#news .ctn ul li { display: block; width: 100%; padding: 12px 0; border-bottom: solid 1px #fff;}
	#news .ctn ul li a { min-height: 26vw;}
	#news .ctn ul li a dl { padding-left: 32%;}
	#news .ctn ul li a dl dt { width: 28%; padding-top: 28%;}
	#news .ctn ul li a dl dd span.tit { font-size: 18px;}
	#news .ctn .btn-more { max-width: 55%; position: relative; right: auto; top: auto; margin: 0 auto;}
}
@media (max-width: 480px) {
	#news .ctn .news-ttl { border-width: 1px;}
	#news .ctn .news-ttl h3 { font-size: 13px;}
	#news .ctn .news-ttl h3 span.eng { font-size: 24px; letter-spacing: 0.2rem;}
	#news .ctn .btn-more { width: 100%; max-width: 100%;}
	#news .ctn .btn-more a { font-size: 14px;}
}