@charset "utf-8";

/* ------------ VAR ------------ */
:root {
    --color-black: #141E46;
    --color-white: #ffffff;
    --color-blue: #3468AB;
    --color-lightblue: #6DB3E3;
    --color-red: #D11C2C;
    --color-yellow: #FFCE00;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --weight-extrabold: 800;
}

/* ------------ SET ------------ */
html,
body {
    font-family: "M PLUS 1", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-black);
    font-weight: var(--weight-normal);
    scroll-behavior: smooth;
}

.wrap {
    /* max-width: 1200px; 
    width: 100%;
    margin: 0 auto;  */
    overflow-x: clip;
    position: relative;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    text-decoration: none;
    transition: opacity 0.4s ease;
}

a:hover {
    opacity: 0.85;
    /* 明るく見える */
}

* {
    font-size: 100%;
}

ul {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    all: unset;
}

@media screen and (max-width: 1024px) {

    html,
    body {
        font-size: 15px;
    }
}

@media screen and (max-width: 560px) {

    html,
    body {
        font-size: 12px;
    }
}

/* ------------ HEADER ------------ */
.header {
    width: 100%;
    padding: 25px 40px 0px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.logo img {
    width: 300px;
}

/* 右側のまとまり */
.tel-block {
    text-align: left;
}

.tel-label {
    font-size: 1.5em;
    color: var(--color-black);
    margin-bottom: -30px;
    margin-left: 130px;
    font-weight: var(--weight-medium);
}

/* 電話番号の横並びエリア */
.tel-flex {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* フリーダイヤルアイコン */
.fd-icon {
    height: 50px;
    /* 調整しやすいサイズ */
    width: auto;
    align-self: center;
    margin-top: 28px;
}

/* 丸アイコン */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--color-red);
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    align-items: center;
    color: #fff;
    font-size: 1.8em;
    font-weight: var(--weight-bold);
    margin-bottom: 20px;
    margin-right: 20px;
}

/* 電話番号 */
.tel-number {
    font-size: 4em;
    font-weight: var(--weight-bold);
    color: var(--color-black);
}

@media screen and (max-width: 1024px) {
    .header {
        padding: 20px 30px 0 30px;
    }

    .logo img {
        width: 200px;
    }

    .tel-label {
        font-size: 1.2em;
        margin-top: 0;
    }

    .circle {
        width: 70px;
        height: 70px;
        font-size: 1.2em;
        margin-right: 10px;
    }

    .tel-number {
        font-size: 3em;
    }

    .fd-icon {
        height: 35px;
    }
}

@media screen and (max-width: 560px) {
    .header {
        padding: 10px 15px;
    }

    .logo img {
        width: 80px;
    }

    .tel-label {
        font-size: 0.8em;
        margin-bottom: -10px;
        margin-left: 72px;
    }

    .tel-flex {
        display: flex;
        align-items: flex-end;
        gap: 5px;
    }

    .fd-icon {
        height: 13px;
        width: auto;
        align-self: center;
        margin-top: 10px;
    }

    .circle {
        width: 35px;
        height: 35px;
        font-size: 0.8em;
        margin-bottom: 0px;
        margin-right: 0px;
    }

    .tel-number {
        font-size: 1.6em;
    }
}


/* ------------ FOOTER ------------ */
.footer-section {
    width: 100%;
    padding-top: 50px;
    background: url("../images/blue-bg.svg") repeat center top / cover;
    background-size: 70% auto;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

.footer-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.footer-title {
    font-size: 2.8em;
    font-weight: var(--weight-extrabold);
    color: var(--color-black);
    margin-bottom: 30px;
}

.footer-line-left,
.footer-line-right {
    width: 50px;
    height: 4px;
    background-color: var(--color-black);
    transform: rotate(60deg);
    margin-bottom: 20px;
}

.footer-line-right {
    transform: rotate(-60deg);
}


.footer-btn-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.footer-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
    padding: 20px 20px;
    width: 450px;
    height: 130px;
    text-align: center;
    color: var(--color-white);
    font-weight: bold;
    box-sizing: border-box;
    position: relative;
    transition: 0.3s;
}

.footer-btn--blue {
    background-color: var(--color-blue);
}

.footer-btn--red {
    background-color: var(--color-red);
}

.footer-btn .btn-top-text {
    color: var(--color-yellow);
    font-size: 1.5em;
    display: block;
}

.footer-btn .btn-bottom-text {
    color: var(--color-white);
    font-size: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.footer-btn--blue .btn-bottom-text {
    font-size: 2.8em;
    display: flex;
    align-items: center;
    gap: 7px;
}

.footer-btn--blue .btn-top-text {
    display: block;
    margin-bottom: -10px;
}

.footer-btn .freedial-icon {
    height: 30px;
    width: auto;
    position: relative;
    top: 4px;
}

.footer-btn .btn-arrow {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--color-white);
    color: var(--color-red);
    font-weight: bold;
    text-align: center;
    margin-left: 5px;
    font-size: 0.6em;
    position: relative;
    top: 4px;
}

.footer-bar {
    width: 100%;
    background-color: var(--color-blue);
    color: var(--color-white);
    text-align: center;
    padding: 10px 0;
    position: relative;
}


@media screen and (max-width: 1280px) {
    .footer-logo img {
        width: 180px;
    }
}

@media print,
screen and (max-width: 1024px) {}

@media screen and (max-width: 560px) {
    .footer-section {
        padding-top: 25px;
    }

    .footer-inner {
        position: relative;
        height: 90px;
    }

    .footer-title-wrap {
        gap: 5px;
    }

    .footer-title {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    .footer-line-left,
    .footer-line-right {
        width: 20px;
        height: 3px;
        margin-bottom: 10px;
    }

    .footer-btn--blue .btn-top-text {
        margin-bottom: 0px;
    }

    .footer-btn .btn-bottom-text {
        font-size: 2em;
        gap: 5px;
    }

    .footer-btn .freedial-icon {
        height: 20px;
        top: 2px;
    }

    .footer-btn-row {
        gap: 20px;
        margin-bottom: 40px;
    }

    .footer-btn {
        width: 340px;
        height: 80px;
    }

    .footer-btn .btn-arrow {
        width: 20px;
        height: 20px;
        margin-left: 0px;
        font-size: 0.5em;
        position: relative;
        top: 3px;
    }
}


/* ------------ COMMON ------------ */

.font-red {
    color: var(--color-red);
}

.font-yellow {
    color: var(--color-yellow);
}

.section-wrap,
.worry-box-wrap,
.service-box,
.reason-box-wrap,
.work-box-wrap,
.price-box {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ------------ TABLET (768px〜1024px) ------------ */
@media screen and (max-width: 1024px) {

    .worry-box-wrap,
    .service-box-wrap,
    .reason-box-wrap,
    .work-box-wrap {
        flex-direction: column;
        gap: 25px;
        padding: 0 30px;
    }

    .worry-box,
    .service-box,
    .reason-box,
    .work-box {
        width: 100%;
        height: auto;
    }

    .title-section {
        font-size: 2em;
        /* 少し小さめに調整 */
        margin-bottom: 25px;
    }

    .block-link {
        padding-top: 25px;
    }
}

@media screen and (max-width: 560px) {

    .worry-box-wrap,
    .service-box-wrap,
    .reason-box-wrap,
    .work-box-wrap {
        flex-direction: column;
        gap: 20px;
        padding: 0 20px;
    }

    .worry-box,
    .service-box,
    .reason-box,
    .work-box {
        width: 100%;
        height: auto;
    }

    .title-section {
        font-size: 1.8em;
        margin-bottom: 20px;
    }

    .block-link {
        padding-top: 20px;
    }
}

/* ---------- MAIN VISUAL ---------- */

.main-visual {
    width: 100%;
    position: relative;
}

.main-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.mv-inner {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 100%;
    padding: 0 60px;
    text-align: left;
}

.mv-lead {
    font-size: 2.5em;
    line-height: 1.2;
    font-weight: var(--weight-medium);
    margin-bottom: 20px;
    color: #fff;
}

.mv-title {
    font-size: 5.5em;
    font-weight: var(--weight-extrabold);
    line-height: 1.2;
}

.mv-title .t1,
.mv-title .t2,
.mv-title .t3 {
    display: inline-block;
    color: #FFF7C0;
    text-shadow:
        4px 4px 4px var(--color-black),
        -4px -4px 4px var(--color-black),
        -4px 4px 4px var(--color-black),
        4px -4px 4px var(--color-black),
        4px 0px 4px var(--color-black),
        -4px 0px 4px var(--color-black),
        0px 4px 4px var(--color-black),
        0px -4px 4px var(--color-black);
}

.mv-title .t1 {
    color: #FFF7C0;
}

.mv-title .t2 {
    color: #FFE000;
}

.mv-title .t3 {
    color: #FFCC00;
}

.mv-points {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    margin-top: 50px;
}

.point-item {
    width: 180px;
    height: 180px;
    color: var(--color-black);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    background: var(--color-white);
}

.point-icon img {
    width: 100%;
    margin-bottom: 7px;
}

.point-icon.icon-large img {
    width: 120px;
    height: auto;
    margin-top: -5px;
    margin-bottom: -2px;
}

.point-item p {
    font-size: 1.3em;
    font-weight: var(--weight-bold);
    line-height: 1.2;
}

.highlight {
    color: var(--color-red);
}

.large {
    font-size: 1.9em;
}

/* タブレット用 */
@media screen and (max-width: 1024px) {
    .main-visual {
        height: 60vh;
        /* 画面の縦の90% */
        position: relative;
        overflow: visible;
        /* はみ出すポイントを表示させる */
    }

    .main-visual img {
        width: 100%;
        height: 100%;
        /* 高さいっぱいにする */
        object-fit: cover;
        /* 縦横比を維持しつつ拡大 */
        object-position: center center;
        /* 中央を基準に表示 */
    }

    .mv-inner {
        transform: translate(-50%, -50%);
        padding: 0 40px;
    }

    .mv-lead {
        font-size: 2em;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .mv-title {
        font-size: 4em;
        line-height: 1.2;
    }

    .mv-title span {
        text-shadow: 2px 2px 3px var(--color-black);
    }

    .mv-points {
        margin-top: 30px;
        gap: 20px;
    }

    .point-item {
        width: 135px;
        height: 135px;
    }

    .point-icon img {
        width: 40px;
        margin-bottom: 5px;
    }

    .point-icon.icon-large img {
        width: 90px;
        margin-top: -5px;
        margin-bottom: -2px;
    }

    .point-item p {
        font-size: 1.1em;
    }

    .large {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 560px) {
    .main-visual {
        height: 50vh;
        overflow: hidden;
    }

    .main-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .mv-inner {
        align-items: center;
        text-align: center;
        padding: 0 20px;
    }

    .mv-lead {
        font-size: 1.6em;
        margin-bottom: 15px;
    }

    .mv-title {
        font-size: 2.8em;
    }

    .mv-title span {
        text-shadow: 2px 2px 3px var(--color-black);
    }

    .mv-points {
        gap: 10px;
        margin-top: 20px;
        justify-content: center;
    }

    .point-item {
        width: 100px;
        height: 100px;
    }

    .point-icon img {
        width: 35px;
        margin-bottom: 5px;
    }

    .point-icon.icon-large img {
        width: 70px;
        margin-top: -5px;
        margin-bottom: -2px;
    }

    .point-item p {
        font-size: 1em;
    }

    .large {
        font-size: 1.6em;
    }
}


/* ---------- CTA BUTTON ---------- */

.cta-area {
    width: 100%;
    background: var(--color-white);
    text-align: center;
    padding: 40px 0;
    color: var(--color-white);
}

/* CTAボタン本体 */
.cta-btn {
    display: inline-block;
    /* ←これ！ */
    text-align: center;
    /* 中の文字を中央揃え */
    position: relative;
    width: 800px;
    max-width: 80%;
    height: auto;
    background: var(--color-red);
    color: var(--color-white);
    font-weight: var(--weight-medium);
    font-size: 2.5em;
    border-radius: 20px;
    text-decoration: none;
    padding: 15px 50px 15px 20px;
    /* 高さ固定やめて内側余白に */
}


.cta-icon {
    position: absolute;
    right: 40px;
    width: 40px;
    height: 40px;
    background: var(--color-white);
    border-radius: 50%;
    margin-top: 15px;
}

.cta-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 18px solid var(--color-red);
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
}

.sp-br {
    display: none;
}

@media screen and (max-width: 1024px) {
    /* .cta-area {
        padding: 40px 20px;
    } */

    .cta-btn {
        max-width: 600px;
        font-size: 2em;
        padding: 15px 30px 15px 15px;
        margin: 0 auto;
        display: block;
    }

    .cta-icon {
        right: 20px;
        width: 35px;
        height: 35px;
        margin-top: 8px;
    }

    .cta-icon::after {
        border-left: 16px solid var(--color-red);
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
    }
}


@media screen and (max-width: 560px) {
    .cta-area {
        padding: 30px 0;
    }

    .cta-btn {
        display: block;
        width: 100%;
        max-width: 300px;
        height: auto;
        font-size: 1.8em;
        padding: 10px 40px 10px 15px;
        margin: 0 auto;
    }

    .cta-icon {
        right: 15px;
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }

    .cta-icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 54%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-left: 18px solid var(--color-red);
        border-top: 13px solid transparent;
        border-bottom: 13px solid transparent;
    }

    .sp-br {
        display: block;
        /* ← 本当の改行になる */
        height: 0;
    }
}


/* ------------ お悩み ------------ */
.worry-section {
    position: relative;
    width: 100%;
    padding: 40px 80px;
    background: url("../images/blue-bg.svg") repeat center top / cover;
    background-size: 70% auto;
    text-align: center;
}

.worry-title {
    font-size: 4em;
    font-weight: var(--weight-extrabold);
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.worry-title .line-left,
.worry-title .line-right {
    width: 60px;
    height: 4px;
    background: var(--color-black);
    display: inline-block;
}

.worry-title .line-left {
    transform: rotate(60deg);
}

.worry-title .line-right {
    transform: rotate(-60deg);
}

.worry-box-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.worry-box {
    width: 400px;
    height: 380px;
    background: var(--color-blue);
    border-radius: 20px;
    padding: 30px 20px;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.worry-icon img {
    width: auto;
    height: 180px;
    margin-bottom: 25px;
}

.worry-box p {
    font-size: 1.7em;
    line-height: 1.5;
    font-weight: var(--weight-medium);
}

.worry-bottom {
    margin-top: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 30px;
}

.worry-msg {
    font-size: 2.8em;
    color: var(--color-black);
    font-weight: var(--weight-bold);
}

.worry-msg .red {
    color: var(--color-red);
}

.worry-boy img {
    position: static;
    width: 200px;
    height: auto;
}

@media screen and (max-width: 1024px) {
    .worry-section {
        padding: 40px 10px;
    }

    .worry-title {
        font-size: 2.8em;
        /* スマホより大きめ */
        margin-bottom: 30px;
    }

    .worry-title .line-left,
    .worry-title .line-right {
        width: 40px;
        height: 3px;
    }

    .worry-box-wrap {
        display: flex;
        flex-direction: row;
        /* ←ここがポイント */
        justify-content: center;
        gap: 15px;
        margin-bottom: 20px;
    }

    .worry-box {
        width: 300px;
        height: 250px;
        padding: 20px 15px;
    }

    .worry-icon img {
        height: 110px;
        margin-bottom: 15px;
    }

    .worry-box p {
        font-size: 1.2em;
    }

    .worry-bottom {
        gap: 15px;
        margin-top: 20px;
    }

    .worry-msg {
        font-size: 2em;
    }

    .worry-boy img {
        width: 120px;
    }
}

@media screen and (max-width: 560px) {
    .worry-section {
        padding: 30px 20px;
    }

    .worry-title {
        font-size: 1.8em;
        gap: 0px;
        margin-bottom: 10px;
    }

    .worry-title .line-left,
    .worry-title .line-right {
        width: 25px;
        height: 2px;
    }

    .worry-box-wrap {
        flex-direction: column;
        align-items: center;
    }

    .worry-box {
        width: 100%;
        max-width: 360px;
        height: auto;
        padding: 20px 20px;
    }

    .worry-icon img {
        height: 140px;
        margin-bottom: 10px;
    }

    .worry-box p {
        font-size: 1.8em;
    }

    .worry-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        align-items: center;
    }

    .worry-msg {
        font-size: 1.8em;
    }

    .worry-boy img {
        width: 160px;
        margin-bottom: -30px;
    }
}


/* ------------ 私たちのサービス ------------ */

.service-section {
    width: 100%;
    text-align: center;
    /* タイトル中央揃えのため */
    padding: 40px 60px;
    box-sizing: border-box;
}

.common-section-title {
    display: inline-block;
    /* テキスト幅だけにする */
    font-size: 4em;
    font-weight: var(--weight-extrabold);
    color: var(--color-black);
    position: relative;
    margin-bottom: 60px;
}

.common-section-title::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px;
    background: var(--color-black);
    margin-top: 5px;
}

.service-box-wrap {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 0 50px;
}

.service-box {
    background: var(--color-blue);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    overflow: visible;
    /* ラベルを飛び出させるため */
}

.service-label {
    display: inline-block;
    /* ← 文字幅で広がる */
    background: var(--color-yellow);
    padding: 0px 20px;
    position: absolute;
    top: -20px;
    left: 50px;
    z-index: 3;
    transform: skewX(-10deg);
}

.service-label span {
    display: inline-block;
    transform: skewX(10deg);
    font-size: 3em;
    font-weight: var(--weight-bold);
    color: var(--color-black);
    white-space: nowrap;
}

/* コンテンツ部分 */
.service-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* テキスト */
.service-text {
    text-align: left;
    flex: 5;
    color: var(--color-white);
    padding-top: 50px;
}

.service-text span {
    color: var(--color-yellow);
}

/* 4つの白いボックス並び */
.service-features {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 10px;
}

.feature-box {
    flex: 1;
    background: #fff;
    padding: 10px 10px;
    text-align: center;
    color: var(--color-black);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.feature-box img {
    width: auto;
    height: 70px;
    margin-bottom: 10px;
}

.feature-box p {
    margin: 0;
    font-size: 0.8em;
    font-weight: var(--weight-normal);
}

/* 画像 */
.service-image {
    flex: 3;
}

.service-image img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1024px) {
    .service-section {
        padding: 40px 40px;
    }

    .common-section-title {
        font-size: 3.2em;
        margin-bottom: 40px;
    }

    .common-section-title::after {
        height: 8px;
        margin-top: 5px;
    }

    .service-box-wrap {
        gap: 40px;
        padding: 0;
    }

    .service-box {
        padding: 25px;
    }

    /* ラベル調整 */
    .service-label {
        left: 50px;
        top: -18px;
        padding: 0 18px;
        transform: skewX(-10deg);
    }

    .service-label span {
        font-size: 2.5em;
    }

    .service-content {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        /* ← ここで高さを揃える */
        gap: 20px;
    }

    .service-text {
        padding-top: 30px;
    }

    /* 画像の高さをテキストに合わせる */
    .service-image {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .service-image img {
        height: 100%;
        /* 親の高さに合わせる */
        width: auto;
        /* 横幅は自動 */
        object-fit: contain;
        /* 画像の比率を維持 */
    }

    /* 白い4つのボックスも横並びに */
    .service-features {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        margin-top: 15px;
    }

    .feature-box {
        flex: 1 1 22%;
        /* 4列を横並びで維持 */
        font-size: 0.7em;
    }

    .feature-box img {
        height: 50px;
        margin-bottom: 5px;
    }
}


@media screen and (max-width: 560px) {
    .service-section {
        padding: 30px 20px;
    }

    .common-section-title {
        font-size: 3em;
        margin-bottom: 30px;
    }

    .common-section-title::after {
        height: 5px;
        background: var(--color-black);
        margin-top: 5px;
    }

    .service-box-wrap {
        padding: 10px 0 0 0;
        gap: 30px;
    }

    .service-box {
        position: relative;
        padding: 20px;
    }

    /* ラベル調整 */
    .service-label {
        left: 50%;
        top: -15px;
        padding: 0 15px;
        transform: translateX(-50%) skewX(-10deg);
    }

    .service-label span {
        font-size: 2em;
    }

    /* コンテンツ縦並び */
    .service-content {
        flex-direction: column;
        /* 画像とテキストを縦並び */
        align-items: center;
        /* 横中央 */
        gap: 20px;
    }

    /* テキスト中央揃え */
    .service-text {
        padding-top: 20px;
    }

    .service-image img {
        max-width: 300px;
        height: auto;
    }

    /* 特徴ボックス（白い4つ）縦並びまたは小さい横並び */
    .service-features {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 15px;
    }

    .feature-box {
        flex: 0 0 48%;
        /* 2列で収まる */
    }

    .feature-box img {
        height: 50px;
    }

}



/* ------------ reason ------------ */

.reason-section {
    position: relative;
    width: 100%;
    padding: 40px 80px 80px 80px;
    background: url("../images/blue-bg.svg") repeat center top / cover;
    background-size: 70% auto;
    text-align: center;
}

.reason-title-wrap {
    position: relative;
    /* 絶対配置の基準にするだけ */
    display: inline-block;
    /* タイトル中央揃えに影響させない */
}

.girl-icon {
    position: absolute;
    left: -70%;
    /* タイトルの左横に出す量 */
    top: 50%;
    width: 220px;
    transform: translateY(-50%);
    /* タイトルの縦中央に合わせる */
}

.reason-box-wrap {
    display: flex;
    gap: 20px;
    align-items: stretch;
    /* 子ボックスを同じ高さに */
}

.reason-box {
    position: relative;
    width: 400px;
    height: 470px;
    background: var(--color-blue);
    border-radius: 20px;
    padding: 8px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    box-sizing: border-box;
}

.reason-icon {
    position: absolute;
    top: -10%;
    left: -5%;
    width: 80px;
}

.reason-icon img {
    width: 100%;
    height: auto;
}

.reason-number-wrap {
    display: inline-block;
    margin-bottom: 10px;
}

.reason-number {
    font-size: 1.8em;
    font-weight: var(--weight-bold);
    color: var(--color-yellow);
}

.reason-line {
    width: 100%;
    height: 5px;
    background: var(--color-yellow);
}

.reason-subtitle {
    font-size: 2.5em;
    line-height: 1.2em;
    color: #fff;
}

.reason-subtitle .yellow {
    color: var(--color-yellow);
    font-weight: var(--weight-medium);
}

/* 下揃えにする白箱3つ */
.reason-feature-wrap {
    position: absolute;
    bottom: 60px;
    /* 下からの距離調整 */
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.reason-feature-box {
    background: #fff;
    color: var(--color-black);
    border-radius: 30px;
    padding: 5px 10px;
    font-size: 1.2em;
    font-weight: var(--weight-medium);
    width: 90%;
    text-align: center;
}

/* 下の黄色文字＋斜め線 */
.reason-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 10px;
}

.reason-bottom .bottom-text {
    color: var(--color-yellow);
    font-weight: var(--weight-bold);
    font-size: 1.5em;
}

.reason-bottom .line-left,
.reason-bottom .line-right {
    display: inline-block;
    width: 30px;
    height: 4px;
    background: var(--color-yellow);
}

.reason-bottom .line-left {
    transform: rotate(60deg);
}

.reason-bottom .line-right {
    transform: rotate(-60deg);
}

@media screen and (max-width: 1024px) {
    .reason-section {
        padding: 40px 10px 80px 10px;
        /* スマホより余白少し広め */
        background-size: 60% auto;
    }

    .girl-icon {
        left: -70%;
        width: 180px;
    }

    .reason-box-wrap {
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        align-items: stretch;
        /* 高さを揃える */
    }

    .reason-box {
        width: 300px;
        height: auto;
        /* 自動で高さ調整 */
        min-height: 350px;
        /* 最低限の高さを確保 */
        padding: 10px 15px 20px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        box-sizing: border-box;
    }

    .reason-icon {
        width: 60px;
        top: -5%;
        left: -5%;
    }

    .reason-number {
        font-size: 1.5em;
    }

    .reason-subtitle {
        font-size: 1.7em;
        line-height: 1.3em;
    }

    .reason-feature-wrap {
        gap: 10px;
        bottom: 50px;
    }

    .reason-feature-box {
        padding: 5px;
        font-size: 0.9em;
        border-radius: 10px;
    }

    .reason-bottom {
        bottom: 15px;
    }

    .reason-bottom .bottom-text {
        font-size: 1em;
    }

    .reason-bottom .line-left,
    .reason-bottom .line-right {
        width: 20px;
        height: 2px;
    }
}


@media screen and (max-width: 560px) {
    .reason-section {
        padding: 30px 20px 50px 20px;
        /* 共通パディング */
    }

    .girl-icon {
        display: none;
    }

    .reason-box-wrap {
        flex-direction: column;
        /* 横並び→縦並び */
        gap: 30px;
        align-items: center;
    }

    .reason-box {
        width: 100%;
        max-width: 360px;
        height: auto;
        /* 高さ自動 */
        padding: 10px 20px;
    }

    .reason-icon {
        width: 60px;
    }

    .reason-number-wrap {
        margin-bottom: 5px;
    }

    .reason-subtitle {
        font-size: 1.8em;
        line-height: 1.4em;
    }

    .reason-feature-wrap {
        position: static;
        /* 絶対配置解除 */
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
    }

    .reason-bottom {
        position: static;
        /* 絶対配置解除 */
        margin-bottom: 10px;
    }

    .reason-bottom .bottom-text {
        font-size: 1.3em;
    }

    .reason-bottom .line-left,
    .reason-bottom .line-right {
        width: 20px;
        height: 2px;
    }
}

/* ------------ works-section ------------ */

.work-icon-left {
    width: 200px;
    height: auto;
    margin-right: 40px;
    /* タイトルとの間隔 */
}

.work-icon-right {
    width: 200px;
    height: auto;
    margin-left: 40px;
    /* タイトルとの間隔 */
}

.work-section {
    width: 100%;
    padding: 40px 60px 100px 60px;
    text-align: center;
    box-sizing: border-box;
}

.work-box-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 50px;
}

.work-box {
    border: 5px solid var(--color-blue);
    background: rgba(255, 223, 0, 0.1);
    /* yellow透明10% */
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

/* 上の青帯 */
.work-box-header {
    background: var(--color-blue);
    color: #fff;
    padding: 5px;
    font-size: 2em;
    position: relative;
}

.work-box-header::after {
    content: "";
    position: absolute;
    left: 50%;
    /* 中央寄せ */
    transform: translateX(-50%);
    bottom: -18px;
    /* ▼の高さぶん下へ */
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 18px solid var(--color-blue);
}

/* 下のメイン部分 */
.work-box-content {
    display: flex;
    gap: 30px;
    padding: 30px;
}

.work-images {
    display: flex;
    align-items: flex-start;
    /* 上揃え */
    gap: 20px;
    /* 左右の間隔 */
}

.work-before {
    flex: 2;
    /* 左側の幅 */
    position: relative;
}

.work-after {
    flex: 3;
    /* 右側を大きく */
    position: relative;
}

.work-before .before-img {
    width: 100%;
    /* 親のflex幅に合わせる */
    display: block;
}

.work-after .after-img {
    width: 100%;
    /* 親のflex幅に合わせる */
    display: block;
    margin-top: 15px;
}

/* Before/Afterラベル */
.work-before .label {
    position: absolute;
    top: 0%;
    left: 0px;
    background: var(--color-blue);
    color: #fff;
    font-size: 0.8em;
    padding: 2px 5px;
}

.work-after .label {
    position: absolute;
    top: 15px;
    left: 0px;
    background: var(--color-red);
    color: #fff;
    font-size: 0.8em;
    padding: 2px 10px;
}

/* 矢印アイコンをBefore画像の上に少しかぶせる */
.arrow-icon {
    position: absolute;
    bottom: -120px;
    /* 画像下に少しかぶせる */
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    /* 好きなサイズに調整 */
}

.work-box-right {
    width: 40%;
    text-align: left;
}

.work-title {
    font-size: 2.3em;
    font-weight: var(--weight-bold);
    line-height: 1.2;
}

.work-box:nth-child(3) .work-title {
    letter-spacing: -0.02em;
}

/* 青の info ボックス3つ */
.work-box-info {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    margin-top: 15px;
}

.info-box {
    background: var(--color-blue);
    color: var(--color-white);
    padding: 10px 10px;
    border-radius: 10px;
    text-align: center;
    flex: 1;
}

.info-box span {
    display: block;
    font-size: 1.7em;
    margin-top: -10px;
}

.work-price .price-label {
    width: auto;
    color: var(--color-black);
    font-size: 1.2em;
    margin-bottom: -30px;
}

a:visited,
a:active {
    color: inherit;
}

.price-amount-wrap {
    text-align: center;
}

.price-amount {
    margin-left: auto;
    margin-right: auto;
    font-size: 4.5em;
    font-weight: var(--weight-bold);
    color: var(--color-red);
    display: inline-flex;
    align-items: baseline;
}

.price-amount::after {
    content: "円";
    font-size: 0.7em;
    margin-left: 3px;
}

@media screen and (max-width: 1024px) {
    .work-section {
        padding: 40px 40px 80px 40px;
    }

    .work-box-wrap {
        gap: 30px;
        padding: 0;
    }

    .work-box-content {
        gap: 20px;
        padding: 20px;
    }

    .work-box-right {
        width: 45%;
    }

    .work-before,
    .work-after {
        flex: 1;
    }
    .work-images {
        gap: 10px;
    }
    .work-before .before-img {
        width: 70%;
    }

    .work-after .after-img {
        width: 130%; 
    max-width: none;
    transform: translateX(-25%);
    margin-top: 25px;
    }
    .work-icon-left,
    .work-icon-right {
        width: 140px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .work-title {
        font-size: 2em;
    }
    .work-price .price-label {
        font-size: 1em;
        margin-bottom: -20px;
    }
    .work-after .label {
        position: absolute;
        top: 25px;
        left: -32.5%;
        z-index: 10;
    }
    .arrow-icon {
        bottom: -95px;
        width: 60%;
        z-index: 1;
        transform: translateX(-65%);
    }

    .work-box-header {
        font-size: 1.5em;
        padding: 10px 0;
    }

    .work-box-info {
        gap: 8px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .info-box span {
        font-size: 1.5em;
    }

    .price-amount {
        font-size: 3.5em;
    }
}

@media screen and (max-width: 560px) {
    .work-section {
        padding: 30px 20px 60px 20px;
        /* 共通大枠に統一 */
    }

    .work-icon-left,
    .work-icon-right {
        display: none;
    }

    .work-box-header {
        font-size: 1.6em;
        padding: 15px 0;
        line-height: 1.4;
    }

    .work-box-wrap {
        padding: 0;
        gap: 30px;
    }

    .work-box-content {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .work-images {
        flex-direction: column;
        gap: 15px;
    }

    .work-box-right {
        width: 100%;
        text-align: center;
    }

    .work-before {
        margin-bottom: -100px;
    }

    .work-before .before-img {
        width: 80%;
        display: block;
    }

    .work-box-info {
        gap: 10px;
    }

    .work-price .price-label {
        margin-bottom: -10px;
    }

    .info-box span {
        font-size: 1.5em;
        margin-top: 0;
    }

    .price-amount {
        font-size: 3em;
    }

    .arrow-icon {
        z-index: 1;
        position: relative;
        bottom: 45px;
        right: 0;
        transform: rotate(-90deg) scaleX(-1);
        width: 40%;
        margin: 10px 55px 10px auto;
    }
}

/* ------------ PRICE ------------ */

.price-section {
    width: 100%;
    padding: 60px 80px;
    background: url("../images/blue-bg.svg") repeat center top / cover;
    background-size: 70% auto;
    box-sizing: border-box;
    text-align: center;
}

.price-lead {
    font-size: 2.5em;
    margin-bottom: 40px;
    font-weight: var(--weight-bold);
}

.price-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 30px auto;
}

/* 横並びラップ */
.price-btn-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 30px auto;
}

/* ボタン＋矢印のセット */
.price-btn-set {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ボタン共通 */
.price-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 35px;
    text-align: center;
    border-radius: 20px;
    font-weight: var(--weight-medium);
    text-decoration: none;
    font-size: 2em;
    box-sizing: border-box;
    border: 5px solid var(--color-white);
}

a.price-btn {
    color: var(--color-white);
}

/* 遺品整理（ライトブルー） */
.price-btn--lightblue {
    background: var(--color-lightblue);
    color: #fff;
}

/* 特殊清掃（ブルー） */
.price-btn--blue {
    background: var(--color-blue);
    color: #fff;
}

/* 矢印画像 */
.btn-arrow-img {
    width: 100px;
    height: auto;
    display: block;
}

.price-box {
    background: var(--color-white);
    border: 5px solid var(--color-lightblue);
    border-radius: 20px;
    padding: 40px 30px;
    margin-bottom: 80px;
    text-align: center;
}

#price-tokusyu {
    --color-lightblue: var(--color-blue);
}

.price-title {
    display: inline-block;
    font-size: 3em;
    font-weight: var(--weight-bold);
    margin-bottom: 15px;
}

.price-title::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px;
    background: var(--color-lightblue);
    margin-top: 5px;
}

.price-box--tokushu {
    border-color: var(--color-blue);
}

.price-title-wrap {
    display: flex;
    align-items: flex-start;
    /* 上を揃える */
    justify-content: center;
    /* 横方向に中央寄せ */
    gap: 20px;
    /* 画像と文章の間隔 */
}

.price-title-text {
    display: flex;
    flex-direction: column;
}

.price-desc {
    font-size: 1.3em;
    margin-bottom: 30px;
}

.price-feature-wrap {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding: 10px 30px;
}

.price-feature {
    flex: 1;
    background: var(--color-lightblue);
    border-radius: 10px;
    padding: 20px 10px;
    color: #fff;
    text-align: center;
}

.price-feature img {
    height: 70px;
    width: auto;
    margin-bottom: 10px;
}

.price-table-wrap {
    overflow-x: auto;
    margin-bottom: 20px;
    padding: 0px;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
}

.price-table th,
.price-table td {
    border: 3px solid var(--color-lightblue);
    padding: 5px;
    text-align: center;
    font-size: 1.7em;
    line-height: normal;
}

.price-table th {
    background-color: #FFFAE5;
    color: var(--color-black);
}

.price-table td:last-child {
    background: rgba(255, 206, 0, 0.5);
    color: var(--color-red);
}

.price-note {
    text-align: left;
    margin-left: 40px;
}

#price-tokushu .price-box,
#price-tokushu .price-box .price-feature,
#price-tokushu .price-box .price-title::after,
#price-tokushu .price-table th,
#price-tokushu .price-table td {
    --color-lightblue: var(--color-blue);
    border-color: var(--color-blue);
}

#price-tokushu .price-table th,
#price-tokushu .price-table td {
    border-color: var(--color-blue);
}

.pc-only {
    display: block;
}

.sp-only {
    display: none;
}
@media screen and (max-width: 1024px) {
    .price-section {
        padding: 30px 40px;
    }
    .price-lead {
        font-size: 1.8em;
        margin-bottom: 40px;
    }
    .price-btn-row {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .price-btn {
        font-size: 1.8em;
        padding: 12px 25px;
        border: 2px solid var(--color-white);
        border-radius: 10px;
    }
    .price-box {
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 40px;
    }
    .price-feature-wrap {
        gap: 10px;
        padding: 0px;
    }
    .price-feature img {
        height: 50px;
    }
    .price-title-icon {
        width: 120px;
        height: auto;
    }

    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
        text-align: center;
        margin-top: 10px;
    }
    .price-note {
        margin-left: 20px;
    }
}
@media screen and (max-width: 560px) {

    .price-section {
        padding: 40px 20px;
        background-size: 100% auto;
    }

    .price-lead {
        font-size: 1.5em;
        margin-bottom: 30px;
    }

    .price-btn-row {
        gap: 10px;
        align-items: center;
    }

    .price-btn {
        font-size: 1.5em;
        padding: 10px;
        width: 100%;
        border-radius: 10px;
        border: 2px solid var(--color-white);
    }

    .price-btn-set {
        min-height: 155px;
    }

    .price-btn-set .btn-arrow-img {
        margin-top: auto;
    }

    .btn-arrow-img {
        width: 70px;
        margin-top: 5px;
    }

    /* 料金ボックスのパディング縮小 */
    .price-box {
        padding: 20px 15px;
        margin-bottom: 40px;
    }

    /* タイトルのサイズ調整 */
    .price-title {
        font-size: 2em;
    }

    .price-title::after {
        height: 6px;
        margin-top: 3px;
    }

    .price-feature-wrap {
        gap: 5px;
        padding: 10px 0;
    }

    .price-feature {
        width: 18%;
        padding: 10px 5px;
        font-size: 0.8em;
    }

    .price-desc {
        margin-bottom: 10px;
    }


    .price-feature img {
        height: 20px;
        margin-bottom: 5px;
    }

    /* 料金表フォント調整 */
    .price-table th,
    .price-table td {
        font-size: 1.2em;
        padding: 5px 3px;
    }

    /* 注意書きのマージン調整 */
    .price-note {
        font-size: 0.7em;
        margin-left: 0;
    }

    .price-title-icon {
        width: 50px;
        height: auto;
    }

    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
        text-align: center;
        /* 中央揃え */
        margin-top: 10px;
    }

}



/* ------------ FLOW STEP------------ */

.flow-section {
    background-color: #FFFAE5;
    padding: 60px 80px;
    box-sizing: border-box;
    text-align: center;
}

.common-section-inner {
    max-width: 1100px;
    /* 好きな横幅に制限 */
    margin: 0 auto;
    /* 左右のマージンを自動にして中央寄せ */
    padding: 0 20px;
    /* 画面端との余白を確保 */
    box-sizing: border-box;
    /* パディング込みで幅計算 */
}

.flow-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin: 40px 0;
    gap: 40px;
}

.flow-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

.step-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--color-blue);
    color: var(--color-white);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    /* 縦並び */
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 2px;
    /* STEPと番号の間の隙間 */
}

.step-circle .step-text {
    font-size: 1.5em;
    line-height: 1.1;
}

.step-circle .step-number {
    font-size: 2em;
    line-height: 1.1;
}

.step-circle::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: calc(100% + 20px);
    background-color: var(--color-blue);
}

.flow-step:last-child .step-circle::after {
    display: none;
}

.flow-step-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--color-black);
    padding-bottom: 20px;
    padding-left: 20px;
    text-align: left;
    width: 800px;
}

.flow-step-title {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.flow-step-desc {
    color: var(--color-black);
    font-size: 1.3em;
}

.flow-section .cta-area {
    background-color: #FFFAE5;
    /* 好きな色に変更 */
}

@media screen and (max-width: 1024px) {
    .flow-section {
        padding: 40px;
    }
    .flow-wrap {
        gap: 20px;
        margin: 20px 0;
    }

    .flow-step-text {
        width: 90%;
        padding-left: 15px;
        padding-bottom: 15px;
    }

    .step-circle {
        width: 80px;
        height: 75px;
    }

    .step-circle .step-text {
        font-size: 1.2em;
    }
    .step-circle .step-number {
        font-size: 1.6em;
    }
    .flow-step-title {
        font-size: 2em;
    }

    .flow-step-desc {
        font-size: 1.2em;
    }
    .step-circle::after {
        height: calc(100% + 60px);
    }
    .flow-step:last-child .step-circle::after {
        height: calc(100% + 30px);
}
}

@media screen and (max-width: 560px) {
    .flow-section {
        padding: 30px 20px;
    }

    .common-section-inner {
        padding: 0px;
    }

    .flow-wrap {
        margin: 0;
        gap: 20px;
    }

    .flow-step {
        gap: 5px;
    }

    .step-circle {
        width: 60px;
        height: 50px;
    }

    .step-circle .step-text {
        font-size: 0.9em;
    }

    .step-circle .step-number {
        font-size: 1.2em;
    }

    .step-circle::after {
        height: 110px;
    }

    .flow-step-text {
        width: auto;
    }

    .flow-step-title {
        font-size: 1.5em;
    }

    .flow-step-desc {
        font-size: 1em;
    }
}



/* ------------ FAQ------------ */
.faq-section {
    background: var(--color-white);
    padding: 60px 80px;
}

.faq-container {
    margin-top: 30px;
}

.faq-section .common-section-inner {
    text-align: center;
}

.faq-section .common-section-title {
    display: inline-block;
    /* 既存そのまま活かせる */
}

.question {
    padding-bottom: 10px;
}

/* Qの背景（四角い箱） */
.faq-container dt {
    background: #F0F6FB;
    padding: 10px 25px;
    font-size: 1.5em;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ▼ 矢印アイコン（右側） */
.faq-icon {
    width: 15px;
    height: 15px;
    border-right: 3px solid var(--color-blue);
    border-bottom: 3px solid var(--color-blue);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-left: 10px;
}

/* 開いたとき（矢印が上向き） */
.question.active .faq-icon {
    transform: rotate(-135deg);
}

/* Aの回答部分 */
.faq-container dd {
    display: none;
    padding: 15px 20px;
    font-size: 1.5em;
    line-height: 1.4;
    margin-left: 10px;
}

.faq-image {
    display: block;
    margin: 20px auto 0;
    max-width: 400px;
    width: 200%;
    height: auto;
}

/* 開いてる時 */
.question.active dd {
    display: block;
}

.faq-note {
    margin-top: 25px;
    color: var(--color-black);
    text-align: left;
}
@media screen and (max-width: 1024px) {
    .faq-section {
        padding: 40px 40px;
    }

    .faq-container dt,
    .faq-container dd {
        font-size: 1.3em; /* スマホより少し大きめ */
    }

    .faq-image {
        width: 80%; /* はみ出ないように調整 */
        max-width: 350px;
        height: auto;
    }
}

@media screen and (max-width: 560px) {
    .faq-section {
        background: #fff;
        padding: 30px 20px;
    }

    .faq-container {
        margin-top: 0px;
    }

    .flow-step-text {
        width: 100%;
        padding-left: 10px;
    }

    .flow-step-title {
        font-size: 1.5em;
    }

    .flow-step-desc {
        font-size: 1em;
    }

    .faq-container dt,
    .faq-container dd {
        font-size: 1.2em;
    }
}


/* ------------ PAGE TOP------------ */
.pagetop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
    /* 初期は非表示 */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-yellow);
    border: 3px solid var(--color-blue);
    color: var(--color-blue);
    text-align: center;
    line-height: 50px;
    /* ボタンの真ん中に文字を */
    font-size: 2.5em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
}

.pagetop:hover {
    opacity: 0.8;
    transform: translateY(-3px);
}

.pagetop * {
    text-decoration: none !important;
}

/* ------------ CONTACT------------ */

.contact-wrapper {
    max-width: 900px;
    margin: 50px auto 80px;
    padding: 20px 20px;
    background-color: #fff;
    /* 白背景 */
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.contact-title {
    font-size: 2.2rem;
    font-weight: var(--weight-extrabold);
    color: var(--color-black);
}

.contact-note {
    font-size: 1.1rem;
    color: var(--color-black);
    text-align: left;
    margin-bottom: 30px;
    line-height: 1.7;
}

/* フォーム全体 */
.contact-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 各ラベル */
.contact-wrapper label {
    display: flex;
    flex-direction: column;
    font-weight: var(--weight-medium);
    font-size: 1.1rem;
    color: var(--color-black);
}

/* 入力欄 */
.contact-wrapper input[type="text"],
.contact-wrapper input[type="email"],
.contact-wrapper input[type="tel"],
.contact-wrapper input[type="date"],
.contact-wrapper select,
.contact-wrapper textarea {
    margin-top: 5px;
    padding: 12px 15px;
    font-size: 1rem;
    border: 2px solid #d8d8d8;
    border-radius: 8px;
    transition: border 0.3s ease;
}

.contact-wrapper input:focus,
.contact-wrapper textarea:focus,
.contact-wrapper select:focus {
    border-color: var(--color-blue);
    outline: none;
}

/* テキストエリア */
.contact-wrapper textarea {
    resize: vertical;
    min-height: 120px;
}

/* ファイルアップロード */
.contact-wrapper input[type="file"] {
    margin-top: 10px;
}

/* 送信ボタン */
.contact-wrapper button[type="submit"] {
    margin-top: 10px;
    padding: 15px 0;
    font-size: 1.3rem;
    font-weight: var(--weight-bold);
    background-color: var(--color-red);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.contact-wrapper button[type="submit"]:hover {
    opacity: 0.85;
}

/* 送信完了メッセージ */
.success-msg {
    font-size: 1.3rem;
    font-weight: var(--weight-bold);
    color: var(--color-blue);
    text-align: center;
    margin-bottom: 20px;
}

/* フォームのレスポンシブ対応 */
@media screen and (max-width: 768px) {
    .contact-wrapper {
        padding: 20px;
        margin: 30px auto 50px;
    }

    .contact-title {
        font-size: 1.8rem;
    }

    .contact-wrapper button[type="submit"] {
        font-size: 1.2rem;
    }
}