/* ===============================
   1. リセットCSS (ブラウザ標準設定を解除)
   =============================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* レイアウトを計算しやすくするおまじない */
}

/* ===============================
   2. ベーススタイル (全体設定)
   =============================== */
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Noto Sans JP', sans-serif; /* 全体にフォント適用 */
    color: #1d1d1d; /* 文字色の設定 */
    line-height: 1.6; /* 行間設定 */
    scroll-behavior: smooth;
}
img {
    max-width: 100%; /* 画像が画面からはみ出さないようにする */
    height: auto;
    vertical-align: bottom;
}

/* ===============================
   3. レイアウト (コンテナ)
   =============================== */

/* スマホ (デフォルト) 設定 */
.container {
    padding-left: 16px;
    padding-right: 16px;
    /* max-widthは設定せず、画面いっぱいに広がる */
}
.section {
    margin-top: 50px;
}
/* 2columページの場合 */
#main {
    margin-bottom: 50px;
}

/* PC/タブレット (768px以上) 設定 */
@media (min-width: 768px) {
    .container {
        max-width: 1280px; /* PCでの最大幅 */
        margin-left: auto; /* 中央寄せ */
        margin-right: auto; /* 中央寄せ */
        padding-left: 20px; /* 画面端の余白 */
        padding-right: 20px;
    }
}

/* ===============================
   4. コンポーネント (ボタン)
   =============================== */
.button { /* Block */
    display: inline-block;
    background-color: #14A83C;
    color: #ffffff;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: 700;
    transition: background-color 0.3s; /* ホバー時のアニメーション */
}

.button:hover {
    background-color: #0d832d; /* 少し濃い色に */
}

/* ===============================
   5. コンポーネント (ヘッダーとナビゲーション)
   =============================== */

.header {
    border-top: #14A83C 15px solid;
}
.header__inner {
    display: flex; /* Flexboxを使っている前提 */
    align-items: center; /* 縦方向の中央揃え */

    /* 上下方向にパディングを設定 */
    padding-top: 10px;    /* 上に20pxの余白 */
    padding-bottom: 10px; /* 下に20pxの余白 */

    /* 【重要！】ロゴとボタンを左右に分ける */
    /* justify-content: space-between; は、モバイル/PC両方で有効 */
    justify-content: space-between;
}

.header__logo {
    /* margin-left: 10px; */
}

/* ヘッダー内のロゴ画像に対して直接スタイルを適用 */
.header__logo img {
    height: 40px; /* 例：ロゴの高さを40pxに固定 */
    width: auto;   /* 幅は高さに合わせて自動調整 */
    /* または */
    /* width: 150px; * /* 例：ロゴの幅を150pxに固定 */
    /* height: auto; */  /* 高さ幅に合わせて自動調整 */
}

/* PC/タブレット (768px以上) 設定 */
@media (min-width: 768px) {
    .header__logo img {
        height: 75px; /* PCでは少し大きくする、などの調整 */
    }
}

/* ===============================
   ハンバーガーメニューのCSS
   =============================== */

/* ボタン（モバイルでのみ表示） */
.menu-button {
    display: block; /* デフォルトは表示 */
    position: relative; /* 線の位置決めの基準 */
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001; /* メニューより手前に配置 */
}
/* 3本の線 */
.menu-button__line {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #1d1d1d; /* 線の色 */
    transition: transform 0.3s, opacity 0.3s; /* アニメーション設定 */
}

/* 上の線 */
.menu-button__line:nth-child(1) {
    top: 0;
}
/* 真ん中の線 */
.menu-button__line:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}
/* 下の線 */
.menu-button__line:nth-child(3) {
    bottom: 0;
}

/* PC表示では非表示にする */
@media (min-width: 768px) {
    .menu-button {
        display: none;
    }
}
/* ボタンがアクティブ（メニューが開いている）時の線の変化 */
.menu-button.is-active .menu-button__line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg); /* 斜め45度回転 */
}
.menu-button.is-active .menu-button__line:nth-child(2) {
    opacity: 0; /* 真ん中の線を透明にして隠す */
}
.menu-button.is-active .menu-button__line:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg); /* 斜め-45度回転 */
}


/* メニュー本体（デフォルトはモバイルファーストで隠す） */
.nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 画面の高さ全体 */
    background-color: rgba(20, 168, 60, 0.95); /* メインカラーの緑を半透明に */
    z-index: 1000;

    /* 初期状態：画面の右端（100%分）に移動させて見えなくする */
    transform: translateX(100%);
    transition: transform 0.4s ease-out; /* アニメーション */

    /* 中身のリストを縦に中央寄せなど */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* メニューが開いた状態 (JSでis-activeが付与される) */
.nav-menu.is-active {
    transform: translateX(0); /* 画面内に表示 */
}

/* リストアイテムのスタイリング（縦並び、文字サイズなど） */
.nav-menu__item {
    list-style: none;
    text-align: center;
    margin: 20px 0;
}
.nav-menu__link {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 10px;
}

/* オプション: スクロール制御 */
.no-scroll {
    overflow: hidden;
}

/* 【重要】PC表示でのメニュー */
@media (min-width: 768px) {
    .nav-menu {
        position: static; /* 固定解除 */
        height: auto;
        background: none;
        transform: none; /* 移動を解除 */
        z-index: auto;
        justify-content: right;
    }
    .nav-menu__list {
        display: flex; /* 横並びにする */
        gap: 20px;
    }
    .nav-menu__item {
        margin: 0;
    }
    /* PC用の文字色など調整 */
    .nav-menu__link {
        color: #555555;
    }
}

/* =========================================================
   6. フッターエリア
   ========================================================= */

/* フッター全体の設定 (全サイズ共通) */
.footer {
    background-color: #ffffff;
    border-top: 1px solid #ccc; 
    padding: 20px 0; /* 上下の余白 */
}

/* フッター内部（左右に分けるためのFlexbox） */
.footer__inner {
    display: flex;
    /* 【モバイルファースト】デフォルトは縦積み */
    flex-direction: column; 
    align-items: center; /* 縦積み時の水平中央揃え */
    text-align: center; /* テキストの中央揃え */
    gap: 10px; /* 要素間の縦の隙間 */
}

/* 著作権情報 */
.footer__copy {
    font-size: 12px;
    color: #333;
}

/* ロゴ */
.footer__logo {
    height: 40px; 
    width: auto;
}
@media (min-width: 768px) {
    /* フッター内部のレイアウト上書き */
    .footer__inner {
        /* 縦積みから横並びに戻す */
        flex-direction: row; 
        /* 左右の両端に配置 */
        justify-content: space-between; 
        /* 縦方向の中央揃えは維持 */
        align-items: center; 
    }

    /* PCでは隙間が不要になる */
    .footer__inner {
        gap: 0;
    }
    .footer__logo {
        height: 50px; 
        width: auto;
    }
}

/* ===============================
   7. ページトップへ戻るボタン
   =============================== */
.to-top-button {
    /* 固定配置（画面の決まった位置に留まる） */
    position: fixed; 
    bottom: 20px;
    right: 20px;
    
    /* 見た目の設定 */
    width: 50px;
    height: 50px;
    line-height: 50px; /* テキストを縦方向中央に */
    text-align: center;
    background-color: #14A83C;
    color: #ffffff;
    border-radius: 50%; /* 丸い形 */
    text-decoration: none;
    font-size: 20px;
    
    /* 【重要】最初は非表示にする */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    
    /* スマホでタップしやすいように手前に配置 */
    z-index: 999; 
}

/* JavaScriptで付与される表示クラス */
.to-top-button.is-show {
    opacity: 1;
    visibility: visible;
}