/* individual settings */
/*====================================================*/
/* base */
/*------------------------------*/
.main {
  background: url("/kurashi-naruhodo/laundry-room/images/pic_bg01.webp") 50% 0/24px auto;
}

/* key */
/*------------------------------*/
@media (min-width: 768px) {
  .key__bg {
    background-position: 50% 40%;
    background-image: url("/kurashi-naruhodo/laundry-room/images/pic_key_bg01.webp");
  }
}

@media (max-width: 767px) {
  .key__bg {
    background-position: 50% 5%;
    background-image: url("/kurashi-naruhodo/laundry-room/images/pic_key_bg01_sp.webp");
  }
}

@media (min-width: 768px) {
  .key__txt {
    bottom: 51.2%;
    left: 28px;
  }
}

.key__txt__ttl {
  color: #fff;
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}

@media (min-width: 768px) {
  .key__txt__ttl {
    font-size: 45px;
    line-height: calc(56 / 45);
    text-align: center;
  }
}

@media (max-width: 767px) {
  .key__txt__ttl {
    padding-top: calc(48 / 20 * 1rem);
    font-size: clamp(30px / 375 * 320, 30 / 375 * 100vw, 30px);
    line-height: calc(39 / 30);
    letter-spacing: -.02em;
  }
}

@media (min-width: 768px) {
  .key__txt__btn > label {
    margin: 0 auto;
  }
}

.key__scr {
  color: #fff;
}

@media (min-width: 768px) {
  .key__scr {
    bottom: 55px;
    left: calc(28px + 223px);
  }
}

.key__scr > span::before {
  border-color: #fff;
}

@media (max-width: 767px) {
  .key__img {
    margin-top: clamp(38px / 375 * 320, 38 / 375 * 100vw, 76px);
  }
}

.key__img__pic.opt-1 {
  aspect-ratio: 296 / 417;
  background-image: url("/kurashi-naruhodo/laundry-room/images/pic_book01.webp");
}

@media (min-width: 768px) {
  .key__img__pic.opt-1 {
    top: calc(19.8 / 540 * 100%);
    right: calc(355 / 1166 * 100%);
    width: calc(296 / 1166 * 100%);
  }
}

.key__img__pic.opt-2 {
  background-image: url("/kurashi-naruhodo/laundry-room/images/pic_book02.webp");
}

@media (min-width: 768px) {
  .key__img__pic.opt-2 {
    top: calc(212 / 540 * 100%);
    right: calc(7 / 1166 * 100%);
    width: calc(492 / 1166 * 100%);
    aspect-ratio: 492 / 349;
  }
}

@media (max-width: 767px) {
  .key__img__pic.opt-2 {
    background-position: 0 0;
  }
}

.key__img__asd {
  top: calc(68 / 540 * 100%);
  right: calc(47 / 1166 * 100%);
  width: calc(144 / 1166 * 100%);
  background: #0075C2;
}

@media (max-width: 767px) {
  .key__img__asd {
    top: calc(0 / 425 * 100%);
    right: calc(17 / 375 * 100%);
    width: calc(95 / 375 * 100%);
  }
}

.key__img__asd__txt {
  color: #fff;
  font-size: 22px;
  line-height: calc(28 / 22);
}

@media (max-width: 767px) {
  .key__img__asd__txt {
    font-size: clamp(16px / 375 * 320, 16 / 375 * 100vw, 19.2px);
  }
}

/* end */
/*------------------------------*/
.end {
  background-image: url("/kurashi-naruhodo/laundry-room/images/pic_end_bg01.webp");
}

@media (max-width: 767px) {
  .end {
    background-position: 50% 30%;
    background-image: url("/kurashi-naruhodo/laundry-room/images/pic_end_bg01_sp.webp");
  }
}

.end__pic {
  background-image: url("/kurashi-naruhodo/laundry-room/images/pic_book02.webp");
}

.end__pic > div {
  background-image: url("/kurashi-naruhodo/laundry-room/images/pic_book01.webp");
}

/* lrc-tt */
/*------------------------------*/
.lrc-tt {
  font-size: 40px;
  font-weight: 700;
  line-height: calc(58 / 40);
  text-align: center;
}

@media (max-width: 767px) {
  .lrc-tt {
    padding: 0 calc(20 / 375 * 100vw);
    font-size: clamp(25px / 375 * 320, 25 / 375 * 100vw, 25px);
    line-height: calc(36 / 25);
    letter-spacing: -.01em;
  }
  .lrc-tt span {
    display: inline-block;
  }
}

/* ld */
/*------------------------------*/
.ld {
  padding: 120px 0;
}

@media (max-width: 767px) {
  .ld {
    padding: 80px 0;
  }
}

.ld__bd {
  margin: 60px 0 0;
  padding: 0 40px;
}

@media (max-width: 767px) {
  .ld__bd {
    padding: 0 calc(20 / 375 * 100vw);
  }
}

.ld__bd__in {
  max-width: 1286px;
  aspect-ratio: 1286 / 573;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .ld__bd__in {
    max-width: 560px;
    aspect-ratio: 1005 / 1902;
  }
}

.ld__bd__in img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* pt */
/*------------------------------*/
.pt {
  padding: 0 0 120px;
}

@media (max-width: 767px) {
  .pt {
    padding: 0 0 80px;
  }
}

.pt__bd {
  position: relative;
  width: 600px;
  aspect-ratio: 600 / 723;
  margin: 60px auto 0;
}

@media (max-width: 767px) {
  .pt__bd {
    width: clamp(295px / 375 * 320, 295 / 375 * 100vw, 520px);
    aspect-ratio: 295/469;
    margin: 40px auto 0;
  }
}

.pt__bd img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .pt__bd img {
    object-fit: contain;
    object-position: 50% 100%;
  }
}

.pt__bd__p {
  position: relative;
  height: 100%;
  z-index: 1;
}

.pt__bd__b {
  position: absolute;
  top: -40px;
  right: 50%;
  width: calc(1187 / 600 * 100%);
  aspect-ratio: 1187 / 638;
  -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
          transform: translateX(50%);
  z-index: 2;
}

@media (max-width: 767px) {
  .pt__bd__b {
    top: 0;
    width: calc(355 / 295 * 100%);
    aspect-ratio: 1065 / 1047;
  }
}

.pt__bd__t {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 96px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.8);
  z-index: 3;
}

@media (max-width: 767px) {
  .pt__bd__t {
    height: auto;
    padding: clamp(12px / 375 * 320, 12 / 375 * 100vw, 15.6px);
  }
}

.pt__bd__t > span {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: calc(32 / 22);
  text-align: center;
}

@media (max-width: 767px) {
  .pt__bd__t > span {
    font-size: clamp(16px / 375 * 320, 16 / 375 * 100vw, 20.8px);
    line-height: calc(23 / 16);
  }
}

.pt__bt {
  width: 446px;
  margin: 60px auto 0;
}

@media (max-width: 767px) {
  .pt__bt {
    width: 100%;
    margin: 40px auto 0;
    padding: 0 calc(20 / 375 * 100vw);
    box-sizing: border-box;
  }
}

.pt__bt label {
  height: 80px;
  border-radius: 40px;
}

@media (max-width: 767px) {
  .pt__bt label {
    max-width: 480px;
    height: 50px;
    border-radius: 25px;
    margin: 0 auto;
  }
}

.pt__bt label > span {
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .pt__bt label > span {
    font-size: 18px;
  }
}

.pt__bt label.is-checked {
  border: 2px solid #333 !important;
}

@media (min-width: 768px) {
  .pt__bt label:hover {
    border: 2px solid #B23E2C;
  }
}

/* lw */
/*------------------------------*/
.lw {
  padding: 0 0 120px;
}

@media (max-width: 767px) {
  .lw {
    padding: 0 0 80px;
  }
}

.lw__ls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 60px;
  margin: 60px auto 0;
}

@media (max-width: 767px) {
  .lw__ls {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 60px 0;
    margin: 40px auto 0;
    padding: 0 calc(20 / 375 * 100vw);
  }
}

.lw__ls > li {
  width: 355px;
}

@media (max-width: 767px) {
  .lw__ls > li {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
}

.lw__ls > li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cottain;
}

.lw__ls__t {
  margin: 0 0 20px;
  font-size: 22px;
  line-height: calc(32 / 22);
  text-align: center;
}

@media (max-width: 767px) {
  .lw__ls__t {
    font-size: clamp(20px / 375 * 320, 20 / 375 * 100vw, 20px);
    line-height: calc(29 / 20);
  }
}

.lw__ls__p {
  margin: 0 0 20px;
  aspect-ratio: 710 / 568;
}

@media (max-width: 767px) {
  .lw__ls__p {
    margin: 0 0 15px;
  }
}

.lw__ls__c {
  aspect-ratio: 710 / 196;
}

@media (max-width: 767px) {
  .lw__ls__c {
    max-width: 375px;
    margin: 0 auto;
    aspect-ratio: 1005 / 250;
  }
}