@charset "utf-8";

/* title */
.title > .en{ line-height: 1.4; }
.products-list .title > .en{ margin-top:0; }
#products .title{ text-align:left; }

/* mv */
.mv-txt-en {
  position:absolute; top:40%; left:13%; z-index:1; font-size:2.2em; color:#fff; line-height: 1.5em;
  transform: translateY(-50%); -webkit-transform:translateY(-50%);
  }


/* contents */
#craftsmen .sec-img { background-image: url(../img/img-craftsmen.jpg); }
#products{ padding-bottom:3%; }

/* story */
#story .bg-gray{ padding:clamp(2em,8.3%,100px) 0 clamp(4em,10%,120px); }
.ttl-center{ text-align: center; font-size:1.45em; }
#story .pic-center{ margin-top:clamp(2.5em,4.2%,50px); max-width:775px; margin-right:auto; margin-left:auto; text-align:center; }
.sec-area{ margin-bottom:clamp(2em,8.3%,100px); }
.sq-story{ margin-bottom:clamp(2em,5.3%,64px); }
.sq-story .ttl-sq span{ display:block; position:relative; width:100%; padding-top:100%; color:#FFFFFF; font-size:1.45em; 
  background:url(../img/sq-bamboo.jpg) no-repeat 0 0 / 100%; }
.sq-story .ttl-sq .con{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); 
  margin:0; letter-spacing: 0.05em; line-height: 1.3; font-size: 0.85em; }
.sq-story .txt{ flex:1; }
.old .sq-story .ttl-sq span{ background-image:url(../img/sq-old.jpg); }

/* サムネイル付き slider */
.thumbs_dots { margin: 10px 0 0; }
.thumbs_list li { display: inline-block; width: 150px; height: 80px;
  opacity: 0.4; cursor: pointer; transition: opacity 0.3s; }
.thumbs_list li.slick-active { opacity: 1; }

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width:600px) {
  #story .narrow{ width:600px; margin-right:auto; margin-left:auto; }
  .sq-story .ttl-sq{ width:250px; margin-right:5em; }
  .bamboo .sq-story .ttl-sq{ margin-top:-3em; }
}

/* 960以上(PC) */
@media screen and (min-width:960px) {
  #story .narrow{ width:770px; }
  .sq-story .ttl-sq{ width:350px; }
  .bamboo .sq-story .ttl-sq{ margin-top:-5em; }
}

/* 1200以上(PC) */
@media screen and (min-width:1200px) {
  /* story */
  #story .lead.inner{ width:46%; }
}

@media screen and (max-width:999px) {
}

/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width:959px) {
  .thumbs_list li { width: 120px; height: 60px; }
}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width:599px){
  #products .products-list .title{ padding-left:5vw; padding-right:4vw; }

  /* mv ------------- */
  .mv-txt-en{
    font-size:1.3em; top: 33%; right: 74%; white-space:nowrap;
    transform: translate(-50%,-50%);
    }

  /* story */
  .ttl-center{ font-size:1.2em; }
  .bamboo .sq-story{ margin-top: -2em; }
  .sq-story .ttl-sq{ width:35%; margin-right:2em; }
  .thumbs_list li { width:80px; height:40px; }
}