/* 2026-11-06 3サイト（tmn-cycle・tmn-kega・tmn-golf）の共通部品の見た目をそろえる。3サイトとも同じ内容。
   各ページで最後に読み込み、既存の CSS は変えない。戻すときは各ページの link 1 行を消す。
   商品ごとの演出（上部の画像・golf の金色の補償カード・目次）と文字の段（h1 など）は変えない。 */

/* U1 PC・タブレット：メニューの「申込画面」を赤いボタンに（どこからでも申し込める） */
@media (min-width:768px){
  .main-nav a[href^="https://ezoo.jp/"]{background:#b91520;color:#fff;font-weight:700;border-radius:8px}
  .main-nav a[href^="https://ezoo.jp/"]::after{display:none}
  .main-nav a[href^="https://ezoo.jp/"]:hover,.main-nav a[href^="https://ezoo.jp/"]:focus{background:#9c111b;color:#fff}
  .main-nav a[href^="https://ezoo.jp/"]:focus-visible{outline:3px solid #1466b8;outline-offset:3px}
  .main-nav li:has(> a[href^="https://ezoo.jp/"])::after{display:none}
}

/* U2 PC・タブレットのメニュー帯（golf と同じ：上下 10px、6 項目を 1 行）。ロゴの大きさは各サイトのまま（golf も 11/6 午後に元の大きさへ戻した）。
   メニューの文字は 1200px 以上で 26px、それ未満は 20px。スクロール中にメニュー帯だけ残る動きは各サイトの main.js のまま。 */
@media (min-width:768px){
  .site-header .main-nav ul{display:flex;flex-wrap:nowrap;grid-template-columns:none;width:auto;padding-block:10px}
  .site-header .main-nav a{font-size:20px;line-height:1.2}
  .site-header .main-nav li:nth-child(3):not(:last-child)::after{content:none}
  html{scroll-padding-top:var(--fixed-header,88px)}
}
@media (min-width:768px) and (max-width:1199.98px){
  .site-header .main-nav ul{--nav-gap:clamp(16px,calc(10vw - 56px),40px);column-gap:var(--nav-gap);padding-inline:16px}
  .site-header .main-nav li + li::before,.site-header .main-nav li:first-child::before{left:calc(var(--nav-gap) / -2)}
  .site-header .main-nav li:last-child::after{right:calc(var(--nav-gap) / -2)}
}
@media (min-width:1200px){.site-header .main-nav a{font-size:26px}}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){html{scroll-padding-top:0}}

/* U3 本文の行間：商品ページ（申込ボタンのある上部画像を持つページ）の PC は 1.8。方針系ページ（.hero2 に申込ボタンなし）は変えない */
@media (min-width:768px){main:has(> .hero) p,main:has(> .hero2 a.btn-primary) p{line-height:1.8}}

/* U4 フッターのリンク：押しやすいよう上下に 10px */
@media (min-width:768px){footer .footer-links a{padding-block:10px}}

/* U5 お問い合わせフォーム：欄は枠つきの白いカード、入力欄は角丸 8px、送信は角丸 12px、確認コードの送信は緑 */
#generalContactForm .form-fieldset{padding:20px 24px 24px;border:1px solid #cfdccf;border-radius:12px;background:#fff}
#generalContactForm .form-fieldset legend,#generalContactForm legend{width:auto;margin:0;padding:0 8px;border:0;color:#004728;font-weight:700}
#generalContactForm input[type="text"],#generalContactForm input[type="email"],#generalContactForm textarea{border:1px solid #b9c7b9;border-radius:8px;background-color:#f8fbf8;color:#333}
#generalContactForm input:not([type="hidden"]):focus,#generalContactForm textarea:focus{background:#fff;border-color:#117713}
#generalContactForm .btn-submit{border-radius:12px}
#generalContactForm .otp-ui .otp-primary{background:#117713;border-color:#117713;color:#fff}
#generalContactForm .otp-ui .otp-primary:hover:not(:disabled){background:#0c5d0f;border-color:#0c5d0f}
@media (max-width:767px){#generalContactForm .form-fieldset{padding:16px 16px 20px}}

/* U6 送信完了・送信失敗の「トップへ戻る」は緑の塗り（「フォームへ戻る」は枠線のまま） */
body:is(#index,body) main a.btn-return[href="index.html"],body:is(#index,body) main a.btn-primary[href="./"]{align-items:center;justify-content:center;min-height:56px;padding:14px 32px;border:0;border-radius:12px;background:linear-gradient(135deg,#1a9e1d 0%,#117713 100%);color:#fff;font-size:clamp(18px,16px + .5vw,21px);font-weight:700;line-height:1.4;text-decoration:none;box-shadow:0 4px 14px rgba(17,119,19,.3);transform:none}
body:is(#index,body) main a.btn-return[href="index.html"]:hover,body:is(#index,body) main a.btn-return[href="index.html"]:focus-visible,body:is(#index,body) main a.btn-primary[href="./"]:hover,body:is(#index,body) main a.btn-primary[href="./"]:focus-visible{background:linear-gradient(135deg,#117713 0%,#0c5d0f 100%);color:#fff}

/* U7 支払方法：支払方法ごとに白いカード、見出しは青 */
main .payment-item{background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
main .payment-item h3{color:#0057a4}