@charset "UTF-8";

/*
Version: 2.2.4
*/


/*
===== CONTENTS ================================================================================

	Index:
  - Base Style
  - Layout
  
===============================================================================================
*/



/* 1: Base Style Setting
----------------------------------------------------------------------------------------------*/

/* Base Setting
==========================================================*/

html { font-size: 14px;}
body { font-family: 'Poppins', "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic",  Helvetica, Arial, sans-serif; 
	 margin:0; padding: 0; background-color:#000; color:#fff;  font-weight: 400; letter-spacing: 0.07em; }
body { width: 100vw; height: auto; overflow-x: hidden;}



a       { text-decoration: none; color:#fff; }
a:hover { /*text-decoration: underline;*/  }
a.disabled { pointer-events: none; opacity:0.5;-moz-opacity:0.5; filter: alpha(opacity=50); }
a.underline{ text-decoration: underline;}
.nolink { pointer-events: none; opacity: 0.3;}

@media screen and (min-width: 751px) {
.tellink { pointer-events: none; }
}
@media screen and (max-width: 750px) {
    html { font-size: calc((12 / 360) * 100vw);}
}

/* main-layout
==========================================================*/

/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - デスクトップ（デフォルトのグリッド）
   1024-768    - タブレット横長
   768-480     - タブレット縦長
   480-less    - スマホ
--------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }
 
@media all and (min-width: 768px) and (max-width: 1024px) { }
 
@media all and (min-width: 480px) and (max-width: 768px) { }
 
@media all and (max-width: 480px) { }

/* iPhoneポートレイト */
@media screen and (max-width: 480px) and (orientation:portrait) {} 
 
/* iPhoneランドスケープ */
@media screen and (max-width: 480px) and (orientation:landscape) {}
 
/* iPadポートレイト */
@media screen and (min-width: 481px) and (orientation:portrait) {}
 
/* iPadランドスケープ */
@media screen and (min-width: 481px) and (orientation:landscape) {
}


*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box}

#wrapper  { /*overflow: hidden; */}
.wrap{ padding: 0 50px; margin: 0 auto; box-sizing: border-box;}
.Inner1400{ max-width: 1400px; width: 100%; margin: 0 auto; box-sizing: border-box;}
.Inner800{ max-width: 800px; width: 100%; margin: 0 auto; box-sizing: border-box;}
.Inner750{ max-width: 750px; width: 100%; margin: 0 auto; box-sizing: border-box;}
.Inner700{ max-width: 700px; width: 100%; margin: 0 auto; box-sizing: border-box;}

@media screen and (min-width: 751px) {
    .Inner1600{ max-width: 1600px; width: 100%; margin: 0 auto; box-sizing: border-box;}
    .Inner1250{ max-width: 1250px; width: 100%; margin: 0 auto; box-sizing: border-box;}
    .Inner1200{ max-width: 1200px; width: 100%; margin: 0 auto; box-sizing: border-box;}
    .Inner1150{ max-width: 1150px; width: 100%; margin: 0 auto; box-sizing: border-box;}
    .Inner1050{ max-width: 1050px; width: 100%; margin: 0 auto; box-sizing: border-box;}
    .Inner1000{ max-width: 1000px; width: 100%; margin: 0 auto; box-sizing: border-box;}
    .Inner950{ max-width: 950px; width: 100%; margin: 0 auto; box-sizing: border-box;}
    .Inner900{ max-width: 900px; width: 100%; margin: 0 auto; box-sizing: border-box;}
}
@media screen and (min-width: 1400px) {
    .side_padding100 { padding: 0 100px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    .side_padding100 { padding: 0 calc((100 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    .side_padding100 { padding: 0 calc((20 / 360) * 100vw);}
}

.w100,.w90,.w85,.w80,.w77,.w75,.w72,.w70,.w67,.mw1600,.mw1100,.mw900{margin: 0 auto;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
.w100{width: 100%;}
.w90{width: 90%;}
.w85{width: 85%;}
.w80{width: 80%;}
.w77{width: 77%;}
.w75{width: 75%;}
.w72{width: 72%;}
.w70{width: 70%;}
.w67{width: 67%;}
.w65{width: 65%;}


 
body:not(.index) #Container { }
#Container.fixed{ } 
.pages{}


@media screen and (min-width: 751px) {
.sp-hide { display: block;}
.sp-hide-inline { display: inline;}
.sp-show { display:none !important;}
.sp-show-inline { display:none !important;}
}
@media screen and (max-width: 750px) {
/* body { font-size: 14px; } */
.sp-hide-inline, .sp-hide { display: none !important;}
.sp-show{ display:block;}
.sp-show-inline{ display:inline;}
.sp-br-none br, br.sp-br-none {display: none;}
.flex.sp-noflex { display: block;}
.wrap{ padding: 0 7%;}
.sp-pdnone{ padding: 0 !important;}
#Container.fixed{ }
}

@media screen and (min-width: 1201px) {
    .show-1200 { display: none; }
    .hide-1200 { display: block; }
    }
    @media screen and (max-width: 1200px) {
    .show-1200 { display: block; }
    .hide-1200 { display: none; }
    }
    @media screen and (min-width: 1101px) {
    .show-1100 { display: none; }
    .hide-1100 { display: block; }
    }
    @media screen and (max-width: 1100px) {
    .show-1100 { display: block; }
    .hide-1100 { display: none; }
    }
    @media screen and (min-width: 1001px) {
    .show-1000 { display: none; }
    .hide-1000 { display: block; }
    }
    @media screen and (max-width: 1000px) {
    .show-1000 { display: block; }
    .hide-1000 { display: none; }
    }
    @media screen and (min-width: 901px) {
    .show-900 { display: none; }
    .hide-900 { display: block; }
    }
    @media screen and (max-width: 900px) {
    .show-900 { display: block; }
    .hide-900 { display: none; }
    }
    @media screen and (min-width: 801px) {
        .show-800 { display: none; }
        .hide-800 { display: block; }
     }
        @media screen and (max-width: 800px) {
        .show-800 { display: block; }
        .hide-800 { display: none; }
    }
    @media screen and (min-width: 751px) {
    .show-750 { display: none; }
    .hide-750 { display: block; }
    }
    @media screen and (max-width: 750px) {
    .show-750 { display: block; }
    .hide-750 { display: none; }
    .sp-br-none br{ display: none;}
    }
    
    @media screen and (min-width: 601px) {
        .show-600 {display: none;  }
        .hide-600 { display: block;  }
    }
    @media screen and (max-width: 600px) {
        .show-600 { display: block; }
        .hide-600 { display: none; }
    }
    
    @media screen and (min-width: 501px) {
        .show-500 {display: none;  }
        .hide-500 { display: block;  }
    }
    @media screen and (max-width: 500px) {
        .show-500 { display: block; }
        .hide-500 { display: none; }
    }
    
    @media screen and (min-width: 401px) {
        .show-400 {display: none;  }
        .hide-400 { display: block;  }
    }
    @media screen and (max-width: 400px) {
        .show-400 { display: block; }
        .hide-400 { display: none; }
    }
    @media screen and (min-width:375px) {
        .show-374 {display: none;  }
        .hide-374 { display: block;  }
    }
    @media screen and (max-width: 374px) {
        .show-374 { display: block; }
        .show-800.rehide-374,
        .show-750.rehide-374,
        .show-600.rehide-374,
        .show-500.rehide-374,
        .show-500.rehide-374,
        .show-400.rehide-374,
        .hide-374 { display: none; }
    }

/* .top .en_content, */
/* .top .en_visible, */
.top .langtoggle,
.en .jp_visible,
.jp .en_visible,
.en .jp_content,
.jp .en_content,
.kasou_media .langtoggle,
.kasou_news .langtoggle { display: none !important;}

/* header
==========================================================*/

#headerContainer { width: 100%; /*height: 200px;*/ padding-top: 40px; position: fixed; top: 0; left: 0; z-index: 999; background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0));}
#header { height: 100%; }
#logo {  width: 150px; position: relative; z-index: 1;}
#logo img { vertical-align: middle;}
#g_nav { }
.g_nav__list li:not(:last-child) { margin-right: 20px;}
.g_nav__list li a { font-size: 1.071em;}

@media screen and (max-width: 1400px) {
    .g_nav__list li a { font-size: 0.9em;}
}

#other img { vertical-align: middle;}
.langtoggle { margin-left: 50px; font-size: 1.143em;}
.instalogo { margin-left: 25px;}
.shoplogo { margin-left: 25px;}

.responsive_right .langtoggle { display: none; margin-left: 0; margin-right: 25px;}
.responsive_right .langtoggle img { padding-left: 5px; box-sizing: unset;}

.navInner { display: none; height: 20px; width: 25px; /*position: relative; z-index: 1000;*/}
.menu-trigger, .menu-trigger span { display: inline-block; box-sizing: border-box;}
.menu-trigger { width: 100%; height: 100%; line-height: inherit; cursor: pointer; position: relative; top: 0; right: 0; z-index: 999;}
.menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger span:nth-of-type(1) { top: 0;}
.menu-trigger span:nth-of-type(2) { top: 50%; transform: translateY(-50%);}
.menu-trigger span:nth-of-type(3) { bottom: 0;}
.active .menu-trigger span:nth-of-type(1) { -webkit-transform: translateY(9px) rotate(-45deg); transform: translateY(9px) rotate(-45deg);}
.active .menu-trigger span:nth-of-type(2) { opacity: 0;}
.active .menu-trigger span:nth-of-type(3) { -webkit-transform: translateY(-9px) rotate(45deg); transform: translateY(-9px) rotate(45deg);}

@media screen and (min-width: 1201px) {
    #g_nav { display: block;}
}
@media screen and (min-width: 751px) {
    #sp_menuBk { display: none !important;}
    #g-menu { display: block !important;}
    #sp_menuBk { display: none !important;}
    #g-menu { display: block !important;}

    #other_sp { display: none;}
}

@media screen and (max-width: 910px) {
    #g_nav { display: none; position: fixed; top: 0; left: 0; /*z-index: 1000;*/ width: 100vw; height: 100vh; height: 100dvh; background-color: #000;}
    .navInner { display: block;}
    .g_nav__list { flex-flow: column; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .g_nav__list li { margin-right: 0 !important;}
    .g_nav__list li:not(:first-child) { margin-top: calc((40 / 1400) * 100vw);}
    .g_nav__list li a { font-size: 1.071em;}

    #other { display: none;}
    #other_sp { display: flex; position: absolute; bottom: 30px; left: 0; width: 100%; justify-content: center; align-items: center;}
    #other_sp a { display: flex;}
    .instalogo { margin-left: 0;}
    .shoplogo { margin-left: 30px;}

    .responsive_right .langtoggle { display: flex;}


    .menu-trigger { margin-bottom: calc((4 / 360) * 100vw) ;}
} 
@media screen and (max-width: 860px) {
    #headerContainer { padding-top: 20px;}
    #logo { width: 110px;}
}
@media screen and (max-width: 750px) {


    #sp_menu{ height: 25px; width: 40px; cursor:pointer; position: fixed; right: 15px; top: 15px; padding-top: 15px; z-index: 9901;}
    #sp_menu span{position:absolute;display:block;content:'';}
    #sp_menu span:before{position:absolute;height:2px;width:30px;background:#fff;display:block;content:'';}
    #sp_menu span:before{bottom:-12px}
    #sp_menu span:after{position:absolute;height:2px;width:30px;background:#fff;display:block;content:'';}
    
    #sp_menu_close{ height: 25px; width: 40px; cursor:pointer; position: fixed; right: 15px; top: 15px; padding-top: 15px; display: none; z-index: 9912; }
    #sp_menu_close span{ background:none; }
    #sp_menu_close span:before,
    #sp_menu_close span:after{top:50%;left:0;position:absolute;height:2px;width:30px;background:#000;display:block;content:'';cursor:pointer;-webkit-transition: all .3s ease;transition: all .3s ease;  }
    #sp_menu_close span:before{transform:skewY(-45deg)}
    #sp_menu_close span:after{transform:skewY(45deg)}

     /* ------------------- */
    #sp_menuBk {
      /*display: none; position: fixed; z-index: 20; top: 0; width: 100%; height: 100vh;left: 0; background: rgba(0,0,0,0.6); */
    }
    #g-menu { width: 100%; }
    .g-menu{ flex-direction: column;}
    .g-menu li { margin-left: 0em;}
    #g-menu{ display: none; position: fixed; left: 0; top: 0; width: 100%; height:100vh; padding: 10%; background: #ccc; 
    -webkit-overflow-scrolling: touch; overflow-scrolling: touch; z-index: 9911 !important; overflow: scroll !important; }
    .g_nav__list li:not(:first-child) { margin-top: calc((30 / 360) * 100vw);}
    
    #other_sp { bottom: calc((30 / 360) * 100vw);}
    .shoplogo { margin-left: calc((30 / 360) * 100vw);}

}


/* footer
==========================================================*/
footer { background-color: #000; }
.footer_logo { width: 220px;}
footer .Inner1100 > .flex-jcs:first-child { margin-bottom: 85px;}
footer small { letter-spacing: 0;}
footer .instalogo { margin-left: 0;}
.footermenu {}
.footermenu li{ }
.footermenu li a{   }

#copyright{ line-height:1;  }
.backTop{ z-index:1; line-height:1; }
@media screen and (min-width: 1400px) {
    footer { padding: 100px 0 80px;}
    .footer_nav ul li:not(:first-child) { margin-left: 50px;}
    footer .flex-jcs:last-child { margin-top: 85px;}
}
@media screen and (max-width: 1399px) {
    .footer_nav li a{ font-size: 0.9em;}
}
@media screen and (min-width: 751px) and (max-width: 999px) {
    .footer_nav { width: 100%; margin-top: calc((85 / 1400) * 100vw);}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    footer { padding: calc((100 / 1400) * 100vw) 0 calc((80 / 1400) * 100vw);}
    .footer_nav ul li:not(:first-child) { margin-left: calc((50 / 1400) * 100vw);}
    footer .flex-jcs:last-child { margin-top: calc((85 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    footer { padding: calc((60 / 360) * 100vw) 0 calc((50 / 360) * 100vw);}
    .footer_logo { width: calc((180 / 360) * 100vw); text-align: center;}
    footer .flex-jcs { justify-content: center;}
    .footer_nav { width: 100%; margin-top: calc((40 / 360) * 100vw);}
    .footer_nav ul { justify-content: center;}
    .footer_nav ul li { width: 100%; text-align: center; }
    .footer_nav ul li:not(:first-child) { margin-top: calc((15 / 360) * 100vw) ;}
    footer .flex-jcs:last-child { margin-top: calc((40 / 360) * 100vw); flex-flow: column-reverse; text-align: center;}
    .footer_sns_box { justify-content: center; margin-bottom: calc((20 / 360) * 100vw); align-items: center;}
}

/*  common-layout
==========================================================*/

/* color */
.c_w, 
.c_w a{ color: #fff ;}
.c_bk{ color: #000;}
.c_99{ color: #999;}
.c_red{ color: #e20012;}

.bg_w{ background: #fff;}
.bg_fa{ background: #FAFAFA;}


	
/* ttl / fonts */

#h1outer { position: absolute; top: -100%; }

.h1_ttl{ }
.h2_ttl{  }
.h2_subttl{  }
.h2_jpttl{  }
.h2_enttl{  }
.h3_ttl{  }
.lead_ttl { }

/* html{font-size:14px;の時 */
/* .fn_size11 { font-size: 0.786em;}
.fn_size13 { font-size: 0.929em;}
.fn_size15 { font-size: 1.071em;}
.fn_size16 { font-size: 1.143em;}
.fn_size20 { font-size: 1.25em;}
.fn_size22 { font-size: 1.571em;}
.fn_size25 { font-size: 1.786em;}
.fn_size27 { font-size: 1.929em;}
.fn_size30 { font-size: 2.142em;}
.fn_size38 { font-size: 2.714em;}
.fn_size40 { font-size: 2.857em;} */

.fn_size11 { font-size: 11px;}
.fn_size13 { font-size: 13px;}
.fn_size15 { font-size: 15px;}
.fn_size16 { font-size: 16px;}
.fn_size20 { font-size: 20px;}
.fn_size21 { font-size: 21px;}
.fn_size22 { font-size: 22px;}
.fn_size25 { font-size: 25px;}
.fn_size27 { font-size: 27px;}
.fn_size30 { font-size: 30px;}
.fn_size38 { font-size: 38px;}
.fn_size40 { font-size: 40px;}

@media screen and (max-width: 750px) {
    .fn_size11 { font-size: calc((9 /360) * 100vw);}
    .fn_size13 { font-size: calc((11 /360) * 100vw);}
    .fn_size15 { font-size: calc((13 /360) * 100vw);}
    .fn_size16 { font-size: calc((14 /360) * 100vw);}
    .fn_size20 { font-size: calc((18 /360) * 100vw);}
    .fn_size21 { font-size: calc((19 /360) * 100vw);}
    .fn_size22 { font-size: calc((20 /360) * 100vw);}
    .fn_size25 { font-size: calc((22 /360) * 100vw);}
    .fn_size27 { font-size: calc((25 /360) * 100vw);}
    .fn_size30 { font-size: calc((28 /360) * 100vw);}
    .fn_size38 { font-size: calc((36 /360) * 100vw);}
    .fn_size40 { font-size: calc((38 /360) * 100vw);}
}



.fs46 { font-size: calc(46rem / 16); }
.fs40 { font-size: calc(40rem / 16); }
.fs34 { font-size: calc(34rem / 16); }
.fs33 { font-size: calc(33rem / 16); }
.fs30 { font-size: calc(30rem / 16); }
.fs29 { font-size: calc(29rem / 16); }
.fs26 { font-size: calc(26rem / 16); }
.fs25 { font-size: calc(25rem / 16); }
.fs23 { font-size: calc(23rem / 16); }
.fs24 { font-size: calc(24rem / 16); }
.fs22 { font-size: calc(22rem / 16); }
.fs20 { font-size: calc(20rem / 16); }
.fs19 { font-size: calc(19rem / 16); }
.fs18 { font-size: calc(18rem / 16); }
.fs16 { font-size: calc(16rem / 16); }
.fs15 { font-size: calc(15rem / 16); }
.fs14 { font-size: calc(14rem / 16); }
.fs12 { font-size: calc(12rem / 16); }
@media screen and (max-width: 750px){
    .fs46 { font-size: calc(46rem / 20); }
    .fs40 { font-size: calc(40rem / 20); }
    .fs34 { font-size: calc(34rem / 18); }
    .fs33 { font-size: calc(33rem / 18); }
    .fs30 { font-size: calc(30rem / 18); }
    .fs29 { font-size: calc(29rem / 18); }
    .fs26 { font-size: calc(26rem / 18); }

}


/* button */




/*  plugin
==========================================================*/


/* slider */
.scslide{visibility:hidden}
.scslide.slick-initialized{visibility:visible}


.vegas-animation-kenburns{animation:kenburns ease-out}
@keyframes kenburns {
0%{transform:scale(1.2)}
100%{transform:scale(1)}
}


/* aos */
[data-aos=fade-up]{transform:translate(0,20px)}
[data-aos=fade-left]{transform: translate3d(20px,0,0);}
[data-aos=fade-right]{transform: translate3d(20px,0,0);}
[data-aos=zoom-out]{transform:scale(1.05)}




/* 2: layout
----------------------------------------------------------------------------------------------*/




/* INDEX
-------------------*/
/* loading */
.page-index.fixed{ position:fixed ;}

.loading{position:fixed;z-index:9200;top:0;right:0;bottom:0;left:0;width:100%;height:100vh}
.loading img{animation:loadFlash 2.2s 1;opacity:0}
@keyframes loadFlash {
0%{opacity:0}
50%{opacity:1}
100%{opacity:0}
}

#loadwrap { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999;}
#loadwrap .loader { background: url(../images/animation/anime_bg.jpg) center center no-repeat; background-size: cover; width: 100%; height: 100%;}
#loadwrap .loader.open { animation-name: fadeOut; animation-fill-mode: forwards; animation-duration: 1s; animation-delay: 5s;}
@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
#loadwrap .loader > div.flex-aic { height: 100%;}
.index-1p-Iner { max-width: 400px; width: 100%; margin: 0 auto; box-sizing: border-box; text-align: center;}
@media screen and (max-height: 900px) {
    .index-1p-Iner { max-width: 360px;}
}
.index-1p-Iner ul li:first-child { width: 175px; margin: 0 auto 45px;}
.index-1p-Iner ul li:nth-child(2) { width: 78px; margin: 0 auto;}
.index-1p-Iner ul li:last-child { width: 230px; margin: 40px auto 0;}


/* #mainvisual */
#mainvisual { width: 100%; height: 100vh; height: 100dvh; height: 100dvh;}
.mainVisualVideo { position: relative; width: 100vw; /*height: 100dvh;*/ overflow: hidden; z-index: -1;}
.mainVisualVideo video { width: auto; height: auto; min-width: 100vw; min-height: 100vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.top_mainv { position: absolute; text-indent: -9999px; white-space: nowrap; overflow: hidden;}
.soundtoggle { bottom: 50px; right: 100px; color: #fff;}
.soundtoggle p { margin-left: 5px;}
.soundtoggle .soundtoggle_ttl { margin-right: 30px;}
.on, .off { -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;}
.on:hover, .off:hover { opacity: 0.6; cursor: pointer;}
.fv_txt { bottom: 50px; left: 100px;}
@media screen and (min-width: 861px) {
    .mainVisualVideo {  height: 100vh;}
}
@media screen and (max-width: 860px) {
    .mainVisualVideo { height: calc(100vh - 150px); height: calc(100dvh - 150px);}
    .mainVisualVideo video { height: auto; min-height: auto; overflow: hidden; width: 100%;}

    .soundtoggle { bottom: 50px; right: 5%;}
    .fv_txt { bottom: 90px; left: auto; right: 5%;}
}

 
/* zen
-------------------*/
.kasou_ttl { background-color: #000;}
/* #kasou #headerContainer { background: rgba(0,0,0,0.8);} */

.kasou_zen .kasou_ttl { background: none;}
.kasou_about .kasou_ttl { background: none;}

#kasou #Container {  margin-top: 120px;}

.kasou_bg_img { position: fixed; z-index: -2; width: 100%; height: calc(100vh - 120px); background-position: top; background-repeat: no-repeat; background-size: cover;}
.kasou_bg_img01 { position: fixed; z-index: -1; width: 100%; height: calc(100vh - 0px); background-position: top; background-repeat: no-repeat; background-size: cover;}
.kasou_zen .kasou_bg_img { background-image: url(../images/zen/zen_bg.jpg);}
.kasou_about .kasou_bg_img { background-image: url(../images/about/about_bg02.jpg); background-position: center bottom;}
.kasou_about .kasou_bg_img01 { background-image: url(../images/about/about_bg.jpg);}

.kasou_history .kasou_bg_img { background-image: url(../images/history/history_bg.jpg?a);}
.kasou_company .kasou_bg_img video { width: auto; height: 100vh;}


@media screen and (min-width: 1400px) {
    .kasou_ttl_h1 { padding-top: 100px; padding-bottom: 80px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    .kasou_ttl_h1 { padding-top: calc((100 / 1400) * 100vw); padding-bottom: calc((80 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #kasou #Container {  margin-top: 56px;}
    .kasou_ttl_h1 { padding-top: calc((50 / 360) * 100vw); padding-bottom: calc((50 / 360) * 100vw);}
    .kasou_bg_img { height: calc(100vh - 56px);}
}

/* #zen01 */
#zen01 { position: relative; padding-bottom: 75px;}
@media screen and (min-width: 1400px) {
    #zen01 h2.fn_size25 { margin-bottom: 30px;}
    #zen01 p.lh21 { margin-bottom: 120px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #zen01 {  padding-bottom: calc((75 / 1400) * 100vw);}
    #zen01 h2.fn_size25 { margin-bottom: calc((30 / 1400) * 100vw);}
    #zen01 p.lh21 { margin-bottom: calc((120 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #zen01 {  padding-bottom: calc((50 / 360) * 100vw);}
    #zen01 h2.fn_size25 { margin-bottom: calc((20 / 360) * 100vw);}
    #zen01 p.lh21 { margin-bottom: calc((70 / 360) * 100vw);}
}
/* #zen02 */
.zen_videowrap { position: relative; width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
/* .zen_videowrap::before { position: absolute; top: 0; left: 0; content: ""; width: 100%;} */
.zen_videowrap video { width: 100%; height: auto;}
/* .zen_videowrap video {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; transform-origin: center center; width: auto; height: aut min-width: 100 min-height: 100; background: url(../images/) no-repeat;  background-size: cove z-index:  top: 50 left: 50 transform: translate(-50%,-50%);} */
@media screen and (min-width: 1400px) {
    .zen_videowrap { height: 680px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px){
    .zen_videowrap { height: calc((680 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    /* .zen_videowrap { height: calc((340 / 360) * 100vw);} */
}


/* about
-------------------*/
/* #about01 */
#about01 { padding-bottom: 155px; /*background-image: url(../images/about/about_bg.jpg); background-position: top; background-repeat: no-repeat; background-size: cover;*/ }
.about01_ttlImg { margin: 0 auto;}
.about_en_subtitle { line-height: 1.4;}
.about_en_subtitle_span{ font-size: 1.18em;}
#about01 .about-8rInner {padding-bottom: 2.1em;}
#about01 .about-8rInner .about-8rtxt{border: 0.5px solid #fff; padding: 45px 60px;}
#about01 .about-8rInner .about-8rtxt span{ opacity: 0.85; padding-left: 0.2em; font-size: 0.95em;}

@media screen and (min-width: 1400px) {
    .about01_ttlImg { width: 430px;}
    #about01 p.fn_size27 { margin: 35px 0 145px;}
    #about01 p.lh21 { margin: 40px 0 100px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    .about01_ttlImg { width: 430px;}
    #about01 { padding-bottom: calc((155 / 1400) * 100vw);}
    #about01 p.fn_size27 { margin: calc((35 / 1400) * 100vw) 0 calc((145 / 1400) * 100vw);}
    #about01 p.lh21 { margin: calc((40 / 1400) * 100vw) 0 calc((100 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #about01 .about-8rInner .about-8rtxt { padding: calc((30 / 360) * 100vw) calc((45 / 360) * 100vw);}
    .about01_ttlImg { width: calc((220 / 360) * 100vw);}
    #about01 { padding-bottom: calc((50 / 360) * 100vw);}
    #about01 p.fn_size27 { margin: calc((20 / 360) * 100vw) 0 calc((80 / 360) * 100vw); font-size: calc((17 / 360) * 100vw);}
    #about01 p.lh21 { margin: calc((25 / 360) * 100vw) 0 calc((60 / 360) * 100vw);}
}
/* #about02 */
.about_imgwrap{background-image: url(/assets/images/about/about01_bg.jpg); background-size: 100%; height: calc((680 / 1400) * 100vw);}
.about02_text{margin: 0 auto; display: flex; flex-wrap: nowrap; justify-content: space-between; width: 90%; padding-top: calc((100 / 1400) * 100vw);}
.about_icon{width: 5%;}
.about02_h1{right: 0; writing-mode: vertical-rl;}
@media screen and (max-width: 1050px) {
    .about_imgwrap{background-size: cover; height: 60vw; background-repeat: no-repeat; background-position: center;}
}
@media screen and (max-width: 1050px) {
    .about_icon{ width: 10%;}
}
@media screen and (max-width: 750px) {
    .about02_text .fns20{ font-size: calc((12.5 / 360) * 100vw) ;}
}



/* #about03 */
.about_video_box{width: 100%; height: 100%; background-color: rgba(0,0,0,0.5)}
.about_videowrap {width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
/* .about_videowrap::before { position: absolute; top: 0; left: 0; content: ""; width: 100%;} */
.about_videowrap video {z-index: -1; width: 100%; height: auto;}
@media screen and (min-width: 1400px) {
    .about_videowrap { height: 48vw;}
    /* .about_videowrap::before { padding-top: 56.25%;} */
}
@media screen and (max-width: 1400px) {
    .about_videowrap video {width: 250vw;}
    .videowrap_en video {width: 320vw;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    .about_videowrap { height: calc((680 / 1400) * 100vw);}
    .about_videowrap::before { padding-top: calc((680 / 1400) * 100vw);}
}



/* #about04 */
#about04 { }
#about04 h2 + p { letter-spacing: 0.2em; line-height: 2.3;}
@media screen and (min-width: 1400px) {
    #about04 { padding: 180px 0 0;}
    #about04 h2 + p { padding: 50px 0 150px}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #about04 { padding: calc((180 / 1400) * 100vw) 0 0;}
    #about04 h2 + p { padding: calc((50 / 1400) * 100vw) 0 calc((150 / 1400) * 100vw)}
}
@media screen and (max-width: 750px) {
    #about04 { padding: calc((100 / 360) * 100vw) 0 0;}
    #about04 h2 + p { padding: calc((30 / 360) * 100vw) 0 calc((80 / 360) * 100vw)}
}

/* #about05 */
#about05 {}
.waterQuality_left,
.waterQuality_right { width: 50%;}
.waterQuality h2 span { display: block; font-size: 13px;}
.waterQuality dl dt,
.waterQuality dl dd { margin-bottom: 5px;}
.waterQuality dl:first-of-type { position: relative;}
.waterQuality dl:first-of-type::after { position: absolute; bottom: 0; left: 0; content: ""; width: 3em; height: 0.5px; background-color: #fff;}
.waterQuality dl:first-of-type dt { width: 90px; padding-right: 5px;}
.waterQuality dl:first-of-type dd { width: calc(100% - 90px);}
.en .waterQuality dl:first-of-type dt { width: 100%;}
.en .waterQuality dl:first-of-type dd { width: 100%; margin-bottom: 15px;}
.waterQuality p { }
.waterQuality dl:last-of-type dt { width: 195px; padding-right: 5px;}
.waterQuality dl:last-of-type dd { width: calc(100% - 195px);}
.en .waterQuality dl:last-of-type dt { width: 100%;}
.en .waterQuality dl:last-of-type dd { width: 100%; margin-bottom: 15px;}
.about05_h2{ border-bottom: 1px solid #fff; max-width: 800px; margin: 0 auto;}
@media screen and (min-width: 1400px) {
    #about05 { padding: 50px 0 180px;}
    .waterQuality_left_img { width: 200px;}
    .waterQuality h2 span { margin: 15px 0 50px;}
    .waterQuality dl dt,
    .waterQuality dl dd { margin-bottom: 5px;}
    .waterQuality dl:first-of-type { padding-bottom: 45px;}
    .waterQuality p { margin: 45px 0 30px;}
}
@media screen and (max-width: 850px) {
    .about05_h2 .fn_size25{font-size: calc((18 /360) * 100vw);}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #about05 { padding: calc((50 / 1400) * 100vw) 0 calc((180 / 1400) * 100vw);}
    .waterQuality_left_img { width: calc((200 / 1400) * 100vw); margin: 0 auto;}
    .waterQuality h2 span { margin: calc((15 / 1400) * 100vw) 0 calc((50 / 1400) * 100vw);}
    .waterQuality dl dt,
    .waterQuality dl dd { margin-bottom: 5px;}
    .waterQuality dl:first-of-type { padding-bottom: calc((45 / 1400) * 100vw);}
    .waterQuality p { margin: calc((45 / 1400) * 100vw) 0 calc((30 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #about05 { padding: calc((30 / 360) * 100vw) 0 calc((90 / 360) * 100vw);}
    /* #about05 .side_padding100 { padding: 0px calc((30 / 360) * 100vw);} */
    .waterQuality_left,
    .waterQuality_right { width: 100%;}
    .waterQuality_right { margin-top: calc((30 / 360) * 100vw); display: flex; justify-content: center;}
    .waterQuality_right > div { max-width: 550px; width: 100%;} 
    .waterQuality_left_img { width: calc((110 / 360) * 100vw); margin: 0 auto;}
    .waterQuality h2 span { margin: calc((10 / 360) * 100vw) 0 calc((30 / 360) * 100vw);}
    .waterQuality dl dt,
    .waterQuality dl dd { margin-bottom: 5px;}
    .waterQuality dl:first-of-type dt { width: calc((55 / 360) * 100vw);}
    .waterQuality dl:first-of-type dd { width: calc(100% - ((55 / 360) * 100vw));}
    .waterQuality dl:first-of-type { padding-bottom: calc((25 / 360) * 100vw);}
    .waterQuality p { margin: calc((25 / 360) * 100vw) 0 calc((20 / 360) * 100vw);}
}

/* #about06 */
#about06 { }
#about06 .circle { border: 0.5px solid #fff;}
#about06 h2 { border-bottom: 0.5px solid #fff;}
@media screen and (min-width: 1400px) {
    #about06 { padding: 30px 0 70px;}
    #about06 .circle { padding: 45px 60px;}
    #about06 h2 { padding-bottom: 25px; margin-bottom: 25px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #about06 { padding: calc((30 / 1400) * 100vw) 0 calc((70 / 1400) * 100vw);}
    #about06 .circle { padding: calc((45 / 1400) * 100vw) calc((60 / 1400) * 100vw);}
    #about06 h2 { padding-bottom: calc((25 / 1400) * 100vw); margin-bottom: calc((25 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #about06 { padding: calc((20 / 360) * 100vw) 0 calc((40 / 360) * 100vw);}
    #about06 .circle { padding: calc((22 / 360) * 100vw) calc((30 / 360) * 100vw);}
    #about06 h2 { padding-bottom: calc((18 / 360) * 100vw); margin-bottom: calc((18 / 360) * 100vw); font-size: ;}
}
@media screen and (max-width: 420px) {
    #about06 h2 { font-size: calc((16 / 360) * 100vw);}
}


/* history
-------------------*/
.kasou_history .kasou_ttl { background-color: unset;}
/* #history01 */
#history01 { }
#history01 h2 { text-indent: -0.5em; font-size: 40px;}
.en #history01 h2 { text-indent: unset;}
#history01 p { display: block; letter-spacing: 0.2em;}
@media screen and (min-width: 1400px) {
    #history01 p {  width: /*571*/605px;  margin: 80px 0 0 65px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) { 
    #history01 p {  width: calc((605 / 1400) * 100vw); margin: calc((80 / 1400) * 100vw) 0 0 calc((65 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #history01 p { width: 100%;  margin: calc((40 / 360) * 100vw) 0 0 0;}
    #history01 h2 { font-size: calc((26 / 360) * 100vw);}
}

/* #historyMap */
#historyMap .poab { z-index: 1;}
@media screen and (min-width: 1400px) {
    #historyMap .poab {  width: 775px; top: -320px; right: 10px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #historyMap .poab {  width: calc((775 / 1400) * 100vw); top: calc((-320 / 1400) * 100vw); right: calc((100 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #historyMap .poab {  width: 90%; top: calc((10 / 360) * 100vw); right: calc((20 / 360) * 100vw);}
}

/* #history02 */
#history02 { z-index: -1;}
.historyImg01,
.historyImg02 {}
.historyImg03 {}
#history02 .flex-jcs { flex-flow: row-reverse;}
.historyImg01 {}
@media screen and (min-width: 1400px) {
    #history02 { padding: 310px 0 130px;}
    .historyImg01,
    .historyImg02 { max-width: 550px;}
    .historyImg02 { margin: -150px 0 0 0;}
    .historyImg03 { max-width: 460px; margin: 115px 0 0 210px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #history02 { padding: calc((310 / 1400) * 100vw) 0 calc((130 / 1400) * 100vw);}
    .historyImg01,
    .historyImg02 { max-width: calc((550 / 1400) * 100vw);}
    .historyImg02 { margin: calc((-150 / 1400) * 100vw) 0 0 0;}
    .historyImg03 { max-width: calc((460 / 1400) * 100vw); margin: calc((115 / 1400) * 100vw) 0 0 calc((210 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #history02 { padding: calc((360 / 360) * 100vw) 0 calc((70 / 360) * 100vw);}
    .historyImg01,
    .historyImg02 { max-width: calc((170 / 360) * 100vw);}
    .historyImg02 { margin: calc((-70 / 360) * 100vw) 0 0 0;}
    .historyImg03 { max-width: calc((140 / 360) * 100vw); margin: calc((40 / 360) * 100vw) 0 0 calc((30 / 360) * 100vw);}
}

/* #history03 */
#history03 { padding-bottom: 155px; /*background-image: url(../images/about/about_bg.jpg); background-position: top; background-repeat: no-repeat; background-size: cover;*/ }
.history03_ttlImg { margin: 0 auto;}
#history03 .history-8rInner {padding-bottom: 2.1em;}
#history03 .history-8rInner .history-8rtxt{border: 0.5px solid #fff; padding: 45px 60px;}
#history03 .history-8rInner .history-8rtxt span{ opacity: 0.85; padding-left: 0.2em; font-size: 0.95em;}

@media screen and (min-width: 1400px) {
    .history03_ttlImg { width: 430px;}
    #history03 p.fn_size27 { margin: 35px 0 145px;}
    #history03 p.lh21 { margin: 40px 0 100px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    .history03_ttlImg { width: 430px;}
    #history03 { padding-bottom: calc((155 / 1400) * 100vw);}
    #history03 p.fn_size27 { margin: calc((35 / 1400) * 100vw) 0 calc((145 / 1400) * 100vw);}
    #history03 p.lh21 { margin: calc((40 / 1400) * 100vw) 0 calc((100 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #history03 .about-8rInner .about-8rtxt { padding: calc((30 / 360) * 100vw) calc((45 / 360) * 100vw);}
    .history03_ttlImg { width: calc((220 / 360) * 100vw);}
    #history03 { padding-bottom: calc((50 / 360) * 100vw);}
    #history03 p.fn_size27 { margin: calc((20 / 360) * 100vw) 0 calc((80 / 360) * 100vw); font-size: calc((17 / 360) * 100vw);}
    #history03 p.lh21 { margin: calc((25 / 360) * 100vw) 0 calc((60 / 360) * 100vw);}
}

/* company
-------------------*/
/* #company01 */
#company01 { background-color: #000;}
.company01_right { border-top: 0.5px solid #fff;}
@media screen and (min-width: 1400px) {
    .company01_left { width: 130px;}
    .company01_right { width: calc(100% - 130px); padding: 45px 0; margin-top: 13px;}
    .en .company01_left { width: 190px;}
    .en .company01_right { width: calc(100% - 190px);}

    .company01_right dt,
    .company01_right dd { margin-bottom: 30px;}
    .company_p{ margin-bottom: 50px;}
    #company01 dl dd { width: calc(100% - 150px);}
    #company01 dl dt { width: 150px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    .company01_right dt,
    .company01_right dd { margin-bottom: calc((30 / 1400) * 100vw);}
    .company_p{margin-bottom: calc((50 / 1400) * 100vw);}
    #company01 dl dt { width: /*calc((150 / 1400) * 100vw)*/150px;}
    #company01 dl dd { width: /*calc(100% - ((150 / 1400) * 100vw))*/calc(100% - 150px);}
}
@media screen and (min-width: 861px) and (max-width: 1399px) {
    .company01_left { width: 130px;}
    .company01_right { width: calc(100% - 130px);  padding: calc((45 / 1400) * 100vw) 0; margin-top: calc((13 / 1400) * 100vw); padding: 45px 0; margin-top: 13px;}
    .en .company01_left { width: 190px;}
    .en .company01_right { width: calc(100% - 190px);}
}
@media screen and (min-width: 751px) and (max-width: 860px) { 
    .company01_left { width: 100%;}
    .company01_right { width: 100%; padding: calc((45 / 1400) * 100vw) 0; margin-top: calc((13 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    .company01_right { width: 100%; padding: calc((25 / 360) * 100vw) 0; margin-top: calc((8 / 360) * 100vw); margin-bottom: 20px;}
    .company01_right .company_url{font-size: calc((11 /360) * 100vw);}
    #company01 dl dt { width: 100%;}
    #company01 dl dd { width: 100%;}
    #company01 dl dd:not(:last-child) { margin-bottom: calc((15 / 360) * 100vw);}
    .company_p{ margin-bottom: calc((40 / 360) * 100vw);}
    
}

/* #company02 */
#company02 { background-color: #000;}
#company02 .batsu::before,
#company02 .batsu::after { position: absolute; top: 50%; left: 50%; content: ""; width: 1px; background-color: #fff; }
#company02 .batsu::before { transform: translate(-50%, -50%) rotate(45deg);}
#company02 .batsu::after { transform: translate(-50%, -50%) rotate(-45deg);}
@media screen and (min-width: 1400px) {
    #company02 { padding: 165px 0 210px;}
    #company02 .company02_logoimg01 { width: 355px;}
    #company02 .company02_logoimg02 { width: 380px;}
    #company02 .batsu { width: calc(100% - (355px + 380px));}
    #company02 .batsu::before,
    #company02 .batsu::after { height: 80px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #company02 { padding: calc((165 / 1400) * 100vw) 0 calc((210 / 1400) * 100vw);}
    #company02 .company02_logoimg01 { width: calc((355 / 1400) * 100vw);}
    #company02 .company02_logoimg02 { width: calc((380 / 1400) * 100vw);}
    #company02 .batsu { width: /*calc(100% - (((355 / 1400) * 100vw) + ((380 / 1400) * 100vw)))*/ calc((170 / 1400) * 100vw);}
    #company02 .batsu::before,
    #company02 .batsu::after { height: calc((80 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #company02 { padding: calc((85 / 360) * 100vw) 0 calc((110 / 360) * 100vw);}
    #company02 .company02_logoimg01 { width: calc((180 / 360) * 100vw);}
    #company02 .company02_logoimg02 { width: calc((190 / 360) * 100vw);}
    #company02 .batsu { width: 100%; height: calc((70 / 360) * 100vw);}
    #company02 .batsu::before,
    #company02 .batsu::after { height: calc((40 / 360) * 100vw);}
}

/* #company03 */
#company03 { background-color: #000;}
.company03_right h2 span { font-size: 20px;}
.company03_right h2 { line-height: 1;}
.company03_right p { line-height: 2.2;}
.company03_link { text-align: right; margin-bottom: 0 !important; letter-spacing: 0.1em; line-height: 1 !;}
.company03_link a { position: relative; border-bottom: 0.5px solid #fff; padding-bottom: 5px;}
.company03_link a::after { position: absolute; top: 15%; right: 0; content: ""; background-image: url(../images/common/logo_link.svg); background-position: center; background-repeat: no-repeat; background-size: cover; width: 14px; height: 10px;}
@media screen and (min-width: 1400px) {
    #company03 { padding-bottom: 160px;}
    .company03_left { width: 400px; margin-right: 85px;}
    .company03_right { width: calc(100% - 485px);}
    .company03_right h2 span { margin-left: 40px;}
    .company03_right p.fn_size13 { margin: 25px 0;}
    .company03_link a { padding-right: 30px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #company03 { padding-bottom: calc((160 / 1400) * 100vw);}
    .company03_left { width: calc((400 / 1400) * 100vw); margin-right: calc((85 / 1400) * 100vw);}
    .company03_right { width: calc(100% - ((485 / 1400) * 100vw));}
    .company03_right h2 span { margin-left: calc((40 / 1400) * 100vw);}
    .company03_right p.fn_size13 { margin: calc((25 / 1400) * 100vw) 0;}
    .company03_link a { padding-right: calc((30 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #company03 { padding-bottom: calc((80 / 360) * 100vw);}
    .company03_left { width: 100%; margin-bottom: calc((42 / 360) * 100vw);}
    .company03_right { width: 100%;}
    .company03_right h2 span { margin-left: calc((20 / 360) * 100vw);}
    .company03_right p.fn_size13 { margin: calc((12 / 360) * 100vw) 0;}
    .company03_link a { padding-right: calc((15 / 360) * 100vw);}
}

/* #company04 */
#company04 { width: 100%;}
@media screen and (min-width: 1400px) {
    #company04 { height: 400px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #company04 { height: calc((400 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #company04 { height: calc((200 / 360) * 100vw);}
}

/* #company05 */
#company05 { background-color: #000;}
#company05 dl dt,
#company05 dl dd { border-top: 0.5px solid #fff;}
#company05 dl dt:nth-last-child(2),
#company05 dl dd:last-child {  border-bottom: 0.5px solid #fff;}
@media screen and (min-width: 1400px) {
    #company05 { padding: 130px 0 30px;}
    #company05 dl { margin-top: 45px;}
    #company05 dl dt,
    #company05 dl dd { padding: 30px 0;}
    #company05 dl dt { width: 90px; padding-right: 10px;}
    #company05 dl dd { width: calc(100% - 90px);}

}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #company05 { padding: calc((130 / 1400) * 100vw) 0 calc((30 / 1400) * 100vw);}
    #company05 dl { margin-top: calc((45 / 1400) * 100vw);}
    #company05 dl dt,
    #company05 dl dd { padding: calc((30 / 1400) * 100vw) 0;}
    #company05 dl dt { width: calc((90 / 1400) * 100vw); padding-right: calc((10 / 1400) * 100vw);}
    #company05 dl dd { width: calc(100% - ((90 / 1400) * 100vw));}
}
@media screen and (max-width: 750px) {
    #company05 { padding: calc((65 / 360) * 100vw) 0 calc((15 / 360) * 100vw);}
    #company05 dl { margin-top: calc((22 / 360) * 100vw);}
    #company05 dl dt,
    #company05 dl dd { padding: calc((15 / 360) * 100vw) 0;}
    #company05 dl dt { width: calc((50 / 360) * 100vw); padding-right: calc((5 / 360) * 100vw);}
    #company05 dl dd { width: calc(100% - ((50 / 360) * 100vw));}
}


/* media
-------------------*/
.news-not-wrap .news-not{display: none;}
.media-not-wrap .media-not{display: none;}
/* #media01 */
.media01_right p { line-height: 2.1;}
@media screen and (min-width: 1400px) {
    .media01_left { width: 90px;}
    #media01 .flex:last-child { margin-top: 120px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    .media01_left { width: calc((90 / 1400) * 100vw);}
    #media01 .flex:last-child { margin-top: calc((120 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    .media01_left { width: 100%;}
    .media01_right p { line-height: 1.5; margin-top: calc((15 / 360) * 100vw);}
    #media01 .flex:last-child { margin-top: calc((60 / 360) * 100vw);}
}

/* #media02 */
#media02 ul { margin-right: -7%;}
#media02 ul li { width: calc(79% / 3); margin-right: 7%;}
#media02 ul li a { cursor: pointer;}
@media screen and (min-width: 1400px) {
    #media02 { padding: /*14*/0/*px*/ 0 15px;}
    #media02 h2 { margin-bottom: 50px;}
    #media02 ul li {  margin-bottom: 70px;}
    #media02 ul li p { margin-top: 25px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #media02 { padding: /*calc((140 / 1400) * 100vw)*/ 0 0 calc((15 / 1400) * 100vw);}
    #media02 h2 { margin-bottom: calc((50 / 1400) * 100vw);}
    #media02 ul li {  margin-bottom: calc((70 / 1400) * 100vw);}
    #media02 ul li p { margin-top: calc((25 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #media02 { padding: /*calc((70 / 360) * 100vw)*/ 0 0 calc((7 / 360) * 100vw);}
    #media02 h2 { margin-bottom: calc((25 / 360) * 100vw);}
    #media02 ul li { width: calc(86% / 2); margin-bottom: calc((35 / 360) * 100vw);}
    #media02 ul li p { margin-top: calc((15 / 360) * 100vw);}
}

/* #modal */
.modal { width: 100%; height: 100vh; height: 100dvh; display: none; position: fixed; top: 0; left: 0; z-index: 9999;}
.modal::before {width: 100%; height: 100%; content: ""; background: rgba(0,0,0,0.9); position: fixed; top: 0; left: 0; z-index: 2;}
.modal_content { position: relative; z-index: 2; color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;  width: 100%; height: 100%; padding: 5% 0;  box-sizing: border-box; overflow-y: auto; }
.modal_bg{width: 100%; height: 100vh; height: 100dvh; position: fixed;top: 0; left: 0; z-index: 1;}
.modal_content .w70{ position: relative; z-index: 2; }
.modal_content .modal_content_inner { height: 100%; margin: 0 auto  }
.modal_content_youso { width: auto; height: 75%;}
.modal_content .modal_content_inner .imgwrap { text-align: center; line-height: 0;}
.modal_grid{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 5px; grid-template-rows: repeat(2, 1fr); margin: 0 auto; justify-content: space-between; max-width: 400px;}
.modal_grid_item{width: 100%; height: 100%;}
.modal_grid_item img{width: 100%; height: 100%; object-fit: cover;}
.light_mb{margin-bottom: 85px !important;}

.popclose { width: 30px; height: 30px; cursor: pointer; position: fixed; top: 20px; right: 20px; z-index: 3; }
.popclose::before, .popclose::after { content: ''; width: 100%; height: 0.5px; display: block; background-color: #fff; position: absolute; top: 12px; right: -3px;}
.popclose::before { transform: rotate(45deg);}
.popclose::after { transform: rotate(-45deg);}

@media screen and (min-width: 1400px) {
    .modal_content .w70{ max-width: 750px; box-sizing: border-box; }
    .modal_content .modal_content_inner p { margin-bottom: 45px;}
    .modal_content .modal_content_inner .imgwrap { margin-bottom: 30px;}
}
@media screen and (min-width: 861px) and (max-width: 1399px) {
    .modal_content .w70 { max-width: calc((750 / 1400) * 100vw); padding: 0 calc((40 / 1400) * 100vw);}
    .modal_content .modal_content_inner p { margin-bottom: calc((45 / 1400) * 100vw);}
    .modal_content .modal_content_inner .imgwrap { margin-bottom: calc((30 / 1400) * 100vw);}
    .light_mb{margin-bottom: calc((85 / 1400) * 100vw) !important;}
}
@media screen and (min-width: 751px) and (max-width: 860px) {
    .modal_content .w70 { max-width: calc((750 / 1400) * 100vw); width: 85%; padding: calc((50 / 1400) * 100vw) 0 calc((45 / 1400) * 100vw);}
    .modal_content .modal_content_inner p { margin-bottom: calc((45 / 1400) * 100vw);}
    .modal_content .modal_content_inner .imgwrap { margin-bottom: calc((30 / 1400) * 100vw);}
    .light_mb{margin-bottom: calc((75 / 1400) * 100vw) !important;}
}
@media screen and (max-width: 750px) {
    .modal_content {padding: 8% 0;  }
    .modal_content .w70 { width: 85%; padding: calc((25 / 360) * 100vw) 0 calc((22 / 360) * 100vw);}
    .modal_content .modal_content_inner p { margin-bottom: calc((25 / 360) * 100vw); font-size: 12px;}
    .modal_content .modal_content_inner p.fs26{font-size: 17px;}
    .modal_content .modal_content_inner .imgwrap { margin-bottom: calc((15 / 360) * 100vw);}
    .light_mb{margin-bottom: 60px !important;}
    
} 
/* @media screen and (min-width: 1400px) {
    .modal_content { max-width: 750px; width: 70%; padding: 0 40px;}
    .modal_content .modal_content_inner p { margin-top: 30px;}
}
@media screen and (min-width: 861px) and (max-width: 1399px) {
    .modal_content { max-width: calc((750 / 1400) * 100vw); width: 70%; padding: 0 calc((40 / 1400) * 100vw);}
    .modal_content .modal_content_inner p { margin-top: calc((30 / 1400) * 100vw);}
}
@media screen and (min-width: 751px) and (max-width: 860px) {
    .modal_content { max-width: calc((750 / 1400) * 100vw); width: 85%; padding: calc((50 / 1400) * 100vw) 0 calc((45 / 1400) * 100vw);}
    .modal_content .modal_content_inner p { margin-top: calc((30 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    .modal_content { width: 85%; padding: calc((25 / 360) * 100vw) 0 calc((22 / 360) * 100vw);}
    .modal_content .modal_content_inner p { margin-top: calc((15 / 360) * 100vw); font-size: 12px;}
} */


/* news
-------------------*/
/* #news01 */
#news01 ul { margin-right: calc(10% / -2);}
#news01 ul li { width: 45%; margin-right: calc(10% / 2);}
#news01 ul li a { cursor: pointer;}
@media screen and (min-width: 1400px) {
    #news01 ul li { margin-bottom: 90px;}
    #news01 ul li p { margin-top: 30px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    #news01 ul li { margin-bottom: calc((90 / 1400) * 100vw);}
    #news01 ul li p { margin-top: calc((30 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #news01 ul li { width: 100%; margin-bottom: calc(20% / 2);}
    #news01 ul li p { margin-top: calc((15 / 360) * 100vw);}
}

/* .kasou_news .modal_content { overflow: hidden; overflow-y: scroll; height: 80%;}
.kasou_news .popclose { bottom: 3%;} */
@media screen and (min-width: 1400px) {
    .kasou_news .modal_ttl { margin-bottom: 60px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    .kasou_news .modal_ttl { margin-bottom: calc((60 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    .kasou_news .modal_ttl { margin-bottom: calc((30 / 360) * 100vw); font-size: 23px;}
    /* .kasou_news .popclose { bottom: 0;} */
}


/* CONTACT 
==========================================================*/
/* #contact01 */
#contact01 span.c_red { color: #a4272d;}
.table-list { width: 100%; display: flex; align-items: center;}
.table-list dt { width: 170px;}
.table-list dd { width: calc(100% - 170px);}
.input-area { width: 100%; font-size: 11px; border: none; }
.address_wrap .table-list:first-child dd { width: 140px;}
.address_wrap #postal-code { width: 115px;}
.address_wrap .table-list:first-child dd:last-child  { width: calc(100% - (170px + 140px));}
textarea { width: 100%; height: 170px; font-size: 11px; border: none; }
.textareaWrap dl { align-items: flex-start;}
.textareaWrap dl dt { padding-top: 5px;}

.PPlinkWrap{ margin-bottom: 70px;}
.PPlinkWrap .elm01{ font-size: 1.05em; margin-bottom:3em;}
.PPlinkWrap .elm02{ opacity: 0.7; font-size: 0.9em;}
.PPlink a { text-decoration: underline;}
input[type="checkbox"] { display: none;}
.checkbox label { padding-left: 25px; position: relative; cursor: pointer;}
.checkbox label::before, 
.radio label::before { content: ""; width: 15px; height: 15px; background-color: #fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%); border-radius: 50%; -webkit-transition: all .4s; transition: all .4s;}
.checkbox label::after, 
.radio label::after { content: ""; width: 7px; height: 7px; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); border-radius: 50%; background-color: #000000; -webkit-transition: all .4s; transition: all .4s; opacity: 0;}
input[type="checkbox"]:checked + .check::after { opacity: 1;}

#contact01 .btn span { padding-right: 0; display: inline-block; text-align: center; align-items: center; position: relative;}
#contact01 .btn #submit { cursor: pointer; text-align: center; display: inline-block; background-color: rgba(0,0,0,0); border-radius: 999px; border: 1px solid #fff; color: #fff; font-size: 15px; letter-spacing: 0.15em; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;}
/* form */
input, button, textarea, select { margin: 0; padding: 0; background: #fff; border: none; border-radius: 3px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.error_box { display: none; width: 100%; text-align: center; box-sizing: border-box; border: 1px solid #d00; color: #d00; line-height: 2;}

@media screen and (min-width: 1400px) {
    .contact_area { margin-top: 90px;}
    .table-list { margin-bottom: 50px;}
    .input-area { height: 40px; padding: 0 20px;}
    textarea { padding: 20px !important;}

    .checkbox { margin: 20px 0 10px;}

    #contact01 .btn #submit { min-width: 230px; padding: 20px;}

    .error_box { padding: 25px 20px; margin-bottom: 70px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    .contact_area { margin-top: calc((90 / 1400) * 100vw);}
    .table-list { margin-bottom: calc((50 / 1400) * 100vw);}
    .input-area { height: 40px; padding: 0 calc((20 / 1400) * 100vw);}
    textarea { padding: calc((20 / 1400) * 100vw) !important;}

    .checkbox { margin: calc((20 / 1400) * 100vw) 0 calc((70 / 1400) * 100vw);}

    #contact01 .btn #submit { min-width: calc((230 / 1400) * 100vw); padding: calc((20 / 1400) * 100vw);}

    .error_box { padding: calc((25 / 1400) * 100vw) calc((20 / 1400) * 100vw); margin-bottom: calc((70 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    .contact_area { margin-top: calc((45 / 360) * 100vw);}
    .table-list { margin-bottom: calc((25 / 360) * 100vw); flex-wrap: wrap;}
    .table-list dt { width: 100%; margin-bottom: calc((5 / 360) * 100vw);}
    .table-list dd { width: 100%;}
    .input-area { height: calc((35 / 360) * 100vw); padding: 0 calc((10 / 360) * 100vw); font-size: 16px;}
    textarea { height: calc((85 / 360) * 100vw); padding: calc((10 / 360) * 100vw) !important; font-size: 16px;}
    .address_wrap .table-list:first-child dd { width: calc((70 / 360) * 100vw);  margin-bottom: calc((5 / 360) * 100vw);}
    .address_wrap .table-list:first-child dd:last-child  { width: 100%;}

    .checkbox { margin: calc((10 / 360) * 100vw) 0 calc((35 / 360) * 100vw);}

    #contact01 .btn #submit { min-width: calc((125 / 360) * 100vw); padding: calc((10 / 360) * 100vw);}

    .error_box { padding: calc((12 / 360) * 100vw) calc((10 / 360) * 100vw); margin-bottom: calc((35 / 360) * 100vw);}
}


/* 確認画面
-------------------*/
#formWrap{margin: 150px auto ;}
#formWrap h3{font-size: 1.4em; text-align: center; margin-block-end: 10px;}
.formTable{width: 100%;}
#formWrap tr,#formWrap tbody{width: 100%;}
#formWrap tr{display: flex; margin-block-end: 40px;}
#formWrap th{width: 200px;}
#formWrap td{width: calc(100% - 200px); color: #fff;}
#formWrap .btn span { padding-right: 0; display: inline-block; text-align: center; align-items: center; position: relative;}
#formWrap .btn input[type="button"]{margin-top: 20px;}
#formWrap .btn input[type="submit"],#formWrap .btn input[type="button"]{ cursor: pointer; text-align: center; display: inline-block; background-color: rgba(0,0,0,0); border-radius: 999px; border: 1px solid #fff; color: #fff; font-size: 15px; letter-spacing: 0.15em; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;}

@media screen and (min-width: 1400px) {
    #formWrap .btn input[type="submit"],#formWrap .btn input{ min-width: 230px; padding: 20px;}
}

@media screen and (min-width: 751px) and (max-width: 1399px) {
    #formWrap .btn input[type="submit"],#formWrap .btn input{ min-width: calc((230 / 1400) * 100vw); padding: calc((20 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    #formWrap{margin: 80px auto ;}
    #formWrap tr{flex-flow: column; min-height: 42px; margin-block-end: 20px;}
    #formWrap th{width: 100%; font-weight: bold;}
    #formWrap td{width: 100%;}
    #formWrap .btn input[type="submit"],#formWrap .btn input{ min-width: calc((125 / 360) * 100vw); padding: calc((10 / 360) * 100vw);}
}

/* privacy policy
-------------------*/
.privacy_message { border-bottom: 0.5px solid #fff;}
.privacy_main a { text-decoration: underline;}
@media screen and (min-width: 1400px) {
    .privacy_main { margin-top: 50px;}
    .privacy_message { padding-bottom: 60px;}
    .privacy_main dd { margin-bottom: 30px;}
}
@media screen and (min-width: 751px) and (max-width: 1399px) {
    .privacy_message { padding-bottom: calc((60 / 1400) * 100vw);}
    .privacy_main { margin-top: calc((50 / 1400) * 100vw);}
    .privacy_main dd { margin-bottom: calc((30 / 1400) * 100vw);}
}
@media screen and (max-width: 750px) {
    .privacy_message { padding-bottom: calc((30 / 360) * 100vw);}
    .privacy_main { margin-top: calc((25 / 360) * 100vw);}
    .privacy_main dd { margin-bottom: calc((15 / 360) * 100vw);}
}

/* 
----------------------------------------------------------------------------------------------*/