/* =========================================================
  Penko Mama site - cleaned CSS (2026-02-03)
  ここから下だけ触ればOK、という構造に整理しました
========================================================= */

/* ---------- 基本 ---------- */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700,900");

body{
  color:#000;
  font-family:"游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif !important;
  letter-spacing:0.1em;
  line-height:1.7;
}

/* リンク */
a{ color:#000; text-decoration:underline; }
a:hover{ text-decoration:none; opacity:0.7; color:#c7243a; }

/* ---------- レイアウト（幅） ---------- */
#container .inner,
#content{
  width:1200px;
  margin:0 auto;
}
#content{ margin:0 auto 100px; }

/* ---------- 余計な表示を非表示（タイトル/パンくず/SNS/右上の箱） ---------- */
#main h1.contTtl,
h1.contTtl,
#main .bread,
#main .pankuzu,
#main .sns-box,
.bread,
.pankuzu,
.sns-box,
#side #leadTxt,
#side .sideTtl{
  display:none !important;
}
/* タイトル非表示で空く余白の保険 */
#main .contTtl + *{ margin-top:0 !important; }

/* ---------- トップの白い帯：ロゴ＆リードを縦並び・中央に ---------- */
.mainImgIn{ margin-bottom:25px !important; } /* 表紙っぽく余白を締める */

.mainImgIn .inner{
  display:block !important;              /* tableをやめる */
  border-bottom:1px solid #ddd;
  width:100%;
  padding:20px 0 20px !important;
}

/* ロゴ領域 */
.mainImgIn .inner #mainImg{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  margin:0 auto !important;
}
.mainImgIn .inner #mainImg img{
  display:inline-block !important;
  width:100% !important;
  max-width:900px !important;            /* ロゴサイズ調整はここ */
  height:auto !important;
}

/* ロゴ横/下の文章（leadTxt） */
.mainImgIn .inner #leadTxt{
  display:block !important;
  width:100% !important;
  padding-left:0 !important;
  text-align:center !important;
  margin-top:10px !important;
  font-weight:normal;
  font-size:1.05em;
  line-height:1.5;
}

/* ---------- トップコメント（見た目） ---------- */
.top-comment{
  max-width:900px;
  margin: 20px auto 10px;
  padding:12px 16px;
  background:#fff7f7;
  border-left:5px solid #c7243a;
  font-size:16px;
  line-height:1.7;
  color:#333;
}

/* A案：左右2カラム（はっきり） */
@media (min-width: 901px){
  .top-comment{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:28px;
    align-items:start;
  }
  .top-comment > .col{ margin:0; }
}
@media (max-width: 1200px){
  .top-comment{ display:block; font-size:16px; margin:12px 10px; }
}

/* ---------- 祝バナー（ロゴ下・お知らせ上に置くHTML用） ---------- */
.top-celebrate{
  max-width:1200px;
  margin: 10px auto 20px;
  padding:10px 14px;
  text-align:center;
  font-size:16px;
  font-weight:700;
  color:#c7243a;
  background:#fff7f7;
  border:1px solid #e6c7c9;
  border-radius:8px;
}
@media (max-width: 1200px){
  .top-celebrate{ font-size:15px; margin:8px 10px 16px; }
}

/* ---------- お知らせ（#news）カード化＋文字大きめ＋行間詰め ---------- */
#news{
  background:#fff !important;
  border:1px solid #e6c7c9 !important;
  border-radius:10px !important;
  padding:14px 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  margin-top:10px !important;
}
#news .contTtl{
  color:#c7243a;
  border-bottom:3px solid #c7243a !important;
  padding-bottom:10px !important;
  margin-bottom:10px !important;
}

/* スクロール枠 */
#news ul{
  max-height:255px;
  height:auto;
  overflow:auto;               /* scroll固定より自然 */
  margin-bottom:35px !important; /* 表紙っぽく余白を締める */
}

/* お知らせ本文：少し大きく＆行間詰める */
#news ul,
#news ul li{
  font-size:16px !important;
  line-height:1.25 !important;
}

/* 日付 */
#news ul .day{
  font-size:14px !important;
  line-height:1.2 !important;
}

/* 1行あたりの上下余白を詰める */
#news ul li{
  padding:10px 20px 10px 125px !important;
  position:relative;
  border-bottom:1px dotted #000;
}
#news ul .day{
  display:block;
  width:108px;
  position:absolute;
  left:22px;
  font-family:'Roboto', sans-serif;
}

/* ---------- main / side 基本 ---------- */
#main{
  max-width:1200px;
  margin:0 auto;
  float:none;
}
#main .profile{ font-weight:700; }

#side{
  width:260px;
  float:right;
}

/* ---------- 太字を確実に ---------- */
#main strong,
#main b{ font-weight:700 !important; }
.bold{ font-weight:700 !important; }
strong{ font-weight:700; }

/* ---------- リストのマーカー（必要分だけ） ---------- */
.box ul, .box1 ul, .box2 ul, .box3 ul,
.articleBox ul, .entry_box ul, .entryBox ul,
.article-box ul, .article ul, .article_box ul{
  list-style-type:disc;
}
.box ol, .box1 ol, .box2 ol, .box3 ol,
.articleBox ol, .entry_box ol, .entryBox ol,
.article-box ol, .article ol, .article_box ol{
  list-style-type:decimal;
}
.box ul, .box1 ul, .box2 ul, .box3 ul,
.articleBox ul, .entry_box ul, .entryBox ul,
.article-box ul, .article ul, .article_box ul,
.box ol, .box1 ol, .box2 ol, .box3 ol,
.articleBox ol, .entry_box ol, .entryBox ol,
.article-box ol, .article ol, .article_box ol{
  margin-left:18px;
}

/* ---------- 画像のはみ出し対策 ---------- */
#side-area img,
#foot-area img{
  max-width:100%;
  height:auto;
}

/* =========================
   iPad/タブレット 復旧パッチ（最後に置く）
   対象：幅 901px〜1200px（iPad縦/横を含む）
========================= */
@media (min-width: 901px) and (max-width: 1200px){

  /* 横はみ出し防止 */
  html, body{
    overflow-x: hidden !important;
  }

  /* 固定幅1200pxを解除して画面に合わせる */
  #container .inner,
  #content{
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* メイン/サイド：iPadでは縦並び（見やすい） */
  #main, #side{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 表紙ロゴ：iPadでほどよいサイズに */
  .mainImgIn .inner #mainImg img{
    max-width: 760px !important; /* 好みで 700〜900 */
  }

  /* トップコメント：iPadは1段に戻す（2段だと窮屈になりがち） */
  .top-comment{
    display: block !important;
  }

  /* お知らせ：カードの余白を少しだけ詰める */
  #news{
    padding: 12px 14px !important;
  }
}