/* 基本設定 */

:root {
    color-scheme: light;
    --navy: #163540;
    --teal: #1d706d;
    --orange: #b54a1d;
    --ivory: #f7f4ed;
}

html {
    font-size: min(calc(100vw / 39), calc(900px / 39));
    scroll-behavior: smooth;
    background: #163540;
}

body {
    font-feature-settings: "pwid", "pkna", "palt";
    font-size: 1.6rem;
    color: var(--navy);
    background: var(--ivory);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    line-height: 1.85;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
}

h1 {
    font-size: 3.003rem;
    line-height: 1.5;
    letter-spacing: -.04em;
    margin-top: 0.5rem;
    font-weight: 900;
    -webkit-text-stroke: 0.035em currentColor;
    paint-order: stroke fill;
}

:focus-visible {
    outline: 0.3rem solid var(--teal);
    outline-offset: 0.5rem;
}

.mobile {
    display: inline;
}

.number {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
}

/* ヘッダー */

.header {
    max-width: 132rem;
    margin: auto;
    padding: 1.6rem 2.3985rem 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    display: block;
    width: 13.5rem;
}

.header__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.header__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: max(44px, 4.4rem);
    padding: 0.4rem 0.9rem;
    border: 0.1rem solid var(--teal);
    border-radius: 2.5rem;
    background: var(--ivory);
    color: #195e5b;
    font-size: max(12px, 1.15rem);
    font-weight: 800;
    text-decoration: none;
}

.header__link:hover {
    opacity: .8;
}

/* FV：コピー */

.hero {
    overflow: hidden;
}

.hero__inner {
    --hero-inline-padding: 2.3985rem;
    padding: 2.6013rem var(--hero-inline-padding) 4.5006rem;
    position: relative;
    isolation: isolate;
}

.hero__message {
    grid-area: auto;
    padding: 0;
    position: relative;
    z-index: 1;
}

.hero__target {
    color: var(--navy);
    font-size: 1.2012rem;
    font-weight: 700;
    line-height: 2;
    letter-spacing: .025em;
    display: inline-block;
    padding: 1.209rem 1.599rem;
    border-radius: 1.209rem;
    background: #e4f0ed;
}

.hero__region {
    color: var(--teal);
    font-size: 1.45em;
    font-weight: 850;
}

#hero-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    -webkit-text-stroke: 0;
}

h1 span {
    color: var(--teal);
}

.hero__lead {
    font-size: 1.599rem;
    font-weight: 700;
    margin-top: 1rem;
    line-height: 1.9;
    text-shadow: 0 0 1.2rem var(--ivory), 0 0 0.8rem var(--ivory);
}

.hero__renewal-copy {
    margin-inline: calc(-1 * var(--hero-inline-padding));
    padding: 0.9rem var(--hero-inline-padding);
    background: rgb(228 240 237 / 85%);
    font-size: 1.75rem;
    text-align: center;
}

.hero__renewal-amp {
    display: block;
    line-height: 1;
}

.hero__diagnosis {
    margin-top: 1.3rem;
    font-size: 1.4rem;
    text-align: center;
}

.hero__diagnosis strong {
    font-weight: 900;
}

.hero__diagnosis + .button {
    margin-top: 1rem;
}

.hero__free,
.hero__secure,
.hero__renewal-price {
    font-size: 1.2em;
    font-weight: 900;
}

.hero__free {
    color: #c53030;
}

.hero__secure {
    color: var(--teal);
}

.hero__renewal-price {
    color: var(--orange);
    white-space: nowrap;
}

.hero__description {
    margin-top: 1.2987rem;
    font-size: 1.4001rem;
    color: #586f6a;
    text-shadow: 0 0 1.2rem var(--ivory), 0 0 0.8rem var(--ivory);
}

/* FV：背景イラスト */

.hero__art {
    margin: 0;
    position: absolute;
    grid-area: auto;
    z-index: -1;
    top: 1.95rem;
    right: -7.8rem;
    bottom: auto;
    width: 29rem;
    height: 32.76rem;
    mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
}

.hero__art img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 100% center;
}

.hero__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--ivory) 0%, transparent 16%, transparent 78%, var(--ivory) 100%);
}

/* FV：料金・リニューアル */

.hero__offer {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.offer__icon {
    border-right: 0.1rem solid #cbd6d0;
    width: 11rem;
}

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

.price {
    background: linear-gradient(120deg, #e4f1ef, #edf4ef);
    border: 0;
    border-radius: 1.2rem;
    padding: 1.4rem 1.3rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.price__title {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.5;
}

.price__value {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: .2rem;
    margin-top: .4rem;
    line-height: 1.3;
    white-space: nowrap;
}

.price__value strong {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: -0.025em;
    font-family: "Oswald", sans-serif;
}

.price__value>span {
    font-size: 1.5rem;
    font-weight: 700;
}

.price__value small {
    font-size: 1rem;
    margin-left: .2rem;
    font-weight: 500;
}



.plus {
    color: var(--navy);
    font-size: 3.3rem;
    line-height: 1;
}

.renewal {
    background: linear-gradient(120deg, #faf0de, #f7efdf);
    border: 0;
    border-radius: 1.2rem;
    padding: 1.4rem 1.3rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 3rem;
    width: 100%;
}

.renewal .offer__content>p:first-child {
    font-size: 1.2rem;
    font-weight: 750;
    line-height: 1.55;
}

.renewal__price {
    color: var(--orange);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.renewal__price strong {
    font-size: 5.8rem;
    letter-spacing: -.07em;
    padding-right: .2rem;
}

/* CTA */

.renewal__scope {
    margin-top: 0.4rem;
    font-size: 1.1rem;
    line-height: 1.65;
}

.renewal__scope a {
    display: block;
    color: #195e5b;
    text-underline-offset: 0.15em;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.4001rem;
    padding: 2.0007rem 1.2012rem;
    min-height: 4.8rem;
    margin-top: 2.8002rem;
    border-radius: 4.9998rem;
    background: linear-gradient(115deg, #b94a1c, #a83e17);
    color: #fff;
    font-size: 1.5015rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 0.6rem 1.5rem #9d491a18;
    transition: opacity .3s;
}

.button:hover {
    opacity: .8;
}

.hero__note {
    font-size: 1.2012rem;
    color: #5f706b;
    text-align: center;
    line-height: 1.9;
    margin-top: 1.7004rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* 放置によるリスク */
.risk {
    padding: 3rem 1.6rem 3.2rem;
    background: var(--ivory);
    text-align: center;
}

.section-number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin-bottom: 0.6rem;
    color: var(--orange);
    font-size: 3.8rem;
    line-height: 1.2;
}

.section-number::before,
.section-number::after {
    content: '';
    width: 3.7rem;
    height: 0.1rem;
    background: #e5ac89;
}

.risk__title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3.1rem;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -0.04em;
}

.risk__question {
    margin-top: 1.8rem;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.65;
}

.risk__question span,
.risk-card__title span {
    color: var(--teal);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.65rem;
    font-weight: 900;
}

.risk__lead {
    margin-top: -2.8rem;
    font-size: 1.25rem;
    line-height: 1.9;
}

.risk__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.risk-card {
    flex: 0 0 calc((100% - 1rem) / 2);
    min-width: 0;
    padding: 1.5rem 0.7rem 1.6rem;
    border: 0.1rem solid #f0eee7;
    border-radius: 1.2rem;
    background: #fffdf8;
}

.risk-card__image {
    margin-bottom: 1.2rem;
}

.risk-card__image img {
    display: block;
    width: 100%;
    height: 9rem;
    object-fit: contain;
}

.risk-card__title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -0.04em;
}

.risk-card__text {
    margin-top: 0.8rem;
    font-size: 1.2rem;
    line-height: 1.85;
}

.risk__note {
    margin-top: 1rem;
    color: #58655e;
    font-size: max(12px, 1rem);
    line-height: 1.8;
}

.risk__emphasis {
    color: var(--orange);
    font-size: 1.25em;
    font-weight: 900;
}

.risk__note-highlight {
    color: var(--orange);
    font-weight: bold;
}

/* よくあるお悩み */
.worries {
    position: relative;
    overflow: hidden;
    padding: 5.2rem 1.2rem 7.6rem;
    background: #e3efeb;
}

.worries::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.5rem;
    background: var(--ivory);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300V30Q275 60 250 30T200 30T150 30T100 30T50 30T0 30Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H300V30Q275 60 250 30T200 30T150 30T100 30T50 30T0 30Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.worries__intro {
    position: relative;
    min-height: 19.5rem;
    padding: 0 0.8rem 1.7rem;
    isolation: isolate;
}


.worries__title {
    position: relative;
    z-index: 1;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.65rem;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -0.055em;
}

.worries__title span {
    color: var(--teal);
}

.worries__lead {
    position: relative;
    z-index: 1;
    margin-top: 1.5rem;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.8;
}

.worries__person {
    position: absolute;
    z-index: -1;
    right: -5rem;
    bottom: 0;
    width: 23rem;
}

.worries__person img {
    display: block;
    width: 100%;
    height: auto;
}

.worries__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.worry-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 7.8rem;
    padding: 1.2rem 1.2rem 1.2rem 2rem;
    border-radius: 1.1rem;
    background: #fffdf7;
}

.worry-item__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.3rem;
    height: 2.3rem;
    border-radius: 0.4rem;
    background: var(--teal);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.worry-item__text {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: -0.04em;
}



.worry-item__image img {
    display: block;
    width: 12rem;
    height: auto;
}

/* 注意書き・補足案内の共通アイコン */
.info-icon {
    display: block;
    flex: 0 0 3.2rem;
    width: 3.2rem;
    height: 3.2rem;
}

.info-icon img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    filter: invert(34%) sepia(21%) saturate(757%) hue-rotate(178deg) brightness(95%) contrast(85%);
}

/* ARATAの解決策：導入 */
.solution {
    position: relative;
    z-index: 1;
    overflow: visible;
    padding: 3.6rem 1.8rem 3.8rem;
    background: #fffefb;
    isolation: isolate;
}

.solution::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 19.4rem;
    height: 25rem;
    background: url('img/solution-landscape.webp') center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 46%);
    mask-image: linear-gradient(to right, transparent, #000 46%);
}

.solution::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(to bottom, transparent 65%, #fffefb 98%);
}

.solution__label {
    position: relative;
    z-index: 1;
    width: fit-content;
    margin: 0 auto 1.8rem;
    padding: 0.7rem 2rem;
    border: 3px solid #ffb000;
    border-radius: 4rem;
    background: #fff;
    color: var(--teal);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
    letter-spacing: 0.05em;
    margin-top: -7rem;
}

.solution__title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.8;
    letter-spacing: -0.045em;
    text-shadow: 0 0 0.8rem #fffefb;
}

.solution__monthly {
    color: var(--orange);
}

.solution__lead {
    margin-top: 1.8rem;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.8;
    text-shadow: 0 0 0.8rem #fffefb, 0 0 0.4rem #fffefb;
}

.solution__service {
    color: var(--teal);
}

.risk__title img {
    display: block;
    width: 100%;
    height: auto;
}

.solution__notice {
    display: flex;
    align-items: flex-start;
    gap: 1.3rem;
    margin-top: 1.5rem;
    padding: 1.2rem;
    border-radius: 1rem;
    background: #eaf0f3;
    color: #53616b;
    font-size: 1.15rem;
    line-height: 1.8;
}

/* ARATAの解決策：運用方法の提案 */
.solution__plans {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
}

.plan-card {
    --plan-color: #287656;
    --plan-tint: #e0eee3;
    --plan-border: #bdd9c9;
    padding: 1.3rem 1.1rem 1.4rem;
    border: 0.1rem solid var(--plan-border);
    border-radius: 1.2rem;
    background: #f2f8f1;
}

.plan-card--renew {
    --plan-color: #d8682e;
    --plan-tint: #fbe8ce;
    --plan-border: #f5d5b5;
    background: #fff5e7;
}

.plan-card__badge {
    display: flex;
    align-items: center;
    width: fit-content;
    border-radius: 2rem;
    background: var(--plan-tint);
    color: var(--plan-color);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.6;
}

.plan-card__badge>span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 1.1rem;
    border-radius: 2rem;
    background: var(--plan-color);
    color: #fff;
    letter-spacing: 0.1em;
}

.plan-card__badge b {
    font-size: 1.65rem;
    line-height: 1.3;
}

.plan-card__badge>strong {
    padding: 0.2rem 1rem;
}

.plan-card__heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.3rem;
}

.plan-card__title {
    flex: 1 1 0;
    color: #16484a;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.95rem;
    font-weight: 900;
    line-height: 1.65;
    letter-spacing: -0.05em;
}

.plan-card--renew .plan-card__title {
    color: #402b13;
    font-size: 1.55rem;
}

.plan-card__low {
    color: var(--teal);
    font-size: 1.3em;
}

.plan-card__image {
    flex: 0 0 13rem;
}

.plan-card__image img {
    display: block;
    width: 100%;
    height: auto;
}

.plan-card__text {
    margin-top: 1.5rem;
    color: #38464b;
    font-size: 1.25rem;
    line-height: 1.9;
}

.plan-card__list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.plan-card__item {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    min-height: 3.8rem;
    padding: 0.7rem 1.4rem;
    border-radius: 0.7rem;
    background: #fff;
    color: #38464b;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6;
}

.plan-card__icon {
    flex: 0 0 2.4rem;
    width: 2.4rem;
    height: 2.6rem;
    color: var(--plan-color);
}

.plan-card__consent {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.3rem;
    padding: 1.2rem 1rem 0;
    border-top: 0.1rem dotted var(--plan-border);
    color: #38464b;
    font-size: 1.15rem;
    line-height: 1.85;
}

.plan-card__offer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.7rem;
    background: #fff;
}

.plan-card__offer-intro {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    font-size: 0.87rem;
    font-weight: 800;
    line-height: 1.65;
    color: #402b13;
}

.plan-card__offer-intro p {
    position: relative;
    flex: 1 1 0;
    padding: 0.4rem 0.6rem;
    border-right: 0.1rem solid #f4ce60;
    border-radius: 0.2rem;
    background: #fff1b6;
    white-space: nowrap;
    font-size: 1.2rem;
}

.plan-card__offer-intro p::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -0.4rem;
    width: 0.8rem;
    height: 0.8rem;
    background: #fff1b6;
    transform: translateY(-50%) rotate(45deg);
}

.plan-card__offer-intro .plan-card__icon {
    flex-basis: 2.3rem;
    width: 2.3rem;
}

.plan-card__zero {
    position: relative;
    flex: 0 0 auto;
    padding: 0 0.7rem;
    color: #402b13;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: left;
    line-height: 1.4;
    white-space: nowrap;
}

.plan-card__zero strong {
    color: var(--plan-color);
    font-size: 1.8rem;
    line-height: 1;
}

.plan-card__zero .number {
    font-size: 2.9rem;
}

.plan-card__build {
    color: var(--plan-color);
    font-size: 1.4rem;
}

.plan-card__zero::before,
.plan-card__zero::after {
    content: '';
    position: absolute;
    width: 2.1rem;
    height: 3.1rem;
    background: url('img/offer-emphasis.webp') center / contain no-repeat;
    top: 0.4rem;
    left: -0.9rem;
}

.plan-card__zero::after {
    left: auto;
    right: -0.9rem;
    transform: scaleX(-1);
}

.plan-card__note {
    margin-top: 0.7rem;
    color: #665c50;
    font-size: 0.85rem;
    line-height: 1.7;
}

/* 飛騨のWEBパートナーについて */
.company {
    padding: 3rem 1.8rem 3.2rem;
    background: var(--ivory) url('img/company-botanical.webp') center / 100% 100% no-repeat;
    text-align: center;
}

.company__title {
    padding: 0.8rem 0.5rem;
    border-radius: 0.8rem;
    background: rgb(255 255 255 / 82%);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    line-height: 1.5;
}

.company__tagline {
    font-size: 2.1rem;
    letter-spacing: -0.04em;
}

.company__tagline em {
    color: var(--teal);
    font-style: normal;
}

.company__name {
    color: var(--teal);
    font-size: 3.8rem;
    letter-spacing: 0.02em;
}

.company__question {
    font-size: 1.7rem;
}

.company__photo {
    width: 72%;
    margin: 2rem auto 0;
    overflow: hidden;
    border-radius: 0.4rem;
    aspect-ratio: 1.08;
}

.company__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 53%;
}

.company__text {
    text-align: left;
    padding: 1rem 1.5rem;
    border-radius: 0.8rem;
    background: rgb(255 255 255 / 82%);
    margin-top: 2.2rem;
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: 0;
}

/* サービス・料金 */
.services {
    padding: 3rem 1.4rem 2.5rem;
    background: linear-gradient(var(--ivory) 48%, #e6f2ee);
}

.services__title {
    margin-bottom: 1.6rem;
    color: var(--teal);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.6;
    letter-spacing: -0.04em;
}

.services__catch {
    padding-inline: 0.7rem;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.45rem;
    font-weight: 900;
    line-height: 1.55;
    letter-spacing: -0.05em;
}

.services__lead {
    margin-top: 1.1rem;
    padding-inline: 0.7rem;
    font-size: 1.45rem;
    line-height: 1.85;
}

.service-price {
    margin-top: 1.6rem;
    padding: 1.3rem 1.6rem 1.4rem;
    border: 0.1rem solid #438784;
    border-radius: 0.9rem;
    background: linear-gradient(125deg, #076c6e, #004c50 60%, #06464a);
    color: #fff;
    text-align: center;
}

.service-price__title {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.2;
}

.service-price__amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0.7rem 0 1.2rem;
    line-height: 1;
}

.service-price__monthly {
    padding: 1.4rem 0.7rem 1.4rem 0;
    border-top: 0.1rem solid #ffffff40;
    border-right: 0.1rem solid #ffffff40;
    border-bottom: 0.1rem solid #ffffff40;
    font-size: 1.65rem;
    font-weight: 800;
    white-space: nowrap;
}

.service-price__amount>strong {
    font-size: 6.6rem;
    letter-spacing: -0.04em;
    color: #fffbe4;
}

.service-price__unit {
    align-self: flex-end;
    padding-bottom: 0.3rem;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: left;
}

.service-price__unit small {
    display: block;
    font-size: 1.15rem;
    white-space: nowrap;
}

.service-price__label {
    padding: 0.3rem 0.7rem;
    border-radius: 3rem;
    background: #d9eeee;
    color: #0a4f54;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.6;
}

.service-price__text {
    margin-top: 0.7rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.85;
}

.services__details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.2rem;
}

.service-detail {
    position: relative;
    padding: 1rem 4rem 1.3rem 5.4rem;
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
}

.service-detail__number {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4rem;
    border-radius: 0 0 2rem 0;
    background: linear-gradient(120deg, #247e7b, #169a9b);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
}

.service-detail__title {
    text-align: center;
    margin: 0;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: -0.04em;
}

.service-detail__icons {
    justify-content: center;
    display: flex;
    gap: 1.2rem;
    margin-top: 0.9rem;
}

.service-icon {
    display: flex;
    flex: 0 0 4.3rem;
    align-items: center;
    justify-content: center;
    width: 4.3rem;
    height: 4.3rem;
    border-radius: 50%;
    background: #e7f7f4;
    color: #175d63;
}

.service-icon svg {
    display: block;
    width: 2.6rem;
    height: 2.6rem;
}

.service-icon--type {
    font-family: Georgia, serif;
    font-size: 3rem;
    font-weight: 700;
}

.service-detail__text {
    margin-top: 1rem;
    color: #374650;
    font-size: 1.25rem;
    line-height: 1.9;
}

.service-detail__text strong,
.service-detail__limit strong {
    color: #175d63;
}

.service-detail__limit {
    margin-top: 0.8rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.5rem;
    background: #ecf6f5;
    font-size: 1.2rem;
    line-height: 1.8;
}

.service-detail__limit .number {
    font-size: 1.65rem;
}

.service-detail__note {
    margin-top: 0.8rem;
    font-size: 1rem;
    color: #53616b;
    line-height: 1.75;
}

.service-support {
    margin-top: 2rem;
}

.service-support__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    font-size: 1.65rem;
    line-height: 1.6;
    text-align: center;
}

.service-support__title::before,
.service-support__title::after {
    content: '';
    flex: 1 1 0;
    height: 0.1rem;
    background: #6a9699;
}

.service-support__lead {
    margin-top: 0.7rem;
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: center;
}

.service-support__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1rem;
}

.support-card {
    display: flex;
    flex: 0 0 calc((100% - 0.7rem) / 2);
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1rem 0.7rem;
    border-radius: 0.8rem;
    background: #fff;
}

.support-card .service-icon {
    flex-basis: 3rem;
    width: 3rem;
    height: 3rem;
}

.support-card .service-icon svg {
    width: 1.9rem;
    height: 1.9rem;
}

.support-card .service-icon img {
    display: block;
    width: 1.9rem;
    height: 1.9rem;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(27%) sepia(30%) saturate(1033%) hue-rotate(137deg) brightness(94%) contrast(92%);
}

.support-card__body {
    flex: 1 1 0;
    min-width: 0;
}

.support-card__title {
    margin: 0;
    font-size: max(12px, 1.05rem);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: -0.04em;
}

.support-card__text {
    margin-top: 0.4rem;
    color: #46555e;
    font-size: max(12px, 1rem);
    line-height: 1.7;
}

.service-support__notice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.8rem;
    background: #fff;
    color: #46555e;
    font-size: max(12px, 1rem);
    line-height: 1.8;
}

.service-support__notice p+p {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 0.1rem solid #dce4e6;
}

.service-support__special-price {
    color: var(--orange);
}

.service-support__notice a {
    color: #1264a3;
    text-decoration: underline;
}

/* 無料診断の流れ */
.flow {
    padding: 3rem 1.4rem 2.8rem;
    background: #fff;
}

.flow__title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.4rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.5;
}

.flow__title::after {
    content: '';
    display: block;
    width: 3.2rem;
    height: 0.25rem;
    margin: 1rem auto 0;
    border-radius: 1rem;
    background: #276ba5;
}

.flow__catch {
    margin-top: 1.5rem;
    color: #276ba5;
    font-size: 1.9rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.6;
    letter-spacing: -0.04em;
}

.flow__lead {
    margin-top: 0.9rem;
    padding-inline: 0.5rem;
    color: #374650;
    font-size: 1.25rem;
    line-height: 1.9;
}

.flow__steps {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.flow-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.4rem 1rem 1.4rem 3rem;
    border-radius: 1rem;
    background: #edf7fc;
}

.flow-step:nth-child(2) {
    background: #eaf7f8;
}

.flow-step:last-child {
    background: #eaf4fe;
}

.flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 3.2rem;
    bottom: -1.2rem;
    left: 2.15rem;
    border-left: 0.2rem dotted #69b7d5;
}

.flow-step__badge {
    position: absolute;
    z-index: 2;
    top: -0.2rem;
    left: -0.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4.7rem;
    height: 4.7rem;
    border-radius: 50%;
    background: #276ba5;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
}

.flow-step:nth-child(2) .flow-step__badge {
    background: #247e91;
}

.flow-step:last-child .flow-step__badge {
    background: #345d9d;
}

.flow-step__badge b {
    font-size: 1.7rem;
}

.flow-step__image {
    flex: 0 0 8.5rem;
}

.flow-step__image img {
    display: block;
    width: 100%;
    height: auto;
}

.flow-step:nth-child(1) .flow-step__image img {
    width: 108%;
    max-width: none;
    margin-left: -4%;
}

.flow-step:nth-child(3) .flow-step__image img {
    width: 110%;
    max-width: none;
    margin-left: -5%;
}

.flow-step__body {
    flex: 1 1 0;
    min-width: 0;
}

.flow-step__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: -0.04em;
}

.flow-step__text {
    margin-top: 0.7rem;
    color: #374650;
    font-size: max(12px, 1.15rem);
    line-height: 1.85;
}
.flow__free-notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.4rem;
    padding: 1rem 1.2rem;
    border-radius: 0.8rem;
    background: #fff9e6;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.7;
}

.flow__notice-icon {
    flex: 0 0 4rem;
    padding-right: 0.8rem;
    border-right: 0.1rem solid #efc562;
}

.flow__notice-icon img {
    display: block;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
}

.flow__scope {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: 0.8rem;
    padding: 1rem 1.2rem;
    border-radius: 0.8rem;
    background: #f0f4f8;
    color: #46536b;
    font-size: max(12px, 1.1rem);
    line-height: 1.8;
}

.flow__scope-body {
    flex: 1 1 0;
}

.flow__scope-body p + p {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 0.1rem solid #d9e1e9;
}

/* よくあるご質問 */
.faq {
    padding: 3rem 1.4rem;
    background: var(--ivory);
}

.faq__title {
    color: var(--teal);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
}

.faq__lead {
    margin-top: 1.3rem;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.6;
}

.faq__items {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 2.4rem;
}

.faq-item {
    overflow: hidden;
    border-radius: 1.2rem;
    background: #e2efee;
}

.faq-item__question {
    position: relative;
    min-height: 44px;
    padding: 1.1rem 3.3rem 1.1rem 1.1rem;
    cursor: pointer;
    list-style: none;
    margin: 0;
    font-size: max(14px, 1.5rem);
    font-weight: 800;
    line-height: 1.8;
    letter-spacing: -0.02em;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item__question::after {
    content: '+';
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    color: var(--teal);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.35;
}

.faq-item[open] > .faq-item__question::after {
    content: '−';
}

.faq-item__question:focus-visible {
    outline: 0.2rem solid var(--teal);
    outline-offset: -0.3rem;
    border-radius: 1.2rem;
}

.faq-item__question > span {
    margin-right: 0.4rem;
    color: var(--teal);
}

.faq-item__answer {
    margin: 0 1.1rem 1.1rem;
    padding: 1.2rem 1.3rem;
    border-radius: 0.8rem;
    background: #fff;
    font-size: max(14px, 1.35rem);
    line-height: 1.95;
}

.faq-item__answer p + p {
    margin-top: 1.1rem;
}

.faq-item__list {
    margin: 0.8rem 0 1.1rem;
    padding-left: 1.6rem;
    list-style: disc;
}

.faq-item__list li + li {
    margin-top: 0.4rem;
}

/* 最終のご案内と無料診断フォーム */
.contact {
    padding: 3rem 1.8rem;
    background: linear-gradient(#e9f3ef, #f7f4ed 42%);
}

.contact__intro {
    text-align: center;
}

.contact__eyebrow {
    color: var(--teal);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.7;
}

.contact__title {
    margin-top: 1.2rem;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.7rem;
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: -0.04em;
}

.contact__catch {
    margin-top: 1.6rem;
    color: var(--teal);
    font-size: 1.95rem;
    font-weight: 800;
    line-height: 1.7;
}

.contact__catch span {
    color: #c53030;
    font-size: 1.2em;
}

.contact__lead {
    margin-top: 1rem;
    font-size: 1.4rem;
    line-height: 1.9;
}

.contact__points {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: fit-content;
    margin: 1.6rem auto 0;
    padding: 0;
    list-style: none;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: left;
    line-height: 1.8;
}

.contact__points li::before {
    content: '✓';
    margin-right: 0.6rem;
    color: var(--teal);
}

.contact__form {
    margin-top: 2rem;
    padding: 1.6rem;
    border: 0.1rem solid #cbded7;
    border-radius: 1rem;
    background: #fff;
}

.contact__form-title {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.7;
    text-align: center;
}

.diagnosis-form .form-note {
    margin-top: 0.7rem;
    color: #5f706b;
    font-size: max(12px, 1.1rem);
    line-height: 1.8;
}

.diagnosis-form .field,
.diagnosis-form .update-status {
    margin-top: 1.8rem;
}

.diagnosis-form .field > label,
.diagnosis-form legend {
    font-size: max(14px, 1.35rem);
    font-weight: 700;
    line-height: 1.8;
}

.diagnosis-form .required {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.2rem;
    background: #f9e9e4;
    color: #ad3f22;
    font-size: max(11px, 0.95rem);
    vertical-align: middle;
}

.diagnosis-form .field > input,
.diagnosis-form textarea {
    display: block;
    width: 100%;
    margin-top: 0.6rem;
    padding: 1rem;
    border: 0.1rem solid #aabdb7;
    border-radius: 0.4rem;
    background: #fafcfb;
    color: var(--navy);
    font: inherit;
    font-size: max(16px, 1.6rem);
    line-height: 1.6;
}

.diagnosis-form textarea {
    resize: vertical;
    min-height: 11rem;
}

.diagnosis-form .update-status {
    min-width: 0;
    margin-inline: 0;
    padding: 0;
    border: 0;
}

.diagnosis-form .update-status label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: fit-content;
    min-height: max(44px, 4.4rem);
    font-size: max(14px, 1.35rem);
    cursor: pointer;
}

.diagnosis-form input[type='radio'] {
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
    accent-color: var(--teal);
}

.diagnosis-form :is(input, textarea, button):focus-visible {
    outline: 0.2rem solid var(--teal);
    outline-offset: 0.2rem;
}

.diagnosis-form .button {
    width: 100%;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.diagnosis-form .powered {
    margin-top: 1.4rem;
    color: #63716e;
    font-size: 1rem;
    text-align: center;
}

.footer {
    padding: 2rem 1.8rem;
    background: #fff;
    text-align: center;
}

.footer img {
    width: 17rem;
    height: auto;
}