/* ============================================================
   初めての方へ（2026年 デザイン刷新版）
   デザイン: 濱村明統さん / コーディング: 金平
   置き場所: ItemBox item/fs_data/contents/beginners/css/beginners2026.css
   正本: クライアントワーク/上澤梅太郎商店/03_記録/フューチャーショップ_HTML/2026-08-31_初めての方へ/beginners2026.css
   ※ 直すときはこのファイルを直して FTP で上書きする（管理画面では編集しない）
============================================================ */
/* ===== 初めての方へ 2026 =====
   書体は既存サイトとまったく同じ指定にしている（2026-09-04 ユーザー判断）。
   見出し = A1 Mincho / Hiragino Mincho Pro（module.css の .ttl_a と同じ）
   本文   = ヒラギノ角ゴ系（base.css と同じ）
   Webフォント（Shippori Mincho / Noto Sans JP）は使わない。
   1ページだけ書体が変わるのを避けるため。導入するならサイト全体でまとめて。 */
.hjm{
  --hjm-orange:#db5324;
  --hjm-red:#e60012;
  --hjm-gray:#f4f3f1;
  --hjm-text:#1a1a1a;
  --hjm-pad:6vw;
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  color:var(--hjm-text);
  font-weight:300;
  line-height:1.9;
  font-size:15px;
  letter-spacing:.04em;
  overflow-x:hidden;
}
.hjm *{box-sizing:border-box;}
.hjm img{max-width:100%;height:auto;vertical-align:bottom;}
.hjm p{margin:0 0 1.6em;}
.hjm a{color:var(--hjm-orange);text-decoration:underline;}
.hjm a:hover{opacity:.75;}

/* 見出し（明朝） */
.hjm h1,.hjm h2,.hjm h3,.hjm .hjm-mincho{
  font-family:"A1 Mincho","Hiragino Mincho Pro";
  font-weight:400;
  letter-spacing:.08em;
  line-height:1.55;
  margin:0 0 .8em;
}
.hjm h1,.hjm h2{font-size:26px;}
.hjm h3{font-size:21px;}

/* 幅の器 */
.hjm-inner{padding-left:var(--hjm-pad);padding-right:var(--hjm-pad);}
.hjm-sec{margin-top:64px;margin-bottom:64px;}
.hjm-sec--tight{margin-top:44px;margin-bottom:44px;}
.hjm-lead{font-size:15px;line-height:2.0;}
.hjm .hjm-note{font-size:12.5px;line-height:1.8;color:var(--hjm-red);}
.hjm-center{text-align:center;}

/* ---- ヒーロー ---- */
.hjm-hero{position:relative;margin:0 0 40px;}
.hjm-hero img{width:100%;display:block;aspect-ratio:786 / 1009;object-fit:cover;object-position:50% 60%;}
.hjm .hjm-hero__word{
  position:absolute;left:50%;top:22%;transform:translateX(-50%);
  writing-mode:vertical-rl;
  font-family:"A1 Mincho","Hiragino Mincho Pro";
  font-size:34px;color:#fff;letter-spacing:.34em;white-space:nowrap;
  text-shadow:0 1px 12px rgba(0,0,0,.28);
  margin:0;
}

/* ---- はじめまして（蔵の組写真） ---- */
/* デザイン1003: 大正当時の写真（桶職人）を外し、段落3と4のあいだに公文さんの写真を縦長2:3で並べる。
   SPは画面幅いっぱいに4枚（5枚目は出さない）、PCは本文幅に5枚。 */
.hjm-kura{display:grid;grid-template-columns:repeat(4,1fr);margin:40px calc(var(--hjm-pad) * -1) 48px;}
.hjm-kura img{width:100%;aspect-ratio:2 / 3;object-fit:cover;display:block;}
.hjm-kura img:nth-child(5){display:none;}

/* ---- 帯写真 ---- */
.hjm-band{margin:56px 0;}
.hjm-band img{width:100%;display:block;}

/* ---- 朝食グリッド ---- */
.hjm-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:44px 0 56px;
}
.hjm-grid img{width:100%;height:100%;object-fit:cover;display:block;}
.hjm-grid__cell--large{grid-column:span 2;grid-row:span 2;}

/* ---- 汁飯香の図 ---- */
.hjm-zu{
  position:relative;
  background:var(--hjm-gray);
  border-radius:18px;
  padding:28px 16px 44px;
  margin:32px 0 0;
  text-align:center;
}
.hjm .hjm-zu__label{
  font-family:"A1 Mincho","Hiragino Mincho Pro";
  line-height:1.35;
}
.hjm .hjm-zu__label b{display:block;font-size:26px;font-weight:400;color:var(--hjm-orange);}
.hjm .hjm-zu__label span{display:block;font-size:15px;color:var(--hjm-text);}
.hjm .hjm-zu__top{margin:0 0 4px;}
.hjm-zu__row{display:flex;align-items:center;justify-content:center;gap:8px;}
.hjm-zu__row img{width:56%;max-width:320px;}
.hjm-zu__row .hjm-zu__label{flex:0 0 auto;width:20%;}

/* 暖簾写真を図に重ねる */
.hjm-inkyo{position:relative;z-index:1;margin:-32px 0 0;}
.hjm-inkyo__photo{width:74%;max-width:none;margin:0 0 22px 8%;display:block;position:relative;}
.hjm-inkyo__body{font-size:14px;line-height:2.0;}

/* ---- らっきょうアイコン ---- */
.hjm-icon{display:block;width:48px;margin:36px auto;}

/* ---- 商品ブロック ---- */
.hjm-item{background:var(--hjm-gray);padding:34px var(--hjm-pad) 40px;margin:48px 0;}
.hjm .hjm-item__catch{
  font-family:"A1 Mincho","Hiragino Mincho Pro";
  font-size:19px;text-align:center;margin:0 0 .3em;letter-spacing:.06em;
}
.hjm .hjm-item__name{
  font-family:"A1 Mincho","Hiragino Mincho Pro";
  font-size:25px;text-align:center;letter-spacing:.22em;margin:0 0 .5em;
}
.hjm .hjm-item__sub{font-size:14px;text-align:center;line-height:1.9;margin:0 0 26px;}
.hjm-item__main{display:block;width:100%;margin:0 0 10px;}
.hjm-item__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 22px;}
.hjm-item__thumbs img{width:100%;aspect-ratio:1 / 1;object-fit:cover;display:block;}
.hjm .hjm-item__title{font-size:16px;font-weight:500;margin:0 0 .7em;letter-spacing:.02em;}
.hjm .hjm-item__price{font-size:20px;font-weight:500;margin:0 0 .9em;}
.hjm .hjm-item__price small{font-size:14px;font-weight:400;margin-left:.6em;}
.hjm-item__spec{font-size:14px;line-height:1.95;margin:0 0 1.4em;}
.hjm-item__spec dt{float:left;clear:left;width:2.6em;font-weight:400;}
.hjm-item__spec dd{margin:0 0 0 3.4em;}
.hjm-btn{
  display:block;max-width:420px;margin:26px auto 0;
  background:var(--hjm-orange);color:#fff!important;
  text-align:center;text-decoration:none!important;
  font-weight:500;font-size:15px;letter-spacing:.04em;
  padding:17px 12px;border-radius:4px;
}
.hjm-btn:hover{opacity:.85;}

/* ---- 選ばれる理由 ---- */
.hjm-reason{margin:0 0 44px;}
.hjm-reason img{width:100%;display:block;margin:0 0 18px;}
/* 写真枠の縦横比はPCとSPで違う（濱村さんの指摘）。SPは全幅2:1、PCは左カラムで約1.57。
   */
.hjm-reason .hjm-reason__photo{aspect-ratio:2 / 1;object-fit:cover;}
/* 理由③はデザイン1003でらっきょう1枚に戻った。器の上側（鉢の縁）が見える位置で切る */
.hjm-reason .hjm-reason__photo--3{object-position:50% 12%;}
.hjm-reason h3{margin:0 0 .6em;}
.hjm-reason p{font-size:14px;line-height:2.0;margin:0;}

/* SPでは本文の改行を解除して自然に折り返す（本番の実機幅はデザインより狭いため） */
@media screen and (max-width:767px){
  .hjm .pcbr{display:none;}
  .hjm h1,.hjm h2{font-size:24px;}
  .hjm h3{font-size:20px;}
  /* 1文字だけ次行に落ちるのを避ける（狭い画面での調整） */
  .hjm-center h2{font-size:20px;letter-spacing:.03em;}
  .hjm .hjm-item__catch{font-size:17px;}
}

/* FS 側のページ見出し（「初めての方へ」）だけ出さない。
   ヒーロー写真から始まるデザインなので、上に見出しが乗ると崩れるため。
   商品グループエリア（下部の商品一覧）は出したまま。
   グループページなので、このグループに属する商品はそのまま並べる（2026-09-04 ユーザー判断）。 */
.fs-c-heading--page{display:none!important;}

/* ---- ルビ ---- */
.hjm rt{font-size:.42em;font-weight:400;letter-spacing:.1em;}

/* リードの2カラムは900px以上でだけ（768〜899pxでは見出しが折れて窮屈になる） */
@media screen and (min-width:900px){
  /* 2026-10-02 佑基さん「左右の段の天が揃っていない」→ デザイン1003で見出しと本文の上端を揃えた。
     ベースライン揃え（9/11）だと見出しが下がって見えるので、上端（文字の頭）で揃える。 */
  .hjm-intro{display:flex;gap:60px;align-items:flex-start;}
  .hjm-intro__head{flex:0 0 46%;margin:0;}
  .hjm-intro__lead{flex:1 1 auto;}
}

/* ============ PC ============ */
/* 級数は既存ページに合わせる（本文18px・大見出し30px・中見出し24px）。
   2026-09-04 ユーザー判断: レイアウトは濱村さんのデザイン通り、文字サイズだけ既存サイトと揃える。
   既存の値は items/common/css/base.css（本文16px）と module.css（.ttl_a 30px）を参照 */
@media screen and (min-width:768px){
  .hjm{font-size:18px;line-height:2.0;letter-spacing:.05em;}
  .hjm-inner{max-width:1080px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;}
  .hjm h1,.hjm h2{font-size:30px;line-height:1.6;letter-spacing:.1em;}
  .hjm h3{font-size:24px;line-height:1.7;letter-spacing:.1em;}
  .hjm-sec{margin-top:96px;margin-bottom:96px;}
  .hjm-sec--tight{margin-top:64px;margin-bottom:64px;}
  .hjm-lead{font-size:18px;line-height:2.0;}
  .hjm .hjm-note{font-size:14px;line-height:1.9;}

  .hjm-hero{margin-bottom:72px;}
  .hjm-hero img{aspect-ratio:auto;}
  /* 2026-09-11 デザイン0908に合わせる。56px・字送り70px（＝字間.25em）・YuMin-Demibold。
     佑基さんの「もう少し大きく、字間を詰めたい」はデザインの実寸に戻すと解消する。
     スマホは「目立たない感じはない」とのことで触らない。 */
  .hjm .hjm-hero__word{left:22%;top:26%;font-size:56px;letter-spacing:.25em;font-weight:600;transform:none;}

  .hjm-kura{grid-template-columns:repeat(5,1fr);margin:36px 0 56px;}
  .hjm-kura img:nth-child(5){display:block;}

  .hjm-band{margin:88px 0;}


  .hjm-grid__cell--sponly{display:none;}
  .hjm-grid{
    grid-template-columns:repeat(5,1fr);gap:10px;
    max-width:1080px;margin:56px auto 88px;padding:0 20px;
  }

  /* 汁飯香の図：右寄せの箱の左下へ暖簾写真を重ねる */
  .hjm-shiru{position:relative;}
  .hjm-zu{width:75%;margin-left:auto;padding:40px 24px 44px;border-radius:22px;}
  .hjm .hjm-zu__label b{font-size:30px;}
  .hjm .hjm-zu__label span{font-size:18px;}
  .hjm-zu__row{gap:0;}
  .hjm-zu__row img{width:53%;}
  .hjm-zu__row .hjm-zu__label{width:23%;}
  .hjm-inkyo{display:flex;gap:16px;align-items:flex-start;margin:-92px 0 0;}
  .hjm-inkyo .hjm-inkyo__photo{
    flex:0 0 40%;width:40%;max-width:none;margin:0;
    aspect-ratio:1 / 1;object-fit:cover;
  }
  .hjm-inkyo__body{flex:1 1 auto;padding-top:162px;font-size:18px;}

  .hjm-item{max-width:1080px;margin:80px auto;padding:40px 40px 48px;}
  .hjm .hjm-item__catch{font-size:24px;line-height:1.5;margin-bottom:.15em;}
  .hjm .hjm-item__name{font-size:30px;line-height:1.4;margin-bottom:.3em;}
  .hjm .hjm-item__sub{font-size:18px;line-height:1.9;margin-bottom:30px;}
  /* サムネ列の高さをメイン写真に合わせる（デザインは下端が揃っている） */
  .hjm-item__figs{display:flex;gap:16px;align-items:stretch;margin:0 0 30px;}
  .hjm-item__main{flex:0 0 46%;width:46%;margin:0;object-fit:cover;}
  .hjm-item__thumbs{
    flex:1 1 auto;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 1fr;gap:16px;margin:0;
  }
  .hjm-item__thumbs img{aspect-ratio:auto;height:100%;}
  .hjm .hjm-item__title{font-size:20px;line-height:1.6;margin-bottom:.35em;}
  .hjm .hjm-item__price{font-size:20px;line-height:1.6;margin-bottom:.5em;}
  .hjm .hjm-item__price small{font-size:15px;}
  .hjm-item__spec{font-size:18px;}
  .hjm-item__spec dt{width:3em;}
  .hjm-item__spec dd{margin-left:4em;}
  .hjm-btn{max-width:66%;margin-top:34px;font-size:18px;padding:20px 12px;}

  /* 選ばれる理由：画像左・文章右 */
  .hjm-reason{display:flex;gap:36px;align-items:flex-start;margin:0 0 58px;}
  .hjm-reason .hjm-reason__photo{flex:0 0 40%;width:40%;margin:0;aspect-ratio:304 / 194;}
  .hjm-reason .hjm-reason__photo--3{aspect-ratio:304 / 206;}
  .hjm-reason__body{flex:1 1 auto;}
  .hjm-reason img{margin:0;}
  .hjm-reason p{font-size:16px;line-height:1.9;}

  .hjm-icon{width:56px;margin:48px auto;}
}


/* ============ 汁飯香の図を本文に重ねる（デザインどおり・900px以上） ============ */
/* デザイン（PC）では、グレーの箱の左上が本文の下2行に食い込み、文字が箱の上に乗っている。
   768〜899px では箱が本文の行末に寄りすぎるため、2カラム化と同じ 900px から効かせる。 */
@media screen and (min-width:900px){
  /* 器はすべて重ね順を持たせ、図の箱だけ一段うしろへ置く。
     こうするとHTMLに手を入れずCSSの差し替えだけで直せる。 */
  .hjm-inner{position:relative;z-index:1;}
  .hjm-shiru{z-index:0;}
  .hjm-zu{margin-top:-122px;} /* デザイン比 = 本文2.2行ぶん重ねる */
}


/* ============ 2026-10-06 デザイン（PC_1003）の座標に合わせる ============ */
/* 本文列はデザインでは x=260〜1340（1080px）。左右20pxの余白を外側に出し、中身を1080pxにする。
   写真はXDのマスク（見えている範囲）の値: 選ばれる理由・隠居うわさわとも 436×296／436×436、文章は x=720。
   汁飯香の箱は x=536・幅804・高さ612・角丸40、お膳の絵は 429×381。セットの箱も角丸40。 */
@media screen and (min-width:768px){
  .hjm-inner{max-width:1120px;}
  .hjm-grid{max-width:1120px;}

  .hjm-reason{gap:24px;}
  .hjm-reason .hjm-reason__photo,
  .hjm-reason .hjm-reason__photo--3{flex:0 0 40.37%;width:40.37%;aspect-ratio:436 / 296;}

  .hjm-inkyo{gap:24px;}
  .hjm-inkyo .hjm-inkyo__photo{flex:0 0 40.37%;width:40.37%;}

  .hjm-zu{width:74.45%;padding:96px 24px 66px;border-radius:40px;}
  .hjm-zu__row img{width:56.7%;max-width:none;}
  .hjm-zu__row .hjm-zu__label{width:21.6%;}

  .hjm-item{border-radius:40px;}
  /* 「＼まずはこちらを…／」は文字の高さの中心を箱の上端に乗せる（デザイン: 半分が箱の外に出る）。
     値はデザインPNGとページのスクショを画素で比べて決めた（2026-10-06）。 */
  .hjm .hjm-item__catch{margin-top:-52px;}
  .hjm .hjm-item__name{margin-top:27px;}
  /* 選ばれる理由: 見出しの字面の上端を写真の上端に揃える。デザインPNGでは 写真+1px。
     ページのスクショを画素で測って決めた値（要素の枠や字面の計算からは出さない） */
  .hjm-reason__body h3{margin-top:-3.5px;}
}
@media screen and (min-width:900px){
  .hjm-intro{gap:55px;} /* 本文の左端 x=812 */
}

/* ============ 2026-10-06 トップ写真の高さ ============ */
/* デザインは写真を横長に切り抜き（1600×781、上74px・下212pxを隠す）。
   同じ段のカテゴリページ（新着・ギフト・らっきょう等）のトップ画像 1600×796 にそろえる（ユーザー判断）。
   「おはよう」は写真の見える上端から字面まで、デザインPNGで179px（781pxに対して）。 */
@media screen and (min-width:768px){
  .hjm-hero img{aspect-ratio:1600 / 796;object-fit:cover;object-position:50% 26%;}
  .hjm .hjm-hero__word{top:22.4%;left:20.6%;}
}

/* ============ 2026-10-06 朝食グリッド：右は画面の端まで流す（試作） ============ */
/* デザイン（1600px）は左端を本文にそろえ、右端は画面の外まで出している（1マス252×189・横24px・縦16px）。
   1920px以上の画面がPCの約3割あるため、「右端＝画面の端」に固定し、マスの大きさを画面幅に合わせて伸縮させる。
   100vw はスクロールバー分はみ出して横スクロールが出るので使わず、.hjm（画面幅いっぱい）に対する%で計算する。 */
@media screen and (min-width:768px){
  .hjm-grid{max-width:none;margin-left:max(20px, calc((100% - 1080px) / 2));margin-right:0;padding:0;column-gap:24px;row-gap:16px;}
  .hjm-grid > div:not(.hjm-grid__cell--large) img{aspect-ratio:4 / 3;}
}

/* ============ 2026-10-06 汁飯香セットの箱をデザインの寸法に ============ */
/* 箱1080×（内側の余白 左右・下68px）。大きい写真460角、すき間50、小さい写真204角×4（横26・縦52、上下端が大きい写真とそろう）。
   ボタン712×88・角丸8・中央。PCテーマは本文の最小幅が1150pxなので、箱は常に1080px（px固定でよい）。 */
@media screen and (min-width:768px){
  .hjm-item{padding-left:68px;padding-right:68px;padding-bottom:68px;}
  .hjm-item__figs{gap:50px;align-items:flex-start;}
  .hjm-item__main{flex:0 0 460px;width:460px;height:460px;aspect-ratio:1 / 1;}
  .hjm-item__thumbs{flex:0 0 434px;grid-template-columns:204px 204px;grid-template-rows:204px 204px;column-gap:26px;row-gap:52px;}
  .hjm-item__thumbs img{width:204px;height:204px;aspect-ratio:1 / 1;}
  .hjm-btn{max-width:none;width:712px;height:88px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px;}
  /* デザインは商品名のかっこを半角（｢｣）で組んでいる。全角の「」」は右半分が空白で見た目の中心が左に寄るので、かっこを半角幅に詰める */
  .hjm .hjm-item__name{font-feature-settings:"halt";}
}

/* ============ 2026-10-06 細部をデザイン（PC_1003）の座標に ============ */
@media screen and (min-width:768px){
  /* デザインは見出しのかっこ・読点を半角（｢｣､）で組んでいる。全角のままだと行頭の「が半角ぶん右に見える */
  .hjm h1,.hjm h2,.hjm h3{font-feature-settings:"halt";}
  /* らっきょうのアイコン 96px */
  .hjm-icon{width:96px;}
  /* 途中の写真はデザインの切り抜き: 朝の食卓 1600×772（上126・下169を隠す）、集合写真 1080×692（上下14ずつ） */
  .hjm-band img{aspect-ratio:1600 / 772;object-fit:cover;object-position:50% 42.7%;}
  .hjm img[src$="group.jpg"]{width:100%;aspect-ratio:1080 / 692;object-fit:cover;}
}
@media screen and (min-width:900px){
  /* 冒頭の2段組: 右の本文の字面の上端を左の見出しにそろえる（画素で4px上だった） */
  .hjm-intro__lead{margin-top:4px;}
  /* 汁飯香の図: 箱は常に804px幅なので座標で置く（行の左端 = 箱の左端+24）。
     お膳の絵 x=730・429×381、「飯／ごはん」中心 x=668、「汁／味噌汁」中心 x=1210 */
  .hjm-zu__row{position:relative;display:block;height:381px;}
  .hjm-zu__row img{position:absolute;left:170px;top:0;width:429px;}
  .hjm-zu__row .hjm-zu__label{position:absolute;width:100px;top:159px;}
  .hjm-zu__row .hjm-zu__label:first-child{left:58px;}
  .hjm-zu__row .hjm-zu__label:last-child{left:600px;}
}

/* ============ 2026-10-06 スマホをデザイン（SP_1003）の座標に ============ */
/* SPデザインは幅786（＝画面幅100%）。数値は 786 を 100vw として換算している（例: 48 → 6.107vw）。
   文字の大きさ・本文の改行解除は 9/4 の決定どおり既存サイト基準のまま。配置・写真・箱だけ合わせる。 */
@media screen and (max-width:767px){
  /* 冒頭写真: 786×827 の枠に、写真を 1513×1009 相当（192.49%）に拡大して左右中央・上16 を隠して置く */
  .hjm-hero{overflow:hidden;aspect-ratio:786 / 827;}
  .hjm-hero img{width:192.494%;max-width:none;height:auto;aspect-ratio:auto;margin:-2.036% 0 0 -46.183%;object-fit:fill;}
  /* 朝の食卓: 786×768 の枠に、写真を 1159×773 相当（147.46%）で左上合わせ */
  .hjm-band{overflow:hidden;aspect-ratio:786 / 768;}
  .hjm-band img{width:147.455%;max-width:none;height:auto;}
  /* 朝食グリッド: 4列（1マス180×135・横30・縦23）、左右とも画面から13はみ出す。大きい写真は左上と右下 */
  .hjm-grid{width:103.053vw;margin-left:-1.654vw;margin-right:0;column-gap:3.817vw;row-gap:2.926vw;}
  .hjm-grid > div:not(.hjm-grid__cell--large) img{aspect-ratio:4 / 3;}
  .hjm-grid > div:nth-child(6){grid-column:3 / 5;grid-row:3 / 5;}
  /* 汁飯香の図: 箱 690×626・角丸40（=20px）。中身は座標で置く（箱の左上が原点） */
  .hjm-zu{height:79.644vw;padding:0;border-radius:20px;margin-top:40px;}
  .hjm-zu__row{position:static;display:block;}
  .hjm-zu__row img{position:absolute;left:16.667vw;top:18.066vw;width:54.580vw;max-width:none;}
  .hjm .hjm-zu__label{position:absolute;width:20vw;}
  .hjm .hjm-zu__top{left:33.893vw;top:3vw;margin:0;}
  .hjm-zu__row .hjm-zu__label:first-child{left:3.155vw;top:35.2vw;}
  .hjm-zu__row .hjm-zu__label:last-child{left:64.504vw;top:35.2vw;}
  /* 暖簾の写真: 箱の下端に 55 重ねる。x=111・566×390（右寄せで切り抜き） */
  .hjm-inkyo{margin-top:-6.997vw;}
  .hjm-inkyo__photo{width:72.010vw;margin-left:8.015vw;aspect-ratio:566 / 390;object-fit:cover;object-position:100% 50%;}
  .hjm-inkyo__body{padding-left:8.015vw;}
  /* 汁飯香セット: 「＼まずは…／」を箱の上端にまたがらせる。サムネ4枚は150角・間隔30。ボタン 570×88（=285×44）・角丸8（=4px） */
  .hjm .hjm-item__catch{margin-top:-42.5px;}
  .hjm-item__main{aspect-ratio:1 / 1;object-fit:cover;}
  .hjm h1,.hjm h2,.hjm h3,.hjm .hjm-item__name{font-feature-settings:"halt";}
  .hjm-item__thumbs{gap:3.817vw;}
  .hjm-btn{width:72.519vw;max-width:none;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:4px;}
  /* 集合写真 688×442 */
  .hjm img[src$="group.jpg"]{width:100%;aspect-ratio:688 / 442;object-fit:cover;}
  /* 見出しはデザインの級数に（2026-10-06 ユーザー判断。本文はサイト基準のまま）。
     デザインは 21px・字間0.1em で「｢ごはん｣｢味噌汁｣そして｢漬物｣。」が幅いっぱいに1行で収まる設計 */
  .hjm h1,.hjm h2,.hjm .hjm-center h2{font-size:21px;letter-spacing:.1em;line-height:1.714;}
  .hjm .hjm-center h2{font-size:20px;}
  .hjm h3{font-size:16px;letter-spacing:.1em;line-height:1.75;}
  .hjm .hjm-item__catch{font-size:16px;letter-spacing:.1em;}
  .hjm .hjm-item__name{font-size:20px;}
}
/* 「おはよう」SP: デザインは游明朝Demibold・32px（64/2）・字送り35（字間約.1em）。PCは9/11に合わせ済み、SPは2026-10-06に合わせた。
   位置はデザインPNGの字面（写真の上端から86・左端183.5、393px幅）に画素で合わせる */
@media screen and (max-width:767px){
  .hjm .hjm-hero__word{font-size:32px;font-weight:600;letter-spacing:.1em;left:42.56vw;top:19.15%;transform:none;}
}
/* 390px未満（iPhone SE・mini など）は字間0.1emだと見出しが折り返すので、字間だけ詰める */
@media screen and (max-width:389px){
  .hjm h1,.hjm h2,.hjm .hjm-item__catch{letter-spacing:.02em;}
}