@charset "UTF-8";

/* ---------- reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
p,
ul,
ol,
li,
dl,
dt,
dd,
figure,
form {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

html {
  overflow-x: hidden;
  overflow-x: clip;
  scroll-padding-top: calc(5.8333 * var(--u));
}

:root {
  --u: min(19.2px, 1.7778vw);
  /* お客様の声スライダーの1枚ぶんの移動量（%）。SPでは1枚送りにするので100にする */
  --voice-step: 47.8125;
}

body {
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic",
    "Noto Sans JP", "Helvetica Neue", Arial, "Meiryo", sans-serif;
  color: #222;
  background: #fff;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.header,
main,
.footer {
  width: min(1920px, 177.7778%);
  margin-left: calc((100% - min(1920px, 177.7778%)) / 2);
}

img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

iframe {
  display: block;
  border: 0;
}

.u-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 calc(.1042 * var(--u)) calc(.5208 * var(--u)) rgba(0, 0, 0, .12);
}

.header__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 112;
}

.header__logo {
  position: absolute;
  left: 22.5%;
  top: 31.25%;
  width: 16.3021%;
}

.header__tel {
  position: absolute;
  left: 45.625%;
  top: 22.3214%;
  width: 12.8646%;
  transition: opacity .25s ease;
}

.header__mail {
  position: absolute;
  left: 59.2188%;
  top: 22.3214%;
  width: 13.5417%;
  transition: opacity .25s ease;
}

.header__tel:hover,
.header__mail:hover {
  opacity: .8;
}

.hamburger {
  position: absolute;
  left: 75.4688%;
  top: 36.6071%;
  width: 2.2396%;
  height: 30.3571%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hamburger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(.1563 * var(--u));
  background: #111;
  transition: transform .3s ease, opacity .2s ease;
}

.hamburger__bar:nth-child(1) {
  top: 0;
}

.hamburger__bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger__bar:nth-child(3) {
  bottom: 0;
}

.hamburger.is-open .hamburger__bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hamburger.is-open .hamburger__bar:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open .hamburger__bar:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.gnav {
  position: absolute;
  right: calc(50% - 50vw + 2.0833 * var(--u));
  top: 100%;
  width: 20.8333%;
  padding: calc(1.0417 * var(--u)) 0;
  background: #fff;
  box-shadow: 0 calc(.3125 * var(--u)) calc(1.0417 * var(--u)) rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-.5208 * var(--u)));
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}

.gnav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gnav__link {
  display: block;
  padding: calc(.9375 * var(--u)) calc(1.5625 * var(--u));
  font-size: calc(1.0417 * var(--u));
  font-weight: 700;
  border-bottom: 1px solid #e7eef2;
  transition: background-color .2s ease, color .2s ease;
}

.gnav__item:last-child .gnav__link {
  border-bottom: 0;
}

.gnav__link:hover {
  background: #f1f9fd;
  color: #14a2e4;
}

.gnav__cta {
  display: none;
}

.gnav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .35);
}

/* =========================================================
   FV
   ========================================================= */
.fv__img {
  margin: 0;
  line-height: 0;
}

/* =========================================================
   CTA エリア（3箇所で共通）
   ========================================================= */
.cta {
  position: relative;
  line-height: 0;
  aspect-ratio: 1920 / 580;
  background: url(../img/cta_area_bg_pc.png) no-repeat center top / 100% 100%;
}

.cta__img {
  position: absolute;
  left: 25.2604%;
  top: 11.7241%;
  width: 49.4271%;
}

.cta__tel,
.cta__mail {
  position: absolute;
  top: 61.3793%;
  line-height: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.cta__tel {
  left: 27.5521%;
  width: 21.4583%;
}

.cta__mail {
  left: 49.7396%;
  width: 22.2396%;
}

.cta__tel:hover,
.cta__mail:hover {
  opacity: .85;
  transform: translateY(calc(-.1 * var(--u)));
}

/* =========================================================
   COMPARE 費用比較表
   ========================================================= */
.compare {
  position: relative;
  width: 100%;
  /* セクションの高さ＝アートボード（1920×1165）。
     背景の書き出しは 1920×1122 で、下の43pxはアートボードの白地。
     引き伸ばすと隅の模様が歪むので `100% auto` で原寸のまま上に置く */
  aspect-ratio: 1920 / 1165;
  background: #fff url(../img/compare_bg_pc.jpg) no-repeat center top / 100% auto;
}

.compare__title {
  position: absolute;
  left: 33.75%;
  top: 6.867%;
  width: 32.4479%;
}

.compare__tabs {
  position: absolute;
  left: 38.1771%;
  top: 18.2833%;
  width: 23.0729%;
  height: 5.6652%;
  z-index: 3;
  display: flex;
  justify-content: space-between;
}

.compare__tab {
  width: 48.98%;
  height: 100%;
  padding: 0 0 calc(.3125 * var(--u));
  border: 0;
  border-radius: calc(.5208 * var(--u)) calc(.5208 * var(--u)) 0 0;
  background: #e8e8e8;
  color: #222;
  font-size: calc(1.6667 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 calc(-.1563 * var(--u)) calc(.3125 * var(--u)) rgba(0, 0, 0, .10);
  transition: background-color .2s ease, color .2s ease;
}

.compare__tab:hover {
  background: #f2f2f2;
}

.compare__tab.is-active {
  background: #fff;
  color: #3cb8f2;
  cursor: default;
}

/* 高さはPSDの白いカード（601px）より33px高くして、表の下の注記まで
   カードの中に収まるようにしている */
.compare__card {
  position: absolute;
  left: 32.2917%;
  top: 23.6052%;
  width: 35.3646%;
  height: 54.4206%;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 calc(.5208 * var(--u)) rgba(0, 0, 0, .13);
}

.compare__panel {
  position: absolute;
  left: 3.8291%;
  top: 5.6782%;
  width: 93.5199%;
}

/* 合同会社の表は株式会社より一回り小さい書き出し（608px / 635px）なので、
   引き伸ばさずデザイン実寸のまま置く */
.compare__panel--gk {
  left: 3.8291%;
  width: 93.5434%;
}

.compare__panel[hidden] {
  display: none;
}

.compare__note {
  position: absolute;
  left: 33.4375%;
  top: 83.6052%;
  width: 33.125%;
}

/* =========================================================
   NAYAMI お悩み
   ========================================================= */
.nayami {
  position: relative;
  line-height: 0;
  aspect-ratio: 1920 / 993;
  background: url(../img/nayami_bg_pc.jpg) no-repeat center top / 100% 100%;
}

.nayami__title {
  position: absolute;
  left: 31.25%;
  top: 6.1430%;
  width: 37.5%;
}

.nayami__content {
  position: absolute;
  left: 26.9271%;
  top: 26.1833%;
  width: 46.7708%;
}

/* =========================================================
   TUYOMI 3つの強み
   ========================================================= */
.tuyomi {
  position: relative;
  padding: 16.5625% 0 5.1042%;
  background: #cfe9f8 url(../img/tuyomi_bg_pc.jpg) no-repeat center top / 100% auto;
}

.tuyomi__title {
  position: absolute;
  left: 36.3021%;
  top: calc(4.7 * var(--u));
  width: 38.6979%;
  z-index: 0;
}

.tuyomi__item {
  position: relative;
  line-height: 0;
}

.tuyomi__item--01 {
  z-index: 1;
  width: 48.4896%;
  margin-left: 25.5208%;
  padding: 26.875% 0 1.875%;
  background: #fff;
  box-shadow: 0 0 calc(.7292 * var(--u)) rgba(0, 0, 0, .10);
}

.tuyomi__figure {
  position: absolute;
  left: -6.6595%;
  top: calc(-3.5938 * var(--u));
  width: 106.7669%;
  z-index: 2;
}

.tuyomi__item--02 {
  margin: 1.6146% 0 0 25.4688%;
  width: 50.3125%;
}

.tuyomi__item--03 {
  margin: 1.4792% 0 0 22.0833%;
  width: 52.5%;
}

.acc {
  position: relative;
  width: 82.0623%;
  margin: 0 auto;
  box-shadow: 0 0 calc(.4688 * var(--u)) rgba(0, 0, 0, .14);
}

.acc__head {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.acc__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(3.8542 * var(--u));
  padding: 0 calc(3.125 * var(--u));
  border: 0;
  border-radius: calc(.3125 * var(--u));
  background: #14a2e4;
  color: #fff;
  font-size: calc(1.5625 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease;
}

.acc__btn:hover {
  background: #0f93d2;
}

.acc__icon {
  position: absolute;
  right: calc(1.4583 * var(--u));
  top: 50%;
  width: calc(.7813 * var(--u));
  height: calc(.2604 * var(--u));
  margin-top: calc(-.1302 * var(--u));
  background: #fff;
}

.acc__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(.2604 * var(--u));
  height: calc(.7813 * var(--u));
  margin: calc(-.3906 * var(--u)) 0 0 calc(-.1302 * var(--u));
  background: #fff;
  transition: transform .3s ease, opacity .3s ease;
}

.acc__btn.is-open .acc__icon::after {
  opacity: 0;
  transform: scaleY(0);
}

.acc__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .34s cubic-bezier(.4, 0, .2, 1);
  will-change: max-height;
}

.acc__inner {
  padding: 3.9267% 0 5.1047%;
}

.acc__body img {
  width: 86.911%;
  margin: 0 auto;
}

/* =========================================================
   INTRODUCTION / FLOW / MESSAGE
   ========================================================= */
.introduction,
.flow,
.message {
  position: relative;
  line-height: 0;
}

.introduction {
  aspect-ratio: 1920 / 465;
  background: url(../img/introduction_bg_pc.jpg) no-repeat center top / 100% 100%;
}

.flow {
  aspect-ratio: 1920 / 919;
  background: url(../img/flow_bg_pc.jpg) no-repeat center top / 100% 100%;
}

.introduction__content {
  position: absolute;
  left: 48.1%;
  transform: translateX(-50%);
  /* 背景の書き出しが 1920×444 → 1920×465（上に21px追加）になったぶん下げる */
  top: 12.6882%;
  width: 55.5729%;
}

.flow__title {
  position: absolute;
  left: 33.9063%;
  top: 6.3112%;
  width: 32.1875%;
}

.flow__content {
  position: absolute;
  left: 25.9896%;
  top: 19.1512%;
  width: 48.8021%;
}

/* =========================================================
   VOICE お客様の声（スライダー）
   ========================================================= */
.voice {
  position: relative;
  width: 100%;
  /* 2026-09-25 のPSD再書き出しで背景が 1920×888、カードが 897×462 になった。
     セクション内の各要素のpx位置は変わっていないので、割る高さだけ差し替えている */
  aspect-ratio: 1920 / 888;
  overflow: hidden;
  background: #0f9fe6 url(../img/voice_bg_pc.jpg) no-repeat center top / 100% 100%;
}

.voice__title {
  position: absolute;
  left: 41.3021%;
  top: 14.8649%;
  width: 17.4479%;
  z-index: 4;
}

.voice__slider {
  position: absolute;
  inset: 0;
}

.voice__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.voice__track {
  position: absolute;
  left: 25.9896%;
  top: 28.9414%;
  width: 100%;
  display: flex;
  will-change: transform;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

.voice__slide {
  flex: 0 0 47.8125%;
  line-height: 0;
  opacity: .8;
  transform: scale(.7);
  transition: transform .55s cubic-bezier(.4, 0, .2, 1), opacity .55s ease;
}

.voice__slide.is-current {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
}

.voice__slide img {
  width: 97.7124%;
  margin-left: 2.0697%;
}

/* ループの繋ぎ目でトラックを瞬間移動させるときは、スライド側の拡大・不透明度も
   一緒に止める。止めないと、繋ぎ目で中央になったカードだけが 70%→100% に
   伸びる動き（ポップ）が見えてしまう */
.voice__track.is-instant,
.voice__track.is-instant .voice__slide {
  transition: none;
}

.voice__arrow {
  position: absolute;
  z-index: 5;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity .2s ease, transform .2s ease;
}

.voice__arrow::before {
  content: "";
  position: absolute;
  inset: calc(-.8 * var(--u)) calc(-1.2 * var(--u));
}

.voice__arrow:hover {
  opacity: .7;
}

.voice__arrow img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.voice__arrow--prev img {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.voice__arrow--next img {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.voice__arrow {
  top: 47.4099%;
  width: 1.8229%;
  height: 7.8829%;
}

.voice__arrow--prev {
  left: 22.2917%;
}

.voice__arrow--next {
  left: 75.8854%;
}

.voice__arrow--prev:hover {
  transform: translateX(calc(-.2 * var(--u)));
}

.voice__arrow--next:hover {
  transform: translateX(calc(.2 * var(--u)));
}

/* =========================================================
   SUPPORT 補助金・助成金 ＋ 横スクロール比較表
   ========================================================= */
.support {
  position: relative;
  line-height: 0;
  aspect-ratio: 1920 / 1521;
  background: url(../img/support_bg_pc.jpg) no-repeat center top / 100% 100%;
}

.support__content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.graph {
  position: absolute;
  left: 23.5417%;
  top: 73.8988%;
  width: 52.9167%;
  scroll-margin-top: calc(1.5625 * var(--u));
}

.graph__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: calc(.8854 * var(--u)) calc(.8854 * var(--u)) calc(.9375 * var(--u));
  border: 2px solid #9fd8f3;
  background: #fff;
  scrollbar-color: #979797 #dbdbdb;
  scrollbar-width: thin;
}

/* PSD「レイヤー 28」2135×259。SP用画像（4233×544）を流用すると箱が背景より高くなり、
   下端のスクロールバーが次のセクションの下に隠れて横スクロールできなくなる */
.graph__scroll img {
  width: calc(132.1979 * var(--u));
  max-width: none;
  height: auto;
}

.graph__scroll::-webkit-scrollbar {
  height: calc(.625 * var(--u));
}

.graph__scroll::-webkit-scrollbar-track {
  background: #dbdbdb;
}

.graph__scroll::-webkit-scrollbar-thumb {
  background: #979797;
}

.graph__scroll:focus-visible {
  outline: 2px solid #14a2e4;
  outline-offset: 2px;
}

/* =========================================================
   OFFICE アクセス
   ========================================================= */
.office {
  position: relative;
  line-height: 0;
  aspect-ratio: 1920 / 1507;
  /* 背景の書き出しは 1920×1482。セクションの方が高いので cover で埋める */
  background: url(../img/office_bg_pc.jpg) no-repeat center / cover;
}

.office__title {
  position: absolute;
  left: 32.2917%;
  top: calc(6.3542 * var(--u));
  width: 35.4688%;
}

.office__content {
  position: absolute;
  left: 25.5208%;
  top: calc(13.5417 * var(--u));
  width: 49.0104%;
}

.office__map {
  position: absolute;
  left: 26.9792%;
  top: calc(14.8958 * var(--u));
  width: 17.5521%;
  height: calc(11.0938 * var(--u));
  overflow: hidden;
  border: 1px solid #dcdcdc;
  background: #eef1f3;
}

.office__map iframe {
  width: 100%;
  height: 100%;
}

.office__guide {
  position: absolute;
  top: calc(29.6354 * var(--u));
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.office__guide a {
  font-size: calc(.8333 * var(--u));
  font-weight: 700;
  color: #222;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.office__guide a:hover {
  color: #14a2e4;
  border-bottom-color: #14a2e4;
}

/* 先頭の山括弧は装飾なのでCSS側に置く */
.office__guide a::before {
  content: "＞";
}

.office__guide--1 {
  left: 27.2917%;
  width: 14.5833%;
}

.office__guide--2 {
  left: 42.6563%;
  width: 15.6771%;
}

.office__guide--3 {
  left: 59.0625%;
  width: 13.8021%;
}

.ophoto {
  position: absolute;
  left: 29.5573%;
  top: calc(34.3229 * var(--u));
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: calc(.6771 * var(--u));
  row-gap: calc(1.5625 * var(--u));
  width: 40.8854%;
}

.ophoto__item img {
  aspect-ratio: 386 / 291;
  object-fit: cover;
  object-position: center;
}

.ophoto__caption {
  margin-top: calc(.7813 * var(--u));
  color: #fff;
  font-size: calc(1.3021 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  position: relative;
  padding: calc(3.0729 * var(--u)) 0 calc(3.75 * var(--u));
  background: #fff url(../img/faq_bg_pc.jpg) no-repeat center bottom / 100% auto;
}

.faq__title {
  width: 24.5313%;
  margin: 0 auto;
}

.faq__list {
  width: 39.6354%;
  margin: calc(2.1354 * var(--u)) auto 0;
}

.faq__item+.faq__item {
  margin-top: calc(1.0938 * var(--u));
}

.faq__q {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(3.5417 * var(--u));
  padding: calc(.625 * var(--u)) calc(3.3854 * var(--u)) calc(.625 * var(--u)) calc(1.6667 * var(--u));
  border: 0;
  border-radius: calc(.3125 * var(--u));
  background: #14a2e4;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease;
}

.faq__q:hover {
  background: #0f93d2;
}

.faq__num {
  flex: 0 0 calc(3.3854 * var(--u));
  font-size: calc(1.5625 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}

.faq__q .faq__text {
  font-size: calc(1.1458 * var(--u));
  font-weight: 700;
  line-height: 1.45;
}

.faq__mark {
  position: absolute;
  right: calc(1.9271 * var(--u));
  top: 50%;
  width: 0;
  height: 0;
  margin-top: calc(-.1823 * var(--u));
  border-left: calc(.4688 * var(--u)) solid transparent;
  border-right: calc(.4688 * var(--u)) solid transparent;
  border-top: calc(.3646 * var(--u)) solid #fff;
  transition: transform .3s ease;
}

.faq__item.is-open .faq__mark {
  transform: rotate(180deg);
}

.faq__a {
  max-height: 0;
  overflow: hidden;
  border-radius: 0 0 calc(.3125 * var(--u)) calc(.3125 * var(--u));
  background: #fff;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: max-height .34s cubic-bezier(.4, 0, .2, 1), box-shadow .34s ease;
  will-change: max-height;
}

/* 背景（白）と同化して質問とひと続きに見えてしまうので、
   開いたときは影を落として1枚のカードとして浮かせる */
.faq__a.is-open {
  box-shadow: 0 calc(.2083 * var(--u)) calc(.9375 * var(--u)) rgba(0, 0, 0, .20);
}

/* 回答は行数が増えても中央寄せにならないよう上ぞろえ。
   「A」と本文の1行目のベースラインを合わせる */
.faq__a-inner {
  display: flex;
  align-items: baseline;
  padding: calc(.8854 * var(--u)) calc(1.6667 * var(--u));
}

.faq__num--a {
  color: #ff7c00;
  line-height: 1;
}

.faq__a .faq__text {
  font-size: calc(.9896 * var(--u));
  line-height: 1.6;
}

.faq__link {
  color: #14a2e4;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .15em;
  transition: color .2s ease, opacity .2s ease;
}

.faq__link:hover {
  color: #0f93d2;
  opacity: .85;
}

.faq__a-inner--graph {
  align-items: flex-start;
}

.faq__graph {
  flex: 1 1 auto;
  min-width: 0;
}

.faq__graph .graph__scroll img {
  width: calc(106.5104 * var(--u));
  max-width: none;
  height: auto;
}

/* =========================================================
   MEMBER スタッフ紹介
   ========================================================= */
.member {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 796;
  background: #fbfbfb url(../img/member_bg_pc.jpg) no-repeat center top / 100% 100%;
}

.member__title {
  position: absolute;
  left: 33.0208%;
  top: 1.6332%;
  width: 33.9583%;
}

.member__list {
  position: absolute;
  left: 31.0938%;
  top: 27.6382%;
  width: 37.3958%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.9499%;
  row-gap: calc(1.3542 * var(--u));
}

.member__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}

.member__btn:hover,
.member__btn:focus-visible {
  opacity: .6;
  transform: translateY(calc(-.2604 * var(--u)));
}

/* =========================================================
   FORM お問い合わせフォーム
   ========================================================= */
.form {
  background: #14a2e4;
  padding: calc(5.2604 * var(--u)) 0 calc(5.3125 * var(--u));
}

.form__title {
  width: 35.5208%;
  margin: 0 auto;
}

.form__card {
  width: 41.6667%;
  margin: calc(2.4479 * var(--u)) auto 0;
  padding: calc(3.8542 * var(--u)) calc(3.1771 * var(--u)) calc(3.6979 * var(--u));
  background: #fff;
}

.cform__steps {
  display: flex;
  width: calc(19.4271 * var(--u));
  margin: 0 auto;
  font-size: calc(1.25 * var(--u));
  font-weight: 700;
  line-height: 1.2;
}

.cform__step {
  flex: 1 1 0;
  text-align: center;
  color: #b9b9b9;
}

.cform__step.is-current {
  color: #222;
}

.cform__progress {
  width: calc(19.4271 * var(--u));
  height: calc(.4167 * var(--u));
  margin: calc(.3646 * var(--u)) auto 0;
  border-radius: calc(.2083 * var(--u));
  background: #eee;
  overflow: hidden;
}

.cform__progress-bar {
  display: block;
  width: 33.3333%;
  height: 100%;
  border-radius: calc(.2083 * var(--u));
  background: #14a2e4;
}

.cform__row {
  margin-top: calc(1.5625 * var(--u));
}

.cform__row:first-of-type {
  margin-top: calc(2.2396 * var(--u));
}

.cform__label {
  display: block;
  margin-bottom: calc(.3646 * var(--u));
  font-size: calc(.9375 * var(--u));
  font-weight: 700;
  line-height: 1.05;
}

.cform__req,
.cform__any {
  display: inline-block;
  margin-left: calc(.3125 * var(--u));
  padding: 0 calc(.3646 * var(--u));
  border-radius: calc(.1042 * var(--u));
  background: #ff7b00;
  color: #fff;
  font-size: calc(.625 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  vertical-align: .1em;
}

/* 任意項目のバッジ。必須（オレンジ）と取り違えないようグレーにする */
.cform__any {
  background: #9aa4ab;
}

.cform__input,
.cform__textarea {
  display: block;
  width: 100%;
  padding: 0 calc(1.0417 * var(--u));
  border: 0;
  border-radius: calc(.1042 * var(--u));
  background: #ededed;
  color: #222;
  font-family: inherit;
  font-size: calc(1.0417 * var(--u));
}

.cform__input {
  height: calc(2.7083 * var(--u));
}

.cform__textarea {
  height: calc(7.1354 * var(--u));
  padding: calc(.8333 * var(--u)) calc(1.0417 * var(--u));
  line-height: 1.6;
  resize: vertical;
}

.cform__input::placeholder,
.cform__textarea::placeholder {
  color: #aeaeae;
}

.cform__note {
  display: none;
  margin-top: calc(.3125 * var(--u));
  font-size: calc(.7292 * var(--u));
  line-height: 1.4;
  color: #d83b01;
}

.cform__note.is-visible {
  display: block;
}

.cform__input:focus,
.cform__textarea:focus,
.cform__select:focus {
  outline: 2px solid #14a2e4;
  outline-offset: 1px;
}

.cform__date {
  display: flex;
  align-items: center;
}

.cform__select {
  height: calc(2.5521 * var(--u));
  width: calc(5 * var(--u));
  padding: 0 calc(.4167 * var(--u));
  border: 0;
  border-radius: calc(.1042 * var(--u));
  background: #ededed;
  color: #222;
  font-family: inherit;
  font-size: calc(1.0417 * var(--u));
  text-align: center;
  cursor: pointer;
}

.cform__select--wide {
  width: calc(5.3125 * var(--u));
}

.cform__unit {
  padding: 0 calc(.4167 * var(--u));
  font-size: calc(1.0417 * var(--u));
  font-weight: 700;
}

/* =========================================================
   ご相談内容（複数選択のチェックリスト）
   ========================================================= */
.cform__checks {
  display: flex;
  flex-direction: column;
  gap: calc(.5208 * var(--u));
  margin-top: calc(.5208 * var(--u));
}

.cform__checkitem {
  display: flex;
  align-items: flex-start;
  font-size: calc(.9375 * var(--u));
  line-height: 1.5;
  cursor: pointer;
}

/* accent-color だとブラウザがチェックを濃い色で描いてしまうので、
   見た目を自前にして白いチェックマーク（SVG）を重ねる */
.cform__check {
  flex: 0 0 auto;
  width: calc(1.0417 * var(--u));
  height: calc(1.0417 * var(--u));
  margin: calc(.1563 * var(--u)) calc(.5208 * var(--u)) 0 0;
  border: 1px solid #c9c9c9;
  border-radius: calc(.1042 * var(--u));
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.cform__check:checked {
  border-color: #ff7d00;
  /* 白いチェックマーク。箱の大きさに合わせて拡大縮小する */
  background: #ff7d00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.3 5.2 4.6 8.5 10.7 1.9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 70% auto;
}

.cform__check:focus-visible {
  outline: 2px solid #14a2e4;
  outline-offset: 2px;
}

/* 「その他」だけはチェックの右に記入欄を並べる */
.cform__checkrow {
  display: flex;
  align-items: center;
  gap: calc(.5208 * var(--u));
}

.cform__checkrow .cform__checkitem {
  flex: 0 0 auto;
}

.cform__otherinput {
  flex: 1 1 auto;
  width: auto;
  height: calc(2.0833 * var(--u));
  font-size: calc(.9375 * var(--u));
}

.cform__otherinput:disabled {
  background: #f4f4f4;
  color: #aeaeae;
  cursor: not-allowed;
}

/* 個人情報保護方針は privacy.html に分けたので、フォームにはリンク文言だけ置く */
.cform__agree {
  margin-top: calc(2.6042 * var(--u));
  font-size: calc(.9375 * var(--u));
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.cform__agree a {
  color: #14a2e4;
  border-bottom: 1px solid #14a2e4;
  transition: opacity .2s ease;
}

.cform__agree a:hover {
  opacity: .7;
}

.cform__submit-wrap {
  margin-top: calc(1.0938 * var(--u));
  text-align: center;
}

.cform__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(15 * var(--u));
  height: calc(3.4896 * var(--u));
  border: 0;
  border-radius: 999px;
  background: #ff7d00;
  color: #fff;
  font-size: calc(1.3542 * var(--u));
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.cform__submit:hover {
  background: #f07300;
  transform: translateY(calc(-.1 * var(--u)));
}

.cform__notice {
  margin-top: calc(.8333 * var(--u));
  font-size: calc(.7292 * var(--u));
  color: #d83b01;
}

/* ---------- 確認画面（confirm.php）／完了画面（thanks.php） ---------- */

/* 見出し画像がないページ用のテキスト見出し。.form の青地に白文字で置く */
.form__title-text {
  margin: 0;
  color: #fff;
  font-size: calc(1.875 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* ステップ表示のバー。2ページ目＝確認、3ページ目＝完了 */
.cform__progress-bar--2 {
  width: 66.6667%;
}

.cform__progress-bar--3 {
  width: 100%;
}

/* 入力値の表示（入力欄と同じ幅・余白で、背景だけ白く枠線にする） */
.cform__value {
  min-height: calc(2.7083 * var(--u));
  padding: calc(.625 * var(--u)) calc(1.0417 * var(--u));
  border: 1px solid #ededed;
  border-radius: calc(.1042 * var(--u));
  font-size: calc(1.0417 * var(--u));
  line-height: 1.6;
  word-break: break-all;
}

/* 未入力・形式不正のときのハイライト（送信を試みた後だけ効く :user-invalid） */
.cform__input:user-invalid,
.cform__textarea:user-invalid,
.cform__select:user-invalid {
  outline: 2px solid #d83b01;
  outline-offset: calc(-.1042 * var(--u));
}

/* 確認画面のボタン（戻る／送信）を横並びにする */
.cform__btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.0417 * var(--u));
  margin-top: calc(2.0833 * var(--u));
}

.cform__submit--back {
  background: #9a9a9a;
}

.cform__submit--back:hover {
  background: #8a8a8a;
}

/* サーバ側で必須不足を検出したときのエラー一覧 */
.cform__errors {
  margin-top: calc(1.5625 * var(--u));
  padding: calc(1.0417 * var(--u));
  border: 1px solid #f2c4b4;
  border-radius: calc(.1042 * var(--u));
  background: #fdf3f0;
  color: #d83b01;
  font-size: calc(.9375 * var(--u));
  line-height: 1.7;
}

.cform__errors li {
  margin-left: 1em;
  list-style: disc;
}

/* 完了画面の本文 */
.cform__thanks {
  margin-top: calc(2.0833 * var(--u));
  font-size: calc(1.0417 * var(--u));
  line-height: 1.9;
  text-align: center;
}

.cform__thanks a {
  color: #14a2e4;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(4.7917 * var(--u));
  background: #fff;
}

.footer__copy {
  font-size: calc(1.0417 * var(--u));
  font-weight: 700;
  text-align: center;
}
.tyuu{
  font-size: 0.7em; /* 親要素（1.0417 * var(--u)）に対して80%の大きさにする設定 */
}

/* =========================================================
   トップページへ戻るボタン（company.html / privacy.html 共通）
   ========================================================= */
.cback {
  width: 15%;
  margin: calc(3.8333 * var(--u)) auto 0;
}

.cback a {
  display: block;
  transition: opacity .2s ease, transform .2s ease;
}

.cback a:hover {
  opacity: .85;
  transform: translateY(calc(-.1 * var(--u)));
}

/* =========================================================
   MODAL スタッフ紹介ポップアップ（仮）
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal[hidden] {
  display: none;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  animation: modalFade .25s ease;
}

.modal__box {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 40px 32px 36px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
  text-align: center;
  animation: modalUp .28s ease;
}

@keyframes modalFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.modal__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f0f4f6;
  cursor: pointer;
  transition: background-color .2s ease;
}

.modal__close:hover {
  background: #e0e8ec;
}

.modal__close::before,
.modal__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: #555;
}

.modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal.is-photo .modal__box {
  width: auto;
  max-width: min(983px, 100%, calc((100vh - 40px) * 983 / 660));
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: #c8e5ef;
}

.modal__photo-wrap {
  line-height: 0;
}

.modal__photo {
  width: 100%;
}

.modal__scroll {
  position: absolute;
  left: 2.0346%;
  /* プロフィール画像が 983×674 → 983×660（上が14px詰まった）になったぶん */
  top: 37.2727%;
  width: 95.0153%;
  height: 59.3939%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  scrollbar-color: #bcbcbc #ededed;
  scrollbar-width: thin;
}

.modal__scroll-img {
  width: 93.3619%;
  margin: 3.4% auto;
}

.modal__scroll::-webkit-scrollbar {
  width: 8px;
}

.modal__scroll::-webkit-scrollbar-track {
  background: #ededed;
}

.modal__scroll::-webkit-scrollbar-thumb {
  background: #bcbcbc;
  border-radius: 4px;
}

.modal__scroll:focus-visible {
  outline: 2px solid #14a2e4;
  outline-offset: -2px;
}

.modal__role {
  font-size: 13px;
  color: #14a2e4;
  font-weight: 700;
}

.modal__name {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 700;
}

.modal__note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e7eef2;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}

/* =========================================================
   PC / SP 出し分け
   PC表示では .sp を隠すだけにして、.pc 側は元の display を保つ
   （.ophoto の grid、.compare__tabs の flex などを壊さないため）
   ========================================================= */
.sp {
  display: none;
}

/* =========================================================
   SP （750px以下 / デザイン基準幅 750px）
   --u = 1vw ＝ デザイン7.5px。CSS値は「デザインpx ÷ 7.5」で算出。
   セクション内の位置はセクション画像の実寸に対する % で指定している。
   ========================================================= */
@media screen and (max-width: 750px) {

  /* ---------- 表示切り替え ---------- */
  .pc {
    display: none !important;
  }

  .sp {
    display: block;
  }

  /* PCの背景画像はCSS指定。SPは各セクションの .sp 画像が高さを作るので外す */
  .cta,
  .nayami,
  .introduction,
  .flow,
  .support,
  .office {
    aspect-ratio: auto;
    background: none;
  }

  /* ---------- 基本 ---------- */
  :root {
    --u: 1vw;
    --voice-step: 100;
  }

  html {
    scroll-padding-top: calc(13.3333 * var(--u));
  }

  .header,
  main,
  .footer {
    width: 100%;
    margin-left: 0;
  }

  /* =========================================================
     HEADER（デザイン 750 × 100）
     ========================================================= */
  .header {
    box-shadow: 0 calc(.2667 * var(--u)) calc(.9333 * var(--u)) rgba(0, 0, 0, .12);
  }

  .header__inner {
    aspect-ratio: 750 / 100;
  }

  .header__logo {
    left: 5.2%;
    top: 20%;
    width: 41.7333%;
  }

  .header__tel,
  .header__mail {
    display: none;
  }

  .hamburger {
    left: 89.0667%;
    top: 29%;
    width: 6%;
    height: 37%;
  }

  .hamburger__bar {
    height: calc(.8 * var(--u));
  }

  .gnav {
    position: absolute;
    left: 0;
    right: auto;
    top: 100%;
    width: 100%;
    padding: 0 0 calc(2.6667 * var(--u));
    box-shadow: 0 calc(1.0667 * var(--u)) calc(2.6667 * var(--u)) rgba(0, 0, 0, .2);
  }

  .gnav__link {
    padding: calc(2.6667 * var(--u)) calc(4 * var(--u));
    font-size: calc(3.7333 * var(--u));
  }

  .gnav__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(2.6667 * var(--u));
    padding: calc(3.3333 * var(--u)) calc(4 * var(--u)) 0;
  }

  /* SP用のCTA画像（デザイン幅600px）を原寸比で並べる */
  .gnav__cta-btn {
    width: 80%;
  }

  /* =========================================================
     CTA（デザイン 750 × 802 / ボタンは背景画像に重ねた透明リンク）
     ========================================================= */
  /* 書き出しが 750×802 → 750×837（上に18px追加）になったので割る高さを差し替え */
  .cta__tel,
  .cta__mail {
    top: 47.0729%;
    left: 10%;
    width: 79.7333%;
    height: 13.9785%;
  }

  .cta__mail {
    top: 71.3262%;
    width: 79.4667%;
  }

  .cta__tel:hover,
  .cta__mail:hover {
    opacity: 1;
    transform: none;
  }

  /* =========================================================
     COMPARE 費用比較表（デザイン 750 × 1446）
     ========================================================= */
  .compare {
    aspect-ratio: 750 / 1446;
    background-image: url(../img/compare_sp.jpg);
  }

  .compare__tabs {
    left: 12.4%;
    top: 15.9%;
    width: 74.2667%;
    height: 5.74%;
  }

  .compare__tab {
    width: 48.8%;
    padding: 0 0 calc(.6667 * var(--u));
    border-radius: calc(1.6 * var(--u)) calc(1.6 * var(--u)) 0 0;
    font-size: calc(5.3333 * var(--u));
    box-shadow: 0 calc(-.2667 * var(--u)) calc(.6667 * var(--u)) rgba(0, 0, 0, .10);
  }

  .compare__card {
    left: 5.2%;
    top: 21.3693%;
    width: 89.8667%;
    height: 63.4481%;
    box-shadow: 0 0 calc(.9333 * var(--u)) rgba(0, 0, 0, .13);
  }

  .compare__panel {
    left: 4.0059%;
    top: 4.6512%;
    width: 91.8398%;
    height: 90.4728%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: calc(5.4667 * var(--u)) calc(3.3333 * var(--u)) 0;
    border: 1px solid #9fd8f3;
    background: #fff;
    scrollbar-color: #979797 #dbdbdb;
    scrollbar-width: thin;
  }

  .compare__panel img {
    width: calc(110.4 * var(--u));
    max-width: none;
  }

  .compare__panel::-webkit-scrollbar {
    height: calc(2.4 * var(--u));
  }

  .compare__panel::-webkit-scrollbar-track {
    background: #dbdbdb;
    border-radius: calc(1.2 * var(--u));
  }

  .compare__panel::-webkit-scrollbar-thumb {
    background: #979797;
    border-radius: calc(1.2 * var(--u));
  }

  /* =========================================================
     TUYOMI 3つの強み（デザイン 750 × 3837 ＝アコーディオンを開いた状態）
     PCと同じくカードの白背景はCSSで描き、アコーディオンで伸縮させる
     ========================================================= */
  .tuyomi {
    padding: calc(37.6 * var(--u)) 0 calc(7.3333 * var(--u));
    background-color: #cfe9f8;
    background-image: url(../img/tuyomi_bg_sp.jpg);
  }

  .tuyomi__title {
    left: 17.0667%;
    top: calc(9.2 * var(--u));
    width: 78.9333%;
  }

  .tuyomi__item--01 {
    width: 89.0667%;
    margin-left: 5.7%;
    padding: calc(108.6667 * var(--u)) 0 calc(6.8 * var(--u));
    box-shadow: 0 0 calc(1.6 * var(--u)) rgba(0, 0, 0, .10);
  }

  .tuyomi__figure {
    left: -1.1976%;
    top: calc(-11.2 * var(--u));
    width: 101.0479%;
  }

  .tuyomi__item--02 {
    width: 90.6667%;
    margin: calc(3.4667 * var(--u)) 0 0 5.4667%;
  }

  .tuyomi__item--03 {
    width: 90.8%;
    margin: calc(2.8 * var(--u)) 0 0 5.3333%;
  }

  /* 影はPCと同じ見え方（0 0 9px rgba(0,0,0,.14)）。--u が 7.5px なので 1.2u = 9px */
  .acc {
    width: 89.6707%;
    margin: 0 0 0 4.6407%;
    box-shadow: 0 0 calc(1.2 * var(--u)) rgba(0, 0, 0, .14);
  }

  .acc__btn {
    height: calc(11.7333 * var(--u));
    padding: 0 calc(6 * var(--u));
    border-radius: calc(.5333 * var(--u));
    font-size: calc(4.2667 * var(--u));
    white-space: nowrap;
  }

  /* 11×11・線幅5pxだと潰れて見えるので、線を細く（3px）・全体を大きく（24px）する。
     .acc__btn の右パディング 6u 内に収め、ラベルとの間に 0.93u ほど余白を残す */
  .acc__icon {
    right: calc(1.8667 * var(--u));
    width: calc(3.2 * var(--u));
    height: calc(.4 * var(--u));
    margin-top: calc(-.2 * var(--u));
  }

  .acc__icon::after {
    width: calc(.4 * var(--u));
    height: calc(3.2 * var(--u));
    margin: calc(-1.6 * var(--u)) 0 0 calc(-.2 * var(--u));
  }

  .acc__inner {
    padding: calc(3.2 * var(--u)) 4.3406% calc(3.2 * var(--u)) 3.8397%;
  }

  .acc__scroll {
    height: calc(59.8667 * var(--u));
    padding: calc(2.6667 * var(--u)) 0 0 calc(2.8 * var(--u));
    overflow-x: auto;
    overflow-y: hidden;
    border: calc(.2667 * var(--u)) solid #e1e1e1;
    background: #fff;
    scrollbar-color: #979797 #dbdbdb;
    scrollbar-width: thin;
  }

  .acc__scroll img {
    width: calc(114.8 * var(--u));
    max-width: none;
    margin: 0;
  }

  .acc__scroll::-webkit-scrollbar {
    height: calc(2.1333 * var(--u));
  }

  .acc__scroll::-webkit-scrollbar-track {
    background: #dbdbdb;
    border-radius: calc(1.0667 * var(--u));
  }

  .acc__scroll::-webkit-scrollbar-thumb {
    background: #979797;
    border-radius: calc(1.0667 * var(--u));
  }

  /* =========================================================
     VOICE お客様の声（デザイン 750 × 1127 / 1枚送り）
     カードが 648×821 になり、PCと同じく背景＋重ね方式にしている
     ========================================================= */
  .voice {
    aspect-ratio: 680 / 1127;
    background-image: url(../img/voice_bg_sp.jpg);
  }

  .voice__stage {
    left: 7.3333%;
    top: 20.0532%;
    right: auto;
    bottom: auto;
    width: 86.4%;
    height: 100%;
  }

  .voice__track {
    left: 0;
    top: 0;
    width: 100%;
  }

  .voice__slide {
    flex: 0 0 100%;
    opacity: 1;
    transform: none;
  }

  .voice__slide img {
    width: 100%;
    margin-left: 0;
  }

  .voice__arrow {
    top: 52.9148%;
    height: 5.59%;
  }

  .voice__arrow--prev {
    left: 2.5%;
    width: 4%;
  }

  .voice__arrow--next {
    left: 93.2%;
    width: 4.1333%;
  }

  .voice__arrow::before {
    inset: calc(-3 * var(--u)) calc(-3 * var(--u));
  }

  .voice__arrow--prev:hover,
  .voice__arrow--next:hover {
    transform: none;
  }

  /* =========================================================
     SUPPORT（デザイン 750 × 2596 / 法人・個人比較表を重ねる）
     ========================================================= */
  .support__sp {
    width: 100%;
  }

  .graph {
    left: 5.3333%;
    top: 76.1895%;
    width: 90.9333%;
    height: 24.6533%;
    background: #fff;
    scroll-margin-top: calc(16 * var(--u));
  }

  .graph__scroll {
    position: absolute;
    left: .2933%;
    top: .9375%;
    width: 98.2405%;
    height: 85.4375%;
    padding: calc(1.0667 * var(--u));
  }

  .graph__scroll img {
    width: calc(515.4667 * var(--u));
  }

  .graph__scroll::-webkit-scrollbar {
    height: calc(1.7333 * var(--u));
  }

  /* =========================================================
     OFFICE アクセス（デザイン 750 × 2012）
     背景は1枚画像。地図・道案内リンク・写真スライダーを重ねる
     ========================================================= */
  /* 背景画像 office_sp.jpg は 750×2012。高さは画像比率で確保する */
  .office {
    aspect-ratio: 750 / 2012;
    background: url(../img/office_sp.jpg) no-repeat center top / 100% auto;
  }

  /* 地図 594×370 @ (79, 344)。背景画像側は白抜きになっている */
  .office__map {
    left: 10.5333%;
    top: 17.0974%;
    width: 79.2%;
    height: 18.3897%;
    border: 0;
    background: #fff;
  }

  /* 駅名のオレンジ帯（589×55）＋案内文（453×27）。背景画像から抜かれているので実要素で組む。
     ブロックの原点＝帯の左上に合わせ、案内文は帯からの相対位置で置く */
  .office__guide {
    top: 47.3658%;
    left: 11.0667%;
    width: 78.5333%;
    height: auto;
  }

  /* 帯 @ (83, 1090) */
  .office__guide--2 {
    top: 54.1750%;
    left: 11.0667%;
    width: 78.5333%;
  }

  /* 帯 @ (80, 1229) */
  .office__guide--3 {
    top: 61.0835%;
    left: 10.6667%;
    width: 78.5333%;
  }

  .cback {
    width: 38.4%;
    margin-top: calc(6.8 * var(--u));
  }

  .office__guide-bar {
    width: 100%;
  }

  /* 「＞写真による詳しい道案内はこちら」（454×27）。リンク先を自前の道案内ページに差し替えたので表示する
     （旧リンク先 oc-tax.biz/guide-lp-* はスマホだと旧SPサイトのトップへ強制リダイレクトされるため隠していた）。
     位置は帯の左上からの相対値：帯1 (+65, +77)、帯2 (+65, +76)、帯3 (+68, +76) */
  .office__guide-text {
    position: absolute;
    left: calc(8.6667 * var(--u));
    top: calc(10.2667 * var(--u));
    line-height: 1;
  }

  .office__guide--2 .office__guide-text {
    top: calc(10.1333 * var(--u));
  }

  .office__guide--3 .office__guide-text {
    left: calc(9.0667 * var(--u));
    top: calc(10.1333 * var(--u));
  }

  .office__guide a {
    font-size: calc(3.8 * var(--u));
  }

  /* オフィス写真スライダー */
  .osld {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* 写真 465×350 @ (145, 1442) */
  .osld__stage {
    position: absolute;
    left: 19.3333%;
    top: 71.6700%;
    width: 62%;
    height: 17.3956%;
    overflow: hidden;
    pointer-events: auto;
  }

  .osld__track {
    display: flex;
    width: 100%;
    will-change: transform;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  }

  .osld__track.is-instant {
    transition: none;
  }

  .osld__slide {
    flex: 0 0 100%;
    line-height: 0;
  }

  .osld__slide img {
    width: 100%;
    aspect-ratio: 465 / 350;
    object-fit: cover;
  }

  /* キャプション・ドット・矢印は背景画像から消えたので、素の要素として描く */
  .osld__caption {
    position: absolute;
    left: 30.6667%;
    top: 89.7117%;
    width: 38.6667%;
    height: 2.4851%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: calc(4 * var(--u));
    font-weight: 700;
    line-height: 1.2;
  }

  .osld__dots {
    position: absolute;
    left: 40.6667%;
    top: 93.4394%;
    width: 18.6667%;
    height: 1.4911%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(3.2 * var(--u));
    pointer-events: auto;
  }

  /* 見た目はデザインどおり9pxの小さな丸。タップ領域だけ ::before で広げる */
  .osld__dot {
    position: relative;
    width: calc(1.2 * var(--u));
    height: calc(1.2 * var(--u));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
  }

  .osld__dot::before {
    content: "";
    position: absolute;
    inset: calc(-1.6 * var(--u));
  }

  .osld__dot.is-current {
    background: #fff;
  }

  /* 矢印 31×53 @ (69, 1590) / (651, 1591)。お客様の声と同じ白三角を使う */
  .osld__arrow {
    position: absolute;
    top: 79.0258%;
    width: 4.1333%;
    height: 2.6342%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
  }

  .osld__arrow::before {
    content: "";
    position: absolute;
    inset: calc(-3 * var(--u));
  }

  .osld__arrow img {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .osld__arrow--prev {
    left: 9.2%;
  }

  .osld__arrow--prev img {
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }

  .osld__arrow--next {
    left: 86.8%;
  }

  .osld__arrow--next img {
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  /* =========================================================
     FAQ（デザイン 750 × 1424 / テキスト組み）
     ========================================================= */
  /* 背景はSP用（750×1424・上端は白、下に向かってドットが出る）。
     アコーディオンの開閉でセクション高さが変わるので、下端を基準に敷いて
     足りないぶんは background-color の白でつなぐ */
  .faq {
    padding: calc(2.9333 * var(--u)) 0 calc(10.5333 * var(--u));
    background-image: url(../img/faq_bg_sp.jpg);
    background-size: 100% auto;
    background-position: center bottom;
  }

  .faq__title {
    width: 62.8%;
  }

  .faq__list {
    width: 89.6%;
    margin-top: calc(5.6 * var(--u));
  }

  .faq__item+.faq__item {
    margin-top: calc(2.5333 * var(--u));
  }

  .faq__q {
    min-height: calc(12.2667 * var(--u));
    padding: calc(1.6 * var(--u)) calc(12 * var(--u)) calc(1.6 * var(--u)) calc(4.1333 * var(--u));
    border-radius: calc(1.0667 * var(--u));
  }

  .faq__num {
    flex: 0 0 calc(9.7333 * var(--u));
    font-size: calc(4.8 * var(--u));
  }

  .faq__q .faq__text {
    font-size: calc(4 * var(--u));
    line-height: 1.4;
  }


  .faq__mark {
    right: calc(3.7333 * var(--u));
    margin-top: calc(-1.8667 * var(--u));
    border-left-width: calc(2.0667 * var(--u));
    border-right-width: calc(2.0667 * var(--u));
    border-top-width: calc(3.7333 * var(--u));
  }

  .faq__a {
    border-radius: 0 0 calc(1.0667 * var(--u)) calc(1.0667 * var(--u));
  }

  .faq__a.is-open {
    box-shadow: 0 calc(.8 * var(--u)) calc(2.6667 * var(--u)) rgba(0, 0, 0, .20);
  }

  .faq__a-inner {
    padding: calc(4.4 * var(--u));
  }

  .faq__num--a {
    flex: 0 0 calc(9.7333 * var(--u));
    font-size: calc(4.8 * var(--u));
  }

  .faq__a .faq__text {
    font-size: calc(3.4667 * var(--u));
    line-height: 1.7;
  }

  .faq__graph .graph__scroll {
    position: static;
    width: 100%;
    height: auto;
    padding: calc(1.0667 * var(--u));
  }

  .faq__graph .graph__scroll img {
    width: calc(358.3 * var(--u));
  }

  /* =========================================================
     MEMBER スタッフ紹介（デザイン 750 × 1998）
     背景 member_bg_sp.png の上に、見出しとスタッフ8枚をPSD座標どおりに重ねる
     （位置・サイズは 750 × 1998 に対する %）
     ========================================================= */
  .member {
    aspect-ratio: 750 / 1998;
    background: #fbfbfb url(../img/member_bg_sp.png) no-repeat center top / 100% 100%;
  }

  /* 見出し 721×229 を (15, 25) に配置 */
  .member__title {
    left: 2%;
    top: 1.2513%;
    width: 96.1333%;
  }

  .member__list {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    margin: 0;
  }

  .member__item {
    position: absolute;
  }

  /* 川端下 悠 294×381 @ (61, 267) */
  .member__item:nth-child(1) {
    left: 8.1333%;
    top: 13.3634%;
    width: 39.2%;
  }

  /* 府川 大地 294×381 @ (394, 270) */
  .member__item:nth-child(2) {
    left: 52.5333%;
    top: 13.5135%;
    width: 39.2%;
  }

  /* 内海 誠明 292×379 @ (62, 679) */
  .member__item:nth-child(3) {
    left: 8.2667%;
    top: 33.984%;
    width: 38.9333%;
  }

  /* 元田 稀大 292×378 @ (395, 679) */
  .member__item:nth-child(4) {
    left: 52.6667%;
    top: 33.984%;
    width: 38.9333%;
  }

  /* 高根 貴典 296×383 @ (61, 1092) */
  .member__item:nth-child(5) {
    left: 8.1333%;
    top: 54.6547%;
    width: 39.4667%;
  }

  /* 飯塚 彩実紗 295×384 @ (394, 1093) */
  .member__item:nth-child(6) {
    left: 52.5333%;
    top: 54.7047%;
    width: 39.3333%;
  }

  /* 髙野 珠羽 301×384 @ (58, 1509) */
  .member__item:nth-child(7) {
    left: 7.7333%;
    top: 75.5255%;
    width: 40.1333%;
  }

  /* 布川 拓磨 301×387 @ (392, 1507) */
  .member__item:nth-child(8) {
    left: 52.2667%;
    top: 75.4254%;
    width: 40.1333%;
  }

  .member__btn:hover,
  .member__btn:focus-visible {
    opacity: 1;
    transform: none;
  }

  /* =========================================================
     FORM お問い合わせフォーム（デザイン 750 × 2651）
     ========================================================= */
  .form {
    padding: calc(10.6667 * var(--u)) 0 calc(13.6 * var(--u));
  }

  .form__title {
    width: 90.9333%;
  }

  .form__card {
    width: 90.1333%;
    margin-top: calc(6.2667 * var(--u));
    padding: calc(7.7333 * var(--u)) calc(4.2667 * var(--u)) calc(10 * var(--u));
  }

  .cform__steps {
    width: 86.93%;
    font-size: calc(4 * var(--u));
  }

  .cform__progress {
    width: 86.93%;
    height: calc(1.8667 * var(--u));
    margin-top: calc(2.2667 * var(--u));
    border-radius: calc(.9333 * var(--u));
  }

  .cform__progress-bar {
    border-radius: calc(.9333 * var(--u));
  }

  .cform__row {
    margin-top: calc(6 * var(--u));
  }

  .cform__row:first-of-type {
    margin-top: calc(9.0667 * var(--u));
  }

  .cform__label {
    margin-bottom: calc(1.6 * var(--u));
    font-size: calc(3.8667 * var(--u));
  }

  .cform__req,
  .cform__any {
    margin-left: calc(.8 * var(--u));
    padding: 0 calc(.9333 * var(--u));
    border-radius: calc(.4 * var(--u));
    font-size: calc(2.6667 * var(--u));
  }

  .cform__input,
  .cform__textarea,
  .cform__select,
  .cform__unit {
    font-size: calc(3.7333 * var(--u));
  }

  .cform__input {
    height: calc(11.0667 * var(--u));
    padding: 0 calc(4.1333 * var(--u));
    border-radius: calc(.4 * var(--u));
  }

  .cform__textarea {
    height: calc(27.4667 * var(--u));
    padding: calc(2.6667 * var(--u));
    border-radius: calc(.4 * var(--u));
    line-height: 1.68;
  }

  .cform__select {
    width: calc(19.8667 * var(--u));
    height: calc(10.5333 * var(--u));
    padding: 0 calc(1.3333 * var(--u));
    border-radius: calc(.4 * var(--u));
  }

  .cform__select--wide {
    width: calc(21.3333 * var(--u));
  }

  .cform__unit {
    padding: 0 calc(1.3333 * var(--u));
  }

  .cform__note {
    margin-top: calc(1.0667 * var(--u));
    font-size: calc(2.6667 * var(--u));
  }

  /* ご相談内容（複数選択のチェックリスト） */
  .cform__checks {
    gap: calc(2.1333 * var(--u));
    margin-top: calc(1.3333 * var(--u));
  }

  .cform__checkitem {
    font-size: calc(3.4667 * var(--u));
    line-height: 1.45;
  }

  .cform__check {
    width: calc(4.6667 * var(--u));
    height: calc(4.6667 * var(--u));
    margin: calc(.2667 * var(--u)) calc(1.7333 * var(--u)) 0 0;
    border-radius: calc(.4 * var(--u));
  }

  /* SPは幅が足りないので「その他」の記入欄はチェックの下に落とす */
  .cform__checkrow {
    flex-direction: column;
    align-items: stretch;
    gap: calc(1.3333 * var(--u));
  }

  .cform__otherinput {
    width: 100%;
    height: calc(9.3333 * var(--u));
    padding: 0 calc(2.6667 * var(--u));
    font-size: calc(3.4667 * var(--u));
  }

  .cform__agree {
    margin-top: calc(8.9333 * var(--u));
    font-size: calc(3.2 * var(--u));
    line-height: 1.5;
  }

  .cform__submit-wrap {
    margin-top: calc(5.0667 * var(--u));
  }

  .cform__submit {
    width: calc(59.8667 * var(--u));
    max-width: 100%;
    height: calc(14.2667 * var(--u));
    font-size: calc(6.1333 * var(--u));
  }

  .cform__submit:hover {
    transform: none;
  }

  /* ---------- 確認画面／完了画面 ---------- */
  .form__title-text {
    font-size: calc(6.4 * var(--u));
  }

  .cform__value {
    min-height: calc(12 * var(--u));
    padding: calc(2.6667 * var(--u)) calc(3.2 * var(--u));
    font-size: calc(4 * var(--u));
  }

  /* SPはボタンが大きいので縦積みにする */
  .cform__btns {
    flex-direction: column-reverse;
    gap: calc(3.2 * var(--u));
    margin-top: calc(5.0667 * var(--u));
  }

  .cform__errors {
    padding: calc(3.2 * var(--u));
    font-size: calc(3.4667 * var(--u));
  }

  .cform__thanks {
    margin-top: calc(5.0667 * var(--u));
    font-size: calc(3.7333 * var(--u));
    text-align: left;
  }

  /* =========================================================
     FOOTER
     ========================================================= */
  .footer {
    height: auto;
    padding: calc(3.4667 * var(--u)) calc(2.6667 * var(--u));
  }

  .footer__copy {
    font-size: calc(3.0667 * var(--u));
    text-align: center;
  }

  /* =========================================================
     MODAL スタッフ紹介ポップアップ
     SPの枠画像は 722 × 854。紹介文は枠の内側で縦スクロールさせる
     ========================================================= */
  .modal {
    padding: calc(2.6667 * var(--u));
  }

  .modal__box {
    padding: calc(9 * var(--u)) calc(5.3333 * var(--u)) calc(7.4667 * var(--u));
    border-radius: calc(1.3333 * var(--u));
  }

  .modal.is-photo .modal__box {
    width: 100%;
    max-width: min(722px, 100%, calc((100vh - 5.3333 * var(--u)) * 722 / 854));
  }

  .modal__photo-wrap {
    aspect-ratio: 722 / 854;
    overflow: hidden;
  }

  .modal__scroll {
    left: 2.6%;
    top: 28.5%;
    width: 95%;
    height: 67.7%;
  }

  .modal__scroll-img {
    width: 94%;
    margin: 5.5% auto;
  }

  .modal__scroll::-webkit-scrollbar {
    width: calc(1.2 * var(--u));
  }

  .modal__close {
    right: calc(1.3333 * var(--u));
    top: calc(1.3333 * var(--u));
    width: calc(6.4 * var(--u));
    height: calc(6.4 * var(--u));
  }

  .modal__close::before,
  .modal__close::after {
    width: calc(3.0667 * var(--u));
    height: calc(.4 * var(--u));
  }

  .modal__role {
    font-size: calc(3.0667 * var(--u));
  }

  .modal__name {
    font-size: calc(5.3333 * var(--u));
  }

  .modal__note {
    margin-top: calc(3.2 * var(--u));
    padding-top: calc(3.2 * var(--u));
    font-size: calc(3.2 * var(--u));
  }
}

/* 狭い端末（iPhone SE など）でも比率レイアウトのまま縮小するため、
   幅ベースの指定のみで完結させている。追加のブレイクポイントは設けない。 */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
/* ご相談内容：必須バッジの隣に表示 */
.cform__multi-note {
  display: inline;
  margin-left: 0.7em;
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
}

/* スライドを重ね合わせの基準にする（これだけ残す） */
.voice__slide {
  position: relative !important;
}

/* --- 親要素：ボタン配置の基準点にする --- */
.voice__slide {
  position: relative;
  width: 100%;
}

/* --- ボタン共通（PC基本設定） --- */
.interview_link {
  position: absolute;
  right: 3%;
  bottom: 6%;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 19%;
  height: 39px;
  background: #ffffff;
  color: #007bc7;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #007bc7;
  border-radius: 30px;
  line-height: 1;
  transition: all 0.3s ease;
}

.interview_link:hover {
  background: #007bc7;
  color: #ffffff;
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ==========================================
   スマホ表示（sp）時の調整
========================================== */
@media screen and (max-width: 768px) {
  .interview_link {
    right: 5%;
    bottom: 3%;
    width: 32%;
    max-width: 160px;
    height: 26px;
    padding: 0;
    font-size: 12px;
    border-width: 1.5px;
}
}
//* ==========================================
   インタビューセクション全体
========================================== */
.interview {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
}

.interview-contents{
width: 100%;
}

.interview-sp-img {
  display: none;
}

/* ==========================================
   前半パート：背景01 (1920 x 2342)
========================================== */
.interview-inner01 {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 2342;
  background: url('../img/interview_bg_01.jpg') no-repeat center top / 100% 100%;
}

/* タイトル（お客様インタビュー） */
.interview-title {
  position: absolute;
  left: 31.25%;      /* (100% - 37.5%) / 2 で中央 */
  top: 2.8%;         /* カンプ上のY位置 (約112px / 2342px) */
  width: 37.5%;
  text-align: center;
}

.interview-title img {
  width: 83%;
  height: auto;
  display: block;
}

/* トップの写真カード（item-top） */
.item-top {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3.8%;
  width: 100%;
  height: auto;
  display: block;
}

/* 1. きっかけ・選んだ理由（item-01） */
.item-01 {
  position: absolute;
  top: 25%;
  height: auto;
  display: block;
}

/* 2. 会社設立について（item-02：斜め青帯あり） */
.item-02 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 71%;
  height: auto;
  display: block;
}

.interview2-inner01 {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 2618;
  background: url('../img/interview2_bg_01.jpg') no-repeat center top / 100% 100%;
}

/* トップの写真カード（item-top） */
.item-top2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3.8%;
  width: 100%;
  height: auto;
  display: block;
}

/* 1. きっかけ・選んだ理由（item-01） */
.item2-01 {
  position: absolute;
  top: 31%;
  height: auto;
  display: block;
}

/* 2. 会社設立について（item-02：斜め青帯あり） */
.item2-02 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 53%;
  height: auto;
  display: block;
}

.interview3-inner01 {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1850;
  background: url('../img/interview3_bg_01.jpg') no-repeat center top / 100% 100%;
}

/* トップの写真カード（item-top） */
.item-top3 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3.8%;
  width: 100%;
  height: auto;
  display: block;
}

/* 1. きっかけ・選んだ理由（item-01） */
.item3-01 {
  position: absolute;
  top: 35%;
  height: auto;
  display: block;
}

/* 2. 会社設立について（item-02：斜め青帯あり） */
.item3-02 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 64%;
  height: auto;
  display: block;
}

/* ==========================================
   後半パート：背景02 (1920 x 2182)
========================================== */
.interview-inner02 {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 2157;
  background: url('../img/interview_bg_02.jpg') no-repeat center top / 100% 100%;
}

/* 3. 顧問契約について（item-03） */
.item-03 {
  position: absolute;
  top: -4%;
  width: 100%;
  height: auto;
  display: block;
}

/* 4. 融資サポートについて（item-04：斜め青帯あり） */
.item-04 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 19.5%;
  width: 100%;
  height: auto;
  display: block;
}

/* 5. OCパートナーズについて（item-05） */
.item-05 {
  position: absolute;
  top: 54.8%;
  width: 100%;
  height: auto;
  display: block;
}

.interview2-inner02 {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1555;
  background: url('../img/interview2_bg_02.jpg') no-repeat center top / 100% 100%;
}

/* 3. 顧問契約について（item-03） */
.item2-03 {
  position: absolute;
  top: -45%;
  width: 100%;
  height: auto;
  display: block;
}

/* 4. 融資サポートについて（item-04：斜め青帯あり） */
.item2-04 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -4.5%;
  width: 100%;
  height: auto;
  display: block;
}

/* 5. OCパートナーズについて（item-05） */
.item2-05 {
  position: absolute;
  top: 38.8%;
  width: 100%;
  height: auto;
  display: block;
}


.interview3-inner02 {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1946;
  background: url('../img/interview3_bg_02.jpg') no-repeat center top / 100% 100%;
}

/* 3. 顧問契約について（item-03） */
.item3-03 {
  position: absolute;
  top: -8%;
  width: 100%;
  height: auto;
  display: block;
}

/* 4. 融資サポートについて（item-04：斜め青帯あり） */
.item3-04 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 20%;
  width: 100%;
  height: auto;
  display: block;
}

/* 5. OCパートナーズについて（item-05） */
.item3-05 {
  position: absolute;
  top: 52.8%;
  width: 100%;
  height: auto;
  display: block;
}
.interview-sp-img {
  display: none;
}

@media screen and (max-width: 768px) {
  #interview {
    background: none; /* PC用の背景画像を消す */
    padding: 0;             /* PC用の余白をリセット（全幅表示にする場合） */
    min-height: auto;       /* 高さを指定していた場合は解除 */
  }

  /* PC用のパーツをすべて非表示にする */
  .interview-title,
  .interview-inner01,
  .interview-inner02,
  .interview2-inner01,
  .interview2-inner02,
  .interview3-inner01,
  .interview3-inner02,
  .interview-contents {
    display: none;
  }

  /* SP用の画像を表示する */
  .interview-sp-img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像下の余分な隙間を防止 */
  }
}


/* ==========================================
   戻るボタン（横幅中央・最下部固定）
========================================== */
.interview-btn-wrap {
  position: absolute;
  left: 0;
  bottom: 4%;           /* 背景下部からの距離（必要に応じて微調整） */
  width: 100%;          /* 画面幅いっぱいに広げて中央配置 */
  text-align: center;
  z-index: 50;          /* 画像より手前に表示 */
  line-height: normal;  /* 親要素の line-height: 0 をリセット */
}

.interview-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  max-width: 90%;
  height: 60px;
  background: #ffffff;
  color: #007bc7;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 2px solid #007bc7;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 123, 199, 0.15);
  line-height: 1;
  transition: all 0.3s ease;
}

/* 矢印アイコン */
.interview-back-btn .btn-arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #007bc7;
  border-left: 2px solid #007bc7;
  transform: rotate(-45deg);
  margin-right: 14px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* ホバー時の挙動 */
.interview-back-btn:hover {
  background: #007bc7;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 123, 199, 0.3);
  transform: translateY(-2px);
}

.interview-back-btn:hover .btn-arrow {
  border-color: #ffffff;
  transform: translateX(-4px) rotate(-45deg);
}
.btn02{
  margin-bottom: 2%;
}

.btn03{
  margin-bottom: 1%;
}
/* スマホ表示対応 */
@media screen and (max-width: 768px) {
  /* PC用ブロックを非表示にして余分な高さを消す */
  .interview-inner01,
  .interview-inner02,
  .interview2-inner01,
  .interview2-inner02,
  .interview3-inner01,
  .interview3-inner02 {
    display: none !important;
  }

  /* SP画像を確実に表示 */
  .interview-sp-img {
    display: block !important;
    width: 100%;
    height: auto;
  }

  /* ボタンのラッパー：absoluteを解除して通常配置にする */
  .interview-btn-wrap {
    position: static !important; /* absoluteを解除 */
    margin-top: -109px;            /* 画像との間隔 */
    margin-bottom: 20px;         /* 画面最下部との余白 */
    bottom: auto;                /* -592% をリセット */
  }

  .interview-back-btn {
    width: 260px;
    height: 50px;
    font-size: 14px;
    display: inline-flex;
  }
}