@charset "utf-8";

/* Reset Style
==================================================*/


* { margin: 0; padding: 0; font-size: 100%; box-sizing: border-box;}
html { height: 100%; margin: 0; padding: 0; line-height: 1; zoom: 1;}
body { height: 100%; margin: 0; padding: 0;font-family:'Noto Sans Japanese', Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size: 1em; zoom: 1; color: #333333;}

.yu_go{font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;}
.Oswald{font-family:'Oswald', sans-serif;}
.font_Lato{font-family: "Lato", sans-serif;font-style: normal;}

hr { display: none; }
img { border: none; line-height: 0; vertical-align: bottom; }
div, dl, dt, dd, form, input, ul, ol, li, p, select, textarea, span, th, td { margin: 0; padding: 0; }
li { list-style-type: none; border: 0; outline: 0; }
address, th, caption, em, dfn { font-style: normal; font-weight: normal; font-size: 100%; }
strong{font-weight: bold;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; margin: 0; padding: 0; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; font-size: inherit; }
/* table　-------------------*/
table {border-collapse:collapse;margin-bottom:10px;}
td,th {line-height:1.8em;padding: 3px;}


a { text-decoration: none;color: #000;}
a:link {text-decoration: none;color: #000;}
a:visited {color: #000;}
a:hover { text-decoration: underline;opacity: 0.8;}
a:active { text-decoration: underline;}

img{height: auto;}
/* clearfix
============================= */
.clearfix:after {
content: "" ;
display: block ;
clear: both ;
height: 0 ;
visibility: hidden ;
font-size: 0.1em;
line-height: 0;
}
.clearfix { min-height: 1px;}
* html .clearfix {height: 1px;}

/*----------------------------------------------------------------------------
 ***                                                                    共通
----------------------------------------------------------------------------*/
.pcNone{ display:none;}
.spNone{ display:block;}
.dispFlex{ display: flex;}
.posiR{ position: relative;}
.posiA{ position: absolute;}

.tac{ text-align:center;}
.tar{ text-align:right;}
.tal{ text-align:left;}

.txtColorWh{ color: #ffffff;}
.txtColorOr{ color: #E84709;}
.txtColorBl{ color: #0C3484;}
.txtColorGld{ color: #E2B41E;}
.bgColorWh{ background-color: #ffffff;}
.bgColorOr{ background-color: #E84709;}
.bgColorGr{ background-color: #F7F7F7;}
.bgColorBl{ background-color: #0C3484}
.bgColorGld{ background-color: #E2B41E;}

.radius10{ border-radius: 10px;}

.floatR{ float:right;}
.floatL{ float:left;}
.imgfloatR{ float:right;}
.imgfloatL{ float:left;}

.order01{order: 1;}
.order02{order: 2;}
.order03{order: 3;}
.order04{order: 4;}

.contentsBox .sectionInner{max-width: 1200px;margin: 7em auto;width: 100%;padding: 0 1%;}

h3{margin-bottom: 1em;}
h3.font_Lato{font-weight: 900;font-size: 450%;text-align: center;color: #e94709;}
h3 img{display: block;margin:0 auto 0.3em;}
/*----------------------------------------------------------------------------
 ***                                                                  header
----------------------------------------------------------------------------*/
/*header*/
#pageHeader{background:#fff;position: sticky;top: 0;z-index: 100;}
#pageHeader .headerInner{padding:1em 2em;position: relative;display: flex;justify-content: space-between;align-items: center}
#pageHeader .headerInner h1{ float:left;padding-top: 0.5em;}
#pageHeader .header_link{ float:right;display: flex;}
#pageHeader .header_link p{ color: #624000;margin: 0 0.7em;font-size: 20px;font-weight: 700;}
#pageHeader .header_link p a{ color: #624000;}
#pageHeader .header_link p a:link{ color: #624000;}
.back_top{position: fixed;bottom: 2%;right: 2%;z-index: 100;}

/*----------------------------------------------------------------------------
 ***                                                                  section
----------------------------------------------------------------------------*/
.mainBox .mainBoxInner{width: 100%;margin: auto;}
.mainBox h2 img{width: 100%;margin: auto;}

/*----------------------------------------------------------------------------
 ***                                                                mainImgBox
----------------------------------------------------------------------------*/
#aboutSec h3{margin-bottom: 2em;}
#aboutSec .aboutTxt{font-size:180%;font-weight: 600;text-align: center;margin-bottom: 1em;line-height: 1.3; }
#aboutSec .aboutTxt .L_font{font-size:150%;font-weight: 900;}
#aboutSec .sub_txtBox{background: #fff2ee;padding:2em 5em 2em;margin-top: 1em;position: relative;border-radius: 15px;}
#aboutSec .sub_txtBox h4{font-size: 165%;font-weight: 900;text-align: center;margin: 0.5em;color: #e94709;position: relative;}
#aboutSec .sub_txtBox p{position: relative;}
#aboutSec .sub_txtBox .sub_txt{font-size: 110%;font-weight: 500;line-height: 1.5;}
#aboutSec .sub_txtBox.concept{margin-top: 2em;}
#aboutSec .sub_txtBox.concept .concept_txt{font-weight: 700;font-size: 130%;line-height: 1.3;margin-bottom: 0.5em;}
#aboutSec .sub_txtBox.concept::before{content: "CONCEPT";display: block;position:absolute;color: #fffbfa;font-weight: 900;font-family: "Lato", sans-serif;left: 15px;margin: auto;top: 0;font-size: 600%;text-align: center;z-index: 0;}
#aboutSec .sub_txtBox.origin::before{content: "ORIGIN";display: block;position:absolute;color: #fffbfa;font-weight: 900;font-family: "Lato", sans-serif;left: 15px;margin: auto;top: 0;font-size: 600%;text-align: center;z-index: 0;}


#memberSec .flex_inner{display: flex;flex-wrap: wrap;justify-content: center;align-items: stretch;gap:3em;}
#memberSec .flex_inner li{width: calc(90%/3);display: block;}
#memberSec .flex_inner li button{background: #fff;border: none;width: 100%;}
#memberSec .flex_inner li button:hover{opacity: 0.8;}
#memberSec .flex_inner li button:hover img{filter: drop-shadow(0px 0px 10px #ccc);}
#memberSec .flex_inner li img{width: 100%;background: #fff;}
#memberSec .flex_inner li:nth-child(odd) img{border: 8px solid #e94709;}
#memberSec .flex_inner li:nth-child(even) img{border: 8px solid #00afad;}
#memberSec .flex_inner li button .name{display: block;text-align: center;font-size: 200%;font-weight: 900;margin-top: 1em;}
#memberSec .flex_inner li:nth-child(odd) button .name{color: #e94709;}
#memberSec .flex_inner li:nth-child(even) button .name{color: #00afad;}



#memberSec .modal-window{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; width: 80%; max-width: 550px; height: auto; margin: 0; padding: 0px 0; overflow-y: auto;}
#memberSec .modal-window p{text-align: center;}
#memberSec .modal-window .img{padding: 1em;}
#memberSec .modal-window p img{text-align: center;width: 50%;}
#memberSec .modal-window .name{font-weight: 900;font-size: 220%;margin-top: 0.5em;}
#memberSec .modal-window .profile{margin: 1em 2em 2em;}
#memberSec .modal-window .profile dl{display: flex;justify-content: flex-start;align-items: flex-start;border-bottom: 1px dashed #000;padding: 1em 0.5em;}
#memberSec .modal-window .profile dl:last-child{border-bottom: none;}
#memberSec .modal-window .profile dl dt{width: 30%;font-weight: bold;color: #e94709;}
#memberSec .modal-window .profile dl dd{width: 70%;}

#memberSec .modal-window .profile dl.message{display: block;}
#memberSec .modal-window .profile dl.message dt{margin-bottom: 0.5em;}
#memberSec .modal-window .profile dl.message dt,
#memberSec .modal-window .profile dl.message dd{width: 100%;line-height: 1.3;}



/*ポップアップ設定*/
#memberSec .Inner{display: none;}
#memberSec .Inner.open{display: block;}
#memberSec .Inner{visibility: hidden; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.7); z-index: 999; transition: 1s; opacity:0;}
#memberSec .Inner.open{visibility: visible; transition: 1s; animation-name: fadeInAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity:0}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
button.close{ width: 40px; height: 40px; position: absolute; right: 0; background: none; color: #000000; font-size: 35px;font-weight: 300;border: none;font-family: 'Noto Sans Japanese', "游ゴシック", YuGothic;top: -3px;}
body.no_scroll{overflow: hidden;}

#memberSec .directorSec{width: 90%;border: 5px solid #f2f2f2;padding: 2em;margin: auto;}
#memberSec .directorSec ul{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#memberSec .directorSec ul .logo{max-width:276px;width: 30%; }
#memberSec .directorSec ul .directorBox{width:70%;}
#memberSec .directorSec ul .directorBox .director{font-size: 160%;font-weight: bold;text-align: center;line-height: 1.3;}
#memberSec .directorSec ul .directorBox .director span{font-size: 150%;display: block;}
#memberSec .directorSec ul .directorBox .btn a{background: #e70012;padding: 0.5em 1em;color: #fff;font-weight: bold;font-size: 110%;display: inline-block;border-radius: 50vw;margin: 0.5em auto 1em;}
#memberSec .directorSec ul .directorBox .comment{font-size: 110%;line-height: 1.5;}

#staffSec{}
#staffSec .staffBox{border:8px solid #b2e7e6;padding: 1em;margin: 0 auto 1em;display: flex;flex-wrap: nowrap;justify-content: space-between;align-items: flex-start;}
#staffSec .staffBox .imgBox{width: 25%;}
#staffSec .staffBox .txtBox{width: 74%;margin-top: 1em;}
#staffSec .staffBox .txtBox h4{border-bottom: 1px solid #000;font-size: 180%;font-weight: 900;padding: 0 1em 0.2em;}
#staffSec .staffBox .txtBox h4 .sub{font-size: 60%;display: inline-block;padding-left: 1em;font-weight: 500;}
#staffSec .staffBox .txtBox .staff_content{margin: 1em 1em 0;line-height: 1.5em;}
#staffSec .staffBox .txtBox .staff_content h5{background:#ccefef;display: inline-block;padding: 0.2em 1em;margin-bottom: 0.5em;font-size: 115%;width: 120px;text-align: center;font-weight: 500;}
#staffSec .staffBox .txtBox .staff_content p{font-weight: 500;pointer-events: none;}
#staffSec .staffBox .txtBox .biographyBox p{padding-left: 1em;position: relative;margin-bottom: 0.2em;}
#staffSec .staffBox .txtBox .biographyBox p::before{content: "・";display: block;position: absolute;left: 0;}

#uniformSec .comingsoon{margin-bottom: 1em;}
#uniformSec .subTtl{font-size: 250%;color: #4d4d4d;font-weight: 900;line-height: 1.3;margin-bottom: 0.5em;}
#uniformSec .subTtl span{font-size: 80%;display: inline-block;background: linear-gradient(transparent 50%, #fce9e1 0%);padding: 0 1em;line-height: 1.2;}
#uniformSec .uniform_txt{font-size: 130%;font-weight: 500;line-height: 1.7;width: 95%;margin: auto}
#uniformSec .uniformBox{max-width: 100%;margin: 2em auto 0;}
#uniformSec .uniform_photo{display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;gap:2em;margin-bottom: 2em;}
#uniformSec .uniform_photo li{width: 48%;}
#uniformSec .uniform_photo li img{width: 100%;}
#uniformSec .uniform_photo li span{display: block;font-size: 180%;font-weight: 900;text-align: center;padding: 0.2em;}
#uniformSec .uniform_photo li.black span{background: #4d4d4d;color: #fff;border: 1px solid #4d4d4d;}
#uniformSec .uniform_photo li.white span{background: #fff;color: #4d4d4d;border: 1px solid #4d4d4d;}



#uniformSec .btn a{border: 3px solid #4d4d4d;color: #4d4d4d;font-weight: 900;font-size: 180%;border-radius: 50vw;padding: 0.5em 2em;display: inline-block;margin-top: 1em;}

#scheduleSec{}
#scheduleSec #scheduleList{max-height: 550px;overflow-y: scroll;overflow-x: hidden;}
#scheduleSec #scheduleList .schedule-item{display: flex;border-bottom: 2px solid #e94709;margin-right: 2em;}
#scheduleSec #scheduleList .schedule-item:last-child{border-bottom: none;}
#scheduleSec #scheduleList .schedule-item .date{border-right: 2px solid #e94709;padding: 1.5em 0 0 1.5em;width: 20%;}
#scheduleSec #scheduleList .schedule-item .date .year{font-weight: 500;display: block;font-size: 130%;margin-bottom: 0.2em;}
#scheduleSec #scheduleList .schedule-item .date .day{font-size: 170%;font-weight: 600;}
#scheduleSec #scheduleList .schedule-item .content{width: 78%;padding: 1.5em;}
#scheduleSec #scheduleList .schedule-item .content h4{font-weight: 900;font-size: 160%;margin-bottom: 0.5em;}
#scheduleSec #scheduleList .schedule-item .content p{font-size: 115%;font-weight: 500;line-height: 1.5;}

#scheduleSec #scheduleList::-webkit-scrollbar { width: 7px;}
#scheduleSec #scheduleList::-webkit-scrollbar-thumb {background: #e94709;border-radius: 7px;box-shadow: none;}
#scheduleSec #scheduleList::-webkit-scrollbar-track {background: #e6e6e6;border: none;border-radius: 7px;}

#snsSec h4{font-size: 350%;font-weight: 900;color: #00afad;border-bottom: 3px solid #00afad;margin-bottom: 0.5em;text-align: center;padding-bottom: 0.3em;}
#snsSec iframe{border:none; overflow:hidden;  width:100%; height:800px;}
#snsSec .btn a{border: 3px solid #4d4d4d;color: #4d4d4d;font-weight: 900;font-size: 180%;border-radius: 50vw;padding: 0.5em 2em;display: inline-block;margin-top: 1em;}

#otherSec{}
#otherSec .otherBox h4{background: #f2f2f2;padding: 0.5em;text-align: center;font-size: 190%;font-weight: 900;}
#otherSec .otherBox h4.orange{border-right: 20px solid #e94709;border-left: 20px solid #e94709;}
#otherSec .otherBox h4.blue{border-right: 20px solid #00afad;border-left: 20px solid #00afad;margin-top: 2em;}
#otherSec .otherBox .txtBox{margin-top: 2em;}
#otherSec .otherBox .txtBox .txt{font-size: 145%;font-weight: bold;text-align: center;line-height: 1.5em;}

#otherSec .otherBox .gift_btn a{background:#e84709;color: #fff;padding: 0.7em 2.2em 0.7em 2em;position: relative;font-size: 170%;font-weight: 600;display: inline-block;border-radius: 50vw;margin-top: 1em;}
#otherSec .otherBox .gift_btn a::after{    
    position: absolute;
    content: '';
    width: 16px;
    height: 16px;
    top: 0%;
    bottom: 0;
    margin: auto;
    right: 8%;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);}

#otherSec .otherBox .event_btn a{background:#00afad;color: #fff;padding: 0.7em 2.2em 0.7em 2em;position: relative;font-size: 170%;font-weight: 600;display: inline-block;border-radius: 50vw;margin-top: 1em;}
#otherSec .otherBox .event_btn a::after{    
    position: absolute;
    content: '';
    width: 16px;
    height: 16px;
    top: 0%;
    bottom: 0;
    margin: auto;
    right: 8%;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);}


/*----------------------------------------------------------------------------
 ***                                                                 footer
----------------------------------------------------------------------------*/

/* linkbox */
#linkBox{background-color: #000;padding: 6em 0;}
#linkBox dt{  margin:0 auto 1em;text-align: center;}
#linkBox dd{ font-weight:bold; line-height:2em; text-align:center; color:#FFF;font-size: 130%;}
#linkBox dd img{ padding:0 0.5em; height:auto;}
#linkBox .ftShBtn{ padding-top:40px;}
#linkBox .shTxt{ color:#FFF; text-align:center; font-size:90%; font-weight:bold;}
#linkBox ul{ text-align:center;}
#linkBox li p{ display:inline-block;}
#linkBox .fb-share-button,
#linkBox .tw-share-button{ font-size:80%; padding:1em 20px 0 20px; line-height:0.8em;}
#linkBox .insImgLi{ padding-top:10px;}
#linkBox .insImgLi img{ width:130px;}


/* footer */
#pageFooter{ background:#E9470B;}
#pageFooter .footerInner{ padding:1% 1%;}
#pageFooter dl{ float:left; width:60%;}
#pageFooter dt{ width:6em; float:left;}
#pageFooter dd{ float:left; font-size:80%; color:#FFF; padding:3% 0 0 2%;}
#pageFooter p{ float:right; font-size:80%; color:#FFF; padding-top:1.5%;}
#pageFooter a{color: #fff;}


@media screen and (max-width: 1200px) and (min-width: 951px){
	#pageHeader .headerInner ul{padding: 0px 0 0px 2%;}
	#pageHeader .headerInner li{padding:3% 2%; }
    
    #inner_linkBox div{width: calc(95% / 3);margin: 0.4em 0;}
    
    #buyBox .slick-slider .slick-list{padding:0 calc(66% - 350px) 0 calc(66% - 350px)!important}
}