@charset "UTF-8";
/* ==========================================================================
   児童発達支援事業 iroiro（いろいろ）— LP スタイル
   Claude Design プロトタイプ「iroiro LP.dc.html」の実装
   クラス接頭辞: iro- ／ セクション単位でブロック分割（WordPressテーマ化を見据えて）
   ========================================================================== */

/* --------------------------------------------------------------------------
   00. 基盤
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #fffdf9;
  font-family: "Noto Sans JP", sans-serif;
  color: #5b5049;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: #ee8ca6; text-decoration: none; }
a:hover { color: #e26b8c; }

/* ヘッダーは sticky のため overflow クリップの外に置く */
.iro-wrap { overflow-x: hidden; }

.iro-inner { position: relative; z-index: 1; margin: 0 auto; }

.iro-wave { display: block; width: 100%; height: 74px; }

/* 見出し（②〜⑦共通） */
.iro-h2 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.06em;
  color: #57493f;
}
.iro-h2--center { text-align: center; letter-spacing: 0.1em; }

/* 注記 */
.iro-note {
  text-align: center;
  font-size: 13.5px;
  color: #7d7167;
  letter-spacing: 0.04em;
}

/* ロゴ（i-r-o-i-r-o の6色） */
.iro-logo {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  display: flex;
  gap: 1px;
}
.iro-logo > span:nth-child(1),
.iro-logo > span:nth-child(4) { color: #f2a0b5; }
.iro-logo > span:nth-child(2) { color: #f6b96a; }
.iro-logo > span:nth-child(3) { color: #8fcf9d; }
.iro-logo > span:nth-child(5) { color: #7fbde0; }
.iro-logo > span:nth-child(6) { color: #b7a2dd; }
.iro-logo--sm { font-size: 27px; letter-spacing: 0.14em; }
.iro-logo--lg { font-size: 42px; letter-spacing: 0.12em; }

/* CTAボタン */
.iro-btn-primary {
  display: inline-block;
  background: #f4879f;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.08em;
  padding: 17px 46px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(244, 135, 159, 0.34);
  transition: background 0.2s ease, transform 0.2s ease;
}
.iro-btn-primary:hover { background: #ea6f8c; color: #fff; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   01. 装飾（deco）— アニメーションと配置
   -------------------------------------------------------------------------- */
@keyframes iroFloat   { 0%,100% { transform: translateY(0) rotate(0deg); }           50% { transform: translateY(-12px) rotate(5deg); } }
@keyframes iroSway    { 0%,100% { transform: translate(0,0) rotate(-5deg); }         50% { transform: translate(7px,-9px) rotate(7deg); } }
@keyframes iroTwinkle { 0%,100% { transform: scale(1) rotate(0deg); opacity: 0.45; } 50% { transform: scale(1.22) rotate(18deg); opacity: 0.9; } }
@keyframes iroDrift   { 0%,100% { transform: translate(0,0); }                       33% { transform: translate(10px,-8px); } 66% { transform: translate(-8px,6px); } }

.iro-deco {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}

img[src*="deco-star"]    { animation: iroFloat   7.5s ease-in-out infinite; }
img[src*="deco-flower"]  { animation: iroSway    9.5s ease-in-out infinite; }
img[src*="deco-leaf"]    { animation: iroSway     12s ease-in-out infinite; }
img[src*="deco-branch"]  { animation: iroSway     15s ease-in-out infinite; }
img[src*="deco-sparkle"] { animation: iroTwinkle   5s ease-in-out infinite; }
img[src*="deco-circles"] { animation: iroFloat     9s ease-in-out infinite; }
img[src*="deco-dots"]    { animation: iroDrift    18s ease-in-out infinite; }

/* 個別のアニメーション上書き（プロトタイプのインライン指定を再現） */
img[src*="deco-"].iro-af7  { animation: iroFloat  7s ease-in-out infinite; }
img[src*="deco-"].iro-af8  { animation: iroFloat  8s ease-in-out infinite; }
img[src*="deco-"].iro-af9  { animation: iroFloat  9s ease-in-out infinite; }
img[src*="deco-"].iro-af10 { animation: iroFloat 10s ease-in-out infinite; }

/* 同一セクション内の deco をずらして動かす */
section > img:nth-of-type(2) { animation-delay: -1.6s; }
section > img:nth-of-type(3) { animation-delay: -3.2s; }
section > img:nth-of-type(4) { animation-delay: -4.8s; }
section > img:nth-of-type(5) { animation-delay: -6.4s; }
section > img:nth-of-type(6) { animation-delay: -8s; }

@media (prefers-reduced-motion: reduce) {
  img[src*="deco-"] { animation: none !important; }
}

/* 配置：①ヒーロー */
.iro-d-top-1 { left: 3%;    top: 60px;     width: 34px;  opacity: 0.75; }
.iro-d-top-2 { left: 40%;   top: 24px;     width: 30px;  opacity: 0.6; }
.iro-d-top-3 { left: 1.5%;  bottom: 60px;  width: 44px;  opacity: 0.8; }
.iro-d-top-4 { right: 0;    bottom: 0;     width: 340px; opacity: 0.4; }
.iro-d-top-5 { left: -60px; top: 10px;     width: 260px; opacity: 0.3; }
.iro-d-top-6 { left: 26%;   bottom: 96px;  width: 34px;  opacity: 0.5; }
.iro-d-top-7 { right: 3%;   bottom: 130px; width: 26px;  opacity: 0.55; }
.iro-d-top-8 { left: 20%;   top: 132px;    width: 22px;  opacity: 0.5; }
.iro-d-hero-leaf    { left: -34px;  bottom: 26px; width: 62px; opacity: 0.9; }
.iro-d-hero-circles { right: -10px; top: -22px;   width: 56px; opacity: 0.75; }

/* 配置：②想い */
.iro-d-omoi-1 { left: 0;      top: 90px;    width: 92px;  opacity: 0.7; }
.iro-d-omoi-2 { left: 6%;     bottom: 70px; width: 26px;  opacity: 0.6; }
.iro-d-omoi-3 { right: 4%;    top: 46px;    width: 40px;  opacity: 0.7; }
.iro-d-omoi-4 { right: -40px; bottom: 40px; width: 250px; opacity: 0.32; }
.iro-d-omoi-5 { left: 44%;    bottom: 40px; width: 22px;  opacity: 0.5; }
.iro-d-omoi-6 { left: 30%;    top: 24px;    width: 32px;  opacity: 0.55; }
.iro-d-omoi-leaf { right: -22px; bottom: -16px; width: 54px; opacity: 0.85; }

/* 配置：③療育内容 */
.iro-d-ryo-1 { right: 5%;   top: 40px;    width: 28px;  opacity: 0.6; }
.iro-d-ryo-2 { left: 4%;    top: 66px;    width: 28px;  opacity: 0.6; }
.iro-d-ryo-3 { right: 1%;   bottom: 90px; width: 48px;  opacity: 0.65; }
.iro-d-ryo-4 { left: -50px; bottom: 20px; width: 240px; opacity: 0.3; }
.iro-d-ryo-5 { left: 46%;   top: 22px;    width: 26px;  opacity: 0.5; }

/* 配置：④1日の流れ */
.iro-d-flow-1 { right: 4%;    top: 120px;   width: 40px;  opacity: 0.8; }
.iro-d-flow-2 { left: 3%;     top: 150px;   width: 26px;  opacity: 0.6; }
.iro-d-flow-3 { left: 8%;     bottom: 60px; width: 34px;  opacity: 0.55; }
.iro-d-flow-4 { right: -40px; bottom: 10px; width: 260px; opacity: 0.3; }
.iro-d-flow-5 { left: 42%;    bottom: 24px; width: 30px;  opacity: 0.6; }

/* 配置：⑤ご利用までの流れ */
.iro-d-riyou-1 { left: 2%;     bottom: 120px; width: 58px;  opacity: 0.8; }
.iro-d-riyou-2 { right: 5%;    top: 70px;     width: 28px;  opacity: 0.6; }
.iro-d-riyou-3 { right: -14px; bottom: 150px; width: 84px;  opacity: 0.6; }
.iro-d-riyou-4 { left: -50px;  top: 20px;     width: 240px; opacity: 0.28; }
.iro-d-riyou-5 { left: 34%;    bottom: 22px;  width: 22px;  opacity: 0.5; }

/* 配置：⑥アクセス */
.iro-d-acc-1 { left: -18px;  top: 120px;   width: 88px;  opacity: 0.6; }
.iro-d-acc-2 { right: 4%;    bottom: 96px; width: 36px;  opacity: 0.65; }
.iro-d-acc-3 { left: 30%;    top: 26px;    width: 24px;  opacity: 0.55; }
.iro-d-acc-4 { right: -30px; top: 10px;    width: 230px; opacity: 0.28; }

/* 配置：⑦お問い合わせ */
.iro-d-con-1 { left: 8%;     top: 46px;     width: 26px;  opacity: 0.7; }
.iro-d-con-2 { right: 9%;    top: 60px;     width: 24px;  opacity: 0.6; }
.iro-d-con-3 { left: 4%;     bottom: 60px;  width: 40px;  opacity: 0.7; }
.iro-d-con-4 { right: 3%;    bottom: 70px;  width: 46px;  opacity: 0.65; }
.iro-d-con-5 { left: 16%;    top: 130px;    width: 30px;  opacity: 0.5; }
.iro-d-con-6 { right: -40px; bottom: -20px; width: 260px; opacity: 0.3; }

/* --------------------------------------------------------------------------
   02. ヘッダー
   -------------------------------------------------------------------------- */
.iro-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 249, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #f4ece2;
}
.iro-header__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.iro-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  color: #6b6058;
}
.iro-nav a { color: #6b6058; padding: 8px 14px; white-space: nowrap; }
.iro-nav a:hover { color: #ee8ca6; }
.iro-nav__sep { color: #e2d8cc; }

.iro-header__cta {
  margin-left: auto;
  flex: none;
  background: #f4879f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(244, 135, 159, 0.32);
  transition: background 0.2s ease;
}
.iro-header__cta:hover { background: #ea6f8c; color: #fff; }

.iro-burger {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  border: none;
  background: #fdeef1;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.iro-burger:hover { background: #fbe0e7; }
.iro-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #d97694; }

.iro-drawer {
  border-top: 1px solid #f4ece2;
  background: #fffdf9;
  padding: 10px 28px 18px;
  display: grid;
  gap: 2px;
}
.iro-drawer[hidden] { display: none; }
.iro-drawer a {
  color: #6b6058;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 6px;
  border-bottom: 1px solid #f7f0e8;
}
.iro-drawer a:last-child { border-bottom: none; }
.iro-drawer a:hover { color: #ee8ca6; }

/* --------------------------------------------------------------------------
   03. ①ヒーロー
   -------------------------------------------------------------------------- */
.iro-hero {
  position: relative;
  background: linear-gradient(170deg, #fffdf9 0%, #fdf6ef 55%, #f7f4ec 100%);
  padding: 54px 0 10px;
}
.iro-hero__inner {
  max-width: 1160px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 40px;
  align-items: center;
}
.iro-h1 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.34;
  letter-spacing: 0.02em;
  color: #57493f;
  margin: 0 0 26px;
}
.iro-h1__i  { color: #f2849f; font-size: 1.16em; }
.iro-h1__ro { color: #8dcb9c; font-size: 1.16em; }

.iro-hero__eyebrow { margin: 0 0 4px; font-size: 15px; font-weight: 500; letter-spacing: 0.08em; color: #7d7167; }
.iro-hero__name { margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; }
.iro-hero__kana { font-size: 15px; color: #8a7e73; letter-spacing: 0.06em; }
.iro-hero__org { margin: 0 0 28px; font-size: 13.5px; line-height: 1.85; color: #7d7167; letter-spacing: 0.03em; }

.iro-hero__figure { position: relative; }
.iro-hero__photo {
  width: 100%;
  height: 470px;
  object-fit: cover;
  object-position: 78% 55%;
  border-radius: 46% 54% 40% 44% / 52% 48% 56% 46%;
  box-shadow: 0 16px 40px rgba(120, 100, 80, 0.14);
}
.iro-hero__wave { display: block; width: 100%; height: 78px; margin-top: -10px; }

/* --------------------------------------------------------------------------
   04. ②わたしたちの想い
   -------------------------------------------------------------------------- */
.iro-omoi { position: relative; background: #eff6ef; padding: 26px 0 0; }
.iro-omoi__inner {
  max-width: 1100px;
  padding: 20px 28px 40px;
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: 54px;
  align-items: center;
}
.iro-omoi__h2 { margin: 0 0 24px; }
.iro-omoi__lead {
  margin: 0 0 20px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 16.5px;
  line-height: 2;
  color: #57493f;
  text-wrap: pretty;
  line-break: strict;
}
.iro-omoi__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 2.05;
  color: #5f564d;
  text-wrap: pretty;
  line-break: strict;
}
/* 理念の核になる2つの引用だけブランドカラーで拾う */
.iro-omoi__quote { color: #d9789a; font-weight: 500; }
.iro-omoi__figure { position: relative; }
.iro-omoi__photo {
  width: 100%;
  height: 330px;
  object-fit: cover;
  border-radius: 44% 56% 48% 52% / 54% 42% 58% 46%;
  box-shadow: 0 14px 34px rgba(120, 110, 80, 0.14);
}

/* --------------------------------------------------------------------------
   05. ③療育内容
   -------------------------------------------------------------------------- */
.iro-ryoiku { position: relative; background: #fffaf3; padding: 10px 0 0; }
.iro-ryoiku__inner { max-width: 1160px; padding: 6px 28px 46px; }
.iro-ryoiku__h2 { margin: 0 0 40px; }

.iro-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.iro-care {
  border-radius: 20px;
  padding: 30px 24px 28px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.iro-care__icon { width: 76px; height: 76px; object-fit: contain; margin: 0 auto 18px; }
.iro-care__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 17.5px;
  color: #57493f;
  margin: 0 0 12px;
  letter-spacing: 0.04em;
}
.iro-care__text { margin: 0; font-size: 13.5px; line-height: 1.85; color: #6f645b; text-align: left; line-break: strict; }

.iro-care--pink   { background: #fdeef1; }
.iro-care--green  { background: #eef7ee; }
.iro-care--blue   { background: #eaf3fa; }
.iro-care--orange { background: #fdf3e6; }
.iro-care--pink:hover   { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(180, 140, 140, 0.16); }
.iro-care--green:hover  { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(140, 170, 140, 0.16); }
.iro-care--blue:hover   { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(140, 160, 180, 0.16); }
.iro-care--orange:hover { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(190, 160, 120, 0.16); }

/* 「スモールステップでの成長」だけ長いため字送りを詰める */
.iro-care__title--tight { font-size: 15.5px; letter-spacing: 0; white-space: nowrap; }

/* --------------------------------------------------------------------------
   06. ④1日の流れ
   -------------------------------------------------------------------------- */
.iro-flow { position: relative; background: #f4eef8; padding: 6px 0 0; }
.iro-flow__inner { max-width: 1160px; padding: 6px 28px 44px; }
.iro-flow__h2 { margin: 0 0 26px; }

.iro-flow__pills { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-bottom: 38px; }
.iro-pill {
  background: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  padding: 9px 26px;
  border-radius: 999px;
}
.iro-pill--am { border: 2px solid #f3a8bd; color: #e2789a; }
.iro-pill--pm { border: 2px solid #b9a6de; color: #8f79c4; }

.iro-flow__grid { gap: 10px; align-items: start; }
.iro-flow__item { text-align: center; position: relative; }
.iro-heart { position: absolute; left: 100%; top: 68px; width: 30px; transform: translateX(-50%); }
.iro-flow__photo {
  width: 155px;
  height: 155px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 16px;
  border: 5px solid #fff;
  box-shadow: 0 8px 20px rgba(130, 110, 150, 0.16);
}
.iro-flow__label {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #57493f;
}
.iro-flow__num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f4879f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.iro-flow__text {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: #6f645b;
  text-align: left;
  /* 長音符や小書き仮名が行頭に来ないように（禁則処理） */
  line-break: strict;
}
.iro-flow__note { margin: 34px 0 0; }

/* --------------------------------------------------------------------------
   07. ⑤ご利用までの流れ
   -------------------------------------------------------------------------- */
.iro-riyou { position: relative; background: #fdf6ee; padding: 6px 0 0; }
.iro-riyou__inner { max-width: 1100px; padding: 6px 28px 46px; }
.iro-riyou__h2 { margin: 0 0 22px; }
.iro-riyou__tag { display: flex; justify-content: center; margin-bottom: 40px; }
.iro-pill--age { border: 2px solid #f0d3ae; color: #c08a4e; }

.iro-riyou__rows { position: relative; }
.iro-riyou__row { position: relative; z-index: 1; gap: 20px 16px; }
.iro-riyou__row--1 { margin-bottom: 34px; }

.iro-step { text-align: center; position: relative; }
.iro-arrow { position: absolute; left: 100%; top: 96px; width: 26px; transform: translateX(-50%); }
/* ラベルが1行のステップと2行のステップでアイコン・本文の開始位置がずれるため、
   2行ぶん（14.5px × 1.5 × 2 ≒ 44px）を確保して行内で高さを揃える */
.iro-step__head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  min-height: 44px;
  margin-bottom: 10px;
}
.iro-step__num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 15px;
  display: grid;
  place-items: center;
}
.iro-step__num--1 { background: #f4879f; }
.iro-step__num--2 { background: #f2ab5c; }
.iro-step__num--3 { background: #f0c14b; }
.iro-step__num--4 { background: #7cc6ae; }
.iro-step__num--5 { background: #6fc3c8; }
.iro-step__num--6 { background: #86b8e0; }
.iro-step__num--7 { background: #ab9adb; }
.iro-step__label {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  color: #57493f;
  text-align: left;
  line-height: 1.5;
}
.iro-step__icon { width: 108px; height: 108px; object-fit: contain; margin: 0 auto; }
.iro-step__text {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.85;
  color: #6f645b;
  text-align: left;
  line-break: strict;
}
.iro-riyou__note { margin: 30px 0 0; }

/* --------------------------------------------------------------------------
   08. ⑥アクセス
   -------------------------------------------------------------------------- */
.iro-access { position: relative; background: #edf5ef; padding: 6px 0 0; }
.iro-access__inner {
  max-width: 1100px;
  padding: 14px 28px 46px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 46px;
  align-items: center;
}
.iro-access__h2 { font-size: 32px; letter-spacing: 0.08em; margin: 0 0 22px; }
.iro-access__text { margin: 0; font-size: 16px; line-height: 2.05; color: #5f564d; }
.iro-access__cta { margin: 22px 0 0; }

.iro-map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #f6faf4;
  height: 260px;
  box-shadow: 0 10px 26px rgba(110, 120, 100, 0.14);
  border: 4px solid #fff;
}
.iro-map__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.iro-btn-outline {
  display: inline-block;
  background: #fff;
  color: #d1618a;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 24px;
  border-radius: 999px;
  border: 2px solid #f6c3d2;
  transition: background 0.2s ease;
}
.iro-btn-outline:hover { background: #fff5f8; color: #d1618a; }

/* --------------------------------------------------------------------------
   09. ⑦お問い合わせ
   -------------------------------------------------------------------------- */
.iro-contact {
  position: relative;
  background: linear-gradient(140deg, #fde9ee 0%, #fdf0e4 48%, #fbf5d8 100%);
  padding: 16px 0 56px;
}
.iro-contact__inner { max-width: 720px; padding: 0 28px; text-align: center; }
.iro-contact__h2 { font-size: 30px; letter-spacing: 0.14em; margin: 0 0 30px; }
.iro-contact__actions { display: grid; gap: 14px; }

.iro-contact__cta {
  display: block;
  padding: 17px;
  box-shadow: 0 8px 20px rgba(244, 135, 159, 0.3);
}
.iro-contact__cta:hover { transform: none; }

/* 申込窓口が決まるまでの注記。窓口確定時に HTML ごと削除する */
.iro-contact__pending {
  margin: -6px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #9b8f84;
  letter-spacing: 0.02em;
  line-break: strict;
}

.iro-contact__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #d1618a;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  padding: 15px;
  border-radius: 999px;
  border: 2px solid #f6c3d2;
  transition: background 0.2s ease;
}
.iro-contact__sns:hover { background: #fff5f8; color: #d1618a; }

.iro-contact__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.iro-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: #8a7e73;
  font-size: 15px;
  font-weight: 500;
  padding: 14px;
  border-radius: 999px;
  border: 2px solid #f2e3dc;
}
.iro-contact__fine { margin: 34px 0 0; font-size: 12.5px; color: #9b8f84; letter-spacing: 0.03em; }
.iro-contact__fine + .iro-contact__fine { margin: 12px 0 0; }

/* --------------------------------------------------------------------------
   10. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
  .iro-nav { display: none !important; }
  .iro-burger { display: flex !important; }
}
@media (min-width: 1121px) {
  .iro-drawer { display: none; }
}

@media (max-width: 900px) {
  .iro-split { grid-template-columns: 1fr !important; }
  .iro-4col { grid-template-columns: repeat(2, 1fr) !important; }
  .iro-h1 { font-size: 40px !important; }
  .iro-heart { display: none !important; }
  .iro-arrow { display: none !important; }
  .iro-rev > div { grid-column: auto !important; }

  /* 1カラムになったらヒーローのコピーを中央揃えにする */
  .iro-hero__copy { text-align: center; }
  .iro-hero__copy .iro-hero__name { justify-content: center; }

  /* ②の見出しも中央に（本文は長文なので左揃えのまま） */
  .iro-omoi__h2 { text-align: center; }

  /* ⑥アクセスは見出し・住所・ボタンまとめて中央に */
  .iro-access__info { text-align: center; }

  /* --- スマホのスクロール性能対策 ---------------------------------------
     1. 背景ぼかしは固定ヘッダーの裏をスクロールのたびに再計算するため、
        スマホでは無効化して不透明背景に置き換える
     2. 42点ある装飾のアニメーションはスクロール中も動き続けて
        描画コストになるため、スマホでは静止させる（表示は残す）
     PCでは従来どおり両方とも有効。 */
  .iro-header {
    background: #fffdf9;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  img[src*="deco-"] { animation: none !important; }
}

@media (max-width: 560px) {
  .iro-4col { grid-template-columns: 1fr !important; }
  .iro-h1 { font-size: 34px !important; }
  /* --- 以下はプロトタイプに無い実装側の追記（狭幅での破綻回避） --- */
  /* ヘッダーが 375px 幅で 0.6px はみ出すため詰める */
  .iro-header__inner { padding: 0 16px; gap: 12px; }
  .iro-logo--sm { font-size: 23px; letter-spacing: 0.1em; }
  .iro-header__cta { font-size: 13px; padding: 10px 16px; }
  .iro-h2 { font-size: 27px; }
  .iro-access__h2 { font-size: 26px; }
  .iro-contact__h2 { font-size: 24px; }
  .iro-hero { padding: 34px 0 10px; }
  .iro-hero__photo { height: 320px; }
  .iro-omoi__photo { height: 260px; }
  .iro-omoi__inner { gap: 34px; }
  .iro-access__inner { gap: 30px; }
  .iro-contact__pair { grid-template-columns: 1fr; }
  .iro-care__title--tight { white-space: normal; font-size: 17.5px; letter-spacing: 0.04em; }
}