@charset "utf-8";

/* ----------------------------------------------
  #top-mainview
 ---------------------------------------------- */

#top-mainview { display:flex; flex-flow:column-reverse nowrap; width:100%; height:auto; aspect-ratio:390/685; margin:0 0 10.25vw; position:relative; z-index:1; }
.top-mv-lcp { width:100%; height:96.92vw; aspect-ratio:390/378; position:relative; z-index:1; transition:opacity .3s ease; }
.top-mv-lcp img { display:block; width:100%; height:100%; object-fit:cover; object-position:right 0 top 0; aspect-ratio:390/378; }
.top-mv-lcp.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
#top-mainview dl { width:100%; height:auto; aspect-ratio:390/307; padding:7.69vw 6.15vw 0; color:#1f1f1f; font-weight:400; }
#top-mainview dt { line-height:1.04; padding:0 0 3.07vw; font-size:14.35vw; font-family:'Lato'; font-style:normal; font-weight:400; }
#top-mainview dd { line-height:1.5; font-size:6.15vw; }
.slide-top-mv { position:absolute; top:0; right:0; width:100%; height:100%; overflow:hidden; margin-inline:auto; z-index:2; opacity:0; visibility:hidden; transition:opacity .3s ease; pointer-events:none; } /* スライダーは最初は非表示 */
.slide-top-mv picture { display:block; }
.slide-top-mv picture img { width:100%; height:auto; }
.slide-top-mv.is-ready { opacity:1; visibility:visible; }
.add-animation { animation:zoomUp 10s linear 0s normal both; }
#top-mv-thumb { display:none; }

@media screen and (min-width:900px){
#top-mainview { width:94.2vw; aspect-ratio:1300/650; margin:0 auto 7.24vw; }
.top-mv-lcp { height:36.23vw; aspect-ratio:1300/500; }
.top-mv-lcp img { aspect-ratio:1300/500; object-position:right 0 top 0; }
#top-mainview dl { display:flex; flex-flow:row nowrap; justify-content:space-between; aspect-ratio:1300/150; margin:0 0 -13.76vw; padding:1.74vw 9.42vw 0 9.78vw; position:relative; z-index:2; }
#top-mainview dt { width:36.23vw; padding:0; font-size:5.94vw; }
#top-mainview dd { width:6.88vw; margin:100px 0 -100px; font-size:2.39vw; writing-mode:vertical-rl; }
.slide-top-mv {}
.slide-top-mv picture {}
.slide-top-mv picture img { aspect-ratio:1300/500; }
.add-animation {}
#top-mv-thumb { bottom:-4.35vw; width:28.98vw; height:21.73vw; }
}
@media screen and (min-width:1380px){
#top-mainview { width:1300px; margin:0 auto 100px; }
.top-mv-lcp { height:500px; }
.top-mv-lcp img { object-position:right 0 top 0; }
#top-mainview dl { margin:0 0 -190px; padding:24px 130px 0 135px; }
#top-mainview dt { width:500px; font-size:82px; }
#top-mainview dd { width:95px; font-size:33px; }
.slide-top-mv {}
.slide-top-mv picture {}
.slide-top-mv picture img {}
.add-animation {}
#top-mv-thumb { bottom:-60px; width:400px; height:300px; }
}




@keyframes zoomUp {
    0% { transform:scale(1); }
  100% { transform:scale(1.15); }
}




/* ----------------------------------------------
 ! top-common
 ---------------------------------------------- */

.top-tit-box { display:table; text-align:left; margin:0 5.13vw; padding:12.82vw 0 7.69vw 5.64vw; position:relative; }
.top-tit-box:before { content:""; position:absolute; top:12.82vw; left:0; width:0.77vw; height:12.82vw; background:#74A4D8; }
.top-tit-box:after { content:""; position:absolute; top:19.23vw; left:0; width:0.77vw; height:6.41vw; background:#1F1F1F; }
.top-tit-box em { display:block; line-height:1.4; padding:0 0 1.54vw; font-size:3.07vw; color:#74A4D8; font-weight:400; font-family:'Lato'; font-style:normal; font-weight:400; letter-spacing:0.025em; text-transform:uppercase; }
.top-tit-box h2 { line-height:1.4; font-size:7.18vw; color:#1F1F1F; font-weight:500; letter-spacing:0.05em; }

@media screen and (min-width:900px){
.top-tit-box { padding:0 0 3.26vw 2.17vw; }
.top-tit-box:before { top:0; width:0.21vw; height:4.35vw; }
.top-tit-box:after { top:2.17vw; width:0.21vw; height:2.17vw; }
.top-tit-box em { padding:0 0 0.36vw; font-size:1.01vw; }
.top-tit-box h2 { font-size:2.31vw; }
}
@media screen and (min-width:1380px){
.top-tit-box { padding:0 0 45px 30px; }
.top-tit-box:before { width:3px; height:60px; }
.top-tit-box:after { top:30px; width:3px; height:30px; }
.top-tit-box em { padding:0 0 5px; font-size:14px; }
.top-tit-box h2 { font-size:32px; }
}




.box-open-wrap { height:110vw; overflow:hidden; padding:0 0 20.51vw; position:relative; }
.box-open-wrap:after { content:""; position:absolute; bottom:0; left:0; width:100%; height:50vw; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); z-index:2; }
.box-open { height:auto; oveflow:auto; }
.box-open:after { display:none; }
.btn-box-open { position:absolute; bottom:7.69vw; left:calc(50% - 30vw); display:flex; justify-content:center; align-items:center; width:60vw; height:11.54vw; background:#fff; border:1px #1F1F1F solid; font-size:4.1vw; font-weight:500; z-index:3; }
.btn-box-open:before { content:""; position:absolute; top:calc(50% - 0.25vw); left:10vw; width:3.08vw; height:0.51vw; background:#74A4D8; z-index:4; }
.btn-box-open:after { content:""; position:absolute; top:calc(50% - 0.25vw); left:10vw; width:3.08vw; height:0.51vw; background:#74A4D8; transform:rotate(90deg); z-index:4; }
.btn-box-open span:last-of-type { display:none; }
.btn-box-open-on span:first-of-type { display:none; }
.btn-box-open-on span:last-of-type { display:block; }
.btn-box-open-on:after { display:none; }

@media screen and (min-width:900px){
.box-open-wrap { height:auto; padding:0; }
.box-open-wrap:after { display:none; }
.btn-box-open { display:none; }
}
@media screen and (min-width:1380px){

}




/* ----------------------------------------------
  #top-art-news
 ---------------------------------------------- */

#top-art-news { padding:0 0 16.66vw; }
#top-art-news .top-tit-box {}
#top-art-news dl { height:80.51vw; overflow-y:scroll; background:#fff; margin:0 6.15vw; padding:5.13vw 10.25vw 5.13vw 0; }
#top-art-news dt { line-height:1.7; padding:0 0 3.07vw; font-size:3.33vw; color:#969696; font-weight:400; font-family:'Lato'; font-style:normal; }
#top-art-news dd { line-height:1.875; font-size:3.33vw; }
#top-art-news dd:not(:last-of-type) { border-bottom:0.25px #B4B4B4 solid; margin:0 0 5.13vw; padding:0 0 5.13vw; }
#top-art-news dd a { font-size:4.1vw; color:#1F1F1F; text-decoration:none; }

@media screen and (max-width:899px){
#top-art-news dt:first-of-type { border-top:0.25px #B4B4B4 solid; padding:5.13vw 0 0; }
}
@media screen and (min-width:900px){
#top-art-news { display:flex; flex-flow:row nowrap; justify-content:center; width:79.71vw; margin:0 auto; padding:0 0 7.97vw; }
#top-art-news .top-tit-box { width:calc(100% - 54.34vw); text-align:left; margin:0; }
#top-art-news dl { display:flex; flex-flow:row wrap; width:54.34vw; height:20.43vw; margin:0; padding:0.72vw 1.16vw 2.9vw 0; }
#top-art-news dt { width:6.88vw; padding:0 0 2.17vw; font-size:1.01vw; }
#top-art-news dt:not(:last-of-type) { border-bottom:1px #B4B4B4 solid; margin:0 0 2.17vw; padding:0 0 2.17vw; }
#top-art-news dd { width:calc(100% - 6.88vw); font-size:1.01vw; }
#top-art-news dd:not(:last-of-type) { margin:0 0 2.17vw; padding:0 0 2.17vw; }
#top-art-news dd a { font-size:1.16vw; }
#top-art-news dd a:hover { text-decoration:underline; }
}
@media screen and (min-width:1380px){
#top-art-news { width:1100px; padding:0 0 110px; }
#top-art-news .top-tit-box { width:350px; }
#top-art-news dl { width:750px; height:282px; padding:10px 16px 40px 0; }
#top-art-news dt { width:95px; padding:0 0 30px; font-size:14px; }
#top-art-news dt:not(:last-of-type) { margin:0 0 30px; padding:0 0 30px; }
#top-art-news dd { width:calc(100% - 95px); font-size:14px; }
#top-art-news dd:not(:last-of-type) { margin:0 0 30px; padding:0 0 30px; }
#top-art-news dd a { font-size:16px; }
}




/* ----------------------------------------------
  #top-art-about
 ---------------------------------------------- */

#top-art-about { background:#F0F5FA; padding:0 0 15.38vw; }
#top-art-about .top-tit-box {}
#top-about-dl { display:flex; flex-flow:column-reverse nowrap; padding:0 6.15vw; }
#top-about-dl dt {}
#top-about-dl dt img { width:100%; height:auto; }
#top-about-dl dd { background:url(../img/top/bg_about.svg) left 0 bottom 10.25vw/33.33vw auto no-repeat; padding:0 0 17.94vw; }
#top-about-dl dd p { line-height:1.875; font-size:4.1vw; }
#top-about-dl dd p:not(:last-child) { padding:0 0 7.69vw; }
#top-about-dl dd p:last-child { text-align:right; }

@media screen and (min-width:900px){
#top-art-about { padding:7.24vw 0; }
#top-art-about .top-tit-box { width:79.71vw; margin:0 auto; }
#top-about-dl { flex-flow:row-reverse nowrap; justify-content:space-between; width:79.71vw; margin:0 auto; padding:0; }
#top-about-dl dt { width:33.33vw; }
#top-about-dl dt img {}
#top-about-dl dd { width:39.85vw; background:url(../img/top/bg_about.svg) left 0 bottom 0/11.81vw auto no-repeat; padding:0 0 2.9vw; }
#top-about-dl dd p { font-size:1.16vw; }
#top-about-dl dd p:not(:last-child) { padding:0 0 3.62vw; }
}
@media screen and (min-width:1380px){
#top-art-about { padding:100px 0; }
#top-art-about .top-tit-box { width:1100px; }
#top-about-dl { width:1100px; }
#top-about-dl dt { width:460px; }
#top-about-dl dt img {}
#top-about-dl dd { width:550px; background:url(../img/top/bg_about.svg) left 0 bottom 0/163px auto no-repeat; padding:0 0 40px; }
#top-about-dl dd p { font-size:16px; }
#top-about-dl dd p:not(:last-child) { padding:0 0 50px; }
}




/* ----------------------------------------------
  #top-art-members
 ---------------------------------------------- */

#top-art-members { padding:0 0 15.38vw; }
#top-members-wrap {}
#top-members-wrap .top-tit-box {}
#top-members-box { padding:0 6.15vw; }
.top-members-sec { border-bottom:1px #ccc solid; margin:0 0 5.13vw; padding:0 0 1.28vw; }
.top-members-sec h3 { margin:0 0 4.1vw; padding:0 0 0 4.1vw; font-size:5.13vw; font-weight:500; position:relative; }
.top-members-sec h3:before { content:""; position:absolute; top:1.54vw; left:0; width:1.79vw; height:1.79vw; background:#74A4D8; }
.top-members-sec ul { display:flex; flex-flow:row wrap; justify-content:space-between; position:relative; }
.top-members-sec ul:after { content:""; width:48%; }
.top-members-sec li { display:flex; align-items:center; width:48%; height:14.1vw; line-height:1.625; background:#F8F8F8; margin:0 0 2.05vw; padding:0 4.61vw; font-size:4.1vw; }

@media screen and (min-width:900px){
#top-art-members { padding:7.97vw 0; }
#top-members-wrap { display:flex; flex-flow:row nowrap; width:79.71vw; margin:0 auto; }
#top-members-wrap .top-tit-box { width:21.73vw; margin:0; }
#top-members-box { width:57.97vw; padding:0; }
.top-members-sec { display:flex; flex-flow:row nowrap; align-items:center; margin:0 0 0.87vw; padding:0; }
.top-members-sec h3 { width:13.04vw; margin:0; padding:0 0 0 1.16vw; font-size:1.45vw; }
.top-members-sec h3:before { top:0.43vw; width:0.51vw; height:0.51vw; }
.top-members-sec ul { width:calc(100% - 13.04vw); }
.top-members-sec ul:after { width:32%; }
.top-members-sec li { width:14.49vw; height:4.63vw; margin:0 0 0.87vw; padding:0 1.45vw; font-size:1.09vw; }
}
@media screen and (min-width:1380px){
#top-art-members { padding:110px 0; }
#top-members-wrap { width:1100px; }
#top-members-wrap .top-tit-box { width:300px; }
#top-members-box { width:800px; }
.top-members-sec { margin:0 0 12px; }
.top-members-sec h3 { width:180px; padding:0 0 0 16px; font-size:20px; }
.top-members-sec h3:before { top:6px; width:7px; height:7px; }
.top-members-sec ul { width:calc(100% - 180px); }
.top-members-sec ul:after {}
.top-members-sec li { width:200px; height:64px; margin:0 0 12px; padding:0 20px; font-size:15px; }
}




/* ----------------------------------------------
  #top-art-supporter
 ---------------------------------------------- */

#top-art-supporter { background:#F0F5F9; }
#top-supporter-wrap {}
#top-supporter-wrap .top-tit-box {}
#top-supporter-ul { padding:0 6.15vw; }
#top-supporter-ul li { display:flex; align-items:center; height:16.66vw; line-height:1.4; background:#fff; padding:0 5.13vw; font-size:4.1vw; font-weight:500; list-style:none; }
#top-supporter-ul li:not(:last-child) { margin:0 0 2.56vw; }
#top-supporter-note { line-height:1.875; text-align:right; padding:5.13vw 6.15vw; font-size:3.59vw; }

@media screen and (min-width:900px){
#top-art-supporter { padding:7.97vw 0; }
#top-supporter-wrap { display:flex; flex-flow:row nowrap; justify-content:space-between; width:79.71vw; margin:0 auto; }
#top-supporter-wrap .top-tit-box { width:21.73vw; margin:0; }
#top-supporter-ul { display:flex; flex-flow:row wrap; justify-content:space-between; width:57.97vw; padding:0; }
#top-supporter-ul li { width:28.55vw; height:4.63vw; padding:0 1.45vw; font-size:1.09vw; }
#top-supporter-ul li:not(:last-child) { margin:0 0 0.58vw; }
#top-supporter-note { padding:1.45vw 0; font-size:1.01vw; }
}
@media screen and (min-width:1380px){
#top-art-supporter { background:#F0F5F9; padding:110px 0; }
#top-supporter-wrap { width:1100px; }
#top-supporter-wrap .top-tit-box { width:300px; }
#top-supporter-ul { width:800px; }
#top-supporter-ul li { width:394px; height:64px; padding:0 20px; font-size:15px; }
#top-supporter-ul li:not(:last-child) { margin:0 0 8px; }
#top-supporter-note { padding:20px 0; font-size:14px; }
}




/* ----------------------------------------------
  #box-members-only
 ---------------------------------------------- */

#box-members-only { display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; height:87.18vw; background:#74A4D8; position:relative; z-index:0; }
#box-members-only:after { content:""; position:absolute; bottom:0; left:0; width:0; height:0; border-style:solid; border-width:0 0 87.18vw 100vw; border-color: transparent transparent #699DD5 transparent; z-index:1; }
#box-members-only h2 { display:table; border-left:1px #1E1E1E solid; border-right:1px #1E1E1E solid; margin:0 0 7.69vw; padding:1.05vw 4.1vw; font-size:4.1vw; color:#1E1E1E; font-family:'Lato'; font-style:normal; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; position:relative; z-index:2; }
#box-members-only-dl { position:relative; z-index:2; }
#box-members-only-dl dt { line-height:1.54; text-align:center; padding:0 0 6.15vw; font-size:5.64vw; color:#fff; font-weight:500; }
#box-members-only-dl dd { width:84.1vw; margin:0 auto; position:relative; }
#box-members-only-dl dd:after { content:""; position:absolute; top:calc(50% - 0.26vw); right:5.13vw; width:3.08vw; height:0.51vw; background:#74A4D8; }
#box-members-only-dl dd a { display:flex; justify-content:center; align-items:center; height:15.38vw; background:#fff url(../img/common/ico_menbers_02.svg) 20.51vw center/4vw auto no-repeat; border-radius:3.85vw; padding:0 0 0 7.69vw; font-size:4.61vw; color:#74A4D8; font-weight:500; text-decoration:none; }
#box-members-only-dl dd a:before { content:""; position:absolute; top:calc(50% - 0.25vw); right:5.13vw; width:2.31vw; height:0.51vw; background:#74A4D8; transform:rotate(45deg); transform-origin:bottom right; }
#box-members-only-dl dd a:after { content:""; position:absolute; bottom:calc(50% - 0.25vw); right:5.13vw; width:2.31vw; height:0.51vw; background:#74A4D8; transform:rotate(-45deg); transform-origin:top right; }

@media screen and (min-width:900px){
#box-members-only { height:33.62vw; }
#box-members-only:after { border-width:0 0 33.62vw 100vw; }
#box-members-only h2 { margin:0 0 3.62vw; padding:0.29vw 1.3vw; font-size:1.16vw; }
#box-members-only-dl {}
#box-members-only-dl dt { padding:0 0 2.17vw; font-size:2.61vw; }
#box-members-only-dl dd { width:23.76vw; }
#box-members-only-dl dd:after { top:calc(50% - 0.07vw); right:1.45vw; width:0.87vw; height:0.14vw; }
#box-members-only-dl dd a { height:4.35vw; background:#fff url(../img/common/ico_menbers_02.svg) 5.8vw center/1.16vw auto no-repeat; border-radius:1.09vw; padding:0 0 0 2.17vw; font-size:1.3vw; }
#box-members-only-dl dd a:before { top:calc(50% - 0.07vw); right:1.45vw; width:0.72vw; height:0.14vw; }
#box-members-only-dl dd a:after { bottom:calc(50% - 0.07vw); right:1.45vw; width:0.72vw; height:0.14vw; }
#box-members-only-dl dd a:hover { opacity:0.7; transition:1s ease; }
}
@media screen and (min-width:1380px){
#box-members-only { height:464px; }
#box-members-only:after { border-width:0 0 464px 100vw; }
#box-members-only h2 { margin:0 0 50px; padding:4px 18px; font-size:16px; }
#box-members-only-dl {}
#box-members-only-dl dt { padding:0 0 30px; font-size:36px; }
#box-members-only-dl dd { width:328px; }
#box-members-only-dl dd:after { top:calc(50% - 1px); right:20px; width:12px; height:2px; }
#box-members-only-dl dd a { height:60px; background:#fff url(../img/common/ico_menbers_02.svg) 80px center/16px auto no-repeat; border-radius:15px; padding:0 0 0 30px; font-size:18px; }
#box-members-only-dl dd a:before { top:calc(50% - 1px); right:20px; width:10px; height:2px; }
#box-members-only-dl dd a:after { bottom:calc(50% - 1px); right:20px; width:10px; height:2px; }
}