/* ============================================================
   iPhone（iOS Safari / iOS Chrome）向けの調整
   すべての css のあとに読み込む。このファイルを外せば元に戻る
   ============================================================ */

/* ---------- 1. 横向きのノッチ・角丸に文字がかからないようにする ----------
   viewport-fit=cover にするとページがノッチの下まで広がるので、
   左右の余白は「通常の余白」と「ノッチの幅」の大きいほうを使う。
   縦向きやノッチのない端末では env() が 0 なので、これまでと同じ見た目になる */
@supports (padding-left: max(0px, env(safe-area-inset-left))){
  section,
  .hero,
  .page-head,
  .page-body,
  .ev-hero,
  .ev-main,
  .pj-sec,
  .pj-hero-in,
  .pj-philosophy,
  .pj-next,
  .pj-back{
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
}

/* ---------- 9. タップ領域を 44×44px 以上にする ----------
   タッチ端末だけに効かせる（マウスの PC は変わらない）。
   文字や下線の位置は動かさず、見えない当たり判定だけを上下に広げる */
@media (pointer:coarse){
  .nav .brand::before,
  .event .more::before,
  .event h3 a::before,
  footer a::before{
    content:"";position:absolute;left:0;right:0;
    top:50%;height:48px;transform:translateY(-50%);   /* 下線などの分を見込んで 44px より少し広く */
  }
  .event .more,
  .event h3 a,
  footer a{position:relative}
  footer a::before{left:-8px;right:-8px}

  /* お問い合わせの種別ボタン：上下の余白を足して 44px に（見た目が 3px 高くなる） */
  .chip span{padding-top:12.5px;padding-bottom:12.5px}
}

/* ---------- A. スマホのメニュー ----------
   ボタンとメニュー本体は js/site.js が作る（JS が動かなければ何も出ない）。
   ナビは backdrop-filter を持ち、中に固定要素を置くとナビの枠に閉じ込められるので、
   メニュー本体は body 直下に置く */
.nav-toggle,.nav-menu{display:none}

@media (max-width:720px){
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;margin:-10px -10px -10px 0;padding:0;
    background:transparent;border:0;border-radius:0;cursor:pointer;
    -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
    color:var(--ink);
  }
  .nav-toggle span{
    display:block;width:22px;height:2px;background:currentColor;
    transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s;
  }
  .nav-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}

  /* 開いているとき：ナビを黒地に、線を × に */
  .nav.is-open{background:var(--ink);border-bottom-color:rgba(255,255,255,.12)}
  .nav.is-open .logo{filter:none}
  .nav.is-open .nav-toggle{color:#fff}
  .nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.is-open .nav-toggle span:nth-child(2){opacity:0}
  .nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .nav-menu{
    display:block;position:fixed;inset:0;z-index:49;
    background:var(--ink);color:#fff;
    padding:calc(76px + env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s;
  }
  .nav-menu.is-open{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s;
  }
  .nav-menu ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
  .nav-menu li{border-bottom:1px solid rgba(255,255,255,.14)}
  .nav-menu a{
    display:flex;align-items:center;justify-content:space-between;
    min-height:60px;padding:14px 2px;
    font-family:var(--disp);font-weight:900;font-size:19px;letter-spacing:.04em;
    color:#fff;-webkit-tap-highlight-color:transparent;
  }
  .nav-menu a::after{content:"→";font-size:15px;color:var(--accent-soft)}
  .nav-menu a:active{color:var(--accent-soft)}
}
@media (prefers-reduced-motion:reduce){
  .nav-toggle span,.nav-menu,.nav-menu.is-open{transition:none}
}

/* ---------- B. 横向きのスマホでナビを低くする ----------
   高さの低い横向き画面では、6項目が2行に折り返してナビが 89px になり、
   画面の2割以上を覆っていた。折り返しを止め、間隔と上下の余白を詰める。
   PC の画面は高さが 500px を超えるので対象外 */
@media (orientation:landscape) and (max-height:500px) and (min-width:721px){
  .nav{
    padding-top:max(9px,env(safe-area-inset-top));
    padding-bottom:9px;
    font-size:13px;
  }
  .nav ul{gap:18px}
  .nav a{white-space:nowrap}
  .nav .logo{height:22px}
}
/* 低くしたぶんリンクが 21px になるので、タッチ端末では当たり判定を広げる。
   ::after は下線に使っているので ::before を使う。左右は項目の間隔（18px）の半分まで */
@media (orientation:landscape) and (max-height:500px) and (min-width:721px) and (pointer:coarse){
  .nav ul a::before{
    content:"";position:absolute;left:-9px;right:-9px;
    top:50%;height:44px;transform:translateY(-50%);
  }
}