/* ==========================================================================
   1. フォント・基本設定
   ========================================================================== */
@font-face {
    font-family: 'AzukiFont';
    src: url('../fonts/azuki.woff2') format('woff2'),
         url('../fonts/azuki.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body { 
    font-family: 'Noto Sans JP', sans-serif; 
    padding-top: 90px;
    margin: 0;
}

/* 特殊フォントクラス */
.font-azuki   { font-family: "AzukiFont", cursive; }
.font-thirsty { font-family: 'thirsty-rough-two', sans-serif; }
.font-rubik   { font-family: 'Rubik Dirt', cursive; }

/* ==========================================================================
   2. ヘッダー基本構造
   ========================================================================== */
.custom-header {
    background-color: #34302A;
    min-height: 90px;
    color: #FAF6E8;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1030;
    display: flex;
    align-items: center;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* ヘッダー全体の固定と高さ */
.custom-header.fixed-top {
    height: 90px ;
    min-height: 90px;
    padding: 0 ;
    background-color: #34302A;
    display: flex;
    align-items: center;
}

/* コンテナの中をスッキリさせる */
.header-container.navbar {
    height: 100%;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 【1. ヘッダの調整】*/

#navbarNav {
  flex-basis: min-content;
}

#navbarNav > .header-info {
  justify-content: right;
}

/* ==========================================================================
   3. 左側：ロゴエリア
   ========================================================================== */
.logo {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-link img {
    max-height: 60px;
    width: auto;
}

.company-info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    line-height: 1.2;
}

.sub-text {
    font-size: 0.7rem;
    color: #FAF6E8;
}

.main-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: #FAF6E8;
}

/* ==========================================================================
   4. 中央：ナビゲーション
   ========================================================================== */
.navbar-collapse {
    flex: 2;
    display: flex;
    justify-content: center;
    height: 100%;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0px;
    height: 100%;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-link {
    color: #FAF6E8;
    font-size: 12pt;
    font-weight: 500;
    text-align: center; 
    line-height: 1.4; 
    padding: 10px 15px;
    transition: opacity 0.3s;
    display: block; 
    flex-direction: column; 
    align-items: center;
}

.nav-link:hover {
    color: #576F13;
    opacity: 0.8;
    transition: 0.3s; 
}

/* ==========================================================================
   5. 右側：インフォメーション & ボタン
   ========================================================================== */
.header-info {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
}

/* SNSアイコン */
.sns-link {
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #FFFFFF;
    border-radius: 50%;
    text-decoration: none;
    margin-right: 8px;
    transition: transform 0.3s, opacity 0.3s;
}

.sns-link i {
    color: #34302A;
    font-size: 18pt; 
}

.sns-link:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* 電話番号 */
.phone-container {
    display: flex;
    align-items: center;
    color: #FAF6E8;
    margin-right: 20px;
}

.phone-details {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.phone-num {
    font-size: 24pt;
    font-weight: bold;
}

.business-hours {
    font-size: 8pt; 
    opacity: 0.8; 
    white-space: nowrap;
}

/* 左右のエリアが余ったスペースを均等に埋める */
.logo, .header-info {
    flex: 1; 
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(250, 246, 232, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3e");
}

.first-view {
    width: 100%;
    height: 100vh;
    background: url('images/main.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FAF6E8;
}


/* ==========================================================================
   7. レスポンシブ設定（スマホ版）
   ========================================================================== */
@media (max-width: 991px) {
    .first-view {
    width: 100%;
    height: 40vh;
    background: url('images/main.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FAF6E8;
}
    /* 1. メニュー本体を「浮いた箱」にする */
    .offcanvas.offcanvas-end {
        background-color: transparent ;
        border: none ;
        width: 350px;
    }

    /* 2. 中身をギュッとまとめる */
    .offcanvas-body {
        background-color: #FAF6E8; 
        margin: 20px;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        height: auto;
        flex-grow: 0;
        padding: 20px ;
        display: flex;
        flex-direction: column;
    }

    /* 3. 閉じるボタン（×）を箱の中、または上に配置 */
    .offcanvas-header {
        justify-content: flex-end;
        padding: 15px 25px 0 0;
    }
    
    .btn-close {
        background-color: #FAF6E8;
        border-radius: 50%;
        padding: 10px;
        opacity: 1;
    }

    /* ヘッダーコンテナの調整 */
    .header-container {
        padding: 0 0 0 15px; /* 右側の余白を0にしてハンバーガーを端に寄せる */
        justify-content: space-between;
    }

    /* ロゴエリアを左端に固定 */
    .logo {
        justify-content: center
    }

    /* 中央の社名を中央に配置するための調整 */
    .logo-link {
        width: 100%;
    }

    /* PC版のナビゲーションを隠す（Bootstrap標準の挙動） */
    .navbar-collapse {
        flex: 1;
        text-align: center;
    }

    .navbar-nav {
    display: flex;
    align-items: flex-start;
    text-align: left;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    margin-left: 40px;
    }
    .navbar-nav .nav-link {
    text-decoration: none; 
    color: #34302A;
    padding-left: 0;
    }

    .navbar-nav .nav-link:hover {
    text-decoration: none;
    opacity: 0.7;
    }

    /* メニューリストの隙間リセット */
    .offcanvas-body .navbar-nav {
    margin: 0 0 20px 0;
    padding: 0;
    }

    /* 右側のインフォエリア（PC版の電話やボタン）をスマホでは隠す */
    .header-info {
        display: none;
    }

    /* ハンバーガーメニュー自体の位置調整 */
    .navbar-toggler {
        display: block;
        margin-left: auto ;
    }

    /* 右側の矢印を強調するスタイル */
    .nav-link-sp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 0;
    color: #4E5966;
    font-weight: bold;
    text-decoration: none;

    }

    /* 矢印を囲む丸い枠 */
    .arrow-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 12pt;
    color: #4E5966;
    background-color: transparent;
    font-size: 10pt;
    transition: all 0.3s;
    margin-left: 5px;
    }

    /* ホバーした時に矢印の色を変える演出 */
    .nav-link-sp:hover .arrow-circle {
    background-color: transparent;
    color: #576F13;
    transform: translateX(5px);
    }

    /* 親のリンク自体のホバー設定（文字色も合わせる場合） */
    .nav-link-sp:hover {
    color: #576F13 ;
    text-decoration: none ;
    }

    /* SNSとボタンをまとめるエリア */
    .sp-menu-footer {
    margin-top: 15px ;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 5px;
    }

/* SNSアイコンを横に並べる箱 */
    .sp-sns-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 5px;
    }

/* 個別のSNSアイコン（丸枠） */
    .sp-sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #34302A;
    color: #FAF6E8 ;
    border-radius: 50%;
    font-size: 1.2rem;
    text-decoration: none ;
    transition: transform 0.2s;
    }

.sp-sns-link:active {
    transform: scale(0.9);
}

}

/* ==========================================================================
お問合せボタン
   ========================================================================== */
.btn-contact {
    background-color: #243E73;
    color: #FAF6E8;
    width: 140px;
    height: 90px;
    margin: 0 ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 14pt;
    border: none;
    transition: background 0.3s;
}

.btn-contact:hover {
    background-color: #1a2d54;
}

@media (max-width: 991px) {
/* お問合せボタン（横幅いっぱい） */
.btn-contact-sp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background-color: #243E73;
    color: #FAF6E8 ;
    font-weight: bold;
    font-size: 14pt;
    text-decoration: none ;
    border-radius: 30px;
}
}
/* =========================================
   top画面 2. キャッチコピーのスタイル設定
   ========================================= */
.fv-content {
    position: absolute;
    left: 40%; 
    bottom: 18px;
    right: auto;
    z-index: 10;
}

/* キャッチコピー全体の共通設定 */
.main-copy {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform-origin: left bottom;
    opacity: 0;
    transform: translateY(30px) rotate(-10deg);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.10));
    }

/* --- 上段：あずきフォント --- */
.copy-upper {
    font-family: 'AzukiFont', sans-serif;
    font-size: 50pt;
    color: #FAF6E8;
    margin-bottom: 20px;
    line-height: 1.2;
    text-align: left;
    paint-order: stroke fill;
    -webkit-text-stroke: 15px #576F13;
    stroke-linejoin: round;
    -webkit-text-stroke-linejoin: round; 
    paint-order: stroke fill;
    white-space: nowrap; 
}

/* --- 下段：Thirsty Rough Bold Two --- */
.copy-lower {
    font-family: "thirsty-rough-two", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 40pt;
    color: #FAF6E8;
    line-height: 1.0;
    text-align: left;
    -webkit-text-stroke: 0;
    white-space: nowrap; 
}

/* 上段・下段共通：文字を重ねる準備 */
.copy-upper, .copy-lower {
    position: relative;
    z-index: -1;
}

/* 背面に「極太のフチ」だけを作る */
.copy-upper::before,
.copy-lower::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    
    /* フチの設定 */
    -webkit-text-stroke: 15px #576F13;
    stroke-linejoin: round;
    -webkit-text-stroke-linejoin: round;
    white-space: nowrap; 
}

@media (max-width: 991px) {
    /* 1. 位置の調整 */
    .fv-content {
        left: 10% ; 
        bottom: 47%;
        width: 80%;
    }

    /* 2. 全体 */
    .main-copy {
        transform: translateY(0) rotate(-10deg);
        transform-origin: left center;
        opacity: 0;
    }

    /* 3. 上段 */
    .copy-upper {
        font-size: 20pt ;
        -webkit-text-stroke: 10px #576F13;
        white-space: nowrap;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    /* 4. 下段 */
    .copy-lower {
        font-size: 14pt;
        margin-top: 0;
        white-space: nowrap;
        display: block;
        width: 100%;
    }

    /* 5. 背面のフチ（::before）も連動して細くする */
    .copy-upper::before,
    .copy-lower::before {
       -webkit-text-stroke: 8px #576F13;
        white-space: nowrap; 
        display: none;
        display: block;
    }
}

/* =========================================
   3. アニメーション（ふわっと浮かび上がる）
   ========================================= */

/* アニメーションの定義（キーフレーム） */
@keyframes fadeInUpRotate {
    to {
        opacity: 1;
        transform: translateY(0) rotate(-10deg);
    }
}

.main-copy.is-visible {
    animation: fadeInUpRotate 1.5s ease-out forwards; /* 1.5秒かけて、ふわっと */
}


/* =========================================
   背景の木目
   ========================================= */
/* 背景画像をパターンとして繰り返す基本設定 */
.bg-pattern {
    background-repeat: repeat;
    background-size: auto;
    background-attachment: scroll;
}

/* 特定のセクション用の背景（例：紙のような質感やドットなど） */
.section-paper {
    background-image: url('../images/back.png');
    background-color: #FAF6E8;
}

/* 色だけのセクション */
.bg-cream {
    background-color: #FAF6E8;
}

@media (max-width: 991px) {
    /* 6. 背景パターンがスマホで細かくなりすぎるのを防ぐ */
    .bg-pattern {
        background-size: 600px auto ;
    }
}

/* =========================================
   各セクション
   ========================================= */
/* セクション全体の枠組み */
.commitment-section {
    padding: 100px 0;
    /* 背景画像（リピート用）の指定 */
    background-image: url('images/pattern.png');
    background-color: #34302A;
}

/* セクション区切り線の設定 */
.section-divider {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);   
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* 18pxの太線 */
.section-divider::before {
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    background-color: #C9A227;
    margin-bottom: 5px;
}

/* 3pxの点線 */
.section-divider::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    /* 点線を作る設定（3pxの線、6pxの間隔） */
    background-image: linear-gradient(to right, #C9A227 50%, rgba(255, 255, 255, 0) 0%);
    background-size: 15px 3px; 
    background-repeat: repeat-x;
}

/* メインタイトル（あずき） */
.commitment-title {
    font-family: 'AzukiFont', sans-serif;
    font-weight: 800;
    font-size: 32pt;
    color: #576F13;
    margin-bottom: 1rem;
}

/* バッジ（Rubik Dirt） */
.commitment-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    margin-bottom: 3rem;
    border: 2px solid #FAF6E8;
    border-radius: 20px;
}

.commitment-badge-text {
    font-family: 'Rubik Dirt', system-ui;
    font-size: 16pt;
    color: #FAF6E8;
    margin-bottom: 0;
    line-height: 1;
}

/* 画像エリア */
.commitment-image-wrapper {
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.commitment-img {
    width: 70%;
    height:auto;
    max-width: 100%;
    object-fit: cover;
}

/* サブタイトル*/
.commitment-subtitle {
    font-family: 'AzukiFont', sans-serif;
    font-weight: 800;
    font-size: 24pt;
    line-height: 1.5;
    color: #FAF6E8;
    margin-bottom: 30px;
}

/* 説明文 */
.commitment-description {
    font-family: 'AzukiFont', sans-serif;
    font-size: 16pt;
    color: #FAF6E8;
    line-height: 2.5;
    max-width:1200px;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 40px;
}

/* 説明文の中の特定の下線クラス */
.commitment-description .marker-blue {
    border-bottom: 3px solid #2F4E9E;
    padding-bottom: 2px;
    display: inline;
    line-height: 1.2;
}

/* --- PC版（デフォルト）の設定 --- */
#special-commitment {
    margin-top: 80px;
}
#special-commitment img {
    height: auto; /
}

@media (max-width: 991px) {
    /* メインタイトル（あずき） */
    .commitment-title {
    font-family: 'AzukiFont', sans-serif;
    font-weight: 800;
    font-size: 20pt;
    color: #576F13;
    margin-bottom: 1rem;
    }

    /* バッジ（Rubik Dirt） */
    .commitment-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    margin-bottom: 1rem;
    border: 2px solid #FAF6E8;
    border-radius: 20px;
    }

    .commitment-badge-text {
    font-family: 'Rubik Dirt', system-ui;
    font-size: 12pt;
    color: #FAF6E8;
    margin-bottom: 0;
    line-height: 1;
    }

    .commitment-img {
    width: 80%;
    max-width: 80%;
    object-fit: cover;
    }

    /* サブタイトル*/
    .commitment-subtitle {
    font-family: 'AzukiFont', sans-serif;
    font-weight: 800;
    font-size: 16pt;
    line-height: 1.5;
    color: #FAF6E8;
    margin: 10px 0 10px 0;
    }

    /* 説明文 */
    .commitment-description {
    font-family: 'AzukiFont', sans-serif;
    font-size: 14pt;
    color: #FAF6E8;
    line-height: 2;
    max-width:90%;
    margin: 0 auto;
    text-align: justify; 
    margin-bottom: 30px;
    }

    .commitment-description .marker-blue {
        border-bottom-width: 2px;
    }

    #special-commitment {
        margin-top: 30px;
    }

    #special-commitment img {
        width: 150px;
        height: auto;
    }

    /* セクション区切り線の設定 */
    .section-divider {
    padding-top: 20px;
    padding-bottom: 20px;
}


}

/* 3つの項目 */
/* 各項目の個別ボックス */
.item-card {
    position: relative;
    padding: 40px 10px;
    margin: 0 30px;
    border-top: 2px solid #FAF6E8;
    border-bottom: 2px solid #FAF6E8;
    height: 100%;
}

/* 共通：4隅の丸 (20px) */
.item-card::before,
.item-card::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #FAF6E8;
    border-radius: 50%;
    left: -10px;
}

/* 上線の両端（左端に配置して、box-shadowで右端へコピー） */
.item-card::before {
    top: -11px;
}

/* 下線の両端 */
.item-card::after {
    bottom: -11px;
}

/* ★ 右側の丸（.dotsの擬似要素を使って作る） */
.dots::before,
.dots::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #FAF6E8;
    border-radius: 50%;
    right: -10px;
    z-index: 2;
}
.dots::before { top: -11px; }    /* 右上 */
.dots::after { bottom: -11px; }  /* 右下 */

/* アイコン画像 */
.item-icon {
    margin-bottom: 15px;
}
.item-icon img {
    width: 80px;
    height: auto;
}

/* テキスト */
.item-text {
    font-family: 'AzukiFont', sans-serif;
    font-size: 16pt;
    color: #FAF6E8;
    line-height: 1.3;
    margin-bottom: 0;
}

/* 全体を包むコンテナ（1200px） */
.commitment-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

/* 画像とコピーライトをまとめたグループを左に寄せる */
.commitment-float-group {
    float: left;
    width: 400px; /* 画像のサイズに合わせる */
    margin-right: 40px;
    margin-bottom: 20px;
    margin-top: 0; /* 余計な余白をリセット */
    margin-left: 0;
}

/* 画像はグループの横幅いっぱいに表示 */
.commitment-float-group img {
    width: 100%;
    height: auto;
    display: block; /* 下にできる謎の隙間を消す */
}

/* コピーライト（ベージュ）のデザイン */
.copyright {
    font-size: 12px;
    color: #FAF6E8;
    margin-top: 8px;
    text-align: right;
}
/* コピーライト（グレー）のデザイン */
.copyright_g {
    font-size: 16px;
    color: #4E5966;
    margin-top: 8px;
    text-align: center;
}

/* ★ 回り込み画像の設定 ★ */
.commitment-float-img {
    float: left;
    width: 400px;
    height: auto;
    margin-right: 40px;
    margin-bottom: 20px;
}

/* 回り込みによるレイアウト崩れを防ぐ */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 署名用のスタイル */
.commitment-signature {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16pt;
    color: #FAF6E8;
    text-align: right;
    
    /* 説明文との間の余白 */
    margin-top: 20px;
    
    /* 1200pxの幅の中で右側に寄せるための設定 */
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    
    /* 署名っぽく少し細めのウェイトにするのもおすすめです */
    font-weight: 400;
    letter-spacing: 0.05em;
}


@media (max-width: 991px) {
    /* 1. 全体を包むコンテナの調整 */
    .commitment-content-wrapper {
        padding: 0;
    }

    /* 2. 回り込み画像の解除（スマホでは1枚の画像として上に置く） */
    .commitment-float-img {
        float: none;
        width: 80% ;
        max-width: 300px;
        margin: 0 auto 40px;
        display: block;
    }

    /* 3. 各カード（項目）の調整 */
    .item-card {
        margin: 0 30px 40px 30px ;
        display: flex ;
        align-items: center;
        padding: 20px 20px 20px 50px;
        height: auto;
        border-top: 1px solid #FAF6E8;
        border-bottom: 1px solid #FAF6E8;
    }

    /* 4. アイコン画像のサイズと余白 */
    .item-icon {
        margin-bottom: 0 ;
        margin-right: 15px;
        flex-shrink: 0; 
    }

    .item-icon img {
        width: 50px ; 
    }

    /* 5. テキストの調整 */
    .item-text {
        font-size: 14pt ;
        text-align: left;
        line-height: 1.4;
    }

    /* 6. 丸い点の位置調整 */
    .item-card::before,
    .dots::before { top: -8px; }
    
    .item-card::after,
    .dots::after { bottom: -8px; }

    /* 線を端まで伸ばすために、左右の丸を固定 */
    .item-card::before, .item-card::after { 
        left: -8px;
        width: 13px;
        height: 13px; 
    }
    .dots::before, .dots::after { 
        right: -8px;
        width: 13px;
        height: 13px; 
    }

    .commitment-signature {
    font-size: 14pt;
    margin-top: 5px;
    width:90%;
    }

    .commitment-float-group {
        float: none;       /* 回り込みを解除 */
        width: 90%;
        margin-right: 0;
        margin: 20px;
    }

    .copyright {
        text-align: center;
    }

}

/* =========================================
   名誉会長ブロック
   ========================================= */

/* 1. 写真エリアの設定 */
.chairman-photo-wrapper {
    max-width: 1000px;
    margin: 0 auto 50px;
    overflow: hidden;
}

.chairman-img {
    width: 1000px;
    height: 750px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1000 / 750;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* 2. テキストエリアの設定 */
.chairman-text-block {
    max-width: 1000px;
    margin: 0 auto;
}

/* 役職 */
.chairman-post {
    font-size: 24pt;
    color: #FAF6E8;
    margin-bottom: 10px;
    line-height: 1.2;
}

/* 名前 */
.chairman-name {
    font-size: 32pt;
    color: #FAF6E8;
    margin-bottom: 40px;
    line-height: 1.2;
}

/* サブタイトル下の15px線 */
.subtitle-line {
    width: 1200px;
    max-width: 100%;
    height: 15px;
    background-color: #576F13;
    margin: 0 auto 30px;
}

@media (max-width: 991px) {    
    .chairman-photo-wrapper {
        margin-bottom: 30px;
    }

    .chairman-img {
    width: 90%;
    height: auto;
    max-width: 90%;
    }

    /* スマホではフォントサイズを自動調整（ptだと大きすぎるため） */
    .chairman-post {
        font-size: 16pt;
    }
    .chairman-name {
        font-size: 24pt;
        margin-bottom: 10px;
    }
    /* サブタイトル下の線 */
    .subtitle-line {
    width: 90%;
    background-color: #576F13;
    margin: 0 auto 30px;
    height: 7px;
    }

    /* 2. テキストエリアの設定 */
    .chairman-text-block {
    max-width: 100%;
}

}


/* =========================================
   沿革ブロック
   ========================================= */
/* タイムライン全体のベース */
.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 0;
}

/* 中央を貫く垂直線 (#FAF6E8) */
.timeline-container::before {
    content: "";
    position: absolute;
    left: 30%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #FAF6E8;
    transform: translateX(-50%);
}

/* 各項目のレイアウト */
.timeline-item {
    display: flex;
    margin-bottom: 80px;
    position: relative;
    align-items: flex-start;
}

/* 左側：第◯期 */
.timeline-left {
    width: 30%;
    text-align: right;
    padding-right: 32pt;
}
.history-period {
    font-family: 'AzukiFont', sans-serif;
    font-size: 28pt;
    color: #FAF6E8;
    margin: 0;
}

/* 中央：丸 (26px) */
.timeline-center {
    width: 0; /* 線の上に置くので幅は0 */
    position: relative;
}
.timeline-dot {
    width: 26px;
    height: 26px;
    background-color: #576F13;
    border-radius: 50%;
    position: absolute;
    left: -13px; /* 半分ずらして線の真ん中に */
    top: 10px;
    z-index: 2;
}

/* 右側：文章ゾーン */
.timeline-right {
    width: 70%;
    padding-left: 40px;
    text-align: left;
}

/* 文章 (24px) */
.history-text {
    font-family: 'AzukiFont', sans-serif;
    font-size: 16pt;
    color: #FAF6E8;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* マーカー強調 (#576F13) */
.marker-green {
    background-color: #576F13;
    padding: 2px 8px;
    border-radius: 1px;
}

/* 詳細説明ボックス (Noto Sans JP 20px) */
.history-detail-box {
    background-color: #FAF6E8;
    border-radius: 15px;
    padding: 20px 25px;
}
.detail-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16pt;
    color: #34302A;
    margin: 0;
    line-height: 1.6;
}

/* スマホ用の微調整 */
@media (max-width: 991px) {
    /* タイムライン全体のベース */
    .timeline-container {
    max-width: 100%;
    padding: 20px 0;
    }

    /* 各項目のレイアウト */
    .timeline-item {
    margin-bottom: 50px;
    }

    /* 左側：第◯期 */
    .timeline-left {
    width: 30%;
    text-align: right;
    padding-right: 10pt;
    }

    /* 右側：文章ゾーン */
    .timeline-right {
    width: 65%;
    padding-left: 25px;
    text-align: left;
    }

    /* 中央：丸 (26px) */
    .timeline-dot {
    width: 20px;
    height: 20px;
    left: -10px; /* 半分ずらして線の真ん中に */
    top: 5px;
    z-index: 2;
    }

    .history-period {
    font-family: 'AzukiFont', sans-serif;
    font-size: 14pt;
    color: #FAF6E8;
    margin: 0;
    }

    /* 文章 */
    .history-text {
    font-family: 'AzukiFont', sans-serif;
    font-size: 14pt;
    color: #FAF6E8;
    line-height: 1.6;
    margin-bottom: 20px;
    }

    /* 詳細説明ボックス */
    .history-detail-box {
    background-color: #FAF6E8;
    border-radius: 15px;
    padding: 10px 10px;
    }
    .detail-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12pt;
    color: #34302A;
    margin: 0;
    line-height: 1.6;
}

}

/* =========================================
   会社概要ブロック
   ========================================= */
/* セクション全体の背景（沿革からの繋がりを考慮） */
.company-section {
    padding: 100px 0;
}

/* 1400pxの角丸カード */
.company-card {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #FAF6E8;
    border-radius: 40px;
    padding: 80px 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.company-container {
    padding: 80px 100px;
}

/* タイトル*/
.company-title {
    font-family: 'Noto Sans', sans-serif;
    font-size: 32pt;
    color: #4E5966;
    font-weight: 700;
    margin-bottom: 60px;
    text-align: center;
}

/* Google Map ラッパー */
.map-wrapper {
    width: 1000px;
    height: 530px;
    margin: 0 auto 80px;
    overflow: hidden;
}
.map-wrapper iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 会社情報リスト */
.company-info-list {
    max-width: 1200px;
    margin: 0 auto;
}

/* 1pxの区切り線 */
.info-row {
    display: flex;
    align-items: center;
    padding: 25px 0;
    margin: 0;
    border-bottom: 1px solid #4E5966; /* 下線 */
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16pt;
    color: #4E5966;
}

/* 最初の項目の上にも線が欲しい場合 */
.info-row:first-child {
    border-top: 1px solid #4E5966;
}

/* 項目名 (左側) */
.info-row dt {
    width: 300px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

/* 内容 (右側) */
.info-row dd {
    width: calc(100% - 300px);
    margin: 0;
    line-height: 1.5;
}


/* スマホ用の微調整 */
@media (max-width: 991px) {
    /* セクション全体の背景（沿革からの繋がりを考慮） */
    .company-section {
    padding: 40px 0px 0px 0px;
    }

    /*角丸カード */
    .company-card {
    max-width: 100%;
    background-color: #FAF6E8;
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .company-container {
    max-width:90%;
    background-color: #FAF6E8;
    border-radius: 20px;
    padding: 20px 20px 40px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    /* タイトル*/
    .company-title {
    font-size: 20pt;
    margin-bottom: 20px;
    }

    /* Google Map ラッパー */
    .map-wrapper {
    width: 300px;
    height: 200px;
    margin: 0 auto 20px;
    }
    .map-wrapper iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    }

    /* 会社情報リスト */
    .company-info-list {
    max-width: 95%;
    margin: 0 auto;
    }

    /* 1pxの区切り線 */
    .info-row {
    padding: 10px 0;
    font-size: 12pt;
    }

    /* 項目名 (左側) */
    .info-row dt {
    width: 30%;
    }

    /* 内容 (右側) */
    .info-row dd {
    width: calc(70% - 10px);
    margin: 0;
    line-height: 1.5;
    }

    .commitment-main-visual {
        margin-bottom: 2rem;
    }
}

/* =========================================
   各項目メイン写真
   ========================================= */
/* セクション全体の背景（沿革からの繋がりを考慮） */
.service-section {
    padding: 20px 0;
}

/* 画像を包む枠（1200px） */
.commitment-main-visual {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 3rem;
    overflow: hidden;
}

/* 画像本体の設定 */
.commitment-main-img {
    width: 1200px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1200 / 470;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* =========================================
   サービス内容エリア
   ========================================= */
   .welfare-container {
    padding: 80px 100px;
}
/* 外側のコンテナ */
.property-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
}

/* 物件カード本体 */
.property-card {
    position: relative;
    width: 100%;
    border: 2px solid #576F13;
    border-radius: 20px;
    background-color: #FAF6E8;
    padding: 40px;
    box-sizing: border-box;
    min-height: 270px;
}

/* 男性専用*/
.property-badge-img {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 10px;
}
.property-badge-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* タグのグループ */
.tag-group {
    display: flex;
    margin-bottom: 25px;
}

/* 共通タグスタイル（幅を可変にする） */
.tag-category, .tag-type {
    width: auto; 
    min-width: 124px;   
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;    
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16pt;
    border: 1px solid #4E5966;
    box-sizing: border-box;
    white-space: nowrap; 
}

/* 左側：物件種別 */
.tag-category {
    background-color: #576F13;
    color: #FAF6E8;
    z-index: 1; 
}

/* 右側：一戸建てタイプ */
.tag-type {
    background-color: transparent;
    color: #4E5966;
    margin-left: -1px; 
}

/* タイトル */
.property-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24pt;
    font-weight: 800;
    color: #576F13;
    margin-bottom: 20px;
    width: calc(100% - 220px);
}

/* タイトルルビ */
.property-title-ruby {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12pt;
    color: #576F13;
    margin-bottom: 5px;
    width: calc(100% - 220px);
}

/* 説明文（24pt） */
.property-description {
    list-style: none;
    padding: 0;
    margin: 0;
    width: calc(100% - 220px);
}

.property-description li {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16pt;
    color: #4E5966;
    line-height: 1.6;
    margin-bottom: 5px;
}

/* 箇条書きの頭のみ色を変える */
.property-description li span {
    color: #576F13;
    font-weight: bold;
}

/* スマホ対応 */
@media (max-width: 991px) {
    /* 画像を包む枠*/
    .commitment-main-visual {
    max-width: 100%;
    margin: 0 auto 0;
    }

    .commitment-main-img {
    width: 90%;
    height: auto;
    }
    .welfare-container {
    max-width:90%;
    background-color: #FAF6E8;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    /* 外側のコンテナ */
    .property-container {
    max-width: 100%;
    margin: 20px auto;
    padding: 05px;
    }
    .property-card {
        padding: 10px;
    }
    .property-badge-img {
        position: static;
        margin: 0 auto 20px;
        width: 80px;
        height: 80px;
    }
    .property-badge-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    }

    .property-title, .property-description {
        width: 100%;
        text-align: left;
    }
    .tag-group { justify-content: center; }

    .tag-category, .tag-type { font-size: 10pt; }
    .property-title { font-size: 20pt; }
    .property-description li { font-size: 12pt; }

    .property-title-ruby {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 10pt;
    color: #576F13;
    margin-bottom: 5px;
    width: calc(100% - 20px);
    }

}

/* =========================================
   お問合せボタン
   ========================================= */
/* ボタンを包むコンテナ（1200px） */
.contact-button-container {
    max-width: 1200px;
    width: 100%;
    margin: 60px auto;
    padding: 0 15px; 
    box-sizing: border-box;
}

/* お問い合わせボタン本体 */
.btn-full-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 100%;
    height: 144px; 
    background-color: #243E73; 
    color: #FAF6E8; 
    
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 32pt; 
    font-weight: 700;
    text-decoration: none;
    
    border-radius: 80px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ホバー（マウスを乗せた時）の演出 */
.btn-full-contact:hover {
    background-color: #1a2d54;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    color: #FAF6E8;
}

/* スマホ対応 */
@media (max-width: 991px) {
    .contact-button-container {
    max-width: 100%;
    margin: 20px auto;
    padding: 0 15px; 
    box-sizing: border-box;
    }

    .btn-full-contact {
        height: 70px;
        font-size: 20pt;
        border-radius: 60px;
    }
}

/* =========================================
   Pawtners紹介
   ========================================= */
/* 外枠（会社概要の設定を継承 + スタッフ用微調整） */
.staff-container {
    padding: 80px 60px;
}

/* タイトル（あずき 32pt） */
.staff-title {
    font-size: 32pt;
    color: #4E5966;
    font-weight: 800;
    margin-bottom: 80px;
    text-align: center;
    position: relative;
}

/* スタッフ個人項目 */
.staff-item {
    text-align: center;
    margin-bottom: 40px;
}

/* 写真を丸く切り抜く */
.staff-photo {
    width: 250px;
    height: 250px;
    margin: 0 auto 20px;
    overflow: hidden;
}

.staff-photo img {
    width: 100%;
    height: 100%;
    height: 250px;
    margin: 0 auto 20px;
}

/* スタッフ名 */
.staff-name {
    font-family: 'Rubik Dirt', system-ui;
    font-size: 32px;
    color: #243E73;
    margin: 0;
}

/* ルビ用の共通設定（物件タイトルの時のものを流用） */
.custom-ruby {
    position: relative;
    display: inline-block;
}
.ruby-text {
    position: absolute;
    left: 50%;
    top: -1.2em;
    transform: translateX(-75%);
    font-size: 20pt;
    font-weight: normal;
    color: #4E5966;
    white-space: nowrap;
}

/* スマホ対応 */
@media (max-width: 991px) {
    .staff-container {
        max-width:90%;
        background-color: #FAF6E8;
        border-radius: 20px;
        padding: 40px 20px 10px 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    /* 1行に2人並ぶので、写真のサイズを調整 */
    .staff-photo {
        width: 130px; 
        height: 130px;
    }

    .staff-photo img {
    height: auto;
    }


    /* スタッフ名もスマホ用に小さく */
    .staff-name {
        font-size: 20px;
    }

    .staff-title {
        font-size: 20pt;
        margin-bottom: 40px;
    }

    /* BootstrapのRowの隙間を調整 */
    .row.g-3 {
        --bs-gutter-x: 0.5rem;
    }
    .ruby-text {
    transform: translateX(-75%);
    font-size: 12pt;
}
}

/* =========================================
   SDGs
   ========================================= */
  /* SDGsユニット全体の調整 */
.sdgs-container {
    padding: 80px 100px;
}

/* 各ユニットの枠組みと区切り線 */
.sdgs-item {
    padding: 60px 0;
    border-bottom: 1px solid #4E5966;
}

/* 最後のユニットだけ下線を消す */
.sdgs-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 最初のユニットの上余白を調整 */
.sdgs-item:first-of-type {
    padding-top: 0;
}

/* テキストと画像の横並び設定 */
.sdgs-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* 左側：テキストエリア */
.sdgs-text {
    flex: 1;
    text-align: left;
}

/* タイトル*/
.sdgs-item-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24pt;
    font-weight: 700;
    color: #4E5966;
    margin-bottom: 20px;
}

/* コピー */
.sdgs-copy {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 20pt;
    color: #4E5966;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* リードコピー  */
.sdgs-lead {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16pt;
    color: #4E5966;
    margin: 0;
    line-height: 1.6;
}

/* 右側：画像 (300x300px) */
.sdgs-image {
    width: 300px;
    height: 300px;
    flex-shrink: 0;
    overflow: hidden;
}

.sdgs-image img {
    width: 60%;
    height: 60%;
    object-fit: cover;
    margin-bottom: 20px;
}

/* スマホ対応 */
@media (max-width: 991px) {
    .sdgs-container {
    max-width:90%;
    background-color: #FAF6E8;
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    .sdgs-content {
        flex-direction: column-reverse;
        text-align: center;
        gap: 5px;
    }
    .sdgs-item {
    padding: 20px 0;
    }
    .sdgs-text {
        text-align: center;
    }
    .sdgs-item-title { 
    font-size: 20pt;
    text-align: left;
    }
    .sdgs-copy { 
    font-size: 16pt;
    text-align: left; 
    }
    .sdgs-lead {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12pt;
    color: #4E5966;
    line-height: 1.6;
    text-align: left;
    }
    .sdgs-image {
        width: 90%;
        height: 90%;
    }
}

/* スマホ版（991px以下）の設定 */
@media (max-width: 991px) {
    .s-small-img {
        width: 150px ;
        height: auto ;
        margin: 0 auto;
    }
}

/* =========================================
   リンク
   ========================================= */
/* linkユニット全体の調整 */
.link-container {
    padding: 80px 100px;
}

/* 各ユニットの枠組みと区切り線 */
.link-item {
    padding: 50px 0;
    border-bottom: 1px solid #4E5966;
}

/* 最後のユニットだけ下線を消す */
.link-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 最初のユニットの上余白を調整 */
.link-item:first-of-type {
    padding-top: 0;
}

/* 「■」の部分だけ色を変える */
.link-lead span {
    color: #576F13;
    margin-right: 8px;
    font-weight: bold;
}

/* 「aタグ自体」に対して下線を消す指定をします */
.link-text a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

/* リンク全体のホバー演出（記号も含めてふわっとさせる場合） */
.link-text a:hover .link-lead {
    text-decoration: none;
    opacity: 0.7;
}

/* 左側：テキストエリア */
.link-text {
    flex: 1;
    text-align: left;
}

/* リンク先  */
.link-lead {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16pt;
    color: #4E5966;
    margin: 0;
    line-height: 1.6;
}

/* 下線を消すための確実な指定 */
.link-lead a {
    color: #4E5966;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.3s;
}

/* ホバーした時に少し薄くする（リンクだと分かりやすくするため） */
.link-lead a:hover {
    opacity: 0.7;
    text-decoration: none;
}


/* スマホ対応 */
@media (max-width: 991px) {
    .link-container {
    max-width: 90%;
    background-color: #FAF6E8;
    border-radius: 20px;
    padding: 20px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .link-item {
    padding: 20px 0;
    }

    .link-content {
        flex-direction: column-reverse;
        text-align: left;
    }
    .link-text {
        text-align: left;
    }
    .link-lead { font-size: 12pt; }
    .link-image {
        width: 200px;
        height: 200px;
    }
}

/* =========================================
   お問合せカード
   ========================================= */
/* 外側のコンテナ（1200px） */
.contact-card-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* お問い合わせカード本体 */
.contact-special-card {
    width: 100%;
    height: 560px;
    background-color: #243E73;
    color: #FAF6E8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* 1. 角丸タイトル (32pt) */
.contact-badge-title {
    background-color: #FAF6E8;
    color: #243E73;
    font-size: 32pt;
    width: 90%;
    font-weight: 700;
    padding: 10px 60px;
    border-radius: 50px;
    margin-bottom: 40px;
}

/* 2. 採用担当 (32pt) */
.contact-sub-label {
    font-size: 32pt;
    margin-bottom: 5px;
}

/* 横並びにするための設定 */
.contact-flex-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

/* 3. 代表電話 (40pt) */
.contact-main-label {
    font-size: 40pt;
    font-weight: 700;
    margin-bottom: 0;
}

/* 4. 電話番号エリア (56pt) */
.contact-phone-display {
    font-size: 56pt;
    font-weight: 800;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 5. 受付時間 */
.contact-hours-label {
    font-size: 16pt;
    opacity: 0.9;
}

@media (max-width: 991px) {
    .contact-card-container {
    max-width: 95%;
    margin: 10px auto;
    padding: 0 15px;
    box-sizing: border-box;
}
    .contact-special-card {
        height: auto;
        padding: 20px 20px;
    }
    .contact-flex-row {
        flex-direction: column;
        gap: 10px;
    }
    .contact-badge-title { 
        font-size: 16pt; 
        padding: 10px 30px;
        margin-bottom: 20px; 
    }
    .contact-flex-row {
    gap: 10px;
    margin-bottom: 10px;
    }
    .contact-sub-label { font-size: 18pt; }
    .contact-main-label { font-size: 20pt; }
    .contact-phone-display { font-size: 28pt; }
}

/* =========================================
   プライバシーポリシー
   ========================================= */
 /* 個人情報取扱規定の枠 */
.privacy-policy-box {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #FAF6E8;
    border: 5px solid #4E5966;
    border-radius: 20px;
    padding: 60px 80px;
    box-sizing: border-box;
}

/* タイトル*/
.privacy-policy-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 32pt;
    font-weight: 700;
    color: #4E5966;
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.4;
}

/* 本文 */
.privacy-policy-body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16pt;
    color: #4E5966;
    line-height: 2.0;
    text-align: left;
}

/* 日付部分などの微調整（必要であれば） */
.privacy-date {
    margin-top: 30px;
}

/* スマホ対応（画面幅が狭い場合） */
@media (max-width: 991px) {
    .privacy-policy-box {
        padding: 20px 20px;
        max-width: 90%;
        margin: 0 auto;
        background-color: #FAF6E8;
        border: 2px solid #4E5966;
        border-radius: 10px;
        box-sizing: border-box;
    }
    .privacy-policy-title {
        font-size: 20pt; 
        margin-bottom: 10px;
    }
    .privacy-policy-body {
        font-size: 12pt;
        text-align: left;
    }
}

/* =========================================
   お問合せフォーム
   ========================================= */
 /* --- 1. フォーム全体の外枠 --- */
.form-container-main {
    max-width: 1200px;
    margin: 60px auto;
    background-color: #FAF6E8;
    border-radius: 40px;
    padding: 80px 100px;
    font-family: 'Noto Sans JP', sans-serif;
}

/* 説明文 (24pt) */
.form-intro-text {
    font-size: 16pt;
    color: #4E5966;
    text-align: left;
    margin-bottom: 60px;
    line-height: 2;
}

/* --- 2. お電話お問合せカード --- */
.contact-mini-card {
    max-width: 1000px;
    height: 250px;
    margin: 0 auto 80px;
    background-color: #243E73;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mini-card-title { font-size: 20pt; color: #FAF6E8; margin-bottom: 10px; }
.mini-card-phone { font-size: 48pt; color: #FAF6E8; font-weight: 800; margin-bottom: 10px; }
.mini-card-hours { font-size: 12pt; color: #FAF6E8; }

/* --- 3. 各入力項目の共通レイアウト --- */
.form-item {
    margin-bottom: 50px;
    text-align: left;
}

/* メインラベル (24pt) */
.form-label-main {
    display: block;
    font-size: 20pt;
    color: #4E5966;
    font-weight: 700;
    margin-bottom: 15px;
}

/* 必須マーク (#FF000Aの四角に文字色#243E73) */
.required-mark {
    background-color: #FF000A;
    color: #FAF6E8;
    font-size: 14pt;
    padding: 2px 10px;
    margin-left: 15px;
    vertical-align: middle;
    font-weight: bold;
}

/* 補足説明 (20pt) */
.form-helper-text {
    font-size: 16pt;
    color: #4E5966;
    margin-bottom: 15px;
}

/* 小さい方の補足説明 */
.form-helper-text-small {
    font-size: 16pt;
    color: #4E5966;
    margin-top: 15px;
    margin-bottom: 10px;
}

/* --- 4. 入力パーツ (ラジオボタン/枠) --- */
/* ラジオボタンの並び（左詰め・3列） */
.radio-grid-layout {
    display: grid;
    /* 1fr（均等幅）ではなく auto（文字幅）に変更 */
    grid-template-columns: repeat(3, auto); 
    
    /* 左に寄せる */
    justify-content: start; 
    
    /* 項目間の隙間（横に40px、縦に20pxなど） */
    column-gap: 40px; 
    row-gap: 20px;
    
    font-size: 16pt;
    color: #4E5966;
}

/* ラジオボタンと文字の間の微調整（もし近すぎたら） */
.radio-grid-layout label {
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap; /* 改行させない */
}

.radio-grid-layout input[type="radio"] {
    margin-right: 8px; /* ポッチと文字の間の隙間 */
}

.radio-flex-layout {
    display: flex;
    gap: 40px;
    font-size: 16pt;
    color: #4E5966;
    margin-bottom: 10px;
}

/* 入力フィールド共通 */
.input-field {
    width: 100%; /* 基本フルワイド */
    border: 1px solid #C1C1C1;
    background-color: #F5EDD6;
    padding: 15px;
    font-size: 16pt;
    border-radius: 5px;
    color: #4E5966;
    box-sizing: border-box;
}

/* 姓名・セイメイの横並び */
.input-flex-row {
    display: flex;
    gap: 30px;
}
.input-set {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 16pt;
    color: #4E5966;
    width: 48%;
}
.input-set input { flex: 1; }

/* --- 5. 同意ボックス & ボタン --- */
.agreement-outer { 
    display: flex; 
    flex-direction: column;
    align-items: left;
    width: 100%;
    margin-top: 20px;
}
.agreement-box {
    border: 1px solid #4E5966;
    border-radius: 15px;
    padding: 30px 60px;
    text-align: center;
    font-size: 16pt;
    color: #4E5966;
}
.text-red { color: #FF000A; font-weight: bold; }

.form-submit-area { text-align: center; }
.btn-confirm {
    width: 560px;
    height: 104px;
    font-weight: 800;
    background-color: #243E73;
    color: #FAF6E8;
    font-size: 24pt;
    border: none;
    border-radius: 52px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 30px;
}
.btn-confirm:hover { opacity: 0.8; }

/* --- 共通：Noto Sans JP --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

.confirm-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 32pt;
    color: #4E5966;
    font-weight: 700;
}

/* --- 確認画面アイテム --- */
.confirm-item {
    padding: 20px 0;
    border-color: #4E5966;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16pt;
    color: #4E5966;
}

.confirm-label {
    width: 35%;
    font-weight: 700;
    padding-left: 20px;
}

.confirm-value {
    width: 65%;
}

/* --- ボタン設定 --- */
.btn-back, .btn-submit, .btn-to-top {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24pt;
    padding: 15px 60px;
    border-radius: 50px;
    transition: 0.3s;
}

/* 戻るボタン */
.btn-back {
    color: #34302A;
    background-color: transparent;
    border: 2px solid #4E5966;
}

/* 送信ボタン */
.btn-submit {
    color: #FAF6E8;
    background-color: #243E73;
}

/* トップに戻るボタン（完了画面） */
.btn-to-top {
    color: #34302A;
    background-color: transparent;
    border: 2px solid #4E5966;
    display: inline-block;
    text-decoration: none;
}

/* 完了画面 説明文 */
.thanks-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16pt;
    color: #34302A;
    line-height: 1.8;
}

/* 必須項目アラート */
.required-alert {
    display: block;
    width: 100%;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12pt;
    color: #ff0000;
    line-height: 1.8;
    margin-top: 10px;
}

/* --- 6. スマホ対応 (統合) --- */
@media (max-width: 991px) {
    /* 説明文 (24pt) */
    .form-intro-text {
    font-size: 14pt;
    margin-bottom:20px;
    }

    .form-container-main {
        max-width: 90%; 
        padding: 40px 20px;
        border-radius: 20px; 
    }
    .form-label-main { font-size: 16pt; }
    .form-helper-text { font-size: 14pt; margin-bottom: 10px; }
    .form-helper-text-small { font-size: 14pt;}
    .radio-grid-layout { grid-template-columns: 1fr; font-size: 14pt; }
    .radio-flex-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
    font-size: 16pt;
    margin-bottom: 10px;
    }
    .input-field { font-size: 14pt; }
    .input-flex-row { flex-direction: column; gap: 15px; }
    .input-set { width: 100%; }
    .btn-confirm { width: 100%; height: 80px; font-size: 18pt; }
    .contact-mini-card { height: auto; padding: 20px 20px; margin: 0 auto 20px;}
    .mini-card-title { font-size: 18pt;}
    .mini-card-phone { font-size: 20pt; }
    .mini-card-hours { font-size: 10pt;}
    .agreement-box { padding: 20px; font-size: 14pt; }
    .confirm-title { font-size: 18pt; }
    .confirm-item { flex-direction: column; font-size: 14pt; }
    .confirm-label { width: 100%; padding-left: 0; margin-bottom: 5px; }
    .confirm-value { width: 100%; }
    .btn-back, .btn-submit, .btn-to-top { font-size: 14pt; padding: 10px 10px; width: 100%; }
    .thanks-text { font-size: 14pt; text-align: left;}
}


/* =========================================
   フッター全体設定
   ========================================= */
/* フッター全体設定 */
.main-footer {
    width: 100%;
    height: 500px;
    background-color: #3A2E26;
    color: #FAF6E8;
    font-family: 'Noto Sans JP', sans-serif;
    padding-top: 100px;
    position: relative;
    box-sizing: border-box;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* --- 左側：ロゴ・住所エリア --- */
.footer-left {
    text-align: left;
}

/* ロゴと社名を横並びにする */
.footer-logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px; 
}

/* ロゴ画像のサイズ調整 */
.footer-logo-img {
    height: 80px;
    width: auto;
}

/* 社名のマージンをリセット（flexで制御するため） */
.footer-company-name {
    font-size: 20pt;
    font-weight: 400;
    color: #FAF6E8;
    margin: 0;
    line-height: 1.2;
    text-align: center;
}

/* リンクの下線を消す（もし<a>で囲む場合） */
.footer-logo-link {
    text-decoration: none;
    color: inherit;
}

.footer-address {
    font-size: 12pt;
    line-height: 1.8;
    color: #FAF6E8;
    margin-bottom: 25px;
}

.footer-sns {
    display: flex;
    justify-content: flex-start;
}

/* SNSアイコン（白丸） */
.sns-link {
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #FAF6E8;
    border-radius: 50%;
    text-decoration: none;
    margin-right: 12px;
    overflow: hidden;
}

.sns-link i {
    color: #34302A;
    font-size: 18pt; 
}

/* --- 右側：メニューエリア (2列) --- */
.footer-nav {
    display: grid;
    grid-template-columns: repeat(2, 160px);
    gap: 24px 60px;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.footer-nav li a {
    color: #FAF6E8;
    text-decoration: none;
    font-size: 12pt;
    transition: 0.3s;
}

.footer-nav li a:hover {
    opacity: 0.6;
}

/* --- 中央下：コピーライト --- */
.footer-bottom {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 12pt;
    color: #FAF6E8;
}

/* スマホ対応 */
@media (max-width: 991px) {
    .main-footer {
        height: auto;
        padding: 60px 20px 120px;
    }
    .footer-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-left {
        text-align: center;
        margin-bottom: 50px;
    }
    .footer-sns {
        justify-content: center;
    }
    .footer-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .footer-logo-wrapper {
        justify-content: center;
    }
}

/* スクロールの設定 */
[id] {
    scroll-margin-top: 105px; /* PCでの停止位置 */
}

/* スマホ版（991px以下）：ヘッダーがコンパクトなので余白を詰める */
@media (max-width: 991px) {
    [id] {
        scroll-margin-top: 100px;
    }
}