@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400&family=Noto+Serif+JP:wght@300;400;500&display=swap');

/* ====================================
	HACK
===================================== */
body{ background: #000;}
#globalHeader{ position: fixed; width: 100%; z-index: 99; background-color: #fff; -webkit-transition: all 0.4s; transition: all 0.4s;}
#globalHeader.zheadhide{ transform: translateY(-150px);}

.spelan__main h1,.spelan__main h2,.spelan__main h3,.spelan__main h4,
.spelan__main dl,.spelan__main  ol,.spelan__main  ul,
.spelan__main dt, .spelan__main dd, .spelan__main li{ font-weight: 300; margin: 0;}
.spelan__main a{ text-decoration: none;}
.spelan__main img { -ms-interpolation-mode: bicubic;  }
.spelan__main a:focus,
.spelan__main img:focus,
.spelan__main :focus{ outline: 0; }

/* ====================================
	共通スタイル
 ==================================== */

 ::-moz-selection { background: #a09367; color: #fff;}
 ::selection { background: #a09367; color: #fff;}
 
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on .7s ease-out forwards; display: inline-block; }
@keyframes text_anime_on {
	0% {opacity:0; transform: translate(0,15px);}
	100% {opacity:1; transform: translate(0,0px);}
}

/* 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)}


.js-cursor__main{pointer-events:none;position:fixed;top:0;left:0;width:10px;height:10px;background:#000;border-radius:50%;z-index:10001;opacity:0;transition:opacity .2s}
.is-moved .js-cursor__main{opacity:1}
.is-outside .js-cursor__main{opacity:0}
.js-cursor__option{pointer-events:none;position:fixed;top:0;left:0;width:40px;height:40px;border-radius:50%;background:#ddd;z-index:10000;opacity:0;transition:opacity .2s 0.2s,background .2s}
.is-moved .js-cursor__option{opacity:.5}
.is-outside .js-cursor__option{opacity:0}
.is-hover .js-cursor__option{background:#e8e8e8}
.l-wrapper{max-width:700px;width:100%;height:1200px;margin:0 auto;padding-top:60px}
.c-button{display:flex;justify-content:center;align-items:center;width:300px;height:50px;background:#999;margin-bottom:40px;color:#fff;font-weight:700}
.c-button:hover{background:#666}

/* .is-hover-swiper .js-cursor__main { width: 60px; height: 60px; transform-origin: center;top:-30px;left:-30px;
  background: url("images/cursor-swiper.png") center center no-repeat; background-size: contain; }
.is-hover-swiper .js-cursor__option{ opacity: 0;} */




/* swiper */

.spelan_page_swiper{ margin-right: calc(calc(calc(40vw - 600px) + calc( 20vw + 190px)) * -1); padding-bottom: 60px;}
.swiper-container{  background: none; width: 100%; box-sizing: border-box; padding-right:16%;}
/* .swiper-slide:hover{cursor:-moz-grab;cursor:-webkit-grab;cursor:grab;}
.swiper-slide:active{cursor:-moz-grabbing;cursor:-webkit-grabbing;cursor:grabbing;} */
.swiper-slide{ padding-right: 10px;}
.swiper-wrapper li.swiper-slide:last-child{ }
.swiper-button-prev {	background-image: url("images/arw-prev-c.png?v1") !important; background-size: 20px auto !important;}
.swiper-button-next {background-image: url("images/arw-next-c.png?v1") !important; background-size: 20px auto !important;}
.swiper-button-next{ right: 30px;} 
.swiper-button-prev { left: 30px;}
.swiper-button-next.swiper-button-disabled, 
.swiper-button-prev.swiper-button-disabled {opacity: 0.1;}
.swiper-pagination-wrap{ width: 100%; background-color: #ddd;}
.swiper-pagination { width: 100%; max-width: 720px; padding-top: 20px;}
.swiper-pagination-bullet,
.swiper-pagination-bullet-active {	width: 19px;	height: 19px; opacity: 0.9; margin: 0 4px; position: relative; background: none !important; }
.swiper-pagination-bullet::before,
.swiper-pagination-bullet-active::before{ width: 5px; height: 5px; left: 7px; top: 7px; background: #fff; position: absolute; content: "";  box-sizing: border-box;
border-radius: 50%;transition: all 0.4s;}
.swiper-pagination-bullet-active::before { transform: scale(2);}

@media only screen and (max-width: 1100px) {
  .spelan_page_swiper{ margin-right: -24vw;  }
  .swiper-pagination-wrap {width: calc(96% - 100px);}
}
@media only screen and (max-width: 1000px) {
  .spelan_page_swiper{ margin-right: -14vw; }
}
@media only screen and (max-width: 767px) {
  .spelan_page_swiper{  padding-bottom: 40px;}
  .spelan_page_swiper{ margin-right: -8%; padding-right:0%; margin-bottom: 50px !important;}
  .swiper-button-next{ right: 5px;} 
  .swiper-button-prev { left: 5px;}
  .swiper-button-prev {background-size: 14px auto !important;}
  .swiper-button-next {background-size: 14px auto !important;}
  .swiper-pagination-bullet {width: 3px;	height: 3px;margin: 0 10px;}
  .swiper-pagination-bullet-active { width: 3px;	height: 3px;  margin: 0 10px;}
  .swiper-pagination-wrap {width: 92%;}
}


/* page effect */
/* .zpage_transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform .8s cubic-bezier(.39, .575, .565, 1) 0.1s; 
  z-index: 999999;
}
.zpage_transition::before {
  background: -webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, 0)), color-stop(33.33333%, #fff), color-stop(66.66667%, #fff), to(hsla(0, 0%, 100%, 0)));
  background: -o-linear-gradient(bottom, hsla(0, 0%, 100%, 0) 0, #fff 33.33333%, #fff 66.66667%, hsla(0, 0%, 100%, 0) 100%);
  background: linear-gradient(0deg, hsla(0, 0%, 100%, 0), #fff 33.33333%, #fff 66.66667%, hsla(0, 0%, 100%, 0));
  content: "";
  display: block;
  width: 100%;
  height: 300%;
  position: absolute;
  left: 0;
  top: -100%;
}
body.zpageis_remove .zpage_transition {
  -webkit-animation: maskCloseTransition .8s cubic-bezier(.47, 0, .745, .715) 0s 1 forwards;
  animation: maskCloseTransition .8s cubic-bezier(.47, 0, .745, .715) 0s 1 forwards;
}
body:not(.zpageis_fade) .zpage_transition {
  transform: translateY(-200%);
}
@-webkit-keyframes maskCloseTransition {
  0% { transform: translateY(200%); }
  to { transform: translate(0); }
}
@keyframes maskCloseTransition {
  0% { transform: translateY(200%); }
  to { transform: translate(0); }
}  */




 .cshover button,
 .cshover a,
 a.cshover { -webkit-transition:all .6s; transition:all .6s;}
 .cshover button:hover,
 .cshover a:hover,
 a.cshover:hover { -webkit-opacity: 0.6; opacity: 0.6; }
 
 /* common style*/
.zhide{ display: none;}
.zpore{ position: relative;}
.zoverhidden{overflow: hidden;}

.zfn-NotoSans{font-family: 'Noto Sans JP', serif;}
.zfn-NotoSerif{font-family: 'Noto Serif JP', serif;}
.zfn-EBGaramond{ font-family: 'EB Garamond', serif;}

.zfn-w300{ font-weight: 300;}
.zfn-w400{ font-weight: 400;}
.zfn-w500{ font-weight: 500;}
.zfn-lesp02{ letter-spacing: 0.16em;}
.zfn-lesp03{ letter-spacing: 0.21em;}

.ztxjus{text-align: justify; text-justify: inter-ideograph; }

.zlh1{ line-height: 1;}
.zlh13{ line-height: 1.3;}
.zlh2{ line-height: 2;}

a.zc_w,
.zc_w a,
.zc_w{ color: #fff;}
.zc_g{ color: #a09367;}


.zflex { display: flex; flex-wrap: wrap; }
.zflex-jcc { display: flex; justify-content: center; flex-wrap: wrap; }
.zflex-jcs { display: flex; justify-content: space-between; flex-wrap: wrap; }
.zflex-jcend { display: flex; justify-content:flex-end; flex-wrap: wrap; }
.zflex-aic { display: flex; align-items: center; flex-wrap: wrap; }
.zdisp-ib{ display: inline-block;}

.zlinkbtn a{display:flex; justify-content: center; align-items: center; max-width: 200px; width: 100%; height: 50px; line-height: 1; color: #fff; border: 1.5px solid #fff;border-radius: 4px; box-sizing: border-box; text-align: center; margin: 0 auto; transition:all .4s; font-size: 18px; letter-spacing: 0.14em;  -webkit-transition: all .6s; transition: all .6s; }
.zlinkbtn a:hover{ background-color: rgba(255, 255, 255, 0.2);}

#spelan_ind_future .zlinkbtn a{ background-color: rgba(7, 7, 10, 0.25); }
#spelan_ind_future .zlinkbtn a:hover{ background-color: rgba(7, 7, 10, 0.4); }

.zlinkbtn-ftInner{ width: 100%; max-width: 420px ; margin: 0 auto;}
.zlinkbtn-ftInner .zlinkbtn{ max-width: 200px; width: 100%; margin-bottom: 1rem;}
.zlinkbtn-ftInner p{ font-size: 1.2rem; padding-top: 2rem;text-align: center;}
@media only screen and (max-width: 767px) {
  .zlinkbtn-ftInner .zflex-jcs{ flex-direction: column; }
  .zlinkbtn-ftInner .zlinkbtn{  margin-left: auto; margin-right: auto; margin-bottom: 2rem;}

}



.zpt00{ padding-top: 0 !important;}
.zpb00{ padding-bottom: 0 !important;}

.zopac-hide{  -webkit-animation: zopachide 0.6s 1 forwards; animation: zopachide 0.6s 1 forwards;}
@-webkit-keyframes zopachide {
0% { opacity: 1 ;}
100% {opacity: 0 ;}
}
@keyframes zopachide {
  0% { opacity: 1 ;}
  100% {opacity: 0 ;}
}




/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (min-width: 1301px) {
  .zshow-1300 { display: none; }
  .zhide-1300 { display: block; }
}
@media only screen and (max-width: 1300px) {
  .zshow-1300 { display: block; }
  .zhide-1300 { display: none; }
}
@media only screen and (min-width: 1201px) {
  .zshow-1200 { display: none; }
  .zhide-1200 { display: block; }
}
@media only screen and (max-width: 1200px) {
  .zshow-1200 { display: block; }
  .zhide-1200 { display: none; }
}
@media only screen and (min-width: 1101px) {
  .zshow-1100 { display: none; }
  .zhide-1100 { display: block; }
}
@media only screen and (max-width: 1100px) {
  .zshow-1100 { display: block; }
  .zhide-1100 { display: none; }
}
@media only screen and (min-width: 1001px) {
  .zshow-1000 { display: none; }
  .zhide-1000 { display: block; }
}
@media only screen and (max-width: 1000px) {
  .zshow-1000 { display: block; }
  .zhide-1000 { display: none; }
}
@media only screen and (min-width: 801px) {
  .zshow-800 { display: none; }
  .zhide-800 { display: block; }
}
@media only screen and (max-width: 800px) {
  .zshow-800 { display: block; }
  .zhide-800 { display: none; }
}
@media only screen and (min-width: 768px) {
  .zshow-sp { display: none; }
  .zhide-sp { display: block; }
}
@media only screen and (max-width: 767px) {
  .zshow-sp { display: block; }
  .zhide-sp { display: none; }
}



/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print , screen and (min-width: 768px) {

}

/* ====================================
	タブレット、印刷専用スタイル
===================================== */
@media print , screen and (min-width: 768px) and (max-width: 1079px) {
}

/* ====================================
	PC専用スタイル
===================================== */
@media only screen and (min-width: 1080px) {
}

/* ====================================
	HEAD
===================================== */
#z_menu{  height: 32px; width: 42px; cursor:pointer; padding:  10px 0; overflow: hidden; }
#z_menu span.zelm1,
#z_menu span.zelm2{position: relative;width:100%;display:block;  }
#z_menu span.zelm1::before{position:absolute;height:2px;width:32px;background:#fff;display:block;content:'';top:0px;-webkit-transition: all .3s ease;transition: all .3s ease;}
#z_menu span.zelm2::before{position:absolute; height:2px; width:20px;background:#fff;display:block;content:'';top:12px;left: 22px;-webkit-transition: all .3s ease;transition: all .3s ease;}
#z_menu span.zelm1::after{position:absolute;height:2px;width:32px;background:#fff;display:block;content:'';top:0px; left:-62px; -webkit-transition: all .3s ease;transition: all .3s ease;}
#z_menu span.zelm2::after{position:absolute; height:2px; width:20px;background:#fff;display:block;content:'';top:12px;left: -40px;-webkit-transition: all .3s ease;transition: all .3s ease;}

#z_menu:hover span.zelm1::before{  -webkit-animation: z_menuan1 0.8s 1 backwards; animation: z_menuan1 0.8s 1 backwards;}
#z_menu:hover span.zelm1::after{  -webkit-animation: z_menuan1 0.8s 1 backwards; animation: z_menuan1 0.8s 1 backwards;}
#z_menu:hover span.zelm2::before{  -webkit-animation: z_menuan1 0.9s 1 backwards; animation: z_menuan1 0.9s 1 backwards;}
#z_menu:hover span.zelm2::after{  -webkit-animation: z_menuan1 0.9s 1 backwards; animation: z_menuan1 0.9s 1 backwards;}
@-webkit-keyframes z_menuan1 {
0% {transform: translate(0,0);}
100% {transform: translate(62px,0);}
}
@keyframes z_menuan1 {
0% {transform: translate(0,0);}
100% {transform: translate(62px,0);}
}

/* TOP */
.invertopacSet,
.invertSet{ -webkit-transition: all .6s; transition: all .6s; }
#z_menu.invert span.zelm1::before,
#z_menu.invert span.zelm2::before,
#z_menu.invert span.zelm1::after,
#z_menu.invert span.zelm2::after{background:#a09367;}
.invertopacSet.invertopac{ opacity: 0; pointer-events: none;}


/* TOP */


#z_menu_close{ position: fixed; top: 95px; right: 30px; 
  height: 30px; width: 30px; cursor:pointer; padding: 10px 10px; box-sizing: border-box; display: none;  }
#z_menu_close span{ background:none; }
#z_menu_close span:before,
#z_menu_close span:after{top:50%;left:0;position:absolute;height:2px;width:26px;background:#FFF;display:block;content:'';cursor:pointer;-webkit-transition: all .3s ease;transition: all .3s ease;  }
#z_menu_close span:before{transform:skewY(-45deg);}
#z_menu_close span:after{transform:skewY(45deg);}

.spelan_header{ }
.spelan_menu{ position: fixed; top: 73px; right: 0; padding: 20px 30px; z-index: 99;}
#znav a{opacity: 0;}
#spelan_navwrap{position: fixed;  width: 100%; top: 73px; z-index: 90; display: none; }
.spelan_navwrap{ box-sizing: border-box; width: 100%; height: 420px; background-color: #000; }
.spelan_navwrap-flex{ width: 100%; }
.spelan_navwrap-flex .zflex-img{ width: 38%; box-sizing: border-box; overflow: hidden;}
.spelan_navwrap-flex .zflex-img span{ position: absolute; content: ""; top: 0; left: 0;  width: 100%; height: 100%; 
  -webkit-transition: all .6s ease;transition: all .6s ease; 
  background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("images/ps_1_firstView1000.jpg") ; z-index: 2;}
  
#znav_base_bg { background-image: url("images/ps_1_firstView1000.jpg?v1") ; opacity: 0;  }
#znav_spec_bg { background-image: url("images/ps_9_product_wide1000.jpg?v1") ; opacity: 0;  }
#znav_Concept_bg { background-image: url("images/2_secondview.jpg?v1") ; opacity: 0;  }
#znav_Light_bg{ background-image: url("images/ps_9_detail_light_wide.jpg?v1") ;  opacity: 0;  }
#znav_Sound_bg{ background-image: url("images/ps_9_detail_sound_wide.jpg?v1") ;  opacity: 0; }
#znav_Design_bg{ background-image: url("images/ps_8product_a.jpg?v1") ;  opacity: 0; background-position: 49% center; }
#znav_Anytime_bg{ background-image: url("images/ps_6_outdoor_ccut.jpg?v1") ;  opacity: 0; background-position: 50% center; }
.spelan_navwrap-flex .zflex-img .zis-show{  -webkit-animation: zfadeIn ease-out 2s 1 forwards; animation: zfadeIn ease-out 2s 1 forwards;}


@-webkit-keyframes zfadeIn {
  0% {opacity: 0; transform: scale(1.05);}
  100% { opacity: 1;transform: scale(1.0);}
}
@keyframes zfadeIn {
  0% {opacity: 0; transform: scale(1.05);}
  100% { opacity: 1;transform: scale(1.0);}
}


.spelan_navwrap-flex .zflex-txt{ width: 62%; box-sizing: border-box; font-size: 18px;height: 100%; padding: 2% 5%; }
.spelan_nav{ width: 100%;}
.spelan_nav .zelm1{width:70%; max-width: 258px; padding-bottom: 20px;}
.spelan_nav li{ margin-top: 18px;}

.spelan_cart { position: fixed; top: 50vh; right: auto; left: 30px; z-index: 1;}
.spelan_cart img{ width: 65px;}



@media only screen and (max-width: 1200px) {
  .spelan_navwrap-flex .zflex-txt{  padding: 2% 8%; }
}

@media only screen and (max-width: 767px) {
.spelan_menu{ top: 57px; padding: 20px 25px; }
#spelan_navwrap{ top: 57px; }
.spelan_navwrap{ height: auto;}
.spelan_navwrap-flex .zflex-txt { width: 100%; font-size: 15px; padding: 20% 10% 18%; }
.spelan_navwrap-flex .zflex-img{ display: none;}
#z_menu_close{ position: fixed; top: 79px; right: 8%;  }
.spelan_nav .zelm1{ padding-bottom: 10px;}
.spelan_nav li{ margin-top: 1.7em; padding-left: 17%;}

.spelan_cart { top: 79px; left: auto; right: 95px;}
.spelan_cart img{ width: 24px;}
}

/* ====================================
	INDEX
===================================== */



/* index common */
.spelan_ind_section{ width: 100%; min-height: calc(100vh - 73px); box-sizing: border-box; overflow: hidden;
	display: flex; justify-content:center; flex-wrap: wrap; align-items: center; }
.spelan_ind_section-wrap { width: 100%;box-sizing: border-box; padding: 150px 60px;}
.spelan_ind_ttl{ font-size: 30px;}
.spelan_h2ttl{ font-size: 1.7rem; position: absolute; top:0;  text-align: center; width: 100%; padding-top: 40px;}
.spelan_bg{ content: ""; position: absolute; top: 0; left: 0;  width: 100%; height: 100%; z-index: -1; }


/* index main */
#spelan_ind_main { width: 100%; height: 100vh; overflow: hidden;
	box-sizing: border-box; padding-top: 73px; display: flex; justify-content:flex-end; flex-wrap: wrap; }

.spelan_ind_main_logowrap{ padding-top: 55px; padding-right:10% ; }
.spelan_ind_main_logo{ width: 70%; max-width: 258px; margin-bottom: 14px;}

.spelan_main_bg{position:fixed;top:0;left:0;right:0;width:100%;height:100%;background-position:75% center;background-size:cover;background-repeat:no-repeat; z-index:-10;  }
.spelan_main_bg01{/*background-image: url("images/ps_1_firstView.gif?v12");*/ z-index:-11; }
.spelan_main_bg02{background-image: url("images/ps_1_firstView_bokashi.jpg?v13"); }

.spelan_main_bg video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  transform-origin: center center;
  width: auto;
  height: auto;
  height: 56.25vw; height: 66.25vw; 
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#spelan_ind_concept .spelan_main_bg video{-webkit-filter: blur(12px);}


.zfadeIn {transition: 2s; opacity: 0;}
.zfadeIn.zanimated { opacity: 1;}

.zmain_fadeIn{ animation: zfademain 2s 1 forwards; opacity:1;}
@keyframes  zfademain {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
.zmain_fadeInZoom{ animation: zfadezoommain 2s 1 forwards; opacity:1;}
@keyframes  zfadezoommain {
  0% { transform: scale(1.02); opacity: 0;}
  50% { opacity: 1;}
  100% { transform: scale(1.0); opacity: 1;}
  
}


/* mouse scroll */
a.zpagedown { position: absolute;  font-size: 1.6rem; left: calc(50% - 50px); width: 100px; margin: auto; bottom: 65px; z-index: 2;
	 display: inline-block; text-align: center;}
a.zpagedown span {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  margin: auto;
  width: 1px;
  height: 50px;
  border-left: 1px solid #fff;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {-webkit-transform: rotate(0) translate(0, 0); opacity: 0;}
  50% { opacity: 1;}
  100% {-webkit-transform: rotate(0) translate(0,10px);opacity: 0;}
}
@keyframes sdb {
  0% {transform: rotate(0) translate(0, 0);opacity: 0;}
  50% {opacity: 1;}
  100% { transform: rotate(0) translate(0, 10px); opacity: 0;}
}

/* audio */
#Audio-Control button { background: none; border: none; 
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

#Audio-Control{position: absolute;right: 30px; bottom: 28px;}
#Audio-Control button{opacity: .4; width: 54px; margin-left: 38px; padding: 0;}
#Audio-Control button.active{opacity: 1;}
#Audio-Control button img{width: 54px;}



@media only screen and (max-width: 767px) {
  .spelan_ind_section{ min-height: calc(78vh - 57px);  }
  .spelan_ind_section-wrap { padding: 100px 8%;}
  .spelan_ind_ttl{ font-size: 21px;}
  .spelan_h2ttl{ font-size: 14px; padding-top: 30px;}

  #spelan_ind_main { padding-top: 57px; padding-left: 10%; }
  .spelan_ind_main_logowrap{ padding-top: 22%;  }
  .spelan_ind_main_logo{ }
  #spelan_ind_main .spelan_ind_ttl { line-height: 1.6;}

  .spelan_main_bg { height: 116vh; margin-top: -10%; background-position:25% center;}
  /* .spelan_main_bg01{background-image: url("images/ps_1_firstView_sp_rcut.gif?v13");}
  .spelan_main_bg02{background-image: url("images/ps_1_firstView_bokashi_sp_rcut.jpg?v13"); } */

  .spelan_main_bg video { transform: translate(-55%,-50%);}

  a.zpagedown {  font-size: 14px;  bottom: 45px; }
  }

  @media only screen and (max-width: 500px) {
    .spelan_ind_ttl{ font-size: 5.8vw;}
    #Audio-Control{right: 0%; bottom: 100px; width: 100%;}
    #Audio-Control button{margin: 0 20px;}
    #Audio-Control .zflex{ justify-content: center;}
  }

  @media only screen and (max-width: 450px) {
    .spelan_main_bg video { transform: translate(-75%,-50%);}

  }
  
/* index concept */
#spelan_ind_concept{ }
#spelan_ind_concept .spelan_ind_section-wrap{text-align: center;}
.spelan_ind_concept_logo img{ width: 54px; margin-bottom: 90px;}
#spelan_ind_concept .spelan_ind_ttl{ margin-bottom: 50px;}
#spelan_ind_concept .spelan_ind_txt{ font-size: 15px; line-height: 2.4; padding-left: 4%; padding-right:4%;}
#spelan_ind_copy.spelan_ind_section { min-height: 50vh; padding: 0%; }
#spelan_ind_copy .spelan_bg { background: url("images/2_secondview.jpg?v1") 70% center no-repeat; background-size: cover; display: block; width: 110%; height: 110%;}
.spelan_ind_copyttl{ font-size: 40px; text-align: center;}

@media only screen and (max-width: 1080px) {
  .spelan_ind_copyttl{ font-size:28px;}
}

@media only screen and (max-width: 767px) {
  .spelan_ind_concept_logo img{ width: 38px; margin-bottom: 45px;}
  #spelan_ind_concept .spelan_ind_ttl{ margin-bottom: 25px;}
  #spelan_ind_concept .spelan_ind_txt{ font-size: 12px; }
  .spelan_ind_copyttl{ font-size:23px;padding-left: 2%; padding-right: 2%;}
  #spelan_ind_copy.spelan_ind_section { min-height: 56vw; }
  #spelan_ind_copy .spelan_bg { height: 130%; background-image: url("images/2_secondview_sp.jpg"); }

}


/* index future */
.ind_bgblack{ position: relative;}
.ind_bgblack::before{ position: absolute; top: 0;left: 0; width: 100%; height: 100%; content: "";  background-color: #000; z-index: -9;}

#spelan_ind_future.spelan_ind_section{ text-align: center; align-items: flex-start;}
#spelan_ind_Light{ width: 50%;}
#spelan_ind_Light .spelan_bg {background: url("images/ps_9_detail_light_wide_dark.jpg?v2") center center no-repeat; background-size: cover; }
#spelan_ind_Sound{ width: 50%; height: 100%;  }
#spelan_ind_Sound .spelan_bg {background: url("images/ps_9_detail_sound_wide_dark.jpg?v2") center center no-repeat; background-size: cover; height: 138%; top: -37%;}
#spelan_ind_Sound .spelan_ind_ttl{ padding-top: 4em;}
.spelan_ind_onkyo { position: absolute; right: 50px; bottom: 50px; z-index: 2; }
.spelan_ind_onkyo img{ width: 130px;}

@media only screen and (min-width: 1201px) and (max-width: 1500px) {
  #spelan_ind_future .spelan_ind_ttl{ font-size: 24px;}
}
@media only screen and (min-width: 981px) and (max-width: 1200px) {
  #spelan_ind_future .spelan_ind_ttl{ font-size: 20px;}
}
@media only screen and (max-width: 980px) {
  #spelan_ind_Light{ width: 100%;}
  #spelan_ind_Sound{ width: 100%; }
}
@media only screen and (max-width: 767px) {
  #spelan_ind_Sound .spelan_ind_ttl{ }
  .spelan_ind_onkyo { right: calc(50% - 39px); bottom:30px;  }
  .spelan_ind_onkyo img{ width: 78px;}
  #spelan_ind_Light .spelan_bg {background-image: url("images/ps_9_detail_light_wide_dark_sp.jpg?v2");  }
  #spelan_ind_Sound .spelan_bg {background-image: url("images/ps_9_detail_sound_wide_dark.jpg?v2"); }

}
@media only screen and (max-width: 500px) {
  #spelan_ind_future .spelan_ind_section-wrap { padding-left: 2%; padding-right: 2%;}
  #spelan_ind_future .spelan_ind_ttl{ font-size: 4.8vw;}

}

/* index design */
#spelan_ind_design.spelan_ind_section{ justify-content:flex-end;}
#spelan_ind_design .spelan_bg {background: url("images/ps_8product_a_dark.jpg?v1") 70% center no-repeat; background-size: cover;  }
#spelan_ind_design .spelan_ind_section-wrap{ width: 50%; text-align: center;}
@media only screen and (max-width: 1400px) {
  #spelan_ind_design .spelan_bg {background-position: 60% center; }
}
@media only screen and (max-width: 980px) {
  #spelan_ind_design .spelan_ind_section-wrap{ width: 100%; }
  #spelan_ind_design .spelan_bg {background-image: url("images/ps_8product_a_dark_spcut.jpg?v1"); background-position: 47% center; }
}

/* index anytime */
#spelan_ind_anytime.spelan_ind_section{ justify-content: flex-start;}
#spelan_ind_anytime .spelan_bg {background: url("images/ps_6_outdoor.jpg?v1") center center no-repeat; background-size: cover; }
#spelan_ind_anytime .spelan_ind_section-wrap{ width: 50%; text-align: center;}
.spelan_ind_section-wrap .spelan_ind_ttl{ margin-bottom: 40px;}
@media only screen and (max-width: 980px) {
  #spelan_ind_anytime .spelan_ind_section-wrap{ width: 100%; }
  #spelan_ind_anytime .spelan_bg {background-image: url("images/ps_6_outdoor_sp_ccut.jpg"); background-position: 50% center; }
}

/* index spec */ 
#spelan_ind_spec{ background-color: #f0eee7;}
#spelan_ind_spec .spelan_ind_section-wrap{ padding: 140px 0; }
#spelan_ind_spec .zflex-txt{ width: 50%; box-sizing: border-box;padding-left: 20px; padding-right: 4%;}
  .spelan_ind_spec_logo{ max-width: 258px; margin-bottom: 12px;}
  h3.spelan_ind_spec_name { font-size: 13px; margin-bottom: 50px;}
  .spelan_ind_specInner01{ margin-bottom: 36px; }
  .spelan_ind_specInner01 li{ margin-bottom: 0.4em; position: relative;}
  .spelan_ind_specInner01 li::before{ position: absolute; content: "・"; left: -1.05em;}
  .spelan_ind_specInner01 li dl{}
  .spelan_ind_specInner01 li dt{ width: 235px; position: relative;}
  .spelan_ind_specInner01 li dt::before{position: absolute; content: ""; top: 0.85em; right: 10px; width: 225px;border: 0.5px dashed #A09367 ; z-index: 1;}
  .spelan_ind_specInner01 li dt span{ background-color: #f0eee7; display: inline-block; padding-right: 10px; position: relative;  z-index: 2;}
  .spelan_ind_specInner01 li dd{ width: calc(100% - 235px);  margin-bottom: 0.4em;}
  .spelan_ind_specInner01 li > p {margin-bottom: 0.4em;}
  .spelan_ind_specInner01 li dl > dd:first-child{ margin-bottom: 0; }
  .spelan_ind_specInner01 li dl > dd:last-child{ margin-bottom: 0; }
  
  .spelan_ind_specInner02{ font-size: 12px; line-height: 1.6; margin-bottom: 60px; }
  .spelan_ind_specInner02 ul{ margin-bottom: 1em;}
  .spelan_ind_specInner02 li{ padding-left: 2.4em; position: relative; margin-bottom: 0.4em;}
  .spelan_ind_specInner02 li > span{ position: absolute; left: 0;}

#spelan_ind_spec .zflex-img{ width: 50%; box-sizing: border-box; text-align: center; }
#spelan_ind_spec .zflex-img img{ max-width: 480px;}

.zlinkbtn_g a{display:flex; justify-content: center; align-items: center; max-width: 200px; width: 100%; height: 50px; line-height: 1; color: #fff; background-color: #A09367; border: 1.5px solid #A09367;border-radius: 4px; box-sizing: border-box; text-align: center; transition:all .4s; font-size: 18px; letter-spacing: 0.14em;  -webkit-transition: all .6s; transition: all .6s; }


@media only screen and (max-width: 1400px) {
  #spelan_ind_spec .zflex-txt{ width: 60%; }
  #spelan_ind_spec .zflex-img{ width: 40%; }
}

@media only screen and (max-width: 980px) {
  #spelan_ind_spec .spelan_ind_section-wrap{ }
  #spelan_ind_spec .zflex-txt{ width: 100%;padding-left: 8%; padding-right: 8%; }
  #spelan_ind_spec .zflex-img{ width: 100%; order: 2; }
  #spelan_ind_spec .zflex-img img{ max-width: 320px;}
}
@media only screen and (max-width: 767px) {
  #spelan_ind_spec .spelan_ind_section-wrap{ padding: 80px 0; }
    .spelan_ind_spec_logo{ width: 70%; max-width: 258px; margin-bottom: 8px;}
    h3.spelan_ind_spec_name { font-size: 10px; margin-bottom: 30px;}
    .spelan_ind_specInner01{ margin-bottom: 26px; font-size: 12px;}
    .spelan_ind_specInner01 li{ padding-left: 1em;}
    .spelan_ind_specInner01 li::before{ left:0em;}
    .spelan_ind_specInner01 li dt{ width: 180px; }
    .spelan_ind_specInner01 li dt::before{width: 165px;}
    .spelan_ind_specInner01 li dd{ width: calc(100% - 180px); }
    .spelan_ind_specInner02{ font-size: 10px;  margin-bottom: 40px; }
    .spelan_ind_specInner02 li{ margin-bottom: 1.8em;text-align: justify; text-justify: inter-ideograph; }
    .zlinkbtn_g a{ margin: 0 auto;}

    #spelan_ind_spec .zflex-img{ padding-top: 10%;}
    #spelan_ind_spec .zflex-img img{ width: 70%; }
}

@media only screen and (max-width: 500px) {

  .spelan_ind_specInner01 li dt{ width: 100%; }
  .spelan_ind_specInner01 li dt::before{ display: none;}
  .spelan_ind_specInner01 li dt span{ padding-right: 0px;}
  .spelan_ind_specInner01 li dd{ width: 100%; position: relative; padding-left: 25px; }
  .spelan_ind_specInner01 li dd::before{position: absolute; content: ""; top: 0.85em; left: 0px; width: 18px;border: 0.5px solid #A09367 ; opacity: 0.3; z-index: 1;}
  .spelan_ind_specInner01 li,
  .spelan_ind_specInner01 li > p {margin-bottom: 0.6em; margin-right: -2%;}

}



/* ====================================
	PAGES
===================================== */
.spelan_ind_section.spelan_pagesbg{ position: fixed; z-index: -3; height: 100vh;top: 0;left: 0;}
.spelan_ind_section.spelan_pagesbg::before{position:absolute; width: 100%; height: 100%; content: ""; top: 0;left: 0; background-color: rgba(0, 0, 0, 0.9);}
.spelan_pagesbg .spelan_ind_section {height: 100%;}

#spelan_page_Container,.spelan_page_Container { padding-top: 73px; width: 80%; box-sizing: border-box;  }
.spelan_page_main{ width: 100%; max-width: 1200px; height: 72vh; max-height: 50vw; margin: 0 auto; overflow: hidden; }
#spelan_page_Container .spelan_page_main span{position:absolute; width: 100%; height: 100%; content: ""; top: 0;left: 0; }
#spelan_page_Container.zpage_light .spelan_page_main span{ background: url("images/ps_9_detail_light_wide.jpg") center center no-repeat; background-size: cover; }
#spelan_page_Container.zpage_sound .spelan_page_main span{ background: url("images/ps_9_detail_sound_wide.jpg") center 70% no-repeat; background-size: cover; height: 120%; top:-20%; }
#spelan_page_Container.zpage_design .spelan_page_main span{ background: url("images/ps_8product_a.jpg") center center no-repeat; background-size: cover; height: 120%; top:-10%; }
#spelan_page_Container.zpage_scene .spelan_page_main span{ background: url("images/ps_6_outdoor_ccut.jpg") 50% center no-repeat; background-size: cover; }
.spelan_page_main_logo{ position: absolute; bottom: 50px; right: 50px; z-index: 1; width:130px ;}
.spelan_page_main_cmt { width: 100%; max-width: 1200px;  margin: 0 auto; box-sizing: border-box;}
.spelan_page_main_cmt p{position: absolute; top: 0; right: 0; font-size: 13px; padding-top: 10px;}
.spelan_page_wrap{ padding:70px 4% 100px;}
.spelan_page_wrap_in{ box-sizing: border-box; width: 100%; max-width: 820px; margin: 0 auto; padding-left: 100px;}
.spelan_page_ttl h2{ line-height: 1.67; font-size:3.45rem ; margin-bottom: 1em; width: 100%; box-sizing: border-box; margin-right: -1.2em; font-feature-settings: "palt" 1;}
.spelan_page_side_enttl{ position: absolute; left: -100px; top: 0.5em;left: 0; }
.spelan_page_img_caption{ margin-top: 15px; font-size: 13px; line-height: 1.7;}
.spelan_page_txt{margin-bottom: 80px;}
.spelan_page_txt-02{ margin-bottom: 50px;}
.spelan_page_txt-last{ margin-bottom: 75px;}


.zpage_lighttxt{ }
.zpage_lighttxt-02{ margin-bottom: 50px;}

.zpage_soundtxt{ margin-bottom: 50px;}
.zpage_soundtxt-02{ margin-bottom: 110px;}





@media only screen and (max-width: 1000px) {
  #spelan_page_Container,.spelan_page_Container {  width: 90%; }
  .spelan_page_ttl h2{  font-size:1.76em ; }
  .spelan_page_main_logo{  bottom: 30px; right: 30px;}

}
@media only screen and (max-width: 980px) {
  #spelan_page_Container.zpage_light #spelan_ind_Sound,
  #spelan_page_Container.zpage_sound #spelan_ind_Light{ display: none; }
}
@media only screen and (max-width: 767px) {
#spelan_page_Container,.spelan_page_Container {width: 100%; padding-top: 57px;}
.spelan_page_main{ width:calc(100% - 90px); max-height:60vw; margin: 0;}
#spelan_page_Container.zpage_light .spelan_page_main span{ background: url("images/ps_9_detail_light_wide_sp.jpg") center center no-repeat; background-size: cover;top:-13%; height: 135%;  }
#spelan_page_Container.zpage_sound .spelan_page_main span{ background: url("images/ps_9_detail_sound_wide_sp.jpg") center 80% no-repeat; background-size: cover ;height: 150%; top:-40%; }
#spelan_page_Container.zpage_design .spelan_page_main span{ background: url("images/ps_8product_a_spcut.jpg") center center no-repeat; background-size: cover; }
#spelan_page_Container.zpage_scene .spelan_page_main span{ background: url("images/ps_6_outdoor_sp_ccut.jpg?v1") 50% center no-repeat; background-size: cover; }

.spelan_page_main_cmt{width:calc(100% - 90px);margin: 0; margin-right: -1em; margin-bottom: -1em;}
.spelan_page_main_cmt p{position: static; top: auto; right: auto; font-size: 0.6em; padding-top: 6px; padding-left: 8%;}
.spelan_page_main_logo{  bottom: 15px; right: 15px; width: 62px;}

.spelan_page_wrap{ padding:35px 8% 50px;}
.spelan_page_wrap_in{ padding-left: 0px;}
.spelan_page_ttl{ margin-right: -1.2em;}
.spelan_page_ttl h2{ font-size:18px ; margin-bottom: 1em; }
.spelan_page_side_enttl{ position:static; left:auto; top: auto; font-size: 14px; padding-bottom: 1.5em; }
.spelan_page_txt{ font-size: 12px;}
.spelan_page_img_caption{  margin-top: 12px; font-size: 10px;}
.spelan_page_txt{ margin-bottom: 40px;}
.spelan_page_txt-02{ margin-bottom: 30px;}
.spelan_page_txt-last{ margin-bottom: 35px;}
.zpage_lighttxt-02{ margin-bottom: 25px;}
.zpage_lighttxt-02 dt{ width: 70%;max-width: 248px; margin-bottom: 11px;}
.zpage_lighttxt-02 dd{  margin-bottom: 18px; font-size: 15px;}
.zpage_lighttxt-02 .elm2{ margin-bottom: 15px; margin-right: -8%;  margin-bottom: 0px; margin-right: -0%;}


.zpage_soundtxt{ margin-bottom: 40px;}
.zpage_soundtxt-02{ margin-bottom: 40px;}



}
@media only screen and (max-width: 374px) {
  .spelan_page_ttl h2{ font-size:4.7vw;}
  
  }