/* kv
========================================= */
.st-main02 #keyvisual .st-btn01.st-btn--stretch01{ font-weight: 700; padding-block: 0;}

.btn-creators-wrap .st-btn01 > span{ text-align: left; display: block; font-feature-settings: 'palt';}
.btn-creators-wrap .st-btn01 small{ display: block; color: #535353; font-weight: 400;}
.btn-creators-wrap .st-btn01 span.txt-sm{ font-size: 90%;}

.btn-creators-wrap .st-btn01 span.txt-sm{ opacity: 1; transition: color 0s;}
.btn-creators-wrap .st-btn01:hover span.txt-sm{opacity: 1;}

.btn-creators-wrap{ width: 100%; background-color: #000; justify-content: center;}
.btn-creators-wrap.js-active{position: fixed;}

.btn-creators-wrap .st-btn01::before,.btn-primary-reverce::before{ border-radius: 50%; background-position: 50%;}
.btn-creators-wrap .st-btn01::before,.btn-primary-reverce::before{width: 38px; height: 38px; background-size: 16px auto;}

.st-main02 #keyvisual .st-btn01.kv-btn-member:hover{ background-color: #fff; color: #292929; border-color: #fff;}
.st-main02 #keyvisual .st-btn01.kv-btn-member{ background-color: #0F5392; color: #fff; border-color: #0F5392;}
.st-main02 #keyvisual .st-btn01.kv-btn-member small{ color: rgba(255,255,255,0.8);}
.st-main02 #keyvisual .st-btn01.kv-btn-member:hover small{ color: #535353;}

#keyvisual .st-btn01.btn-primary-reverce::before,
.st-main02 #keyvisual .st-btn01.kv-btn-member:before{background-color: #fff;}
#keyvisual .st-btn01.btn-primary-reverce:hover:before,
.st-main02 #keyvisual .st-btn01.kv-btn-member:hover:before{background-color: #BDFF00;}

.st-main02 #keyvisual .kv-creators-outer{background-color: #292929;}

@media print, screen and (min-width: 1301px) {
#keyvisual p.kv-lead{ font-size: clamp(3.9375rem, 1.1855rem + 3.3871vw, 5.25rem);}
}
@media screen and (min-width: 899.98px) and (max-width: 1300px){
.st-main02 #keyvisual p.kv-lead{ font-size: 3.9375rem;}
}
@media print, screen and (min-width: 899.98px) {
#keyvisual.st-kv .st-container{ height: calc(100dvh - 192px); max-height: 640px;}
.st-main02 #keyvisual .kv-creators-outer{ background-image: url(/assets/image/creators/kv-pc.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;}
.kv-creators-inner{max-width: 1200px; width: 96%;}
.st-main02 #keyvisual p.kv-lead{ line-height: 1.25;}

.st-main02 #keyvisual .st-row{gap: 20px;}
.st-main02 #keyvisual .st-btn01{ height: 80px; border-radius: 40px;}

.btn-creators-wrap{padding: 16px 0;}
.btn-creators-wrap .st-btn01.st-btn--stretch01{padding-block: 0.5em;}
.btn-creators-wrap .st-btn01 > span{line-height: 1.4; padding-right: 20px;}
.btn-creators-wrap .st-btn01 small{ font-size: 0.8125rem;}
.btn-creators-wrap .st-btn01 .st-icn{width: 48px; height: 48px;}

.st-bread-list{ bottom: 30px; left: 30px;}

.st-main02 .section{ padding-bottom: 80px;}

}

@media screen and (min-width: 899.98px) and (max-height: 600px) {
.st-main02 #keyvisual h1{ margin-bottom: min(3.3vh,20px); padding-bottom: min(3.3vh,20px);}
.st-main02 #keyvisual h1 .txt-en{ font-size: min(5vh,16px);}
.st-main02 #keyvisual h1 .txt-ja{ font-size: min(3.5vw,14px);}
.st-main02 #keyvisual p.kv-lead{ font-size: min(12.5vh,5.25rem);}
.st-main02 #keyvisual p.kv-lead .br{display: none;}
}

@media screen and (max-width: 899px){
.st-main{margin-bottom: 0;}
.st-main02 #keyvisual .kv-creators-outer{ background-image: url(/assets/image/creators/kv-sp.jpg); background-size: cover;}
.st-main02 #keyvisual .st-container{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
.kv-creators-inner{ width: 92%; margin-inline: auto;}

.st-main02 #keyvisual h1 .txt-en{ font-size: 1rem; margin-bottom: 0;}
.st-main02 #keyvisual h1 .txt-ja{ font-size: 0.87rem;}

.st-main02 #keyvisual p.kv-lead{ padding-bottom: 0; font-size: 2rem; line-height: 1.3; background-color: transparent;}
.st-main02 #keyvisual p:after{ background-color: transparent; display: none;}

.st-main02 .section{ padding-bottom: min(16vw,60px);}
.kv-creators-inner .st-btn01{width: 100%; justify-content: flex-start; text-align: left; min-height: min(16vw,60px);}
.btn-primary-reverce{margin-bottom: 10px;}

.btn-creators-wrap .st-btn01{gap: 0.5em; width: 100%; justify-content: center; padding-left: 20px; font-feature-settings: 'palt'; font-size: min(4vw,15px);}
.btn-creators-wrap .st-btn01 small{ font-size: 0.75rem; margin-top: 0.3em;}
.btn-creators-wrap .st-btn01 .st-icn{width: min(8.5vw,32px); height: min(8.5vw,32px);}
.btn-creators-wrap .st-btn01::before,
.btn-primary-reverce::before{ right: 8px; width: 28px; height: 28px; background-size: 16px auto;}
}

/* sec01
========================================= */
.sec01-lead{ font-feature-settings: 'palt'; font-weight: 700; text-align: center;}

.sld-voice-item{background-color: #fff; border: 1px solid #D5D5D5; box-sizing: border-box;}
.sld-voice-item>img {width: 100%;}

#sld-voice{padding-bottom: min(12.2vw,48px);}
#sld-voice.swiper-autoheight .swiper-wrapper{ align-items: stretch;}
.sec01-comment-img{ display: inline-block; border-radius: 50%; aspect-ratio:1/1;}
.sec01-comment-name{  background-color: #0F5392; color: #fff; padding: 4px 1em; border-radius: 1em; display: inline-block; line-height: 1;}
.st-main p.sec01-comment-text{line-height: 1.5; margin: 0;}

#sld-voice .swiper-pagination{line-height: 1;}
#sld-voice .swiper-pagination .swiper-pagination-bullet{background-color: #98A6B5; width: min(4.8vw, 18px); height: min(4.8vw, 18px); border-radius: 0; opacity: 1;}
#sld-voice .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #BDFF00;}

@media print, screen and (min-width: 899.98px) {
#sec01{padding-bottom: 80px;}
.st-main p.sec01-lead{ font-size: 1.875rem; margin-bottom: 80px;}
.sld-voice-item-inner{ display: flex;}
.sld-voice-item {padding: 32px; width: 520px;}
.sec01-comment-img{margin-right:2em; width: 120px; height: 120px;}
.sec01-comment-name{ font-size: 0.875rem; margin-bottom: 16px;}
}
@media screen and (max-width: 899px){

.st-intro01{width: 100%; margin: 0; padding: min(16vw,60px) 0;}
.sec01-lead{ font-size: 1rem; margin-bottom: min(8vw,30px);}

.scroll-infinity__list{gap: 1rem;}
.sld-voice-item{padding: 1em 0.8em; width: calc(100vw / 2);}

.sld-voice-item-inner{text-align: center;}
.sec01-comment-img{width: 40%; margin: 0 auto 0.5em;}
.sec01-comment-name{ flex-direction: column; margin-bottom: 1em; font-size: min(3.7vw,14px);}
.st-main p.sec01-comment-text{ font-size: min(4vw, 15px); line-height: 1.6; text-align: left; margin-bottom: 0;}
}

/* sld-voice
========================================= */
.sld-voice-item{background-color: #fff;}
.st-main p.voice-text{ font-weight: 500; margin-bottom: 1em;}
.st-main p.voice-profile{margin-bottom: 0;}

.swiper-button-wrap{ display: flex; justify-content: center; align-items: center;}
.swiper-button-next, .swiper-button-prev{ border-radius: 50%; background-color: #0F5392; position: relative; top: inherit; bottom: inherit; left: inherit; right: inherit; margin: 0;}
.swiper-button-next:after, .swiper-button-prev:after{content: "";}

.swiper-button-next{background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19.256" viewBox="0 0 18 19.256"><g ransform="translate(1 1.414)"><line x2="16" transform="translate(0 8.214)" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> <path d="M231.465,19.994l8.214,8.214-8.214,8.214" transform="translate(-223.679 -19.994)" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>') #0F5392 no-repeat 54% 60%; background-size: 60% auto;}

.swiper-button-prev{background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19.256" viewBox="0 0 18 19.256"><g transform="translate(17 17.842) rotate(180)"><line x2="16" transform="translate(0 8.214)" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M231.465,19.994l8.214,8.214-8.214,8.214" transform="translate(-223.679 -19.994)" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> </g></svg>') #0F5392 no-repeat 50% 50%; background-size: 60% auto;}

@media print, screen and (min-width: 899.98px) {
.swiper-button-wrap{ margin-top: 56px; gap: 8px;}
.swiper-button-next, .swiper-button-prev{width: 38px; height: 38px;}
}
@media screen and (max-width: 899px){
#sld-voice{padding-inline: 2%;}
.swiper-button-wrap{ margin-top: 28px; gap: 16px;}
.swiper-button-next, .swiper-button-prev{width: 38px; height: 38px;}
}

#sec02 .btn-primary-reverce::before{right: 1em;}

/* sec03
========================================= */
.sec03-lead{ text-align: center; font-weight: 500;}

@media print, screen and (min-width: 899.98px) {
.st-main p.sec03-lead{ font-size: 1.125rem; margin-bottom: 64px;}

.btn-wrap h3{ font-size: 3rem; margin-bottom: 14px; line-height: 1;}
.btn-wrap p{ font-weight: 500;}
#sec03 .btn-wrap h3 .txt-lg{ font-size: 5rem;}
}
@media screen and (max-width: 899px){
.btn-wrap h3{ font-size: min(5.8vw,22px); margin-bottom: 0;}
.st-main .btn-wrap p{  font-size:min(3.7vw, 14px); margin-bottom: 1em;}
#sec03 .btn-wrap h3 .txt-lg{ font-size:  min(11.7vw,44px);}
}

/* sec05
========================================= */
@media print, screen and (min-width: 899.98px) {
.st-accordion02{ max-width: 1000px; width: 100%;}
}

/* sec06
========================================= */
.btn-contact,.document-wrap{ font-weight: 700;}
.btn-contact{ display: flex; background-color: #E1E1E1; border-color: #E1E1E1; border-radius: 0;}
.btn-contact:hover{background-color: #BDFF00;}
.document-wrap{ border: 1px solid #707070;}
.document-wrap .st-btn01{background-color: #E4E4E4; border-color: #E4E4E4; border: none;}
.document-wrap .st-btn01:hover{ background-color: #BDFF00;}

@media print, screen and (min-width: 1140.98px) {
.btn-contact{ max-width: 390px; width: 35.45%;}
.document-wrap{ max-width: 687px; width: 62.45%;}
}
@media print, screen and (min-width: 899.98px) and (max-width: 1140px) {
.entry-wrap.st-row-lg{flex-direction: column; max-width: 680px; width: 80%; margin-inline: auto; gap: 20px;}
.btn-contact,.document-wrap{width: 100%;}
}

@media print, screen and (min-width: 899.98px) {
.entry-wrap{ max-width: 1100px; width: 100%;}
.btn-contact,.document-wrap{ height: 80px;}
.btn-contact{ font-size: 1.5rem; padding-inline: min(2.5%,20px);}
.document-wrap{ padding-inline: min(2.4%,40px);}
.document-wrap dt{ font-size: 1.25rem; margin-right: min(2.3%,32px);}
.document-wrap dd + dd{margin-left: min(1.7%,12px);}
.document-wrap .st-btn01{ height: 48px; border-radius: 24px;}
}
@media screen and (max-width: 899px){
.btn-contact{ margin-bottom: 20px; width: 100%;}
.document-wrap{ padding: 1em; gap: 0.6em; flex-direction: column; justify-content: center;}
.document-wrap dt,.document-wrap dd{width: 100%; text-align: center;}
.document-wrap .st-btn01{width: 80%; font-size: min(3.7vw, 14px);}
.list-article:not(.no-slide){padding-left: 0;}
.list-article li + li{margin-top: min(3.7vw, 14px);}
}


/* entry
========================================= */
#entry{ background-color: #000;}
.entry-lead{ color: #fff; text-align: center; font-weight: 500;}
.entry-lead::before{content: "＼";}
.entry-lead::after{content: "／";}

.st-icn-creator{ background-image: url(/assets/image/creators/icn-circle-user.svg);}
.st-icn-publisher{ background-image: url(/assets/image/creators/icn-building.svg);}

@media print, screen and (min-width: 899.98px) {
#entry.section:last-child{ padding-block: 40px;}
.entry-lead{ font-size: 1.25rem;}
.entry-lead::before{padding-right: 1em;}
.entry-lead::after{padding-left: 1em;}
}
@media print, screen and (max-width: 899px) {
#main > #entry.section:last-child{ padding-block: min(16vw,60px);}

#entry .ly-inner02{text-align: center;}
.st-main p.entry-lead{position: relative; display: inline-block; margin-inline: auto; padding-inline: 2em;}
.entry-lead::before,.entry-lead::after{ position: absolute; bottom: 0;}
.entry-lead::before{ left: 0;}
.entry-lead::after{ right: 0;}

.btn-creator{ margin-bottom: 20px;}

.entry-btn-wrap .st-btn02{ padding: 0 14px;}
}