@charset "UTF-8";
/*基本設定*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*カラー変数設定*/
:root{
    --main-navy:#003366;/*基調色*/
    --light-navy:#004080;/*少し明るいネイビー（ホバー用）*/
    --bg-light:#f4f7f9;/*ページの背景色（ごく薄いグレー）*/
    --text-white:#ffffff;
}
body{
    background-color: var(--bg-light);
    color: #333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333;
}

/*ヘッダー全体のレイアウト*/
.header{
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
}
.header-container{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}
.logo img{
    height: 40px;
    display: block;
}
.site-header{
    background-color: #fff;
    border-bottom: 3px solid var(--main-navy);/*下線をネイビーに*/
}

/* ロゴ周辺のリンクの枠線を消す */
.logo a, 
.logo a:focus, 
.logo a:active {
    outline: none;       /* タップした時の枠線を消す */
    text-decoration: none;
}

.logo img {
    border: none;        /* 画像自体の枠線を消す */
    display: block;      /* 下側の謎の隙間も防ぐ */
}

/*PC用ナビゲーション*/
.nav-menu ul{
    display: flex;
}
.nav-menu ul li{
    margin-left: 25px;
}
.nav-menu ul li a{
    font-weight: bold;
    font-size: 15px;
    transition: 0.3s;
}
.nav-menu ul li a:hover{
    color: #007bff;/*ホバー時の色*/
}

/*お問い合わせボタンの装飾*/
.contact-btn{
    background: #003366;
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 5px;
}
/* ハンバーガーメニュー（初期状態は非表示） */
.menu-btn, #menu-btn-check {
    display: none;
}

/* --- レスポンシブ設定 (画面幅 960px以下) --- */
@media screen and (max-width: 960px) {
    .menu-btn {
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 10001;/*メニュー本体よりさらに大きく設定*/
        cursor: pointer;
        position: fixed; /* ★絶対位置から固定位置に変更して安定させます */
        top: 5px;       /* ヘッダー内の中央にくるよう調整 */
        right: 10px;
    }
    /* 三本線の作成 */
    .menu-btn span, .menu-btn span:before, .menu-btn span:after {
        content: "";
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #333;
        position: absolute;
    }
    .menu-btn span:before { bottom: 8px; }
    .menu-btn span:after { top: 8px; }

    /* ナビゲーションを隠す */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* 画面の外に配置 */
        width: 80%;
        height: 100%;
        background-color: #fff;
        transition: 0.5s;
        padding-top: 80px;
        z-index: 200;/*スライドショー（z-index未指定）より大きく設定*/
    }
    .nav-menu ul {
        flex-direction: column;
        align-items: center;
    }
    .nav-menu ul li {
        margin: 20px 0;
    }

    /* チェックが入ったらメニューを表示 */
    #menu-btn-check:checked ~ .nav-menu {
        right: 0;
    }
}

/* --- プランB: メニューのブラッシュアップ --- */
/* メニューが開いている時に背景を少し暗く見せる（擬似的な演出） */
#menu-btn-check:checked ~ .nav-menu {
    right: 0;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2); /* 影をつけて浮き出し感を出す */
}

/* --- 新メインビジュアル設定 --- */
.main-visual {
    width: 100%;
    /* ↓ 縦横比を指定（例：16対9の場合。必要に応じて数字を変えてください） */
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    margin-top: 0 !important;
    padding: 0 !important;
}
/* スマホの時は、画面の高さに合わせてもっと大きくする */
@media screen and (max-width: 768px) {
    .main-visual {
        height: 70vh; /* ★画面の高さの70%分を画像にする（迫力が出ます） */
    }
}
/* 画像を全画面にフィットさせる（歪ませない） */
.mv-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 最初は隠しておく */
    animation: fade-animation 24s infinite; /* 4枚×6秒で24秒 */
}

.mv-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ★重要：縮尺を保ったまま枠いっぱいに広げます */
}

/* 文字を「完全な中心」に固定する */
.mv-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* ★重要：自分の大きさに関わらずど真ん中へ */
    z-index: 10;
    width: 90%;
    text-align: center;
}

.mv-content h2 {
    font-family: "Yu Mincho", serif;
    /* 画面幅に合わせて、最小1.2remから最大3remまで自動調整します */
    font-size: clamp(1.2rem, 4vw, 3rem); 
    color: #fff;
    background-color: rgba(0, 51, 102, 0.6);
    padding: 1.5rem 2rem;
    display: inline-block;
    
    /* 2行を維持するための設定 */
    line-height: 1.5;      /* 行間を適切に空ける */
    white-space: nowrap;  /* 勝手な位置での自動改行を禁止 */
    word-break: keep-all;
}

/* フェードアニメーションの計算（4枚用） */
@keyframes fade-animation {
    0% { opacity: 0; }
    5% { opacity: 1; }
    25% { opacity: 1; }
    30% { opacity: 0; }
    100% { opacity: 0; }
}

/* 各スライドの開始時間をずらす */
.mv-slide:nth-child(1) { animation-delay: 0s; }
.mv-slide:nth-child(2) { animation-delay: 6s; }
.mv-slide:nth-child(3) { animation-delay: 12s; }
.mv-slide:nth-child(4) { animation-delay: 18s; }
/* スマホ表示（画面幅768px以下）の時だけ3枚目の位置を調整 */
@media screen and (max-width: 768px) {
    .mv-slide:nth-child(3) img {
        /* 左端を基準に表示（1枚目や2枚目は中央のまま、3枚目だけ左寄せ） */
        object-position: left center;
    }
}
/* --- ここから追加：メインビジュアルの文字調整（スマホ・PC縮小対策） --- */
@media screen and (max-width: 960px) {
    .mv-content h2 {
        padding: 1rem 1.2rem; /* 紺色の帯を少しスリムにして、画像を見えやすくします */
        width: 90%;           /* 帯の横幅が広がりすぎないように制限します */
        line-height: 1.4;     /* 文字が2行になっても間延びしないようにします */
        white-space: normal;  /* <br>での改行は許可する */
        line-height: 1.5;
    }
}

/* ナビゲーション（スマホ時） */
@media screen and (max-width: 960px) {
    .nav-menu {
        z-index: 1000; /* 確実に一番手前に来るように大きな数字を設定 */
    }
    /* 三本線ボタンも手前に */
    .menu-btn {
        z-index: 1001;
    }
}

/* フッター全体の背景と余白 */
.site-footer {
    background-color: var(--main-navy); /*フッターをネイビーに*/
    color: var(--text-white);
    padding: 60px 20px 20px;
    margin-top: 50px;
}

/* --- 新デザイン：アイコン・タイトル・説明文レイアウト（最新版） --- */
.info-sections {
    padding: 100px 20px;
    
    /* CSSファイルが「css」フォルダ内にある場合は、
       一度外に出てからimagesフォルダを探すために「../」を頭につけます。
    */
    background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), 
                      url("../images/seachart2.jpg"); 
    
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* カードを並べる親要素 */
.info-container {
    max-width: 1100px;
    margin: 0 auto; /* 左右の余白を自動にして中央へ */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* パソコンで中身を中央に寄せる */
    gap: 30px;
}

/* カード1枚の設定 */
.info-block {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eef2f5;
    transition: 0.3s;
    width: calc(50% - 15px); /* パソコンでは2列 */
}

.info-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* カード内のリンク範囲：全体を縦に並べる設定 */
.info-block a {
    display: flex;
    flex-direction: column; 
    padding: 30px;
    height: 100%;
    text-align: center; /* 全体を中央揃えのベースにする */
}

/* ★アイコンとタイトルを横並びにして中央に寄せる */
.info-header-sp {
    display: flex;
    align-items: center;     /* 上下中央 */
    justify-content: center; /* 左右中央 */
    margin-bottom: 20px;     
    width: 100%;
}

/* ★アイコンのサイズ調整（少し大きめの80pxにしました） */
.info-image {
    flex: 0 0 80px;
    height: 80px;
    margin-right: 15px;      
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.info-content h2 {
    font-family: "Yu Mincho", serif;
    font-size: 1.4rem;
    color: var(--main-navy);
    margin: 0;
}

/* ★説明文の設定（誠実な両端揃え） */
.info-description p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    text-align: justify; 
}

/* --- スマホ専用の微調整 --- */
@media screen and (max-width: 768px) {
    .info-block {
        width: 100%;    /* スマホでは1列（横幅いっぱい） */
    }

    .info-block a {
        flex-direction: column; /* アイコン＋タイトルの下に説明文を回す */
        padding: 25px 20px;
    }

    /* アイコンとタイトルを横に並べるための設定 */
    .info-header-sp {
        display: flex;
        align-items: center;
        justify-content: center; /* ★左右の中央揃え（ここを追加！） */
        margin-bottom: 15px;
        width: 100%;
    }

    .info-image {
        flex: 0 0 60px; /* スマホでは画像サイズを小さく */
        height: 60px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .info-content h2 {
        font-size: 1.2rem;
        margin-bottom: 0;
    }

    .info-description {
        margin-top: 5px;
    }
    .info-sections {
        /* スマホでは背景の「固定」を解除する */
        background-attachment: scroll !important; 
        
        /* 画像を画面の横幅に合わせ、縦は自動にする（拡大を防ぐ） */
        background-size: cover; 
        
        /* 余白を少し調整して、画像が大きく見えすぎないようにする */
        padding: 60px 20px; 
    }
}

/* --- SDGs特別セクションの設定（背景画像版） --- */
.sdgs-section {
    padding: 120px 20px;
    /* ★背景画像の設定：画像名は適宜修正してください */
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), 
                      url("../images/nature.jpg"); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* スクロールしても背景を動かさない設定 */
    
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff; /* 全体の文字色を白に */
}

/* 「SDGsへの取り組み」タイトルの色と影の設定 */
.sdgs-section .section-title {
    font-family: "Yu Mincho", serif;
    font-size: 2.2rem;
    color: #fff !important;  /* 強制的に白にする */
    margin-bottom: 30px;
    text-shadow: 0 2px 15px rgba(0,0,0,0.6); /* 背景の上でもクッキリさせる影 */
    letter-spacing: 0.15em;
    text-align: center;
}

/* SDGsロゴ画像の囲み */
.sdgs-banner {
    width: 100%;
    max-width: 800px; /* 少しスリムに調整 */
    margin: 0 auto 40px;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.9); /* ロゴが見やすいよう薄く白背景を敷く */
    padding: 15px;
}

.sdgs-logo-img {
    width: 100%;
    height: auto;
    display: block;
}

.sdgs-message-box {
    max-width: 850px;
    margin: 0 auto;
}

.sdgs-sub-title {
    font-family: "Yu Mincho", serif;
    font-size: 1.8rem;
    color: #fff; /* 文字色を白に */
    margin-bottom: 25px;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* 文字に影をつけて読みやすく */
}

.sdgs-text {
    font-size: 1.1rem;
    line-height: 2;
    color: #fff; /* 文字色を白に */
    margin-bottom: 40px;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

/* ★PDFボタン：背景画像の上でも見やすい配色 */
.sdgs-button-area {
    margin-top: 10px;
}

.pdf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1); /* ほんのり白く透かす */
    color: #fff;
    border: 2px solid #fff;
    padding: 15px 40px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    transition: 0.3s;
}

.pdf-button:hover {
    background-color: #fff;
    color: var(--main-navy);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.pdf-icon {
    margin-right: 10px;
    font-size: 1.2rem;
}

/* --- SDGsスマホ用微調整の追加（既存の@media内に入れてもOKです） --- */
@media screen and (max-width: 768px) {
    .sdgs-section .section-title {
        font-size: 1.6rem; /* スマホでは文字を少し小さく */
        margin-bottom: 20px;
    }
    /* ------------------ */

    .sdgs-section {
        padding: 80px 20px;
        background-attachment: scroll; 
    }
    .sdgs-section {
        padding: 80px 20px;
        background-attachment: scroll; /* スマホでは電池持ち等のため固定を解除 */
    }
    
    .sdgs-sub-title {
        font-size: 1.3rem;
        white-space: normal; /* スマホでは改行を許可 */
        word-break: keep-all;
    }
    
    .sdgs-text {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    .pdf-button {
        width: 100%; /* スマホではボタンを横いっぱいに */
        padding: 15px 20px;
    }
}

/* パソコンだけで改行するための設定 */
.pc-only { display: block; }

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
    .sdgs-section { 
        padding: 60px 20px; 
    }
    .sdgs-sub-title {
        /* 画面幅に合わせて文字サイズを少し小さくし、絶対にはみ出さないようにします */
        font-size: clamp(1rem, 4.5vw, 1.4rem);
        white-space: normal; /* 折り返しを許可しつつ、単語の途中で切れないようにする */
        word-break: keep-all; 
        overflow-wrap: anywhere;
        padding: 0 10px; /* 画面端に密着しないように */
    }
    .sdgs-text { 
        font-size: 0.95rem; 
        text-align: justify; 
    }
    .pdf-button { 
        width: 100%; 
        box-sizing: border-box; 
    } /* スマホではボタンを横いっぱいに */
    .pc-only { 
        display: none; 
    }
}

/* 会社情報とナビを並べるコンテナ */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* 会社名 */
.footer-logo {
    font-family: "Yu Mincho", serif;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* 住所や電話番号のテキスト */
.footer-info p {
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 10px;
    color: #d1d9e0; /* 少しだけ色を落として読みやすく */
}

/* 右側のナビゲーション */
.footer-nav ul {
    display: flex;
    flex-wrap: wrap; /* 幅が狭くなったら折り返す */
    max-width: 400px;
}

.footer-nav ul li {
    width: 50%; /* 2列で並べる */
    margin-bottom: 15px;
}

.footer-nav ul li a {
    color: #fff;
    font-size: 0.9rem;
    transition: 0.3s;
}

.footer-nav ul li a:hover {
    color: var(--text-white); /* ホバー時に光る */
    text-decoration: underline;
}
.footer-contact{
    color: #fff;
}

/* コピーライトエリア */
.copyright {
    text-align: center;
    border-top: 1px solid rgb(255, 255, 255,0.2); /* 区切り線 */
    margin-top: 40px;
    padding-top: 20px;
    font-size: 0.8rem;
    color: #a0aec0;
}
/* フッター内の電話番号やリンクの色を強制的に指定 */
.footer-info p {
    color: #d1d9e0 !important; /* もともと設定されていた薄いグレーを強制適用 */
}

/* 万が一リンク化されても色を維持する設定 */
.footer-info p a {
    color: inherit !important;   /* 親（pタグ）の色を引き継ぐ */
    text-decoration: none;      /* 下線を消す */
}

/* --- スマホ表示用 (768px以下) --- */
@media screen and (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* 縦並びに変更 */
    }
    
    .footer-nav {
        margin-top: 40px;
    }
    
    .footer-nav ul {
        max-width: 100%;
    }
}
/* --- 下層ページ用ヒーローエリア --- */
.sub-hero {
    background-color: var(--main-navy); /* ここをネイビーに */
    padding: 60px 0;
    text-align: center;
    color: var(--text-white);
    margin-top: 0px;
}
.sub-hero h2 {
    font-family: "Yu Mincho", serif;
    font-size: 2.5rem;
    letter-spacing: 0.2em;
}

/*経営理念ページ
--------------------*/
/* 共通設定：明朝体の適用を強化 */
.philosophy-core, .policy-section, .logo-origin-section {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

/* 経営理念：空間を広く取り、言葉の重みを出す */
.philosophy-core {
    text-align: center;
}
.philosophy-title {
    font-size: 2.2rem;
    color: var(--main-navy);
    letter-spacing: 0.3em;
    margin-bottom: 30px;
}
.philosophy-text-box {
    border-top: 1px solid var(--main-navy);
    border-bottom: 1px solid var(--main-navy);
    padding: 60px 0;
    display: block;   /* inline-blockから変更して、幅を自動調整させます */
    width: 100%;      /* カードの幅いっぱいに合わせます */
    max-width: 800px; /* ただし広がりすぎないよう上限を設けます */
    margin: 0 auto;   /* 中央に寄せます */
}
.core-values {
    font-size: 3rem;
    font-weight: 600;
    color: var(--main-navy);
    letter-spacing: 0.3em;
    line-height: 1.2;     /* 行間を整える */
}

/* 経営方針：一、ごとの縦の並びを強調 */
.policy-list {
    max-width: 800px;
    margin: 0 auto;
}
/* 独立した印象を与えるタイトルの装飾 */
.section-title {
    text-align: center;
    font-family: "Yu Mincho", serif;
    font-size: 2rem;
    color: var(--main-navy);
    margin-bottom: 60px; /* 下のコンテンツとの間隔を広く取る */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* 文字と線の隙間 */
}
.section-label {
    text-align: center;
    color: var(--main-navy);
    font-weight: bold;
    letter-spacing: 0.2em; /* 字間を広げて洗練された印象に */
    margin-bottom: 5px;
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;          /* ★ 少し透かすことで控えめな印象に */
}

/* タイトルの左右に伸びる細い線（装飾） */
.section-title::before,
.section-title::after {
    content: "";
    flex: 1;      /* 左右いっぱいに線を伸ばす */
    height: 1px;
    background-color: var(--main-navy);
    max-width: 100px; /* 線の長さを制限（お好みで調整してください） */
}

/* さらに「経営方針」という文字の下に小さな英語を添える場合（オプション） */
.section-title::after {
    /* 必要に応じて、線の高さを変えたり二重線にするなどのアレンジも可能です */
}
/* 各方針を囲むボックス（ここを強化します） */
.policy-card {
    background-color: #ffffff; /* 白いボックス */
    border-left: 5px solid var(--main-navy); /* 左側の縦線を少し太くして強調 */
    padding: 35px 40px; /* 上下に35px、左側に40pxの大きな余白を確保 */
    margin-bottom: 30px; /* ボックス同士の間隔 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* ごく薄い影で箱の存在感を出す */
    transition: 0.3s;
}
/* ボックス内の見出し（一、の部分） */
.policy-card h3 {
    font-size: 1.3rem;
    color: var(--main-navy);
    margin-bottom: 15px;
    line-height: 1.4;
    letter-spacing: 0.05em; /* 文字の間隔を少し広げて厳格に */
}
/* ボックス内の説明文 */
.policy-card p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.8;
    padding-left: 0; /* 左側の線との距離は親のpaddingで確保済み */
}
/* ホバー時に少しだけ浮き上がらせて、誠実な動きをプラス */
.policy-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transform: translateX(5px); /* 右に少しだけ動く、静かな強調 */
}
/* コンテンツを中央に寄せ、左右に適切な余白を作る */
.container {
    max-width: 1000px; /* 全体の幅を少し絞ると、より厳格で読みやすくなります */
    margin: 0 auto;    /* 左右を自動調整して中央へ */
    padding: 0 40px;   /* 画面端から40pxの余裕を常に持たせる */
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .core-values { font-size: 1.8rem; letter-spacing: 0.1em; }
    .policy-card h3 { font-size: 1.1rem; }
}
/* --- 【経営理念ページ専用】背景画像と白いカードの設定 --- */

/* 1. 経営理念ページのみに背景画像を敷く */
.philosophy-page .content-wrapper {
    background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), 
                      url("../images/sunrise.jpg"); /* ★経営理念用の画像パス */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    padding: 80px 0;
}

/* 2. 浮いている白いカードの設定 */
.philosophy-page .white-card {
    background: #fff;
    max-width: 950px;
    margin: 0 auto 80px;
    padding: 80px 60px;
    border-radius: 0px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* 最後のカードの下余白をリセット */
.philosophy-page .policy-section.white-card {
    margin-bottom: 0;
}

/* 3. スマホ用の調整 */
@media screen and (max-width: 768px) {
    /* 社是の文字がはみ出さないように調整 */
    .philosophy-page .core-values {
        font-size: 5.5vw; /* 画面幅に合わせて自動調整 */
        letter-spacing: 0.1em;
        white-space: nowrap;
    }
    
    .philosophy-page .content-wrapper {
        padding: 40px 15px;
    }
    .philosophy-page .white-card {
        padding: 50px 20px !important;
        margin-bottom: 40px;
    }
    /* 社是の枠線をスマホでは少し詰める */
    .philosophy-page .philosophy-text-box {
        padding: 40px 10px;
        min-width: 90%;
    }
    /* --- 経営方針カードの調整 --- */
    .policy-card {
        border-left: none !important; /* ★左側の縦線を消します */
        padding-left: 20px !important; /* 線がなくなった分、左の余白を少し詰めてバランスを整えます */
    }
}
/* --- 代表挨拶 --- */
.greeting-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}
.greeting-text p {
    margin-bottom: 1.5em;
    text-align: justify;
    line-height: 1.8; /* 行間を2.2から1.8へ。少し詰めつつ読みやすさを維持 */
    font-size: 1rem;  /* 標準的なサイズに固定 */
}
/* 代表挨拶の署名を右側に固定する */
.signature {
    display: block;        /* 1行まるごと使う設定 */
    text-align: right !important; /* ★重要：強制的に右寄せにする命令 */
    font-family: "Yu Mincho", serif;
    font-size: 1.2rem;
    margin-top: 40px;
    font-weight: 600;
    color: var(--main-navy);
    width: 100%;           /* 横幅いっぱいの中で右に寄せる */
}
/* --- 【重要】スマホ専用の調整 --- */
@media screen and (max-width: 768px) {
    .greeting-content {
        padding: 40px 20px; /* スマホではさらに端の余白を減らす */
    }
    /* 1. 代表挨拶のカード全体の余白を詰める */
    .about-page .white-card {
        padding: 40px 20px !important; /* 上下40px、左右20pxまでタイトにします */
        margin-bottom: 30px;           /* カード下の隙間も少し詰めます */
    }

    /* 2. 本文の文字サイズと行間を調整してコンパクトにする */
    .greeting-text p {
        font-size: 0.85rem !important; /* 0.9remからさらに少し小さく */
        line-height: 1.6 !important;   /* 行間を少し詰め、縦長感を解消 */
        margin-bottom: 1.2em;          /* 段落ごとの隙間も調整 */
    }

    /* 3. 署名（代表取締役 篠野一貴）のサイズと余白 */
    .signature {
        font-size: 1.1rem !important;
        margin-top: 25px !important;   /* 本文との間の隙間を詰める */
    }

    /* 4. 代表挨拶のタイトル（h2）も少し小さくして高さを節約 */
    .about-page .section-title {
        font-size: 1.5rem !important;
        margin-bottom: 30px !important;
    }
}
/* ついでに、MESSAGE（.section-label）自体の下の余白も調整したい場合 */
.greeting-section .section-label {
    margin-bottom: 20px; /* 日本語タイトル（代表挨拶）との距離を調整 */
}
/* --- 会社概要テーブル --- */
.profile-table {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-collapse: collapse;
}
.profile-table th, .profile-table td {
    padding: 25px;
    border-bottom: 1px solid #e0e0e0;
}
.profile-table th {
    width: 30%;
    text-align: left;
    background-color: #f8f9fa;
    color: var(--main-navy);
    font-family: "Yu Mincho", serif;
}
/* --- スマホ専用：会社概要の2段レイアウト --- */
@media screen and (max-width: 768px) {
    .profile-table tr {
        display: block;
        margin-bottom: 15px; /* 項目ごとの隙間 */
        border-bottom: 1px solid #eee; /* 区切り線 */
    }

    .profile-table th, 
    .profile-table td {
        display: block; /* 縦に並べる魔法 */
        width: 100%;
        text-align: left;
        padding: 8px 10px;
        border: none;   /* 余計な線を消す */
    }

    .profile-table th {
        background-color: #f8f9fa; /* 項目名に薄い色をつけて見やすく */
        color: var(--main-navy);   /* 紺色で強調 */
        font-weight: bold;
        padding-bottom: 2px;
    }

    .profile-table td {
        padding-top: 5px;
        padding-bottom: 12px;
        padding-left: 15px; /* ★ここを15pxに変更（または追加） */
    }
}

/* --- 沿革（タイムライン） --- */
.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
/* 中央の縦線 */
.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 120px; /* 年号の右側に線を配置 */
    width: 2px;
    background: var(--main-navy);
    opacity: 0.3;
}
.timeline-item {
    display: flex;
    margin-bottom: 40px;
    position: relative;
}
.year {
    width: 120px;
    font-weight: bold;
    color: var(--main-navy);
    padding-right: 30px;
    text-align: right;
    padding-top: 5px;
}
.event {
    flex: 1;
    padding-left: 40px;
    padding-top: 5px;
    position: relative;
}
/* --- スマホ専用：沿革の2段レイアウト --- */
@media screen and (max-width: 768px) {
    /* --- 沿革：縦線と・マークを消す --- */
    .timeline::before { display: none; }
    .event::before { display: none; }

    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 0;
        border-bottom: 1px dashed #ccc;
    }

    .year {
        width: 100%;      /* 年号の幅を広げる */
        text-align: left; /* 左寄せにする */
        font-weight: bold;
        color: var(--main-navy);
        margin-bottom: 5px;
        font-size: 1rem;
    }

    .event {
        padding-left: 15px; /* ★2段目を少し右にずらして読みやすくする */
        line-height: 1.6;
        font-size: 0.95rem;
        color: #444;
    }
}
/* タイムラインの点 */
.event::before {
    content: "";
    position: absolute;
    left: -6px; /* 縦線に重ねる */
    top: 12px;
    width: 12px;
    height: 12px;
    background: var(--main-navy);
    border-radius: 50%;
}
/* すべてのタイトルと署名を明朝体に強制する */
.section-title, 
.philosophy-title, 
.core-values, 
.section-label, 
.signature, 
.profile-table th {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif !important;
}

/* --- 【追加】背景画像と白いカードの設定 --- */

/* 1. ページ全体の背景に画像を敷く */
.about-page .content-wrapper {
    background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), 
                      url("../images/tokushimacity.jpg"); /* ★背景画像のパス */
    background-attachment: fixed; /* スクロールしても背景が動かない設定 */
    background-size: cover;
    background-position: center;
    padding: 80px 0; /* 上下の隙間 */
}

/* 2. 白いカード（代表挨拶・会社概要・沿革）の共通デザイン */
.about-page .white-card {
    background: #fff;       /* 真っ白な背景 */
    max-width: 950px;       /* 横幅 */
    margin: 0 auto 80px;    /* 真ん中に寄せて、下のカードとの間隔をあける */
    padding: 80px 60px;     /* カード内の余白 */
    border-radius: 12px;    /* 角を少し丸く */
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* ふわっとした影 */
}

/* 最後のカード（沿革）だけは、下に隙間を作らない */
.history-section.white-card {
    margin-bottom: 0;
}

/* 3. スマホで見た時の調整（画面からはみ出さないようにする） */
@media screen and (max-width: 768px) {
    .content-wrapper {
        padding: 40px 15px; /* 背景が見える隙間を小さく */
    }
    .white-card {
        padding: 40px 20px; /* カードの中の余白を小さく */
        margin-bottom: 40px; /* カード同士の隙間を小さく */
    }
}

/* 事業内容：ヘッダー部分の調整 */
.section-header {
    text-align: center;
    margin-bottom: 60px; /* タイトル全体と下の文章との間隔 */
}
.sp-only {
    display: none;
}
/* 追加する小さなタイトル（サブタイトル） */
.section-sub-title {
    text-align: center;
    font-family: "Yu Mincho", serif;
    font-size: 1.1rem;      /* 本文より少し大きく、h2より小さいサイズ */
    color: var(--main-navy);
    letter-spacing: 0.3em;  /* 字間を広げて「源流」の重厚感を出す */

    display: block;
    font-weight: 500;
}

/* 既存のsection-title（h2）の余白を少し調整 */
.section-main-section .section-title {
    margin-bottom: 0;       /* 上にサブタイトルが来たので、余白を整理 */
}

/* --- 事業内容イントロ --- */
.service-intro {
    max-width: 850px;
    margin: 0 auto 30px;
    text-align: left;
    line-height: 2;
    padding: 0 20px;
}

/* --- 寄港地ネットワーク --- */
.network-section {
    border-radius: 8px;
    margin-bottom: 100px;
}
.sub-section-title {
    text-align: center;
    font-family: "Yu Mincho", serif;
    font-size: 1.6rem;
    color: var(--main-navy);
    margin-bottom: 20px;
}
.network-desc {
    text-align: center;
    margin-bottom: 50px;
    color: #444;
}
.port-grid {
    display: flex;
    gap: 30px;
}
.port-area {
    flex: 1;
    border-top: 2px solid var(--main-navy);
    padding-top: 20px;
}
.port-area h4 {
    color: var(--main-navy);
    margin-bottom: 15px;
    font-size: 1.1rem;
}
.port-area ul li {
    font-size: 0.95rem;
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
}
.port-area ul li::before {
    content: "■";
    position: absolute;
    left: 0;
    font-size: 0.6rem;
    top: 5px;
    color: var(--main-navy);
}

/* --- 船舶テーブル --- */
.vessel-table-wrapper {
    margin-bottom: 60px;
}
.vessel-table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}
.vessel-table th, .vessel-table td {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}
.vessel-table th {
    text-align: left;
    background-color: var(--main-navy);
    color: #fff;
    width: 30%;
}

/* --- 船内ギャラリー --- */
.vessel-gallery {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.gallery-item {
    flex: 1;
    text-align: center;
}
.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
}
.gallery-item p {
    font-size: 0.9rem;
    color: #666;
}

@media screen and (max-width: 768px) {
.sp-only {
    display: block; /* スマホでは改行を有効にする */
}

.section-sub-title.service-catch {
    font-size: 1.1rem;      /* 2段になるので、読みやすい標準サイズに戻します */
    white-space: normal;    /* 改行を許可する設定に戻します */
    line-height: 1.6;       /* 2段になった時の行間を調整 */
    text-align: center;
    display: block;
}
   /* sub-section-title 全体ではなく、port-title という名前がついた時だけ適用 */
   .sub-section-title.port-title {
    font-size: 4.2vw;      /* 画面の横幅に合わせて文字サイズを自動調整する単位です */
    white-space: nowrap;   /* 絶対に改行させない命令 */
    letter-spacing: -0.02em; /* 字の間をわずかに詰め、1行に収まるよう調整 */
    display: block;
    width: 100%;
    text-align: center;
}
    .port-grid, .vessel-gallery { flex-direction: column; }

    /* 船舶テーブルを2段にする */
    .vessel-table tr {
        display: block;
        margin-bottom: 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .vessel-table th, 
    .vessel-table td {
        display: block; /* 縦に積む */
        width: 100% !important;
        text-align: left;
        padding: 10px;
        border: none;
    }

    .vessel-table th {
        background-color: #f8f9fa; /* 項目名は薄いグレーに */
        color: var(--main-navy);
        padding-bottom: 2px;
        font-size: 0.9rem;
    }

    .vessel-table td {
        padding-top: 5px;
        padding-bottom: 15px;
        padding-left: 20px; /* ★2段目を少し右にずらす（インデント） */
        font-weight: bold;  /* スペック内容を強調 */
    }
}
/* 船舶メイン写真のスタイル */
.vessel-main-visual {
    max-width: 900px; /* テーブルより少し広めにして迫力を出す */
    margin: 0 auto 40px; /* 中央寄せにして下に余白を作る */
    text-align: center;
}

.vessel-main-visual img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 角を少し丸めて洗練された印象に */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 船の存在感を引き立てる影 */
}

.photo-caption {
    margin-top: 15px;
    font-family: "Yu Mincho", serif;
    font-size: 1.1rem;
    color: var(--main-navy);
    letter-spacing: 0.1em;
}

/* 船内ギャラリーとの差別化のため、下のギャラリーの余白も微調整 */
.vessel-gallery {
    margin-top: 60px;
    padding-top: 60px;
}
/* --- 【事業内容ページ専用】背景画像と白いカードの設定 --- */

/* 1. 事業内容ページのみに背景画像を敷く */
.service-page .content-wrapper {
    background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4)), 
                      url("../images/whirlpool.jpg"); /* ★事業内容用の画像パス */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    padding: 80px 0;
}

/* 2. 会社概要ページと共通の「浮いている白いカード」の設定 */
.service-page .white-card {
    background: #fff;
    max-width: 1000px;     /* 事業内容は情報が多いので少し広めに設定 */
    margin: 0 auto 80px;
    padding: 80px 60px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* 最後のカードの下余白をリセット */
.service-page .vessel-section.white-card {
    margin-bottom: 0;
}

/* 3. 事業内容ページ内の各要素の微調整 */
.service-page .service-intro {
    padding: 0; /* カード側でpaddingを持つので0にします */
}

/* 4. スマホ用の調整（画面からはみ出さないようにする） */
@media screen and (max-width: 768px) {
    .service-page .content-wrapper {
        padding: 40px 15px;
    }
    .service-page .white-card {
        padding: 40px 20px !important;
        margin-bottom: 40px;
    }
}
/* --- フッターの波アニメーション（最終調整版） --- */
.site-footer {
    position: relative;
    background-color: #003366; /* 基調色のネイビーを直接指定 */
    padding-top: 130px; 
    overflow: hidden;
    z-index: 1; /* フッター全体の重なり順 */
}

.wave-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: #f4f7f9; /* ページ背景色と一致 */
    line-height: 0;
    z-index: -1; /* 背景として配置 */
}

/* 波本体：最も表示が安定するSVG形式に変更しました */
.wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V95.8C57.21,103.52,116.27,108.06,175.32,106.31,223.59,104.88,271.7,92.21,321.39,56.44Z' fill='%23003366'/%3E%3C/svg%3E");
    background-size: 50% 100px;
    background-repeat: repeat-x;
    animation: wave-move 20s linear infinite;
}

.wave1 { opacity: 1.0; z-index: 10; animation-duration: 15s; }
.wave2 { opacity: 0.5; z-index: 9; animation-duration: 25s; top: 10px; }
.wave3 { opacity: 0.3; z-index: 8; animation-duration: 35s; top: 20px; }

@keyframes wave-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 文字の重なりを保証 */
.footer-container, .copyright {
    position: relative;
    z-index: 20;
}
/* --- 働き方の導入 --- */
.working-style-box {
    max-width: 800px;
    margin: 0 auto;
    padding: 0px;
    border-left: none;
}
/* タイトル下の横線の設定 */
.title-line {
    border: none;
    border-top: 2px solid var(--main-navy); /* ネイビーの線 */
    width: 100%;
    max-width: 800px;     /* 本文の幅（working-style-box）に合わせます */
    margin: 20px auto 30px; /* 中央に寄せて上下に余白を作る */
    opacity: 0.8;         /* 線が強すぎると感じる場合は、少しだけ透かすとお洒落です */
}

/* --- 職種紹介カード --- */
.job-card {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}
.job-card.reverse { 
    flex-direction: row-reverse; 
}
.job-image { 
    flex: 0 0 35%; 
    height: 280px; }
.job-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.job-text { flex: 1; }
.job-label { color: var(--main-navy); font-size: 0.8rem; letter-spacing: 0.2em; font-weight: bold; }
.job-text h4 { font-family: "Yu Mincho", serif; font-size: 2rem; margin: 10px 0 20px; color: var(--main-navy); }
.job-text p { line-height: 2; text-align: justify; color: #444; }

/* 募集要項セクションの中のタイトルだけを個別に調整 */
.requirements-section .sub-section-title {
    font-size: 2rem;      /* 文字を大きく（1.6remから2remへ） */
    margin-bottom: 20px;  /* タイトルとテーブルの間の隙間を狭く */
    letter-spacing: 0.1em; /* 少し字間を広げて視認性をアップ */
}
.requirements-table {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-collapse: collapse;
    background: #fff;
}
.requirements-table th, .requirements-table td { padding: 25px; border: 1px solid #e0e0e0; }
.requirements-table th { background-color: var(--main-navy); color: #fff; width: 25%; text-align: left; }
.requirements-table td { line-height: 1.8; }

.apply-box { 
    text-align: center; 
    margin-top: 60px 20px; 
    margin: 40px 0;
    border-radius: 12px;
}
.apply-box p { 
    margin-bottom: 30px; 
    font-size: 1.2rem; 
    font-family: "Yu Mincho", serif; 
}
/* 既存の entry-btn を「押しやすい特大サイズ」に強化 */
.entry-btn {
    display: inline-block;
    width: 100%;
    max-width: 450px;      /* さらに横幅を広げて存在感をアップ */
    padding: 22px 0;       /* 上下の厚みを増やして指で押しやすく */
    background-color: #003366; /* 篠川ネイビー */
    color: #ffffff !important;
    text-decoration: none;
    font-size: 1.25rem;    /* 文字を大きくして読みやすく */
    font-weight: bold;
    letter-spacing: 0.1em;
    border-radius: 50px;   /* 親しみやすい丸み */
    box-shadow: 0 6px 20px rgba(0, 51, 102, 0.25); /* 影で立体感を出す */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* マウスを置いた時の動き（ホバー） */
.entry-btn:hover {
    background-color: #004a94;
    transform: translateY(-4px); /* 少し大きく浮き上がる */
    box-shadow: 0 10px 25px rgba(0, 51, 102, 0.35); /* 影を強調 */
    text-decoration: none;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    /* 以前設定した「1行表示」を、長いタイトルの時だけ解除する */
    .sub-section-title.long-title {
        white-space: normal; /* 改行を許可する */
        line-height: 1.4;    /* 行間を整える */
        text-align: left;    /* 長い場合は左寄せの方が見やすいです */
    }
    .requirements-section .sub-section-title {
        font-size: 1.5rem;    /* スマホでは少し控えめなサイズに調整 */
        margin-bottom: 15px;  /* スマホでの隙間もさらに調整 */
    }
    .apply-box {
        padding: 40px 15px;
    }
    .entry-btn {
        width: 100%;       /* スマホでは横幅いっぱい */
        font-size: 1.1rem;
        padding: 18px 0;
    }
}

@media screen and (max-width: 768px) {
    .job-card, .job-card.reverse { flex-direction: column; gap: 30px; }
    .job-image { height: 250px; }
    .requirements-table tr,
    .requirements-table th,
    .requirements-table td {
        display: block; /* 縦に並べる */
        width: 100% !important;
    }

    .requirements-table th {
        padding: 10px 15px;
        background-color: var(--main-navy);
        color: #fff;
        font-size: 0.9rem;
    }

    .requirements-table td {
        padding: 15px 15px 25px 25px; /* 左側に少し隙間（25px）を空ける */
        background-color: #fff;
        border-top: none; /* 項目名と一体化させる */
    }
}

/* --- 【採用情報ページ専用】背景画像と白いカードの設定 --- */

/* 1. 採用ページのみに背景画像を敷く */
.recruit-page .content-wrapper {
    background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), 
                      url("../images/ocean.jpg"); /* ★採用情報用の画像パス */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    padding: 80px 0;
}

/* 2. 採用ページの白いカード（経営理念に合わせ直角に設定） */
.recruit-page .white-card {
    background: #fff;
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 80px 60px;
    border-radius: 0; /* 直角デザイン */
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* 最後のカードの下余白をリセット */
.recruit-page .requirements-section.white-card {
    margin-bottom: 0;
}

/* 3. スマホ用の調整（改行と余白） */
@media screen and (max-width: 768px) {
    /* sp-onlyを有効にする設定（共通CSSに未記述の場合） */
    .sp-only { display: block; }

    .recruit-page .sub-section-title.long-title {
        font-size: 1.3rem;      /* スマホで見やすいサイズ */
        line-height: 1.6;       /* 2段になった時の行間 */
        white-space: normal;    /* 改行を許可 */
        text-align: center;     /* 中央寄せの方が収まりが良いです */
    }

    .recruit-page .content-wrapper {
        padding: 40px 15px;
    }
    .recruit-page .white-card {
        padding: 40px 20px !important;
        margin-bottom: 40px;
    }
    
    /* 職種カードの画像高さを調整 */
    .recruit-page .job-image {
        height: 200px;
    }
}

/* --- 下層ページ（sub-page）でのスマホメニュー表示の修正 --- */
@media screen and (max-width: 960px) {
    /* 1. メニューボタン（3本線）を最前面に！ */
    .sub-page .menu-btn {
        z-index: 10002 !important; /* メニュー本体より大きな数字にする */
    }

    /* 2. メニュー本体（背景）の設定 */
    .sub-page .nav-menu {
        z-index: 10001 !important; 
        background-color: #ffffff !important;
    }

    /* 3. メニュー内の文字設定 */
    .sub-page .nav-menu ul {
        position: relative !important;
        z-index: 10001 !important;
    }

    .sub-page .nav-menu ul li a {
        color: #003366 !important; 
    }
}
/* スマホメニュー内の「お問い合わせ」ボタンの文字色を白に強制 */
@media screen and (max-width: 960px) {
    .nav-menu ul li a.contact-btn {
        background-color: #003366 !important; /* ボタン背景：紺 */
        color: #ffffff !important;           /* 文字色：白（ここが重要です） */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}
/* --- プライバシーポリシー専用スタイル --- */
.policy-content {
    padding: 80px 0;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

.policy-intro {
    margin-bottom: 50px;
    color: #444;
}

.policy-item {
    margin-bottom: 40px;
}

.policy-item h3 {
    font-family: "Yu Mincho", serif;
    font-size: 1.4rem;
    color: var(--main-navy);
    border-bottom: 2px solid #eef2f5;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.policy-item ul {
    margin-top: 10px;
    padding-left: 20px;
}

.policy-item ul li {
    list-style-type: disc;
    margin-bottom: 8px;
    color: #555;
}

.contact-info-box {
    background-color: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-top: 20px;
}

.contact-info-box strong {
    color: var(--main-navy);
    font-size: 1.1rem;
}

@media screen and (max-width: 768px) {
    .policy-content {
        padding: 50px 20px;
    }
}
/* --- お問い合わせページ専用スタイル --- */
.contact-box {
    padding: 60px 0;
    max-width: 900px;
    margin: 0 auto;
}

.contact-text {
    text-align: center;
    margin-bottom: 40px;
}

.contact-text h3 {
    font-size: 1.8rem;
    color: #003366; /* 篠川ネイビー */
    margin-bottom: 20px;
}

.attention-text {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
}

/* フォーム案内エリアの調整 */
.form-container {
    background-color: #f9f9f9;
    padding: 60px 20px; /* 余白を広げてボタンを際立たせる */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 60px;
    text-align: center;
}

.form-guide-text {
    margin-bottom: 30px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* リンクボタン本体 */
.form-link-button {
    display: inline-block;
    background-color: #003366; /* 篠川ネイビー */
    color: #fff;
    padding: 20px 50px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* 角を丸くしてボタンらしく */
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0, 51, 102, 0.2);
}

.form-link-button:hover {
    background-color: #004488;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 51, 102, 0.3);
}

/* 電話案内エリア */
.contact-tel-info {
    text-align: center;
    background-color: #eef2f5;
    padding: 40px;
    border-radius: 10px;
}

.tel-number {
    display: block;
    font-size: 2.2rem;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
    margin: 15px 0;
}

/* スマホ対応（レスポンシブ） */
@media screen and (max-width: 768px) {
    .contact-box {
        padding: 40px 20px;
    }
    .tel-number {
        font-size: 1.6rem;
    }
    .form-container {
        padding: 40px 15px;
    }
    .form-link-button {
        display: block; /* 横幅いっぱいに広げる */
        padding: 18px 10px;
        font-size: 1.1rem;
    }
}
/* --- 【お問い合わせページ専用】背景画像と白いカードの設定 --- */

/* 1. お問い合わせページのみに背景画像を敷く */
.contact-page .content-wrapper {
    background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), 
                      url("../images/bg-contact.jpg"); /* ★お問い合わせ用の画像パス */
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    padding: 80px 0;
}

/* 2. 直角の白いカードの設定 */
.contact-page .white-card {
    background: #fff;
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 60px;
    border-radius: 0; /* 直角デザイン */
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* 3. スマホでタイトルを1行に収めるための設定 */
@media screen and (max-width: 768px) {
    .contact-form-title {
        font-size: 5.5vw !important; /* 画面幅に合わせて自動調整 */
        white-space: nowrap;         /* 改行を禁止 */
        letter-spacing: -0.02em;     /* わずかに字間を詰めて1行を死守 */
    }

    .contact-page .content-wrapper {
        padding: 40px 15px;
    }
    .contact-page .white-card {
        padding: 40px 20px !important;
    }
    
    /* 電話番号のデザイン微調整 */
    .tel-number {
        line-height: 1.2;
        padding: 10px 0;
    }
}
/* 三本線が×に変わるアニメーション */
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0); /* 真ん中の線を透明に */
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg); /* 上の線を傾ける */
    background-color: #333;
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg); /* 下の線を傾ける */
    background-color: #333;
}
@media screen and (max-width: 768px) {
    /* プライバシーポリシーのタイトルを1行に収める */
    .sub-hero h2 {
        font-size: 1.6rem;      /* PCの2.5remからスマホ用にサイズダウン */
        white-space: nowrap;    /* ★絶対に改行させない魔法の命令 */
        letter-spacing: 0.1em;  /* 字間を少し詰め気味にして収まりを良くする */
        width: 100%;
        padding: 0 10px;        /* 画面端にピッタリくっつかないよう微調整 */
    }
}