@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/* Scss Document */
/* アニメーション記述用 */
@keyframes load { 0% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
  50% { transform: translateY(0); }
  100% { transform: translateY(0); } }
@keyframes slide { 0% { transform: translateX(0); }
  100% { transform: translateX(-10%); } }
@keyframes arrow { 0% { transform: scale(0, 1); transform-origin: 0 0; }
  50% { transform: scale(1, 1); transform-origin: 0 0; }
  50.1% { transform: scale(1, 1); transform-origin: 100% 0; }
  100% { transform: scale(0, 1); transform-origin: 100% 0; } }
#contents { font-family: "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; }

#living { background: #fff; }

.wood__logo-wp { margin: 0 auto 4%; width: 80%; max-width: 620px; }
.wood__txt-wp { text-align: center; }
.wood__txt-wp .wood__ttl { font-size: 2rem; margin: 0% 0% 2.6% 0%; }
@media (min-width: 769px) { .wood__txt-wp .wood__ttl { font-size: calc( 2rem + ( 1vw - 7.69px ) * 2.5440313112 ); } }
@media (min-width: 1280px) { .wood__txt-wp .wood__ttl { font-size: 3.3rem; } }
.wood__txt-wp .wood__txt { font-size: 1.3rem; }
@media (min-width: 769px) { .wood__txt-wp .wood__txt { font-size: calc( 1.3rem + ( 1vw - 7.69px ) * 0.3913894325 ); } }
@media (min-width: 1280px) { .wood__txt-wp .wood__txt { font-size: 1.5rem; } }

.feature { margin: 0% 0% 6.5% 0%; padding: 50px 0%; color: #fff; background: url("/img/quality/living/feature-01-bg_sp.jpg") center/cover no-repeat; }
.feature .feature__sub li { margin-bottom: 0; }
.feature__list { margin: 0% 0% 35px 0%; padding-top: 55px; position: relative; text-align: center; }
.feature__list .feature__ttl { font-size: 2rem; position: absolute; top: -25px; left: 50%; height: 90px; letter-spacing: 0.3em; transform: translate(-50%, 0); -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
@media (min-width: 769px) { .feature__list .feature__ttl { font-size: calc( 2rem + ( 1vw - 7.69px ) * 2.5440313112 ); } }
@media (min-width: 1280px) { .feature__list .feature__ttl { font-size: 3.3rem; } }
.feature__list .feature__ttl.top-20 { top: -20px; }
.feature__list .feature__txt { font-size: 1.3rem; }
@media (min-width: 769px) { .feature__list .feature__txt { font-size: calc( 1.3rem + ( 1vw - 7.69px ) * 0.3913894325 ); } }
@media (min-width: 1280px) { .feature__list .feature__txt { font-size: 1.5rem; } }

.vartn__txt-wp { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0% 0% 3.9% 0%; }
.vartn__txt-wp .vartn__ttl { flex: 0 1 auto; width: auto; max-width: auto; font-size: 1.8rem; margin-right: 2%; text-align: right; }
@media (min-width: 769px) { .vartn__txt-wp .vartn__ttl { font-size: calc( 1.8rem + ( 1vw - 7.69px ) * 1.9569471624 ); } }
@media (min-width: 1280px) { .vartn__txt-wp .vartn__ttl { font-size: 2.8rem; } }
.vartn__txt-wp .vartn__num { flex: 0 1 auto; width: auto; max-width: auto; font-size: 1.3rem; position: relative; width: 60px; height: 60px; color: #E08100; border: solid 1px #E08100; border-radius: 50px; }
@media (min-width: 769px) { .vartn__txt-wp .vartn__num { font-size: calc( 1.3rem + ( 1vw - 7.69px ) * 1.9569471624 ); } }
@media (min-width: 1280px) { .vartn__txt-wp .vartn__num { font-size: 2.3rem; } }
.vartn__txt-wp .vartn__num span { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform: translate(-50%, -50%); }
.vartn__wp { margin: 0% 0% 4.68% 0%; }
.vartn__wp:last-child { margin-bottom: 0; }
.vartn__wp .vartn__wp-ttl { margin-bottom: 10px; font-size: 1.8rem; font-family: "DINNextLTPro-Regular", "serif"; }
@media (min-width: 769px) { .vartn__wp .vartn__wp-ttl { font-size: calc( 1.8rem + ( 1vw - 7.69px ) * 1.9569471624 ); } }
@media (min-width: 1280px) { .vartn__wp .vartn__wp-ttl { font-size: 2.8rem; } }
.vartn__content { margin: 0% 0% 3.12% 0%; }
.vartn__content .vartn__img-box { flex: 0 1 35%; width: 35%; max-width: 35%; }
.vartn__content .vartn__con-txt-wp { flex: 0 1 60%; width: 60%; max-width: 60%; }
.vartn__content .vartn__con-txt-wp .vartn__con-ttl { font-size: 1.4rem; font-weight: bold; }
@media (min-width: 769px) { .vartn__content .vartn__con-txt-wp .vartn__con-ttl { font-size: calc( 1.4rem + ( 1vw - 7.69px ) * 0.3913894325 ); } }
@media (min-width: 1280px) { .vartn__content .vartn__con-txt-wp .vartn__con-ttl { font-size: 1.6rem; } }
.vartn__content .vartn__con-txt-wp .vartn__con-txt { font-size: 1.2rem; text-align: justify; }
@media (min-width: 769px) { .vartn__content .vartn__con-txt-wp .vartn__con-txt { font-size: calc( 1.2rem + ( 1vw - 7.69px ) * 0.3913894325 ); } }
@media (min-width: 1280px) { .vartn__content .vartn__con-txt-wp .vartn__con-txt { font-size: 1.4rem; } }
.vartn__content:last-child { margin: 0; }
.vartn__content:last-child .vartn__img-box figure { border: solid 1px #E0E0E0; }
.vartn .flooring .vartn__content:last-child .vartn__img-box figure { border: none; }

.corde__txt-wp { margin: 0% 0% 3.12% 0%; text-align: center; }
.corde__txt-wp .corde__txt { font-size: 1.6rem; margin: 0% 0% 1.56% 0%; position: relative; display: inline-block; }
@media (min-width: 769px) { .corde__txt-wp .corde__txt { font-size: calc( 1.6rem + ( 1vw - 7.69px ) * 1.3698630137 ); } }
@media (min-width: 1280px) { .corde__txt-wp .corde__txt { font-size: 2.3rem; } }
.corde__txt-wp .corde__txt::before, .corde__txt-wp .corde__txt::after { position: absolute; content: ""; display: block; top: 50%; width: 1px; height: 100%; background: #333; }
.corde__txt-wp .corde__txt::before { left: -10px; transform: rotate(-40deg) translate(0, -50%); }
.corde__txt-wp .corde__txt::after { right: -10px; transform: rotate(40deg) translate(0, -50%); }
.corde__txt-wp .corde__ttl { font-size: 2rem; font-weight: bold; }
@media (min-width: 769px) { .corde__txt-wp .corde__ttl { font-size: calc( 2rem + ( 1vw - 7.69px ) * 2.5440313112 ); } }
@media (min-width: 1280px) { .corde__txt-wp .corde__ttl { font-size: 3.3rem; } }
.corde__bg { padding: 5% 0; background: url("/img/quality/living/corde-bg.jpg") center/cover no-repeat; }
.corde__btn-wp { margin: 0% 0% 3.12% 0%; }
.corde__btn-wp .corde__btn { font-size: 1.5rem; padding: 1.56% 0% 1.56% 0%; flex: 0 1 31%; width: 31%; max-width: 31%; background: #fff; text-align: center; }
@media (min-width: 769px) { .corde__btn-wp .corde__btn { font-size: calc( 1.5rem + ( 1vw - 7.69px ) * 0.5870841487 ); } }
@media (min-width: 1280px) { .corde__btn-wp .corde__btn { font-size: 1.8rem; } }
.corde__btn-wp .corde__btn:nth-child(n+3) { margin-bottom: 0; }
.corde__btn-wp .corde__btn.active { color: #fff; background: #333; }

.swiper__wp { display: none; }
.swiper__wp.active { display: block; }

.main-swiper { overflow: inherit !important; }
.main-swiper .swiper-pagination { display: block !important; bottom: -22px !important; left: 50% !important; width: 100% !important; transform: translate(-50%, 0) !important; }
.main-swiper .swiper-pagination .swiper-pagination-bullet { margin: 0 3px !important; width: 6px !important; height: 6px !important; background: #fff !important; opacity: 1 !important; transition: .4s; }
.main-swiper .swiper-pagination .swiper-pagination-bullet-active { background: #B68933 !important; transition: .4s; }
.main-swiper .mainimg__slide .mainimg__slide-box { box-sizing: border-box; position: relative; border: solid 3px #fff; }
.main-swiper .mainimg__slide .mainimg__slide-box::before, .main-swiper .mainimg__slide .mainimg__slide-box::after { position: absolute; content: ""; width: 0px; height: 0px; border-style: solid; border-color: transparent; border-bottom-color: #fff; }
.main-swiper .mainimg__slide .mainimg__slide-box::before { top: 0; left: 0; border-width: 0 8px 8px 0; transform: rotate(90deg); }
.main-swiper .mainimg__slide .mainimg__slide-box::after { bottom: 0; right: 0; border-width: 0 8px 8px 0; transform: rotate(-90deg); }
.main-swiper .mainimg__slide .mainimg__slide-box figure { position: relative; }
.main-swiper .mainimg__slide .mainimg__slide-box figure .caution__txt { position: absolute; bottom: 2px; left: 10px; font-size: 1rem; }
.main-swiper .swiper-button-prev, .main-swiper .swiper-button-next { top: 55%; width: 20px; height: 20px; border-top: solid 2px #fff; background: rgba(255, 255, 255, 0); transition: .4s; }
.main-swiper .swiper-button-prev:hover, .main-swiper .swiper-button-next:hover { border-color: #333; }
.main-swiper .swiper-button-prev { border-left: solid 2px #fff; transform: rotate(-45deg); }
.main-swiper .swiper-button-next { border-right: solid 2px #fff; transform: rotate(45deg); }

/*------------------------------
		769px以上
------------------------------*/
@media screen and (min-width: 769px) { .wood__txt-wp { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; text-align: left; }
  .wood__txt-wp .wood__ttl { flex: 0 1 50%; width: 50%; max-width: 50%; margin: 0; }
  .wood__txt-wp .wood__txt { flex: 0 1 45%; width: 45%; max-width: 45%; }
  .feature { position: relative; height: 50vh; }
  .feature__all-wp { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 1280px; transform: translate(-50%, -50%); }
  .feature__wp { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
  .feature__list { flex: 0 1 31%; width: 31%; max-width: 31%; margin: 0% 0% 5.07% 0%; text-align: center; padding-top: 70px; }
  .vartn__txt-wp .vartn__num { width: 80px; height: 80px; }
  .vartn__wp .vartn__wp-ttl { margin-bottom: 21px; }
  .vartn__wp .vartn__wp-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
  .vartn__wp .vartn__wp-list:after { content: ""; display: block; width: calc((100% - 100px) / 3); }
  .vartn__content { flex: 0 1 calc((100% - 100px) / 3); width: calc((100% - 100px) / 3); max-width: calc((100% - 100px) / 3); }
  .vartn__content .vartn__img-box { flex: 0 1 100%; width: 100%; max-width: 100%; margin: 0% 0% 1.17% 0%; }
  .vartn__content .vartn__con-txt-wp { flex: 0 1 100%; width: 100%; max-width: 100%; }
  .vartn .flooring .vartn__content:nth-child(n+10) { margin: 0; }
  .corde__bg { padding: 5% 2.45%; }
  .corde__btn-wp .corde__btn { cursor: pointer; transition: .4s; }
  .corde__btn-wp .corde__btn:hover { color: #fff; background: #333; transition: .4s; }
  .main-swiper .swiper-pagination { bottom: -9% !important; }
  .main-swiper .swiper-pagination .swiper-pagination-bullet { margin: 0 5px !important; }
  .main-swiper .mainimg__slide .mainimg__slide-box::before { border-width: 0 15px 15px 0; }
  .main-swiper .mainimg__slide .mainimg__slide-box::after { border-width: 0 15px 15px 0; }
  .main-swiper .swiper-button-prev, .main-swiper .swiper-button-next { top: 50%; width: 40px; height: 40px; } }
/*------------------------------
		1021px以上
------------------------------*/
@media screen and (min-width: 1021px) { #contents { margin-top: 180px; }
  .feature { position: relative; padding: 0; margin: 0; height: auto; background: rgba(255, 255, 255, 0); }
  .vartn__txt-wp { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; }
  .vartn__txt-wp .vartn__num { width: 100px; height: 100px; }
  .vartn__wp .vartn__wp-list:after { width: calc((100% - 138px) / 3); }
  .vartn__content { flex: 0 1 calc((100% - 138px) / 3); width: calc((100% - 138px) / 3); max-width: calc((100% - 138px) / 3); }
  .main-swiper .swiper-pagination { bottom: -8% !important; }
  .main-swiper .mainimg__slide .mainimg__slide-box::before { border-width: 0 24px 24px 0; }
  .main-swiper .mainimg__slide .mainimg__slide-box::after { border-width: 0 24px 24px 0; }
  .main-swiper .swiper-button-prev, .main-swiper .swiper-button-next { width: 60px; height: 60px; } }
/*------------------------------
		1221px以上
------------------------------*/
@media screen and (min-width: 1221px) { .main-swiper .swiper-button-prev { left: -45px; }
  .main-swiper .swiper-button-next { right: -45px; } }
/*------------------------------
		1600px以上
------------------------------*/

/*# sourceMappingURL=style.css.map */