/* ==========================================================
1. Responsive Layouts
========================================================== */

/*
  Responsive section guide
  - FOUNDATION: page-wide settings such as body size and overflow
  - HERO: first-view image and catch copy
  - INTRO: introductory lead, heading, and image
  - SOLUTION: search-tool explanation and benefits
  - PRODUCTS: PIC / MOV product cards
  - PRODUCT POINTS: product feature points
  - FIVE OUTCOMES: promise section
  - MESSAGE: brand message section
  - FAQ: frequently asked questions
*/

/* Breakpoint 1: (min-width: 1101px) */

@media (min-width: 1101px) {
  /* 6. Product Points */

  .points__item:nth-child(4) .points__title {
    display: inline-block;
        white-space: nowrap;
  }
}

/* Breakpoint 2: (max-width: 1599px) and (min-width: 721px) */

@media (max-width: 1599px) and (min-width: 721px) {
  /* 1. Foundation */

  :root {
    --header-height: 6.5vw;
  }

  /* 2. Hero */

  .hero {
    height: 58.5vw;
  }

  .hero__image {
    left: -21vw;
        top: -5.5625vw;
        width: 141vw;
        height: 94.0625vw;
  }

  .hero__shade {
    width: 65vw;
        margin-left: 35vw;
  }

  .hero__title {
    width: 67.5vw;
        margin: 15.3125vw 0 0 30vw;
        letter-spacing: 0.2563vw;
        text-shadow: 0.1875vw 0.25vw 0.4375vw rgba(0, 0, 0, 0.25);
  }

  .hero__line--risk {
    width: 54.0625vw;
        margin: 2.9375vw 0 0 3.125vw;
  }

  .hero__line--solution {
    width: 54.0625vw;
        margin: 5.25vw 0 0 3.125vw;
  }

  .hero__text-large,
  .hero__text-accent {
    font-size: clamp(52px, 5.125vw, 82px);
  }

  .hero__text-medium {
    font-size: clamp(43px, 4.25vw, 68px);
        letter-spacing: 0.2125vw;
  }
}

/* Breakpoint 3: (min-width: 1600px) and (max-width: 1919px) */

@media (min-width: 1600px) and (max-width: 1919px) {
  /* 2. Hero */

  .hero__shade {
    width: 65vw;
        margin-left: 35vw;
  }

  .hero__title {
    margin-left: clamp(480px, calc(57.5vw - 440px), 664px);
  }
}

/* Breakpoint 4: (min-width: 1920px) */

@media (min-width: 1920px) {
  /* 2. Hero */

  .hero__image {
    top: -4.6354vw;
        left: -17.5vw;
        width: 117.5vw;
        height: 78.3854vw;
  }

  .hero__shade {
    width: 65vw;
        margin-left: 35vw;
  }

  .hero__title {
    margin-left: calc(50vw - 296px);
  }
}

/* Breakpoint 5: (max-width: 1100px) */

@media (max-width: 1100px) {
  /* 3. Introduction */

  .intro {
    grid-template-columns: 1fr;
  }

  .intro__body {
    padding-left: 0;
  }

  .intro__figure {
    min-height: 640px;
  }

  /* 5. Products */

  .products {
    grid-template-columns: 1fr;
  }

  .products__title {
    left: 48px;
  }

  /* 6. Product Points */

  .points__list {
    grid-template-columns: repeat(2, minmax(220px, 283px));
  }

  /* 7. Five Outcomes */

  .promise {
    min-height: auto;
        padding-bottom: 150px;
        background-position: center 80px;
  }

  .promise__list {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
        display: grid;
        width: min(760px, calc(100% - 48px));
        height: auto;
        gap: 40px 24px;
  }

  .promise__item,
  .promise__item--quick,
  .promise__item--wall,
  .promise__item--prevention,
  .promise__item--heart,
  .promise__item--dx {
    position: relative;
        grid-column: auto;
        grid-row: auto;
        top: auto;
        left: auto;
        width: min(100%, 280px);
        height: auto;
        justify-self: center;
  }

  .promise__item img {
    height: auto;
  }

  .promise__message {
    position: static;
        margin-top: 32px;
        transform: none;
  }
}

/* Breakpoint 6: (max-width: 720px) */

@media (max-width: 720px) {
  /* 1. Foundation */

  :root {
    --header-height: 64px;
  }

  /* 2. Hero */

  .hero {
    height: 576px;
  }

  .hero__image {
    left: calc(50% - 389px);
        top: -50px;
        width: 1070px;
        height: 714px;
  }

  .hero__shade {
    align-self: start;
        width: 100%;
        height: 542px;
        margin-top: 40px;
        margin-left: 0;
        background: linear-gradient(180deg, rgba(148, 199, 211, 0) 0%, rgba(148, 199, 211, 0.84) 100%);
        opacity: 0.99;
  }

  .hero__title {
    display: none;
  }

  /* 3. Introduction */

  .intro {
    position: relative;
        display: block;
        width: 100%;
        min-height: 578px;
        margin: 0;
        padding: 61px 0 0;
        overflow: hidden;
  }

  .intro__body {
    position: relative;
        left: calc(50% - 180px);
        width: 260px;
        padding-left: 23px;
  }

  .intro__lead,
  .intro__text {
    font-size: 20px;
        font-weight: 600;
        line-height: normal;
  }

  /* INTRO: split the lead copy only on mobile to keep it clear of the image. */
  .intro__lead-mobile-break {
    display: block;
  }

  .intro__text {
    width: 260px;
        white-space: normal;
  }

  .intro__title {
    gap: 35px;
        margin: 41px 0;
        color: var(--color-teal-dark);
        font-size: 26px;
        font-weight: 900;
        line-height: normal;
  }

  .intro__figure {
    position: absolute;
        left: calc(50% - 12px);
        top: 5px;
        width: 230px;
        min-height: 0;
        height: 344px;
        margin: 0;
  }

  .intro__image--primary {
    width: 230px;
        height: 344px;
        border-radius: 0 72px 0 72px;
        object-position: center;
  }

  .intro__image--secondary {
    display: none;
  }

  /* 4. Search Solution */

  .solution {
    position: relative;
        min-height: 843px;
        padding: 0;
        overflow: hidden;
        background: #f5f5f5;
        text-align: left;
  }

  .solution::before {
    position: absolute;
        left: calc(50% - 274px);
        top: 129px;
        width: 454px;
        height: 775px;
        background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #e4f7ff 22%, #e4f7ff 100%);
        border-radius: 0 0 0 120px;
        content: "";
  }

  .solution__label {
    position: absolute;
        left: calc(50% - 93px);
        top: 26px;
        z-index: 1;
        display: block;
        width: 168px;
        margin: 0;
        color: #183a47;
        font-size: 16px;
        font-weight: 500;
        line-height: normal;
        text-align: center;
  }

  .solution__label span {
    position: absolute;
        left: -21px;
        top: -26px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        font-size: 16px;
        font-weight: 500;
  }

  .solution__label span::before {
    width: 14px;
        height: 14px;
  }

  .solution__tool {
    position: absolute;
        left: calc(50% - 156px);
        top: 78px;
        z-index: 1;
        width: 312px;
        height: 160px;
        margin: 0;
        border-radius: 0;
        background: #94c7d3;
  }

  .solution__tool picture {
    width: 303px;
        margin-top: 24px;
        margin-left: -17px;
  }

  .solution__tool img {
    width: 303px;
        height: auto;
        max-width: none;
  }

  .solution__cursor {
    left: 238.875px;
        top: 82.68px;
        width: 28.957px;
        height: 35.959px;
  }

  .solution__quick {
    position: absolute;
        left: calc(50% - 56px);
        top: 269px;
        z-index: 1;
        margin: 0;
        color: var(--color-teal-dark);
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
        white-space: nowrap;
  }

  .solution__benefits {
    position: absolute;
        left: calc(50% - 180px);
        top: 310px;
        z-index: 1;
        display: block;
        width: 360px;
        margin: 0;
        padding: 0;
  }

  .solution__benefit {
    position: absolute;
        display: grid;
        width: 144px;
        justify-items: center;
        gap: 9px;
        color: var(--color-teal-dark);
        font-size: 20px;
        font-weight: 700;
        line-height: normal;
  }

  .solution__benefit:nth-child(1) {
    left: 108px;
        top: 0;
  }

  .solution__benefit:nth-child(2) {
    left: 24px;
        top: 215px;
  }

  .solution__benefit:nth-child(3) {
    left: 192px;
        top: 215px;
  }

  .solution__benefit img {
    width: 144px;
        height: auto;
  }

  .solution__note {
    position: absolute;
        left: calc(50% - 116px);
        top: 758px;
        z-index: 1;
        width: 265px;
        margin: 0;
        color: var(--color-teal-dark);
        font-size: 16px;
        font-weight: 700;
        line-height: normal;
        text-align: left;
  }

  /* 5. Products */

  .products {
    display: block;
        height: 1011px;
        position: relative;
        overflow: hidden;
        background: #f5f5f5;
  }

  .products__title {
    left: calc(50% - 132px);
        top: 0;
        width: 264px;
        height: 61px;
        border-radius: 70px 70px 0 0;
        font-size: 20px;
        font-weight: 600;
  }

  .product-card {
    position: absolute;
        left: calc(50% - 180px);
        width: 360px;
        height: 432px;
        min-height: 0;
  }

  .product-card--pic {
    top: 100px;
  }

  .product-card--mov {
    top: 579px;
  }

  .product-card__media {
    position: absolute;
        inset: -40px -17px -38px -17px;
  }

  .product-card--mov .product-card__media {
    inset: -50px -60px -34px 0;
  }

  .product-card__media img {
    width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
  }

  .product-card::after,
  .product-card__body,
  .product-card__link {
    opacity: 1;
  }

  .product-card::after {
    position: absolute;
        inset: 0;
  }

  .product-card__body {
    position: absolute;
        left: 32px;
        top: 160px;
        width: 260px;
        margin: 0;
  }

  .product-card--mov .product-card__body {
    top: 160px;
  }

  .product-card__record {
    margin: 0 0 23px;
        font-size: 16px;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 1.6px;
  }

  .product-card__record strong {
    font-size: 32px;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 1.6px;
  }

  .product-card__features {
    min-height: 96px;
        margin: 0 0 18px 16px;
        font-size: 16px;
        font-weight: 500;
        line-height: 32px;
  }

  .product-card__name-jp {
    margin: 0 0 0 16px;
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
  }

  .product-card__name {
    margin: 4px 0 0 17px;
        font-size: 29px;
        font-weight: 600;
        line-height: normal;
  }

  .product-card__link {
    inset: 0;
        width: auto;
        height: auto;
        margin: 0;
  }

  .product-card__link .arrow-icon {
    top: 267px;
        right: auto;
        left: 304px;
        width: 18px;
        height: 18px;
        border-top-width: 3px;
        border-right-width: 3px;
        transform: rotate(45deg);
  }

  /* 6. Product Points */

  .points {
    display: none;
  }

  /* 7. Five Outcomes */

  .promise {
    min-height: 1520px;
        padding: 920px 0 0;
        background: #f5f5f5 url("./assets/promise-bg.png") center 1060px / 560px auto no-repeat;
  }

  .promise__heading {
    margin: 0;
        color: #316d9c;
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
        letter-spacing: 0;
  }

  .promise__list {
    --promise-item-width: 160px;
        --promise-item-height: 123px;

        position: absolute;
        left: 50%;
        top: 1080px;
        display: block;
        width: 360px;
        height: 360px;
        margin: 0;
        padding: 0;
        transform: translateX(-50%);
        z-index: 1;
  }

  .promise__item,
  .promise__item--quick,
  .promise__item--wall,
  .promise__item--prevention,
  .promise__item--heart,
  .promise__item--dx {
    position: absolute;
        display: grid;
        width: var(--promise-item-width);
        height: var(--promise-item-height);
        color: #5a7a93;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.1;
        text-align: center;
  }

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

  .promise__item span {
    bottom: 14px;
        max-width: 92%;
        font-size: 16px;
        line-height: 1.1;
  }

  .promise__item--quick {
    left: 16px;
        top: 0;
  }

  .promise__item--wall {
    left: 184px;
        top: 0;
  }

  .promise__item--prevention {
    left: -10px;
        top: 176px;
  }

  .promise__item--heart {
    left: 210px;
        top: 176px;
  }

  .promise__item--dx {
    left: 100px;
        top: 260px;
  }

  .promise__message {
    top: 1194px;
        z-index: 2;
        width: 220px;
        color: #06487c;
        font-size: 24px;
        font-weight: 700;
        line-height: 40px;
  }

  /* 8. Message */

  .message {
    border-radius: 0 72px 0 72px;
  }

  .message__body {
    width: calc(100% - 40px);
        margin-left: 20px;
  }

  /* 9. FAQ */

  .faq__list {
    width: calc(100% - 40px);
  }

  .faq__item {
    padding: 22px 20px;
  }

  .faq__question,
  .faq__answer {
    grid-template-columns: 28px 1fr;
  }
}

.hero__desktop-copy {
  display: block;
}

.hero__mobile-copy {
  display: none;
}

/* Breakpoint 7: (max-width: 720px) */

@media (max-width: 720px) {
  /* 1. Foundation */

  :root {
    --header-height: 0px;
  }

  html {
    background: #19778a;
  }

  body {
    min-width: 320px;
        padding-top: 0;
        overflow-x: hidden;
        background: #f5f5f5;
  }

  /* 2. Hero */

  .hero,
  .intro,
  .solution,
  .products,
  .promise,
  .message,
  .faq {
    width: 100%;
  }

  .hero {
    height: 576px;
  }

  .hero__image {
    left: calc(50% - 389px);
        top: 14px;
        width: 1070px;
        height: 714px;
  }

  .hero__shade {
    align-self: start;
        width: 100%;
        height: 542px;
        margin-top: 34px;
        margin-left: 0;
        background: linear-gradient(180deg, rgba(148, 199, 211, 0) 0%, rgba(148, 199, 211, 0.84) 100%);
  }

  .hero__title {
    position: absolute;
        inset: 0;
        z-index: 3;
        display: block;
        width: 100%;
        margin: 0;
        justify-self: stretch;
        color: #fff;
        font-family: Inter, "Noto Sans JP", sans-serif;
        font-size: 40px;
        font-weight: 900;
        letter-spacing: 2px;
        text-shadow: 3px 4px 7px rgba(0, 0, 0, 0.25);
  }

  .hero__desktop-copy {
    display: none;
  }

  .hero__mobile-copy {
    display: contents;
  }

  .hero__vertical-copy {
    position: absolute;
        top: 62px;
        left: calc(66.67% + 17px);
        display: block;
        height: 311px;
        color: #fff;
        font-size: 32px;
        font-weight: 900;
        letter-spacing: 1.6px;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        writing-mode: vertical-rl;
        transform: translateX(-50%);
  }

  .hero__vertical-copy .hero__text-accent,
  .hero__vertical-copy .hero__bracket {
    font-size: 32px;
        font-weight: 900;
        line-height: 1;
  }

  .hero__vertical-copy .hero__text-accent {
    color: #eb4354;
  }

  .hero__bracket {
    color: #fff;
  }

  .hero__stacked-copy {
    position: absolute;
        top: 350px;
        left: 48px;
        display: grid;
        gap: 0;
        font-size: 40px;
        font-weight: 900;
        letter-spacing: 2px;
        line-height: 1.875;
  }

  .hero__stacked-copy span {
    display: block;
        white-space: nowrap;
  }

  .hero__stacked-copy em {
    color: #eb4354;
        font-style: normal;
  }

  /* 3. Introduction */

  .intro {
    margin: 72px 0;
        color: #183a47;
  }

  .intro__lead,
  .intro__title,
  .intro__text {
    color: #183a47;
  }

  .intro__image--primary {
    transform: scaleX(-1);
  }

  .intro__figure {
    top: 61px;
  }

  /* 4. Search Solution */

  .solution__label {
    left: 50%;
        top: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: max-content;
        margin: 0;
        color: #183a47;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.2;
        text-align: left;
        transform: translateX(-50%);
  }

  .solution__label > span:first-child {
    position: static;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        font-size: 16px;
  }

  .solution__label > span:first-child::before {
    width: 14px;
        height: 14px;
  }

  .solution__label .solution__label-text {
    position: static;
        display: block;
        width: auto;
        height: auto;
        background: transparent;
        color: #183a47;
        font-size: 16px;
        line-height: 1.2;
  }

  .solution__label .solution__label-text::before {
    content: none;
  }

  .solution__label .solution__label-text br {
    display: initial;
  }

  .solution__tool {
    border-radius: 0 52px 0 52px;
  }

  .solution {
    min-height: 915px;
        margin-bottom: 0;
  }

  .solution::before {
    left: 0;
        width: 100%;
        height: 786px;
        border-radius: 0;
  }

  /* 5. Products */

  .products {
    width: 100%;
        margin: 0;
        background: #eaf8fb;
  }

  .products__title {
    width: 264px;
        height: 60.943px;
        border-radius: 70px 70px 0 0;
        background: #186c83;
  }

  .product-card {
    left: 0;
        width: 100%;
        transform: none;
        isolation: isolate;
  }

  .product-card__media {
    z-index: 0;
  }

  .product-card::after {
    position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        pointer-events: none;
  }

  .product-card__body {
    z-index: 2;
  }

  .product-card__link {
    z-index: 3;
  }

  .product-card--pic {
    top: 61px;
        height: 471px;
  }

  .product-card--mov {
    top: 532px;
        height: 479px;
  }

  .product-card__media {
    inset: 0;
  }

  .product-card--mov .product-card__media {
    inset: 0;
  }

  .product-card--pic::after {
    inset: 0;
  }

  .product-card--mov::after {
    inset: 0;
  }

  .product-card__body,
  .product-card--mov .product-card__body {
    top: 134px;
  }

  .product-card--mov .product-card__body {
    top: 96px;
  }

  .product-card--mov .product-card__name {
    white-space: nowrap;
  }

  /* 6. Product Points */

  .points {
    display: block;
        padding: 72px 16px;
        background: #f5f5f5;
  }

  .points .section-title {
    margin: 0;
        color: #074c60;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        text-align: center;
  }

  .points__list {
    display: grid;
        grid-template-columns: repeat(2, minmax(0, 144px));
        justify-content: center;
        gap: 24px;
        margin: 24px 0 0;
        padding: 0;
  }

  .points__item {
    display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        min-width: 0;
        text-align: center;
  }

  .points__image {
    width: 144px;
        height: auto;
        margin: 0;
  }

  .points__title {
    margin: 0;
        color: #074c60;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
  }

  .points__caption {
    margin: 0;
        color: #074c60;
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
  }

  /* 7. Five Outcomes */

  .promise {
    display: block;
        min-height: 0;
        margin-bottom: 0;
        overflow: visible;
        padding: 72px 0;
        /* SP uses one solid color through this section and the next-section overlap. */
        background-color: #d5e8f8;
        background-image: none;
  }

  .promise::after {
    position: absolute;
        right: 0;
        bottom: -72px;
        left: 0;
        z-index: 0;
        height: 72px;
        background: #d5e8f8;
        content: "";
        pointer-events: none;
  }

  .promise__heading,
  .promise__list,
  .promise__message {
    position: relative;
        z-index: 1;
  }

  .promise__heading {
    height: auto;
        margin: 0 auto 32px;
        text-align: center;
  }

  .promise__list {
    position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        margin: 0;
        gap: 24px;
        transform: none;
  }

  .promise__item,
  .promise__item--quick,
  .promise__item--wall,
  .promise__item--prevention,
  .promise__item--heart,
  .promise__item--dx {
    position: relative;
        inset: auto;
        width: min(280px, calc(100% - 40px));
        height: auto;
        aspect-ratio: 362 / 278;
  }

  .promise__item span {
    bottom: 24px;
        font-size: 16px;
        line-height: 1.2;
  }

  .promise__message {
    position: static;
        width: auto;
        margin: 32px auto 0;
        transform: none;
        text-align: center;
  }

  /* 8. Message */

  .message {
    /* Keep the 72px section gap inside the promise background. */
        margin-top: 0;
  }

  .message__media {
    -webkit-mask-image: none;
        mask-image: none;
  }

  /* 5. Products */

  .product-card__link .arrow-icon {
    top: 224px;
  }

  .product-card::after,
  .product-card__body,
  .product-card__link {
    opacity: 0;
  }

  .product-card:hover::after,
  .product-card:focus-within::after,
  .product-card:hover .product-card__body,
  .product-card:focus-within .product-card__body,
  .product-card:hover .product-card__link,
  .product-card:focus-within .product-card__link {
    opacity: 1;
  }

  .product-card--mov:hover::after,
  .product-card--mov:focus-within::after,
  .product-card--mov:hover .product-card__body,
  .product-card--mov:focus-within .product-card__body,
  .product-card--mov:hover .product-card__link,
  .product-card--mov:focus-within .product-card__link {
    opacity: 1 !important;
  }

  /* 8. Message */

  .message {
    /* 背景画像は全面、オートレイアウトの余白は本文側に適用する。 */
        min-height: 479px;
        padding: 0;
        border-radius: 0 72px 0 72px;
  }

  .message__media img {
    object-position: center;
  }

  .message__body {
    width: 312px;
        max-width: 100%;
        margin: 0 auto;
        padding: 72px 0;
  }

  .message__body p {
    font-size: 16px;
        font-weight: 600;
        line-height: 24px;
  }

  .message__body p + p {
    margin-top: 10px;
  }

  /* 9. FAQ */

  .faq {
    display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding: 72px 0;
        background: transparent;
  }

  .faq__title {
    width: 264px;
        min-height: 70px;
        margin: 0;
        padding: 0;
        border-radius: 0 44px 0 44px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.752;
        text-align: center;
  }

  .faq__title::before,
  .faq__title::after {
    content: none;
  }

  .faq__list {
    width: min(312px, calc(100% - 48px));
        gap: 16px;
        margin: 0;
  }

  .faq__item {
    min-height: 0;
        padding: 20px 24px;
        border-radius: 0 33px 0 33px;
  }

  .faq__question,
  .faq__answer {
    grid-template-columns: 16px minmax(0, 1fr);
        column-gap: 8px;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 24px;
  }

  .faq__question {
    padding-bottom: 16px;
  }

  .faq__answer {
    padding-top: 16px;
  }

  .faq__question span,
  .faq__answer span {
    font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 24px;
  }

  .faq__question p,
  .faq__answer p {
    font-size: 16px !important;
        font-weight: 400;
        line-height: 24px !important;
  }
}

/* Breakpoint 8: (max-width: 359px) */

@media (max-width: 359px) {
  /* 1. Foundation */

  body {
    min-width: 0;
  }

  /* 4. Search Solution */

  .solution__benefits {
    left: 0;
        width: 100%;
        transform: none;
  }

  .solution__benefit:nth-child(1) {
    left: calc(50% - 72px);
  }

  .solution__benefit:nth-child(2) {
    left: 0;
  }

  .solution__benefit:nth-child(3) {
    right: 0;
        left: auto;
  }

  /* 7. Five Outcomes */

  .promise__list {
    position: static;
        left: auto;
        width: 100%;
        transform: none;
  }

  .promise__item,
  .promise__item--quick,
  .promise__item--wall,
  .promise__item--prevention,
  .promise__item--heart,
  .promise__item--dx {
    position: relative;
        inset: auto;
  }

  .promise__message {
    position: static;
        transform: none;
  }

  /* 8. Message */

  .message__body {
    width: 100%;
        max-width: 312px;
        margin-right: auto;
        margin-left: auto;
  }
}

/* TYPOGRAPHY: keep all 16px mobile text on a consistent 32px line height. */
@media (max-width: 767px) {
  #shoho-log-main-lp,
  #shoho-log-main-lp .solution__label,
  #shoho-log-main-lp .solution__label span,
  #shoho-log-main-lp .solution__quick,
  #shoho-log-main-lp .solution__note,
  #shoho-log-main-lp .product-card__record,
  #shoho-log-main-lp .product-card__features,
  #shoho-log-main-lp .product-card__name-jp,
  #shoho-log-main-lp .promise__item--dx,
  #shoho-log-main-lp .promise__item span,
  #shoho-log-main-lp .points__title,
  #shoho-log-main-lp .points__caption,
  #shoho-log-main-lp .message__body p,
  #shoho-log-main-lp .faq__title,
  #shoho-log-main-lp .faq__answer,
  #shoho-log-main-lp .faq__answer span,
  #shoho-log-main-lp .faq__answer p {
    line-height: 32px !important;
  }
}

/* PRODUCT POINTS: change only the setup title break for mobile readability. */
@media (max-width: 767px) {
  #shoho-log-main-lp .points__title-mobile-break {
    display: block;
  }

  #shoho-log-main-lp .points__title-desktop-break {
    display: none;
  }
}

/* SEARCH SOLUTION: restore the POINT speech-bubble shape used on desktop. */
@media (max-width: 767px) {
  #shoho-log-main-lp .solution__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    color: #183a47;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px !important;
    text-align: left;
  }

  #shoho-log-main-lp .solution__label > span:first-child {
    position: relative;
    z-index: 0;
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    isolation: isolate;
    border-radius: 50%;
    background: var(--color-teal);
    color: #fff;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1 !important;
  }

  #shoho-log-main-lp .solution__label > span:first-child::before {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 19px;
    height: 19px;
    background: var(--color-teal);
    content: "";
  }

  #shoho-log-main-lp .solution__label .solution__label-text {
    position: static;
    display: block;
    width: auto;
    height: auto;
    background: transparent;
    color: #183a47;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 24px !important;
    white-space: nowrap;
    margin-left: 25px;
  }

  #shoho-log-main-lp .solution__label .solution__label-text br {
    display: initial;
  }
}

/* SEARCH SOLUTION: offset the label from the section edge so the bubble is not clipped. */
@media (max-width: 767px) {
  #shoho-log-main-lp .solution__label {
    top: 16px;
  }
}

/* SEARCH SOLUTION: align the bubble with the tool image and the copy with the bubble top. */
@media (max-width: 767px) {
  #shoho-log-main-lp .solution__label {
    left: calc(50% - 156px);
    align-items: flex-start;
    transform: none;
  }
}

/* SEARCH SOLUTION: cancel the inherited -21px / -26px offsets on the POINT bubble. */
@media (max-width: 767px) {
  #shoho-log-main-lp .solution__label > span:first-child {
    left: 0;
    top: 0;
  }
}

/* PRODUCT POINTS: place the setup title break before 「は」 on mobile only. */
#shoho-log-main-lp .points__title-mobile-break {
  display: none;
}

@media (max-width: 767px) {
  #shoho-log-main-lp .points__title-mobile-break {
    display: inline;
  }

  #shoho-log-main-lp .points__title-desktop-break {
    display: none;
  }
}

/* Breakpoint 9: (min-width: 721px) and (max-width: 1100px) */

@media (min-width: 721px) and (max-width: 1100px) {
  /* 3. Introduction */

  .intro {
    position: relative;
        display: block;
        width: 100%;
        min-height: 764px;
        margin: 120px 0 144px;
        padding: 0;
        overflow: hidden;
        color: #183a47;
  }

  .intro__body {
    position: relative;
        z-index: 1;
        width: 50%;
        padding-left: 8.3333%;
  }

  .intro__lead,
  .intro__text {
    margin: 0;
        color: inherit;
        font-size: 32px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
  }

  .intro__title {
    display: flex;
        flex-direction: column;
        gap: 80px;
        margin: 64px 0;
        color: inherit;
        font-size: 40px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
  }

  .intro__figure {
    position: absolute;
        top: 0;
        left: 41.6667%;
        width: 50%;
        min-height: 0;
        height: min(67.7647vw, 746px);
        margin: 0;
        overflow: hidden;
        border-radius: 96px 0 96px 0;
  }

  .intro__image--primary {
    position: absolute;
        top: -27.124%;
        left: -46.906%;
        width: 151.965%;
        max-width: none;
        height: 168.079%;
        object-fit: fill;
        transform: scaleX(-1);
  }

  .intro__image--secondary {
    display: none;
  }
}