/* コメント（このセクションだけ vdl-penletter） */
.chef-letter{
  font-family: var(--penletter);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.55;
}

/* 念のため：中の要素にも継承を強める（他の指定に負ける時だけ） */
.chef-letter p,
.chef-letter .lr5{
  font-family: inherit;
}


hr.line1p{
  border: none;
  height: 10px;
  margin: 30px 0;
  position: relative;
  background: none;
  clear: both;   /* ← アイコンの下に出す */
}

/* パステル本体 */
hr.line1p::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 6px;

  /* グレー1色だけど濃淡をつける */
  background: linear-gradient(
    90deg,
    rgba(200,200,200,0.35),
    rgba(220,220,220,0.55),
    rgba(200,200,200,0.35)
  );

  transform: translateY(-50%) rotate(-0.3deg);
  border-radius: 50px;
  filter: blur(1px);  /* ← これがパステル感の正体 */
}

/* 粉っぽい質感 */
hr.line1p::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:8px;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.15) 0px,
      rgba(255,255,255,0.15) 2px,
      rgba(255,255,255,0) 3px,
      rgba(255,255,255,0) 6px
    );

  transform: translateY(-50%);
  mix-blend-mode: overlay;
  pointer-events:none;
  opacity: 0.6;
}


/*──────────────────────────────
 汎用ライン（写真・文の区切り用） PCのみ表示
──────────────────────────────*/
/* 全デバイス共通で “マージン” は確保 */
.photo-line {
  margin: 1.5rem 0;  /* ← 常に同じ空き */
}

/* PCのみラインを出す */
@media (min-width:1024px){
  .photo-line {
    border-bottom: 2px solid #CCCCCC;
  }
}

/* 料理長ナビゲーション
-----------------------------------------------*/
.chef-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;               /* ボタン間の余白 */
  margin: 3rem auto 4rem;
  text-align: center;
  flex-wrap: wrap;
}

.chef-nav a {
  display: inline-block;
  background: #fff;            /* 白地 */
  color: #004b36;              /* 緑文字 */
  border: 1px solid #004b36;   /* 緑枠を1pxに */
  padding: 0.6rem 1.6rem;
  border-radius: 10px 0 10px 0; /* 左上・右下だけ角丸 */
  font-size: 0.95em;
  text-decoration: none;
  transition: 0.3s;
  font-family: "Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
}

.chef-nav a i {
  margin: 0 0.3em;
}

.chef-nav a:hover {
  background: #004b36;
  color: #fff;
  border-color: #004b36;
}

/* スマホ調整 */
@media screen and (max-width: 600px) {
  .chef-nav {
    gap: 1rem;
    flex-direction: column;
  }
  .chef-nav a {
    width: 80%;
  }
}

/* そのブロックだけ画像を半分に */
.image.image-half img{
  width: 60%;
  height: auto;
  display: block;
  /*margin: 0 auto;*/ /* 中央寄せ（不要なら消してOK） */
}

/* h2のまま見た目だけh3っぽく */
h2.h3like{
  font-size: 1.1em;      /* ←ここで調整（例：h3相当） */
  line-height: 1.35;
  margin-top: 0.8em;
  margin-bottom: 0.5em;
}

/* アイコンと文字の間隔を広げる */
h2.icon-meal1.h3like{
  padding-left: 42px;          /* ← アイコンと文字の距離（今より+8〜12px目安） */
  background-position: left 4px center; /* アイコン位置の微調整 */
}

/* =========================================================
  「直近のお料理一例」PDF風：右側 写真2段（上：大／下：小＋説明）
========================================================= */

.list-half .image.meal-photo-stack{
  display: grid;
  gap: 14px;
}

.meal-photo-main img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px 0 10px 0;
}

.meal-photo-subrow{
  display: grid;
  grid-template-columns: 58% 1fr;
  gap: 12px;
  align-items: start;
}

.meal-photo-sub{
  margin: 0;
  padding: 10px;
  background: #f3e7a3;
  border-radius: 10px 0 10px 0;
}

/* あなたの .image.image-half img { width:60% } の影響を確実に回避 */
.meal-photo-sub img{
  width: 100% !important;
  height: auto;
  display: block;
  border-radius: 8px 0 8px 0;
}

.meal-subnote{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

@media (max-width: 640px){
  .meal-photo-subrow{
    grid-template-columns: 1fr;
  }
  .meal-subnote{
    font-size: 13px;
  }
}

/* =========================================================
  スマホでも「直近のお料理一例」は控えめサイズにする
========================================================= */
@media (max-width: 640px){

  /* 下段の写真ブロックを中央寄せ */
  .meal-photo-sub{
    max-width: 78%;      /* ← メインより小さくする割合（70～85%で調整可） */
    margin: 0 auto;
  }

  /* 説明文も写真幅に合わせて中央寄せ */
  .meal-subnote{
    text-align: center;
    max-width: 85%;
    margin: 0.6em auto 0;
  }

  /* 上段メイン写真はそのままフル幅 */
  .meal-photo-main img{
    width: 100%;
  }
}

/* =========================================================
  スマホ：直近のお料理一例を「小さく・左寄せ」に調整
========================================================= */
@media (max-width: 640px){

  /* 小写真をさらに控えめサイズに */
  .meal-photo-sub{
    max-width: 65%;   /* ← 今より小さく（60〜70%で好み調整） */
    margin: 0;        /* 中央寄せ解除 → 左寄せ */
  }

  /* 写真自体も左寄せを確実に */
  .meal-photo-sub img{
    display: block;
    margin: 0;
  }

  /* コメント文も左寄せ・写真幅に合わせる */
  .meal-subnote{
    text-align: left;
    max-width: 65%;
    margin: 0.6em 0 0 0;
  }

  /* メイン写真との間に少し余白を追加（階層感） */
  .meal-photo-subrow{
    margin-top: 0.6rem;
  }
}

/* =========================
   料理長のおいしい便り：本文→写真2枚（PCは横並び／SPは縦）
   ========================= */
.chef-layout{
  display: grid;
  gap: 18px;
}

/* PC（=2カラム）：
   1段目：テキスト（全幅）
   2段目：写真2枚を横並び */
@media (min-width: 641px){
  .chef-layout{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "text text"
      "img1 img2";
    align-items: start;
  }
  .chef-layout > .text{ grid-area: text; }
  .chef-layout > .image:nth-of-type(1){ grid-area: img1; }
  .chef-layout > .image:nth-of-type(2){ grid-area: img2; }
}

/* スマホ：
   テキスト → 写真1 → 写真2（縦積み） */
@media (max-width: 640px){
  .chef-layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "img1"
      "img2";
  }
  .chef-layout > .text{ grid-area: text; }
  .chef-layout > .image:nth-of-type(1){ grid-area: img1; }
  .chef-layout > .image:nth-of-type(2){ grid-area: img2; }
}

/* 念のため：画像をブロック化して幅100% */
.chef-layout .image img{
  display:block;
  width:100%;
  height:auto;
}

/* PC時：写真2枚を中央寄せ */
@media (min-width:641px){

  .chef-layout{
    justify-items:center;   /* 各セル内中央 */
  }

  .chef-layout > .image{
    width:100%;
    max-width:420px;        /* 写真の最大幅（調整可） */
  }

}

/*画像配hiking
---------------------------------------------------------------------------*/
.img_left-hiking {           /* 位置や余白は外側に */
  float: left;
  padding-right: 10px;
  padding-bottom: 10px;
  width: 30%;
  max-width: 400px;
}

.img_left-hiking .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_left-hiking .thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.img_right-hiking {           /* 位置や余白は外側に */
  float: right;
  padding-left: 10px;
  padding-bottom: 10px;
  width: 30%;
  max-width: 400px;
}

.img_right-hiking .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_right-hiking .thumb img {
  display: block;
  width: 100%;
  height: auto;
}


@media screen and (max-width:600px){
.img_left-hiking,
.img_right-hiking {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-top: 10px;
	width: 100%;
	max-width: 400px;
}
}

/* ハイキング特集（このセクションだけ vdl-penletter） */
.hiking-letter{
  font-family: var(--penletter);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.55;
}

/* 念のため：中の要素にも継承を強める（他の指定に負ける時だけ） */
.hiking-letter p,
.hiking-letter .lr5{
  font-family: inherit;
}

/* ハイキング特集タイトルだけサイズ調整 */
.chef-letter > p:first-of-type{
  font-size: 1.35em;   /* ← 数値だけで微調整できます（1.2〜1.6推奨） */
  line-height: 1.3;
}