@charset "UTF-8";
/* ==========================================================================
   index.css（トップページ固有）
   PC: calc(デザインpx * var(--vw)) / SP: px
   ========================================================================== */

/* ==========================================================================
   ファーストビュー
   ========================================================================== */
.p-fv {
  overflow: hidden;
  background: #f5f9fb;
}

.p-fv__inner {
  display: flex;
  flex-direction: column;
  gap: calc(45 * var(--vw));
  max-width: 1920px;
  margin: 0 auto;
  padding: calc(60 * var(--vw)) calc(80 * var(--vw)) calc(98 * var(--vw));
}

.p-fv__guide {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 1.8;
}

.p-fv__lead {
  width: calc(700 * var(--vw));
  font-size: calc(18 * var(--vw));
  font-weight: 700;
}

.p-fv__en {
  width: calc(250 * var(--vw));
  font-size: calc(13 * var(--vw));
  color: var(--c-gray);
}

.p-fv__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(660 * var(--vw));
}

.p-fv__copy {
  display: flex;
  flex-direction: column;
  gap: calc(35 * var(--vw));
  width: calc(830 * var(--vw));
}

.p-fv__catch {
  font-size: calc(100 * var(--vw));
  font-weight: 900;
  line-height: 1.35;
}

.p-fv__catch-line {
  display: block;
  overflow: hidden;
}

.p-fv__catch-line--blue {
  color: var(--c-blue);
}

.p-fv__catch-text {
  display: block;
}

.p-fv__desc {
  font-size: calc(22 * var(--vw));
  line-height: 1.9;
}

.p-fv__actions {
  display: flex;
  align-items: center;
  gap: calc(34 * var(--vw));
}

.p-fv__btn {
  width: calc(320 * var(--vw));
  height: calc(96 * var(--vw));
}

.p-fv__link {
  width: calc(230 * var(--vw));
  font-size: calc(18 * var(--vw));
  line-height: 1.8;
}

.p-fv__note {
  font-size: calc(16 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

/* ---------- 制作サイトのイメージ（装飾） ----------
   --u = イラスト1px分。要素はgridで同じセルに重ねて配置 */
.p-fv-visual {
  --u: var(--vw);
  display: grid;
  flex: none;
  width: calc(860 * var(--u));
  height: calc(670 * var(--u));
  line-height: normal;
  pointer-events: none;
  user-select: none;
}

.p-fv-visual > * {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
}

.p-fv-visual__create {
  width: calc(485 * var(--u));
  margin: calc(-21.4 * var(--u)) 0 0 calc(40.09 * var(--u));
  font-family: var(--ff-en);
  font-size: calc(120 * var(--u));
  font-style: italic;
  font-weight: 700;
  line-height: 1.15;
  color: #dce9ef;
  text-align: center;
  white-space: nowrap;
  rotate: -5deg;
}

.p-fv-visual__plus {
  margin: calc(22 * var(--u)) 0 0 calc(815 * var(--u));
  font-family: var(--ff-arrow);
  font-size: calc(42 * var(--u));
  color: var(--c-blue);
}

.p-fv-visual__caption {
  margin: calc(635 * var(--u)) 0 0 calc(20 * var(--u));
  font-family: var(--ff-arrow);
  font-size: calc(12 * var(--u));
  color: var(--c-gray);
  white-space: nowrap;
}

/* デスクトップ */
.p-fv-desk {
  display: flex;
  flex-direction: column;
  width: calc(790 * var(--u));
  height: calc(470 * var(--u));
  margin: calc(79 * var(--u)) 0 0 calc(46.76 * var(--u));
  overflow: hidden;
  color: var(--c-ink);
  background: #e1e9ee;
  border: calc(2 * var(--u)) solid #82939a;
  box-shadow: calc(14 * var(--u)) calc(20 * var(--u)) 0 rgba(108, 138, 154, 0.13);
  rotate: -3deg;
}

.p-fv-desk__bar {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  height: calc(36 * var(--u));
  padding: calc(14 * var(--u));
  overflow: hidden;
  font-size: calc(8 * var(--u));
  line-height: 1.8;
  background: var(--c-white);
}

.p-fv-desk__dots {
  width: calc(70 * var(--u));
}

.p-fv-desk__url {
  width: calc(340 * var(--u));
}

.p-fv-desk__main {
  display: grid;
  flex: none;
  height: calc(354 * var(--u));
  padding: calc(34 * var(--u));
  overflow: hidden;
}

.p-fv-desk__main > * {
  grid-area: 1 / 1;
  align-self: start;
}

.p-fv-desk__building {
  width: calc(300 * var(--u));
  max-width: none;
  margin: calc(41 * var(--u)) 0 0 calc(416 * var(--u));
}

.p-fv-desk__content {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}

.p-fv-desk__nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 1.8;
}

.p-fv-desk__brand {
  width: calc(300 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 700;
}

.p-fv-desk__menu {
  width: calc(190 * var(--u));
  font-size: calc(9 * var(--u));
  white-space: pre-wrap;
}

.p-fv-desk__copy {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  width: calc(450 * var(--u));
}

.p-fv-desk__band {
  width: calc(430 * var(--u));
  padding: 0 calc(8 * var(--u));
  font-size: calc(45 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: #f5f8fa;
}

.p-fv-desk__band--short {
  width: calc(420 * var(--u));
}

.p-fv-desk__sub {
  font-size: calc(12 * var(--u));
  line-height: 1.6;
}

.p-fv-desk__story {
  display: flex;
  flex: none;
  gap: calc(25 * var(--u));
  height: calc(80 * var(--u));
  padding: calc(34 * var(--u));
  overflow: hidden;
  background: var(--c-white);
}

.p-fv-desk__story-title {
  flex: none;
  width: calc(130 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.8;
}

.p-fv-desk__story-text {
  flex: 1;
  font-size: calc(10 * var(--u));
  line-height: 1.8;
}

/* スマートフォン */
.p-fv-phone {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
  width: calc(198 * var(--u));
  height: calc(380 * var(--u));
  margin: calc(255.65 * var(--u)) 0 0 calc(626.11 * var(--u));
  padding: calc(30 * var(--u)) calc(18 * var(--u));
  overflow: hidden;
  color: var(--c-ink);
  background: #f2f8fb;
  border: calc(7 * var(--u)) solid #202827;
  border-radius: calc(32 * var(--u));
  box-shadow: 0 calc(15 * var(--u)) calc(25 * var(--u)) rgba(21, 42, 59, 0.13);
  rotate: 7deg;
}

.p-fv-phone__speaker {
  flex: none;
  width: calc(55 * var(--u));
  height: calc(8 * var(--u));
  margin: calc(-27 * var(--u)) 0 calc(-3 * var(--u)) calc(45 * var(--u));
  background: #202827;
  border-radius: calc(8 * var(--u));
}

.p-fv-phone__en {
  font-size: calc(7 * var(--u));
  line-height: 1.8;
}

.p-fv-phone__title {
  font-size: calc(23 * var(--u));
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.p-fv-phone__shape {
  flex: none;
  width: calc(140 * var(--u));
  max-width: none;
}

.p-fv-phone__more {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  height: calc(30 * var(--u));
  padding: calc(8 * var(--u));
  font-family: var(--ff-arrow);
  font-size: calc(8 * var(--u));
  white-space: nowrap;
  border: calc(1 * var(--u)) solid #9daeb7;
}

/* ---------- 料金サマリー ---------- */
.p-fv__summary {
  display: flex;
  height: calc(130 * var(--vw));
}

.p-fv-sum {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(18 * var(--vw));
  min-width: 0;
  padding: calc(30 * var(--vw));
  font-weight: 700;
  background: var(--c-white);
  border: 1px solid var(--c-line);
}

.p-fv-sum__en {
  font-family: var(--ff-en);
  font-size: calc(16 * var(--vw));
  line-height: normal;
  color: var(--c-sky);
  white-space: nowrap;
}

.p-fv-sum__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.p-fv-sum__name {
  width: calc(240 * var(--vw));
  font-size: calc(18 * var(--vw));
  line-height: 1.8;
}

.p-fv-sum__price {
  font-family: var(--ff-en);
  font-size: calc(28 * var(--vw));
  line-height: normal;
  white-space: nowrap;
}

/* ---------- FV 表示アニメーション（is-loaded付与で再生） ---------- */
.is-js .p-fv__catch-text {
  transform: translateY(105%);
}

.is-js .js-fv-item {
  opacity: 0;
  transform: translateY(calc(24 * var(--vw)));
}

.is-js .p-fv-visual__create,
.is-js .p-fv-desk,
.is-js .p-fv-phone,
.is-js .p-fv-visual__plus,
.is-js .p-fv-visual__caption {
  opacity: 0;
}

.is-loaded .p-fv__catch-text {
  animation: fv-rise 1.1s var(--ease-out) forwards;
}

.is-loaded .p-fv__catch-line--blue .p-fv__catch-text {
  animation-delay: 0.15s;
}

.is-loaded .js-fv-item {
  animation: fv-fade 1s var(--ease-out) forwards;
}

.is-loaded .p-fv__guide .js-fv-item { animation-delay: 0.1s; }
.is-loaded .p-fv__desc.js-fv-item { animation-delay: 0.45s; }
.is-loaded .p-fv__actions.js-fv-item { animation-delay: 0.6s; }
.is-loaded .p-fv__note.js-fv-item { animation-delay: 0.75s; }
.is-loaded .p-fv-sum:nth-child(1) { animation-delay: 0.9s; }
.is-loaded .p-fv-sum:nth-child(2) { animation-delay: 1s; }
.is-loaded .p-fv-sum:nth-child(3) { animation-delay: 1.1s; }

.is-loaded .p-fv-visual__create {
  animation: fv-create 1.4s var(--ease-out) 0.3s forwards;
}

.is-loaded .p-fv-desk {
  animation: fv-desk 1.3s var(--ease-out) 0.2s forwards;
}

.is-loaded .p-fv-phone {
  animation:
    fv-phone 1.2s var(--ease-out) 0.6s forwards,
    fv-float 6s ease-in-out 1.8s infinite;
}

.is-loaded .p-fv-visual__plus {
  animation: fv-plus 1s var(--ease-out) 1s forwards;
}

.is-loaded .p-fv-visual__caption {
  animation: fv-fade-only 1s ease 1.1s forwards;
}

@keyframes fv-rise {
  to { transform: translateY(0); }
}

@keyframes fv-fade {
  to { opacity: 1; transform: none; }
}

@keyframes fv-fade-only {
  to { opacity: 1; }
}

@keyframes fv-create {
  from { opacity: 0; translate: calc(-60 * var(--u)) 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes fv-desk {
  from { opacity: 0; translate: calc(60 * var(--u)) calc(30 * var(--u)); }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes fv-phone {
  from { opacity: 0; translate: 0 calc(80 * var(--u)); rotate: 18deg; }
  to   { opacity: 1; translate: 0 0; rotate: 7deg; }
}

@keyframes fv-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-10 * var(--u)); }
}

@keyframes fv-plus {
  from { opacity: 0; rotate: -180deg; }
  to   { opacity: 1; rotate: 0deg; }
}

/* ==========================================================================
   制作プランと料金
   ========================================================================== */
.p-plan {
  padding: calc(105 * var(--vw)) 0 calc(80 * var(--vw));
  background: #f1f7fa;
}

.p-plan__inner {
  display: flex;
  flex-direction: column;
  gap: calc(45 * var(--vw));
}

.p-plan__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.p-plan__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  width: calc(998 * var(--vw));
}

.p-plan__intro {
  width: calc(490 * var(--vw));
  padding-top: calc(32 * var(--vw));
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-plan__cards {
  display: flex;
  gap: calc(30 * var(--vw));
}

.p-plan-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  min-width: 0;
  padding: calc(31 * var(--vw)) calc(36 * var(--vw)) calc(48.7 * var(--vw));
  background: var(--c-white);
  border-top: calc(5 * var(--vw)) solid var(--c-sky);
}

.p-plan-card__en {
  font-family: var(--ff-en);
  font-size: calc(17 * var(--vw));
  font-weight: 700;
  line-height: normal;
  color: var(--c-sky);
}

.p-plan-card__title {
  font-size: calc(32 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

.p-plan-card__price-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--vw));
}

.p-plan-card__price {
  font-family: var(--ff-en);
  font-size: calc(64 * var(--vw));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.p-plan-card__tax {
  font-size: calc(17 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-plan-card__text {
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
}

.p-plan-card__btn {
  height: calc(70 * var(--vw));
  margin-top: auto;
}

.p-plan-card--dark {
  color: var(--c-white);
  background: #2d383f;
}

.p-plan-card--dark .p-plan-card__tax {
  color: #c2ced4;
}

.p-plan-card--dark .p-plan-card__text {
  color: #d3dce1;
}

.p-plan__note {
  font-size: calc(16 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-plan__consult {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(20 * var(--vw)) 0;
  font-weight: 700;
  line-height: 1.8;
  border-bottom: 1px solid var(--c-line);
}

.p-plan__consult-text {
  width: calc(1100 * var(--vw));
  font-size: calc(22 * var(--vw));
}

.p-plan__consult-link {
  width: calc(270 * var(--vw));
  font-size: calc(18 * var(--vw));
}

/* ==========================================================================
   LP制作｜プランと基本構成
   ========================================================================== */
.p-lp {
  padding-top: calc(110 * var(--vw));
}

.p-lp-intro {
  display: flex;
  flex-direction: column;
}

.p-lp-intro::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: calc(83 * var(--vw));
  background: var(--c-line-2);
}

.p-lp-intro__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: calc(190 * var(--vw));
}

.p-lp-intro__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--vw));
  width: calc(1000 * var(--vw));
}

.p-lp-price {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--vw));
  width: calc(320 * var(--vw));
  padding: calc(8 * var(--vw)) 0 0 calc(34 * var(--vw));
  color: var(--c-ink-2);
  border-left: calc(4 * var(--vw)) solid var(--c-blue-2);
}

.p-lp-price__name {
  font-size: calc(16 * var(--vw));
  font-weight: 700;
  line-height: 1.7;
}

.p-lp-price__num {
  font-family: var(--ff-en);
  font-size: calc(56 * var(--vw));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.p-lp-price__note {
  font-size: calc(16 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

.p-lp-intro__text {
  padding: calc(55 * var(--vw)) 0 calc(31 * var(--vw));
  font-size: calc(20 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

.p-lp-intro__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--vw));
}

.p-lp-intro__tag {
  display: flex;
  align-items: center;
  height: calc(48 * var(--vw));
  padding: 0 calc(16 * var(--vw));
  font-size: calc(16 * var(--vw));
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-gray-2);
  white-space: nowrap;
  background: #f4f8fa;
  border: 1px solid var(--c-line-2);
}

.p-lp-intro__step {
  padding: calc(48 * var(--vw)) 0 calc(26 * var(--vw));
}

/* 基本＋選択の組み合わせ */
.p-lp-combo {
  display: flex;
  gap: calc(16 * var(--vw));
  height: calc(308 * var(--vw));
}

.p-lp-combo__basic {
  display: flex;
  flex: none;
  flex-direction: column;
  width: calc(610 * var(--vw));
  border: 1px solid var(--c-line-2);
}

.p-lp-combo__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: calc(66 * var(--vw));
  padding: 0 calc(24 * var(--vw));
  line-height: 1.7;
  white-space: nowrap;
  background: #e2f3f9;
}

.p-lp-combo__head-title {
  font-size: calc(22 * var(--vw));
  font-weight: 700;
  color: var(--c-ink-2);
}

.p-lp-combo__head-note {
  font-size: calc(14 * var(--vw));
  color: var(--c-gray-2);
}

.p-lp-combo__basic-list {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--vw));
  padding: calc(26 * var(--vw)) calc(28 * var(--vw));
}

.p-lp-combo__basic-item {
  display: flex;
  align-items: flex-start;
  gap: calc(22 * var(--vw));
}

.p-lp-combo__basic-num {
  font-family: var(--ff-en);
  font-size: calc(18 * var(--vw));
  line-height: calc(30 * var(--vw));
  color: var(--c-blue-2);
}

.p-lp-combo__basic-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(6 * var(--vw));
}

.p-lp-combo__basic-title {
  font-size: calc(21 * var(--vw));
  font-weight: 700;
  line-height: normal;
  color: var(--c-ink-2);
}

.p-lp-combo__basic-text {
  font-size: calc(16 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

.p-lp-combo__plus {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(34 * var(--vw));
  font-family: var(--ff-en);
  font-size: calc(42 * var(--vw));
  line-height: normal;
  color: var(--c-blue-2);
}

.p-lp-combo__select {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--c-line-2);
}

.p-lp-combo__slots {
  display: flex;
  gap: calc(12 * var(--vw));
  padding: calc(34 * var(--vw)) calc(24 * var(--vw)) 0;
}

.p-lp-combo__slot {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--vw));
  min-width: 0;
  height: calc(130 * var(--vw));
  font-family: var(--ff-en);
  line-height: normal;
  white-space: nowrap;
  background: #edf6f9;
  border: 1px solid var(--c-line-2);
}

.p-lp-combo__slot-en,
.p-lp-combo__slot-ja {
  font-size: calc(10 * var(--vw));
  letter-spacing: 0.1em;
  color: var(--c-gray-2);
}

.p-lp-combo__slot-num {
  font-size: calc(34 * var(--vw));
  font-weight: 700;
  color: var(--c-blue-2);
}

.p-lp-combo__select-note {
  padding-top: calc(17 * var(--vw));
  font-size: calc(16 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
  text-align: center;
}

.p-lp-combo__max {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--vw));
  width: calc(96 * var(--vw));
  color: var(--c-white);
  white-space: nowrap;
  background: var(--c-blue-2);
}

.p-lp-combo__max-en {
  font-family: var(--ff-en);
  font-size: calc(11 * var(--vw));
  line-height: normal;
}

.p-lp-combo__max-num {
  font-family: var(--ff-en);
  font-size: calc(76 * var(--vw));
  font-weight: 700;
  line-height: normal;
}

.p-lp-combo__max-ja {
  font-size: calc(14 * var(--vw));
  line-height: 1.7;
}

.p-lp-intro__note {
  padding: calc(22 * var(--vw)) 0 calc(32 * var(--vw));
  font-size: calc(14 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

.p-lp-include {
  display: flex;
  flex-direction: column;
  min-height: calc(168 * var(--vw));
  padding: calc(28 * var(--vw)) calc(32 * var(--vw));
  font-size: calc(18 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
  background: #f4f8fa;
  border-left: calc(4 * var(--vw)) solid var(--c-blue-2);
}

.p-lp-include__title {
  margin-bottom: calc(12.4 * var(--vw));
  font-weight: 700;
  color: var(--c-ink-2);
}

.p-lp-include__note {
  margin-top: calc(5 * var(--vw));
}

/* ==========================================================================
   LP制作｜セクションカタログ
   ========================================================================== */
.p-catalog {
  padding-bottom: calc(80 * var(--vw));
}

.p-catalog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: calc(365 * var(--vw));
  padding-top: calc(60 * var(--vw));
}

.p-catalog__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--vw));
  width: calc(960 * var(--vw));
}

.p-catalog__title {
  line-height: 1.5;
}

.p-catalog__text {
  font-size: calc(18 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

.p-catalog__total {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--vw));
  width: calc(410 * var(--vw));
  padding: calc(12 * var(--vw)) 0 0 calc(46 * var(--vw));
  border-left: calc(2 * var(--vw)) solid var(--c-line-2);
}

.p-catalog__total-en {
  font-family: var(--ff-en);
  font-size: calc(14 * var(--vw));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.08em;
  color: var(--c-gray-2);
}

.p-catalog__total-row {
  display: flex;
  align-items: baseline;
  gap: calc(20 * var(--vw));
  font-weight: 700;
  white-space: nowrap;
}

.p-catalog__total-num {
  font-family: var(--ff-en);
  font-size: calc(108 * var(--vw));
  line-height: normal;
  letter-spacing: -0.05em;
  color: var(--c-blue-2);
}

.p-catalog__total-ja {
  font-size: calc(26 * var(--vw));
  line-height: 1.7;
  color: var(--c-ink-2);
}

.p-catalog__total-note {
  font-size: calc(14 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

.p-catalog__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: calc(32 * var(--vw));
}

/* カテゴリ（details要素のアコーディオン） */
.p-cat {
  width: calc(744 * var(--vw));
  border: 1px solid var(--c-line-2);
}

.p-cat__summary {
  display: block;
  list-style: none;
  cursor: pointer;
}

.p-cat__summary::-webkit-details-marker {
  display: none;
}

/* Figmaは線が内側のため、外枠2px分を引いた高さ（外寸126px） */
.p-cat__head {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--vw));
  height: calc(124 * var(--vw));
  padding: calc(28 * var(--vw));
  line-height: normal;
  background: #edf6f9;
  border-bottom: 1px solid var(--c-line-2);
  transition: background-color 0.3s, border-color 0.3s;
}

.p-cat__summary:hover .p-cat__head {
  background: #e1f0f6;
}

/* 閉じているときは見出し下の線を消す（外枠と二重線にしない） */
.p-cat:not(.is-open) .p-cat__head {
  border-bottom-color: transparent;
}

.p-cat__num {
  font-family: var(--ff-en);
  font-size: calc(36 * var(--vw));
  font-weight: 700;
  color: var(--c-blue-2);
  white-space: nowrap;
}

.p-cat__name {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(10 * var(--vw));
  min-width: 0;
  font-weight: 700;
}

.p-cat__en {
  font-family: var(--ff-en);
  font-size: calc(11 * var(--vw));
  letter-spacing: 0.1em;
  color: var(--c-gray-2);
  white-space: nowrap;
}

.p-cat__ja {
  font-size: calc(24 * var(--vw));
  color: var(--c-ink-2);
}

.p-cat__count {
  font-family: var(--ff-en);
  font-size: calc(10 * var(--vw));
  letter-spacing: 0.05em;
  color: var(--c-gray-2);
  white-space: nowrap;
}

.p-cat__body {
  overflow: hidden;
}

.p-cat__list {
  padding: calc(12 * var(--vw)) calc(28 * var(--vw)) calc(2 * var(--vw));
}

.p-cat__item {
  display: flex;
  align-items: flex-start;
  gap: calc(22 * var(--vw));
  height: calc(87.5 * var(--vw));
  padding: calc(17 * var(--vw)) 0 calc(12 * var(--vw));
  border-bottom: 1px solid var(--c-line-3);
}

.p-cat__item:last-child {
  border-bottom-color: var(--c-white);
}

.p-cat__item-num {
  flex: none;
  width: calc(20 * var(--vw));
  font-family: var(--ff-en);
  font-size: calc(14 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

.p-cat__item-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(5 * var(--vw));
  line-height: 1.5;
}

.p-cat__item-title {
  font-size: calc(18 * var(--vw));
  font-weight: 700;
  color: var(--c-ink-2);
}

.p-cat__item-text {
  font-size: calc(16 * var(--vw));
  color: var(--c-gray-2);
}

.p-catalog__point {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--vw));
  height: calc(120 * var(--vw));
  margin-top: calc(32 * var(--vw));
  padding: calc(32 * var(--vw));
  background: #f4f8fa;
}

.p-catalog__point-title {
  font-size: calc(18 * var(--vw));
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-blue-2);
  white-space: nowrap;
}

.p-catalog__point-text {
  flex: 1;
  font-size: calc(17 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

/* ==========================================================================
   LP制作｜目的別のページ構成例
   ========================================================================== */
.p-lp-example {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--vw));
  padding-bottom: calc(70 * var(--vw));
}

.p-lp-example__list {
  display: flex;
  gap: calc(28 * var(--vw));
}

.p-lp-ex {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  height: calc(732 * var(--vw));
  padding: calc(24 * var(--vw));
  background: #f4f8fa;
  border: 1px solid var(--c-line-2);
}

.p-lp-ex__intro {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: calc(20 * var(--vw));
  height: calc(186 * var(--vw));
  padding-top: calc(20 * var(--vw));
}

.p-lp-ex__en {
  font-family: var(--ff-en);
  font-size: calc(12 * var(--vw));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.08em;
  color: var(--c-blue-2);
}

.p-lp-ex__title {
  font-size: calc(26 * var(--vw));
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.p-lp-ex__text {
  font-size: calc(14 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

.p-lp-ex__model {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line-2);
}

.p-lp-ex__fv {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--vw));
  height: calc(92 * var(--vw));
  padding: calc(18 * var(--vw)) calc(20 * var(--vw));
  line-height: 1.7;
  background: #e2f3f9;
}

.p-lp-ex__fv-label {
  font-size: calc(13 * var(--vw));
  color: var(--c-gray-2);
}

.p-lp-ex__fv-title {
  font-size: calc(18 * var(--vw));
  font-weight: 700;
  color: var(--c-ink-2);
}

.p-lp-ex__items {
  padding: 0 calc(20 * var(--vw));
  background: var(--c-white);
}

.p-lp-ex__item {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--vw));
  height: calc(52 * var(--vw));
  border-bottom: 1px solid var(--c-line-3);
}

.p-lp-ex__item:last-child {
  border-bottom: 0;
}

.p-lp-ex__item-num {
  font-family: var(--ff-en);
  font-size: calc(12 * var(--vw));
  line-height: normal;
  color: var(--c-gray-2);
  white-space: nowrap;
}

.p-lp-ex__item-name {
  flex: 1;
  font-size: calc(17 * var(--vw));
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.p-lp-ex__cv {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--vw));
  height: calc(94 * var(--vw));
  padding: calc(18 * var(--vw)) calc(20 * var(--vw));
  color: var(--c-white);
  background: var(--c-blue-2);
}

.p-lp-ex__cv--nogap {
  gap: 0;
}

.p-lp-ex__cv-label {
  font-size: calc(12 * var(--vw));
  line-height: 1.7;
}

.p-lp-ex__cv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(17 * var(--vw));
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}

.p-lp-ex__cv-arrow {
  font-family: var(--ff-arrow);
  font-size: calc(28 * var(--vw));
  font-weight: 400;
  line-height: normal;
}

/* ==========================================================================
   LP制作｜制作範囲・追加ルール・相談
   ========================================================================== */
.p-lp-scope {
  padding-bottom: calc(70 * var(--vw));
}

.p-lp-scope__head {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--vw));
  padding-bottom: calc(28 * var(--vw));
  font-weight: 700;
  border-bottom: 1px solid var(--c-line-2);
}

.p-lp-scope__en {
  font-family: var(--ff-en);
  font-size: calc(13 * var(--vw));
  line-height: normal;
  letter-spacing: 0.08em;
  color: var(--c-blue-2);
  white-space: nowrap;
}

.p-lp-scope__title {
  flex: 1;
  font-size: calc(28 * var(--vw));
  line-height: 1.7;
  color: var(--c-ink-2);
}

.p-lp-scope__rules {
  display: flex;
  gap: calc(28 * var(--vw));
  padding: calc(32 * var(--vw)) 0;
  border-bottom: 1px solid var(--c-line-2);
}

.p-lp-rule {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(18 * var(--vw));
  min-width: 0;
  height: calc(170 * var(--vw));
  padding-right: calc(26 * var(--vw));
  border-right: 1px solid var(--c-line-3);
}

.p-lp-rule:last-child {
  padding-right: 0;
  border-right: 0;
}

.p-lp-rule__num {
  font-family: var(--ff-en);
  font-size: calc(16 * var(--vw));
  font-weight: 700;
  line-height: normal;
  color: var(--c-blue-2);
}

.p-lp-rule__title {
  font-size: calc(19 * var(--vw));
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.p-lp-rule__text {
  font-size: calc(15 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

.p-lp-rule__em {
  font-size: calc(16 * var(--vw));
  font-weight: 700;
  color: var(--c-blue-2);
}

.p-lp-scope__note {
  padding: calc(28 * var(--vw)) 0 calc(40 * var(--vw));
  font-size: calc(14 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

.p-lp-consult {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(156 * var(--vw));
  padding: calc(32 * var(--vw)) calc(40 * var(--vw)) calc(32 * var(--vw)) calc(36 * var(--vw));
  background: #edf6f9;
  border-left: calc(4 * var(--vw)) solid var(--c-blue-2);
}

.p-lp-consult__body {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--vw));
  width: calc(1020 * var(--vw));
  line-height: 1.7;
}

.p-lp-consult__title {
  font-size: calc(24 * var(--vw));
  font-weight: 700;
  color: var(--c-ink-2);
}

.p-lp-consult__text {
  font-size: calc(17 * var(--vw));
  color: var(--c-gray-2);
}

.p-lp-consult__btn {
  width: calc(338 * var(--vw));
  height: calc(84 * var(--vw));
  padding: 0 calc(32 * var(--vw));
  background: var(--c-blue-2);
  border-color: var(--c-blue-2);
}

.p-lp-consult__btn .c-btn__arrow {
  font-size: calc(32 * var(--vw));
}

/* ==========================================================================
   WFプランのページ構成
   ========================================================================== */
.p-wf {
  padding: calc(110 * var(--vw)) 0 calc(75 * var(--vw));
  background: #f2f4f6;
}

.p-wf__inner {
  display: flex;
  flex-direction: column;
  gap: calc(36 * var(--vw));
}

.p-wf__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.p-wf__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  width: calc(1123 * var(--vw));
}

.p-wf__title {
  line-height: 1.6;
}

.p-wf-price {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--vw));
  width: calc(365 * var(--vw));
  padding-left: calc(32 * var(--vw));
  border-left: calc(4 * var(--vw)) solid #829aa5;
}

.p-wf-price__name {
  font-size: calc(18 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

.p-wf-price__num {
  font-family: var(--ff-en);
  font-size: calc(58 * var(--vw));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.p-wf-price__note {
  font-size: calc(18 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-wf__text {
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-wf__standards {
  display: flex;
  gap: calc(30 * var(--vw));
}

/* 基本ページカード（WF・通常プラン共通） */
.p-page-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(22 * var(--vw));
  min-width: 0;
  height: calc(268 * var(--vw));
  padding: calc(31 * var(--vw)) calc(36 * var(--vw)) calc(36 * var(--vw));
  background: var(--c-white);
  border-top: calc(5 * var(--vw)) solid #9aadb7;
}

.p-page-card__en {
  font-size: calc(16 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-page-card__title {
  font-size: calc(30 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

.p-page-card__text {
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-wf__select-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 1.8;
}

.p-wf__select-title {
  width: calc(938 * var(--vw));
  font-size: calc(27 * var(--vw));
  font-weight: 700;
}

.p-wf__select-note {
  width: calc(550 * var(--vw));
  font-size: calc(18 * var(--vw));
  color: var(--c-gray);
}

/* 選択ページ一覧表（WF・通常プラン共通） */
.p-page-table {
  display: flex;
  gap: calc(30 * var(--vw));
}

.p-wf__table {
  height: calc(500 * var(--vw));
}

.p-page-table__col {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  background: var(--c-white);
  border: 1px solid var(--c-line);
}

.p-page-table__head {
  display: flex;
  flex: none;
  align-items: center;
  height: calc(70 * var(--vw));
  padding: 0 calc(26 * var(--vw));
  font-size: calc(20 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-white);
  background: #49616e;
}

.p-page-table__list {
  padding: calc(13 * var(--vw)) calc(26 * var(--vw));
}

.p-page-table__item {
  display: flex;
  align-items: center;
  height: calc(57 * var(--vw));
  font-size: calc(19 * var(--vw));
  line-height: 1.8;
  border-bottom: 1px solid var(--c-line);
}

.p-page-table__item--noline {
  border-bottom: 0;
}

.p-wf__note {
  font-size: calc(16 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-wf-combo {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--vw));
  height: calc(273 * var(--vw));
  padding: calc(36 * var(--vw));
  background: var(--c-white);
  border: 1px solid var(--c-line);
}

.p-wf-combo__en {
  font-size: calc(15 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-sky);
}

.p-wf-combo__title {
  font-size: calc(28 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

.p-wf-combo__formula {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-wf-combo__box {
  width: calc(564 * var(--vw));
  padding: calc(22 * var(--vw));
  font-size: calc(21 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
  background: #edf2f5;
}

.p-wf-combo__box--select {
  width: calc(314 * var(--vw));
  background: #ddecf4;
}

.p-wf-combo__op {
  width: calc(40 * var(--vw));
  font-size: calc(28 * var(--vw));
  line-height: 1.8;
}

.p-wf-combo__result {
  width: calc(220 * var(--vw));
  font-size: calc(26 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

/* プランに含まれる制作（WF・通常プラン共通） */
.p-include {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--vw));
  padding: calc(34 * var(--vw)) calc(34 * var(--vw)) calc(34 * var(--vw)) calc(29 * var(--vw));
  white-space: nowrap;
  background: #e7edf2;
  border-left: calc(5 * var(--vw)) solid #829aa5;
}

.p-include__title {
  font-size: calc(20 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

.p-include__list {
  font-size: calc(18 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-include__note {
  font-size: calc(18 * var(--vw));
  line-height: 1.7;
  color: var(--c-gray-2);
}

/* ==========================================================================
   通常プランのページとセクション
   ========================================================================== */
.p-orig {
  padding: calc(110 * var(--vw)) 0 calc(80 * var(--vw));
}

.p-orig__inner {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--vw));
}

.p-orig__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.p-orig__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  width: calc(1123 * var(--vw));
}

.p-wf-price--blue {
  border-left-color: var(--c-blue);
}

.p-orig__defs {
  display: flex;
  gap: calc(30 * var(--vw));
}

.p-orig-def {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: calc(22 * var(--vw));
  min-width: 0;
  height: calc(150 * var(--vw));
  padding: calc(26 * var(--vw)) calc(30 * var(--vw)) calc(30 * var(--vw));
  background: #f1f7fa;
  border-top: calc(4 * var(--vw)) solid var(--c-sky);
}

.p-orig-def__num {
  font-family: var(--ff-arrow);
  font-size: calc(34 * var(--vw));
  font-weight: 700;
  line-height: normal;
  color: var(--c-sky);
}

.p-orig-def__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(10 * var(--vw));
  line-height: 1.8;
}

.p-orig-def__title {
  font-size: calc(24 * var(--vw));
  font-weight: 700;
}

.p-orig-def__text {
  font-size: calc(18 * var(--vw));
  color: var(--c-gray);
}

.p-orig-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-orig-step__main {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--vw));
}

.p-orig-step__label {
  width: calc(121 * var(--vw));
  padding: calc(4 * var(--vw)) calc(12 * var(--vw));
  font-size: calc(17 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-sky);
  border: 1px solid var(--c-line);
}

.p-orig-step__title {
  width: calc(790 * var(--vw));
  font-size: calc(26 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

.p-orig-step__note {
  width: calc(557 * var(--vw));
  font-size: calc(17 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-orig-step__note--auto {
  width: auto;
  white-space: nowrap;
}

.p-orig-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--vw));
  height: calc(240 * var(--vw));
}

.p-orig-pages__basic {
  display: flex;
  flex: none;
  flex-direction: column;
  width: calc(710 * var(--vw));
  height: 100%;
  border: 1px solid var(--c-line);
}

.p-orig-pages__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: calc(65 * var(--vw));
  padding: 0 calc(25 * var(--vw));
  line-height: 1.8;
  background: #e2f2f8;
}

.p-orig-pages__head-title {
  width: calc(300 * var(--vw));
  font-size: calc(23 * var(--vw));
  font-weight: 700;
}

.p-orig-pages__head-note {
  width: calc(200 * var(--vw));
  font-size: calc(16 * var(--vw));
  color: var(--c-gray);
}

.p-orig-pages__list {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--vw));
  padding: calc(24 * var(--vw));
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
}

.p-orig-pages__plus {
  flex: none;
  width: calc(30 * var(--vw));
  font-size: calc(45 * var(--vw));
  line-height: 1.8;
  color: var(--c-sky);
}

.p-orig-pages__select {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  border: 1px solid var(--c-line);
}

.p-orig-pages__tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: calc(12 * var(--vw));
  padding: calc(24 * var(--vw));
}

.p-orig-pages__tag {
  padding: calc(7 * var(--vw)) calc(16 * var(--vw));
  font-size: calc(16 * var(--vw));
  line-height: 1.8;
  white-space: nowrap;
  background: #f1f7fa;
  border: 1px solid var(--c-line);
}

.p-orig-pages__total {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--vw));
  width: calc(110 * var(--vw));
  height: 100%;
  color: var(--c-white);
  white-space: nowrap;
  background: #008dba;
}

.p-orig-pages__total-en {
  font-size: calc(14 * var(--vw));
  line-height: 1.8;
}

.p-orig-pages__total-num {
  font-family: var(--ff-arrow);
  font-size: calc(72 * var(--vw));
  font-weight: 700;
  line-height: normal;
}

.p-orig-pages__total-ja {
  font-size: calc(18 * var(--vw));
  line-height: 1.8;
}

.p-orig-basic {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: calc(150 * var(--vw));
  padding: calc(35 * var(--vw));
  line-height: 1.8;
  background: #f1f7fa;
}

.p-orig-basic__text {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--vw));
  width: calc(800 * var(--vw));
}

.p-orig-basic__label {
  font-size: calc(18 * var(--vw));
  color: var(--c-gray);
}

.p-orig-basic__title {
  font-size: calc(32 * var(--vw));
  font-weight: 700;
}

.p-orig-basic__sections {
  display: flex;
  gap: calc(20 * var(--vw));
}

.p-orig-basic__section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(140 * var(--vw));
  height: calc(88 * var(--vw));
  background: var(--c-white);
  border: 1px solid var(--c-line);
}

.p-orig-basic__section-en {
  width: calc(90 * var(--vw));
  font-size: calc(11 * var(--vw));
  color: var(--c-gray);
}

.p-orig-basic__section-num {
  width: calc(55 * var(--vw));
  font-size: calc(28 * var(--vw));
  font-weight: 700;
  color: var(--c-sky);
}

.p-orig__select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.8;
}

.p-orig__select-title {
  width: calc(700 * var(--vw));
  font-size: calc(26 * var(--vw));
  font-weight: 700;
}

.p-orig__select-note {
  width: calc(500 * var(--vw));
  font-size: calc(17 * var(--vw));
  color: var(--c-gray);
}

.p-orig__table {
  height: calc(390 * var(--vw));
}

.p-page-table--blue .p-page-table__head {
  background: #008ebb;
}

.p-orig__notes {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 1.8;
}

.p-orig__note {
  width: calc(1080 * var(--vw));
  font-size: calc(16 * var(--vw));
  color: var(--c-gray);
}

.p-orig__fee {
  font-size: calc(18 * var(--vw));
  font-weight: 700;
  color: var(--c-sky);
  white-space: nowrap;
}

.p-orig-ex {
  display: flex;
  gap: calc(40 * var(--vw));
  height: calc(230 * var(--vw));
  padding: calc(36 * var(--vw));
  background: #f3f9fc;
}

.p-orig-ex__intro {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: calc(18 * var(--vw));
  width: calc(660 * var(--vw));
  line-height: 1.8;
}

.p-orig-ex__en {
  font-size: calc(15 * var(--vw));
  font-weight: 700;
  color: var(--c-sky);
}

.p-orig-ex__title {
  font-size: calc(27 * var(--vw));
  font-weight: 700;
}

.p-orig-ex__text {
  font-size: calc(18 * var(--vw));
  color: var(--c-gray);
}

.p-orig-ex__pages {
  display: flex;
  flex: 1;
  min-width: 0;
  height: calc(160 * var(--vw));
}

.p-orig-ex__page {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(13 * var(--vw));
  min-width: 0;
  padding: calc(24 * var(--vw));
  background: var(--c-white);
  border: 1px solid var(--c-line);
}

.p-orig-ex__page-title {
  font-size: calc(23 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

.p-orig-ex__page-text {
  font-size: calc(18 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-include--blue {
  background: #f4f9fb;
  border-left-color: var(--c-sky);
}

/* ==========================================================================
   ホームページとLPの目的
   ========================================================================== */
.p-purpose {
  padding: calc(30 * var(--vw)) 0 calc(105 * var(--vw));
}

.p-purpose__inner {
  display: flex;
  flex-direction: column;
  gap: calc(70 * var(--vw));
}

.p-purpose__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-purpose__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  width: calc(946 * var(--vw));
}

.p-purpose__intro {
  width: calc(550 * var(--vw));
  padding: calc(32 * var(--vw)) calc(6 * var(--vw)) 0 0;
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-purpose__cards {
  display: flex;
}

.p-purpose-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(23 * var(--vw));
  min-width: 0;
  height: calc(372 * var(--vw));
  padding: calc(50 * var(--vw));
  border: 1px solid var(--c-line);
  transition: background-color 0.4s;
}

.p-purpose-card:hover {
  background: #f6fafc;
}

.p-purpose-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.p-purpose-card__en {
  width: calc(600 * var(--vw));
  font-size: calc(16 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-sky);
}

.p-purpose-card__arrow {
  font-family: var(--ff-arrow);
  font-size: calc(30 * var(--vw));
  line-height: normal;
  transition: transform 0.4s var(--ease-out), color 0.3s;
}

.p-purpose-card:hover .p-purpose-card__arrow {
  color: var(--c-blue);
  transform: translate(0.15em, -0.15em);
}

.p-purpose-card__title {
  font-size: calc(32 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

.p-purpose-card__text {
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-purpose-card__tags {
  display: flex;
  gap: calc(14 * var(--vw));
}

.p-purpose-card__tag {
  padding: calc(7 * var(--vw)) calc(16 * var(--vw));
  font-size: calc(16 * var(--vw));
  line-height: 1.8;
  white-space: nowrap;
  background: #f1f7fa;
  border: 1px solid var(--c-line);
}

/* ==========================================================================
   デザインの考え方（ダーク）
   ========================================================================== */
.p-design {
  padding: calc(110 * var(--vw)) 0 calc(100 * var(--vw));
  color: var(--c-white);
  background: #28323a;
}

.p-design__inner {
  display: flex;
  flex-direction: column;
  gap: calc(52 * var(--vw));
}

.p-design__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.p-design__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  width: calc(998 * var(--vw));
}

.c-sec-label--white,
.c-sec-title--white {
  color: var(--c-white);
}

.p-design__intro {
  width: calc(522 * var(--vw));
  padding-top: calc(32 * var(--vw));
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
  color: #c3cdd3;
}

.p-design__list {
  display: flex;
  gap: calc(30 * var(--vw));
}

.p-design-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(20 * var(--vw));
  min-width: 0;
}

/* デザインサンプル（装飾）：--u = サンプル1px分 */
.p-design-sample {
  --u: var(--vw);
  display: flex;
  flex-direction: column;
  gap: calc(45 * var(--u));
  height: calc(320 * var(--u));
  padding: calc(30 * var(--u));
  overflow: hidden;
  color: var(--c-ink);
  user-select: none;
}

.p-design-sample--01 { background: #eae7db; }
.p-design-sample--02 { color: var(--c-white); background: #009fcf; }
.p-design-sample--03 { background: #d6e3ea; }

.p-design-sample__nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 1.8;
}

.p-design-sample__brand {
  width: calc(200 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 700;
}

.p-design-sample__menu {
  width: calc(180 * var(--u));
  font-size: calc(10 * var(--u));
}

.p-design-sample__main {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.p-design-sample__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(40 * var(--u));
  min-width: 0;
}

.p-design-sample__title {
  font-size: calc(36 * var(--u));
  font-weight: 700;
  line-height: 1.25;
}

.p-design-sample--02 .p-design-sample__title {
  font-family: var(--ff-en);
  font-size: calc(49 * var(--u));
}

.p-design-sample--03 .p-design-sample__title {
  color: #153b52;
}

.p-design-sample__sub {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  width: calc(200 * var(--u));
}

.p-design-sample__bar {
  display: block;
  width: calc(125 * var(--u));
  height: calc(4 * var(--u));
  background: #7f887b;
}

.p-design-sample--02 .p-design-sample__bar {
  background: var(--c-white);
}

.p-design-sample__caption {
  font-size: calc(8 * var(--u));
  line-height: 1.8;
}

.p-design-sample__motif {
  display: grid;
  flex: none;
  width: calc(180 * var(--u));
  height: calc(230 * var(--u));
  overflow: hidden;
}

.p-design-sample__motif > * {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
}

.p-design-sample__arch-line {
  width: calc(95 * var(--u));
  height: calc(145 * var(--u));
  margin: calc(68.87 * var(--u)) 0 0 calc(12.34 * var(--u));
  border: 1px solid #d7decd;
  border-radius: calc(60 * var(--u)) calc(60 * var(--u)) 0 0;
  rotate: 20deg;
}

.p-design-sample__arch {
  width: calc(145 * var(--u));
  height: calc(200 * var(--u));
  margin: calc(48.77 * var(--u)) 0 0 calc(-23.57 * var(--u));
  background: #8c9c7d;
  border-radius: calc(90 * var(--u)) calc(90 * var(--u)) 0 0;
  rotate: 20deg;
}

.p-design-sample--02 .p-design-sample__arch {
  margin: calc(45.36 * var(--u)) 0 0 calc(-13.35 * var(--u));
  background: #d1f1fb;
  rotate: 15deg;
}

.p-design-sample__plus {
  margin: calc(105 * var(--u)) 0 0 calc(55 * var(--u));
  font-family: var(--ff-arrow);
  font-size: calc(80 * var(--u));
  line-height: normal;
  color: var(--c-blue);
}

.p-design-sample__building-wrap {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(223.58 * var(--u));
  height: calc(239.8 * var(--u));
}

.p-design-sample__building {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: calc(20 * var(--u));
  width: calc(190 * var(--u));
  height: calc(210 * var(--u));
  padding-top: calc(15 * var(--u));
  overflow: hidden;
  background: #2b5268;
  rotate: -10deg;
}

.p-design-sample__building > span {
  flex: none;
  height: calc(25 * var(--u));
  background: #456e85;
}

/* 表示時：モチーフが少し回転しながら入る */
.is-js .p-design-item.js-fade .p-design-sample__arch,
.is-js .p-design-item.js-fade .p-design-sample__building {
  translate: 0 calc(40 * var(--u));
  transition: translate 1.4s var(--ease-out) calc(var(--delay, 0s) + 0.2s);
}

.is-js .p-design-item.is-inview .p-design-sample__arch,
.is-js .p-design-item.is-inview .p-design-sample__building {
  translate: 0 0;
}

.p-design-item__caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 1.8;
}

.p-design-item__name {
  width: calc(344.667 * var(--vw));
  font-size: calc(17 * var(--vw));
  color: #b9c5cd;
}

.p-design-item__num {
  width: calc(110 * var(--vw));
  font-size: calc(15 * var(--vw));
  color: #91a3ae;
}

.p-design__note {
  font-size: calc(16 * var(--vw));
  line-height: 1.8;
  color: #98aab5;
}

/* ==========================================================================
   制作サポートの範囲
   ========================================================================== */
.p-support {
  padding: calc(105 * var(--vw)) 0 calc(100 * var(--vw));
}

.p-support__inner {
  display: flex;
  flex-direction: column;
  gap: calc(70 * var(--vw));
}

.p-support__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.p-support__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  width: calc(980 * var(--vw));
}

.p-support__intro {
  width: calc(510 * var(--vw));
  padding-top: calc(32 * var(--vw));
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
  white-space: nowrap;
}

.p-support__list {
  display: flex;
  gap: calc(50 * var(--vw));
}

.p-support-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(26 * var(--vw));
  min-width: 0;
  padding-top: calc(35 * var(--vw));
  border-top: calc(2 * var(--vw)) solid var(--c-ink);
}

.p-support-card__en {
  font-size: calc(17 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-sky);
}

.p-support-card__title {
  font-size: calc(31 * var(--vw));
  font-weight: 700;
  line-height: 1.65;
}

.p-support-card__text {
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

/* ==========================================================================
   制作オプション
   ========================================================================== */
.p-option {
  padding: calc(105 * var(--vw)) 0 calc(95 * var(--vw));
  background: #f1f7fa;
}

.p-option__inner {
  display: flex;
  flex-direction: column;
  gap: calc(45 * var(--vw));
}

.p-option__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.p-option__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  width: calc(998 * var(--vw));
}

.p-option__intro {
  width: calc(490 * var(--vw));
  padding-top: calc(32 * var(--vw));
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-option__group {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--vw));
}

.p-option__group-title {
  font-size: calc(22 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

.p-option__cards {
  display: flex;
  gap: calc(30 * var(--vw));
  border-top: calc(2 * var(--vw)) solid var(--c-line);
}

.p-option__cards--visual {
  border-top-color: var(--c-ink);
}

/* ※Figmaでは高さ固定で注記が見切れているため、最小高さで指定 */
.p-option-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(25 * var(--vw));
  min-width: 0;
  min-height: calc(350 * var(--vw));
  padding: calc(35 * var(--vw)) calc(34 * var(--vw));
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.p-option__cards--page .p-option-card {
  min-height: calc(310 * var(--vw));
}

.p-option-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-option-card__icon {
  flex: none;
  width: calc(34 * var(--vw));
}

.p-option-card__price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(4 * var(--vw));
}

.p-option-card__price {
  font-family: var(--ff-en);
  font-size: calc(31 * var(--vw));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.p-option-card__tax {
  width: calc(180 * var(--vw));
  font-size: calc(15 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-option-card__title {
  font-size: calc(26 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

.p-option-card__text {
  font-size: calc(19 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-option-card__note {
  font-size: calc(15 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-option__funcs {
  display: flex;
  gap: calc(35 * var(--vw));
}

.p-option-func {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: calc(30 * var(--vw));
  min-width: 0;
  height: calc(232 * var(--vw));
  padding: calc(36 * var(--vw));
  background: #e8f0f5;
}

.p-option-func__icon {
  flex: none;
  width: calc(34 * var(--vw));
}

.p-option-func__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(13 * var(--vw));
  min-width: 0;
  line-height: 1.8;
}

.p-option-func__en {
  font-size: calc(13 * var(--vw));
  font-weight: 700;
  color: var(--c-gray);
}

.p-option-func__title {
  font-size: calc(27 * var(--vw));
  font-weight: 700;
}

.p-option-func__text {
  font-size: calc(19 * var(--vw));
  color: var(--c-gray);
}

.p-option__note {
  font-size: calc(16 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-option-consult {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(150 * var(--vw));
  padding: calc(40 * var(--vw));
  line-height: 1.8;
  color: var(--c-white);
  background: #007ca4;
  transition: background-color 0.3s;
}

.p-option-consult:hover {
  background: #006a8c;
}

.p-option-consult__body {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--vw));
  width: calc(1120 * var(--vw));
}

.p-option-consult__title {
  font-size: calc(29 * var(--vw));
  font-weight: 700;
}

.p-option-consult__text {
  font-size: calc(17 * var(--vw));
  color: #d0e8f1;
}

.p-option-consult__link {
  display: flex;
  align-items: center;
  gap: 0.3em;
  width: calc(310 * var(--vw));
  font-size: calc(19 * var(--vw));
  font-weight: 700;
}

.p-option-consult__arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}

.p-option-consult:hover .p-option-consult__arrow {
  transform: translate(0.18em, -0.18em);
}

/* ==========================================================================
   管理プラン
   ========================================================================== */
.p-maint {
  padding: calc(100 * var(--vw)) 0;
}

.p-maint__inner {
  display: flex;
  flex-direction: column;
  gap: calc(45 * var(--vw));
}

.p-maint__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.p-maint__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  width: calc(998 * var(--vw));
}

.p-maint__intro {
  width: calc(490 * var(--vw));
  padding-top: calc(32 * var(--vw));
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

/* ※Figmaでは2枚目がコンテンツ幅（1520px）からはみ出しているため、カード幅745pxのまま幅内に収めています */
.p-maint__plans {
  display: flex;
  gap: calc(30 * var(--vw));
}

.p-maint-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: calc(24 * var(--vw));
  background: #f4f8fa;
  border: 1px solid var(--c-line-2);
}

.p-maint-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(147 * var(--vw));
}

.p-maint-card__name {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--vw));
  font-size: calc(18 * var(--vw));
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-gray-2);
  white-space: nowrap;
}

.p-maint-card__icon {
  flex: none;
  width: calc(17 * var(--vw));
}

.p-maint-card__price {
  display: flex;
  align-items: baseline;
  gap: calc(6.4 * var(--vw));
  font-weight: 700;
  color: var(--c-ink-2);
  white-space: nowrap;
}

.p-maint-card__num {
  font-family: var(--ff-en);
  font-size: calc(56 * var(--vw));
  line-height: normal;
}

.p-maint-card__unit {
  font-size: calc(18 * var(--vw));
  line-height: 1.7;
  translate: 0 calc(-3 * var(--vw));
}

.p-maint-card--basic .p-maint-card__name,
.p-maint-card--basic .p-maint-card__num {
  color: var(--c-blue-2);
}

.p-maint-card__body {
  border: 1px solid var(--c-line-2);
}

.p-maint-card__list {
  padding: 0 calc(20 * var(--vw));
  background: var(--c-white);
}

.p-maint-card__item {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--vw));
  height: calc(52 * var(--vw));
  border-bottom: 1px solid var(--c-line-3);
}

.p-maint-card__item.is-off {
  opacity: 0.5;
}

.p-maint-card__check {
  flex: none;
  width: calc(25 * var(--vw));
}

.p-maint-card__paid {
  font-family: var(--ff-en);
  font-size: calc(12 * var(--vw));
  line-height: normal;
  color: var(--c-gray-2);
  white-space: nowrap;
}

.p-maint-card__text {
  flex: 1;
  min-width: 0;
  font-size: calc(17 * var(--vw));
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.p-maint-card__foot {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--vw));
  height: calc(56 * var(--vw));
  padding: 0 calc(20 * var(--vw));
  font-size: calc(12 * var(--vw));
  line-height: 1.7;
  color: var(--c-white);
  white-space: nowrap;
  background: var(--c-blue-2);
}

.p-maint-card--basic .p-maint-card__foot {
  gap: calc(5 * var(--vw));
}

.p-maint-card__star {
  flex: none;
  width: calc(11.41 * var(--vw));
  margin: 0 calc(0.29 * var(--vw)) calc(1.15 * var(--vw));
}

.p-maint__note {
  font-size: calc(14 * var(--vw));
  line-height: 1.7;
  color: #000;
  white-space: nowrap;
}

/* ==========================================================================
   制作実績
   ========================================================================== */
.p-works {
  padding: calc(110 * var(--vw)) 0 calc(100 * var(--vw));
  background: rgba(40, 50, 58, 0.2);
}

.p-works__inner {
  display: flex;
  flex-direction: column;
  gap: calc(52 * var(--vw));
}

.p-works__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-works__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  width: calc(998 * var(--vw));
}

.p-works__intro {
  width: calc(522 * var(--vw));
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
}

.p-design-item__caption--dark .p-design-item__name,
.p-design-item__caption--dark .p-design-item__num {
  color: var(--c-ink);
}

/* 制作実績の一覧（トップ・実績一覧で共通）
   常に3列の枠で並べる（件数が少なくてもカードは1/3幅のまま） */
.p-works__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(56 * var(--vw)) calc(30 * var(--vw));
}

/* 制作実績のアイキャッチ画像
   幅：列幅の100%／高さ：3カラム時の320px（vwで可変）。はみ出す分は切り抜き */
/* 比率：実績画像（公開サイトのスクリーンショット 2000×1184）に合わせる */
.p-works__thumb {
  aspect-ratio: 2000 / 1184;
  overflow: hidden;
  background: #e1e7ea; /* 画像未設定時の下地 */
  border-radius: .4vw;
}

/* 画像最適化プラグインなどで <picture> に包まれた場合も同じ表示にする */
.p-works__thumb picture {
  display: contents;
}

.p-works__thumb img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

/* カード全体（公開サイトへのリンク）：.p-design-item と同じ縦並び */
.p-works__link {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--vw));
}

.p-works__link .p-design-item__name {
  transition: color 0.3s;
}

.p-works__arrow {
  display: inline-block;
  margin-left: 0.3em;
  font-family: var(--ff-arrow);
  transition: transform 0.4s var(--ease-out);
}

a.p-works__link:hover .p-works__thumb img {
  transform: scale(1.04);
}

a.p-works__link:hover .p-design-item__name {
  color: var(--c-blue);
}

a.p-works__link:hover .p-works__arrow {
  transform: translate(0.18em, -0.18em);
}

.p-works__note {
  font-size: calc(16 * var(--vw));
  line-height: 1.8;
}

.p-option-consult--works .p-option-consult__link {
  justify-content: flex-end;
}

/* ==========================================================================
   制作の流れ
   ========================================================================== */
.p-flow {
  padding: calc(105 * var(--vw)) 0 calc(100 * var(--vw));
}

.p-flow__inner {
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--vw));
}

.p-flow__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.p-flow__title-wrap {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  width: calc(998 * var(--vw));
}

.p-flow__intro {
  width: calc(490 * var(--vw));
  padding-top: calc(32 * var(--vw));
  font-size: calc(20 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

.p-flow__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(30 * var(--vw));
}

.p-flow-step {
  display: flex;
  align-items: flex-start;
  gap: calc(28 * var(--vw));
  min-width: 0;
  height: calc(170 * var(--vw));
  padding: calc(24 * var(--vw)) 0;
  border-bottom: 1px solid var(--c-line);
}

.p-flow-step__num {
  flex: none;
  width: calc(30 * var(--vw));
  font-size: calc(22 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-sky);
}

.p-flow-step__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(12 * var(--vw));
  min-width: 0;
  line-height: 1.8;
}

.p-flow-step__title {
  font-size: calc(25 * var(--vw));
  font-weight: 700;
}

.p-flow-step__text {
  font-size: calc(19 * var(--vw));
  color: var(--c-gray);
}

/* ==========================================================================
   よくある質問
   ========================================================================== */
.p-faq {
  min-height: calc(670 * var(--vw));
  padding: calc(110 * var(--vw)) 0;
  background: #f1f7fa;
}

.p-faq__inner {
  display: flex;
  align-items: flex-start;
  gap: calc(90 * var(--vw));
}

.p-faq__head {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: calc(30 * var(--vw));
  width: calc(590 * var(--vw));
}

.p-faq__title {
  line-height: 1.6;
}

.p-faq__list {
  flex: 1;
  min-width: 0;
}

.p-faq-item {
  border-top: 1px solid var(--c-line);
}

/* summary自体はflexにせず（Safari対策）、内側のspanで横並び */
.p-faq-item__summary {
  display: block;
  list-style: none;
  cursor: pointer;
}

.p-faq-item__summary::-webkit-details-marker {
  display: none;
}

.p-faq-item__q {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--vw));
  padding: calc(25 * var(--vw)) 0;
  transition: padding-bottom 0.45s var(--ease-out);
}

/* 開いているときは質問と回答の間を20px */
.p-faq-item.is-open .p-faq-item__q {
  padding-bottom: calc(20 * var(--vw));
}

.p-faq-item__mark {
  flex: none;
  font-family: var(--ff-arrow);
  font-size: calc(22 * var(--vw));
  font-weight: 700;
  line-height: normal;
  color: var(--c-sky);
}

.p-faq-item__question {
  flex: 1;
  min-width: 0;
  font-size: calc(20 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
  transition: color 0.3s;
}

.p-faq-item__q:hover .p-faq-item__question {
  color: var(--c-blue);
}

/* ＋／− アイコン（FAQ・セクションカタログ共通） */
.p-faq-item__icon,
.p-cat__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(17 * var(--vw));
  height: calc(17 * var(--vw));
}

.p-faq-item__icon::before,
.p-faq-item__icon::after,
.p-cat__icon::before,
.p-cat__icon::after {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  height: max(1px, calc(1.6 * var(--vw)));
  background: var(--c-ink);
  transition: transform 0.4s var(--ease-out);
}

.p-faq-item__icon::after,
.p-cat__icon::after {
  transform: rotate(90deg);
}

.p-faq-item.is-open .p-faq-item__icon::after,
.p-cat.is-open .p-cat__icon::after {
  transform: rotate(90deg) scaleX(0);
}

.p-faq-item__a {
  overflow: hidden;
}

.p-faq-item__answer {
  padding: 0 0 calc(25 * var(--vw)) calc(42 * var(--vw));
  font-size: calc(18 * var(--vw));
  line-height: 1.8;
  color: var(--c-gray);
}

/* ==========================================================================
   制作のお問い合わせ
   ========================================================================== */
.p-contact {
  padding: calc(80 * var(--vw)) 0;
  color: var(--c-white);
  background: #007ca4;
}

.p-contact__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-contact__body {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--vw));
  width: calc(798 * var(--vw));
}

.p-contact__en {
  font-family: var(--ff-en);
  font-size: calc(17 * var(--vw));
  font-weight: 700;
  line-height: normal;
  color: #85c4d6;
  white-space: nowrap;
}

.p-contact__title {
  font-size: calc(54 * var(--vw));
  font-weight: 700;
  line-height: 1.6;
}

.p-contact__text {
  font-size: calc(19 * var(--vw));
  line-height: 1.8;
  color: #cae5ed;
}

.p-contact__links {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--vw));
  width: calc(690 * var(--vw));
}

.p-contact__btn {
  height: calc(94 * var(--vw));
}

.p-contact__estimate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(94 * var(--vw));
  padding: calc(30 * var(--vw));
  border: 1px solid #56adc7;
  transition: background-color 0.3s, border-color 0.3s;
}

.p-contact__estimate:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--c-white);
}

.p-contact__estimate-text {
  width: calc(560 * var(--vw));
  font-size: calc(20 * var(--vw));
  font-weight: 700;
  line-height: 1.8;
}

.p-contact__estimate-arrow {
  font-family: var(--ff-arrow);
  font-size: calc(34 * var(--vw));
  line-height: normal;
  transition: transform 0.4s var(--ease-out);
}

.p-contact__estimate:hover .p-contact__estimate-arrow {
  transform: translate(0.15em, -0.15em);
}

/* ==========================================================================
   SP（〜767px）
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* ---------- ファーストビュー ---------- */
  .p-fv__inner {
    gap: 32px;
    padding: 24px 20px 48px;
  }

  .p-fv__guide {
    flex-direction: column;
    gap: 2px;
  }

  .p-fv__lead {
    width: auto;
    font-size: 13px;
  }

  .p-fv__en {
    width: auto;
    font-size: 11px;
  }

  .p-fv__main {
    flex-direction: column;
    align-items: stretch;
    gap: 44px;
    height: auto;
  }

  .p-fv__copy {
    gap: 24px;
    width: auto;
  }

  .p-fv__catch {
    font-size: 42px;
  }

  .p-fv__desc {
    font-size: 14px;
  }

  .p-fv__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .p-fv__btn {
    width: 100%;
    height: 62px;
  }

  .p-fv__link {
    align-self: flex-start;
    width: auto;
    font-size: 15px;
  }

  .p-fv__note {
    font-size: 12px;
  }

  .p-fv-visual {
    --u: min(0.39px, calc((100vw - 40px) / 860));
    margin: 0 auto;
  }

  .p-fv__summary {
    flex-direction: column;
    gap: 8px;
    height: auto;
  }

  .p-fv-sum {
    gap: 6px;
    padding: 16px 18px;
  }

  .p-fv-sum__en {
    font-size: 11px;
  }

  .p-fv-sum__row {
    align-items: center;
  }

  .p-fv-sum__name {
    width: auto;
    font-size: 14px;
  }

  .p-fv-sum__price {
    font-size: 22px;
  }

  .is-js .js-fv-item {
    transform: translateY(16px);
  }

  /* ---------- 制作プランと料金 ---------- */
  .p-plan {
    padding: 64px 0 56px;
  }

  .p-plan__inner {
    gap: 32px;
  }

  .p-plan__head {
    flex-direction: column;
    gap: 18px;
  }

  .p-plan__title-wrap {
    gap: 18px;
    width: auto;
  }

  .p-plan__intro {
    width: auto;
    padding-top: 0;
    font-size: 14px;
  }

  .p-plan__cards {
    flex-direction: column;
    gap: 20px;
  }

  .p-plan-card {
    gap: 14px;
    padding: 22px 20px 24px;
    border-top-width: 4px;
  }

  .p-plan-card__en {
    font-size: 12px;
  }

  .p-plan-card__title {
    font-size: 21px;
  }

  .p-plan-card__price-wrap {
    gap: 2px;
  }

  .p-plan-card__price {
    font-size: 40px;
  }

  .p-plan-card__tax {
    font-size: 12px;
  }

  .p-plan-card__text {
    font-size: 14px;
  }

  .p-plan-card__btn {
    height: 56px;
    margin-top: 8px;
  }

  .p-plan__note {
    font-size: 12px;
  }

  .p-plan__consult {
    flex-direction: column;
    gap: 10px;
    padding: 18px 0;
  }

  .p-plan__consult-text {
    width: auto;
    font-size: 16px;
  }

  .p-plan__consult-link {
    width: auto;
    font-size: 15px;
  }

  /* ---------- LP制作｜プランと基本構成 ---------- */
  .p-lp {
    padding-top: 64px;
  }

  .p-lp-intro::after {
    margin-top: 56px;
  }

  .p-lp-intro__head {
    flex-direction: column;
    gap: 24px;
    height: auto;
  }

  .p-lp-intro__title-wrap {
    gap: 18px;
    width: auto;
  }

  .p-lp-price {
    gap: 2px;
    width: auto;
    padding: 2px 0 0 18px;
    border-left-width: 3px;
  }

  .p-lp-price__name {
    font-size: 14px;
  }

  .p-lp-price__num {
    font-size: 38px;
  }

  .p-lp-price__note {
    font-size: 13px;
  }

  .p-lp-intro__text {
    padding: 24px 0 20px;
    font-size: 14px;
  }

  .p-lp-intro__tags {
    gap: 8px;
  }

  .p-lp-intro__tag {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .p-lp-intro__step {
    padding: 40px 0 18px;
  }

  .p-lp-combo {
    flex-direction: column;
    gap: 10px;
    height: auto;
  }

  .p-lp-combo__basic {
    width: auto;
  }

  .p-lp-combo__head {
    height: 50px;
    padding: 0 16px;
  }

  .p-lp-combo__head-title {
    font-size: 16px;
  }

  .p-lp-combo__head-note {
    font-size: 11px;
  }

  .p-lp-combo__basic-list {
    gap: 16px;
    padding: 18px 16px 20px;
  }

  .p-lp-combo__basic-item {
    gap: 14px;
  }

  .p-lp-combo__basic-num {
    font-size: 15px;
    line-height: 24px;
  }

  .p-lp-combo__basic-body {
    gap: 4px;
  }

  .p-lp-combo__basic-title {
    font-size: 16px;
    line-height: 1.5;
  }

  .p-lp-combo__basic-text {
    font-size: 13px;
  }

  .p-lp-combo__plus {
    width: auto;
    font-size: 30px;
    line-height: 1;
  }

  .p-lp-combo__slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px 16px 0;
  }

  .p-lp-combo__slot {
    gap: 6px;
    height: 84px;
  }

  .p-lp-combo__slot-en,
  .p-lp-combo__slot-ja {
    font-size: 9px;
  }

  .p-lp-combo__slot-num {
    font-size: 24px;
  }

  .p-lp-combo__select-note {
    padding: 14px 16px 18px;
    font-size: 12px;
  }

  .p-lp-combo__max {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    width: auto;
    padding: 12px 16px;
  }

  .p-lp-combo__max-en {
    font-size: 11px;
  }

  .p-lp-combo__max-num {
    font-size: 40px;
    line-height: 1;
  }

  .p-lp-combo__max-ja {
    font-size: 13px;
  }

  .p-lp-intro__note {
    padding: 14px 0 24px;
    font-size: 12px;
  }

  .p-lp-include {
    min-height: 0;
    padding: 20px 18px;
    font-size: 13px;
    border-left-width: 3px;
  }

  .p-lp-include__title {
    margin-bottom: 6px;
    font-size: 15px;
  }

  .p-lp-include__note {
    margin-top: 6px;
    font-size: 12px;
  }

  /* ---------- LP制作｜セクションカタログ ---------- */
  .p-catalog {
    padding-bottom: 56px;
  }

  .p-catalog__head {
    flex-direction: column;
    gap: 28px;
    height: auto;
    margin-bottom: 28px;
    padding-top: 56px;
  }

  .p-catalog__title-wrap {
    gap: 16px;
    width: auto;
  }

  .p-catalog__text {
    font-size: 14px;
  }

  .p-catalog__total {
    gap: 6px;
    width: auto;
    padding: 4px 0 0 18px;
    border-left-width: 2px;
  }

  .p-catalog__total-en {
    font-size: 11px;
  }

  .p-catalog__total-row {
    gap: 12px;
  }

  .p-catalog__total-num {
    font-size: 72px;
  }

  .p-catalog__total-ja {
    font-size: 18px;
  }

  .p-catalog__total-note {
    font-size: 12px;
  }

  .p-catalog__grid {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }

  .p-cat {
    width: auto;
  }

  .p-cat__head {
    gap: 14px;
    height: auto;
    padding: 16px 18px;
  }

  .p-cat__num {
    font-size: 26px;
  }

  .p-cat__name {
    gap: 4px;
  }

  .p-cat__en {
    font-size: 9px;
    white-space: normal;
  }

  .p-cat__ja {
    font-size: 16px;
    line-height: 1.4;
  }

  /* カテゴリ名を1行に収めるため、SPでは件数表記を省略 */
  .p-cat__count {
    display: none;
  }

  .p-cat__icon {
    width: 14px;
    height: 14px;
  }

  .p-cat__icon::before,
  .p-cat__icon::after {
    height: 1.5px;
  }

  .p-cat__list {
    padding: 4px 18px 0;
  }

  .p-cat__item {
    gap: 12px;
    height: auto;
    padding: 14px 0;
  }

  .p-cat__item-num {
    width: 18px;
    font-size: 12px;
  }

  .p-cat__item-body {
    gap: 2px;
  }

  .p-cat__item-title {
    font-size: 15px;
  }

  .p-cat__item-text {
    font-size: 13px;
  }

  .p-catalog__point {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    height: auto;
    margin-top: 20px;
    padding: 20px 18px;
  }

  .p-catalog__point-title {
    font-size: 15px;
  }

  .p-catalog__point-text {
    font-size: 13px;
  }

  /* ---------- LP制作｜目的別のページ構成例（横スクロール） ---------- */
  .p-lp-example {
    gap: 20px;
    padding-bottom: 56px;
  }

  .p-lp-example__list {
    gap: 12px;
    margin: 0 -20px;
    padding: 0 20px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    overscroll-behavior-x: contain;
  }

  .p-lp-ex {
    flex: 0 0 78%;
    height: auto;
    padding: 18px;
    scroll-snap-align: start;
  }

  .p-lp-ex__intro {
    gap: 6px;
    height: auto;
    padding: 2px 0 18px;
  }

  .p-lp-ex__en {
    font-size: 11px;
  }

  .p-lp-ex__title {
    font-size: 19px;
  }

  .p-lp-ex__text {
    font-size: 12px;
  }

  .p-lp-ex__fv {
    gap: 2px;
    height: auto;
    padding: 12px 14px;
  }

  .p-lp-ex__fv-label {
    font-size: 11px;
  }

  .p-lp-ex__fv-title {
    font-size: 15px;
  }

  .p-lp-ex__items {
    padding: 0 14px;
  }

  .p-lp-ex__item {
    gap: 12px;
    height: 42px;
  }

  .p-lp-ex__item-num {
    font-size: 11px;
  }

  .p-lp-ex__item-name {
    font-size: 14px;
  }

  .p-lp-ex__cv {
    gap: 2px;
    height: auto;
    padding: 12px 14px;
  }

  .p-lp-ex__cv-label {
    font-size: 11px;
  }

  .p-lp-ex__cv-row {
    font-size: 14px;
  }

  .p-lp-ex__cv-arrow {
    font-size: 20px;
  }

  /* ---------- LP制作｜制作範囲・追加ルール・相談 ---------- */
  .p-lp-scope {
    padding-bottom: 64px;
  }

  .p-lp-scope__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-bottom: 16px;
  }

  .p-lp-scope__en {
    font-size: 11px;
  }

  .p-lp-scope__title {
    font-size: 20px;
  }

  .p-lp-scope__rules {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .p-lp-rule {
    gap: 6px;
    height: auto;
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--c-line-3);
  }

  .p-lp-rule:last-child {
    border-bottom: 0;
  }

  .p-lp-rule__num {
    font-size: 13px;
  }

  .p-lp-rule__title {
    font-size: 16px;
  }

  .p-lp-rule__text {
    font-size: 13px;
  }

  .p-lp-rule__em {
    font-size: 14px;
  }

  .p-lp-scope__note {
    padding: 18px 0 28px;
    font-size: 12px;
  }

  .p-lp-consult {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    height: auto;
    padding: 24px 20px;
    border-left-width: 3px;
  }

  .p-lp-consult__body {
    gap: 6px;
    width: auto;
  }

  .p-lp-consult__title {
    font-size: 17px;
    line-height: 1.6;
  }

  .p-lp-consult__text {
    font-size: 13px;
  }

  .p-lp-consult__btn {
    width: 100%;
    height: 60px;
    padding: 0 20px;
  }

  .p-lp-consult__btn .c-btn__arrow {
    font-size: 22px;
  }

  /* ---------- WFプランのページ構成 ---------- */
  .p-wf {
    padding: 64px 0 56px;
  }

  .p-wf__inner {
    gap: 24px;
  }

  .p-wf__head {
    flex-direction: column;
    gap: 24px;
  }

  .p-wf__title-wrap {
    gap: 18px;
    width: auto;
  }

  .p-wf-price {
    gap: 2px;
    width: auto;
    padding-left: 18px;
    border-left-width: 3px;
  }

  .p-wf-price__name {
    font-size: 14px;
  }

  .p-wf-price__num {
    font-size: 38px;
  }

  .p-wf-price__note {
    font-size: 13px;
  }

  .p-wf__text {
    font-size: 14px;
  }

  .p-wf__standards {
    flex-direction: column;
    gap: 12px;
  }

  .p-page-card {
    gap: 6px;
    height: auto;
    padding: 18px 20px 20px;
    border-top-width: 4px;
  }

  .p-page-card__en {
    font-size: 12px;
  }

  .p-page-card__title {
    font-size: 20px;
  }

  .p-page-card__text {
    font-size: 14px;
  }

  .p-wf__select-head {
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
  }

  .p-wf__select-title {
    width: auto;
    font-size: 19px;
  }

  .p-wf__select-note {
    width: auto;
    font-size: 13px;
  }

  .p-page-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .p-wf__table {
    height: auto;
  }

  .p-page-table__head {
    height: auto;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
  }

  .p-page-table__list {
    padding: 4px 12px;
  }

  .p-page-table__item {
    height: auto;
    min-height: 40px;
    padding: 8px 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .p-wf__note {
    font-size: 12px;
  }

  .p-wf-combo {
    gap: 10px;
    height: auto;
    padding: 22px 20px;
  }

  .p-wf-combo__en {
    font-size: 12px;
  }

  .p-wf-combo__title {
    font-size: 18px;
    line-height: 1.6;
  }

  .p-wf-combo__formula {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    text-align: center;
  }

  .p-wf-combo__box {
    width: auto;
    padding: 12px;
    font-size: 15px;
  }

  .p-wf-combo__op {
    width: auto;
    font-size: 20px;
    line-height: 1.4;
  }

  .p-wf-combo__result {
    width: auto;
    font-size: 20px;
  }

  .p-include {
    gap: 6px;
    padding: 20px 18px 20px 16px;
    white-space: normal;
    border-left-width: 4px;
  }

  .p-include__title {
    font-size: 15px;
  }

  .p-include__list {
    font-size: 13px;
  }

  .p-include__note {
    font-size: 12px;
  }

  /* ---------- 通常プランのページとセクション ---------- */
  .p-orig {
    padding: 64px 0 56px;
  }

  .p-orig__inner {
    gap: 24px;
  }

  .p-orig__head {
    flex-direction: column;
    gap: 24px;
  }

  .p-orig__title-wrap {
    gap: 18px;
    width: auto;
  }

  .p-orig__defs {
    flex-direction: column;
    gap: 12px;
  }

  .p-orig-def {
    gap: 14px;
    height: auto;
    padding: 18px 18px 20px;
    border-top-width: 3px;
  }

  .p-orig-def__num {
    font-size: 24px;
  }

  .p-orig-def__body {
    gap: 4px;
  }

  .p-orig-def__title {
    font-size: 16px;
    line-height: 1.6;
  }

  .p-orig-def__text {
    font-size: 13px;
    line-height: 1.7;
  }

  .p-orig-step {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
  }

  .p-orig-step__main {
    align-items: flex-start;
    gap: 12px;
  }

  .p-orig-step__label {
    flex: none;
    width: auto;
    margin-top: 2px;
    padding: 2px 10px;
    font-size: 12px;
  }

  .p-orig-step__title {
    width: auto;
    font-size: 18px;
    line-height: 1.6;
  }

  .p-orig-step__note,
  .p-orig-step__note--auto {
    width: auto;
    font-size: 12px;
    white-space: normal;
  }

  .p-orig-pages {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    height: auto;
  }

  .p-orig-pages__basic {
    width: auto;
    height: auto;
  }

  .p-orig-pages__head {
    height: 50px;
    padding: 0 16px;
  }

  .p-orig-pages__head-title {
    width: auto;
    font-size: 16px;
  }

  .p-orig-pages__head-note {
    width: auto;
    font-size: 11px;
  }

  .p-orig-pages__list {
    gap: 2px;
    padding: 14px 16px;
    font-size: 14px;
  }

  .p-orig-pages__plus {
    width: auto;
    font-size: 30px;
    line-height: 1;
    text-align: center;
  }

  .p-orig-pages__select {
    height: auto;
  }

  .p-orig-pages__tags {
    gap: 8px;
    padding: 16px;
  }

  .p-orig-pages__tag {
    padding: 4px 12px;
    font-size: 13px;
  }

  .p-orig-pages__total {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    width: auto;
    height: auto;
    padding: 12px 16px;
  }

  .p-orig-pages__total-en {
    font-size: 11px;
  }

  .p-orig-pages__total-num {
    font-size: 40px;
    line-height: 1;
  }

  .p-orig-pages__total-ja {
    font-size: 14px;
  }

  .p-orig-basic {
    flex-direction: column;
    gap: 14px;
    height: auto;
    padding: 20px 18px;
  }

  .p-orig-basic__text {
    gap: 2px;
    width: auto;
  }

  .p-orig-basic__label {
    font-size: 13px;
  }

  .p-orig-basic__title {
    font-size: 22px;
  }

  .p-orig-basic__sections {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
  }

  .p-orig-basic__section {
    width: auto;
    height: 60px;
  }

  .p-orig-basic__section-en {
    width: auto;
    font-size: 9px;
    line-height: 1.4;
  }

  .p-orig-basic__section-num {
    width: auto;
    font-size: 20px;
    line-height: 1.3;
  }

  .p-orig__select-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 16px;
  }

  .p-orig__select-title {
    width: auto;
    font-size: 19px;
  }

  .p-orig__select-note {
    width: auto;
    font-size: 13px;
  }

  .p-orig__table {
    height: auto;
  }

  .p-orig__notes {
    flex-direction: column;
    gap: 6px;
  }

  .p-orig__note {
    width: auto;
    font-size: 12px;
  }

  .p-orig__fee {
    font-size: 14px;
    white-space: normal;
  }

  .p-orig-ex {
    flex-direction: column;
    gap: 16px;
    height: auto;
    padding: 22px 18px;
  }

  .p-orig-ex__intro {
    gap: 4px;
    width: auto;
  }

  .p-orig-ex__en {
    font-size: 12px;
  }

  .p-orig-ex__title {
    font-size: 18px;
    line-height: 1.6;
  }

  .p-orig-ex__text {
    font-size: 13px;
  }

  .p-orig-ex__pages {
    flex-direction: column;
    height: auto;
  }

  .p-orig-ex__page {
    gap: 2px;
    padding: 14px 16px;
  }

  .p-orig-ex__page + .p-orig-ex__page {
    margin-top: -1px;
  }

  .p-orig-ex__page-title {
    font-size: 16px;
  }

  .p-orig-ex__page-text {
    font-size: 13px;
  }

  /* ---------- ホームページとLPの目的 ---------- */
  .p-purpose {
    padding: 0 0 64px;
  }

  .p-purpose__inner {
    gap: 32px;
  }

  .p-purpose__head {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .p-purpose__title-wrap {
    gap: 18px;
    width: auto;
  }

  .p-purpose__intro {
    width: auto;
    padding: 0;
    font-size: 14px;
  }

  .p-purpose__cards {
    flex-direction: column;
    gap: 12px;
  }

  .p-purpose-card {
    gap: 12px;
    height: auto;
    padding: 24px 20px;
  }

  .p-purpose-card__en {
    width: auto;
    font-size: 12px;
  }

  .p-purpose-card__arrow {
    font-size: 22px;
  }

  .p-purpose-card__title {
    font-size: 19px;
    line-height: 1.6;
  }

  .p-purpose-card__text {
    font-size: 14px;
  }

  .p-purpose-card__tags {
    flex-wrap: wrap;
    gap: 8px;
  }

  .p-purpose-card__tag {
    padding: 3px 12px;
    font-size: 12px;
  }

  /* ---------- デザインの考え方 ---------- */
  .p-design {
    padding: 64px 0 56px;
  }

  .p-design__inner {
    gap: 32px;
  }

  .p-design__head {
    flex-direction: column;
    gap: 18px;
  }

  .p-design__title-wrap {
    gap: 18px;
    width: auto;
  }

  .p-design__intro {
    width: auto;
    padding-top: 0;
    font-size: 14px;
  }

  .p-design__list {
    flex-direction: column;
    gap: 28px;
  }

  .p-design-item {
    gap: 10px;
  }

  .p-design-sample {
    --u: min(0.69px, calc((100vw - 40px) / 486.67));
  }

  .p-design-item__name {
    width: auto;
    font-size: 14px;
  }

  .p-design-item__num {
    width: auto;
    font-size: 12px;
    white-space: nowrap;
  }

  .p-design__note {
    font-size: 12px;
  }

  /* ---------- 制作サポートの範囲 ---------- */
  .p-support {
    padding: 64px 0 56px;
  }

  .p-support__inner {
    gap: 32px;
  }

  .p-support__head {
    flex-direction: column;
    gap: 18px;
  }

  .p-support__title-wrap {
    gap: 18px;
    width: auto;
  }

  .p-support__intro {
    width: auto;
    padding-top: 0;
    font-size: 14px;
    white-space: normal;
  }

  .p-support__list {
    flex-direction: column;
    gap: 32px;
  }

  .p-support-card {
    gap: 10px;
    padding-top: 20px;
    border-top-width: 2px;
  }

  .p-support-card__en {
    font-size: 12px;
  }

  .p-support-card__title {
    font-size: 20px;
    line-height: 1.55;
  }

  .p-support-card__text {
    font-size: 14px;
  }

  /* ---------- 制作オプション ---------- */
  .p-option {
    padding: 64px 0 56px;
  }

  .p-option__inner {
    gap: 32px;
  }

  .p-option__head {
    flex-direction: column;
    gap: 18px;
  }

  .p-option__title-wrap {
    gap: 18px;
    width: auto;
  }

  .p-option__intro {
    width: auto;
    padding-top: 0;
    font-size: 14px;
  }

  .p-option__group {
    gap: 10px;
  }

  .p-option__group-title {
    font-size: 17px;
  }

  .p-option__cards {
    flex-direction: column;
    gap: 0;
    border-top-width: 2px;
  }

  .p-option-card,
  .p-option__cards--page .p-option-card {
    gap: 8px;
    min-height: 0;
    padding: 20px 4px;
    border-right: 0;
  }

  .p-option-card__icon {
    width: 28px;
  }

  .p-option-card__price-wrap {
    gap: 0;
  }

  .p-option-card__price {
    font-size: 24px;
  }

  .p-option-card__tax {
    width: auto;
    font-size: 11px;
  }

  .p-option-card__title {
    font-size: 18px;
  }

  .p-option-card__text {
    font-size: 14px;
  }

  .p-option-card__note {
    font-size: 12px;
  }

  .p-option__funcs {
    flex-direction: column;
    gap: 12px;
  }

  .p-option-func {
    gap: 14px;
    height: auto;
    padding: 22px 18px;
  }

  .p-option-func__icon {
    width: 28px;
  }

  .p-option-func__body {
    gap: 4px;
  }

  .p-option-func__en {
    font-size: 11px;
  }

  .p-option-func__title {
    font-size: 18px;
    line-height: 1.6;
  }

  .p-option-func__text {
    font-size: 13px;
  }

  .p-option__note {
    font-size: 12px;
  }

  .p-option-consult {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    height: auto;
    padding: 24px 20px;
  }

  .p-option-consult__body {
    gap: 6px;
    width: auto;
  }

  .p-option-consult__title {
    font-size: 18px;
    line-height: 1.6;
  }

  .p-option-consult__text {
    font-size: 13px;
  }

  .p-option-consult__link {
    width: auto;
    font-size: 15px;
  }

  /* ---------- 管理プラン ---------- */
  .p-maint {
    padding: 64px 0 56px;
  }

  .p-maint__inner {
    gap: 32px;
  }

  .p-maint__head {
    flex-direction: column;
    gap: 18px;
  }

  .p-maint__title-wrap {
    gap: 18px;
    width: auto;
  }

  .p-maint__intro {
    width: auto;
    padding-top: 0;
    font-size: 14px;
  }

  .p-maint__plans {
    flex-direction: column;
    gap: 16px;
  }

  .p-maint-card {
    padding: 14px;
  }

  .p-maint-card__head {
    gap: 2px;
    height: auto;
    padding: 14px 0 18px;
  }

  .p-maint-card__name {
    gap: 8px;
    font-size: 15px;
  }

  .p-maint-card__icon {
    width: 15px;
  }

  .p-maint-card__price {
    gap: 4px;
  }

  .p-maint-card__num {
    font-size: 40px;
  }

  .p-maint-card__unit {
    font-size: 14px;
    translate: none;
  }

  .p-maint-card__list {
    padding: 0 14px;
  }

  .p-maint-card__item {
    gap: 10px;
    height: auto;
    min-height: 46px;
    padding: 8px 0;
  }

  .p-maint-card__check {
    width: 20px;
  }

  .p-maint-card__paid {
    font-size: 10px;
  }

  .p-maint-card__text {
    font-size: 13px;
    line-height: 1.5;
  }

  .p-maint-card__foot {
    align-items: flex-start;
    gap: 6px;
    height: auto;
    padding: 12px 14px;
    font-size: 11px;
    white-space: normal;
  }

  .p-maint-card--basic .p-maint-card__foot {
    gap: 6px;
  }

  .p-maint-card__star {
    width: 10px;
    margin: 4px 0 0;
  }

  .p-maint__note {
    font-size: 12px;
    white-space: normal;
  }

  /* ---------- 制作実績 ---------- */
  .p-works {
    padding: 64px 0 56px;
  }

  .p-works__inner {
    gap: 32px;
  }

  .p-works__head {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .p-works__title-wrap {
    gap: 18px;
    width: auto;
  }

  .p-works__intro {
    width: auto;
    font-size: 14px;
  }

  .p-works__list {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .p-works__link {
    gap: 10px;
  }
  .p-works__thumb {
    border-radius: 6px;
  }
  .p-works__note {
    font-size: 12px;
  }

  /* ---------- 制作の流れ ---------- */
  .p-flow {
    padding: 64px 0 56px;
  }

  .p-flow__inner {
    gap: 28px;
  }

  .p-flow__head {
    flex-direction: column;
    gap: 18px;
  }

  .p-flow__title-wrap {
    gap: 18px;
    width: auto;
  }

  .p-flow__intro {
    width: auto;
    padding-top: 0;
    font-size: 14px;
  }

  .p-flow__list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .p-flow-step {
    gap: 14px;
    height: auto;
    padding: 18px 0;
  }

  .p-flow-step__num {
    width: 22px;
    font-size: 16px;
  }

  .p-flow-step__body {
    gap: 2px;
  }

  .p-flow-step__title {
    font-size: 17px;
  }

  .p-flow-step__text {
    font-size: 13px;
  }

  /* ---------- よくある質問 ---------- */
  .p-faq {
    min-height: 0;
    padding: 64px 0;
  }

  .p-faq__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .p-faq__head {
    gap: 18px;
    width: auto;
  }

  .p-faq-item__q {
    align-items: flex-start;
    gap: 12px;
    padding: 18px 0;
  }

  .p-faq-item.is-open .p-faq-item__q {
    padding-bottom: 10px;
  }

  .p-faq-item__mark {
    font-size: 16px;
    line-height: 1.6;
  }

  .p-faq-item__question {
    font-size: 15px;
    line-height: 1.6;
  }

  .p-faq-item__icon {
    width: 14px;
    height: 24px;
  }

  .p-faq-item__icon::before,
  .p-faq-item__icon::after {
    height: 1.5px;
  }

  .p-faq-item__answer {
    padding: 0 0 18px 24px;
    font-size: 13px;
  }

  /* ---------- 制作のお問い合わせ ---------- */
  .p-contact {
    padding: 56px 0;
  }

  .p-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .p-contact__body {
    gap: 16px;
    width: auto;
  }

  .p-contact__en {
    font-size: 12px;
  }

  .p-contact__title {
    font-size: 24px;
    line-height: 1.55;
  }

  .p-contact__text {
    font-size: 14px;
  }

  .p-contact__links {
    gap: 12px;
    width: auto;
  }

  .p-contact__btn {
    height: 64px;
  }

  .p-contact__estimate {
    height: 64px;
    padding: 0 20px;
  }

  .p-contact__estimate-text {
    width: auto;
    font-size: 15px;
  }

  .p-contact__estimate-arrow {
    font-size: 22px;
  }
}