@charset "utf-8";

/* =========================================================
   お問い合わせ（contact.html）専用スタイル
   共通部分は style.css を先に読み込むこと
   ※ 現時点は PC レイアウトのみ
   ========================================================= */

:root {
  --line-green: #06c755;
  --line-green-dark: #049a42;
  --gold-deep: #8a6f3c;
  --gray-slate: #7a8499;
}

/* ---------- 下層ページのヘッダー（帯あり） ---------- */
.gnav-bar { padding: 20px 0; background: var(--navy-deep); }

.gnav--solid {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin: 0 auto;
}

/* ---------- パンくず ---------- */
.crumb {
  display: flex;
  align-items: center;
  height: 60px;
  background: var(--paper);
}

.crumb__inner {
  width: min(var(--container-w), 100% - var(--gutter) * 2);
  margin: 0 auto;
  font-size: 16px;
  line-height: 32px;
  color: var(--navy);
}

.crumb__inner span { margin: 0 12px; }
.crumb__inner a { transition: color .25s ease; }
.crumb__inner a:hover { color: var(--gold); }

/* 装飾ラインの長さ違い */
.sec-en__rule--xs { flex-basis: 250px; }


/* =========================================================
   FV
   ========================================================= */
.shero {
  position: relative;
  height: 900px;
  padding: 100px 0 200px;
  overflow: hidden;
  background: radial-gradient(137.8% 295.8% at 97.6% 2.6%, #043187 0%, #0a1430 26.9%, #0a1430 80.3%, #052864 100%);
}

.shero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(1422px, 100% - var(--gutter) * 2);
  height: 100%;
  margin: 0 auto;
}

.shero__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.shero__head { display: flex; flex-direction: column; gap: 30px; }

.shero__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  height: 60px;
  padding: 5px 20px;
  background: linear-gradient(102.3deg, #9e8149 .3%, #745820 100%);
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  color: #fff;
}

.shero__badge svg { width: 40px; height: 40px; flex: none; margin-inline: 10px; }

.shero__title {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 64px;
  line-height: 80px;
  color: var(--paper);
}

.shero__rule {
  width: 904px;
  max-width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #ffffff 0%, rgba(66, 80, 103, .2) 100%);
}

.shero__text {
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: .2em;
  color: #fff;
}

.shero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* LINE ボタン / 枠線ボタン */
.btn-line,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 250px;
  height: 65px;
  padding: 15px 30px;
  color: #fff;
}

.btn-line {
  background: var(--line-green);
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
}

.btn-ghost {
  padding: 15px 20px;
  white-space: nowrap;
  border: 1px solid #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 32.4px;
  letter-spacing: 1.08px;
}

.btn-line svg,
.btn-ghost svg { width: 20px; height: 20px; flex: none; }

/* 写真 */
.shero__photo {
  position: relative;
  flex: none;
  width: 480px;
  height: 623px;
}

.shero__photo img {
  position: absolute;
  top: 23px;
  left: 0;
  width: 450px;
  height: 600px;
  max-width: none;
  object-fit: cover;
}

.shero__frame {
  position: absolute;
  top: 0;
  left: 30px;
  width: 450px;
  height: 600px;
  border: 1px solid var(--gold-light);
}

/* ヒーローの軌道装飾（ページ先頭 170px を原点とした配置） */
.shero__orbits {
  position: absolute;
  top: -170px;
  left: 50%;
  margin-left: calc(var(--canvas-w) / -2);
  width: var(--canvas-w);
  height: 1710px;
  /* 文字より前に出さない */
  z-index: 0;
  pointer-events: none;
}

.shero__orbits > span {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
}

.shero__orbit1 {
  width: 3415px; height: 2112px;
  transform: matrix(-0.96593, -0.25882, 0.25882, -0.96593, 2500.90186, 1706.29272) translate(227px, 218px);
}

.shero__orbit2 {
  width: 3001px; height: 2112px;
  transform: matrix(-0.96593, -0.25882, 0.25882, -0.96593, 2500.90186, 1706.29272) matrix(0.96593, -0.25882, 0.25882, 0.96593, 0.18442, 762.21692);
}

.shero__orbit3 {
  width: 3160.86px; height: 2042.64px;
  transform: matrix(-0.96593, -0.25882, 0.25882, -0.96593, 2500.90186, 1706.29272) matrix(0.96593, -0.25882, 0.25882, 0.96593, -99.31792, 935.04083);
}


/* =========================================================
   01 お問い合わせ
   ========================================================= */
.how {
  position: relative;
  padding: 450px 0 120px;
  background: #fff;
}

/* このページの内容：3列×2段 */
.pn--sub { top: -592px; }

.pn__list--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: auto;
}

.pn__list--grid > li { flex: none; min-height: 220px; }

.pn__list--grid > li:nth-child(3n+1)::before { display: none; }

.pn__list--grid > li:nth-child(n+4) { box-shadow: inset 0 1px 0 var(--line-soft); }

.how__inner { display: flex; flex-direction: column; gap: 100px; }

.how__body { display: flex; flex-direction: column; gap: 60px; }

/* ---------- LINE カード ---------- */
.line-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 41px;
  height: 650px;
  margin-bottom: 19px;
  padding: 75px 107px;
  background: #fff;
  border-top: 10px solid var(--line-green);
  box-shadow:
    0 11px 23px rgba(0, 0, 0, .1),
    0 42px 42px rgba(0, 0, 0, .09),
    0 95px 57px rgba(0, 0, 0, .05);
}

.line-card__left { position: relative; z-index: 1; flex: none; width: 630px; }

/* 番号＋バッジ */
.m-top { display: flex; align-items: center; gap: 12px; height: 29px; }

.m-no {
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: 2.56px;
  color: var(--gold);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 25.2px;
  letter-spacing: .56px;
  white-space: nowrap;
}

.pill--line { background: var(--line-green); color: #fff; }
.pill--navy { background: var(--navy); color: #fff; line-height: 20.3px; padding: 1.5px 12px 1.8px; }
.pill--cream { background: #f4ecdc; color: var(--gold-dark); line-height: 20.3px; padding: 1.5px 12px 1.8px; }

.pill--ghost {
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  line-height: 20.3px;
  padding: 1.5px 12px 1.8px;
}

.line-card__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding-top: 13.5px;
  font-weight: 700;
  font-size: 45px;
  line-height: 75.6px;
  color: var(--ink);
}

.line-card__ic { flex: none; width: 62px; height: 62px; }
.line-card__ic img { width: 62px; height: 62px; }

.line-card__id {
  margin-top: 5px;
  padding-bottom: 26px;
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 38px;
  line-height: 68.4px;
  letter-spacing: 1.14px;
  color: var(--navy);
}

.line-points {
  margin-top: 3px;
  border-top: 1px solid var(--line-soft);
}

.line-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 20px;
  line-height: 30.4px;
  color: var(--ink);
}

.line-points li svg { flex: none; width: 24px; height: 24px; }
.line-points b { font-weight: 700; }

.line-card__left .btn-line { margin-top: 36px; }

/* 送信 / 返信の時間ペア */
.time-pair {
  flex: none;
  width: 515px;
  background: var(--line-soft);
  box-shadow: 0 0 0 1px var(--line-soft);
}

.time-pair__row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 33px 34px 34px;
  background: var(--paper);
}

.time-pair__row + .time-pair__row { margin-top: 1px; }

.time-pair__row img {
  flex: none;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 8px 24px rgba(10, 20, 48, .06));
}

.time-pair__row small {
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 25.2px;
  letter-spacing: 1.4px;
  color: var(--gray-slate);
}

.time-pair__row b {
  display: block;
  margin-top: 2px;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 41.93px;
  color: var(--ink);
}

/* 背景の LINE ロゴ文字 */
.line-card__bg {
  position: absolute;
  top: 467px;
  left: 1001px;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 192px;
  line-height: 192px;
  color: rgba(6, 199, 85, .06);
  pointer-events: none;
  user-select: none;
}

/* ---------- その他の連絡方法 ---------- */
.methods { display: flex; gap: 50px; }

.method {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 600px;
  padding: 49.92px 38px;
  background: var(--paper);
}

.method--form {
  background: #fff;
  border-top: 4px solid var(--gold);
  box-shadow:
    2px 8px 18px rgba(0, 0, 0, .1),
    8px 31px 32px rgba(0, 0, 0, .09),
    17px 70px 43px rgba(0, 0, 0, .05);
}

.method__title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
  font-weight: 700;
  font-size: 28.8px;
  line-height: 51.84px;
  color: var(--ink);
}

.method__title img {
  flex: none;
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 8px 24px rgba(10, 20, 48, .06));
}

.method__lead {
  padding-top: 12px;
  font-size: 19px;
  line-height: 35.15px;
  color: var(--ink);
}

.method__duration {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 12px;
  font-weight: 700;
  font-size: 19px;
  line-height: 35.15px;
  color: var(--ink);
}

.method__duration b {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 49.9px;
  line-height: 49.92px;
  color: var(--navy);
}

.method__note {
  margin-top: 14px;
  padding-top: 12.8px;
  border-top: 1px solid var(--line);
  font-weight: 700;
  font-size: 16px;
  line-height: 29.6px;
  color: var(--ink);
}

.method__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 250px;
  height: 65px;
  margin-top: auto;
  padding: 15px 30px;
  background: var(--grad-gold);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 32.4px;
  letter-spacing: 1.08px;
}

.method__btn svg { flex: none; width: 20px; height: 20px; }

.method__tel {
  padding: 16px 0 28px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 45px;
  line-height: 50.4px;
  letter-spacing: .84px;
  color: var(--navy);
}

.method__tel a { transition: color .25s ease; }
.method__tel a:hover { color: var(--gold); }

.method__tel--sub {
  margin-top: 18px;
  padding: 17.5px 0 27.89px;
  border-top: 1px solid var(--line);
  font-size: 32px;
  line-height: 38.4px;
  letter-spacing: .64px;
}

.method__small {
  font-size: 16px;
  line-height: 28.8px;
  color: var(--muted);
}

.method__mail {
  margin-top: 12px;
  padding: 11.5px 16px 11.64px;
  background: #fff;
  font-weight: 700;
  font-size: 19px;
  line-height: 35.15px;
  color: var(--muted);
}


/* =========================================================
   02 お約束
   ========================================================= */
.promise {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  background: radial-gradient(137.8% 295.8% at 97.6% 2.6%, #043187 0%, #0a1430 26.9%, #0a1430 80.3%, #052864 100%);
}

.promise__inner { display: flex; align-items: center; gap: 38px; }

/* ノートPC幅では、お約束の一覧（751px）が入りきるように左側を縮める */
.promise__side {
  flex: 1 1 611px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.promise__closing {
  width: 482px;
  max-width: 100%;
  padding-left: 32px;
  border-left: 2px solid var(--gold);
  border-image: linear-gradient(105.9deg, #9e8149 .6%, #745820 100%) 1;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 56px;
  background: linear-gradient(109.1deg, #9e8149 .8%, #745820 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.promise__list {
  flex: none;
  width: 751px;
  max-width: 100%;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

/* 「初回相談（無料）」の箇条書き（.firsts）と同じ寸法。
   線はすべて同じ白。図形は行の高さの真ん中に置く。 */
.promise__list li {
  position: relative;
  padding: 28px 0 25px 87px;         /* 図形40px＋間隔47px */
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.promise__list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(232, 184, 92, .6);
}

.promise__list li:first-child::before {
  background: url("../svg/icon-first-step.svg") no-repeat center / 40px 40px;
  box-shadow: none;
}

.promise__list b {
  display: block;
  max-width: 664px;
  font-family: var(--f-jp);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: #fff;
  text-wrap: balance;
  word-break: auto-phrase;
}

.promise__list span {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, .7);
}


/* =========================================================
   03 ご連絡のあと
   ========================================================= */
.flow {
  padding: 161.28px 0;
  background: var(--paper);
}

.flow__grid {
  display: grid;
  grid-template-columns: minmax(0, 514fr) minmax(0, 771fr);
  column-gap: 115px;
  align-items: start;
}

.flow__side { display: flex; flex-direction: column; gap: 60px; }

.reply-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 39px 40px 40px;
  background: linear-gradient(149.1deg, #0c1b52 1.4%, #010c21 98.6%);
  box-shadow: 0 24px 60px rgba(10, 20, 48, .06), 0 2px 6px rgba(10, 20, 48, .06);
}

.reply-card__ic {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(232, 184, 92, .45);
}

.reply-card__ic img { width: 76px; height: 76px; }

.reply-card small {
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 25.2px;
  letter-spacing: 1.68px;
  color: rgba(255, 255, 255, .7);
}

.reply-card b {
  display: block;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 46px;
  line-height: 57.5px;
  background: linear-gradient(164.3deg, #f3d493 -15.4%, #e8b85c 36.9%, #b58e4a 115.4%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 手順 */
.steps { position: relative; }

.steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 31px;
  width: 1px;
  height: 936px;
  background: linear-gradient(180deg, #0c1b52 0%, #9e8149 100%);
}

.step {
  position: relative;
  min-height: 148px;
  display: flex;
  gap: 32px;
  padding-bottom: 20px;
}

.step__no {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--navy-deep);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: var(--gold-light);
}

.step__no--light {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--gold-light);
}

.step__no--gold { background: var(--grad-gold); color: #fff; }

.step__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 26px 34px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(10, 20, 48, .06), 0 1px 2px rgba(10, 20, 48, .06);
}

.step__body h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 26px;
  line-height: 37.58px;
  color: var(--ink);
}

.step__body p {
  font-size: 19px;
  line-height: 34.2px;
  color: var(--muted);
}

/* 04（任意）は枠線だけのカード */
.step--ghost .step__body {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* 07 はゴールドのカード */
.step--last { min-height: 186px; padding-top: 26px; }

.step--last .step__body {
  gap: 2.79px;
  background: linear-gradient(119.2deg, #9e8149 .5%, #745820 99.5%);
  box-shadow: 0 24px 60px rgba(10, 20, 48, .06), 0 2px 6px rgba(10, 20, 48, .06);
}

.step--last .step__body h3 {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 49.3px;
  color: #fff;
}

.step--last .step__body p { color: rgba(255, 255, 255, .88); }


/* =========================================================
   04 場所・方法
   ========================================================= */
.place { padding: 161.28px 0; background: #fff; }

.place__body {
  margin-top: 80px;
  padding-bottom: 31px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.place-grid { display: flex; gap: 30px; }

.place-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 400px;
  padding: 54px 35px 0;
  background: var(--paper);
}

.place-card__no {
  position: absolute;
  top: 33px;
  right: 32px;
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: 2.24px;
  color: var(--gold);
}

.place-card__ic {
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 8px 24px rgba(10, 20, 48, .06));
}

.place-card h3 {
  padding-top: 24px;
  font-weight: 700;
  font-size: 28px;
  line-height: 40.6px;
  color: var(--ink);
}

.place-card p {
  font-weight: 700;
  font-size: 16px;
  line-height: 30.4px;
  color: var(--ink);
}

.place-card:first-child p {
  font-size: 19px;
  line-height: 33.25px;
  color: var(--navy);
}

/* 営業情報の表 */
.dtable {
  padding: 40px 0 27px;
  border-top: 6px solid var(--navy-deep);
  border-bottom: 2px solid #d9d9d9;
}

.dtable__row {
  position: relative;
  height: 60px;
  margin: 0;
}

.dtable__row + .dtable__row { margin-top: 27px; }

.dtable__row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #d9d9d9;
}

.dtable dt {
  position: absolute;
  top: 7px;
  left: 0;
  width: 120px;
  white-space: nowrap;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--navy);
}

.dtable dt::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 189px;
  width: 2px;
  height: 45px;
  background: #d9d9d9;
}

.dtable dd {
  padding: 7px 0 0 260px;
  font-size: 24px;
  line-height: 32px;
  color: var(--muted);
}

/* 土日祝の案内 */
.weekend {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 166px;
  padding: 0 42px;
  border: 1px solid var(--gold);
  background: linear-gradient(100.3deg, rgba(158, 129, 73, .14) 3.9%, rgba(158, 129, 73, .03) 96.1%);
}

.weekend__ic {
  flex: none;
  width: 64px;
  height: 64px;
}

.weekend__ic img { width: 64px; height: 64px; }

.weekend b {
  display: block;
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: 26.9px;
  line-height: 40.32px;
  color: var(--ink);
}

.weekend p {
  margin-top: 6px;
  font-size: 19px;
  line-height: 35.15px;
  color: var(--muted);
}

/* アクセス */
.access {
  display: grid;
  grid-template-columns: minmax(0, 840fr) minmax(0, 560fr);
  background: var(--paper);
}

.access__map {
  width: 100%;
  height: 450px;
  object-fit: cover;
}

.access__body { padding: 65.15px 53.76px 53.76px; }

.access__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-en);
  font-weight: 600;
  font-size: 16px;
  line-height: 25.2px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--gold);
}

.access__eyebrow span { width: 28px; height: 1px; background: var(--gold); }

.access__body h3 {
  margin-top: 7.7px;
  font-weight: 700;
  font-size: 28.8px;
  line-height: 51.84px;
  color: var(--ink);
}

.access__body address {
  margin-top: 7.7px;
  padding-top: 5.39px;
  font-style: normal;
  font-size: 19px;
  line-height: 36.1px;
  color: var(--ink);
}

.access__todo {
  margin-top: 7.7px;
  padding-top: 10.3px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access__todo li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  font-size: 16px;
  line-height: 28.8px;
  color: var(--gray-slate);
}

.access__todo svg { flex: none; width: 19px; height: 19px; }


/* =========================================================
   05 ご準備いただくもの
   ========================================================= */
.bring {
  padding: 120px 0;
  background: linear-gradient(130.6deg, #010c21 3.5%, #0c1b52 59.3%, #072870 96.5%);
}

.bring__inner { display: flex; align-items: center; gap: 80px; }

.bring__side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 30px; }

.bring__lead {
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

.bring__ok {
  padding: 1.5px 0 0 24px;
  border-left: 2px solid var(--gold-light);
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

.bring__docs { flex: 1 1 0; min-width: 0; }

.bring__cap {
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, .8);
}

.docs {
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.docs li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.docs li img {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(232, 184, 92, .45);
}

.docs b {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}

.docs .pill--ghost {
  flex: none;
  padding: 2px 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .8);
}


/* =========================================================
   06 よくいただく質問
   ========================================================= */
.faq { padding-bottom: 0; }


/* =========================================================
   751px〜1480px：内容幅（1400px）が確保できなくなる箇所を組み替える
   ========================================================= */
/* =========================================================
   内容幅が 1250px を切るあたりから、ご相談の方法カードが窮屈になるので
   1200px 以下と同じ詰め方を先に当てる（レイアウトの段組みは変えない）
   ========================================================= */
@media (max-width: 1520px) and (min-width: 1201px) {
  .methods { gap: 30px; }
  .method { padding: 40px 28px; }
  .method__title { gap: 10px; font-size: 24px; line-height: 1.5; }
  .method__title img { width: 50px; height: 50px; }
  .method__lead { font-size: 17px; line-height: 1.85; }
  .method__duration { flex-wrap: wrap; }
  .method__duration b { font-size: 42px; line-height: 1.15; }
  .method__tel { font-size: 36px; line-height: 1.25; }
  .method__tel--sub { font-size: 28px; line-height: 1.3; }
}

/* 1861px 以上（＝1920px の表示）は従来どおり高さ固定 */
@media (min-width: 1861px) {
  .place-card { height: 400px; }
  .method { height: 600px; }
}

@media (max-width: 1480px) and (min-width: 751px) {
  /* LINE カードは縦積み */
  .line-card {
    display: block;
    height: auto;
    margin-bottom: 0;
    padding: 60px;
    overflow: hidden;
  }

  .line-card__left { width: 100%; }
  .time-pair { width: 100%; margin-top: 50px; }
  .time-pair__row { padding: 30px 34px; }

  .line-card__bg { top: auto; bottom: -24px; left: auto; right: 20px; }

  /* お約束も縦積み */
  .promise__inner { display: block; }
  .promise__side { width: 100%; }
  .promise__closing { width: 100%; max-width: 620px; }
  .promise__list { width: 100%; margin-top: 70px; }
  .promise__list b { max-width: none; }

  /* 手順の縦線は先頭の丸に合わせる */
  .steps::before { bottom: 190px; height: auto; }
}

@media (max-width: 1200px) and (min-width: 751px) {
  /* FV は縦積みに */
  .shero { height: auto; padding: 80px 0 170px; }
  .shero__inner { display: block; height: auto; }
  .shero__title { font-size: 52px; line-height: 76px; }

  .shero__photo {
    width: 100%;
    max-width: 640px;
    height: 640px;
    margin: 60px auto 0;
  }

  .shero__photo img { top: 30px; width: 600px; height: 600px; }
  .shero__frame { left: 40px; width: 600px; height: 600px; }

  /* このページの内容は FV に重ねず、流し込みに */
  .how { padding: 0 0 120px; }
  .how__inner { padding-top: 120px; }

  .pn--sub {
    position: relative;
    top: -110px;
    left: 0;
    margin-bottom: -60px;
  }

  /* カードが狭くなるので余白と文字を詰める */
  .method { height: auto; min-height: 600px; padding: 40px 28px; }
  .method__title { gap: 10px; font-size: 24px; line-height: 1.5; }
  .method__title img { width: 50px; height: 50px; }
  .method__lead { font-size: 17px; line-height: 1.85; }

  .method__duration { flex-wrap: wrap; }
  .method__duration b { font-size: 42px; line-height: 1.15; }
  .method__tel { font-size: 36px; line-height: 1.25; }
  .method__tel--sub { font-size: 28px; line-height: 1.3; }

  .reply-card__ic,
  .reply-card__ic img { width: 64px; height: 64px; }
  .reply-card b { font-size: 38px; line-height: 1.35; }
}

@media (max-width: 1100px) and (min-width: 751px) {
  /* 2 列・横並び解除で幅が戻るので元のサイズへ */
  .method { padding: 49.92px 38px; }
  .method__title { gap: 12px; font-size: 28.8px; line-height: 51.84px; }
  .method__title img { width: 58px; height: 58px; }
  .method__lead { font-size: 19px; line-height: 35.15px; }
  .method__duration b { font-size: 49.9px; line-height: 49.92px; }
  .method__tel { font-size: 45px; line-height: 50.4px; }
  .method__tel--sub { font-size: 32px; line-height: 38.4px; }

  .reply-card__ic,
  .reply-card__ic img { width: 76px; height: 76px; }
  .reply-card b { font-size: 46px; line-height: 57.5px; }

  /* 連絡方法は 2 列 */
  .methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .method { height: auto; min-height: 520px; }

  /* 手順は見出しの下に */
  .flow__grid { display: block; }
  .flow__side { margin-bottom: 60px; }

  /* 場所カードは 2 列 */
  .place-grid { flex-wrap: wrap; }
  .place-card { flex: 1 1 300px; min-height: 0; padding-bottom: 50px; }

  /* 地図は上、住所は下 */
  .access { grid-template-columns: minmax(0, 1fr); }
  .access__map { height: 420px; }

  /* ご準備いただくものも縦積み */
  .bring__inner { display: block; }
  .bring__docs { margin-top: 60px; }
}

@media (max-width: 900px) and (min-width: 751px) {
  .methods { grid-template-columns: minmax(0, 1fr); }
  .method { min-height: 0; }

  /* 営業情報の表は 2 行組みに */
  .dtable__row { height: auto; padding-bottom: 24px; }
  .dtable__row + .dtable__row { margin-top: 24px; }
  .dtable dt { position: static; width: auto; }
  .dtable dt::after { display: none; }
  .dtable dd { padding: 4px 0 0; }

  /* 土日祝の案内も縦積み */
  .weekend {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 40px;
  }

  .weekend p { margin-top: 8px; }
}


/* =========================================================
   750px 以下：SP レイアウト（1rem = 10 設計px）
   ========================================================= */
@media (max-width: 750px) {

  /* ---------- ヘッダーの帯（SP では固定ヘッダーなので不要） ---------- */
  .gnav-bar { padding: 0; background: none; }

  /* ---------- パンくず ---------- */
  .crumb {
    height: 8rem;
    margin-top: 11rem;
  }

  .crumb__inner {
    width: calc(100% - var(--gutter) * 2);
    font-size: 2.4rem;
    line-height: 1.6;
  }

  .crumb__inner span { margin: 0 1rem; }


  /* =========================================================
     FV
     ========================================================= */
  .shero {
    height: auto;
    padding: 8rem 0 14rem;
    background: radial-gradient(137.8% 200% at 97.6% 2.6%, #043187 0%, #0a1430 26.9%, #0a1430 80.3%, #052864 100%);
  }

  .shero__orbits {
    top: 0;
    left: 0;
    margin-left: 0;
    width: 100%;
    height: 100%;
  }

  .shero__orbits > span { border-color: rgba(255, 255, 255, .3); }

  .shero__orbit1 { width: 150rem; height: 62rem; transform: rotate(-14deg) translate(-52rem, 14rem); }
  .shero__orbit2 { width: 140rem; height: 54rem; transform: rotate(9deg) translate(-30rem, 30rem); }
  .shero__orbit3 { width: 128rem; height: 76rem; transform: rotate(-4deg) translate(-16rem, 8rem); }

  .shero__inner {
    display: block;
    width: calc(100% - var(--gutter) * 2);
    height: auto;
  }

  .shero__body { gap: 4rem; }
  .shero__head { gap: 3rem; }

  .shero__badge {
    gap: 1.2rem;
    height: 6.4rem;
    padding: .5rem 2.4rem;
    font-size: 2.8rem;
    line-height: 1.4;
  }

  .shero__badge svg { width: 4rem; height: 4rem; margin-inline: 0; }

  .shero__title { font-size: 4.6rem; line-height: 1.5; }

  .shero__rule { width: 100%; height: .6rem; }

  .shero__text { font-size: 2.5rem; line-height: 1.9; letter-spacing: .06em; }

  .shero__cta { flex-direction: column; gap: 2rem; }

  .btn-line,
  .btn-ghost {
    gap: 2.2rem;
    width: 100%;
    height: 9.2rem;
    padding: 1.5rem 3rem;
    font-size: 2.8rem;
    line-height: 1.4;
  }

  .btn-ghost { letter-spacing: .04em; }

  .btn-line svg,
  .btn-ghost svg { width: 3.2rem; height: 3.2rem; }

  .shero__photo {
    width: 100%;
    height: 56rem;
    margin-top: 6rem;
  }

  .shero__photo img { top: 4rem; left: 0; width: 62rem; height: 52rem; }
  .shero__frame { top: 0; left: 5rem; width: 62rem; height: 52rem; }


  /* =========================================================
     01 お問い合わせ
     ========================================================= */
  .how { padding: 0 0 10rem; }

  .how__inner { gap: 6rem; padding-top: 10rem; }

  .how__body { gap: 5rem; }

  /* このページの内容 */
  .pn--sub {
    position: relative;
    top: -8rem;
    left: 0;
    margin-bottom: -4rem;
  }

  .pn__list--grid { display: block; height: auto; }
  .pn__list--grid > li { min-height: 0; }
  .pn__list--grid > li:nth-child(n+4) { box-shadow: none; }

  /* ---------- LINE カード ---------- */
  .line-card {
    display: block;
    height: auto;
    margin-bottom: 0;
    padding: 5rem 4rem 6rem;
    overflow: hidden;
    border-top-width: .8rem;
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .12);
  }

  .line-card__left { width: 100%; }

  .m-top { height: auto; gap: 1.6rem; }

  .m-no { font-size: 3rem; line-height: 1.4; letter-spacing: .1em; }

  .pill {
    padding: .3rem 1.6rem;
    font-size: 2.2rem;
    line-height: 1.6;
    letter-spacing: .03em;
  }

  .line-card__title {
    gap: 1.8rem;
    margin-top: 1.2rem;
    padding-top: 2rem;
    font-size: 4.4rem;
    line-height: 1.4;
  }

  .line-card__ic,
  .line-card__ic img { width: 7.2rem; height: 7.2rem; }

  .line-card__id {
    margin-top: 1.2rem;
    padding-bottom: 2.4rem;
    font-size: 4.4rem;
    line-height: 1.4;
    letter-spacing: .02em;
  }

  .line-points { margin-top: 0; }

  .line-points li {
    align-items: flex-start;
    gap: 1.6rem;
    padding: 2.2rem 0;
    font-size: 2.6rem;
    line-height: 1.7;
  }

  .line-points li svg { width: 3.2rem; height: 3.2rem; margin-top: .4rem; }

  .line-card__left .btn-line { margin-top: 4rem; }

  /* 送信 / 返信の時間ペア */
  .time-pair { width: 100%; margin-top: 4rem; }

  .time-pair__row { gap: 2rem; padding: 3.2rem; }

  .time-pair__row img { width: 7.2rem; height: 7.2rem; }

  .time-pair__row small { font-size: 2.4rem; line-height: 1.6; letter-spacing: .06em; }

  .time-pair__row b { margin-top: .4rem; font-size: 3.6rem; line-height: 1.4; }

  /* 背景の LINE ロゴ文字 */
  .line-card__bg {
    top: auto;
    left: auto;
    right: -1rem;
    bottom: -3.5rem;
    font-size: 14rem;
    line-height: 1;
  }

  /* ---------- その他の連絡方法 ---------- */
  .methods { flex-direction: column; gap: 4rem; }

  .method {
    /* 縦並びでは PC の flex:1 1 0 が残ると高さが潰れて中身があふれる */
    flex: none;
    height: auto;
    min-height: 0;
    gap: 1.2rem;
    padding: 5rem 4rem 6rem;
  }

  .method--form { border-top-width: .4rem; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .12); }

  .method__title {
    gap: 1.6rem;
    padding-top: 2rem;
    font-size: 3.6rem;
    line-height: 1.5;
  }

  .method__title img { width: 7rem; height: 7rem; }

  .method__lead { padding-top: 1.4rem; font-size: 2.6rem; line-height: 1.85; }

  .method__duration { gap: 1rem; padding-top: 1.4rem; font-size: 2.6rem; line-height: 1.6; }

  .method__duration b { font-size: 6rem; line-height: 1.1; }

  .method__note {
    margin-top: 2rem;
    padding-top: 2rem;
    font-size: 2.4rem;
    line-height: 1.85;
  }

  .method__btn {
    gap: 2.2rem;
    width: 100%;
    height: 9.2rem;
    margin-top: 4rem;
    font-size: 2.8rem;
    line-height: 1.4;
  }

  .method__btn svg { width: 3.2rem; height: 3.2rem; }

  .method__tel {
    padding: 2rem 0 3rem;
    font-size: 5.4rem;
    line-height: 1.2;
  }

  .method__tel--sub {
    margin-top: 2.4rem;
    padding: 2.4rem 0 3rem;
    font-size: 4.2rem;
    line-height: 1.3;
  }

  .method__small { font-size: 2.4rem; line-height: 1.7; }

  .method__mail {
    margin-top: 1.4rem;
    padding: 1.6rem 2rem;
    font-size: 2.6rem;
    line-height: 1.7;
  }


  /* =========================================================
     02 お約束
     ========================================================= */
  .promise { padding: 10rem 0; }

  .promise__inner { flex-direction: column; align-items: stretch; gap: 6rem; }

  .promise__side { width: 100%; gap: 5rem; }

  .promise__closing {
    width: 100%;
    padding-left: 2.4rem;
    font-size: 3.2rem;
    line-height: 1.75;
  }

  .promise__list { width: 100%; }

  .promise__list li { padding: 3rem 0 3rem 7.2rem; }

  .promise__list li::before {
    width: 4.4rem;
    height: 4.4rem;
    margin-top: -2.2rem;
  }

  .promise__list li:first-child::before { background-size: 4.4rem 4.4rem; }

  .promise__list b { max-width: none; font-size: 2.8rem; line-height: 1.55; }

  .promise__list span { margin-top: .8rem; font-size: 2.3rem; line-height: 1.7; }


  /* =========================================================
     03 ご連絡のあと
     ========================================================= */
  .flow { padding: 10rem 0; }

  .flow__grid { display: block; }

  .flow__side { gap: 4rem; margin-bottom: 6rem; }

  .reply-card { gap: 2.4rem; padding: 4rem; }

  .reply-card__ic,
  .reply-card__ic img { width: 9rem; height: 9rem; }

  .reply-card small { font-size: 2.4rem; line-height: 1.6; letter-spacing: .08em; }

  .reply-card b { font-size: 5.2rem; line-height: 1.3; }

  .steps::before {
    top: 3.1rem;
    bottom: 12rem;
    left: 3.1rem;
    height: auto;
  }

  .step { min-height: 0; gap: 2.4rem; padding-bottom: 3rem; }

  .step__no { width: 6.2rem; height: 6.2rem; font-size: 2.4rem; }

  .step__body { gap: .8rem; padding: 3rem 3.2rem; }

  .step__body h3 { gap: 1.4rem; font-size: 3rem; line-height: 1.5; }

  .step__body p { font-size: 2.5rem; line-height: 1.75; }

  .step--last { min-height: 0; padding-top: 3rem; }

  .step--last .step__body { gap: .8rem; }

  .step--last .step__body h3 { font-size: 3.4rem; line-height: 1.5; }


  /* =========================================================
     04 場所・方法
     ========================================================= */
  .place { padding: 10rem 0; }

  .place__body { margin-top: 6rem; padding-bottom: 0; gap: 6rem; }

  .place-grid { flex-direction: column; gap: 3rem; }

  .place-card { flex: none; height: auto; min-height: 0; gap: 1.2rem; padding: 5rem 4rem 5rem; }

  .place-card__no { top: 4rem; right: 4rem; font-size: 3rem; letter-spacing: .1em; }

  .place-card__ic { width: 9.6rem; height: 9.6rem; }

  .place-card h3 { padding-top: 2rem; font-size: 3.6rem; line-height: 1.5; }

  .place-card p { font-size: 2.6rem; line-height: 1.9; }

  .place-card:first-child p { font-size: 2.8rem; line-height: 1.8; }

  /* 営業情報の表：2行組み */
  .dtable {
    padding: 4rem 0 3rem;
    border-top-width: .6rem;
    border-bottom-width: .2rem;
  }

  .dtable__row { height: auto; padding-bottom: 2.6rem; }

  .dtable__row + .dtable__row { margin-top: 2.6rem; }

  .dtable__row::after { height: .2rem; }

  .dtable dt {
    position: static;
    width: auto;
    font-size: 2.6rem;
    line-height: 1.5;
    letter-spacing: .04em;
  }

  .dtable dt::after { display: none; }

  .dtable dd { padding: .6rem 0 0; font-size: 2.8rem; line-height: 1.6; }

  /* 土日祝の案内 */
  .weekend {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    height: auto;
    padding: 4rem;
  }

  .weekend__ic,
  .weekend__ic img { width: 8rem; height: 8rem; }

  .weekend b { font-size: 3.2rem; line-height: 1.55; }

  .weekend p { margin-top: 1rem; font-size: 2.6rem; line-height: 1.85; }

  /* アクセス */
  .access { display: block; }

  .access__map { height: 42rem; }

  .access__body { padding: 5rem 4rem 6rem; }

  .access__eyebrow { gap: 1.6rem; font-size: 2.4rem; line-height: 1.6; letter-spacing: .18em; }

  .access__eyebrow span { width: 4rem; }

  .access__body h3 { margin-top: 1.6rem; font-size: 3.6rem; line-height: 1.5; }

  .access__body address { margin-top: 1.6rem; padding-top: 0; font-size: 2.6rem; line-height: 1.9; }

  .access__todo { margin-top: 2.4rem; padding-top: 0; gap: 1.2rem; }

  .access__todo li { gap: 1.4rem; padding: 1.8rem 2rem; font-size: 2.4rem; line-height: 1.7; }

  .access__todo svg { width: 2.8rem; height: 2.8rem; }


  /* =========================================================
     05 ご準備いただくもの
     ========================================================= */
  .bring { padding: 10rem 0; }

  .bring__inner { flex-direction: column; align-items: stretch; gap: 6rem; }

  .bring__side { gap: 4rem; }

  .bring__lead { font-size: 2.8rem; line-height: 1.7; }

  .bring__ok {
    padding: 0 0 0 2.4rem;
    font-size: 2.6rem;
    line-height: 1.85;
  }

  .bring__cap { font-size: 2.4rem; line-height: 1.7; }

  .docs { margin-top: 2rem; }

  .docs li { gap: 1.6rem 2rem; padding: 2.8rem 0; }

  .docs li img { width: 6rem; height: 6rem; }

  .docs b { font-size: 2.7rem; line-height: 1.6; }

  .docs .pill--ghost { padding: .3rem 1.6rem; font-size: 2.2rem; line-height: 1.6; }

}

/* =========================================================
   FV の入場アニメーション
   ========================================================= */
.js .shero__badge,
.js .shero__title,
.js .shero__rule,
.js .shero__text,
.js .shero__cta,
.js .shero__photo { animation: fvIn 1s cubic-bezier(.22, .61, .36, 1) both; }

.js .shero__badge { animation-delay: .1s; }
.js .shero__title { animation-delay: .24s; }
.js .shero__rule  { animation-delay: .38s; }
.js .shero__text  { animation-delay: .48s; }
.js .shero__cta   { animation-delay: .58s; }
.js .shero__photo { animation-delay: .34s; }

.js .shero__orbits { animation: fadeIn 2s ease .3s both; }

/* =========================================================
   ホバー
   ========================================================= */
/* ボタンはサイト共通（.btn）と同じ動きに揃える */
.btn-line,
.btn-ghost,
.method__btn { transition: filter .25s ease, transform .25s ease; }

.btn-line:hover,
.btn-ghost:hover,
.method__btn:hover { filter: brightness(1.12); }

.btn-line svg,
.btn-ghost svg,
.method__btn svg { transition: transform .25s ease; }

.btn-line:hover svg,
.btn-ghost:hover svg,
.method__btn:hover svg { transform: translateX(5px); }

.line-card,
.method,
.place-card,
.step__body,
.time-pair__row { transition: transform .35s ease, box-shadow .35s ease, background-color .25s ease; }

.method:hover { transform: translateY(-6px); }
.place-card:hover { transform: translateY(-4px); background: #eef2f8; }

.step:hover .step__body { transform: translateX(6px); }

.step__no { transition: transform .35s ease; }
.step:hover .step__no { transform: scale(1.08); }

.time-pair__row:hover { background: #fff; }

/* お約束の丸印 */
.promise__list li::before { transition: box-shadow .3s ease, transform .3s ease; }
.promise__list li:hover::before { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(232, 184, 92, .9); }

/* 書類リスト・アクセスのメモ */
.docs li,
.access__todo li { transition: background-color .25s ease; }
.docs li:hover { background: rgba(255, 255, 255, .04); }
.access__todo li:hover { background: #fffdf7; }

/* 営業情報の表 */
.dtable__row { transition: background-color .25s ease; }
.dtable__row:hover { background: rgba(10, 20, 48, .03); }

/* 地図 */
.access__map { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.access { overflow: hidden; }
.access:hover .access__map { transform: scale(1.03); }

/* 指で触れる端末ではホバー演出を出さない */
@media (max-width: 750px) {
  .method:hover,
  .place-card:hover { transform: none; }
  .step:hover .step__body { transform: none; }
  .step:hover .step__no { transform: none; }
  .access:hover .access__map { transform: none; }
}

/* 表の中のリンク（Instagram など） */
.dtable__row dd a { color: var(--gold-deep); text-decoration: underline; }