/*
Theme Name: LEAF 2026
Theme URI: https://leaf-hero.com/
Author: 株式会社LEAF
Description: 株式会社LEAF コーポレートサイト用テーマ
Version: 1.6.7
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: leaf2026
*/

/*
  寸法の考え方
  --u はデザイン上の 1px にあたる長さ。PC は幅 1440px、スマホ（959px 以下）は幅 375px の
  デザインを基準に、画面幅に比例して拡大・縮小する。
*/
:root {
  --u: calc(min(100vw, 2560px) / 1440);
  --ink: #2B2B2B;
  --body: #595959;
  --muted: #8A9299;
  --line: #DDE2E6;
  --tile: #F4F6F7;
  --teal: #0A9FB0;
  --cyan: #0AE6E6;
  --navy: #101B44;
  --yellow: #E6D21E;
  --olive: #A89912;
  --grad: linear-gradient(90deg,#101B44,#0AE6E6);
  --grad-d: linear-gradient(135deg,#101B44,#0AE6E6);
  --grad-k: linear-gradient(90deg,#2A2A2A,#5E5E5E);
  --accent: var(--teal);
  --accent-grad: var(--grad);
  --accent-grad-d: var(--grad-d);
  --on-accent: #fff;
  --jp: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --en: "Audiowide","Noto Sans JP",sans-serif;
  --wrap: calc(1380 * var(--u));
  --gut: clamp(calc(20 * var(--u)),2.1vw,calc(30 * var(--u)));
  --head-h: calc(100 * var(--u));
}

.theme-orange {
  --accent: #E8772E;
  --accent-grad: linear-gradient(90deg,#F79B43,#F8D566);
  --accent-grad-d: linear-gradient(135deg,#F79B43,#F8D566);
  --on-accent: #2B2B2B;
}

@media (max-width: 959px) {
  :root {
    --u: calc(min(100vw, 560px) / 375);
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation: none!important;
    transition: none!important;
  }
}

body {
  margin: 0;
  font-family: var(--jp);
  color: var(--ink);
  background: #fff;
  font-size: calc(16 * var(--u));
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: calc(3 * var(--u));
}

br.sp {
  display: none;
}

.svc-sp-more,
.sp-only {
  display: none!important;
}

@media (max-width: 959px) {
  .sp-only {
    display: block!important;
  }
}

@media (max-width: 959px) {
  br.pc {
    display: none;
  }

  br.sp {
    display: inline;
  }
}

.screen-reader-text {
  position: absolute!important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: min(var(--wrap),100% - var(--gut)*2);
  margin-inline: auto;
}

.en {
  font-family: var(--en);
  font-weight: 400;
  letter-spacing: .02em;
}

.skip {
  position: absolute;
  left: calc(-999 * var(--u));
  top: 0;
  z-index: 100;
  background: #fff;
  padding: calc(8 * var(--u)) calc(14 * var(--u));
}

.skip:focus {
  left: calc(8 * var(--u));
}

/* ============================================================
   header
   ============================================================ */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

.site-header .in {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(30 * var(--u)) var(--gut) 0;
}

.site-logo img {
  width: calc(155 * var(--u));
}

.gnav {
  display: flex;
  align-items: center;
  gap: calc(35 * var(--u));
}

.gnav a {
  font-family: var(--en);
  font-size: calc(14 * var(--u));
  line-height: calc(42 * var(--u));
  color: var(--body);
  position: relative;
  transition: color .2s;
}

.gnav a:hover {
  color: var(--accent);
}

.gnav a[aria-current="page"] {
  color: var(--accent);
}

.gnav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(6 * var(--u));
  height: 1.5px;
  background: var(--accent);
}

.gnav .cta {
  margin-left: -1px;
  width: calc(133 * var(--u));
  text-align: center;
  background: var(--accent-grad);
  color: var(--on-accent);
  font-size: calc(15 * var(--u));
}

.gnav .cta:hover {
  color: var(--on-accent);
  filter: brightness(1.08);
}

.menu-btn {
  display: none;
  width: calc(40 * var(--u));
  height: calc(36 * var(--u));
  position: relative;
  color: var(--navy);
}

.menu-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(25% 1.5%,75% 1.5%,100% 50%,75% 98.5%,25% 98.5%,0 50%,1.6% 50%,25.9% 95.5%,74.1% 95.5%,98.4% 50%,74.1% 4.5%,25.9% 4.5%,1.6% 50%,0 50%);
}

.menu-btn i {
  position: absolute;
  left: calc(12 * var(--u));
  height: 1.4px;
  background: currentColor;
  transition: transform .25s,opacity .25s;
}

.menu-btn i:nth-child(1) {
  top: calc(12 * var(--u));
  width: calc(16 * var(--u));
}

.menu-btn i:nth-child(2) {
  top: calc(17 * var(--u));
  width: calc(16 * var(--u));
}

.menu-btn i:nth-child(3) {
  top: calc(22 * var(--u));
  width: calc(10 * var(--u));
}

.menu-open .menu-btn {
  color: #fff;
}

.menu-open .menu-btn i:nth-child(1) {
  transform: translateY(calc(5 * var(--u))) rotate(45deg);
}

.menu-open .menu-btn i:nth-child(2) {
  opacity: 0;
}

.menu-open .menu-btn i:nth-child(3) {
  width: calc(16 * var(--u));
  transform: translateY(calc(-5 * var(--u))) rotate(-45deg);
}

@media (max-width: 959px) {
  .site-header .in {
    padding: calc(14 * var(--u)) var(--gut) 0;
    align-items: center;
  }

  .site-logo img {
    width: calc(118 * var(--u));
  }

  .menu-btn {
    display: block;
    z-index: 41;
  }

  .gnav {
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: calc(96 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u));
    background: var(--grad-d);
    transform: translateX(100%);
    transition: transform .35s;
    overflow-y: auto;
  }

  .gnav a {
    color: #fff;
    font-size: calc(22 * var(--u));
    line-height: 1.2;
    padding: calc(14 * var(--u)) 0;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.3);
  }

  .gnav a[aria-current="page"] {
    color: #fff;
  }

  .gnav a[aria-current="page"]::after {
    display: none;
  }

  .gnav .cta {
    margin: calc(28 * var(--u)) 0 0;
    width: 100%;
    padding: calc(18 * var(--u)) 0;
    background: #fff;
    color: var(--ink);
    font-size: calc(15 * var(--u));
    border: 0;
  }

  .menu-open .gnav {
    transform: none;
  }
}

/* ============================================================
   parts
   ============================================================ */

.label {
  display: flex;
  align-items: center;
  font-family: var(--en);
  font-size: calc(11 * var(--u));
  line-height: 1;
  color: var(--muted);
  letter-spacing: .06em;
}

.label b {
  font-weight: 400;
  color: var(--accent);
  font-size: calc(13 * var(--u));
  letter-spacing: 0;
}

.label i {
  width: calc(40 * var(--u));
  height: 1px;
  background: var(--accent);
  margin: 0 calc(13 * var(--u)) 0 calc(9 * var(--u));
}

.label.on-dark {
  color: #C9D3DA;
}

.label.on-dark b {
  color: var(--cyan);
}

.label.on-dark i {
  background: var(--cyan);
}

.cta-sec .label.on-dark {
  color: #fff;
}

.cta-sec .label.on-dark b {
  color: #fff;
}

.cta-sec .label.on-dark i {
  background: #fff;
}

.top-svc .label.on-dark b {
  color: var(--cyan);
}

.h-en {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(64 * var(--u));
  line-height: 1;
  color: var(--body);
  margin-top: calc(27 * var(--u));
}

.h-jp {
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin-top: calc(7 * var(--u));
}

.on-dark .h-en,
.on-dark .h-jp {
  color: #fff;
}

.bar {
  width: calc(60 * var(--u));
  height: calc(3 * var(--u));
  background: var(--accent-grad);
  margin: calc(26 * var(--u)) 0;
}

.text p+p {
  margin-top: 1em;
}

.text {
  color: var(--body);
  font-size: calc(16 * var(--u));
  line-height: 2.05;
}

.sec {
  padding-block: clamp(calc(72 * var(--u)),9vw,calc(120 * var(--u)));
}

.sec.tile {
  background: var(--tile);
}

.sec+.sec.line {
  border-top: 1px solid var(--line);
}

.bgword {
  position: absolute;
  right: var(--gut);
  font-family: var(--en);
  font-size: clamp(calc(70 * var(--u)),11vw,calc(150 * var(--u)));
  color: transparent;
  -webkit-text-stroke: 1.2px #E4E8EB;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.rel {
  position: relative;
  overflow: hidden;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(28 * var(--u));
  min-height: calc(56 * var(--u));
  padding: 0 calc(28 * var(--u));
  font-weight: 700;
  font-size: calc(15 * var(--u));
  clip-path: polygon(0 0,100% 0,100% calc(100% - calc(14 * var(--u))),calc(100% - calc(14 * var(--u))) 100%,0 100%);
  transition: filter .2s;
}

.btn::after {
  content: "";
  width: calc(38 * var(--u));
  height: calc(10 * var(--u));
  flex: none;
  background: currentColor;
  clip-path: polygon(0 42%,82% 42%,82% 0,100% 50%,82% 100%,82% 58%,0 58%);
  transition: transform .25s;
}

.btn:hover::after {
  transform: translateX(calc(5 * var(--u)));
}

.btn.grad {
  background: var(--accent-grad);
  color: var(--on-accent);
}

.btn.dark {
  background: var(--grad-k);
  color: #fff;
}

.btn.white {
  background: #fff;
  color: var(--ink);
}

.btn.line {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.2px var(--ink);
  clip-path: none;
}

.btn.en {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(13 * var(--u));
  letter-spacing: .06em;
}

.btn.full {
  display: flex;
  width: 100%;
}

.btn:hover {
  filter: brightness(1.06);
}

.more {
  display: inline-flex;
  align-items: center;
  gap: calc(15 * var(--u));
  font-family: var(--en);
  font-size: calc(16 * var(--u));
  line-height: 1;
  color: var(--body);
}

.more::after {
  content: "";
  width: calc(50 * var(--u));
  height: calc(7 * var(--u));
  flex: none;
  background: currentColor;
  clip-path: polygon(0 85%,88% 85%,76% 0,80% 0,100% 100%,0 100%);
  transition: transform .25s;
}

.more:hover::after {
  transform: translateX(calc(6 * var(--u)));
}

.on-dark .more,
.more.on-dark {
  color: #fff;
}

.btn-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: calc(260 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(27 * var(--u));
  font-family: var(--en);
  font-size: calc(13 * var(--u));
  color: var(--body);
}

.btn-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--body);
  clip-path: polygon(calc(12 * var(--u)) 0,100% 0,100% calc(100% - calc(12 * var(--u))),calc(100% - calc(12 * var(--u))) 100%,0 100%,0 calc(12 * var(--u)),1px calc(12 * var(--u)),1px calc(100% - 1px),calc(100% - calc(12.4 * var(--u))) calc(100% - 1px),calc(100% - 1px) calc(100% - calc(12.4 * var(--u))),calc(100% - 1px) 1px,calc(12.4 * var(--u)) 1px,1px calc(12.4 * var(--u)),0 calc(12 * var(--u)));
}

.btn-line::after {
  content: "";
  width: calc(28 * var(--u));
  height: calc(7 * var(--u));
  background: currentColor;
  clip-path: polygon(0 85%,80% 85%,62% 0,68% 0,100% 100%,0 100%);
  transition: transform .25s;
}

.btn-line:hover::after {
  transform: translateX(calc(5 * var(--u)));
}

.chk {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u)) calc(34 * var(--u));
  margin-top: calc(22 * var(--u));
}

.chk li,
.hexlist li {
  position: relative;
  padding-left: calc(22 * var(--u));
  font-weight: 500;
  color: var(--ink);
  font-size: calc(15 * var(--u));
}

.chk li::before,
.hexlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  background: var(--accent);
  clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
}

.chk li::after,
.hexlist li::after {
  content: "";
  position: absolute;
  left: 1.5px;
  top: calc(.62em + 1.5px);
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  background: #fff;
  clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
}

.hexlist {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: calc(10 * var(--u)) calc(24 * var(--u));
  margin-top: calc(26 * var(--u));
}

@media (max-width: 959px) {
  .hexlist {
    grid-template-columns: 1fr;
  }
}

.cham2 {
  clip-path: polygon(var(--c,calc(40 * var(--u))) 0,100% 0,100% calc(100% - var(--c,calc(40 * var(--u)))),calc(100% - var(--c,calc(40 * var(--u)))) 100%,0 100%,0 var(--c,calc(40 * var(--u))));
}

/* media visual with label band */
.visual {
  position: relative;
}

.visual .media {
  --c: calc(40 * var(--u));
  aspect-ratio: 630/520;
  overflow: hidden;
  background: #E3E8EC;
}

.visual .media img,
.visual .media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visual .band {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  padding: calc(22 * var(--u)) calc(34 * var(--u)) calc(22 * var(--u)) calc(28 * var(--u));
  background: var(--accent-grad);
  color: var(--on-accent);
  min-width: min(60%,calc(420 * var(--u)));
}

.visual .band b {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(30 * var(--u));
  line-height: 1;
}

.visual .band span {
  font-family: var(--en);
  font-size: calc(13 * var(--u));
  letter-spacing: .1em;
  border-bottom: 1px solid currentColor;
  padding-bottom: calc(6 * var(--u));
  flex: 1;
  opacity: .9;
}

.hexdeco {
  position: absolute;
  right: calc(4 * var(--u));
  top: calc(-56 * var(--u));
  width: calc(96 * var(--u));
  height: calc(100 * var(--u));
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 959px) {
  .visual .band {
    padding: calc(14 * var(--u)) calc(18 * var(--u));
    gap: calc(14 * var(--u));
  }

  .visual .band b {
    font-size: calc(20 * var(--u));
  }

  .visual .band span {
    font-size: calc(10 * var(--u));
  }

  .hexdeco {
    width: calc(64 * var(--u));
    top: calc(-24 * var(--u));
  }
}

/* ============================================================
   page hero
   ============================================================ */

.page-hero {
  position: relative;
  height: calc(460 * var(--u));
  padding-top: calc(180 * var(--u));
  overflow: hidden;
  isolation: isolate;
}

.page-hero::before {
  content: "";
  position: absolute;
  left: calc(-140 * var(--u));
  top: calc(3 * var(--u));
  width: calc(1924 * var(--u));
  height: calc(1079 * var(--u));
  background: url(assets/img/hero-bg.jpg) 0 0/100% 100% no-repeat;
  opacity: .15;
  z-index: -1;
}

.page-hero h1 {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(104 * var(--u));
  line-height: 1;
  color: var(--body);
  margin: calc(36 * var(--u)) 0 0 calc(-4 * var(--u));
}

.page-hero .sub {
  display: block;
  font-family: var(--jp);
  font-size: calc(18 * var(--u));
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--navy);
  margin: calc(28 * var(--u)) 0 0 calc(4 * var(--u));
}

.page-hero .slant {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(66 * var(--u));
  background: var(--accent-grad);
  clip-path: polygon(0 calc(100% - calc(6 * var(--u))),70.1% calc(100% - calc(6 * var(--u))),74.3% 0,100% 0,100% 100%,0 100%);
}

.crumb {
  position: absolute;
  right: var(--gut);
  bottom: calc(25 * var(--u));
  z-index: 1;
  font-family: var(--en);
  font-size: calc(11 * var(--u));
  line-height: 1;
  letter-spacing: 1px;
  color: var(--on-accent);
}

.crumb a:hover {
  text-decoration: underline;
}

.crumb i {
  font-style: normal;
  margin: 0 .5em;
}

@media (max-width: 959px) {
  .page-hero {
    height: calc(260 * var(--u));
    padding-top: calc(102 * var(--u));
  }

  .page-hero::before {
    left: calc(-800 * var(--u));
  }

  .page-hero h1 {
    font-size: calc(44 * var(--u));
    margin: calc(22 * var(--u)) 0 0 -2px;
    white-space: nowrap;
  }

  .page-hero.mid h1 {
    font-size: calc(34 * var(--u));
    margin-top: calc(30 * var(--u));
  }

  .page-hero.mid .sub {
    margin-top: calc(14 * var(--u));
  }

  .crumb.long>:nth-child(-n+2) {
    display: none;
  }

  .page-hero .sub {
    font-size: calc(14 * var(--u));
    margin: calc(12 * var(--u)) 0 0 2px;
  }

  .page-hero .slant {
    height: calc(34 * var(--u));
    clip-path: polygon(0 calc(100% - calc(4 * var(--u))),50.7% calc(100% - calc(4 * var(--u))),58.7% 0,100% 0,100% 100%,0 100%);
  }

  .crumb {
    bottom: calc(9 * var(--u));
    font-size: calc(8 * var(--u));
    letter-spacing: 1px;
    word-spacing: 1px;
  }
}

/* ============================================================
   contact cta
   ============================================================ */

.cta-sec {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding: calc(59 * var(--u)) 0 calc(120 * var(--u));
}

.cta-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent-grad);
  clip-path: polygon(0 0,76.4% 0,100% calc(220 * var(--u)),100% 100%,0 100%);
}

.theme-orange .cta-sec {
  color: var(--ink);
}

.cta-sec .h-en,
.cta-sec .h-jp {
  color: inherit;
}

.cta-sec .desc {
  margin-top: calc(30 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(34 * var(--u));
}

.cta-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,calc(520 * var(--u))));
  gap: calc(30 * var(--u));
  margin-top: calc(35 * var(--u));
  max-width: calc(1070 * var(--u));
}

.cta-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: calc(200 * var(--u));
  padding: calc(42 * var(--u)) calc(30 * var(--u)) calc(32 * var(--u)) calc(40 * var(--u));
  color: var(--ink);
  transition: transform .25s;
  isolation: isolate;
}

.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  clip-path: polygon(calc(24 * var(--u)) 0,100% 0,100% calc(100% - calc(24 * var(--u))),calc(100% - calc(24 * var(--u))) 100%,0 100%,0 calc(24 * var(--u)));
}

.cta-card:hover {
  transform: translateY(calc(-3 * var(--u)));
}

.cta-card .k {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  font-family: var(--en);
  font-size: calc(22 * var(--u));
  line-height: 1;
  color: var(--body);
}

.cta-card .k svg {
  flex: none;
  width: calc(42 * var(--u));
  height: auto;
  color: var(--ink);
}

.cta-card .t {
  grid-column: 1;
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 1;
  margin-top: calc(31 * var(--u));
}

.cta-card .s {
  grid-column: 1;
  font-size: calc(13 * var(--u));
  line-height: 1;
  color: #888;
  margin-top: calc(16 * var(--u));
}

.cta-card .go {
  grid-column: 2;
  grid-row: 1/4;
  align-self: center;
  position: relative;
  width: calc(60 * var(--u));
  height: calc(52 * var(--u));
  margin-top: calc(-6 * var(--u));
  display: grid;
  place-items: center;
}

.cta-card .go::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-k);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}

.cta-card .go::after {
  content: "";
  position: relative;
  width: calc(25 * var(--u));
  height: calc(15 * var(--u));
  background: #fff;
  clip-path: polygon(0 46%,86% 46%,64% 3%,70% 0,100% 50%,70% 100%,64% 97%,86% 54%,0 54%);
}

.cta-card.line {
  color: #fff;
}

.cta-card.line::before {
  background: currentColor;
  clip-path: polygon(calc(24 * var(--u)) 0,100% 0,100% calc(100% - calc(24 * var(--u))),calc(100% - calc(24 * var(--u))) 100%,0 100%,0 calc(24 * var(--u)),1.5px calc(24.6 * var(--u)),1.5px calc(100% - 1.5px),calc(100% - calc(24.6 * var(--u))) calc(100% - 1.5px),calc(100% - 1.5px) calc(100% - calc(24.6 * var(--u))),calc(100% - 1.5px) 1.5px,calc(24.6 * var(--u)) 1.5px,1.5px calc(24.6 * var(--u)),0 calc(24 * var(--u)));
}

.cta-card.line .k,
.cta-card.line .k svg,
.cta-card.line .s {
  color: inherit;
}

.cta-card.line .go::before {
  background: currentColor;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,2.5% 50%,26.4% 97.1%,73.6% 97.1%,97.5% 50%,73.6% 2.9%,26.4% 2.9%,2.5% 50%,0 50%);
}

.cta-card.line .go::after {
  background: currentColor;
}

.theme-orange .cta-card.line {
  color: var(--ink);
}

.cta-hex {
  position: absolute;
  left: calc(100% + calc(40 * var(--u)));
  top: calc(25 * var(--u));
  width: calc(262 * var(--u));
  color: #fff;
}

.cta-hex .y {
  stroke: var(--yellow);
}

.theme-orange .cta-hex {
  color: var(--ink);
}

.theme-orange .cta-hex .y {
  stroke: #fff;
}

@media (max-width: 959px) {
  .cta-hex {
    display: none;
  }
}

/* ============================================================
   footer
   ============================================================ */

.site-footer {
  position: relative;
  background: linear-gradient(180deg,#2A2A2A,#5E5E5E);
  color: #fff;
  padding: calc(60 * var(--u)) 0 0;
  overflow: hidden;
  min-height: calc(460 * var(--u));
}

.f-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1fr) calc(200 * var(--u)) calc(404 * var(--u)) calc(62 * var(--u));
  align-items: start;
}

.site-footer .logo img {
  width: calc(190 * var(--u));
}

.site-footer .co {
  margin-top: calc(49 * var(--u));
  font-weight: 700;
  font-size: calc(16 * var(--u));
  line-height: 1;
}

.site-footer .addr {
  font-size: calc(14 * var(--u));
  color: #DDE2E6;
  line-height: calc(29 * var(--u));
  margin-top: calc(9 * var(--u));
}

.fnav {
  display: contents;
}

.fnav ul {
  margin-top: calc(26 * var(--u));
  display: grid;
  gap: calc(19 * var(--u));
}

.fnav a {
  font-family: var(--en);
  font-size: calc(14 * var(--u));
  line-height: calc(16 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
}

.fnav a::before {
  content: "";
  width: calc(8 * var(--u));
  height: calc(7 * var(--u));
  background: var(--cyan);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  flex: none;
}

.fnav a:hover {
  color: var(--cyan);
}

.theme-orange .fnav a::before {
  background: #F8B24E;
}

.pagetop {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -2px;
  color: #fff;
}

.pagetop .hx {
  width: calc(62 * var(--u));
  height: calc(54 * var(--u));
  position: relative;
  display: grid;
  place-items: center;
}

.pagetop .hx::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,2.4% 50%,26.2% 97.2%,73.8% 97.2%,97.6% 50%,73.8% 2.8%,26.2% 2.8%,2.4% 50%,0 50%);
}

.pagetop .hx::after {
  content: "";
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  border-left: 1.8px solid currentColor;
  border-top: 1.8px solid currentColor;
  transform: translateY(calc(4 * var(--u))) rotate(45deg);
}

.pagetop small {
  font-family: var(--en);
  font-size: calc(9 * var(--u));
  color: #8A9FC8;
  margin-top: calc(14 * var(--u));
  letter-spacing: .04em;
}

.f-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(20 * var(--u));
  flex-wrap: wrap;
  margin-top: calc(96 * var(--u));
  padding: calc(30 * var(--u)) 0 calc(60 * var(--u));
  border-top: 1px solid #2A3A66;
}

.f-bottom small {
  font-family: var(--en);
  font-size: calc(12 * var(--u));
  color: #8A9FC8;
}

.f-bottom a {
  font-size: calc(12 * var(--u));
  color: #8A9FC8;
}

.f-bottom a:hover {
  color: #fff;
}

.site-footer .bigword {
  position: absolute;
  left: calc(50% + calc(205 * var(--u)));
  top: calc(178 * var(--u));
  font-family: var(--en);
  font-size: calc(162 * var(--u));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.12);
  pointer-events: none;
}

/* ============================================================
   TOP
   ============================================================ */

.mv {
  position: relative;
  height: calc(705 * var(--u));
}

.mv::before {
  content: "";
  position: absolute;
  left: calc(-140 * var(--u));
  top: calc(3 * var(--u));
  width: calc(1924 * var(--u));
  height: calc(1079 * var(--u));
  background: url(assets/img/hero-bg.jpg) 0 0/100% 100% no-repeat;
  opacity: .15;
  z-index: -2;
  pointer-events: none;
}

.mv {
  overflow-x: clip;
}

.mv-words {
  position: absolute;
  right: calc(30 * var(--u));
  top: calc(89 * var(--u));
  text-align: right;
  font-family: var(--en);
  font-size: calc(88 * var(--u));
  line-height: calc(97 * var(--u));
  color: #C5C5C5;
  pointer-events: none;
  white-space: nowrap;
}

.mv-words span {
  display: block;
  animation: up .9s cubic-bezier(.2,.7,.2,1) both;
}

.mv-words span:nth-child(2) {
  animation-delay: .15s;
}

.mv-words span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes up {
  from {
    opacity: 0;
    transform: translateY(calc(22 * var(--u)));
  }
}

.mv-body {
  position: absolute;
  left: calc(30 * var(--u));
  top: calc(379 * var(--u));
}

.mv-title {
  font-family: var(--en);
  font-size: calc(58 * var(--u));
  line-height: 1;
  color: var(--body);
  white-space: nowrap;
}

.mv-proj {
  font-family: var(--en);
  font-size: calc(26 * var(--u));
  line-height: 1;
  background: linear-gradient(90deg,#101B44,#0AE6E6 100%);
  background-size: calc(279 * var(--u)) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: calc(9 * var(--u));
  display: inline-block;
}

.mv-lead {
  margin-top: calc(24 * var(--u));
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: calc(35 * var(--u));
  letter-spacing: .1em;
  color: #3F3F3F;
}

.mv-lead em {
  font-style: normal;
  color: var(--teal);
}

.mv-more {
  margin-top: calc(41 * var(--u));
  font-size: calc(18 * var(--u));
  color: #3F3F3F;
  gap: calc(18 * var(--u));
}

.mv-more::after {
  width: calc(42 * var(--u));
}

.mv-news {
  position: absolute;
  right: calc(30 * var(--u));
  top: calc(588 * var(--u));
  width: calc(415 * var(--u));
  height: calc(107 * var(--u));
  padding: calc(37 * var(--u)) calc(28 * var(--u)) 0;
  background: linear-gradient(180deg,#232227,#6E6E6E);
  color: #fff;
  box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.25);
}

.mv-news::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid transparent;
  border-image: linear-gradient(90deg,#101B44,#0AE6E6) 1;
  pointer-events: none;
}

.mv-news time {
  display: block;
  font-family: var(--en);
  font-size: calc(13 * var(--u));
  line-height: 1;
  letter-spacing: .04em;
}

.mv-news span {
  display: block;
  font-size: calc(14 * var(--u));
  line-height: 1.4;
  margin-top: calc(12 * var(--u));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-news:hover span {
  text-decoration: underline;
}

.top-svc {
  position: relative;
  isolation: isolate;
  color: #fff;
  height: calc(725 * var(--u));
  padding-top: calc(110 * var(--u));
}

.top-svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,#101B44,#0AE6E6);
  clip-path: polygon(0 0,63.9% 0,100% 58.4%,100% 100%,0 100%);
  box-shadow: inset 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.25);
}

.top-svc .grid {
  display: grid;
  grid-template-columns: calc(448 * var(--u)) minmax(0,calc(857 * var(--u)));
  justify-content: space-between;
  gap: calc(40 * var(--u));
}

.top-svc .h-en,
.top-svc .h-jp {
  color: #fff;
}

.top-svc .h-en {
  margin-top: 0;
}

.svc-tabs {
  margin: calc(75 * var(--u)) 0 0 calc(45 * var(--u));
}

.svc-tab {
  display: grid;
  grid-template-columns: calc(79 * var(--u)) 1fr;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: calc(20 * var(--u)) 0 calc(26 * var(--u));
  color: #fff;
  position: relative;
}

.svc-tab+.svc-tab {
  border-top: 1px solid #C5C5C5;
}

.svc-tab:first-child {
  padding-top: 0;
}

.svc-tab b {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(33 * var(--u));
  line-height: 1;
  margin-top: -1px;
}

.svc-tab span {
  font-family: var(--en);
  font-size: calc(26 * var(--u));
  line-height: 1;
  display: block;
}

.svc-tab small {
  display: block;
  font-family: var(--jp);
  font-size: calc(14 * var(--u));
  line-height: 1;
  margin-top: calc(10 * var(--u));
}

.svc-more {
  margin-top: calc(56 * var(--u));
  font-size: calc(20 * var(--u));
  gap: calc(18 * var(--u));
}

.svc-panel {
  position: relative;
  margin-top: 0;
  height: calc(555 * var(--u));
  padding: calc(143 * var(--u)) calc(60 * var(--u)) 0;
  color: var(--ink);
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.25));
}

.svc-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,255,.92);
  clip-path: polygon(calc(30 * var(--u)) 0,100% 0,100% calc(100% - calc(30 * var(--u))),calc(100% - calc(30 * var(--u))) 100%,0 100%,0 calc(30 * var(--u)));
}

.svc-panel {
  isolation: isolate;
}

.svc-panel h3 {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(40 * var(--u));
  line-height: 1;
  color: var(--body);
}

.svc-panel h3 b {
  color: #9B9B9B;
  font-weight: 400;
  margin-right: calc(14 * var(--u));
}

.svc-panel.n2 h3 b {
  color: #EBCE31;
}

.svc-panel.n3 h3 b {
  color: var(--teal);
}

.svc-panel .t {
  font-size: calc(24 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  margin-top: calc(48 * var(--u));
  padding-left: calc(5 * var(--u));
  color: #454545;
}

.svc-panel p:not(.t) {
  margin-top: calc(17 * var(--u));
  color: var(--body);
  font-size: calc(17 * var(--u));
  line-height: calc(40 * var(--u));
}

.svc-panel h3 a:hover {
  color: var(--accent);
}

.svc-panel .pdeco {
  position: absolute;
  right: calc(40 * var(--u));
  bottom: calc(40 * var(--u));
  width: calc(78 * var(--u));
  height: calc(78 * var(--u));
}

@media (max-width: 959px) {
  .top-svc {
    height: auto;
    padding-bottom: calc(80 * var(--u));
  }

  .top-svc .grid {
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  }

  .svc-panel {
    height: auto;
    min-height: calc(480 * var(--u));
    padding: calc(80 * var(--u)) calc(44 * var(--u)) calc(90 * var(--u));
  }

  .svc-tabs {
    margin-left: 0;
  }
}

.top-about {
  position: relative;
  padding: calc(58 * var(--u)) 0 calc(159 * var(--u));
}

.ta-row {
  display: grid;
  grid-template-columns: minmax(0,calc(640 * var(--u))) minmax(0,calc(668 * var(--u)));
  justify-content: space-between;
  align-items: center;
  margin-top: calc(40 * var(--u));
}

.ta-fig {
  width: calc(502 * var(--u));
  margin: 0 0 0 calc(70 * var(--u));
}

.ta-more {
  margin-top: calc(40 * var(--u));
}

.ta-h {
  font-size: calc(40 * var(--u));
  font-weight: 700;
  line-height: calc(58 * var(--u));
  color: var(--ink);
}

.top-about .bar {
  margin: calc(18 * var(--u)) 0 calc(25 * var(--u));
}

.ta-text {
  font-size: calc(17 * var(--u));
  line-height: calc(34 * var(--u));
  color: var(--body);
}

.ta-text p+p {
  margin-top: calc(15 * var(--u));
}

.ta-k {
  margin-top: calc(28 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
  margin-bottom: calc(12 * var(--u));
}

.top-about .bgword {
  right: calc(30 * var(--u));
  bottom: calc(-12 * var(--u));
  font-size: calc(154 * var(--u));
  -webkit-text-stroke: 1.2px #E5E9EC;
}

.top-works {
  padding: 0 0 0;
}

.tw-head {
  display: grid;
  grid-template-columns: calc(582 * var(--u)) 1fr;
  align-items: start;
}

.tw-desc {
  font-size: calc(16 * var(--u));
  line-height: calc(30 * var(--u));
  color: var(--body);
  margin-top: calc(73 * var(--u));
}

.top-works .btn-line {
  margin-top: calc(50 * var(--u));
}

.top-news {
  padding: calc(86 * var(--u)) 0 calc(138 * var(--u));
  overflow: hidden;
}

.news-wrap {
  display: grid;
  grid-template-columns: calc(383 * var(--u)) minmax(0,1fr);
  gap: calc(30 * var(--u));
}

.top-news .more {
  margin-top: calc(39 * var(--u));
  font-size: calc(14 * var(--u));
}

.top-news .more::after {
  width: calc(38 * var(--u));
  height: calc(11 * var(--u));
  clip-path: polygon(0 45%,82% 45%,64% 6%,68% 0,100% 50%,68% 100%,64% 94%,82% 55%,0 55%);
}

.slider-ctrl {
  display: flex;
  align-items: center;
  margin-top: calc(48 * var(--u));
}

.hexbtn {
  width: calc(44 * var(--u));
  height: calc(39 * var(--u));
  display: grid;
  place-items: center;
  position: relative;
  color: var(--body);
}

.hexbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--muted);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,2% 50%,26% 96.6%,74% 96.6%,98% 50%,74% 3.4%,26% 3.4%,2% 50%,0 50%);
}

.hexbtn+.hexbtn {
  margin-left: calc(12 * var(--u));
}

.hexbtn.next {
  color: #fff;
}

.hexbtn.next::before {
  background: var(--grad-k);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}

.hexbtn::after {
  content: "";
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(2px) rotate(45deg);
  position: relative;
}

.hexbtn.next::after {
  transform: translateX(-2px) rotate(-135deg);
}

.hexbtn:disabled {
  opacity: .35;
  cursor: default;
}

.slider-count {
  font-family: var(--en);
  font-size: calc(12 * var(--u));
  color: var(--body);
  margin-left: calc(20 * var(--u));
  width: calc(80 * var(--u));
}

.slider-bar {
  width: calc(160 * var(--u));
  height: 2px;
  background: var(--line);
  position: relative;
}

.slider-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--grad);
  transition: width .3s;
}

.slider {
  display: flex;
  gap: calc(22 * var(--u));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-right: calc((100vw - min(var(--wrap),100vw - var(--gut)*2))/-2);
  padding-right: var(--gut);
}

.slider::-webkit-scrollbar {
  display: none;
}

.n-card {
  flex: 0 0 calc(290 * var(--u));
  scroll-snap-align: start;
}

.n-card .ph {
  aspect-ratio: 290/163;
  overflow: hidden;
  background: #E3E8EC;
  clip-path: polygon(calc(18 * var(--u)) 0,100% 0,100% calc(100% - calc(18 * var(--u))),calc(100% - calc(18 * var(--u))) 100%,0 100%,0 calc(18 * var(--u)));
}

.n-card .ph {
  display: grid;
  place-items: center;
  background: var(--tile);
}

.n-card .ph img {
  width: 56%;
  height: auto;
  transition: transform .5s;
}

.n-card:hover .ph img {
  transform: scale(1.04);
}

.n-card .meta {
  display: flex;
  align-items: center;
  gap: calc(37 * var(--u));
  margin-top: calc(15 * var(--u));
}

.n-card time {
  font-family: var(--en);
  font-size: calc(12 * var(--u));
  line-height: 1;
  color: var(--body);
  letter-spacing: .02em;
}

.tag {
  display: inline-grid;
  place-items: center;
  min-width: calc(47 * var(--u));
  height: calc(20 * var(--u));
  padding: 0 calc(6 * var(--u));
  font-family: var(--en);
  font-size: calc(9 * var(--u));
  letter-spacing: .06em;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.n-card h3 {
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: calc(24 * var(--u));
  margin-top: calc(10 * var(--u));
}

@media (max-width: 959px) {
  .news-wrap {
    grid-template-columns: 1fr;
  }

  .slider-ctrl {
    margin-top: calc(24 * var(--u));
  }
}

/* ============================================================
   SP common + TOP
   ============================================================ */

@media (max-width: 959px) {
  .mv-words {
    font-size: clamp(calc(27 * var(--u)),6.1vw,calc(88 * var(--u)));
    line-height: 1.1;
  }
}

@media (max-width: 959px) {
  :root {
    --head-h: calc(64 * var(--u));
  }

  .f-top {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
}

@media (max-width: 959px) {
  :root {
    --gut: calc(20 * var(--u));
  }

  .h-en {
    font-size: calc(36 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .h-jp {
    font-size: calc(13 * var(--u));
    margin-top: calc(9 * var(--u));
  }

  .label {
    font-size: calc(9 * var(--u));
  }

  .label b {
    font-size: calc(11 * var(--u));
  }

  .label i {
    width: calc(28 * var(--u));
    margin: 0 calc(8 * var(--u)) 0 calc(6 * var(--u));
  }

  .more {
    font-size: calc(14 * var(--u));
    gap: calc(14 * var(--u));
  }

  .more::after {
    width: calc(34 * var(--u));
  }

  .mv {
    height: calc(640 * var(--u));
  }

  .mv::before {
    left: 0;
    top: 0;
    width: 100%;
    height: calc(640 * var(--u));
    background: url(assets/img/mv.jpg) 62% 30%/auto 104% no-repeat;
    opacity: 1;
  }

  .mv::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255,255,255,.86);
  }

  .mv-words {
    right: calc(20 * var(--u));
    top: calc(96 * var(--u));
    font-size: calc(31 * var(--u));
    line-height: calc(41 * var(--u));
  }

  .mv-body {
    left: calc(20 * var(--u));
    right: calc(20 * var(--u));
    top: calc(304 * var(--u));
  }

  .mv-title {
    font-size: calc(27 * var(--u));
    line-height: calc(36 * var(--u));
  }

  .mv-proj {
    font-size: calc(15 * var(--u));
    margin-top: calc(6 * var(--u));
    background: linear-gradient(90deg,#101B44 0,#101B44 73%,#0A9FB0 73%);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .mv-lead {
    margin-top: calc(18 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: calc(26 * var(--u));
    letter-spacing: 0;
    color: var(--body);
    font-weight: 400;
  }

  .mv-more {
    margin-top: calc(18 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .mv-news {
    left: calc(20 * var(--u));
    right: calc(20 * var(--u));
    top: calc(548 * var(--u));
    width: auto;
    height: calc(62 * var(--u));
    padding: calc(14 * var(--u)) calc(16 * var(--u)) 0;
    background: #3A3A3A;
    box-shadow: none;
  }

  .mv-news::before {
    inset: auto 0 -2px 0;
    height: 2px;
    border: 0;
    background: var(--grad);
    border-image: none;
  }

  .mv-news time {
    font-size: calc(10 * var(--u));
  }

  .mv-news span {
    font-size: calc(12 * var(--u));
    margin-top: calc(8 * var(--u));
  }

  .top-svc {
    height: auto;
    padding: calc(56 * var(--u)) 0 calc(60 * var(--u));
  }

  .top-svc::before {
    clip-path: none;
    box-shadow: none;
  }

  .top-svc .grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .svc-tabs {
    margin: calc(18 * var(--u)) 0 0;
  }

  .top-svc .h-en {
    margin-top: calc(20 * var(--u));
  }

  .svc-tab {
    grid-template-columns: calc(50 * var(--u)) 1fr;
    padding: calc(18 * var(--u)) 0;
    border-bottom: 1px solid rgba(255,255,255,.5);
  }

  .svc-tab:first-child {
    padding-top: calc(18 * var(--u));
  }

  .svc-tab+.svc-tab {
    border-top: 0;
  }

  .svc-tab b {
    font-size: calc(20 * var(--u));
    margin-top: 0;
  }

  .svc-tab span {
    font-size: calc(15 * var(--u));
  }

  .svc-tab small {
    font-size: calc(10 * var(--u));
    margin-top: calc(6 * var(--u));
  }

  .svc-more {
    order: 3;
    margin-top: calc(18 * var(--u));
    font-size: calc(14 * var(--u));
  }

  .top-svc .grid>div:first-child {
    display: flex;
    flex-direction: column;
  }

  .top-svc .grid>div:first-child .svc-more {
    display: none;
  }

  .svc-panel {
    height: auto;
    min-height: calc(290 * var(--u));
    margin-top: calc(34 * var(--u));
    padding: calc(38 * var(--u)) calc(22 * var(--u)) calc(70 * var(--u));
    filter: none;
  }

  .svc-panel::before {
    background: #EFF8F9;
    clip-path: polygon(calc(26 * var(--u)) 0,100% 0,100% calc(100% - calc(26 * var(--u))),calc(100% - calc(26 * var(--u))) 100%,0 100%,0 calc(26 * var(--u)));
  }

  .svc-panel h3 {
    font-size: calc(18 * var(--u));
  }

  .svc-panel h3 b {
    margin-right: calc(8 * var(--u));
  }

  .svc-panel .t {
    font-size: calc(15 * var(--u));
    font-weight: 700;
    line-height: calc(28 * var(--u));
    margin-top: calc(16 * var(--u));
    padding: 0;
    letter-spacing: 0;
    color: var(--ink);
  }

  .svc-panel p:not(.t) {
    font-size: calc(12 * var(--u));
    line-height: calc(23 * var(--u));
    margin-top: calc(8 * var(--u));
  }

  .svc-panel br.pc {
    display: none;
  }

  .svc-panel .pdeco {
    right: calc(20 * var(--u));
    bottom: calc(18 * var(--u));
    width: calc(46 * var(--u));
    height: calc(46 * var(--u));
  }

  .svc-sp-more {
    display: inline-flex!important;
    margin-top: calc(16 * var(--u));
  }

  .site-header .in {
    padding: calc(14 * var(--u)) calc(20 * var(--u)) 0;
  }

  .top-about {
    padding: calc(62 * var(--u)) 0 calc(80 * var(--u));
  }

  .ta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
  }

  .ta-r {
    display: contents;
  }

  .ta-fig {
    order: 1;
  }

  .ta-text,
  .ta-k,
  .ta-more {
    order: 2;
  }

  .ta-h {
    margin-top: calc(30 * var(--u));
  }

  .ta-fig {
    width: 100%;
    max-width: calc(335 * var(--u));
    margin: calc(6 * var(--u)) auto calc(24 * var(--u));
  }

  .ta-h {
    font-size: calc(24 * var(--u));
    line-height: calc(38 * var(--u));
  }

  .top-about .bar {
    width: calc(44 * var(--u));
    height: 2px;
    margin: calc(14 * var(--u)) 0 calc(30 * var(--u));
  }

  .ta-text {
    font-size: calc(14 * var(--u));
    line-height: calc(27 * var(--u));
  }

  .ta-text br {
    display: none;
  }

  .ta-text p+p {
    margin-top: calc(10 * var(--u));
  }

  .ta-k {
    font-size: calc(16 * var(--u));
    margin-top: calc(12 * var(--u));
    margin-bottom: calc(8 * var(--u));
  }

  .top-about .bgword {
    display: none;
  }

  .ta-more {
    margin-top: calc(20 * var(--u));
  }

  .tw-head {
    display: block;
  }

  .tw-desc {
    display: none;
  }

  .top-works .btn-line {
    display: flex;
    width: 100%;
    height: calc(54 * var(--u));
    margin-top: calc(30 * var(--u));
    color: #fff;
    background: var(--grad);
    clip-path: polygon(0 0,100% 0,100% calc(100% - calc(12 * var(--u))),calc(100% - calc(12 * var(--u))) 100%,0 100%);
    padding: 0 calc(22 * var(--u));
  }

  .top-works .btn-line::before {
    display: none;
  }

  .top-works .btn-line::after {
    width: calc(34 * var(--u));
  }

  .top-news {
    padding: calc(80 * var(--u)) 0 calc(80 * var(--u));
  }

  .news-wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .news-wrap>div:first-child {
    display: contents;
  }

  .top-news .more {
    display: none;
  }

  .slider {
    order: 2;
    margin: calc(28 * var(--u)) calc(var(--gut)*-1) 0 0;
    gap: calc(14 * var(--u));
  }

  .n-card {
    flex-basis: calc(262 * var(--u));
  }

  .n-card .ph {
    aspect-ratio: 262/147;
  }

  .n-card .meta {
    gap: calc(20 * var(--u));
  }

  .n-card h3 {
    font-size: calc(14 * var(--u));
    line-height: calc(22 * var(--u));
  }

  .slider-ctrl {
    order: 3;
    margin-top: calc(24 * var(--u));
  }

  .hexbtn {
    width: calc(38 * var(--u));
    height: calc(34 * var(--u));
  }

  .slider-count {
    font-size: calc(10 * var(--u));
    margin-left: calc(24 * var(--u));
    width: calc(64 * var(--u));
  }

  .slider-bar {
    flex: 1;
    width: auto;
  }

  .cta-sec {
    padding: calc(40 * var(--u)) 0 calc(70 * var(--u));
  }

  .cta-sec::before {
    background: var(--accent-grad-d);
    clip-path: polygon(0 0,calc(100% - calc(70 * var(--u))) 0,100% calc(70 * var(--u)),100% 100%,0 100%);
  }

  .cta-sec .desc {
    margin-top: calc(16 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .cta-sec .desc br {
    display: none;
  }

  .cta-cards {
    grid-template-columns: 1fr;
    gap: calc(16 * var(--u));
    margin-top: calc(24 * var(--u));
  }

  .cta-card {
    height: calc(118 * var(--u));
    padding: calc(24 * var(--u)) calc(20 * var(--u)) 0 calc(22 * var(--u));
    align-content: start;
  }

  .cta-card::before {
    clip-path: polygon(0 0,100% 0,100% calc(100% - calc(16 * var(--u))),calc(100% - calc(16 * var(--u))) 100%,0 100%);
  }

  .cta-card.line::before {
    clip-path: polygon(calc(16 * var(--u)) 0,100% 0,100% calc(100% - calc(16 * var(--u))),calc(100% - calc(16 * var(--u))) 100%,0 100%,0 calc(16 * var(--u)),1.2px calc(16.5 * var(--u)),1.2px calc(100% - 1.2px),calc(100% - calc(16.5 * var(--u))) calc(100% - 1.2px),calc(100% - 1.2px) calc(100% - calc(16.5 * var(--u))),calc(100% - 1.2px) 1.2px,calc(16.5 * var(--u)) 1.2px,1.2px calc(16.5 * var(--u)),0 calc(16 * var(--u)));
  }

  .cta-card .k {
    font-size: calc(17 * var(--u));
    gap: calc(12 * var(--u));
  }

  .cta-card .k svg {
    width: calc(26 * var(--u));
    height: auto;
  }

  .cta-card .t {
    font-size: calc(15 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .cta-card .s {
    font-size: calc(11 * var(--u));
    margin-top: calc(10 * var(--u));
  }

  .cta-card .go {
    width: calc(48 * var(--u));
    height: calc(42 * var(--u));
    margin-top: 0;
  }

  .cta-card .go::after {
    width: calc(20 * var(--u));
    height: calc(12 * var(--u));
  }

  .cta-hex {
    display: block;
    left: auto;
    right: calc(-14 * var(--u));
    top: calc(-212 * var(--u));
    width: calc(110 * var(--u));
    opacity: .8;
  }

  .site-footer {
    padding: calc(42 * var(--u)) 0 0;
    min-height: 0;
  }

  .f-top {
    display: block;
    position: relative;
  }

  .site-footer .logo img {
    width: calc(150 * var(--u));
  }

  .site-footer .co {
    margin-top: calc(34 * var(--u));
    font-size: calc(15 * var(--u));
  }

  .site-footer .addr {
    font-size: calc(12 * var(--u));
    line-height: calc(24 * var(--u));
    margin-top: calc(8 * var(--u));
  }

  .fnav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: calc(28 * var(--u));
    padding: calc(16 * var(--u)) 0 calc(36 * var(--u));
    border-top: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);
  }

  .fnav ul {
    display: contents;
  }

  .fnav li {
    margin-top: calc(22 * var(--u));
  }

  .fnav ul:first-child li:nth-child(4) {
    order: 5;
  }

  .fnav ul:last-child li:nth-child(1) {
    order: 4;
  }

  .fnav ul:last-child li:nth-child(2) {
    order: 6;
  }

  .fnav ul:last-child li:nth-child(3) {
    order: 7;
  }

  .fnav ul:first-child li:nth-child(-n+3) {
    order: 1;
  }

  .fnav a {
    font-size: calc(13 * var(--u));
  }

  .pagetop {
    position: absolute;
    right: 0;
    top: calc(-8 * var(--u));
  }

  .pagetop .hx {
    width: calc(48 * var(--u));
    height: calc(42 * var(--u));
  }

  .pagetop small {
    font-size: calc(7 * var(--u));
    margin-top: calc(10 * var(--u));
  }

  .f-bottom {
    display: block;
    border: 0;
    margin: 0;
    padding: calc(34 * var(--u)) 0 calc(160 * var(--u));
  }

  .f-bottom a {
    display: block;
    font-size: calc(11 * var(--u));
    color: #C9D3DA;
  }

  .site-footer {
    background: linear-gradient(110deg,#2A2A2A,#5E5E5E);
  }

  .f-bottom small {
    display: block;
    font-size: calc(9 * var(--u));
    margin-top: calc(36 * var(--u));
  }

  .f-bottom {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0;
  }

  .site-footer .bigword {
    left: calc(20 * var(--u));
    right: auto;
    top: auto;
    bottom: calc(24 * var(--u));
    font-size: calc(110 * var(--u));
  }
}

/* ============================================================
   sub common
   ============================================================ */

.btn-grad {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: calc(300 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(28 * var(--u));
  font-family: var(--en);
  font-size: calc(13 * var(--u));
  letter-spacing: 1px;
  color: var(--on-accent);
  background: var(--accent-grad);
  clip-path: polygon(calc(14 * var(--u)) 0,100% 0,100% calc(100% - calc(14 * var(--u))),calc(100% - calc(14 * var(--u))) 100%,0 100%,0 calc(14 * var(--u)));
}

.btn-grad::after {
  content: "";
  width: calc(38 * var(--u));
  height: calc(10 * var(--u));
  background: currentColor;
  clip-path: polygon(0 45%,82% 45%,82% 0,100% 50%,82% 100%,82% 55%,0 55%);
  transition: transform .25s;
}

.btn-grad:hover::after {
  transform: translateX(calc(5 * var(--u)));
}

.ab-text {
  font-size: calc(17 * var(--u));
  line-height: calc(34 * var(--u));
  color: var(--body);
}

.ab-text p+p {
  margin-top: calc(14 * var(--u));
}

/* ============================================================
   about
   ============================================================ */

.ab-msg {
  padding: calc(80 * var(--u)) 0 calc(90 * var(--u));
}

.ab-msg .wrap {
  display: grid;
  grid-template-columns: calc(582 * var(--u)) 1fr;
  column-gap: calc(130 * var(--u));
}

.ab-lead {
  font-size: calc(44 * var(--u));
  font-weight: 700;
  line-height: calc(66 * var(--u));
  color: var(--ink);
  margin-top: calc(68 * var(--u));
}

.ab-msg .bar {
  margin: calc(22 * var(--u)) 0 calc(42 * var(--u));
}

.ab-ph {
  width: calc(560 * var(--u));
  aspect-ratio: 560/250;
  overflow: hidden;
  clip-path: polygon(calc(28 * var(--u)) 0,100% 0,100% calc(100% - calc(28 * var(--u))),calc(100% - calc(28 * var(--u))) 100%,0 100%,0 calc(28 * var(--u)));
}

.ab-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab-r {
  padding-top: calc(50 * var(--u));
}

.ab-k {
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
  margin: calc(34 * var(--u)) 0 calc(12 * var(--u));
}

.ab-style {
  position: relative;
  overflow: hidden;
  height: calc(700 * var(--u));
  padding-top: calc(80 * var(--u));
  background: var(--grad-d);
  color: #fff;
}

.style-cards {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,calc(440 * var(--u))));
  gap: calc(30 * var(--u));
  margin-top: calc(66 * var(--u));
}

.style-card {
  position: relative;
  height: calc(350 * var(--u));
  padding: calc(44 * var(--u)) calc(36 * var(--u)) 0;
  background: #fff;
  color: var(--ink);
  clip-path: polygon(calc(28 * var(--u)) 0,100% 0,100% calc(100% - calc(28 * var(--u))),calc(100% - calc(28 * var(--u))) 100%,0 100%,0 calc(28 * var(--u)));
}

.style-card .no {
  font-family: var(--en);
  font-size: calc(14 * var(--u));
  line-height: 1;
  color: var(--sc);
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
}

.style-card .no::after {
  content: "";
  width: calc(40 * var(--u));
  height: 1px;
  background: currentColor;
}

.style-card .en-t {
  display: block;
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(38 * var(--u));
  line-height: 1;
  margin-top: calc(31 * var(--u));
}

.style-card .jt {
  display: block;
  font-size: calc(16 * var(--u));
  line-height: 1;
  color: var(--navy);
  margin-top: calc(14 * var(--u));
}

.style-card .d {
  margin-top: calc(22 * var(--u));
  padding-top: calc(30 * var(--u));
  border-top: 1px solid var(--line);
  color: var(--body);
  font-size: calc(15 * var(--u));
  line-height: calc(30 * var(--u));
}

.style-card .hx {
  position: absolute;
  right: calc(32 * var(--u));
  top: calc(32 * var(--u));
  width: calc(92 * var(--u));
  height: calc(80 * var(--u));
}

.ab-style .bgword {
  right: calc(30 * var(--u));
  bottom: calc(-8 * var(--u));
  font-size: calc(170 * var(--u));
  -webkit-text-stroke: 1.2px rgba(255,255,255,.16);
}

.ab-str {
  padding: calc(90 * var(--u)) 0 calc(110 * var(--u));
}

.ab-str .wrap {
  display: grid;
  grid-template-columns: calc(582 * var(--u)) 1fr;
}

.strength {
  border-top: 1px solid var(--line);
}

.strength li {
  position: relative;
  display: grid;
  grid-template-columns: calc(100 * var(--u)) 1fr;
  height: calc(180 * var(--u));
  padding-top: calc(34 * var(--u));
  border-bottom: 1px solid var(--line);
}

.strength li::after {
  content: "";
  position: absolute;
  right: calc(16 * var(--u));
  top: calc(40 * var(--u));
  width: calc(28 * var(--u));
  height: calc(24 * var(--u));
  background: var(--teal);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,4.5% 50%,27.6% 94.8%,72.4% 94.8%,95.5% 50%,72.4% 5.2%,27.6% 5.2%,4.5% 50%,0 50%);
}

.strength b {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(34 * var(--u));
  line-height: 1;
  color: var(--accent);
}

.strength h3 {
  font-size: calc(24 * var(--u));
  line-height: 1;
  color: var(--ink);
}

.strength p {
  color: var(--body);
  font-size: calc(15 * var(--u));
  line-height: calc(30 * var(--u));
  margin-top: calc(18 * var(--u));
}

.ab-top {
  padding-bottom: calc(110 * var(--u));
}

.msg {
  display: grid;
  grid-template-columns: calc(552 * var(--u)) 1fr;
  height: auto;
  padding: calc(72 * var(--u)) calc(60 * var(--u)) calc(72 * var(--u));
  background: var(--tile);
  clip-path: polygon(calc(40 * var(--u)) 0,100% 0,100% calc(100% - calc(40 * var(--u))),calc(100% - calc(40 * var(--u))) 100%,0 100%,0 calc(40 * var(--u)));
}

.msg-h {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(44 * var(--u));
  line-height: 1;
  color: var(--body);
  margin-top: calc(30 * var(--u));
}

.msg .who {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: calc(16 * var(--u));
  margin-top: calc(40 * var(--u));
}

.msg .who .ph {
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  background: #fff;
  display: grid;
  place-items: center;
  font-family: var(--en);
  font-size: calc(11 * var(--u));
  letter-spacing: 1px;
  color: var(--muted);
  clip-path: polygon(calc(18 * var(--u)) 0,100% 0,100% calc(100% - calc(18 * var(--u))),calc(100% - calc(18 * var(--u))) 100%,0 100%,0 calc(18 * var(--u)));
  box-shadow: inset 0 0 0 1px var(--line);
}

.msg .who small {
  font-size: calc(13 * var(--u));
  color: var(--muted);
}

.msg .who strong {
  font-size: calc(22 * var(--u));
  line-height: 1;
  display: block;
}

.msg .ab-text {
  padding-top: calc(52 * var(--u));
  line-height: calc(36 * var(--u));
  width: fit-content;
}

.msg .ab-text p+p {
  margin-top: calc(30 * var(--u));
}

.ab-co {
  padding-bottom: calc(110 * var(--u));
}

.ab-co .wrap {
  display: grid;
  grid-template-columns: calc(582 * var(--u)) 1fr;
}

.ab-co .ab-text {
  line-height: calc(36 * var(--u));
  margin-top: calc(4 * var(--u));
}

.ab-co .btn-grad {
  margin-top: calc(44 * var(--u));
}

@media (max-width: 959px) {
  .ab-msg .wrap,
  .ab-str .wrap,
  .ab-co .wrap {
    grid-template-columns: minmax(0,1fr) minmax(0,1.2fr);
    column-gap: calc(50 * var(--u));
  }

  .ab-ph {
    width: 100%;
  }

  .ab-lead {
    font-size: calc(34 * var(--u));
    line-height: calc(52 * var(--u));
  }

  .msg {
    grid-template-columns: 1fr 1.2fr;
    height: auto;
    padding-bottom: calc(60 * var(--u));
  }

  .style-card {
    height: auto;
    padding-bottom: calc(40 * var(--u));
  }
}

@media (max-width: 959px) {
  .ab-msg {
    padding: calc(50 * var(--u)) 0 calc(70 * var(--u));
  }

  .ab-msg .wrap,
  .ab-str .wrap,
  .ab-co .wrap,
  .msg {
    display: block;
  }

  .ab-lead {
    font-size: calc(24 * var(--u));
    line-height: calc(38 * var(--u));
    margin-top: calc(30 * var(--u));
  }

  .ab-msg .bar {
    width: calc(44 * var(--u));
    height: 2px;
    margin: calc(14 * var(--u)) 0 calc(28 * var(--u));
  }

  .ab-r {
    padding-top: calc(20 * var(--u));
  }

  .ab-text {
    font-size: calc(14 * var(--u));
    line-height: calc(27 * var(--u));
  }

  .ab-text br {
    display: none;
  }

  .ab-text p+p {
    margin-top: calc(10 * var(--u));
  }

  .ab-k {
    font-size: calc(16 * var(--u));
    margin: calc(12 * var(--u)) 0 calc(4 * var(--u));
  }

  .ab-style {
    height: auto;
    padding: calc(40 * var(--u)) 0 calc(60 * var(--u));
  }

  .style-cards {
    grid-template-columns: 1fr;
    gap: calc(16 * var(--u));
    margin-top: calc(26 * var(--u));
  }

  .style-card {
    height: calc(190 * var(--u));
    padding: calc(28 * var(--u)) calc(22 * var(--u)) 0;
    clip-path: polygon(calc(20 * var(--u)) 0,100% 0,100% calc(100% - calc(20 * var(--u))),calc(100% - calc(20 * var(--u))) 100%,0 100%,0 calc(20 * var(--u)));
  }

  .style-card .no {
    font-size: calc(11 * var(--u));
  }

  .style-card .no::after {
    width: calc(30 * var(--u));
  }

  .style-card .en-t {
    font-size: calc(26 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .style-card .jt {
    font-size: calc(13 * var(--u));
    margin-top: calc(8 * var(--u));
  }

  .style-card .d {
    border: 0;
    padding: 0;
    margin-top: calc(12 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .style-card .d br {
    display: none;
  }

  .style-card .hx {
    right: calc(12 * var(--u));
    top: calc(14 * var(--u));
    width: calc(64 * var(--u));
    height: calc(56 * var(--u));
  }

  .ab-style .bgword {
    display: none;
  }

  .ab-str {
    padding: calc(60 * var(--u)) 0 calc(60 * var(--u));
  }

  .strength {
    margin-top: calc(30 * var(--u));
  }

  .strength li {
    grid-template-columns: calc(54 * var(--u)) 1fr;
    height: auto;
    padding: calc(20 * var(--u)) 0 calc(24 * var(--u));
  }

  .strength li::after {
    display: none;
  }

  .strength b {
    font-size: calc(24 * var(--u));
  }

  .strength h3 {
    font-size: calc(16 * var(--u));
    line-height: calc(28 * var(--u));
  }

  .strength p {
    font-size: calc(13 * var(--u));
    line-height: calc(24 * var(--u));
    margin-top: calc(6 * var(--u));
  }

  .strength p br {
    display: none;
  }

  .ab-top {
    padding-bottom: calc(60 * var(--u));
  }

  .msg {
    padding: calc(36 * var(--u)) calc(22 * var(--u)) calc(40 * var(--u));
    clip-path: polygon(calc(24 * var(--u)) 0,100% 0,100% calc(100% - calc(24 * var(--u))),calc(100% - calc(24 * var(--u))) 100%,0 100%,0 calc(24 * var(--u)));
  }

  .msg-h {
    font-size: calc(28 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .msg .who .ph {
    width: calc(90 * var(--u));
    height: calc(90 * var(--u));
  }

  .msg .who strong {
    font-size: calc(18 * var(--u));
  }

  .msg .who {
    margin-top: calc(26 * var(--u));
  }

  .msg .ab-text {
    width: auto;
  }

  .msg .ab-text {
    padding-top: calc(24 * var(--u));
    line-height: calc(27 * var(--u));
  }

  .ab-co {
    padding-bottom: calc(70 * var(--u));
  }

  .ab-co .ab-text {
    margin-top: calc(24 * var(--u));
  }

  .ab-co .btn-grad {
    width: 100%;
    margin-top: calc(24 * var(--u));
  }
}

/* ============================================================
   service
   ============================================================ */

.sv-intro {
  padding: calc(80 * var(--u)) 0 0;
  height: calc(380 * var(--u));
}

.sv-intro .wrap {
  display: grid;
  grid-template-columns: calc(712 * var(--u)) 1fr;
}

.sv-intro .ab-text {
  line-height: calc(36 * var(--u));
  margin-top: calc(-18 * var(--u));
}

.biz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--u));
  margin-top: calc(62 * var(--u));
}

.biz-chips a {
  display: flex;
  gap: calc(16 * var(--u));
  align-items: center;
  height: calc(44 * var(--u));
  border: 1px solid var(--line);
  padding: 0 calc(18 * var(--u)) 0 calc(16 * var(--u));
  font-family: var(--en);
  font-size: calc(12 * var(--u));
  letter-spacing: .5px;
  color: var(--body);
}

.biz-chips a b {
  font-weight: 400;
  color: var(--teal);
}

.biz-chips a:hover {
  border-color: var(--teal);
}

.biz {
  height: calc(700 * var(--u));
  padding-top: calc(90 * var(--u));
}

.biz.tile {
  background: var(--tile);
}

.biz .grid {
  display: grid;
  grid-template-columns: calc(630 * var(--u)) 1fr;
  column-gap: calc(82 * var(--u));
  align-items: start;
}

.biz.rev .grid {
  grid-template-columns: 1fr calc(630 * var(--u));
  column-gap: calc(38 * var(--u));
}

.biz.rev .visual {
  order: 2;
}

.biz .visual .media {
  width: calc(630 * var(--u));
  height: calc(520 * var(--u));
  aspect-ratio: auto;
}

.biz .visual .band {
  width: auto;
  min-width: 0;
  height: calc(96 * var(--u));
  padding: 0 calc(28 * var(--u));
  gap: calc(34 * var(--u));
}

.biz .visual .band b {
  font-size: calc(30 * var(--u));
}

.biz .visual .band span {
  flex: none;
  font-size: calc(14 * var(--u));
  letter-spacing: 1px;
  padding: 0 0 calc(10 * var(--u));
  border-bottom-color: rgba(255,255,255,.6);
  opacity: 1;
  min-width: calc(150 * var(--u));
}

.biz .hexdeco {
  right: calc(4 * var(--u));
  top: calc(-56 * var(--u));
  width: calc(96 * var(--u));
  height: calc(100 * var(--u));
}

.biz-t {
  padding-top: calc(27 * var(--u));
}

.biz .no {
  display: flex;
  align-items: center;
  font-family: var(--en);
  font-size: calc(15 * var(--u));
  line-height: 1;
  color: var(--accent);
}

.biz .no::after {
  content: "";
  width: calc(40 * var(--u));
  height: 1px;
  background: var(--accent);
  margin: 0 calc(14 * var(--u)) 0 calc(9 * var(--u));
  order: 1;
}

.biz .no small {
  order: 2;
  font-family: var(--jp);
  font-size: calc(13 * var(--u));
  color: var(--muted);
  font-weight: 500;
}

.biz h2 {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(46 * var(--u));
  line-height: 1;
  color: var(--body);
  margin: calc(31 * var(--u)) 0 0 -2px;
}

.biz h3 {
  font-size: calc(25 * var(--u));
  line-height: 1;
  color: var(--ink);
  margin-top: calc(32 * var(--u));
}

.biz .bar {
  width: calc(60 * var(--u));
  height: 2px;
  margin: calc(25 * var(--u)) 0 calc(30 * var(--u));
}

.biz-d {
  font-size: calc(15 * var(--u));
  line-height: calc(30 * var(--u));
  color: var(--body);
}

.biz .hexlist {
  grid-template-columns: calc(320 * var(--u)) 1fr;
  gap: 0;
  margin-top: calc(20 * var(--u));
}

.biz .hexlist li {
  font-size: calc(15 * var(--u));
  line-height: calc(40 * var(--u));
  color: var(--navy);
  padding-left: calc(24 * var(--u));
}

.biz .hexlist li::before {
  top: calc(14 * var(--u));
  width: calc(14 * var(--u));
  height: calc(12 * var(--u));
  background: var(--accent);
}

.biz .hexlist li::after {
  left: 1.3px;
  top: calc(15.2 * var(--u));
  width: calc(11.4 * var(--u));
  height: calc(9.6 * var(--u));
}

.biz .note {
  font-size: calc(13 * var(--u));
  color: var(--muted);
  margin-top: calc(22 * var(--u));
}

.biz .more {
  margin-top: calc(26 * var(--u));
  font-family: var(--jp);
  font-size: calc(14 * var(--u));
  font-weight: 700;
  color: var(--accent);
}

.biz.theme-orange .visual .band {
  color: var(--ink);
}

.sv-flow {
  position: relative;
  overflow: hidden;
  height: calc(730 * var(--u));
  padding-top: calc(100 * var(--u));
}

.sv-flow::before {
  content: "";
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  top: 0;
  border-top: 1px solid var(--line);
}

.sv-flow .bgword {
  right: calc(30 * var(--u));
  bottom: calc(-8 * var(--u));
  font-size: calc(150 * var(--u));
}

.flow {
  display: grid;
  grid-template-columns: repeat(var(--n,6),minmax(0,1fr));
  margin-top: calc(60 * var(--u));
  position: relative;
}

.flow::before {
  content: "";
  position: absolute;
  left: calc(100%/var(--n,6)/2);
  right: calc(100%/var(--n,6)/2);
  top: calc(50 * var(--u));
  border-top: 1px dashed var(--accent);
}

.flow li {
  text-align: center;
  padding: 0 calc(8 * var(--u));
  position: relative;
  --c: var(--body);
}

.flow .hx {
  width: calc(116 * var(--u));
  height: calc(100 * var(--u));
  margin: 0 auto;
  display: grid;
  place-items: center;
  position: relative;
  background: #fff;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}

.flow .hx::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,1.4% 50%,25.7% 98.4%,74.3% 98.4%,98.6% 50%,74.3% 1.6%,25.7% 1.6%,1.4% 50%,0 50%);
}

.flow .hx small {
  display: block;
  font-family: var(--en);
  font-size: calc(9 * var(--u));
  letter-spacing: 1px;
  color: var(--muted);
}

.flow .hx b {
  display: block;
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(24 * var(--u));
  color: var(--c);
  line-height: 1;
  margin-top: calc(8 * var(--u));
}

.flow li:nth-child(3n+2) {
  --c: var(--accent);
}

.flow li:nth-child(3n) {
  --c: var(--navy);
}

.flow h3 {
  font-size: calc(17 * var(--u));
  line-height: 1;
  margin-top: calc(58 * var(--u));
  color: var(--ink);
}

.flow p {
  font-size: calc(13 * var(--u));
  line-height: calc(22 * var(--u));
  color: var(--body);
  margin-top: calc(18 * var(--u));
}

@media (max-width: 959px) {
  .sv-intro {
    height: auto;
    padding-bottom: calc(60 * var(--u));
  }

  .sv-intro .wrap {
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  }

  .biz {
    height: auto;
    padding: calc(80 * var(--u)) 0;
  }

  .biz .grid,
  .biz.rev .grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    column-gap: calc(40 * var(--u));
  }

  .biz .visual .media {
    width: 100%;
    height: auto;
    aspect-ratio: 630/520;
  }

  .biz-d br {
    display: none;
  }

  .biz .hexlist {
    grid-template-columns: 1fr 1fr;
  }

  .sv-flow {
    height: auto;
    padding-bottom: calc(120 * var(--u));
  }
}

@media (max-width: 959px) {
  .sv-intro {
    padding: calc(50 * var(--u)) 0 calc(40 * var(--u));
  }

  .sv-intro .wrap {
    display: block;
  }

  .sv-intro .ab-text {
    margin-top: calc(24 * var(--u));
    line-height: calc(27 * var(--u));
  }

  .biz-chips {
    gap: calc(8 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .biz-chips a {
    height: calc(38 * var(--u));
    padding: 0 calc(12 * var(--u));
    gap: calc(10 * var(--u));
    font-size: calc(11 * var(--u));
  }

  .biz {
    padding: calc(50 * var(--u)) 0 calc(60 * var(--u));
  }

  .biz .grid,
  .biz.rev .grid {
    display: block;
  }

  .biz .hexdeco {
    right: calc(-6 * var(--u));
    top: calc(-30 * var(--u));
    width: calc(64 * var(--u));
    height: calc(64 * var(--u));
  }

  .biz .visual .band {
    height: calc(64 * var(--u));
    padding: 0 calc(18 * var(--u));
    gap: calc(16 * var(--u));
  }

  .biz .visual .band b {
    font-size: calc(20 * var(--u));
  }

  .biz .visual .band span {
    font-size: calc(10 * var(--u));
    min-width: calc(100 * var(--u));
  }

  .biz-t {
    padding-top: calc(30 * var(--u));
  }

  .biz .no {
    font-size: calc(12 * var(--u));
  }

  .biz .no::after {
    width: calc(28 * var(--u));
    margin: 0 calc(10 * var(--u)) 0 calc(6 * var(--u));
  }

  .biz .no small {
    font-size: calc(11 * var(--u));
  }

  .biz h2 {
    font-size: calc(30 * var(--u));
    margin-top: calc(18 * var(--u));
  }

  .biz h3 {
    font-size: calc(17 * var(--u));
    line-height: calc(28 * var(--u));
    margin-top: calc(14 * var(--u));
  }

  .biz .bar {
    width: calc(44 * var(--u));
    margin: calc(14 * var(--u)) 0 calc(18 * var(--u));
  }

  .biz-d {
    font-size: calc(13 * var(--u));
    line-height: calc(25 * var(--u));
  }

  .biz .hexlist {
    grid-template-columns: 1fr;
    margin-top: calc(14 * var(--u));
  }

  .biz .hexlist li {
    font-size: calc(14 * var(--u));
    line-height: calc(32 * var(--u));
  }

  .biz .hexlist li::before {
    top: calc(10 * var(--u));
  }

  .biz .hexlist li::after {
    top: calc(11.2 * var(--u));
  }

  .sv-flow {
    padding: calc(50 * var(--u)) 0 calc(80 * var(--u));
  }

  .sv-flow .bgword {
    display: none;
  }

  .flow {
    grid-template-columns: 1fr;
    gap: calc(16 * var(--u));
    margin-top: calc(30 * var(--u));
  }

  .flow::before {
    left: calc(34 * var(--u));
    right: auto;
    top: calc(30 * var(--u));
    bottom: calc(30 * var(--u));
    border-top: 0;
    border-left: 1px dashed var(--accent);
  }

  .flow li {
    display: grid;
    grid-template-columns: calc(68 * var(--u)) 1fr;
    gap: calc(4 * var(--u)) calc(18 * var(--u));
    text-align: left;
    align-items: center;
    padding: 0;
  }

  .flow .hx {
    width: calc(68 * var(--u));
    height: calc(59 * var(--u));
    grid-row: 1/3;
  }

  .flow .hx b {
    font-size: calc(16 * var(--u));
    margin-top: calc(3 * var(--u));
  }

  .flow .hx small {
    font-size: calc(6.5 * var(--u));
  }

  .flow h3 {
    font-size: calc(15 * var(--u));
    margin: 0;
    align-self: end;
  }

  .flow p {
    margin: 0;
    align-self: start;
  }

  .flow p br {
    display: none;
  }
}

/* ============================================================
   company
   ============================================================ */

.co-prof {
  padding: calc(80 * var(--u)) 0 calc(120 * var(--u));
}

.co-prof .wrap,
.co-acc .wrap {
  display: grid;
  grid-template-columns: calc(582 * var(--u)) minmax(0,1fr);
}

.profile {
  margin-top: calc(10 * var(--u));
}

.profile div {
  position: relative;
  display: grid;
  grid-template-columns: calc(188 * var(--u)) 1fr;
  padding: calc(36 * var(--u)) 0 calc(36 * var(--u));
  border-top: 1px solid var(--line);
}

.profile div:last-child {
  border-bottom: 1px solid var(--line);
}

.profile div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: calc(148 * var(--u));
  height: 1.5px;
  background: var(--teal);
}

.profile dt {
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  padding-top: calc(4 * var(--u));
}

.profile dd {
  font-size: calc(16 * var(--u));
  line-height: calc(32 * var(--u));
  color: var(--body);
  margin-top: calc(-6 * var(--u));
}

.co-acc {
  height: calc(620 * var(--u));
  padding-top: calc(117 * var(--u));
  background: var(--tile);
}

.co-name {
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin-top: calc(62 * var(--u));
}

.co-acc .ab-text {
  font-size: calc(16 * var(--u));
  line-height: calc(32 * var(--u));
  margin-top: calc(20 * var(--u));
}

.co-acc .btn-grad {
  width: calc(280 * var(--u));
  margin-top: calc(42 * var(--u));
}

.map {
  height: calc(440 * var(--u));
  margin-top: calc(-10 * var(--u));
  background: #fff;
  overflow: hidden;
  clip-path: polygon(calc(40 * var(--u)) 0,100% 0,100% calc(100% - calc(40 * var(--u))),calc(100% - calc(40 * var(--u))) 100%,0 100%,0 calc(40 * var(--u)));
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.co-more {
  padding: calc(100 * var(--u)) 0 calc(100 * var(--u));
}

.more-links {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,calc(675 * var(--u))));
  gap: calc(30 * var(--u));
  margin-top: calc(37 * var(--u));
}

.more-link {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(190 * var(--u));
  padding: 0 calc(40 * var(--u));
  isolation: isolate;
}

.more-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--line);
  clip-path: polygon(calc(28 * var(--u)) 0,100% 0,100% calc(100% - calc(28 * var(--u))),calc(100% - calc(28 * var(--u))) 100%,0 100%,0 calc(28 * var(--u)),1px calc(28.4 * var(--u)),1px calc(100% - 1px),calc(100% - calc(28.4 * var(--u))) calc(100% - 1px),calc(100% - 1px) calc(100% - calc(28.4 * var(--u))),calc(100% - 1px) 1px,calc(28.4 * var(--u)) 1px,1px calc(28.4 * var(--u)),0 calc(28 * var(--u)));
}

.more-link b {
  display: block;
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(34 * var(--u));
  line-height: 1;
  color: var(--body);
}

.more-link em {
  display: block;
  font-style: normal;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  margin-top: calc(12 * var(--u));
}

.more-link small {
  display: block;
  font-size: calc(13 * var(--u));
  line-height: 1;
  color: var(--muted);
  margin-top: calc(20 * var(--u));
}

.more-link i {
  position: relative;
  width: calc(56 * var(--u));
  height: calc(49 * var(--u));
  display: grid;
  place-items: center;
}

.more-link i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-k);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}

.more-link i::after {
  content: "";
  position: relative;
  width: calc(24 * var(--u));
  height: calc(12 * var(--u));
  background: #fff;
  clip-path: polygon(0 45%,82% 45%,64% 3%,70% 0,100% 50%,70% 100%,64% 97%,82% 55%,0 55%);
  transition: transform .25s;
}

.more-link:hover i::after {
  transform: translateX(calc(4 * var(--u)));
}

@media (max-width: 959px) {
  .co-prof .wrap,
  .co-acc .wrap {
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  }

  .co-acc {
    height: auto;
    padding-bottom: calc(80 * var(--u));
  }
}

@media (max-width: 959px) {
  .co-prof {
    padding: calc(50 * var(--u)) 0 calc(60 * var(--u));
  }

  .co-prof .wrap,
  .co-acc .wrap {
    display: block;
  }

  .profile {
    margin-top: calc(28 * var(--u));
  }

  .profile div {
    grid-template-columns: 1fr;
    padding: calc(18 * var(--u)) 0;
  }

  .profile div::before {
    width: calc(70 * var(--u));
  }

  .profile dt {
    font-size: calc(13 * var(--u));
    padding: 0;
  }

  .profile dd {
    font-size: calc(14 * var(--u));
    line-height: calc(26 * var(--u));
    margin-top: calc(8 * var(--u));
  }

  .co-acc {
    padding: calc(50 * var(--u)) 0 calc(50 * var(--u));
  }

  .co-name {
    font-size: calc(16 * var(--u));
    margin-top: calc(28 * var(--u));
  }

  .co-acc .ab-text {
    font-size: calc(14 * var(--u));
    line-height: calc(26 * var(--u));
    margin-top: calc(10 * var(--u));
  }

  .co-acc .btn-grad {
    width: 100%;
    margin-top: calc(20 * var(--u));
  }

  .map {
    height: calc(240 * var(--u));
    margin-top: calc(24 * var(--u));
    clip-path: polygon(calc(20 * var(--u)) 0,100% 0,100% calc(100% - calc(20 * var(--u))),calc(100% - calc(20 * var(--u))) 100%,0 100%,0 calc(20 * var(--u)));
  }

  .co-more {
    padding: calc(50 * var(--u)) 0 calc(60 * var(--u));
  }

  .more-links {
    grid-template-columns: 1fr;
    gap: calc(14 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .more-link {
    height: calc(120 * var(--u));
    padding: 0 calc(20 * var(--u));
  }

  .more-link b {
    font-size: calc(24 * var(--u));
  }

  .more-link em {
    font-size: calc(12 * var(--u));
    margin-top: calc(8 * var(--u));
  }

  .more-link small {
    font-size: calc(11 * var(--u));
    margin-top: calc(10 * var(--u));
  }

  .more-link i {
    width: calc(44 * var(--u));
    height: calc(38 * var(--u));
  }
}

/* ============================================================
   list / article
   ============================================================ */

.wk-list {
  padding: calc(80 * var(--u)) 0 calc(110 * var(--u));
}

.wk-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: calc(70 * var(--u)) calc(30 * var(--u));
  margin-top: calc(65 * var(--u));
}

.wk-card {
  display: block;
}

.wk-card .ph {
  aspect-ratio: 440/290;
  background: #EEF1F3;
  overflow: hidden;
}

.wk-card .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .5s;
}

.wk-card:hover .ph img {
  transform: scale(1.04);
}

.wk-card .cap {
  position: relative;
  height: calc(110 * var(--u));
  padding: calc(34 * var(--u)) calc(80 * var(--u)) 0 calc(24 * var(--u));
  background: linear-gradient(90deg,#2A2A2A,#5E5E5E);
  color: #fff;
}

.wk-card .cap::after {
  content: "";
  position: absolute;
  right: calc(26 * var(--u));
  top: calc(41 * var(--u));
  width: calc(38 * var(--u));
  height: calc(8 * var(--u));
  background: #fff;
  clip-path: polygon(0 85%,82% 85%,64% 0,70% 0,100% 100%,0 100%);
  transition: transform .25s;
}

.wk-card:hover .cap::after {
  transform: translateX(calc(5 * var(--u)));
}

.wk-card .cap p {
  font-family: var(--en);
  font-size: calc(10 * var(--u));
  line-height: 1;
  letter-spacing: 1.5px;
  color: #C9D3DA;
}

.wk-card .cap b {
  font-weight: 400;
  font-size: calc(13 * var(--u));
  letter-spacing: 0;
  color: var(--cyan);
  margin-right: calc(23 * var(--u));
}

.wk-card h3 {
  font-size: calc(17 * var(--u));
  line-height: 1.4;
  margin-top: calc(16 * var(--u));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(18 * var(--u));
  margin-top: calc(60 * var(--u));
  font-family: var(--en);
}

.pager .page-numbers {
  position: relative;
  width: calc(48 * var(--u));
  height: calc(42 * var(--u));
  display: grid;
  place-items: center;
  font-size: calc(12 * var(--u));
  color: var(--body);
}

.pager .page-numbers::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #C9D1D7;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,2.5% 50%,26.3% 97.1%,73.7% 97.1%,97.5% 50%,73.7% 2.9%,26.3% 2.9%,2.5% 50%,0 50%);
}

.pager {
  isolation: isolate;
}

.pager .current {
  color: #fff;
}

.pager .current::before {
  background: var(--grad-k);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}

.pager .prev,
.pager .next {
  width: calc(42 * var(--u));
}

.pager .prev::before,
.pager .next::before {
  inset: auto 0 auto 0;
  top: 50%;
  height: calc(10 * var(--u));
  margin-top: calc(-5 * var(--u));
  background: var(--body);
  clip-path: polygon(0 45%,82% 45%,82% 0,100% 50%,82% 100%,82% 55%,0 55%);
}

.pager .prev::before {
  transform: scaleX(-1);
}

.wd {
  padding: calc(96 * var(--u)) 0 0;
}

.wd-cat {
  font-family: var(--en);
  font-size: calc(11 * var(--u));
  letter-spacing: 1.5px;
  color: var(--muted);
}

.wd-cat b {
  font-weight: 400;
  font-size: calc(14 * var(--u));
  letter-spacing: 0;
  color: var(--teal);
  margin-right: calc(20 * var(--u));
}

.wd-h {
  font-size: calc(40 * var(--u));
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
  margin-top: calc(24 * var(--u));
}

.wd .bar {
  margin: calc(20 * var(--u)) 0 calc(48 * var(--u));
}

.wd-mv {
  background: #EEF1F3;
  overflow: hidden;
}

.wd-mv img {
  width: 100%;
  height: auto;
}

.wd-body {
  display: grid;
  grid-template-columns: calc(440 * var(--u)) 1fr;
  column-gap: calc(142 * var(--u));
  margin-top: calc(100 * var(--u));
}

.wd-info {
  align-self: start;
}

.wd-info div {
  display: grid;
  grid-template-columns: calc(130 * var(--u)) 1fr;
  align-items: center;
  min-height: calc(66 * var(--u));
  border-top: 1px solid var(--line);
}

.wd-info div:last-child {
  border-bottom: 1px solid var(--line);
}

.wd-info dt {
  font-family: var(--en);
  font-size: calc(11 * var(--u));
  letter-spacing: 1.5px;
  color: var(--teal);
}

.wd-info dd {
  font-size: calc(14 * var(--u));
  color: var(--body);
}

.entry {
  color: var(--body);
  font-size: calc(15 * var(--u));
  line-height: calc(30 * var(--u));
}

.entry>*+* {
  margin-top: 1.3em;
}

.entry h2 {
  font-size: calc(24 * var(--u));
  line-height: 1.5;
  color: var(--ink);
  margin-top: 2em;
}

.entry h3 {
  font-size: calc(19 * var(--u));
  color: var(--ink);
  margin-top: 1.8em;
}

.entry img {
  height: auto;
}

.entry a {
  color: var(--accent);
  text-decoration: underline;
}

.entry ul {
  list-style: disc;
  padding-left: 1.4em;
}

.entry ol {
  list-style: decimal;
  padding-left: 1.4em;
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  margin-top: calc(90 * var(--u));
  padding: calc(28 * var(--u)) 0 calc(60 * var(--u));
  border-top: 1px solid var(--line);
  font-family: var(--en);
  font-size: calc(13 * var(--u));
  letter-spacing: 1px;
  color: var(--body);
}

.post-nav .prev,
.post-nav .next {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  margin-top: calc(16 * var(--u));
}

.post-nav .next {
  justify-self: end;
}

.post-nav .prev::before,
.post-nav .next::after {
  content: "";
  width: calc(38 * var(--u));
  height: calc(10 * var(--u));
  background: currentColor;
  clip-path: polygon(0 45%,82% 45%,82% 0,100% 50%,82% 100%,82% 55%,0 55%);
}

.post-nav .prev::before {
  transform: scaleX(-1);
}

.post-nav .off {
  opacity: .3;
}

.post-nav .all {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  font-size: calc(10 * var(--u));
  letter-spacing: 1.5px;
}

.post-nav .all i {
  position: relative;
  width: calc(44 * var(--u));
  height: calc(38 * var(--u));
  display: grid;
  place-items: center;
}

.post-nav .all i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,3% 50%,26.5% 96.5%,73.5% 96.5%,97% 50%,73.5% 3.5%,26.5% 3.5%,3% 50%,0 50%);
}

.post-nav .all i::after {
  content: "";
  width: calc(14 * var(--u));
  height: calc(9 * var(--u));
  border-top: 1.2px solid var(--navy);
  border-bottom: 1.2px solid var(--navy);
  background: linear-gradient(var(--navy),var(--navy)) center/100% 1.2px no-repeat;
}

.nw-list {
  position: relative;
  overflow: hidden;
  padding: calc(80 * var(--u)) 0 calc(240 * var(--u));
}

.nw-list .wrap {
  display: grid;
  grid-template-columns: calc(582 * var(--u)) 1fr;
}

.nw-cat-h {
  font-family: var(--en);
  font-size: calc(11 * var(--u));
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-top: calc(62 * var(--u));
}

.nw-cats {
  margin-top: calc(20 * var(--u));
  display: grid;
  gap: calc(14 * var(--u));
}

.nw-cats a {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  font-family: var(--en);
  font-size: calc(13 * var(--u));
  letter-spacing: 1px;
  color: var(--body);
}

.nw-cats a::before {
  content: "";
  width: calc(14 * var(--u));
  height: calc(12 * var(--u));
  background: var(--teal);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,9% 50%,30% 89%,70% 89%,91% 50%,70% 11%,30% 11%,9% 50%,0 50%);
}

.nw-cats a[aria-current] {
  color: var(--navy);
}

.nw-cats a[aria-current]::before {
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}

.nw-list .bgword {
  right: calc(30 * var(--u));
  bottom: calc(30 * var(--u));
  font-size: calc(150 * var(--u));
}

.list-news {
  border-top: 1px solid var(--line);
}

.list-news a {
  display: grid;
  grid-template-columns: calc(128 * var(--u)) calc(96 * var(--u)) 1fr calc(38 * var(--u));
  align-items: center;
  height: calc(104 * var(--u));
  border-bottom: 1px solid var(--line);
}

.list-news time {
  font-family: var(--en);
  font-size: calc(14 * var(--u));
  letter-spacing: 1px;
  color: var(--body);
}

.list-news .tag {
  width: calc(64 * var(--u));
  height: calc(28 * var(--u));
  font-size: calc(10 * var(--u));
  letter-spacing: 1.5px;
}

.list-news h2 {
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

.list-news a:hover h2 {
  color: var(--accent);
}

.list-news .arr {
  width: calc(38 * var(--u));
  height: calc(8 * var(--u));
  background: var(--body);
  clip-path: polygon(0 85%,82% 85%,64% 0,70% 0,100% 100%,0 100%);
}

.nd {
  padding: calc(90 * var(--u)) 0 0;
}

.nd-in {
  width: min(calc(1000 * var(--u)),100% - var(--gut)*2);
  margin-inline: auto;
}

.nd-meta {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
}

.nd-meta time {
  font-family: var(--en);
  font-size: calc(14 * var(--u));
  letter-spacing: 1px;
  color: var(--body);
}

.nd-meta .tag {
  width: calc(64 * var(--u));
  height: calc(28 * var(--u));
  font-size: calc(10 * var(--u));
  letter-spacing: 1.5px;
}

.nd-h {
  font-size: calc(34 * var(--u));
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink);
  margin-top: calc(34 * var(--u));
  padding-bottom: calc(30 * var(--u));
  position: relative;
  border-bottom: 1px solid var(--line);
}

.nd-h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: calc(120 * var(--u));
  height: 2px;
  background: var(--grad);
}

.nd .entry {
  margin-top: calc(46 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(36 * var(--u));
}

@media (max-width: 959px) {
  .wd-body {
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
    column-gap: calc(50 * var(--u));
  }

  .nw-list .wrap {
    grid-template-columns: minmax(0,.6fr) minmax(0,1.4fr);
  }
}

@media (max-width: 959px) {
  .wk-list {
    padding: calc(50 * var(--u)) 0 calc(70 * var(--u));
  }

  .wk-grid {
    grid-template-columns: 1fr;
    gap: calc(20 * var(--u));
    margin-top: calc(28 * var(--u));
  }

  .wk-card .cap {
    height: calc(70 * var(--u));
    padding: calc(16 * var(--u)) calc(60 * var(--u)) 0 calc(18 * var(--u));
  }

  .wk-card .cap::after {
    right: calc(18 * var(--u));
    top: calc(30 * var(--u));
    width: calc(34 * var(--u));
  }

  .wk-card .cap p {
    font-size: calc(8 * var(--u));
  }

  .wk-card .cap b {
    font-size: calc(11 * var(--u));
    margin-right: calc(12 * var(--u));
  }

  .wk-card h3 {
    font-size: calc(14 * var(--u));
    margin-top: calc(8 * var(--u));
  }

  .pager {
    gap: calc(10 * var(--u));
    margin-top: calc(36 * var(--u));
  }

  .wd {
    padding: calc(50 * var(--u)) 0 0;
  }

  .wd-h {
    font-size: calc(24 * var(--u));
    margin-top: calc(14 * var(--u));
  }

  .wd .bar {
    width: calc(44 * var(--u));
    height: 2px;
    margin: calc(14 * var(--u)) 0 calc(26 * var(--u));
  }

  .wd-body {
    display: block;
    margin-top: calc(40 * var(--u));
  }

  .wd-info {
    margin-bottom: calc(30 * var(--u));
  }

  .wd-info div {
    grid-template-columns: calc(100 * var(--u)) 1fr;
    min-height: calc(52 * var(--u));
  }

  .entry {
    font-size: calc(14 * var(--u));
    line-height: calc(27 * var(--u));
  }

  .post-nav {
    margin-top: calc(50 * var(--u));
    padding-bottom: calc(50 * var(--u));
    font-size: calc(11 * var(--u));
  }

  .post-nav .prev,
  .post-nav .next {
    gap: calc(10 * var(--u));
  }

  .post-nav .prev::before,
  .post-nav .next::after {
    width: calc(26 * var(--u));
  }

  .nw-list {
    padding: calc(50 * var(--u)) 0 calc(70 * var(--u));
  }

  .nw-list .wrap {
    display: block;
  }

  .nw-cat-h {
    margin-top: calc(28 * var(--u));
  }

  .nw-cats {
    display: flex;
    gap: calc(20 * var(--u));
    margin: calc(12 * var(--u)) 0 calc(26 * var(--u));
  }

  .nw-list .bgword {
    display: none;
  }

  .list-news a {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    height: auto;
    padding: calc(18 * var(--u)) 0;
    gap: calc(10 * var(--u)) calc(14 * var(--u));
  }

  .list-news time {
    font-size: calc(12 * var(--u));
  }

  .list-news h2 {
    grid-column: 1/3;
    font-size: calc(14 * var(--u));
  }

  .list-news .arr {
    display: none;
  }

  .nd {
    padding: calc(50 * var(--u)) 0 0;
  }

  .nd-h {
    font-size: calc(22 * var(--u));
    margin-top: calc(18 * var(--u));
    padding-bottom: calc(18 * var(--u));
  }

  .nd .entry {
    margin-top: calc(28 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(28 * var(--u));
  }
}

/* ============================================================
   contact / form
   ============================================================ */

.ct {
  position: relative;
  overflow: hidden;
  padding: calc(80 * var(--u)) 0 calc(250 * var(--u));
}

.ct .wrap {
  display: grid;
  grid-template-columns: calc(582 * var(--u)) minmax(0,calc(798 * var(--u)));
}

.ct-lead {
  font-size: calc(16 * var(--u));
  line-height: calc(34 * var(--u));
  color: var(--body);
  margin-top: calc(44 * var(--u));
}

.ct-line {
  position: relative;
  display: block;
  width: calc(470 * var(--u));
  height: calc(230 * var(--u));
  margin-top: calc(46 * var(--u));
  padding: calc(46 * var(--u)) calc(36 * var(--u)) 0;
  color: #fff;
  background: var(--grad-d);
  clip-path: polygon(calc(28 * var(--u)) 0,100% 0,100% calc(100% - calc(28 * var(--u))),calc(100% - calc(28 * var(--u))) 100%,0 100%,0 calc(28 * var(--u)));
}

.ct-line>b {
  display: block;
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(34 * var(--u));
  line-height: 1;
  margin-top: calc(28 * var(--u));
}

.ct-line .t {
  display: block;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: 1;
  margin-top: calc(16 * var(--u));
}

.ct-line .s {
  display: block;
  font-size: calc(13 * var(--u));
  line-height: 1;
  opacity: .85;
  margin-top: calc(18 * var(--u));
}

.ct-line>i {
  position: absolute;
  right: calc(32 * var(--u));
  top: calc(106 * var(--u));
  width: calc(56 * var(--u));
  height: calc(49 * var(--u));
  display: grid;
  place-items: center;
}

.ct-line>i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,2.4% 50%,26.2% 97.3%,73.8% 97.3%,97.6% 50%,73.8% 2.7%,26.2% 2.7%,2.4% 50%,0 50%);
}

.ct-line>i::after {
  content: "";
  width: calc(22 * var(--u));
  height: calc(12 * var(--u));
  background: #fff;
  clip-path: polygon(0 45%,82% 45%,64% 3%,70% 0,100% 50%,70% 100%,64% 97%,82% 55%,0 55%);
  transition: transform .25s;
}

.ct-line:hover>i::after {
  transform: translateX(calc(4 * var(--u)));
}

.ct-sim {
  margin-top: calc(36 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 2;
  color: var(--body);
}

.ct-sim a {
  color: var(--accent);
  text-decoration: underline;
}

.ct .bgword {
  right: calc(30 * var(--u));
  bottom: calc(40 * var(--u));
  font-size: calc(150 * var(--u));
}

.f-row {
  margin-bottom: calc(37 * var(--u));
}

.f-row>label,
.f-label {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}

.f-row .req,
.f-row .opt {
  display: inline-grid;
  place-items: center;
  font-size: calc(11 * var(--u));
  font-weight: 500;
  line-height: 1;
}

.f-row .req {
  width: calc(44 * var(--u));
  height: calc(20 * var(--u));
  border: 1px solid var(--teal);
  color: var(--teal);
}

.f-row .opt {
  color: var(--muted);
  padding: 0;
  min-height: 0;
  background: none;
  box-shadow: none;
}

.wpcf7 input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=hidden]),
.wpcf7 select,
.wpcf7 textarea {
  display: block;
  width: 100%;
  height: calc(56 * var(--u));
  margin-top: calc(18 * var(--u));
  padding: 0 calc(20 * var(--u));
  border: 1px solid #C9D1D7;
  background: #fff;
  font: inherit;
  font-size: calc(15 * var(--u));
  color: var(--ink);
  border-radius: 0;
  -webkit-appearance: none;
}

.wpcf7 textarea {
  height: calc(220 * var(--u));
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  line-height: 1.8;
  resize: vertical;
}

.wpcf7 ::placeholder {
  color: #B9C1C7;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(10,159,176,.15);
}

.f-radio {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--u)) calc(44 * var(--u));
  margin-top: calc(24 * var(--u));
}

.f-radio .wpcf7-list-item {
  margin: 0;
}

.f-radio label,
.f-accept label {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  font-size: calc(15 * var(--u));
  color: var(--body);
  cursor: pointer;
}

.f-radio input {
  -webkit-appearance: none;
  appearance: none;
  width: calc(20 * var(--u));
  height: calc(18 * var(--u));
  margin: 0;
  background: #C9D1D7;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,7% 50%,28.5% 92%,71.5% 92%,93% 50%,71.5% 8%,28.5% 8%,7% 50%,0 50%);
  cursor: pointer;
}

.f-radio input:checked {
  background: radial-gradient(circle,var(--teal) 0 calc(4.5 * var(--u)),transparent calc(5 * var(--u))),var(--teal);
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,7% 50%,28.5% 92%,71.5% 92%,93% 50%,71.5% 8%,28.5% 8%,7% 50%,0 50%,25% 50%,37.5% 72%,62.5% 72%,75% 50%,62.5% 28%,37.5% 28%,25% 50%,0 50%);
}

.f-accept {
  margin: calc(50 * var(--u)) 0 calc(36 * var(--u));
}

.f-accept .wpcf7-list-item {
  margin: 0;
}

.f-accept input {
  -webkit-appearance: none;
  appearance: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  margin: 0;
  border: 1.4px solid var(--teal);
  background: #fff;
  cursor: pointer;
}

.f-accept input:checked {
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10 3.5 3.5L15 7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/100% no-repeat;
}

.f-accept a {
  color: var(--body);
  text-decoration: underline;
  text-decoration-color: var(--muted);
}

.f-submit {
  position: relative;
  width: calc(340 * var(--u));
}

.f-submit::before {
  content: "SEND";
  position: absolute;
  left: calc(36 * var(--u));
  top: calc(27 * var(--u));
  font-family: var(--en);
  font-size: calc(16 * var(--u));
  letter-spacing: 2px;
  line-height: 1;
  color: #fff;
  pointer-events: none;
  z-index: 1;
}

.f-submit::after {
  content: "";
  position: absolute;
  right: calc(36 * var(--u));
  top: calc(32 * var(--u));
  width: calc(40 * var(--u));
  height: calc(8 * var(--u));
  background: #fff;
  clip-path: polygon(0 85%,82% 85%,64% 0,70% 0,100% 100%,0 100%);
  pointer-events: none;
}

.wpcf7 input[type=submit] {
  display: block;
  width: calc(340 * var(--u));
  height: calc(72 * var(--u));
  padding: 0 0 0 calc(110 * var(--u));
  text-align: left;
  background: var(--grad);
  color: #fff;
  border: 0;
  font: inherit;
  font-weight: 500;
  font-size: calc(14 * var(--u));
  cursor: pointer;
  clip-path: polygon(calc(18 * var(--u)) 0,100% 0,100% calc(100% - calc(18 * var(--u))),calc(100% - calc(18 * var(--u))) 100%,0 100%,0 calc(18 * var(--u)));
  transition: filter .2s;
}

.wpcf7 input[type=submit]:hover {
  filter: brightness(1.08);
}

.wpcf7 input[type=submit]:disabled {
  opacity: .5;
  cursor: default;
}

.wpcf7-spinner {
  position: absolute;
  right: calc(-40 * var(--u));
  top: calc(24 * var(--u));
}

.wpcf7-not-valid-tip {
  color: #D33;
  font-size: calc(13 * var(--u));
  margin-top: calc(8 * var(--u));
}

.wpcf7-not-valid-tip::before {
  content: "！ ";
}

.wpcf7 form .wpcf7-response-output {
  margin: calc(24 * var(--u)) 0 0;
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border: 1px solid var(--line);
  font-size: calc(14 * var(--u));
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--line);
  color: #D33;
}

.estimate-note {
  background: var(--tile);
  padding: calc(18 * var(--u)) calc(22 * var(--u));
  font-size: calc(14 * var(--u));
  color: var(--body);
  margin-bottom: calc(36 * var(--u));
  white-space: pre-line;
}

@media (max-width: 959px) {
  .ct .wrap {
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
    column-gap: calc(40 * var(--u));
  }

  .ct-line {
    width: 100%;
  }
}

@media (max-width: 959px) {
  .ct {
    padding: calc(50 * var(--u)) 0 calc(80 * var(--u));
  }

  .ct .wrap {
    display: flex;
    flex-direction: column;
  }

  .ct-l {
    display: contents;
  }

  .ct-form {
    order: 1;
    margin-top: calc(30 * var(--u));
  }

  .ct-line,
  .ct-sim {
    order: 2;
  }

  .ct-lead {
    font-size: calc(14 * var(--u));
    line-height: calc(27 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .ct-lead br {
    display: none;
  }

  .ct-line {
    height: calc(180 * var(--u));
    margin-top: calc(24 * var(--u));
    padding: calc(28 * var(--u)) calc(22 * var(--u)) 0;
    clip-path: polygon(calc(20 * var(--u)) 0,100% 0,100% calc(100% - calc(20 * var(--u))),calc(100% - calc(20 * var(--u))) 100%,0 100%,0 calc(20 * var(--u)));
  }

  .ct-line>b {
    font-size: calc(26 * var(--u));
    margin-top: calc(18 * var(--u));
  }

  .ct-line .t {
    font-size: calc(15 * var(--u));
    margin-top: calc(10 * var(--u));
  }

  .ct-line .s {
    font-size: calc(11 * var(--u));
    margin-top: calc(10 * var(--u));
  }

  .ct-line>i {
    right: calc(20 * var(--u));
    top: calc(76 * var(--u));
    width: calc(44 * var(--u));
    height: calc(38 * var(--u));
  }

  .ct-sim {
    margin: calc(20 * var(--u)) 0 calc(40 * var(--u));
  }

  .ct .bgword {
    display: none;
  }

  .f-row {
    margin-bottom: calc(30 * var(--u));
  }

  .wpcf7 input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=hidden]) {
    height: calc(50 * var(--u));
    margin-top: calc(12 * var(--u));
    padding: 0 calc(14 * var(--u));
  }

  .wpcf7 textarea {
    height: calc(180 * var(--u));
    margin-top: calc(12 * var(--u));
  }

  .f-radio {
    flex-direction: column;
    gap: calc(12 * var(--u));
    margin-top: calc(16 * var(--u));
  }

  .f-submit,
  .wpcf7 input[type=submit] {
    width: 100%;
  }
}

/* ============================================================
   privacy
   ============================================================ */

.page-hero.small h1 {
  font-size: calc(72 * var(--u));
  margin-top: calc(52 * var(--u));
}

.pv {
  padding: calc(90 * var(--u)) 0 calc(130 * var(--u));
}

.pv-in {
  width: min(calc(1000 * var(--u)),100% - var(--gut)*2);
  margin-inline: auto;
}

.pv-lead {
  font-size: calc(16 * var(--u));
  line-height: calc(34 * var(--u));
  color: var(--body);
  margin-bottom: calc(76 * var(--u));
}

.pv-sec {
  display: grid;
  grid-template-columns: calc(62 * var(--u)) 1fr;
  padding: calc(42 * var(--u)) 0 calc(60 * var(--u));
  border-top: 1px solid var(--line);
}

.pv-sec:last-child {
  border-bottom: 1px solid var(--line);
}

.pv-sec b {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(22 * var(--u));
  line-height: 1;
  color: var(--teal);
}

.pv-sec h2 {
  font-size: calc(22 * var(--u));
  line-height: 1;
  color: var(--ink);
}

.pv-sec p {
  font-size: calc(15 * var(--u));
  line-height: calc(30 * var(--u));
  color: var(--body);
  margin-top: calc(22 * var(--u));
}

@media (max-width: 959px) {
  .page-hero.small h1 {
    font-size: calc(30 * var(--u));
    margin-top: calc(30 * var(--u));
  }

  .pv {
    padding: calc(50 * var(--u)) 0 calc(70 * var(--u));
  }

  .pv-lead {
    font-size: calc(14 * var(--u));
    line-height: calc(27 * var(--u));
    margin-bottom: calc(30 * var(--u));
  }

  .pv-lead br {
    display: none;
  }

  .pv-sec {
    grid-template-columns: calc(40 * var(--u)) 1fr;
    padding: calc(24 * var(--u)) 0 calc(30 * var(--u));
  }

  .pv-sec b {
    font-size: calc(16 * var(--u));
  }

  .pv-sec h2 {
    font-size: calc(17 * var(--u));
  }

  .pv-sec p {
    font-size: calc(13 * var(--u));
    line-height: calc(25 * var(--u));
    margin-top: calc(12 * var(--u));
  }
}

/* ============================================================
   estimator (LP)
   ============================================================ */

.lp-intro .grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
  gap: clamp(calc(30 * var(--u)),5vw,calc(80 * var(--u)));
  align-items: center;
}

.lp-intro h2 {
  font-size: clamp(calc(30 * var(--u)),3.8vw,calc(52 * var(--u)));
  line-height: 1.45;
}

.lp-intro h2 em {
  font-style: normal;
  color: var(--accent);
}

.lp-intro .row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--u));
  margin-top: calc(34 * var(--u));
}

@media (max-width: 959px) {
  .lp-intro .grid {
    grid-template-columns: 1fr;
  }
}

.problems {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: calc(30 * var(--u));
  margin-top: calc(56 * var(--u));
}

.problems li {
  border-top: 1.5px solid var(--ink);
  padding-top: calc(24 * var(--u));
  display: grid;
  grid-template-columns: calc(62 * var(--u)) 1fr;
  gap: calc(4 * var(--u)) calc(10 * var(--u));
}

.problems b {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(30 * var(--u));
  color: var(--accent);
  line-height: 1.2;
}

.problems h3 {
  font-size: clamp(calc(17 * var(--u)),1.5vw,calc(21 * var(--u)));
}

.problems p {
  grid-column: 2;
  color: var(--body);
  font-size: calc(15 * var(--u));
}

@media (max-width: 959px) {
  .problems {
    grid-template-columns: 1fr;
  }
}

.est .grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(calc(24 * var(--u)),4vw,calc(70 * var(--u)));
  align-items: start;
  margin-top: calc(50 * var(--u));
}

@media (max-width: 959px) {
  .est .grid {
    grid-template-columns: 1fr;
  }
}

.q {
  display: flex;
  align-items: baseline;
  gap: calc(14 * var(--u));
  font-size: clamp(calc(18 * var(--u)),1.6vw,calc(22 * var(--u)));
  font-weight: 700;
}

.q b {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(14 * var(--u));
  color: var(--accent);
}

.opts {
  display: grid;
  gap: calc(10 * var(--u));
  margin-top: calc(18 * var(--u));
}

.opts.two {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

@media (max-width: 959px) {
  .opts.two {
    grid-template-columns: 1fr;
  }
}

.opt {
  display: grid;
  grid-template-columns: calc(22 * var(--u)) 1fr auto;
  gap: calc(16 * var(--u));
  align-items: center;
  text-align: left;
  background: #fff;
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .15s;
}

.opt:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.opt .mk {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #AAB2B8;
  position: relative;
}

.opt[role=checkbox] .mk {
  border-radius: 0;
}

.opt.sel {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.opt.sel .mk {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.opt.sel .mk::after {
  content: "";
  position: absolute;
  inset: calc(5 * var(--u));
  border-radius: inherit;
  background: var(--accent);
}

.opt b {
  display: block;
  font-size: calc(15 * var(--u));
}

.opt span {
  display: block;
  font-size: calc(12 * var(--u));
  color: var(--body);
  line-height: 1.6;
  margin-top: 2px;
}

.opt .pr {
  font-size: calc(12 * var(--u));
  color: var(--body);
  white-space: nowrap;
  font-weight: 500;
}

.opt.sel .pr {
  color: var(--accent);
}

.adjust {
  margin-top: calc(44 * var(--u));
}

.adjust h4 {
  font-size: calc(15 * var(--u));
  margin: calc(28 * var(--u)) 0 0;
}

.result {
  position: sticky;
  top: calc(20 * var(--u));
  background: #fff;
  padding: clamp(calc(24 * var(--u)),3vw,calc(40 * var(--u)));
}

.result::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(4 * var(--u));
  background: var(--grad-k);
}

.result .ttl {
  font-size: clamp(calc(16 * var(--u)),1.4vw,calc(20 * var(--u)));
  font-weight: 700;
  display: flex;
  gap: calc(12 * var(--u));
  align-items: baseline;
}

.result .ttl b {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(14 * var(--u));
  color: var(--accent);
}

.result .k {
  font-size: calc(13 * var(--u));
  color: var(--body);
  margin-top: calc(24 * var(--u));
}

.result .yen {
  font-family: var(--en);
  font-size: clamp(calc(40 * var(--u)),4.4vw,calc(64 * var(--u)));
  line-height: 1.15;
  color: var(--ink);
}

.result .yen small {
  font-family: var(--jp);
  font-size: calc(14 * var(--u));
  color: var(--body);
  margin-left: calc(6 * var(--u));
}

.result .was {
  font-family: var(--en);
  font-size: calc(15 * var(--u));
  color: var(--muted);
  text-decoration: line-through;
  margin-right: calc(10 * var(--u));
}

.result .off {
  font-family: var(--en);
  font-size: calc(11 * var(--u));
  color: #fff;
  background: var(--accent);
  padding: 2px calc(8 * var(--u));
}

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 calc(16 * var(--u));
  margin-top: calc(16 * var(--u));
}

.facts div {
  border-top: 1px solid var(--line);
  padding: calc(12 * var(--u)) 0;
}

.facts dt {
  font-size: calc(12 * var(--u));
  color: var(--body);
}

.facts dd {
  font-size: calc(17 * var(--u));
  font-weight: 700;
  margin-top: 2px;
}

.incl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(6 * var(--u)) calc(16 * var(--u));
  margin-top: calc(10 * var(--u));
  padding-top: calc(16 * var(--u));
  border-top: 1px solid var(--line);
}

.incl li {
  font-size: calc(14 * var(--u));
  padding-left: calc(18 * var(--u));
  position: relative;
}

.incl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: calc(10 * var(--u));
  height: 2px;
  background: var(--accent);
}

.result .note {
  font-size: calc(12 * var(--u));
  color: var(--muted);
  margin-top: calc(14 * var(--u));
  line-height: 1.7;
}

.reset {
  font-size: calc(13 * var(--u));
  color: var(--accent);
  text-decoration: underline;
  margin-top: calc(12 * var(--u));
}

.boost {
  --c: calc(30 * var(--u));
  margin-top: calc(22 * var(--u));
  padding: calc(30 * var(--u));
  background: var(--accent-grad-d);
  color: var(--on-accent);
  clip-path: polygon(0 0,calc(100% - calc(30 * var(--u))) 0,100% calc(30 * var(--u)),100% 100%,0 100%);
}

.boost .tg {
  font-family: var(--en);
  font-size: calc(13 * var(--u));
  letter-spacing: .18em;
}

.boost h3 {
  font-size: clamp(calc(18 * var(--u)),1.6vw,calc(22 * var(--u)));
  margin-top: calc(10 * var(--u));
}

.boost p {
  font-size: calc(14 * var(--u));
  margin-top: calc(10 * var(--u));
  line-height: 1.8;
}

.boost ul {
  margin-top: calc(14 * var(--u));
  display: grid;
  gap: calc(4 * var(--u));
}

.boost li {
  font-size: calc(13 * var(--u));
  padding-left: calc(14 * var(--u));
  position: relative;
}

.boost li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .8em;
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: currentColor;
}

.boost .p {
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--u));
  margin-top: calc(18 * var(--u));
  font-size: calc(13 * var(--u));
}

.boost .p b {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(30 * var(--u));
}

.boost .btn {
  margin-top: calc(16 * var(--u));
}

@media (max-width: 959px) {
  .boost .btn {
    font-size: calc(13 * var(--u));
    padding: 0 calc(16 * var(--u));
    gap: calc(10 * var(--u));
  }
}

.est-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: #fff;
  box-shadow: 0 calc(-6 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.08);
  padding: calc(10 * var(--u)) var(--gut);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: calc(14 * var(--u));
}

.est-bar .v {
  font-family: var(--en);
  font-size: calc(20 * var(--u));
}

.est-bar .m {
  font-size: calc(11 * var(--u));
  color: var(--body);
}

.est-bar .btn {
  min-height: calc(46 * var(--u));
  padding: 0 calc(18 * var(--u));
  font-size: calc(14 * var(--u));
}

@media (max-width: 959px) {
  .est-bar.on {
    display: flex;
  }
}

.reasons {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: calc(30 * var(--u));
  margin-top: calc(56 * var(--u));
}

.reason {
  --c: calc(28 * var(--u));
  padding: calc(36 * var(--u));
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.reason b {
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(34 * var(--u));
  color: var(--accent);
}

.reason h3 {
  font-size: clamp(calc(18 * var(--u)),1.6vw,calc(21 * var(--u)));
  margin-top: calc(12 * var(--u));
  padding-bottom: calc(18 * var(--u));
  border-bottom: 1px solid var(--line);
}

.reason p {
  color: var(--body);
  font-size: calc(15 * var(--u));
  margin-top: calc(18 * var(--u));
}

@media (max-width: 959px) {
  .reasons {
    grid-template-columns: 1fr;
  }
}

.plans {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: calc(30 * var(--u));
  margin-top: calc(56 * var(--u));
}

.plan {
  background: #fff;
  padding: calc(36 * var(--u));
  position: relative;
}

.plan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(4 * var(--u));
  background: var(--grad-k);
}

.plan:first-child::before {
  background: var(--accent-grad);
}

.plan h3 {
  font-size: calc(20 * var(--u));
}

.plan .pr {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
  margin-top: calc(20 * var(--u));
  padding-bottom: calc(18 * var(--u));
  border-bottom: 1px solid var(--line);
  font-size: calc(13 * var(--u));
  color: var(--body);
}

.plan .pr b {
  font-family: var(--en);
  font-weight: 400;
  font-size: clamp(calc(28 * var(--u)),2.8vw,calc(40 * var(--u)));
  color: var(--ink);
}

.plan p {
  font-size: calc(14 * var(--u));
  color: var(--body);
  margin-top: calc(16 * var(--u));
}

.plan-custom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(10 * var(--u)) calc(30 * var(--u));
  margin-top: calc(30 * var(--u));
  padding: calc(26 * var(--u)) calc(36 * var(--u));
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.plan-custom b {
  font-size: calc(20 * var(--u));
}

.plan-custom span {
  font-size: calc(14 * var(--u));
  color: var(--body);
  flex: 1;
}

.plan-custom em {
  font-style: normal;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  color: var(--accent);
}

@media (max-width: 959px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

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

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  list-style: none;
  display: grid;
  grid-template-columns: calc(34 * var(--u)) 1fr calc(20 * var(--u));
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(24 * var(--u)) 0;
  font-weight: 700;
  font-size: clamp(calc(15 * var(--u)),1.3vw,calc(18 * var(--u)));
  cursor: pointer;
}

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

.faq summary::before {
  content: "Q";
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(22 * var(--u));
  color: var(--accent);
}

.faq summary::after {
  content: "";
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-right: 1.6px solid var(--ink);
  border-bottom: 1.6px solid var(--ink);
  transform: rotate(45deg);
  transition: transform .2s;
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq details p {
  padding: 0 calc(30 * var(--u)) calc(26 * var(--u)) calc(44 * var(--u));
  color: var(--body);
  font-size: calc(15 * var(--u));
}

/* ============================================================
   reveal
   ============================================================ */

.rv {
  opacity: 0;
  transform: translateY(calc(24 * var(--u)));
  transition: opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
}

.rv.in {
  opacity: 1;
  transform: none;
}

.no-js .rv {
  opacity: 1;
  transform: none;
}

.theme-orange .cta-sec .label,
.theme-orange .cta-sec .label b {
  color: var(--ink);
}

.theme-orange .cta-sec .label i {
  background: var(--ink);
}

/* ============================================================
   LP layout
   ============================================================ */

.lp-head {
  display: grid;
  grid-template-columns: calc(740 * var(--u)) 1fr;
  align-items: start;
}

.lp-desc {
  font-size: calc(16 * var(--u));
  line-height: calc(32 * var(--u));
  color: var(--body);
  margin-top: calc(38 * var(--u));
}

.lp-intro {
  height: calc(660 * var(--u));
  padding-top: calc(90 * var(--u));
  overflow-x: clip;
}

.lp-intro .grid {
  display: grid;
  grid-template-columns: 1fr calc(580 * var(--u));
  align-items: start;
}

.lp-intro h2 {
  font-size: calc(50 * var(--u));
  line-height: calc(74 * var(--u));
  font-weight: 700;
  color: var(--ink);
  margin-top: calc(38 * var(--u));
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.lp-intro h2 em {
  font-style: normal;
  color: var(--teal);
}

.theme-orange .lp-intro h2 em {
  color: #E8772E;
  background: linear-gradient(90deg,#E8772E,#F5A93B);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-orange .hexdeco polygon:last-child {
  stroke: #F79B43;
}

.lp-intro .bar {
  margin: calc(18 * var(--u)) 0 calc(26 * var(--u));
}

.lp-intro .text {
  font-size: calc(17 * var(--u));
  line-height: calc(34 * var(--u));
}

.lp-intro .row {
  display: flex;
  gap: calc(20 * var(--u));
  margin-top: calc(38 * var(--u));
}

.lp-intro .row .btn {
  height: calc(64 * var(--u));
  min-height: calc(64 * var(--u));
  font-size: calc(16 * var(--u));
  padding: 0 calc(30 * var(--u));
}

.lp-intro .row .btn.grad {
  width: calc(320 * var(--u));
}

.lp-intro .row .btn.line {
  width: calc(240 * var(--u));
}

.lp-intro .chk {
  gap: calc(10 * var(--u)) calc(34 * var(--u));
  margin-top: calc(40 * var(--u));
}

.lp-intro .chk li {
  font-size: calc(14 * var(--u));
}

.lp-intro .visual {
  margin-top: 0;
}

.lp-intro .visual .media {
  aspect-ratio: 580/440;
}

.lp-prob {
  position: relative;
  height: calc(480 * var(--u));
  padding-top: calc(90 * var(--u));
}

.lp-prob::before {
  content: "";
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  top: 0;
  border-top: 1px solid var(--line);
}

.problems {
  grid-template-columns: repeat(3,minmax(0,calc(440 * var(--u))));
  gap: calc(30 * var(--u));
  margin-top: calc(66 * var(--u));
}

.problems li {
  border-top: 1.5px solid var(--ink);
  padding-top: calc(30 * var(--u));
  grid-template-columns: calc(70 * var(--u)) 1fr;
  gap: 0;
}

.problems b {
  font-size: calc(30 * var(--u));
  line-height: 1;
}

.problems h3 {
  font-size: calc(21 * var(--u));
  line-height: 1.3;
}

.problems p {
  font-size: calc(15 * var(--u));
  line-height: calc(28 * var(--u));
  margin-top: calc(12 * var(--u));
}

.est {
  background: var(--tile);
  padding: calc(90 * var(--u)) 0 calc(110 * var(--u));
}

.est .grid {
  grid-template-columns: calc(700 * var(--u)) calc(640 * var(--u));
  justify-content: space-between;
  gap: 0;
  margin-top: calc(70 * var(--u));
}

.est .q {
  font-size: calc(22 * var(--u));
}

.opts {
  gap: calc(10 * var(--u));
}

.opt {
  min-height: calc(76 * var(--u));
}

.result {
  padding: calc(40 * var(--u));
}

.lp-reason {
  position: relative;
  overflow: hidden;
  height: calc(680 * var(--u));
  padding-top: calc(90 * var(--u));
}

.lp-reason .bgword {
  top: calc(110 * var(--u));
  right: calc(30 * var(--u));
  font-size: calc(150 * var(--u));
}

.reasons {
  grid-template-columns: repeat(3,minmax(0,calc(440 * var(--u))));
  gap: calc(30 * var(--u));
  margin-top: calc(66 * var(--u));
}

.reason {
  position: relative;
  height: calc(300 * var(--u));
  padding: calc(40 * var(--u)) calc(36 * var(--u)) 0;
  background: #fff;
  box-shadow: none;
  isolation: isolate;
}

.reason::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--line);
  clip-path: polygon(calc(28 * var(--u)) 0,100% 0,100% calc(100% - calc(28 * var(--u))),calc(100% - calc(28 * var(--u))) 100%,0 100%,0 calc(28 * var(--u)),1px calc(28.4 * var(--u)),1px calc(100% - 1px),calc(100% - calc(28.4 * var(--u))) calc(100% - 1px),calc(100% - 1px) calc(100% - calc(28.4 * var(--u))),calc(100% - 1px) 1px,calc(28.4 * var(--u)) 1px,1px calc(28.4 * var(--u)),0 calc(28 * var(--u)));
}

.reason {
  clip-path: polygon(calc(28 * var(--u)) 0,100% 0,100% calc(100% - calc(28 * var(--u))),calc(100% - calc(28 * var(--u))) 100%,0 100%,0 calc(28 * var(--u)));
}

.reason .hx {
  position: absolute;
  right: calc(34 * var(--u));
  top: calc(32 * var(--u));
  width: calc(72 * var(--u));
  height: calc(64 * var(--u));
  color: var(--rc);
}

.reason b {
  font-size: calc(34 * var(--u));
  line-height: 1;
  color: var(--rc);
}

.reason:first-child b {
  color: var(--body);
}

.reason h3 {
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  margin-top: calc(36 * var(--u));
  padding-bottom: calc(18 * var(--u));
}

.reason p {
  font-size: calc(15 * var(--u));
  line-height: calc(30 * var(--u));
  margin-top: calc(20 * var(--u));
}

.lp-flow {
  position: relative;
  height: calc(600 * var(--u));
  padding-top: calc(90 * var(--u));
}

.lp-flow::before {
  content: "";
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  top: 0;
  border-top: 1px solid var(--line);
}

.lp-flow .flow {
  margin-top: calc(50 * var(--u));
}

.lp-flow .flow h3 {
  font-size: calc(18 * var(--u));
  margin-top: calc(48 * var(--u));
}

.lp-sup {
  background: var(--tile);
  height: calc(740 * var(--u));
  padding-top: calc(90 * var(--u));
}

.plans {
  grid-template-columns: repeat(3,minmax(0,calc(440 * var(--u))));
  gap: calc(30 * var(--u));
  margin-top: calc(62 * var(--u));
}

.plan {
  height: calc(250 * var(--u));
  padding: calc(40 * var(--u)) calc(36 * var(--u)) 0;
}

.plan h3 {
  font-size: calc(20 * var(--u));
  line-height: 1;
}

.plan .pr {
  margin-top: calc(34 * var(--u));
  padding-bottom: calc(20 * var(--u));
  font-size: calc(13 * var(--u));
}

.plan .pr b {
  font-size: calc(40 * var(--u));
  line-height: 1;
}

.plan p {
  font-size: calc(13.5 * var(--u));
  line-height: calc(26 * var(--u));
  margin-top: calc(20 * var(--u));
}

.plan-custom {
  height: calc(96 * var(--u));
  padding: 0 calc(36 * var(--u));
  margin-top: calc(30 * var(--u));
}

.lp-faq {
  padding: calc(90 * var(--u)) 0 calc(120 * var(--u));
}

.lp-faq .wrap {
  display: grid;
  grid-template-columns: calc(582 * var(--u)) 1fr;
}

.faq summary {
  grid-template-columns: calc(44 * var(--u)) 1fr calc(20 * var(--u));
  padding: 0;
  height: calc(78 * var(--u));
  font-size: calc(18 * var(--u));
}

.faq summary::before {
  font-size: calc(22 * var(--u));
}

.faq details p {
  padding: 0 calc(30 * var(--u)) calc(30 * var(--u)) calc(44 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: calc(30 * var(--u));
}

@media (max-width: 959px) {
  .lp-head {
    grid-template-columns: 1fr 1fr;
  }

  .lp-intro,
  .lp-prob,
  .lp-reason,
  .lp-flow,
  .lp-sup {
    height: auto;
    padding-bottom: calc(90 * var(--u));
  }

  .lp-intro .grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(40 * var(--u));
  }

  .lp-intro h2 {
    font-size: calc(36 * var(--u));
    line-height: calc(54 * var(--u));
    white-space: normal;
  }

  .est .grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(30 * var(--u));
  }

  .reason,
  .plan {
    height: auto;
    padding-bottom: calc(36 * var(--u));
  }

  .lp-faq .wrap {
    grid-template-columns: minmax(0,.6fr) minmax(0,1.4fr);
  }
}

@media (max-width: 959px) {
  .lp-head {
    display: block;
  }

  .lp-desc {
    margin-top: calc(20 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(26 * var(--u));
  }

  .lp-desc br {
    display: none;
  }

  .lp-intro {
    padding: calc(50 * var(--u)) 0 calc(60 * var(--u));
  }

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

  .lp-intro h2 {
    font-size: calc(26 * var(--u));
    line-height: calc(40 * var(--u));
    margin-top: calc(22 * var(--u));
  }

  .lp-intro .text {
    font-size: calc(14 * var(--u));
    line-height: calc(27 * var(--u));
  }

  .lp-intro .row {
    flex-direction: column;
    gap: calc(10 * var(--u));
    margin-top: calc(24 * var(--u));
  }

  .lp-intro .row .btn {
    width: 100%!important;
    height: calc(56 * var(--u));
    min-height: calc(56 * var(--u));
    font-size: calc(15 * var(--u));
  }

  .lp-intro .chk {
    flex-direction: column;
    gap: calc(6 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .lp-intro .visual {
    margin-top: calc(40 * var(--u));
  }

  .lp-prob,
  .lp-reason,
  .lp-flow,
  .lp-sup {
    padding: calc(50 * var(--u)) 0 calc(60 * var(--u));
  }

  .problems,
  .reasons,
  .plans {
    grid-template-columns: 1fr;
    gap: calc(20 * var(--u));
    margin-top: calc(30 * var(--u));
  }

  .problems li {
    grid-template-columns: calc(50 * var(--u)) 1fr;
    padding-top: calc(20 * var(--u));
  }

  .problems b {
    font-size: calc(22 * var(--u));
  }

  .problems h3 {
    font-size: calc(17 * var(--u));
  }

  .problems p {
    font-size: calc(13 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .est {
    padding: calc(50 * var(--u)) 0 calc(60 * var(--u));
  }

  .est .grid {
    display: block;
    margin-top: calc(30 * var(--u));
  }

  .est .grid>div+div {
    margin-top: calc(30 * var(--u));
  }

  .result {
    padding: calc(26 * var(--u)) calc(20 * var(--u));
  }

  .lp-reason .bgword {
    display: none;
  }

  .reason {
    padding: calc(28 * var(--u)) calc(22 * var(--u)) calc(30 * var(--u));
  }

  .reason .hx {
    right: calc(18 * var(--u));
    top: calc(20 * var(--u));
    width: calc(52 * var(--u));
    height: calc(46 * var(--u));
  }

  .reason b {
    font-size: calc(26 * var(--u));
  }

  .reason h3 {
    font-size: calc(17 * var(--u));
    margin-top: calc(20 * var(--u));
  }

  .reason p {
    font-size: calc(13 * var(--u));
    line-height: calc(25 * var(--u));
    margin-top: calc(14 * var(--u));
  }

  .lp-flow .flow h3 {
    margin: 0;
    font-size: calc(15 * var(--u));
  }

  .plan {
    padding: calc(28 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u));
  }

  .plan .pr {
    margin-top: calc(18 * var(--u));
  }

  .plan .pr b {
    font-size: calc(30 * var(--u));
  }

  .plan-custom {
    height: auto;
    padding: calc(20 * var(--u)) calc(22 * var(--u));
  }

  .lp-faq {
    padding: calc(50 * var(--u)) 0 calc(70 * var(--u));
  }

  .lp-faq .wrap {
    display: block;
  }

  .lp-faq .faq {
    margin-top: calc(30 * var(--u));
  }

  .faq summary {
    height: auto;
    min-height: calc(64 * var(--u));
    padding: calc(12 * var(--u)) 0;
    font-size: calc(15 * var(--u));
    grid-template-columns: calc(34 * var(--u)) 1fr calc(16 * var(--u));
  }

  .faq details p {
    padding: 0 calc(10 * var(--u)) calc(20 * var(--u)) calc(34 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: calc(25 * var(--u));
  }
}

/* ============================================================
   estimator: sticky result
   ============================================================ */

.est .grid {
  align-items: stretch;
}

.result {
  position: sticky;
  top: calc(24 * var(--u));
  max-height: calc(100vh - calc(48 * var(--u)));
  overflow-y: auto;
}

.est-send {
  margin-top: calc(22 * var(--u));
}

.est-after .boost {
  display: grid;
  grid-template-columns: 1fr calc(440 * var(--u));
  column-gap: calc(60 * var(--u));
  margin-top: calc(40 * var(--u));
  padding: calc(44 * var(--u)) calc(50 * var(--u));
}

.est-after .boost>* {
  grid-column: 1;
}

.est-after .boost>.p {
  grid-column: 2;
  grid-row: 1/4;
  align-self: end;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6 * var(--u));
  margin: 0;
}

.est-after .boost>.p b {
  font-size: calc(40 * var(--u));
  line-height: 1.1;
}

.est-after .boost>.btn {
  grid-column: 2;
  grid-row: 4;
  align-self: start;
  margin-top: calc(18 * var(--u));
}

.yen.bump {
  animation: bump .35s ease;
}

@keyframes bump {
  from {
    transform: translateY(calc(6 * var(--u)));
    opacity: .4;
  }
}

@media (max-width: 959px) {
  .result {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .est-after .boost {
    display: block;
    margin-top: calc(24 * var(--u));
    padding: calc(28 * var(--u)) calc(22 * var(--u));
  }

  .est-after .boost>.p {
    flex-direction: row;
    align-items: baseline;
    gap: calc(12 * var(--u));
    margin-top: calc(18 * var(--u));
  }

  .est-after .boost>.p b {
    font-size: calc(28 * var(--u));
  }
}

/* ============================================================
   motion
   ============================================================ */

.rv-img {
  opacity: 0;
  transition: opacity 1s ease;
}

.rv-img img,
.rv-img video,
.rv-img iframe,
.rv-img svg {
  transform: scale(1.1);
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}

.rv-img.in {
  opacity: 1;
}

.rv-img.in img,
.rv-img.in video,
.rv-img.in iframe,
.rv-img.in svg {
  transform: none;
}

.rv-line {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .9s cubic-bezier(.2,.7,.2,1) .15s;
}

.rv-line.in {
  transform: none;
}

.label.rv i {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .8s cubic-bezier(.2,.7,.2,1) .25s;
}

.label.rv.in i {
  transform: none;
}

.rv-x {
  opacity: 0;
  transform: translateX(calc(-30 * var(--u)));
  transition: opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
}

.rv-x.in {
  opacity: 1;
  transform: none;
}

.no-js .rv-img,
.no-js .rv-x {
  opacity: 1;
  transform: none;
}

.no-js .rv-line {
  transform: none;
}

.site-logo {
  animation: down .8s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes down {
  from {
    opacity: 0;
    transform: translateY(calc(-16 * var(--u)));
  }
}

@media (min-width:960px) {
  .gnav {
    animation: down .8s cubic-bezier(.2,.7,.2,1) .1s both;
  }
}

.mv::before {
  animation: bgin 2.4s cubic-bezier(.2,.7,.2,1) both;
  transform-origin: 70% 40%;
}

@keyframes bgin {
  from {
    transform: scale(1.08);
    opacity: 0;
  }
}

.mv-title,
.mv-proj,
.mv-lead,
.mv-more,
.mv-news {
  animation: up .9s cubic-bezier(.2,.7,.2,1) both;
}

.mv-title {
  animation-delay: .45s;
}

.mv-proj {
  animation-delay: .6s;
}

.mv-lead {
  animation-delay: .75s;
}

.mv-more {
  animation-delay: .9s;
}

.mv-news {
  animation-delay: 1.05s;
}

.page-hero .label {
  animation: up .8s cubic-bezier(.2,.7,.2,1) .1s both;
}

.page-hero h1 {
  animation: up .9s cubic-bezier(.2,.7,.2,1) .2s both;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.hexdeco,
.pdeco {
  animation: float 6s ease-in-out infinite;
}

.cta-hex {
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  50% {
    transform: translateY(calc(-8 * var(--u)));
  }
}

.cta-hex path {
  animation: blink 4s ease-in-out infinite;
}

.cta-hex path:nth-child(2n) {
  animation-delay: 1.3s;
}

.cta-hex path:nth-child(3n) {
  animation-delay: 2.6s;
}

@keyframes blink {
  50% {
    opacity: .45;
  }
}

.bgword {
  will-change: transform;
}

.gnav a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(6 * var(--u));
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .3s;
}

.gnav a:not(.cta):hover::before {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.style-card,
.reason,
.plan,
.more-link,
.wk-card,
.n-card,
.problems li {
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.style-card:hover,
.reason:hover,
.plan:hover,
.more-link:hover,
.wk-card:hover {
  transform: translateY(calc(-6 * var(--u)));
}

.btn-grad,
.btn-line,
.btn {
  transition: filter .2s,transform .25s;
}

.btn-grad:hover,
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.svc-panel:not([hidden]) {
  animation: panel .5s cubic-bezier(.2,.7,.2,1);
}

@keyframes panel {
  from {
    opacity: 0;
    transform: translateX(calc(24 * var(--u)));
  }
}

.svc-tab b,
.svc-tab span {
  transition: transform .3s;
}

.svc-tab[aria-selected="true"] b,
.svc-tab[aria-selected="true"] span {
  transform: translateX(calc(8 * var(--u)));
}

.opt {
  transition: box-shadow .15s,transform .15s;
}

.opt:active {
  transform: scale(.99);
}

@media (max-width: 959px) {
  .gnav a::before {
    display: none;
  }
}

/* ============================================================
   TOP works: device slider
   ============================================================ */

.wk-marquee {
  overflow: hidden;
  margin-top: calc(60 * var(--u));
  padding: calc(10 * var(--u)) 0;
}

.wk-marquee .track {
  display: flex;
  width: max-content;
  animation: marq 90s linear infinite;
}

.wk-marquee .set {
  display: flex;
}

@keyframes marq {
  to {
    transform: translateX(-50%);
  }
}

.dev {
  position: relative;
  flex: none;
  width: calc(660 * var(--u));
  aspect-ratio: 1400/825;
  margin-right: calc(100 * var(--u));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

.dev:hover {
  transform: translateY(calc(-10 * var(--u)));
}

.dev .frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dev .pc,
.dev .sp {
  position: absolute;
  overflow: hidden;
  background: #EEF1F3;
}

.dev .pc {
  left: 10.8%;
  top: 5.7%;
  width: 78%;
  height: 83%;
}

.dev .sp {
  left: 80.2%;
  top: 29.3%;
  width: 18.8%;
  height: 68.9%;
  border-radius: 12% / 5.6%;
}

.dev .pc img,
.dev .sp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

@media (max-width: 959px) {
  .wk-marquee {
    margin-top: calc(28 * var(--u));
  }

  .wk-marquee .track {
    animation-duration: 60s;
  }

  .dev {
    width: calc(300 * var(--u));
    margin-right: calc(36 * var(--u));
  }
}

@media (prefers-reduced-motion:reduce) {
  .wk-marquee {
    overflow-x: auto;
  }
}

/* ============================================================
   value cycle figure
   ============================================================ */

.vc-cw {
  animation: spin 48s linear infinite;
}

.vc-ccw {
  animation: spin 80s linear infinite reverse;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   mobile refinements
   ============================================================ */

.gnav a i,
.gnav a small,
.gnav-logo,
.gnav-word {
  display: none;
}

.result {
  scroll-margin-top: calc(20 * var(--u));
}

@media (max-width: 959px) {
  .menu-open {
    overflow: hidden;
  }

  .gnav {
    padding: calc(108 * var(--u)) calc(20 * var(--u)) calc(150 * var(--u));
    background: linear-gradient(135deg,#131C4B 0%,#0B7F96 48%,#0AE4E4 100%);
    visibility: hidden;
    transition: transform .35s,visibility 0s .35s;
  }

  .menu-open .gnav {
    visibility: visible;
    transition: transform .35s;
  }

  .gnav>* {
    flex: none;
  }

  .gnav-logo {
    display: block;
    position: absolute;
    left: calc(20 * var(--u));
    top: calc(17 * var(--u));
    width: calc(118 * var(--u));
    height: auto;
  }

  .gnav a:not(.cta) {
    display: grid;
    grid-template-columns: calc(36 * var(--u)) 1fr calc(32 * var(--u));
    align-items: center;
    row-gap: calc(8 * var(--u));
    padding: calc(19 * var(--u)) 0 calc(17 * var(--u));
    line-height: 1;
    border-bottom: 1px solid rgba(255,255,255,.3);
  }

  .gnav a i {
    display: block;
    font-family: var(--en);
    font-style: normal;
    font-size: calc(9 * var(--u));
    line-height: 1;
    color: #18E0E0;
  }

  .gnav a span {
    font-size: calc(22 * var(--u));
    line-height: 1;
  }

  .gnav a small {
    display: block;
    grid-column: 2;
    font-family: var(--jp);
    font-size: calc(10 * var(--u));
    line-height: 1;
    letter-spacing: .5px;
  }

  .gnav a:not(.cta)::after {
    content: "";
    display: block;
    position: static;
    grid-column: 3;
    grid-row: 1;
    width: calc(32 * var(--u));
    height: calc(11 * var(--u));
    background: currentColor;
    clip-path: polygon(0 45%,90% 45%,76% 4%,80% 0,100% 50%,80% 100%,76% 96%,90% 55%,0 55%);
  }

  .gnav .cta {
    display: flex;
    align-items: center;
    gap: calc(20 * var(--u));
    height: calc(57 * var(--u));
    margin: calc(32 * var(--u)) 0 0;
    padding: 0 calc(24 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: 1;
    text-align: left;
    clip-path: polygon(calc(14 * var(--u)) 0,100% 0,100% calc(100% - calc(14 * var(--u))),calc(100% - calc(14 * var(--u))) 100%,0 100%,0 calc(14 * var(--u)));
  }

  .gnav .cta span {
    font-size: calc(14 * var(--u));
  }

  .gnav .cta small {
    font-size: calc(12 * var(--u));
    color: var(--body);
    letter-spacing: 0;
  }

  .gnav .cta::after {
    content: "";
    margin-left: auto;
    width: calc(34 * var(--u));
    height: calc(11 * var(--u));
    background: currentColor;
    clip-path: polygon(0 45%,90% 45%,76% 4%,80% 0,100% 50%,80% 100%,76% 96%,90% 55%,0 55%);
  }

  .gnav-word {
    display: block;
    position: absolute;
    left: calc(14 * var(--u));
    bottom: calc(-12 * var(--u));
    font-family: var(--en);
    font-size: calc(122 * var(--u));
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.22);
    pointer-events: none;
    white-space: nowrap;
  }

  .gnav a {
    opacity: 0;
    transform: translateY(calc(12 * var(--u)));
    transition: opacity .4s,transform .4s;
  }

  .menu-open .gnav a {
    opacity: 1;
    transform: none;
  }

  .menu-open .gnav a:nth-of-type(2) {
    transition-delay: .05s;
  }

  .menu-open .gnav a:nth-of-type(3) {
    transition-delay: .1s;
  }

  .menu-open .gnav a:nth-of-type(4) {
    transition-delay: .15s;
  }

  .menu-open .gnav a:nth-of-type(5) {
    transition-delay: .2s;
  }

  .menu-open .gnav a:nth-of-type(6) {
    transition-delay: .25s;
  }

  .menu-open .gnav a:nth-of-type(7) {
    transition-delay: .3s;
  }

  .svc-tab[aria-selected="true"] b,
  .svc-tab[aria-selected="true"] span {
    transform: none;
  }

  .svc-tab[aria-selected="true"] span {
    color: #7DF3F3;
  }

  .pv-sec p br {
    display: none;
  }

  .wd-info div {
    padding: calc(12 * var(--u)) 0;
  }

  .wd-info dd {
    line-height: 1.7;
  }

  .lp-intro h2 {
    font-size: calc(25 * var(--u));
    line-height: calc(39 * var(--u));
  }

  .est .q {
    font-size: calc(19 * var(--u));
    line-height: 1.5;
  }

  .result .yen {
    font-size: calc(36 * var(--u));
    white-space: nowrap;
  }

  .result .yen small {
    font-size: calc(12 * var(--u));
    margin-left: calc(4 * var(--u));
  }

  .facts {
    grid-template-columns: 1.3fr .7fr;
  }

  .facts dd {
    font-size: calc(15 * var(--u));
  }

  .incl {
    grid-template-columns: 1fr;
  }

  .boost .btn {
    width: 100%;
    font-size: calc(12 * var(--u));
    padding: 0 calc(14 * var(--u));
    white-space: nowrap;
  }

  .boost .btn::after {
    width: calc(28 * var(--u));
  }

  .boost .p,
  .est-after .boost>.p {
    flex-wrap: wrap;
    gap: calc(4 * var(--u)) calc(10 * var(--u));
  }

  .boost .p span {
    white-space: nowrap;
  }

  .est-bar {
    padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(calc(10 * var(--u)) + env(safe-area-inset-bottom));
  }

  .est-bar>div {
    min-width: 0;
  }

  .est-bar .v {
    font-size: calc(19 * var(--u));
    line-height: 1.2;
  }

  .est-bar .m {
    font-size: calc(10 * var(--u));
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .est-bar .btn {
    flex: none;
    gap: calc(10 * var(--u));
    min-height: calc(44 * var(--u));
    padding: 0 calc(14 * var(--u));
    font-size: calc(13 * var(--u));
    white-space: nowrap;
  }

  .est-bar .btn::after {
    width: calc(22 * var(--u));
  }
}

/* ============================================================
   column
   ============================================================ */

.top-col {
  padding: calc(100 * var(--u)) 0 calc(110 * var(--u));
  background: var(--tile);
}

.top-col .more {
  margin-top: calc(36 * var(--u));
  font-size: calc(14 * var(--u));
}

.top-col .more::after {
  width: calc(38 * var(--u));
  height: calc(11 * var(--u));
  clip-path: polygon(0 45%,82% 45%,64% 6%,68% 0,100% 50%,68% 100%,64% 94%,82% 55%,0 55%);
}

.top-col .slider-ctrl {
  margin-top: calc(40 * var(--u));
}

.col-card {
  flex-basis: calc(340 * var(--u));
}

.col-card .ph {
  aspect-ratio: 1200/630;
  background: #fff;
}

.col-card .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.col-card .meta {
  gap: calc(20 * var(--u));
}

.col-card .tag {
  font-family: var(--jp);
  font-size: calc(10 * var(--u));
  letter-spacing: 0;
}

.col-intro {
  max-width: calc(320 * var(--u));
  margin-top: calc(28 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(28 * var(--u));
  color: var(--body);
}

.col-archive .col-intro {
  max-width: calc(420 * var(--u));
}

.col-list {
  border-top: 1px solid var(--line);
}

.col-row {
  display: grid;
  grid-template-columns: calc(230 * var(--u)) minmax(0,1fr) calc(38 * var(--u));
  column-gap: calc(30 * var(--u));
  align-items: center;
  padding: calc(22 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
}

.col-ph {
  display: block;
  overflow: hidden;
  clip-path: polygon(0 0,100% 0,100% calc(100% - calc(14 * var(--u))),calc(100% - calc(14 * var(--u))) 100%,0 100%);
}

.col-ph img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s;
}

.col-row:hover .col-ph img {
  transform: scale(1.05);
}

.col-row b {
  display: block;
  font-family: var(--en);
  font-weight: 400;
  font-size: calc(13 * var(--u));
  line-height: 1;
  letter-spacing: 1px;
  color: var(--teal);
}

.col-row h3 {
  margin-top: calc(9 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink);
  transition: color .2s;
}

.col-row p {
  margin-top: calc(5 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: calc(23 * var(--u));
  color: var(--body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.col-dl {
  display: inline-grid;
  place-items: center;
  height: calc(22 * var(--u));
  margin-top: calc(10 * var(--u));
  padding: 0 calc(9 * var(--u));
  font-size: calc(11 * var(--u));
  line-height: 1;
  color: var(--teal);
  border: 1px solid var(--teal);
  white-space: nowrap;
}

.col-row .arr {
  width: calc(38 * var(--u));
  height: calc(8 * var(--u));
  background: var(--body);
  clip-path: polygon(0 85%,82% 85%,64% 0,70% 0,100% 100%,0 100%);
  transition: transform .25s;
}

.col-row:hover h3 {
  color: var(--accent);
}

.col-row:hover .arr {
  transform: translateX(calc(6 * var(--u)));
}

.col-mv {
  margin-top: calc(40 * var(--u));
}

.col-mv img {
  display: block;
  width: 100%;
  height: auto;
}

.col-doc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  column-gap: calc(40 * var(--u));
  align-items: center;
  margin-top: calc(70 * var(--u));
  padding: calc(40 * var(--u)) calc(44 * var(--u));
  background: #fff;
  border: 1px solid var(--line);
}

.col-doc::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: calc(4 * var(--u));
  background: var(--grad);
}

.col-doc .en {
  font-family: var(--en);
  font-size: calc(12 * var(--u));
  letter-spacing: .18em;
  color: var(--teal);
}

.col-doc h2 {
  margin-top: calc(10 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.5;
  color: var(--ink);
}

.col-doc p:not(.en) {
  margin-top: calc(8 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: calc(26 * var(--u));
  color: var(--body);
}

.col-doc .btn {
  min-width: calc(300 * var(--u));
  min-height: calc(68 * var(--u));
}

.col-doc .btn small {
  display: block;
  margin-top: 2px;
  font-size: calc(11 * var(--u));
  font-weight: 400;
}

.nd-meta .tag {
  width: auto;
  min-width: calc(64 * var(--u));
  padding: 0 calc(10 * var(--u));
}

@media (max-width: 959px) {
  .top-col {
    padding: calc(56 * var(--u)) 0 calc(60 * var(--u));
  }

  .top-col .more {
    display: none;
  }

  .col-card {
    flex-basis: calc(280 * var(--u));
  }

  .col-card .ph {
    aspect-ratio: 1200/630;
  }

  .col-intro {
    max-width: none;
    margin-top: calc(18 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: calc(25 * var(--u));
  }

  .col-archive .col-list {
    margin-top: calc(30 * var(--u));
  }

  .col-row {
    grid-template-columns: calc(118 * var(--u)) minmax(0,1fr);
    column-gap: calc(14 * var(--u));
    align-items: start;
    padding: calc(16 * var(--u)) 0;
  }

  .col-ph {
    clip-path: polygon(0 0,100% 0,100% calc(100% - calc(8 * var(--u))),calc(100% - calc(8 * var(--u))) 100%,0 100%);
  }

  .col-row b {
    font-size: calc(10 * var(--u));
  }

  .col-row h3 {
    margin-top: calc(6 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: 1.55;
  }

  .col-row p {
    display: none;
  }

  .col-dl {
    height: calc(20 * var(--u));
    margin-top: calc(8 * var(--u));
    font-size: calc(10 * var(--u));
  }

  .col-row .arr {
    display: none;
  }

  .col-mv {
    margin-top: calc(24 * var(--u));
  }

  .col-doc {
    display: block;
    margin-top: calc(44 * var(--u));
    padding: calc(28 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));
  }

  .col-doc h2 {
    font-size: calc(18 * var(--u));
  }

  .nd .entry h2 {
    font-size: calc(19 * var(--u));
  }

  .nd .entry h3 {
    font-size: calc(16 * var(--u));
  }

  .col-doc p:not(.en) {
    font-size: calc(13 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .col-doc .btn {
    width: 100%;
    min-width: 0;
    min-height: calc(60 * var(--u));
    margin-top: calc(20 * var(--u));
  }
}

/* reCAPTCHAのバッジは隠し、お問い合わせフォームの下に表記を出す */
.grecaptcha-badge {
  visibility: hidden;
}

.ct-recaptcha {
  margin-top: calc(18 * var(--u));
  font-size: calc(11 * var(--u));
  line-height: 1.8;
  color: var(--muted);
}

.ct-recaptcha a {
  color: inherit;
  text-decoration: underline;
}

/* ============================================================
   motion: 左から右へ現れる
   ============================================================ */

.page-hero .slant,
.page-hero h1,
.mv-title,
.mv-words span {
  -webkit-mask-image: linear-gradient(90deg,#000 40%,transparent 60%);
  mask-image: linear-gradient(90deg,#000 40%,transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

/* 文字の幅だけで拭き取る（ブロック全幅だと一瞬で終わって見えるため） */
.page-hero h1,
.mv-title,
.h-en {
  width: fit-content;
}

@keyframes wipe {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

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

@keyframes wipe-x {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transform: translateX(calc(-18 * var(--u)));
  }

  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    transform: none;
  }
}

.page-hero .slant {
  animation: wipe 1.4s cubic-bezier(.6,0,.2,1) .35s both;
}

.page-hero h1 {
  animation: wipe-x 1.2s cubic-bezier(.2,.7,.2,1) .15s both;
}

.crumb {
  animation: crumb .8s cubic-bezier(.2,.7,.2,1) 1.25s both;
}

@keyframes crumb {
  from {
    opacity: 0;
    transform: translateX(calc(-14 * var(--u)));
  }
}

.mv-title {
  animation: wipe-x 1.3s cubic-bezier(.2,.7,.2,1) .45s both;
}

.mv-words span {
  animation: wipe-x 1.3s cubic-bezier(.2,.7,.2,1) both;
}

.mv-words span:nth-child(2) {
  animation-delay: .12s;
}

.mv-words span:nth-child(3) {
  animation-delay: .24s;
}

/* 見出しの英字と写真は、スクロールで左から右へ */
.h-en.rv,
.rv-img {
  opacity: 1;
  transform: translateX(calc(-14 * var(--u)));
  -webkit-mask-image: linear-gradient(90deg,#000 40%,transparent 60%);
  mask-image: linear-gradient(90deg,#000 40%,transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: -webkit-mask-position 1.3s cubic-bezier(.6,0,.2,1),mask-position 1.3s cubic-bezier(.6,0,.2,1),transform 1.3s cubic-bezier(.2,.7,.2,1);
}

.h-en.rv.in,
.rv-img.in {
  transform: none;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.rv-img {
  transform: none;
}

.rv-img img,
.rv-img video,
.rv-img iframe,
.rv-img svg {
  transform: scale(1.06);
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1);
}

/* 日本語の小見出しは英字のあとに */
.h-jp.rv {
  transition-delay: .25s!important;
}

/* カードは少し遅れて順に */
.n-card.rv,
.wk-card.rv,
.style-card.rv,
.reason.rv,
.plan.rv,
.problems li.rv {
  transform: translateY(calc(32 * var(--u)));
  transition-duration: 1s;
}

/* 帯ボタンは光が左から右へ通る */
.btn,
.btn-grad,
.gnav .cta {
  position: relative;
  overflow: hidden;
}

.btn::before,
.btn-grad::before,
.gnav .cta::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform: skewX(-20deg);
  transition: left .7s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}

.btn:hover::before,
.btn-grad:hover::before,
.gnav .cta:hover::before {
  left: 120%;
}

.gnav .cta::before {
  bottom: auto;
  height: 100%;
}

/* オレンジのページ（AI/DX）ではスマホのメニューもオレンジに */
@media (max-width: 959px) {
  .theme-orange .gnav {
    background: linear-gradient(135deg,#B9501A 0%,#E8772E 50%,#F5A93B 100%);
  }

  .theme-orange .gnav a i {
    color: #FFE08A;
  }
}