/*
 * guide-parent.css — ガイド親ページ（/guide/）固有スタイル
 * ============================================
 *
 * 共通スタイルは common.css で読み込み済み
 * CTA ボタンは common.css の p-service-cta-btn を利用
 *
 * ============================================
 */

/* ===================================
 * ユーティリティクラス（このページ固有）
 * =================================== */

/* 769px〜900px のみ表示 */
.tab-only {
    display: none;
}

@media (min-width: 769px) and (max-width: 900px) {
    .tab-only {
        display: inline;
    }
}

/* 1024px以下で表示 */
.sp-1024-only {
    display: none;
}

@media (max-width: 1024px) {
    .sp-1024-only {
        display: inline;
    }
}

/* 420px以下で表示 */
.sp-420-only {
    display: none;
}

@media (max-width: 420px) {
    .sp-420-only {
        display: inline;
    }
}

/* ===================================
 * ページタイトル（白背景・文字色変更）
 * =================================== */
.page-title--guide-white {
    background: linear-gradient(180deg, var(--service-color-cream) 0%, var(--service-color-white) 100%) !important;
    color: #464646;
}

.page-title--guide-white .page-title__text {
    font-size: clamp(21px, calc(0.78vw + 15px), 30px);
}

@media (max-width: 768px) {
    .page-title--guide-white .page-title__text {
        font-size: clamp(15px, calc(1.17vw + 11.02px), 20px);
    }
}

/* ===================================
 * 共通背景色 + 共通line-height
 * =================================== */
.p-gp-hero,
.p-gp-criteria,
.p-gp-exterior {
    background-color: var(--service-color-white);
}

.p-gp-book,
.p-gp-cta {
    background-color: var(--service-color-cream);
}

.p-gp-hero,
.p-gp-book,
.p-gp-criteria,
.p-gp-exterior,
.p-gp-cta {
    line-height: 1.6;
}

/* ===================================
 * テキストリンク共通（下線+矢印）
 * =================================== */
.p-gp-book__link,
.p-gp-book__box-link,
.p-gp-exterior__link,
.p-gp-cta__link {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 calc(100% - 1px);
    background-repeat: repeat-x;
    background-size: 100% 1px;
    padding-bottom: 3px;
    margin-left: -0.375em;
}

.p-gp-book__link::after,
.p-gp-book__box-link::after,
.p-gp-exterior__link::after,
.p-gp-cta__link::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-top: 2.5px solid currentColor;
    border-right: 2.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.2em);
    margin-left: 0.25em;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .p-gp-book__link::after,
    .p-gp-book__box-link::after,
    .p-gp-exterior__link::after,
    .p-gp-cta__link::after {
        width: 0.4em;
        height: 0.4em;
        border-top-width: 2px;
        border-right-width: 2px;
    }

    .p-gp-book__link,
    .p-gp-book__box-link,
    .p-gp-exterior__link,
    .p-gp-cta__link {
        background-size: 100% 0.5px;
    }
}

/* ===================================
 * セクション1: ヒーロー（漫画）
 * =================================== */
.p-gp-hero__inner {
    max-width: calc(1100px + var(--margin--use--outside) * 2);
    margin-inline: auto;
    padding-inline: var(--margin--use--outside);
    padding-block: calc(var(--section) / 2) min(var(--section-s), 80px);
    text-align: center;
}

.p-gp-hero__title {
    line-height: 1.5;
    color: var(--service-color-text);
    margin-bottom: clamp(20px, calc(0.87vw + 13.31px), 30px);
}

.p-gp-hero__desc {
    font-size: clamp(22px, calc(0.52vw + 18px), 28px);
    font-weight: 700;
    line-height: 1.8;
    color: var(--service-color-text);
    margin-top: 0;
    margin-bottom: 0;
}

.p-gp-hero__desc--sub {
    margin-top: 0.8em;
    margin-bottom: clamp(28px, calc(1.74vw + 14.62px), 48px);
}

.p-gp-hero__comic {
    margin-bottom: clamp(24px, calc(1.39vw + 13.31px), 40px);
}

.p-gp-hero__comic img {
    width: 100%;
    height: auto;
}

.p-gp-hero__lead {
    line-height: 1.8;
    color: var(--service-color-text);
}

@media (max-width: 768px) {
    .p-gp-hero__inner {
        padding-block: calc(var(--section-s) * 2 / 3) 24px;
    }

    .p-gp-hero__title {
        font-size: clamp(21px, calc(2.15vw + 13.47px), 30px);
        line-height: 1.4;
        margin-bottom: 20px;
        margin-inline: calc(-1 * var(--margin--use--outside));
    }

    .p-gp-hero__desc {
        font-size: clamp(15px, calc(0.72vw + 12.49px), 18px);
        margin-bottom: 0;
    }

    .p-gp-hero__desc--sub {
        margin-top: clamp(0.8em, calc(1.20vw + 0.38em), 1.3em);
        margin-bottom: 28px;
    }

    .p-gp-hero__comic {
        margin-bottom: 16px;
    }

    .p-gp-hero__lead {
        font-size: clamp(15px, calc(1.67vw + 9.15px), 22px);
        line-height: 1.5;
    }
}

/* ===================================
 * セクション2: 書籍案内
 * =================================== */
.p-gp-book__inner {
    max-width: calc(1100px + var(--margin--use--outside) * 2);
    margin-inline: auto;
    padding-inline: var(--margin--use--outside);
    padding-block: min(var(--section), 80px);
    text-align: center;
}

.p-gp-book__title {
    color: var(--service-color-text);
    margin-bottom: clamp(16px, calc(0.70vw + 10.6px), 24px);
}

.p-gp-book__link {
    display: inline-block;
    font-size: clamp(24px, calc(0.70vw + 18.62px), 32px);
    font-weight: 700;
    color: var(--service-color-link);
    line-height: 1.3;
    margin-bottom: clamp(36px, calc(2.61vw + 16px), 80px);
    transition: opacity 0.3s ease;
}

.p-gp-book__link:hover {
    opacity: 0.7;
}

.p-gp-book__box {
    max-width: 1100px;
    margin-inline: auto;
    background-color: var(--service-color-white);
    padding: clamp(24px, calc(2.09vw + 8px), 56px) clamp(20px, calc(1.74vw + 6.6px), 40px);
}

.p-gp-book__box-text {
    font-size: clamp(22px, calc(0.52vw + 18px), 28px);
    font-weight: 700;
    color: var(--service-color-text);
    margin-bottom: clamp(8px, calc(1.04vw + 0px), 24px);
}

.p-gp-book__box-link {
    display: inline-block;
    font-size: clamp(24px, calc(0.70vw + 18.62px), 32px);
    font-weight: 700;
    color: var(--service-color-link);
    line-height: 1.3;
    margin-bottom: 0;
    transition: opacity 0.3s ease;
}

.p-gp-book__box-link:hover {
    opacity: 0.7;
}

.p-gp-book__box-note {
    font-size: clamp(12px, calc(0.17vw + 10.69px), 14px);
    color: var(--service-color-text);
    margin-block-start: clamp(4px, calc(0.52vw + 0px), 12px);
}

@media (max-width: 768px) {
    .p-gp-book__inner {
        padding-block: var(--section-s);
    }

    .p-gp-book__title {
        font-size: clamp(20px, calc(1.44vw + 14.96px), 28px);
        margin-bottom: 16px;
    }

    .p-gp-book__link {
        font-size: clamp(17px, calc(0.72vw + 14.49px), 20px);
        margin-bottom: 20px;
    }

    .p-gp-book__box {
        width: 100%;
        padding: clamp(16px, calc(1.91vw + 9.3px), 24px) 16px;
    }

    .p-gp-book__box-text {
        font-size: clamp(17px, calc(0.72vw + 14.49px), 20px);
        line-height: 1.5;
    }

    .p-gp-book__box-link {
        font-size: clamp(17px, calc(0.72vw + 14.49px), 20px);
    }

    .p-gp-book__box-note {
        font-size: 12px;
    }
}

/* ===================================
 * セクション3: 4つの基準カード
 * =================================== */
.p-gp-criteria__inner {
    max-width: calc(1460px + var(--margin--use--outside) * 2);
    margin-inline: auto;
    padding-inline: var(--margin--use--outside);
    padding-block: min(var(--section), 80px);
    text-align: center;
}

.p-gp-criteria__title {
    font-size: clamp(35px, calc(1.30vw + 25px), 50px);
    font-weight: 700;
    color: var(--service-color-text);
    margin-bottom: clamp(18px, calc(1.22vw + 8.62px), 32px);
    line-height: 1.5;
}

.p-gp-criteria__lead {
    font-size: clamp(22px, calc(0.87vw + 15.31px), 32px);
    font-weight: 500;
    color: var(--service-color-text);
    margin-bottom: clamp(36px, calc(2.61vw + 16px), 66px);
}

.p-gp-criteria__closing {
    font-size: clamp(22px, calc(0.87vw + 15.3px), 32px);
    font-weight: 700;
    color: var(--service-color-text);
    margin-top: clamp(27px, calc(2.00vw + 11.62px), 50px);
}

/* --- カードグリッド --- */
.p-gp-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, calc(0.87vw + 5.31px), 22px);
}

/* カード内改行制御: 900px超のみ表示 */
.p-gp-cards .pc-wide-only {
    display: inline;
}

/* カード内改行制御: 769〜900pxのみ表示 */
.p-gp-cards .pc-narrow-only {
    display: none;
}

@media (max-width: 900px) {
    .p-gp-cards .pc-wide-only {
        display: none;
    }
    .p-gp-cards .pc-narrow-only {
        display: inline;
    }
}

@media (max-width: 768px) {
    .p-gp-cards .pc-narrow-only {
        display: none;
    }
}

/* --- カードアイテム --- */
.p-gp-cards__item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--service-color-text);
    background-color: var(--service-color-cream);
    transition: opacity 0.3s ease;
}

.p-gp-cards__item:hover {
    opacity: 0.8;
}

.p-gp-cards__body {
    flex: 1;
    padding: clamp(16px, calc(1.04vw + 8px), 28px) clamp(12px, calc(0.70vw + 6.6px), 20px);
    text-align: center;
}

.p-gp-cards__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, calc(1.56vw + 20px), 50px);
    height: clamp(32px, calc(1.56vw + 20px), 50px);
    border-radius: 50%;
    background-color: var(--service-color-orange);
    color: var(--service-color-white);
    font-size: clamp(18px, calc(1.04vw + 10px), 30px);
    font-weight: 700;
    line-height: 1;
    margin-inline: auto;
}

.p-gp-cards__heading {
    font-size: clamp(22px, calc(0.87vw + 15.31px), 32px);
    font-weight: 700;
    line-height: 1.4;
    margin-block: clamp(6px, calc(0.35vw + 3.31px), 10px) clamp(8px, calc(0.35vw + 5.31px), 12px);
}

.p-gp-cards__desc {
    font-size: clamp(16px, calc(0.87vw + 9.31px), 26px);
    font-weight: 500;
    margin: 0;
}

/* --- カードリンク部分 --- */
.p-gp-cards__link {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: clamp(10px, calc(0.52vw + 6px), 16px) clamp(12px, calc(0.70vw + 6.6px), 20px);
    position: relative;
}

.p-gp-cards__link::before {
    content: "";
    position: absolute;
    top: 0;
    left: clamp(12px, calc(0.70vw + 6.6px), 20px);
    right: clamp(12px, calc(0.70vw + 6.6px), 20px);
    border-top: 1px dotted var(--service-color-text);
}

.p-gp-cards__link-text {
    font-size: clamp(13px, calc(0.61vw + 8.31px), 20px);
    font-weight: 500;
    line-height: 1.5;
    min-height: 3em;
    display: inline-flex;
    align-items: flex-start;
    color: var(--service-color-link);
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 4px;
}

.p-gp-cards__arrow {
    display: inline-block;
    width: clamp(8px, calc(0.35vw + 5.31px), 12px);
    height: clamp(8px, calc(0.35vw + 5.31px), 12px);
    border-top: 2px solid var(--service-color-link);
    border-right: 2px solid var(--service-color-link);
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-top: clamp(6px, calc(0.35vw + 3.31px), 10px);
}

/* --- セクション3 SP (768-541px) --- */

/* --- セクション3 SP --- */
@media (max-width: 768px) {
    .p-gp-criteria__inner {
        padding-block: var(--section-s);
    }

    .p-gp-criteria__title {
        font-size: clamp(22px, calc(1.44vw + 16.96px), 28px);
        margin-bottom: 12px;
    }


    .p-gp-criteria__lead {
        font-size: clamp(17px, calc(0.72vw + 14.49px), 20px);
        margin-bottom: 20px;
    }

    .p-gp-criteria__closing {
        font-size: clamp(19px, calc(0.72vw + 16.49px), 22px);
        text-align: center;
        margin-top: 20px;
    }

    .p-gp-cards {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 550px;
        margin-inline: auto;
    }

    .p-gp-cards__item {
        flex-direction: column;
    }

    .p-gp-cards__body {
        display: block;
        padding: clamp(16px, calc(1.91vw + 9.3px), 24px) clamp(16px, calc(1.91vw + 9.3px), 24px) 5px;
        text-align: left;
    }

    .p-gp-cards__number {
        display: inline-flex;
        width: clamp(28px, calc(1.91vw + 21.3px), 36px);
        height: clamp(28px, calc(1.91vw + 21.3px), 36px);
        font-size: clamp(16px, calc(0.96vw + 12.65px), 20px);
        vertical-align: middle;
        margin-right: clamp(4px, calc(0.96vw + 0.65px), 8px);
        padding-bottom: 2px;
    }

    .p-gp-cards__heading {
        display: inline;
        font-size: clamp(22px, calc(1.20vw + 17.81px), 27px);
        font-weight: 700;
        margin-block: 0;
        vertical-align: middle;
    }

    .p-gp-cards__desc {
        width: 100%;
        font-size: clamp(16px, calc(1.91vw + 9.3px), 24px);
        font-weight: 500;
        margin-top: 8px;
    }

    .p-gp-cards__desc br:not(.sp-only):not(.sp-420-only) {
        display: none;
    }

    .p-gp-cards__link {
        justify-content: space-between;
        align-items: center;
        padding: 5px clamp(16px, calc(1.91vw + 9.3px), 24px) clamp(16px, calc(1.91vw + 9.3px), 24px);
        border-top: none;
        position: relative;
    }

    .p-gp-cards__link::before {
        left: 16px;
        right: 16px;
    }

    .p-gp-cards__link-text {
        font-size: clamp(14px, calc(0.96vw + 10.65px), 18px);
        font-weight: 500;
        min-height: auto;
    }

    .p-gp-cards__link-text br {
        display: none;
    }

    .p-gp-cards__arrow {
        width: 10px;
        height: 10px;
        margin-top: 0.15em;
    }
}

/* ===================================
 * セクション4: 外壁塗装
 * =================================== */
.p-gp-exterior {
    border-top: 1px solid var(--service-color-text);
}

.p-gp-exterior__inner {
    margin-inline: auto;
    padding-inline: var(--margin--use--outside);
    padding-block: min(var(--section), 80px);
    text-align: center;
}

.p-gp-exterior__title {
    font-size: clamp(35px, calc(1.30vw + 25px), 50px);
    font-weight: 700;
    color: var(--service-color-text);
    margin-bottom: clamp(27px, calc(2.00vw + 11.62px), 50px);
    line-height: 1.5;
}


.p-gp-exterior__lead {
    font-size: clamp(22px, calc(0.52vw + 18px), 28px);
    font-weight: 500;
    color: var(--service-color-text);
    margin-top: 0;
    margin-bottom: clamp(12px, calc(0.70vw + 6.6px), 20px);
}

.p-gp-exterior__group {
    margin-top: clamp(24px, calc(1.74vw + 10.62px), 44px);
}

.p-gp-exterior__sub {
    font-size: clamp(22px, calc(0.52vw + 18px), 28px);
    font-weight: 700;
    line-height: 1.5;
    color: var(--service-color-text);
    margin-top: 0;
    margin-bottom: clamp(12px, calc(0.70vw + 6.6px), 20px);
}

.p-gp-exterior__sub--light {
    font-weight: 500;
    font-size: clamp(16px, calc(0.52vw + 12px), 22px);
    margin-bottom: clamp(6px, calc(0.35vw + 3.31px), 10px);
}

.p-gp-exterior__link {
    display: inline-block;
    font-size: clamp(24px, calc(0.70vw + 18.62px), 32px);
    font-weight: 700;
    color: var(--service-color-link);
    line-height: 1.3;
    margin-bottom: 0;
    transition: opacity 0.3s ease;
}

.p-gp-exterior__link:hover {
    opacity: 0.7;
}

.p-gp-exterior__link--light {
    font-weight: 500;
    font-size: clamp(16px, calc(0.52vw + 12px), 22px);
}

@media (max-width: 768px) {
    .p-gp-exterior__inner {
        padding-block: var(--section-s);
    }

    .p-gp-exterior__title {
        font-size: clamp(22px, calc(1.44vw + 16.96px), 28px);
        margin-bottom: 12px;
    }


    .p-gp-exterior__lead {
        font-size: clamp(16px, calc(0.96vw + 12.65px), 20px);
        font-weight: 500;
        text-align: center;
        margin-bottom: 10px;
    }

    .p-gp-exterior__group {
        margin-top: 24px;
    }

    .p-gp-exterior__sub {
        font-size: clamp(19px, calc(0.72vw + 16.49px), 22px);
        font-weight: 700;
    }

    .p-gp-exterior__link {
        font-size: clamp(17px, calc(0.72vw + 14.49px), 20px);
        display: inline;
    }

    .p-gp-exterior__sub--light {
        font-size: clamp(14px, calc(0.72vw + 11.49px), 17px);
        font-weight: 500;
        margin-bottom: 2px;
    }

    .p-gp-exterior__link--light {
        font-size: clamp(13px, calc(0.72vw + 10.49px), 16px);
    }
}

/* ===================================
 * セクション5: CTA
 * =================================== */
.p-gp-cta__inner {
    margin-inline: auto;
    padding-inline: var(--margin--use--outside);
    padding-block: min(var(--section), 80px);
    text-align: center;
}

.p-gp-cta__title {
    font-size: clamp(42px, calc(1.56vw + 30px), 60px);
    font-weight: 700;
    color: var(--service-color-text);
    margin-bottom: clamp(20px, calc(1.04vw + 12px), 32px);
    line-height: 1.5;
    white-space: nowrap;
    margin-inline: calc(-1 * var(--margin--use--outside));
}

.p-gp-cta__leads {
    margin-bottom: clamp(32px, calc(1.74vw + 18.62px), 52px);
}

.p-gp-cta__lead {
    font-size: clamp(22px, calc(1.39vw + 11.3px), 38px);
    font-weight: 500;
    line-height: 1.7;
    color: var(--service-color-text);
    margin-top: 0;
    margin-bottom: clamp(4px, calc(0.52vw + 0px), 10px);
}

.p-gp-cta__lead:last-child {
    margin-bottom: 0;
}

.p-gp-cta__link {
    display: inline-block;
    font-size: clamp(24px, calc(0.70vw + 18.62px), 32px);
    font-weight: 700;
    color: var(--service-color-link);
    line-height: 1.3;
    margin-bottom: 4px;
    transition: opacity 0.3s ease;
}

.p-gp-cta__link:hover {
    opacity: 0.7;
}

.p-gp-cta__note {
    font-size: clamp(10px, calc(0.35vw + 7.31px), 14px);
    color: var(--service-color-text);
    text-align: center;
}

@media (max-width: 768px) {
    .p-gp-cta__inner {
        padding-block: var(--section-s);
    }

    .p-gp-cta__title {
        font-size: clamp(20px, calc(1.44vw + 14.96px), 26px);
        white-space: normal;
        margin-inline: 0;
    }

    .p-gp-cta__leads {
        margin-bottom: 24px;
    }

    .p-gp-cta__lead {
        font-size: clamp(16px, calc(0.96vw + 12.65px), 20px);
        font-weight: 500;
        line-height: 1.6;
        text-align: center;
        margin-bottom: 1em;
        margin-inline: calc(-1 * var(--margin--use--outside));
    }

    .p-gp-cta__link {
        font-size: clamp(17px, calc(0.72vw + 14.49px), 20px);
    }

    .p-gp-cta__link-wrap {
        display: inline-block;
        text-align: right;
    }

}