@charset "UTF-8";

/* ==========================================================================
   1. 文字サイズ＆カラーユーティリティ（親クラスのスコープ内）
   ========================================================================== */
.inquiry-thanks-wrap .text-sm { font-size: 0.95rem; }
.inquiry-thanks-wrap .text-lg { font-size: 1.5rem; }

.inquiry-thanks-wrap .alert-text { color: #EC081F; }
.inquiry-thanks-wrap .text-blue   { color: #0088cc; }
.inquiry-thanks-wrap .text-orange { color: #f26522; }
.inquiry-thanks-wrap .text-green  { color: #2e7d32; }

.inquiry-thanks-wrap .text-bold { font-weight: bold; }
.inquiry-thanks-wrap .text-left { text-align: left;}

.inquiry-thanks-wrap .text-center { text-align: center;}

.inquiry-thanks-wrap .thanks-link-text {
    color: #0088cc;
    text-decoration: underline;
}

/* ==========================================================================
   2. ベーススタイル（PC基準：基本本文 18px / 1.125rem）
   ========================================================================== */
.inquiry-thanks-wrap {
    padding: 80px 20px;
    color: #333;
    text-align: center;
    margin: 0 auto;
    line-height: 1.8;
    background: #fff;
    font-size: 1.125rem; /* PC時の標準本文サイズ */
}

.inquiry-thanks-wrap img {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.inquiry-thanks-wrap .thanks-message {
    margin-bottom: 30px;
}

.inquiry-thanks-wrap .thanks-note {
    margin-bottom: 20px;
}

/* 黄色枠エリア（本文左寄せ・見出し中央寄せ） */
.inquiry-thanks-wrap .inquiry-thanks-yellow {
    background: #ffffCC;
    padding: 25px 20px;
    margin: 40px auto;
    text-align: left;
    max-width: 800px;
    font-size: 1.125rem;
}

.inquiry-thanks-wrap .inquiry-thanks-yellow .text-lg {
    display: block;
    text-align: center;
    margin-bottom: 15px;
}

/* トップへ戻るボタン */
.inquiry-thanks-wrap .thanks-link {
    margin-top: 50px;
}

.inquiry-thanks-wrap .thanks-btn {
    display: inline-block;
    background: #00AEFC;
    color: #fff;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none; 
    border-radius: 50px; 
    max-width: 100%;         
    box-sizing: border-box;  
}
.inquiry-thanks-wrap .thanks-btn:hover {
    background: #00a0f0;
    box-shadow: 0 2px 5px rgba(0, 136, 204, 0.3);
    transform: translateY(2px);
}
/* ==========================================================================
   3. お問い合わせ・リクエスト窓口（縦1列カード配置）
   ========================================================================== */
.inquiry-thanks-wrap .contact-section {
    margin-top: 60px;
}

.inquiry-thanks-wrap .contact-section-title {
    font-size: 1.5rem;
    color: #00aefc; /* ヘッダーと同色のメイン水色 */
    font-weight: bold;
    max-width: 800px;
    margin: 0 auto 20px;
    text-align: left;
}

/* 縦1列（1カラム）スタック表示 */
.inquiry-thanks-wrap .contact-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.inquiry-thanks-wrap .contact-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px 30px;
    text-align: left;
}

.inquiry-thanks-wrap .card-title {
    font-size: 1.5rem;
    color: #333333;
    font-weight: bold;
    border-bottom: 2px solid #00aefc;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.inquiry-thanks-wrap .contact-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.inquiry-thanks-wrap .contact-link-list li {
    position: relative;
    padding: 10px 0 10px 18px;
    border-bottom: 1px dashed #eef6f9; /* 項目間のやさしい点線 */
    line-height: 1.5;
}

.inquiry-thanks-wrap .contact-link-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.inquiry-thanks-wrap .contact-link-list li::before {
    content: '▶';
    position: absolute;
    left: 0;
    top: 12px;
    font-size: 0.75rem;
    color: #00aefc;
}

.inquiry-thanks-wrap .contact-link-list a {
    color: #333333;
    text-decoration: none;
    margin-left: 8px;

}

.inquiry-thanks-wrap .contact-link-list a:hover {
    color: #00aefc;
    text-decoration: underline;
}

.inquiry-thanks-wrap .contact-note-box {
    background-color: #ffffcc; /* 視線を集めるやさしい黄色 */
    border-radius: 8px;
    padding: 16px 20px;
    max-width: 800px;
    margin: 24px auto;
    text-align: left;
}

.inquiry-thanks-wrap .contact-note-box .note-title {
    font-size: 1.0rem;
    font-weight: bold;
    color: #333333;
    margin-bottom: 8px;
}

.inquiry-thanks-wrap .contact-note-box .note-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555555;
}

/* 目次エリア（スコープ：.inquiry-thanks-wrap） */
.inquiry-thanks-wrap .contact-toc {
    background-color: #f4fbfe; /* ヘッダー水色になじむ薄い背景色 */
    border: 2px solid #d8f0f8;
    border-radius: 12px;
    padding: 16px 20px;
    max-width: 800px;
    margin: 0 auto 30px;
    text-align: left;
}

.inquiry-thanks-wrap .toc-title {
    font-size: 1.0rem;
    font-weight: bold;
    color: #00aefc;
    margin-bottom: 10px;
}

.inquiry-thanks-wrap .toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inquiry-thanks-wrap .toc-list a {
    color: #333333;
    font-size: 0.95rem;
    text-decoration: none;
}

.inquiry-thanks-wrap .toc-list a:hover {
    color: #00aefc;
    text-decoration: underline;
}

.inquiry-thanks-wrap .toc-list .arrow {
    color: #00aefc;
    font-size: 0.75rem;
    margin-right: 6px;
}



/* ==========================================================================
   4. レスポンシブ最適化（768px以下：スマホ基準 16px）
   ========================================================================== */
@media screen and (max-width: 768px) {

    .inquiry-thanks-wrap {
        padding: 40px 15px;
        font-size: 1.00rem; /* スマホ時の標準本文サイズ：16px */
    }

    .inquiry-thanks-wrap .text-sm { font-size: 0.875rem; } /* 14px */
    .inquiry-thanks-wrap .text-lg { font-size: 1.25rem; }  /* 20px */

    .inquiry-thanks-wrap .thanks-message {
        margin-bottom: 20px;
    }

    .inquiry-thanks-wrap .inquiry-thanks-yellow {
        padding: 20px 15px;
        margin: 25px auto;
        font-size: 1.00rem;
    }

    .inquiry-thanks-wrap .thanks-btn {
        padding: 12px 20px;
        font-size: 1rem;
        width: 100%;
        max-width: 280px;
    }

    .inquiry-thanks-wrap .contact-card {
        padding: 18px 20px;
    }

    /* 1. 見出しのフォントサイズをスマホ用に微調整し、途中改行を防止 */
    .inquiry-thanks-wrap .contact-section-title {
        font-size: 1.1rem; 
        margin-bottom: 15px;
    }

    /* 2. カード内の左右余白を削り、テキスト表示エリアを広げる */
    .inquiry-thanks-wrap .contact-card {
        padding: 16px 14px;
    }

    /* 3. カード内タイトルの文字サイズ調整 */
    .inquiry-thanks-wrap .card-title {
        font-size: 1.0rem;
    }

    .inquiry-thanks-wrap .contact-note-box {
        padding: 14px 15px;
        margin-bottom: 20px;
    }
    
    .inquiry-thanks-wrap .contact-note-box .note-list {
        font-size: 0.875rem; /* 14px */
    }

    .inquiry-thanks-wrap .contact-toc {
        padding: 14px 15px;
        margin-bottom: 24px;
    }
    
    .inquiry-thanks-wrap .toc-list a {
        font-size: 0.9rem;
    }
}