/* /jp/mn/122200/assets/style.css
   “しば漬LPくらい雑誌っぽく”寄せる版
   影響範囲は .mn122200 に限定
*/

.mn122200{
  color:#1f1f1f;
  line-height: 1.9;
  letter-spacing: .02em;
}

/* コンテナ（サイト共通の max-width に合わせる） */
.mn122200 .l-container{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

/* reveal（ふわっと） */
.mn122200 [data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.mn122200 [data-reveal].is-inview{
  opacity: 1;
  transform: translateY(0);
}

/* ボタン */
.mn122200 .btn{
  display:inline-block;
  text-decoration:none;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-size: 14px;
}
.mn122200 .btn.primary{
  background:#ff6a00;
  border-color:#ff6a00;
  color:#fff;
}
.mn122200 .btn.ghost{
  background: transparent;
}

/* HERO */
.mn122200 .hero{
  background: #fbf2ea;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 26px 0 18px;
}
.mn122200 .kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
  color:#7b5b41;
  margin: 0 0 10px;
}
.mn122200 .kicker .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background:#ff6a00;
  display:inline-block;
}
.mn122200 .hero__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.mn122200 .hero__title{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.15;
}
.mn122200 .hero__title small{
  display:block;
  font-size: 14px;
  color:#6b5a4d;
  margin-top: 6px;
}
.mn122200 .hero__lead{
  margin: 0 0 14px;
  color:#2c2c2c;
}
.mn122200 .hero__cta{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.mn122200 .hero__bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color:#2b2b2b;
}
.mn122200 .hero__note{
  margin: 12px 0 0;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mn122200 .tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,106,0,.10);
  border: 1px solid rgba(255,106,0,.20);
  color:#7b3c12;
}

/* HERO collage（雑誌コラージュ） */
.mn122200 .hero__collage{
  position: relative;
  min-height: 520px;
  padding-left: 36px; /* spine分 */
}
.mn122200 .hero__spine{
  position:absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 28px;
  border-right: 1px solid rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}
.mn122200 .hero__spine span{
  writing-mode: vertical-rl;
  letter-spacing: .15em;
  font-size: 12px;
  color: rgba(0,0,0,.50);
}

.mn122200 .shot{
  position:absolute;
  margin: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.mn122200 .shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.mn122200 .shot figcaption{
  font-size: 12px;
  padding: 8px 10px;
  color:#6b5a4d;
  background: rgba(255,255,255,.85);
  border-top: 1px solid rgba(0,0,0,.06);
  border-radius: 0;
}

/* 配置（重ねて“貼った感”を消す） */
.mn122200 .shot--main{
  left: 36px; /* ★36→18（packとの重なり増える） */
  top: 0;
  width: min(520px, 100%);
  height: 360px;
  transform: rotate(-0.6deg);
  z-index: 2;
}
/* 既存 .shot はそのまま使う。ただし pack だけ角丸無し */
.mn122200 .shot--pack{
  right: -100px;          /* ちょい右へ（“右寄り”） */
  bottom: 60px;         /* 少し上げて重なりを綺麗に */
  width: 280px;         /* 二回り小さく */
  height: 360px;        /* 比率キープ（縦長） */
  transform: rotate(1.4deg);
  border-radius: 0;     /* ★角丸無し */
  overflow: visible;    /* 角を殺さない */
  z-index: 3;           /* メイン写真の上に出す */
}

/* ぬかねこ：主役にしない（右下案内係） */
.mn122200 .nukaneko{
  position:absolute;
  left: 44px;
  bottom: 22px;
  display:flex;
  align-items:flex-end;
  gap: 10px;
  pointer-events: none;
  opacity: .95;
}
.mn122200 .nukaneko img{
  width: 44px;
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.14));
}
.mn122200 .nukaneko__balloon{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  color:#3a3a3a;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* BAND（章立て：雑誌の見開き風） */
.mn122200 .band{
  padding: 42px 0;
}
.mn122200 .band__head h2{
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: .03em;
}
.mn122200 .band__head .sub{
  margin: 0 0 18px;
  color: rgba(0,0,0,.68);
}
.mn122200 .band--warm{
  background: #fff;
}
.mn122200 .band--paper{
  background: #faf7f2;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mn122200 .band--dark{
  background: #231a14;
  color: #f7f0ea;
}
.mn122200 .band__head--light .sub{
  color: rgba(247,240,234,.76);
}

/* cards */
.mn122200 .cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mn122200 .card{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,.06);
}
.mn122200 .card h3{
  margin: 0 0 8px;
  font-size: 16px;
}
.mn122200 .card p{
  margin: 0 0 8px;
}
.mn122200 .card .mini{
  margin: 0;
  font-size: 12px;
  color: rgba(0,0,0,.60);
}

/* HOWTO */
.mn122200 .howto{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 16px;
  align-items: start;
}
.mn122200 .howto__lead{
  margin: 0 0 12px;
  color: rgba(0,0,0,.70);
}
.mn122200 .steps{
  list-style:none;
  padding:0;
  margin: 0;
  display:grid;
  gap: 10px;
}
.mn122200 .steps li{
  display:flex;
  gap: 12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.mn122200 .steps .num{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background:#ff6a00;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  flex: 0 0 auto;
}
.mn122200 .steps .body h3{
  margin: 0 0 4px;
  font-size: 16px;
}
.mn122200 .steps .body p{
  margin: 0;
}
.mn122200 .tips{
  margin-top: 14px;
  background:#fff;
  border: 1px dashed rgba(0,0,0,.22);
  border-radius: 14px;
  padding: 14px;
}
.mn122200 .tips h3{
  margin: 0 0 8px;
  font-size: 16px;
}
.mn122200 .tips ul{
  margin: 0;
  padding-left: 18px;
}

/* howto figure */
.mn122200 .howto__figure{
  margin: 0;
  background:#fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.mn122200 .howto__figure img{
  width: 100%;
  height: auto;
  display:block;
}
.mn122200 .howto__figure figcaption{
  font-size: 12px;
  padding: 8px 10px;
  color:#6b5a4d;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(0,0,0,.06);
}
.mn122200 .howto__side{
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid rgba(255,106,0,.65);
  background: rgba(255,255,255,.55);
  border-radius: 12px;
}
.mn122200 .sideLabel{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(0,0,0,.55);
  text-transform: uppercase;
}
.mn122200 .sideText{
  margin: 0;
  color: rgba(0,0,0,.75);
}

/* recipes */
.mn122200 .recipeGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mn122200 .recipeCard__link{
  display:block;
  color: inherit;
  text-decoration:none;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 20px 48px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mn122200 .recipeCard__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(0,0,0,.34);
}
.mn122200 .recipeCard__photo{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow:hidden;
}
.mn122200 .recipeCard__photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.mn122200 .badge2{
  position:absolute;
  left: 10px;
  top: 10px;
  background: rgba(255,106,0,.92);
  color:#fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}
.mn122200 .recipeCard__body{
  padding: 14px 14px 16px;
}
.mn122200 .recipeCard__body h3{
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: .02em;
}
.mn122200 .recipeCard__body .meta{
  margin: 0 0 8px;
  font-size: 13px;
  color: rgba(247,240,234,.75);
}
.mn122200 .recipeCard__body .desc{
  margin: 0 0 10px;
  color: rgba(247,240,234,.90);
}
.mn122200 .recipeCard__body .go{
  margin: 0;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(247,240,234,.92);
}

.mn122200 .note{
  font-size: 13px;
  margin-top: 14px;
}
.mn122200 .note--light{
  color: rgba(247,240,234,.70);
}

/* end */
.mn122200 .band--end{
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
}
.mn122200 .end__copy{
  margin: 0;
  font-size: 18px;
}
.mn122200 .end__mini{
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}
.mn122200 .toTop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  text-decoration:none;
  margin-top: 14px;
}

/* responsive */
@media (max-width: 980px){
  .mn122200 .hero__grid{ grid-template-columns: 1fr; }
  .mn122200 .hero__collage{ min-height: 520px; }
  .mn122200 .shot--main{ width: 100%; height: 340px; right: 0; }
  .mn122200 .shot--pack{
    width: 260px;
    height: 340px;
    right: -6px;
    bottom: 90px;
  }
}

@media (max-width: 900px){
  .mn122200 .cards{ grid-template-columns: 1fr; }
  .mn122200 .howto{ grid-template-columns: 1fr; }
  .mn122200 .recipeGrid{ grid-template-columns: 1fr; }
  .mn122200 .hero__collage{ padding-left: 0; }
  .mn122200 .hero__spine{ display:none; }
  .mn122200 .shot--main{ left: 0; }
  .mn122200 .shot--pack{ right: 20px; }
}

/* ===============================
   ぬかねこ モーション追加（安全版）
   =============================== */

.mn122200 .nukaneko{
  --nkx: 0px;
  --nky: 0px;
  transform: translate(var(--nkx), var(--nky));
  transition: transform .25s ease;
}

/* 呼吸アニメ */
.mn122200 .nukaneko.is-idle img{
  animation: nkBreath 4s ease-in-out infinite;
}

@keyframes nkBreath{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

/* レシピヒント */
.mn122200 .nukaneko.is-hint .nukaneko__balloon{
  animation: nkHint 2s ease forwards;
}

@keyframes nkHint{
  0%{ opacity:0; transform: translateY(6px); }
  20%{ opacity:1; transform: translateY(0); }
  80%{ opacity:1; }
  100%{ opacity:0; }
}

.txetmin{
   font-size: 0.8em;
    vertical-align:baseline;}

/* ==================================
   CTAボタン統一 + hover背景変化
   ================================== */

/* 3つとも初期状態を統一 */
.mn122200 .hero__cta .btn{
  background:#ffffff;               /* 初期色 */
  color:#333;
  border:1px solid rgba(0,0,0,.15);
  transition: 
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .15s ease;
}

/* hoverでアクセント */
.mn122200 .hero__cta .btn:hover{
  background:#ff6a00;
  color:#fff;
  border-color:#ff6a00;
  transform: translateY(-2px);
}

/* ==================================
   アンカーずれ対策（固定ヘッダー対策）
   ================================== */

#howto,
#recipes,
#points{
  scroll-margin-top: 120px; /* ヘッダー高さに合わせて調整 */
}

.mn122200 .hero__cta .btn:hover{
  background:#ff6a00;
  color:#fff;
  border-color:#ff6a00;
  box-shadow: 0 12px 26px rgba(255,106,0,.25);
  transform: translateY(-2px);
}