@charset "utf-8";
/* CSS Document */

/* ・ 2018-12 additiont */

/* ==============================
    ・ index
================================= */
/* ・overwrite */
.flexslider {
  margin: 0;
}
.flex-direction-nav a {
    text-decoration: none;
    display: block;
    width: 65px;
    height: 118px;
    margin: -20px 0 0;
    position: absolute;
    top: 45%;
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
}
.flex-direction-nav a.flex-next:before {
    content: url(../images/top/img_next_pc.png);
    background: url(../images/top/img_next_pc.png);
}
.flex-direction-nav a:before {
    font-family: "flexslider-icon";
    font-size: 40px;
    display: inline-block;
    content: url(../images/top/img_prev_pc.png);
    background: url(../images/top/img_prev_pc.png);
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    width: 65px;
    height: 118px;
}
/* -----------------・overwrite */
#contents .bold {
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
  font-weight: bold;
}
/* ==============================
    ・ .header
================================= */
#contents>header::after {
  position: absolute;
  top: 90px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  content: "";
  display: block;
  width: 100vw;
  height: 1px;
  background: #bababa;
}
/* ==============================
    ・ .sec-main-img
================================= */

.sec-main-img .slides li {
  position: relative;
}

.sec-main-img .btnDetails {
  position: absolute;
  bottom: 100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  width: 440px;
  height: 60px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 60px;
  border: 1px solid #fff;
  z-index: 1000;
}
.sec-main-img li.slide01 .btnDetails:hover{
  background: #392a00;
}
.sec-main-img li.slide02 .btnDetails:hover{
  background: #c88282;
}
.sec-main-img li.slide03 .btnDetails:hover{
  background: #7a6854;
}
.sec-main-img li.slide04 .btnDetails:hover{
  background: #3c4637;
}
.sec-main-img li.slide05 .btnDetails:hover{
  background: #5F6059;
}
/* ==============================
  ・ #product.sec-product
================================= */
.sec-product {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding-top: 158px;
  padding-bottom: 148px;
  text-align: center;
  box-sizing: border-box;
  border-bottom: 1px solid #bababa;
}
.sec-product .secRow {
	width: 92%;
	max-width: 1408px;
	margin: 0 auto;
}
.sec-product a {
  display: block;
  width: 100%;
  height: auto;
  color: #000;
  transition: all 0.3s ease-in-out;
}
.sec-product h2 {
  width: 100%;
  margin-bottom: 20px;
}
.sec-product h3 {
  margin-bottom: 30px;
  font-size: 20px;
  color: #000;
  font-weight: bold;
}
.sec-product .sec005 h3 {
  font-size: 24px;
}
.sec-product p {
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 2;
}
.sec-product .boxContent {
  position: relative;
  display: table;
	width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 22px;
	box-sizing: border-box;
}
.sec-product .boxContent a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
.sec-product .sec001,
.sec-product .sec002,
.sec-product .sec003,
.sec-product .sec004 {
  width: 50%;
	max-width: 704px;
  float: left;
}
.sec-product .boxImg {
  display: table-cell;
  box-sizing: border-box;
}
.sec-product .boxContent .boxImg {
  width: 47%;
	max-width: 319px;
}
.sec-product .sec005 .boxImg {
	width: 47%;
	max-width: 660px;
}
.sec-product .boxContent .boxImg img {
  width: 100%;
  height: auto;
}
.sec-product .boxDesc {
  display: table-cell;
  box-sizing: border-box;
  text-align: justify;
}
.sec-product .boxContent .boxDesc {
  width: 50%;
  vertical-align: bottom;
  padding-left: 22px;
}
.sec-product .sec005 .boxDesc {
  width: 50%;
  padding-left: 44px;
  vertical-align: middle;
}
.sec-product .btnProduct {
  display: block;
  width: 100%;
  height: 60px;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 60px;
  text-align: center;
	box-sizing: border-box;
}
.sec-product .boxContent>a:hover::after {
  /*background: rgba(211,0,18,.1); ホバー#d30012の10%*/
  background: rgba(0,0,0,.1);
  z-index: 100;
}

.sec-product .sec001 .btnProduct {
  border: 1px solid #392a00;
  color: #392a00;
}
.sec-product .sec002 .btnProduct {
  border: 1px solid #c88282;
  color: #c88282
}
.sec-product .sec003 .btnProduct {
  border: 1px solid #7a6854;
  color: #7a6854;
}
.sec-product .sec004 .btnProduct {
  border: 1px solid #3c4637;
  color: #3c4637;
}
.sec-product .sec005 .btnProduct {
  border: 1px solid #5F6059;
  color: #5F6059;
}
.sec-product .sec001>a:hover .btnProduct {
  background: #392a00;
  color: #fff;
}
.sec-product .sec002>a:hover .btnProduct {
  background: #c88282;
  color: #fff
}
.sec-product .sec003>a:hover .btnProduct{
  background: #7a6854;
  color: #fff
}
.sec-product .sec004>a:hover .btnProduct{
  background: #3c4637;
  color: #fff
}
.sec-product .sec005>a:hover .btnProduct{
  background: #5F6059;
  color: #fff
}
@media (max-width: 1280px) {
  .sec-product .boxContent h3 {
    font-size: 18px;
  }
  .sec-product .sec005 h3 {
    font-size: 22px;
  }
  .sec-product .sec005 .boxDesc {
    padding-right: 0;
  }
  .sec-product .sec005 {
    width: 100%;
  }
  .sec-product div.clearfix {
    width: 100%;
  }
  .sec-product p {
    font-size: 13px;
  }
  .sec-product .btnProduct {
    height: 40px;
    font-size: 16px;
    line-height: 40px;
  }
  .sec-product .boxContent .boxDesc {
    padding-right: 0;
  }
}
/* ==============================
 ・ .sec-about
================================= */
.sec-about {
  border-bottom: 1px solid #bababa;
}
.concept-logo {
  padding-right: 10px;
}
@media (max-width: 1280px) {
  .concept-txt p {
      padding-right: 40px;
  }
}
/* ==============================
 ・ .sec-contents
================================= */
.sec-contents {
  width: 100%;
  margin: 0 auto;
  padding-top: 210px;
  padding-bottom: 190px;
  text-align: center;
  box-sizing: border-box;
}
.sec-contents>div {
  width: 81.15%;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.sec-contents>div>section {
  position: relative;
  width: 33%;
  padding: 20px;
  box-sizing: border-box;
}
.sec-contents>div>section>a {
  display: block;
  color: #000;
}
.sec-contents>div>section>a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
.sec-contents>div>section>a:hover::after {  
  /*background: rgba(211,0,18,.1); ホバー#d30012の10%*/
  background: rgba(0,0,0,.1);
  z-index: 100;
}
.sec-contents>div>section>a p {
  text-align: justify;
  line-height: 2;
}
.sec-contents img {
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}
.sec-contents h3 {
  font-size: 24px;
  margin-bottom: 30px;
  text-align: left;
}
.sec-contents span {
  margin-left: 10px;
}
.sec-footerSlide {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 0;
}
.sec-footerSlide .carousel {
    max-width: 100%;
    max-height: auto;
    margin: 0 auto;
}
/* overwrite */
.sec-footerSlide .flexslider {
    margin: 0 0 80px;
}
/* overwrite */
.sec-footerSlide .flex-direction-nav a {
    top: 40%;
}
.sec-footerSlide .flex-control-thumbs li {
    width: 100px;
    float: left;
    margin: 0 9px;
}
/* ==============================
  ・footer
================================= */
/* overwrite */
#index footer {
  margin-top: 0;
}
/* ==============================
  ・トップへ戻るボタン
================================= */
.btnTop a {
  display: block;
  width: 600px;
  /*height: 90px;*/
  height: 84px;
  margin: 40px auto 0;
  border: 1px solid #7a6854;
  border-radius: 10px;
  color: #7a6854;
  /*font-size: 30px;*/
  font-size: 20px;
  line-height: 84px;
  text-align: center;  
}
.btnTop a:hover {
  background: #7a6854;
  color: #fff;
  text-align: center;  
}
/* ---------------------------------------------
  ・ .Developer
------------------------------------------------ */
.sec-developer {  
    padding-top: 150px;
    padding-bottom: 180px;
}
.sec-developer  h2 {
  margin-bottom: 150px;
  font-size: 64px;
}
/* ---------------------------------------------
  ・ .story
------------------------------------------------ */
/* overwrite */
.sec-story {
  margin-top: 0;
  padding-top: 150px;
  padding-bottom: 180px;
}
.sec-story  h2 {
  margin-bottom: 150px;
  font-size: 50px;
}
.box-story {
  max-width: 1540px;
}
.storyImg {
  display: table-cell;
  width: 50%;
  height: auto;
  margin: 0;
}
.storyImg  img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.storyImg  img:first-of-type {
  margin-bottom: 50px;
}
/* ==============================
  ・タブ設定
================================= */
.rowBox {
  display: table;
  max-width: 1540px;
  margin: 0 auto 200px;
  padding-left: 80px;
  padding-right: 80px;
}
.secTab,
.secTab2 {
  display: table-cell;
  width: 50%;
  vertical-align: top;
}
.secTab {
  padding-right: 90px;
}
.secTab2 {
  padding-left: 90px;
}
.secTab .tab,
.secTab2 .tab {
  width: 100%;
  overflow:hidden;
  margin: 0 auto 50px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.secTab .tab li,
.secTab2 .tab li {
  width: 19%;
  height: 64px;
  text-align: center;
  line-height: 64px;
  border: 1px solid #7a6854;
  font-size: 28px;
  color: #7a6854;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.secTab .tab li:last-of-type,
.secTab2 .tab li:last-of-type {
  margin-right: 0;
}
.secTab .tab li.select,
.secTab2 .tab li.select {
  background:#7a6854;
  color: #fff;
}
.secTab .tab li:hover,
.secTab2 .tab li:hover {
  background:#7a6854;
  color: #fff;
}
.secTab .content,
.secTab2 .content {
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.secTab .content {
  min-height: 325px;
}
.secTab2 .content {
  min-height: 285px;
}
.secTab .content li,
.secTab2 .content li {
  line-height: 2.28;
  margin-bottom: 30px;
}
.hide { 
  display:none;
}
.secTab p,
.secTab2 p {
  margin-top: 30px;
  margin-bottom: 50px;
}

@media (max-width: 1280px) {
  .rowBox {
    max-width: 100%;
  }
  .secTab {
    padding-right: 0;
  }
  .secTab2 {
    padding-left: 0;
  }
  .secTab,
  .secTab2 {
    display: block;
    width: 100%;
    vertical-align: top;
  }
  .storyImg {
    display: block;
    width: 100%;
    margin-bottom: 30px;
  }
  .secTab .content {
    min-height: 280px;
  }
  .secTab2 .content {
    min-height: 235px;
  }
}
/* ・modal contents 001 003お手入れ page.css overwrite
---------------------------------------------------------- */
.box-flex {
  display: flex;
  justify-content: space-between;
  margin-top: 120px;
}
.box-flex:first-of-type {
  margin-top: 60px;
}
.box-flex p {
  padding-left: 30px;
}
#con001.modal-content {
  display:none;
  position: relative;
  height: 90%;
  overflow: auto;
  text-align: left;
  vertical-align: middle;
  padding: 18px;
  width: 75%;/*596*/
  margin-top: 25px;
  margin-bottom: 25px;
  background: #fff;
  cursor: auto;
  white-space: normal;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;

}
#con001 .modal-content-innar {
  position: relative;
  overflow: auto;
     margin: 0 auto; 
     width: 80%; 
     background-color: #fff; 
     height: auto; 
}
#con001 .modal-close {
  position: fixed;
  z-index: 99999999;
  top: 7%;
  right: 16%;
  line-height: 50px;
  width: 50px;
  cursor: pointer;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: 200;
  background: rgba(128, 128, 128, 1.0);
  color: #fff;
  border: none;
  padding: 0;
  font-size: 20px;
  font-size: 2.0rem;
  border-radius: 25px;
}
#con001 .modal-close:hover {
    cursor:pointer;
    color:#fff;
}
#con001 header {
  position: static;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 60px auto 0;
  padding: 0;
  text-align: center;
  color: #000;
}
#con001 header h2 {
  font-size: 36px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 100px;
}
#con001 header img {
  width: 100%;
  height: auto;
}
#con001 header p {
  width: 49%;
  text-align: justify;
}
#con001 header .tab {
  text-align: center;
}
#con001 header .tab ul,
#con001 .tab-part ul,
#con001 .tab-partFooter ul {
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
}
#con001 header .tab li,
#con001 .tab-part li, 
#con001 .tab-partFooter li {
  width: 49%;
  margin-bottom: 18px;
  padding: 20px;
  font-size: 20px;
  border: 2px solid rgba(57,42,0,1);
  background: #fff;
  color: rgba(57,42,0,1);
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}
#con001 header .tab li.tab_current,
#con001 .tab-part li.tab-part_current,
#con001 .tab-partFooter li.tab-part_current {
  background: rgba(57,42,0,1);
  color: #fff;
}
/*#con001 .tab-partFooter li.tab-part_current,
#con001 .tab-partFooter li.tab-part_current {
  color: rgba(57,42,0,1);
}*/
#con001 header .tab li:hover,
#con001 .tab-part li:hover, 
#con001 .tab-partFooter li:hover {
  background: rgba(57,42,0,1);
  color: #fff;
}
/* お手入れコンテンツ */
.displayNone {
  display: none;
}
#con001 section {
  margin: 100px auto;
}
#con001 section h3 {
  font-size: 20px;
}
#con001 .tab-part ul,
#con001 .tab-partFooter ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 70px;
}
#con001 .tab-part li,
#con001 .tab-partFooter li {
  font-size: 18px;
  text-align: center;
}

#con001 section.care {
  margin: 40 auto;
  text-align: center;
}
#con001 section.care h2 {
  font-size: 34px;
  margin-bottom: 40px;
}
#con001 section.care h3 {
  font-size: 30px;
  margin-bottom: 20px;
  text-align: left;
}
#con001 section.care>ul {
  margin-bottom: 70px;
}
#con001 section.care>ul:after {
content: "";
clear: both;
display: block;
}
#con001 section.care>ul li {
  float: left;
  font-size: 18px;
  line-height: 2.2;
  letter-spacing: 0.1em;
  text-align: left;
}
#con001 section.care>ul li::before {
  content: "・";
  display: inline-block;
  width: 18px;
  height: 18px;
}
#con001 section.care>ul li {
width: 48.56%;
margin-right: 2.88%;
}
#con001 section.care>ul li:nth-child(2n) {
margin-right: 0;
}
#con001 section.care-part h2 {
  text-align: left;
  margin-bottom: 15px;
}
#con001 section.care-part .box-flex div {
  position: relative;
  width: 49%;
}
#con001 section.care-part p {
  position: absolute;
  top: 50%;
    -webkit-transform: translateY(-50%);
	transform: translateY(-50%);
  text-align: justify;
  letter-spacing: 0;
}
#con001 section.care-part img {  
  width: 100%;
  height: auto;
  line-height: 0;
}
#con001 .btn-care001 {
  display: block;
  width: 50%;
  margin: 100px auto;
  padding: 20px;
  font-size: 20px;
  color: #562e14;
  text-align: center;
  letter-spacing: .1em;
  border: 2px solid #562e14;
  background: #fff;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
#con001 .btn-care001:hover {
  background-color: rgba(57,42,0,1);
  color: #fff;
}