@charset "utf-8";


/* common ---------------- */
#contents>section { padding: 80px 0; }
#contents>section.p0 { padding:0; }

#pan { padding: .3em 2em; font-size: 0.8125rem; background: #f6f6f6; }
#pan > li { float: left; position: relative; }
#pan > li:not(:last-child)::before { content: ">"; position: absolute; right: 0; }
#pan > li:not(:last-child) { margin-right: 1em; padding-right: 2em; }
#pan > li a { color: #c71432; text-decoration: none; }
#pan > li a:hover { color: #333; }


/* title */
.pageTtl { position: relative; min-height: 400px; background:no-repeat center /cover; }
.pageTtl .title { position: absolute; top: 50%; left: 50%;
    padding: 1.5em 3em 1.4em 3em; text-align: center; line-height: 1.2;
    font-size: 2.375em; transform: translate(-50%,-50%);
    border: 1px solid #fff; color: #fff; }
.pageTtl .title > .en { display: block; font: .9rem / 1.8 "Rubik", sans-serif; letter-spacing: .1em; }
.pageTtl .title > .en:first-letter { color: #fff; }
#bamboo .pageTtl { background-image: url("../img/bamboo/pageTtl.jpg"); }
#company .pageTtl { background-image: url("../img/company/pageTtl.jpg"); }
#business .pageTtl { background-image: url("../img/business/pageTtl.jpg"); }
#blog .pageTtl { background-image: url("../img/blog/pageTtl.jpg"); }
#info .pageTtl { background-image: url("../img/blog/pageTtl-info.jpg"); }
#works .pageTtl { background-image: url("../img/blog/pageTtl-works.jpg"); }
#oldmaterial .pageTtl { background-image: url("../img/blog/pageTtl-oldmaterial.jpg"); }
#shop .pageTtl { background-image: url("../img/shop/pageTtl-chikubuen.jpg"); }
#chikubuen .pageTtl { background-image: url("../img/shop/pageTtl-chikubuen.jpg"); }
#contact .pageTtl { background-image: url("../img/bamboo/pageTtl.jpg"); }
#error .pageTtl { background-image: url("../img/bamboo/pageTtl.jpg"); }
#policy .pageTtl { background-image: url("../img/bamboo/pageTtl.jpg"); }
#recruit .pageTtl { background-image: url("../img/recruit/pageTtl.jpg"); }

.lineTtl { position: relative; margin-bottom: .5em; font-size: 1.625em; border-bottom: 1px solid #cccccc; }
.lineTtl::before { content: ''; position: absolute; bottom: -1px; left: 0;
    width: 20%; height: 1px; background: #c71432; }

.title { line-height:1.5; }
.title > .en { display:block; font:.9rem / 1.8 "Rubik", sans-serif; letter-spacing:.1em; }
.title > .en:first-letter { color:#c71432; }

.title.simple { margin-bottom:1em; font-size:2em; text-align:center; }


.sec-img-txt, .sec-txt-img { position:relative; margin-top:8.7%; margin-bottom:7.7%; padding-top:6%; }
.sec-img-txt.inner, .sec-txt-img.inner { padding-top:3%; }
.sec-box { width:50%; padding:6%; background:#fff; }
.sec-title { margin-bottom:1.5em; font-size:1.75em; }
.sec-img, .sec-img-in { position:absolute; top:0; width:60%; height:100%; z-index:-1; background:no-repeat center / cover; }

.sec-box-in { width:37%; padding-bottom:3%; background:#fff; }
.sec-img-in { width:52%; }

.sec-img-txt .sec-box { margin-left:auto; }
.sec-txt-img .sec-img, .sec-txt-img .sec-img-in { right:0; }

.sec-bg-gry { background-color:#f6f6f6; }

/* calendar */
.cal-wrap { margin-top:2em; padding:2em 1em 5em; background:#fff; }
#cal { max-width:900px; margin:auto; position:relative; }
#cal .ym { display:flex; justify-content:center; align-items:flex-end; margin-bottom:.5em; font-weight:500; }
#cal .ym .m { font-size:6em; line-height:1; }
#cal .ym > div { padding-left:5px; text-align:left; font-size:1.8em; line-height:1.2; }
#cal .ym > div > span { display:block; }
#cal .ym .y { padding-bottom:.3em; }
#cal a.prev, #cal a.next {
  position:absolute; top:2em;
  display:block; width:40px; height:40px; border:1px solid #a6a5a1; border-radius:50%; }
  #cal a.prev::before, #cal a.next::before {
    position:absolute; top:50%; left:50%; margin-top:-4px; margin-left:-6px;
    content:""; display:block; width:9px; height:9px;
    border-top:2px solid #a6a5a1;
    border-right:2px solid #a6a5a1;
    transform: rotate(45deg);
  }
#cal a.prev { left:0; } #cal a.prev::before {  margin-left:-2px; transform: rotate(-135deg); }
#cal a.next { right:0; }

#cal table { width:100%; }
#cal td { width:calc(100% / 7); text-align:center; background:#ffffff; border:1px solid #e7e7e7; vertical-align:middle; }
#cal .week>td { color:#fff; background-color:#807f79; border-top:none; }
#cal td:first-child { border-left:none; }
#cal td:last-child { border-right:none; }
#cal td>p { margin:.5em; }
#cal td>p>b, .bday { display:inline-block; width:40px; font-size:1.2em; line-height:32px; font-family:'Nunito', sans-serif; font-weight:normal; text-align:center; box-sizing:border-box; }
#cal td>p>span { display:block; margin-top:1em; text-align:center; font-size:.95em; }
#cal td[class^="h"]>p>b, .bday { color:#fff; background:#257676; border:4px solid #257676; border-radius:1em; }
#cal td.h2>p>b, .bday.h2 { border-color:#C5983E; }
.bday { width:18px; line-height:12px; border-width:3px; }

/* contents ---------------- */


/* bamboo ------------- */
#about-01,#about-02 { padding: 6% 0 0!important; }
#about-01 .sec-img { background-image:url("../img/bamboo/img_about-01.jpg"); }
#about-02 .sec-img { background-image:url("../img/bamboo/img_about-02.jpg"); }

.aboutArea > div:not(:last-child) { margin-bottom: 30px; }
.aboutArea .c-form { background: #f6f6f6; }

#school { padding-top: 0; }
#school .title { margin-bottom: 1em; font-size:2em; text-align:center; }
.schoolList > li { width: 48%; }
.schoolList > li > a { text-decoration: none; color: #333; }
.schoolList > li figure { margin-bottom: 1em; }
.schoolList > li .ttl { margin-bottom: .4em; font-size: 1.125em; font-weight: 600; letter-spacing: .1em; }
.schoolList > li .txt { margin: 0 auto 1.5em; font-size: 0.9rem; font-weight: 300; line-height: 1.7;}
.schoolList > li .data { margin: 0; font: 0.8125em / 1.8 "Rubik", sans-serif; letter-spacing: .2em; color: #888; }

.aboutBtn { display: block; position: relative; padding: 1em; border:1px solid #c71432; text-decoration: none!important; }
.aboutBtn > span { position: relative; display: block; padding-left: 1em; }
.aboutBtn::before { content: "";
  position: absolute; top: 50%; left: 0; width: 10px; height: 2px; background:#c71432; }
.aboutBtn:hover { background: #eee; }
.btnList > li { width: 100%; }
.btnList { margin-top: 8.7%;}

#bamboo {
  .exBox {
    .example {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; row-gap: 2em; margin-block: 2em 6em;
      > li {
        display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: .5em; width: 100%;
        &:nth-child(n+4) { margin-top: 0; }
        > p { margin-top: 0; }
        .imgWrap { aspect-ratio: 1.16/ 1;}
        .txt { font-size: .9rem; line-height: 1.8; }
      }
    }
  }
}

/* company ------------- */
#concept { padding-top: 0!important; }
#company-01 .sec-img { background-image:url("../img/company/img_company-01.jpg"); }
#company-02 .sec-img { background-image:url("../img/company/img_company-02.jpg"); }

#profile .title { margin-bottom: 1em; font-size:2em; text-align:center; }
#profile .c-form { background: #f6f6f6; }

#pamphlet .title { margin-bottom: 1em; font-size:2em; text-align:center; }
.blankBtn { display: block; position: relative; padding: 1em; border:1px solid #c71432; text-decoration: none!important; }
.blankBtn > span { position: relative; display: block; padding-left: 1em; }
.blankBtn > span::before { content: "";
  position: absolute; top: 50%; right: 0;
  width: 13px; height: 13px;
  background: url("../img/common/icon_target-blank.png") no-repeat;
  transform: translateY(-55%); }
.blankBtn::before { content: "";
  position: absolute; top: 50%; left: 0; width: 10px; height: 2px; background:#c71432; }
.blankBtn::after { content: "PDF";
    position: absolute; top: 50%; right: 3em;
    font: .9rem / 1.8 "Rubik", sans-serif; color: #c71432;
    transform: translateY(-50%); }
.blankBtn:hover { background: #eee; }
.pdfList > li { width: 100%; }
#staff { padding-top: 0!important; }
#staff .title { margin-bottom: 1em; font-size:2em; text-align:center; }
.staffList > li { width: 90%; margin: 0 auto; }
.staffList > li > a { text-decoration: none; }
.staffList > li .imgBox { position: relative; }
.staffList > li .imgBox img { width: 100%; }
.staffList > li .name { position: absolute; bottom: 0; right: 0; padding: .5em 1.5em; font-size: 1.125em;  background: #fff; }
.staffList > li .name:first-letter { color: #c71432;}
.staffList > li .txtBox { padding: 0 1em; }
.staffList > li .cat { display: inline-block; margin: 0; padding: 0 1em;
    font-size:0.8125em; letter-spacing: .1em;
    border: 1px solid #ccc; border-radius: 20px;
    color: #ccc;
    }
.staffList > li > a:hover .cat { color: #c71432; border-color: #c71432; }


/* business ------------- */
#business-02 { z-index: 0; padding: 0 0 60px!important; }

.exBox { margin-top: 30px; }
.example > li { width: 48%; }
.example > li > a { display: block; text-decoration: none; }
.example > li img { width: 100%; object-fit: cover; }
.example > li .ttl { position: relative; padding-left: 1em; margin-top: 10px; font-size: 1.25em; font-weight: bold; line-height: 1.5; }
.example > li .ttl::before { content: ""; position:absolute; top: 0; left: 0;
width: 2px; height: 100%; background: #c71432;}
.cap { margin:0 auto; padding-left: 1.2em; font-size: 0.8125em; }
.cap span { display: inline-block; margin-right: .2em; font-size: 1.2em; }

#business .slide .slide-01 { background-image:url("../img/business/slide_01.jpg"); }
#business .slide .slide-02 { background-image:url("../img/business/slide_02.jpg"); }
#business .slide .slide-03 { background-image:url("../img/business/slide_03.jpg"); }

.catalogue .example > li img { height:auto; }
#business #pan br{ display:none; }

/* shop ------------- */
#shop #contents > section.lead { padding: 50px 0 }
#contents > section.shopArea { padding-top: 0; }
.shopArea > div { margin-bottom: 50px; }
.shopArea .shopBox > * { width: 100%; }
.shopArea .shopBox .shop-desc{display: block; margin-top: 2em; font-size: .9375em;}

.shopArea .moreBtn { background: #000; }
.shopArea .moreBtn a { z-index: 0; position: relative; display: block;
  padding: 10px; height: 140px;
  text-decoration: none; color: #fff;
  background: no-repeat center /cover;
  }
.shopArea .moreBtn a::before { content: ""; z-index: -1;
  position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 1px solid #fff;
  }
.shopArea .moreBtn .txtBox { position: absolute;
  top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%;
  }
.shopArea .moreBtn .txtBox .logo { float: left; }
.shopArea .moreBtn .sec-more { text-align: right; }
.shopArea .moreBtn a:hover { opacity: .7; }

dl.shop-info > dt { padding-left:1rem; font-size:1.125em; font-weight:bold; line-height:1; border-left:2px solid #ea9b97; }
dl.shop-info > dd { padding:1em 0 2em 1.125em; line-height:1.4; }

/* chikubuen ------------- */
#chikubuen-01 .sec-img { background-image:url("../img/shop/img_chikubuen-01.jpg"); }
#chikubuen-02 .sec-img-in { background-image:url("../img/shop/img_chikubuen-02.jpg"); }
#chikubuen-info .sec-img-in { background-image:url("../img/shop/img_chikubuen-info.jpg"); }
#chikubuen .shop-name { max-width:80%; }
#chikubuen-info dl.shop-info { margin:3em 0　0; }
#chikubuen-info .enFont.small { color:#999; line-height:1.8; }
#chikubuen .gmap { margin-top:4%; margin-bottom:6%; }
#chikubuen .gmap > iframe { border:1px solid #ccc; }
#chikubuen .img_map { margin-bottom: 3em;}
#chikubuen .img_map img { width: 85%;}
#chikubuen .calender .workshop { margin: 2em 0 3em;}
#chikubuen .bnr-sns {margin-bottom: 2em;}
#chikubuen .bnr-sns li { margin-top: 2em;}

.youtube { width: 100%; margin-bottom: 100px; aspect-ratio: 16 / 9; }
.youtube iframe { width: 100%; height: 100%; }

.insta { padding-bottom: 0 !important; }
.insta_list li { width:24%; margin-bottom:1.25%; }
.insta_list li a { overflow: hidden; position:relative; display:block; padding-top:100%; background-color:#eee; display:block; }
.insta_list li img { position:absolute; top:50%; left:50%; width:100%; height: 100%; object-fit: cover; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); transition:all .5s; -webkit-transition:all .5s; }
.insta_list li a:hover img { opacity:.6; }

#chikubuen .ws-link { display: grid; grid-template-columns: repeat(2,1fr); gap: 1em; width: 90%; margin-top: 1em;}
#chikubuen .ws-link a { display: grid; align-content: center; justify-items: center; height: 100%; padding: .3em; border: 2px solid #ccc;}
#chikubuen .ws-link a[href*="wabunka-lux"] { background-color: #222; border-color: #222;}
#chikubuen .ws-link a[href*="wabunka-lux"] img { width: 80%;}
#chikubuen .ws-link a[href*="tradi-jp"] img { width: 75%;}


/* contact ------------- */
#contact .c-form { background: #f6f6f6; }
#contact .info {  margin-top: 50px; padding-top: 20px; border-top: 2px solid #eee; }


/* policy ------------- */
.policy-list { margin-top: 4em; }
.policy-list > li { margin-bottom: 3em; }
.policy-list .numList { padding-left: 1.5em; }
.policy-list .numList > li { margin-bottom: 1em; }
.policy-list .numList > li::marker { color: #c71432; }
.policy-list .numList > li p { margin: 0; }

/* recruit ------------- */
#recruit .title { margin-bottom: 1em;  font-size: 2em; }
#recruit .sec-img-txt { margin-bottom: 2%; }
#recruit-01 .sec-img { background-image:url("../img/recruit/img_recruit-01.jpg"); }
#recruit .example {  margin-top: 2.5%; }
#recruit .column-2 {  margin-top: 3%; }
#recruit .column-2 li { width: 49%; }
#recruit .column-2 li:nth-child(n+3) { margin-top: 3%; }
#recruit .grayBox { margin-top: 5em; }
#recruit .jobList li { width: 25%; margin: 0 1% 3%; }
#recruit .a_link { display: block;  position: relative;  padding: 1em;  border: 1px solid #c71432;  text-decoration: none!important; }
#recruit .a_link::before { content: "";  position: absolute;  top: 50%;  left: 0;  width: 10px;  height: 2px;  background: #c71432; }
#recruit .c-form { background: #f6f6f6; }
.recruit-mail{margin: 0.5em 0;}

/* news ------------- */
#news > .inner { max-width:1000px; }
.news-list  { max-height:130px; overflow-y:auto; }
.news-list > li { margin-bottom:1em; line-height:1.6; }
.news-list .date { display:inline-block; width:120px; }

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  .lineTtl { margin-bottom: 1em; }

  /* bamboo ------------- */
  .aboutArea > div { width: 48%; }
  .aboutArea > div:last-child,.aboutArea > div:nth-last-child(2) { width: 100%; }
  .schoolList > li { width: 22%; }
  .btnList > li { width: 32%; }
  #bamboo {
    .example {
      > li {
        .ttl { margin-top: 10px;}
      }
    }
  }

  /* company ------------- */
  .staffList > li { width: 32%; }
  .pdfList > li { width: 32%; }

  /* business ------------- */
  .example > li { width: 32%; }
  .example > li .ttl {  margin-top: 20px;}
  .example > li img { width: 100%;}
  .example > li:nth-child(n+4) { margin-top: 3%; }
  .cap { margin: .8em auto 0; }
  #business-02 {padding: 8% 0 0!important; }
  #business-02 .slide { z-index: -1 ; position: absolute; right: 0; top: 0; width: 60%; }

  /* shop ------------- */
  .shopArea .shopBox { justify-content: space-between; -webkit-justify-content: space-between; }
  .shopArea .shopBox > * { width: 48%; }
  .shop-takamura .map iframe,.shop-bamtera .map iframe { height: 100%; }
  .shopArea > div { margin-bottom: 70px; }

  /* recruit */
  #recruit .cap { font-size: .9em; }
  #recruit #manufacturing .cap { text-align: center; }
  #recruit .grayBox { text-align: center; }
}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {
  .shop-taka,.shop-bam { margin-bottom: 8.7%; }

  .brn_con { margin-top: 80px; }
  .example > li img { height: 350px; }
  #bamboo .example > li img { height: auto; }


  #chikubuen .gmap { margin-top:-4%; }

  /* news ------------- */
  #news { padding:80px 0 90px; position:relative; }
  .news-title { width:26.5%; font-size:2em; }
  .news-list  { width:73.5%; }
  .news-more  { position:absolute; top:100px; left:0; }

  .products-box ul { padding-left: 10%; margin-right: -10%;}
}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {

}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {
  .pageTtl { min-height:300px; }
  .pageTtl .title { padding:1em; width: 70%; top: 53%; }

  .sec-img-txt, .sec-txt-img { margin-bottom:0; }
  .sec-box { width:60%; }
  .sec-img { width:70%; }

  .sec-box-in { width:50%; }
  .sec-img-in { width:45%; }

  .example > li img { height: 220px; }
  #bamboo .exBox .example {
    grid-template-columns: repeat(2,1fr);
    > li {
      img { height: auto; }
    }
  }
  .brn_con { margin-top: 50px; }

  #recruit .title { font-size: 1.75em; }
  #recruit .jobList li { width: 35%; }

   /* news ------------- */
   #news { padding:1.5em 0 3em; }
   .news-title { padding:1rem 0; font-size:2em; }
   .news-title::after { margin-left:1em; }
   .news-list  { width:100%; }
   .news-more  { display:inline-block; margin:2em 0 0 auto; }

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  .lineTtl { line-height: 1.5; padding-bottom: .5em;}

  .sec-box, .sec-box-in { width:100%; padding:0 0 6%; }
  .sec-img, .sec-img-in { width:100%; padding-top:65%; position:static; }

  #contents>section { padding: 50px 0; }
  .pageTtl { min-height: 250px; }
  .pageTtl .title { top: 61%;  padding: .5em;font-size: 1.85em;line-height: 1.3;}

  /* カレンダー */
  #cal table { table-layout: fixed;}


  /* bamboo ------------- */
  .aboutArea > div:not(:last-child) { margin-bottom: 20px; }
  #about-01,#about-02 { padding: 0!important; }
  #school { padding-top: 0!important; }
  .btnList > li { margin-bottom: 1em; }
  #bamboo {
    .exBox {
      .example {
        grid-template-columns: repeat(1, 1fr); margin-block: 2em 0;
        > li { margin-bottom: 0; img{ height: auto; }}
      }
    }
  }
  /* company ------------- */
  .staffList > li { margin-bottom: 30px; }
  .pdfList > li { margin-bottom: 1em; }


  /* business ------------- */
  .example > li { margin-bottom: 20px; }
  .example > li img { height: 170px; }
  .brn_con { margin-top: 30px; }
  #business .pageTtl .title{ font-size:1.55em; }

  /* shop ------------- */
  .shopArea .shopBox .map {margin-top: 20px; }
  .shop-bamtera .moreBtn .txtBox .logo img { height: 35px; margin-top: 10px; }
  .youtube {margin-bottom: 60px;}

  /* chikubuen ------------- */
  #chikubuen-info .sec-img-in { padding-top:122%; }
  #chikubuen .calender .workshop { margin: 1.5em 0 2em;}
  #chikubuen .img_map img { width: 100%;}

  .insta_list li { width:49%; }
  .insta_list li:last-child,.insta_list li:nth-last-child(2) { display:none; }

  #chikubuen .ws-link { width: 95%;}
  #chikubuen .ws-link a { padding-block: .6em;}

  /* recruit ------------- */
  #recruit .jobList li { width: 100%; }
  #recruit .grayBox {  margin-top: 3em; }
  #recruit .example > li img {  height: auto; }
  #recruit .example > li .ttl { font-size: 1.05em; }

  /* news ------------- */
  .news-list .date { display:block; }

}

@media screen and (max-width: 400px){
  .cal-wrap { margin-left:0; margin-right:0; }
  #cal td>p>b { width:30px; line-height:24px; font-size:1.1em; }
  #cal td[class^="h"] > p > b, .bday { border-width:3px; }
}