/* ==========================================================================
   トップページの自由枠（ヒーローの下）
   inc/front-feature.php が出力します。トップページだけで読み込みます。
   色・余白・書体は site.css の変数をそのまま使い、全体のデザインに揃えます。
   ========================================================================== */

.km-feature{
  padding:var(--s-blk) var(--pad);
  background:var(--paper);
}
/* メイン画像の直下に置いたとき、続く営業時間の帯との境目に線を引く */
.km-feature--hero + .km-info{border-top:1px solid var(--line)}

/* おもうこと（最新記事）：自由枠のすぐ下、営業時間の帯の上
   枠そのものの見た目は site.css の .km-latest をそのまま使い、幅と余白だけ合わせる */
.km-front-latest{padding:0 var(--pad) var(--s-blk)}
.km-front-latest .km-latest{max-width:var(--content);margin:var(--s-blk) auto 0!important}
.km-feature--hero + .km-front-latest .km-latest{margin-top:0!important}
.km-front-latest + .km-info{border-top:1px solid var(--line)}
/* 営業時間の帯の下に置いたときは、続く本文の上余白と重ならないようにする */
.km-feature--info{padding-bottom:0}

.km-feature__inner{
  max-width:var(--content);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,10fr) minmax(0,7fr);
  gap:clamp(24px,3.2vw,40px);align-items:center;
}
.km-feature--img-left .km-feature__inner{grid-template-columns:minmax(0,7fr) minmax(0,10fr)}
.km-feature--img-right .km-feature__media{order:2}
.km-feature--text-only .km-feature__inner,
.km-feature--img-only .km-feature__inner{grid-template-columns:minmax(0,1fr)}

/* 画像 */
.km-feature__media{
  margin:0;overflow:hidden;background:#E8E8E4;
  aspect-ratio:4/3;
}
.km-feature--img-only .km-feature__media{aspect-ratio:16/7}
.km-feature__media img,
.km-feature__img{
  display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;
}

/* 文章 */
.km-feature__body{display:flex;flex-direction:column;gap:14px;min-width:0}
.km-feature--text-only .km-feature__body{max-width:44em}
.km-feature__en{
  margin:0!important;
  font:400 13px var(--mono);letter-spacing:.12em;color:var(--blue);
}
.km-feature__title{
  margin:0!important;padding:0;border:0;
  font:700 clamp(1.5rem,3vw,2.25rem)/1.4 var(--display);letter-spacing:.02em;color:var(--ink);
  text-wrap:pretty;word-break:auto-phrase;overflow-wrap:anywhere;
}
.km-feature__text{
  font:400 17px/1.9 var(--sans);color:var(--ink);
  overflow-wrap:anywhere;
}
.km-feature__text p{margin:0 0 1em!important}
.km-feature__text p:last-child{margin-bottom:0!important}
.km-feature__text a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.km-feature__text a:hover{color:var(--blue-dark)}

/* スマートフォン：画像を上、文章を下に1列で並べる */
@media (max-width:767px){
  .km-feature__inner,
  .km-feature--img-left .km-feature__inner{grid-template-columns:minmax(0,1fr)}
  .km-feature--img-right .km-feature__media{order:0}
  .km-feature--img-only .km-feature__media{aspect-ratio:4/3}
}