@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 { color: #fff; font-family: "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; }

#bath { background: #1A150F; }

.drops { position: absolute; z-index: -1; }
.drops.drops_01 { bottom: -17%; right: 3px; width: 20%; max-width: 150px; }
.drops.drops_02 { top: -17%; left: -10px; width: 15%; max-width: 116px; }
.drops.drops_03 { bottom: -17%; right: 10px; width: 13%; max-width: 100px; }

.bath { position: relative; }
.bath__txt-wp { margin: 0% 0% 5.07% 0%; }
.bath__logo-wp { margin: 0 auto 4%; width: 80%; max-width: 620px; }
.bath__txt { font-size: 1.3rem; text-align: center; }
@media (min-width: 769px) { .bath__txt { font-size: calc( 1.3rem + ( 1vw - 7.69px ) * 0.3913894325 ); } }
@media (min-width: 1280px) { .bath__txt { font-size: 1.5rem; } }

.main-swiper { position: relative; padding: 4.68% 0% 7.81% 0%; background: url("/img/quality/bathroom/slide-bg.jpg") center/cover no-repeat; overflow: inherit !important; }
.main-swiper .swiper-pagination { bottom: 0 !important; left: 50% !important; width: 100% !important; transform: translate(-50%, 0) !important; }
.main-swiper .swiper-pagination .swiper-pagination-bullet { margin: 0 5px !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 .swiper-slide { transform: scale(0.8); transition: .4s; }
.main-swiper .swiper-slide .comp__slide-wp { margin: 0% 0% 1.56% 0%; text-align: center; opacity: 0; transition: .4s; }
.main-swiper .swiper-slide .comp__slide-wp .comp__slide-num { font-size: 1.2rem; margin: 0 auto 1%; }
@media (min-width: 769px) { .main-swiper .swiper-slide .comp__slide-wp .comp__slide-num { font-size: calc( 1.2rem + ( 1vw - 7.69px ) * 1.1741682975 ); } }
@media (min-width: 1280px) { .main-swiper .swiper-slide .comp__slide-wp .comp__slide-num { font-size: 1.8rem; } }
.main-swiper .swiper-slide .comp__slide-wp .comp__slide-txt { font-size: 1.3rem; line-height: normal; }
@media (min-width: 769px) { .main-swiper .swiper-slide .comp__slide-wp .comp__slide-txt { font-size: calc( 1.3rem + ( 1vw - 7.69px ) * 1.3698630137 ); } }
@media (min-width: 1280px) { .main-swiper .swiper-slide .comp__slide-wp .comp__slide-txt { font-size: 2rem; } }
.main-swiper .swiper-slide .slide-img { position: relative; }
.main-swiper .swiper-slide .slide-img::after { position: absolute; content: ""; display: block; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); transition: .4s; }
.main-swiper .swiper-slide-active { transform: scale(1); transition: .4s; }
.main-swiper .swiper-slide-active .comp__slide-wp { opacity: 1; transition: .4s; }
.main-swiper .swiper-slide-active .slide-img::after { background: rgba(0, 0, 0, 0); }
.main-swiper .swiper-button-prev, .main-swiper .swiper-button-next { top: 60%; width: 20px; height: 20px; background: rgba(255, 255, 255, 0); transition: .4s; }
.main-swiper .swiper-button-prev { left: 55px; border-top: solid 1px #fff; border-left: solid 1px #fff; transform: rotate(-45deg); }
.main-swiper .swiper-button-next { right: 55px; border-top: solid 1px #fff; border-right: solid 1px #fff; transform: rotate(45deg); }

.sggstn { padding: 8.45% 0% 0% 0%; position: relative; background: linear-gradient(-90deg, #e3e3e3 40%, #afaaa6 100%); }
.sggstn__txt-wp { position: relative; padding: 0 2%; color: #333; z-index: 1; }
.sggstn__txt-wp .sggstn__ttl { margin: 0 auto 3%; width: 80%; max-width: 400px; }
.sggstn__txt-wp .sggstn__txt { font-size: 1.3rem; text-align: center; }
@media (min-width: 769px) { .sggstn__txt-wp .sggstn__txt { font-size: calc( 1.3rem + ( 1vw - 7.69px ) * 0.3913894325 ); } }
@media (min-width: 1280px) { .sggstn__txt-wp .sggstn__txt { font-size: 1.5rem; } }
.sggstn__txt-wp .sggstn__txt-img { position: absolute; bottom: -15%; right: 5%; width: 45%; max-width: 220px; z-index: -1; }
.sggstn__img-box { width: 80%; }
.sggstn::after { position: absolute; content: ""; display: block; bottom: -20px; left: 50%; width: 1px; height: 40px; background: #fff; transform: translate(-50%, 0); }

.comp__txt-wp { margin: 0% 0% 5.46% 0%; }
.comp__txt-wp .comp__ttl { margin: 0 auto 3.5%; width: 80%; max-width: 525px; }
.comp__txt-wp .comp__txt { font-size: 1.3rem; text-align: center; }
@media (min-width: 769px) { .comp__txt-wp .comp__txt { font-size: calc( 1.3rem + ( 1vw - 7.69px ) * 0.3913894325 ); } }
@media (min-width: 1280px) { .comp__txt-wp .comp__txt { font-size: 1.5rem; } }

/*------------------------------
		769px以上
------------------------------*/
@media screen and (min-width: 769px) { .drops.drops_01 { bottom: -31%; width: 15%; }
  .drops.drops_02 { top: -17%; width: 10%; }
  .bath__logo-wp { width: 60%; }
  .sggstn { padding: 0; height: 60vh; max-height: 530px; }
  .sggstn__txt-wp { position: absolute; padding: 0; top: 50%; right: 0; transform: translate(0, -50%); }
  .sggstn__txt-wp .sggstn__ttl { margin: 0% 0% 5.85% 0%; }
  .sggstn__txt-wp .sggstn__txt { text-align: left; }
  .sggstn__txt-wp .sggstn__txt-img { top: 15%; right: 5%; width: 35%; }
  .sggstn__img-box { position: absolute; bottom: 0; left: 0; width: 50%; max-width: 670px; }
  .sggstn::after { bottom: -45px; height: 80px; }
  .main-swiper .swiper-pagination { bottom: 5% !important; }
  .main-swiper .swiper-button-prev, .main-swiper .swiper-button-next { top: 50%; width: 40px; height: 40px; }
  .main-swiper .swiper-button-prev span, .main-swiper .swiper-button-next span { position: absolute; font-size: 1.5rem; }
  .main-swiper .swiper-button-prev { left: 18%; transform: rotate(-45deg) translate(0, -50%); }
  .main-swiper .swiper-button-prev span { top: -80%; left: -35px; transform: rotate(45deg); }
  .main-swiper .swiper-button-next { right: 18%; transform: rotate(45deg) translate(0, -50%); }
  .main-swiper .swiper-button-next span { top: -75%; right: -35px; transform: rotate(-45deg); } }
/*------------------------------
		1021px以上
------------------------------*/
@media screen and (min-width: 1021px) { #contents { margin-top: 180px; }
  .drops.drops_01 { bottom: -35%; }
  .drops.drops_02 { top: -14.5%; }
  .drops.drops_03 { bottom: -14.5%; }
  .sggstn__txt-wp { right: 10%; }
  .sggstn__txt-wp .sggstn__ttl { width: 100%; }
  .sggstn__txt-wp .sggstn__txt-img { top: 11%; right: -20%; width: 50%; }
  .sggstn::after { bottom: -85px; height: 125px; }
  .main-swiper .swiper-slide { transform: scale(0.5); }
  .main-swiper .swiper-slide-active { transform: scale(1); }
  .main-swiper .swiper-button-prev, .main-swiper .swiper-button-next { width: 80px; height: 80px; }
  .main-swiper .swiper-button-prev { left: 17%; }
  .main-swiper .swiper-button-prev span { top: -45%; left: -38px; }
  .main-swiper .swiper-button-next { right: 17%; }
  .main-swiper .swiper-button-next span { top: -45%; right: -38px; } }
/*------------------------------
		1221px以上
------------------------------*/
@media screen and (min-width: 1221px) { .sggstn__txt-wp { right: 20%; } }
/*------------------------------
		1600px以上
------------------------------*/

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