@charset "UTF-8";
@media screen and (max-width: 640px) { #contents { overflow: hidden; }
  #contents h3 { margin: 0 0 45px; padding: 35px 20px 23px; line-height: 1.6; font-size: 23px; } }
.sp_txt_ml05em { display: inline-block; margin-left: 0.5em; margin-right: -0.5em; }

/**************************************
feature
***************************************/
#contents { width: 960px; }

@media screen and (max-width: 640px) { #contents h4 { padding: 0 !important; margin-top: 2rem !important; } }
.img-responsive { width: 100%; height: auto; }

h4.midashi { font-size: 1.5rem; font-weight: normal; margin-top: 4rem; margin-bottom: 3rem; text-align: center; }
h4.midashi::after { content: ""; display: block; width: 100px; height: 1px; background: #000; margin: 0.5rem auto 0; }

p { line-height: 1.6; }

.note { font-size: 0.65rem; line-height: 1.5; }

div.note, p.note { line-height: 1.5; margin-top: 10px; }

.sp-item { display: none; }

@media screen and (max-width: 640px) { .pc-item { display: none; }
  .sp-item { display: inherit; } }
.midashi2 { margin: 0 0 20px; font-size: 180%; font-weight: normal; line-height: 1.4; letter-spacing: 4px; -webkit-font-smoothing: antialiased; }
.midashi2.center { text-align: center; }
.midashi2 small { display: inline-block; vertical-align: middle; margin: 0 5px; box-sizing: border-box; }
.midashi2 small.label1 { background: #595757; color: #fff; padding: 5px; line-height: 1; text-align: center; text-indent: 4px; }
.midashi2 small.label2 { background: #fff; color: #595757; border: 1px solid; padding: 5px; line-height: 1; text-align: center; text-indent: 4px; }
@media screen and (max-width: 640px) { .midashi2 { font-size: 20px; } }

.titleBox { padding: 70px 0 30px; width: 100%; }

.midashi3 { margin: 0 0 10px; font-size: 160%; font-weight: normal; line-height: 1.4; letter-spacing: 4px; -webkit-font-smoothing: antialiased; }
@media screen and (max-width: 640px) { .midashi3 { padding: 0 30px; } }

.text-normal { margin: 0; padding: 0; font-size: 16px; line-height: 1.8; letter-spacing: 2px; }

.caption-title { isplay: block; margin: 0 0 5px; font-size: 16px; letter-spacing: 2px; -webkit-font-smoothing: antialiased; }

p.lead { font-size: 100%; line-height: 1.8; }
p.lead + .lead { margin-top: 10px; }

h6 { font-size: 110%; font-weight: bold; margin-bottom: 10px; line-height: 1.5; }
h6.normal { font-weight: normal; }

.txt_note { font-size: 16px; line-height: 1.8; letter-spacing: 2px; }
@media screen and (max-width: 640px) { .txt_note { font-size: 100%; line-height: 1.8; letter-spacing: 0; } }

.column { background: #fff; box-sizing: border-box; border: 1px solid #000; padding: 20px; }

@media screen and (max-width: 640px) { .feature p.lead { padding: 0; } }
.caption { font-size: 0.75rem; }

.aw { display: inline-block; }

.txtArea h5 { font-size: 0.95rem; margin-bottom: 0.2rem; }
@media screen and (max-width: 640px) { .txtArea h5 { font-size: 0.85rem; } }

section { margin-bottom: 7rem; }
@media screen and (max-width: 640px) { section { width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 4rem; }
  section .pic img { max-width: none !important; } }

.flexBox { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: stretch; align-items: stretch; align-items: flex-start; width: 100%; }
.flexBox * { min-height: 0%; }
.flexBox.box3 > li, .flexBox.box3 > div, .flexBox.box3 > p { width: 31%; }
.flexBox.box2 > li, .flexBox.box2 > div, .flexBox.box2 > p { width: 48%; }
.flexBox.box4 > li, .flexBox.box4 > div, .flexBox.box4 > p { width: 24%; }
@media screen and (max-width: 640px) { .flexBox.box3 > li, .flexBox.box3 > div, .flexBox.box3 > p { width: 100%; margin-bottom: 20px; }
  .flexBox.box2 > li, .flexBox.box2 > div, .flexBox.box2 > p { width: 100%; margin-bottom: 20px; }
  .flexBox.box4 > li, .flexBox.box4 > div, .flexBox.box4 > p { width: 48%; margin-bottom: 20px; } }

.featureSecTitIcon { display: flex; justify-content: center; margin-top: 48px; margin-bottom: 30px; }
.featureSecTitIcon span { width: 240px; font-size: 24px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: 2.4px; text-align: center; color: #fff; padding: 6px 9px; border-radius: 3px; background-color: #5a4e49; }
@media screen and (max-width: 640px) { .featureSecTitIcon { margin-top: 30px; }
  .featureSecTitIcon span { font-size: 18px; line-height: 1.3; letter-spacing: 1.8px; color: #fff; } }

/**********************************
mainVisual
***********************************/
#contents .mainVisual { position: relative; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; margin-bottom: 70px; z-index: 100; }
#contents .mainVisual * { box-sizing: border-box; }
#contents .mainVisual > figure { width: 639px; }
#contents .mainVisual .photo { max-width: 554px; }
@media screen and (max-width: 640px) { #contents .mainVisual { flex-wrap: wrap; }
  #contents .mainVisual .photo { width: 100%; max-width: none; } }
#contents .mainVisual .featureMvHd { background-color: #eee; height: 130px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; }
#contents .mainVisual .featureMvHd h2 { font-size: 32px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.3; letter-spacing: 3.2px; text-align: center; color: #000; margin-bottom: 0 !important; }
#contents .mainVisual .featureMvHd h2::after { display: block; content: ""; width: 75px; height: 2px; margin: 13px auto 19px; background-color: #000; }
#contents .mainVisual .featureMvHd p { font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.3; letter-spacing: 1.59px; text-align: center; color: #000; }
#contents .mainVisual .lNav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 403px; }
#contents .mainVisual .lNav > li { background-color: #FFF; zoom: 1; display: block; float: none; margin: 0 0 3px; width: calc(50% - 1.5px); min-height: 0; }
#contents .mainVisual .lNav > li a { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; padding: 0; width: 100%; height: calc(370px / 4); background-image: url("https://www.toclas.co.jp/common/images/icon02.png"); background-position: center bottom 12px; background-repeat: no-repeat; }
#contents .mainVisual .lNav > li a > span { display: block; margin: 0; padding: 0 10px; background-image: none; }
@media screen and (max-width: 640px) { #contents .mainVisual .lNav { width: 100%; } }

figure.photo-max img { display: block; width: 100%; height: auto; }

.featureMv { display: flex; margin-bottom: 80px; min-height: 1px; }
.featureMv::after { content: "."; display: block; clear: both; height: 0px; visibility: hidden; }
.featureMv .photo { max-width: 554px; }
@media screen and (max-width: 640px) { .featureMv { flex-wrap: wrap; }
  .featureMv .photo { width: 100%; max-width: none; } }

.featureMvHd { background-color: #eee; height: 130px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; }
.featureMvHd h2 { font-size: 32px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.3; letter-spacing: 3.2px; text-align: center; color: #000; margin-bottom: 0 !important; }
.featureMvHd h2::after { display: block; content: ""; width: 75px; height: 2px; margin: 13px auto 19px; background-color: #000; }
.featureMvHd p { font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.3; letter-spacing: 1.59px; text-align: center; color: #000; }

.featureMvAnchor { width: 400px; padding-left: 5px; }
.featureMvAnchor dd { background-color: #fff; height: 45px; font-size: 13px; line-height: 1.69; letter-spacing: normal; text-align: center; color: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 3px; }
.featureMvAnchor dd a { background-color: #fff; height: 100%; width: 100%; font-size: 13px; line-height: 1.69; letter-spacing: normal; text-align: center; color: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; transition: .3s; }
.featureMvAnchor dd a:hover { background: rgba(0, 0, 0, 0.7); color: #fff; }
.featureMvAnchor dd:first-child { margin-top: 0; /*height: 42px;*/ }
@media screen and (max-width: 640px) { .featureMvAnchor { display: none; } }

.localNav ul { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: stretch; align-items: stretch; }
.localNav ul * { min-height: 0%; }
.localNav ul li { width: 24%; margin-bottom: 0.5rem; }
.localNav ul li a { display: block; width: 100%; text-align: center; background: #fff; color: #000; text-decoration: none; padding: 0.5rem 0; transition: .3s; }
.localNav ul li.current a, .localNav ul li:hover a { background: rgba(0, 0, 0, 0.7); color: #fff; }
@media screen and (max-width: 640px) { .localNav ul::after { content: ""; display: inline-block; width: 32%; }
  .localNav ul li { width: 32%; }
  .localNav ul li a { font-size: 2.8vw; } }

.block .block_title { margin-bottom: 1rem; /*@media screen and (max-width: $s-size) { .ttl01 { margin-bottom: 1rem; font-size: 1.3rem; line-height: 1.3; background:linear-gradient(transparent 80%, #ebebeb 80%); .num { font-size: 2rem; } } 
}*/ }
.block .block_title > div { display: inline-block; vertical-align: middle; }
.block .block_title .ttl01 { font-size: 1.5rem; margin-right: 1rem; margin-bottom: 1rem; background: linear-gradient(transparent 60%, #ebebeb 60%); }
.block .block_title .ttl01 .num { display: inline-block; vertical-align: middle; font-size: 3rem; line-height: 1; }
.block .block_title .ttl01 span { display: inline-block; vertical-align: middle; }
.block .block_title .ttl02 { font-size: 1.0rem; }
@media screen and (max-width: 640px) { .block .block_title .ttl01 { box-sizing: border-box; position: relative; font-size: 1.1rem; line-height: 1.3; padding-left: 3rem; padding-bottom: 0.2rem; width: 100%; background: linear-gradient(transparent 80%, #ebebeb 80%); }
  .block .block_title .ttl01 .num { position: absolute; top: 0; left: 0; font-size: 2rem; } }
.block > .flexBox li { width: 48%; margin-bottom: 2rem; }
.block > .flexBox li .itemTtl { margin-bottom: 1rem; }
.block > .flexBox li .itemTtl .txtArea { width: 60%; }
.block > .flexBox li .itemTtl .txtArea h5 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.block > .flexBox li .itemTtl .txtArea p { line-height: 1.5; }
.block > .flexBox li .itemTtl .fig { width: 30%; max-width: 138px; }
.block > .flexBox li .item { margin-bottom: 2rem; }
.block > .flexBox li .item > .pic { width: 48%; }
.block > .flexBox li .item > .txtArea { width: 48%; }
.block > .flexBox li .item > .txtArea .pic { margin-bottom: 0.8rem; }
.block > .flexBox li .item > .txtArea p { line-height: 1.5; }
.block > .flexBox li .item > .txtArea.w100 { width: 100%; }
.block > .flexBox li .item.item-herf { width: 48%; }
.block > .flexBox li .item-herf .itemTtl .txtArea { width: 100%; }
.block > .flexBox li .item-herf .itemTtl .fig { width: 100%; margin: 1rem auto 0.5rem; }
.block > .flexBox li .item-herf .pic { margin-bottom: 0.8rem; }
@media screen and (max-width: 640px) { .block > .flexBox li { width: 100%; margin-bottom: 2rem; } }

#door { border-top: 1px solid #333; padding-top: 4rem; margin-bottom: 5rem; }
#door .mainArea { margin-top: 40px; }
#door .mainArea li { width: 33%; }
#door .door1 { /*.midashi2 { margin-bottom: 0;
}*/ /*.txtArea { width: 48%; .lead { width: 100%; margin-bottom: 20px; } li { margin-bottom: 20px; }
}*/ }
#door .door1 .picArea { width: 48%; }
#door .door1 .txtArea { width: 48%; }
#door .door1 .txtArea .lead { width: 100%; margin-bottom: 20px; }
#door .door1 .txtArea .pic1 { width: 67%; }
#door .door1 .txtArea .pic2 { width: 26%; }
#door .door2 .picArea { width: 48%; }
#door .door2 .txtArea { width: 48%; }
#door .door2 .txtArea .lead { width: 100%; margin-bottom: 20px; }
#door .door2 .txtArea .pic1 { width: 67%; }
#door .door2 .txtArea .pic2 { width: 26%; }
#door .door3 .picArea { width: 48%; }
#door .door3 .txtArea { width: 48%; }
#door .door3 .txtArea .lead { width: 100%; margin-bottom: 20px; }
#door .door3 .txtArea .pic1 { width: 67%; }
#door .door3 .txtArea .pic2 { width: 26%; }
#door .door3 .noteArea { width: 100%; margin-top: 4rem; text-align: center; border: 1px solid #000; padding: 20px 0; }
@media screen and (min-width: 641px) { #door .door3 .noteArea p.lead + .lead { margin-top: 0; } }
@media screen and (max-width: 640px) { #door .mainArea { width: 112%; margin-left: -6%; /*li { width: 100%;
}*/ }
  #door .door1 .picArea { width: 100%; margin-bottom: 20px; }
  #door .door1 .txtArea { width: 100%; }
  #door .door1 .txtArea .flexBox.box3 > li { width: 31%; }
  #door .door2 .picArea { width: 100%; margin-bottom: 20px; }
  #door .door2 .txtArea { width: 100%; }
  #door .door2 .txtArea .lead { width: 100%; margin-bottom: 20px; }
  #door .door2 .txtArea .pic1 { width: 67%; }
  #door .door2 .txtArea .pic2 { width: 26%; }
  #door .door3 .picArea { width: 100%; margin-bottom: 20px; }
  #door .door3 .txtArea { width: 100%; }
  #door .door3 .txtArea .lead { width: 100%; margin-bottom: 20px; }
  #door .door3 .txtArea .pic1 { width: 67%; }
  #door .door3 .txtArea .pic2 { width: 26%; } }

#bc02.block > .flexBox li .itemTtl .fig { max-width: 68px; }

.txt_bottom { position: relative; }
.txt_bottom > .lead { position: absolute; bottom: 0; left: 52%; width: 48%; }

#counter .mainArea { margin-top: 40px; }
#counter .mainArea li { width: 49.5%; }
#counter .counter1 .picArea { width: 52%; }
#counter .counter1 .txtArea { width: 45%; }
#counter .counter1 .txtArea > .lead { width: 100%; margin-bottom: 20px; }
#counter .counter1 .txtArea .bg_w { background: #fff; padding: 20px; width: 100%; box-sizing: border-box; }
#counter .counter1 .txtArea ul { width: 63%; margin: auto; }
#counter .counter1 .txtArea ul.box1 { width: 48%; margin: auto; /*max-width: 130px;*/ }
#counter .counter1 .txtArea ul.box1 li { width: 100%; }
#counter .counter1 .txtArea .column { width: 100%; margin-top: 20px; }
#counter .counter1 .txtArea .column h6 { width: 100%; }
#counter .counter1 .txtArea .column .txt { width: 60%; }
#counter .counter1 .txtArea .column .pic { width: 35%; }
@media screen and (max-width: 640px) { #counter .mainArea { width: 112%; margin-left: -6%; /*li { width: 100%;
}*/ }
  #counter .counter1 .picArea { width: 100%; margin-bottom: 20px; }
  #counter .counter1 .txtArea { width: 100%; }
  #counter .counter1 .txtArea .bg_w { padding-bottom: 10px; }
  #counter .counter1 .txtArea ul { width: 100%; }
  #counter .counter1 .txtArea ul li { width: 24% !important; }
  #counter .counter1 .txtArea ul li p.lead { font-size: 7.5px; line-height: 1.3; margin-top: 5px; }
  #counter .counter1 .txtArea ul.box1 { width: 40%; }
  #counter .counter1 .txtArea ul.box1 li { width: 100% !important; padding-bottom: 10px; }
  #counter .counter1 .txtArea ul.box1 li p.lead { font-size: 10px; }
  #counter .counter1 .txtArea .column { width: 100%; margin-top: 20px; }
  #counter .counter1 .txtArea .column h6 { width: 100%; }
  #counter .counter1 .txtArea .column .txt { width: 100%; margin-bottom: 20px; }
  #counter .counter1 .txtArea .column .pic { width: 65%; margin: auto; } }

#bowl { border-top: 1px solid #333; padding-top: 4rem; }
#bowl .mainArea { margin-top: 40px; }
#bowl .mainArea li { width: 49.5%; }
#bowl .bowl1 .picArea { width: 47.5%; }
#bowl .bowl1 .txtArea { width: 49.5%; }
#bowl .bowl1 .txtArea ul { width: 100%; }
#bowl .bowl1 .txtArea ul li { margin-bottom: 20px; }
#bowl .bowl1 .txtArea ul li .txt { width: 49%; order: 2; }
#bowl .bowl1 .txtArea ul li .pic { width: 47%; order: 1; }
#bowl .bowl1 .dekki { position: relative; /*.lead { position: absolute; left: 52%; width: 48%; &.lead1 { bottom: 55%; } &.lead2 { bottom: 4%; }
}*/ }
#bowl .column h6 { width: 100%; }
#bowl .column .pic { width: 24%; }
#bowl .column p.lead { width: 24%; }
@media screen and (max-width: 640px) { #bowl .mainArea { width: 112%; margin-left: -6%; /*li { width: 100%;
}*/ }
  #bowl .bowl1 .picArea { width: 100%; margin-bottom: 20px; }
  #bowl .bowl1 .txtArea { width: 100%; }
  #bowl .bowl1 .txtArea ul li .txt { order: 2; }
  #bowl .bowl1 .txtArea ul li .pic { order: 1; }
  #bowl .column h6 { width: 100%; }
  #bowl .column .pic { width: 31%; }
  #bowl .column p.lead { width: 100%; margin-top: 10px; } }

#basecabinet { border-top: 1px solid #333; padding-top: 1rem; }
#basecabinet .mainArea { margin-top: 40px; }
#basecabinet .mainArea li:nth-of-type(1) { width: 40%; }
#basecabinet .mainArea li:nth-of-type(2) { width: 58.5%; }
#basecabinet .base1 .titleBox { padding-top: 40px; }
#basecabinet .base1 > ul { width: 100%; align-items: flex-start; }
#basecabinet .base1 > ul > li { width: 39%; }
#basecabinet .base1 > ul > li:nth-of-type(1) { width: 39%; }
#basecabinet .base1 > ul > li:nth-of-type(2) { width: 58%; }
#basecabinet .base1 > ul > li .item { width: 100%; align-items: flex-start; margin-bottom: 20px; border-bottom: 1px dashed #ccc; padding-bottom: 20px; }
#basecabinet .base1 > ul > li .item:last-child { border-bottom: none; }
#basecabinet .base1 > ul > li .item .info { width: 31%; }
#basecabinet .base1 > ul > li .item .info > h6, #basecabinet .base1 > ul > li .item .info > p.lead, #basecabinet .base1 > ul > li .item .info .fig { text-align: left; }
#basecabinet .base1 > ul > li .item .info .fig { height: 50px; margin: 20px auto; }
#basecabinet .base1 > ul > li .item .info .fig .pic { height: 100%; }
#basecabinet .base1 > ul > li .item .info .fig .pic img { height: 100%; width: auto; }
#basecabinet .base1 > ul > li .item > ul { width: 68%; }
#basecabinet .base1 > ul > li .item li { margin-bottom: 10px; width: 100%; }
#basecabinet .base1 > ul > li .item li .txt { width: 67%; order: 2; }
#basecabinet .base1 > ul > li .item li .txt.w100 { width: 100%; }
#basecabinet .base1 > ul > li .item li .txt.w45 { width: 45%; }
#basecabinet .base1 > ul > li .item li .pic { width: 26%; order: 1; margin: auto; }
#basecabinet .base1 > ul > li .item li .pic.w100 { width: 100%; }
#basecabinet .base1 > ul > li .item li .pic.w80 { width: 80%; }
#basecabinet .base1 > ul > li .item li .pic.w60 { width: 60%; }
#basecabinet .base1 > ul > li .item li .pic.w50 { width: 50%; }
#basecabinet .base1 > ul > li .item li.openCab { align-items: flex-end; }
#basecabinet .base1 > ul > li .item li.openCab .pic { margin-bottom: inherit; }
#basecabinet .base1 > ul > li .item li.openCab .pic.pic1 { width: 56%; }
#basecabinet .base1 > ul > li .item li.openCab .pic.pic2 { width: 38%; }
#basecabinet .base1 > ul > li .item li.openCab > .txt { width: 100%; /*margin-top: 10px;*/ }
#basecabinet .column { margin-top: 60px; }
#basecabinet .column .text-normal { width: 100%; margin-bottom: 15px; }
#basecabinet .column .item1 { width: 35%; }
#basecabinet .column .item1 .txt { width: 48%; order: 2; }
#basecabinet .column .item1 .pic { width: 48%; order: 1; }
#basecabinet .column .item2 { width: 60%; }
#basecabinet .column .item2 .txt { width: 48%; order: 2; }
#basecabinet .column .item2 .pic { width: 48%; order: 1; }
#basecabinet .column .item2 .colorItem { width: 50%; margin-top: 20px; box-sizing: border-box; }
#basecabinet .column .item2 .colorItem img { height: 40px; width: auto; display: inline-block; vertical-align: middle; margin-right: 5px; }
@media screen and (max-width: 640px) { #basecabinet .mainArea li:nth-of-type(1) { width: 100%; }
  #basecabinet .mainArea li:nth-of-type(2) { width: 100%; }
  #basecabinet .base1 > ul > li:nth-of-type(1) { width: 100%; margin-bottom: 20px; }
  #basecabinet .base1 > ul > li:nth-of-type(2) { width: 100%; }
  #basecabinet .base1 > ul > li .item .info { width: 100%; }
  #basecabinet .base1 > ul > li .item .info .fig { height: 60px; }
  #basecabinet .base1 > ul > li .item > ul { width: 100%; }
  #basecabinet .base1 > ul > li .item li.openCab .pic.pic1 { width: 52%; }
  #basecabinet .base1 > ul > li .item li.openCab .pic.pic2 { width: 46%; }
  #basecabinet .column .item1 { width: 100%; margin-bottom: 20px; }
  #basecabinet .column .item2 { width: 100%; }
  #basecabinet .column .item2 .txt { /*width: 100%;
margin-top: 10px;*/ }
  #basecabinet .column .item2 .pic { /*width: 100%;*/ }
  #basecabinet .column .item2 .colorItem { width: 100%; }
  #basecabinet .column .item2 .colorItem:nth-of-type(2) { margin-top: 10px; } }

span.brackets { display: inline-block; margin-left: -0.5em; margin-right: -0.5em; }

.sectionBtn { max-width: 400px; margin: 40px auto 0; }
.sectionBtn a { display: block; text-align: center; font-size: 150%; padding: 10px 0; background: #808080; color: #fff; text-decoration: none; position: relative; }
.sectionBtn a::after { content: ""; display: block; position: absolute; top: 15px; right: 10px; width: 20px; height: 20px; background: url("/common/images/icon09.png") no-repeat; background-size: 20px 20px; }

#mirror .mirror1 .titleBox { padding-top: 40px; }
#mirror .mirror1 > ul > li { width: 29%; }
#mirror .mirror1 > ul > li:nth-of-type(2) { width: 36%; }
#mirror .mirror1 > ul > li .column .lead1 { margin-bottom: 10px; }
#mirror .mirror1 > ul > li .column .pic2 { width: 52%; }
#mirror .mirror1 > ul > li .column .lead2 { width: 44%; }
#mirror .mirror2 > ul > li:nth-of-type(1) { width: 38%; }
#mirror .mirror2 > ul > li:nth-of-type(2) { width: 60%; }
#mirror .mirror2 > ul > li:nth-of-type(2) .txt { width: 100%; margin-bottom: 20px; }
#mirror .mirror2 > ul > li:nth-of-type(2) .pic1 { width: 49%; }
#mirror .mirror2 > ul > li:nth-of-type(2) .pic2 { width: 46.5%; }
#mirror .mirror2 > ul > li:nth-of-type(2) .pic2 .pic { margin-bottom: 10px; }
#mirror > .column { padding: 30px; margin-top: 40px; }
#mirror > .column .flexBox { align-items: center; }
#mirror > .column .pic1 { width: 31%; }
#mirror > .column .pic2 { width: 31%; }
#mirror > .column .txt { width: 33%; }
@media screen and (max-width: 640px) { #mirror .mirror1 > ul > li { width: 100%; margin-bottom: 20px; }
  #mirror .mirror1 > ul > li:nth-of-type(2) { width: 100%; }
  #mirror .mirror2 > ul > li { margin-bottom: 20px; }
  #mirror .mirror2 > ul > li:nth-of-type(1) { width: 100%; }
  #mirror .mirror2 > ul > li:nth-of-type(2) { width: 100%; }
  #mirror .mirror2 > ul > li:nth-of-type(2) .txt { order: 3; }
  #mirror .mirror2 > ul > li:nth-of-type(2) .pic1 { order: 1; }
  #mirror .mirror2 > ul > li:nth-of-type(2) .pic2 { order: 2; }
  #mirror > .column .pic1 { width: 48%; }
  #mirror > .column .pic2 { width: 48%; }
  #mirror > .column .txt { width: 100%; margin-top: 20px; } }

#sidewall { border-top: 1px solid #333; padding-top: 1rem; }
#sidewall .sidewall1 .titleBox { padding-top: 40px; }
#sidewall .sidewall1 > ul { align-items: flex-end; }
#sidewall .sidewall1 > ul li:nth-of-type(1) { width: 53%; }
#sidewall .sidewall1 > ul li:nth-of-type(2) { width: 45%; }
#sidewall .sidewall1 > ul li .column .lead1 { width: 100%; margin-bottom: 20px; }
#sidewall .sidewall1 > ul li .column .pic1, #sidewall .sidewall1 > ul li .column .pic2 { width: 49%; }
#sidewall .sidewall2 { margin-top: 50px; }
#sidewall .sidewall2 > ul li { width: 48%; }
#sidewall .sidewall2 > ul li > .pic { width: 48%; }
#sidewall .sidewall2 > ul li > .txt { width: 48%; }
#sidewall .sidewall2 > ul li > .txt .pic { margin: 15px auto; }
@media screen and (max-width: 640px) { #sidewall .sidewall1 > ul { align-items: flex-end; }
  #sidewall .sidewall1 > ul li:nth-of-type(1) { width: 100%; }
  #sidewall .sidewall1 > ul li:nth-of-type(2) { width: 100%; }
  #sidewall .sidewall1 > ul li .column .lead1 { width: 100%; margin-bottom: 20px; }
  #sidewall .sidewall1 > ul li .column .pic1, #sidewall .sidewall1 > ul li .column .pic2 { width: 49%; }
  #sidewall .sidewall2 > ul li { width: 100%; margin-bottom: 30px; }
  #sidewall .sidewall2 > ul li > .pic { width: 48%; }
  #sidewall .sidewall2 > ul li > .txt { width: 48%; }
  #sidewall .sidewall2 > ul li > .txt .pic { margin: 15px auto; }
  #sidewall .sidewall2 > ul li > p.lead { width: 100%; } }

#subcabinet { border-top: 1px solid #333; padding-top: 1rem; }
#subcabinet .subcabinet1 { margin-top: 40px; margin-bottom: 50px; }
#subcabinet .subcabinet1 p.lead { margin-top: 10px; }
#subcabinet .subcabinet1 .txt_note { margin-top: 3rem; width: 34%; }
#subcabinet .subcabinet1 .flexBox { align-items: flex-end; }
#subcabinet .subcabinet1 .flexBox #subcabinet1_slider { width: 63%; }
#subcabinet .subcabinet2 .picArea { width: 38%; }
#subcabinet .subcabinet2 .txtArea { width: 59%; }
#subcabinet .subcabinet2 .txtArea ul { width: 100%; }
#subcabinet .subcabinet2 .txtArea ul li { margin-bottom: 20px; }
#subcabinet .subcabinet2 .txtArea ul li .txt { width: 48%; order: 2; /*.lead { max-width: 160px;
}*/ }
#subcabinet .subcabinet2 .txtArea ul li .pic { width: 48%; order: 1; }
#subcabinet .subcabinet3 .picArea { width: 32%; }
#subcabinet .subcabinet3 .txtArea { width: 64.5%; }
#subcabinet .subcabinet3 .txtArea ul { width: 100%; }
#subcabinet .subcabinet3 .txtArea ul li { width: 48%; margin-bottom: 20px; }
#subcabinet .subcabinet3 .txtArea ul li .pic { margin-top: 20px; }
#subcabinet .subcabinet4 { margin-top: 40px; }
#subcabinet .subcabinet4 > .flexBox > li:nth-of-type(1) { width: 100%; margin-bottom: 10px; }
#subcabinet .subcabinet4 > .flexBox > li:nth-of-type(2) { width: 67%; }
#subcabinet .subcabinet4 > .flexBox > li:nth-of-type(2) .pic1 { width: 55%; }
#subcabinet .subcabinet4 > .flexBox > li:nth-of-type(2) .pic2 { width: 42.5%; }
#subcabinet .subcabinet4 > .flexBox > li:nth-of-type(2) .pic2 .pic { margin-bottom: 10px; }
#subcabinet .subcabinet4 > .flexBox > li:nth-of-type(3) { width: 31%; }
#subcabinet .subcabinet4 > .flexBox > li:nth-of-type(3) .pic1 { width: 62%; margin-top: 20px; }
#subcabinet .subcabinet4 > .flexBox > li:nth-of-type(3) .pic2 { width: 33%; margin-top: 20px; }
@media screen and (max-width: 640px) { #subcabinet .subcabinet1 .txt_note { margin-top: 1rem; width: 100%; }
  #subcabinet .subcabinet1 .flexBox #subcabinet1_slider { width: 100%; }
  #subcabinet .subcabinet2 .picArea { width: 100%; margin-bottom: 20px; }
  #subcabinet .subcabinet2 .txtArea { width: 100%; }
  #subcabinet .subcabinet2 .txtArea ul li .txt { order: 2; }
  #subcabinet .subcabinet2 .txtArea ul li .txt .lead { max-width: none; }
  #subcabinet .subcabinet2 .txtArea ul li .pic { order: 1; }
  #subcabinet .subcabinet3 .picArea { width: 70%; margin: 0 auto 20px; }
  #subcabinet .subcabinet3 .txtArea { width: 100%; }
  #subcabinet .subcabinet3 .txtArea ul { width: 100%; }
  #subcabinet .subcabinet3 .txtArea ul li { width: 100%; margin-top: 20px; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: stretch; align-items: stretch; }
  #subcabinet .subcabinet3 .txtArea ul li * { min-height: 0%; }
  #subcabinet .subcabinet3 .txtArea ul li .txt { width: 48%; }
  #subcabinet .subcabinet3 .txtArea ul li .pic { margin-top: 0px; width: 48%; }
  #subcabinet .subcabinet4 { margin-top: 40px; }
  #subcabinet .subcabinet4 > .flexBox > li:nth-of-type(1) { width: 100%; margin-bottom: 10px; }
  #subcabinet .subcabinet4 > .flexBox > li:nth-of-type(2) { width: 100%; }
  #subcabinet .subcabinet4 > .flexBox > li:nth-of-type(2) .pic1 { width: 55%; }
  #subcabinet .subcabinet4 > .flexBox > li:nth-of-type(2) .pic2 { width: 42.5%; }
  #subcabinet .subcabinet4 > .flexBox > li:nth-of-type(2) .pic2 .pic { margin-top: 10px; }
  #subcabinet .subcabinet4 > .flexBox > li:nth-of-type(3) { width: 100%; margin-top: 30px; }
  #subcabinet .subcabinet4 > .flexBox > li:nth-of-type(3) .pic1 { width: 62%; margin-top: 20px; }
  #subcabinet .subcabinet4 > .flexBox > li:nth-of-type(3) .pic2 { width: 33%; margin-top: 20px; } }

#faucet { border-top: 1px solid #333; padding-top: 1rem; }
#faucet .faucet1 .titleBox { padding-top: 40px; }
#faucet .faucet1 > ul > li:nth-of-type(1) { width: 38%; }
#faucet .faucet1 > ul > li:nth-of-type(2) { width: 58%; }
#faucet .faucet1 > ul > li:nth-of-type(2) .txt { width: 100%; margin-bottom: 20px; }
#faucet .faucet1 > ul > li:nth-of-type(2) .pic1 { margin-top: 5px; margin-left: auto; margin-right: auto; max-width: 400px; }
#faucet > .column { padding: 30px; margin-top: 40px; }
#faucet > .column .flexBox { align-items: flex-start; }
#faucet > .column .txt { width: 100%; margin-bottom: 20px; }
#faucet > .column .pic1 { width: 31%; }
#faucet > .column .pic2 { width: 31%; }
#faucet > .column .pic3 { width: 31%; }
@media screen and (max-width: 640px) { #faucet .faucet1 > ul > li { margin-bottom: 20px; }
  #faucet .faucet1 > ul > li:nth-of-type(1) { width: 100%; }
  #faucet .faucet1 > ul > li:nth-of-type(2) { width: 100%; }
  #faucet > .column { margin-top: 0; }
  #faucet > .column .pic1, #faucet > .column .pic2, #faucet > .column .pic3 { width: 48%; }
  #faucet > .column .pic1 p.lead, #faucet > .column .pic2 p.lead, #faucet > .column .pic3 p.lead { font-size: 7.5px; line-height: 1.3; margin-top: 5px; } }

#faucet { margin-bottom: 4rem; }

#faucet + .localNav { margin-bottom: 4rem; }

/******************************
tooltip
*******************************/
.tooltip { position: relative; }
.tooltip:hover .tootipBox { opacity: 1; }
.tooltip .tips_icon { position: absolute; width: 5px; height: 5px; border-radius: 30px; z-index: 1; /*background: #FFA002;*/ }
.tooltip .tootipBox { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: .2s; z-index: 2; opacity: 0; }
.tooltip .tootipBox p { font-size: 10px; color: #fff; background: rgba(0, 0, 0, 0.5); line-height: 1; display: inline-block; padding: 5px; position: absolute; }

.border_deco { border: 1px solid #eaeaea; }

#tooltip1 .tips_icon1 { top: 35%; left: 57%; }
#tooltip1 .tips_icon2 { bottom: 19%; left: 47%; }
#tooltip1 .tootipBox p.tool01 { top: 30%; right: 3%; }
#tooltip1 .tootipBox p.tool02 { bottom: 2%; right: 2%; }

#tooltip2 .tips_icon1 { top: 44%; left: 49%; }
#tooltip2 .tips_icon2 { bottom: 52%; left: 31%; }
#tooltip2 .tootipBox p.tool01 { bottom: 59%; right: 23%; }
#tooltip2 .tootipBox p.tool02 { top: 53%; left: 19%; }

#tooltip3 .tips_icon1 { top: 47%; left: 18%; }
#tooltip3 .tootipBox p.tool01 { top: 30%; left: 16%; }

#tooltip4 .tips_icon1 { top: 29%; left: 47%; }
#tooltip4 .tips_icon2 { bottom: 15%; left: 46%; }
#tooltip4 .tootipBox p.tool01 { top: 22%; right: 23%; }
#tooltip4 .tootipBox p.tool02 { bottom: 19%; left: 19%; }

#tooltip5 .tips_icon1 { top: 47%; left: 40%; }
#tooltip5 .tootipBox p.tool01 { top: 39%; left: 16%; }

#tooltip6 .tips_icon1 { top: 44%; left: 48%; }
#tooltip6 .tootipBox p.tool01 { top: 37%; left: 16%; }

.mainLight { display: block; position: absolute; top: 0; z-index: 2; width: 15px; height: 15px; background-color: #fff; border-radius: 50%; transition: .2s linear; -webkit-transition: .2s linear; -moz-transition: .2s linear; -o-transition: .2s linear; box-shadow: 0 0 5px #fff100; font-size: 1rem; }

a:hover .mainLight { background-color: #ec8035; box-shadow: 0 0 10px #fff100; }

.ripple { display: block; position: absolute; top: 0; z-index: 1; width: 15px; height: 15px; background-color: #f3ecb9; border-radius: 50%; box-shadow: 0 0 5px #fff100; animation-name: rippleAnimation; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-duration: 2s; -webkit-animation-name: rippleAnimation; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 2s; -moz-animation-name: rippleAnimation; -moz-animation-timing-function: ease-out; -moz-animation-iteration-count: infinite; -moz-animation-duration: 2s; }

@keyframes rippleAnimation { 0% { transform: scale(1, 1); opacity: 1; }
  100% { transform: scale(2.5, 2.5); opacity: 0; } }
@-webkit-keyframes rippleAnimation { 0% { -webkit-transform: scale(1, 1); opacity: 1; }
  100% { -webkit-transform: scale(2.5, 2.5); opacity: 0; } }
@-moz-keyframes rippleAnimation { 0% { -moz-transform: scale(1, 1); opacity: 1; }
  100% { -moz-transform: scale(2.5, 2.5); opacity: 0; } }
/******************************* 個別スライドショー
********************************/
#mirror01_pic02_slider .slick-dots, #subcabinet1_slider .slick-dots { width: 100%; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: stretch; align-items: stretch; flex-wrap: nowrap; }
#mirror01_pic02_slider .slick-dots *, #subcabinet1_slider .slick-dots * { min-height: 0%; }
#mirror01_pic02_slider .slick-dots li, #subcabinet1_slider .slick-dots li { width: 50%; height: 30px; background: #fff; margin: 0; }
#mirror01_pic02_slider .slick-dots li button, #subcabinet1_slider .slick-dots li button { width: 100%; height: 30px; position: relative; }
#mirror01_pic02_slider .slick-dots li button::before, #subcabinet1_slider .slick-dots li button::before { content: none; }
#mirror01_pic02_slider .slick-dots li button::after, #subcabinet1_slider .slick-dots li button::after { font-size: 1rem; color: #000; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#mirror01_pic02_slider .slick-dots li.slick-active, #subcabinet1_slider .slick-dots li.slick-active { background: #000; }
#mirror01_pic02_slider .slick-dots li.slick-active button::after, #subcabinet1_slider .slick-dots li.slick-active button::after { color: #fff; }
#mirror01_pic02_slider .slick-dots li:nth-of-type(1) button::after, #subcabinet1_slider .slick-dots li:nth-of-type(1) button::after { content: "OPEN"; }
#mirror01_pic02_slider .slick-dots li:nth-of-type(2) button::after, #subcabinet1_slider .slick-dots li:nth-of-type(2) button::after { content: "CLOSE"; }
@media screen and (max-width: 640px) { #mirror01_pic02_slider, #subcabinet1_slider { margin-top: 4rem; }
  #mirror01_pic02_slider .slick-dots, #subcabinet1_slider .slick-dots { bottom: auto; top: -28px; } }

#mirror01_pic02_slider { width: 100%; }

#subcabinet1_slider.slick-dotted.slick-slider { margin-bottom: 0; }
#subcabinet1_slider .slick-dots { bottom: -50px; }
#subcabinet1_slider .slick-dots li:nth-of-type(1) button::after { content: "BEFORE"; }
#subcabinet1_slider .slick-dots li:nth-of-type(2) button::after { content: "AFTER"; }
@media screen and (max-width: 640px) { #subcabinet1_slider { width: 100%; margin-bottom: 10px; }
  #subcabinet1_slider .slick-dots { top: -43px; } }

@media screen and (max-width: 640px) { .section-normal { padding-top: 100px; margin-top: -100px; } }
#door, #counter, #bowl, #basecabinet, #mirror, #sidewall, #subcabinet, #faucet { /*display: none;*/ }

.columnbs { background: #fff; box-sizing: border-box; border: 1px solid #000; padding: 20px; }
.columnbs { padding: 30px; margin-top: 40px; }
.columnbs .flexBox { align-items: center; }
.columnbs .pic1 { width: 31%; }
.columnbs .txt { width: 64%; }

@media screen and (max-width: 640px) { #mirror .mirror1 > ul > li { width: 100%; margin-bottom: 20px; }

.columnbs .pic1 { width: 100%; }
.columnbs .txt { width: 100%; margin-top: 20px; } }