@charset "UTF-8";
html {
  font-family: 'Noto Sans JP', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}
/* ==========================================================================
  KV動画
========================================================================== */
@media all and (min-width: 1024px), print {
  body {
    height: 100dvh;
  }
  .main-contents.is-anim-locking {
    pointer-events: none !important;
  }
  .animationElement {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 10;
    opacity: 1;
  }
  .content-animation {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease-in-out;
  }
  html.is-scene-entered {
    overflow: hidden;
  }
  html.is-scene-entered .animationElement {
    opacity: 0;
    visibility: hidden;
  }
  html.is-scene-entered .content-animation {
    opacity: 1;
    pointer-events: auto;
  }
  .top-hero-mv {
    overflow: hidden;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
  }
  .top-hero__deco {
    content: '';
    position: absolute;
    right: 0;
    width: 50vw;
    height: 100dvh;
    &::before {
      z-index: 1;
      opacity: 0.65;
      position: absolute;
      content: '';
      background: var(--c-accent-500);
      width: 100%;
      height: 100%;
    }
  }
  .top-hero-video {
    z-index: 0;
    position: relative;
  }
  .top-hero-video video {
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100dvh;
    object-fit: cover;
  }
  /* Top Hero - Left Panel */
  .top-hero__in {
    position: absolute;
    left: 0;
    top: 0;
    width: 50vw;
    height: 100dvh;
    background: linear-gradient(148.13deg, rgb(235, 243, 250) 0.92%, rgb(255, 255, 255) 99.48%);
    overflow: hidden;
  }
  .top-hero__left-deco {
    position: absolute;
    inset: 0;
    background: url(../img/common/bg_kv.png) no-repeat center / cover;
    opacity: 0.12;
    pointer-events: none;
  }
  .top-hero__wrap {
    position: absolute;
    left: calc(114 / 1440 * 100vw);
    top: calc(294 / 1100 * 100vh);
    z-index: 1;
  }
  .top-hero__header {
  }
  .top-hero__body {
    margin-top: calc(40 / 1100 * 100vh);
  }
  .top-hero__in .c-header-title__sub {
    font-size: calc(14 / 1440 * 100vw);
    letter-spacing: 0.06em;
    margin-bottom: calc(40 / 1100 * 100vh);
    &::before {
      width: calc(80 / 1440 * 100vw);
      height: calc(1.4 / 1440 * 100vw);
      left: calc(-24 / 1440 * 100vw);
    }
  }
  .top-hero__in .c-header-title__label {
    font-size: calc(60 / 1440 * 100vw);
    line-height: calc(80 / 60);
    letter-spacing: 0.06em;
    color: var(--c-gray-500);
  }
  .top-hero-lead__label {
    font-size: calc(18 / 1440 * 100vw);
    color: var(--c-gray-500);
    line-height: 2;
  }
}

/* --------------------------------------------------------------------------
  TOP
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .l-main-container__in {
  }
  .main-contents {
    max-width: calc(540 / var(--fs) * 1rem);
  }
}

#fixLogo,
#side-nav {
  position: fixed;
  display: block;
}
#fixLogo {
  z-index: 11;
  width: calc(76 / var(--fs) * 1rem);
  top: calc(30 / var(--fs) * 1rem);
  left: calc(33 / var(--fs) * 1rem);
}
#side-nav {
  width: calc(50vw - calc(300 / var(--fs) * 1rem));
  top: calc(150 / var(--fs) * 1rem);
  right: calc(0 / var(--fs) * 1rem);
  padding-inline: calc(30 / var(--fs) * 1rem) calc(40 / var(--fs) * 1rem);
}
@media all and (max-width: 1023px), print {
  #side-nav {
    display: none;
  }
}
.l-main-container {
  position: fixed;
  bottom: 0;
  background: url(../img/common/pc_bg.png) center top / cover;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 0;
  &::before {
    content: '';
    position: absolute;
    aspect-ratio: 1276.31/1339.51;
    width: calc(1284 / 1440 * 100vw);
    top: calc(50% - calc(115 / 1440 * 100vw));
    left: calc(-675 / 1440 * 100vw);
    transform: rotate(15deg) translateY(-50%);
    background: url(../img/common/bg_deco_left.png) center top / cover;
    z-index: 0;
  }
  &::after {
    content: '';
    position: absolute;
    width: calc(538 / 1440 * 100vw);
    height: calc(415 / 1440 * 100vw);
    right: 0;
    bottom: 0;
    background: url(../img/common/bg_deco_right.png) center bottom / contain no-repeat;
    z-index: 0;
  }
}
.main-contents {
  opacity: 0;
  width: 100vw;
  z-index: 3;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  padding-block: calc(20 / var(--fs) * 1rem);
}
.main-contents__in {
  position: relative;
  height: calc(100dvh - calc(70 / var(--fs) * 1rem));
  max-height: calc(960 / var(--fs) * 1rem);
  margin: auto;
  scroll-behavior: smooth;
  border-radius: calc(20 / var(--fs) * 1rem);
  overflow-x: hidden;
  overflow-y: scroll;
  background: var(--c-white);
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
@media (min-aspect-ratio: 1440/1099), print {
  .l-main-container {
    &::before {
      width: calc(1284 / 1100 * 100vh);
      left: calc(-675 / 1100 * 100vh);
    }
    &::after {
      width: calc(540 / 1100 * 100vh);
    }
  }
  .main-contents {
  }
  .main-contents__in {
  }
}
.mv-sec {
  container-type: inline-size;
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.mv-sec-movie {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--c-accent-500);
    opacity: 0.65;
  }
}
.mv-sec-movie-video {
}
.mv-sec-movie-video video {
  width: 100cqi;
}
.mv-sec__in {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  height: calc(960 / var(--fs) * 1rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: calc(96 / var(--fs) * 1rem) calc(30 / var(--fs) * 1rem);
}
.mv-sec__body {
}
.mv-title {
  padding-inline: calc(36 / var(--fs) * 1rem) calc(97 / var(--fs) * 1rem);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  gap: calc(21 / var(--fs) * 1rem);
}
.mv-title-main__label {
  font-family: 'Noto Serif JP', serif;
  font-size: calc(42 / var(--fs) * 1rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
.mv-title-lead-txt__label {
  font-size: calc(14 / var(--fs) * 1rem);
  line-height: 1.857;
}
.mv-sec-content-point {
  --point-item-color: var(--c-white);
}
.mv-sec-content-point-tag {
  display: inline-block;
  background: var(--c-main-500);
  padding-inline: calc(41 / var(--fs) * 1rem) calc(19 / var(--fs) * 1rem);
  border-radius: 0 calc(50 / var(--fs) * 1rem) calc(50 / var(--fs) * 1rem) 0;
  margin-bottom: calc(20 / var(--fs) * 1rem);
}
.mv-sec-content-point-tag__label {
  display: inline-block;
  padding-block: calc(6 / var(--fs) * 1rem) calc(4 / var(--fs) * 1rem);
  font-size: calc(14 / var(--fs) * 1rem);
  color: var(--c-white);
  font-weight: 600;
  font-family: 'DIN 2014', 'Roboto', sans-serif;
  line-height: 0.965;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.mv-sec-content-point-wrap {
  padding-left: calc(36 / var(--fs) * 1rem);
}
.mv-sec-content-point__in {
  display: flex;
  gap: calc(10 / var(--fs) * 1rem);
  align-items: center;
}
.mv-sec-content-point-icon {
  width: calc(46 / var(--fs) * 1rem);
  height: auto;
  aspect-ratio: 1/1;
}
.mv-sec-content-point-icon svg {
  max-width: 100%;
  aspect-ratio: 1/1;
  fill: var(--point-item-color);
}
.mv-sec-content-point-lead {
  font-weight: 700;
  font-size: calc(14 / var(--fs) * 1rem);
  line-height: 1.714;
  color: var(--point-item-color);
}
.mv-sec-content-btns {
  padding-inline: calc(44 / var(--fs) * 1rem);
  margin-top: calc(50 / var(--fs) * 1rem);
}
.mv-sec-content-btns .l-btn-list--2col {
  --gap-x: 12;
}
.mv-sec-content-note {
  margin-top: calc(20 / var(--fs) * 1rem);
}
.mv-sec-content-note__label {
  font-size: calc(14 / var(--fs) * 1rem);
  font-weight: 400;
  color: var(--c-white);
  line-height: 1.714;
}
#available-brands {
  background: url(../img/common/bg_available-brands.png) center / 100% auto;
  .l-sec__in {
    padding: 0 calc(30 / var(--fs) * 1rem);
  }
  .l-sec__body {
    padding-block: calc(69 / var(--fs) * 1rem) calc(60 / var(--fs) * 1rem);
  }
  .l-sec__header {
    padding-inline: calc(2 / var(--fs) * 1rem);
    margin-bottom: calc(33 / var(--fs) * 1rem);
  }
  .c-header-title {
  }
  .c-header-title__sub {
    margin-bottom: calc(14 / var(--fs) * 1rem);
  }
}
.c-header-title {
  --header-sub-deco-color: var(--c-white);
  text-align: left;
}
.c-header-title__sub {
  display: block;
  position: relative;
  color: var(--c-main-500);
  font-family: 'DIN 2014', 'Roboto', sans-serif;
  font-size: calc(10 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: calc(15 / var(--fs) * 1rem);
  &::before {
    z-index: 1;
    content: '';
    position: absolute;
    width: calc(20 / var(--fs) * 1rem);
    height: calc(1 / var(--fs) * 1rem);
    background: var(--c-accent-500);
    left: calc(-6 / var(--fs) * 1rem);
    top: 50%;
    transform: translate(-100%, -50%);
    border-radius: 9999px;
  }
  &::after {
    z-index: 0;
    content: '';
    position: absolute;
    width: calc(32 / var(--fs) * 1rem);
    height: calc(32 / var(--fs) * 1rem);
    border: calc(1 / var(--fs) * 1rem) solid var(--header-sub-deco-color);
    left: 0;
    top: 50%;
    transform: translate(-150%, -50%);
    border-radius: 9999px;
  }
}
#merit .c-header-title__sub::after,
#pricing .c-header-title__sub::after,
#peace .c-header-title__sub::after,
#faq .c-header-title__sub::after {
  --header-sub-deco-color: #d9d9d9;
}
.c-header-title__label {
  font-size: calc(30 / var(--fs) * 1rem);
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: 0.01em;
}
.brands-icon-list {
  display: flex;
  justify-content: center;
  gap: calc(9 / var(--fs) * 1rem);
}
.brands-icon {
  flex: 1 1;
  width: calc((100% / 3) - calc(18 / var(--fs) * 1rem));
  border-radius: calc(10 / var(--fs) * 1rem);
  border: calc(1 / var(--fs) * 1rem) solid var(--c-white);
}
.brands-icon--grand_seiko {
  --icon-width: 98;
  --heading-width: 80;
  --icon-x: 4;
  --gap-y: 5;
  --padding-b: 8;
}
.brands-icon--credor {
  --icon-width: 129;
  --heading-width: 60;
  --icon-x: 4;
  --gap-y: 0;
  --padding-b: 10;
}
.brands-icon--seiko {
  --icon-width: 144;
  --heading-width: 75.4;
  --icon-x: -1;
  --gap-y: 9;
  --padding-b: 17.62;
}
.brands-icon__in {
  padding-inline: calc(9 / var(--fs) * 1rem);
  padding-block: calc(19 / var(--fs) * 1rem) calc(var(--padding-b) / var(--fs) * 1rem);
}
.brands-icon-img {
  width: calc(var(--icon-width) / var(--fs) * 1rem);
  margin-inline: auto;
  transform: translateX(calc(var(--icon-x) / var(--fs) * 1rem));
}
.brands-icon-heading {
  margin-inline: auto;
  margin-top: calc(var(--gap-y) / var(--fs) * 1rem);
  width: calc(var(--heading-width) / var(--fs) * 1rem);
}
.anchor-btns-wrap {
  max-width: calc(390 / var(--fs) * 1rem);
  margin-inline: auto;
  margin-top: calc(30 / var(--fs) * 1rem);
}
.anchor-btns-wrap .l-btn-list {
  --gap-x: 30;
}
#merit {
  .l-sec__in {
    background: var(--c-white);
    padding-inline: calc(30 / var(--fs) * 1rem);
  }
  .l-sec__body {
    padding-block: calc(70 / var(--fs) * 1rem) calc(80 / var(--fs) * 1rem);
  }
  .l-sec__header {
    padding-inline: calc(2 / var(--fs) * 1rem);
    margin-bottom: calc(39 / var(--fs) * 1rem);
  }
}
.merit-point + .merit-point {
  margin-top: calc(24 / var(--fs) * 1rem);
}
.merit-point {
  overflow: hidden;
  border-radius: calc(10 / var(--fs) * 1rem);
  border: calc(1 / var(--fs) * 1rem) solid rgba(204, 204, 204, 0.5);
}
.merit-point__in {
  background: var(--c-white);
}
.merit-point-heading {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(24 / var(--fs) * 1rem);
}
.merit-point-heading__label {
  position: absolute;
  top: calc(18 / var(--fs) * 1rem);
  left: calc(15 / var(--fs) * 1rem);

  font-family: 'DIN 2014', 'Roboto', sans-serif;
  font-size: calc(30 / var(--fs) * 1rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-white);
  text-align: center;
  > small {
    display: block;
    font-size: calc(12 / var(--fs) * 1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: calc(4 / var(--fs) * 1rem);
  }
}
.merit-point-heading-icon {
  flex-shrink: 0;
  width: calc(176 / var(--fs) * 1rem);
}
.merit-point-heading-lead {
  color: var(--c-gray-500);
  font-size: calc(18 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: 1.55;
}
.merit-point__in {
  &::details-content {
    transition:
      height 0.4s,
      opacity 0.4s,
      content-visibility 0.4s allow-discrete;
    height: 0;
    opacity: 0;
    overflow: clip;
  }
  /* --------アコーディオンの中身のスタイル（開いている時）-------- */
  &[open]::details-content {
    opacity: 1;
  }
}
.merit-point__in[open] {
  .merit-point-arrow {
    transform: translateY(-50%) scaleY(-1);
  }
}
.merit-point-arrow {
  transition: all 0.3s;
  position: absolute;
  right: calc(13.5 / var(--fs) * 1rem);
  top: 50%;
  transform: translateY(-50%);
  width: calc(31.4 / var(--fs) * 1rem);
  height: calc(31.4 / var(--fs) * 1rem);
  aspect-ratio: 1/1;
}
.merit-point-arrow__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.merit-point-arrow__label .c-svg {
  width: 100%;
  fill: var(--c-main-500);
  transition: all 0.3s;
}
.merit-point-lead {
  transition: all 0.3s;
  color: var(--c-gray-400);
  padding-inline: calc(201 / var(--fs) * 1rem) calc(17 / var(--fs) * 1rem);
  padding-bottom: calc(24 / var(--fs) * 1rem);
  font-size: calc(16 / var(--fs) * 1rem);
  font-weight: 400;
  line-height: 1.625;
}
.merit-point__in[open] .merit-point-heading {
  margin-bottom: calc(-8 / var(--fs) * 1rem);
}
.merit-point__in[open] .merit-point-lead {
}
.merit-point__in[open]::details-content {
  height: auto;
}
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }
  .merit-point__in[open]::details-content {
    height: auto;
  }
}

/* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
@supports not (interpolate-size: allow-keywords) {
  .merit-point__in[open]::details-content {
    height: calc(134 / var(--fs) * 1rem);
    overflow-y: scroll;
  }
}

#services {
  background: url(../img/common/bg_services.png) var(--c-main-100) top center / cover;
  .l-sec__in {
    padding-inline: 0;
  }
  .l-sec__body {
    padding-top: calc(69 / var(--fs) * 1rem);
  }
  .l-sec__header {
    padding-inline: calc(32 / var(--fs) * 1rem);
    /* margin-bottom: calc(35 / var(--fs) * 1rem); */
  }
  .l-sec__content {
    padding-inline: calc(20 / var(--fs) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  サービスタブ
-------------------------------------------------------------------------- */

.services-tabs__radio {
  display: none;
}

/* タブナビ */
.services-tabs__nav {
  display: flex;
  align-items: end;
  gap: calc(6 / var(--fs) * 1rem);
  padding-inline: calc(20 / var(--fs) * 1rem);
}
.services-tabs__label {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  background-color: var(--c-white);
  color: var(--c-main-300);
  line-height: 1.75;
  font-size: calc(16 / var(--fs) * 1rem);
  padding-inline: calc(16 / var(--fs) * 1rem);
  padding-block: calc(10 / var(--fs) * 1rem) calc(8 / var(--fs) * 1rem);
  min-width: calc(118 / var(--fs) * 1rem);
  min-height: calc(28 / var(--fs) * 1rem);
  border-radius: calc(10 / var(--fs) * 1rem) calc(10 / var(--fs) * 1rem) 0 0;
  transition:
    background-color 0.2s,
    color 0.2s;
  &:last-child {
  }
}

/* アクティブタブ */
.services-tabs:has(#tab-battery:checked) label[for='tab-battery'],
.services-tabs:has(#tab-complete:checked) label[for='tab-complete'],
.services-tabs:has(#tab-polish:checked) label[for='tab-polish'] {
  pointer-events: none;
  background-color: var(--c-accent-500);
  color: var(--c-white);
  padding-block: calc(9 / var(--fs) * 1rem) calc(9 / var(--fs) * 1rem);
  font-size: calc(18 / var(--fs) * 1rem);
}

/* パネル切り替え */
.services-tabs__panel {
  display: none;
}
.services-tabs:has(#tab-battery:checked) #panel-battery,
.services-tabs:has(#tab-complete:checked) #panel-complete,
.services-tabs:has(#tab-polish:checked) #panel-polish {
  display: block;
}
.services-tabs-body {
  padding: 0;
}
.service-content {
  border-radius: calc(10 / var(--fs) * 1rem);
  border: calc(2 / var(--fs) * 1rem) solid var(--c-accent-500);
  background: var(--c-white);
  padding-bottom: calc(57 / var(--fs) * 1rem);
}

/* ブランド行 */
.service-content-head {
  padding-block: calc(28 / var(--fs) * 1rem) calc(26 / var(--fs) * 1rem);
  padding-inline: calc(23 / var(--fs) * 1rem);
  background: rgba(204, 204, 204, 0.15);
}
.service-brand {
  display: flex;
  align-items: baseline;
  padding-block: calc(8 / var(--fs) * 1rem) calc(10 / var(--fs) * 1rem);
  padding-inline: calc(15 / var(--fs) * 1rem) calc(10 / var(--fs) * 1rem);
  margin-bottom: calc(13 / var(--fs) * 1rem);
  background: rgba(167, 209, 255, 0.5);
  border-radius: calc(6 / var(--fs) * 1rem);
  border: calc(2 / var(--fs) * 1rem) solid var(--c-white);
}
.service-brand__label {
  line-height: 1.428;
  font-size: calc(14 / var(--fs) * 1rem);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.service-brand__value {
  position: relative;
  margin-left: calc(12 / var(--fs) * 1rem);
  padding-left: calc(12 / var(--fs) * 1rem);
  font-size: calc(14 / var(--fs) * 1rem);
  font-weight: 700;
  &::before {
    content: '';
    position: absolute;
    background: rgba(105, 160, 222, 0.8);
    width: calc(1 / var(--fs) * 1rem);
    height: calc(16.9 / var(--fs) * 1rem);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.service-brand:has(dl) {
  display: block;
  .service-brand__label {
    text-align: center;
  }
  .service-brand__value {
    padding-top: calc(10.6 / var(--fs) * 1rem);
    margin-top: calc(7 / var(--fs) * 1rem);
    padding-left: 0;
    margin-left: 0;
  }
  .service-brand__value::before {
    width: 100%;
    height: calc(1 / var(--fs) * 1rem);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.service-brand__value__list {
  display: grid;
  grid-template-columns: calc(170 / var(--fs) * 1rem) 1fr;
  + .service-brand__value__list {
    margin-top: calc(8 / var(--fs) * 1rem);
    padding-top: calc(8 / var(--fs) * 1rem);
    border-top: calc(1 / var(--fs) * 1rem) solid rgba(105, 160, 222, 0.8);
  }
}
.service-brand__value__list__title {
  line-height: 1.428;
}
.service-brand__value__list__data {
  padding-left: calc(12 / var(--fs) * 1rem);
  margin-left: calc(12 / var(--fs) * 1rem);
  line-height: 1.428;
  position: relative;
  grid-column: 2;
  &::before {
    content: '';
    position: absolute;
    background: rgba(105, 160, 222, 0.8);
    width: calc(1 / var(--fs) * 1rem);
    height: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.service-desc {
  padding-inline: calc(10 / var(--fs) * 1rem);
  font-size: calc(16 / var(--fs) * 1rem);
  line-height: 1.625;
}

/* Before/After 画像 */
.service-case__ttl {
  font-weight: 700;
  text-align: center;
  color: var(--c-accent-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(20 / var(--fs) * 1rem);
  margin-bottom: calc(33.3 / var(--fs) * 1rem);
  line-height: 1.5;
  &::before,
  &::after {
    width: calc(34 / var(--fs) * 1rem);
    content: '';
    flex-shrink: 0;
    height: calc(1 / var(--fs) * 1rem);
    background-color: var(--c-accent-500);
  }
  &::before {
    margin-right: calc(15 / var(--fs) * 1rem);
  }
  &::after {
    margin-left: calc(15 / var(--fs) * 1rem);
  }
}
.service-case__imgs {
  display: flex;
  gap: calc(8 / var(--fs) * 1rem);
  margin-bottom: calc(13 / var(--fs) * 1rem);
}
.service-case__fig {
  flex: 1;
}
.service-case__img-wrap {
  position: relative;
}
.service-case__badge {
  width: calc(92 / var(--fs) * 1rem);
  position: absolute;
  font-weight: 700;
  color: var(--c-white);
  z-index: 1;
  line-height: 1;
  top: calc(-25 / var(--fs) * 1rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(11 / var(--fs) * 1rem);
  padding: calc(3 / var(--fs) * 1rem) calc(7 / var(--fs) * 1rem);
}
.service-case__img {
  border-radius: calc(10 / var(--fs) * 1rem);
  width: 100%;
  background-color: var(--c-gray-200);
  display: block;
}
.service-case {
  padding-inline: calc(27 / var(--fs) * 1rem);
  margin-bottom: calc(10 / var(--fs) * 1rem);
  padding-top: calc(30 / var(--fs) * 1rem);
}
.service-case__caption {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding-inline: calc(4 / var(--fs) * 1rem) 0;
  padding-bottom: calc(5 / var(--fs) * 1rem);
  border-bottom: calc(1 / var(--fs) * 1rem) solid rgba(204, 204, 204, 0.5);
}
.service-case__model {
  font-size: calc(14 / var(--fs) * 1rem);
  font-weight: 700;
  color: var(--c-main-500);
  line-height: 1.714;
}
.service-case__time {
  margin-top: calc(1 / var(--fs) * 1rem);
  font-size: calc(12 / var(--fs) * 1rem);
  color: var(--c-accent-500);
  font-weight: 400;
  line-height: 1.666;
}
.service-item {
  padding-inline: calc(32 / var(--fs) * 1rem);
  margin-bottom: calc(31 / var(--fs) * 1rem);
}
.service-item__name {
  font-weight: 700;
  font-size: calc(18 / var(--fs) * 1rem);
  line-height: 1.666;
  margin-bottom: calc(4 / var(--fs) * 1rem);
}
.service-item__desc {
  font-size: calc(16 / var(--fs) * 1rem);
  line-height: 1.625;
  font-weight: 400;
}
.service-item__desc__note {
  margin-top: calc(2 / var(--fs) * 1rem);
  font-size: calc(14 / var(--fs) * 1rem);
  line-height: 1.85;
  font-weight: 400;
  color: var(--c-main-500);
}
.service-note {
  padding-inline: calc(39 / var(--fs) * 1rem);
  margin-bottom: calc(30 / var(--fs) * 1rem);
}
.service-note__in {
  position: relative;
  border: calc(1 / var(--fs) * 1rem) solid var(--c-sub-300);
  border-radius: calc(10 / var(--fs) * 1rem);
  background: linear-gradient(99deg, var(--c-main-100) 21.76%, rgba(230, 230, 241, 0.3) 96.55%);
  padding-block: calc(27 / var(--fs) * 1rem) calc(17 / var(--fs) * 1rem);
  padding-inline: calc(14 / var(--fs) * 1rem) calc(13 / var(--fs) * 1rem);

  display: flex;
  gap: calc(7 / var(--fs) * 1rem);
}
.service-note__ttl {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -35%);
  width: calc(138 / var(--fs) * 1rem);
  background: var(--c-main-300);
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  margin-bottom: calc(8 / var(--fs) * 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-note__ttl__in {
  display: block;
  text-align: center;
  padding-block: calc(5 / var(--fs) * 1rem) calc(7 / var(--fs) * 1rem);
  font-weight: 700;
  color: var(--c-white);
  font-size: calc(12 / var(--fs) * 1rem);
  line-height: 1.166;
}
.service-note__icon {
  width: calc(87 / var(--fs) * 1rem);
  flex-shrink: 0;
}
/* ボタン */
.service-btns {
  padding-inline: calc(67 / var(--fs) * 1rem);
  display: flex;
  gap: calc(18 / var(--fs) * 1rem);
}
.service-btns .c-btn {
  flex: 1;
}
.service-note__desc__label {
  margin-top: calc(5 / var(--fs) * 1rem);
  font-size: calc(14 / var(--fs) * 1rem);
  font-weight: 400;
  line-height: 1.714;
}
.service-note__type {
  display: flex;
  margin-top: calc(8 / var(--fs) * 1rem);
  font-size: calc(12 / var(--fs) * 1rem);
  line-height: 1.666;
  font-weight: 400;
}
.service-note__type__em {
  font-weight: 700;
  color: var(--c-main-500);
}
.service-note__type__label {
  position: relative;
  padding-left: calc(10 / var(--fs) * 1rem);
  margin-left: calc(10 / var(--fs) * 1rem);
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(1 / var(--fs) * 1rem);
    height: calc(18 / var(--fs) * 1rem);
    background: var(--c-main-300);
  }
}
.service-btns {
}

/* ---------------------------------------
VOICES
 ---------------------------------------*/
#voices {
  background: linear-gradient(151deg, rgba(167, 209, 255, 0.3) 39.17%, rgba(230, 230, 241, 0.3) 84.24%) var(--c-white);
  .l-sec__in {
    padding-inline: calc(26 / var(--fs) * 1rem);
  }
  .l-sec__body {
    padding-block: calc(59 / var(--fs) * 1rem) calc(80 / var(--fs) * 1rem);
  }
  .l-sec__header {
    padding-inline: calc(6 / var(--fs) * 1rem);
    margin-bottom: calc(39 / var(--fs) * 1rem);
  }
}
.voice-card-list-wrap {
  --swiper-pagination-color: var(--c-accent-500);
  --swiper-pagination-bullet-inactive-color: rgb(204, 204, 204);
  --swiper-pagination-bullet-horizontal-gap: calc(4 / var(--fs) * 1rem);
  --swiper-pagination-bullet-width: calc(6 / var(--fs) * 1rem);
  --swiper-pagination-bullet-height: calc(6 / var(--fs) * 1rem);

  margin-inline: calc(-26 / var(--fs) * 1rem);
  padding-inline: calc(26 / var(--fs) * 1rem);
  padding-bottom: calc(10 / var(--fs) * 1rem);
}
.voice-card-list {
  padding-bottom: calc(20 / var(--fs) * 1rem);
  align-items: stretch;
}
.voice-card {
  height: auto;
  border: calc(1 / var(--fs) * 1rem) solid var(--c-sub-300);
  border-radius: calc(10 / var(--fs) * 1rem);
  background: var(--c-white);
  position: relative;
  overflow: hidden;
}
.voice-card__tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--c-accent-500);
  padding-block: calc(3 / var(--fs) * 1rem) calc(4 / var(--fs) * 1rem);
  padding-inline: calc(10 / var(--fs) * 1rem);
  border-radius: calc(10 / var(--fs) * 1rem) 0;
}
.voice-card__tag-label {
  font-size: calc(12 / var(--fs) * 1rem);
  font-weight: 700;
  color: var(--c-white);
}
.voice-card__body {
  display: flex;
  height: 100%;
  gap: calc(10 / var(--fs) * 1rem);
  padding-block: calc(24 / var(--fs) * 1rem) calc(20 / var(--fs) * 1rem);
  padding-inline: calc(10 / var(--fs) * 1rem) calc(22 / var(--fs) * 1rem);
}
.voice-card__img {
  flex-shrink: 0;
  width: calc(110 / var(--fs) * 1rem);
  margin-top: calc(10 / var(--fs) * 1rem);
}
.voice-card__user {
  display: flex;
  align-items: center;
  gap: calc(9 / var(--fs) * 1rem);
  margin-bottom: calc(8 / var(--fs) * 1rem);
}
.voice-card__user-icon {
  flex-shrink: 0;
  width: calc(30 / var(--fs) * 1rem);
  height: calc(30 / var(--fs) * 1rem);
  border-radius: 50%;
  background: var(--c-gray-200);
}
.voice-card__title {
  font-size: calc(16 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: 1.75;
}
.voice-card__desc {
  font-size: calc(14 / var(--fs) * 1rem);
  line-height: 1.857;
  font-weight: 400;
  flex-grow: 1;
  padding-bottom: calc(10 / var(--fs) * 1rem);
}
.voice-card__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.voice-card__content__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(7 / var(--fs) * 1rem);
  padding-top: calc(13 / var(--fs) * 1rem);
  border-top: calc(1 / var(--fs) * 1rem) solid var(--c-sub-300);
}
.voice-card__model {
  font-size: calc(12 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: 1.166;
  color: var(--c-main-500);
}
.voice-card__meta {
  font-size: calc(12 / var(--fs) * 1rem);
  line-height: 1.666;
  color: var(--c-gray-300);
  margin-top: calc(5 / var(--fs) * 1rem);
}
.voice-card__brand__type {
  flex-shrink: 0;
  background: #e6e6f1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(119 / var(--fs) * 1rem);
  min-height: calc(38 / var(--fs) * 1rem);
  border-radius: calc(6 / var(--fs) * 1rem);
  padding-block: calc(5 / var(--fs) * 1rem) calc(4 / var(--fs) * 1rem);
  padding-inline: calc(4 / var(--fs) * 1rem) calc(4 / var(--fs) * 1rem);
}
.voice-card__brand__type__label {
  margin-top: calc(-2 / var(--fs) * 1rem);
  font-size: calc(12 / var(--fs) * 1rem);
  font-weight: 700;
  color: var(--c-accent-500);
  line-height: 1.333;
}
.voices-btns-wrap {
  margin-top: calc(34 / var(--fs) * 1rem);
  max-width: calc(320 / var(--fs) * 1rem);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
  料金タブ
-------------------------------------------------------------------------- */
#pricing {
  background: var(--c-white);
  .l-sec__body {
    padding-top: calc(69 / var(--fs) * 1rem);
  }
  .l-sec__in {
    padding-inline: calc(30 / var(--fs) * 1rem);
  }
  .l-sec__header {
    padding-inline: calc(2 / var(--fs) * 1rem);
    margin-bottom: calc(38.2 / var(--fs) * 1rem);
  }
}
.pricing-tabs__radio {
  display: none;
}

/* タブナビ */
.pricing-tabs__nav {
  display: flex;
  align-items: end;
  gap: calc(6 / var(--fs) * 1rem);
  padding-right: calc(12 / var(--fs) * 1rem);
}

.pricing-tabs__label {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  background-color: var(--c-gray-200);
  color: var(--c-white);
  font-size: calc(14 / var(--fs) * 1rem);
  line-height: 1.428;
  padding-inline: calc(8 / var(--fs) * 1rem);
  padding-block: calc(10 / var(--fs) * 1rem) calc(8 / var(--fs) * 1rem);
  min-height: calc(42 / var(--fs) * 1rem);
  border-radius: calc(10 / var(--fs) * 1rem) calc(10 / var(--fs) * 1rem) 0 0;
  transition:
    background-color 0.2s,
    color 0.2s;
}

/* アクティブタブ */
.pricing-tabs:has(#pricing-tab-gs:checked) label[for='pricing-tab-gs'],
.pricing-tabs:has(#pricing-tab-cr:checked) label[for='pricing-tab-cr'],
.pricing-tabs:has(#pricing-tab-sk:checked) label[for='pricing-tab-sk'] {
  pointer-events: none;
  background-color: var(--c-main-300);
  color: var(--c-white);
  padding-block: calc(15 / var(--fs) * 1rem) calc(12 / var(--fs) * 1rem);
}

/* パネル切り替え */
.pricing-tabs__panel {
  display: none;
}
.pricing-tabs:has(#pricing-tab-gs:checked) #pricing-panel-gs,
.pricing-tabs:has(#pricing-tab-cr:checked) #pricing-panel-cr,
.pricing-tabs:has(#pricing-tab-sk:checked) #pricing-panel-sk {
  display: block;
}

/* テーブルラッパー */
.pricing-table-wrap {
  background: var(--c-main-300);
  padding: calc(6 / var(--fs) * 1rem);
  border-radius: calc(10 / var(--fs) * 1rem);
  border-top-left-radius: 0;
  overflow: hidden;
}

/* テーブル */
.pricing-table {
  width: 100%;
}
tr:last-child td:first-child {
  border-bottom-left-radius: calc(6 / var(--fs) * 1rem);
}
tr:last-child td:last-child {
  border-bottom-right-radius: calc(6 / var(--fs) * 1rem);
}

.pricing-table__th {
  background: var(--c-main-200);
  font-weight: 700;
  font-size: calc(14 / var(--fs) * 1rem);
  padding-block: calc(10 / var(--fs) * 1rem) calc(13 / var(--fs) * 1rem);
  padding-inline: calc(16 / var(--fs) * 1rem);
  text-align: center;
  line-height: 1.714;
  + .pricing-table__th {
    border-left: calc(1 / var(--fs) * 1rem) solid var(--c-main-300);
  }
}
.pricing-table__th--service {
  width: 38.6%;
  border-top-left-radius: calc(6 / var(--fs) * 1rem);
}
.pricing-table__th--price {
  width: 28.8%;
}
.pricing-table__th--period {
  border-top-right-radius: calc(6 / var(--fs) * 1rem);
}

.pricing-table__td {
  font-weight: 700;

  text-align: center;
  background: var(--c-white);
  font-size: calc(16 / var(--fs) * 1rem);
  line-height: 1.5;
  padding-block: calc(11 / var(--fs) * 1rem);
  padding-inline: calc(16 / var(--fs) * 1rem);
  border-bottom: calc(1 / var(--fs) * 1rem) solid var(--c-gray-200);
  vertical-align: middle;
  + .pricing-table__td {
    border-left: calc(1 / var(--fs) * 1rem) solid var(--c-main-300);
  }
}
.pricing-table__td--price {
  font-weight: 700;
}

/* 注記 */
.pricing-note {
  margin-top: calc(12 / var(--fs) * 1rem);
  font-size: calc(14 / var(--fs) * 1rem);
  line-height: 1.428;
}

/* --------------------------------------------------------------------------
  見積もりシミュレーター
-------------------------------------------------------------------------- */
#estimate {
  border-radius: calc(10 / var(--fs) * 1rem);
  overflow: hidden;
  border: calc(2 / var(--fs) * 1rem) solid var(--c-accent-500);
  margin-top: calc(45.2 / var(--fs) * 1rem);
}

.estimate__head {
  background: var(--c-accent-500);
  padding-block: calc(15 / var(--fs) * 1rem);
  text-align: center;
}

.estimate__head-title {
  font-size: calc(22 / var(--fs) * 1rem);
  font-weight: 700;
  color: var(--c-white);
  line-height: calc(30 / 22);
}

.estimate__body {
  background: var(--c-white);
  padding: calc(20 / var(--fs) * 1rem) calc(25 / var(--fs) * 1rem) calc(68 / var(--fs) * 1rem);
}

/* --- セレクトフィールド --- */
.estimate__fields {
  display: flex;
  flex-direction: column;
  gap: calc(10 / var(--fs) * 1rem);
}

.estimate__field {
  display: flex;
  flex-direction: column;
  gap: calc(4 / var(--fs) * 1rem);
}

.estimate__field-label {
  font-size: calc(14 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: calc(24 / 14);
  color: var(--c-gray-500);
}

.estimate__select-wrap {
  position: relative;
}

.estimate__select-wrap::after {
  content: '';
  position: absolute;
  right: calc(12 / var(--fs) * 1rem);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: calc(6 / var(--fs) * 1rem) solid transparent;
  border-right: calc(6 / var(--fs) * 1rem) solid transparent;
  border-top: calc(8 / var(--fs) * 1rem) solid var(--c-accent-500);
  pointer-events: none;
}

.estimate__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: inherit;
  font-size: calc(16 / var(--fs) * 1rem);
  line-height: calc(26 / 16);
  font-weight: 400;
  color: var(--c-gray-300);
  padding-inline: calc(18 / var(--fs) * 1rem) calc(40 / var(--fs) * 1rem);
  padding-block: calc(8 / var(--fs) * 1rem);
  border-radius: calc(8 / var(--fs) * 1rem);
  border: calc(1 / var(--fs) * 1rem) solid var(--c-gray-200);
  background: rgba(204, 204, 204, 0.1);
  cursor: pointer;
}

.estimate__select.has-value {
  background: var(--c-main-100);
  border-color: var(--c-main-300);
  color: var(--c-gray-500);
}

.estimate__select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.estimate__select-wrap:has(.estimate__select:disabled)::after {
  display: none;
}

/* --- 外装オプション --- */
.estimate__options.is-hidden {
  display: none;
}

.estimate__options {
  margin-top: calc(20 / var(--fs) * 1rem);
  border: none;
  padding: 0;
  min-width: 0;
}

.estimate__options-legend {
  font-size: calc(14 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: calc(24 / 14);
  color: var(--c-gray-500);
  margin-bottom: calc(4 / var(--fs) * 1rem);
  width: 100%;
  float: left;
}

.estimate__option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  border: calc(1 / var(--fs) * 1rem) solid var(--c-gray-200);
  border-radius: calc(8 / var(--fs) * 1rem);
  background: var(--c-white);
  clear: both;

  & + .estimate__option-item {
    margin-top: calc(4 / var(--fs) * 1rem);
  }
}

.estimate__option-label {
  padding-inline: calc(15 / var(--fs) * 1rem);
  padding-block: calc(10 / var(--fs) * 1rem);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.estimate__option-label-head {
  display: flex;
  align-items: center;
  gap: calc(12 / var(--fs) * 1rem);
}

.estimate__checkbox {
  display: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.estimate__checkbox-custom {
  display: block;
  flex-shrink: 0;
  width: calc(20 / var(--fs) * 1rem);
  height: calc(20 / var(--fs) * 1rem);
  border: calc(1 / var(--fs) * 1rem) solid var(--c-gray-200);
  border-radius: 50%;
  background: rgba(204, 204, 204, 0.3);
  position: relative;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.estimate__checkbox:checked + .estimate__checkbox-custom {
  background: var(--c-main-500);
  border-color: var(--c-main-500);
}

.estimate__checkbox:checked + .estimate__checkbox-custom::after {
  content: '';
  position: absolute;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  top: calc(5 / var(--fs) * 1rem);
  left: calc(5 / var(--fs) * 1rem);
  width: calc(8 / var(--fs) * 1rem);
  height: calc(8 / var(--fs) * 1rem);
  background: var(--c-white);
  border-radius: 50%;
}

.estimate__radio {
  display: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.estimate__radio-custom {
  display: block;
  flex-shrink: 0;
  flex-grow: 1;
  width: calc(20 / var(--fs) * 1rem);
  height: calc(20 / var(--fs) * 1rem);
  border: calc(1 / var(--fs) * 1rem) solid var(--c-gray-200);
  border-radius: 50%;
  background: rgba(204, 204, 204, 0.3);
  position: relative;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.estimate__radio:checked + .estimate__radio-custom {
  background: var(--c-main-500);
  border-color: var(--c-main-500);
}

.estimate__radio:checked + .estimate__radio-custom::after {
  content: '';
  position: absolute;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  top: calc(5 / var(--fs) * 1rem);
  left: calc(5 / var(--fs) * 1rem);
  width: calc(8 / var(--fs) * 1rem);
  height: calc(8 / var(--fs) * 1rem);
  background: var(--c-white);
  border-radius: 50%;
}

.estimate__option-text {
  font-size: calc(16 / var(--fs) * 1rem);
  line-height: calc(26 / 16);
  color: var(--c-gray-500);
}

.estimate__option-price {
  font-size: calc(16 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: calc(24 / 16);
  color: var(--c-gray-300);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- 矢印デコ --- */
.estimate__arrow-deco {
  width: calc(66 / var(--fs) * 1rem);
  height: calc(20 / var(--fs) * 1rem);
  margin: calc(19 / var(--fs) * 1rem) auto calc(17 / var(--fs) * 1rem);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--c-accent-500);
}

/* --- 結果 --- */
.estimate__result {
  display: flex;
  align-items: stretch;
  gap: calc(8 / var(--fs) * 1rem);
}

.estimate__result-box {
  max-width: calc(262 / var(--fs) * 1rem);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 / var(--fs) * 1rem);
  padding-inline: calc(15 / var(--fs) * 1rem);
  padding-block: calc(8 / var(--fs) * 1rem);
  border: calc(2 / var(--fs) * 1rem) solid var(--c-main-500);
  border-radius: calc(8 / var(--fs) * 1rem);
}

.estimate__result-box--price {
  background: rgba(204, 204, 204, 0.15);
}

.estimate__result-box--period {
  background: var(--c-main-100);
}

.estimate__result-label {
  font-size: calc(12 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: calc(14 / 12);
  color: var(--c-accent-500);
}

.estimate__result-value {
  flex-grow: 1;
  text-align: center;
  font-size: calc(30 / var(--fs) * 1rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-main-500);
}
.estimate__result-box--period .estimate__result-value {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.estimate__result-yen {
  font-size: calc(22 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: calc(30 / 22);
  vertical-align: baseline;
}

/* --- 注記 --- */
.estimate__note {
  margin-top: calc(19 / var(--fs) * 1rem);
  font-size: calc(14 / var(--fs) * 1rem);
  line-height: calc(20 / 14);
  color: var(--c-gray-500);
  padding-inline: calc(12 / var(--fs) * 1rem);
}

/* --- ボタン --- */
.estimate__btn-wrap {
  margin-top: calc(20 / var(--fs) * 1rem);
}

.estimate__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: calc(320 / var(--fs) * 1rem);
  margin-inline: auto;
  padding-inline: calc(30 / var(--fs) * 1rem);
  padding-block: calc(20 / var(--fs) * 1rem);
  border-radius: calc(50 / var(--fs) * 1rem);

  color: var(--c-white);
  font-size: calc(20 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: 1;
  border: none;
  font-family: inherit;
  transition: background 0.2s;
  white-space: nowrap;
  background: var(--c-main-500);
  cursor: pointer;
}
.estimate__btn.is-disabled {
  pointer-events: none;
  background: rgba(204, 204, 204, 0.5);
  cursor: not-allowed;
}

/* ---------------------------------------
FLOW
 ---------------------------------------*/
#flow {
  background: url(../img/common/bg_deco_flow.png) var(--c-main-100) top right / calc(125 / var(--fs) * 1rem) calc(122 / var(--fs) * 1rem) no-repeat;
  .l-sec__body {
    padding-block: calc(69 / var(--fs) * 1rem) calc(80 / var(--fs) * 1rem);
  }
  .l-sec__header {
    margin-bottom: calc(34 / var(--fs) * 1rem);
  }
}
.flow-steps-list-wrap {
  margin-inline: calc(-32 / var(--fs) * 1rem);
  padding-inline: calc(32 / var(--fs) * 1rem);
  padding-bottom: calc(32 / var(--fs) * 1rem);
  --swiper-pagination-color: var(--c-accent-500);
  --swiper-pagination-bullet-inactive-color: rgb(204, 204, 204);
  --swiper-pagination-bullet-horizontal-gap: calc(4 / var(--fs) * 1rem);
  --swiper-pagination-bullet-width: calc(6 / var(--fs) * 1rem);
  --swiper-pagination-bullet-height: calc(6 / var(--fs) * 1rem);
}
.flow-steps-list {
  width: fit-content;
  display: flex;
  align-items: stretch;
}
.flow-steps-list > * {
  height: auto;
}
.flow-step {
  width: calc(320 / var(--fs) * 1rem);
  + .flow-step {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      width: calc(24 / var(--fs) * 1rem);
      height: calc(1 / var(--fs) * 1rem);
      background: var(--c-main-300);
      top: 50%;
      left: 0;
      transform: translate(-100%, -50%);
    }
  }
}
.flow-step__in {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: calc(10 / var(--fs) * 1rem);
  background: var(--c-white);
}
.flow-step__body {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding-block: calc(27 / var(--fs) * 1rem) calc(20 / var(--fs) * 1rem);
  padding-inline: calc(16 / var(--fs) * 1rem) calc(16 / var(--fs) * 1rem);
}
.flow-step-img {
  width: calc(50 / var(--fs) * 1rem);
  flex-shrink: 0;
}
.flow-step-content {
  padding-left: calc(22 / var(--fs) * 1rem);
  margin-left: calc(14 / var(--fs) * 1rem);
  border-left: calc(1 / var(--fs) * 1rem) solid rgba(105, 160, 222, 0.3);
}
.flow-step-heading {
  color: var(--c-accent-500);
  font-size: calc(22 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: 1.363;
}
.flow-step-lead {
  margin-top: calc(8 / var(--fs) * 1rem);
  font-size: calc(16 / var(--fs) * 1rem);
  font-weight: 400;
  line-height: 1.625;
}
.flow-step-footer {
}
.flow-step-footer__in {
  background: var(--c-main-300);
  padding: calc(6 / var(--fs) * 1rem) calc(10 / var(--fs) * 1rem);
}
.flow-step-footer-note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(6 / var(--fs) * 1rem);
  color: var(--c-white);
}
.flow-step-footer-note__icon {
  width: calc(12 / var(--fs) * 1rem);
  height: calc(12 / var(--fs) * 1rem);
}
.flow-step-footer-note__icon .c-svg {
  fill: var(--c-white);
}
.flow-step-footer-note__label {
  font-size: calc(14 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: 1.714;
}

/* ---------------------------------------
PEACE
 ---------------------------------------*/
#peace {
  background: url(../img/common/bg_peace.png) center top / cover;
  .l-sec__body {
    padding-top: calc(69 / var(--fs) * 1rem);
  }
}
.peace-point-list {
  max-width: calc(380 / var(--fs) * 1rem);
  padding-left: calc(20 / var(--fs) * 1rem);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  row-gap: calc(21 / var(--fs) * 1rem);
}
.peace-point {
}
.peace-point--02 {
  margin-left: calc(46 / var(--fs) * 1rem);
}
.peace-point--04 {
  margin-left: calc(74 / var(--fs) * 1rem);
}
.peace-point__in {
  display: flex;
  gap: calc(10 / var(--fs) * 1rem);
  flex-direction: column;
  align-items: center;
}
.peace-point-icon {
  width: calc(126 / var(--fs) * 1rem);
}
.peace-point-text {
  text-align: center;
  font-size: calc(14 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: 1.428;
}
.peace-lead-wrap {
  margin-top: calc(55 / var(--fs) * 1rem);
  position: relative;
  max-width: calc(410 / var(--fs) * 1rem);
  margin-inline: auto;
  background: var(--c-white);
  border-radius: calc(6 / var(--fs) * 1rem);
}
.peace-lead-wrap::before {
  content: '';
  position: absolute;
  top: calc(-8 / var(--fs) * 1rem);
  left: 50%;
  transform: translateX(-50%);
  width: calc(36 / var(--fs) * 1rem);
  height: calc(30 / var(--fs) * 1rem);
  background: url(../img/common/icon_peace_lead.png) center / contain no-repeat;
}
.peace-lead {
  padding-block: calc(23 / var(--fs) * 1rem) calc(15 / var(--fs) * 1rem);
  padding-inline: calc(18 / var(--fs) * 1rem) calc(12 / var(--fs) * 1rem);
}
.peace-lead__label {
  font-size: calc(14 / var(--fs) * 1rem);
  font-weight: 400;
  line-height: 1.857;
}
.peace-btns-wrap {
  max-width: calc(320 / var(--fs) * 1rem);
  margin-inline: auto;
  margin-top: calc(44 / var(--fs) * 1rem);
}

/* ---------------------------------------
FAQ
 ---------------------------------------*/
#faq {
  background: #fafafa;
  .l-sec__body {
    padding-top: calc(69 / var(--fs) * 1rem);
  }
  .l-sec__header {
    margin-bottom: calc(34 / var(--fs) * 1rem);
  }
}
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.faq-item {
  border-bottom: 1px solid rgba(204, 204, 204, 0.5);
}
.faq-item__in {
  &::details-content {
    transition:
      height 0.4s,
      opacity 0.4s,
      content-visibility 0.4s allow-discrete;
    height: 0;
    opacity: 0;
    overflow: clip;
  }
  &[open]::details-content {
    opacity: 1;
  }
  &[open] .faq-item__summary {
    background: var(--c-white);
  }
}
.faq-item__summary {
  border-radius: calc(10 / var(--fs) * 1rem);
  display: flex;
  align-items: start;
  gap: calc(13 / var(--fs) * 1rem);
  padding-block: calc(16 / var(--fs) * 1rem);
  padding-inline: calc(9 / var(--fs) * 1rem) calc(8 / var(--fs) * 1rem);
  cursor: pointer;
  position: relative;
  list-style: none;
  &::-webkit-details-marker {
    display: none;
  }
}
.faq-q {
  flex-shrink: 0;
  width: calc(19 / var(--fs) * 1rem);
  margin-top: calc(6 / var(--fs) * 1rem);
  line-height: 1;
  fill: var(--c-main-500);
}
.faq-q-text {
  flex: 1;
  font-size: calc(16 / var(--fs) * 1rem);
  font-weight: 700;
  line-height: 1.87;
}
.faq-item__detail {
  display: flex;
  align-items: start;
  gap: calc(9.4 / var(--fs) * 1rem);
  padding: calc(16 / var(--fs) * 1rem) calc(12 / var(--fs) * 1rem);
}
.faq-a {
  flex-shrink: 0;
  width: calc(18 / var(--fs) * 1rem);
  margin-top: calc(6 / var(--fs) * 1rem);
  line-height: 1;
  fill: var(--c-main-300);
}
.faq-a-text {
  flex: 1;
  font-size: calc(16 / var(--fs) * 1rem);
  font-weight: 400;
  line-height: 1.625;
}
.faq-arrow {
  align-self: center;
  flex-shrink: 0;
  width: calc(26.6 / var(--fs) * 1rem);
  height: calc(26.6 / var(--fs) * 1rem);
  transition: transform 0.3s;
}
.faq-arrow__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.faq-arrow__label .c-svg {
  width: 100%;
  fill: var(--c-main-500);
}
.faq-item__in[open] .faq-arrow {
  transform: scaleY(-1);
}
@supports (interpolate-size: allow-keywords) {
  .faq-item__in[open]::details-content {
    height: auto;
  }
}
/* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
@supports not (interpolate-size: allow-keywords) {
  .faq-item__in[open]::details-content {
    height: calc(200 / var(--fs) * 1rem);
    overflow-y: scroll;
  }
}
.faq-item__in[open]::details-content {
  height: auto;
}

/* ---------------------------------------
GET STARTED
 ---------------------------------------*/
#get-started {
  background: url(../img/common/bg_getstarted.png) center top / cover;
  .l-sec__body {
    padding-block: calc(69 / var(--fs) * 1rem) calc(27 / var(--fs) * 1rem);
  }
  .l-sec__header {
    margin-bottom: calc(26 / var(--fs) * 1rem);
  }
  .c-header-title {
    --header-color: var(--c-white);
  }
  .c-header-title__label {
    display: block;
    font-size: calc(34 / var(--fs) * 1rem);
    line-height: 1.294;
    letter-spacing: 0.02em;
    margin-left: calc(4 / var(--fs) * 1rem);
  }
  .c-header-title__sub {
    margin-bottom: calc(36 / var(--fs) * 1rem);
    color: var(--c-white);
  }
}
.get-started-lead {
  width: 54%;
  margin-bottom: calc(32 / var(--fs) * 1rem);
  padding-inline: calc(4 / var(--fs) * 1rem);
}
.get-started-lead__label {
  font-size: calc(16 / var(--fs) * 1rem);
  font-weight: 400;
  color: var(--c-white);
  line-height: 1.875;
}
.get-started-btns-wrap {
  max-width: calc(320 / var(--fs) * 1rem);
  margin-inline: auto;
}
.get-started-btn + .get-started-btn {
  margin-top: calc(11.89 / var(--fs) * 1rem);
}
.get-started-logo {
  margin-inline: auto;
  width: calc(80 / var(--fs) * 1rem);
}
.get-started-link {
  text-align: center;
  margin-top: calc(8 / var(--fs) * 1rem);
}
.get-started-link .c-link-txt {
  --link-txt-size: 14;
  --link-txt-color: var(--c-white);
  --link-line-height: 1.857;
}
.get-started-logo .c-svg {
  fill: var(--c-white);
}
/* 追従ボタン */
.fixed-btns {
  z-index: 1000;
  width: 100%;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(20 / var(--fs) * 1rem);
  background: rgba(23, 35, 83, 0.8);
  border-radius: 0 0 calc(20 / var(--fs) * 1rem) calc(20 / var(--fs) * 1rem);
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  display: none;
}
.fixed-btns.is-scroll-end {
  visibility: hidden;
  opacity: 0;
}
.mv-sec-content-btns {
  width: 100%;
  padding-inline: calc(44 / var(--fs) * 1rem);
  padding-block: calc(24 / var(--fs) * 1rem) calc(26 / var(--fs) * 1rem);
  .c-btn-txt__label {
    white-space: nowrap;
  }
  .l-btn-list-item {
    flex-shrink: 0;
  }
}
.mv-sec-content-btns .l-btn-list--2col {
  --gap-x: 12;
}

/* SP調整 */
@media all and (max-width: 1023px), print {
  .l-main-container {
    position: static;
    height: auto;
    overflow: scroll;
  }
  #fixLogo {
    display: none;
  }
  .animationElement {
    display: none;
  }
  .main-contents {
    opacity: 1;
    position: relative;
    transform: none;
    left: 0;
    top: 0;
    width: 100vw;
    height: auto;
    padding: 0;
  }
  .main-contents__in {
    height: auto;
    max-height: none;
    border-radius: 0;
  }
  .side-nav-list {
    gap: calc(26 / var(--fs) * 1rem);
  }
  .side-nav-btns-wrap {
    margin-top: calc(52 / var(--fs) * 1rem);
    display: flex;
    flex-direction: column;
    gap: calc(26 / var(--fs) * 1rem);
  }
  .mv-sec {
    min-height: 0;
    max-height: calc(960 / var(--fs) * 1rem);
  }
  .mv-sec__header {
    margin-bottom: calc(135 / var(--fs) * 1rem);
  }
  .mv-sec__body {
    padding-bottom: calc(234 / var(--fs) * 1rem);
  }
  .mv-sec-movie {
    overflow: hidden;
  }
  #services {
    background-size: cover;
  }
  .voice-card-list-wrap {
    padding-bottom: calc(24 / var(--fs) * 1rem);
  }
  .fixed-btns {
    display: flex;
    bottom: 0;
    border-radius: 0;
  }
  .mv-sec-content-btns {
    margin-top: 0;
  }
}