/* ========================================================== */
/* 1. 基本設定 (リセット、フォント、変数) */
/* ========================================================== */

/* --- HTML/Body リセット --- */
html {
    scroll-padding-top: 70px; /* スクロール時の固定ヘッダー対策 */
}

body {
    min-width: 320px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
}

/* --- 画像のレスポンシブ設定 --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- カラー変数 (Variables) --- */
:root {
  /* プライマリーカラー */
    --color-primary-darkgreen: #1b6b3f;
    --color-primary-pink: #d46974;
    --color-primary-blue: #508DB1;
    --color-primary-green: #60AB4F;
    --color-primary-brown: #8B7724;
    --color-primary-gray: #6E716E;

  /* セカンダリーカラー */
    --color-secondary-yellow: #fff6e9;
    --color-secondary-darkgreen: #eaf0ea;
    --color-secondary-pink: #fbf3f2;
    --color-secondary-blue: #F1F4F8;
    --color-secondary-green: #F3F8EF;
    --color-secondary-brown: #F4F1E8;
    --color-secondary-gray: #F2F1F0;

  /* テキストカラー */
    --color-on-primary: #ffffff;
}

/* ========================================================== */
/* 2. 共通要素・汎用クラス */
/* ========================================================== */

/* --- セクション共通設定 --- */
.section {
    padding-bottom: 30px;
}
.section h2 {
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
}
.section h4 {
    text-align: center;
    font-weight: bold;
    font-size: 1.3rem;
    letter-spacing: 1px;
}

/* --- メインタイトル (h3) --- */
.main-title {
    width: 80%;
    max-width: 600px;
    text-align: center;
    background-color: var(--color-primary-darkgreen); /* 初期設定色 */
    color: var(--color-on-primary);
    margin: 0 auto;
    margin-bottom: 20px;
    font-size: 1.7rem;
    padding-bottom: 5px;
}

/* --- フッター --- */
footer {
    text-align: center;
}

/* ========================================================== */
/* 3. 各セクションの個別デザイン (カラーとボーダー) */
/* ========================================================== */

/* --- 小樽の現在と未来 (#otaru-vision) --- */
#otaru-vision {
    background-color: var(--color-secondary-darkgreen);
    border-top: 10px solid var(--color-primary-darkgreen);
}
#otaru-vision .main-title {
    background-color: var(--color-primary-darkgreen);
}

/* --- 観光は小樽経済の牽引役！ (#tourism-economy) --- */
#tourism-economy {
    background-color: var(--color-secondary-pink);
    border-top: 10px solid var(--color-primary-pink);
}
#tourism-economy .main-title {
    background-color: var(--color-primary-pink);
}

.sokode {
    position: relative;
}

/* --- くらしやまちづくり、交通 (#life-urban-dev) --- */
#life-urban-dev {
    background-color: var(--color-secondary-blue);
    border-top: 10px solid var(--color-primary-blue);
}
#life-urban-dev .main-title {
    background-color: var(--color-primary-blue);
}

#life-urban-dev h2,
#life-urban-dev h4 {
    color: var(--color-primary-blue);
}

/* --- 市民生活にいきる観光 (#tourism-for-life) --- */
#tourism-for-life {
    background-color: var(--color-secondary-green);
    border-top: 10px solid var(--color-primary-green);
}
#tourism-for-life .main-title {
    background-color: var(--color-primary-green);
}

/* --- 持続可能な観光都市へ (#sustainable-tourism) --- */
#sustainable-tourism {
    background-color: var(--color-secondary-brown);
    border-top: 10px solid var(--color-primary-brown);
}
#sustainable-tourism .main-title {
    background-color: var(--color-primary-brown);
}

#sustainable-tourism h2,
#sustainable-tourism h4 {
    color: var(--color-primary-brown);
}

/* --- 小樽観光のこれから (#future-otaru-tour) --- */
#future-otaru-tour {
    background-color: var(--color-secondary-gray);
    border-top: 10px solid var(--color-primary-gray);
}
#future-otaru-tour .main-title {
    background-color: var(--color-primary-gray);
}


/* ========================================================== */
/* 4. セクション内の個別コンポーネント (PC/タブレット設定) */
/* ========================================================== */

/* --- インタビューレイアウト --- */
.interview-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.interviewee {
    font-weight: bold;
    text-align: right;
}

/* --- 観光経済セクションのボックス --- */
.tourism-economy-box {
    padding: 0.8em 1em;
    margin: 1em 0;
    border: solid 1px var(--color-primary-pink);
    background-color: #fff;
    width: 450px;
}
.tourism-economy-box p {
    margin: 0; 
    padding: 0;
}
.tourism-economy-interview {
    background-color: var(--color-primary-pink);
    color: var(--color-on-primary);
    text-align: center;
    margin: 0 auto;
    max-width: 920px;
}

/* --- まちづくりセクションのボックス --- */
.life-urban-dev-box {
    padding: 0.8em 1em;
    margin: 1em 0;
    border: solid 1px var(--color-primary-blue);
    background-color: #fff;
    max-width: 450px;
}
.life-urban-dev-box p {
    margin: 0; 
    padding: 0;
}
.life-urban-devinterview {
    background-color: var(--color-primary-blue);
    color: var(--color-on-primary);
    text-align: center;
    margin: 0 auto;
    max-width: 920px;
}

/* --- 観光セクションのボックス --- */
.tourism-for-life-box {
    padding: 0.8em 1em;
    margin: 1em 0; /* この縦のmarginは、親のgapと重複するので削除してもOKです */
    border: dotted 1px var(--color-primary-green);
    background-color: #fff;
    /* width: 600px; は削除する */

    /* 通常（PC・タブレット）は2列表示にする設定 */
    /* 100%を2で割って、間に設定した gap: 20px の半分を引く計算 */
    flex: 0 0 calc(50% - 10px); 
    
    /* パディングやボーダーを幅に含める */
    box-sizing: border-box;
}

/* 他のスタイルは維持 */
.tourism-for-life-box p {
    margin: 0; 
    padding: 0;
}
.tourism-for-life-interview {
    background-color: var(--color-primary-green);
    color: var(--color-on-primary);
    text-align: center;
    margin: 0 auto;
    max-width: 920px;
}

.tourism-for-life-flex {
    /* 子要素をFlexアイテムとして扱い、横並びにする */
    display: flex;

    /* 幅が足りなくなったら次の行へ折り返す */
    flex-wrap: wrap;

    /* 子要素（ボックス）間の隙間を設定 */
    gap: 20px; /* 例: 縦横20pxの隙間 */

    /* コンテンツ全体を中央寄せにしたい場合（任意） */
    justify-content: center;
    
    /* 最大幅を設定して、コンテンツが広がりすぎないようにする（任意）*/
    max-width: 1240px; 
    margin: 0 auto;
    padding: 0 10px; /* 画面端の余白 */
}

/* スマートフォンなど、画面幅が狭い場合（768px以下）のレイアウト */
@media (max-width: 768px) {
    .tourism-for-life-box {
        /* 1列表示にする (幅を100%にする) */
        flex: 0 0 100%;
        margin: 0.5em 0; /* 縦の隙間調整 */
    }
}

/* --- 観光セクションのボックスコンテナ (親要素) --- */
.tourism-for-life-flex {
    /* Flexboxを有効にして横並びにする */
    display: flex;

    /* 幅が足りなくなったら次の行へ折り返す */
    flex-wrap: wrap;

    /* 子要素間の隙間を設定 (縦・横 20px) */
    gap: 20px; 

    /* ★重要★ コンテンツ全体に最大幅を設定して、2列が安定する領域を確保 */
    /* 2列 + 隙間 20px の合計幅より少し大きく設定するのが目安です。 */
    /* (50%幅のボックスが2つ + 隙間 20px) で約 1200px 程度が妥当 */
    max-width: 1240px; 

    /* コンテンツ全体を中央寄せにする */
    justify-content: center;

    /* 中央寄せと max-width を効かせるための左右マージン */
    margin: 0 auto;
    
    /* 画面端に余白がないと見づらいため padding を設定 */
    padding: 0 10px;
}


/* --- 観光セクションのボックス (子要素) --- */
.tourism-for-life-box {
    padding: 0.8em 1em;
    margin: 0; 
    border: dotted 1px var(--color-primary-green);
    background-color: #fff;
    box-sizing: border-box; /* パディング・ボーダーを幅に含める */

    /* 2列表示の設定 (100%を2で割って、隙間 20px の半分 10px を引く) */
    flex: 0 0 calc(50% - 10px); 
}

/* --- スマートフォン対応 (1列表示) --- */
/* 幅が768px以下になったら1列に切り替える */
@media (max-width: 768px) {
    .tourism-for-life-box {
        /* 1列表示にする (幅を100%にする) */
        flex: 0 0 100%;
    }
}

.interview-title {
    color: var(--color-primary-pink);
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: 10px;
    margin: 0 auto;
}
.interview-content {
    display: flex;
    gap:15px;
}

.interview-photo {
    width: 950px;
}


/* --- 画像グループ (img-group) --- */
.img-group {
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 20px;
    max-width: 900px;
    margin: 30px auto; 
}
.img-group img {
    height: 430px; 
    flex: 0 1 auto; 
    width: auto;
    max-width: 100%;
    object-fit: contain;
}


.hero-area {
    background-color: var(--color-secondary-yellow);
    margin: 0 auto;
    text-align: center;
    padding: 50px 0 65px;
}

.hero-area img {
    width: 35%;
    margin: 0 auto;
}
.hero-area h3 {
    margin-top: 25px;
}
@media (max-width: 768px) {
    .hero-area {
        padding: 40px 0 55px;
    }
    .hero-area img {
        width: 80%;
    }
    .hero-area h3 {
        font-size: 1.1rem;
        margin: 25px 10px 0 15px;
        font-weight: 400;
        text-align: left;
        line-height: 1.55;
    }
}

/* ========================================================== */
/* 5. レスポンシブ設定 (メディアクエリ) */
/* ========================================================== */

@media (max-width: 768px) {
    /* --- 画像グループ (img-group) --- */
    .img-group {
        flex-direction: column; 
        align-items: center; 
    }
    .img-group img {
        width: 97%; 
    }
    .img-group img:last-child {
        margin-bottom: 0;
    }
    
    /* --- インタビューグループ (interview-group) --- */
    .interview-group {
        flex-direction: column; 
        align-items: center;
        margin: 10px auto;
        width: 97%;
        gap: 20px;
    }
    
    /* --- ボックス要素 (.tourism-economy-box) --- */
    .tourism-economy-box {
        width: 100%;
        padding: 0.8em 1em;
        margin: 0;
        border: solid 1px var(--color-primary-pink);
    }
}






/* PC版のデフォルトスタイル */
.responsive-image {
    display: block; /* 画像がインライン要素のため、ブロック要素にして中央寄せを機能させる */
    max-width: 960px; /* PC版での最大幅 */
    width: 100%;    /* 親要素に対して100%幅だが、max-widthで制限される */
    text-align: center; /* これはimg要素自体には効かず、親要素のテキスト配置に影響 */
    margin: 20px auto; /* 上下20px、左右autoで中央寄せ */
    height: auto;   /* アスペクト比を保持して高さを自動調整 */
}

/* スマートフォン版のスタイル（画面幅が767px以下の場合に適用） */
@media (max-width: 767px) {
    .responsive-image {
        max-width: 100%; /* スマホ版では、親要素の幅を最大幅とする */
        width: 100%;    /* スマホ版では常に親要素の100%幅に */
        margin: 10px auto; /* スマホでは余白を少し減らすなど調整（任意） */
        padding: 0 10px; /* 左右に少しパディングを入れて、端に張り付きすぎないようにすることも可能（任意） */
        box-sizing: border-box; /* paddingを含めて幅100%にするために重要 */
    }
}


/* --- 共通・PC版スタイル --- */

.message-container {
    display: flex; /* 横並びにする */
    justify-content: center; /* コンテナ全体を中央に寄せる */
    margin-top: 20px;
    gap: 30px; /* テキストと画像の間の隙間 */
}

/* メッセージ本文のスタイルを移植 */
.message-text {
    max-width: 650px; /* 最大幅の制限 */
    text-align: left;
}

.message-text p {
    font-weight: 400;
    font-size: 1.2rem;
    /* 本文のインデントをリセット/調整するならここに記述 */
}

/* 画像と名前のコンテナ：横並び時の位置調整 */
.message-photo {
    /* 特別なレイアウト調整がなければ空でOK */
    text-align: center; /* 画像と名前を中央揃え */
    flex-shrink: 0; /* 縮小させない */
}

/* 画像のスタイルを移植 */
.shicho-image {
    max-width: 200px;
    margin: 0 10px;
    height: auto; /* 縦横比を保つ */
    display: block; /* 中央寄せのためブロック要素に */
}

/* --- スマホ版（画面幅が767px以下の場合）のスタイル --- */

#tourism-economy {
    position: relative; /* 子要素（.sokode）の絶対配置の基準点にする */
    /* その他のスタイルがあればここに維持 */
}
.sokode {
    position: absolute; /* 親要素(#tourism-economy)を基準に配置 */
    left: 150px; /* 左端から少し飛び出す、または左寄せに調整 */
    top: -77px; /* セクションのトップからの距離を調整 */
    
    /* h3の左側に配置するための調整 */
    z-index: 10; /* 他の要素の上に表示したい場合 */
    width: 120px; /* 画像のサイズを調整（適切な値に修正してください） */
    height: auto;
}


@media (max-width: 767px) {
    .sokode {
    position: absolute; /* 親要素(#tourism-economy)を基準に配置 */
    left: 5px; /* 左端から少し飛び出す、または左寄せに調整 */
    top: -25px; /* セクションのトップからの距離を調整 */
    
    /* h3の左側に配置するための調整 */
    z-index: 10; /* 他の要素の上に表示したい場合 */
    width: 50px; /* 画像のサイズを調整（適切な値に修正してください） */
    height: auto;
}
    .main-title{
        font-size: 1.3rem;
    }
    .img-group img {
    max-height: 430px;
    }
    .section h4 {
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    }
    /* メインコンテナを縦並び（flex-direction: column）に変更 */
    .message-container {
        flex-direction: column;
        align-items: center; /* 縦並びになった要素を中央揃えにする */
        margin-top: 10px; /* スマホでは余白を減らす */
        gap: 15px;
    }

    /* メッセージ本文：スマホ幅に合わせて最大幅を解除し、パディングで調整 */
    .message-text {
        max-width: 100%; /* 最大幅の制限を解除 */
        padding: 0 15px; /* 画面端に張り付かないよう左右に余白 */
        order: 2; /* 縦並びにした時、テキストを下に配置 */
    }
    
    .message-text p {
        font-size: 1rem; /* スマホではフォントサイズを少し小さく */
    }

    /* 画像と名前のコンテナ：スマホでは画像が上にくるように調整 */
    .message-photo {
        order: 1; /* 縦並びにした時、画像を上に配置 */
    }

    /* 画像のスタイル：スマホに合わせてサイズを調整 */
    .shicho-image {
        max-width: 150px; /* スマホでは画像を小さくする */
        margin: 0 auto; /* 中央寄せ */
    }
}

.link-banner {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
    gap: 30px;
}
@media (max-width: 767px) {
    .link-banner {
        flex-direction: column;
    }
}

.button-1 {
    /* 必須設定 */
    text-decoration: none;
    
    /* ホバーアニメーション（トランジション）を追加 */
    transition: background-color 0.2s, color 0.2s; 

    /* スタイルの移植 */
    width: 250px;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    text-align: center;
    /* 通常時の色設定 */
    background-color: #80493c; /* 濃い茶色 */
    color: #fff6e9; /* オフホワイト */
    margin: auto;
    font-weight: 600;
    font-size: 1em;
}

.button-1:hover {
    /* ホバー時の背景色と文字色を反転 */
    background-color: #fff6e9; /* 元の文字色に近いオフホワイトを背景色に */
    color: #80493c; /* 元の背景色に近い濃い茶色を文字色に */
}
#banner span {
    font-size: large;
    display: flex;
    justify-content: center;
}

/* .button-1 { text-decoration:none; } は上記の .button-1 に統合済みです */



.footer {
    background-color: var(--color-secondary-yellow);
    margin: 0;
    padding: 20px 0;
}