@charset "utf-8";


/* main ------------- */
.mv_area,.mv { position: relative; }
.mv_lead { position: absolute; right: 15%; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); }
.mv_lead .en { text-align: center; font-size: 12px; color: #d2d2d2; letter-spacing: 1px; }
.mv_lead .lead { margin-bottom: 2em;text-align: center; }

/*.mv-slide {
  margin: 0 auto;
  max-width: 500px;
  width: 80%;
}*/

.mv-slide img {
  height: auto;
  width: 100%;
}

.slick-dots li { width: auto!important; height: auto!important; }
.slick-dots li button { width: auto!important; height: auto!important; }

.slick-dots li button:before { color: #d9a72f!important; }
.slick-dots li.slick-active button:before {  opacity: 1; }
/*.mv-slide .slick-arrow { z-index: 1; }
.mv-slide .slick-arrow::before{
    content:""!important;
    width: 30px!important;
    height: 30px!important;
    position: absolute;
  }

.mv-slide .slick-next { right: 0!important; }
.mv-slide .slick-next::before{
  background: red!important;
  right: 0;
  }

.mv-slide .slick-prev { left: 0!important; }
.mv-slide .slick-prev::before{
   background: red!important;
  left: 0;
  }*/


.bnr-meihouwa { width: fit-content; margin: min(10vw,100px) auto 0; }

.brnarea { padding: 80px 0 90px; text-align: center; }
.brnarea a { display: block; }
.brnarea a + a { margin-top: 40px; }

.important_notice { max-width: 900px; margin-top: 100px; padding: 2em 3em; background: #fdf1f1; }
.important_notice .ttl { margin-bottom: 10px; color: #d74040; }
.important_notice dl { margin-top: 1em; }
.important_notice dl div + div { margin-top: .5em; }
.important_notice dl dt { font-weight: 600; }

.topics { max-width: 900px; margin: 100px auto 0; padding: 2em 3em; background: #fdfaf1; }

.topics .ttl .en { color: #111; }

.newsList { 
    max-height: 150px;
    overflow-y: scroll; }

.newsList li { 
    border-bottom: 1px solid #dcdcdc; }
.newsList li em { 
    color: #d9a72f;
    font-weight: normal;
    letter-spacing: 0.08em; }


/*.slider { overflow: hidden; }
.slider img { width: 100%; }*/
.slide { position:relative; width:100%; }
.back_slide { width:100%; min-height:100vh; }


/*about ------------- */
.about { position: relative; background: #fdfaf1; z-index: 0; }
.about::after { content: ""; position: absolute; left: 0; top: 0; width: 60%; height: 100%; background: #f4f0e2; z-index: -1; }
.about_inner { justify-content: flex-end; -webkit-justify-content: flex-end; z-index: 2;}

.about .txtBox { width: 35%; margin-right: 5%;}
.about .title { margin-bottom: 20px;}
.about .title span { position: relative;padding-top: 60px; }
.about .title span::before { content: ""; position: absolute; top: 0; left: 50%;
    background: url("../img/deco_01.png") no-repeat; width: 34px; height:45px;
    transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); }
.about .txtBox .txt {text-align: left; margin: 1em auto; }
.about .imgArea { width: 48%;}
.about .imgArea .imgBox { position: relative;}
.about .imgArea .imgBox img { width: 100%;}
.about .imgArea .btnBox { position: absolute; margin-top: 0; bottom: -28px; right: 40px; }
.about .imgArea .btnBox a {background: rgba(215, 64, 64, 0.95); }



/*works ------------- */
.works { position: relative; background: url("../img/bg_washi.png") center /cover; z-index:0;  }
.works::before { content: ""; position: absolute; 
top: 0; left: 0; right: 0; background: url("../img/top/bg_works.jpg"); width: 100%; height: 397px;  z-index:-1; }
.works .ttl { color: #fff; }

.workList { z-index: 1; }
.workList li { width: 22%; }
.workList .imgBox { position: relative; }
.workList .imgBox h3 { position: absolute; top: 20px; left: 10px;font-size: 24px; color: #fff; z-index: 2; }
.workList li h3 span { font-size: 14px; }
.workList .imgBox .more { position: absolute; bottom: 15px; right: 15px; 
    padding-right: 50px; color: #fff; }
.workList .imgBox .more::after { content: ""; position: absolute; right: 0; top: 10px;
    background: url("../img/arrow_w.png") no-repeat; width: 36px; height: 6px; }
.workList .imgBox figure { display: block; border: 2px solid #aa944a;
    transition-duration: 0.3s; overflow: hidden; }
.workList .imgBox img:hover { transform: scale(1.1); transition-duration: 0.3s; }
.workList .txtBox { margin: 1.5em auto; font-size: 14px; }




/*product ------------- */
.product { background: url("../img/top/bg_product.jpg") no-repeat fixed center center / cover; height: 300px; }
.product .ttl { margin-top: 60px; color: #fff; }
.product .ttl span { position: relative; }
.product .ttl span::before { content: ""; position: absolute; top: -55px;left: 50%;
    transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0);
    background: url("../img/deco_02.png") no-repeat; width: 34px; height: 45px;}
.product .txt { text-align: center; color: #fff; line-height: 2; letter-spacing: 1px; font-size: 17px; }



/*souda ------------- */
#wrapper > section.souda { background: url("../img/top/osyo.png") no-repeat right; }
.souda .txtBox { width: 45%; margin-left: 0; margin-right: 0; }


/*blog ------------- */
#wrapper > section.blog { padding: 100px 0; }
.blog { background: url("../img/top/bg_stripe.jpg"); 
/*    background-color: #202020;
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.3, rgba(255,255,255,.05)), color-stop(.3, transparent), to(transparent));
    -webkit-background-size: 5px; z-index: 0;*/
}
.blog .title { float: left; }
.blog .title span { position: relative;padding-top: 40px; }
.blog .title span::before { content: ""; position: absolute; top: 0; left: 50%;
    background: url("../img/top/icon_bell.svg") no-repeat; width: 20px; height: 24px;
    transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); }
.blog .title { color: #fff; }

.blogBox { float: right; width: 87%;margin-right: 0;}
.blogBox li { width: 45%; margin-bottom: 50px;}
.blogBox li figure { float: left; border: 1px solid #a0a0a0; }
.blogBox li figure img { width: 100%; }
.blogBox .txtBox { float: right; padding-left: 13px; width: 60%; margin-right: 0; color: #fff; }
.blogBox .txtBox .txt { font-size: 13px; margin-bottom: 10px; }
.blogBox .txtBox .blog-ttl { font-size: 15px; font-weight: bold; line-height: 1.5; margin: .8em auto .5em; }

.ellipsis {position: relative;height: 46px;overflow: hidden;}
.ellipsis:before, .ellipsis:after {position: absolute;background: #232323;}
.ellipsis:before {content: "･･･";bottom: 0;right: 0; width: 26px;}
.ellipsis:after {content: "";width: 100%;height: 100%;}

.cat { padding: 0 5px; font-size: 13px; color: #0b0a14; background: #e6b422; }
.blue { background: #8a9cba; }
.yellow { background: #e6b422; }
.green { background: #80c269; }
.purple { background: #aa89bd; }


/*insta ------------- */
.insta .ttl .en { color: #aa944a; }
.instaList { max-width: 750px; margin: 0 auto; }
.instaList li { width: 24%; margin-bottom: 10px; }






/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  
  .mv-slide li {
  margin: 0 20px;
}
  
  
  
  .newsList li { padding: 1.25em 1em 1.25em 9.375em;
    margin: 0;
    position: relative; }
  
  .newsList li em { position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }

}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {
  
  .topics { display: flex; display: -webkit-flex; flex-wrap: wrap; align-items: center; }
  .topics .ttl { width: 30%; margin-bottom: 0; }
  .topics .newsList { -webkit-box-flex: 1; flex: 1; }

}

/* 1280px以上(PC) 
@media screen and (min-width: 1280px) {
  .slider { max-height: 860px; }
}*/


/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {
  
  /* main ------------- */
  .mv_lead { -webkit-transform: translate(0,-45%); transform: translate(0,-45%); }
  /*.mv_lead .lead img { max-height: 310px; }*/
  .mv_lead .en { margin-top: 25px; font-size: 10px;letter-spacing: 0; }
  
  .about .imgArea { width: 55%; }
  
  .workList .imgBox img { width: 100%; }
  
  #wrapper > section.souda { padding: 100px 0 ;  }


}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {
  /*.mv_lead .lead img { max-height: 230px; }*/
  .mv_lead .en {  margin-top: 3em; }
  
  .topics .ttl { text-align: center; }
  
  .product { height: 120px; background-attachment: scroll; }
  
  
  .blogBox li { width: 48%; }
  .blogBox .txtBox { width: 48%; padding-left: 0; }

}

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

  .bnr-meihouwa { margin: min(10vw,100px) 3% 0; }
}



/* 900以下 */
@media screen and (max-width: 900px) {
  
  .topics { margin: 100px 3% 0; }

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){

  h2 { font-weight: bold; }

  .mv_area { padding-top: 50px; }
  .mv_lead { right: 50%; transform: translate(50%, -50%); -webkit-transform: translate(50%, -50%); }
  .mv_lead .lead { text-align: center; margin-bottom: 1.5em;}
  .mv_lead .lead img { max-height:320px; }
  .mv_lead .en { text-align: center; line-height: 1.5; }
  
  .important_notice { margin: 60px 15px 0; padding: 1.5em 1em 2em; }
  .important_notice .txt { text-align: left; }
  
  .topics { padding: 2em 2em 3em; }
  .topics .ttl { margin-bottom: 0; }
  .newsList li { padding: 1em; }
  .newsList li em { display: block; }
  
  .brnarea { padding: 40px 0 50px;}
  .brnarea a + a { margin-top: 20px; }
  
  
  /*works*/
  .works::before { height: 220px; background: url(../img/top/bg_works.jpg) no-repeat center bottom /cover; }
  .workList { display: block; }
  .workList li { width:100%; margin:0 auto 30px;}
  .workList .imgBox figure { max-height: 220px; }
  .workList .txtBox { display: none; }


  /*about*/
  #wrapper > section.about { padding: 60px 0 80px; }
  .about .title { position: relative; width: 40px; margin: 0 auto;text-align: center; }
  .about .title .ttl { margin-right: 40px; display: inline-block; }
  .about .title .ttl span { text-align: center;
    text-orientation: upright; 
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -ms-writing-mode: vertical-rl;
     writing-mode: vertical-rl; 
  }
  .about .title .en { display: none; }
  .about .title::after { content: "About"; position: absolute; bottom: -20px; right: 0;
   color: #aa944a; font-size: 14px; }
  .about .txtBox { width: 25%; margin-right:0; text-align: center;}
  .about .txtBox .txt { display: none; }
  .about .imgArea { width: 71%;}
  .about .imgArea .imgBox { height: 100%;  }
  .about .imgArea .imgBox figure {overflow: hidden;}
  .about .imgArea .imgBox img { width: auto; max-width: 678px; }
  .about .imgArea .btnBox { bottom: -25px; right: 0; }

  /*souda*/
  #wrapper > section.souda { padding: 40px 0 210px; background: url(../img/top/osyo.png) no-repeat center bottom /80%; }
  .souda .txtBox { width: 100%; }
  .souda .btnBox  { margin-top: 30px; text-align: center;}
  
  /*product*/
  .product { display: none; }
  
  /*blog*/
  #wrapper > section.blog {padding:80px 0 60px; }
  .blog .title { float: none; margin-bottom: 30px; }
  .blogBox .txtBox h3 { margin: 1em 0 .5em; }
  .blogBox { float: none; width: 100%; }
  .blogBox li {width: 45%; margin-bottom: 30px; }
  .blogBox li figure {float: none;  }
  .blogBox .txtBox {float: none; width: 100%;}
  
  /*insta*/
  .instaList li { width: 32%; }
  .instaList li:last-child,.instaList li:nth-last-of-type(2) { display: none; }

}