/* ==========================================
   共通スタイル
========================================== */

body{
    margin:0;
    font-family:"Yu Gothic","Hiragino Sans",sans-serif;
    background:#fffaf0;
    color:#333;
}

/* ==========================================
   ヘッダー
========================================== */

header{
    background:#f6d77a;
    color:#4e342e;
    text-align:center;
    padding:22px;
}

.site-logo,
header h1{
    margin:0;
    font-size:42px;
}

.logo-tt{
    font-family:'Great Vibes',cursive;
    margin-right:10px;
}

.logo-ja{
    font-family:"Yu Gothic","Hiragino Sans",sans-serif;
    font-weight:bold;
}

header p{
    margin:8px 0 0;
    font-size:18px;
}
/* ==========================================
   パンくずリスト
========================================== */
.breadcrumb{
    max-width:1100px;
    margin:0 auto 20px;
    padding:0;
    background:transparent;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:wrap;
    font-size:14px;
    color:#777;
}

.breadcrumb a{
    color:#6d8f3f;
    text-decoration:none;
    padding:0;
    border:none;
    font-weight:normal;
}

.breadcrumb a:hover{
    color:#33691E;
    background:transparent;
    text-decoration:underline;
}

.breadcrumb span{
    margin:0 6px;
}

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

.menu-button{
    display:none;
    position:fixed;
    top:30px;
    left:15px;
    z-index:1001;
    background:#33691E;
    color:white;
    border:none;
    font-size:28px;
    padding:8px 14px;
    cursor:pointer;
    border-radius:6px;
}

/* ==========================================
   ナビゲーション
========================================== */

nav{
    background:#33691E;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

nav a{
    color:white;
    text-decoration:none;
    padding:12px 20px;
    font-weight:bold;
    border-right:1px solid rgba(255,255,255,0.25);
}

nav a:hover{
    background:#558B2F;
}

/* ==========================================
   メイン
========================================== */

main{
    max-width:1100px;
    margin:40px auto;
    padding:20px;
}

/* ==========================================
   見出し
========================================== */

h2{
    color:#6d8f3f;
}

.page-title{
    text-align:center;
    color:#33691E;
    margin-bottom:30px;
}

/* ==========================================
   セクション
========================================== */

.section{
    background:white;
    padding:30px;
    margin-bottom:30px;
    border-radius:12px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.section h2{
    color:#6d8f3f;
}

.section ul{
    line-height:2;
}

/* ==========================================
   共通ボタン
========================================== */

.about-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-top:20px;
}

.about-links a{
    display:inline-block;
    background:#6d8f3f;
    color:white;
    text-decoration:none;
    padding:12px 24px;
    border-radius:8px;
    font-weight:bold;
}

.about-links a:hover{
    background:#33691E;
}

/* ==========================================
   フッター
========================================== */

footer{
    background:#6d8f3f;
    color:white;
    text-align:center;
    padding:20px;
}

footer a{
    color:white;
}

/* ==========================================
   スマホ
========================================== */

@media(max-width:768px){

    .site-logo,
    header h1{
        font-size:30px;
    }

    .menu-button{
        display:block;
    }

    nav{
        position:fixed;
        top:0;
        left:-260px;
        width:240px;
        height:100vh;
        background:#33691E;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        padding-top:70px;
        transition:.3s;
        z-index:1000;
    }

    nav.open{
        left:0;
    }

    nav a{
        width:100%;
        text-align:center;
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.25);
        padding:16px 20px;
    }

    .breadcrumb{
        position:static;
        width:auto;
        height:auto;
        background:transparent;
        display:flex;
        flex-direction:row;
        justify-content:flex-start;
        align-items:center;
        font-size:12px;
        margin:0 0 15px;
        padding:0;
    }

    .breadcrumb a{
        width:auto;
        padding:0;
        color:#6d8f3f;
        border:none;
        text-align:left;
        font-weight:normal;
    }

    .breadcrumb span{
        margin:0 5px;
    }
}

@media(max-width:600px){

    .about-links{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:12px;
        align-items:stretch;
    }

    .about-links a{
        width:100%;
        max-width:none;
        box-sizing:border-box;

        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        /* ボタン内の文字を改行しない */
        white-space:nowrap;

        /* 狭いスマホでは少しだけ文字を小さくする */
        font-size:clamp(13px, 3.6vw, 16px);
    
    }
}

/* ===== 改行させない調整・改訂版 ===== */


/* =========================
   PCナビ
========================= */
@media (min-width:769px){

    #nav-menu{
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        flex-wrap:nowrap !important;
        width:100% !important;
    }

    #nav-menu a{
        flex:0 0 auto !important;
        white-space:nowrap !important;

        padding-left:10px !important;
        padding-right:10px !important;

        font-size:15px !important;
    }
}


/* =========================
   スマホ
========================= */
@media (max-width:768px){

    /* 「信州の自然の中で育てる作物」などを1行 */
    .home-section > h2{
        white-space:nowrap !important;

        font-size:clamp(17px, 5.3vw, 22px) !important;
        letter-spacing:-0.5px !important;
        line-height:1.35 !important;

        width:100% !important;
        text-align:center !important;
    }


    /* フッターのリンクを全部1行 */
    footer p:first-child{
        white-space:nowrap !important;

        width:100% !important;
        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        padding-left:5px !important;
        padding-right:5px !important;

        font-size:clamp(9px, 2.7vw, 12px) !important;
        letter-spacing:-0.5px !important;
        line-height:1.5 !important;

        text-align:center !important;
    }

    footer p:first-child a{
        display:inline !important;
        white-space:nowrap !important;
        font-size:inherit !important;
    }
}


/* =========================
   Godot ゲーム
========================= */

.game-container {
    width: 100%;
    max-width: 960px;
    margin: 24px auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
}

.game-container iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}



/* スマホ・タブレットを横向きにしたとき */
@media (orientation: landscape) and (pointer: coarse) {

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .game-container {
        position: fixed !important;

        /* 画面のど真ん中に配置 */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;

        /* 縦幅をスマホ画面に合わせる */
        height: 100dvh !important;

        /* 1152×648（16:9）を維持 */
        width: calc(100dvh * 16 / 9) !important;

        max-width: 100vw !important;
        max-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        aspect-ratio: 16 / 9 !important;
        border-radius: 0 !important;
        overflow: hidden !important;

        z-index: 99999 !important;
        background: #000;
    }

    .game-container iframe {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        border: 0 !important;
    }
}