@charset "UTF-8";

/* ==========================================================================
   itte-narrow.css ／ サイト共通CSS・スマホ版（ウインドウ幅 480px 以下）

   やっていることは「横並びと固定幅を、縦積みと画面いっぱいに置き換える」だけ。
   色と壁紙はHTML側の配色ブロックのものがそのまま使われるので、
   画面が狭くなってもページごとの配色はそのまま保たれます。
   ここに色を書き足すと、スマホのときだけ色が変わってしまいます。

   確認：PCのブラウザでウインドウを幅480px以下まで細くすれば、この表示になります。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 版面（画面幅に従わせる）
   スマホでは紙面パネルを画面いっぱいに広げ、角丸と影を消しています。
   小さい画面で余白に囲まれた紙が浮くと、内容の幅が削られてしまうためです。
   壁紙を見せたい場合は .page の padding を増やし、border-radius を戻します。
   -------------------------------------------------------------------------- */
body{
  font-size: 16px;   /* 16px未満にしないこと。
                        iPhoneで入力欄などが勝手に拡大される原因になります */
  line-height: 1.85;
  min-width: 0;      /* PC版の min-width を打ち消す */
}

.page{
  width: auto;               /* 版面の固定幅を解除 */
  max-width: 100%;
  padding: 14px 14px 40px;
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
}


/* --------------------------------------------------------------------------
   2. 見出し（四角枠の中身）
   PC版の45pxのままだと、幅360pxの機種では文字がはみ出します。
   大きくするときは、いちばん狭い機種（360px前後）で必ず確認してください。
   -------------------------------------------------------------------------- */
.head{
  padding: 18px 14px 20px;
}
.head::before{
  inset: 5px;        /* 内側の細い線。狭い画面なので少し詰めています */
}
.site-title{
  font-size: 17px;
}
.page-title{
  margin-top: 12px;
  font-size: 27px;
}
.page-sub{           /* 「その２」などの小見出し */
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: .2em;
  text-indent: .2em;
}


/* --------------------------------------------------------------------------
   3. 解説ボックス
   幅を指定していないので、自動的に画面いっぱいに広がります。
   -------------------------------------------------------------------------- */
.note,
.next{
  max-width: none;   /* PC版の --content-width を打ち消す */
  padding: 16px 18px;
  box-sizing: border-box;
  margin-bottom: 18px;
}

.note .inner{
  /* itte-base.css では inline-block（文字数ぶんの幅）ですが、
     狭い画面ではそれだと1行の文字数が減るので block に戻しています。 */
  display: block;
  text-align: left;
}


/* --------------------------------------------------------------------------
   4. 写真を縦積みにする
   -------------------------------------------------------------------------- */
.photos{
  max-width: none;
  flex-direction: column;   /* ←横並びを縦並びに切り替える1行 */
  align-items: center;
  margin-bottom: 18px;
}
.photos img{
  width: 100%;
}


/* --------------------------------------------------------------------------
   5. 「写真＋解説」の横並びを崩す
   -------------------------------------------------------------------------- */
.split{
  max-width: none;
  display: block;           /* ←これだけで写真の下に解説が回り込みます */
  margin-bottom: 18px;
}
.split .photo{
  margin-bottom: var(--gap);
}
.split .photo img{
  width: 100%;
}


/* --------------------------------------------------------------------------
   5.5 節見出しと表（あとから追加した節）
   表は縦積みに崩せないので、画面をはみ出す分は横スクロールで見てもらいます。
   -------------------------------------------------------------------------- */
.section-title{
  margin: 4px auto 12px;
  font-size: 18px;
}
.table-wrap{
  margin: 0 auto 18px;
}
.table-wrap table{
  font-size: 14px;
}
.table-wrap th,
.table-wrap td{
  padding: .45em .55em;
}


/* --------------------------------------------------------------------------
   6. ボタン類
   指で押すので、PC版より広めの当たり判定にしています。
   （小さいと隣を誤タップしやすくなります）
   -------------------------------------------------------------------------- */
.pager a,
.pager strong{
  font-size: 17px;
  padding: .45em 1.2em;
}
.nextlink a{
  font-size: 17px;
  padding: .7em 2em;
}

.meta,
.links{
  font-size: 14.5px;
}
.links a{
  padding: .6em 1.3em;    /* 指で押しやすい大きさを確保 */
}

/* --------------------------------------------------------------------------
   7.追加
   -------------------------------------------------------------------------- */
.notice{
  padding: 12px 14px;
  box-sizing: border-box;
  font-size: 14px;
}

.nextlink a:hover{
  transform: none;
  box-shadow: 0 2px 10px var(--shadow-color);
}

.sublink a{
  padding: .65em 1.5em;
  font-size: 16px;
}