/* 全体リセット */
body {
  /* 左にあるものほど優先されます */
  font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #40251a; /* ← これを追加！ */
}

img {
  display: block;
}

.fv {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* 背景画像 */
.fv-bg {
  width: 100%;
  opacity: 0;
  animation: fadein-bg 1.5s ease forwards 1s;
}

/* ロゴ画像 */
.fv-logo {
  position: absolute;
  top: 32.8%;  /* ← ロゴの上下位置調整 */
  left: 0.67%;
  transform: translate(-0%, -0%);
  width: 64.7%;  /* ← ロゴの大きさ調整 */
  opacity: 0;
  animation: fadein-logo 1.2s ease forwards 0.3s;
}

/* フェードインのkeyframes */
@keyframes fadein-logo {
  from { opacity: 0; transform: translate(-0%, -0%); }
  to   { opacity: 1; transform: translate(-0%, -0%); }
}

@keyframes fadein-bg {
  from { opacity: 0; }

  to   { opacity: 1; }
}

.fixed-logo {
  position: fixed;
  top: 12px;
  left: 0.67%;
  /* 修正ポイント：widthをautoから変更する */
  width: 40vw; /* FVのロゴと全く同じ比率に合わせる */
  max-width: 600px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 1000;
}

/* デフォルト（スマホ） */
.fixed-logo img {
  width: 62vw; /*画面幅に対するパーセントでサイズを指定 */
  
}

/* PC用：画面幅768px以上のとき */
@media screen and (min-width: 768px) {
  
  .fv {
    width: 100%;
    /* ここを調整して、上から何段目で切るか決める（数字を大きくすると縦長に） */
    aspect-ratio: 100 / 150; /* ← ★ここの数字をいじって調整します！ */
    position: relative;
    overflow: hidden;/* 指定した比率からはみ出した下の部分（5段目）を非表示にする */
  }
  
  /* 1. 両方のロゴの幅を揃える */
  .fv-logo {
    width: 40%; /* 画面幅の○%にする（ここを調整！） */
    height: auto; /* 高さを自動にしないと歪みます */
    max-width:600px;
  }

  /* 2. ファーストビューのロゴの左寄せ設定 */
  .fv-logo {
    position: absolute;
    /* ここを調整して、ピッタリの場所を見つけます */
    top: 16.5%;
    left: 10px;
    }

  /* 3. 固定ロゴの「位置」を決める（ここが重要！） */
.fixed-logo img {
  width: 40vw;         /* 画面幅の40%をロゴの基準にする */
  max-width: 600px;    /* ただし、最大でも600pxにする */
  height: auto;        /* 比率を維持 */
  display: block;      /* 隙間を防ぐ */
}

/* 固定ロゴの「箱（コンテナ）」の幅を解除する */
.fixed-logo {
  width: auto;         /* これが重要！箱がロゴを小さくしないようにする */
  max-width: 100%;
}

.fixed-logo {
  top: 10px;  /* ← これがないと上の方に固定されません！ */
  left: 10px;
  }

/* 1. ハンバーガーボタンは確実に消す */
  .hamburger {
    display: none !important;
  }

/* 2. メニューを強制表示＆横並びにする（ここが重要！） */
  .nav-menu {
    display: flex !important;      /* ブロックではなくフレックスにする */
    position: static !important;   /* 絶対配置をやめる */
    width: auto !important;
    height: auto !important;
    background: none !important;
    opacity: 1 !important;
    margin-left: auto;             /* これが魔法！左側の余白を自動で最大にして、右に押し出す */
  }

  .nav-menu ul {
    display: flex !important;
    gap: 25px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-menu ul li a {
    /* 1.8vw の後ろに「+ 0.5rem」のように、remをちょい足しします */
    font-size: clamp(12px, 1.2vw + 0.5rem, 22px) !important;
    color: #ccb254 !important;
    font-weight: 800;
    text-decoration: none;
    font-size: 1.4rem !important; /* 数値を小さくすると文字が小さくなります */
    
    /* 1. 影を少し強めて、ぼかし（3つ目の数字）を大きくする */
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
    
    /* 2. 文字の間隔（レター間隔）を少し広げると、格段に読みやすくなる */
    letter-spacing: 0.05em; 
  }

  /* 3. マウスを乗せたときに「白く光る」ようにして視認性を高める */
  .nav-menu ul li a:hover {
    color: #fff !important; /* ホバー時は白くして、存在感を出す */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  }

  /* 1. ヘッダーをPC専用の「茶色い帯」スタイルにする */
  .header-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* ここを調整すれば帯の太さが変わります */
    background-color: rgba(64, 37, 26, 0.95); /* ずっと見える茶色い帯 */
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }

  /* 2. 本文をヘッダーの裏に潜り込ませず、下にずらす */
  body {
    padding-top: 60px; /* ヘッダーの高さと同じ数値をここに入れる */
  }
}

/* --- タブレットでの文字かぶりを「強制的に」直す --- */
/* 少し広めの幅（1360px以下）から早めに文字を小さくし始めます */
@media screen and (min-width: 769px) and (max-width: 1360px) {
  
  /* メニュー全体の幅を少し右に寄せてロゴから遠ざける */
  .nav-menu {
    margin-left: auto !important;
    padding-right: 10px !important;
  }

  .nav-menu ul {
    gap: 10px !important; /* 間隔をもっとギュッと詰めます */
  }

  .nav-menu ul li a {
  /* 1.15rem などの固定ではなく、画面幅に連動させます */
  /* 12px(最小) 〜 1.6vw(比率) 〜 22px(最大) の範囲で動く魔法です */
  font-size: clamp(12px, 1.6vw, 22px) !important; 
  
  color: #ccb254 !important;
  font-weight: 800;
  text-decoration: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.05em; 
  white-space: nowrap; /* 文字が勝手に2段にならないように守ります */
}

  .header-nav {
    padding: 0 10px !important;
  }
}

.fixed-logo.is-show {
  opacity: 1;
}

.fixed-bg {
  background-image: url("../img/fixed-bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100%; 
  min-height: 100vh;
  display: flex;
  flex-direction: column; 
  align-items: center; /* 横方向の真ん中寄せ */
}

.fixed-bg .inner {
  width: 70%; 
  max-width: 1400px;
  background-color: rgba(60, 40, 30, 0.85); 
  color: #fff;
  margin: 0 auto;
  /* PCの内側の余白はゆったり 5% */
  padding: 60px 6% 100px;
  box-sizing: border-box;
}

 /* スマホ用の調整（帯を少し太くする） */  
  @media screen and (max-width: 768px) {
   .fixed-bg .inner {
    width: 85%; 
    /* スマホの内側の余白は、パツパツにならない程度（20px）に */
    padding: 40px 30px 60px;
  }
}

  /* 画像のはみ出し防止 */
.inner img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- 文字のデザインを追加 --- */

/* タイトルの設定 */
.section-title {
    text-align: center;      /* 真ん中に寄せる */
    font-size: 2.5rem;       /* 文字の大きさ */
    font-weight: 700;
    color: #ccb254;   
    margin-top: 100px;         
    margin-bottom: 60px;     /* 下に少し隙間を作る */
    letter-spacing: 0.1em;   /* 文字の間隔を少し広げて上品に */
}

/* タイトルの前に「━」をつける */
.section-title::before {
  content: "━ "; /* 表示したい文字（後ろに半角スペースを入れると綺麗！） */
}

/* タイトルの後ろに「━」をつける */
.section-title::after {
  content: " ━"; /* 前に半角スペース */
}

/* --- 本文の設定（PCデフォルト） --- */
/* 使っているクラス名を全部カンマで繋ぎます→section-textのみでOK */
.section-text{
    /* 1. クライアントさんリクエスト：幅を絞って中央寄せ */
    max-width: 850px;       /* 👈 100%ではなく、あえて絞る */
    margin-left: auto;      /* 👈 中央寄せの魔法 */
    margin-right: auto;     /* 👈 中央寄せの魔法 */
    font-size: 1.4rem;      /* 👈 文字の大きさはここで調整 */
    
    /* 2. 色と装飾（ここは大切に守ります！） */
    color: #ccb254;         /* 👈 絶対にこれ！商店会ゴールド */
    font-weight: 500;
    line-height: 1.9;       /* 👈 少しゆったりさせると高級感が出ます */
    letter-spacing: 0.02em; /* 👈 マイナスではなく、少し広げると読みやすいです */
    
    /* 3. その他 */
    text-align: justify;    /* 👈 両端を揃える（PCで見ると綺麗！） */
    margin-bottom: 2em;
}

/* --- スマホ用の調整（上書き） --- */
@media screen and (max-width: 768px) {
    .section-title {
        font-size: 1.4rem;    /* タイトルもスマホでは少し小さく */
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .section-text {
    /* 1. 幅を少し狭める */
    width: 88%;           /* 👈 100%から少し絞って、左右にゆとりを持たせます */
    margin-left: auto;    /* 👈 左右中央寄せ */
    margin-right: auto;   /* 👈 左右中央寄せ */
    
    /* 2. クライアントさんリクエスト：文字を少し小さく */
    font-size: 0.9rem;    /* 👈 1remや15pxより一回り小さく */
        
    /* 3. 読みやすさの調整 */
    line-height: 1.7;     /* 👈 行間を少し詰め気味に（スマホはこれが読みやすい） */
    letter-spacing: 0.02em; /* 👈 商店会ゴールドが綺麗に見える隙間 */
    text-align: justify;  /* 👈 両端を揃えるときちっとして見えます */

    /* 4. その他（もともとの設定を上書き） */
    font-weight: 500;
    color: #ccb254;       /* 👈 大切なゴールド！ */
    }
}

/* 写真を横に並べるための設定 */
.photo-flex {
    display: flex;         /* 横に並べる魔法の言葉 */
    gap: 15px;             /* 写真と写真の間のすきま */
    margin: 60px 0;        /* 写真の上下に余白を作る */
}

.photo-flex img {
    /* 50% から すきまの半分(7.5px)を引く計算式に変えます */
    width: calc(50% - 7.5px);
    height: auto;          /* 縦横比を保つ */
    object-fit: cover;     /* 写真が歪まないように調整 */
    border-radius: 4px;    /* ほんの少し角を丸くするとカンプに近づくよ */
}

/* スマホでは縦に並べたい場合はこれ（お好みで！） */
@media screen and (max-width: 768px) {
    .photo-flex {
        flex-direction: column; /* 縦に並べる */
        margin: 20px 0;        /* 写真の上下に余白を作る */
    }
    
    .photo-flex img {
        width: 100%;       /* スマホでは横幅いっぱい */
    }
}

/* 緑のボックス全体 (PC)*/
.president-box {
    background-color: #1a4025;
    border-radius: 30px;
    padding: 100px;
    margin-top: 80px;
    color: #ccb254;
    overflow: hidden; /* 中身のはみ出し防止 */
}

/* 会長のタイトル */
.president-title {
    font-size: 2.0rem;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center; /* ★これだけ！これで「会長の思い」が真ん中に！ */
}

/* ★ここが魔法！会長の写真を右に寄せてテキストを回り込ませる */
.president-img {
    float: right;            /* 右に寄せる */
    width: 240px;            /* 写真をPCでは少し大きめに */
    aspect-ratio: 1 / 1;     /* 縦横比を強制的に 1:1 にする魔法 */
    border-radius: 50%;      /* 正円にする */
    object-fit: cover;       /* 中身が歪まないように調整 */
    margin-left: 20px;       /* 写真と左の文字の間に隙間 */
    margin-bottom: 30px;     /* 写真の下の文字との間に隙間 */
    border: none;            /* 縁取りを消す */
}

/* テキストのフォントサイズ調整 */
.president-text {
    font-size: 1.3rem; 
    font-weight: 500;
    line-height: 1.8;
    margin-bottom: 15px;
    letter-spacing: -0.02em; /* 文字間もキュッと */
}

.president-name-inline {
  display: block;      /* 改行して次の行へ */
  text-align: right;    /* 👈 これで右寄せ！ */
  font-size: 1.3rem;     /* お好みの大きさに */
  font-weight: 500;
  margin-top: 20px;     /* 上の文章との隙間 */
  color: #ccb254;       /* 商店会ゴールド */
}

/* --- スマホ用の調整(いちばん下に置くのが鉄則!!) --- */
@media screen and (max-width: 768px) {
    .president-box {
       /* 幅の 92% とかは消して、これで左右に少しだけ広げます */
        margin-top: 50px;
        margin-left: -5px;
        margin-right: -5px;
        padding: 30px 20px; 
    }

    .president-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center; /* ★これだけ！これで「会長の思い」が真ん中に！ */
    }   

    .president-img {
        /* スマホでは回り込みを解除して、今のまま（中央）にする */
        float: none;
        display: block;
        margin: 0 auto 20px;
        width: 150px;        /* スマホでは少し大きく見せる */
        height: 150px;
    }

     /* スマホはPCより少し控えめなサイズが読みやすいです */
    .president-text {
        font-size: 0.9rem; 
        line-height: 1.7; 
    }

    .president-name-inline  {
        display: block;      /* スマホでは改行させて独立させる */
        text-align: right;    /* 👈 これで右寄せ！ */
        font-size: 0.9rem;     /* お好みの大きさに */
        font-weight: 500;
        letter-spacing: 0.04em; /* 👈 ここ！文字間調整 */
        margin-top: 20px;     /* 上の文章との隙間 */
        color: #ccb254;       /* 商店会ゴールド */
    }
}

/* ３．南馬場の仲間たちセクション */
.shop-section {
    margin-top: 100px; 
    text-align: center;
}

.shop-list {
    list-style: none;
    padding: 0;
    margin-top: 50px;
    color: #f0c58e;
    font-family: serif;
    font-size: 1.5rem;
    line-height: 2.8;
}

/* リスト内の店名（h3）に対する設定 */
.shop-list h3 {
    margin-top: 15px;    /* ここを変えると、写真と店名の距離だけが広がる！ */
    margin-bottom: 10px;
    /* 他の設定（色やサイズ）は書かないので、現状のデザインが維持されます */
}

/* ブラウザ標準の三角形を消す */
summary {
  list-style: none; /* Safari用 */
  cursor: pointer;
  outline: none;
}
summary::-webkit-details-marker {
  display: none; /* Chrome/Edge用 */
}

/* --- 店舗写真を横長で統一する魔法 --- */
.shop-card img {
  width: 100%;           /* カードの幅いっぱいにする */
  aspect-ratio: 4 / 3;   /* ★これが魔法！どんな時も 4:3 の比率を守ります */
  object-fit: cover;    /* ★重要：これで上下を自動カットして枠に収めます */
  object-position: center; /* 中央を中心に切り抜く */
  border-radius: 8px 8px 0 0; /* 上側だけ角を丸くする */
}


/* 1. 基本設定（PC向けに少し大きく設定） */
.more-btn {
  display: inline-block;
  padding: 15px 40px;      /* PC用にパディングを大きく */
  background-color: transparent;
  color: #ccb254;
  border: 2px solid #ccb254;
  border-radius: 30px;
  font-size: 1.1rem;       /* 文字も少し大きく */
  margin: 20px 0 60px;     /* 余白もPCに合わせてゆったりと */
  cursor: pointer;
  text-decoration: none;
}

/* 2. お店の詳細（アコーディオンの中身）上のボタンと離す */
.shop-info {
  margin-top: -30px;              /* ボタンとの間隔 */
  margin-bottom: 60px;           /* 下のお店との間隔 */
  color: #ccb254;
  line-height: 1.9;
  font-size: 1.4rem;
  padding: 0 20px;
}


/* スマホ用のサイズ調整 */
@media screen and (max-width: 768px) {
  .shop-info {
    font-size: 0.9rem;    /* スマホでは一回り小さく */
    line-height: 1.7;     /* 行間もスマホ用に少し調整 */
  }

  .more-btn {
    padding: 8px 20px;     /* スマホ用の小さなサイズ */
    font-size: 0.9rem;
    margin: 5px 0 60px;    /* スマホ用の間隔 */
  }
}

/* --- スラッシュ以降を絶対にバラバラにしない設定 --- */
.keep-together {
  display: inline-block; /* これで「/ ロミロミサロン和」をひとつの塊にします */
}

/* --- iPadの横向きまでしっかり「正しい位置で」改行させる --- */
.sp-only {
  display: none !important;
}

@media screen and (max-width: 1400px) {
  .sp-only {
    /* inline ではなく display: block にすることで、より強力に改行させます */
    display: block !important; 
  }
}


/* ４．Newsセクション */
.news-section {
    margin-top: 100px;
    text-align: center;
}

/* スマホ用の微調整もここにまとめて書いちゃいましょう */
@media screen and (max-width: 768px) {
    .shop-section, .news-section {
        margin-top: 100px;
    }
    .shop-list {
        font-size: 0.95rem;
        line-height: 2.5;
    }
}

/* --- インスタ埋め込みの調整（追加分） --- */

/* 1. PCで真ん中に寄せる */
.instagram-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    width: 100%;
}

/* 2. インスタの枠が横にはみ出さないようにする魔法 */
.instagram-wrapper iframe, 
.instagram-wrapper blockquote {
    width: 100% !important;
    min-width: auto !important;
    max-width: 500px !important; /* PCで大きくなりすぎないように */
    margin: 0 auto !important;
}

/* 3. スマホで右が切れるのを防ぐ */
@media screen and (max-width: 768px) {
    .instagram-wrapper {
        padding: 0 10px; /* 左右にほんの少し隙間を作る */
        box-sizing: border-box;
    }
    .instagram-wrapper blockquote {
        max-width: 100% !important;
    }
}

/* ボタンの共通サイズ・余白設定 */
.sns-btn {
    display: block;
    width: 80%;             /* PCでは画面幅の80% */
    max-width: 500px;       /* 600pxまで広がるように制限を大きくする */
    margin: 40px auto;      /* ボタンの上下の長さ */
    padding: 30px 40px;     /* パディングを増やしてボタンを大きくする */
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
    font-size: 1.4rem;      /* 文字サイズもPC用に大きく */
    font-weight: bold;
    border: 2px solid transparent;
    transition: all 0.3s;
}

/* LINE専用のスタイル（グリーン） */
.line-btn {
    background-color: #06c755; 
    color: #ffffff;
}

.line-btn:hover {
    opacity: 0.8;          /* 触れたら少し薄くする */
}

/* note専用のスタイル（ゴールドの縁取り） */
.note-btn {
    background-color: transparent;
    color: #ccb254;
    border: 2px solid #ccb254;
}

/* ホバー（マウスを乗せた時）の演出 */
.note-btn:hover {
    background-color: #285333!important; /* 少し明るい色に変わる */
    transform: translateY(-2px);
    opacity: 0.9;
}

@media screen and (max-width: 768px) {
    /* ...他のスマホ設定... */
    .sns-btn {
        width: 100%;           /* 👈 ここ！100%から80%くらいに絞るとスッキリします */
        max-width: 300px;     /* 👈 念のため、これ以上大きくならない上限も決めておくと安心 */
        font-size: 1.0rem !important; /* スマホでは読みやすいサイズに */
        padding: 16px 0px !important; /* スマホでは押しやすい程度の大きさに */
        
        /* 左右中央に寄せる（念のため再指定） */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- アクセス & お問い合わせ & News 共通設定 -

/* 1. セクション全体の真ん中寄せ */
.news-section, .access-section, .contact-section {
    margin-top: 150px;
    text-align: center; /* これで中の要素を真ん中に寄せる */
    width: 100%;
}

/* スマホ画面（幅768px以下）のときだけ適用するルール */
@media screen and (max-width: 768px) {
 .news-section, .access-section, .contact-section {
    margin-top: 60px;
   }
}

/* 2. 中の補足テキストだけを「白・真ん中」にする */
.news-section .section-text, 
.access-section .section-text, 
.contact-text {
    text-align: center !important;
    color: #ffffff !important;     /* ← ここを #ccb254 から #ffffff に変更 */
    margin-bottom: 20px !important;
    display: block !important;
    width: 100% !important;
    font-size: 1.5rem !important; /* ★ここにも書くと、より確実に大きくなります！ */
    font-weight: bold; /*少し太くすると見やすくなります */
}

/* スマホ画面（幅768px以下）のときだけ適用するルール */
@media screen and (max-width: 768px) {
    .news-section .section-text, 
    .access-section .section-text, 
    .contact-text {
        font-size: 0.9rem !important; /* スマホでちょうどいいサイズに強制上書き */
    }
}

/* 地図の見た目 */
.access-map {
    margin: 30px auto 0;
    width: 100%;
    max-width: 500px; /* PCでの幅をボタンと揃える */
    height: auto !important;
    border: 3px solid #ccb254;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* ★出し分け魔法（ここが重要！） */
.sp-only { display: none !important; } /* 最初はスマホ用を消す */
.pc-only { display: block !important; }

/* --- スマホ用の設定 --- */
@media screen and (max-width: 768px) {
    /* 地図の出し分けを逆転させる */
    .pc-only { display: none !important; }
    .sp-only { display: block !important; }

    .map-container {
        padding: 0 10px;
    }
    
    .contact-section {
        margin-bottom: 100px;
    }
}

/* 1. ヘッダー全体の枠組み（ロゴと三本線の親玉） */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  z-index: 9999; /* 何よりも上に！ */
  pointer-events: none;
}

/* 2. 固定ロゴ（JSの指示を待つ） */
.fixed-logo {
  opacity: 0; 
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.fixed-logo.is-show {
  opacity: 1;
  pointer-events: auto;
}

/* 3. ハンバーガーボタン（三本線そのもの） */
.hamburger {
  /* positionを absolute（絶対配置）に変えて、親のルールを無視させます */
  position: absolute !important; 
  top: 20px;   /* 上からの位置（ロゴの高さに合わせて調整してね） */
  right: 20px;  /* 右端からの距離 */
  
  pointer-events: auto;
  width: 30px;
  height: 24px;
  cursor: pointer;
  position: relative;
  z-index: 10001; /* メニュー背景よりもさらに上に */
}

/* 三本線の「線」を描く */
.hamburger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #ccb254; /* ゴールド */
  transition: all 0.4s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { bottom: 0; }

/* 4. メニューの中身（最初は画面の右に隠しておく） */
.nav-menu {
  position: fixed;
  top: 0;
  right: -100%; /* 👈 これで青い文字が右へ消えます */
  width: 100%;  /* スマホでは全画面、PCなら70%など調整可 */
  height: 100vh;
  background: rgba(64, 37, 26, 0.95); /* 商店会の茶色 */
  transition: all 0.4s;
  z-index: 10000;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ボタンを押したときに出てくるクラス（JS用） */
.nav-menu.is-active {
  right: 0;
}

/* メニュー内のリストのデザイン */
.nav-menu ul {
  list-style: none;
  text-align: center;
}
.nav-menu ul li {
  margin: 30px 0;
}
.nav-menu ul li a {
  color: #ccb254;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
}

/* style.css のどこでもいいので追加 */
html {
  scroll-behavior: smooth; /* 👈 スルッとなめらかに動くようになります */
  scroll-padding-top: 100px; /* 👈 ジャンプした時の「止まる位置」を100px下げます */
}

/* 1. 基本設定（まずはスマホ向け：しっかり丸く、幅広く） */
input[type="submit"], 
input[type="button"],
button {
    display: block !important;
    width: 95% !important; 
    max-width: 500px !important; 
    margin: 40px auto !important;
    padding: 16px 30px !important; 
    background-color: #2a5a3a !important;
    color: #ffffff !important;
    letter-spacing: 0.1em !important;
    border: none !important;
    border-radius: 40px !important; /* スマホはしっかり丸く */
    font-size: 1.0rem !important; 
    font-weight: bold !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* 2. PC向けの設定（画面幅が769px以上のとき） */
@media screen and (min-width: 769px) {
    input[type="submit"], 
    input[type="button"],
    button {
        width: 100% !important;      /* PCでは枠の中でしっかり幅をとる */
        max-width: 500px !important;  /* PCでの最大幅をさらに広げる */
        letter-spacing: 0.15em !important;
        border-radius: 30px !important; /* ★ここ！角を少しだけ丸くしてLINE風に */
        padding: 22px 40px !important; /* PCではさらに分厚くして存在感を出す */
        font-size: 1.3rem !important;  /* 文字もさらに一回り大きく */
    }
}
/* スマホ（画面幅768px以下）のときだけ適用 */
@media screen and (max-width: 768px) {
    /* ここに調整したい要素のクラス名やタグ名を入れてください */
    .custom-form-container { /* ←もし分かれば正しいクラス名に変えてください */
        margin-top: -50px !important; /* マイナスを入れると上に引き寄せられます */
    }
}
/* 1. 全デバイス共通の入力欄設定 */
input[type="text"],
input[type="email"],
textarea {
    width: 100% !important;
    padding: 12px !important;      /* 中の文字に余裕を作る */
    border: 1px solid #ccc !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    font-weight: normal !important;
}

/* 2. PC向け：文字サイズをしっかり大きく */
@media screen and (min-width: 769px) {
    input[type="text"],
    input[type="email"],
    textarea {
        font-size: 1.4rem !important; /* PCで読みやすい大きさに */
    }
    /* お問合せ内容欄をPCだけ広くする */
    textarea {
        height: 300px !important; /* PCなら200pxくらいあっても良いですね */
    }
}

/* 3. スマホ向け：「お問合せの内容」の高さだけ追加で広げる */
@media screen and (max-width: 768px) {
    textarea {
        height: 300px !important;  /* スマホでも150px確保すれば十分です */
    }
}