@charset "utf-8";
/* CSS Document */
:root{
  /* ステージ幅（PC時に中央に固定表示する幅） */
  --stage-w: 640px; /* 600〜700の中で決める。好みで 600/640/680/700 に */
  --pad: 16px;
  --line: #eee;
  --ink: #111;
  --bg: #fafafa;
}

/* 画面全体の背景（PCで左右に出したい雰囲気用） */
html, body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
}

/* アプリフレーム：左右レール + 中央ステージ */
.app-frame{
  display: grid;
  grid-template-columns: 1fr minmax(320px, var(--stage-w)) 1fr;
  min-height: 100dvh;
}

/* 中央：スマホ画面 */
.stage{
  background: #fff;
  min-height: 100%;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  /* スマホの丸みっぽさを出したければ：
  border-radius: 16px; overflow: hidden;
  */
}

/* ページ内の余白ヘルパー */
.section{ padding: 18px var(--pad); }
.card{ border:1px solid var(--line); border-radius:14px; padding:12px; background:#fff; }
.btn{ display:flex; justify-content:center; align-items:center;
      padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:#fff; font-weight:700; }
.btn-primary{ background:#111; color:#fff; border-color:#111; }
.btn-block{ width:100%; }

/* 左右レール */
.rail{
  padding: 20px;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: auto;
  color:#444;
}
.rail .menu{
  display: grid;
  gap: 10px;
}
.rail .menu .item{
  padding: 10px 12px;
  border:1.5px solid var(--gold);   /* ゴールド枠 */
  border-radius: 10px;
  background:#fff;
  font-weight:600;
  color: var(--gold-dark);          /* テキストもゴールド系 */
  text-align:center;
  transition: all .2s ease;
  cursor:pointer;
}
.rail .menu .item:hover{
  background: var(--gold);
  color:#fff;
  box-shadow: 0 4px 12px rgba(200,167,90,.35);
}
.rail .menu .item a{
  color:inherit; 
  text-decoration:none;
  display:block;
}
/* SP時は左右レールを非表示、ステージを全幅に */
@media (max-width: 1023px){
  .app-frame{
    display: block;
  }
  .rail{ display:none; }
  .stage{
    width: 100%;
    border-left: none;
    border-right: none;
  }
}

/* iOSセーフエリア */
.stage{
  padding-bottom: calc(env(safe-area-inset-bottom));
}

/* ===== 本日出勤 横スライド ===== */
.today-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 var(--pad) 8px;
}
.today-head h2{ margin:0; font-size:18px; }

.slider-nav{ display:flex; gap:8px; }
.nav-btn{ width:36px; height:36px; border-radius:10px; padding:0; }

.today-scroll{
  display:grid; grid-auto-flow:column; grid-auto-columns: 48%;
  gap:12px; overflow-x:auto; padding: 8px var(--pad) 4px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
@media (min-width:480px){ .today-scroll{ grid-auto-columns: 38%; } }
@media (min-width:768px){ .today-scroll{ grid-auto-columns: 200px; } }

.today-scroll::-webkit-scrollbar{ height:8px; }
.today-scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius:8px; }

.t-card{
  display:block; scroll-snap-align:start; background:#fff; border:1px solid var(--line);
  border-radius:16px; overflow:hidden; text-decoration:none; color:inherit;
  box-shadow: var(--shadow-1);
}
.t-thumb{ width:100%; aspect-ratio: 4/5; background-size:cover; background-position:center; }
.t-meta{ padding:10px; text-align:center; }
.t-name{ font-weight:700; font-size:14px; line-height:1.3; }
.t-time{ font-size:12px; color: var(--txt-2); margin-top:4px; }


/* 左バナー（img版） */
.rail.rail-banner { padding:0; }
.rail.rail-banner img{
  display:block;
  width:100%;
  height:100dvh;     /* 画面いっぱいの縦 */
  object-fit:cover;  /* いい感じにトリミング */
  position:sticky; top:0;
  border-radius:0;
}

/* 右メニュー（そのまま） */
.rail.rail-nav{ padding:20px; }
.rail-menu{ display:grid; gap:10px; }
.rail-menu a{
  display:block; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:inherit; text-decoration:none; font-weight:700;
}
.rail-menu a:hover{ box-shadow:0 1px 12px rgba(0,0,0,.06); }

/* モバイルは高さを小さく、角丸でカード風 */
@media (max-width:1023.98px){
  .rail.rail-banner img{ height:220px; border-radius:12px; margin:10px; position:static; }
  .rail.rail-nav{ padding:10px; }
}

/* ===== Right Rail : center menu + bottom SNS + optional bg ===== */
.rail.rail-nav{
  position: relative;
  padding: 0;
  min-height: 100dvh;
  /* 背景画像（任意） */
  background-image: var(--rail-nav-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rail-nav::before{
  /* 背景画像の上にうっすら白グラデで可読性UP（必要なければ透明に） */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.92));
  pointer-events:none;
}
.rail-nav-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; justify-content:center; align-items:stretch;
  gap:16px;
  padding: 24px 18px;
  min-height: 100dvh;         /* 垂直中央 */
  box-sizing: border-box;
}

.rail-menu{
  display:grid; gap:10px;
  max-width: 420px; width: 100%;
  margin: 0 auto;              /* 水平センター */
}
.rail-menu a{
  display:block; text-align:center;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff; color:#1b2333; text-decoration:none; font-weight:800;
  transition: box-shadow .15s ease, transform .05s ease;
}
.rail-menu a:hover{ box-shadow:0 1px 12px rgba(0,0,0,.08); }
.rail-menu a:active{ transform: translateY(1px); }

/* 最下部SNS */
.rail-sns{
  display:flex; justify-content:center; gap:14px;
  margin-top: auto;            /* 一番下へ */
}
.rail-sns .sns{
  width:38px; height:38px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:#fff; color:#111;
  text-decoration:none; transition: transform .05s ease, box-shadow .15s ease, color .15s ease;
}
.rail-sns .sns:hover{ box-shadow:0 2px 10px rgba(0,0,0,.08); }
.rail-sns .sns:active{ transform: translateY(1px); }

/* モバイル/タブレットは従来の縦流し（最小限） */
@media (max-width: 1023.98px){
  .rail.rail-nav{ min-height:auto; background-image:none; }
  .rail-nav::before{ display:none; }
  .rail-nav-inner{ min-height: auto; padding: 10px; }
  .rail-menu{ max-width:none; }
  .rail-sns{ margin-top: 4px; }
}

/* ===== Right Rail : center menu + bottom SNS + optional bg ===== */
.rail.rail-nav{
  position: relative;
  padding: 0;
  min-height: 100dvh;
  /* 背景画像（任意） */
  background-image: var(--rail-nav-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rail-nav::before{
  /* 背景画像の上にうっすら白グラデで可読性UP（必要なければ透明に） */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.100), rgba(255,255,255,.100));
  pointer-events:none;
}
.rail-nav-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; justify-content:center; align-items:stretch;
  gap:16px;
  padding: 24px 18px;
  min-height: 100dvh;         /* 垂直中央 */
  box-sizing: border-box;
}

.rail-menu{
  display:grid; gap:10px;
  max-width: 420px; width: 100%;
  margin: 0 auto;              /* 水平センター */
}
.rail-menu a{
  display:block; text-align:center;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff; color:#1b2333; text-decoration:none; font-weight:800;
  transition: box-shadow .15s ease, transform .05s ease;
}
.rail-menu a:hover{ box-shadow:0 1px 12px rgba(0,0,0,.08); }
.rail-menu a:active{ transform: translateY(1px); }

/* 最下部SNS */
.rail-sns{
  display:flex; justify-content:center; gap:14px;
  margin-top: auto;            /* 一番下へ */
}
.rail-sns .sns{
  width:38px; height:38px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:#fff; color:#111;
  text-decoration:none; transition: transform .05s ease, box-shadow .15s ease, color .15s ease;
}
.rail-sns .sns:hover{ box-shadow:0 2px 10px rgba(0,0,0,.08); }
.rail-sns .sns:active{ transform: translateY(1px); }

/* モバイル/タブレットは従来の縦流し（最小限） */
@media (max-width: 1023.98px){
  .rail.rail-nav{ min-height:auto; background-image:none; }
  .rail-nav::before{ display:none; }
  .rail-nav-inner{ min-height: auto; padding: 10px; }
  .rail-menu{ max-width:none; }
  .rail-sns{ margin-top: 4px; }
}

/* 右レール：背景固定 */
.rail.rail-nav{
  position: sticky;      /* ビューポートに貼り付け */
  top: 0;
  height: 100dvh;        /* 常に画面いっぱい */
  padding: 0;
  background-image: var(--rail-nav-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;  /* ← 背景を固定 */
  overflow: hidden;      /* 背景は固定、中身はinnerをスクロール */
}
.rail-nav-inner{
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  gap: 16px;
  padding: 24px 18px;
  overflow: auto;        /* ← 中身だけ縦スクロール可能に */
}

/* メニューとSNS（任意：中央揃え＋最下部） */
.rail-menu{ display:grid; gap:10px; max-width:420px; width:100%; margin:0 auto; }
.rail-menu a{
  display:block; text-align:center; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px; background:#fff; font-weight:800; text-decoration:none; color:#1b2333;
}
.rail-sns{ margin-top:auto; display:flex; justify-content:center; gap:14px; }

input, textarea, select { box-sizing:border-box; max-width:100%; }