/* ============================
   カラー設計（共通）
   ============================ */
:root{
  --accent: #0f6ab8;
  --paper:  #faf7f2;
  --ink:    #0b2a3a;
  --bd:     rgba(0,0,0,.12);
  --shadow:   0 2px 10px rgba(0,0,0,.10);
  --shadow-h: 0 8px 22px rgba(0,0,0,.16);
}


/* =========================================
   JP Entrance HERO
   ========================================= */

/* PC（幅 961px 以上） */
.hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);

  /* 少し横長にして縦を圧縮 */
  aspect-ratio: 16 / 7.8;

  background:
    url("https://chibanoinkyo.com/wp-content/uploads/2025/11/HERO_PC.webp")
    no-repeat center 38% / cover;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color:#fff;
}

.hero .inner{
  position: relative;
  z-index: 2;
  max-width: 90%;
  transform: translateY(-10%); /* 少し上へ */
}

.hero h1{
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  line-height: 1.2;
  margin: 0 0 .45em;
  text-shadow: 0 2px 6px rgba(0,0,0,.40);
}

.hero .inner > h1 + p{
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  line-height: 1.55;
  margin:.35em 0 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* Tablet（〜960px） */
@media (max-width: 960px){
  .hero{
    aspect-ratio: 3 / 3.3;
    background:
      url("https://chibanoinkyo.com/wp-content/uploads/2025/11/HERO_TB.webp")
      no-repeat center 35% / cover;
  }
  .hero h1{
    font-size: clamp(2.2rem, 5vw, 3.3rem);
  }
  .hero .inner{
    transform: translateY(-8%);
  }
}

/* Smartphone（〜600px） */
@media (max-width: 600px){
  .hero{
    aspect-ratio: 4 / 5;
    background:
      url("https://chibanoinkyo.com/wp-content/uploads/2025/11/HERO_SP.webp")
      no-repeat center 35% / cover;
  }
  .hero h1{
    font-size: clamp(1.9rem, 6vw, 2.6rem);
  }
  .hero .inner{
    transform: translateY(-6%);
  }
  /* クレジットを安全に少しだけ上へ */
  .hero-credit{
    bottom: 12%;
  }
}

/* WordPress Admin Bar Fix */
.admin-bar .hero{
  transform: translateZ(0);
}

/* ---- Hero byline ---- */
.byline-link{
  color:#fff !important;
  text-decoration:none;
  font-style:italic;
  font-weight:700;
  letter-spacing:.02em;
}
.byline-link:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
.hero-byline{
  margin-top: 1.4rem;
  text-align: center;
  line-height: 1.8;
}
.byline-link{
  font-size:1.6rem;
  letter-spacing:0.05em;
  display:inline-block;
}

/* ===== Hero credit overlay (JP) ===== */
.hero-credit{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 7%;
  width: min(92%, 560px);
  text-align: center;

  font-family: "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);

  color: #f3eee3;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  z-index: 3;
  pointer-events: none;
}

/* SP（〜599px）は少し上へ */
@media (max-width: 599px){
  .hero-credit{
    bottom: 14%;
    font-size: clamp(0.8rem, 2.3vw, 0.95rem);
  }
}

/* TB（600〜959px）は少し上へ */
@media (max-width: 959px) and (min-width: 600px){
  .hero-credit{
    bottom: 9%;
  }
}

/* =========================================
   ① おすすめ／最新（明色カード2カラム）
   ========================================= */
.feature-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;         /* 左右2枚 */
  gap:28px;
  width:min(1100px, 90%);
  margin:36px auto 56px;
  align-items:stretch;                    /* 高さを揃える */
}

.feature-card{
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex;                           /* タイトル／本文／リストを縦並びに */
  flex-direction:column;
}

.feature-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-h);
  border-color: rgba(0,0,0,.18);
}

.feature-card h2{
  margin:0 0 .7em;
  font-size: 1.15rem;
  line-height:1.35;
  position: relative;
  padding-left: 12px;
}

.feature-card h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.18em;
  bottom:.18em;
  width:4px;
  border-radius:4px;
  background: var(--accent);
}

/* ▼ ここからリスト部分 ----------------------------------- */

/* UL 自体をカードの「伸びる部分」にする */
.feature-card .feature-list{
  flex:1;                                /* カードの余白をここに持たせる */
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
}

.feature-card .feature-list li{
  margin:.60em 0;
  padding-left:1.05em;
  position:relative;
}

/* 通常の黒丸（アクセント色の丸） */
.feature-card .feature-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.58em;
  width:.45em;
  height:.45em;
  border-radius:50%;
  background: color-mix(in srgb, var(--accent) 85%, white);
}

.feature-card .feature-list a{
  color: var(--accent);
  text-decoration:none;
  font-weight:600;
}

.feature-card .feature-list a:hover{
  text-decoration: underline;
}

/* 曲名とプレイボタンの間隔を少し広げる */
.feature-card .inline-preview{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: .55rem;
}

/* ▶Play ボタン */
.playbtn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  transition: .2s;
}
.playbtn:hover{
  background:var(--accent);
  color:#fff;
}
.playbtn[aria-pressed="true"]{
  background:#f3f6f9;
}

/* 日付 */
.feature-card .feature-list .pubdate{
  display:block;
  font-size:.85rem;
  color:#666;
  margin-top:.2em;
}

/* ▼ 一番下のリンク行を “カードの下端” に揃える */
.feature-card .feature-list li.player-index-link,
.feature-card .feature-list li.blog-top-link{
  list-style:none;
  padding-left:0;
  margin-top:auto;            /* ← これでカードの下へ押し下げる */
  padding-top:1rem;
  text-align:right;
}

/* プレイヤー／ブログリンクの見た目 */
.feature-card .feature-list li.player-index-link a,
.feature-card .feature-list li.blog-top-link a{
  font-size:1.02rem;
  font-weight:700;
  color:var(--accent);
  text-decoration:none;
}
.feature-card .feature-list li.player-index-link a:hover,
.feature-card .feature-list li.blog-top-link a:hover{
  text-decoration:underline;
}

/* =========================================
   ② 下段カード（全体クリック）
   ========================================= */
.card-grid{
  --paper: #fff;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
  width: min(1100px, 90%);
  margin: 2.2rem auto 72px;
}
@media (max-width:1024px){
  .card-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .card-grid{ grid-template-columns:1fr; }
}

.card-link{
  display:flex;
  flex-direction:column;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 20px 22px;
  height:100%;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-link:hover,
.card-link:focus-visible{
  transform: translateY(-3px);
  box-shadow: var(--shadow-h);
  border-color: rgba(0,0,0,.18);
  outline: none;
}
.card-link h2{
  font-size: 1.08rem;
  margin: 0 0 .5em;
}
.card-link p{
  flex:1;
  font-size: .95rem;
  line-height:1.55;
}

/* 既存の .card（BEM版）にも合わせておく */
.card-grid .card{
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  transition:transform .22s ease, box-shadow .22s ease;
}
.card-grid .card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.card__link{
  display:block;
  padding:1.25rem 1.2rem;
  text-decoration:none;
  color:#222;
}
.card__title{
  display:block;
  font-weight:700;
  font-size:1.06rem;
  line-height:1.5;
}
.card__desc{
  display:block;
  margin-top:.35rem;
  font-size:.94rem;
  color:#444;
  line-height:1.7;
}
.card--plain{
  padding:2rem 1.2rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.6rem;
}
.card--plain .plain-link a{
  color:#222;
  font-weight:700;
  text-decoration:none;
  font-size:1.05rem;
}
.card--plain .plain-link a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}


/* ===== Acknowledgement（JP） ===== */
.acknowledgement{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  padding:20px 24px;
  margin:48px auto 40px;
  width:min(640px, 92%);
  text-align:center;
  font-style:italic;
  font-size:.95rem;
  color:#444;
  line-height:1.8;
}
.ack-text{
  margin:0 auto;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.ack-first{
  display:block;
  max-inline-size: 30ch;
  margin:0 auto .15em;
}
.ack-second{
  display:block;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  margin:0 auto;
}
@media (max-width: 360px){
  .ack-second{ white-space: normal !important; }
}

/* 幅の最終そろえ */
.feature-grid,
.card-grid{
  width: min(1100px, 90%) !important;
  margin-inline: auto !important;
}


/* 玄関（JP）: 最後のカード「Chibanoinkyo／お問い合わせ」を本文色＆同じ書体に */
body.blank-canvas #profile-links .plain-links a,
body.blank-canvas #profile-links .plain-links a:visited{
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  text-decoration: none !important;
}
body.blank-canvas #profile-links .plain-links a:hover{
  color: var(--ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  opacity: .9;
}


/* JP Front（page-id=5055）: カラー統一 */
.page-id-5055 { --accent: #04384c !important; }
.page-id-5055 .feature-card a,
.page-id-5055 .feature-list a{
  color: var(--ink) !important;
  text-decoration: none;
}
.page-id-5055 .feature-card a:hover,
.page-id-5055 .feature-list a:hover{
  color: var(--ink) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-id-5055 .feature-list li::before{
  background: var(--ink) !important;
}
.page-id-5055 .feature-card h2::before{
  background: var(--accent) !important;
}
.page-id-5055 .playbtn{
  border: 1px solid var(--accent) !important;
  background: #fff !important;
  color: var(--accent) !important;
}
.page-id-5055 .playbtn:hover{
  background: var(--accent) !important;
  color:#fff !important;
}
.page-id-5055 .playbtn[aria-pressed="true"]{
  background:#f3f6f9 !important;
  color: var(--accent) !important;
}


/* ---- ページ内スクロール調整 ---- */
html{
  scroll-behavior: smooth;
  scroll-padding-top: 32px;
}
.anchor-offset{
  scroll-margin-top:88px;
}


/* 玄関ページ：6枚目カード（Chibanoinkyo／お問い合わせ）の体裁をそろえる（保険） */
html[lang^="ja"] #profile-links .plain-links { text-align: center; }
#profile-links .plain-links a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
#profile-links .plain-links a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .9;
}


/* 玄関ページ：フッター署名（@ DTMでクラシック音楽）を中央揃え */
.site-signature {
  width: 100%;
  text-align: center !important;
  margin: 2rem auto 1rem;
}
.site-signature p {
  margin: 0;
  padding: 0;
  text-align: center !important;
}

/* ================================
   玄関ページ専用：ヘッダー位置調整（page-id-5055）
   ================================ */

/* PC（幅961px以上） */
@media (min-width: 961px){
  .page-id-5055 .l-header{
    position: absolute !important;
    top: 32px !important;   /* ← 0〜40px で好みに調整可能 */
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* TB（600〜960px） */
@media (max-width: 960px) and (min-width:600px){
  .page-id-5055 .l-header{
    top: 18px !important;
  }
}

/* SP（〜599px） */
@media (max-width: 599px){
  .page-id-5055 .l-header{
    top: 10px !important;
  }
}

/* 玄関ページ専用：ヒーロー画像の見せ方を微調整（PC中心） */
.page-id-5055 .hero{
  /* 上側がちょっと詰まるように、画像を少し下へずらす */
  background-position: center 46% !important;  /* 40〜55% で好みに調整 */
}

/* タブレット幅（～960px） */
@media (max-width: 960px){
  .page-id-5055 .hero{
    background-position: center 42% !important;
  }
}

/* スマホ幅（～600px） */
@media (max-width: 600px){
  .page-id-5055 .hero{
    background-position: center 45% !important;
  }
}

/* ============================
   SP（〜600px）：byline を小さく
   ============================ */
@media (max-width: 600px){
  .hero-byline .byline-link{
    font-size: 1.2rem !important;   /* 1.0〜1.4rem あたりで調整 */
    letter-spacing: 0.03em !important;
  }
  .hero-byline{
    margin-top: 1rem !important; 
  }
}

/* =========================================
   玄関ページ（page-id-5055）2枚カードの仕上げ
   ========================================= */

/* 左右カードを同じ高さに伸ばす */
.page-id-5055 .feature-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;   /* 高さをそろえる */
}

/* カード全体を縦方向フレックスに */
.page-id-5055 .feature-card{
  display: flex;
  flex-direction: column;
}

/* 説明文の下に少し余白を確保 */
.page-id-5055 .feature-card > p{
  margin-bottom: 1rem;
}

/* 曲リスト（ul）もフレックスにして残り高さを埋める */
.page-id-5055 .feature-card .feature-list{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* 一番下のリンク行をボトムに寄せる＋黒丸を消す */
.page-id-5055 .feature-list li.player-index-link,
.page-id-5055 .feature-list li.blog-top-link{
  list-style: none;
  padding-left: 0;
  margin-top: auto;       /* ← これで「下端」へ落とす */
  padding-top: 1rem;
  text-align: right;
}

/* 下端リンクだけは ● マーカーを出さない */
.page-id-5055 .feature-list li.player-index-link::before,
.page-id-5055 .feature-list li.blog-top-link::before{
  content: none;
  display: none;
}

/* 960px 以下では1カラム＋リンクは中央寄せ */
@media (max-width: 960px){
  .page-id-5055 .feature-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .page-id-5055 .feature-list li.player-index-link,
  .page-id-5055 .feature-list li.blog-top-link{
    text-align: center;
  }
}

/* ============================
   玄関ページ：2枚カードの余白微調整
   ============================ */

/* 1) 曲名とプレーヤーの間に少しゆとりを入れる */
.page-id-5055 .feature-card .feature-list li > .inline-preview{
  margin-top: .6rem;          /* ← 0.5〜0.8rem くらいお好みで */
}

/* 2) ブログ側の各項目の上下マージンを少し締める */
.page-id-5055 .feature-card .feature-list li{
  margin: .35em 0;            /* 全体を少しタイトに */
}

/* 3) 日付をタイトルに少し近づける＆気持ち小さめに */
.page-id-5055 .feature-card .feature-list .pubdate{
  margin-top: .15em;          /* 0.1〜0.3em で好み調整 */
  font-size: .82rem;          /* ほんの少し小さめに */
}

/* =========================================
   玄関ページの2枚カード：下端リンクをそろえる強制オーバーライド
   ========================================= */

/* カード全体を縦フレックスに */
.page-id-5055 .feature-card{
  display:flex !important;
  flex-direction:column !important;
}

/* UL を「伸びる部分」にして、LI を縦に並べる */
.page-id-5055 .feature-card .feature-list{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  margin:0 !important;
}

/* 一番下のリンク行だけカードの下端に押し下げる */
.page-id-5055 .feature-card .feature-list li.player-index-link,
.page-id-5055 .feature-card .feature-list li.blog-top-link{
  margin-top:auto !important;   /* ← これがキモ */
  padding-top:1rem !important;
  text-align:right !important;
}

/* =========================================================
   EN Entrance (/home?lang=en) : kill bar & bullets on top cards
   ========================================================= */

/* 見出しの左の縦棒を消す＋左揃え */
html[lang^="en"] .page-id-5055 .feature-card h2{
  padding-left: 0 !important;
  text-align: left !important;
}
html[lang^="en"] .page-id-5055 .feature-card h2::before{
  content: none !important;
  display: none !important;
}

/* 曲リストの黒丸とインデントを消す */
html[lang^="en"] .page-id-5055 .feature-list,
html[lang^="en"] .page-id-5055 .feature-list li{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
html[lang^="en"] .page-id-5055 .feature-list li::before{
  content: none !important;
  display: none !important;
}

/* 玄関ページの Acknowledgement（JP/EN共通） */
.acknowledgement{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);

  /* ★ 横幅を広げる（ここが最重要） */
  width: min(900px, 92%);
  margin:52px auto 36px;

  /* ★ 背を低くするため詰める */
  padding:22px 30px;
  line-height:1.55;

  text-align:center;
  font-style:italic;
  font-size:1.02rem;
  color:#444;
}

/* テキスト整形：2行に自然に収める */
.acknowledgement p{
  margin:0;
  max-width: 46em;   /* ★ 行の長さをコントロール */
  margin-left:auto;
  margin-right:auto;
}

/* EN entrance only: align "Chibanoinkyo / Contact" to the left */
html[lang^="en"] #profile-links.card--plain{
  display: block !important;
  text-align: left !important;
}

/* 中のリンクブロックを左寄せ・縦並びに */
html[lang^="en"] #profile-links .plain-links{
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* 各行の余白と左寄せ */
html[lang^="en"] #profile-links .plain-links p{
  margin: 0 0 .35rem !important;
  text-align: left !important;
}

/* a を普通のインラインブロックにしておく（念のため） */
html[lang^="en"] #profile-links .plain-links a{
  display: inline-block !important;
}

/* =========================================================
   EN only tweaks (TranslatePress)
   ========================================================= */
body.translatepress-en_US {

  /* 上段2枚カードを左揃えに */
  .feature-card{
    text-align: left !important;
  }
  .feature-card h2{
    text-align: left !important;
    padding-left: 0 !important;
  }
  .feature-card h2::before{
    content: none !important;
    display: none !important;
  }

  /* 曲リストの黒丸を消す */
  .feature-list,
  .feature-list li{
    list-style: none !important;
    padding-left: 0 !important;
  }
  .feature-list li::before{
    content: none !important;
    display: none !important;
  }

  /* 下段6枚カードを “リスト風 2カラム” に */
  .card-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2.2rem 3rem !important;
    margin-top: 3rem !important;
  }

  /* EN ではカードの箱を外す */
  .card-grid .card,
  .card-grid .card-link{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .card-grid h2,
  .card-grid .card__title{
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    margin: 0 0 .35em !important;
    text-align: left !important;
  }
  .card-grid p,
  .card-grid .card__desc{
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* 最後の “Chibanoinkyo / Contact” を左揃え */
  #profile-links .plain-links{
    text-align: left !important;
  }
  #profile-links .plain-links p{
    margin: 0 0 .25em !important;
    text-align: left !important;
  }
  #profile-links .plain-links a{
    display: inline-block !important;
    text-align: left !important;
  }

  /* EN の SP では1列に戻す */
  @media (max-width: 600px){
    .card-grid{
      grid-template-columns: 1fr !important;
      gap: 1.6rem !important;
    }
  }
}

/* 右側カードの記事間隔を広げる */
.page-id-5055 .feature-card:nth-child(2) .feature-list li {
  margin-bottom: 1.1rem !important;   /* ← 値を大きくすると広がる（1.0〜1.6rem 推奨） */
}

/* 日付（.pubdate）の下の余白も調整したい場合 */
.page-id-5055 .feature-card:nth-child(2) .pubdate {
  margin-bottom: 0.4rem !important;
}