@charset "UTF-8";
/*==============================================================
セクション共通(「ページコンテンツ」のフレキシブルコンテンツ用)
・汎用・お知らせ…とテンプレートが増えても、背景・見出し・ボタン・矢印は必ず同じ見た目にする
・セクション個別のSCSSが持つのは中身のレイアウトだけ
・c()やspc()を使うのでファイル末尾に置く(関数定義より後でないと評価できない)
==============================================================*/
/*==============================================================
横に並んだ項目を1つずつ遅らせて出す
・`anime`が付いた項目に--anime-delayを持たせるだけ。ずれ幅はデザイン設定の--anime-stagger
・**通し番号ではなく「行の中の位置」でずらす。** 行は行ごとに画面へ入ってくるので、
  通し番号でずらすと下の行ほど待たされて、出るのが遅れたように見える
・引数は列数。1を渡すと全部0＝ずれなし(SPで縦1列に戻す時に上書きで使う)
==============================================================*/
/*! 
Theme Name: onWhite Engine
Author: onWhite
Version: 1.0.0
*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*::before, *::after {
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  margin: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-main, sans-serif);
  line-height: 2;
  color: var(--color-text, #000);
  scroll-behavior: smooth;
}

body {
  width: 100%;
  max-width: 100vw;
  position: relative;
  background-color: var(--color-bg, #fff);
  font-family: var(--font-main, sans-serif);
  line-height: 2;
  color: var(--color-text, #000);
  -webkit-text-size-adjust: 100%;
  margin: 0;
  max-width: 100vw;
}
body::selection {
  background-color: var(--color-text, #000);
  color: var(--color-bg, #fff);
}
body::before {
  content: "";
  position: var(--bg-fixed, absolute);
  inset: 0;
  min-height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background-image: var(--bg-pattern-image, none), var(--bg-fill-image, none);
  background-repeat: repeat, no-repeat;
  background-size: var(--bg-pattern-size, auto), cover;
}

main {
  display: block;
  line-height: 2;
  color: var(--color-text, #000);
  transition: all 0.5s cubic-bezier(0.59, 0, 0.265, 0.995);
  transition-timing-function: cubic-bezier(0.59, 0, 0.265, 0.995);
}
@media (max-width: 767px) {
  main {
    margin-top: 0px !important;
  }
}
main.-show {
  margin-top: 0px !important;
  opacity: 1;
}
main.-hide {
  opacity: 0;
  transform: translateY(clamp(30px, 30px + (50 - 30) * (100vw - 375px) / 1065, 50px));
}

li {
  list-style: none;
}

button {
  padding: 0;
  outline: none;
  border: none;
  background-color: transparent;
  font-family: inherit;
  color: inherit;
  appearance: none;
}

img {
  max-width: 100%;
  border: none;
  vertical-align: top;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-style: none;
}

br.-sp {
  display: none;
}
br.-pc {
  display: block;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  display: inline-block;
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}
a:hover {
  opacity: 0.7;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
}

button,
input {
  overflow: visible;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  -webkit-appearance: none;
  border-radius: 0;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

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

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
  -webkit-appearance: none;
  border-radius: 0px;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

@media (max-width: 767px) {
  br.-sp {
    display: inline;
  }
  br.-pc {
    display: none;
  }
}
embed,
iframe,
object {
  max-width: 100%;
}

figure {
  margin: 0;
  position: relative;
  overflow: hidden;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-weight: normal;
  font-family: var(--font-main, sans-serif);
}

p {
  font-size: clamp(1.4rem, 1.1vw, 1.6rem);
}

button,
input,
select,
optgroup,
textarea {
  font-weight: normal;
  font-style: normal;
}

span {
  display: inline-block;
}

.grecaptcha-badge {
  display: none !important;
}

.pageName {
  display: none;
}

.pageTop {
  display: none;
}

/*==============================================================
スクロールで出てくる動き(ユーティリティ)
・要素に`anime`を足すだけ。画面に入るとjs/common/anime.jsが`-active`を付ける
・**出方はここに1本しか書かない。** 下から/上から/ズーム/フェードのみ の違いは
  デザイン設定「アニメーション」タブが入れる--anime-*の数値の違いでしかない(functions/css.php)。
  セクション側でduration・easingを書かない＝サイト全体のトンマナが1箇所で揃う
・「なし」を選ぶと--anime-off: 1が出て、最初から見えている状態になる
==============================================================*/
.anime {
  opacity: var(--anime-off, 0);
  transform: translate3d(0, var(--anime-y, 32px), 0) scale(var(--anime-scale, 1));
  transition: opacity var(--anime-duration, 0.8s) var(--anime-ease, ease) var(--anime-delay, 0s), transform var(--anime-duration, 0.8s) var(--anime-ease, ease) var(--anime-delay, 0s);
}
.anime.-active {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .anime {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/*==============================================================
ページ切り替えの幕
・別のページへ移動する時に画面を覆う。出す/出さない・見せ方・色・速さ・中身は
  デザイン設定「ページ切り替え」タブ（使わない時は幕そのものが出ない = template/transition.php）

・**到着（幕が上がる）はCSSアニメーションだけで完結させる。**
  JSに任せると、JSが動かない・途中でエラーが出た環境で幕が上がらず＝サイトが見えなくなる。
  ここが「幕を出しても安全」の土台なので、**JSで上げ下げする作りに変えない**
・**離脱（幕が下りる）だけがJSの担当**（js/common/transition.js）。合図は幕に付く-in
・戻る操作で復元された時は、JSが-inを外す。**animation-nameが到着側に戻るので幕がもう一度上がる**

・**動くのは色の面(.transitionBody)だけ。** ロゴ・テキスト(.transitionInner)は中央に固定して動かさない
  （面と一緒に動くと画面の外へ流れていって落ち着かない）。
  面が**全画面を覆っている間だけ**出す＝動いている最中は見えない

・**両端に「覆ったまま止まる時間」($transitionHold)を必ず持つ。** ここが要点:
  ページを移動する瞬間、ブラウザは前のページを捨ててから次のページを描くまでの間、
  一瞬何も描けないコマが出る。そこで幕が動いている最中だと「消えた→また出た」のちらつきになるので、
  離脱の**後ろ**と到着の**前**を必ず全画面のベタで挟んでおく
  → **秒で持つ(％で持たない)。** ％だと「幕の速さ」を短くした時に挟む時間まで一緒に短くなり、
    肝心のちらつき対策とロゴの見える時間が同時に痩せてしまう
  （さらにfunctions/css.phpの@view-transitionで、そのコマ自体もブラウザ側に埋めさせている）
==============================================================*/
.transition {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  color: var(--trans-fg);
}
.transition.-bgBase {
  --trans-bg: var(--color-bg);
  --trans-fg: var(--color-text);
}
.transition.-bgSmoke {
  --trans-bg: var(--color-smoke, #f5f5f5);
  --trans-fg: var(--color-text);
}
.transition.-bgText {
  --trans-bg: var(--color-text);
  --trans-fg: var(--color-bg);
}
.transition.-bgBrand {
  --trans-bg: var(--color-brand);
  --trans-fg: var(--color-on-brand, var(--color-text));
}
.transition.-bgAccent {
  --trans-bg: var(--color-accent);
  --trans-fg: var(--color-bg);
}

.transitionBody {
  position: absolute;
  inset: 0;
  background-color: var(--trans-bg);
  animation: transitionFadeOut var(--trans-duration, 0.6s) ease var(--trans-hold, 0.28s) both;
}

.transition.-typeSlide .transitionBody {
  animation-name: transitionSlideOut;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

.transition.-in .transitionBody {
  animation: transitionFadeIn var(--trans-duration, 0.6s) ease 0s forwards;
}

.transition.-typeSlide.-in .transitionBody {
  animation-name: transitionSlideIn;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

.transitionInner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 1;
  max-width: 80%;
  animation: transitionLogoOut 0.2s ease calc(var(--trans-hold, 0.28s) - 0.2s) both;
}

.transition.-in .transitionInner {
  animation: transitionLogoIn 0.2s ease var(--trans-duration, 0.6s) both;
}

.transitionInnerImg {
  width: calc(clamp(196px, 196px + (280 - 196) * (100vw - 375px) / 1065, 280px) * var(--transImgScale, 1));
  height: auto;
  object-fit: contain;
}

.transitionInnerTxt {
  font-size: clamp(1.86rem, 18.6px + (24 - 18.6) * (100vw - 375px) / 1065, 2.4rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  color: currentColor;
}

.transitionFoot {
  position: absolute;
  bottom: clamp(40px, 40px + (64 - 40) * (100vw - 375px) / 1065, 64px);
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.transitionFootIcon {
  display: block;
  position: relative;
  width: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  height: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  border-radius: 50%;
  background-color: currentColor;
}
.transitionFootIcon::before, .transitionFootIcon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: currentColor;
}
.transitionFootIcon::before {
  left: calc(-1 * clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px));
}
.transitionFootIcon::after {
  left: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
}

.transition.-loading .transitionFoot {
  opacity: 0.6;
}

.transition.-loading .transitionFootIcon {
  animation: transitionBlink 1.2s ease-in-out infinite;
}
.transition.-loading .transitionFootIcon::before {
  animation: transitionBlink 1.2s ease-in-out infinite -0.2s;
}
.transition.-loading .transitionFootIcon::after {
  animation: transitionBlink 1.2s ease-in-out infinite 0.2s;
}

@keyframes transitionFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes transitionFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes transitionSlideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes transitionSlideIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes transitionLogoOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes transitionLogoIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes transitionBlink {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .transition {
    display: none;
  }
}
main section[id] {
  scroll-margin-top: clamp(90px, 90px + (120 - 90) * (100vw - 375px) / 1065, 120px);
}

.burger {
  cursor: pointer;
  flex-shrink: 0;
  padding: 5px;
}

.burgerWrap {
  display: block;
  position: relative;
  width: clamp(24px, 24px + (30 - 24) * (100vw - 375px) / 1065, 30px);
  height: clamp(12px, 12px + (15 - 12) * (100vw - 375px) / 1065, 15px);
}

.burgerBar {
  position: absolute;
  left: 50%;
  width: clamp(24px, 24px + (30 - 24) * (100vw - 375px) / 1065, 30px);
  height: clamp(2.4px, 2.4px + (3 - 2.4) * (100vw - 375px) / 1065, 3px);
  background-color: currentColor;
  transition: all 0.3s ease;
}
.burgerBar:nth-of-type(1) {
  top: 0%;
  transform: translate(-50%, 0%) rotate(0deg);
}
.burgerBar:nth-of-type(1).-active {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.burgerBar:nth-of-type(2) {
  top: 100%;
  transform: translate(-50%, -100%) rotate(0deg);
}
.burgerBar:nth-of-type(2).-active {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.breadcrumbList {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 5px;
  width: 100%;
}

.breadcrumbItem {
  font-size: clamp(1.1rem, 11px + (14 - 11) * (100vw - 375px) / 1065, 1.4rem);
  font-weight: 300;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .breadcrumbItem {
    line-height: 1.2;
  }
}
.breadcrumbItem {
  color: var(--on-text, var(--color-text));
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}
.breadcrumbItem:not(:last-of-type)::after {
  color: var(--on-text, var(--color-text));
  content: "/";
  display: inline-block;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.pagination {
  margin-top: calc(clamp(48px, 48px + (72 - 48) * (100vw - 375px) / 1065, 72px) * var(--space-scale, 1));
  width: 100%;
}

.paginationBody {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
  width: 100%;
}

.paginationBodyNum {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: clamp(40px, 40px + (48 - 40) * (100vw - 375px) / 1065, 48px);
  height: clamp(40px, 40px + (48 - 40) * (100vw - 375px) / 1065, 48px);
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--on-text, var(--color-text)), transparent 92%);
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1;
  font-weight: 700;
  color: var(--on-text, var(--color-text));
  transition: background-color 0.3s ease, color 0.3s ease;
}
.paginationBodyNum:hover {
  opacity: 1;
  background-color: var(--on-btn, var(--color-brand));
  color: var(--on-bg, var(--color-bg));
}
.paginationBodyNum.-current {
  pointer-events: none;
  background-color: var(--on-btn, var(--color-brand));
  color: var(--on-bg, var(--color-bg));
}

.paginationBodyIcon {
  display: block;
  position: relative;
  width: clamp(40px, 40px + (48 - 40) * (100vw - 375px) / 1065, 48px);
  height: clamp(40px, 40px + (48 - 40) * (100vw - 375px) / 1065, 48px);
  color: var(--on-text, var(--color-text));
  transition: color 0.3s ease;
}
.paginationBodyIcon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(8px, 8px + (10 - 8) * (100vw - 375px) / 1065, 10px);
  height: clamp(8px, 8px + (10 - 8) * (100vw - 375px) / 1065, 10px);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.paginationBodyIcon.-prev::after {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.paginationBodyIcon.-next::after {
  transform: translate(-70%, -50%) rotate(45deg);
}
.paginationBodyIcon:hover {
  opacity: 1;
  color: var(--on-btn, var(--color-brand));
}
.paginationBodyIcon.-hide {
  pointer-events: none;
  opacity: 0;
}

.paginationBodyTxt.-ellipsis {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px);
}
.paginationBodyTxt.-ellipsis span {
  display: block;
  width: clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px);
  height: clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px);
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--on-text, var(--color-text)), transparent 60%);
}

.-noSpace {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  overflow: hidden;
  width: 100%;
  height: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  background-color: var(--header-bg);
  color: var(--header-fg);
  transition: height 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  --header-bg: var(--color-bg);
  --header-fg: var(--color-text);
}
.header.-bgBase {
  box-shadow: 0 1px clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px) color-mix(in srgb, var(--color-text), transparent 90%);
}
.header.-bgSmoke {
  --header-bg: var(--color-smoke, #f5f5f5);
}
.header.-bgText {
  --header-bg: var(--color-text);
  --header-fg: var(--color-bg);
}
.header.-bgBrand {
  --header-bg: var(--color-brand);
  --header-fg: var(--color-on-brand, var(--color-text));
}
.header.-fgText {
  --header-fg: var(--color-text);
}
.header.-fgBg {
  --header-fg: var(--color-bg);
}
.header.-fgBrand {
  --header-fg: var(--color-brand);
}
.header.-fgAccent {
  --header-fg: var(--color-accent);
}
.header.-active {
  height: 100lvh;
}

.headerInner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  height: 100%;
}

.headerHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-shrink: 0;
  padding-left: clamp(16px, 16px + (48 - 16) * (100vw - 375px) / 1065, 48px);
  padding-right: clamp(16px, 16px + (48 - 16) * (100vw - 375px) / 1065, 48px);
  width: 100%;
  height: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
}

.headerHeadTtl {
  line-height: 1;
}

.headerHeadLink {
  display: block;
}

.headerHeadLogo {
  width: auto;
  height: calc(clamp(24px, 24px + (32 - 24) * (100vw - 375px) / 1065, 32px) * var(--headerLogoScale, 1));
  max-width: clamp(200px, 200px + (320 - 200) * (100vw - 375px) / 1065, 320px);
  object-fit: contain;
}

.headerHeadTxt {
  font-size: clamp(1.63rem, 16.3px + (20 - 16.3) * (100vw - 375px) / 1065, 2rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.headerBody {
  flex-grow: 1;
  overflow-y: auto;
  width: 100%;
  visibility: hidden;
  transition: visibility 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.headerBody.-active {
  visibility: visible;
}

.headerBodyList {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding: clamp(120px, 120px + (140 - 120) * (100vw - 375px) / 1065, 140px) clamp(16px, 16px + (48 - 16) * (100vw - 375px) / 1065, 48px);
  row-gap: clamp(24px, 24px + (28 - 24) * (100vw - 375px) / 1065, 28px);
  width: 100%;
}

.headerBodyItem {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.headerBodyItem.-active:nth-of-type(1) {
  transition-delay: 0.24s;
}
.headerBodyItem.-active:nth-of-type(2) {
  transition-delay: 0.28s;
}
.headerBodyItem.-active:nth-of-type(3) {
  transition-delay: 0.32s;
}
.headerBodyItem.-active:nth-of-type(4) {
  transition-delay: 0.36s;
}
.headerBodyItem.-active:nth-of-type(5) {
  transition-delay: 0.4s;
}
.headerBodyItem.-active:nth-of-type(6) {
  transition-delay: 0.44s;
}
.headerBodyItem.-active:nth-of-type(7) {
  transition-delay: 0.48s;
}
.headerBodyItem.-active:nth-of-type(8) {
  transition-delay: 0.52s;
}
.headerBodyItem.-active:nth-of-type(9) {
  transition-delay: 0.56s;
}
.headerBodyItem.-active:nth-of-type(10) {
  transition-delay: 0.6s;
}
.headerBodyItem.-active:nth-of-type(11) {
  transition-delay: 0.64s;
}
.headerBodyItem.-active:nth-of-type(12) {
  transition-delay: 0.68s;
}
.headerBodyItem.-active {
  opacity: 1;
  transform: translateY(0);
}

.headerBodyLink {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  row-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  text-align: center;
  transition: opacity 0.3s ease;
}

.headerBodyList:has(.headerBodyLink:hover) .headerBodyLink {
  opacity: 0.35;
}

.headerBodyList:has(.headerBodyLink:hover) .headerBodyLink:hover {
  opacity: 1;
}

.headerBodyTxt {
  white-space: nowrap;
}
.headerBodyTxt.-en {
  font-size: clamp(2.17rem, 21.7px + (30 - 21.7) * (100vw - 375px) / 1065, 3rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.headerBodyTxt.-ja {
  overflow: hidden;
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.07em;
}
.headerBodyTxt.-ja span {
  transform: translateY(-120%);
  transition: transform 0.2s ease;
}

.headerBodyLink:hover .headerBodyTxt.-ja span {
  transform: translateY(0);
}

@media (max-width: 767px) {
  .headerBodyList:has(.headerBodyLink:hover) .headerBodyLink,
  .headerBodyList:has(.headerBodyLink:hover) .headerBodyLink:hover {
    opacity: 1;
  }
  .headerBodyTxt {
    white-space: normal;
  }
  .headerBodyTxt.-ja {
    opacity: 0.8;
  }
  .headerBodyTxt.-ja span {
    transform: translateY(0);
  }
}
.mv {
  --mvImgInset: 0px;
  --mvImgInsetY: 0px;
  --mvImgTop: 0px;
  --mv-fg: var(--color-text);
  position: relative;
  height: 100svh;
  color: var(--mv-fg);
}
.mv.-media {
  margin-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
}
.mv.-inset {
  --mvImgInset: clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px);
  --mvImgInsetY: clamp(24px, 24px + (32 - 24) * (100vw - 375px) / 1065, 32px);
  --mvImgTop: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
}
@media (max-width: 767px) {
  .mv.-inset {
    --mvImgInsetY: clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px);
  }
}
.mv.-inset {
  margin-bottom: 0;
}
.mv.-dim {
  --mv-fg: var(--color-bg);
}
.mv.-dim::before {
  content: "";
  position: absolute;
  inset: calc(var(--mvImgTop) + var(--mvImgInsetY)) var(--mvImgInset) var(--mvImgInsetY);
  z-index: 1;
  background-color: var(--color-text);
  opacity: 0.4;
}
.mv.-fgText {
  --mv-fg: var(--color-text);
}
.mv.-fgBg {
  --mv-fg: var(--color-bg);
}
.mv.-fgBrand {
  --mv-fg: var(--color-brand);
}
.mv.-fgAccent {
  --mv-fg: var(--color-accent);
}

.mvInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .mvInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.mvInner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  padding-top: var(--mvImgTop);
}

.mvWrap {
  position: absolute;
  top: calc(var(--mvImgTop) + var(--mvImgInsetY));
  left: var(--mvImgInset);
  z-index: 0;
  overflow: hidden;
  width: calc(100% - var(--mvImgInset) * 2);
  height: calc(100% - var(--mvImgTop) - var(--mvImgInsetY) * 2);
}

.mvImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.mvImg {
  animation: mvZoom 2.4s cubic-bezier(0.22, 1, 0.36, 1) var(--trans-wait, 0s) both;
}

.mvBody {
  position: relative;
  z-index: 2;
  text-align: center;
}

.mvBodyTtl {
  animation: mvRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--trans-wait, 0s) + 0.2s) both;
  font-size: var(--mv-ttl-size);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.mvBodyTtl span {
  display: inline-block;
}

.mvBodyImg {
  width: calc(clamp(280px, 280px + (400 - 280) * (100vw - 375px) / 1065, 400px) * var(--mvImgScale, 1));
  height: auto;
}

.mvBodyTxt {
  animation: mvRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--trans-wait, 0s) + 0.45s) both;
  margin-top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  font-size: var(--mv-sub-size);
  line-height: 1.8;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.mvBodyTxt span {
  display: inline-block;
}

@keyframes mvZoom {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes mvRise {
  from {
    opacity: 0;
    transform: translateY(clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  img.mvImg,
  .mvBodyTtl,
  .mvBodyTxt {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.works {
  padding-top: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  overflow-x: clip;
  width: 100%;
}

.worksInner {
  opacity: 0;
  transition: opacity 0.6s ease;
  overflow: hidden;
  width: 100%;
  height: clamp(270px, 270px + (540 - 270) * (100vw - 375px) / 1065, 540px);
}
.works.-active .worksInner {
  opacity: 1;
}

.worksBody {
  transform: scale(1.08);
  transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.works.-active .worksBody {
  transform: scale(1);
}

.worksBodyItem {
  height: clamp(270px, 270px + (540 - 270) * (100vw - 375px) / 1065, 540px);
}

.worksBodyImg {
  width: auto;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .worksInner,
  .worksBody {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.fv {
  position: relative;
  padding-top: calc(clamp(120px, 120px + (200 - 120) * (100vw - 375px) / 1065, 200px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.fv.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.fv.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.fv.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.fv.-bgSmoke::before, .fv.-bgText::before, .fv.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.fv.-bgSmoke::before, .fv.-bgText::before, .fv.-bgBrand::before {
  top: 0;
  bottom: 0;
}
.fv.-slantBottom {
  padding-bottom: calc(calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.fv.-slantBottom::before {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.fv.-slantBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}

.fvInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .fvInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.fvInner {
  position: relative;
  z-index: 2;
}
.fvInner > *:first-child {
  margin-top: 0 !important;
}

.fvHead {
  margin-top: clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px);
  width: 100%;
}
.fvHead > *:first-child {
  margin-top: 0 !important;
}
.fvHead.-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}
.fvHead.-right {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  text-align: right;
}
.fvHead.-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.fvHeadTtl span {
  display: inline-block;
}
.fvHeadTtl.-main {
  padding: calc(0.3em * var(--on-head-main-fill, 0)) calc(0.7em * var(--on-head-main-fill, 0));
  background-color: var(--on-head-main-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--fv-main-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-head-main);
}
.fvHeadTtl.-sub {
  margin-top: clamp(4px, 4px + (8 - 4) * (100vw - 375px) / 1065, 8px);
  padding: calc(0.3em * var(--on-head-sub-fill, 0)) calc(0.7em * var(--on-head-sub-fill, 0));
  background-color: var(--on-head-sub-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--fv-sub-size);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-head-sub);
}

.footer {
  position: relative;
  padding-top: calc(clamp(56px, 56px + (80 - 56) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(24px, 24px + (32 - 24) * (100vw - 375px) / 1065, 32px) * var(--space-scale, 1));
  width: 100%;
  background-color: var(--footer-bg);
  color: var(--footer-fg);
  --footer-bg: var(--color-bg);
  --footer-fg: var(--color-text);
  --footer-line: color-mix(in srgb, currentColor, transparent 80%);
  --footer-fill: color-mix(in srgb, currentColor, transparent 92%);
}
.footer.-bgSmoke {
  --footer-bg: var(--color-smoke, #f5f5f5);
}
.footer.-bgText {
  --footer-bg: var(--color-text);
  --footer-fg: var(--color-bg);
}
.footer.-bgBrand {
  --footer-bg: var(--color-brand);
  --footer-fg: var(--color-on-brand, var(--color-text));
}
.footer.-bgAccent {
  --footer-bg: var(--color-accent);
  --footer-fg: var(--color-bg);
}
.footer.-fgText {
  --footer-fg: var(--color-text);
}
.footer.-fgBg {
  --footer-fg: var(--color-bg);
}
.footer.-fgBrand {
  --footer-fg: var(--color-brand);
}
.footer.-fgAccent {
  --footer-fg: var(--color-accent);
}

.footerInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .footerInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.footerInner > *:first-child {
  margin-top: 0 !important;
}

.footerHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
  column-gap: clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px);
  width: 100%;
}
@media (max-width: 767px) {
  .footerHead {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    row-gap: clamp(28px, 28px + (32 - 28) * (100vw - 375px) / 1065, 32px);
  }
}

.footerHeadWrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  row-gap: clamp(16px, 16px + (20 - 16) * (100vw - 375px) / 1065, 20px);
}

.footerHeadLink.-logo {
  line-height: 1;
}
.footerHeadLink.-tel {
  transition: opacity 0.3s ease;
}
.footerHeadLink.-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-shrink: 0;
  width: clamp(40px, 40px + (44 - 40) * (100vw - 375px) / 1065, 44px);
  height: clamp(40px, 40px + (44 - 40) * (100vw - 375px) / 1065, 44px);
  border-radius: 50%;
  background-color: var(--footer-fill);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.footerHeadLink.-sns:hover {
  opacity: 1;
  background-color: var(--footer-fg);
  color: var(--footer-bg);
}

.footerHeadLogo {
  width: auto;
  height: calc(clamp(28px, 28px + (36 - 28) * (100vw - 375px) / 1065, 36px) * var(--footerLogoScale, 1));
  max-width: clamp(200px, 200px + (280 - 200) * (100vw - 375px) / 1065, 280px);
  object-fit: contain;
}

.footerHeadTxt.-logo {
  font-size: clamp(1.63rem, 16.3px + (20 - 16.3) * (100vw - 375px) / 1065, 2rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.footerHeadTxt.-address {
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1.8;
  font-weight: 400;
}
.footerHeadTxt.-tel {
  font-size: clamp(1.51rem, 15.1px + (18 - 15.1) * (100vw - 375px) / 1065, 1.8rem);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.footerHeadList {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px);
  row-gap: clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px);
}

.footerHeadIcon {
  display: block;
  width: clamp(18px, 18px + (20 - 18) * (100vw - 375px) / 1065, 20px);
  height: clamp(18px, 18px + (20 - 18) * (100vw - 375px) / 1065, 20px);
}

.footerFoot {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  margin-top: calc(clamp(40px, 40px + (64 - 40) * (100vw - 375px) / 1065, 64px) * var(--space-scale, 1));
  padding-top: clamp(16px, 16px + (20 - 16) * (100vw - 375px) / 1065, 20px);
  row-gap: clamp(4px, 4px + (4 - 4) * (100vw - 375px) / 1065, 4px);
  border-top: 1px solid var(--footer-line);
  text-align: center;
}

.footerFootTxt.-provider {
  font-size: clamp(1.19rem, 11.9px + (13 - 11.9) * (100vw - 375px) / 1065, 1.3rem);
  line-height: 1.6;
  font-weight: 400;
}
.footerFootTxt span {
  display: inline-block;
}
.footerFootTxt.-copy {
  font-size: clamp(1.12rem, 11.2px + (12 - 11.2) * (100vw - 375px) / 1065, 1.2rem);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.error {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (140 - 16) * (100vw - 375px) / 1065, 140px);
  padding-right: clamp(16px, 16px + (140 - 16) * (100vw - 375px) / 1065, 140px);
}
@media (max-width: 767px) {
  .error {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.errorInner {
  width: 100%;
}

.errorBody {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: clamp(112px, 112px + (160 - 112) * (100vw - 375px) / 1065, 160px);
  padding-bottom: clamp(112px, 112px + (160 - 112) * (100vw - 375px) / 1065, 160px);
}

.errorBodyTtl {
  font-size: clamp(4.48rem, 44.8px + (64 - 44.8) * (100vw - 375px) / 1065, 6.4rem);
  font-weight: 600;
  line-height: 1.5;
}

.errorBodyTxt {
  margin-top: clamp(11.2px, 11.2px + (16 - 11.2) * (100vw - 375px) / 1065, 16px);
  font-size: clamp(1.67rem, 16.7px + (24 - 16.7) * (100vw - 375px) / 1065, 2.4rem);
  line-height: 1.5;
}

.errorBodyLink {
  margin-top: clamp(11.2px, 11.2px + (16 - 11.2) * (100vw - 375px) / 1065, 16px);
}

.general {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.general.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.general.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.general.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.general.-bgSmoke::before, .general.-bgText::before, .general.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.general.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.general.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.general.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.general.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.general:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.general:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.general.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.general.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.general.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.general.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.general.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.general.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.general.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.general.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.general.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.general.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}

.generalInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .generalInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.generalInner {
  position: relative;
  z-index: 2;
}
.generalInner > *:first-child {
  margin-top: 0 !important;
}

.generalHead {
  width: 100%;
}
.generalHead > *:first-child {
  margin-top: 0 !important;
}
.generalHead.-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}
.generalHead.-right {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  text-align: right;
}
.generalHead.-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.generalHeadTtl span {
  display: inline-block;
}
.generalHeadTtl.-main {
  padding: calc(0.3em * var(--on-head-main-fill, 0)) calc(0.7em * var(--on-head-main-fill, 0));
  background-color: var(--on-head-main-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-main-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-head-main);
}
.generalHeadTtl.-sub {
  margin-top: clamp(4px, 4px + (8 - 4) * (100vw - 375px) / 1065, 8px);
  padding: calc(0.3em * var(--on-head-sub-fill, 0)) calc(0.7em * var(--on-head-sub-fill, 0));
  background-color: var(--on-head-sub-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-sub-size);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-head-sub);
}

.generalBody {
  margin-top: clamp(61.6px, 61.6px + (88 - 61.6) * (100vw - 375px) / 1065, 88px);
  width: 100%;
}
.generalBody.-type1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  row-gap: clamp(22.4px, 22.4px + (32 - 22.4) * (100vw - 375px) / 1065, 32px);
}
.generalBody.-type2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
}
@media (max-width: 767px) {
  .generalBody.-type2 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 16px;
  }
}
.generalBody.-type3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row-reverse;
}
@media (max-width: 767px) {
  .generalBody.-type3 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: column;
    row-gap: 16px;
  }
}

.generalBodyImg.-type1 {
  width: 100%;
}
.generalBodyImg.-type2 {
  width: clamp(200px, 200px + (480 - 200) * (100vw - 375px) / 1065, 480px);
  min-width: clamp(200px, 200px + (480 - 200) * (100vw - 375px) / 1065, 480px);
}
@media (max-width: 767px) {
  .generalBodyImg.-type2 {
    width: 80%;
    min-width: none;
  }
}
.generalBodyImg.-type3 {
  width: clamp(200px, 200px + (480 - 200) * (100vw - 375px) / 1065, 480px);
  min-width: clamp(200px, 200px + (480 - 200) * (100vw - 375px) / 1065, 480px);
}
@media (max-width: 767px) {
  .generalBodyImg.-type3 {
    width: 80%;
    min-width: none;
  }
}

.generalBodyWrap > *:first-child {
  margin-top: 0 !important;
}
.generalBodyWrap.-type1 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  width: 100%;
}
.generalBodyWrap.-type2 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  width: calc(100% - clamp(200px, 200px + (480 - 200) * (100vw - 375px) / 1065, 480px) - clamp(16px, 16px + (64 - 16) * (100vw - 375px) / 1065, 64px));
}
@media (max-width: 767px) {
  .generalBodyWrap.-type2 {
    width: 100%;
  }
}
.generalBodyWrap.-type3 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  width: calc(100% - clamp(200px, 200px + (480 - 200) * (100vw - 375px) / 1065, 480px) - clamp(16px, 16px + (64 - 16) * (100vw - 375px) / 1065, 64px));
}
@media (max-width: 767px) {
  .generalBodyWrap.-type3 {
    width: 100%;
  }
}
.generalBodyWrap.-narrow {
  width: calc(100% - clamp(200px, 200px + (480 - 200) * (100vw - 375px) / 1065, 480px) - clamp(16px, 16px + (64 - 16) * (100vw - 375px) / 1065, 64px));
}
@media (max-width: 767px) {
  .generalBodyWrap.-narrow {
    width: 100%;
  }
}

.generalBodyPic {
  width: 100%;
  border-radius: calc(clamp(11.2px, 11.2px + (16 - 11.2) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
}
.generalBodyPic.-cropS {
  height: clamp(180px, 180px + (240 - 180) * (100vw - 375px) / 1065, 240px);
}
.generalBodyPic.-cropM {
  height: clamp(260px, 260px + (400 - 260) * (100vw - 375px) / 1065, 400px);
}
.generalBodyPic.-cropL {
  height: clamp(340px, 340px + (560 - 340) * (100vw - 375px) / 1065, 560px);
}

.generalBodyTxt {
  width: 100%;
  font-size: clamp(1.45rem, 14.5px + (17 - 14.5) * (100vw - 375px) / 1065, 1.7rem);
  line-height: 2;
  color: var(--on-text);
}

.generalLinks {
  margin-top: clamp(32px, 32px + (64 - 32) * (100vw - 375px) / 1065, 64px);
  column-gap: clamp(44.8px, 44.8px + (64 - 44.8) * (100vw - 375px) / 1065, 64px);
  row-gap: clamp(22.4px, 22.4px + (32 - 22.4) * (100vw - 375px) / 1065, 32px);
  flex-wrap: wrap;
  width: 100%;
}
.generalLinks.-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
}
.generalLinks.-center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
}
.generalLinks.-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-direction: row;
}
.generalLinks.-type2 {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-direction: row;
}
@media (max-width: 767px) {
  .generalLinks.-type2 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
  }
}
.generalLinks.-type3 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
}

.generalLinksLink {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
}
.generalLinksLink.-btn1 {
  column-gap: clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border-radius: calc(clamp(999px, 999px + (999 - 999) * (100vw - 375px) / 1065, 999px) * var(--radius-scale, 1));
  background-color: color-mix(in srgb, var(--on-btn, var(--color-brand)), var(--on-bg, var(--color-bg)) 85%);
  color: var(--on-btn);
}
.generalLinksLink.-btn2 {
  column-gap: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  color: var(--on-text);
  --btn-icon-bg: var(--on-btn);
  --btn-icon-fg: var(--on-bg);
}
.generalLinksLink.-btn2:hover {
  opacity: 1;
  --btn-icon-shift: 1;
}
.generalLinksLink.-btn3 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.generalLinksLink.-btn4 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  background-color: var(--on-btn);
  color: var(--on-bg);
}
.generalLinksLink.-btn5 {
  padding: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) 0;
  border-bottom: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.generalLinksLink.-accent {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}
.generalLinksLink.-btn2.-accent {
  background-color: transparent;
  color: var(--on-text);
  --btn-icon-bg: var(--color-accent);
  --btn-icon-fg: var(--color-bg);
}
.generalLinksLink.-btn5.-accent {
  border-color: var(--color-accent);
  background-color: transparent;
  color: var(--color-accent);
}

.generalLinksTxt {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
}
.generalLinksTxt span {
  display: inline-block;
}

.generalLinksIcon {
  display: none;
  flex-shrink: 0;
}
.generalLinksIcon.-btn1 {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.generalLinksIcon.-btn2 {
  display: block;
  overflow: hidden;
  position: relative;
  width: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  height: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  border-radius: 50%;
  background-color: var(--btn-icon-bg, var(--on-btn));
}
.generalLinksIcon.-btn2::before, .generalLinksIcon.-btn2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(20px, 20px + (28 - 20) * (100vw - 375px) / 1065, 28px);
  height: clamp(10px, 10px + (14 - 10) * (100vw - 375px) / 1065, 14px);
  background-color: var(--btn-icon-fg, var(--on-bg));
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.generalLinksIcon.-btn2::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0)));
}
.generalLinksIcon.-btn2::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1)));
}
.generalLinksIcon.-btn1.-back, .generalLinksIcon.-btn3.-back, .generalLinksIcon.-btn4.-back, .generalLinksIcon.-btn5.-back {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: 0;
  border-right: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.generalLinksIcon.-btn2.-back::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0) * -1)) scaleX(-1);
}
.generalLinksIcon.-btn2.-back::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1) * -1)) scaleX(-1);
}

.cta {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.cta.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.cta.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.cta.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.cta.-bgSmoke::before, .cta.-bgText::before, .cta.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.cta.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.cta.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.cta.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.cta.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.cta:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.cta:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.cta.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.cta.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.cta.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.cta.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.cta.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.cta.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.cta.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.cta.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.cta.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.cta.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}

.ctaInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .ctaInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.ctaInner {
  position: relative;
  z-index: 2;
}
.ctaInner > *:first-child {
  margin-top: 0 !important;
}

.ctaHead {
  width: 100%;
}
.ctaHead > *:first-child {
  margin-top: 0 !important;
}
.ctaHead.-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}
.ctaHead.-right {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  text-align: right;
}
.ctaHead.-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.ctaHeadTtl span {
  display: inline-block;
}
.ctaHeadTtl.-main {
  padding: calc(0.3em * var(--on-head-main-fill, 0)) calc(0.7em * var(--on-head-main-fill, 0));
  background-color: var(--on-head-main-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-main-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-head-main);
}
.ctaHeadTtl.-sub {
  margin-top: clamp(4px, 4px + (8 - 4) * (100vw - 375px) / 1065, 8px);
  padding: calc(0.3em * var(--on-head-sub-fill, 0)) calc(0.7em * var(--on-head-sub-fill, 0));
  background-color: var(--on-head-sub-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-sub-size);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-head-sub);
}

.ctaBody {
  margin-top: clamp(44.8px, 44.8px + (64 - 44.8) * (100vw - 375px) / 1065, 64px);
  width: 100%;
}

.ctaBodyList {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  width: 100%;
  row-gap: clamp(28px, 28px + (40 - 28) * (100vw - 375px) / 1065, 40px);
  column-gap: clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  justify-content: center;
  align-items: stretch;
}
.ctaBodyList.-card .ctaBodyItem {
  width: calc((100% - clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px) * (1)) / 2);
}
.ctaBodyList.-card .ctaBodyItem:nth-child(2n+1) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 0);
}
.ctaBodyList.-card .ctaBodyItem:nth-child(2n+2) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 1);
}
@media (max-width: 767px) {
  .ctaBodyList.-card .ctaBodyItem {
    width: 100%;
  }
  .ctaBodyList.-card .ctaBodyItem:nth-child(1n+1) {
    --anime-delay: calc(var(--anime-stagger, 0s) * 0);
  }
}
.ctaBodyList.-promo {
  column-gap: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  row-gap: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  align-items: flex-start;
}
.ctaBodyList.-promo.-col1 .ctaBodyItem {
  width: calc((100% - clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px) * (0)) / 1);
}
.ctaBodyList.-promo.-col1 .ctaBodyItem:nth-child(1n+1) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 0);
}
.ctaBodyList.-promo.-col2 .ctaBodyItem {
  width: calc((100% - clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px) * (1)) / 2);
}
.ctaBodyList.-promo.-col2 .ctaBodyItem:nth-child(2n+1) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 0);
}
.ctaBodyList.-promo.-col2 .ctaBodyItem:nth-child(2n+2) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 1);
}
.ctaBodyList.-promo.-col3 .ctaBodyItem {
  width: calc((100% - clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px) * (2)) / 3);
}
.ctaBodyList.-promo.-col3 .ctaBodyItem:nth-child(3n+1) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 0);
}
.ctaBodyList.-promo.-col3 .ctaBodyItem:nth-child(3n+2) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 1);
}
.ctaBodyList.-promo.-col3 .ctaBodyItem:nth-child(3n+3) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 2);
}
.ctaBodyList.-promo.-col4 .ctaBodyItem {
  width: calc((100% - clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px) * (3)) / 4);
}
.ctaBodyList.-promo.-col4 .ctaBodyItem:nth-child(4n+1) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 0);
}
.ctaBodyList.-promo.-col4 .ctaBodyItem:nth-child(4n+2) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 1);
}
.ctaBodyList.-promo.-col4 .ctaBodyItem:nth-child(4n+3) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 2);
}
.ctaBodyList.-promo.-col4 .ctaBodyItem:nth-child(4n+4) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 3);
}
.ctaBodyList.-promo.-col3 .ctaBodyWrap.-promo, .ctaBodyList.-promo.-col4 .ctaBodyWrap.-promo {
  padding: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
}
@media (max-width: 767px) {
  .ctaBodyList.-promo.-col1 .ctaBodyItem, .ctaBodyList.-promo.-col2 .ctaBodyItem {
    width: 100%;
  }
  .ctaBodyList.-promo.-col1 .ctaBodyItem:nth-child(1n+1), .ctaBodyList.-promo.-col2 .ctaBodyItem:nth-child(1n+1) {
    --anime-delay: calc(var(--anime-stagger, 0s) * 0);
  }
  .ctaBodyList.-promo.-col3 .ctaBodyItem, .ctaBodyList.-promo.-col4 .ctaBodyItem {
    width: calc((100% - clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px) * (1)) / 2);
  }
  .ctaBodyList.-promo.-col3 .ctaBodyItem:nth-child(2n+1), .ctaBodyList.-promo.-col4 .ctaBodyItem:nth-child(2n+1) {
    --anime-delay: calc(var(--anime-stagger, 0s) * 0);
  }
  .ctaBodyList.-promo.-col3 .ctaBodyItem:nth-child(2n+2), .ctaBodyList.-promo.-col4 .ctaBodyItem:nth-child(2n+2) {
    --anime-delay: calc(var(--anime-stagger, 0s) * 1);
  }
}

.ctaBodyItem {
  display: flex;
}
.ctaBodyItem.-promo {
  width: 100%;
}

.ctaBodyLink {
  --cta-icon-shift: 0;
  width: 100%;
}
.ctaBodyLink:hover {
  --cta-icon-shift: 1;
}
.ctaBodyLink.-card {
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: row;
  position: relative;
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  border-radius: calc(clamp(11.2px, 11.2px + (16 - 11.2) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
  background-color: var(--on-bg);
}
.ctaBodyLink.-promo {
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: calc(clamp(11.2px, 11.2px + (16 - 11.2) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
  background-color: var(--on-bg);
  text-align: center;
}
.ctaBodyLink.-promo:hover .ctaBodyImg.-promo {
  transform: scale(1.1);
}
.ctaBodyLink.-colorSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.ctaBodyLink.-colorText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.ctaBodyLink.-colorBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.ctaBodyLink.-promo.-dim {
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
  --on-bg: var(--color-text);
}
.ctaBodyLink.-promo.-dim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--color-text);
  opacity: 0.5;
}
.ctaBodyLink.-promo.-dim:hover .ctaBodyImg.-promo {
  transform: translate(-50%, -50%) scale(1.1);
}

.ctaBodyWrap.-txt {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  padding-right: calc(clamp(36px, 36px + (48 - 36) * (100vw - 375px) / 1065, 48px) + clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px));
}
.-img > .ctaBodyWrap.-txt {
  padding-right: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
}
.ctaBodyWrap.-img {
  flex-shrink: 0;
  width: clamp(120px, 120px + (200 - 120) * (100vw - 375px) / 1065, 200px);
}
.ctaBodyWrap.-promo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: clamp(32px, 32px + (56 - 32) * (100vw - 375px) / 1065, 56px);
  width: 100%;
}
.ctaBodyWrap.-promo > *:first-child {
  margin-top: 0 !important;
}
.ctaBodyWrap.-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
}
.ctaBodyWrap.-btn.-btn1 {
  column-gap: clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border-radius: calc(clamp(999px, 999px + (999 - 999) * (100vw - 375px) / 1065, 999px) * var(--radius-scale, 1));
  background-color: color-mix(in srgb, var(--on-btn, var(--color-brand)), var(--on-bg, var(--color-bg)) 85%);
  color: var(--on-btn);
}
.ctaBodyWrap.-btn.-btn2 {
  column-gap: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  color: var(--on-text);
  --btn-icon-bg: var(--on-btn);
  --btn-icon-fg: var(--on-bg);
}
.ctaBodyWrap.-btn.-btn2:hover {
  opacity: 1;
  --btn-icon-shift: 1;
}
.ctaBodyWrap.-btn.-btn3 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.ctaBodyWrap.-btn.-btn4 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  background-color: var(--on-btn);
  color: var(--on-bg);
}
.ctaBodyWrap.-btn.-btn5 {
  padding: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) 0;
  border-bottom: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.ctaBodyWrap.-btn.-accent {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}
.ctaBodyWrap.-btn.-btn2.-accent {
  background-color: transparent;
  color: var(--on-text);
  --btn-icon-bg: var(--color-accent);
  --btn-icon-fg: var(--color-bg);
}
.ctaBodyWrap.-btn.-btn5.-accent {
  border-color: var(--color-accent);
  background-color: transparent;
  color: var(--color-accent);
}
.ctaBodyWrap.-btn {
  margin-top: clamp(22.4px, 22.4px + (32 - 22.4) * (100vw - 375px) / 1065, 32px);
}

.ctaBodyTtl {
  color: var(--on-text);
}
.ctaBodyTtl span {
  display: inline-block;
}
.ctaBodyTtl.-main {
  font-size: clamp(2.46rem, 24.6px + (36 - 24.6) * (100vw - 375px) / 1065, 3.6rem);
  line-height: 1.2;
  font-weight: 500;
}
.ctaBodyTtl.-sub {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  font-weight: 700;
  margin-top: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
}
.-promo .ctaBodyTtl.-main {
  font-size: clamp(3.26rem, 32.6px + (56 - 32.6) * (100vw - 375px) / 1065, 5.6rem);
  line-height: 1.2;
  font-weight: 700;
}
.-promo .ctaBodyTtl.-sub {
  font-size: clamp(1.51rem, 15.1px + (18 - 15.1) * (100vw - 375px) / 1065, 1.8rem);
  line-height: 1.6;
  font-weight: 700;
  margin-top: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
}

.ctaBodyTxt {
  font-size: clamp(1.19rem, 11.9px + (13 - 11.9) * (100vw - 375px) / 1065, 1.3rem);
  line-height: 1.9;
  margin-top: clamp(28px, 28px + (40 - 28) * (100vw - 375px) / 1065, 40px);
  color: var(--on-text);
}
.ctaBodyTxt.-promo {
  font-size: clamp(1.32rem, 13.2px + (15 - 13.2) * (100vw - 375px) / 1065, 1.5rem);
  line-height: 1.9;
  margin-top: clamp(14px, 14px + (20 - 14) * (100vw - 375px) / 1065, 20px);
}
.ctaBodyTxt.-btn {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
  margin-top: 0;
}

.ctaBodyImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
}
.ctaBodyImg.-promo {
  height: auto;
  object-fit: contain;
  z-index: 0;
  border-radius: 0;
  transform: scale(1);
  transition: transform 0.5s ease;
}
.ctaBodyImg.-promo.-cropWide {
  aspect-ratio: 16/9;
  object-fit: cover;
}
.ctaBodyImg.-promo.-cropFlat {
  aspect-ratio: 2/1;
  object-fit: cover;
}
.ctaBodyImg.-promo.-cropSquare {
  aspect-ratio: 1/1;
  object-fit: cover;
}
.-dim > .ctaBodyImg.-promo {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1);
}

.ctaBodyIcon.-card {
  position: absolute;
  top: 50%;
  right: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  width: clamp(36px, 36px + (48 - 36) * (100vw - 375px) / 1065, 48px);
  height: clamp(36px, 36px + (48 - 36) * (100vw - 375px) / 1065, 48px);
  border-radius: 50%;
  background-color: var(--on-btn);
  transform: translateY(-50%);
}
.ctaBodyIcon.-card.-img {
  top: auto;
  bottom: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  transform: none;
}
.ctaBodyIcon.-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(15px, 15px + (20 - 15) * (100vw - 375px) / 1065, 20px);
  height: clamp(8px, 8px + (10 - 8) * (100vw - 375px) / 1065, 10px);
  background-color: var(--on-bg);
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  transform: translate(-50%, -50%) translateX(calc(clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px) * var(--cta-icon-shift, 0)));
  transition: transform 0.3s ease;
}
.ctaBodyIcon.-btn {
  display: none;
  flex-shrink: 0;
}
.ctaBodyIcon.-btn.-btn1 {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.ctaBodyIcon.-btn.-btn2 {
  display: block;
  overflow: hidden;
  position: relative;
  width: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  height: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  border-radius: 50%;
  background-color: var(--btn-icon-bg, var(--on-btn));
}
.ctaBodyIcon.-btn.-btn2::before, .ctaBodyIcon.-btn.-btn2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(20px, 20px + (28 - 20) * (100vw - 375px) / 1065, 28px);
  height: clamp(10px, 10px + (14 - 10) * (100vw - 375px) / 1065, 14px);
  background-color: var(--btn-icon-fg, var(--on-bg));
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.ctaBodyIcon.-btn.-btn2::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0)));
}
.ctaBodyIcon.-btn.-btn2::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1)));
}
.ctaBodyIcon.-btn.-btn1.-back, .ctaBodyIcon.-btn.-btn3.-back, .ctaBodyIcon.-btn.-btn4.-back, .ctaBodyIcon.-btn.-btn5.-back {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: 0;
  border-right: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.ctaBodyIcon.-btn.-btn2.-back::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0) * -1)) scaleX(-1);
}
.ctaBodyIcon.-btn.-btn2.-back::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1) * -1)) scaleX(-1);
}

.posts {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.posts.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.posts.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.posts.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.posts.-bgSmoke::before, .posts.-bgText::before, .posts.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.posts.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.posts.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.posts.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.posts.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.posts:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.posts:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.posts.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.posts.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.posts.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.posts.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.posts.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.posts.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.posts.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.posts.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.posts.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.posts.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}
.posts {
  overflow-x: clip;
}

.postsInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .postsInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.postsInner {
  position: relative;
  z-index: 2;
}
.postsInner > *:first-child {
  margin-top: 0 !important;
}

.postsHead {
  width: 100%;
}
.postsHead > *:first-child {
  margin-top: 0 !important;
}
.postsHead.-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}
.postsHead.-right {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  text-align: right;
}
.postsHead.-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.postsHeadTtl span {
  display: inline-block;
}
.postsHeadTtl.-main {
  padding: calc(0.3em * var(--on-head-main-fill, 0)) calc(0.7em * var(--on-head-main-fill, 0));
  background-color: var(--on-head-main-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-main-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-head-main);
}
.postsHeadTtl.-sub {
  margin-top: clamp(4px, 4px + (8 - 4) * (100vw - 375px) / 1065, 8px);
  padding: calc(0.3em * var(--on-head-sub-fill, 0)) calc(0.7em * var(--on-head-sub-fill, 0));
  background-color: var(--on-head-sub-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-sub-size);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-head-sub);
}

.postsBody {
  margin-top: clamp(44.8px, 44.8px + (64 - 44.8) * (100vw - 375px) / 1065, 64px);
  width: 100%;
}

.postsBodyList.-list {
  width: 100%;
}
.postsBodyList.-card {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  width: 100%;
  row-gap: clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px);
  column-gap: clamp(16px, 16px + (32 - 16) * (100vw - 375px) / 1065, 32px);
  align-items: stretch;
}

.postsSlider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.postsBodyItem.-list {
  width: 100%;
  border-top: 1px solid var(--on-line);
}
.postsBodyItem.-list:last-of-type {
  border-bottom: 1px solid var(--on-line);
}
.postsBodyItem.-card {
  width: calc((100% - clamp(16px, 16px + (32 - 16) * (100vw - 375px) / 1065, 32px) * (2)) / 3);
}
.postsBodyItem.-card:nth-child(3n+1) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 0);
}
.postsBodyItem.-card:nth-child(3n+2) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 1);
}
.postsBodyItem.-card:nth-child(3n+3) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 2);
}
@media (max-width: 1150px) {
  .postsBodyItem.-card {
    width: calc((100% - clamp(16px, 16px + (32 - 16) * (100vw - 375px) / 1065, 32px) * (1)) / 2);
  }
  .postsBodyItem.-card:nth-child(2n+1) {
    --anime-delay: calc(var(--anime-stagger, 0s) * 0);
  }
  .postsBodyItem.-card:nth-child(2n+2) {
    --anime-delay: calc(var(--anime-stagger, 0s) * 1);
  }
}

.postsBodyLink:hover {
  opacity: 1;
}
.postsBodyLink.-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(12px, 12px + (24 - 12) * (100vw - 375px) / 1065, 24px);
  padding: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px) clamp(0px, 0px + (8 - 0) * (100vw - 375px) / 1065, 8px);
  width: 100%;
}
.postsBodyLink.-card {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.postsBodyImg {
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: calc(clamp(11.2px, 11.2px + (16 - 11.2) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
}
.postsBodyImg.-none {
  background-color: var(--on-line);
}

.postsBodyWrap.-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(12px, 12px + (32 - 12) * (100vw - 375px) / 1065, 32px);
  row-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  width: calc(100% - clamp(18px, 18px + (24 - 18) * (100vw - 375px) / 1065, 24px) - clamp(12px, 12px + (24 - 12) * (100vw - 375px) / 1065, 24px));
}
@media (max-width: 767px) {
  .postsBodyWrap.-list {
    flex-wrap: wrap;
  }
}
.postsBodyWrap.-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: clamp(8px, 8px + (16 - 8) * (100vw - 375px) / 1065, 16px);
  row-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  margin-top: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  width: 100%;
}
.postsBodyWrap.-more {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  margin-top: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  margin-left: auto;
}

.postsBodyTime {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.05em;
  color: var(--on-text);
}

.postsBodyTag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-shrink: 0;
  padding: clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px) clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px);
  border-radius: calc(clamp(4px, 4px + (4 - 4) * (100vw - 375px) / 1065, 4px) * var(--radius-scale, 1));
  background-color: var(--on-text);
  font-size: clamp(1.12rem, 11.2px + (12 - 11.2) * (100vw - 375px) / 1065, 1.2rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-bg);
}

.postsBodyTtl {
  color: var(--on-text);
}
.postsBodyTtl.-list {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  min-width: 0;
}
@media (max-width: 767px) {
  .postsBodyTtl.-list {
    width: 100%;
  }
}
.postsBodyTtl.-card {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  font-weight: 700;
  flex-grow: 1;
  margin-top: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
  width: 100%;
}

.postsBodyTxt {
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1.4;
  font-weight: 700;
  transition: color 0.3s ease;
  color: var(--on-text);
}
.postsBodyTxt.-empty {
  width: 100%;
  text-align: center;
}

.postsBodyIcon.-arrow {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: clamp(18px, 18px + (24 - 18) * (100vw - 375px) / 1065, 24px);
  height: clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px);
  transition: color 0.3s ease, transform 0.3s ease;
}
.postsBodyIcon.-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: translateY(-50%);
}
.postsBodyIcon.-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  width: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  height: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.postsBodyIcon.-arrow {
  color: var(--on-text);
}

.postsFoot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  margin-top: clamp(39.1px, 39.1px + (56 - 39.1) * (100vw - 375px) / 1065, 56px);
  width: 100%;
}

.postsFootLink {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
}
.postsFootLink.-btn1 {
  column-gap: clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border-radius: calc(clamp(999px, 999px + (999 - 999) * (100vw - 375px) / 1065, 999px) * var(--radius-scale, 1));
  background-color: color-mix(in srgb, var(--on-btn, var(--color-brand)), var(--on-bg, var(--color-bg)) 85%);
  color: var(--on-btn);
}
.postsFootLink.-btn2 {
  column-gap: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  color: var(--on-text);
  --btn-icon-bg: var(--on-btn);
  --btn-icon-fg: var(--on-bg);
}
.postsFootLink.-btn2:hover {
  opacity: 1;
  --btn-icon-shift: 1;
}
.postsFootLink.-btn3 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.postsFootLink.-btn4 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  background-color: var(--on-btn);
  color: var(--on-bg);
}
.postsFootLink.-btn5 {
  padding: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) 0;
  border-bottom: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.postsFootLink.-accent {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}
.postsFootLink.-btn2.-accent {
  background-color: transparent;
  color: var(--on-text);
  --btn-icon-bg: var(--color-accent);
  --btn-icon-fg: var(--color-bg);
}
.postsFootLink.-btn5.-accent {
  border-color: var(--color-accent);
  background-color: transparent;
  color: var(--color-accent);
}
.postsFootLink:hover {
  opacity: 1;
}

.postsFootTxt {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
}
.postsFootTxt span {
  display: inline-block;
}

.postsFootIcon {
  display: none;
  flex-shrink: 0;
}
.postsFootIcon.-btn1 {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.postsFootIcon.-btn2 {
  display: block;
  overflow: hidden;
  position: relative;
  width: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  height: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  border-radius: 50%;
  background-color: var(--btn-icon-bg, var(--on-btn));
}
.postsFootIcon.-btn2::before, .postsFootIcon.-btn2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(20px, 20px + (28 - 20) * (100vw - 375px) / 1065, 28px);
  height: clamp(10px, 10px + (14 - 10) * (100vw - 375px) / 1065, 14px);
  background-color: var(--btn-icon-fg, var(--on-bg));
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.postsFootIcon.-btn2::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0)));
}
.postsFootIcon.-btn2::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1)));
}
.postsFootIcon.-btn1.-back, .postsFootIcon.-btn3.-back, .postsFootIcon.-btn4.-back, .postsFootIcon.-btn5.-back {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: 0;
  border-right: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.postsFootIcon.-btn2.-back::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0) * -1)) scaleX(-1);
}
.postsFootIcon.-btn2.-back::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1) * -1)) scaleX(-1);
}

.postsBodyLink:hover .postsBodyIcon,
.postsBodyLink:hover .postsBodyTxt {
  color: var(--color-accent);
}

.postsBodyLink:hover .postsBodyIcon {
  transform: translateX(clamp(4px, 4px + (6 - 4) * (100vw - 375px) / 1065, 6px));
}

.news {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.news.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.news.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.news.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.news.-bgSmoke::before, .news.-bgText::before, .news.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.news.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.news.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.news.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.news.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.news:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.news:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.news.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.news.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.news.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.news.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.news.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.news.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.news.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.news.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.news.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.news.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}

.newsInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .newsInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.newsInner {
  position: relative;
  z-index: 2;
}
.newsInner > *:first-child {
  margin-top: 0 !important;
}

.newsBody {
  width: 100%;
}

.newsBodyList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}

.newsBodyItem {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  scroll-margin-top: clamp(90px, 90px + (120 - 90) * (100vw - 375px) / 1065, 120px);
  width: 100%;
}
.newsBodyItem:not(:first-child) {
  margin-top: calc(clamp(48px, 48px + (72 - 48) * (100vw - 375px) / 1065, 72px) * var(--space-scale, 1));
  padding-top: calc(clamp(48px, 48px + (72 - 48) * (100vw - 375px) / 1065, 72px) * var(--space-scale, 1));
  border-top: 1px solid var(--on-line);
}

.newsBodyWrap.-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
}
.newsBodyWrap.-body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  row-gap: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  width: 100%;
}

.newsBodyTime {
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--on-text);
}

.newsBodyTag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-shrink: 0;
  padding: clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px) clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px);
  border-radius: calc(clamp(999px, 999px + (999 - 999) * (100vw - 375px) / 1065, 999px) * var(--radius-scale, 1));
  background-color: var(--on-text);
  font-size: clamp(1.12rem, 11.2px + (12 - 11.2) * (100vw - 375px) / 1065, 1.2rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--on-bg);
}

.newsBodyTtl {
  margin-top: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
  font-size: clamp(1.86rem, 18.6px + (24 - 18.6) * (100vw - 375px) / 1065, 2.4rem);
  line-height: 1.5;
  font-weight: 700;
  color: var(--on-text);
}

.newsBodyTxt {
  width: 100%;
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.9;
  font-weight: 400;
  color: var(--on-text);
}
.newsBodyTxt p + p {
  margin-top: 1em;
}
.newsBodyTxt strong,
.newsBodyTxt b {
  font-weight: 700;
}
.newsBodyTxt a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--on-btn);
}
.newsBodyTxt.-empty {
  text-align: center;
}

.newsBodyImg {
  width: auto;
  height: auto;
  max-width: 65%;
  max-height: clamp(320px, 320px + (480 - 320) * (100vw - 375px) / 1065, 480px);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  object-fit: contain;
}
.newsBodyImg.-small {
  max-width: 40%;
}
.newsBodyImg.-large {
  max-width: 100%;
}
@media (max-width: 767px) {
  .newsBodyImg {
    max-width: 100%;
  }
  .newsBodyImg.-small {
    max-width: 70%;
  }
}

.embed {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.embed.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.embed.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.embed.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.embed.-bgSmoke::before, .embed.-bgText::before, .embed.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.embed.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.embed.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.embed.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.embed.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.embed:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.embed:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.embed.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.embed.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.embed.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.embed.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.embed.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.embed.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.embed.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.embed.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.embed.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.embed.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}

.embedInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .embedInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.embedInner {
  position: relative;
  z-index: 2;
}
.embedInner > *:first-child {
  margin-top: 0 !important;
}

.embedHead {
  width: 100%;
}
.embedHead > *:first-child {
  margin-top: 0 !important;
}
.embedHead.-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}
.embedHead.-right {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  text-align: right;
}
.embedHead.-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.embedHeadTtl span {
  display: inline-block;
}
.embedHeadTtl.-main {
  padding: calc(0.3em * var(--on-head-main-fill, 0)) calc(0.7em * var(--on-head-main-fill, 0));
  background-color: var(--on-head-main-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-main-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-head-main);
}
.embedHeadTtl.-sub {
  margin-top: clamp(4px, 4px + (8 - 4) * (100vw - 375px) / 1065, 8px);
  padding: calc(0.3em * var(--on-head-sub-fill, 0)) calc(0.7em * var(--on-head-sub-fill, 0));
  background-color: var(--on-head-sub-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-sub-size);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-head-sub);
}

.embedBody {
  margin-top: clamp(61.6px, 61.6px + (88 - 61.6) * (100vw - 375px) / 1065, 88px);
  width: 100%;
}
.embedBody.-ratio169 {
  aspect-ratio: 16/9;
}
.embedBody.-ratio43 {
  aspect-ratio: 4/3;
}
.embedBody.-ratio11 {
  aspect-ratio: 1/1;
}

.embedBodyImg {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: calc(clamp(11.2px, 11.2px + (16 - 11.2) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
}

.visual {
  width: 100%;
}
.visual.-slider {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.visual.-slider.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.visual.-slider.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.visual.-slider.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.visual.-slider.-bgSmoke::before, .visual.-slider.-bgText::before, .visual.-slider.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.visual.-slider.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.visual.-slider.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.visual.-slider.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.visual.-slider.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.visual.-slider:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.visual.-slider:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.visual.-slider.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.visual.-slider.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.visual.-slider.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.visual.-slider.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.visual.-slider.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.visual.-slider.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.visual.-slider.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.visual.-slider.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.visual.-slider.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.visual.-slider.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}
.visual.-gallery {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.visual.-gallery.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.visual.-gallery.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.visual.-gallery.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.visual.-gallery.-bgSmoke::before, .visual.-gallery.-bgText::before, .visual.-gallery.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.visual.-gallery.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.visual.-gallery.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.visual.-gallery.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.visual.-gallery.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.visual.-gallery:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.visual.-gallery:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.visual.-gallery.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.visual.-gallery.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.visual.-gallery.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.visual.-gallery.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.visual.-gallery.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.visual.-gallery.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.visual.-gallery.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.visual.-gallery.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.visual.-gallery.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.visual.-gallery.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}
.visual:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}

.visualInner {
  width: 100%;
  position: relative;
  z-index: 2;
}

/*--------------------------------------------------------------
横幅いっぱい
--------------------------------------------------------------*/
.visualBody.-full {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.visualBody.-heightS {
  height: 33svh;
}
.visualBody.-heightM {
  height: 50svh;
}
.visualBody.-heightL {
  height: 66svh;
}
.visualBody.-dimS::before, .visualBody.-dimM::before, .visualBody.-dimL::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-text);
  z-index: 2;
}
.visualBody.-dimS::before {
  opacity: 0.2;
}
.visualBody.-dimM::before {
  opacity: 0.35;
}
.visualBody.-dimL::before {
  opacity: 0.55;
}
.visualBody {
  /*--------------------------------------------------------------
  横に流れる
  --------------------------------------------------------------*/
}
.visualBody.-slider {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  width: 100%;
}

.visualBodyWrap.-track {
  --pitch: max(clamp(216px, 216px + (352 - 216) * (100vw - 375px) / 1065, 352px), calc((100vw + clamp(200px, 200px + (320 - 200) * (100vw - 375px) / 1065, 320px)) / 6));
  --travel: calc(var(--pitch) * 6);
  overflow: hidden;
  position: relative;
  width: 100%;
  height: clamp(200px, 200px + (320 - 200) * (100vw - 375px) / 1065, 320px);
}
.visualBodyWrap.-track.-zigzag {
  height: calc(clamp(200px, 200px + (320 - 200) * (100vw - 375px) / 1065, 320px) + clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px));
}
.visualBodyWrap.-slot {
  position: absolute;
  top: 0;
  left: calc(clamp(200px, 200px + (320 - 200) * (100vw - 375px) / 1065, 320px) * -1);
  width: clamp(200px, 200px + (320 - 200) * (100vw - 375px) / 1065, 320px);
  animation: visualSlide 40s linear infinite;
}
.visualBodyWrap.-slot:nth-of-type(1) {
  animation-delay: calc(40s / 6 * -5);
}
.visualBodyWrap.-slot:nth-of-type(2) {
  animation-delay: calc(40s / 6 * -4);
}
.visualBodyWrap.-slot:nth-of-type(3) {
  animation-delay: calc(40s / 6 * -3);
}
.visualBodyWrap.-slot:nth-of-type(4) {
  animation-delay: calc(40s / 6 * -2);
}
.visualBodyWrap.-slot:nth-of-type(5) {
  animation-delay: calc(40s / 6 * -1);
}
.visualBodyWrap.-slot:nth-of-type(6) {
  animation-delay: calc(40s / 6 * 0);
}
.visualBodyWrap.-down {
  top: clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px);
}

@keyframes visualSlide {
  from {
    transform: translateX(var(--travel));
  }
  to {
    transform: translateX(0);
  }
}
.visualBodyImg.-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.visualBodyImg.-full:nth-of-type(2) {
  z-index: 1;
}
.visualBodyImg.-full.-hide {
  opacity: 0;
}
.visualBodyImg.-slider {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
}
.visualBodyImg.-source {
  display: none;
}

.visualBodyWrap.-track.-cropNone .visualBodyImg.-slider {
  object-fit: contain;
}

.visualBodyBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: relative;
  margin-top: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  margin-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  width: clamp(40px, 40px + (48 - 40) * (100vw - 375px) / 1065, 48px);
  height: clamp(40px, 40px + (48 - 40) * (100vw - 375px) / 1065, 48px);
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--on-btn, var(--color-brand)), var(--on-bg, var(--color-bg)) 85%);
  cursor: pointer;
}
.visualBodyBtn.-hide {
  display: none;
}
.visualBodyBtn::before, .visualBodyBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(2px, 2px + (3 - 2) * (100vw - 375px) / 1065, 3px);
  height: clamp(12px, 12px + (14 - 12) * (100vw - 375px) / 1065, 14px);
  background-color: var(--on-btn);
  transform: translateY(-50%);
}
.visualBodyBtn::before {
  right: calc(50% + clamp(1.5px, 1.5px + (2 - 1.5) * (100vw - 375px) / 1065, 2px));
}
.visualBodyBtn::after {
  left: calc(50% + clamp(1.5px, 1.5px + (2 - 1.5) * (100vw - 375px) / 1065, 2px));
}
.visualBodyBtn.-paused::before {
  right: auto;
  left: 50%;
  width: 0;
  height: 0;
  border-top: clamp(6px, 6px + (7 - 6) * (100vw - 375px) / 1065, 7px) solid transparent;
  border-bottom: clamp(6px, 6px + (7 - 6) * (100vw - 375px) / 1065, 7px) solid transparent;
  border-left: clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px) solid var(--on-btn);
  background-color: transparent;
  transform: translate(-40%, -50%);
}
.visualBodyBtn.-paused::after {
  display: none;
}

/*--------------------------------------------------------------
ギャラリー
--------------------------------------------------------------*/
.visualBody.-gallery {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .visualBody.-gallery {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.visualBodyList {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  width: 100%;
  row-gap: clamp(12px, 12px + (24 - 12) * (100vw - 375px) / 1065, 24px);
  column-gap: clamp(12px, 12px + (24 - 12) * (100vw - 375px) / 1065, 24px);
}
.visualBodyList.-col1 .visualBodyItem {
  width: calc((100% - clamp(12px, 12px + (24 - 12) * (100vw - 375px) / 1065, 24px) * (0)) / 1);
}
.visualBodyList.-col2 .visualBodyItem {
  width: calc((100% - clamp(12px, 12px + (24 - 12) * (100vw - 375px) / 1065, 24px) * (1)) / 2);
}
.visualBodyList.-col3 .visualBodyItem {
  width: calc((100% - clamp(12px, 12px + (24 - 12) * (100vw - 375px) / 1065, 24px) * (2)) / 3);
}
.visualBodyList.-col4 .visualBodyItem {
  width: calc((100% - clamp(12px, 12px + (24 - 12) * (100vw - 375px) / 1065, 24px) * (3)) / 4);
}
@media (max-width: 767px) {
  .visualBodyList.-col3 .visualBodyItem, .visualBodyList.-col4 .visualBodyItem {
    width: calc((100% - clamp(12px, 12px + (24 - 12) * (100vw - 375px) / 1065, 24px) * (1)) / 2);
  }
}

.visualBodyZoom {
  display: block;
  width: 100%;
  cursor: zoom-in;
}

.visualBodyImg.-gallery {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
}

.visualModal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 100vw;
  height: 100svh;
  background-color: color-mix(in srgb, var(--color-text) 70%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.visualModal.-active {
  opacity: 1;
  pointer-events: auto;
}

.visualModalList {
  width: 100%;
  height: 100%;
}

.visualModalItem {
  display: none;
  width: 100%;
  height: 100%;
  padding: clamp(16px, 16px + (64 - 16) * (100vw - 375px) / 1065, 64px);
}
.visualModalItem.-active {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.visualModalImg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
}

.visualModalClose {
  position: absolute;
  top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  right: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  width: clamp(40px, 40px + (48 - 40) * (100vw - 375px) / 1065, 48px);
  height: clamp(40px, 40px + (48 - 40) * (100vw - 375px) / 1065, 48px);
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--color-bg) 20%, transparent);
  cursor: pointer;
}
.visualModalClose::before, .visualModalClose::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(16px, 16px + (18 - 16) * (100vw - 375px) / 1065, 18px);
  height: clamp(2px, 2px + (3 - 2) * (100vw - 375px) / 1065, 3px);
  background-color: var(--color-bg);
}
.visualModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.visualModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.marquee {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.marquee.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.marquee.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.marquee.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.marquee.-bgSmoke::before, .marquee.-bgText::before, .marquee.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.marquee.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.marquee.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.marquee.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.marquee.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.marquee:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.marquee:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.marquee.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.marquee.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.marquee.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.marquee.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.marquee.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.marquee.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.marquee.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.marquee.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.marquee.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.marquee.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}
.marquee.-sizeS {
  --size: clamp(3.53rem, 35.3px + (64 - 35.3) * (100vw - 375px) / 1065, 6.4rem);
}
.marquee.-sizeM {
  --size: clamp(4.74rem, 47.4px + (112 - 47.4) * (100vw - 375px) / 1065, 11.2rem);
}
.marquee.-sizeL {
  --size: clamp(5.67rem, 56.7px + (180 - 56.7) * (100vw - 375px) / 1065, 18rem);
}
.marquee.-colorText {
  --tone: var(--color-text);
}
.marquee.-colorBrand {
  --tone: var(--color-brand);
}
.marquee.-colorAccent {
  --tone: var(--color-accent);
}
.marquee.-colorSmoke {
  --tone: var(--color-smoke, #f5f5f5);
}
.marquee.-bgText, .marquee.-bgBrand {
  --tone: var(--on-text);
}
.marquee.-speedS {
  --speed: 40;
}
.marquee.-speedM {
  --speed: 80;
}
.marquee.-speedL {
  --speed: 140;
}

.marquee:not(.-bgSmoke):not(.-bgText):not(.-bgBrand) {
  padding-top: 0;
  padding-bottom: 0;
}

.marqueeInner {
  position: relative;
  width: 100%;
  z-index: 2;
}

.marqueeBody {
  width: 100%;
}

.marqueeBodyWrap.-track {
  overflow: hidden;
  width: 100%;
}
.marqueeBodyWrap.-flow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(32px, 32px + (64 - 32) * (100vw - 375px) / 1065, 64px);
  padding-right: clamp(32px, 32px + (64 - 32) * (100vw - 375px) / 1065, 64px);
  width: max-content;
  animation: marqueeFlow var(--duration, 20s) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .marqueeBodyWrap.-flow {
    animation: none;
  }
}

@keyframes marqueeFlow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.marqueeBodyTxt {
  font-size: var(--size, clamp(4.74rem, 47.4px + (112 - 47.4) * (100vw - 375px) / 1065, 11.2rem));
  line-height: 1.15;
  font-weight: 700;
  color: var(--tone, var(--on-text));
  white-space: nowrap;
}

.spacer {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.spacer.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.spacer.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.spacer.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.spacer.-bgSmoke::before, .spacer.-bgText::before, .spacer.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.spacer.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.spacer.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.spacer.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.spacer.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.spacer:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.spacer:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.spacer.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.spacer.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.spacer.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.spacer.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.spacer.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.spacer.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.spacer.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.spacer.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.spacer.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.spacer.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}
.spacer {
  height: calc(calc(clamp(50px, 50px + (100 - 50) * (100vw - 375px) / 1065, 100px) * var(--space-scale, 1)) * var(--spacer-scale, 1));
}
.spacer, .spacer.-shapeBandSlant, .spacer:last-child, .spacer:last-child.-shapeBandSlant {
  padding-top: 0;
  padding-bottom: 0;
}

.table {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.table.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.table.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.table.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.table.-bgSmoke::before, .table.-bgText::before, .table.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.table.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.table.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.table.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.table.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.table:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.table:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.table.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.table.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.table.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.table.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.table.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.table.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.table.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.table.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.table.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.table.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}

.tableInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .tableInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.tableInner {
  position: relative;
  z-index: 2;
}
.tableInner > *:first-child {
  margin-top: 0 !important;
}

.tableHead {
  width: 100%;
}
.tableHead > *:first-child {
  margin-top: 0 !important;
}
.tableHead.-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}
.tableHead.-right {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  text-align: right;
}
.tableHead.-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.tableHeadTtl span {
  display: inline-block;
}
.tableHeadTtl.-main {
  padding: calc(0.3em * var(--on-head-main-fill, 0)) calc(0.7em * var(--on-head-main-fill, 0));
  background-color: var(--on-head-main-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-main-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-head-main);
}
.tableHeadTtl.-sub {
  margin-top: clamp(4px, 4px + (8 - 4) * (100vw - 375px) / 1065, 8px);
  padding: calc(0.3em * var(--on-head-sub-fill, 0)) calc(0.7em * var(--on-head-sub-fill, 0));
  background-color: var(--on-head-sub-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-sub-size);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-head-sub);
}

.tableBody {
  margin-top: clamp(44.8px, 44.8px + (64 - 44.8) * (100vw - 375px) / 1065, 64px);
  width: 100%;
}

.tableBodyTable {
  width: 100%;
  color: var(--on-text);
}

.tableBodyTable:not(.-compare) {
  border-collapse: collapse;
}
.tableBodyTable:not(.-compare) tr {
  border-top: 1px solid var(--on-line);
}
.tableBodyTable:not(.-compare) tr:last-of-type {
  border-bottom: 1px solid var(--on-line);
}
.tableBodyTable:not(.-compare) th,
.tableBodyTable:not(.-compare) td {
  padding: clamp(12px, 12px + (20 - 12) * (100vw - 375px) / 1065, 20px) 0;
  text-align: left;
  vertical-align: top;
  min-height: 1em;
}
.tableBodyTable:not(.-compare) th {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  font-weight: 700;
  width: 30%;
  padding-right: clamp(12px, 12px + (24 - 12) * (100vw - 375px) / 1065, 24px);
}
.tableBodyTable:not(.-compare) td {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
}
@media (max-width: 767px) {
  .tableBodyTable:not(.-compare),
  .tableBodyTable:not(.-compare) tbody,
  .tableBodyTable:not(.-compare) tr,
  .tableBodyTable:not(.-compare) th,
  .tableBodyTable:not(.-compare) td {
    display: block;
    width: 100%;
  }
  .tableBodyTable:not(.-compare) th {
    padding-bottom: 0;
  }
  .tableBodyTable:not(.-compare) td {
    padding-top: clamp(4px, 4px + (0 - 4) * (100vw - 375px) / 1065, 0px);
  }
}

/*--------------------------------------------------------------
比較（-compare）
・比べる相手を横に並べる表。**最初から横スクロール前提**なので列が増えても本文の幅を壊さない
・目立たせる列は1本の塗りに見せる。**罫線を透明にして塗りを透かす**ので、
  セルごとに背景を敷いていても縦に切れ目なく繋がる
・角丸を効かせるため border-collapse は separate。collapse だと角が落ちる
--------------------------------------------------------------*/
/*
横スクロールの箱
・**コンテンツ幅の外まで広げる。** 中に収めると画面の途中で表が切れて、そこから先が見えない
  → 左右のマージンをコンテンツ幅の余白ぶん**負に**振って画面幅まで広げ、
    同じ量をpaddingで戻す＝止まっている時は今までどおりの位置、スクロール中は画面の端まで使える
・calc(50% - 50vw) の 50% は親(コンテンツ幅の箱)の幅。max-widthで頭打ちになる大画面でも、
  親が中央寄せなのでそのまま画面の端に届く
・**paddingは表の前後の余白でもある。** 端までスクロールした時に列が画面の縁に張り付かない
  (スクロール終端でpadding-rightが効かないブラウザがあるのでflexで組む)
*/
.tableBodyScroll {
  display: flex;
  overflow-x: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  -webkit-overflow-scrolling: touch;
}

.tableBodyTable.-compare {
  border-collapse: separate;
  border-spacing: 0;
  flex: 0 0 auto;
  min-width: 100%;
}

/*
セル
・**罫線は本体の行(tbody)だけが持つ。** 見出しの行は「塗りの頭」なので線を引かない
  （thead / tbody を明示しないと、見出しの行も tr:last-of-type に当たって閉じ線が入る）
・目立たせる列は罫線を**透明**にする。消す(none)と1pxぶん他の列とずれるため
*/
.tableBodyCell {
  padding: clamp(18px, 18px + (28 - 18) * (100vw - 375px) / 1065, 28px) clamp(10px, 10px + (16 - 10) * (100vw - 375px) / 1065, 16px);
  min-width: clamp(132px, 132px + (200 - 132) * (100vw - 375px) / 1065, 200px);
  vertical-align: top;
  text-align: center;
  color: var(--on-text);
}
.tableBodyCell.-corner, .tableBodyCell.-item {
  min-width: clamp(96px, 96px + (150 - 96) * (100vw - 375px) / 1065, 150px);
  text-align: left;
}
.tableBodyCell.-item {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  font-weight: 700;
  padding-left: 0;
}
.tableBodyCell.-col, .tableBodyCell.-corner {
  padding-top: clamp(32px, 32px + (56 - 32) * (100vw - 375px) / 1065, 56px);
}
.tableBodyCell.-hl {
  background-color: var(--on-btn);
  color: var(--on-bg);
}
.tableBodyCell.-col.-hl {
  border-radius: calc(clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px) * var(--radius-scale, 1)) calc(clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px) * var(--radius-scale, 1)) 0 0;
}

tbody .tableBodyCell {
  border-top: 1px solid var(--on-line);
}

tbody tr:last-of-type .tableBodyCell {
  padding-bottom: clamp(28px, 28px + (48 - 28) * (100vw - 375px) / 1065, 48px);
  border-bottom: 1px solid var(--on-line);
}

tbody .tableBodyCell.-hl {
  border-top-color: transparent;
}

tbody tr:last-of-type .tableBodyCell.-hl {
  border-bottom-color: transparent;
}

/*
塗りの「足」
・**閉じ線より下へはみ出すぶん。** セルの背景は自分の箱しか塗れないので、
  行を1つ足してそこに塗りを続ける（下の角丸もこの行が持つ）
・塗っていない列は何も無い＝ただの空きになる
*/
.tableBodyCell.-foot {
  padding: 0;
  height: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  border: none;
}
.tableBodyCell.-foot.-hl {
  border-radius: 0 0 calc(clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px) * var(--radius-scale, 1)) calc(clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px) * var(--radius-scale, 1));
}

.tableBodyTtl {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.5;
  font-weight: 700;
}
.tableBodyTtl span {
  display: inline-block;
}
.-hl > .tableBodyTtl {
  font-size: clamp(1.51rem, 15.1px + (18 - 15.1) * (100vw - 375px) / 1065, 1.8rem);
  line-height: 1.5;
  font-weight: 700;
}

.tableBodyTxt {
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1.9;
  min-height: 1em;
}
.-hl > .tableBodyTxt {
  font-size: clamp(1.51rem, 15.1px + (18 - 15.1) * (100vw - 375px) / 1065, 1.8rem);
  line-height: 1.7;
  font-weight: 700;
}

.list {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.list.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.list.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.list.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.list.-bgSmoke::before, .list.-bgText::before, .list.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.list.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.list.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.list.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.list.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.list:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.list:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.list.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.list.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.list.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.list.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.list.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.list.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.list.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.list.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.list.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.list.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}

.listInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .listInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.listInner {
  position: relative;
  z-index: 2;
}
.listInner > *:first-child {
  margin-top: 0 !important;
}

.listHead {
  width: 100%;
}
.listHead > *:first-child {
  margin-top: 0 !important;
}
.listHead.-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}
.listHead.-right {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  text-align: right;
}
.listHead.-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.listHeadTtl span {
  display: inline-block;
}
.listHeadTtl.-main {
  padding: calc(0.3em * var(--on-head-main-fill, 0)) calc(0.7em * var(--on-head-main-fill, 0));
  background-color: var(--on-head-main-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-main-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-head-main);
}
.listHeadTtl.-sub {
  margin-top: clamp(4px, 4px + (8 - 4) * (100vw - 375px) / 1065, 8px);
  padding: calc(0.3em * var(--on-head-sub-fill, 0)) calc(0.7em * var(--on-head-sub-fill, 0));
  background-color: var(--on-head-sub-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-sub-size);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-head-sub);
}

.listBody {
  margin-top: clamp(44.8px, 44.8px + (64 - 44.8) * (100vw - 375px) / 1065, 64px);
  width: 100%;
}

.listBodyList {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  width: 100%;
  row-gap: clamp(32px, 32px + (64 - 32) * (100vw - 375px) / 1065, 64px);
  column-gap: clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px);
}
.listBodyList.-icon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  row-gap: 0;
}
@media (max-width: 1150px) {
  .listBodyList.-icon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .listBodyList.-icon {
    grid-template-columns: minmax(0, 1fr);
  }
}
.listBodyList.-number {
  align-items: stretch;
  counter-reset: listNum;
}

.listBodyItem:not(.-icon) > *:first-child {
  margin-top: 0 !important;
}
.listBodyItem.-icon {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  text-align: center;
}
.listBodyItem.-icon:nth-child(3n+1) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 0);
}
.listBodyItem.-icon:nth-child(3n+2) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 1);
}
.listBodyItem.-icon:nth-child(3n+3) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 2);
}
.listBodyItem.-icon:nth-child(n+4) {
  padding-top: clamp(32px, 32px + (64 - 32) * (100vw - 375px) / 1065, 64px);
}
.listBodyItem.-icon:last-child:nth-child(3n+1) {
  position: relative;
  left: calc(100% + clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px));
}
.listBodyItem.-icon:nth-child(3n+1):nth-last-child(2), .listBodyItem.-icon:nth-child(3n+2):last-child {
  position: relative;
  left: calc(50% + clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) / 2);
}
@media (max-width: 1150px) {
  .listBodyItem.-icon:nth-child(2n+1) {
    --anime-delay: calc(var(--anime-stagger, 0s) * 0);
  }
  .listBodyItem.-icon:nth-child(2n+2) {
    --anime-delay: calc(var(--anime-stagger, 0s) * 1);
  }
  .listBodyItem.-icon:nth-child(n+3) {
    padding-top: clamp(32px, 32px + (64 - 32) * (100vw - 375px) / 1065, 64px);
  }
  .listBodyItem.-icon:last-child:nth-child(3n+1), .listBodyItem.-icon:nth-child(3n+1):nth-last-child(2), .listBodyItem.-icon:nth-child(3n+2):last-child {
    left: auto;
  }
  .listBodyItem.-icon:last-child:nth-child(2n+1) {
    position: relative;
    left: calc(50% + clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) / 2);
  }
}
@media (max-width: 767px) {
  .listBodyItem.-icon:nth-child(1n+1) {
    --anime-delay: calc(var(--anime-stagger, 0s) * 0);
  }
  .listBodyItem.-icon:nth-child(n+2) {
    padding-top: clamp(32px, 32px + (64 - 32) * (100vw - 375px) / 1065, 64px);
  }
  .listBodyItem.-icon:last-child:nth-child(2n+1) {
    left: auto;
  }
}
.listBodyItem.-number {
  width: calc((100% - clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * (1)) / 2);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  counter-increment: listNum;
}
.listBodyItem.-number:nth-child(2n+1) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 0);
}
.listBodyItem.-number:nth-child(2n+2) {
  --anime-delay: calc(var(--anime-stagger, 0s) * 1);
}
@media (max-width: 767px) {
  .listBodyItem.-number {
    width: 100%;
  }
  .listBodyItem.-number:nth-child(1n+1) {
    --anime-delay: calc(var(--anime-stagger, 0s) * 0);
  }
}

.listBodyList.-flow > .listBodyItem {
  position: relative;
  padding: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  border-radius: calc(clamp(8.3px, 8.3px + (12 - 8.3) * (100vw - 375px) / 1065, 12px) * var(--radius-scale, 1));
  background-color: color-mix(in srgb, var(--on-text) 6%, var(--on-bg));
}
.listBodyList.-flow > .listBodyItem::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) / -2);
  width: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
  height: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
  border-top: 2px solid var(--on-btn);
  border-right: 2px solid var(--on-btn);
  transform: translate(-85%, -50%) rotate(45deg);
}
.listBodyList.-flow > .listBodyItem:first-child::after {
  content: none;
}
@media (max-width: 767px) {
  .listBodyList.-flow > .listBodyItem::after {
    top: calc(clamp(32px, 32px + (64 - 32) * (100vw - 375px) / 1065, 64px) / -2);
    left: 50%;
    transform: translate(-50%, -85%) rotate(135deg);
  }
}
.listBodyList.-flow > .listBodyItem.-icon:nth-child(n+4) {
  margin-top: clamp(32px, 32px + (64 - 32) * (100vw - 375px) / 1065, 64px);
}
@media (max-width: 1150px) {
  .listBodyList.-flow > .listBodyItem.-icon:nth-child(n+3) {
    margin-top: clamp(32px, 32px + (64 - 32) * (100vw - 375px) / 1065, 64px);
  }
}
@media (max-width: 767px) {
  .listBodyList.-flow > .listBodyItem.-icon:nth-child(n+2) {
    margin-top: clamp(32px, 32px + (64 - 32) * (100vw - 375px) / 1065, 64px);
  }
}
.listBodyList.-flow .listBodyTxt.-number {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

.listBodyImg {
  grid-row: 1;
  width: 100%;
  height: clamp(125.9px, 125.9px + (180 - 125.9) * (100vw - 375px) / 1065, 180px);
  object-fit: contain;
}

.listBodyNum {
  font-size: clamp(2.63rem, 26.3px + (40 - 26.3) * (100vw - 375px) / 1065, 4rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-btn);
}
.listBodyNum::before {
  content: counter(listNum, decimal-leading-zero);
}

.listBodyTtl span {
  display: inline-block;
}
.listBodyTtl.-icon {
  font-size: clamp(1.86rem, 18.6px + (24 - 18.6) * (100vw - 375px) / 1065, 2.4rem);
  line-height: 1.4;
  font-weight: 700;
  grid-row: 2;
  margin-top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  letter-spacing: 0.1em;
  color: var(--on-btn);
}
.listBodyList.-icon:not(:has(.listBodyImg)) .listBodyTtl.-icon {
  margin-top: 0;
}
.listBodyTtl.-number {
  font-size: clamp(1.86rem, 18.6px + (24 - 18.6) * (100vw - 375px) / 1065, 2.4rem);
  line-height: 1.4;
  font-weight: 700;
  margin-top: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  width: 100%;
  letter-spacing: 0.05em;
  color: var(--on-text);
}

.listBodyTxt {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.8;
  color: var(--on-text);
}
.listBodyTxt.-icon {
  grid-row: 3;
  margin-top: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  text-align: left;
}
.listBodyTxt.-number {
  flex-grow: 1;
  margin-top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  padding: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  width: 100%;
  border-radius: calc(clamp(8.3px, 8.3px + (12 - 8.3) * (100vw - 375px) / 1065, 12px) * var(--radius-scale, 1));
  background-color: color-mix(in srgb, var(--on-text) 6%, var(--on-bg));
}
.listBodyTxt.-link {
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1.4;
  font-weight: 700;
  margin-top: 0;
  padding: 0;
  width: auto;
  flex-grow: 0;
  background-color: transparent;
  text-decoration: underline;
  color: inherit;
}
.listBodyTxt.-link span {
  display: inline-block;
}

.listBodyLink {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
  margin-top: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  color: var(--on-btn);
}

.listBodyIcon.-arrow {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: clamp(18px, 18px + (24 - 18) * (100vw - 375px) / 1065, 24px);
  height: clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px);
  transition: color 0.3s ease, transform 0.3s ease;
}
.listBodyIcon.-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: translateY(-50%);
}
.listBodyIcon.-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  width: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  height: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.listFoot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  margin-top: clamp(39.1px, 39.1px + (56 - 39.1) * (100vw - 375px) / 1065, 56px);
  width: 100%;
}

.listFootLink {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
}
.listFootLink.-btn1 {
  column-gap: clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border-radius: calc(clamp(999px, 999px + (999 - 999) * (100vw - 375px) / 1065, 999px) * var(--radius-scale, 1));
  background-color: color-mix(in srgb, var(--on-btn, var(--color-brand)), var(--on-bg, var(--color-bg)) 85%);
  color: var(--on-btn);
}
.listFootLink.-btn2 {
  column-gap: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  color: var(--on-text);
  --btn-icon-bg: var(--on-btn);
  --btn-icon-fg: var(--on-bg);
}
.listFootLink.-btn2:hover {
  opacity: 1;
  --btn-icon-shift: 1;
}
.listFootLink.-btn3 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.listFootLink.-btn4 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  background-color: var(--on-btn);
  color: var(--on-bg);
}
.listFootLink.-btn5 {
  padding: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) 0;
  border-bottom: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.listFootLink.-accent {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}
.listFootLink.-btn2.-accent {
  background-color: transparent;
  color: var(--on-text);
  --btn-icon-bg: var(--color-accent);
  --btn-icon-fg: var(--color-bg);
}
.listFootLink.-btn5.-accent {
  border-color: var(--color-accent);
  background-color: transparent;
  color: var(--color-accent);
}
.listFootLink:hover {
  opacity: 1;
}

.listFootTxt {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
}
.listFootTxt span {
  display: inline-block;
}

.listFootIcon {
  display: none;
  flex-shrink: 0;
}
.listFootIcon.-btn1 {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.listFootIcon.-btn2 {
  display: block;
  overflow: hidden;
  position: relative;
  width: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  height: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  border-radius: 50%;
  background-color: var(--btn-icon-bg, var(--on-btn));
}
.listFootIcon.-btn2::before, .listFootIcon.-btn2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(20px, 20px + (28 - 20) * (100vw - 375px) / 1065, 28px);
  height: clamp(10px, 10px + (14 - 10) * (100vw - 375px) / 1065, 14px);
  background-color: var(--btn-icon-fg, var(--on-bg));
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.listFootIcon.-btn2::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0)));
}
.listFootIcon.-btn2::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1)));
}
.listFootIcon.-btn1.-back, .listFootIcon.-btn3.-back, .listFootIcon.-btn4.-back, .listFootIcon.-btn5.-back {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: 0;
  border-right: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.listFootIcon.-btn2.-back::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0) * -1)) scaleX(-1);
}
.listFootIcon.-btn2.-back::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1) * -1)) scaleX(-1);
}

.faq {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.faq.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.faq.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.faq.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.faq.-bgSmoke::before, .faq.-bgText::before, .faq.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.faq.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.faq.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.faq.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.faq.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.faq:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.faq:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.faq.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.faq.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.faq.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.faq.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.faq.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.faq.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.faq.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.faq.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.faq.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.faq.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}

.faqInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .faqInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.faqInner {
  position: relative;
  z-index: 2;
}
.faqInner > *:first-child {
  margin-top: 0 !important;
}

.faqHead {
  width: 100%;
}
.faqHead > *:first-child {
  margin-top: 0 !important;
}
.faqHead.-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
}
.faqHead.-right {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  text-align: right;
}
.faqHead.-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.faqHeadTtl span {
  display: inline-block;
}
.faqHeadTtl.-main {
  padding: calc(0.3em * var(--on-head-main-fill, 0)) calc(0.7em * var(--on-head-main-fill, 0));
  background-color: var(--on-head-main-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-main-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--on-head-main);
}
.faqHeadTtl.-sub {
  margin-top: clamp(4px, 4px + (8 - 4) * (100vw - 375px) / 1065, 8px);
  padding: calc(0.3em * var(--on-head-sub-fill, 0)) calc(0.7em * var(--on-head-sub-fill, 0));
  background-color: var(--on-head-sub-bg);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: var(--head-sub-size);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-head-sub);
}

.faqBody {
  margin-top: clamp(44.8px, 44.8px + (64 - 44.8) * (100vw - 375px) / 1065, 64px);
  width: 100%;
}

.faqBodyList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}
.faqBodyList.-accordion {
  row-gap: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
}
.faqBodyList.-talk {
  row-gap: clamp(33.5px, 33.5px + (48 - 33.5) * (100vw - 375px) / 1065, 48px);
}

.faqBodyItem {
  width: 100%;
}
.faqBodyItem.-accordion {
  overflow: hidden;
  border-radius: calc(clamp(11.2px, 11.2px + (16 - 11.2) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
  background-color: var(--color-smoke, #f5f5f5);
}
.faqBodyItem.-talk {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  row-gap: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
}

.faqBodyBtn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(12px, 12px + (20 - 12) * (100vw - 375px) / 1065, 20px);
  padding: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px) clamp(16px, 16px + (32 - 16) * (100vw - 375px) / 1065, 32px);
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.faqBodyTag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-shrink: 0;
  width: clamp(32px, 32px + (40 - 32) * (100vw - 375px) / 1065, 40px);
  height: clamp(32px, 32px + (40 - 32) * (100vw - 375px) / 1065, 40px);
  border-radius: calc(clamp(999px, 999px + (999 - 999) * (100vw - 375px) / 1065, 999px) * var(--radius-scale, 1));
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1;
  font-weight: 700;
  color: var(--on-bg);
}
.faqBodyTag.-q {
  background-color: var(--color-brand);
}
.faqBodyTag.-a {
  background-color: var(--color-accent);
}

.faqBodyImg {
  flex-shrink: 0;
  width: clamp(32px, 32px + (40 - 32) * (100vw - 375px) / 1065, 40px);
  height: clamp(32px, 32px + (40 - 32) * (100vw - 375px) / 1065, 40px);
  object-fit: contain;
}

.faqBodyIcon.-plus {
  position: relative;
  flex-shrink: 0;
  width: clamp(14px, 14px + (16 - 14) * (100vw - 375px) / 1065, 16px);
  height: clamp(14px, 14px + (16 - 14) * (100vw - 375px) / 1065, 16px);
}
.faqBodyIcon.-plus::before, .faqBodyIcon.-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--on-text);
  transform: translate(-50%, -50%);
}
.faqBodyIcon.-plus::before {
  width: 100%;
  height: 1px;
}
.faqBodyIcon.-plus::after {
  width: 1px;
  height: 100%;
  transition: transform 0.3s ease;
}
.faqBodyIcon.-plus.-open::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.faqBodyIcon.-arrow {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: clamp(18px, 18px + (24 - 18) * (100vw - 375px) / 1065, 24px);
  height: clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px);
  transition: color 0.3s ease, transform 0.3s ease;
}
.faqBodyIcon.-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: translateY(-50%);
}
.faqBodyIcon.-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  width: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  height: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.faqBodyWrap.-answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  width: 100%;
  transition: grid-template-rows 0.3s ease;
}
.faqBodyWrap.-answer.-open {
  grid-template-rows: 1fr;
}
.faqBodyWrap.-clip {
  overflow: hidden;
  min-height: 0;
}
.faqBodyWrap.-inner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  column-gap: clamp(12px, 12px + (20 - 12) * (100vw - 375px) / 1065, 20px);
  margin-left: clamp(16px, 16px + (32 - 16) * (100vw - 375px) / 1065, 32px);
  margin-right: clamp(16px, 16px + (32 - 16) * (100vw - 375px) / 1065, 32px);
  padding-top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  padding-bottom: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  border-top: 1px solid var(--on-line);
}
.faqBodyWrap.-q {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  column-gap: clamp(10px, 10px + (16 - 10) * (100vw - 375px) / 1065, 16px);
  width: 100%;
}
.faqBodyWrap.-a {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row-reverse;
  column-gap: clamp(10px, 10px + (16 - 10) * (100vw - 375px) / 1065, 16px);
  width: 100%;
}
.faqBodyWrap.-txt {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  flex: 1;
}
.faqBodyWrap.-txt.-bubble {
  flex: 0 1 auto;
  max-width: 80%;
  padding: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px) clamp(16px, 16px + (32 - 16) * (100vw - 375px) / 1065, 32px);
  border-radius: calc(clamp(11.2px, 11.2px + (16 - 11.2) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
  background-color: var(--color-smoke, #f5f5f5);
}

.faqBodyTtl {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  font-weight: 700;
  color: var(--on-text);
  min-height: 1em;
}
.faqBodyTtl.-accordion {
  flex: 1;
}

.faqBodyTxt {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.8;
  color: var(--on-text);
  width: 100%;
  min-height: 1em;
}
.faqBodyTxt.-link {
  width: auto;
  font-size: clamp(1.32rem, 13.2px + (15 - 13.2) * (100vw - 375px) / 1065, 1.5rem);
  line-height: 1.4;
  font-weight: 700;
  text-decoration: underline;
}
.faqBodyTxt.-link span {
  display: inline-block;
}

.faqBodyLink {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
  margin-top: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  color: var(--color-accent);
}

.contact {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.contact.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.contact.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.contact.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.contact.-bgSmoke::before, .contact.-bgText::before, .contact.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.contact.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.contact.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.contact.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.contact.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.contact:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.contact:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.contact.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.contact.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.contact.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.contact.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.contact.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.contact.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.contact.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.contact.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.contact.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.contact.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}

.contactInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .contactInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.contactInner {
  position: relative;
  z-index: 2;
}
.contactInner > *:first-child {
  margin-top: 0 !important;
}

.contactBody {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  transition: opacity 0.4s ease;
}
.contactBody > *:first-child {
  margin-top: 0 !important;
}
.contactBody.-hide {
  opacity: 0;
}
.contactBody.-sent {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  row-gap: clamp(28px, 28px + (40 - 28) * (100vw - 375px) / 1065, 40px);
  display: none;
}

.contact.-sent .contactBody {
  display: none;
}

.contact.-sent .contactBody.-sent {
  display: flex;
  animation: contactSentIn 0.5s ease forwards;
}

@keyframes contactSentIn {
  from {
    opacity: 0;
    transform: translateY(clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*--------------------------------------------------------------
CF7が挟む箱
・レイアウトに関係しない要素はdisplay:contentsで自分の組みに参加させる
  → .-formのflexの子が、そのまま各行(.-row)になる
--------------------------------------------------------------*/
.contactBodyWrap .wpcf7,
.contactBodyWrap .wpcf7-form {
  display: contents;
}

.contactBodyWrap .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.contactBodyWrap.-bottom .wpcf7-form-control-wrap {
  width: auto;
}

.contactBodyWrap .screen-reader-response {
  overflow: hidden;
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
}

/*--------------------------------------------------------------
フォーム本体
--------------------------------------------------------------*/
.contactBodyWrap.-form {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  row-gap: clamp(22.4px, 22.4px + (32 - 22.4) * (100vw - 375px) / 1065, 32px);
  margin-top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  width: 100%;
}
.contactBodyWrap.-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
  width: 100%;
}
@media (max-width: 767px) {
  .contactBodyWrap.-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 8px;
  }
}
.contactBodyWrap.-field {
  width: calc(100% - clamp(168px, 168px + (240 - 168) * (100vw - 375px) / 1065, 240px) - clamp(16px, 16px + (32 - 16) * (100vw - 375px) / 1065, 32px));
}
@media (max-width: 767px) {
  .contactBodyWrap.-field {
    width: 100%;
  }
}
.contactBodyWrap.-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  row-gap: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  margin-top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  width: 100%;
}

.contactBodyTxt {
  width: 100%;
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 2;
  color: var(--on-text);
}
.contactBodyTxt.-agree {
  width: auto;
  text-align: center;
}
.contactBodyTxt.-btn {
  width: auto;
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
  color: inherit;
}
.contactBodyTxt.-sent {
  font-size: clamp(1.63rem, 16.3px + (20 - 16.3) * (100vw - 375px) / 1065, 2rem);
  line-height: 1.8;
  text-align: center;
}

.contactBodyLink {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
}
.contactBodyLink.-btn1 {
  column-gap: clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border-radius: calc(clamp(999px, 999px + (999 - 999) * (100vw - 375px) / 1065, 999px) * var(--radius-scale, 1));
  background-color: color-mix(in srgb, var(--on-btn, var(--color-brand)), var(--on-bg, var(--color-bg)) 85%);
  color: var(--on-btn);
}
.contactBodyLink.-btn2 {
  column-gap: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  color: var(--on-text);
  --btn-icon-bg: var(--on-btn);
  --btn-icon-fg: var(--on-bg);
}
.contactBodyLink.-btn2:hover {
  opacity: 1;
  --btn-icon-shift: 1;
}
.contactBodyLink.-btn3 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.contactBodyLink.-btn4 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  background-color: var(--on-btn);
  color: var(--on-bg);
}
.contactBodyLink.-btn5 {
  padding: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) 0;
  border-bottom: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.contactBodyLink.-accent {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}
.contactBodyLink.-btn2.-accent {
  background-color: transparent;
  color: var(--on-text);
  --btn-icon-bg: var(--color-accent);
  --btn-icon-fg: var(--color-bg);
}
.contactBodyLink.-btn5.-accent {
  border-color: var(--color-accent);
  background-color: transparent;
  color: var(--color-accent);
}

.contactBodyTxt a {
  text-decoration: underline;
}

.contactBodyLabel {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
  padding-top: clamp(0px, 0px + (14 - 0) * (100vw - 375px) / 1065, 14px);
  width: clamp(168px, 168px + (240 - 168) * (100vw - 375px) / 1065, 240px);
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  font-weight: 700;
  color: var(--on-text);
}
@media (max-width: 767px) {
  .contactBodyLabel {
    padding-top: 0;
    width: 100%;
  }
}

.contactBodyTag {
  flex-shrink: 0;
  padding: clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px) clamp(8px, 8px + (10 - 8) * (100vw - 375px) / 1065, 10px);
  border-radius: calc(clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px) * var(--radius-scale, 1));
  background-color: var(--color-accent);
  font-size: clamp(1.12rem, 11.2px + (12 - 11.2) * (100vw - 375px) / 1065, 1.2rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-bg);
}

.contactBodyInput {
  padding: clamp(12px, 12px + (14 - 12) * (100vw - 375px) / 1065, 14px) clamp(14px, 14px + (16 - 14) * (100vw - 375px) / 1065, 16px);
  width: 100%;
  border: none;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  background-color: var(--color-smoke, #f5f5f5);
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  color: var(--color-text);
  transition: box-shadow 0.3s ease;
}
.contactBodyInput:focus {
  box-shadow: inset 0 0 0 1px var(--color-brand);
  outline: none;
}
.contactBodyInput::placeholder {
  color: color-mix(in srgb, var(--color-text), transparent 60%);
}
.contactBodyInput.wpcf7-not-valid {
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
@media (max-width: 767px) {
  .contactBodyInput {
    font-size: 1.6rem;
  }
}

textarea.contactBodyInput {
  min-height: clamp(160px, 160px + (200 - 160) * (100vw - 375px) / 1065, 200px);
  resize: vertical;
}

/*--------------------------------------------------------------
ラジオ・チェックボックス
・CF7がspanで組む。ネイティブの丸は隠して疑似要素で描く
・**[radio]のclass:はコンテナのspanに付くが、[acceptance]はinputに付く**。
  掴み方を揃えられないので、チェックボックス側はCF7のクラス(.wpcf7-acceptance)で掴む
--------------------------------------------------------------*/
.contactBodyRadio,
.contactBodyWrap .wpcf7-acceptance {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  row-gap: clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px);
}

.contactBodyRadio {
  padding-top: clamp(0px, 0px + (14 - 0) * (100vw - 375px) / 1065, 14px);
}
@media (max-width: 767px) {
  .contactBodyRadio {
    padding-top: 0;
  }
}

.contactBodyRadio .wpcf7-list-item,
.contactBodyWrap .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.contactBodyRadio label,
.contactBodyWrap .wpcf7-acceptance label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
}

.contactBodyRadio input,
.contactBodyWrap .wpcf7-acceptance input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.contactBodyRadio .wpcf7-list-item-label,
.contactBodyWrap .wpcf7-acceptance .wpcf7-list-item-label {
  position: relative;
  padding-left: clamp(26px, 26px + (30 - 26) * (100vw - 375px) / 1065, 30px);
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  color: var(--on-text);
}

.contactBodyRadio .wpcf7-list-item-label::before,
.contactBodyWrap .wpcf7-acceptance .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(18px, 18px + (20 - 18) * (100vw - 375px) / 1065, 20px);
  height: clamp(18px, 18px + (20 - 18) * (100vw - 375px) / 1065, 20px);
  background-color: var(--color-smoke, #f5f5f5);
  transform: translateY(-50%);
}

.contactBodyRadio .wpcf7-list-item-label::before {
  border-radius: 50%;
}

.contactBodyWrap .wpcf7-acceptance .wpcf7-list-item-label::before {
  border-radius: calc(clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px) * var(--radius-scale, 1));
}

.contactBodyRadio .wpcf7-list-item-label::after,
.contactBodyWrap .wpcf7-acceptance .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.contactBodyRadio .wpcf7-list-item-label::after {
  top: 50%;
  left: clamp(4.5px, 4.5px + (5 - 4.5) * (100vw - 375px) / 1065, 5px);
  width: clamp(9px, 9px + (10 - 9) * (100vw - 375px) / 1065, 10px);
  height: clamp(9px, 9px + (10 - 9) * (100vw - 375px) / 1065, 10px);
  border-radius: 50%;
  background-color: var(--color-brand);
  transform: translateY(-50%);
}

.contactBodyWrap .wpcf7-acceptance .wpcf7-list-item-label::after {
  top: 50%;
  left: clamp(6.3px, 6.3px + (7 - 6.3) * (100vw - 375px) / 1065, 7px);
  width: clamp(5.4px, 5.4px + (6 - 5.4) * (100vw - 375px) / 1065, 6px);
  height: clamp(10px, 10px + (11 - 10) * (100vw - 375px) / 1065, 11px);
  border-right: 2px solid var(--color-brand);
  border-bottom: 2px solid var(--color-brand);
  transform: translateY(-65%) rotate(45deg);
}

.contactBodyRadio input:checked + .wpcf7-list-item-label::after,
.contactBodyWrap .wpcf7-acceptance input:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}

.contactBodyRadio input:focus-visible + .wpcf7-list-item-label::before,
.contactBodyWrap .wpcf7-acceptance input:focus-visible + .wpcf7-list-item-label::before {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/*--------------------------------------------------------------
送信ボタン・エラー表示
--------------------------------------------------------------*/
.contactBodySubmit {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
}
.contactBodySubmit.-btn1 {
  column-gap: clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border-radius: calc(clamp(999px, 999px + (999 - 999) * (100vw - 375px) / 1065, 999px) * var(--radius-scale, 1));
  background-color: color-mix(in srgb, var(--on-btn, var(--color-brand)), var(--on-bg, var(--color-bg)) 85%);
  color: var(--on-btn);
}
.contactBodySubmit.-btn2 {
  column-gap: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  color: var(--on-text);
  --btn-icon-bg: var(--on-btn);
  --btn-icon-fg: var(--on-bg);
}
.contactBodySubmit.-btn2:hover {
  opacity: 1;
  --btn-icon-shift: 1;
}
.contactBodySubmit.-btn3 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.contactBodySubmit.-btn4 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  background-color: var(--on-btn);
  color: var(--on-bg);
}
.contactBodySubmit.-btn5 {
  padding: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) 0;
  border-bottom: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.contactBodySubmit.-accent {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}
.contactBodySubmit.-btn2.-accent {
  background-color: transparent;
  color: var(--on-text);
  --btn-icon-bg: var(--color-accent);
  --btn-icon-fg: var(--color-bg);
}
.contactBodySubmit.-btn5.-accent {
  border-color: var(--color-accent);
  background-color: transparent;
  color: var(--color-accent);
}
.contactBodySubmit:hover {
  opacity: 0.7;
}
.contactBodySubmit.-btn2:hover {
  opacity: 1;
}
.contactBodySubmit:disabled {
  opacity: 0.4;
  cursor: default;
}
.contactBodySubmit:disabled:hover {
  opacity: 0.4;
}

.contactBodyIcon {
  display: none;
  flex-shrink: 0;
}
.contactBodyIcon.-btn1 {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.contactBodyIcon.-btn2 {
  display: block;
  overflow: hidden;
  position: relative;
  width: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  height: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  border-radius: 50%;
  background-color: var(--btn-icon-bg, var(--on-btn));
}
.contactBodyIcon.-btn2::before, .contactBodyIcon.-btn2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(20px, 20px + (28 - 20) * (100vw - 375px) / 1065, 28px);
  height: clamp(10px, 10px + (14 - 10) * (100vw - 375px) / 1065, 14px);
  background-color: var(--btn-icon-fg, var(--on-bg));
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.contactBodyIcon.-btn2::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0)));
}
.contactBodyIcon.-btn2::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1)));
}
.contactBodyIcon.-btn1.-back, .contactBodyIcon.-btn3.-back, .contactBodyIcon.-btn4.-back, .contactBodyIcon.-btn5.-back {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: 0;
  border-right: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.contactBodyIcon.-btn2.-back::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0) * -1)) scaleX(-1);
}
.contactBodyIcon.-btn2.-back::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1) * -1)) scaleX(-1);
}

.contactBodyWrap .wpcf7-not-valid-tip {
  margin-top: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  font-size: clamp(1.19rem, 11.9px + (13 - 11.9) * (100vw - 375px) / 1065, 1.3rem);
  line-height: 1.5;
  color: var(--color-accent);
}

.contactBodyWrap .wpcf7 .wpcf7-response-output {
  margin: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px) 0 0;
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  width: 100%;
  border: 1px solid var(--on-line);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1.6;
  color: var(--on-text);
  text-align: center;
}

.contactBodyWrap .wpcf7 .wpcf7-spinner {
  margin: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) auto 0;
}

.article {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.article.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.article.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.article.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.article.-bgSmoke::before, .article.-bgText::before, .article.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.article.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.article.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.article.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.article.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.article:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.article:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.article.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.article.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.article.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.article.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.article.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.article.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.article.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.article.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.article.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.article.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}
.article {
  padding-top: calc(clamp(120px, 120px + (200 - 120) * (100vw - 375px) / 1065, 200px) * var(--space-scale, 1));
}
.works + .article {
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
}

.articleInner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: calc(clamp(0px, 0px + (57.6 - 0) * (100vw - 375px) / 1065, 57.6px) * var(--space-scale, 1));
  row-gap: calc(clamp(38.4px, 38.4px + (57.6 - 38.4) * (100vw - 375px) / 1065, 57.6px) * var(--space-scale, 1));
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (120 - 16) * (100vw - 375px) / 1065, 120px);
  padding-right: clamp(16px, 16px + (120 - 16) * (100vw - 375px) / 1065, 120px);
}
@media (max-width: 767px) {
  .articleInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.articleInner {
  position: relative;
  z-index: 2;
}
.articleInner > *:first-child {
  margin-top: 0 !important;
}
.article.-works .articleInner {
  justify-content: center;
}

.articleBody {
  flex: 1 1 0;
  min-width: 0;
  max-width: 752px;
}
.articleBody > * {
  margin-top: calc(clamp(24px, 24px + (38.4 - 24) * (100vw - 375px) / 1065, 38.4px) * var(--space-scale, 1));
}
.articleBody > .articleBodyTtl {
  margin-top: calc(clamp(43.2px, 43.2px + (67.2 - 43.2) * (100vw - 375px) / 1065, 67.2px) * var(--space-scale, 1));
}
.articleBody > .breadcrumb {
  margin-top: 0;
}
.articleBody > .articleBodyWrap.-days {
  margin-top: clamp(14.4px, 14.4px + (19.2 - 14.4) * (100vw - 375px) / 1065, 19.2px);
}
.articleBody > .articleBodyTtl.-first {
  margin-top: clamp(19.2px, 19.2px + (28.8 - 19.2) * (100vw - 375px) / 1065, 28.8px);
}
.articleBody > .articleBodyList.-tag {
  margin-top: clamp(16.8px, 16.8px + (24 - 16.8) * (100vw - 375px) / 1065, 24px);
}
.articleBody > .articleBodyImg.-thumb {
  margin-top: calc(clamp(28.8px, 28.8px + (48 - 28.8) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1));
}
.articleBody > *:first-child {
  margin-top: 0 !important;
}
.articleBody.-cardSmoke, .articleBody.-cardBase {
  padding: calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1));
  border-radius: calc(clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
  max-width: calc(752px + calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * 2);
}
.articleBody.-cardSmoke {
  background-color: var(--color-smoke, #f5f5f5);
}
.articleBody.-cardBase {
  background-color: var(--color-bg, #fff);
}
@media (max-width: 1150px) {
  .articleBody {
    flex: none;
    width: 100%;
    max-width: none;
  }
  .articleBody.-cardSmoke, .articleBody.-cardBase {
    max-width: none;
  }
}

/*============================
見出し(H2〜H6)
・**H2は太い縦線＋下の罫線 / H3〜H6は行頭の丸**。縦線どうしだと形が似て階層が読めないので分ける
・H3〜H6は共通デザインで、大きさの差だけ基準pxで付ける
============================*/
.articleBodyTtl {
  width: 100%;
  line-height: 1.5;
  font-weight: 700;
  color: var(--on-text);
}
.articleBodyTtl.-first {
  line-height: 1.4;
  font-size: var(--article-h1-size);
}
.articleBodyTtl.-first, .articleBodyTtl.-second, .articleBodyTtl.-third, .articleBodyTtl.-fourth, .articleBodyTtl.-fifth, .articleBodyTtl.-sixth {
  color: var(--on-btn);
}
.articleBodyTtl.-second {
  padding-bottom: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
  padding-left: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  border-bottom: 1px solid var(--on-line);
  border-left: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid var(--on-btn);
  font-size: var(--article-h2-size);
}
.articleBodyTtl.-third, .articleBodyTtl.-fourth, .articleBodyTtl.-fifth, .articleBodyTtl.-sixth {
  position: relative;
  padding-left: 1.1em;
}
.articleBodyTtl.-third::before, .articleBodyTtl.-fourth::before, .articleBodyTtl.-fifth::before, .articleBodyTtl.-sixth::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background-color: var(--on-btn);
}
.articleBodyTtl.-third {
  font-size: var(--article-h3-size);
}
.articleBodyTtl.-fourth {
  font-size: var(--article-h4-size);
}
.articleBodyTtl.-fifth {
  font-size: var(--article-h5-size);
}
.articleBodyTtl.-sixth {
  font-size: var(--article-h6-size);
}
.articleBodyTtl.-banner {
  font-size: clamp(1.51rem, 15.1px + (18 - 15.1) * (100vw - 375px) / 1065, 1.8rem);
  line-height: 1.5;
  font-weight: 700;
}

/*============================
本文・引用・キャプション
・リッチエディタが吐くタグはクラスを持たないのでネストで当てる
・**normalizeのp / li / aを打ち消す**(pは固定サイズ、liはlist-style:none、aはinline-block)
============================*/
.articleBodyTxt {
  width: 100%;
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.9;
  color: var(--on-text);
}
.articleBodyTxt > *:first-child {
  margin-top: 0 !important;
}
.articleBodyTxt p {
  margin-top: 1.8em;
  font-size: inherit;
  line-height: inherit;
}
.articleBodyTxt ul,
.articleBodyTxt ol {
  margin-top: 1.8em;
  padding-left: 1.5em;
}
.articleBodyTxt li {
  margin-top: 0.6em;
  list-style: inherit;
}
.articleBodyTxt strong,
.articleBodyTxt b {
  font-weight: 700;
}
.articleBodyTxt a {
  display: inline;
  border-bottom: 1px solid currentColor;
  color: var(--on-btn);
}
.articleBodyTxt.-caption {
  margin-top: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  font-size: clamp(1.19rem, 11.9px + (13 - 11.9) * (100vw - 375px) / 1065, 1.3rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--on-text), transparent 40%);
}
.articleBodyTxt.-quote {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.9;
  color: color-mix(in srgb, var(--on-text), transparent 15%);
}
.articleBodyTxt.-cite {
  margin-top: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
  font-size: clamp(1.19rem, 11.9px + (13 - 11.9) * (100vw - 375px) / 1065, 1.3rem);
  line-height: 1.6;
  font-style: normal;
  color: color-mix(in srgb, var(--on-text), transparent 40%);
}
.articleBodyTxt.-name {
  font-size: clamp(1.19rem, 11.9px + (13 - 11.9) * (100vw - 375px) / 1065, 1.3rem);
  line-height: 1.4;
  font-weight: 700;
}
.articleBodyTxt.-chat {
  margin-top: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(14px, 14px + (20 - 14) * (100vw - 375px) / 1065, 20px);
  border-radius: calc(clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
  background-color: color-mix(in srgb, var(--on-text), transparent 94%);
}
.articleBodyTxt.-chat.-right {
  background-color: color-mix(in srgb, var(--on-btn), transparent 88%);
}
.articleBodyTxt.-btn {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
}
.articleBodyTxt.-banner {
  margin-top: clamp(4px, 4px + (6 - 4) * (100vw - 375px) / 1065, 6px);
  font-size: clamp(1.19rem, 11.9px + (13 - 11.9) * (100vw - 375px) / 1065, 1.3rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--on-text), transparent 30%);
}

/*============================
画像
・**幅は本文いっぱい、トリミングはしない**(normalizeのimgがcoverなので必ず上書き)。
　高さは元の比率のまま出るので、**縦長の画像を入れると縦に長くなる**
・アイキャッチだけは1枚絵としてOGPと同じ比率で切る
============================*/
.articleBodyImg {
  width: 100%;
  height: auto;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  object-fit: contain;
}
.articleBodyImg.-thumb {
  width: 100%;
  aspect-ratio: 1200/630;
  border-radius: calc(clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
  object-fit: cover;
}
.articleBodyImg.-chat {
  flex-shrink: 0;
  width: clamp(32px, 32px + (40 - 32) * (100vw - 375px) / 1065, 40px);
  height: clamp(32px, 32px + (40 - 32) * (100vw - 375px) / 1065, 40px);
  border-radius: 50%;
  object-fit: cover;
}
.articleBodyImg.-banner {
  flex-shrink: 0;
  width: clamp(110px, 110px + (160 - 110) * (100vw - 375px) / 1065, 160px);
  height: clamp(74px, 74px + (107 - 74) * (100vw - 375px) / 1065, 107px);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  object-fit: cover;
}

/*============================
ラッパー(ブロックごとの外枠)
============================*/
.articleBodyWrap {
  width: 100%;
}
.articleBodyWrap > *:first-child {
  margin-top: 0 !important;
}
.articleBodyWrap.-days {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  width: 100%;
  row-gap: clamp(4px, 4px + (4 - 4) * (100vw - 375px) / 1065, 4px);
  column-gap: clamp(14px, 14px + (20 - 14) * (100vw - 375px) / 1065, 20px);
  align-items: center;
  padding-bottom: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  border-bottom: 1px solid var(--on-line);
}
.articleBodyWrap.-img {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  overflow: visible;
}
.articleBodyWrap.-quote {
  padding-left: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  border-left: clamp(2px, 2px + (3 - 2) * (100vw - 375px) / 1065, 3px) solid var(--on-line);
}
.articleBodyWrap.-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: calc(clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
}
.articleBodyWrap.-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.articleBodyWrap.-btn, .articleBodyWrap.-back {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-direction: row;
}
.articleBodyWrap.-back {
  margin-top: calc(clamp(57.6px, 57.6px + (86.4 - 57.6) * (100vw - 375px) / 1065, 86.4px) * var(--space-scale, 1));
  padding-top: calc(clamp(28px, 28px + (40 - 28) * (100vw - 375px) / 1065, 40px) * var(--space-scale, 1));
  border-top: 1px solid var(--on-line);
  justify-content: center;
}
.articleBodyWrap.-who {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  width: auto;
}
.articleBodyWrap.-who.-right {
  flex-direction: row-reverse;
}
.articleBodyWrap.-banner, .articleBodyWrap.-info {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.articleBodyWrap.-banner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(12px, 12px + (20 - 12) * (100vw - 375px) / 1065, 20px);
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  border: 1px solid var(--on-line);
  border-radius: calc(clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
}
.articleBodyWrap.-info {
  min-width: 0;
}

/*============================
日付・分類
============================*/
.articleBodyTime {
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1.4;
  color: color-mix(in srgb, var(--on-text), transparent 40%);
}

.articleBodyList {
  width: 100%;
}
.articleBodyList.-tag {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  width: 100%;
  row-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  column-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  width: auto;
}
.articleBodyList.-chat {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  row-gap: clamp(19.2px, 19.2px + (28.8 - 19.2) * (100vw - 375px) / 1065, 28.8px);
}

.articleBodyItem.-left, .articleBodyItem.-right {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  max-width: 80%;
}
.articleBodyItem.-right {
  align-items: flex-end;
  margin-left: auto;
}
@media (max-width: 767px) {
  .articleBodyItem.-left, .articleBodyItem.-right {
    max-width: 100%;
  }
}

.articleBodyLink.-tag {
  padding: clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px) clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px);
  border: 1px solid var(--on-line);
  border-radius: calc(clamp(999px, 999px + (999 - 999) * (100vw - 375px) / 1065, 999px) * var(--radius-scale, 1));
  font-size: clamp(1.12rem, 11.2px + (12 - 11.2) * (100vw - 375px) / 1065, 1.2rem);
  line-height: 1.4;
  font-weight: 700;
  color: color-mix(in srgb, var(--on-text), transparent 25%);
}
.articleBodyLink.-cite {
  display: inline;
  border-bottom: 1px solid currentColor;
}
.articleBodyLink.-banner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(12px, 12px + (20 - 12) * (100vw - 375px) / 1065, 20px);
  width: 100%;
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  border: 1px solid var(--on-line);
  border-radius: calc(clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
  transition: border-color 0.3s ease;
}
.articleBodyLink.-banner:hover {
  opacity: 1;
  border-color: var(--on-btn);
}

.articleBodyBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
}
.articleBodyBtn.-btn1 {
  column-gap: clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border-radius: calc(clamp(999px, 999px + (999 - 999) * (100vw - 375px) / 1065, 999px) * var(--radius-scale, 1));
  background-color: color-mix(in srgb, var(--on-btn, var(--color-brand)), var(--on-bg, var(--color-bg)) 85%);
  color: var(--on-btn);
}
.articleBodyBtn.-btn2 {
  column-gap: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  color: var(--on-text);
  --btn-icon-bg: var(--on-btn);
  --btn-icon-fg: var(--on-bg);
}
.articleBodyBtn.-btn2:hover {
  opacity: 1;
  --btn-icon-shift: 1;
}
.articleBodyBtn.-btn3 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.articleBodyBtn.-btn4 {
  padding: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  border: 1px solid var(--on-btn);
  background-color: var(--on-btn);
  color: var(--on-bg);
}
.articleBodyBtn.-btn5 {
  padding: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) 0;
  border-bottom: 1px solid var(--on-btn);
  color: var(--on-btn);
}
.articleBodyBtn.-accent {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-bg);
}
.articleBodyBtn.-btn2.-accent {
  background-color: transparent;
  color: var(--on-text);
  --btn-icon-bg: var(--color-accent);
  --btn-icon-fg: var(--color-bg);
}
.articleBodyBtn.-btn5.-accent {
  border-color: var(--color-accent);
  background-color: transparent;
  color: var(--color-accent);
}

.articleBodyIcon {
  display: none;
  flex-shrink: 0;
}
.articleBodyIcon.-btn1 {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.articleBodyIcon.-btn2 {
  display: block;
  overflow: hidden;
  position: relative;
  width: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  height: clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px);
  border-radius: 50%;
  background-color: var(--btn-icon-bg, var(--on-btn));
}
.articleBodyIcon.-btn2::before, .articleBodyIcon.-btn2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(20px, 20px + (28 - 20) * (100vw - 375px) / 1065, 28px);
  height: clamp(10px, 10px + (14 - 10) * (100vw - 375px) / 1065, 14px);
  background-color: var(--btn-icon-fg, var(--on-bg));
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%3E%3Cpath%20d='M0%206h22.5'/%3E%3Cpath%20d='M17%201l5.5%205-5.5%205'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.articleBodyIcon.-btn2::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0)));
}
.articleBodyIcon.-btn2::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1)));
}
.articleBodyIcon.-btn1.-back, .articleBodyIcon.-btn3.-back, .articleBodyIcon.-btn4.-back, .articleBodyIcon.-btn5.-back {
  display: block;
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-bottom: clamp(4px, 4px + (5 - 4) * (100vw - 375px) / 1065, 5px) solid transparent;
  border-left: 0;
  border-right: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) solid currentColor;
}
.articleBodyIcon.-btn2.-back::after {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * var(--btn-icon-shift, 0) * -1)) scaleX(-1);
}
.articleBodyIcon.-btn2.-back::before {
  transform: translate(-50%, -50%) translateX(calc(clamp(60px, 60px + (80 - 60) * (100vw - 375px) / 1065, 80px) * (var(--btn-icon-shift, 0) - 1) * -1)) scaleX(-1);
}

/*============================
サイドバー
・PCは本文の横に固定幅、タブレット以下は本文の下に100%で入る
============================*/
.articleAside {
  width: clamp(280px, 280px + (320 - 280) * (100vw - 375px) / 1065, 320px);
  flex-shrink: 0;
}
.articleAside > *:first-child {
  margin-top: 0 !important;
}
.articleAside.-cardSmoke, .articleAside.-cardBase {
  padding: calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) 24px;
  border-radius: calc(clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px) * var(--radius-scale, 1));
}
.articleAside.-cardSmoke {
  background-color: var(--color-smoke, #f5f5f5);
}
.articleAside.-cardBase {
  background-color: var(--color-bg, #fff);
}
@media (max-width: 1150px) {
  .articleAside {
    width: 100%;
  }
}

.articleAsideTtl {
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-btn);
}

.articleAsideList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: clamp(14.4px, 14.4px + (19.2 - 14.4) * (100vw - 375px) / 1065, 19.2px);
  row-gap: clamp(14.4px, 14.4px + (19.2 - 14.4) * (100vw - 375px) / 1065, 19.2px);
  width: 100%;
}

.articleAsideItem {
  width: 100%;
}

.articleAsideLink {
  display: block;
  width: 100%;
}

.articleAsideImg {
  width: 100%;
  height: auto;
  border-radius: calc(clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px) * var(--radius-scale, 1));
  object-fit: contain;
}

.mypage {
  position: relative;
  padding-top: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  padding-bottom: calc(clamp(40px, 40px + (80 - 40) * (100vw - 375px) / 1065, 80px) * var(--space-scale, 1));
  width: 100%;
  --on-bg: var(--color-bg);
  --on-head-main: var(--head-main-color, var(--color-brand));
  --on-head-main-bg: var(--head-main-bg, transparent);
  --on-head-main-fill: var(--head-main-fill, 0);
  --on-head-sub: var(--head-sub-color, var(--color-text));
  --on-head-sub-bg: var(--head-sub-bg, transparent);
  --on-head-sub-fill: var(--head-sub-fill, 0);
  --on-text: var(--color-text);
  --on-btn: var(--color-brand);
  --on-line: color-mix(in srgb, var(--color-text), transparent 85%);
}
.mypage.-bgSmoke {
  --on-bg: var(--color-smoke, #f5f5f5);
}
.mypage.-bgText {
  --on-bg: var(--color-text);
  --on-head-main: var(--color-bg);
  --on-head-sub: var(--color-bg);
  --on-text: var(--color-bg);
  --on-btn: var(--color-bg);
  --on-line: color-mix(in srgb, var(--color-bg), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.mypage.-bgBrand {
  --on-bg: var(--color-brand);
  --on-head-main: var(--color-on-brand, var(--color-text));
  --on-head-sub: var(--color-on-brand, var(--color-text));
  --on-text: var(--color-on-brand, var(--color-text));
  --on-btn: var(--color-on-brand, var(--color-text));
  --on-line: color-mix(in srgb, var(--color-on-brand, var(--color-text)), transparent 70%);
  --on-head-main-bg: transparent;
  --on-head-sub-bg: transparent;
  --on-head-main-fill: 0;
  --on-head-sub-fill: 0;
}
.mypage.-bgSmoke::before, .mypage.-bgText::before, .mypage.-bgBrand::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--on-bg);
  z-index: 0;
}
.mypage.-shapeFull::before {
  top: 0;
  bottom: 0;
}
.mypage.-shapeHalfTop::before {
  top: 0;
  height: 50%;
}
.mypage.-shapeHalfBottom::before {
  bottom: 0;
  height: 50%;
}
.mypage.-shapeBandSlant {
  padding-top: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.mypage:last-child {
  padding-bottom: calc(clamp(80px, 80px + (160 - 80) * (100vw - 375px) / 1065, 160px) * var(--space-scale, 1));
}
.mypage:last-child.-shapeBandSlant {
  padding-bottom: calc(calc(clamp(35px, 35px + (50 - 35) * (100vw - 375px) / 1065, 50px) * var(--space-scale, 1)) * 2 + clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px));
}
.mypage.-shapeBandSlant::before {
  top: 0;
  bottom: 0;
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.mypage.-shapeBandSlant.-slantTopDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)), 0 100%);
}
.mypage.-shapeBandSlant.-slantBottomDown::before {
  clip-path: polygon(0 clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 0, 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.mypage.-shapeBandSlant.-slantTopDown.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px), 100% 100%, 0 calc(100% - clamp(24px, 24px + (64 - 24) * (100vw - 375px) / 1065, 64px)));
}
.mypage.-shapeBridgeTop::before {
  top: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  bottom: 0;
  clip-path: polygon(0 calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.mypage.-shapeBridgeTop.-slantTopDown::before {
  clip-path: polygon(0 0, 100% calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)), 100% 100%, 0 100%);
}
.mypage.-shapeBridgeBottom::before {
  top: 0;
  bottom: calc(calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1)) * -1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))), 0 100%);
  z-index: 1;
}
.mypage.-shapeBridgeBottom.-slantBottomDown::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - calc(clamp(24px, 24px + (48 - 24) * (100vw - 375px) / 1065, 48px) * var(--space-scale, 1))));
}
.mypage.-fadeTop::before {
  background-color: transparent;
  background-image: linear-gradient(to top, var(--on-bg) 65%, transparent);
}
.mypage.-fadeBottom::before {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--on-bg) 65%, transparent);
}

.mypageInner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  width: 100%;
  padding-left: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
  padding-right: clamp(16px, 16px + (160 - 16) * (100vw - 375px) / 1065, 160px);
}
@media (max-width: 767px) {
  .mypageInner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.mypageInner {
  position: relative;
  z-index: 2;
}
.mypageInner > *:first-child {
  margin-top: 0 !important;
}

.mypageBody {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}
.mypageBody > *:first-child {
  margin-top: 0 !important;
}
.mypageBody.-login {
  margin: 0 auto;
  max-width: clamp(480px, 480px + (480 - 480) * (100vw - 375px) / 1065, 480px);
}

.mypageBodyTxt {
  margin-top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  width: 100%;
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.8;
  color: var(--on-text);
}
.mypageBodyTxt.-btn {
  margin-top: 0;
  width: auto;
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1.4;
  font-weight: 700;
  color: inherit;
}
.mypageBodyTxt.-done {
  padding: clamp(12px, 12px + (14 - 12) * (100vw - 375px) / 1065, 14px) clamp(16px, 16px + (20 - 16) * (100vw - 375px) / 1065, 20px);
  border: 1px solid var(--on-line);
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  text-align: center;
}
.mypageBodyTxt.-note {
  margin-top: clamp(32px, 32px + (48 - 32) * (100vw - 375px) / 1065, 48px);
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1.7;
  color: color-mix(in srgb, var(--on-text), transparent 30%);
}

/*--------------------------------------------------------------
テキストのリンク（戻る・ログアウト・一覧の操作）
--------------------------------------------------------------*/
.mypageBodyLink {
  margin-top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1.5;
  color: var(--on-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: opacity 0.3s ease;
}
.mypageBodyLink:hover {
  opacity: 0.7;
}
.mypageBodyLink.-small {
  font-size: clamp(1.19rem, 11.9px + (13 - 11.9) * (100vw - 375px) / 1065, 1.3rem);
  line-height: 1.5;
}
.mypageBodyLink.-logout {
  margin-top: clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
}
.mypageBodyLink.-action {
  flex-shrink: 0;
  margin-top: 0;
  text-decoration: none;
}
.mypageBodyLink.-action:hover {
  text-decoration: underline;
}
.mypageBodyLink.-delete {
  appearance: none;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  color: var(--color-accent);
  cursor: pointer;
}
.mypageBodyLink.-back {
  margin-top: 0;
  text-decoration: none;
}
.mypageBodyLink.-back::before {
  content: "";
  display: inline-block;
  margin-right: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  width: clamp(5px, 5px + (6 - 5) * (100vw - 375px) / 1065, 6px);
  height: clamp(5px, 5px + (6 - 5) * (100vw - 375px) / 1065, 6px);
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
}
.mypageBodyLink.-back:hover {
  text-decoration: underline;
}

/*--------------------------------------------------------------
入口のメニュー（投稿タイプごとのカード）
--------------------------------------------------------------*/
.mypageBodyList {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
  row-gap: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  margin-top: clamp(24px, 24px + (32 - 24) * (100vw - 375px) / 1065, 32px);
  width: 100%;
}

.mypageBodyItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  padding: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px) clamp(16px, 16px + (32 - 16) * (100vw - 375px) / 1065, 32px);
  border-radius: calc(clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px) * var(--radius-scale, 1));
  background-color: color-mix(in srgb, var(--on-text) 4%, var(--on-bg));
}
@media (max-width: 767px) {
  .mypageBodyItem {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 12px;
    align-items: flex-start;
  }
}

.mypageBodyTtl {
  font-size: clamp(1.63rem, 16.3px + (20 - 16.3) * (100vw - 375px) / 1065, 2rem);
  line-height: 1.4;
  font-weight: 700;
  color: var(--on-text);
}
.mypageBodyTtl.-row {
  margin-top: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  font-weight: 700;
}

.mypageBodyBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(8px, 8px + (10 - 8) * (100vw - 375px) / 1065, 10px);
  padding: clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px) clamp(20px, 20px + (28 - 20) * (100vw - 375px) / 1065, 28px);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--on-text) 10%, var(--on-bg));
  color: var(--on-text);
}
.mypageBodyBtn::after {
  content: "";
  width: 0;
  height: 0;
  border-top: clamp(4px, 4px + (4 - 4) * (100vw - 375px) / 1065, 4px) solid transparent;
  border-bottom: clamp(4px, 4px + (4 - 4) * (100vw - 375px) / 1065, 4px) solid transparent;
  border-left: clamp(5px, 5px + (6 - 5) * (100vw - 375px) / 1065, 6px) solid currentColor;
}

/*--------------------------------------------------------------
投稿一覧（行）
--------------------------------------------------------------*/
.mypageBodyList.-rows {
  row-gap: 0;
}

.mypageBodyItem.-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  column-gap: clamp(12px, 12px + (24 - 12) * (100vw - 375px) / 1065, 24px);
  padding: clamp(12px, 12px + (20 - 12) * (100vw - 375px) / 1065, 20px) clamp(0px, 0px + (8 - 0) * (100vw - 375px) / 1065, 8px);
  border-radius: 0;
  background-color: transparent;
}
.mypageBodyItem.-row:not(:first-of-type) {
  border-top: 1px solid var(--on-line);
}
@media (max-width: 767px) {
  .mypageBodyItem.-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

.mypageBodyImg {
  flex-shrink: 0;
  overflow: hidden;
  width: clamp(80px, 80px + (120 - 80) * (100vw - 375px) / 1065, 120px);
  aspect-ratio: 3/2;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
}
.mypageBodyImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mypageBodyImg.-none {
  background-color: color-mix(in srgb, var(--on-text) 8%, var(--on-bg));
}

.mypageBodyWrap.-info {
  flex-grow: 1;
  min-width: 0;
}

.mypageBodyWrap.-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: clamp(8px, 8px + (12 - 8) * (100vw - 375px) / 1065, 12px);
  row-gap: 4px;
}

.mypageBodyTime {
  font-size: clamp(1.19rem, 11.9px + (13 - 11.9) * (100vw - 375px) / 1065, 1.3rem);
  line-height: 1.4;
  color: color-mix(in srgb, var(--on-text), transparent 30%);
}

.mypageBodyTag {
  flex-shrink: 0;
  padding: clamp(2px, 2px + (3 - 2) * (100vw - 375px) / 1065, 3px) clamp(8px, 8px + (10 - 8) * (100vw - 375px) / 1065, 10px);
  border-radius: calc(clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px) * var(--radius-scale, 1));
  background-color: var(--color-accent);
  font-size: clamp(1.12rem, 11.2px + (12 - 11.2) * (100vw - 375px) / 1065, 1.2rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-bg);
}
.mypageBodyTag.-tag {
  background-color: color-mix(in srgb, var(--on-text) 10%, var(--on-bg));
  color: var(--on-text);
  font-weight: 400;
}

.mypageBodyWrap.-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-shrink: 0;
  column-gap: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  margin-left: auto;
}
@media (max-width: 767px) {
  .mypageBodyWrap.-actions {
    margin-left: 0;
    width: 100%;
  }
}

.mypageBodyWrap.-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin-top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  width: 100%;
}

.mypageBodyWrap.-btns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-shrink: 0;
  column-gap: clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  flex-wrap: wrap;
  row-gap: 8px;
}

/*--------------------------------------------------------------
ログインフォーム(wp_login_form)
・WPが組むHTML(#loginform)なのでクラスは向こうの流儀。装飾は入力欄の見た目だけ揃える
--------------------------------------------------------------*/
.mypageBodyForm {
  margin-top: clamp(16px, 16px + (24 - 16) * (100vw - 375px) / 1065, 24px);
  width: 100%;
}
.mypageBodyForm.-delete {
  margin-top: 0;
  width: auto;
}
.mypageBodyForm p {
  margin-top: clamp(16px, 16px + (20 - 16) * (100vw - 375px) / 1065, 20px);
}
.mypageBodyForm p:first-of-type {
  margin-top: 0;
}
.mypageBodyForm label {
  display: block;
  font-size: clamp(1.32rem, 13.2px + (15 - 13.2) * (100vw - 375px) / 1065, 1.5rem);
  line-height: 1.5;
  font-weight: 700;
  color: var(--on-text);
}
.mypageBodyForm input[type=text],
.mypageBodyForm input[type=password] {
  margin-top: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  padding: clamp(12px, 12px + (14 - 12) * (100vw - 375px) / 1065, 14px) clamp(14px, 14px + (16 - 14) * (100vw - 375px) / 1065, 16px);
  width: 100%;
  border: none;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  background-color: var(--color-smoke, #f5f5f5);
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  color: var(--color-text);
  transition: box-shadow 0.3s ease;
}
.mypageBodyForm input[type=text]:focus,
.mypageBodyForm input[type=password]:focus {
  box-shadow: inset 0 0 0 1px var(--color-brand);
  outline: none;
}
@media (max-width: 767px) {
  .mypageBodyForm input[type=text],
  .mypageBodyForm input[type=password] {
    font-size: 1.6rem;
  }
}
.mypageBodyForm .login-submit input[type=submit] {
  appearance: none;
  -webkit-appearance: none;
  margin-top: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
  padding: clamp(12px, 12px + (14 - 12) * (100vw - 375px) / 1065, 14px) clamp(32px, 32px + (48 - 32) * (100vw - 375px) / 1065, 48px);
  width: 100%;
  border: none;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  background-color: var(--color-brand);
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
  color: var(--color-bg);
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.mypageBodyForm .login-submit input[type=submit]:hover {
  opacity: 0.7;
}

/*--------------------------------------------------------------
投稿フォーム(acf_form)
・ACF自前のCSSの上から、入力欄と送信ボタンだけテーマの見た目に寄せる
・フィールドの構造(.acf-field / .acf-label / .acf-input)には手を入れない
--------------------------------------------------------------*/
.mypageBodyForm.-acf .acf-form {
  font-size: 1.5rem;
  line-height: 1.7;
}
.mypageBodyForm.-acf .acf-form .acf-field {
  margin-top: clamp(20px, 20px + (32 - 20) * (100vw - 375px) / 1065, 32px);
  border: none;
  padding: 0;
}
.mypageBodyForm.-acf .acf-form .acf-label label {
  font-size: clamp(1.32rem, 13.2px + (15 - 13.2) * (100vw - 375px) / 1065, 1.5rem);
  line-height: 1.5;
  font-weight: 700;
  color: var(--on-text);
}
.mypageBodyForm.-acf .acf-form p.description {
  font-size: clamp(1.26rem, 12.6px + (14 - 12.6) * (100vw - 375px) / 1065, 1.4rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--on-text), transparent 30%);
}
.mypageBodyForm.-acf .acf-form .acf-checkbox-list {
  font-size: 1.5rem;
}
.mypageBodyForm.-acf .acf-form .acf-checkbox-list li {
  margin-top: clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px);
}
.mypageBodyForm.-acf .acf-form .acf-checkbox-list label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: clamp(26px, 26px + (30 - 26) * (100vw - 375px) / 1065, 30px);
  cursor: pointer;
}
.mypageBodyForm.-acf .acf-form .acf-checkbox-list input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mypageBodyForm.-acf .acf-form .acf-checkbox-list label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(18px, 18px + (20 - 18) * (100vw - 375px) / 1065, 20px);
  height: clamp(18px, 18px + (20 - 18) * (100vw - 375px) / 1065, 20px);
  border-radius: calc(clamp(3px, 3px + (4 - 3) * (100vw - 375px) / 1065, 4px) * var(--radius-scale, 1));
  background-color: var(--color-smoke, #f5f5f5);
  transform: translateY(-50%);
}
.mypageBodyForm.-acf .acf-form .acf-checkbox-list label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: clamp(6.3px, 6.3px + (7 - 6.3) * (100vw - 375px) / 1065, 7px);
  width: clamp(5.4px, 5.4px + (6 - 5.4) * (100vw - 375px) / 1065, 6px);
  height: clamp(10px, 10px + (11 - 10) * (100vw - 375px) / 1065, 11px);
  border-right: 2px solid var(--color-brand);
  border-bottom: 2px solid var(--color-brand);
  opacity: 0;
  transform: translateY(-65%) rotate(45deg);
  transition: opacity 0.2s ease;
}
.mypageBodyForm.-acf .acf-form .acf-checkbox-list label:has(input:checked)::after {
  opacity: 1;
}
.mypageBodyForm.-acf .acf-form .acf-checkbox-list label:has(input:focus-visible)::before {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.mypageBodyForm.-acf .acf-form .acf-flexible-content > .acf-actions {
  text-align: center;
}
.mypageBodyForm.-acf .acf-form .acf-flexible-content > .acf-actions .acf-button {
  display: block;
  padding: clamp(14px, 14px + (16 - 14) * (100vw - 375px) / 1065, 16px);
  width: 100%;
  border: none;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  text-shadow: none;
}
.mypageBodyForm.-acf .acf-form .no-value-message {
  padding: clamp(24px, 24px + (32 - 24) * (100vw - 375px) / 1065, 32px) clamp(12px, 12px + (16 - 12) * (100vw - 375px) / 1065, 16px);
  font-size: 1.4rem;
}
.mypageBodyForm.-acf .acf-form .acf-input input[type=text],
.mypageBodyForm.-acf .acf-form .acf-input input[type=url],
.mypageBodyForm.-acf .acf-form .acf-input input[type=number],
.mypageBodyForm.-acf .acf-form .acf-input textarea,
.mypageBodyForm.-acf .acf-form .acf-input select {
  padding: clamp(10px, 10px + (12 - 10) * (100vw - 375px) / 1065, 12px) clamp(14px, 14px + (16 - 14) * (100vw - 375px) / 1065, 16px);
  border: none;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  background-color: var(--color-smoke, #f5f5f5);
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.6;
  color: var(--color-text);
}
.mypageBodyForm.-acf .acf-form .acf-input input[type=text]:focus,
.mypageBodyForm.-acf .acf-form .acf-input input[type=url]:focus,
.mypageBodyForm.-acf .acf-form .acf-input input[type=number]:focus,
.mypageBodyForm.-acf .acf-form .acf-input textarea:focus,
.mypageBodyForm.-acf .acf-form .acf-input select:focus {
  box-shadow: inset 0 0 0 1px var(--color-brand);
  outline: none;
}
@media (max-width: 767px) {
  .mypageBodyForm.-acf .acf-form .acf-input input[type=text],
  .mypageBodyForm.-acf .acf-form .acf-input input[type=url],
  .mypageBodyForm.-acf .acf-form .acf-input input[type=number],
  .mypageBodyForm.-acf .acf-form .acf-input textarea,
  .mypageBodyForm.-acf .acf-form .acf-input select {
    font-size: 1.6rem;
  }
}
.mypageBodyForm.-acf .acf-form .acf-form-submit input[type=submit] {
  appearance: none;
  -webkit-appearance: none;
  padding: clamp(14px, 14px + (16 - 14) * (100vw - 375px) / 1065, 16px) clamp(40px, 40px + (64 - 40) * (100vw - 375px) / 1065, 64px);
  border: none;
  border-radius: calc(clamp(6px, 6px + (8 - 6) * (100vw - 375px) / 1065, 8px) * var(--radius-scale, 1));
  background-color: var(--color-brand);
  font-size: clamp(1.39rem, 13.9px + (16 - 13.9) * (100vw - 375px) / 1065, 1.6rem);
  line-height: 1.4;
  font-weight: 700;
  color: var(--color-bg);
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.mypageBodyForm.-acf .acf-form .acf-form-submit input[type=submit]:hover {
  opacity: 0.7;
}
.mypageBodyForm.-acf .acf-form .acf-form-submit {
  margin-top: clamp(24px, 24px + (40 - 24) * (100vw - 375px) / 1065, 40px);
  text-align: center;
}