@charset "utf-8";

/* ===== index ===== */

#sect_fview{ padding: 0; margin: 0; width: 100%; background-image: url(../img/kvis_bg01.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100vh; position: relative; max-height: 1400px;}
#sect_fview #fview_flex{ display: flex; align-content: center; align-items: center; height: 100%; flex-wrap: wrap;}
#sect_fview #fview_flex #fview_cont .event_name{ font-family: 'League Spartan', sans-serif; font-weight: 700; font-size:clamp(5rem,8vw,6.5rem); line-height: 0.8em; margin-top: calc((100px - 10vh) * 4); text-shadow: 0px 0px 0.2em #F6F5F6;}
#sect_fview #fview_flex #fview_cont .event_name .event_year{ font-family: 'Roboto', sans-serif; display: block; }
#sect_fview #fview_flex #fview_cont .event_term{ font-size: 1.5rem; line-height: 1.8em; padding-top: 3vh; font-weight: bold;}
#sect_fview #fview_flex #fview_cont .event_term small{font-size: 1rem; display: block;}
#sect_fview #fview_flex #fview_cont [class*="comm_btn"]{ margin-top: 3vh;}

#sect_fview a.scroll_btn{ text-align: center; border-top-left-radius: 0.4em; border-top-right-radius: 0.4em; width: 160px; color: #d46a99; padding: 0.5em 0; padding-left: 1em; position: absolute; bottom: 0; left:0; right:0; display: inline-block; background-color: #fff; margin: auto; font-family: 'Roboto', sans-serif;}
#sect_fview a.scroll_btn:after{ content: ""; display: inline-block; width: 0.8em; height: 0.8em; background-image: url(../img/arr_pink.svg);	background-repeat: no-repeat; background-size: contain;	vertical-align: middle;	-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); background-position: center top; margin-left: 0.5em;}

/**コンセプト**/
#sect_concept{}
#sect_concept .concept_cont{}
#sect_concept .concept_cont .HssDes_box img{width: 100%;}
#sect_concept .concept_cont .hss_list{padding-top: 5em;}
#sect_concept .concept_cont .hss_list [class*="smid_title"]{ margin-bottom:0; padding-bottom: 1em; }
#sect_concept .concept_cont .hss_list [class*="smid_title"] .trans{font-size: 50%; font-weight: bold;}
#sect_concept .concept_cont .hss_txt{padding-bottom: 1.5em;}
#sect_concept .concept_cont .soffice_box{ background-color: #ccc5b6; padding: 4em; margin-top: 4em;}
#sect_concept .concept_cont .soffice_ttl{ text-align: center; font-size: 4rem; line-height: 1;}
#sect_concept .concept_cont .soffice_cont{ display: flex; padding-top: 3em;}
#sect_concept .concept_cont .soffice_cont>*{width: 100%;}
#sect_concept .concept_cont .soffice_cont .soffice_img{ border: 1em solid #fff; text-align: center; width:40%;}
#sect_concept .concept_cont .soffice_cont .soffice_img img{width: 80%; margin: 5% 0;}
#sect_concept .concept_cont .soffice_cont .soffice_txt{width:60%; padding-left: 3em;}
#sect_concept .concept_cont .soffice_cont .soffice_txt strong{ font-size:2.6em; line-height: 1.6; padding-bottom: 0.75em; display: block;}
#sect_concept .concept_cont .soffice_cont .soffice_txt p{font-size:1.5em;}



/**プロダクツ**/
#sect_products{padding-bottom: 0;}
#sect_products .cmsoon_box{display: flex; color: #fff; font-weight: bold; padding-top: 4.2em;}
#sect_products .cmsoon_box [class*="cmsoon_"] { display: flex; align-items: center; font-size: 1.5rem; position: relative;}
#sect_products .cmsoon_box [class*="cmsoon_"] p{display: block; }
#sect_products .cmsoon_box .cmsoon_red{background-color: #de2a1b; margin-bottom: 0.6em; z-index: 2; padding: 0.25em 1.25em;}
#sect_products .cmsoon_box .cmsoon_red p{font-family: 'League Spartan', sans-serif; font-weight: 500; font-size: 125%;}
#sect_products .cmsoon_box .cmsoon_red:after{ content: ""; width: 0; height: 0; border-style: solid; border-right: 0.7em solid transparent; border-left: 0.7em solid transparent; border-top: 1em solid #de2a1b; border-bottom: 0; margin: auto; position: absolute; bottom: -0.6em; left: 0; right: 0;}
#sect_products .cmsoon_box .cmsoon_black{background-color: #000; margin-top: 0.6em; z-index: 1; margin-left: -1.5em; padding: 0.25em 3em;}
#sect_products .cmsoon_box .cmsoon_black p{}
#sect_products .cmsoon_box + [class*="mid_Ltitle"]{padding-top: 2.5em;}

#sect_products [class*="wth"][class*="_absol"]{background-color: #f2f2f2;}
.products_unch{padding-bottom: 5em;}
.products_unch li a{ background-color: #b0c0c0; display:flex; height: 100%; color: #fff; flex-direction: column; justify-content: center; align-items: center; padding: 1em 0;}
.products_unch li a .f_alph{ font-size:1.5em; line-height: 1.2; display: block; }
.products_unch li a .trans{font-size: 80%; font-weight: bold;}
.products_unch li a .trans:after,.products_unch li a .trans:before{background-color: #fff;}
.products_unch li a p{font-weight:bold;}
.products_unch li.os_brand a{background-color: #c2c2c2;}
#sect_products .products_bg{background-color: #f2f2f2;padding-bottom: 100px;}

#sect_products [id*="unch_"]{ margin-top: -110px; padding-top: 110px; padding-bottom: 140px;}
#sect_products #unch_osbrand{padding-bottom: 0;}
#sect_products .prod_jenr{display: flex; align-items: center; padding-bottom: 2em;}
#sect_products .prod_jenr .jenr_ttl{white-space: nowrap; padding: 0.25em 2em 0.25em 0; border-right: 1px solid #7c8181;}
#sect_products .prod_jenr .jenr_ttl .f_alph{font-size: 3em; line-height: 1;}
#sect_products .prod_jenr .jenr_ttl .f_alph + .trans{}
#sect_products .prod_jenr .jenr_ttl .trans{ font-weight: bold; }
#sect_products .prod_jenr .jenr_ttl .osbrand_name{font-size: 3em; font-weight: bold; line-height: 1.6;}
#sect_products .prod_jenr .jenr_intr{width: 100%; font-size: 1.25em; font-weight: bold; padding-left: 1.5em; line-height: 1.6;}


#sect_products ul.prod_ul li{ background-color: #fff; display: flex; position: relative; width: 100%; transition: all .4s ease 0s;}
#sect_products ul.prod_ul li.prod_hidden{ visibility: hidden; opacity: 0; height: 0; margin: 0; padding:0; min-height: initial;}
#sect_products ul.prod_ul li.prod_visib{ visibility: visible!important; opacity: 1!important; margin-bottom: 4em!important; min-height: 400px!important; }
[class*="comm_btn"][id*="more_btn"]{font-size: 1.2rem; min-width: 400px;}
[class*="comm_btn"].more_btn{font-size: 1.2rem; min-width: 400px;}

#sect_products ul.prod_ul li .prod_txt{ width: 63.5%; padding: 3em 4em; display: flex; align-items: center;}
#sect_products ul.prod_ul li .prod_txt [class*="mid_Mtitle"] {letter-spacing: normal; font-size: 1.6rem;}
#sect_products ul.prod_ul li .prod_txt [class*="mid_Mtitle"] .f_alph{ letter-spacing: 0.05em; font-size: 180%; font-weight: 600; display: inline-block; margin-right: 0.2em;}
#sect_products ul.prod_ul li .prod_txt [class*="mid_Mtitle"] .f_alph .lang_jap{font-size: 80%; font-family: YuGothic,/* For Mac */ "Yu Gothic", /* For Windows */ "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", /* For Mac Fallback */ Meiryo, /* For Windows Fallback */ sans-serif; display: inline-block; font-weight: bold;}

#sect_products ul.prod_ul li .prod_txt [class*="mid_Mtitle"] .f_alph:after{ content: "/"; font-size: 56%; display: inline-block; vertical-align: baseline; margin-left: 0.4em; font-weight: 500; line-height: 1em;}
#sect_products ul.prod_ul li .prod_txt [class*="comm_btn"]{ margin-top: 2em; min-width: 300px; font-size: 1.2rem;}

#sect_products ul.prod_ul li .prod_photo{overflow: hidden;width: 37.5%;position: relative;background-repeat: no-repeat;background-size: cover;background-position: center center;}
#sect_products ul.prod_ul li .prod_photo a{display: block;width: 100%;height: 100%;background-image: url(../img/icon_zoom.svg);background-repeat: no-repeat;background-position: left 1.5em bottom 1.5em;background-size: 8% auto;}
/*#sect_products ul.prod_ul li .prod_photo img{ position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); object-fit: cover;}
#sect_products ul.prod_ul li .prod_photo img.left_just{ left: 0%; transform: translateY(-50%) translateX(0%); -webkit-transform: translateY(-50%) translateX(0%); }
*/
#sect_products ul.prod_ul li .prod_photo img.right_just{ right: 0%; left:auto; transform: translateY(-50%) translateX(0%); -webkit-transform: translateY(-50%) translateX(0%); }
#sect_products ul.prod_ul li:nth-child(2n) .prod_txt{ order: 1;}

/**ロケーション**/
#sect_location{}
#sect_location .location_cont {display:flex; justify-content: space-between; margin-bottom: 5em;}
#sect_location .location_cont .location_btn{ padding-left: 1em;}
#sect_location .location_cont [class*="comm_btn"]{white-space: nowrap;}
#sect_location .location_gmap{ height: 600px;}

/**コンタクト**/
#sect_contact{ padding-bottom: 0;}
#sect_contact .contact_bg {background-color: #ededed; padding-bottom: 60px;}
#sect_contact .contact_cont{ background-color: #fff; padding: 3.2em; display: flex; justify-content: space-between; align-items: stretch;}
#sect_contact .contact_cont [class*="mid_Mtitle"]{ margin-bottom:0.5em; }
#sect_contact .contact_cont .contact_txt{padding-right: 2em;}
#sect_contact .contact_cont .contact_add{ border-left: 1px solid #d1d1d1; padding-left: 3em; align-items: center; display: flex;}
#sect_contact .contact_cont .contact_add [class*="comm_btn"]{font-size: 1.2rem;}
#sect_contact .contact_sns{ display: flex; flex-wrap: nowrap; justify-content: center; padding-top: 4em; align-items:center;}
#sect_contact .contact_sns li{ margin:0; }
#sect_contact .contact_sns li a{ display: block; }
#sect_contact .contact_sns li img{ width: 60px; height: auto; }
#sect_contact .contact_sns li.f_alph{ font-weight: 800; color: #646565; margin-right: 0.75em}
#sect_contact .contact_sns li.f_alph:after{ content: ""; width: 0.75em; height: 0.75em; margin-left: 0.5em; display: inline-block; background-repeat: no-repeat; background-image: url(../img/arr_black.svg); background-size: contain; background-position: center;}

/**22サイトリンク**/
#sect_archive{}
#sect_archive [class*="wth_"]{padding-top: 5em;}
#sect_archive [class*="comm_btn"]{width: 100%;}

/**モーダル内**/
[id*="ProdIn_"]{display:none; width: 45vw; background-color:transparent; max-width:1000px}
[id*="ProdIn_"] .slick-list img{ width:calc(100% + 1px)!important; aspect-ratio: 4 / 3!important; }
[id*="ProdIn_"] .mod_txt{display: block; padding: 1em 2em; background-color: #fff; font-size: 0.9em; line-height: 1.6;}
[id*="ProdIn_"] .mod_txt:empty{display: none;}

/**fancy設定**/
.fancybox-content{padding:0!important}
button[class*="slick-"]{z-index: 1; background-color: #000!important; font-size:1em; width: 2em; height: 5em; top:calc(50% - 1.5em); }
button[class*="slick-"]:before{ opacity: 1; content: ""; background-image: url(../img/arr_white.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; width: 1em; height: 1em; display: block; margin: auto;}

button.slick-prev{left:0!important;}
button.slick-prev:before{transform: scaleX(-1);}
button.slick-next{right:0!important;}
.fancybox-bg{background-color: #2b2b2b; opacity:0.9!important; background-image:none!important;}
.fancybox-slide--html .fancybox-close-small{ color: #fff; background-color: #000; opacity: 1!important;}


    /* ##### responsive ##### */
    @media screen and (max-width: 768px) {
    body#top{}
   
    #sect_fview{ min-height: initial; background-position: right -54vw center;}
    #sect_fview #fview_cont{width:100%; padding: 0 4%; }
    #sect_fview #fview_flex{}
    #sect_fview #fview_flex #fview_cont .event_name{ font-size: 17vw; margin-top: 12vw; line-height: 1; }
    #sect_fview #fview_flex #fview_cont .event_name .event_year{ line-height: 0.8;}
    #sect_fview #fview_flex #fview_cont .event_term{ font-size: 1.2rem; padding-top: 4vh;}
    #sect_fview #fview_flex #fview_cont .event_term small{}
    #sect_fview #fview_flex #fview_cont [class*="comm_btn"]{ font-size: 1.2rem; margin-top: 5vh;}

	#sect_fview a.scroll_btn{ text-align: center; border-top-left-radius: 0.4em; border-top-right-radius: 0.4em; width: 160px; color: #d46a99; padding: 0.5em 0; padding-left: 1em; position: absolute; bottom: 0; left:0; right:0; display: inline-block; background-color: #fff; margin: auto; font-family: 'Roboto', sans-serif;}
	#sect_fview a.scroll_btn:after{ content: ""; display: inline-block; width: 0.8em; height: 0.8em; background-image: url(../img/arr_pink.svg); background-repeat: no-repeat; background-size: contain; vertical-align: middle; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); background-position: center top; margin-left: 0.5em;}

    /**コンセプト**/
    #sect_concept{padding-bottom: 0;}
    #sect_concept .concept_cont{}
    #sect_concept .concept_cont .HssDes_box img{}
    #sect_concept .concept_cont .hss_list{padding-bottom: 0;}
    #sect_concept .concept_cont .hss_list>li{margin-bottom: 3.5em;}
    #sect_concept .concept_cont .hss_list>li:last-child{margin-bottom: 0;}
    #sect_concept .concept_cont .hss_list [class*="smid_title"]{ margin-bottom:0; padding-bottom: 0.75em; }
    #sect_concept .concept_cont .hss_list [class*="smid_title"] .trans{}
    #sect_concept .concept_cont .hss_txt{}
    #sect_concept .concept_cont .soffice_box{ padding: 2.5em 1.5em; margin-top: 4em; width: 100vw; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw);}
    #sect_concept .concept_cont .soffice_ttl{ font-size: 2em; line-height: 1.2;}
    #sect_concept .concept_cont .soffice_cont{ flex-direction: column; padding-top: 2em; }
    #sect_concept .concept_cont .soffice_cont>*{width: 100%;}
    #sect_concept .concept_cont .soffice_cont .soffice_img{ border: 0.25em solid #fff; text-align: center; width:100%;}
    #sect_concept .concept_cont .soffice_cont .soffice_img img{width: 87%; margin: 7% 0;}
    #sect_concept .concept_cont .soffice_cont .soffice_txt{ width:100%; padding-left: 0; padding-top: 3em;}
    #sect_concept .concept_cont .soffice_cont .soffice_txt strong{ font-size:1.5em; line-height: 1.6; padding-bottom: 1em; text-align: center;}
    #sect_concept .concept_cont .soffice_cont .soffice_txt p{font-size:1.2em;}

    /**プロダクツ**/
    #sect_products{}
    #sect_products .cmsoon_box{ padding-top: 4.2em; position: relative;}
    #sect_products .cmsoon_box [class*="cmsoon_"] { font-size: 1rem; line-height: 1.6;}
    #sect_products .cmsoon_box [class*="cmsoon_"] p{}
    #sect_products .cmsoon_box .cmsoon_red{ margin-bottom: 0; text-align: center; line-height: 1.1; padding: 0.25em 0.75em;}
    #sect_products .cmsoon_box .cmsoon_red:after{display: none;}
    #sect_products .cmsoon_box .cmsoon_red p{white-space: nowrap;}
    #sect_products .cmsoon_box:after{ content: ""; width: 0; height: 0; border-style: solid; border-right: 0.7em solid transparent; border-left: 0.7em solid transparent; border-top: 1em solid #000; border-bottom: 0; margin: auto; position: absolute; bottom: -0.6em; left: 0; right: 0;}
    #sect_products .cmsoon_box .cmsoon_black{ margin-top: 0; margin-left: 0; padding: 1em; width: 100%;}
    #sect_products .cmsoon_box .cmsoon_black p{font-size: 120%;}
    #sect_products .cmsoon_box + [class*="mid_Ltitle"]{padding-top: 2em;}
    
    #sect_products [class*="wth"][class*="_absol"]{}
    .products_unch{padding-bottom: 5em;}
    .products_unch li{margin-bottom: 3vw}
    .products_unch li a{ padding: 0.75em 0;}
    .products_unch li a .f_alph{  }
    .products_unch li a .trans{}
    .products_unch li a .trans:after,.products_unch li a .trans:before{}
    .products_unch li a p{}
    .products_unch li.os_brand a{}

    #sect_products [id*="unch_"]{ margin-top: -110px; padding-top: 110px; padding-bottom: 80px;}
    #sect_products #unch_osbrand{padding-bottom: 0;}
    #sect_products .prod_jenr{flex-direction: column; padding-bottom: 2em;}
    #sect_products .prod_jenr .jenr_ttl{ padding: 0; padding-bottom: 2em; border-right-style: none;}
    #sect_products #unch_osbrand .prod_jenr .jenr_ttl{padding-bottom: 0;}
    #sect_products .prod_jenr .jenr_ttl .f_alph{font-size: 2.3em; line-height: 1.3;}
    #sect_products .prod_jenr .jenr_ttl .f_alph + .trans{}
    #sect_products .prod_jenr .jenr_ttl .trans{ }
    #sect_products .prod_jenr .jenr_ttl .osbrand_name{ font-size: 2em; line-height: 1.6;}
    #sect_products .prod_jenr .jenr_intr{width: 100%; font-size: 1.1em; padding-left: 0; line-height: 1.8;}

    #sect_products .products_bg{ padding-bottom: 64px;}
    #sect_products ul.prod_ul li{ min-height: initial; flex-direction: column; margin-bottom: 8vw;}
    #sect_products ul.prod_ul li .prod_txt{ width: 100%; padding: 1.75em ; display: block; order: 1;}
    #sect_products ul.prod_ul li .prod_txt [class*="comm_btn"]{min-width:initial; margin-top: 1.5em;}
    #sect_products ul.prod_ul li .prod_txt [class*="mid_Mtitle"]{ font-size: 1.2rem;} 
    #sect_products ul.prod_ul li .prod_txt [class*="mid_Mtitle"] .f_alph{ display: block; margin-right: 0;}
    #sect_products ul.prod_ul li .prod_txt [class*="mid_Mtitle"] .f_alph:after{ font-size: 70%; }
    #sect_products ul.prod_ul li .prod_photo{ overflow: hidden; width: 100%; position: relative; aspect-ratio: 3 / 2;}
    #sect_products ul.prod_ul li .prod_photo:before{ /*content:""; display: block; padding-top: 66.6%;*/}
    #sect_products ul.prod_ul li .prod_photo a{ background-position: right 1em bottom 1em; background-size: 10% auto;}
    #sect_products ul.prod_ul li .prod_photo img{ }
    #sect_products ul.prod_ul li.prod_visib{ margin-bottom: 2em!important; }
    
    /**ロケーション**/
    #sect_location{padding-bottom: 0;}
    #sect_location .location_cont {flex-direction: column;}
    #sect_location .location_cont .location_txt{ padding-bottom: 3em;}
    #sect_location .location_cont .location_btn{ padding-left: 0;}
    #sect_location .location_cont [class*="comm_btn"]{}
    #sect_location .location_gmap{ height: 75vh; margin: 0 calc(50% - 50vw); width: 100vw;}

    /**コンタクト**/
    #sect_contact{ padding-bottom: 0;}
    #sect_contact .contact_bg {padding-bottom: 64px;}
    #sect_contact .contact_cont{ background-color: #fff; padding: 2.4em; flex-direction: column;}
    #sect_contact .contact_cont [class*="mid_Mtitle"]{ margin-bottom:0.5em;}
    #sect_contact .contact_cont .contact_txt{padding-right: 0;}
    #sect_contact .contact_cont .contact_add{ padding-top: 2em; margin-top: 2em; padding-left: 0; border-left-style: none; border-top: 1px solid #d1d1d1;}
    #sect_contact .contact_cont .contact_add [class*="comm_btn"]{font-size: 1.2rem;}
    #sect_contact .contact_sns { flex-wrap: wrap; }
    #sect_contact .contact_sns li{ }
    #sect_contact .contact_sns li a{  }
    #sect_contact .contact_sns li img{ }
    #sect_contact .contact_sns li.f_alph{ margin-right: 0; width: 100%; text-align: center;}
    #sect_contact .contact_sns li.f_alph:after{ margin-left: 0; display: block; margin: auto; transform:rotate(90deg);  }

    /**22サイトリンク**/
    #sect_archive{}
    #sect_archive [class*="wth_"]{padding-top: 3em;}
    #sect_archive [class*="comm_btn"]{}

    /**モーダル内**/
    [id*="ProdIn_"]{ width: 90vw; max-width: initial;}
    [id*="ProdIn_"] .slick-list img{}
    [id*="ProdIn_"] .mod_txt{ padding: 1em;}

    /**fancy設定**/
    .fancybox-content{ }
    button[class*="slick-"]{ top: 34vw; height: 6em;}
    button[class*="slick-"]:before{}


    button.slick-prev{}
    button.slick-prev:before{}
    button.slick-next{}
    .fancybox-bg{}
    .fancybox-slide--html .fancybox-close-small{ width: 9vw; height: 9vw; padding: 0;}

}