@charset "UTF-8";


/* ---- エントリーカード ---- */
.entrycard{
  width:90%; margin:20px auto;
  background:#fff; border-radius:16px;
  padding:10px; box-shadow:0 6px 20px rgba(0,0,0,.12);
  overflow:hidden;                 /* はみ出し保険（バッジ等） */
}
.entrycard_title{
  position:relative; background:#e60000; color:#fff;
  border-radius:10px; font-weight:800; font-size:20px;
  padding:10px 12px 10px 30px;    /* バッジ分の左余白 */
}
.entry-no{
  position:absolute; left:60px; top:0px;
  padding:8px 12px; background:#000; color:#fff; font-weight:800;
  border-radius:14px; outline:3px solid #fff; box-shadow:0 4px 8px rgba(0,0,0,.25);
  transform:none;                   /* モバイルは傾けない＝はみ出さない */
}
.entrycard_cap{
  margin-top:10px; padding:0 4px; line-height:1.6; font-size:16px;
  white-space:pre-wrap; overflow-wrap:anywhere;
	color: #000!important;
}
.entrycard_cap a {
  color: #000 !important;
  text-decoration: underline;
}

.entrycard_cap a:hover {
  opacity: 0.7;
}

/* 写真2枚並び（スマホは1列） */
.photo-row{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:10px; }
.photo-card{ margin:0; padding:10px; background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.photo-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:#fff; }

/* ---- ここからデスクトップ調整（768px以上） ---- */
@media (min-width:768px){
  /* 左飾りが太くなるので、コンテンツ側に“見えない左余白”を追加 */
  .container{
    /* 左の飾りの幅ぶんだけ押し出す。clampで端末幅に追従 */
    padding-left: clamp(120px, 14vw, 220px);
    padding-right: 16px;
  }
  #menubar{ padding-top:20px; }
  #menubar ul{ gap:18px; padding:10px 28px; }

  .entrycard{ padding:16px 16px 20px; border-radius:20px; width: 90%;}
  .entrycard_title{ font-size:25px; padding-left:140px; }
  .entry-no{
    left:-25px; top:-20px; outline-width:4px;
    transform:rotate(-2deg);          /* 机の上のステッカー感を復活 */
  }
  .photo-row{ grid-template-columns:1fr 1fr; gap:16px; }
}

/* shell はレイアウトを持たせず“ただの囲い”にする */
.shell{ display:block; }

/* コンテナはそのまま中央寄せでOK（前に渡した .container の定義を使う） */

/* entrycard / box_card は幅100%にしてはみ出しゼロ */
.entrycard,
.box_card{ width:100%; }

/* バッジがはみ出すのをモバイルで確実に防止 */
@media (max-width:768px){
  .entrycard,
  .box_card{ overflow:hidden; }
  .entrycard_title{ padding-left:70px; }
  .entry-no{
    left:0px; top:0px; transform:none; outline-width:1px;
    box-shadow:0 4px 8px rgba(0,0,0,.25);
  }
}

/* PDF iframe を完全レスポンシブに */
.pdf-frame{
  width:100%;             /* 横いっぱい */
  height:auto;
  aspect-ratio: 4 / 3;    /* 好みで 4/3, 16/9 など */
  border:0; display:block;
}

/* “青リンク祭り”を回避してトーン統一（必要なら色を調整） */
.box_card a{ color:#111; text-decoration:none; border-bottom:2px solid currentColor; }
.box_card a:hover{ opacity:.75; }

/* メニューバーは既存の pill CSS でOK。左CTACロゴは .left-deco を fixed のまま */


/* 確実に白背景を出す・重なり順の保険 */
.box_card,
.entrycard{
  background-color: #fff !important;
  position: relative;
  z-index: 1;
}

/* CTACの赤背景より上に来るように確保 */
.container{
  position: relative;
  z-index: 2;
}
.left-deco{
  z-index: 0;
}