@charset "UTF-8";



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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  -webkit-print-color-adjust: exact;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-underline-offset: .2em;
  background: #fff;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  color: #000;
  font-family: 'Noto Sans JP', '源ノ角ゴシック JP', 'Source Han Sans JP', 'Noto Sans CJK JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', '游ゴシック体', 'Yu Gothic', 'メイリオ', 'Meiryo', sans-serif;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-break: strict;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  word-break: normal;
  overflow-wrap: anywhere;
}

article,
aside,
footer,
header,
nav,
section,
main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
em,
small,
strong,
sub,
sup,
mark,
del,
ins,
strike,
abbr,
dfn,
blockquote,
q,
cite,
code,
pre,
ol,
ul,
li,
dl,
dt,
dd,
div,
section,
article,
main,
aside,
nav,
header,
hgroup,
footer,
img,
figure,
figcaption,
address,
time,
audio,
video,
canvas,
iframe,
details,
summary,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  vertical-align: baseline;
  margin: 0;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 100%;
}

a {
  display: inline-block;
  -webkit-transition: opacity .3s ease 0s;
  transition: opacity .3s ease 0s;
  color: inherit;
  text-decoration: none;
}

a[href='*'] {
  cursor: pointer;
}

a[href='*']:hover, a[href='*']:focus-visible {
  opacity: .7;
}

img,
svg {
  display: inline-block;
  vertical-align: top;
  border: none;
  width: 100%;
  max-width: 100%;
  height: auto;
}

video {
  width: 100%;
  height: auto;
}

code,
kbd,
pre,
samp {
  font-size: inherit;
}

ul,
ol {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::after,
blockquote::before,
q::after,
q::before {
  content: '';
  content: none;
}

address {
  font-style: italic;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  margin: 0;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
}

abbr,
acronym {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

cite {
  font-style: italic;
}

code,
kbd {
  background-color: #F8F8F8;
  padding: .25em .5em;
}

em {
  font-style: italic;
  font-weight: 700;
}

pre {
  display: block;
  background-color: #F8F8F8;
  padding: 1em 2em;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

var {
  background-color: #F8F8F8;
  padding: .25em .5em;
  font-style: italic;
}

/************************************************************************
* end reset
************************************************************************/
.js-fadeIn {
  visibility: hidden;
  opacity: 0;
}

.js-fadeInUp {
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  visibility: hidden;
  opacity: 0;
}

.js-fadeInLeft {
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
  visibility: hidden;
  opacity: 0;
}

.js-fadeInRight {
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  visibility: hidden;
  opacity: 0;
}

@-webkit-keyframes fadeInLeft {

  from {
    -webkit-transform: translate3d(-2%, 0, 0);
    transform: translate3d(-2%, 0, 0);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fadeInLeft {

  from {
    -webkit-transform: translate3d(-2%, 0, 0);
    transform: translate3d(-2%, 0, 0);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes fadeInRight {

  from {
    -webkit-transform: translate3d(2%, 0, 0);
    transform: translate3d(2%, 0, 0);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadeInRight {

  from {
    -webkit-transform: translate3d(2%, 0, 0);
    transform: translate3d(2%, 0, 0);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {

  from {
    -webkit-transform: translate3d(0, 2%, 0);
    transform: translate3d(0, 2%, 0);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadeInUp {

  from {
    -webkit-transform: translate3d(0, 2%, 0);
    transform: translate3d(0, 2%, 0);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {

  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes fadeOut {

  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeInLeft,
.fadeInRight,
.fadeInUp,
.fadeIn,
.fadeOut {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.fadeInLeft {
  -webkit-animation-name: fadeinleft;
  animation-name: fadeInLeft;
}

.fadeInRight {
  -webkit-animation-name: fadeinright;
  animation-name: fadeInRight;
}

.fadeInUp {
  -webkit-animation-name: fadeinup;
  animation-name: fadeInUp;
}

.fadeIn {
  -webkit-animation-name: fadein;
  animation-name: fadeIn;
}

.fadeOut {
  opacity: 1;
  -webkit-animation-name: fadeout;
  animation-name: fadeOut;
}

/* ------------------------------------------------------------------
 * 背景の幾何学メッシュをゆっくり漂わせる（カンプには無い追加演出）
 * 3 箇所（FV〜サービス / サービス / 会社概要〜料金表）で同じ
 * アニメーションを共有し、セクションを跨いだメッシュの連続性を保つ。
 * 注意: @keyframes 内で calc(var(--1px)) は補間されないため固定 px で書く
 * ------------------------------------------------------------------ */
@-webkit-keyframes deco-mesh-drift {

  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  50% {
    -webkit-transform: translate3d(-40px, 14px, 0);
    transform: translate3d(-40px, 14px, 0);
  }
}
@keyframes deco-mesh-drift {

  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  50% {
    -webkit-transform: translate3d(-40px, 14px, 0);
    transform: translate3d(-40px, 14px, 0);
  }
}

[data-target] {
  cursor: pointer;
}

html {
  scrollbar-gutter: stable;
  font-size: 100%;
}

button {
  color: #000;
}

/************************************************************************
* layout
************************************************************************/
body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

body.fadeIn {
  opacity: 0;
}

main {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

footer {
  margin-top: auto;
}

/************************************************************************
* base
************************************************************************/
a[target=_blank]:not([class]) {
  -webkit-transition: color .3s;
  transition: color .3s;
}

a[target=_blank]:not([class])::after {
  display: inline-block;
  -webkit-mask-image: url('../img/common/icon-outerLink.svg');
  mask-image: url('../img/common/icon-outerLink.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  margin-left: .7647058824em;
  background-color: currentColor;
  width: .8529411765em;
  height: .7647058824em;
  font-weight: 900;
  content: '';
}

a:not([class]) {
  color: #03c;
}

a:not([class]):visited {
  color: #639;
}

a:not([class]):hover {
  text-decoration: underline;
}

table {
  margin-right: auto;
  margin-left: auto;
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;
  min-width: 100%;
  table-layout: fixed;
}

th,
td {
  border: 1px solid;
}

address {
  font-style: normal;
}

details .icon {
  aspect-ratio: 1;
  display: block;
  position: relative;
  width: 24px;
  width: 1.5rem;
}

details .icon::before, details .icon::after {
  inset: 0;
  position: absolute;
  margin: auto;
  background-color: #000;
  width: 13px;
  width: .8125rem;
  height: 1px;
  content: '';
}

details .icon::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

details[open] > summary .icon::after {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

details.is-closing[open] > summary .icon::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

summary {

  /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */
  display: block;
  cursor: pointer;
}

summary::-webkit-details-marker {

  /* Safariで表示されるデフォルトの三角形アイコンを消します */
  display: none;
}

/************************************************************************
* end base
************************************************************************/

/************************************************************************
* form
************************************************************************/
form {
  margin: 0;
  padding: 0;
}

form button[type=submit],
form input[type=submit],
form input[type=button] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  width: auto;
}

form button[type=submit]:hover, form button[type=submit]:focus-visible,
form input[type=submit]:hover,
form input[type=submit]:focus-visible,
form input[type=button]:hover,
form input[type=button]:focus-visible {
  outline: none;
}

form button[type=submit]:disabled,
form input[type=submit]:disabled,
form input[type=button]:disabled {
  cursor: default;
  border-color: transparent;
  background-color: #b2b2b2;
  pointer-events: none;
  color: #fff;
}

form button[type=submit] ::-moz-focus-inner,
form input[type=submit] ::-moz-focus-inner,
form input[type=button] ::-moz-focus-inner {
  border: none;
  padding: 0;
}

label {
  cursor: pointer;
}

input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #707070;
  border-radius: 0;
  background-image: none;
  padding: 8px;
  padding: .5rem;
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

textarea {
  resize: vertical;
}

textarea:hover, textarea:focus-visible {
  outline: none;
}

textarea:focus-visible {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #707070;
}

textarea ::-moz-focus-inner {
  border: none;
  padding: 0;
}

input:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #707070;
}

input[type=radio] {
  position: absolute;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: auto;
  line-height: 1.5;
}

input[type=radio] + span {
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin: 0;
  padding: 0 0 0 1.875em;
  line-height: 1.5;
}

input[type=radio] + span::before {
  display: block;
  position: absolute;
  top: .5lh;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: 1px solid #707070;
  border-radius: 50%;
  background: #fff;
  width: 1.625em;
  height: 1.625em;
  content: '';
}

input[type=radio] + span::after {
  display: block;
  position: absolute;
  top: .5lh;
  left: .5em;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0;
  -webkit-transition: opacity .3s ease 0s;
  transition: opacity .3s ease 0s;
  border-radius: 50%;
  background: #707070;
  width: .625em;
  height: .625em;
  content: '';
}

input[type=radio]:focus-visible + span::before {
  outline: -webkit-focus-ring-color auto 5px;
}

input[type=radio]:checked + span::after {
  opacity: 1;
}

input[type=checkbox] {
  position: absolute;
  vertical-align: middle;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: auto;
  line-height: 1.5;
}

input[type=checkbox] + span {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  padding-left: 1.875em;
  line-height: 1.5;
}

input[type=checkbox] + span::before {
  display: inline-block;
  position: absolute;
  top: .5lh;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: 1px solid #707070;
  width: 1.625em;
  height: 1.625em;
  content: '';
}

input[type=checkbox] + span::after {
  display: inline-block;
  position: absolute;
  top: .5lh;
  left: 0;
  -webkit-transform: translateY(-70%) translateX(.5em) rotate(45deg);
  transform: translateY(-70%) translateX(.5em) rotate(45deg);
  opacity: 0;
  -webkit-transition: opacity .3s ease 0s;
  transition: opacity .3s ease 0s;
  border-right: .25em solid #122B88;
  border-bottom: .25em solid #122B88;
  width: .8125em;
  height: 1.625em;
  content: '';
}

input[type=checkbox]:focus-visible + span::before {
  outline: -webkit-focus-ring-color auto 5px;
}

input[type=checkbox]:checked:focus-visible + span::before {
  outline: none;
}

input[type=checkbox]:checked + span::after {
  opacity: 1;
}

input[type=number], input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  margin: 0;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #707070;
  border-radius: 0;
  padding: .4em 2.4em .4em .8em;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  font-size: 1rem;
}

select::-ms-expand {
  display: none;
}

select:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #707070;
}

select:focus-visible {
  outline: initial;
}

select:invalid {
  color: #b2b2b2;
}

select:not(:disabled) {
  cursor: pointer;
}

/* 雛形は :focus-visible の outline を消しているが、キーボード操作で
   フォーカス位置が分からなくなるので、フォーム部品だけ戻す。
   ボタンは form button[type='submit'] （詳細度 0-2-2）が上にあるので同じ形で上書きする */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #122B88;
  outline-offset: 2px;
}

form button[type=submit]:focus-visible,
form button[type=button]:focus-visible,
form input[type=submit]:focus-visible,
form input[type=button]:focus-visible {
  outline: 2px solid #122B88;
  outline-offset: 2px;
}

:root {

  /* ウィンドウサイズ */
  --vw: 100vw;
  --vh: 100vh;

  /* 三角形 */
  --clip-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
  --clip-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
  --clip-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --clip-triangle-left: polygon(0 50%, 100% 0, 100% 100%);
  --clip-triangle-lower-left: polygon(0 0, 100% 100%, 0 100%);
  --clip-triangle-upper-left: polygon(0 0, 100% 0, 0 100%);
  --clip-triangle-lower-right: polygon(100% 0, 100% 100%, 0 100%);
  --clip-triangle-upper-right: polygon(0 0, 100% 0, 100% 100%);

  /**
     * svgをbackgroundで使う
     * 色：#ffffff -> %23ffffff
     */
  --icon-btn-arrow: url('data:image/svg+xml;utf8,<svg width="37" height="6" viewBox="0 0 37 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 5H36L26.2703 1" stroke="%230C4A6E"/></svg>');

  /* カンプのピンク注記「カーソル」に合わせた十字カーソル（ボタン・タブで共用）
     線は 20.5 / 四角の辺は 19.5・22.5 と半ピクセルに置く。整数座標だと
     stroke-width 1 が 2 ピクセルに 50% ずつ配分されて薄くにじみ、
     くっきり出る四角と切り離れて見える */
  --cursor-cross: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='black' stroke-width='1'><path d='M20.5 0V19.5M20.5 22.5V40M0 20.5H19.5M22.5 20.5H40'/><rect x='19.5' y='19.5' width='3' height='3'/></g></svg>") 20 20, crosshair;

  /* ヘッダー高さ */
  --header-height: 60px;
}

/* ------------------------------------------------------------------
 * スムーズレスポンシブの基準単位
 *   --vw は common.js が document.body.clientWidth を入れる
 *   （scrollbar-gutter: stable のぶん 100vw より狭い＝実内容幅）
 *   PC(481px〜)  : カンプ 1920 基準。1920 を超えても拡大を続ける
 *   SP(〜480px)  : カンプ 390 基準
 *
 * 以前は 1920 以上で `--1px: 1px` と頭打ちにしていたが、広い画面で
 * 左右の余白だけが増え続けていたため撤去した（クライアント要望 2026-10-30）。
 * 全要素が同じ倍率で動くので、カンプ実測で詰めた固定幅も比率が崩れない。
 * ------------------------------------------------------------------ */
:root {
  --1px: calc(var(--vw, 100vw) / 1920);
}

/************************************************************************
* overwrite mfp
************************************************************************/
.mfp-bg {
  opacity: 0;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
  background-color: #AFA688;
}

.mfp-bg.mfp-ready {
  opacity: .8;
}

.mfp-bg.mfp-removing {
  opacity: 0;
}

.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

.mfp-wrap .mfp-arrow {
  opacity: 0;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

.mfp-wrap.mfp-ready .mfp-arrow {
  opacity: 1;
}

.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

.mfp-wrap.mfp-removing .mfp-arrow {
  opacity: 0;
}

/************************************************************************
* overwrite mfp end
************************************************************************/

/************************************************************************
* MW WP Form Over write
************************************************************************/
.mwform-radio-field,
.mwform-checkbox-field {
  display: inline-block;
}

.mw_wp_form_preview .c-select::after {
  content: none;
}

.mw_wp_form_preview .p-hasPlaceholder__text {
  display: none;
}

/************************************************************************
* swiper
************************************************************************/
.swiper-button-prev,
.swiper-button-next {
  aspect-ratio: 1;
  z-index: 1;
  cursor: pointer;
  background: transparent no-repeat center center/contain;
  width: 30px;
  width: 1.875rem;
}

.swiper-button-prev {
  rotate: 180deg;
  background-image: url('../img/common/icon-slider-arrow.svg');
}

.swiper-button-next {
  background-image: url('../img/common/icon-slider-arrow.svg');
}

.swiper-pagination {
  font-size: 0;
}

.swiper-pagination-bullet {
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  background-color: #D5D5D5;
  width: 5px;
  height: 5px;
}

.swiper-pagination-bullet + .swiper-pagination-bullet {
  margin-left: 5px;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #122B88;
}

/* rtl ******************************************************************/
.swiper[dir=rtl] .swiper-button-prev {
  background-image: url('../img/common/icon-chevron-right.svg');
}

.swiper[dir=rtl] .swiper-button-next {
  background-image: url('../img/common/icon-chevron-left.svg');
}

.swiper[dir=rtl] .swiper-pagination-bullet + .swiper-pagination-bullet {
  margin-right: 5px;
  margin-left: 0;
}

/************************************************************************
* swiper end
************************************************************************/
.wpcf7-spinner {
  display: none;
}

/************************************************************************
* Table of Contents Plus
************************************************************************/
#toc_container {
  padding: 30px 20px;
  padding: 1.875rem 1.25rem;
  width: 100% !important;
}

#toc_container .toc_number {
  margin-right: .5em;
  color: #122B88;
  font-weight: 700;
}

#toc_container .toc_list li {
  color: #000;
}

#toc_container .toc_list li::before {
  display: none;
  color: #122B88;
}

#toc_container .toc_list li + li {
  margin-top: .5em;
}

#toc_container .toc_list a {
  color: #000;
}

/* コンテンツ幅 1400px（カンプ 1920 の左右余白 260px） */
.l-container {
  margin-inline: auto;
  padding-inline: calc(30 * var(--1px));
  width: 100%;
  max-width: calc(1400 * var(--1px));
}

.l-container--narrow {
  max-width: calc(1060 * var(--1px));
}

.l-container--wide {
  max-width: calc(1660 * var(--1px));
}

/* 画面幅いっぱい（横スクロールを出さないため 100vw は使わない） */
.l-container--full {
  padding-inline: 0;
  max-width: none;
}

.l-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  width: 100%;
}

/* 下スクロールで隠す（JS が付与） */
.l-header.is-hidden {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.l-header.is-fixed {
  -webkit-box-shadow: 0 3px 6px rgba(117, 117, 117, .16);
  box-shadow: 0 3px 6px rgba(117, 117, 117, .16);
}

/* ==========================================================================
 * 共通ボタン
 * カンプ実測: 370×100 / radius 8 / テキスト 20px（中心は左から約160）
 *             波線アイコン 70×6 を右端から 30 の位置に配置
 * 既定は黄。ホバーで紺 + 下端が波打つ（カンプのピンク注記「ホバーで波打つ」）
 * ========================================================================== */
.c-btn {
  padding-block: calc(10 * var(--1px));
  padding-inline: calc(20 * var(--1px)) calc(50 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background-color .3s, color .3s;
  transition: background-color .3s, color .3s;
  cursor: var(--cursor-cross);
  -webkit-box-shadow: calc(6 * var(--1px)) calc(6 * var(--1px)) calc(10 * var(--1px)) rgba(0, 0, 0, .16);
  box-shadow: calc(6 * var(--1px)) calc(6 * var(--1px)) calc(10 * var(--1px)) rgba(0, 0, 0, .16);
  border-radius: calc(8 * var(--1px));
  background-color: #FFF15A;
  width: calc(370 * var(--1px));
  max-width: 100%;
  min-height: calc(100 * var(--1px));
  color: #000;
  font-size: calc(20 * var(--1px));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

/* 波線アイコン */
.c-btn__wave {
  position: absolute;
  top: 50%;
  right: calc(30 * var(--1px));
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: calc(70 * var(--1px));
  height: calc(9 * var(--1px));
  pointer-events: none;
  color: inherit;
}

/* 紺バリエーション（TOP「マルナゲ図面データ」） */
.c-btn--navy {
  background-color: #122B88;
  color: #fff;
}

/* 小サイズ（services カード内「お見積もりはコチラ」）
   カンプ実測 269×70 / テキストインク x=347〜487・アイコン x=509〜538（右端から 23）
   波線アイコンは 30×9 の 2 本（TOP の 70×9 と同じ波形の短い版） */
.c-btn--sm {
  padding-inline: calc(20 * var(--1px)) calc(42 * var(--1px));
  -webkit-box-shadow: calc(4 * var(--1px)) calc(4 * var(--1px)) calc(7 * var(--1px)) rgba(0, 0, 0, .16);
  box-shadow: calc(4 * var(--1px)) calc(4 * var(--1px)) calc(7 * var(--1px)) rgba(0, 0, 0, .16);
  border-radius: calc(4 * var(--1px));
  width: calc(269 * var(--1px));
  min-height: calc(70 * var(--1px));
  font-size: calc(16 * var(--1px));
}

.c-btn--sm .c-btn__wave {
  right: calc(23 * var(--1px));
  width: calc(30 * var(--1px));
  height: calc(9 * var(--1px));
}

/* 下端の波打ち（カンプのホバー作図に一致）
   ボタン本体に mask をかけて「角丸の上端＋波形の下端」を 1 つの形として作る。
   タイル幅を 370/8 = 46.25 にしてボタン幅の約数にしているため、
   左右どちらの端でも波が途中で切れない。 */
@-webkit-keyframes c-btn-wave {

  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  to {
    -webkit-mask-position: calc(-52.857 * var(--1px)) 0;
    mask-position: calc(-52.857 * var(--1px)) 0;
  }
}
@keyframes c-btn-wave {

  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  to {
    -webkit-mask-position: calc(-52.857 * var(--1px)) 0;
    mask-position: calc(-52.857 * var(--1px)) 0;
  }
}
@-webkit-keyframes c-btn-wave-sm {

  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  to {
    -webkit-mask-position: calc(-44.833 * var(--1px)) 0;
    mask-position: calc(-44.833 * var(--1px)) 0;
  }
}
@keyframes c-btn-wave-sm {

  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  to {
    -webkit-mask-position: calc(-44.833 * var(--1px)) 0;
    mask-position: calc(-44.833 * var(--1px)) 0;
  }
}

/* ---- tab 以下（--1px 急膨張対策の固定値上書き） ---- */

/* ==========================================================================
 * フォーム部品（quotation / data / contact で共通）
 * カンプ実測（quotation を基準・data / contact も同寸）
 *   白カード   x260-1659（1400）
 *   入力欄     h41 / 行ピッチ 77（＝ 行間 36）/ 地 #E7E9F3
 *   必須バッジ 61×32 / 文字 15px 紺 / ラベルの送り終わりから 18
 *   ラベル     20px 黒（入力欄と上下中央そろえ）
 *   同意行     チェック 25×25 / テキスト 16px / リンク 16px 紺
 *   送信ボタン 470×161 / radius 10 / 文字 24px / 波線 70×9（右から 30）
 * 列幅はページごとに違うので .c-form--quotation / --simple で指定する。
 * ========================================================================== */
.c-form__card {
  padding-block: calc(76 * var(--1px)) calc(65 * var(--1px));
  background-color: #fff;
}

.c-form__card + .c-form__card {
  margin-top: calc(21 * var(--1px));
}

/* カンプは下の余白だけカードごとに違う（上は 4 枚とも 76） */
.c-form__card--company {
  padding-bottom: calc(84 * var(--1px));
}

.c-form__card--dataFile {
  padding-bottom: calc(75 * var(--1px));
}

/* --- 行 --- */
.c-form__rows {
  row-gap: calc(36 * var(--1px));
  display: grid;
}

.c-form__row {
  display: grid;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  min-height: calc(41 * var(--1px));
}

/* textarea の行はラベルを上ぞろえにする */
.c-form__row--top {
  -webkit-box-align: start;
  -webkit-align-items: start;
  -ms-flex-align: start;
  align-items: start;
}

.c-form__row--top .c-form__label {
  padding-top: calc(11 * var(--1px));
}

/* ラベルとバッジ */
.c-form__label {
  row-gap: calc(6 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: calc(21 * var(--1px));
  -moz-column-gap: calc(21 * var(--1px));
  column-gap: calc(21 * var(--1px));
}

.c-form__labelText {
  font-size: calc(20 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

/* 幅の違うラベルでもバッジの位置をそろえたい行（quotation「ファイル情報」）。
   カンプはどちらの行もバッジが x1038（＝ラベルの左端 765 から 273）から始まる */
.c-form__label--align {
  display: grid;
  grid-template-columns: calc(273 * var(--1px)) auto;
  -webkit-box-pack: start;
  -webkit-justify-content: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

.c-form__required {
  padding-inline: calc(12 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #e7e9f3;
  min-width: calc(61 * var(--1px));
  min-height: calc(32 * var(--1px));
  color: #122B88;
  font-size: calc(15 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

/* 任意項目のバッジ。必須と見分けがつくよう地と文字を弱める（データファイル 2・3） */
.c-form__required--optional {
  -webkit-box-shadow: inset 0 0 0 calc(1 * var(--1px)) #e7e9f3;
  box-shadow: inset 0 0 0 calc(1 * var(--1px)) #e7e9f3;
  background-color: transparent;
  color: #000;
  font-weight: 500;
}

/* --- 入力欄 --- */
.c-form__input,
.c-form__textarea {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 0;
  background-color: #e7e9f3;
  width: 100%;
  max-width: 100%;
  color: #000;
  font-size: calc(17 * var(--1px));
  letter-spacing: 0;
  line-height: 1.5;
}

.c-form__input {
  padding-block: 0;
  padding-inline: calc(22 * var(--1px));
  height: calc(41 * var(--1px));
}

.c-form__textarea {
  padding: calc(22 * var(--1px));
  height: calc(241 * var(--1px));
  resize: vertical;
}

/* quotation「お問い合わせ内容」は 118 と低い */
.c-form__textarea--sm {
  height: calc(118 * var(--1px));
}

.c-form__input::-webkit-input-placeholder,
.c-form__textarea::-webkit-input-placeholder {
  color: #808080;
  font-size: calc(15 * var(--1px));
}

.c-form__input::-moz-placeholder,
.c-form__textarea::-moz-placeholder {
  color: #808080;
  font-size: calc(15 * var(--1px));
}

.c-form__input::-ms-input-placeholder,
.c-form__textarea::-ms-input-placeholder {
  color: #808080;
  font-size: calc(15 * var(--1px));
}

.c-form__input::placeholder,
.c-form__textarea::placeholder {
  color: #808080;
  font-size: calc(15 * var(--1px));
}

.c-form__input:focus,
.c-form__textarea:focus {
  outline: calc(2 * var(--1px)) solid #122B88;
  outline-offset: calc(-2 * var(--1px));
}

/* --- ラジオ（contact のお問い合わせ種別） --- */
.c-form__radios {
  row-gap: calc(12 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-column-gap: calc(66 * var(--1px));
  -moz-column-gap: calc(66 * var(--1px));
  column-gap: calc(66 * var(--1px));
}

.c-form__radio {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: calc(12 * var(--1px));
  -moz-column-gap: calc(12 * var(--1px));
  column-gap: calc(12 * var(--1px));
  cursor: pointer;
  font-size: calc(17 * var(--1px));
  letter-spacing: 0;
  line-height: 1.5;
}

.c-form__radio input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: static;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  opacity: 1;
  cursor: pointer;
  margin: 0;
  border: calc(2 * var(--1px)) solid #122B88;
  border-radius: 50%;
  background-color: #fff;
  width: calc(20 * var(--1px));
  height: calc(20 * var(--1px));
}

.c-form__radio input[type=radio]:checked {
  border-width: calc(6 * var(--1px));
}

/* --- ファイル選択（quotation） --- */
.c-form__file {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: calc(19 * var(--1px));
  -moz-column-gap: calc(19 * var(--1px));
  column-gap: calc(19 * var(--1px));
}

/* label 自体を点線のボタンにして、中の input[type=file] は隠す */
.c-form__fileBtn {
  padding-inline: calc(16 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: calc(20 * var(--1px));
  -moz-column-gap: calc(20 * var(--1px));
  column-gap: calc(20 * var(--1px));
  cursor: pointer;
  border: calc(2 * var(--1px)) dotted #4b5fa5;
  border-radius: calc(8 * var(--1px));
  background-color: #fff;
  width: calc(214 * var(--1px));
  min-height: calc(44 * var(--1px));
  color: #000;
  font-size: calc(16 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

.c-form__filePlus {
  font-size: calc(20 * var(--1px));
  font-weight: 700;
  line-height: 1;
}

.c-form__fileInput {
  position: absolute;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  margin: calc(-1 * var(--1px));
  border: 0;
  padding: 0;
  width: calc(1 * var(--1px));
  height: calc(1 * var(--1px));
  overflow: hidden;
  white-space: nowrap;
}

.c-form__fileInput:focus-visible + .c-form__fileBtn {
  outline: calc(2 * var(--1px)) solid #122B88;
  outline-offset: calc(2 * var(--1px));
}

/* 未選択のときの注記 / 選択済みのときの × ボタン。JS で出し分ける */
.c-form__fileNote {
  color: #122B88;
  font-size: calc(16 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

.c-form__fileClear {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background-color: #122B88;
  padding: 0;
  width: calc(28 * var(--1px));
  height: calc(28 * var(--1px));
  color: #fff;
}

.c-form__fileClear[hidden],
.c-form__fileNote[hidden] {
  display: none;
}

.c-form__fileClearIcon {
  width: calc(12 * var(--1px));
  height: calc(12 * var(--1px));
}

/* 添付できる形式・容量の案内（カンプには無いが、制限を伝えないと選び直しになる） */
.c-form__fileGuide {
  margin-top: calc(18 * var(--1px));
  color: #122B88;
  font-size: calc(14 * var(--1px));
  letter-spacing: 0;
  line-height: 1.6;
}

/* 通らなかったファイルの理由。行のエラーは入力欄の列にそろえる */
.c-form__fileError {
  grid-column: 2;
  margin-top: calc(8 * var(--1px));
  color: #f00;
  font-size: calc(14 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.6;
}

.c-form__fileError--total {
  grid-column: auto;
  margin-top: calc(8 * var(--1px));
}

.c-form__fileError[hidden] {
  display: none;
}

/* --- 同意チェック --- */
.c-form__agree {
  row-gap: calc(12 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: calc(44 * var(--1px));
  -moz-column-gap: calc(44 * var(--1px));
  column-gap: calc(44 * var(--1px));
  margin-top: calc(121 * var(--1px));
}

.c-form__agreeLabel {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: calc(14 * var(--1px));
  -moz-column-gap: calc(14 * var(--1px));
  column-gap: calc(14 * var(--1px));
  cursor: pointer;
  font-size: calc(16 * var(--1px));
  letter-spacing: 0;
  line-height: 1.5;
}

.c-form__agreeLabel input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: static;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  opacity: 1;
  cursor: pointer;
  margin: 0;
  border: calc(1 * var(--1px)) solid #000;
  background-color: transparent;
  width: calc(25 * var(--1px));
  height: calc(25 * var(--1px));
}

.c-form__agreeLabel input[type=checkbox]:checked {
  border-color: #122B88;
  background-color: #122B88;

  /* チェックマークは背景画像で描く（::after は input に使えないため） */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.4l3.4 3.4L13 5.2' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(17 * var(--1px)) calc(17 * var(--1px));
}

/* foundation の `input[type='checkbox'] + span` がチェックボックスの箱を
   ::before で描くので、テキスト用の span に当たると箱が二重になる。打ち消す */
.c-form__agreeLabel input[type=checkbox] + .c-form__agreeText {
  padding-left: 0;
}

.c-form__agreeLabel input[type=checkbox] + .c-form__agreeText::before,
.c-form__agreeLabel input[type=checkbox] + .c-form__agreeText::after {
  content: none;
}

.c-form__privacy {
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  color: #122B88;
  font-size: calc(16 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
}

/* --- 送信ボタン --- */
.c-form__submitWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: calc(61 * var(--1px));
}

/* 見積もりの「内容を確認する」は type="button"（送信はしない）ので両方を拾う */

/* 属性セレクタは foundation/_form.scss の
   `form button[type='submit'] { width: auto }`（詳細度 0,1,2）を打ち消すために必要。
   上書きする側も同じ形にしないと効かないので、tab / sp も同じセレクタで書く */
.c-form__submit[type=submit],
.c-form__submit[type=button] {
  padding-block: calc(10 * var(--1px));
  padding-inline: calc(50 * var(--1px)) calc(110 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: -webkit-filter .3s ease, -webkit-transform .3s ease;
  transition: -webkit-filter .3s ease, -webkit-transform .3s ease;
  transition: filter .3s ease, transform .3s ease;
  transition: filter .3s ease, transform .3s ease, -webkit-filter .3s ease, -webkit-transform .3s ease;
  cursor: pointer;
  -webkit-box-shadow: calc(6 * var(--1px)) calc(6 * var(--1px)) calc(12 * var(--1px)) rgba(0, 0, 0, .16);
  box-shadow: calc(6 * var(--1px)) calc(6 * var(--1px)) calc(12 * var(--1px)) rgba(0, 0, 0, .16);
  border: 0;
  border-radius: calc(10 * var(--1px));
  background: radial-gradient(ellipse 22% 53% at 1% 48%, #0d066f 0%, rgba(13, 6, 111, 0) 100%), radial-gradient(ellipse 43% 96% at 79% 113%, #0d066f 0%, rgba(13, 6, 111, 0) 100%), linear-gradient(123deg, #22b8e9 0%, #2196d1 100%);
  width: calc(470 * var(--1px));
  max-width: 100%;
  min-height: calc(161 * var(--1px));
  color: #fff;
  font-size: calc(24 * var(--1px));
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

/* 必須が埋まる／同意にチェックが入るまでは押せない（form.js が制御する） */
.c-form__submit:disabled {
  cursor: default;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #b2b2b2;
}

.c-form__submitWave {
  position: absolute;
  top: 50%;
  right: calc(30 * var(--1px));
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: calc(70 * var(--1px));
  height: calc(9 * var(--1px));
  pointer-events: none;
  color: inherit;
}

/* --- 列幅（ページごと） --- */

/* quotation: ラベル列 354（765→1119）/ 入力欄 403 */
.c-form--quotation .c-form__row {
  grid-template-columns: calc(354 * var(--1px)) calc(403 * var(--1px));
}

/* ファイル行だけラベル列が狭い（点線ボックスが 1048 から始まる） */
.c-form--quotation .c-form__row--file {
  grid-template-columns: calc(283 * var(--1px)) 1fr;
}

/* 見出しを持たない行（textarea だけの quotation カード 4）は 1 列 */
.c-form--quotation .c-form__row--full {
  grid-template-columns: 1fr;
}

/* ファイル行は行の高さが 44 なので、ピッチ 77 に合わせて行間を詰める */
.c-form--quotation .c-form__card--dataFile .c-form__rows {
  row-gap: calc(33 * var(--1px));
}

/* data / contact: ラベル列 328（441→769）/ 入力欄 753 */
.c-form--simple .c-form__row {
  grid-template-columns: calc(331 * var(--1px)) calc(753 * var(--1px));
}

.c-form--simple .c-form__card {
  padding-block: calc(80 * var(--1px)) calc(77 * var(--1px));
  padding-inline: calc(178 * var(--1px)) calc(138 * var(--1px));
}

/* quotation はカード左端からアイコン列が始まるので左 padding を持たない */
.c-form--quotation .c-form__card {
  padding-inline: 0 calc(138 * var(--1px));
}

/* ---- tab 以下（--1px の急膨張対策に固定値で上書き） ---- */

/* 送信エラーの表示 */
.c-form__alert {
  margin-bottom: calc(32 * var(--1px));
  border: calc(1 * var(--1px)) solid #122B88;
  border-radius: calc(8 * var(--1px));
  background-color: #fff;
  padding: calc(20 * var(--1px)) calc(24 * var(--1px));
  color: #000;
  font-size: calc(16 * var(--1px));
  line-height: 1.8;
}

.c-form__alertTitle {
  margin-bottom: calc(8 * var(--1px));
  color: #122B88;
  font-weight: 700;
}

.c-form__alertList {
  padding-left: 1.2em;
  list-style: disc;
}

/* ==========================================================================
 * 下層ページのセクション見出し（≈ English + 日本語ルビ）
 * カンプ実測（History で採寸）:
 *   ≈      x=261.0 インク 24.5×15.3（水色。青背景のページでは紺）
 *   英字   x=299.7 インク高 36.9（キャップ 31.9・セリフ）
 *   日本語 英字インク上端の 25.6px 上・インク高 17.7（ゴシック太字 20px）
 *   日本語の左位置はセクションごとに違う（ページ下部の modifier で指定）
 * ========================================================================== */
.c-lowerTitle {
  position: relative;
  padding-top: calc(20.6 * var(--1px));
  padding-bottom: calc(5.7 * var(--1px));
  color: #000;
}

.c-lowerTitle__ja {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(20 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.c-lowerTitle__en {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-column-gap: calc(14.3 * var(--1px));
  -moz-column-gap: calc(14.3 * var(--1px));
  column-gap: calc(14.3 * var(--1px));
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(42 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.c-lowerTitle__mark {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: #21A9DF;
}

/* 青背景のセクション（History）は見出しごと紺 */
.c-lowerTitle--history {
  color: #122B88;
}

.c-lowerTitle--history .c-lowerTitle__mark {
  color: #122B88;
}

/* 日本語ルビの左位置（カンプ実測。コンテンツ左端 260 からの距離） */
.c-lowerTitle--ceo .c-lowerTitle__ja {
  left: calc(269.9 * var(--1px));
}

.c-lowerTitle--philosophy .c-lowerTitle__ja {
  left: calc(205.8 * var(--1px));
}

.c-lowerTitle--history .c-lowerTitle__ja {
  left: calc(182.5 * var(--1px));
}

.c-lowerTitle--outline .c-lowerTitle__ja {
  left: calc(146 * var(--1px));
}

.c-lowerTitle--access .c-lowerTitle__ja {
  left: calc(119.3 * var(--1px));
}

.c-lowerTitle--service .c-lowerTitle__ja {
  left: calc(88 * var(--1px));
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * 黄色のマーカー（Philosophy の三角図・キャッチの下半分に敷く）
 * ========================================================================== */
.c-marker {
  margin-inline: auto;
  display: block;

  /* カンプはベースラインに沿った細い帯（高さ 5px）。行全体を塗りつぶさない */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF15A), to(#FFF15A));
  background-image: linear-gradient(#FFF15A, #FFF15A);
  background-position: 0 calc(100% - calc(5 * var(--1px)));
  background-repeat: no-repeat;
  background-size: 100% calc(5 * var(--1px));
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

/* marunage benefit のキャッチは帯が太い（カンプ実測 高さ 17） */
.c-marker--wide {
  margin-inline: 0;
  display: inline;
  background-position: 0 100%;
  background-size: 100% calc(17 * var(--1px));
  width: auto;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * セクション見出し（≈ English / 日本語）
 * カンプ実測（実フォント SicPrintempsPetit / Noto Sans JP で再較正・2026-09-10）
 *   英字（≈ 込み）service w98 / company w118 / price w71 / notice w85 → いずれも 19px
 *   日本語 サービス w161 / 会社概要 w165 / 料金表 w124 → いずれも 42px
 * ========================================================================== */
.c-secTitle {
  padding-bottom: calc(6.2 * var(--1px));
  color: #122B88;
}

.c-secTitle__en {
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: max(19 * var(--1px), 12px);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

.c-secTitle__ja {
  margin-top: calc(14.8 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(42 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.c-totop {
  display: block;
  position: fixed;
  right: 20px;
  right: 1.25rem;
  bottom: 20px;
  bottom: 1.25rem;
  visibility: hidden;
  opacity: 0;
  z-index: 30;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
  background-color: #21A9DF;
  width: 50px;
  width: 3.125rem;
  height: 50px;
  height: 3.125rem;
}

.c-totop::before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -20%) rotate(-45deg);
  transform: translate(-50%, -20%) rotate(-45deg);
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  width: 20px;
  width: 1.25rem;
  height: 20px;
  height: 1.25rem;
  content: '';
}

.c-totop.is-active {
  visibility: visible;
  opacity: .7;
}

.c-totop.is-active:hover, .c-totop.is-active:focus {
  opacity: 1;
}

/* ==========================================================================
 * 波線下線つきテキスト（CEO Message / Philosophy の見出し）
 * カンプ実測:
 *   CEO         波長 39.5 / 山谷 6 / 線 1px（外形 7px）
 *   Philosophy  波長 51.5 / 山谷 10.4 / 線 1.6px（外形 12px・--lg）
 * タイルは 1 要素に収まりきる長さ（周期の整数倍）で作り、繰り返しの継ぎ目を出さない
 * 波は行の幅いっぱいに敷くため、行ごとに inline-block で包む
 * ========================================================================== */
.c-waveText {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1303.5' height='7' viewBox='0 0 1303.5 7' preserveAspectRatio='none' fill='none'><path d='M0 3.5q9.875 -6 19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0t19.75 0' stroke='%2321A9DF' stroke-width='1'/></svg>");
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: calc(1303.5 * var(--1px)) calc(7 * var(--1px));
  padding-bottom: calc(12 * var(--1px));
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

.c-waveText--lg {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1287.5' height='12' viewBox='0 0 1287.5 12' preserveAspectRatio='none' fill='none'><path d='M0 6q12.875 -10.4 25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0t25.75 0' stroke='%2321A9DF' stroke-width='1.6'/></svg>");
  background-size: calc(1287.5 * var(--1px)) calc(12 * var(--1px));
  padding-bottom: calc(22.4 * var(--1px));
}

/* services: カードタイトルの細い波線
   カンプ実測 波長 16 / 山谷 4 / 線 1px / 文字インク下端の 6px 下 */
.c-waveText--sm {
  padding-inline: calc(2.5 * var(--1px));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1312' height='7' viewBox='0 0 1312 7' preserveAspectRatio='none' fill='none'><path d='M0 3.5q4 -4 8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0t8 0' stroke='%2321A9DF' stroke-width='1'/></svg>");
  background-size: calc(1312 * var(--1px)) calc(7 * var(--1px));
  padding-bottom: calc(8.8 * var(--1px));
  min-width: calc(55 * var(--1px));
}

/* services: 「その他」見出しの太い波線
   カンプ実測 波長 34.5 / 山谷 9.5 / 線 3px */
.c-waveText--md {
  padding-inline: calc(13 * var(--1px));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1311' height='14' viewBox='0 0 1311 14' preserveAspectRatio='none' fill='none'><path d='M0 7q8.625 -9.5 17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0t17.25 0' stroke='%2321A9DF' stroke-width='3'/></svg>");
  background-size: calc(1311 * var(--1px)) calc(14 * var(--1px));
  padding-bottom: calc(20.75 * var(--1px));
}

/* price: セクション見出しの波線
   カンプ実測 波長 49 / 山谷 8 / 線 3.5px */
.c-waveText--xl {
  padding-inline: 0 calc(15 * var(--1px));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1323' height='13' viewBox='0 0 1323 13' preserveAspectRatio='none' fill='none'><path d='M0 6.5q12.25 -8 24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0t24.5 0' stroke='%2321A9DF' stroke-width='3.5'/></svg>");
  background-size: calc(1323 * var(--1px)) calc(13 * var(--1px));
  padding-bottom: calc(22 * var(--1px));
}

/* marunage: FV の Marunage 見出し
   カンプ実測 波長 65.5 / 山谷 10 / 線 3px（外形 13） */
.c-waveText--mn {
  padding-inline: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1310' height='13' viewBox='0 0 1310 13' preserveAspectRatio='none' fill='none'><path d='M0 6.5q16.375 -10 32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0' stroke='%2321A9DF' stroke-width='3'/></svg>");
  background-size: calc(1310 * var(--1px)) calc(13 * var(--1px));
  padding-bottom: calc(23.5 * var(--1px));
}

/* marunage: problem の項目見出し
   カンプ実測 波長 47 / 山谷 6.5 / 線 1.5px（外形 8）・幅は見出しに関係なく 494 固定
   （左列 x445-938 / 右列 x1176-1669） */
.c-waveText--mnItem {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1316' height='8' viewBox='0 0 1316 8' preserveAspectRatio='none' fill='none'><path d='M0 4q11.75 -6.5 23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0t23.5 0' stroke='%2321A9DF' stroke-width='1.5'/></svg>");
  background-size: calc(1316 * var(--1px)) calc(8 * var(--1px));
  padding-bottom: calc(20 * var(--1px));
  min-width: calc(494 * var(--1px));
  white-space: nowrap;
}

/* marunage: benefit の白カード見出し
   カンプ実測 波長 36 / 山谷 8 / 線 2px（外形 10） */
.c-waveText--mnCard {
  padding-inline: calc(2 * var(--1px));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1296' height='10' viewBox='0 0 1296 10' preserveAspectRatio='none' fill='none'><path d='M0 5q9 -8 18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0t18 0' stroke='%2321A9DF' stroke-width='2'/></svg>");
  background-size: calc(1296 * var(--1px)) calc(10 * var(--1px));
  padding-bottom: calc(18 * var(--1px));
}

/* marunage: service-detail のセクション見出し（白背景ではなく写真の上に置くので白い波線）
   カンプ実測 波長 65.5 / 山谷 8.5 / 線 2.5px（外形 11） */
.c-waveText--mnWhite {
  padding-inline: calc(8 * var(--1px));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1310' height='11' viewBox='0 0 1310 11' preserveAspectRatio='none' fill='none'><path d='M0 5.5q16.375 -8.5 32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0t32.75 0' stroke='white' stroke-width='2.5'/></svg>");
  background-size: calc(1310 * var(--1px)) calc(11 * var(--1px));
  padding-bottom: calc(23 * var(--1px));
}

/* 中央揃えで使う（width: fit-content のまま中央に置く） */
.c-waveText--center {
  margin-inline: auto;
}

/* ---- tab 以下 ---- */

/* タイルは周期の整数倍で作ってあるので、tab でも「タイル全長」で指定する。
   1 周期ぶんの幅を書くと 1 タイルに入っている数十周期が潰れてしまう。
   全長 = 目標の波長 ÷ カンプの波長 × タイル幅 */

/* ==========================================================================
 * 404 ページ
 * カンプが無いので、他の下層ページと同じ上下余白・中央ぞろえにしている
 * ========================================================================== */
.p-404 {
  padding-block: calc(120 * var(--1px)) calc(160 * var(--1px));
  background-color: #fff;
  text-align: center;
}

.p-404__title {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(30 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.6;
}

.p-404__body {
  margin-top: calc(32 * var(--1px));
  font-size: calc(17 * var(--1px));
  letter-spacing: 0;
  line-height: 1.8823529412;
}

.p-404__foot {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: calc(56 * var(--1px));
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * company: Access
 * カンプ実測: 見出し(ja) 5022.5 /(en) 5048.2 / 住所 5201.4（x=262.1）
 *             地図 x=260 y=5256.4 1400×600
 * ========================================================================== */
.p-access {
  position: relative;
  z-index: 1;
}

.p-access__inner {
  margin-inline: auto;
  padding-top: calc(207.1 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

.p-access__address {
  margin-top: calc(109.6 * var(--1px));
  font-size: calc(17 * var(--1px));
  font-style: normal;
  line-height: 1;
}

.p-access__map {
  aspect-ratio: 1400/600;
  margin-top: calc(39.3 * var(--1px));
  width: 100%;
  overflow: hidden;
}

.p-access__map iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
}

/* ---- tab 以下 ---- */
.p-article {

  /* カンプが無いので、他の下層ページと同じ上下余白に合わせる */
  padding-block: calc(90 * var(--1px)) calc(120 * var(--1px));
}

.p-article__header {
  margin-bottom: calc(40 * var(--1px));
}

.p-article__meta {
  gap: calc(20 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: calc(15 * var(--1px));
}

.p-article__title {
  margin-top: calc(24 * var(--1px));
  font-size: calc(30 * var(--1px));
  line-height: 1.6;
}

/* アイキャッチ（put_thumbnail が素の img を出す） */
.p-article__header img {
  display: block;
  margin-top: calc(32 * var(--1px));
  width: 100%;
  height: auto;
}

.p-article__body {
  margin-top: 16px;
  border-top: 1px solid #e7e0db;
  border-bottom: 1px solid #e7e0db;
  padding-top: 30px;
  padding-bottom: 50px;
  font-size: 16px;
  line-height: 2;

  /* 雛形は ul を grid + li を subgrid にしていたが、これは li の中が
     「マーカー要素 + テキスト要素」の 2 つに分かれている前提の書き方。
     入稿される素の <li>テキスト</li> だと 1 列目が max-content になって
     テキストの長さぶん横に伸び、SP で横スクロールが出る。
     マーカーは editor-style の ::before が出すので通常フローに戻す。 */
}

.p-article__body h1,
.p-article__body h2,
.p-article__body h3,
.p-article__body h4,
.p-article__body h5,
.p-article__body h6 {
  margin-top: 2em;
  margin-bottom: 1em;
  font-weight: 700;
  line-height: 1.5;
}

.p-article__body h1 {
  font-size: 32px;
  font-size: 2rem;
}

.p-article__body h2 {
  background-color: #122B88;
  padding: .3em .4em;
  color: #fff;
  font-size: 26px;
  font-size: 1.625rem;
}

.p-article__body h3 {
  border-left: 5px solid #21A9DF;
  padding-left: .5em;
  font-size: 24px;
  font-size: 1.5rem;
}

.p-article__body h4 {
  font-size: 20px;
  font-size: 1.25rem;
}

.p-article__body h5 {
  font-size: 18px;
  font-size: 1.125rem;
}

.p-article__body .c-beforeBar {
  position: relative;
  padding-left: 1.5em;
}

.p-article__body .c-beforeBar::before {
  position: absolute;
  top: 1em;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #122B88;
  content: 'ー';
}

.p-article__body ul {
  list-style: none;
}

.p-article__body ul li {
  position: relative;
  padding-left: 1em;
}

.p-article__body ul li::before {
  position: absolute;
  left: 0;
  content: '・';
}

.p-article__body table {
  border: none;
  width: 100%;
}

.p-article__body table th,
.p-article__body table td {
  vertical-align: middle;
  border: none;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 20px;
  padding: 1.25rem;
}

.p-article__body table th {
  border-right: 1px solid #000;
  width: 130px;
  width: 8.125rem;
  font-size: 17px;
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;
}

.p-article__body * + * {
  margin-top: 25px;
}

.p-article__body *:first-child {
  margin-top: 0;
}

.p-article__body .wp-block-spacer, .p-article__body .wp-block-spacer + * {
  margin-top: 0;
}

.p-article__body p {
  font-weight: 400;
}

.p-article__body ul,
.p-article__body ol {
  margin-left: 10px;
  margin-left: .625rem;
}

.p-article__body ul ul,
.p-article__body ul ol,
.p-article__body ol ul,
.p-article__body ol ol {
  margin-top: 15px;
  margin-top: .9375rem;
  margin-left: 0;
}

.p-article__body ol {
  padding-left: 1.25em;
}

.p-article__body ol > li:not([class]) {
  list-style: decimal;
}

.p-article__body ol > li:not([class])::marker {
  color: #122B88;
  font-weight: 700;
}

.p-article__body li:not([class]) + li {
  margin-top: 10px;
  margin-top: .625rem;
}

.p-article__body a:not([class]) {
  color: #122B88;
  text-decoration: underline;
}

.p-article__body figcaption {
  margin-top: 0;
  padding-top: .5em;
  padding-bottom: .5em;
  color: #000;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.p-article__body strong,
.p-article__body b {
  font-weight: 700;
}

.p-article__body blockquote,
.p-article__body q {
  position: relative;
  background-color: #F8F8F8;
  padding: 1em 4em;
}

.p-article__body blockquote::before, .p-article__body blockquote::after,
.p-article__body q::before,
.p-article__body q::after {
  position: absolute;
  color: #b2b2b2;
  font: var(--fa-font-solid);
  font-size: 2em;
  font-weight: 900;
}

.p-article__body blockquote::before,
.p-article__body q::before {
  top: 0;
  left: .5em;
  content: '\f10d';
}

.p-article__body blockquote::after,
.p-article__body q::after {
  right: .5em;
  bottom: 0;
  content: '\f10e';
}

.p-article__body q {
  display: inline-block;
}

.p-article__body dl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.p-article__body dt,
.p-article__body dd {
  border-top: 1px solid #e7e0db;
  padding: 20px 10px;
  padding: 1.25rem .625rem;
}

.p-article__body dt:last-of-type,
.p-article__body dd:last-of-type {
  border-bottom: 1px solid #e7e0db;
}

.p-article__body dt {
  width: 33%;
  font-weight: 700;
}

.p-article__body dd {
  width: 67%;
}

.p-article__body pre {
  overflow: auto;
  font-size: 14px;
  font-size: .875rem;
  letter-spacing: 0;
  white-space: pre;
}

.p-article__body .aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.p-article__body .alignleft {
  float: left;
  margin-right: 1em;
}

.p-article__body .alignright {
  float: right;
  margin-left: 1em;
}

.p-article__body .gallery {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.p-article__body .gallery-columns-4 {
  gap: 20px;
}

.p-article__body .gallery-columns-4 > .gallery-item {
  width: calc((100% - 60px) / 4);
}

.p-article__body .gallery-item {
  margin-top: 0;
}

.p-article__body .gallery-icon {
  text-align: center;
}

.p-article__links {
  margin-top: 30px;
  margin-top: 1.875rem;
  text-align: center;
}

.post-page-numbers {
  display: inline-block;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  border: 1px solid #122B88;
  width: 2em;
  height: 2em;
  color: #122B88;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 2;
  text-align: center;
}

.p-article__links .post-page-numbers {
  text-decoration: none;
}

.post-page-numbers + .post-page-numbers {
  margin-left: 10px;
}

.post-page-numbers.current {
  background-color: #122B88;
  color: #fff;
}

.post-page-numbers.dots {
  border: none;
}

/* --- 記事下のナビ（カンプ無し。他ページのボタンに寄せた見た目） --- */
.p-article__footer {
  gap: calc(24 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: calc(60 * var(--1px));
  border-top: calc(1 * var(--1px)) solid #e7e0db;
  padding-top: calc(32 * var(--1px));
}

.p-article__paginateLink {
  gap: calc(6 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 0;
  font-size: calc(15 * var(--1px));
}

.p-article__paginateLink--next {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.p-article__paginateLink a {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  min-width: 0;
  overflow: hidden;
  color: #122B88;
}

.p-article__previousBtn {
  padding-block: calc(10 * var(--1px));
  padding-inline: calc(32 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  border-radius: calc(4 * var(--1px));
  background-color: #122B88;
  min-height: calc(56 * var(--1px));
  color: #fff;
  font-size: calc(16 * var(--1px));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ==========================================================================
 * パンくず
 * カンプに指定が無いため、フッターのナビ（15px / 紺・ホバーで水色）に寄せている
 * ========================================================================== */
.p-breadcrumb {
  padding-block: calc(24 * var(--1px));
  display: block;
  color: #000;
  font-size: calc(15 * var(--1px));
  line-height: 1.6;
}

.p-breadcrumb__list {
  gap: calc(4 * var(--1px)) calc(8 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  list-style: none;
}

.p-breadcrumb__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/* 区切りは2つ目以降の項目の前に置く（最後に余らせない） */
.p-breadcrumb__item + .p-breadcrumb__item::before {
  margin-right: calc(8 * var(--1px));
  content: '›';
}

.p-breadcrumb__link {
  display: inline-block;
  -webkit-transition: color .3s;
  transition: color .3s;
  color: #000;
}

/* 現在地はリンクにしない */
.p-breadcrumb__current {
  color: #122B88;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * company: CEO Message + Philosophy の共通背景
 * カンプ実測: y=495.6〜2557.4 の縦グラデ（59% まで白 → 下端 #E5EFFD）
 * ========================================================================== */
.p-companyPale {
  position: relative;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(59%, #fff), to(#e5effd));
  background-image: linear-gradient(180deg, #fff 0%, #fff 59%, #e5effd 100%);
  padding-bottom: calc(153 * var(--1px));
}

/* ==========================================================================
 * company: CEO Message
 * カンプ実測: 見出し(ja) 619.8 / (en) 645.3 / リード 754.5 / 本文 900.1
 *             署名 1402.0 / 写真 x=1050 y=731.6 610×690（下端が波形）
 * ========================================================================== */
.p-ceo {
  position: relative;
}

.p-ceo__inner {
  margin-inline: auto;
  position: relative;
  padding-top: calc(123.9 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

/* --- リード（波線下線つき 2 行） --- */

/* カンプは写真より前面（2 行目の末尾が写真に少し重なる） */
.p-ceo__lead {
  row-gap: calc(17 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  z-index: 1;
  margin-top: calc(66.5 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(32 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

/* --- 本文 --- */
.p-ceo__body {
  margin-top: calc(34 * var(--1px));
  max-width: calc(800 * var(--1px));
  font-size: calc(17 * var(--1px));
  letter-spacing: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.p-ceo__body p + p {
  margin-top: calc(25.5 * var(--1px));
}

/* --- 署名 --- */
.p-ceo__sign {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  margin-top: calc(48.4 * var(--1px));
  color: #000;
}

.p-ceo__signRole {
  position: relative;
  top: calc(-5.1 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(20 * var(--1px));
  font-weight: 800;
  line-height: 1;
}

.p-ceo__signName {
  margin-left: calc(27 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(32 * var(--1px));
  font-weight: 800;
  line-height: 1;

  /* 全角スペースだと 32 空くので半角スペース + word-spacing で詰める */
  word-spacing: calc(1 * var(--1px));
}

.p-ceo__signEn {
  position: relative;
  top: calc(-1.3 * var(--1px));
  margin-left: calc(30.3 * var(--1px));
  color: #21A9DF;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(20 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

/* --- 代表写真（下端が波形） --- */
.p-ceo__photo {
  aspect-ratio: 610/690;
  position: absolute;
  top: calc(236 * var(--1px));
  left: calc(790 * var(--1px));

  /* 下端の波形はカンプ実測（谷が左端から 15.5px の位置） */
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='82.5' height='10' viewBox='0 0 82.5 10' preserveAspectRatio='none'><path d='M0 5 q10.3 -6.5 20.6 0 t20.6 0 t20.6 0 t20.6 0 V0 H0 Z' fill='%23000'/></svg>");
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='82.5' height='10' viewBox='0 0 82.5 10' preserveAspectRatio='none'><path d='M0 5 q10.3 -6.5 20.6 0 t20.6 0 t20.6 0 t20.6 0 V0 H0 Z' fill='%23000'/></svg>");
  mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='82.5' height='10' viewBox='0 0 82.5 10' preserveAspectRatio='none'><path d='M0 5 q10.3 -6.5 20.6 0 t20.6 0 t20.6 0 t20.6 0 V0 H0 Z' fill='%23000'/></svg>");
  mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='82.5' height='10' viewBox='0 0 82.5 10' preserveAspectRatio='none'><path d='M0 5 q10.3 -6.5 20.6 0 t20.6 0 t20.6 0 t20.6 0 V0 H0 Z' fill='%23000'/></svg>");
  -webkit-mask-position: left top, calc(-25.75 * var(--1px)) bottom;
  mask-position: left top, calc(-25.75 * var(--1px)) bottom;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-repeat: no-repeat, repeat-x;

  /* 2 枚のマスクの境目が端数だと 1px 透けて白い線になるので 1px 重ねる */
  -webkit-mask-size: 100% calc(100% - calc(10 * var(--1px)) + 1px), calc(82.5 * var(--1px)) calc(10 * var(--1px));
  mask-size: 100% calc(100% - calc(10 * var(--1px)) + 1px), calc(82.5 * var(--1px)) calc(10 * var(--1px));
  width: calc(610 * var(--1px));
}

.p-ceo__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * TOP: 白背景ブロック（Company + Price の共通背景・幾何メッシュ装飾）
 * カンプ実測: 背景 y=3500〜4944 / メッシュ y=3763 x=-587 w=3093.9
 * ========================================================================== */
.p-topWhite {
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

.p-topWhite__mesh {
  position: absolute;
  top: calc(263 * var(--1px));
  left: calc(-587 * var(--1px));
  -webkit-animation: deco-mesh-drift 24s ease-in-out infinite;
  animation: deco-mesh-drift 24s ease-in-out infinite;

  /* カンプには無い演出（追加提案）。メッシュは画面幅より 1174px 大きいので
     ±40px 程度動かしても端は見えない。transform のみで合成レイヤーに載せる */
  will-change: transform;
  width: calc(3094 * var(--1px));
  max-width: none;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 動きを減らす設定・タブレット以下では停止（規約: SP はアニメーションを軽くする） */

/* ==========================================================================
 * TOP: Company
 * カンプ実測: 見出し y=3620.1 / リード y=3776.8(36px lh1.39) / 本文 y=3902.2(20px lh1.75)
 *             ボタン y=4016.9 x=256.1 / 写真 y=3601.9 x=879.8 780x520
 * ========================================================================== */
.p-companyIntro {
  position: relative;
  z-index: 1;
  padding-top: calc(103 * var(--1px));
}

.p-companyIntro__inner {
  margin-inline: auto;
  display: grid;
  grid-template-columns: calc(620 * var(--1px)) calc(780 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

.p-companyIntro__lead {
  margin-top: calc(69 * var(--1px));
  color: #000;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(34 * var(--1px));
  font-weight: 800;
  line-height: 1.39;
}

.p-companyIntro__text {
  margin-top: calc(26 * var(--1px));
  font-size: max(20 * var(--1px), 14px);
  line-height: 1.75;
}

.p-companyIntro__action {
  margin-top: calc(53 * var(--1px));
}

.p-companyIntro__photo {
  -webkit-align-self: start;
  -ms-flex-item-align: start;
  align-self: start;
  margin-top: calc(-15 * var(--1px));
  width: calc(780 * var(--1px));
  height: auto;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * 共通 CTA（TOP / marunage）
 * カンプ実測: ボタン 470x160 ×2・x=451.6 / 1011.6（gap 90）・y=5901.6
 *             アイコン 電卓 58x77.3 / 封筒 82.3x57.6 / テキスト 24px / 波線 右30
 * ========================================================================== */
.p-cta {
  background-color: #fff;
  padding-top: calc(185 * var(--1px));
  padding-bottom: calc(116 * var(--1px));
}

/* marunage は step の直後に置くので上下の余白が違う */
.p-cta--mn {
  background-color: #fff;
  padding-top: calc(119 * var(--1px));
  padding-bottom: calc(108 * var(--1px));
}

.p-cta__list {
  gap: calc(90 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.p-cta__link {
  gap: calc(30 * var(--1px));
  padding-inline: calc(50 * var(--1px)) calc(110 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: -webkit-filter .3s ease, -webkit-transform .3s ease;
  transition: -webkit-filter .3s ease, -webkit-transform .3s ease;
  transition: filter .3s ease, transform .3s ease;
  transition: filter .3s ease, transform .3s ease, -webkit-filter .3s ease, -webkit-transform .3s ease;
  -webkit-box-shadow: calc(6 * var(--1px)) calc(6 * var(--1px)) calc(12 * var(--1px)) rgba(0, 0, 0, .16);
  box-shadow: calc(6 * var(--1px)) calc(6 * var(--1px)) calc(12 * var(--1px)) rgba(0, 0, 0, .16);
  border-radius: calc(6 * var(--1px));
  background: radial-gradient(ellipse 60% 75% at 6% 4%, #101f7d 0%, rgba(16, 31, 125, 0) 72%), radial-gradient(ellipse 32% 95% at 102% 52%, #101f7d 0%, rgba(16, 31, 125, 0) 78%), linear-gradient(163deg, #1a73ba 0%, #21ace1 58%, #21a9df 100%);
  width: calc(470 * var(--1px));
  max-width: 100%;
  min-height: calc(160 * var(--1px));
  color: #fff;
  font-size: calc(24 * var(--1px));
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

.p-cta__icon {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc(58 * var(--1px));
  height: auto;
}

.p-cta__icon--mail {
  width: calc(82 * var(--1px));
}

.p-cta__wave {
  position: absolute;
  top: 50%;
  right: calc(30 * var(--1px));
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: calc(70 * var(--1px));
  height: calc(9 * var(--1px));
  pointer-events: none;
  color: inherit;
}

/* ---- tab 以下 ---- */
.p-drawer {
  z-index: 40;
  margin-left: auto;
}

.p-drawer__icon {
  display: inline-block;
  position: relative;
  z-index: 41;
  cursor: pointer;
  padding: 19px 17.5px;
  padding: 1.1875rem 1.09375rem;
  font-size: 0;
  line-height: 1;
  text-align: center;
}

.p-drawer__icon::after {
  display: none;
  margin-top: 4px;
  min-width: 5em;
  color: #000;
  font-size: 8px;
  font-size: .5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  content: 'MENU';
}

.p-drawer__icon.is-opened::after {
  content: 'CLOSE';
}

.p-drawer__bars {
  display: inline-block;
  vertical-align: bottom;
  width: 25px;
}

.p-drawer__bar {
  display: block;
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
  margin-top: 5px;
  background: #000;
  width: 100%;
  height: 3px;
}

.p-drawer__bar:first-child {
  margin-top: 0;
}

.is-opened .p-drawer__bar:nth-child(2) {
  background: transparent;
}

.is-opened .p-drawer__bar:first-child {
  -webkit-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg);
  width: 100%;
}

.is-opened .p-drawer__bar:last-child {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
  width: 100%;
}

.p-drawer__bg {
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}

.p-drawer__bg.is-opened {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .25);
  width: 100vw;
  height: 100vh;
}

.p-drawer__content {
  -webkit-overflow-scrolling: touch;
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
  z-index: 40;
  -webkit-transition: -webkit-transform .5s ease 0s;
  transition: -webkit-transform .5s ease 0s;
  transition: transform .5s ease 0s;
  transition: transform .5s ease 0s, -webkit-transform .5s ease 0s;
  background: #fff;
  padding-top: var(--header-height, 60px);
  padding-bottom: var(--header-height, 60px);
  width: 100%;
  max-height: 100dvh;
  overflow: auto;
  color: #000;
  text-align: center;
}

.p-drawer__content.is-opened {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-box-shadow: 6px 0 25px rgba(0, 0, 0, .16);
  box-shadow: 6px 0 25px rgba(0, 0, 0, .16);
}

.p-drawer__content--left {
  right: auto;
  left: 0;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

.p-drawer__content--top {
  top: 0;
  bottom: auto;
  -webkit-transform: translateY(-105%);
  transform: translateY(-105%);
  width: 100%;
  max-width: 100%;
}

.p-drawer__content--cover {
  width: 100%;
  max-width: 100%;
}

.p-drawer__inner {
  padding-right: 20px;
  padding-left: 20px;
  width: 100%;
}

.p-drawer__navItem + .p-drawer__navItem {
  margin-top: .5em;
}

.p-drawer__navLink {
  display: block;
  -webkit-transition: color .3s;
  transition: color .3s;
  padding-top: .5em;
  padding-bottom: .5em;
}

/* カンプ実測: 高さ90 / ロゴ x=64.2 w=146.6 / 社名 x=247.6 / 住所 x=486.2 / ナビ x=1002 w=627 / 右 x=1685 */
.p-footer {
  background-color: #fff;
}

.p-footer__inner {
  gap: calc(24 * var(--1px));
  padding-inline: calc(64 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  /* カンプの各ブロック間隔は不均等（36 / 81 / 97 / 56）。
     space-between で余白を配分し、最低 gap だけ確保する */
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-height: calc(90 * var(--1px));
}

/* ---- ロゴ + 社名 ---- */
.p-footer__brand {
  gap: calc(37 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.p-footer__nav {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.p-footer__logo {
  display: block;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  line-height: 1;
}

.p-footer__logo img {
  display: block;
  width: calc(120 * var(--1px));
  height: auto;
}

.p-footer__company {
  font-size: calc(18 * var(--1px));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* ---- 住所・電話 ---- */
.p-footer__info {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: calc(16 * var(--1px));
  font-style: normal;
  line-height: 1.6;
}

.p-footer__infoRow {
  gap: calc(16 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.p-footer__infoLabel {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  letter-spacing: .5em;
}

.p-footer__infoFax {
  margin-left: calc(24 * var(--1px));
}

/* ---- ナビ ---- */
.p-footer__navList {
  gap: calc(10 * var(--1px)) calc(30 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.p-footer__navLink {
  -webkit-transition: color .3s;
  transition: color .3s;
  color: #000;
  font-size: max(17 * var(--1px), 13px);
  font-weight: 500;
  line-height: 1;
}

/* ---- 右端メタ ---- */
.p-footer__meta {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: calc(15 * var(--1px));
  line-height: 1.6;
  white-space: nowrap;
}

.p-footer__privacy {
  display: inline-block;
  -webkit-transition: color .3s;
  transition: color .3s;
  color: #000;
}

/* ---- tab 以下の固定値上書き（--1px 急膨張対策） ---- */

/* ==========================================================================
 * フォームページの本体（quotation / data / contact）
 * カンプ実測
 *   ブロック   quotation y496-2773 / data・contact y496-1976
 *   背景       白 → #E5EFFD の縦グラデ。到達点はどちらもブロック高の 46.3%
 *   1 枚目の上端（quotation はステップの円 / data・contact は白カード）は
 *   ブロック上端から 140
 * ========================================================================== */
.p-form {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(46.3%, #e5effd));
  background-image: linear-gradient(180deg, #fff 0%, #e5effd 46.3%);
}

.p-form__inner {
  margin-inline: auto;
  padding-top: calc(140 * var(--1px));
  padding-bottom: calc(113 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

/* quotation はステップの下にフォームが続く */
.p-qtStep + .c-form {
  margin-top: calc(82.3 * var(--1px));
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * TOP ヒーロー（FV + What we do の共通グラデーション背景）
 * カンプ実測: 背景 y=0〜2150 / #101C7D → #21A9DF
 * ========================================================================== */
.p-topHero {
  position: relative;

  /* 端数で上に body の白が 1px 出るのを防ぐ。レイアウトを動かさずに上へ 1px 塗る */
  -webkit-box-shadow: 0 -1px 0 0 #101C7D;
  box-shadow: 0 -1px 0 0 #101C7D;
  background: -webkit-gradient(linear, left top, left bottom, from(#101C7D), color-stop(97%, #21A9DF));
  background: linear-gradient(180deg, #101C7D 0%, #21A9DF 97%);
  overflow: hidden;
}

/* 幾何メッシュ装飾（カンプ実測 x=-299.2 y=1113.8 w=3827.3 h=2385.9）
   Service セクションまで横断するため、両セクションに同じ SVG を置き
   それぞれの overflow: hidden でクリップする */
.p-topHero__mesh {
  position: absolute;
  top: calc(1024 * var(--1px));
  left: calc(-299 * var(--1px));
  -webkit-animation: deco-mesh-drift 24s ease-in-out infinite;
  animation: deco-mesh-drift 24s ease-in-out infinite;

  /* 会社概要側のメッシュと同期して漂わせる（foundation/_animation.scss） */
  will-change: transform;
  width: calc(3827 * var(--1px));
  max-width: none;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* FV の船線画（カンプ実測 x=-13.2 y=256.8 w=1901.5 h=592.8） */
.p-topHero__ship {
  position: absolute;
  top: calc(167 * var(--1px));
  left: calc(-13 * var(--1px));
  width: calc(1902 * var(--1px));
  max-width: none;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ==========================================================================
 * FV
 * カンプ実測: h1 x=148.2 y=333.6 / リード x=151.9 y=661.3
 * ========================================================================== */
.p-fv {
  position: relative;
  z-index: 1;
  padding-top: calc(217 * var(--1px));
  padding-right: calc(60 * var(--1px));
  padding-bottom: calc(254 * var(--1px));
  padding-left: calc(148 * var(--1px));
}

.p-fv__title {
  color: #fff;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(90 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.54;
}

.p-fv__lead {
  margin-top: calc(65 * var(--1px));
  color: #fff;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(50 * var(--1px));
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}

/* ---- tab 以下（--1px 急膨張対策の固定値上書き） ---- */

/* カンプ実測: 高さ90 / ロゴ x=43.7 w=132.5 h=44.6 / ナビ x=803.1〜1430.1(gap36) / CTA 220x90 ×2 */
.p-header {
  background-color: #fff;
}

.p-header__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: calc(44 * var(--1px));
  min-height: calc(90 * var(--1px));
}

.p-header__logo {
  margin-right: auto;
  line-height: 1;
}

.p-header__logo a {
  display: block;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.p-header__logo img {
  display: block;
  width: calc(115 * var(--1px));
  height: auto;
}

/* ---- グローバルナビ ---- */
.p-header__nav {
  margin-right: calc(50 * var(--1px));
}

.p-header__navList {
  gap: calc(10 * var(--1px)) calc(36 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.p-header__navLink {
  display: block;
  -webkit-transition: color .3s;
  transition: color .3s;
  color: #000;
  font-size: max(17 * var(--1px), 13px);
  font-weight: 500;
  line-height: 1;
}

/* ---- 右端CTA（画面端まで） ---- */
.p-header__cta {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

.p-header__ctaLink {
  padding-inline: calc(10 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  width: calc(220 * var(--1px));
  min-height: calc(90 * var(--1px));
  font-size: calc(18 * var(--1px));
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.p-header__ctaLink--data {
  background-color: #FFF15A;
  color: #000;
}

.p-header__ctaLink--contact {
  background-color: #122B88;
  color: #fff;
}

/* ---- ドロワー（tab 以下のみ表示） ---- */
.p-header__drawer {
  display: none;
}

/* ---- SP ---- */

/* ==========================================================================
 * company: History
 * カンプ実測: 帯 y=2531.8〜3856.8（上端が波形・波長 160 / 振幅 10）
 *   背景はグラデーションメッシュ。radial 3 枚 + linear で近似
 *   見出し(ja) 2652.6 /(en) 2678.4
 *   PHASE 枠 x=266〜355 y=2787.3〜2876.2（線が四隅で 5〜6px はみ出す）
 *   行ピッチ 172.0 / 年 x=400.6 / 創業・本文 x=716.8
 *   船の線画 x=833.6〜1920 y=2787.4〜3730.6（素材未支給）
 * ========================================================================== */
.p-history {
  position: relative;

  /* 上端の波形（カンプ実測 波長 160・山が x=80 の位置） */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='20' viewBox='0 0 160 20'><path d='M0 20 C26.7 20 53.3 0 80 0 C106.7 0 133.3 20 160 20 H0 Z' fill='%23000'/></svg>"), -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='20' viewBox='0 0 160 20'><path d='M0 20 C26.7 20 53.3 0 80 0 C106.7 0 133.3 20 160 20 H0 Z' fill='%23000'/></svg>"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='20' viewBox='0 0 160 20'><path d='M0 20 C26.7 20 53.3 0 80 0 C106.7 0 133.3 20 160 20 H0 Z' fill='%23000'/></svg>"), -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='20' viewBox='0 0 160 20'><path d='M0 20 C26.7 20 53.3 0 80 0 C106.7 0 133.3 20 160 20 H0 Z' fill='%23000'/></svg>"), linear-gradient(#000, #000);
  -webkit-mask-position: left top, left calc(calc(20 * var(--1px)) - 1px);
  mask-position: left top, left calc(calc(20 * var(--1px)) - 1px);
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;

  /* 2 枚のマスクの境目が端数だと 1px 透けて白い線になるので 1px 重ねる */
  -webkit-mask-size: calc(160 * var(--1px)) calc(20 * var(--1px)), 100% calc(100% - calc(20 * var(--1px)) + 1px);
  mask-size: calc(160 * var(--1px)) calc(20 * var(--1px)), 100% calc(100% - calc(20 * var(--1px)) + 1px);
  margin-top: calc(-25.6 * var(--1px));
  background-image: radial-gradient(ellipse 45% 30% at 0% 100%, #23b7e9 0%, rgba(35, 183, 233, 0) 70%), radial-gradient(ellipse 75% 55% at 100% 100%, #111f7f 0%, rgba(17, 31, 127, 0) 75%), radial-gradient(ellipse 30% 22% at 0% 58%, #122b88 0%, rgba(18, 43, 136, 0) 80%), -webkit-gradient(linear, left top, left bottom, from(#21abe1), color-stop(8%, #21a7de), color-stop(28%, #1f9ed7), color-stop(43%, #1d87c7), color-stop(58%, #1b75bb), color-stop(73%, #1a72b9), color-stop(88%, #1a77bc), to(#1b79bd));
  background-image: radial-gradient(ellipse 45% 30% at 0% 100%, #23b7e9 0%, rgba(35, 183, 233, 0) 70%), radial-gradient(ellipse 75% 55% at 100% 100%, #111f7f 0%, rgba(17, 31, 127, 0) 75%), radial-gradient(ellipse 30% 22% at 0% 58%, #122b88 0%, rgba(18, 43, 136, 0) 80%), linear-gradient(180deg, #21abe1 0%, #21a7de 8%, #1f9ed7 28%, #1d87c7 43%, #1b75bb 58%, #1a72b9 73%, #1a77bc 88%, #1b79bd 100%);
  padding-top: calc(120.5 * var(--1px));
  padding-bottom: calc(43.1 * var(--1px));
  overflow: hidden;
  color: #fff;
}

/* 船の線画（2026-09-12 に Illustrator から書き出して差し替え済み） */
.p-history__ship {
  position: absolute;
  top: calc(255.6 * var(--1px));
  left: calc(833.6 * var(--1px));
  background-image: url('../img/company/history-ship-lineart.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(1234.3 * var(--1px));
  height: calc(943.2 * var(--1px));
  pointer-events: none;
}

.p-history__inner {
  margin-inline: auto;
  position: relative;
  z-index: 1;
  max-width: calc(1400 * var(--1px));
}

.p-history__list {
  margin-top: calc(61.1 * var(--1px));
}

.p-history__item {
  position: relative;
  height: calc(172 * var(--1px));
}

/* 行をつなぐ縦線（最後の行の下には出さない） */
.p-history__item::after {
  position: absolute;
  top: calc(99 * var(--1px));
  left: calc(50.5 * var(--1px));
  background-color: currentColor;
  width: 1px;
  height: calc(73.5 * var(--1px));
  content: '';
}

.p-history__item:last-child::after {
  content: none;
}

/* --- PHASE 枠 --- */
.p-history__phase {
  position: absolute;
  top: calc(5.6 * var(--1px));
  left: calc(6 * var(--1px));
  width: calc(89 * var(--1px));
  height: calc(88.9 * var(--1px));
  text-align: center;
}

/* 縦線 2 本（上下に 5.6 / 5.5 はみ出す） */
.p-history__phase::before {
  position: absolute;
  top: calc(-5.6 * var(--1px));
  right: 0;
  bottom: calc(-5.5 * var(--1px));
  left: 0;
  border-right: 1px solid currentColor;
  border-left: 1px solid currentColor;
  content: '';
}

/* 横線 2 本（左右に 5 / 6 はみ出す） */
.p-history__phase::after {
  position: absolute;
  top: 0;
  right: calc(-6 * var(--1px));
  bottom: 0;
  left: calc(-5 * var(--1px));
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: '';
}

.p-history__phaseLabel {
  display: block;
  padding-top: calc(13.9 * var(--1px));
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(17 * var(--1px));
  letter-spacing: .08em;
  line-height: 1;
  text-indent: .08em;
}

.p-history__phaseNum {
  display: block;
  padding-top: calc(2 * var(--1px));
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(48 * var(--1px));
  line-height: 1;
}

/* --- 年 --- */
.p-history__year {
  position: absolute;
  top: calc(27.4 * var(--1px));
  left: calc(140.6 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(49.6 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;

  /* カンプの「2000」と「年」の間は 12.7。このフォントの空白は 24.8 あるので詰める */
  word-spacing: calc(-12.1 * var(--1px));
}

/* 数字はカンプのほうが字送りが広い（欧文フォント未確定のため字間で合わせている） */

/* 字送りはフォント本来の送り（36.3）がカンプと一致するので letter-spacing は当てない */

/* --- 見出し + 本文 --- */
.p-history__body {
  position: absolute;
  top: calc(17.8 * var(--1px));
  right: calc(-16 * var(--1px));
  left: calc(456.8 * var(--1px));
}

.p-history__itemTitle {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(30 * var(--1px));
  font-weight: 800;
  line-height: 1;
}

.p-history__text {
  margin-top: calc(20.2 * var(--1px));
  font-size: calc(20 * var(--1px));
  line-height: 1;
  overflow-wrap: anywhere;
}

/* --- 最終行（カンプは黄色） --- */
.p-history__item--current .p-history__phase,
.p-history__item--current .p-history__year {
  color: #FFF15A;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * 下層ページ FV
 * カンプ実測（company）: ブロック ページ上端 0〜495.6（ヘッダー 90 が上に重なる）
 *   背景 カンプの青い波はグラデーションメッシュ。書き出せた SVG は白い線だけ
 *        なので、カンプから起こした 1x 画像を背景に敷いている（要 2x 書き出し）
 *   英字 インク上端 240.2 / キャップ高 72（中央揃え・紺）
 *   日本語 インク上端 344.0（中央揃え・紺 20px 相当ではなく 30px）
 * ========================================================================== */
.p-lowerFv {
  background-color: #fff;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: calc(405.6 * var(--1px));
  overflow: hidden;
}

/* services はメッシュの波がページ下方まで伸びるため、ブロックを 610 まで取る
   （見出しの位置は company と同じ。背景画像だけ縦長） */
.p-lowerFv--services {
  height: calc(520 * var(--1px));
}

/* price は説明文が入るぶん見出しが 29px 上。ブロックは 630 まで */
.p-lowerFv--price {
  position: relative;
  height: calc(540 * var(--1px));
}

/* タブを含まない波柄を使い、本文の背景色へつなぐ */
.p-lowerFv--price::after {
  inset: 80% 0 0;
  position: absolute;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#f0f9fc));
  background-image: linear-gradient(180deg, transparent, #f0f9fc);
  pointer-events: none;
  content: '';
}

.p-lowerFv__inner {
  padding-top: calc(140.1 * var(--1px));
  color: #122B88;
  text-align: center;
}

.p-lowerFv__title {
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(90 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.p-lowerFv__subTitle {
  margin-top: calc(20.8 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(30 * var(--1px));
  font-weight: 800;
  line-height: 1;
}

/* price のみ: 見出し下の説明文（カンプ実測 1 行目インク上端 381 / 行送り 35） */
.p-lowerFv--price .p-lowerFv__inner {
  padding-top: calc(110.4 * var(--1px));
}

.p-lowerFv--price .p-lowerFv__subTitle {
  margin-top: calc(21.6 * var(--1px));
}

.p-lowerFv__lead {
  margin-top: calc(30.9 * var(--1px));
  font-size: calc(20 * var(--1px));
  font-weight: 700;
  line-height: 1.75;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * marunage: Marunage を導入すると（BEFORE / AFTER + 効果カード 2 枚）
 * カンプ実測（ページ座標）
 *   ブロック   y=2465〜4637（背景 #E7EAF3）
 *   Marunage   インク y2597-2673 / x722-1196（FV と同寸）+ 波線 y2684-2696
 *   を導入すると インク y2748-2788 / x827-1087
 *   キャッチ   1 行目 y2953-2995 / 2 行目 y3015-3057（字送り 47.5）
 *              2 行目の「価値を生み出すオフィス空間」に黄色マーカー（y3044-3060）
 *   説明文     y3092-3109 / y3121-3139（行送り 29）
 *   写真       600×600（左 x260 / 右 x1060・上端 3285）
 *   バッジ     230φ（写真の角から 60 外へ・上へ 59）
 *   矢印       78×51 / x921 / y3560
 *   白カード   1400×270（y3967 と y4277・間隔 41）
 * ========================================================================== */
.p-mnBenefit {

  /* 端数で上に body の白が 1px 出るのを防ぐ。レイアウトを動かさずに上へ 1px 塗る */
  -webkit-box-shadow: 0 -1px 0 0 #e7eaf3;
  box-shadow: 0 -1px 0 0 #e7eaf3;
  background-color: #e7eaf3;
}

.p-mnBenefit__inner {
  margin-inline: auto;
  padding-top: calc(119.9 * var(--1px));
  padding-bottom: calc(89.1 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

/* --- 見出し --- */
.p-mnBenefit__brand {
  color: #122B88;
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(90 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.p-mnBenefit__sub {
  margin-top: calc(46 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(45.9 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.p-mnBenefit__catch {
  margin-top: calc(152.4 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(48.1 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.288981289;
  text-align: center;
}

.p-mnBenefit__lead {
  margin-top: calc(20.4 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(20 * var(--1px));
  letter-spacing: -.03em;
  line-height: 1.45;
  text-align: center;
}

/* --- BEFORE / AFTER --- */
.p-mnBenefit__compare {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: calc(61 * var(--1px));
  -moz-column-gap: calc(61 * var(--1px));
  column-gap: calc(61 * var(--1px));
  margin-top: calc(140.6 * var(--1px));
}

.p-mnBenefit__figure {
  position: relative;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc(600 * var(--1px));
}

.p-mnBenefit__photo {
  vertical-align: top;
  width: 100%;
  height: auto;
}

.p-mnBenefit__arrow {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc(78 * var(--1px));
  height: auto;
}

/* --- BEFORE / AFTER の円バッジ --- */
.p-mnBadge {
  row-gap: calc(14 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: calc(-59 * var(--1px));
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  width: calc(230 * var(--1px));
  height: calc(230 * var(--1px));
  line-height: 1;
  text-align: center;
}

.p-mnBadge--before {
  left: calc(-60 * var(--1px));
  background-color: #ccc;
  color: #000;
}

.p-mnBadge--after {
  right: calc(-60 * var(--1px));
  background-color: #122B88;
  color: #fff;
}

.p-mnBadge__en {
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(30 * var(--1px));
  font-weight: 800;
  letter-spacing: .02em;
}

/* バッジ内の波線（BEFORE は黒・AFTER は白） */
.p-mnBadge__en::after {
  display: block;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='5' viewBox='0 0 640 5' preserveAspectRatio='none' fill='none'><path d='M0 2.5q8 -3.2 16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0' stroke='black' stroke-width='1.8'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='5' viewBox='0 0 640 5' preserveAspectRatio='none' fill='none'><path d='M0 2.5q8 -3.2 16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0t16 0' stroke='black' stroke-width='1.8'/></svg>");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: calc(640 * var(--1px)) calc(5 * var(--1px));
  mask-size: calc(640 * var(--1px)) calc(5 * var(--1px));
  margin-top: calc(15 * var(--1px));
  background-color: currentColor;
  width: calc(158 * var(--1px));
  height: calc(5 * var(--1px));
  content: '';
}

.p-mnBadge__ja {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(20 * var(--1px));
  font-weight: 700;
}

.p-mnBadge--after .p-mnBadge__ja {
  color: #FFF15A;
}

/* --- 効果カード --- */
.p-mnBenefit__cards {
  row-gap: calc(41 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: calc(82 * var(--1px));
}

.p-mnBenefit__card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: calc(90 * var(--1px));
  -moz-column-gap: calc(90 * var(--1px));
  column-gap: calc(90 * var(--1px));
  border-radius: calc(12 * var(--1px));
  background-color: #fff;
  padding: calc(47.2 * var(--1px)) calc(60 * var(--1px)) calc(20 * var(--1px));
  min-height: calc(270 * var(--1px));
}

.p-mnBenefit__cardIconBox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: calc(153 * var(--1px));
}

.p-mnBenefit__cardIcon {
  width: calc(var(--mn-icon-w) * var(--1px));
  max-width: none;
  height: auto;
}

.p-mnBenefit__cardBody {
  min-width: 0;
}

.p-mnBenefit__cardTitle {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(30.6 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.p-mnBenefit__cardText {
  margin-top: calc(28 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(17 * var(--1px));
  letter-spacing: 0;
  line-height: 2;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * marunage: FV
 * カンプ実測（ページ座標）
 *   ブロック   y=90〜1312（高さ 1222・ヘッダーの下から）
 *   Digital    インク y201-280 / x257-562
 *   Archiving  インク y301-380 / x256-727（行送り 100）
 *   Services   インク y401-473 / x259-666
 *   Marunage   インク y398-475 / x721-1197（紺）+ 波線 y485-497
 *   リード     インク y545-590 / x602-1319（黒）
 *   注記       インク y612-631 / x604-1308（黒）
 *   円写真     x769-1151 / y828-1210（383φ・水色の枠 7px）
 *   キャッチ   インク y1263-1300 / x731-1181（「紙図面」は水色）
 * 和文（リード・注記・キャッチ）はカンプの字形どおり Noto Sans JP Bold。
 *   欧文の見出しだけ SicPrintempsPetit E。
 * 背景は 2 層。下は紙テクスチャ（.p-mnPaper が problem まで通しで敷く）、
 * 上が青いグラデーション（.p-mnFv::before）で、下端がフェードして紙に溶ける。
 * 青のレイヤーはカンプの y90〜974 ぶん（FV の 72.3%）を切り出したもので、
 * カンプ実測 y866（レイヤー内 87.8%）まで不透明 → y974（100%）で完全に透明。
 * ========================================================================== */
.p-mnFv {
  position: relative;
  padding-bottom: calc(11 * var(--1px));
  min-height: calc(1222 * var(--1px));
  overflow: hidden;
}

/* 青いグラデーション + 船の線画 + 十字装飾。下端は紙テクスチャへフェードさせる */
.p-mnFv::before {
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(87.8%, #000), to(transparent));
  -webkit-mask-image: linear-gradient(to bottom, #000 87.8%, transparent 100%);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(87.8%, #000), to(transparent));
  mask-image: linear-gradient(to bottom, #000 87.8%, transparent 100%);
  background-image: url('../img/marunage/fv-bg.webp');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 72.3%;
  content: '';
}

.p-mnFv__inner {
  margin-inline: auto;
  position: relative;
  z-index: 1;
  max-width: calc(1400 * var(--1px));
}

/* --- 見出し --- */
.p-mnFv__title {
  margin-left: calc(-5.7 * var(--1px));
  padding-top: calc(50.4 * var(--1px));
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(90 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1111111111;
}

.p-mnFv__titleEn {
  display: block;
  color: #d0d5e7;
}

/* Services と Marunage は同じ行に並ぶ */
.p-mnFv__titleRow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-column-gap: calc(48.6 * var(--1px));
  -moz-column-gap: calc(48.6 * var(--1px));
  column-gap: calc(48.6 * var(--1px));
}

.p-mnFv__brand {
  position: relative;
  top: calc(-5.3 * var(--1px));
  color: #122B88;
}

/* --- リード --- */
.p-mnFv__lead {
  margin-top: calc(32.4 * var(--1px));
  margin-left: calc(342 * var(--1px));
  color: #000;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(48.1 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.p-mnFv__note {
  margin-top: calc(21.6 * var(--1px));
  margin-left: calc(344 * var(--1px));
  color: #000;
  font-size: calc(19.7 * var(--1px));
  font-weight: 700;
  letter-spacing: .065em;
  line-height: 1;
}

/* --- 「（丸めた図面）で保存し続けると」 --- */
.p-mnFv__catch {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: calc(197 * var(--1px));
}

.p-mnFv__photo {
  -webkit-box-shadow: 0 0 0 calc(7 * var(--1px)) #21A9DF;
  box-shadow: 0 0 0 calc(7 * var(--1px)) #21A9DF;
  border-radius: 50%;
  width: calc(383 * var(--1px));
  height: auto;
}

.p-mnFv__catchText {
  margin-top: calc(48.8 * var(--1px));

  /* 「紙図面」が付いたことで、カンプでは写真とほぼ同じ中心に揃う */
  color: #000;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(42 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

/* 「紙図面」だけ水色 */
.p-mnFv__catchAccent {
  color: #21A9DF;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * marunage: 紙テクスチャの背景（FV 〜 problem を通しで覆う）
 * カンプでは青いグラデーションが y866〜974 で紙に溶け、そのまま problem の
 * 下端（y2465）まで紙が続く。セクションをまたぐので親側に敷いている。
 * ========================================================================== */
.p-mnPaper {
  background-color: #fff;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ==========================================================================
 * marunage: 予算分割プラン（PLAN01 / PLAN02）
 * カンプ実測（ページ座標）
 *   リード     インク y8953-8991 / x461-1453
 *   見出し     y9025-9085 / x712-1207（黄色マーカー）
 *   カード     本体 681×1163（x259 / x979・y9168）・角丸 10
 *              枠は上辺だけ 4px（01 水色 / 02 紺）。左右と下は罫線なし
 *              影は紺 12% を右下へ 8 ずらしてぼかす（外へ約 20 で消える）
 *   カード内   PLAN y9220 / 番号 y9250-9304 / プラン名 y9332-9368
 *              ※画像枠（308×211）はクライアント指定で不採用。
 *                プラン名は番号の横に並べる
 *              キャッチ y9467・9512（行送り 45）
 *              料金ボックス 584×103（x308・y9593）
 *              サービス内容 y9747 / チェック 8 項目 y9788 から（ピッチ 41）
 *              区切り線 y10139 / こんな方に y10176 / 本文 y10225・10250
 * ========================================================================== */
.p-mnPlan {
  background-color: #fff;
}

.p-mnPlan__inner {
  margin-inline: auto;
  padding-top: calc(112 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

.p-mnPlan__lead {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(38.8 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.p-mnPlan__title {
  margin-top: calc(34 * var(--1px));
  color: #122B88;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(63.6 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

/* --- カード --- */
.p-mnPlan__cards {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: calc(40 * var(--1px));
  -moz-column-gap: calc(40 * var(--1px));
  column-gap: calc(40 * var(--1px));
  margin-top: calc(83 * var(--1px));
}

.p-mnPlan__card {
  -webkit-box-shadow: calc(8 * var(--1px)) calc(8 * var(--1px)) calc(16 * var(--1px)) rgba(18, 43, 136, .14);
  box-shadow: calc(8 * var(--1px)) calc(8 * var(--1px)) calc(16 * var(--1px)) rgba(18, 43, 136, .14);
  border-top: calc(4 * var(--1px)) solid;
  border-radius: calc(10 * var(--1px));
  padding: calc(48 * var(--1px)) calc(51 * var(--1px)) calc(62.3 * var(--1px));
  width: calc(681 * var(--1px));
}

.p-mnPlan__card--01 {
  border-color: #21A9DF;
}

.p-mnPlan__card--02 {
  border-color: #122B88;
}

/* --- 見出しブロック --- */

/* プラン名は番号の横に並べる（クライアント指定） */
.p-mnPlan__labelRow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-column-gap: calc(24 * var(--1px));
  -moz-column-gap: calc(24 * var(--1px));
  column-gap: calc(24 * var(--1px));
}

.p-mnPlan__labelEn {
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(20.7 * var(--1px));
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
}

.p-mnPlan__labelNum {
  margin-top: calc(-5.3 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(67 * var(--1px));
  font-weight: 400;
  letter-spacing: -.1em;
  line-height: 1;
}

.p-mnPlan__card--01 .p-mnPlan__labelNum {
  color: #21A9DF;
}

.p-mnPlan__card--02 .p-mnPlan__labelNum {
  color: #122B88;
}

.p-mnPlan__name {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(39.6 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

/* --- キャッチ --- */
.p-mnPlan__catch {
  margin-top: calc(64 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(30.1 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4950166113;
}

/* --- 料金ボックス --- */
.p-mnPlan__price {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: calc(36 * var(--1px));
  -moz-column-gap: calc(36 * var(--1px));
  column-gap: calc(36 * var(--1px));
  margin-top: calc(45.4 * var(--1px));
  border: calc(1 * var(--1px)) solid;
  border-radius: calc(8 * var(--1px));
  padding: calc(20 * var(--1px)) calc(24 * var(--1px));
}

.p-mnPlan__card--01 .p-mnPlan__price {
  border-color: #21A9DF;
  background-color: #dbf1fa;
}

.p-mnPlan__card--02 .p-mnPlan__price {
  border-color: #122B88;
  background-color: #d9ddec;
}

.p-mnPlan__priceItem {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-column-gap: calc(20 * var(--1px));
  -moz-column-gap: calc(20 * var(--1px));
  column-gap: calc(20 * var(--1px));
  line-height: 1;
  white-space: nowrap;
}

.p-mnPlan__priceItem + .p-mnPlan__priceItem {
  border-left: calc(1 * var(--1px)) solid #b9bcc9;
  padding-left: calc(36 * var(--1px));
}

/* 月額の代わりに文言を出す枠（一括プラン）。金額と同じ高さに収める */
.p-mnPlan__priceItem--note {
  display: block;
  font-size: calc(18 * var(--1px));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

.p-mnPlan__priceLabel {
  font-size: calc(18 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
}

/* カンプ実測 数字のインク 0=26x33 / advance 29（44px の SicPrintempsPetit と一致）
   末尾は全角の「〜」ではなく欧文のチルダ（インク 22x9・字面の中ほど） */
.p-mnPlan__priceValue {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(44 * var(--1px));
  font-weight: 400;
  letter-spacing: 0;
}

/* ¥ はカンプで数字の半分ほど（インク 14x16） */
.p-mnPlan__priceMark {
  vertical-align: calc(4 * var(--1px));
  margin-right: calc(4 * var(--1px));
  font-size: calc(21 * var(--1px));
}

/* カンプのチルダは数字の字面の上下中央。フォントの位置は上寄りなので下げる */
.p-mnPlan__priceTilde {
  display: inline-block;
  -webkit-transform: translateY(.44em);
  transform: translateY(.44em);
  margin-left: .12em;
}

/* --- サービス内容 --- */
.p-mnPlan__subTitle {
  margin-top: calc(66.7 * var(--1px));
  color: #000;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(20.1 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.p-mnPlan__services {
  margin-top: calc(23 * var(--1px));
}

.p-mnPlan__service {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: calc(12 * var(--1px));
  -moz-column-gap: calc(12 * var(--1px));
  column-gap: calc(12 * var(--1px));
  min-height: calc(41 * var(--1px));
  font-size: calc(18 * var(--1px));
  letter-spacing: 0;
  line-height: 1.4;
}

/* カンプ実測 外形 28（枠 2px）・円の地は料金ボックスと同じ色
   チェックの右腕は円からはみ出して上へ抜ける（手書き風の意匠） */
.p-mnPlan__service::before {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(28 * var(--1px));
  height: calc(28 * var(--1px));
  content: '';
}

/* 円の地（$mn-plan-price-01）と線（$color-secondary） */
.p-mnPlan__card--01 .p-mnPlan__service::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'><circle cx='13.5' cy='14' r='12.6' fill='%23dbf1fa' stroke='%2321a9df' stroke-width='2'/><path d='M9 12.5L13.5 20L25 3' stroke='%2321a9df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* 円の地（$mn-plan-price-02）と線（$color-main） */
.p-mnPlan__card--02 .p-mnPlan__service::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'><circle cx='13.5' cy='14' r='12.6' fill='%23d9ddec' stroke='%23122b88' stroke-width='2'/><path d='M9 12.5L13.5 20L25 3' stroke='%23122b88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* --- こんな方におすすめ --- */
.p-mnPlan__subTitle--recommend {
  margin-top: calc(22.8 * var(--1px));
  border-top: calc(3 * var(--1px)) solid;
  padding-top: calc(31.9 * var(--1px));
}

.p-mnPlan__card--01 .p-mnPlan__subTitle--recommend {
  border-top-color: #21A9DF;
}

.p-mnPlan__card--02 .p-mnPlan__subTitle--recommend {
  border-top-color: #122B88;
}

.p-mnPlan__recommend {
  margin-top: calc(25.2 * var(--1px));
  font-size: calc(17.1 * var(--1px));
  letter-spacing: 0;
  line-height: 1.4619883041;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * marunage: 紙で保存し続けるリスク（2 列 × 3 行）
 * カンプ実測（ページ座標）
 *   ブロック   y=1312〜2465（親の紙テクスチャ）
 *   アイコン   左列 x276〜/ 右列 x1006〜（絵柄ごとに実寸が違う。枠は 130 幅）
 *   テキスト   左列 x446 / 右列 x1176（列ピッチ 730）
 *   見出し     インク高 22（24px 太字）・下に波線（幅 325・波の上端は +12）
 *   本文       20px / 行送り 30.3
 *   行の上端   1424 / 1669 / 1885（行間 83）
 *   まとめ     インク y2162-2201 / x583-1332（42px 太字）
 *   V 字矢印   y2252-2347 / x901-1018（118×96）
 * ========================================================================== */
.p-mnProblem {

  /* 背景は親（.p-mnPaper）の紙テクスチャ */
}

.p-mnProblem__inner {
  margin-inline: auto;
  padding-top: calc(109.9 * var(--1px));
  padding-bottom: calc(118 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

.p-mnProblem__list {
  row-gap: calc(73 * var(--1px));
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: start;
  -webkit-align-items: start;
  -ms-flex-align: start;
  align-items: start;

  /* 列ピッチ 730 はカンプどおり。カンプの本文は最大 487 あるので、
     列幅 670 −（アイコン枠 127 + 間隔 44）= 499 を確保して折り返させない。
     そのぶんカンプより 16px だけ内側から始まる */
  -webkit-column-gap: calc(60 * var(--1px));
  -moz-column-gap: calc(60 * var(--1px));
  column-gap: calc(60 * var(--1px));
}

.p-mnProblem__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: calc(44 * var(--1px));
  -moz-column-gap: calc(44 * var(--1px));
  column-gap: calc(44 * var(--1px));
  min-width: 0;
}

/* アイコンの枠は 127 固定（テキストの左端が列内で揃う）。
   絵柄は実寸が違うので、カンプの幅を PHP から --mn-icon-w で渡して枠の中央に置く */
.p-mnProblem__iconBox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: calc(127 * var(--1px));
}

.p-mnProblem__icon {
  width: calc(var(--mn-icon-w) * var(--1px));
  max-width: none;
  height: auto;
}

.p-mnProblem__body {
  min-width: 0;
}

.p-mnProblem__itemTitle {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(24 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.p-mnProblem__text {
  margin-top: calc(13 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(20 * var(--1px));
  letter-spacing: -.03em;
  line-height: 1.515;
}

/* --- まとめ + 矢印 --- */
.p-mnProblem__summary {
  margin-top: calc(116.2 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(42 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.p-mnProblem__arrow {
  margin-inline: auto;
  display: block;
  margin-top: calc(51 * var(--1px));
  width: calc(118 * var(--1px));
  height: auto;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * marunage: 提供サービスの具体的内容
 * カンプ実測（ページ座標）
 *   ブロック   y=7454〜8835（上端が波形・背景は作業写真）
 *   見出し     インク y7700-7742 / x673-1246 + 白い波線 y7754-7764
 *   白カード   x260-1659（1400）/ y7824-8712（889）
 *   01/02/03   インク上端 7877 / 8007 / 8137（行ピッチ 130）
 *   区切り線   y7953 / 8083（x300-1619）
 *   小カード   写真 347×216（x340 / 787 / 1233・y8204）
 *              見出し 2 行 y8453・8489（行送り 36）/ 本文 y8547 から（行送り 25.4）
 * 上端の波形は背景画像に含まれている（CSS では作らない）。
 * ========================================================================== */

/* 2026-09-11 クライアント指定で中身を 4 項目（見出し + 本文）に差し替えたため、
   カンプにあった写真つき小カード 3 枚のぶんカードが縮んでいる。
   背景画像（3840x2764）は「カードで隠れる範囲」（y740〜2520）をぼかして
   軽量化してあり、本物の写真はどこにも残っていない。
   そのため背景を上そろえ（cover / center top）にしたままカードの下に
   余白を出すと、ぼけた帯がそのまま露出してしまう。
   画像の最下部 y2520〜2764 はぼかしのない写真なので、そこだけを
   ::after で下そろえに重ね、カンプどおりカードの下に写真を見せている。 */
.p-mnService {
  position: relative;

  /* 端数で上に body の白が 1px 出るのを防ぐ。レイアウトを動かさずに上へ 1px 塗る */
  -webkit-box-shadow: 0 -1px 0 0 #21A9DF;
  box-shadow: 0 -1px 0 0 #21A9DF;
  background-color: #21A9DF;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 背景画像の下端 664px ぶん（y2100〜2764）を下そろえで重ねる。
   上 63%（＝ぼかし帯の残り y2100〜2520）はマスクで消し、
   ぼかしのない y2520〜2764 だけが出るようにする */
.p-mnService::after {
  aspect-ratio: 3840/664;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(63%, #000));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 63%);
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(63%, #000));
  mask-image: linear-gradient(to bottom, transparent 0%, #000 63%);
  background-image: inherit;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: '';
}

.p-mnService__inner {
  margin-inline: auto;
  position: relative;
  z-index: 1;
  padding-top: calc(242.1 * var(--1px));
  padding-bottom: 6.3541666667%;
  max-width: calc(1400 * var(--1px));
}

.p-mnService__title {
  color: #fff;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(47.8 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

/* --- 白いカード --- */
.p-mnService__card {
  margin-top: calc(57.1 * var(--1px));
  background-color: #fff;

  /* 下だけカンプの 28.6 だと、項目間（本文の下 50.7）より詰まって
     04 が切れて見えるので、上と同じ 51.6 にそろえる */
  padding: calc(51.6 * var(--1px)) calc(40 * var(--1px));
}

.p-mnService__step {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-column-gap: calc(21.8 * var(--1px));
  -moz-column-gap: calc(21.8 * var(--1px));
  column-gap: calc(21.8 * var(--1px));
  border-bottom: calc(1 * var(--1px)) solid #ccc;
  padding-bottom: calc(50.7 * var(--1px));
}

.p-mnService__step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.p-mnService__step + .p-mnService__step {
  padding-top: calc(48.3 * var(--1px));
}

.p-mnService__stepTitle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-column-gap: calc(12 * var(--1px));
  -moz-column-gap: calc(12 * var(--1px));
  column-gap: calc(12 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(30.6 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.p-mnService__num {
  color: #122B88;
  font-weight: 500;
}

.p-mnService__mark {
  color: #21A9DF;
}

/* 本文は見出しの右に続けて置く（カンプの 03 の組み方にそろえる） */
.p-mnService__stepText {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
  font-size: calc(17.6 * var(--1px));
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4431818182;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * marunage: 画面右端に追従する CTA（このページ専用）
 * カンプ実測: x=1700〜1920（幅 220）・y=985〜1255（90 × 3 段）
 *   データ入稿   黄（文字は黒）
 *   お見積もり   水色（文字は白）
 *   お問い合わせ 紺（文字は白）
 * ========================================================================== */
.p-mnSideCta {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  top: 50%;
  right: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 30;
  width: calc(220 * var(--1px));
}

.p-mnSideCta__link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: -webkit-filter .3s ease;
  transition: -webkit-filter .3s ease;
  transition: filter .3s ease;
  transition: filter .3s ease, -webkit-filter .3s ease;
  padding: calc(10 * var(--1px)) calc(16 * var(--1px));
  min-height: calc(90 * var(--1px));
  font-size: calc(18 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
}

.p-mnSideCta__link--data {
  background-color: #FFF15A;
  color: #000;
}

.p-mnSideCta__link--quotation {
  background-color: #21A9DF;
  color: #fff;
}

.p-mnSideCta__link--contact {
  background-color: #122B88;
  color: #fff;
}

/* ---- tab 以下 ---- */

/* 画面が狭いと本文に被るので、下端に横並びで固定する */

/* ==========================================================================
 * marunage: 導入までのステップ（6 項目）
 * カンプ実測（ページ座標）
 *   見出し     インク y10453-10496 / x745-1174 + 波線 y10507-10519
 *   ステップ   全体 x259-1660 / y10593-11041（列ピッチ 240）
 *   番号       x270-309（インク上端 10593）
 *   円         202φ（外枠 2px 紺・内側 177φ が薄い青紫）・y10635-10836
 *              ※内側の円の外周にも紺の線を回すのはクライアント指定（カンプにはない）
 *   見出し     インク y10869-10889
 *   水色の短線 y10911（34×2）
 *   本文       y10936 から（行送り 25）
 * ========================================================================== */
.p-mnStep {
  background-color: #fff;
}

.p-mnStep__inner {
  margin-inline: auto;
  padding-top: calc(118 * var(--1px));
  padding-bottom: calc(10.7 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

.p-mnStep__title {
  color: #122B88;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(48.1 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.p-mnStep__list {
  margin-inline: calc(-20 * var(--1px));

  /* カンプの区切り線は x479.5 / 719.5 …＝ 240 ピッチ。項目の幅は円（202）ではなく
     この 240 で、6 列ぶん 1440 はコンテンツ幅 1400 を左右 20 ずつはみ出す */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: calc(63.4 * var(--1px));
  width: calc(1440 * var(--1px));
}

.p-mnStep__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 0;
  text-align: center;
}

/* 円どうしをつなぐ横線（最後の項目には出さない） */
.p-mnStep__item:not(:last-child)::before {
  position: absolute;
  top: calc(143 * var(--1px));
  left: 50%;
  background-color: #122B88;
  width: 100%;
  height: calc(1 * var(--1px));
  content: '';
}

/* 項目を区切る縦線 */
.p-mnStep__item:not(:last-child)::after {
  position: absolute;
  top: calc(270 * var(--1px));
  right: 0;
  background-color: #122B88;
  width: calc(1 * var(--1px));
  height: calc(178 * var(--1px));
  content: '';
}

.p-mnStep__num {
  position: relative;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  z-index: 1;
  margin-left: calc(30.5 * var(--1px));
  color: #122B88;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(45.3 * var(--1px));
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: 1;
}

/* --- 円 --- */
.p-mnStep__circle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 1;
  margin-top: calc(4.5 * var(--1px));

  /* 外枠と内側の塗りのあいだの白い隙間 + 内側の円をふちどる紺の線
     （合計 10.5 は変えていないので、内側の円は 177φ のまま） */
  -webkit-box-shadow: inset 0 0 0 calc(8.5 * var(--1px)) #fff, inset 0 0 0 calc(10.5 * var(--1px)) #122B88;
  box-shadow: inset 0 0 0 calc(8.5 * var(--1px)) #fff, inset 0 0 0 calc(10.5 * var(--1px)) #122B88;
  border: calc(2 * var(--1px)) solid #122B88;
  border-radius: 50%;
  background-color: #d9ddec;
  width: calc(202 * var(--1px));
  height: calc(202 * var(--1px));
}

.p-mnStep__icon {
  width: calc(var(--mn-step-icon-w) * var(--1px));
  max-width: none;
  height: auto;
}

/* --- テキスト --- */
.p-mnStep__itemTitle {
  margin-top: calc(30 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(24.3 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.p-mnStep__itemTitle::after {
  display: block;
  margin: calc(20 * var(--1px)) auto 0;
  background-color: #21A9DF;
  width: calc(34 * var(--1px));
  height: calc(2 * var(--1px));
  content: '';
}

.p-mnStep__text {
  margin-top: calc(17 * var(--1px));
  font-size: calc(16 * var(--1px));
  letter-spacing: 0;
  line-height: 1.5625;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * marunage: アクトプラスの強み（01〜05 のジグザグ配置）
 * カンプ実測（ページ座標）
 *   ブロック   y=4637〜7454（紺→水色のグラデーション + 十字装飾）
 *   見出し     インク y4776-4818 / x751-1173（中央）
 *   写真       400φ・左列 x450 / 右列 x1070
 *   テキスト   左列 x431 / 右列 x1051（幅 435）
 *   写真の上端 4926 / 5354 / 5765 / 6207 / 6634
 *   番号       写真の上端 -32 あたり（インク高 59）
 *   見出し     写真の下端 +27（インク高 21・行送り 36）
 *   本文       見出し 2 行目のインク下端 +29（行送り 25.4）
 * カンプは項目どうしが上下に重なるジグザグなので、PC は絶対配置で置く。
 * tab 以下は通常フローの縦積みに切り替える。
 * ========================================================================== */
.p-mnStrength {

  /* 端数で上に body の白が 1px 出るのを防ぐ。レイアウトを動かさずに上へ 1px 塗る */
  -webkit-box-shadow: 0 -1px 0 0 #122B88;
  box-shadow: 0 -1px 0 0 #122B88;
  background-color: #122B88;
  background-image: var(--mn-strength-bg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  color: #fff;
}

.p-mnStrength__inner {
  margin-inline: auto;
  position: relative;
  max-width: calc(1400 * var(--1px));
  min-height: calc(2817 * var(--1px));
}

/* --- セクション見出し --- */
.p-mnStrength__title {
  padding-top: calc(135 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(47.8 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.p-mnStrength__mark {
  margin-inline: calc(16 * var(--1px));
  color: #21A9DF;
}

/* --- 各項目 --- */
.p-mnStrength__item {
  position: absolute;
  width: calc(435 * var(--1px));
}

.p-mnStrength__item:nth-child(1) {
  top: calc(237.4 * var(--1px));
  left: calc(171 * var(--1px));
}

.p-mnStrength__item:nth-child(2) {
  top: calc(665.4 * var(--1px));
  left: calc(791 * var(--1px));
}

.p-mnStrength__item:nth-child(3) {
  top: calc(1076.4 * var(--1px));
  left: calc(171 * var(--1px));
}

.p-mnStrength__item:nth-child(4) {
  top: calc(1518.4 * var(--1px));
  left: calc(791 * var(--1px));
}

.p-mnStrength__item:nth-child(5) {
  top: calc(1945.4 * var(--1px));
  left: calc(171 * var(--1px));
}

.p-mnStrength__num {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-column-gap: calc(4 * var(--1px));
  -moz-column-gap: calc(4 * var(--1px));
  column-gap: calc(4 * var(--1px));
  z-index: 1;
  margin-left: calc(20.7 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(72.3 * var(--1px));
  font-weight: 400;
  letter-spacing: -.1em;
  line-height: 1;
}

.p-mnStrength__numMark {
  color: #FFF15A;
  font-size: calc(38 * var(--1px));
}

.p-mnStrength__photo {
  aspect-ratio: 1;
  display: block;
  margin-top: calc(-26.8 * var(--1px));
  margin-left: calc(19 * var(--1px));
  border-radius: 50%;
  width: calc(400 * var(--1px));
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-mnStrength__itemTitle {
  margin-top: calc(19 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(24 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
}

.p-mnStrength__text {
  margin-top: calc(15.2 * var(--1px));
  font-size: calc(17 * var(--1px));
  letter-spacing: 0;
  line-height: 1.4941176471;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * TOP: お知らせ
 * カンプ実測: 背景 y=4944.4 h=772.4 (#E9F6FC) / 見出し y=5082.4 x=261.7
 *             1行目 y=5256.6・行送り 75.15 / 日付バッジ 113.3x32.2 / タイトル x=403.1(20px)
 * ========================================================================== */
.p-notice {

  /* 端数で上に body の白が 1px 出るのを防ぐ。レイアウトを動かさずに上へ 1px 塗る */
  -webkit-box-shadow: 0 -1px 0 0 #E9F6FC;
  box-shadow: 0 -1px 0 0 #E9F6FC;
  background-color: #E9F6FC;
  padding-top: calc(134 * var(--1px));
  padding-bottom: calc(128 * var(--1px));
}

.p-notice__inner {
  margin-inline: auto;
  max-width: calc(1400 * var(--1px));
}

.p-notice__list {
  margin-top: calc(97 * var(--1px));
}

.p-notice__item + .p-notice__item {
  margin-top: calc(43 * var(--1px));
}

.p-notice__link {
  gap: calc(29 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  color: #000;
}

.p-notice__date {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #122B88;
  width: calc(113 * var(--1px));
  min-height: calc(32 * var(--1px));
  color: #fff;
  font-size: max(18 * var(--1px), 12px);
  line-height: 1.2;
}

.p-notice__title {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  font-size: max(20 * var(--1px), 14px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.p-notice__empty {
  margin-top: calc(60 * var(--1px));
  font-size: calc(20 * var(--1px));
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * company: Outline / Access の共通背景（白 + 幾何メッシュ）
 * カンプ実測: 帯 y=3856.8〜（フッター 5976.4 まで）
 *             メッシュ x=-828.4 y=3652.7 w=3938.7（y=3856.9 で切り取られる）
 * ========================================================================== */
.p-companyWhite {
  position: relative;
  background-color: #fff;
  padding-bottom: calc(120 * var(--1px));
  overflow: hidden;
}

.p-companyWhite__mesh {
  position: absolute;
  top: calc(-204.1 * var(--1px));
  left: calc(-828.4 * var(--1px));
  width: calc(3938.7 * var(--1px));
  max-width: none;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ==========================================================================
 * company: Outline
 * カンプ実測: 見出し(ja) 3967.0 /(en) 3992.3 / ロゴ 4116.9（254.4×85.6・中央）
 *             表 x=495.3〜1424.7 / 罫線 4316 から 71.3 ピッチで 8 本
 *             ラベル x=537.2 / 縦罫 x=645.5 / 値 x=723.8
 *             罫線の両端に十字マーク（x=504.5 / 1414.5・高さ 14）
 * ========================================================================== */
.p-outline {
  position: relative;
  z-index: 1;
}

.p-outline__inner {
  margin-inline: auto;
  padding-top: calc(109.9 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

.p-outline__logo {
  display: block;
  margin: calc(81.9 * var(--1px)) auto 0;
  width: calc(254.4 * var(--1px));
  height: auto;
}

.p-outline__table {
  position: relative;
  margin: calc(41.9 * var(--1px)) auto 0;
  width: calc(929.4 * var(--1px));
  max-width: 100%;
  color: #000;
}

/* ラベル列と値列を分ける縦罫（表の上下に少しはみ出す） */
.p-outline__table::before {
  position: absolute;
  top: calc(13.3 * var(--1px));
  bottom: calc(-8.9 * var(--1px));
  left: calc(150.2 * var(--1px));
  background-color: #000;
  width: 1px;
  content: '';
}

.p-outline__row {
  display: grid;
  position: relative;
  grid-template-columns: calc(228.5 * var(--1px)) 1fr;
  -webkit-box-align: start;
  -webkit-align-items: start;
  -ms-flex-align: start;
  align-items: start;
  border-bottom: 1px solid #000;
  min-height: calc(71.3 * var(--1px));
}

/* 罫線の両端の十字マーク */
.p-outline__row::before,
.p-outline__row::after {
  position: absolute;
  bottom: calc(-7 * var(--1px));
  background-color: #000;
  width: 1px;
  height: calc(14 * var(--1px));
  content: '';
}

.p-outline__row::before {
  left: calc(9.2 * var(--1px));
}

.p-outline__row::after {
  right: calc(10.2 * var(--1px));
}

.p-outline__label {
  padding-top: calc(32.4 * var(--1px));
  padding-bottom: calc(19.9 * var(--1px));
  padding-left: calc(41.9 * var(--1px));
  font-size: calc(19 * var(--1px));
  line-height: 1;
}

.p-outline__data {
  padding-top: calc(32.4 * var(--1px));
  padding-bottom: calc(19.9 * var(--1px));
  padding-left: calc(78.3 * var(--1px));
  font-size: calc(19 * var(--1px));
  line-height: 1;

  /* 「名刺・オンデマンド印刷」のような語の途中で折り返さないよう、
     読点・中黒で改行させる。入りきらない住所などは anywhere で逃がす */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 値が複数ある行（取引銀行・加入団体）。1 行目のインク位置は 1 行の行と揃える */
.p-outline__dataLine {
  display: block;
}

.p-outline__dataLine + .p-outline__dataLine {
  margin-top: calc(12 * var(--1px));
}

/* ---- tab 以下 ---- */

/************************************************************************
* p-pagination
************************************************************************/
.p-pagination__inner {
  letter-spacing: 0;
  text-align: center;
}

.page-numbers {
  display: inline-block;
  border: 1px solid #122B88;
  width: 2em;
  height: 2em;
  color: #122B88;
  font-size: 14px;
  font-size: .875rem;
  letter-spacing: 0;
  line-height: 2;
}

.page-numbers + .page-numbers {
  margin-left: 10px;
  margin-left: .625rem;
}

.page-numbers.current {
  background-color: #122B88;
  color: #fff;
}

.page-numbers.dots {
  border: none;
}

/* ==========================================================================
 * company: Philosophy
 * カンプ実測: 見出し(ja) 1671.6 / (en) 1697.2 / リード 1824.4・1913.5
 *             本文 2059.8 / 三角図 x=865.7〜1660.0 y=1697.2〜2433.0
 *             円 300φ（枠 4px）+ 内側 272φ（枠 2px）・中心距離 上=1262.8,1847.2
 * ========================================================================== */
.p-philosophy {
  position: relative;
}

.p-philosophy__inner {
  margin-inline: auto;
  position: relative;
  padding-top: calc(239 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

/* --- リード（波線下線つき 2 行） --- */
.p-philosophy__lead {
  row-gap: calc(17.6 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: calc(84.5 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(48 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

/* --- 本文 --- */
.p-philosophy__body {
  margin-top: calc(70.2 * var(--1px));
  max-width: calc(560 * var(--1px));
  font-size: calc(17 * var(--1px));
  line-height: 2.0882352941;
  overflow-wrap: anywhere;
}

.p-philosophy__body p + p {
  margin-top: calc(35.5 * var(--1px));
}

/* --- 三角図 --- */
.p-philosophy__chart {
  position: absolute;
  top: calc(264.9 * var(--1px));
  left: calc(605.7 * var(--1px));
  width: calc(794.3 * var(--1px));
  height: calc(735.8 * var(--1px));
}

.p-philosophy__list {
  position: relative;
  z-index: 1;
  height: 100%;
}

.p-philosophy__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-shadow: inset 0 0 0 calc(10 * var(--1px)) #fff, inset 0 0 0 calc(12 * var(--1px)) #122B88;
  box-shadow: inset 0 0 0 calc(10 * var(--1px)) #fff, inset 0 0 0 calc(12 * var(--1px)) #122B88;
  border: calc(4 * var(--1px)) solid #122B88;
  border-radius: 50%;
  background-color: #fff;
  padding-top: calc(49 * var(--1px));
  width: calc(300 * var(--1px));
  height: calc(300 * var(--1px));
  text-align: center;
}

.p-philosophy__item--trust {
  top: 0;
  left: calc(247.1 * var(--1px));
}

.p-philosophy__item--challenge {
  top: calc(435.8 * var(--1px));
  left: 0;
}

.p-philosophy__item--cocreation {
  top: calc(435.8 * var(--1px));
  left: calc(494.3 * var(--1px));
}

.p-philosophy__icon {
  width: calc(105 * var(--1px));
  height: auto;
}

.p-philosophy__itemTitle {
  margin-top: calc(18 * var(--1px));
  color: #000;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(32 * var(--1px));
  font-weight: 800;
  line-height: 1;
}

.p-philosophy__itemText {
  margin-top: calc(11 * var(--1px));
  font-size: calc(20 * var(--1px));
  font-weight: 700;
  line-height: 1.4;
}

/* 円をつなぐ線（カンプは紺のグラデーション・線幅 4） */
.p-philosophy__line {
  position: absolute;
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(18, 43, 136, .35)), to(#122B88));
  background-image: linear-gradient(90deg, rgba(18, 43, 136, .35), #122B88);
  height: calc(4 * var(--1px));
}

.p-philosophy__line--left {
  top: calc(370.4 * var(--1px));
  left: calc(290.9 * var(--1px));
  -webkit-transform: translate(-50%, -50%) rotate(120deg);
  transform: translate(-50%, -50%) rotate(120deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  width: calc(424.8 * var(--1px));
}

.p-philosophy__line--right {
  top: calc(370.4 * var(--1px));
  left: calc(503.3 * var(--1px));
  -webkit-transform: translate(-50%, -50%) rotate(60deg);
  transform: translate(-50%, -50%) rotate(60deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  width: calc(424.8 * var(--1px));
}

.p-philosophy__line--bottom {
  top: calc(583.8 * var(--1px));
  left: calc(300 * var(--1px));
  width: calc(194.3 * var(--1px));
}

.p-philosophy__logo {
  position: absolute;
  top: calc(404 * var(--1px));
  left: calc(309.8 * var(--1px));
  width: calc(174.6 * var(--1px));
  height: auto;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * price: 下部 CTA（ダウンロード用 PDF / お見積もりはコチラ）
 * カンプ実測: ボタン x=585 / 1000・y=1654.6・335×183（外枠）
 *             内側は 10px インセットの 315×163
 *             アイコン 47×61（左 31.5）/ ラベル 20px 2 行（左 98.5・ink 1725.7）
 *             波線 50×6 を右端から 30
 * カンプの塗りはグラデーションメッシュ。実測色から linear-gradient で近似する。
 * ========================================================================== */
.p-priceCta {
  padding-top: calc(53 * var(--1px));
}

.p-priceCta__list {
  gap: calc(80 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.p-priceCta__link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: -webkit-filter .3s ease, -webkit-transform .3s ease;
  transition: -webkit-filter .3s ease, -webkit-transform .3s ease;
  transition: filter .3s ease, transform .3s ease;
  transition: filter .3s ease, transform .3s ease, -webkit-filter .3s ease, -webkit-transform .3s ease;
  border-radius: calc(20 * var(--1px));
  padding: calc(10 * var(--1px));
  width: calc(335 * var(--1px));
  max-width: 100%;
  min-height: calc(183 * var(--1px));
  color: #fff;
}

/* カンプは左下に水色がたまり、そこから外へ紺になるメッシュ。radial で近似する */

/* ダウンロード用 PDF（紺寄り） */
.p-priceCta__link--pdf {
  background-image: radial-gradient(ellipse 95% 80% at -5% 105%, #23b5e7 0%, #2f8ecb 30%, #123f9b 62%, #002487 100%);
}

/* お見積もりはコチラ（水色寄り） */
.p-priceCta__link--quote {
  background-image: radial-gradient(ellipse 110% 90% at 10% 110%, #86cdeb 0%, #35b2e2 32%, #0a86c8 62%, #112181 100%);
}

/* カンプはアイコン + ラベル + 波線の 3 つを 1 かたまりとして左右中央に置く */
.p-priceCta__inner {
  padding-inline: calc(15 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: calc(20 * var(--1px));
  -moz-column-gap: calc(20 * var(--1px));
  column-gap: calc(20 * var(--1px));
  border-radius: calc(12 * var(--1px));
  width: 100%;
}

.p-priceCta__link--pdf .p-priceCta__inner {
  background-image: radial-gradient(ellipse 95% 75% at -5% 105%, #23b6e8 0%, #1785c6 28%, #0a3d99 58%, #001a80 82%, #000c77 100%);
}

.p-priceCta__link--quote .p-priceCta__inner {
  background-image: radial-gradient(ellipse 110% 90% at 10% 110%, #9ad8f1 0%, #56bde6 28%, #1290d0 58%, #1b5aa8 80%, #132080 100%);
}

.p-priceCta__icon {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc(47 * var(--1px));
  height: auto;
}

.p-priceCta__label {
  position: relative;
  top: calc(6 * var(--1px));
  font-size: calc(20 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.62;
  text-align: center;
  white-space: nowrap;
}

.p-priceCta__wave {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc(50 * var(--1px));
  height: calc(6 * var(--1px));
  pointer-events: none;
  color: inherit;
}

/* ---- tab 以下 ---- */

/* ---- CTA 下の注意書き（カンプに無い。クライアント追加 2026-10-26） ---- */

/* 見た目は .p-price__note を流用し、ここは CTA 直下としての配置だけ持つ */
.p-priceCta__note {
  margin-top: calc(40 * var(--1px));
}

/* ==========================================================================
 * TOP: Price
 * カンプ実測: 見出し y=4247.2 x=261.2 / 写真 y=4300.5 x=-23.9 1052.8x673.1（左は画面外）
 *             テキスト y=4438.9 x=1115.8（36px lh1.39）/ 本文 y=4563.8（20px lh1.76）
 *             ボタン y=4718.3 x=1115.3
 * ========================================================================== */
.p-priceIntro {
  position: relative;
  z-index: 1;
  padding-top: calc(122 * var(--1px));
  padding-bottom: calc(125 * var(--1px));
}

.p-priceIntro__head {
  margin-inline: auto;
  max-width: calc(1400 * var(--1px));
}

.p-priceIntro__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(804 * var(--1px));
  -webkit-box-align: start;
  -webkit-align-items: start;
  -ms-flex-align: start;
  align-items: start;
  margin-top: calc(72 * var(--1px));
}

/* 写真は画面左端からはみ出す（100vw を使わず negative margin で寄せる） */
.p-priceIntro__photo {
  aspect-ratio: 1053/421;
  justify-self: start;
  margin-left: calc(-24 * var(--1px));
  width: calc(1053 * var(--1px));
  max-width: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-priceIntro__content {
  padding-top: calc(32 * var(--1px));
  padding-left: calc(87 * var(--1px));
}

.p-priceIntro__lead {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(34 * var(--1px));
  font-weight: 800;
  line-height: 1.39;
}

.p-priceIntro__text {
  margin-top: calc(26 * var(--1px));
  font-size: max(20 * var(--1px), 14px);
  line-height: 1.76;
}

.p-priceIntro__action {
  margin-top: calc(57 * var(--1px));
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * price: 本文エリアの背景
 * カンプの y=630〜1950 はグラデーションメッシュ。CSS で近似する。
 * 上端 #f0f9fc は FV 背景画像の下端フェード色と一致させてある（継ぎ目対策）。
 * ========================================================================== */
.p-priceBody {
  display: flow-root;
  position: relative;

  /* 端数で白い隙間が出ないよう、FV 下端と本文上端の色で上へ 1px 塗る */
  -webkit-box-shadow: 0 -1px 0 0 #f0f9fc;
  box-shadow: 0 -1px 0 0 #f0f9fc;
  background-color: #cfecf8;
  background-image: radial-gradient(ellipse 60% 30% at 104% 22%, #fff 0%, rgba(255, 255, 255, 0) 76%), radial-gradient(ellipse 46% 42% at -8% 94%, #9fdaf1 0%, rgba(159, 218, 241, 0) 78%), radial-gradient(ellipse 84% 20% at 34% 20%, #fff 0%, rgba(255, 255, 255, 0) 76%), -webkit-gradient(linear, left top, left bottom, from(#f0f9fc), color-stop(5%, #e6f5fb), color-stop(15%, #f4fafd), color-stop(22%, #f6fbfd), color-stop(29%, #eef8fc), color-stop(40%, #daf0f9), color-stop(49%, #cbeaf7), color-stop(60%, #c1e7f6), color-stop(72%, #c2e7f6), color-stop(85%, #cdecf8), to(#dcf1fa));
  background-image: radial-gradient(ellipse 60% 30% at 104% 22%, #fff 0%, rgba(255, 255, 255, 0) 76%), radial-gradient(ellipse 46% 42% at -8% 94%, #9fdaf1 0%, rgba(159, 218, 241, 0) 78%), radial-gradient(ellipse 84% 20% at 34% 20%, #fff 0%, rgba(255, 255, 255, 0) 76%), linear-gradient(180deg, #f0f9fc 0%, #e6f5fb 5%, #f4fafd 15%, #f6fbfd 22%, #eef8fc 29%, #daf0f9 40%, #cbeaf7 49%, #c1e7f6 60%, #c2e7f6 72%, #cdecf8 85%, #dcf1fa 100%);
  padding-bottom: calc(112.4 * var(--1px));
}

.p-price__inner {
  margin-inline: auto;
  max-width: calc(1400 * var(--1px));
}

/* ==========================================================================
 * price: 料金表のタブ
 * カンプ実測: バー x=260 y=555.3 1400×80（角丸 10）・FV に食い込む
 *             6 等分（233.33）/ ラベル(ink) 591 / 区切り線 576〜614
 *             active は水色 + ドット(10φ) + 波線(波長 25)
 *             ※ カンプ左端の十字マークはクライアント判断で不採用
 * ========================================================================== */
.p-priceTab {
  position: relative;
  z-index: 1;
  margin-top: calc(-74.7 * var(--1px));
}

.p-priceTab__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-radius: calc(10 * var(--1px));
  background-color: #fff;
}

.p-priceTab__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: calc(80 * var(--1px));
}

/* 2 番目以降の左に区切り線（カンプ実測 y 576〜614 の 39px） */
.p-priceTab__item + .p-priceTab__item {
  background-image: linear-gradient(180deg, transparent 0, transparent calc(20.7 * var(--1px)), #4d5fa5 calc(20.7 * var(--1px)), #4d5fa5 calc(59.7 * var(--1px)), transparent calc(59.7 * var(--1px)));
  background-repeat: no-repeat;
  background-size: 1px 100%;
}

.p-priceTab__link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: color .3s;
  transition: color .3s;
  cursor: var(--cursor-cross);
  padding: calc(7.8 * var(--1px)) calc(8 * var(--1px)) 0;
  width: 100%;
  color: #000;
  font-size: calc(17 * var(--1px));
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* ドット（カンプ実測 10φ・中心 y=573.5・タブ中央） */
.p-priceTab__link::before {
  position: absolute;
  top: calc(13.2 * var(--1px));
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  border-radius: 50%;
  background-color: #21A9DF;
  width: calc(10 * var(--1px));
  height: calc(10 * var(--1px));
  content: '';
}

/* 波線（カンプ実測 波長 25 / 山谷 6 / 線 2 / y 615〜623） */
.p-priceTab__link::after {
  position: absolute;
  bottom: calc(16.3 * var(--1px));
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  opacity: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1300' height='9' viewBox='0 0 1300 9' preserveAspectRatio='none' fill='none'><path d='M0 4.5q6.25 -6 12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0t12.5 0' stroke='%2321A9DF' stroke-width='2'/></svg>");
  background-repeat: repeat-x;
  background-size: calc(1300 * var(--1px)) calc(9 * var(--1px));
  width: calc(140 * var(--1px));
  max-width: 100%;
  height: calc(9 * var(--1px));
  content: '';
}

/* 選択中とホバーで同じ見た目（水色 + ドット + 波線） */
.p-priceTab__link.is-active {
  color: #21A9DF;
}

.p-priceTab__link.is-active::before,
.p-priceTab__link.is-active::after {
  opacity: 1;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * price: 料金表
 * カンプ実測（構造化データ + ピクセル実測）
 *   セクション見出し(ink) 711.9 / 波線 750〜768
 *   列見出し(ink) 826.6〜827.2（24px 太字・カード中央）
 *   カード x=260 / 615 / 970 / 1325（335 幅・gap 20）・上端 871.6
 *   カード内 ヘッダ 79.7 / 色帯 80 / 段階行 37 ピッチ（下線 2px）
 *   帯 1枚あたり 左 69.2（16px）/ 金額はカード左から 222 の位置で中央（数字 48・円 24）
 * ========================================================================== */

/* タブで切り替える表示エリア（is-active の 1 枚だけ表示） */
.p-price__panel {
  display: none;
}

.p-price__panel.is-active {
  display: block;
}

.p-price__title {
  padding-top: calc(74.2 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(32 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

/* カンプは 4 列だが、カテゴリによって 1〜4 列になるので列数は可変にして中央寄せ */
.p-priceTable {
  gap: calc(20 * var(--1px));
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(335 * var(--1px)));
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: calc(62.1 * var(--1px));
}

.p-priceTable + .p-price__groupTitle {
  margin-top: calc(70 * var(--1px));
}

/* グループ見出し（折り加工 / 二つ折り製本 など） */
.p-price__groupTitle {
  padding-top: calc(50 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(24 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.p-price__groupTitle + .p-priceTable {
  margin-top: calc(34 * var(--1px));
}

/* 金額ではなく対応内容を並べるグループ（電子加工） */
.p-price__lines {
  margin-top: calc(34 * var(--1px));
  padding-left: calc(24 * var(--1px));
  font-size: calc(18 * var(--1px));
  line-height: 2;
  list-style: disc;
}

.p-price__note {
  margin-top: calc(40 * var(--1px));
  font-size: calc(16 * var(--1px));
  letter-spacing: 0;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.p-priceTable__col {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
}

/* 列カラー（帯・段階行の下線） */
.p-priceTable__col--bwSm {
  --price-color: #f5ab03;
  --price-line: rgba(245, 171, 3, .65);
}

.p-priceTable__col--clSm {
  --price-color: #43ab00;
  --price-line: rgba(67, 171, 0, .65);
}

.p-priceTable__col--bwLg {
  --price-color: #e5789b;
  --price-line: rgba(229, 120, 155, .65);
}

.p-priceTable__col--clLg {
  --price-color: #93278f;
  --price-line: rgba(147, 39, 143, .65);
}

.p-priceTable__colTitle {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(24 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

/* 列見出しとカード上端（871.6）の間 */
.p-priceTable__cards {
  gap: calc(20 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: calc(22 * var(--1px));
}

/* --- 料金カード --- */

/* 高さはカンプ実測（小型 355 / 大型白黒 230 / 大型カラー 368・下段 159.6） */
.p-priceCard {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
}

/* 手書きコピー / データ出力基本料金はグレーの帯 */
.p-priceCard--gray {
  --price-color: #838383;
  --price-line: rgba(131, 131, 131, .65);
}

.p-priceCard__head {
  padding-block: calc(10.6 * var(--1px)) 0;
  padding-inline: calc(52.5 * var(--1px)) calc(72.9 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-height: calc(79.7 * var(--1px));
  font-size: calc(15 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

/* 手書きコピー / データ出力基本料金は 1 項目だけで中央 */
.p-priceCard__head--single {
  padding-block: calc(10.5 * var(--1px)) 0;
  padding-inline: calc(20 * var(--1px));
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: calc(14 * var(--1px));
  text-align: center;
}

/* カンプはラベル左 69.2 / 金額をカード左から 222 で中央、だが実データは
   「基本料（表紙込）」「10,000円」など幅が大きく変わるので space-between にした */
.p-priceCard__band {
  gap: calc(4 * var(--1px)) calc(12 * var(--1px));
  padding-inline: calc(24 * var(--1px)) calc(20 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background-color: var(--price-color, #838383);
  min-height: calc(80 * var(--1px));
  color: #fff;
}

.p-priceCard__unit {
  margin-top: calc(5.85 * var(--1px));
  font-size: calc(18 * var(--1px));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.p-priceCard__price {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  margin-top: calc(.55 * var(--1px));
  font-size: calc(25 * var(--1px));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* カンプ実測: 数字のインク高 36.9・「15円」72.1 →（Noto Sans JP Bold で）数字 48 / 円 25 */
.p-priceCard__num {
  font-size: calc(48 * var(--1px));
  line-height: 1;
}

/* 「10,000」のように桁が多いものは 1 行に収まるよう少し小さくする */
.p-priceCard__num--long {
  font-size: calc(40 * var(--1px));
}

/* --- 段階料金 --- */
.p-priceCard__tiers {
  margin-block: calc(34.5 * var(--1px)) calc(29.2 * var(--1px));
  margin-inline: calc(41 * var(--1px)) calc(40 * var(--1px));
  font-size: calc(18 * var(--1px));
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.p-priceCard__tier {
  gap: calc(8 * var(--1px));
  padding-inline: calc(10.7 * var(--1px)) calc(2.4 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: calc(2 * var(--1px)) solid var(--price-line, #838383);
  min-height: calc(37 * var(--1px));
}

.p-priceCard__tierLabel,
.p-priceCard__tierPrice {
  white-space: nowrap;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * quotation: 白カードの中身（左にアイコン + 見出し / 右に入力行）
 * カンプ実測（ページ座標）
 *   アイコン列 中心 x469.5（カード左端 260 から 209.5）= 幅 420 の中央
 *   入力行     ラベルの送り始まり 765（アイコン列の右端 680 から 85）
 *   アイコン   会社 116×84 / ファイル 80×96 / データ 82×76 / 問い合わせ 96×90
 *   見出し     24px 紺・アイコンの下端 +21
 *   アイコンと見出しの塊はカードの高さに対して上下中央
 * ========================================================================== */

/* カードの高さは入力行だけで決まり、アイコンの塊はそれより背が高くても
   カードを伸ばさない（カンプもカードの padding にはみ出している）。
   そのため塊は絶対配置で上下中央に置く。 */
.p-qtBlock {
  position: relative;
  padding-left: calc(505 * var(--1px));
}

.p-qtBlock__head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: calc(420 * var(--1px));
}

/* ステップ表示の 02「ファイル添付」がこのカードを指していることを示すバッジ。
   ステップ表示は画面上部にあってここまでスクロールすると見えないので、
   見ている場所でも現在地が分かるように、同じ紺円の意匠を小さく置く。
   カードが画面の中央帯に入ると .is-active が付いて数字が黄色くなる（quotationForm.js） */
.p-qtBlock__step {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: color .3s ease, -webkit-box-shadow .3s ease;
  transition: color .3s ease, -webkit-box-shadow .3s ease;
  transition: color .3s ease, box-shadow .3s ease;
  transition: color .3s ease, box-shadow .3s ease, -webkit-box-shadow .3s ease;
  margin-bottom: calc(10 * var(--1px));
  border-radius: 50%;
  background-color: #122B88;
  width: calc(48 * var(--1px));
  height: calc(48 * var(--1px));
  color: #fff;
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(20 * var(--1px));
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.p-qtBlock__step.is-active {
  -webkit-box-shadow: 0 0 0 calc(4 * var(--1px)) rgba(18, 43, 136, .18);
  box-shadow: 0 0 0 calc(4 * var(--1px)) rgba(18, 43, 136, .18);
  color: #FFF15A;
}

.p-qtBlock__icon {
  width: calc(var(--qt-icon-w) * var(--1px));
  max-width: none;
  height: auto;
}

.p-qtBlock__title {
  margin-top: calc(14.5 * var(--1px));
  color: #122B88;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(24 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
}

.p-qtBlock__body {
  min-width: 0;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * quotation: 03 内容確認 / 04 送信完了
 * どちらもカンプが無いので、入力カード（.c-form__card）の白カードと
 * 下層ページの文字組みに寄せている。新しい意匠は足していない。
 *
 * 表示の出し分けは hidden 属性（quotationForm.js）。ここで display を
 * 持たせると hidden が効かなくなるので、外枠には display を書かない。
 * ========================================================================== */

/* quotation のカードは左 padding を持たない（アイコン列があるため）。
   確認・完了は左右そろえたいので、data / contact と同じ値に戻す */
.p-qtConfirm .c-form__card,
.p-qtDone .c-form__card {
  padding-inline: calc(178 * var(--1px)) calc(138 * var(--1px));
}

/* ---- 03 内容確認 ---- */
.p-qtConfirm__title {
  color: #122B88;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(30 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
}

.p-qtConfirm__lead {
  margin-top: calc(16 * var(--1px));
  font-size: calc(16 * var(--1px));
  line-height: 1.75;
  text-align: center;
}

.p-qtConfirm__list {
  margin-top: calc(48 * var(--1px));
  border-top: calc(1 * var(--1px)) solid #e7e9f3;
}

.p-qtConfirm__item {
  padding-block: calc(22 * var(--1px));
  display: grid;
  grid-template-columns: calc(354 * var(--1px)) 1fr;
  -webkit-box-align: start;
  -webkit-align-items: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-column-gap: calc(24 * var(--1px));
  -moz-column-gap: calc(24 * var(--1px));
  column-gap: calc(24 * var(--1px));
  border-bottom: calc(1 * var(--1px)) solid #e7e9f3;
}

.p-qtConfirm__label {
  color: #122B88;
  font-size: calc(16 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.75;
}

.p-qtConfirm__value {
  font-size: calc(16 * var(--1px));
  letter-spacing: 0;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.p-qtConfirm__actions {
  row-gap: calc(20 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: calc(40 * var(--1px));
  -moz-column-gap: calc(40 * var(--1px));
  column-gap: calc(40 * var(--1px));
  margin-top: calc(61 * var(--1px));
}

/* 戻るは送信より弱く見せる（送信ボタンはグラデーションの塗り） */
.p-qtConfirm__back {
  padding-block: calc(10 * var(--1px));
  padding-inline: calc(24 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: calc(10 * var(--1px));
  -moz-column-gap: calc(10 * var(--1px));
  column-gap: calc(10 * var(--1px));
  -webkit-transition: background-color .3s ease, color .3s ease;
  transition: background-color .3s ease, color .3s ease;
  cursor: pointer;
  border: calc(2 * var(--1px)) solid #122B88;
  border-radius: calc(10 * var(--1px));
  background-color: transparent;
  width: calc(300 * var(--1px));
  max-width: 100%;
  min-height: calc(80 * var(--1px));
  color: #122B88;
  font-size: calc(18 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

.p-qtConfirm__backIcon {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc(20 * var(--1px));
  height: calc(20 * var(--1px));
}

/* ---- 04 送信完了 ---- */
.p-qtDone__title {
  color: #122B88;
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(30 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
}

.p-qtDone__text {
  margin-top: calc(28 * var(--1px));
  font-size: calc(16 * var(--1px));
  letter-spacing: 0;
  line-height: 2;
  text-align: center;
}

.p-qtDone__note {
  margin-top: calc(28 * var(--1px));
  font-size: calc(14 * var(--1px));
  letter-spacing: 0;
  line-height: 1.85;
  text-align: center;
}

.p-qtDone__tel {
  text-underline-offset: .2em;
  color: #122B88;
  font-weight: 700;
  text-decoration: underline;
}

.p-qtDone__actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: calc(61 * var(--1px));
}

/* ---- tab 以下（--1px の急膨張対策に固定値で上書き） ---- */

/* ==========================================================================
 * quotation: 入力ステップ（01 入力 → 04 送信完了）
 * カンプ実測（ページ座標）
 *   円      104φ 紺・y636-739・中心 x563.5 / 827.5 / 1092.5 / 1356（ピッチ 264）
 *   番号    Printemps・「01」のインク 51×31（現在地だけ黄）
 *   連結線  y687-688（2px）#4B5FA5
 *           01→02 だけ 左 71 が点線・右 83 が実線・境目に 12φ の点
 *   ラベル  インク y754-771（18px 相当）
 * ========================================================================== */
.p-qtStep {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.p-qtStep__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: calc(264 * var(--1px));
  min-width: 0;
}

.p-qtStep__circle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #122B88;
  width: calc(104 * var(--1px));
  height: calc(104 * var(--1px));
  color: #fff;
}

.p-qtStep__item--current .p-qtStep__circle {
  color: #FFF15A;
}

.p-qtStep__num {
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(44 * var(--1px));
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.p-qtStep__label {
  margin-top: calc(9.5 * var(--1px));
  font-size: calc(18 * var(--1px));
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
}

/* 円と円をつなぐ線。最後の項目には出さない */
.p-qtStep__item:not(:last-child)::after {
  position: absolute;
  top: calc(52 * var(--1px));
  left: calc(50% + calc(52 * var(--1px)));
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#4b5fa5), to(#4b5fa5));
  background-image: linear-gradient(#4b5fa5, #4b5fa5);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% calc(2 * var(--1px));
  width: calc(160 * var(--1px));
  height: calc(12 * var(--1px));
  content: '';
}

/* 現在地の右だけ「点線 → 点 → 実線」 */
.p-qtStep__item--current:not(:last-child)::after {
  background-image: repeating-linear-gradient(to right, #4b5fa5 0 calc(2 * var(--1px)), transparent calc(2 * var(--1px)) calc(5.7 * var(--1px))), -webkit-gradient(linear, left top, left bottom, from(#4b5fa5), to(#4b5fa5)), radial-gradient(circle closest-side, #4b5fa5 100%, transparent 100%);
  background-image: repeating-linear-gradient(to right, #4b5fa5 0 calc(2 * var(--1px)), transparent calc(2 * var(--1px)) calc(5.7 * var(--1px))), linear-gradient(#4b5fa5, #4b5fa5), radial-gradient(circle closest-side, #4b5fa5 100%, transparent 100%);
  background-position: left center, right center, calc(76.5 * var(--1px)) center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: calc(71 * var(--1px)) calc(2 * var(--1px)), calc(83 * var(--1px)) calc(2 * var(--1px)), calc(12 * var(--1px)) calc(12 * var(--1px));
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * TOP: Service
 * カンプ実測: 背景 y=2150〜3500 (#21A9DF) / 見出し y=2153.7 x=261.7
 *             カード 3列 幅438 gap43 / 写真 y=2285(1段目) 高さ431・下端が波形
 *             ラベル y=2763.3（2段目 y=3347・行間 584）
 * ========================================================================== */
.p-service {
  position: relative;

  /* 端数で上に body の白が 1px 出るのを防ぐ。レイアウトを動かさずに上へ 1px 塗る */
  -webkit-box-shadow: 0 -1px 0 0 #21A9DF;
  box-shadow: 0 -1px 0 0 #21A9DF;
  background-color: #21A9DF;
  padding-bottom: calc(126 * var(--1px));
  overflow: hidden;
}

/* 幾何メッシュ装飾（ヒーローから続く同一 SVG の下半分） */
.p-service__mesh {
  position: absolute;
  top: calc(-1036 * var(--1px));
  left: calc(-299 * var(--1px));
  -webkit-animation: deco-mesh-drift 24s ease-in-out infinite;
  animation: deco-mesh-drift 24s ease-in-out infinite;

  /* 会社概要側のメッシュと同期して漂わせる（foundation/_animation.scss） */
  will-change: transform;
  width: calc(3827 * var(--1px));
  max-width: none;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.p-service__inner {
  margin-inline: auto;
  padding-inline: calc(2 * var(--1px));
  position: relative;
  z-index: 1;
  max-width: calc(1400 * var(--1px));
}

.p-service__list {
  gap: calc(65 * var(--1px)) calc(43 * var(--1px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: calc(53 * var(--1px));
}

.p-service__link {
  display: block;

  /* カンプのピンク注記「カーソル」に合わせた十字カーソル */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='black' stroke-width='1'><path d='M20 0v16M20 24v16M0 20h16M24 20h16'/><rect x='18' y='18' width='4' height='4'/></g></svg>") 20 20, crosshair;
  color: #fff;
}

/* ---- 写真（下端が波形） ---- */

/* 既定は下端が直線。波打つのはホバー時だけ（カンプはホバー状態を作図している） */
.p-service__thumb {
  aspect-ratio: 438/431;
  position: relative;
  overflow: hidden;
}

.p-service__thumb img {
  -webkit-transition: -webkit-transform .4s ease;
  transition: -webkit-transform .4s ease;
  transition: transform .4s ease;
  transition: transform .4s ease, -webkit-transform .4s ease;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* ---- ラベル ---- */
.p-service__label {
  margin-top: calc(47 * var(--1px));
  font-size: calc(30 * var(--1px));
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* ---- ホバー（カンプ注記「ホバーで波打つ」） ---- */

/* カンプ実測: 波長 60px・振幅 7px（下端 424 浅 〜 431 深）
   タイル幅を カード幅 438 ÷ 7 = 62.571 にして端で波が切れないようにする */
@-webkit-keyframes p-service-wave {

  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  to {
    -webkit-mask-position: calc(-62.571 * var(--1px)) 0;
    mask-position: calc(-62.571 * var(--1px)) 0;
  }
}
@keyframes p-service-wave {

  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  to {
    -webkit-mask-position: calc(-62.571 * var(--1px)) 0;
    mask-position: calc(-62.571 * var(--1px)) 0;
  }
}

/* ---- tab 以下（--1px 急膨張対策の固定値上書き） ---- */

/* ==========================================================================
 * services: 本文エリアの背景
 * カンプの y=610〜2015 はグラデーションメッシュ。adobe adapter では書き出せない
 * ため CSS で近似する（左下が水色寄り・中央上と右下が白抜け）。
 * 上端 #d5eef8 は FV 背景画像の下端フェード色と一致させてある（継ぎ目対策）。
 * ========================================================================== */
.p-servicesBody {
  background-color: #cfecf8;
  background-image: radial-gradient(ellipse 62% 34% at 106% 96%, #fff 0%, rgba(255, 255, 255, 0) 76%), radial-gradient(ellipse 46% 44% at -8% 92%, #9fdaf1 0%, rgba(159, 218, 241, 0) 78%), radial-gradient(ellipse 88% 22% at 44% 20%, #fff 0%, rgba(255, 255, 255, 0) 76%), -webkit-gradient(linear, left top, left bottom, from(#d5eef8), color-stop(6%, #e4f4fb), color-stop(15%, #f2fafd), color-stop(28%, #eff8fc), color-stop(37%, #ddf1fa), color-stop(48%, #c9e9f7), color-stop(57%, #bce4f5), color-stop(66%, #c1e7f6), color-stop(80%, #c6e9f7), to(#d6eff9));
  background-image: radial-gradient(ellipse 62% 34% at 106% 96%, #fff 0%, rgba(255, 255, 255, 0) 76%), radial-gradient(ellipse 46% 44% at -8% 92%, #9fdaf1 0%, rgba(159, 218, 241, 0) 78%), radial-gradient(ellipse 88% 22% at 44% 20%, #fff 0%, rgba(255, 255, 255, 0) 76%), linear-gradient(180deg, #d5eef8 0%, #e4f4fb 6%, #f2fafd 15%, #eff8fc 28%, #ddf1fa 37%, #c9e9f7 48%, #bce4f5 57%, #c1e7f6 66%, #c6e9f7 80%, #d6eff9 100%);
  padding-bottom: calc(128 * var(--1px));
}

/* ==========================================================================
 * services: サービス一覧
 * カンプ実測: 見出し(ja) 619.0 /(en) 645.0
 *             カード 335×550 を 4 列（gap 20・コンテンツ 260〜1659）
 *             カード内 padding 30 / 写真 275×181 / タイトル(ink) 994
 *             本文 1 行目(ink) 1053・行送り 29.25・ボタン 1202〜1271
 * ========================================================================== */
.p-serviceList__inner {
  margin-inline: auto;
  padding-top: calc(9.5 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

.p-serviceList__list {
  gap: calc(20 * var(--1px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: calc(64.2 * var(--1px));
}

.p-serviceList__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  padding: calc(30 * var(--1px));
  min-width: 0;
  min-height: calc(550 * var(--1px));
}

.p-serviceList__photo {
  aspect-ratio: 275/181;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-serviceList__cardTitle {
  margin-top: calc(30.9 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(20 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.p-serviceList__text {
  margin-top: calc(22.9 * var(--1px));
  font-size: calc(16 * var(--1px));
  letter-spacing: 0;
  line-height: 1.828125;

  /* 「折り加工」のように語の途中で改行されるのを防ぐ（文節で折り返す）。
     非対応ブラウザは従来どおりの折り返しになるだけ（本人指定 2026-10-19） */
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.p-serviceList__btn {
  margin-inline: auto;
  margin-top: auto;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * services: その他
 * カンプ実測: 見出し(ink) 1441（32px 太字・中央）/ 波線 1479〜1492
 *             カード 690×340 を 2 列（gap 20）・上端 1548
 *             カード内 padding 29/30/31 / 写真 330×280 / テキスト列 幅 274（写真から 26）
 *             タイトル(ink) 1578 / 本文 1 行目(ink) 1638 / ボタン 1787〜1856
 * ========================================================================== */
.p-serviceOther__inner {
  margin-inline: auto;
  padding-top: calc(138.3 * var(--1px));
  max-width: calc(1400 * var(--1px));
}

.p-serviceOther__title {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(32 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.p-serviceOther__list {
  gap: calc(20 * var(--1px));
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: calc(55 * var(--1px));
}

.p-serviceOther__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: calc(26 * var(--1px));
  -moz-column-gap: calc(26 * var(--1px));
  column-gap: calc(26 * var(--1px));
  background-color: #fff;
  padding: calc(29 * var(--1px)) calc(30 * var(--1px)) calc(31 * var(--1px));
  min-width: 0;
  min-height: calc(340 * var(--1px));
}

.p-serviceOther__photo {
  aspect-ratio: 330/280;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: calc(330 * var(--1px));
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-serviceOther__body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
}

.p-serviceOther__cardTitle {
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(20 * var(--1px));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.p-serviceOther__text {
  margin-top: calc(24.3 * var(--1px));
  font-size: calc(16 * var(--1px));
  letter-spacing: 0;
  line-height: 1.828125;
  overflow-wrap: anywhere;
}

.p-serviceOther__btn {
  margin-top: auto;
}

/* ---- tab 以下 ---- */

/* ==========================================================================
 * TOP: What we do
 * カンプ実測: ラベル y=984(ドット x=260 / 文字 x=299) / 見出し y=1126,1216
 *             本文 y=1359〜1556（行送り56）/ 透かし y=1693.5 x=253.8
 *             ボタン y=1742.2 x=260 370x100 / 写真 y=1651.3 x=1038.8 584.2x389.4
 * ========================================================================== */
.p-whatWeDo {
  position: relative;
  z-index: 1;
  padding-bottom: calc(110 * var(--1px));
  color: #fff;
}

/* 背景の図面線画（カンプ実測 x=61.5 y=1194.4 w=1797 h=435.1）
   基準は .p-whatWeDo（画面いっぱい・左端 0）なので、カンプの x/y をそのまま使う。
   inner の左 padding を引いたり、ラベルのインク上端を基準にしたりしないこと。 */
.p-whatWeDo__drawing {
  position: absolute;
  top: calc(221.2 * var(--1px));
  left: calc(61.5 * var(--1px));
  width: calc(1797 * var(--1px));
  max-width: none;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.p-whatWeDo__inner {
  position: relative;
  padding-right: calc(260 * var(--1px));
  padding-left: calc(260 * var(--1px));
}

/* ---- ラベル「• What we do」 ---- */
.p-whatWeDo__label {
  gap: calc(25 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(76 * var(--1px));
  font-weight: 400;
  line-height: 1;
  word-spacing: .3em;
}

.p-whatWeDo__label::before {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #21A9DF;
  width: calc(14 * var(--1px));
  height: calc(14 * var(--1px));
  content: '';
}

/* ---- 見出し ---- */
.p-whatWeDo__title {
  margin-top: calc(53 * var(--1px));
  font-family: 'sicprintempspetit', 'Noto Sans JP', '源ノ角ゴシック JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
  font-size: calc(48 * var(--1px));
  font-weight: 800;
  line-height: 1.88;
}

/* ---- 本文 ---- */
.p-whatWeDo__text {
  margin-top: calc(63 * var(--1px));
  font-size: calc(32 * var(--1px));
  font-weight: 400;
  line-height: 1.75;
}

/* ---- 透かし文字 ---- */
.p-whatWeDo__watermark {
  opacity: .18;
  margin-top: calc(119.6 * var(--1px));
  margin-left: calc(-6 * var(--1px));
  color: #fff;
  font-family: 'sicprintempspetit', 'Times New Roman', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
  font-size: calc(47 * var(--1px));
  font-weight: 400;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  word-spacing: .1em;
}

/* ---- ボタン + 写真 ---- */
.p-whatWeDo__body {
  gap: calc(40 * var(--1px));
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.p-whatWeDo__action {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: calc(8 * var(--1px));
}

.p-whatWeDo__photo {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: calc(-83 * var(--1px));
  margin-left: auto;
  width: calc(584 * var(--1px));
  height: auto;
}

/* ---- tab 以下（--1px 急膨張対策の固定値上書き） ---- */
.clearfix::after {
  display: block;
  clear: both;
  content: '';
}

/************************************************************************
* visible device
************************************************************************/
.u-onlyPc {
  display: none;
}

.u-onlyTab {
  display: none;
}

.u-onlySp {
  display: none;
}

/* PC 用の改行。tab 以下では解除して自然折り返しにする
   （カンプの <br> をそのまま残すと SP で不自然な位置に改行が入るため） */
.u-inlineBlock {
  display: inline-block !important;
}

.u-block {
  display: block !important;
}

.u-inline {
  display: inline !important;
}

.u-hidden {
  display: none !important;
}

.u-overflowHidden {
  overflow: hidden !important;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  position: absolute;
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

@media screen and (min-width: 600px) {

  .p-article__body .gallery-columns-4 > .gallery-item {
    width: calc((100% - 20px) / 2);
  }
}

@media screen and (min-width: 768px) {

  :root {
    --header-height: 90px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 40px;
    width: 2.5rem;
  }

  #toc_container {
    padding: 30px 60px;
    padding: 1.875rem 3.75rem;
  }

  .p-article__body {
    padding-top: 60px;
    padding-bottom: 100px;
    font-size: 16px;
  }

  .p-article__body table th,
  .p-article__body table td {
    padding: 20px 30px;
    padding: 1.25rem 1.875rem;
  }

  .p-article__body table th {
    width: 153px;
    width: 9.5625rem;
  }

  .p-article__body .gallery-columns-4 > .gallery-item {
    width: calc((100% - 40px) / 3);
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .u-onlyTab {
    display: block;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {

  .u-hidden--tab {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) {

  .post-page-numbers + .post-page-numbers {
    margin-left: 20px;
  }

  .u-onlyPc {
    display: block;
  }

  .u-hidden--pc {
    display: none !important;
  }
}

@media screen and (max-width: 1024px) {

  .l-container {
    padding-inline: 30px;
    max-width: none;
  }

  .c-btn {
    padding-inline: 16px 40px;
    -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, .16);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .16);
    border-radius: 8px;
    width: 280px;
    max-width: 100%;
    min-height: 68px;
    font-size: 16px;
  }

  .c-btn__wave {
    right: 20px;
    width: 50px;
    height: 7px;
  }

  .c-btn--sm {
    padding-inline: 16px 36px;
    -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .16);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .16);
    border-radius: 4px;
    width: 100%;
    max-width: 240px;
    min-height: 56px;
    font-size: 14px;
  }

  .c-btn--sm .c-btn__wave {
    right: 16px;
    width: 26px;
    height: 8px;
  }

  .c-form__card {
    padding-block: 28px 32px;
  }

  .c-form__card + .c-form__card {
    margin-top: 16px;
  }

  .c-form__card--company,
  .c-form__card--dataFile {
    padding-bottom: 32px;
  }

  .c-form--quotation .c-form__card,
  .c-form--simple .c-form__card {
    padding-inline: 24px;
  }

  .c-form__rows {
    row-gap: 24px;
  }

  /* 横 2 列が入らないので、ラベルの下に入力欄を積む */
  .c-form--quotation .c-form__row,
  .c-form--quotation .c-form__row--file,
  .c-form--simple .c-form__row {
    row-gap: 10px;
    grid-template-columns: 1fr;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    min-height: 0;
  }

  .c-form__label {
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
  }

  .c-form__labelText {
    font-size: 15px;
  }

  .c-form__label--align {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    grid-template-columns: none;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
  }

  .c-form__required {
    padding-inline: 8px;
    min-width: 46px;
    min-height: 24px;
    font-size: 12px;
  }

  .c-form__input,
  .c-form__textarea {
    font-size: 15px;
  }

  .c-form__input {
    padding-inline: 14px;
    height: 44px;
  }

  .c-form__textarea {
    padding: 14px;
    height: 180px;
  }

  .c-form__textarea--sm {
    height: 120px;
  }

  .c-form__input::-webkit-input-placeholder,
  .c-form__textarea::-webkit-input-placeholder {
    font-size: 13px;
  }

  .c-form__input::-moz-placeholder,
  .c-form__textarea::-moz-placeholder {
    font-size: 13px;
  }

  .c-form__input::-ms-input-placeholder,
  .c-form__textarea::-ms-input-placeholder {
    font-size: 13px;
  }

  .c-form__input::placeholder,
  .c-form__textarea::placeholder {
    font-size: 13px;
  }

  .c-form__radios {
    row-gap: 8px;
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
  }

  .c-form__radio {
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    font-size: 14px;
  }

  .c-form__radio input[type=radio] {
    border-width: 2px;
    width: 18px;
    height: 18px;
  }

  .c-form__radio input[type=radio]:checked {
    border-width: 5px;
  }

  .c-form__file {
    row-gap: 8px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
  }

  .c-form__fileBtn {
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    border-width: 2px;
    border-radius: 8px;
    width: 100%;
    max-width: 200px;
    min-height: 44px;
    font-size: 14px;
  }

  .c-form__filePlus {
    font-size: 16px;
  }

  .c-form__fileNote {
    font-size: 13px;
  }

  .c-form__row--top .c-form__label {
    padding-top: 0;
  }

  .c-form__fileGuide {
    margin-top: 12px;
    font-size: 12px;
  }

  .c-form__fileError {
    grid-column: auto;
    margin-top: 6px;
    font-size: 12px;
  }

  .c-form__fileClear {
    width: 26px;
    height: 26px;
  }

  .c-form__fileClearIcon {
    width: 11px;
    height: 11px;
  }

  .c-form__agree {
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    margin-top: 40px;
  }

  .c-form__agreeLabel {
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    font-size: 13px;
  }

  .c-form__agreeLabel input[type=checkbox] {
    width: 20px;
    height: 20px;
  }

  .c-form__agreeLabel input[type=checkbox]:checked {
    background-size: 14px 14px;
  }

  .c-form__privacy {
    font-size: 13px;
  }

  .c-form__submitWrap {
    margin-top: 28px;
  }

  .c-form__submit[type=submit],
  .c-form__submit[type=button] {
    padding-inline: 24px 64px;
    -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, .16);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .16);
    border-radius: 8px;
    width: 280px;
    min-height: 88px;
    font-size: 17px;
  }

  .c-form__submitWave {
    right: 20px;
    width: 50px;
    height: 7px;
  }

  .c-form__alert {
    margin-bottom: 24px;
    padding: 14px 16px;
    font-size: 14px;
  }

  .c-lowerTitle {
    padding-top: 22px;
  }

  .c-lowerTitle__ja {
    left: 0;
    font-size: 14px;
  }

  .c-lowerTitle--ceo .c-lowerTitle__ja,
  .c-lowerTitle--philosophy .c-lowerTitle__ja,
  .c-lowerTitle--history .c-lowerTitle__ja,
  .c-lowerTitle--outline .c-lowerTitle__ja,
  .c-lowerTitle--access .c-lowerTitle__ja,
  .c-lowerTitle--service .c-lowerTitle__ja {
    left: 34px;
  }

  .c-lowerTitle__en {
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    font-size: 30px;
  }

  .c-marker {
    background-position: 0 calc(100% - 4px);
    background-size: 100% 4px;
  }

  .c-marker--wide {
    background-position: 0 100%;
    background-size: 100% 9px;
  }

  .c-secTitle__en {
    font-size: 13px;
  }

  .c-secTitle__ja {
    margin-top: 8px;
    font-size: 24px;
  }

  .c-waveText {
    background-size: 660px 4px;
    padding-bottom: 9px;
  }

  .c-waveText--lg {
    background-size: 650px 6px;
    padding-bottom: 12px;
  }

  .c-waveText--sm {
    background-size: 902px 5px;
    padding-bottom: 8px;
  }

  .c-waveText--md {
    background-size: 760px 8px;
    padding-bottom: 14px;
  }

  .c-waveText--xl {
    background-size: 756px 7px;
    padding-bottom: 16px;
  }

  .c-waveText--mn {
    background-size: 640px 8px;
    padding-bottom: 14px;
  }

  .c-waveText--mnItem {
    background-size: 728px 6px;
    padding-bottom: 12px;
    min-width: 0;
    white-space: normal;
  }

  .p-404 {
    padding-block: 56px 72px;
  }

  .p-404__title {
    font-size: 20px;
  }

  .p-404__body {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.8;
  }

  .p-404__foot {
    margin-top: 32px;
  }

  .p-access__inner {
    padding-inline: 30px;
    padding-top: 64px;
    max-width: none;
  }

  .p-access__address {
    margin-top: 24px;
    padding-left: 0;
    font-size: 14px;
    line-height: 1.6;
  }

  .p-access__map {
    aspect-ratio: 4/3;
    margin-top: 20px;
  }

  .p-article {
    padding-block: 40px 56px;
  }

  .p-article__header {
    margin-bottom: 24px;
  }

  .p-article__title {
    margin-top: 16px;
    font-size: 20px;
  }

  .p-article__header img {
    margin-top: 20px;
  }

  .p-article__footer {
    gap: 16px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 20px;
  }

  .p-article__paginateLink {
    gap: 4px;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
    font-size: 13px;
  }

  .p-article__previousBtn {
    padding-inline: 20px;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    min-height: 48px;
    font-size: 14px;
  }

  .p-breadcrumb {
    padding-block: 16px;
    font-size: 13px;
  }

  .p-breadcrumb__list {
    gap: 4px 6px;
  }

  .p-breadcrumb__item + .p-breadcrumb__item::before {
    margin-right: 6px;
  }

  .p-companyPale {
    padding-bottom: 60px;
  }

  .p-ceo__inner {
    padding-inline: 30px;
    padding-top: 56px;
    max-width: none;
  }

  .p-ceo__lead {
    row-gap: 10px;
    margin-top: 24px;
    font-size: 20px;
  }

  .p-ceo__body {
    margin-top: 24px;
    max-width: none;
    font-size: 15px;
    line-height: 1.8;
  }

  .p-ceo__body p + p {
    margin-top: 20px;
  }

  .p-ceo__sign {
    gap: 8px 12px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    margin-top: 24px;
  }

  .p-ceo__signRole {
    top: 0;
    font-size: 14px;
  }

  .p-ceo__signName {
    margin-left: 0;
    font-size: 20px;
    word-spacing: 1px;
  }

  .p-ceo__signEn {
    top: 0;
    margin-left: 0;
    font-size: 14px;
  }

  .p-ceo__photo {
    margin-inline: auto;
    position: static;
    -webkit-mask-position: left top, -19px bottom;
    mask-position: left top, -19px bottom;
    -webkit-mask-size: 100% calc(100% - 8px + 1px), 60px 8px;
    mask-size: 100% calc(100% - 8px + 1px), 60px 8px;
    margin-top: 32px;
    width: 100%;
    max-width: 420px;
  }

  /* tab 以下はセクションの高さが大きく変わるので、幅基準だと下まで届かない。
     cover でセクション全体を覆う（service のメッシュと同じ扱い） */

  /* 柄の細かさを保ったまま下まで届かせるため、縦にリピートさせる。
     img のままでは繰り返せないのでセクションの ::before に背景として敷き、
     img は隠す（マークアップは PC と共通のまま触らない）。service と同じ扱い */
  .p-topWhite__mesh {
    display: none;
  }

  .p-topWhite::before {
    inset: 0;

    /* repeat-y の継ぎ目が横線として出るので、タイルごとに上下を透過させて境目をぼかす。
       タイル高 = 幅 180% ÷ 柄のアスペクト比（309:152） */
    --mesh-tile: calc(100vw * 1.8 * 152 / 309);
    position: absolute;
    -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: repeating-linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
    -webkit-mask-size: 100% var(--mesh-tile);
    mask-size: 100% var(--mesh-tile);
    background-image: url('../img/top/deco-mesh-white.svg');
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 180% auto;
    pointer-events: none;
    content: '';
  }

  .p-companyIntro {
    padding-top: 56px;
  }

  .p-companyIntro__inner {
    gap: 32px;
    padding-inline: 30px;
    grid-template-columns: 1fr;
    max-width: none;
  }

  .p-companyIntro__lead {
    margin-top: 24px;
    font-size: 20px;
  }

  .p-companyIntro__text {
    margin-top: 16px;
    font-size: 15px;
  }

  .p-companyIntro__action {
    margin-top: 28px;
  }

  .p-companyIntro__photo {
    margin-top: 0;
    width: 100%;
  }

  .p-cta {
    padding-block: 56px;
  }

  /* marunage は step の直後に置くので上下の余白が違う */
  .p-cta--mn {
    background-color: #fff;
    padding-top: calc(119 * var(--1px));
    padding-bottom: calc(108 * var(--1px));
  }

  .p-cta__list {
    gap: 24px;
  }

  .p-cta__link {
    padding-inline: 24px 60px;
    gap: 16px;
    -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, .16);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .16);
    border-radius: 6px;
    width: 320px;
    min-height: 96px;
    font-size: 16px;
  }

  .p-cta__icon {
    width: 34px;
  }

  .p-cta__icon--mail {
    width: 46px;
  }

  .p-cta__wave {
    right: 18px;
    width: 48px;
    height: 7px;
  }

  .p-footer__inner {
    gap: 24px;
    padding-block: 40px;
    padding-inline: 30px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .p-footer__meta {
    white-space: normal;
  }

  .p-footer__company,
  .p-footer__navLink {
    font-size: 16px;
  }

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

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

  .p-footer__brand {
    gap: 16px;
  }

  .p-footer__logo img {
    width: 110px;
  }

  .p-footer__navList {
    gap: 8px 24px;
  }

  .p-qtStep + .c-form {
    margin-top: 32px;
  }

  .p-form__inner {
    padding-block: 48px 56px;
    padding-inline: 30px;
    max-width: none;
  }

  /* 上下のメッシュは PC では同じ絶対位置に置いて 1 枚の柄に見せている
     （それぞれの親の overflow: hidden で別の帯だけが見える）。
     tab 以下は両方に別々のオフセットが付いていたため継ぎ目で柄が飛び、
     2 重に見えていた。上（FV 側）は出さず、下（service 側）だけに任せる */
  .p-topHero__mesh {
    display: none;
  }

  /* 船は FV の帯の高さに収める。はみ出すと下の図面線画とぶつかる */
  .p-topHero__ship {
    top: 80px;
    left: 0;
    width: 100%;
  }

  .p-fv {
    padding-inline: 30px;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .p-fv__title {
    font-size: 34px;
    line-height: 1.5;
  }

  .p-fv__lead {
    margin-top: 24px;
    font-size: 18px;
  }

  .p-topHero__mesh {
    -webkit-animation: none;
    animation: none;
  }

  .p-header__nav {
    display: none;
  }

  .p-header__cta {
    display: none;
  }

  .p-header__drawer {
    display: block;
    margin-left: auto;
  }

  .p-header__inner {
    padding-left: 20px;
    min-height: 60px;
  }

  .p-header__logo img {
    width: 85px;
  }

  .p-history {
    -webkit-mask-position: left top, left 11px;
    mask-position: left top, left 11px;
    -webkit-mask-size: 90px 12px, 100% calc(100% - 12px + 1px);
    mask-size: 90px 12px, 100% calc(100% - 12px + 1px);
    margin-top: -14px;
    padding-top: 64px;
    padding-bottom: 56px;
  }

  /* カンプに SP 版が無いので、PC の構図（右下に船首を残す）を保ったまま
     はみ出すぶんは .p-history の overflow: hidden で切る。
     本文の裏なので、読みにくくならないよう少し薄くする */
  .p-history__ship {
    top: 120px;
    left: 40%;
    opacity: .5;
    background-position: left top;
    width: 90%;
    height: 60%;
  }

  .p-history__inner {
    padding-inline: 30px;
    max-width: none;
  }

  .p-history__list {
    margin-top: 32px;
  }

  /* PC と同じく「PHASE / 年 / 月日＋本文」を横に並べる */
  .p-history__item {
    display: grid;
    grid-template-columns: 64px auto 1fr;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    padding-bottom: 28px;
    height: auto;
  }

  .p-history__item::after {
    top: 66px;
    left: 32px;
    height: calc(100% - 66px);
  }

  .p-history__phase {
    position: relative;
    width: 60px;
    height: 60px;
  }

  .p-history__phase::before {
    top: -4px;
    bottom: -4px;
  }

  .p-history__phase::after {
    right: -4px;
    left: -4px;
  }

  .p-history__phaseLabel {
    padding-top: 8px;
    font-size: 11px;
  }

  .p-history__phaseNum {
    padding-top: 6px;
    font-size: 28px;
  }

  .p-history__year {
    position: static;
    -webkit-align-self: start;
    -ms-flex-item-align: start;
    align-self: start;
    padding-top: 4px;
    font-size: 25px;
    word-spacing: -6px;
  }

  .p-history__body {
    position: static;
  }

  .p-history__itemTitle {
    font-size: 18px;
  }

  .p-history__text {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
  }

  .p-lowerFv {
    height: 220px;
  }

  .p-lowerFv--services {
    height: 260px;
  }

  .p-lowerFv--price {
    height: 280px;
  }

  .p-lowerFv--price .p-lowerFv__inner {
    padding-top: 56px;
  }

  .p-lowerFv__lead {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.75;
  }

  .p-lowerFv__inner {
    padding-top: 72px;
  }

  .p-lowerFv__title {
    font-size: 46px;
  }

  .p-lowerFv__subTitle {
    margin-top: 12px;
    font-size: 16px;
  }

  .p-mnBenefit__inner {
    padding-block: 56px 64px;
    padding-inline: 30px;
    max-width: none;
  }

  .p-mnBenefit__brand {
    font-size: 48px;
  }

  .p-mnBenefit__sub {
    margin-top: 20px;
    font-size: 22px;
  }

  .p-mnBenefit__catch {
    margin-top: 40px;
    font-size: 26px;
    line-height: 1.5;
  }

  .p-mnBenefit__lead {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.8;
  }

  .p-mnBenefit__compare {
    row-gap: 40px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 48px;
  }

  .p-mnBenefit__figure {
    width: 100%;
    max-width: 420px;
  }

  .p-mnBenefit__arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 56px;
  }

  .p-mnBadge {
    row-gap: 8px;
    top: -28px;
    width: 130px;
    height: 130px;
  }

  .p-mnBadge--before {
    left: -14px;
  }

  .p-mnBadge--after {
    right: -14px;
  }

  .p-mnBadge__en {
    font-size: 18px;
  }

  .p-mnBadge__en::after {
    -webkit-mask-size: 360px 4px;
    mask-size: 360px 4px;
    margin-top: 8px;
    width: 88px;
    height: 4px;
  }

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

  .p-mnBenefit__cards {
    row-gap: 20px;
    margin-top: 48px;
  }

  .p-mnBenefit__card {
    row-gap: 16px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    border-radius: 10px;
    padding: 24px;
    min-height: 0;
  }

  .p-mnBenefit__cardIconBox {
    width: 84px;
  }

  .p-mnBenefit__cardIcon {
    width: calc(var(--mn-icon-w) * .55px);
  }

  .p-mnBenefit__cardTitle {
    font-size: 18px;
    line-height: 1.4;
  }

  .p-mnBenefit__cardText {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.8;
  }

  .p-mnFv {
    padding-block: 48px 56px;
    min-height: 0;
  }

  .p-mnFv::before {
    height: 62%;
  }

  /* PC はカンプどおり左寄せだが、タブレット以下は右側が大きく空くので中央寄せにする */
  .p-mnFv__inner {
    padding-inline: 30px;
    max-width: none;
    text-align: center;
  }

  .p-mnFv__title {
    margin-left: 0;
    padding-top: 0;
    font-size: 46px;
    line-height: 1.05;
  }

  /* Services + Marunage を 1 行に並べると Marunage だけ右へ大きく張り出して
     タイトル全体が中央に見えないので、タブレット以下は 1 語ずつ縦に積む */
  .p-mnFv__titleRow {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
  }

  .p-mnFv__brand {
    top: 0;
    font-size: 48px;
  }

  .p-mnFv__lead {
    margin-top: 24px;
    margin-left: 0;
    font-size: 24px;
    line-height: 1.4;
  }

  .p-mnFv__note {
    margin-top: 12px;
    margin-left: 0;
    font-size: 13px;
    line-height: 1.7;
  }

  .p-mnFv__catch {
    margin-top: 48px;
  }

  .p-mnFv__photo {
    -webkit-box-shadow: 0 0 0 4px #21A9DF;
    box-shadow: 0 0 0 4px #21A9DF;
    width: 220px;
  }

  .p-mnFv__catchText {
    margin-top: 24px;
    margin-left: 0;
    font-size: 22px;
  }

  .p-mnPlan__priceItem--note {
    font-size: 14px;
  }

  .p-mnPlan__inner {
    padding-inline: 30px;
    padding-top: 56px;
    max-width: none;
  }

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

  .p-mnPlan__title {
    margin-top: 16px;
    font-size: 26px;
  }

  .p-mnPlan__cards {
    row-gap: 40px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 40px;
  }

  .p-mnPlan__card {
    -webkit-box-shadow: 6px 6px 12px rgba(18, 43, 136, .14);
    box-shadow: 6px 6px 12px rgba(18, 43, 136, .14);
    border-top-width: 3px;
    border-radius: 8px;
    padding: 22px 22px 32px;
    width: 100%;
    max-width: 560px;
  }

  .p-mnPlan__labelRow {
    -webkit-column-gap: 14px;
    -moz-column-gap: 14px;
    column-gap: 14px;
  }

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

  .p-mnPlan__labelNum {
    margin-top: 6px;
    font-size: 36px;
  }

  .p-mnPlan__name {
    font-size: 20px;
  }

  .p-mnPlan__catch {
    margin-top: 28px;
    font-size: 17px;
    line-height: 1.6;
  }

  .p-mnPlan__price {
    row-gap: 8px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 16px;
    -moz-column-gap: 16px;
    column-gap: 16px;
    margin-top: 24px;
    padding: 14px 16px;
  }

  .p-mnPlan__priceItem + .p-mnPlan__priceItem {
    padding-left: 16px;
  }

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

  .p-mnPlan__priceMark {
    vertical-align: 2px;
    margin-right: 2px;
    font-size: 12px;
  }

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

  .p-mnPlan__subTitle {
    margin-top: 28px;
    font-size: 15px;
  }

  .p-mnPlan__services {
    margin-top: 12px;
  }

  .p-mnPlan__service {
    padding-block: 6px;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    min-height: 0;
    font-size: 13px;
    line-height: 1.6;
  }

  .p-mnPlan__service::before {
    margin-top: 1px;
    width: 20px;
    height: 20px;
  }

  .p-mnPlan__subTitle--recommend {
    margin-top: 20px;
    border-top-width: 2px;
    padding-top: 20px;
  }

  .p-mnPlan__recommend {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.8;
  }

  .p-mnProblem__inner {
    padding-block: 56px 64px;
    padding-inline: 30px;
    max-width: none;
  }

  /* 1 列積みでは本文の実寸より枠が広く、リスト全体が左に寄って見える。
     一番長い行の幅にリストを合わせてから中央に置く（項目の左端は揃ったまま） */
  .p-mnProblem__list {
    row-gap: 32px;
    margin-inline: auto;
    grid-template-columns: 1fr;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
  }

  .p-mnProblem__item {
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }

  .p-mnProblem__iconBox {
    width: 84px;
  }

  .p-mnProblem__icon {
    width: calc(var(--mn-icon-w) * .62px);
  }

  .p-mnProblem__itemTitle {
    font-size: 18px;
  }

  .p-mnProblem__text {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.7;
  }

  .p-mnProblem__summary {
    margin-top: 48px;
    font-size: 22px;
    line-height: 1.5;
  }

  .p-mnProblem__arrow {
    margin-top: 24px;
    width: 72px;
  }

  .p-mnService__inner {
    padding-inline: 30px;
    padding-top: 80px;
    max-width: none;
  }

  .p-mnService__title {
    font-size: 24px;
  }

  .p-mnService__card {
    margin-top: 32px;
    padding: 24px 20px 32px;
  }

  .p-mnService__stepTitle {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    column-gap: 8px;
    font-size: 18px;
  }

  .p-mnService__step {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    padding-bottom: 16px;
  }

  .p-mnService__step + .p-mnService__step {
    padding-top: 16px;
  }

  .p-mnService__stepText {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.8;
  }

  .p-mnSideCta {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-transform: none;
    transform: none;
    width: auto;
  }

  .p-mnSideCta__link {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
    padding: 8px 4px;
    min-height: 56px;
    font-size: 13px;
  }

  .p-mnStep__inner {
    padding-block: 56px 48px;
    padding-inline: 30px;
    max-width: none;
  }

  .p-mnStep__title {
    font-size: 24px;
  }

  .p-mnStep__list {
    gap: 40px 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 40px auto 0;
    width: auto;
    max-width: 560px;
  }

  .p-mnStep__item {
    width: calc(50% - 10px);
  }

  /* 横並びが崩れるので、つなぐ線と区切り線は出さない。
     PC 側が :not(:last-child) 付きなので、こちらも同じ詳細度で打ち消す */
  .p-mnStep__item:not(:last-child)::before,
  .p-mnStep__item:not(:last-child)::after {
    content: none;
  }

  .p-mnStep__num {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    margin-left: 0;
    font-size: 32px;
  }

  .p-mnStep__circle {
    margin-top: 4px;
    -webkit-box-shadow: inset 0 0 0 4.5px #fff, inset 0 0 0 6px #122B88;
    box-shadow: inset 0 0 0 4.5px #fff, inset 0 0 0 6px #122B88;
    border-width: 2px;
    width: 120px;
    height: 120px;
  }

  .p-mnStep__icon {
    width: calc(var(--mn-step-icon-w) * .6px);
  }

  .p-mnStep__itemTitle {
    margin-top: 16px;
    font-size: 16px;
  }

  .p-mnStep__itemTitle::after {
    margin-top: 12px;
  }

  .p-mnStep__text {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.7;
  }

  /* 背景画像は 1920 幅のカンプから起こしたもの。1 列に積むこの幅では十字の飾り線が
     写真の上を横切ってしまうので、紺のベタ塗りだけにする（本人指定 2026-09-25） */
  .p-mnStrength {
    background-image: none;
  }

  .p-mnStrength__inner {
    padding-block: 56px 64px;
    padding-inline: 30px;
    max-width: none;
    min-height: 0;
  }

  .p-mnStrength__title {
    padding-top: 0;
    font-size: 24px;
  }

  .p-mnStrength__mark {
    margin-inline: 10px;
  }

  .p-mnStrength__list {
    gap: 48px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 48px auto 0;
    max-width: 560px;
  }

  /* PC のジグザグをやめて 1 列に積むので、見出しと同じく項目の中身も中央に置く */
  .p-mnStrength__item {
    position: static;
    width: auto;
    text-align: center;
  }

  .p-mnStrength__num {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: 0;
    font-size: 44px;
  }

  .p-mnStrength__numMark {
    font-size: 24px;
  }

  .p-mnStrength__photo {
    margin-inline: auto;
    margin-top: 8px;
    width: 240px;
  }

  .p-mnStrength__itemTitle {
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.5;
  }

  .p-mnStrength__text {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.8;
  }

  .p-notice {
    padding-block: 56px;
  }

  .p-notice__inner {
    padding-inline: 30px;
    max-width: none;
  }

  .p-notice__list {
    margin-top: 32px;
  }

  .p-notice__item + .p-notice__item {
    margin-top: 20px;
  }

  .p-notice__link {
    gap: 8px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .p-notice__date {
    width: 100px;
    min-height: 26px;
    font-size: 13px;
  }

  .p-notice__title {
    -webkit-line-clamp: 2;
    font-size: 15px;
  }

  .p-notice__empty {
    margin-top: 24px;
    font-size: 15px;
  }

  .p-companyWhite {
    padding-bottom: 56px;
  }

  /* tab 以下はセクションの高さが大きく変わるので、幅基準だと下まで届かない。
     cover でセクション全体を覆う（service のメッシュと同じ扱い） */

  /* 柄の細かさを保ったまま下まで届かせるため、縦にリピートさせる。
     img のままでは繰り返せないのでセクションの ::before に背景として敷き、
     img は隠す（マークアップは PC と共通のまま触らない）。service と同じ扱い */
  .p-companyWhite__mesh {
    display: none;
  }

  .p-companyWhite::before {
    inset: 0;

    /* repeat-y の継ぎ目が横線として出るので、タイルごとに上下を透過させて境目をぼかす。
       タイル高 = 幅 180% ÷ 柄のアスペクト比（3939:2939） */
    --mesh-tile: calc(100vw * 1.8 * 2939 / 3939);
    position: absolute;
    -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: repeating-linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
    -webkit-mask-size: 100% var(--mesh-tile);
    mask-size: 100% var(--mesh-tile);
    background-image: url('../img/company/deco-mesh-white.svg');
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 180% auto;
    pointer-events: none;
    content: '';
  }

  .p-outline__inner {
    padding-inline: 30px;
    padding-top: 64px;
    max-width: none;
  }

  .p-outline__logo {
    margin-top: 40px;
    width: 180px;
  }

  .p-outline__table {
    margin-top: 32px;
    width: 100%;
  }

  .p-outline__table::before {
    display: none;
  }

  .p-outline__row {
    padding-block: 14px;
    grid-template-columns: 96px 1fr;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    height: auto;
  }

  .p-outline__row::before,
  .p-outline__row::after {
    display: none;
  }

  .p-outline__label {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-size: 14px;
    line-height: 1.6;
  }

  .p-outline__data {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-size: 14px;
    line-height: 1.6;
  }

  .p-outline__dataLine + .p-outline__dataLine {
    margin-top: 4px;
  }

  .p-philosophy__inner {
    padding-inline: 30px;
    padding-top: 64px;
    max-width: none;
  }

  .p-philosophy__lead {
    row-gap: 12px;
    margin-top: 24px;
    font-size: 26px;
  }

  .p-philosophy__body {
    margin-top: 24px;
    max-width: none;
    font-size: 15px;
    line-height: 2;
  }

  .p-philosophy__body p + p {
    margin-top: 24px;
  }

  .p-philosophy__chart {
    position: static;
    margin: 40px auto 0;
    width: 100%;
    max-width: 480px;
    height: auto;
  }

  .p-philosophy__list {
    gap: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: auto;
  }

  .p-philosophy__item {
    position: static;
    -webkit-box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 9px #122B88;
    box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 9px #122B88;
    border-width: 3px;
    padding-top: 36px;
    width: 220px;
    height: 220px;
  }

  .p-philosophy__icon {
    width: 77px;
  }

  .p-philosophy__itemTitle {
    margin-top: 13px;
    font-size: 22px;
  }

  .p-philosophy__itemText {
    margin-top: 8px;
    font-size: 14px;
  }

  .p-philosophy__line {
    display: none;
  }

  .p-philosophy__logo {
    display: block;
    position: static;
    margin: 24px auto 0;
    width: 160px;
  }

  .p-priceCta {
    padding-top: 40px;
  }

  .p-priceCta__list {
    gap: 24px;
  }

  .p-priceCta__link {
    border-radius: 14px;
    padding: 7px;
    width: 280px;
    min-height: 120px;
  }

  .p-priceCta__inner {
    padding-inline: 14px;
    -webkit-column-gap: 14px;
    -moz-column-gap: 14px;
    column-gap: 14px;
    border-radius: 9px;
  }

  .p-priceCta__icon {
    width: 32px;
  }

  .p-priceCta__label {
    font-size: 15px;
    line-height: 1.6;
  }

  .p-priceCta__wave {
    width: 34px;
    height: 6px;
  }

  .p-priceCta__note {
    margin-top: 24px;
  }

  .p-priceIntro {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .p-priceIntro__head {
    padding-inline: 30px;
    max-width: none;
  }

  /* PC では写真が画面左端からはみ出すが、tab 以下は 1 列に積むので
     写真だけ端まで伸びると本文と揃わない。左右の余白は body でまとめて持つ */
  .p-priceIntro__body {
    gap: 24px;
    padding-inline: 30px;
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .p-priceIntro__photo {
    margin-left: 0;
    width: 100%;
  }

  .p-priceIntro__content {
    padding-inline: 0;
    padding-top: 0;
  }

  .p-priceIntro__lead {
    font-size: 20px;
  }

  .p-priceIntro__text {
    margin-top: 16px;
    font-size: 15px;
  }

  .p-priceIntro__action {
    margin-top: 28px;
  }

  .p-priceBody {
    padding-bottom: 56px;
  }

  .p-price__inner {
    padding-inline: 30px;
    max-width: none;
  }

  .p-priceTab {
    margin-top: -40px;
  }

  .p-priceTab__list {
    grid-template-columns: repeat(3, 1fr);
    border-radius: 10px;
  }

  .p-priceTab__item {
    min-height: 56px;
  }

  /* 3 列になるので縦罫は使わず、セル境界に薄い線を引く */
  .p-priceTab__item + .p-priceTab__item {
    background-image: none;
  }

  .p-priceTab__link {
    padding: 6px 8px;
    font-size: 13px;
  }

  .p-priceTab__link::before {
    top: 6px;
    width: 7px;
    height: 7px;
  }

  /* 波線 SVG は 1 枚に 104 山ぶん入っている（viewBox 1300）。
     16px に縮めると 104 山が潰れて二重線のように見えていた。
     PC と同じ比（要素幅 : タイル幅 = 140 : 1300）を保つ → 84 * 1300/140 = 780 */
  .p-priceTab__link::after {
    bottom: 8px;
    background-size: 780px 6px;
    width: 84px;
    height: 6px;
  }

  .p-price__title {
    padding-top: 40px;
    font-size: 22px;
  }

  /* 260px を下回ったら自動で 1 列に落ちる。max-width で 1024px 側を 2 列に抑える */
  .p-price__lines {
    margin-top: 20px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.8;
  }

  .p-priceTable {
    gap: 24px;
    margin-inline: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    margin-top: 28px;
    max-width: 760px;
  }

  .p-priceTable + .p-price__groupTitle {
    margin-top: 40px;
  }

  .p-price__groupTitle {
    margin-inline: auto;
    padding-top: 32px;
    max-width: 760px;
    font-size: 17px;
  }

  .p-price__groupTitle + .p-priceTable {
    margin-top: 16px;
  }

  .p-price__note {
    margin-inline: auto;
    margin-top: 24px;
    max-width: 760px;
    font-size: 13px;
    line-height: 1.8;
  }

  .p-priceTable__col {
    gap: 12px;
  }

  .p-priceTable__colTitle {
    font-size: 17px;
  }

  .p-priceTable__cards {
    gap: 12px;
    margin-top: 12px;
  }

  .p-priceTable__col--bwSm .p-priceCard,
  .p-priceTable__col--clSm .p-priceCard,
  .p-priceTable__col--bwLg .p-priceCard,
  .p-priceTable__col--clLg .p-priceCard:first-child,
  .p-priceTable__col--clLg .p-priceCard:not(:first-child) {
    min-height: 0;
  }

  .p-priceCard {
    padding-bottom: 12px;
  }

  .p-priceCard__head {
    padding-inline: 20px;
    min-height: 52px;
    font-size: 13px;
  }

  .p-priceCard__band {
    min-height: 56px;
  }

  .p-priceCard__band {
    gap: 2px 8px;
    padding-inline: 14px;
  }

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

  .p-priceCard__price {
    font-size: 16px;
  }

  .p-priceCard__num {
    font-size: 30px;
  }

  .p-priceCard__num--long {
    font-size: 25px;
  }

  .p-priceCard__tiers {
    margin-block: 16px 4px;
    margin-inline: 20px;
    font-size: 14px;
  }

  .p-priceCard__tier {
    padding-inline: 2px;
    border-bottom-width: 2px;
    min-height: 28px;
  }

  .p-qtBlock {
    position: static;
    padding-left: 0;
  }

  .p-qtBlock__head {
    position: static;
    -webkit-transform: none;
    transform: none;
    margin-bottom: 24px;
    width: auto;
  }

  .p-qtBlock__step {
    margin-bottom: 8px;
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .p-qtBlock__icon {
    width: calc(var(--qt-icon-w) * .6px);
  }

  .p-qtBlock__title {
    margin-top: 12px;
    font-size: 17px;
  }

  .p-qtConfirm .c-form__card,
  .p-qtDone .c-form__card {
    padding-inline: 30px;
  }

  .p-qtConfirm__title,
  .p-qtDone__title {
    font-size: 20px;
  }

  .p-qtConfirm__lead,
  .p-qtDone__text {
    margin-top: 12px;
    font-size: 14px;
  }

  .p-qtConfirm__list {
    margin-top: 24px;
  }

  .p-qtConfirm__item {
    row-gap: 4px;
    padding-block: 14px;
    grid-template-columns: 1fr;
  }

  .p-qtConfirm__label,
  .p-qtConfirm__value {
    font-size: 14px;
  }

  .p-qtConfirm__actions,
  .p-qtDone__actions {
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    margin-top: 32px;
  }

  .p-qtConfirm__back {
    border-width: 1px;
    width: 200px;
    min-height: 56px;
    font-size: 14px;
  }

  .p-qtConfirm__backIcon {
    width: 16px;
    height: 16px;
  }

  .p-qtDone__note {
    margin-top: 20px;
    font-size: 12px;
  }

  .p-qtStep__item {
    width: 25%;
  }

  .p-qtStep__circle {
    width: 60px;
    height: 60px;
  }

  .p-qtStep__num {
    font-size: 24px;
  }

  .p-qtStep__label {
    margin-top: 10px;
    font-size: 12px;
  }

  .p-qtStep__item:not(:last-child)::after {
    top: 30px;
    left: calc(50% + 30px);
    background-size: 100% 2px;
    width: calc(100% - 60px);
    height: 8px;
  }

  .p-qtStep__item--current:not(:last-child)::after {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4b5fa5), to(#4b5fa5));
    background-image: linear-gradient(#4b5fa5, #4b5fa5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 2px;
  }

  /* tab 以下はカードが縦積みになってセクションの高さが大きく変わる（768 で 1364px /
     390 で 2616px）。柄の原寸は 3827x2386 の横長なので、
     　・幅を基準に置く → 柄の細かさは保てるが下まで届かない
     　・cover で覆う   → 下まで届くが横方向が原寸の 1 割しか見えず柄が粗い
     どちらも成り立たないため、**柄を縦にリピート**して両立させる。
     img のままでは繰り返せないので、セクションの ::before に背景として敷き、
     img は隠す（マークアップは PC と共通のまま触らない）。 */
  .p-service__mesh {
    display: none;
  }

  .p-service::before {
    inset: 0;

    /* repeat-y の継ぎ目が横線として出るので、タイルごとに上下を透過させて境目をぼかす。
       タイル高 = 幅 180% ÷ 柄のアスペクト比（383:239） */
    --mesh-tile: calc(100vw * 1.8 * 239 / 383);
    position: absolute;
    -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: repeating-linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
    -webkit-mask-size: 100% var(--mesh-tile);
    mask-size: 100% var(--mesh-tile);
    background-image: url('../img/common/deco-mesh-blue.svg');
    background-position: right top;
    background-repeat: repeat-y;
    background-size: 180% auto;
    pointer-events: none;
    content: '';
  }

  .p-service {
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .p-service__inner {
    padding-inline: 30px;
    max-width: none;
  }

  .p-service__list {
    gap: 32px 24px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 32px;
  }

  .p-service__label {
    margin-top: 16px;
    font-size: 16px;
  }

  .p-service__mesh {
    -webkit-animation: none;
    animation: none;
  }

  .p-servicesBody {
    padding-bottom: 64px;
  }

  .p-serviceList__inner {
    padding-inline: 30px;
    padding-top: 56px;
    max-width: none;
  }

  /* 240px を下回ったら自動で 1 列に落ちる（ブレークポイントを増やさない）。
     max-width 700 で 1024px 側の列数を 2 に抑えている */
  .p-serviceList__list {
    gap: 24px;
    margin-inline: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    margin-top: 32px;
    max-width: 700px;
  }

  .p-serviceList__item {
    padding: 20px;
    min-height: 0;
  }

  .p-serviceList__cardTitle {
    margin-top: 20px;
    font-size: 16px;
  }

  .p-serviceList__text {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.8;
  }

  .p-serviceList__btn {
    margin-top: 20px;
  }

  .p-serviceOther__inner {
    padding-inline: 30px;
    padding-top: 64px;
    max-width: none;
  }

  .p-serviceOther__title {
    font-size: 22px;
  }

  .p-serviceOther__list {
    gap: 24px;
    margin-inline: auto;
    grid-template-columns: 1fr;
    margin-top: 32px;
    max-width: 700px;
  }

  /* 写真とテキストが入りきらなくなったら折り返して縦積みになる */
  .p-serviceOther__item {
    gap: 20px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 20px;
    min-height: 0;
  }

  .p-serviceOther__photo {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 220px;
    -ms-flex: 1 1 220px;
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  .p-serviceOther__body {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 240px;
    -ms-flex: 1 1 240px;
    flex: 1 1 240px;
  }

  .p-serviceOther__cardTitle {
    font-size: 16px;
  }

  .p-serviceOther__text {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.8;
  }

  .p-serviceOther__btn {
    margin-top: 20px;
  }

  .p-whatWeDo {
    padding-bottom: 60px;
  }

  .p-whatWeDo__inner {
    padding-inline: 30px;
  }

  /* PC と同じく「見出しの下から始まる」関係を保つ。
     60px だと FV の船の下端とぶつかる */
  .p-whatWeDo__drawing {
    top: 200px;
    left: -10%;
    width: 120%;
  }

  .p-whatWeDo__label {
    gap: 10px;
    font-size: 28px;
  }

  .p-whatWeDo__label::before {
    width: 8px;
    height: 8px;
  }

  .p-whatWeDo__title {
    margin-top: 24px;
    font-size: 20px;
    line-height: 1.7;
  }

  .p-whatWeDo__text {
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.9;
  }

  .p-whatWeDo__watermark {
    margin-top: 40px;
    margin-left: 0;
    font-size: 24px;
  }

  .p-whatWeDo__body {
    gap: 32px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .p-whatWeDo__action {
    margin-top: 24px;
  }

  .p-whatWeDo__photo {
    margin-top: 0;
    margin-left: 0;
    width: 100%;
  }

  .p-whatWeDo__text br,
  .p-companyIntro__text br,
  .p-priceIntro__text br,
  .p-ceo__body br,
  .p-philosophy__body br {
    display: none;
  }
}

@media screen and (max-width: 767px) {

  .u-onlySp {
    display: block;
  }

  .u-hidden--sp {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {

  :root {
    --1px: calc(var(--vw, 100vw) / 390);
  }

  .l-container {
    padding-inline: 20px;
  }

  .c-form--quotation .c-form__card,
  .c-form--simple .c-form__card {
    padding-inline: 16px;
  }

  .c-form__labelText {
    font-size: 14px;
  }

  .c-form__submit[type=submit],
  .c-form__submit[type=button] {
    width: 100%;
    max-width: 280px;
    min-height: 76px;
    font-size: 16px;
  }

  .p-404__title {
    font-size: 17px;
  }

  .p-404__body {
    font-size: 13px;
  }

  .p-access__inner {
    padding-inline: 20px;
  }

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

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

  .p-ceo__inner {
    padding-inline: 20px;
  }

  .p-ceo__lead {
    font-size: 17px;
  }

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

  .p-companyIntro__inner {
    padding-inline: 20px;
  }

  .p-footer__inner {
    padding-inline: 20px;
  }

  .p-form__inner {
    padding-inline: 20px;
  }

  .p-fv {
    padding-inline: 20px;
  }

  .p-fv__title {
    font-size: 28px;
  }

  .p-fv__lead {
    font-size: 16px;
  }

  .p-history__inner {
    padding-inline: 20px;
  }

  /* 3 列のままだと本文が細くなりすぎるので、列の間だけ詰める */
  .p-history__item {
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
  }

  .p-history__year {
    padding-top: 2px;
    font-size: 20px;
    word-spacing: -5px;
  }

  .p-lowerFv {
    height: 180px;
  }

  .p-lowerFv--services {
    height: 210px;
  }

  .p-lowerFv--price {
    height: 250px;
  }

  .p-lowerFv--price .p-lowerFv__inner {
    padding-top: 44px;
  }

  .p-lowerFv__inner {
    padding-top: 56px;
  }

  .p-lowerFv__title {
    font-size: 36px;
  }

  .p-mnBenefit__inner {
    padding-inline: 20px;
  }

  .p-mnBenefit__brand {
    font-size: 38px;
  }

  .p-mnBenefit__catch {
    font-size: 20px;
  }

  .p-mnBenefit__cardTitle {
    font-size: 16px;
  }

  .p-mnFv__inner {
    padding-inline: 20px;
  }

  .p-mnFv__title {
    font-size: 36px;
  }

  .p-mnFv__brand {
    font-size: 38px;
  }

  .p-mnFv__lead {
    font-size: 20px;
  }

  .p-mnFv__catchText {
    font-size: 18px;
  }

  .p-mnPlan__inner {
    padding-inline: 20px;
  }

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

  .p-mnPlan__title {
    font-size: 21px;
  }

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

  .p-mnPlan__priceValue {
    font-size: 22px;
  }

  .p-mnProblem__inner {
    padding-inline: 20px;
  }

  .p-mnProblem__item {
    -webkit-column-gap: 14px;
    -moz-column-gap: 14px;
    column-gap: 14px;
  }

  .p-mnProblem__iconBox {
    width: 60px;
  }

  .p-mnProblem__icon {
    width: calc(var(--mn-icon-w) * .45px);
  }

  .p-mnProblem__itemTitle {
    font-size: 16px;
  }

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

  .p-mnProblem__summary {
    font-size: 18px;
  }

  .p-mnService__inner {
    padding-inline: 20px;
  }

  .p-mnService__title {
    font-size: 20px;
  }

  .p-mnService__stepTitle {
    font-size: 16px;
  }

  .p-mnStep__inner {
    padding-inline: 20px;
  }

  .p-mnStep__title {
    font-size: 20px;
  }

  .p-mnStep__circle {
    -webkit-box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px #122B88;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px #122B88;
    width: 96px;
    height: 96px;
  }

  .p-mnStep__icon {
    width: calc(var(--mn-step-icon-w) * .48px);
  }

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

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

  .p-mnStrength__inner {
    padding-inline: 20px;
  }

  .p-mnStrength__title {
    font-size: 20px;
  }

  .p-mnStrength__photo {
    width: 200px;
  }

  .p-mnStrength__itemTitle {
    font-size: 16px;
  }

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

  .p-notice__inner {
    padding-inline: 20px;
  }

  .p-outline__inner {
    padding-inline: 20px;
  }

  .p-outline__row {
    grid-template-columns: 80px 1fr;
  }

  .p-outline__label,
  .p-outline__data {
    font-size: 13px;
  }

  .p-philosophy__inner {
    padding-inline: 20px;
  }

  .p-philosophy__lead {
    font-size: 21px;
  }

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

  .p-priceIntro__head,
  .p-priceIntro__body {
    padding-inline: 20px;
  }

  .p-price__inner {
    padding-inline: 20px;
  }

  .p-priceTab__list {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .p-qtBlock__icon {
    width: calc(var(--qt-icon-w) * .5px);
  }

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

  .p-qtConfirm .c-form__card,
  .p-qtDone .c-form__card {
    padding-inline: 20px;
  }

  .p-qtConfirm__actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .p-qtConfirm__back {
    width: 100%;
  }

  .p-qtStep__circle {
    width: 48px;
    height: 48px;
  }

  .p-qtStep__num {
    font-size: 20px;
  }

  .p-qtStep__label {
    font-size: 11px;
  }

  .p-qtStep__item:not(:last-child)::after {
    top: 24px;
    left: calc(50% + 24px);
    width: calc(100% - 48px);
  }

  .p-service__inner {
    padding-inline: 20px;
  }

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

  .p-serviceList__inner {
    padding-inline: 20px;
    padding-top: 40px;
  }

  .p-serviceList__list {
    gap: 20px;
  }

  .p-serviceOther__inner {
    padding-inline: 20px;
    padding-top: 48px;
  }

  .p-serviceOther__item {
    gap: 16px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .p-serviceOther__photo {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
  }

  .p-serviceOther__btn {
    margin-inline: auto;
  }

  .p-whatWeDo__inner {
    padding-inline: 20px;
  }

  .p-whatWeDo__label {
    font-size: 22px;
  }

  .p-whatWeDo__title {
    font-size: 18px;
  }

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

@media (hover: hover) {

  .c-btn:hover {

    /* カンプ実測: 下端は y=88(浅) 〜 94(深) の緩いサイン波。深い位置がタイル境界 */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52.857 100' preserveAspectRatio='none'><path d='M0 0H52.857V94C44.05 94 35.24 88 26.429 88C17.62 88 8.81 94 0 94Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52.857 100' preserveAspectRatio='none'><path d='M0 0H52.857V94C44.05 94 35.24 88 26.429 88C17.62 88 8.81 94 0 94Z' fill='black'/></svg>");
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: calc(52.857 * var(--1px)) 100%;
    mask-size: calc(52.857 * var(--1px)) 100%;
    -webkit-filter: drop-shadow(calc(6 * var(--1px)) calc(6 * var(--1px)) calc(8 * var(--1px)) rgba(0, 0, 0, .16));
    filter: drop-shadow(calc(6 * var(--1px)) calc(6 * var(--1px)) calc(8 * var(--1px)) rgba(0, 0, 0, .16));
    -webkit-animation: c-btn-wave 1.4s linear infinite;
    animation: c-btn-wave 1.4s linear infinite;

    /* mask は box-shadow も切り取ってしまうため drop-shadow に置き換える */
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: calc(8 * var(--1px)) calc(8 * var(--1px)) 0 0;
    background-color: #122B88;
    color: #fff;
  }

  /* --sm は幅が違うので波のタイル幅も変える（端で波が切れないように） */
  .c-btn--sm:hover {
    -webkit-mask-size: calc(44.833 * var(--1px)) 100%;
    mask-size: calc(44.833 * var(--1px)) 100%;
    -webkit-filter: drop-shadow(calc(4 * var(--1px)) calc(4 * var(--1px)) calc(6 * var(--1px)) rgba(0, 0, 0, .16));
    filter: drop-shadow(calc(4 * var(--1px)) calc(4 * var(--1px)) calc(6 * var(--1px)) rgba(0, 0, 0, .16));
    -webkit-animation: c-btn-wave-sm 1.4s linear infinite;
    animation: c-btn-wave-sm 1.4s linear infinite;
    border-radius: calc(4 * var(--1px)) calc(4 * var(--1px)) 0 0;
  }

  .c-form__privacy:hover {
    opacity: .7;
  }

  .c-form__submit:hover:not(:disabled) {
    -webkit-transform: translateY(calc(-3 * var(--1px)));
    transform: translateY(calc(-3 * var(--1px)));
    -webkit-filter: brightness(1.08);
    filter: brightness(1.08);
  }

  .p-article__paginateLink a:hover,
  .p-article__previousBtn:hover {
    opacity: .7;
  }

  .p-breadcrumb__link:hover {
    color: #21A9DF;
  }

  .p-cta__link:hover {
    -webkit-transform: translateY(calc(-3 * var(--1px)));
    transform: translateY(calc(-3 * var(--1px)));
    -webkit-filter: brightness(1.08);
    filter: brightness(1.08);
  }

  .p-drawer__navLink:hover {
    color: #21A9DF;
  }

  .p-footer__navLink:hover {
    color: #21A9DF;
  }

  .p-footer__privacy:hover {
    color: #21A9DF;
  }

  .p-footer__logo:hover {
    opacity: .7;
  }

  .p-header__logo a:hover {
    opacity: .7;
  }

  .p-header__navLink:hover {
    color: #21A9DF;
  }

  .p-header__ctaLink:hover {
    opacity: .7;
  }

  .p-mnSideCta__link:hover {
    -webkit-filter: brightness(1.08);
    filter: brightness(1.08);
  }

  .p-notice__link:hover {
    opacity: .7;
  }

  .p-priceCta__link:hover {
    -webkit-transform: translateY(calc(-3 * var(--1px)));
    transform: translateY(calc(-3 * var(--1px)));
    -webkit-filter: brightness(1.08);
    filter: brightness(1.08);
  }

  .p-priceTab__link:hover {
    color: #21A9DF;
  }

  .p-priceTab__link:hover::before,
  .p-priceTab__link:hover::after {
    opacity: 1;
  }

  .p-qtConfirm__back:hover {
    background-color: #122B88;
    color: #fff;
  }

  .p-service__link:hover .p-service__thumb {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62.571 431' preserveAspectRatio='none'><path d='M0 0H62.571V431C52.14 431 41.71 424 31.286 424C20.86 424 10.43 431 0 431Z' fill='black'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62.571 431' preserveAspectRatio='none'><path d='M0 0H62.571V431C52.14 431 41.71 424 31.286 424C20.86 424 10.43 431 0 431Z' fill='black'/></svg>");
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: calc(62.571 * var(--1px)) 100%;
    mask-size: calc(62.571 * var(--1px)) 100%;
    -webkit-animation: p-service-wave 1.6s linear infinite;
    animation: p-service-wave 1.6s linear infinite;
  }

  .p-service__link:hover .p-service__thumb img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
}

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

  .c-btn:hover {
    -webkit-animation: none;
    animation: none;
  }

  .p-topWhite__mesh {
    -webkit-animation: none;
    animation: none;
  }

  .p-topHero__mesh {
    -webkit-animation: none;
    animation: none;
  }

  .p-qtBlock__step {
    -webkit-transition: none;
    transition: none;
  }

  .p-service__link:hover .p-service__thumb {
    -webkit-animation: none;
    animation: none;
  }

  .p-service__mesh {
    -webkit-animation: none;
    animation: none;
  }
}