@charset "UTF-8";
html {
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  -moz-tab-size: 4;
  tab-size: 4;
  word-break: normal;
}

*,
:after,
:before {
  background-repeat: no-repeat;
  box-sizing: inherit;
}

:after,
:before {
  text-decoration: inherit;
  vertical-align: inherit;
}

* {
  margin: 0;
  padding: 0;
}

hr {
  color: inherit;
  height: 0;
  overflow: visible;
}

details,
main {
  display: block;
}

summary {
  display: list-item;
}

small {
  font-size: 80%;
}

[hidden] {
  display: none;
}

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

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline-width: 0;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}

pre {
  font-size: 1em;
}

b,
strong {
  font-weight: bolder;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  border-color: inherit;
  text-indent: 0;
}

iframe {
  border-style: none;
}

input {
  border-radius: 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;
}

textarea {
  overflow: auto;
  resize: vertical;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
}

optgroup {
  font-weight: 700;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role=button],
[type=button],
[type=reset],
[type=submit],
button {
  cursor: pointer;
}

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

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

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

button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

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

select::-ms-value {
  color: currentColor;
}

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

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

[disabled] {
  cursor: default;
}

img {
  border-style: none;
}

progress {
  vertical-align: baseline;
}

[aria-busy=true] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled=true] {
  cursor: default;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

*:focus {
  outline: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 14.9333333333vw;
  /* 主要ブラウザ対応済み。Safari 16.4+ / Chrome 94+ / Firefox 97+ */
  scrollbar-gutter: stable;
  /* ページが短い場合でも溝をキープして vw の基準を固定化 */
}
@media (min-width: 768px) {
  html {
    scroll-padding-top: 9.765625vw;
  }
}
@media (min-width: 1200px) {
  html {
    scroll-padding-top: 8.275862069vw;
  }
}

/* イントロ完了 or スキップ時に auto に戻す */
html.intro-skip,
html.is-intro-done {
  scrollbar-gutter: auto;
}

body {
  background-color: #e1f6ff;
  color: #2d2d36;
  font-family: "Zen Maru Gothic", sans-serif;
  font-optical-sizing: auto;
  font-size: 3.7333333333vw;
  font-weight: 400;
  line-height: 2;
  overflow-x: hidden;
}
@media (min-width: 768px) {
  body {
    font-size: 1.8229166667vw;
  }
}
@media (min-width: 1200px) {
  body {
    font-size: 1.1034482759vw;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
}

a {
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

figure {
  margin: 0;
  margin-block: 0;
}

iframe {
  vertical-align: bottom;
  max-width: 100%;
}

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

th,
td {
  border-collapse: collapse;
}

/* 固定ヘッダー分のオフセットを CSS 側でも保険的に確保 */
:root {
  --anchor-offset: 80px;
}

@media (min-width: 768px) {
  :root {
    --anchor-offset: 96px;
  }
}
@media (min-width: 1024px) {
  :root {
    --anchor-offset: 112px;
  }
}
/* ブラウザ標準ジャンプ時に効く */
[id] {
  scroll-margin-top: var(--anchor-offset);
}

/* 横だけ切る（clip は hidden より副作用が少ない） */
.l-main,
.lowerDefaultSection,
.lowerSummarySection,
.lowerMore__outer,
.l-footer {
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  /* 影・filterの“にじみ”対策 */
}

/* 念のため：flex/grid 直下の縮まない問題を防ぐ */
.l-container,
.l-inner,
.lowerDefaultSection__inner {
  min-width: 0;
}

html.intro-boot .loading,
html.intro-boot .loadingObjectWrapper {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* メーター/ゲージも念のため */
html.intro-boot .loadingMeter,
html.intro-boot .loadingGauge {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* JSが無効な環境ではローディングUIを出さない（安全側） */
noscript .loading,
noscript .loadingObjectWrapper {
  display: none !important;
}

@media (max-width: 767px) {
  .u-invisibleSp {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .u-invisibleTb {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .u-invisiblePc {
    display: none !important;
  }
}

.u-invisibleOnlyTb {
  display: block !important;
}
@media (min-width: 768px) {
  .u-invisibleOnlyTb {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .u-invisibleOnlyTb {
    display: block !important;
  }
}

.u-block {
  display: block !important;
}

@media (max-width: 767px) {
  .u-blockSp {
    display: block !important;
  }
}

.u-blockOnlyPC {
  display: none !important;
}
@media (min-width: 768px) {
  .u-blockOnlyPC {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .u-blockOnlyPC {
    display: block !important;
  }
}

/* 置換（簡易） */
/* data URI 用の色エンコード（# / % / 空白 / 引用符）*/
/* =========================================================
   背景SVG（40×28）
   - 既定：矢印は mask で“穴あき”（親が透ける）
   - 矢印に色を渡した場合：上から塗り描画に切替
   @param $ellipse … 楕円の塗り（必須）
   @param $arrow   … 矢印（ヘッド+シャフト）まとめ色（nullで穴あき）
   @param $head    … ヘッド個別色（指定時は塗り描画）
   @param $shaft   … シャフト個別色（指定時は塗り描画）
   ※ rgba(...) / #hex / currentColor / none / transparent すべてOK
   ========================================================= */
/*------------------------
    使い方のサンプル
   ------------------------ *
/* 1) 既定：矢印は抜き（親が透ける） */
.iconA {
  width: 40px;
  height: 28px;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%234167e6' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}

/* 2) 矢印も表示（同色で塗る） */
.iconB {
  width: 40px;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><g transform='translate(0 0)'><ellipse cx='20' cy='14' rx='20' ry='14' fill='%234167e6'/><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='%23fff'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='%23fff'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}

/* 3) ヘッド/シャフトを個別色で塗る */
.iconC {
  width: 40px;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><g transform='translate(0 0)'><ellipse cx='20' cy='14' rx='20' ry='14' fill='%234167e6'/><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='%23fff'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='rgba(255,%20255,%20255,%200.85)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}

/** オプション取り出し（なければ既定値） */
/** box-shadow の第2引数（Yオフセット）だけ差し替える */
/** 面色と影（色だけでOK：Yは内部の vw 換算で端末ごとに） */
/** 矢印とポイント色を一括で上書き */
/** パディングだけ変更（py/pt/pb + pl/pr の局所上書き） */
.c-btn {
  --press-dy: 1.0666666667vw;
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: #2d2d36;
  background-color: #fff;
  text-decoration: none;
  cursor: pointer;
  border-radius: 9999px;
  font-size: 4.8vw;
  font-weight: 700;
  line-height: 1.4;
  padding-top: 3.8666666667vw;
  padding-bottom: 3.8666666667vw;
  padding-left: 12vw;
  padding-right: 20vw;
  box-shadow: 0 1.0666666667vw 0 #c2e6f8;
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.c-btn .is-point,
.c-btn .point,
.c-btn em,
.c-btn strong {
  color: #ff52c2;
  font-weight: 700;
  font-size: 6.1333333333vw;
}
.c-btn::after {
  content: "";
  position: absolute;
  right: 6.6666666667vw;
  top: 50%;
  width: 10.6666666667vw;
  height: calc(10.6666666667vw * 0.7);
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%23ff52c2' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.c-btn:hover, .c-btn:active, .c-btn.is-pressed {
  transform: translateY(var(--press-dy));
  box-shadow: none !important;
}
@media (min-width: 768px) {
  .c-btn {
    --press-dy: 0.5208333333vw;
    font-size: 2.0833333333vw;
    padding-top: 1.5625vw;
    padding-bottom: 1.5625vw;
    padding-left: 3.90625vw;
    padding-right: 8.59765625vw;
    box-shadow: 0 0.5208333333vw 0 #c2e6f8;
  }
  .c-btn .is-point,
  .c-btn .point,
  .c-btn em,
  .c-btn strong {
    font-size: 2.9947916667vw;
  }
  .c-btn::after {
    right: 2.5520833333vw;
    width: 4.0924479167vw;
    height: calc(4.0924479167vw * 0.7);
  }
}
@media (min-width: 1200px) {
  .c-btn {
    --press-dy: 0.3448275862vw;
    font-size: 1.5172413793vw;
    padding-top: 0.8275862069vw;
    padding-bottom: 0.8275862069vw;
    padding-left: 3.4482758621vw;
    padding-right: 6.2068965517vw;
    box-shadow: 0 0.3448275862vw 0 #c2e6f8;
  }
  .c-btn .is-point,
  .c-btn .point,
  .c-btn em,
  .c-btn strong {
    font-size: 2.0689655172vw;
  }
  .c-btn::after {
    right: 2.4137931034vw;
    width: 2.7586206897vw;
    height: calc(2.7586206897vw * 0.7);
  }
}
.c-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}
.c-btn--red .is-point,
.c-btn--red .point,
.c-btn--red em,
.c-btn--red strong {
  color: #e64141;
}
.c-btn--red::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%23e64141' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.c-btn--pink .is-point,
.c-btn--pink .point,
.c-btn--pink em,
.c-btn--pink strong {
  color: #ed47b4;
}
.c-btn--pink::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%23ed47b4' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.c-btn--purple .is-point,
.c-btn--purple .point,
.c-btn--purple em,
.c-btn--purple strong {
  color: #9c33ea;
}
.c-btn--purple::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%239c33ea' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.c-btn--blue .is-point,
.c-btn--blue .point,
.c-btn--blue em,
.c-btn--blue strong {
  color: #4167e6;
}
.c-btn--blue::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%234167e6' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.c-btn--cyan .is-point,
.c-btn--cyan .point,
.c-btn--cyan em,
.c-btn--cyan strong {
  color: #13b2d0;
}
.c-btn--cyan::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%2313b2d0' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.c-btn--green .is-point,
.c-btn--green .point,
.c-btn--green em,
.c-btn--green strong {
  color: #4ec439;
}
.c-btn--green::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%234ec439' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}

.c-btn--bgBlue {
  --press-dy: 1.0666666667vw;
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: #fff;
  background-color: #4f72d1;
  text-decoration: none;
  cursor: pointer;
  border-radius: 9999px;
  font-size: 4vw;
  font-weight: 700;
  line-height: 1.4;
  padding-top: 4vw;
  padding-bottom: 4vw;
  padding-left: 6.6666666667vw;
  padding-right: 14.328vw;
  box-shadow: 0 1.0666666667vw 0 #2447a8;
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.c-btn--bgBlue .is-point,
.c-btn--bgBlue .point,
.c-btn--bgBlue em,
.c-btn--bgBlue strong {
  color: #fff;
  font-weight: 700;
  font-size: 6.1333333333vw;
}
.c-btn--bgBlue::after {
  content: "";
  position: absolute;
  right: 4vw;
  top: 50%;
  width: 7.6613333333vw;
  height: calc(7.6613333333vw * 0.7);
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%23fff' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.c-btn--bgBlue:hover, .c-btn--bgBlue:active, .c-btn--bgBlue.is-pressed {
  transform: translateY(var(--press-dy));
  box-shadow: none !important;
}
@media (min-width: 768px) {
  .c-btn--bgBlue {
    --press-dy: 0.5208333333vw;
    font-size: 1.953125vw;
    padding-top: 1.8229166667vw;
    padding-bottom: 1.8229166667vw;
    padding-left: 3.2552083333vw;
    padding-right: 9.30078125vw;
    box-shadow: 0 0.5208333333vw 0 #2447a8;
  }
  .c-btn--bgBlue .is-point,
  .c-btn--bgBlue .point,
  .c-btn--bgBlue em,
  .c-btn--bgBlue strong {
    font-size: 2.9947916667vw;
  }
  .c-btn--bgBlue::after {
    right: 3.2552083333vw;
    width: 4.0924479167vw;
    height: calc(4.0924479167vw * 0.7);
  }
}
@media (min-width: 1200px) {
  .c-btn--bgBlue {
    --press-dy: 0.4137931034vw;
    font-size: 1.5172413793vw;
    padding-top: 1.2413793103vw;
    padding-bottom: 1.3793103448vw;
    padding-left: 2.724137931vw;
    padding-right: 5.8620689655vw;
    box-shadow: 0 0.4137931034vw 0 #2447a8;
  }
  .c-btn--bgBlue .is-point,
  .c-btn--bgBlue .point,
  .c-btn--bgBlue em,
  .c-btn--bgBlue strong {
    font-size: 2.0689655172vw;
  }
  .c-btn--bgBlue::after {
    right: 2.0689655172vw;
    width: 2.7586206897vw;
    height: calc(2.7586206897vw * 0.7);
  }
}
.c-btn--bgBlue:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.c-btn--bgBlueSmall {
  --press-dy: 1.0666666667vw;
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: #fff;
  background-color: #4f72d1;
  text-decoration: none;
  cursor: pointer;
  border-radius: 9999px;
  font-size: 3.2vw;
  font-weight: 700;
  line-height: 1.4;
  padding-top: 1.3333333333vw;
  padding-bottom: 1.3333333333vw;
  padding-left: 4.5333333333vw;
  padding-right: 12.2666666667vw;
  box-shadow: 0 1.0666666667vw 0 #2447a8;
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.c-btn--bgBlueSmall .is-point,
.c-btn--bgBlueSmall .point,
.c-btn--bgBlueSmall em,
.c-btn--bgBlueSmall strong {
  color: #fff;
  font-weight: 700;
  font-size: 6.1333333333vw;
}
.c-btn--bgBlueSmall::after {
  content: "";
  position: absolute;
  right: 3.4666666667vw;
  top: 50%;
  width: 6.1333333333vw;
  height: calc(6.1333333333vw * 0.7);
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%23fff' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.c-btn--bgBlueSmall:hover, .c-btn--bgBlueSmall:active, .c-btn--bgBlueSmall.is-pressed {
  transform: translateY(var(--press-dy));
  box-shadow: none !important;
}
@media (min-width: 768px) {
  .c-btn--bgBlueSmall {
    --press-dy: 0.5208333333vw;
    font-size: 1.6927083333vw;
    padding-top: 1.3671875vw;
    padding-bottom: 1.3671875vw;
    padding-left: 3.2552083333vw;
    padding-right: 8.7239583333vw;
    box-shadow: 0 0.5208333333vw 0 #2447a8;
  }
  .c-btn--bgBlueSmall .is-point,
  .c-btn--bgBlueSmall .point,
  .c-btn--bgBlueSmall em,
  .c-btn--bgBlueSmall strong {
    font-size: 2.9947916667vw;
  }
  .c-btn--bgBlueSmall::after {
    right: 2.6041666667vw;
    width: 4.1666666667vw;
    height: calc(4.1666666667vw * 0.7);
  }
}
@media (min-width: 1200px) {
  .c-btn--bgBlueSmall {
    --press-dy: 0.3448275862vw;
    font-size: 1.2413793103vw;
    padding-top: 1.2413793103vw;
    padding-bottom: 1.2413793103vw;
    padding-left: 2.7586206897vw;
    padding-right: 6.1379310345vw;
    box-shadow: 0 0.3448275862vw 0 #2447a8;
  }
  .c-btn--bgBlueSmall .is-point,
  .c-btn--bgBlueSmall .point,
  .c-btn--bgBlueSmall em,
  .c-btn--bgBlueSmall strong {
    font-size: 2.0689655172vw;
  }
  .c-btn--bgBlueSmall::after {
    right: 2.7586206897vw;
    width: 2.3448275862vw;
    height: calc(2.3448275862vw * 0.7);
  }
}
.c-btn--bgBlueSmall:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.c-btn--topSlider {
  --press-dy: 1.0666666667vw;
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: #fff;
  background-color: #4f72d1;
  text-decoration: none;
  cursor: pointer;
  border-radius: 9999px;
  font-size: 3.2vw;
  font-weight: 700;
  line-height: 1.4;
  padding-top: 1.0666666667vw;
  padding-bottom: 1.6vw;
  padding-left: 4.5333333333vw;
  padding-right: 12.9946666667vw;
  box-shadow: 0 1.0666666667vw 0 #2447a8;
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.c-btn--topSlider .is-point,
.c-btn--topSlider .point,
.c-btn--topSlider em,
.c-btn--topSlider strong {
  color: #fff;
  font-weight: 700;
  font-size: 6.1333333333vw;
}
.c-btn--topSlider::after {
  content: "";
  position: absolute;
  right: 4.2666666667vw;
  top: 50%;
  width: 6.0613333333vw;
  height: calc(6.0613333333vw * 0.7);
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%23fff' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.c-btn--topSlider:hover, .c-btn--topSlider:active, .c-btn--topSlider.is-pressed {
  transform: translateY(var(--press-dy));
  box-shadow: none !important;
}
@media (min-width: 768px) {
  .c-btn--topSlider {
    --press-dy: 0.5208333333vw;
    font-size: 2.0833333333vw;
    padding-top: 1.5625vw;
    padding-bottom: 1.5625vw;
    padding-left: 3.90625vw;
    padding-right: 8.59765625vw;
    box-shadow: 0 0.5208333333vw 0 #2447a8;
  }
  .c-btn--topSlider .is-point,
  .c-btn--topSlider .point,
  .c-btn--topSlider em,
  .c-btn--topSlider strong {
    font-size: 2.9947916667vw;
  }
  .c-btn--topSlider::after {
    right: 2.5520833333vw;
    width: 4.0924479167vw;
    height: calc(4.0924479167vw * 0.7);
  }
}
@media (min-width: 1200px) {
  .c-btn--topSlider {
    --press-dy: 0.3448275862vw;
    font-size: 1.5172413793vw;
    padding-top: 0.8275862069vw;
    padding-bottom: 0.8275862069vw;
    padding-left: 3.4482758621vw;
    padding-right: 6.2068965517vw;
    box-shadow: 0 0.3448275862vw 0 #2447a8;
  }
  .c-btn--topSlider .is-point,
  .c-btn--topSlider .point,
  .c-btn--topSlider em,
  .c-btn--topSlider strong {
    font-size: 2.0689655172vw;
  }
  .c-btn--topSlider::after {
    right: 2.4137931034vw;
    width: 2.7586206897vw;
    height: calc(2.7586206897vw * 0.7);
  }
}
.c-btn--topSlider:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.c-btn--nav {
  --press-dy: 1.0666666667vw;
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: #fff;
  background-color: #3e8ce6;
  text-decoration: none;
  cursor: pointer;
  border-radius: 9999px;
  font-size: 3.7333333333vw;
  font-weight: 700;
  line-height: 1.4;
  padding-top: 3.6vw;
  padding-bottom: 3.6vw;
  padding-left: 8vw;
  padding-right: 14.9333333333vw;
  box-shadow: 0 1.0666666667vw 0 #1566c3;
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.c-btn--nav .is-point,
.c-btn--nav .point,
.c-btn--nav em,
.c-btn--nav strong {
  color: #fff;
  font-weight: 700;
  font-size: 6.1333333333vw;
}
.c-btn--nav::after {
  content: "";
  position: absolute;
  right: 5.4666666667vw;
  top: 50%;
  width: 6.8vw;
  height: calc(6.8vw * 0.7);
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%23fff' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.c-btn--nav:hover, .c-btn--nav:active, .c-btn--nav.is-pressed {
  transform: translateY(var(--press-dy));
  box-shadow: none !important;
}
@media (min-width: 768px) {
  .c-btn--nav {
    --press-dy: 0.5208333333vw;
    font-size: 2.4739583333vw;
    padding-top: 1.953125vw;
    padding-bottom: 1.953125vw;
    padding-left: 5.46875vw;
    padding-right: 10.15625vw;
    box-shadow: 0 0.5208333333vw 0 #1566c3;
  }
  .c-btn--nav .is-point,
  .c-btn--nav .point,
  .c-btn--nav em,
  .c-btn--nav strong {
    font-size: 2.9947916667vw;
  }
  .c-btn--nav::after {
    right: 3.7760416667vw;
    width: 4.4270833333vw;
    height: calc(4.4270833333vw * 0.7);
  }
}
@media (min-width: 1200px) {
  .c-btn--nav {
    --press-dy: 0.3448275862vw;
    font-size: 1.3103448276vw;
    padding-top: 1.0344827586vw;
    padding-bottom: 1.0344827586vw;
    padding-left: 2.8965517241vw;
    padding-right: 5.4482758621vw;
    box-shadow: 0 0.3448275862vw 0 #1566c3;
  }
  .c-btn--nav .is-point,
  .c-btn--nav .point,
  .c-btn--nav em,
  .c-btn--nav strong {
    font-size: 2.0689655172vw;
  }
  .c-btn--nav::after {
    right: 2.0689655172vw;
    width: 2.3448275862vw;
    height: calc(2.3448275862vw * 0.7);
  }
}
.c-btn--nav:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.c-btn--navPale {
  background-color: #3dace6;
  box-shadow: 0 1.0666666667vw 0 #1a80b5;
}
@media (min-width: 768px) {
  .c-btn--navPale {
    box-shadow: 0 0.5208333333vw 0 #1a80b5;
  }
}
@media (min-width: 1200px) {
  .c-btn--navPale {
    box-shadow: 0 0.3448275862vw 0 #1a80b5;
  }
}

.c-btn--topTopics {
  min-height: 12.5333333333vw;
  line-height: 1.4782608696;
}
@media (min-width: 768px) {
  .c-btn--topTopics {
    min-height: 7.421875vw;
  }
}
@media (min-width: 1200px) {
  .c-btn--topTopics {
    min-height: 3.9310344828vw;
    line-height: 1.4666666667;
  }
}
.c-btn--topTopics {
  padding-top: 3.7333333333vw;
  padding-bottom: 4vw;
}
@media (min-width: 768px) {
  .c-btn--topTopics {
    padding-top: 1.3020833333vw;
    padding-bottom: 1.8229166667vw;
  }
}
@media (min-width: 1200px) {
  .c-btn--topTopics {
    padding-top: 0.6896551724vw;
    padding-bottom: 0.9655172414vw;
  }
}

.c-btn--topPlaySlider {
  --press-dy: 1.0666666667vw;
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: #fff;
  background-color: #fca212;
  text-decoration: none;
  cursor: pointer;
  border-radius: 9999px;
  font-size: 4.2666666667vw;
  font-weight: 700;
  line-height: 1.4;
  padding-top: 3.4666666667vw;
  padding-bottom: 3.4666666667vw;
  padding-left: 6.6666666667vw;
  padding-right: 16vw;
  box-shadow: 0 1.0666666667vw 0 #de8b06;
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.c-btn--topPlaySlider .is-point,
.c-btn--topPlaySlider .point,
.c-btn--topPlaySlider em,
.c-btn--topPlaySlider strong {
  color: #fff;
  font-weight: 700;
  font-size: 6.1333333333vw;
}
.c-btn--topPlaySlider::after {
  content: "";
  position: absolute;
  right: 5.6vw;
  top: 50%;
  width: 7.7333333333vw;
  height: calc(7.7333333333vw * 0.7);
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'><defs><mask id='cut' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='28'><rect x='0' y='0' width='40' height='28' fill='white'/><g><path d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z' transform='translate(31 9) rotate(90)' fill='black'/><rect width='15' height='3' rx='1.5' transform='translate(9 12.5)' fill='black'/></g></mask></defs><g><ellipse cx='20' cy='14' rx='20' ry='14' fill='%23fff' mask='url(%23cut)'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}
.c-btn--topPlaySlider:hover, .c-btn--topPlaySlider:active, .c-btn--topPlaySlider.is-pressed {
  transform: translateY(var(--press-dy));
  box-shadow: none !important;
}
@media (min-width: 768px) {
  .c-btn--topPlaySlider {
    --press-dy: 0.5208333333vw;
    font-size: 1.6927083333vw;
    padding-top: 1.8880208333vw;
    padding-bottom: 1.8880208333vw;
    padding-left: 3.2552083333vw;
    padding-right: 9.5052083333vw;
    box-shadow: 0 0.5208333333vw 0 #de8b06;
  }
  .c-btn--topPlaySlider .is-point,
  .c-btn--topPlaySlider .point,
  .c-btn--topPlaySlider em,
  .c-btn--topPlaySlider strong {
    font-size: 2.9947916667vw;
  }
  .c-btn--topPlaySlider::after {
    right: 3.2552083333vw;
    width: 4.296875vw;
    height: calc(4.296875vw * 0.7);
  }
}
@media (min-width: 1200px) {
  .c-btn--topPlaySlider {
    --press-dy: 0.3448275862vw;
    font-size: 1.5172413793vw;
    padding-top: 1.1034482759vw;
    padding-bottom: 1.1034482759vw;
    padding-left: 2.4827586207vw;
    padding-right: 5.8620689655vw;
    box-shadow: 0 0.3448275862vw 0 #de8b06;
  }
  .c-btn--topPlaySlider .is-point,
  .c-btn--topPlaySlider .point,
  .c-btn--topPlaySlider em,
  .c-btn--topPlaySlider strong {
    font-size: 2.0689655172vw;
  }
  .c-btn--topPlaySlider::after {
    right: 2.0689655172vw;
    width: 2.7586206897vw;
    height: calc(2.7586206897vw * 0.7);
  }
}
.c-btn--topPlaySlider:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.l-container {
  width: 100%;
  padding-inline: 5.3333333333vw;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .l-container {
    padding-inline: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .l-container {
    padding-inline: 4.4827586207vw;
  }
}

@media (min-width: 1200px) {
  .l-inner {
    padding-inline: 5.5172413793vw;
  }
}
@media (min-width: 768px) {
  .l-inner--tbNarrow {
    padding-inline: 4.5572916667vw;
  }
}

/* 置換（簡易） */
/* data URI用の色エンコード（# / % / 空白 / 引用符）*/
/* =========================================================
   cloud: 雲アイコン（背景画像）mixin
   @param $fill  … 塗り色（#hex / rgba(...) / currentColor など）
   @param $w-sp  … SPの横幅（デザインpx）
   @param $w-tb  … TBの横幅（省略時は $w-sp）
   @param $w-pc  … PCの横幅（省略時は $w-tb）
   * アスペクト比は 187.694 : 107.956 を固定
========================================================= */
/* =======================
   使用例
   ======================= */
.c-cloud {
  /* 0) デフォルトサイズ（SP/TB/PCすべて 187.694px 起点）、色そのまま */
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23a8e1f4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 50.0517333333vw;
  height: calc(50.0517333333vw * 0.5751702239);
  /* 1) rgba で半透明に（同一サイズ） */
  /* 2) 各ブレイクポイントでサイズ指定（SP160 / TB200 / PC260） */
  /* 3) SPだけ大きく、TB/PCはSPの値を継承（SP180 / TB=180 / PC=180） */
  /* 4) currentColor でテキスト色に追従（親で color 指定） */
  /* 5) めいっぱい大きいサイズ（PCだけワイド） */
}
@media (min-width: 768px) {
  .c-cloud {
    width: 24.4393229167vw;
    height: calc(24.4393229167vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .c-cloud {
    width: 12.9444137931vw;
    height: calc(12.9444137931vw * 0.5751702239);
  }
}
.c-cloud--tint {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='rgba(168,%20225,%20244,%200.6)'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 50.0517333333vw;
  height: calc(50.0517333333vw * 0.5751702239);
}
@media (min-width: 768px) {
  .c-cloud--tint {
    width: 24.4393229167vw;
    height: calc(24.4393229167vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .c-cloud--tint {
    width: 12.9444137931vw;
    height: calc(12.9444137931vw * 0.5751702239);
  }
}
.c-cloud--sizes {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23a8e1f4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 42.6666666667vw;
  height: calc(42.6666666667vw * 0.5751702239);
}
@media (min-width: 768px) {
  .c-cloud--sizes {
    width: 26.0416666667vw;
    height: calc(26.0416666667vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .c-cloud--sizes {
    width: 17.9310344828vw;
    height: calc(17.9310344828vw * 0.5751702239);
  }
}
.c-cloud--mobileHero {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23a8e1f4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 48vw;
  height: calc(48vw * 0.5751702239);
}
@media (min-width: 768px) {
  .c-cloud--mobileHero {
    width: 23.4375vw;
    height: calc(23.4375vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .c-cloud--mobileHero {
    width: 12.4137931034vw;
    height: calc(12.4137931034vw * 0.5751702239);
  }
}
.c-cloud--followText {
  color: #5bb9e6;
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='currentColor'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 40vw;
  height: calc(40vw * 0.5751702239);
}
@media (min-width: 768px) {
  .c-cloud--followText {
    width: 23.4375vw;
    height: calc(23.4375vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .c-cloud--followText {
    width: 15.1724137931vw;
    height: calc(15.1724137931vw * 0.5751702239);
  }
}
.c-cloud--xl {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23a8e1f4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 53.3333333333vw;
  height: calc(53.3333333333vw * 0.5751702239);
}
@media (min-width: 768px) {
  .c-cloud--xl {
    width: 31.25vw;
    height: calc(31.25vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .c-cloud--xl {
    width: 22.0689655172vw;
    height: calc(22.0689655172vw * 0.5751702239);
  }
}

.l-header {
  position: relative;
}
.l-header__inner {
  position: fixed;
  width: 100%;
  z-index: 9999;
  pointer-events: none; /* コンテンツのボタンがヘッダー下にきた時に押せるようheader自体を押せないようにする */
}
.l-header__companyLogo {
  line-height: 1;
  width: 61.0666666667vw;
  position: relative;
  transition: width 0.18s ease;
}
@media (min-width: 768px) {
  .l-header__companyLogo {
    width: 29.8177083333vw;
  }
}
@media (min-width: 1200px) {
  .l-header__companyLogo {
    width: 24.8275862069vw;
  }
}
.l-header__companyLogoCloud {
  filter: drop-shadow(0 0 18.6666666667vw rgba(142, 206, 240, 0.3));
}
@media (min-width: 768px) {
  .l-header__companyLogoCloud {
    filter: drop-shadow(0 0 9.1145833333vw rgba(142, 206, 240, 0.3));
  }
}
@media (min-width: 1200px) {
  .l-header__companyLogoCloud {
    filter: drop-shadow(0 0 4.8275862069vw rgba(142, 206, 240, 0.3));
  }
}
.l-header__companyLogoLink {
  display: block;
  padding-top: 4.2666666667vw;
  padding-left: 5.3333333333vw;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto; /* l-header__inner に pointer-events: none 設定のため、ロゴを押せるようにする */
}
@media (min-width: 768px) {
  .l-header__companyLogoLink {
    padding-top: 2.0833333333vw;
    padding-left: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .l-header__companyLogoLink {
    padding-top: 2.4137931034vw;
    padding-left: 2.4137931034vw;
  }
}
@media (hover: hover) {
  .l-header__companyLogoLink:hover {
    opacity: 0.7;
  }
}
.l-header__companyLogoImg {
  width: 34.9333333333vw;
  transition: width 0.18s ease;
}
@media (min-width: 768px) {
  .l-header__companyLogoImg {
    width: 17.0572916667vw;
  }
}
@media (min-width: 1200px) {
  .l-header__companyLogoImg {
    width: 13.8620689655vw;
  }
}
.l-header__groupLogo {
  line-height: 1;
  width: 20vw;
  position: absolute;
  right: 21.3333333333vw;
  top: 7.7333333333vw;
  z-index: 1;
}
@media (min-width: 768px) {
  .l-header__groupLogo {
    width: 9.765625vw;
    right: 12.7604166667vw;
    top: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .l-header__groupLogo {
    width: 9.5862068966vw;
    right: 10.4137931034vw;
    top: 2.6896551724vw;
  }
}

/* ---------------------------------------
  ドロワー
--------------------------------------- */
.l-headerDrawer {
  /* スクロールはここだけ */
  /* レイアウト用の内側。高さは親に揃える */
  /* 上部 */
  /* ナビ */
  /* 開いたとき（body にクラス） */
}
.l-headerDrawer {
  position: fixed;
  inset: 0;
  z-index: 8888;
  /* ヘッダー(9999)より下 */
  background: #e1f6ff;
  /* 実測vh。--vh が未設定なら 100dvh を使用 */
  height: calc(var(--vh, 1dvh) * 100);
  transform: translate3d(0, -105%, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease, visibility 0s linear 0.28s;
  overflow: hidden;
}
.l-headerDrawer__outer {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  /* Safari対策 */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.l-headerDrawer__inner {
  position: relative;
  min-height: 100%;
  /* 短いときは画面と同じ高さまで伸びる */
  padding-top: 17.3333333333vw;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .l-headerDrawer__inner {
    padding-top: 8.4635416667vw;
  }
}
@media (min-width: 1200px) {
  .l-headerDrawer__inner {
    padding-top: 10.9655172414vw;
    flex-direction: row;
    column-gap: 9.724137931vw;
    justify-content: center;
  }
}
.l-headerDrawer__inner::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: 22.4vw;
  margin-top: auto;
  /* 余白があれば最下端へ押し下げる */
  background-image: url("../img/common/nav_bg_sp.png");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .l-headerDrawer__inner::after {
    height: 20.8333333333vw;
    background-image: url("../img/common/nav_bg_tb.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .l-headerDrawer__inner::after {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 14.3448275862vw;
    background-image: url("../img/common/nav_bg_pc.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
.l-headerDrawer__top {
  width: fit-content;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
@media (min-width: 1200px) {
  .l-headerDrawer__top {
    padding-top: 1.3793103448vw;
    margin-inline: 0;
  }
}
.l-headerDrawer__top img {
  display: block;
  margin-inline: auto;
}
.l-headerDrawer__siteName {
  width: 64.5333333333vw;
  margin-bottom: 1.0666666667vw;
}
@media (min-width: 768px) {
  .l-headerDrawer__siteName {
    width: 58.59375vw;
    margin-bottom: 0.9114583333vw;
  }
}
@media (min-width: 1200px) {
  .l-headerDrawer__siteName {
    width: 31.0344827586vw;
    margin-bottom: 0.4827586207vw;
  }
}
.l-headerDrawer__siteCopy {
  width: 42.9333333333vw;
}
@media (min-width: 768px) {
  .l-headerDrawer__siteCopy {
    width: 39.0625vw;
  }
}
@media (min-width: 1200px) {
  .l-headerDrawer__siteCopy {
    width: 20.6896551724vw;
  }
}
.l-headerDrawer__bottom {
  padding-inline: 5.3333333333vw;
  margin-top: 11.2vw;
  margin-bottom: 8.5333333333vw;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .l-headerDrawer__bottom {
    padding-inline: 20.0520833333vw;
    margin-top: 8.4635416667vw;
    margin-bottom: 6.1197916667vw;
  }
}
@media (min-width: 1200px) {
  .l-headerDrawer__bottom {
    padding-inline: 0;
    margin-top: 0;
    width: 31.724137931vw;
  }
}
.l-headerDrawer__navList {
  display: flex;
  flex-direction: column;
  row-gap: 3.2vw;
}
@media (min-width: 768px) {
  .l-headerDrawer__navList {
    row-gap: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .l-headerDrawer__navList {
    row-gap: 1.3793103448vw;
  }
}
body.is-drawer-open .l-headerDrawer {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.28s ease, opacity 0.28s ease, visibility 0s;
}

/* ボディロック：overflow 方式（ヘッダーは見えたまま） */
html.is-drawer-open,
body.is-drawer-open {
  overflow: hidden;
  height: 100%;
}

/* 開いている間はヘッダーを“透過クリック”に（背面スクロール抑止の保険） */
.is-drawer-open .l-header__inner {
  pointer-events: none;
}

.is-drawer-open .l-header__btn {
  pointer-events: auto;
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .l-headerDrawer {
    transition: none !important;
  }
}
/* ---------------------------------------
  メニューOPEN時のスタイル（ラベルやロゴ調整）
--------------------------------------- */
body.is-drawer-open .l-header__companyLogo {
  width: 50.1333333333vw;
}
@media (min-width: 768px) {
  body.is-drawer-open .l-header__companyLogo {
    width: 29.8177083333vw;
  }
}
@media (min-width: 1200px) {
  body.is-drawer-open .l-header__companyLogo {
    width: 24.8275862069vw;
  }
}
body.is-drawer-open .l-header__companyLogoImg {
  width: 28.5333333333vw;
}
@media (min-width: 768px) {
  body.is-drawer-open .l-header__companyLogoImg {
    width: 17.0572916667vw;
  }
}
@media (min-width: 1200px) {
  body.is-drawer-open .l-header__companyLogoImg {
    width: 13.8620689655vw;
  }
}

/* ---------------------------------------
  装飾の雲
--------------------------------------- */
.l-headerCloud {
  position: absolute;
}
.l-headerCloud--01 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23fff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 16vw;
  height: calc(16vw * 0.5751702239);
}
@media (min-width: 768px) {
  .l-headerCloud--01 {
    width: 16.015625vw;
    height: calc(16.015625vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .l-headerCloud--01 {
    width: 12.3448275862vw;
    height: calc(12.3448275862vw * 0.5751702239);
  }
}
.l-headerCloud--01 {
  left: 0;
  top: 50.4vw;
  transform: translateX(-3.7333333333vw);
}
@media (min-width: 768px) {
  .l-headerCloud--01 {
    top: 50.6510416667vw;
    transform: translateX(-4.5572916667vw);
  }
}
@media (min-width: 1200px) {
  .l-headerCloud--01 {
    top: 26.9655172414vw;
    transform: translateX(-6.1379310345vw);
  }
}
.l-headerCloud--02 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23fff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 21.6vw;
  height: calc(21.6vw * 0.5751702239);
}
@media (min-width: 768px) {
  .l-headerCloud--02 {
    width: 21.7447916667vw;
    height: calc(21.7447916667vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .l-headerCloud--02 {
    width: 10.275862069vw;
    height: calc(10.275862069vw * 0.5751702239);
  }
}
.l-headerCloud--02 {
  right: 0;
  top: 24.2666666667vw;
  transform: translateX(5.8666666667vw);
}
@media (min-width: 768px) {
  .l-headerCloud--02 {
    top: 24.4791666667vw;
    transform: translateX(5.859375vw);
  }
}
@media (min-width: 1200px) {
  .l-headerCloud--02 {
    top: 6.0689655172vw;
    transform: translateX(-44.8965517241vw);
  }
}
.l-headerCloud--03 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23fff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 0vw;
  height: calc(0vw * 0.5751702239);
}
@media (min-width: 768px) {
  .l-headerCloud--03 {
    width: 16.015625vw;
    height: calc(16.015625vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .l-headerCloud--03 {
    width: 10.275862069vw;
    height: calc(10.275862069vw * 0.5751702239);
  }
}
.l-headerCloud--03 {
  display: none;
  right: 0;
}
@media (min-width: 768px) {
  .l-headerCloud--03 {
    display: block;
    top: 70.4427083333vw;
    transform: translateX(-10.2864583333vw);
  }
}
@media (min-width: 1200px) {
  .l-headerCloud--03 {
    top: 19.7931034483vw;
    transform: translateX(4.6206896552vw);
  }
}
.l-headerCloud--04 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23fff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 0vw;
  height: calc(0vw * 0.5751702239);
}
@media (min-width: 768px) {
  .l-headerCloud--04 {
    width: 16.015625vw;
    height: calc(16.015625vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .l-headerCloud--04 {
    width: 8.0689655172vw;
    height: calc(8.0689655172vw * 0.5751702239);
  }
}
.l-headerCloud--04 {
  display: none;
  right: 0;
}
@media (min-width: 768px) {
  .l-headerCloud--04 {
    display: block;
    top: 98.3072916667vw;
    transform: translateX(7.1614583333vw);
  }
}
@media (min-width: 1200px) {
  .l-headerCloud--04 {
    top: unset;
    bottom: 9.724137931vw;
    transform: translateX(-35.2413793103vw);
  }
}

/* ---------------------------------------
  ボタンのスタイル
  - SP: btn 46.8×32.5 / bar 15.6 / gap 5
  - TB: btn 57.66×40  / bar 19.2 / gap 5 / label 7px
  - PC: btn 80×55.5   / bar 26.6 / gap 7 / label 11px
  - ラベル: Bold, letter-spacing .05em（TB/PCのみ表示）
  - シャドー: SP,Y=4 / TB,Y=4 / PC,Y=5
  - open時: 中央バーは透明化、上下バーを±30degでクロス
--------------------------------------- */
.l-header {
  /* ===== TB ===== */
  /* ===== PC ===== */
}
.l-header__btn {
  --press-dy: calc(0.2666666667vw + 0.2666666667vw);
  position: absolute;
  right: 5.3333333333vw;
  top: 5.3333333333vw;
  width: 12.48vw;
  height: 8.6666666667vw;
  border-radius: 50%;
  border: 0;
  background: #38a067;
  color: #fff;
  box-shadow: 0 0.5333333333vw 0 #1a8952;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  transform: translateY(0);
  pointer-events: auto; /* l-header__inner に pointer-events: none 設定のため、ボタンを押せるようにする */
  /* ------ 3本線（absolute不使用・grid重ね） ------ */
  --bar-w: 4.16vw;
  --bar-h: 0.4vw;
  --gap: 1.3333333333vw;
}
.l-header__btn:hover, .l-header__btn:active, .l-header__btn.is-pressed {
  transform: translateY(var(--press-dy));
  box-shadow: none !important;
  background-color: rgb(54.88, 156.8, 100.94);
}
.l-header__btn .l-header__btnBars {
  display: grid;
  place-items: center;
  width: var(--bar-w);
  height: calc(var(--bar-h) + 2 * var(--gap));
}
.l-header__btn .l-header__bar {
  grid-area: 1/1;
  width: 100%;
  height: var(--bar-h);
  background: #fff;
  border-radius: calc(var(--bar-h) / 2);
  will-change: transform, opacity;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.l-header__btn .l-header__bar--top {
  transform: translateY(calc(-1 * var(--gap)));
}
.l-header__btn .l-header__bar--mid {
  transform: translateY(0);
}
.l-header__btn .l-header__bar--bot {
  transform: translateY(var(--gap));
}
.l-header__btn .l-header__btnLabel {
  display: none;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}
.l-header__btn.is-open .l-header__bar--mid, .l-header__btn[aria-expanded=true] .l-header__bar--mid, .l-header__btn[aria-pressed=true] .l-header__bar--mid {
  opacity: 0;
}
.l-header__btn.is-open .l-header__bar--top, .l-header__btn[aria-expanded=true] .l-header__bar--top, .l-header__btn[aria-pressed=true] .l-header__bar--top {
  transform: translateY(0) rotate(30deg);
}
.l-header__btn.is-open .l-header__bar--bot, .l-header__btn[aria-expanded=true] .l-header__bar--bot, .l-header__btn[aria-pressed=true] .l-header__bar--bot {
  transform: translateY(0) rotate(calc(-1 * 30deg));
}
@media (min-width: 768px) {
  .l-header__btn {
    --press-dy: calc(0.1302083333vw + 0.1302083333vw);
    right: 2.6041666667vw;
    top: 1.953125vw;
    width: 7.5078125vw;
    height: 5.2083333333vw;
    box-shadow: 0 0.2604166667vw 0 #1a8952;
    gap: 0.5208333333vw;
    --bar-w: 2.5vw;
    --bar-h: 0.1953125vw;
    --gap: 0.6510416667vw;
  }
  .l-header__btn .l-header__btnLabel {
    display: block;
    font-size: 0.9114583333vw;
  }
}
@media (min-width: 1200px) {
  .l-header__btn {
    --press-dy: calc(0.1379310345vw + 0.0689655172vw);
    right: 2.0689655172vw;
    top: 1.8620689655vw;
    width: 5.5172413793vw;
    height: 3.8275862069vw;
    box-shadow: 0 0.2068965517vw 0 #1a8952;
    gap: 0.4137931034vw;
    --bar-w: 1.8344827586vw;
    --bar-h: 0.1034482759vw;
    --gap: 0.4827586207vw;
  }
  .l-header__btn .l-header__btnLabel {
    display: block;
    font-size: 0.7586206897vw;
  }
}

.l-footer {
  background-color: #69d38e;
  position: relative;
}
.l-footer::before {
  content: "";
  width: 100%;
  height: 35.2vw;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * 35.2vw + 1px);
  pointer-events: none;
  background-image: url("../img/common/footer_bg_top_sp.png");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .l-footer::before {
    height: 20.5729166667vw;
    background-image: url("../img/common/footer_bg_top_tb.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    top: calc(-1 * 20.5729166667vw + 1px);
  }
}
@media (min-width: 1200px) {
  .l-footer::before {
    height: 20.5517241379vw;
    background-image: url("../img/common/footer_bg_top_pc.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    top: calc(-1 * 20.5517241379vw + 1px);
  }
}
.l-footer::after {
  content: "";
  display: block;
  width: 100%;
  height: 208vw;
  background-image: url("../img/common/footer_bg_bottom_sp.png");
  background-size: auto 120%;
  background-position: calc(100% - -26.6666666667vw) top;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
@media (min-width: 768px) {
  .l-footer::after {
    height: 72.265625vw;
    background-image: url("../img/common/footer_bg_bottom_tb.png");
    background-size: auto 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .l-footer::after {
    height: 46vw;
    background-image: url("../img/common/footer_bg_bottom_pc.png");
    background-size: auto 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
  }
}
.l-footer__outer {
  padding-inline: 5.3333333333vw;
  padding-top: 17.8666666667vw;
  padding-bottom: 13.0666666667vw;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .l-footer__outer {
    padding-inline: 3.90625vw;
    padding-top: 8.984375vw;
    padding-bottom: 7.8125vw;
  }
}
@media (min-width: 1200px) {
  .l-footer__outer {
    padding-inline: 4.4827586207vw;
    padding-top: 6.8965517241vw;
    padding-bottom: 5.1034482759vw;
  }
}
.l-footer__inner {
  background-color: #fff;
  border-radius: 8vw;
  padding-top: 10.9333333333vw;
  padding-bottom: 12.2666666667vw;
  padding-inline: 8vw;
}
@media (min-width: 768px) {
  .l-footer__inner {
    border-radius: 5.2083333333vw;
    padding-block: 6.5104166667vw;
    padding-inline: 4.5572916667vw;
  }
}
@media (min-width: 1200px) {
  .l-footer__inner {
    border-radius: 3.4482758621vw;
    padding-top: 5.5172413793vw;
    padding-bottom: 4.8275862069vw;
    padding-inline: 6.2068965517vw;
  }
}
.l-footer__logo {
  display: inline-block;
  width: 48.2666666667vw;
  margin-bottom: 9.3333333333vw;
}
@media (min-width: 768px) {
  .l-footer__logo {
    width: 26.0416666667vw;
    margin-bottom: 5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .l-footer__logo {
    margin-bottom: 3.6551724138vw;
    width: 17.2413793103vw;
  }
}
@media (hover: hover) {
  .l-footer__logo:hover {
    opacity: 0.7;
  }
}
.l-footer__nav {
  margin-bottom: 15.4666666667vw;
}
@media (min-width: 768px) {
  .l-footer__nav {
    margin-bottom: 5.2083333333vw;
    width: 63.8020833333vw;
  }
}
@media (min-width: 1200px) {
  .l-footer__nav {
    margin-bottom: 3.1034482759vw;
    width: 62.0689655172vw;
  }
}
.l-footer__navList {
  display: flex;
  flex-direction: column;
  row-gap: 6.6666666667vw;
}
@media (min-width: 768px) {
  .l-footer__navList {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 4.5572916667vw;
    row-gap: 3.2552083333vw;
  }
}
@media (min-width: 1200px) {
  .l-footer__navList {
    column-gap: 2.4137931034vw;
    row-gap: 1.724137931vw;
  }
}
.l-footer__navLink {
  display: flex;
  align-items: center;
  column-gap: 1.8666666667vw;
  font-size: 4vw;
  font-weight: 700;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .l-footer__navLink {
    column-gap: 0.9114583333vw;
    font-size: 1.6927083333vw;
    line-height: 1.4615384615;
  }
}
@media (min-width: 1200px) {
  .l-footer__navLink {
    column-gap: 0.4827586207vw;
    font-size: 1.1034482759vw;
    line-height: 1.5;
  }
}
@media (hover: hover) {
  .l-footer__navLink:hover {
    color: #38a067;
  }
}
.l-footer__navLink::before {
  content: "";
  display: block;
  width: 3.2vw;
  height: 2.4vw;
  border-radius: 50%;
  background-color: #38a067;
}
@media (min-width: 768px) {
  .l-footer__navLink::before {
    width: 1.3020833333vw;
    height: 0.9114583333vw;
  }
}
@media (min-width: 1200px) {
  .l-footer__navLink::before {
    width: 0.8275862069vw;
    height: 0.6206896552vw;
  }
}
.l-footer__sns {
  padding-bottom: 12.8vw;
  border-bottom: 0.2666666667vw solid #38a067;
  position: relative;
  margin-bottom: 6.9333333333vw;
}
@media (min-width: 768px) {
  .l-footer__sns {
    padding-bottom: 4.6875vw;
    border-bottom-width: 0.1302083333vw;
    margin-bottom: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .l-footer__sns {
    padding-bottom: 3.7931034483vw;
    border-bottom-width: 0.0689655172vw;
    margin-bottom: 1.3793103448vw;
  }
}
.l-footer__sns::after {
  content: "";
  display: block;
  width: 24.5333333333vw;
  aspect-ratio: 92/99;
  background-image: url("../img/common/footer_it-chan.png");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  right: 0;
}
@media (min-width: 768px) {
  .l-footer__sns::after {
    width: 15.3645833333vw;
  }
}
@media (min-width: 1200px) {
  .l-footer__sns::after {
    width: 10vw;
    right: 1.6551724138vw;
  }
}
.l-footer__snsList {
  display: flex;
  align-items: center;
  column-gap: 6.6666666667vw;
}
@media (min-width: 768px) {
  .l-footer__snsList {
    column-gap: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .l-footer__snsList {
    column-gap: 1.3793103448vw;
  }
}
.l-footer__snsLink {
  display: block;
}
.l-footer__snsLink--yt {
  width: 12vw;
}
@media (min-width: 768px) {
  .l-footer__snsLink--yt {
    width: 4.8177083333vw;
  }
}
@media (min-width: 1200px) {
  .l-footer__snsLink--yt {
    width: 3.1034482759vw;
  }
}
.l-footer__snsLink--x {
  width: 8.2666666667vw;
}
@media (min-width: 768px) {
  .l-footer__snsLink--x {
    width: 3.2552083333vw;
  }
}
@media (min-width: 1200px) {
  .l-footer__snsLink--x {
    width: 2.1379310345vw;
  }
}
@media (hover: hover) {
  .l-footer__snsLink:hover {
    transform: scale(1.1);
    transform-origin: left bottom;
    transition: transform 0.2s ease;
  }
}
@media (min-width: 768px) {
  .l-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.l-footer__bottomLinkWrapper {
  display: flex;
  flex-direction: column;
  row-gap: 2.6666666667vw;
  margin-bottom: 5.3333333333vw;
}
@media (min-width: 768px) {
  .l-footer__bottomLinkWrapper {
    flex-direction: row;
    column-gap: 2.6041666667vw;
    margin-bottom: 0;
  }
}
@media (min-width: 1200px) {
  .l-footer__bottomLinkWrapper {
    column-gap: 1.3793103448vw;
  }
}
.l-footer__bottomLink {
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-size: 3.4666666667vw;
  font-weight: 500;
  line-height: 1.4615384615;
}
@media (min-width: 768px) {
  .l-footer__bottomLink {
    font-size: 1.4322916667vw;
    line-height: 1.4545454545;
  }
}
@media (min-width: 1200px) {
  .l-footer__bottomLink {
    font-size: 0.9655172414vw;
    line-height: 1.4285714286;
  }
}
@media (hover: hover) {
  .l-footer__bottomLink:hover {
    color: #38a067;
  }
}
.l-footer__copyright {
  display: block;
  text-align: center;
  font-size: 2.6666666667vw;
  font-weight: 500;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .l-footer__copyright {
    text-align: right;
    font-size: 1.4322916667vw;
    line-height: 1.4545454545;
  }
}
@media (min-width: 1200px) {
  .l-footer__copyright {
    font-size: 0.9655172414vw;
    line-height: 1.4285714286;
  }
}

.l-main {
  padding-bottom: 35.4666666667vw;
}
@media (min-width: 768px) {
  .l-main {
    padding-bottom: 20.703125vw;
  }
}
@media (min-width: 1200px) {
  .l-main {
    padding-bottom: 20.6206896552vw;
  }
}

.is-intro-lock {
  overflow: hidden;
}

/* =========================================================
 * 基本方針
 *  - ランタイムで変えたい値: CSS var (--xxx)
 *  - 既定値/共通定義       : SCSS 変数/マップ
 *  - 変数は必要なコンポーネントスコープに限定
 * ======================================================= */
/* ------------------------------
 * 共通の既定値（SCSS）
 * ------------------------------ */
/* CSS変数を使う時にフォールバックを付けたい箇所用ヘルパ */
/* =========================================================
 * Loading（100vhマスク・退場は --tSync）
 * ======================================================= */
.loading {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background-color: #e1f6ff;
  z-index: 500;
  opacity: 1;
  visibility: visible;
  animation-fill-mode: both;
  will-change: opacity;
  contain: paint;
  /* レイヤー内に塗りを閉じ込める */
  isolation: isolate;
  /* 背景合成の影響を受けにくくする */
  transform: translateZ(0);
  /* GPU プロモートの後押し（保険） */
  /* 念のためブレンドを固定 */
  mix-blend-mode: normal;
  /* tSync で退場（必要なら --tSyncOffset をJSで調整可） */
  animation: fadeOut 2s linear var(--tSync) forwards;
}
.loading__inner {
  width: 100%;
  height: 100%;
}
.loading__ellipse {
  width: 68vw;
  position: absolute;
  top: 36.8vw;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .loading__ellipse {
    width: 37.2395833333vw;
    top: 13.0208333333vw;
  }
}
@media (min-width: 1200px) {
  .loading__ellipse {
    width: 32.0689655172vw;
    top: 8.6206896552vw;
  }
}

/* ローディング楕円も同時に退場 */
.loading__ellipse {
  animation: fadeOut 2s linear var(--tSync) forwards;
}

/* =========================================================
 * KV（このブロック内でCSS変数を管理）
 *  - JSで上書きしたい値のみCSS変数として公開
 * ======================================================= */
.topKv,
.topLead,
.loadingObjectWrapper,
.l-header {
  /* ---- 時間系（JSが必要に応じて上書き） ---- */
  --loadDur: 6s;
  /* 同期系（集合合図） */
  --tSyncOffset: 0s;
  --tSync: calc(var(--loadDur) + var(--tSyncOffset));
  /* グループ別オフセット */
  --syncNameOffset: 0s;
  --syncEllipseOffset: -0.3s;
  /* 楕円は少し早め */
  --syncEarlyP2Offset: 0s;
  --syncLateOffset: 0s;
  /* 実効ディレイ */
  --nameDelay: calc(var(--tSync) + var(--syncNameOffset));
  --ellipseDelay: calc(var(--tSync) + var(--syncEllipseOffset));
  --earlyDelay: calc(var(--tSync) + var(--syncEarlyP2Offset));
  --lateDelay: calc(var(--tSync) + var(--syncLateOffset));
  /* 早発フェーズ時間（P1:0→30% / P2:30%→100%） */
  --earlyLead: 4s;
  /* P1開始遅延 */
  --earlyP1Dur: calc(var(--loadDur) - var(--earlyLead));
  --earlyP2Dur: 5.5s;
  /* イージング（必要ならJSで差し替え） */
  --p1-ease-default: cubic-bezier(0.2, 0.3, 0.2, 1);
  --p2-ease-default: cubic-bezier(0.16, 0.84, 0.24, 1);
  /* 入場時間 */
  --kvInDur: 1.3s;
  --kvCopyDur: 1s;
  /* バウンス */
  --bounceDur: 2s;
  --bounceY: -1.3333333333vw;
  --bounceOffset: 0s;
}

/* アクセシビリティ：低モーション環境ではアニメ除去 */
.is-intro-lock body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .loading,
  .topKv * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* =========================================================
 * Keyframes（最低限）
 * ======================================================= */
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
@keyframes fadeInOnly {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes kvScaleOnly {
  from {
    transform: scale(var(--ms, 1));
  }
  to {
    transform: scale(1);
  }
}
@keyframes maskLoadingSlide {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  98% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes kvInTS {
  0% {
    opacity: 0;
    transform: translate3d(var(--mxStart, 0), var(--myStart, 0), 0) scale(var(--msStart, 1));
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
/* 位置（X/Y）とスケールを指定してフェードアウト */
@keyframes kvOutTS {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: var(--opEnd, 0);
    transform: translate3d(var(--mxEnd, 0), var(--myEnd, 0), 0) scale(var(--msEnd, 1));
    visibility: hidden;
    /* 退場後はクリック不能にしたいとき */
  }
}
@keyframes kvEarlyP1 {
  0% {
    opacity: 0;
    transform: translate3d(var(--mxStart, 0), var(--myStart, 0), 0);
  }
  30% {
    opacity: 1;
    transform: translate3d(var(--mxMid, 0), var(--myMid, 0), 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(var(--mxMid, 0), var(--myMid, 0), 0);
  }
}
@keyframes kvEarlyP2 {
  0% {
    opacity: 1;
    transform: translate3d(var(--mxMid, 0), var(--myMid, 0), 0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
/* =========================================================
 * 基本スタイル（初期不可視・GPUヒント）
 * ======================================================= */
.topKv__modifierImg,
.topKv__cloudImg {
  opacity: 0;
  will-change: transform, opacity;
  animation-play-state: running !important;
}

/* マスクは --loadDur で下へ（topKv スコープの変数を参照） */
.topKv__nameMaskImg {
  animation: maskLoadingSlide var(--loadDur) linear 0s forwards;
}

/* =========================================================
 * 楕円／name／copy（入場）
 * ======================================================= */
.topKv__ellipse::before {
  --mxStart: 0;
  --myStart: 13.3333333333vw;
  --msStart: 1;
  animation: kvInTS var(--kvInDur) linear var(--ellipseDelay) both;
}
@media (min-width: 768px) {
  .topKv__ellipse::before {
    --myStart: 19.53125vw;
  }
}
@media (min-width: 1200px) {
  .topKv__ellipse::before {
    --myStart: 15.1724137931vw;
  }
}

.topKv__name {
  --ms: 0.81;
  /* 初期 scale をレイアウトに合わせる */
  animation: kvScaleOnly var(--kvInDur) linear var(--nameDelay) both;
}
@media (min-width: 768px) {
  .topKv__name {
    --ms: 0.57;
  }
}
@media (min-width: 1200px) {
  .topKv__name {
    --ms: 0.57;
  }
}

.topKv__copy {
  animation: fadeInOnly var(--kvCopyDur) linear calc(var(--tSync) + 0.5s) both;
}

@media (min-width: 768px) {
  .is-intro-done .topKv__itchanImg {
    --mxEnd: 26.0416666667vw;
    --myEnd: 200%;
    --opEnd: 1;
    animation: kvOutTS 4s linear both;
  }
}
@media (min-width: 1200px) {
  .is-intro-done .topKv__itchanImg {
    --mxEnd: 24.1379310345vw;
  }
}

/* =========================================================
 * KV下のオレンジエリア（入場）
 * ======================================================= */
.topLead__cloudImg {
  --mxStart: 0;
  --myStart: 100%;
  --msStart: 1.3;
  animation: kvInTS var(--kvInDur) linear calc(var(--ellipseDelay) + 0.5s) both;
}
@media (min-width: 768px) {
  .topLead__cloudImg {
    --myStart: 50%;
  }
}
@media (min-width: 1200px) {
  .topLead__cloudImg {
    animation: none;
  }
}

.topLead__itchanImg {
  --mxStart: 0;
  --myStart: 100%;
  --msStart: 1;
  animation: kvInTS var(--kvInDur) linear calc(var(--ellipseDelay) + 1s) both;
}
@media (min-width: 1200px) {
  .topLead__itchanImg {
    animation: none;
  }
}

.topLead__textBlock {
  --mxStart: -30%;
  --myStart: 0;
  --msStart: 1;
  animation: kvInTS var(--kvInDur) linear calc(var(--ellipseDelay) + 1.5s) both;
}
@media (min-width: 768px) {
  .topLead__textBlock {
    --mxStart: -3.90625vw;
  }
}
@media (min-width: 1200px) {
  .topLead__textBlock {
    animation: none;
  }
}

/* =========================================================
 * ヘッダー（入場）
 * ======================================================= */
.topHeader .l-header__companyLogo {
  --mxStart: -5.3333333333vw;
  --myStart: 0;
  --msStart: 1;
  animation: kvInTS var(--kvInDur) linear calc(var(--ellipseDelay) + 0.5s) both;
}
@media (min-width: 768px) {
  .topHeader .l-header__companyLogo {
    --mxStart: -5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .topHeader .l-header__companyLogo {
    --mxStart: -4.1379310345vw;
  }
}

.topHeader .l-header__groupLogoImg {
  --mxStart: 2.6666666667vw;
  --myStart: 0;
  --msStart: 1;
  animation: kvInTS var(--kvInDur) linear calc(var(--ellipseDelay) + 0.5s) both;
}
@media (min-width: 768px) {
  .topHeader .l-header__groupLogoImg {
    --mxStart: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topHeader .l-header__groupLogoImg {
    --mxStart: 1.3793103448vw;
  }
}

.topHeader .l-header__btn {
  --mxStart: 2.6666666667vw;
  --myStart: 0;
  --msStart: 1;
  animation: kvInTS var(--kvInDur) linear calc(var(--ellipseDelay) + 0.5s) both;
}
@media (min-width: 768px) {
  .topHeader .l-header__btn {
    --mxStart: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topHeader .l-header__btn {
    --mxStart: 2.0689655172vw;
  }
}

/* =========================================================
 * 早発グループ（--01 / --03 / --05 / --06）
 *  共通レール .kv-early を extend
 * ======================================================= */
.kv-early, .topKv__modifierImg--06, .topKv__modifierImg--05, .topKv__modifierImg--03, .topKv__modifierImg--01 {
  animation-name: kvEarlyP1, kvEarlyP2;
  animation-duration: var(--p1-dur, var(--earlyP1Dur)), var(--p2-dur, var(--earlyP2Dur));
  animation-timing-function: var(--p1-ease, var(--p1-ease-default)), var(--p2-ease, var(--p2-ease-default));
  animation-delay: var(--p1-delay, var(--earlyLead)), var(--p2-delay, var(--earlyDelay));
  animation-fill-mode: both, forwards;
  animation-iteration-count: 1, 1;
}

/* 01：X +10 → -10 → 0 / Y 20 → 20 → 0 */
.topKv__modifierImg--01 {
  --mxStart: 2.6666666667vw;
  --myStart: 5.3333333333vw;
  --mxMid: -2.6666666667vw;
  --myMid: 5.3333333333vw;
}
@media (min-width: 768px) {
  .topKv__modifierImg--01 {
    --mxStart: 2.6041666667vw;
    --myStart: 5.2083333333vw;
    --mxMid: -2.6041666667vw;
    --myMid: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topKv__modifierImg--01 {
    --mxStart: 1.3793103448vw;
    --myStart: 2.7586206897vw;
    --mxMid: -1.3793103448vw;
    --myMid: 1.3793103448vw;
  }
}

/* 03：X 0 / Y 50 → 20 → 0 */
.topKv__modifierImg--03 {
  --mxStart: 0;
  --myStart: 13.3333333333vw;
  --mxMid: 0;
  --myMid: 5.3333333333vw;
}
@media (min-width: 768px) {
  .topKv__modifierImg--03 {
    --mxStart: 3.90625vw;
    --myStart: 5.2083333333vw;
    --mxMid: 0;
    --myMid: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topKv__modifierImg--03 {
    --mxStart: 2.0689655172vw;
    --myStart: 2.7586206897vw;
    --mxMid: 0;
    --myMid: 1.3793103448vw;
  }
}

/* 05：X -20 → 0 → 0（Y 0） */
.topKv__modifierImg--05 {
  --mxStart: -5.3333333333vw;
  --myStart: 0;
  --mxMid: 0;
  --myMid: 0;
}
@media (min-width: 768px) {
  .topKv__modifierImg--05 {
    --mxStart: -3.90625vw;
    --myStart: 5.2083333333vw;
    --mxMid: 0;
    --myMid: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topKv__modifierImg--05 {
    --mxStart: -2.0689655172vw;
    --myStart: 2.7586206897vw;
    --mxMid: 0;
    --myMid: 1.3793103448vw;
  }
}

/* 06：X -20 → 0 → 0（必要なら“残し感”） */
.topKv__modifierImg--06 {
  --mxStart: -5.3333333333vw;
  --myStart: 0;
  --mxMid: 0;
  --myMid: 0;
  /* 個別調整例 */
}
@media (min-width: 768px) {
  .topKv__modifierImg--06 {
    --mxStart: -3.90625vw;
    --myStart: 5.2083333333vw;
    --mxMid: 0;
    --myMid: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topKv__modifierImg--06 {
    --mxStart: -2.0689655172vw;
    --myStart: 2.7586206897vw;
    --mxMid: 0;
    --myMid: 1.3793103448vw;
  }
}

/* =========================================================
 * 後発（--02 / --04 / --07 / 雲）
 *  “動きながら scale(0.9→1)” で入る
 * ======================================================= */
.topKv__modifierImg--02,
.topKv__modifierImg--04,
.topKv__modifierImg--07,
.topKv__cloudImg--left,
.topKv__cloudImg--right {
  --msStart: 0.9;
  animation: kvInTS var(--kvInDur) linear var(--lateDelay) both;
}

.topKv__modifierImg--02 {
  --mxStart: 0;
  --myStart: 8vw;
}
@media (min-width: 768px) {
  .topKv__modifierImg--02 {
    --myStart: 5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .topKv__modifierImg--02 {
    --myStart: 2.7586206897vw;
  }
}

.topKv__modifierImg--04 {
  --mxStart: 5.3333333333vw;
  --myStart: 5.3333333333vw;
}
@media (min-width: 768px) {
  .topKv__modifierImg--04 {
    --mxStart: 2.6041666667vw;
    --myStart: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topKv__modifierImg--04 {
    --mxStart: 2.3448275862vw;
    --myStart: 2.3448275862vw;
  }
}

.topKv__modifierImg--07 {
  --mxStart: 5.3333333333vw;
  --myStart: 0;
}
@media (min-width: 768px) {
  .topKv__modifierImg--07 {
    --mxStart: 3.6458333333vw;
  }
}
@media (min-width: 1200px) {
  .topKv__modifierImg--07 {
    --mxStart: 2.8965517241vw;
  }
}

/* 雲（左右） */
.topKv__cloudImg--left {
  --mxStart: -5.3333333333vw;
  --myStart: -5.3333333333vw;
}
@media (min-width: 768px) {
  .topKv__cloudImg--left {
    --mxStart: -3.90625vw;
    --myStart: 5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .topKv__cloudImg--left {
    --mxStart: -2.0689655172vw;
    --myStart: -2.7586206897vw;
  }
}

.topKv__cloudImg--right {
  --mxStart: 5.3333333333vw;
  --myStart: -5.3333333333vw;
}
@media (min-width: 768px) {
  .topKv__cloudImg--right {
    --mxStart: 3.90625vw;
    --myStart: 5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .topKv__cloudImg--right {
    --mxStart: 2.0689655172vw;
    --myStart: 2.7586206897vw;
  }
}

/* =========================================================
 * バウンス（.is-bounce-start で開始）
 * ======================================================= */
@keyframes kvBounceWrapper {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, var(--bounceY), 0);
  }
}
.topKv__modifierWrapper {
  --bounceY: -2.6666666667vw;
  will-change: transform;
  transform: translateZ(0);
}
@media (min-width: 768px) {
  .topKv__modifierWrapper {
    --bounceY: -1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .topKv__modifierWrapper {
    --bounceY: -0.6896551724vw;
  }
}

/* ラッパを揺らす（クラス付与で開始） */
.is-bounce-start .topKv__lineWrapper {
  animation: kvBounceWrapper var(--bounceDur) linear 1s infinite;
}

.is-bounce-start .topKv__cloudWrapper {
  animation: kvBounceWrapper var(--bounceDur) linear 2s infinite;
}

/* =========================================================
 * ローディング画面内のオブジェクトを包むラッパー
 * ======================================================= */
.loadingObjectWrapper {
  position: fixed;
  inset: 0;
  z-index: 502;
  pointer-events: none;
  animation: fadeOut 0.5s linear calc(var(--loadDur)) forwards;
}

.is-intro-done .loadingObjectWrapper {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s linear;
  /* 念のため */
}

/* =========================================================
 * Meter（0–100%）
 * ======================================================= */
.loadingMeter {
  /* メーター幅の可変（必要箇所だけで管理） */
  --numW1: auto;
  --numW2: auto;
  --numW3: auto;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.0666666667vw;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 60.2666666667vw;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .loadingMeter {
    gap: 0.6510416667vw;
    bottom: 30.7291666667vw;
  }
}
@media (min-width: 1200px) {
  .loadingMeter {
    gap: 0.3448275862vw;
    bottom: 16.275862069vw;
  }
}
.loadingMeter__num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  display: inline-block;
  text-align: center;
  width: var(--numBoxW);
  line-height: 1;
  font-weight: 700;
  font-size: 13.8666666667vw;
  color: #004eaa;
}
@media (min-width: 768px) {
  .loadingMeter__num {
    font-size: 8.0729166667vw;
  }
}
@media (min-width: 1200px) {
  .loadingMeter__num {
    font-size: 4.275862069vw;
  }
}
.loadingMeter__num.is-d1 {
  --numBoxW: var(--numW1);
}
.loadingMeter__num.is-d2 {
  --numBoxW: var(--numW2);
}
.loadingMeter__num.is-d3 {
  --numBoxW: var(--numW3);
}
.loadingMeter__pct {
  line-height: 1;
  font-weight: 700;
  font-size: 10.4vw;
  color: #004eaa;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
@media (min-width: 768px) {
  .loadingMeter__pct {
    font-size: 5.46875vw;
  }
}
@media (min-width: 1200px) {
  .loadingMeter__pct {
    font-size: 2.8965517241vw;
  }
}

/* =========================================================
 * Gauge（下→中→上の3段階）
 *  - アクティブ色はCSS変数で公開（JSで切替可能）
 * ======================================================= */
.loadingGauge {
  --gauge-active: v.$c-blue-3;
  position: absolute;
  left: 0;
  bottom: 35.7333333333vw;
  width: 100%;
  z-index: 501;
  pointer-events: none;
}
@media (min-width: 768px) {
  .loadingGauge {
    bottom: 19.6614583333vw;
  }
}
@media (min-width: 1200px) {
  .loadingGauge {
    bottom: 10.4137931034vw;
  }
}
.loadingGauge__svg {
  display: block;
  margin-inline: auto;
  width: 17.0666666667vw;
}
@media (min-width: 768px) {
  .loadingGauge__svg {
    width: 15.4947916667vw;
  }
}
@media (min-width: 1200px) {
  .loadingGauge__svg {
    width: 8.2068965517vw;
  }
}
.loadingGauge__svg path {
  fill: transparent !important;
}
.loadingGauge__svg path.is-on {
  fill: var(--gauge-active) !important;
}

.loadingItchan {
  width: 64.8vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .loadingItchan {
    width: 35.2864583333vw;
  }
}
@media (min-width: 1200px) {
  .loadingItchan {
    width: 18.6896551724vw;
  }
}
.loadingItchan__img {
  display: block;
}

.topKv {
  height: 115.7333333333vw;
  overflow: hidden;
  position: relative;
}
@media (min-width: 768px) {
  .topKv {
    height: 57.1614583333vw;
  }
}
@media (min-width: 1200px) {
  .topKv {
    height: 48.5517241379vw;
  }
}
.topKv::before {
  content: "";
  display: block;
  width: 89.3333333333vw;
  height: 11.4666666667vw;
  background-image: url("../img/top/kv/town_sp.svg");
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .topKv::before {
    width: 75.6510416667vw;
    height: 8.0729166667vw;
    background-image: url("../img/top/kv/town_tb.svg");
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .topKv::before {
    width: 65.2413793103vw;
    height: 6.9655172414vw;
    background-image: url("../img/top/kv/town_pc.svg");
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
.topKv__ellipse {
  width: 136vw;
  height: 143.2vw;
  position: absolute;
  top: 4.8vw;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .topKv__ellipse {
    width: 96.0143229167vw;
    height: 101.1848958333vw;
    top: 0;
    transform: translate(-50%, -12.2395833333vw);
  }
}
@media (min-width: 1200px) {
  .topKv__ellipse {
    width: 82.7586206897vw;
    height: 87.1724137931vw;
    top: 0;
    transform: translate(-50%, -11.724137931vw);
  }
}
.topKv__ellipse::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../img/top/kv/ellipse.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.topKv__outer {
  height: 100%;
  position: relative;
  z-index: 501;
}
.topKv__nameWrapper {
  width: fit-content;
  position: absolute;
  top: 35.4666666667vw;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 2.6666666667vw;
}
@media (min-width: 768px) {
  .topKv__nameWrapper {
    top: 9.4791666667vw;
  }
}
@media (min-width: 1200px) {
  .topKv__nameWrapper {
    top: 6.9655172414vw;
  }
}
.topKv__nameMask {
  width: 68vw;
  margin-inline: auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
@media (min-width: 768px) {
  .topKv__nameMask {
    width: 49.47265625vw;
  }
}
@media (min-width: 1200px) {
  .topKv__nameMask {
    width: 42.7586206897vw;
  }
}
.topKv__name {
  width: 70.1333333333vw;
  transform: scale(0.80988593);
  transform-origin: center;
}
@media (min-width: 768px) {
  .topKv__name {
    width: 49.47265625vw;
  }
}
@media (min-width: 1200px) {
  .topKv__name {
    width: 42.7586206897vw;
  }
}
.topKv__copy {
  width: 41.3333333333vw;
  margin-top: -0.6666666667vw;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .topKv__copy {
    width: 24.6393229167vw;
    margin-top: -0.1953125vw;
  }
}
@media (min-width: 1200px) {
  .topKv__copy {
    width: 23.4482758621vw;
    margin-top: -0.3103448276vw;
  }
}
.topKv__modifierWrapper {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;
}
.topKv__lineWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.topKv__cloudWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.topKv__modifier {
  position: absolute;
}
.topKv__modifier--01 {
  width: 25.6vw;
  top: 40.2666666667vw;
  left: 0;
  transform: translateX(-15.2vw);
}
@media (min-width: 768px) {
  .topKv__modifier--01 {
    width: 17.96875vw;
    top: 12.890625vw;
    transform: translateX(5.46875vw);
  }
}
@media (min-width: 1200px) {
  .topKv__modifier--01 {
    width: 15.5172413793vw;
    top: 9.9310344828vw;
    transform: translateX(11.1034482759vw);
  }
}
.topKv__modifier--02 {
  width: 9.8666666667vw;
  top: 80vw;
  left: 0;
  transform: translateX(1.3333333333vw);
}
@media (min-width: 768px) {
  .topKv__modifier--02 {
    width: 6.7708333333vw;
    top: 40.8854166667vw;
    transform: translateX(2.0833333333vw);
  }
}
@media (min-width: 1200px) {
  .topKv__modifier--02 {
    width: 6.0689655172vw;
    top: 33.8620689655vw;
    transform: translateX(8.275862069vw);
  }
}
.topKv__modifier--03 {
  width: 10.4vw;
  top: 21.6vw;
  left: 0;
  transform: translateX(33.3333333333vw);
}
@media (min-width: 768px) {
  .topKv__modifier--03 {
    width: 7.421875vw;
    top: 3.6458333333vw;
    transform: translateX(39.453125vw);
  }
}
@media (min-width: 1200px) {
  .topKv__modifier--03 {
    width: 6.4827586207vw;
    top: 2vw;
    transform: translateX(40.4827586207vw);
  }
}
.topKv__modifier--04 {
  width: 27.4666666667vw;
  bottom: -2.4vw;
  right: 0;
  transform: translateX(-22.4vw);
}
@media (min-width: 768px) {
  .topKv__modifier--04 {
    width: 13.671875vw;
    top: 43.359375vw;
    transform: translateX(-40.7552083333vw);
  }
}
@media (min-width: 1200px) {
  .topKv__modifier--04 {
    width: 15.1724137931vw;
    top: 36.275862069vw;
    transform: translateX(-42.4137931034vw);
  }
}
.topKv__modifier--05 {
  width: 10.4vw;
  top: 35.4666666667vw;
  right: 0;
  transform: translate(-14.4vw);
}
@media (min-width: 768px) {
  .topKv__modifier--05 {
    width: 7.421875vw;
    top: 9.375vw;
    transform: translateX(-23.3072916667vw);
  }
}
@media (min-width: 1200px) {
  .topKv__modifier--05 {
    width: 6.3448275862vw;
    top: 6.9655172414vw;
    transform: translateX(-27.4482758621vw);
  }
}
.topKv__modifier--06 {
  width: 12.5333333333vw;
  top: 44vw;
  right: 0;
  transform: translateX(6.9333333333vw);
}
@media (min-width: 768px) {
  .topKv__modifier--06 {
    width: 9.1145833333vw;
    top: 15.3645833333vw;
    transform: translateX(1.3020833333vw);
  }
}
@media (min-width: 1200px) {
  .topKv__modifier--06 {
    width: 7.7931034483vw;
    top: 12.1379310345vw;
    transform: translateX(-6.2068965517vw);
  }
}
.topKv__modifier--07 {
  width: 25.3333333333vw;
  top: 70.1333333333vw;
  right: 0;
}
@media (min-width: 768px) {
  .topKv__modifier--07 {
    width: 17.8385416667vw;
    top: 29.5572916667vw;
    transform: translateX(-7.9427083333vw);
  }
}
@media (min-width: 1200px) {
  .topKv__modifier--07 {
    width: 15.3793103448vw;
    top: 24.4137931034vw;
    transform: translateX(-14.1379310345vw);
  }
}
.topKv__cloud {
  position: absolute;
}
.topKv__cloud--01 {
  top: 32.8vw;
  left: 0;
  transform: translateX(10.4vw);
}
@media (min-width: 768px) {
  .topKv__cloud--01 {
    top: 7.8125vw;
    transform: translateX(23.4375vw);
  }
}
@media (min-width: 1200px) {
  .topKv__cloud--01 {
    top: 5.5172413793vw;
    transform: translateX(26.6206896552vw);
  }
}
.topKv__cloud--02 {
  top: 66.4vw;
  left: 0;
  transform: translateX(-7.7333333333vw);
}
@media (min-width: 768px) {
  .topKv__cloud--02 {
    top: 27.8645833333vw;
    transform: translateX(-1.3020833333vw);
  }
}
@media (min-width: 1200px) {
  .topKv__cloud--02 {
    top: 22.8965517241vw;
    transform: translateX(5.3103448276vw);
  }
}
.topKv__cloud--03 {
  top: 96.2666666667vw;
  left: 0;
  transform: translateX(14.4vw);
}
@media (min-width: 768px) {
  .topKv__cloud--03 {
    top: 44.6614583333vw;
    transform: translateX(9.2447916667vw);
  }
}
@media (min-width: 1200px) {
  .topKv__cloud--03 {
    top: 37.3103448276vw;
    transform: translateX(14.4137931034vw);
  }
}
.topKv__cloud--04 {
  top: 25.6vw;
  right: 0;
  transform: translateX(-18.4vw);
}
@media (min-width: 768px) {
  .topKv__cloud--04 {
    top: 18.0989583333vw;
    transform: translateX(-11.4583333333vw);
  }
}
@media (min-width: 1200px) {
  .topKv__cloud--04 {
    top: 14.4137931034vw;
    transform: translateX(-17.1724137931vw);
  }
}
.topKv__cloud--05 {
  top: 65.6vw;
  right: 0;
  transform: translateX(6.6666666667vw);
}
@media (min-width: 768px) {
  .topKv__cloud--05 {
    top: 32.6822916667vw;
    transform: translateX(2.8645833333vw);
  }
}
@media (min-width: 1200px) {
  .topKv__cloud--05 {
    top: 27.0344827586vw;
    transform: translateX(-4.8275862069vw);
  }
}
.topKv__cloud--06 {
  top: 87.2vw;
  right: 0;
  transform: translateX(-22.1333333333vw);
}
@media (min-width: 768px) {
  .topKv__cloud--06 {
    top: 45.4427083333vw;
    transform: translateX(-27.2135416667vw);
  }
}
@media (min-width: 1200px) {
  .topKv__cloud--06 {
    top: 38.0689655172vw;
    transform: translateX(-30.7586206897vw);
  }
}
.topKv__cloudImg--01 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%237dccef'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 14.9333333333vw;
  height: calc(14.9333333333vw * 0.5751702239);
}
@media (min-width: 768px) {
  .topKv__cloudImg--01 {
    width: 10.546875vw;
    height: calc(10.546875vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .topKv__cloudImg--01 {
    width: 9.1724137931vw;
    height: calc(9.1724137931vw * 0.5751702239);
  }
}
.topKv__cloudImg--02 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23a8e1f4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 17.6vw;
  height: calc(17.6vw * 0.5751702239);
}
@media (min-width: 768px) {
  .topKv__cloudImg--02 {
    width: 10.2864583333vw;
    height: calc(10.2864583333vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .topKv__cloudImg--02 {
    width: 8.8275862069vw;
    height: calc(8.8275862069vw * 0.5751702239);
  }
}
.topKv__cloudImg--03 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%237dccef'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 24.8vw;
  height: calc(24.8vw * 0.5751702239);
}
@media (min-width: 768px) {
  .topKv__cloudImg--03 {
    width: 19.53125vw;
    height: calc(19.53125vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .topKv__cloudImg--03 {
    width: 16.8275862069vw;
    height: calc(16.8275862069vw * 0.5751702239);
  }
}
.topKv__cloudImg--04 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23a8e1f4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 12.2666666667vw;
  height: calc(12.2666666667vw * 0.5751702239);
}
@media (min-width: 768px) {
  .topKv__cloudImg--04 {
    width: 13.1510416667vw;
    height: calc(13.1510416667vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .topKv__cloudImg--04 {
    width: 11.3793103448vw;
    height: calc(11.3793103448vw * 0.5751702239);
  }
}
.topKv__cloudImg--05 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%237dccef'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 18.6666666667vw;
  height: calc(18.6666666667vw * 0.5751702239);
}
@media (min-width: 768px) {
  .topKv__cloudImg--05 {
    width: 10.546875vw;
    height: calc(10.546875vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .topKv__cloudImg--05 {
    width: 9.1724137931vw;
    height: calc(9.1724137931vw * 0.5751702239);
  }
}
.topKv__cloudImg--06 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%2388d6f2'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 16.2666666667vw;
  height: calc(16.2666666667vw * 0.5751702239);
}
@media (min-width: 768px) {
  .topKv__cloudImg--06 {
    width: 12.2395833333vw;
    height: calc(12.2395833333vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .topKv__cloudImg--06 {
    width: 10.5517241379vw;
    height: calc(10.5517241379vw * 0.5751702239);
  }
}
.topKv__itchan {
  display: none;
}
@media (min-width: 768px) {
  .topKv__itchan {
    display: block;
    width: 18.0989583333vw;
    position: absolute;
    bottom: 3.125vw;
    left: 9.2447916667vw;
  }
}
@media (min-width: 1200px) {
  .topKv__itchan {
    width: 15.724137931vw;
    bottom: 2.9655172414vw;
    left: 14.3448275862vw;
  }
}
.topKv__itchanImg {
  opacity: 0;
}

.topLead__outer {
  position: relative;
}
@media (min-width: 768px) {
  .topLead__outer {
    padding-left: 3.90625vw;
    padding-right: 3.1640625vw;
  }
}
@media (min-width: 1200px) {
  .topLead__outer {
    padding-left: 6.8965517241vw;
    padding-right: 4.7310344828vw;
  }
}
.topLead__outer::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6.24vw;
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%238ecef0'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 23.3466666667vw;
  height: calc(23.3466666667vw * 0.5751702239);
}
@media (min-width: 768px) {
  .topLead__outer::after {
    width: 13.4466145833vw;
    height: calc(13.4466145833vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .topLead__outer::after {
    width: 12.8110344828vw;
    height: calc(12.8110344828vw * 0.5751702239);
  }
}
@media (min-width: 768px) {
  .topLead__outer::after {
    left: 2.5390625vw;
    bottom: 2.9947916667vw;
  }
}
@media (min-width: 1200px) {
  .topLead__outer::after {
    left: 2.6689655172vw;
    bottom: 1.0137931034vw;
  }
}
.topLead__inner {
  height: 150.6666666667vw;
  background-image: url("../img/top/lead/bg_sp.svg");
  background-size: auto 100%;
  background-position: left top;
  background-repeat: no-repeat;
  padding-top: 7.7333333333vw;
  position: relative;
}
@media (min-width: 768px) {
  .topLead__inner {
    height: 56.640625vw;
    background-image: url("../img/top/lead/bg_tb.svg");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 6.5104166667vw;
  }
}
@media (min-width: 1200px) {
  .topLead__inner {
    height: 46.5517241379vw;
    background-image: url("../img/top/lead/bg_pc.svg");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 7.724137931vw;
  }
}
@media (min-width: 768px) {
  .topLead__inner::after {
    content: "";
    display: block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='rgba(255,%20255,%20255,%200.14)'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 0vw;
    height: calc(0vw * 0.5751702239);
    position: absolute;
    bottom: 7.1614583333vw;
    right: 8.203125vw;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .topLead__inner::after {
    width: 12.7135416667vw;
    height: calc(12.7135416667vw * 0.5751702239);
  }
}
@media (min-width: 768px) and (min-width: 1450px) {
  .topLead__inner::after {
    width: 12.2137931034vw;
    height: calc(12.2137931034vw * 0.5751702239);
  }
}
@media (min-width: 1200px) {
  .topLead__inner::after {
    bottom: 5.5172413793vw;
    right: 6.0689655172vw;
  }
}
.topLead__imgWrapper {
  width: 52.5333333333vw;
  margin-inline: auto;
  margin-bottom: 6.8vw;
  position: relative;
}
@media (min-width: 768px) {
  .topLead__imgWrapper {
    position: absolute;
    margin: 0;
    width: 29.9479166667vw;
    top: 16.9270833333vw;
    right: 5.3385416667vw;
  }
}
@media (min-width: 1200px) {
  .topLead__imgWrapper {
    width: 29.724137931vw;
    top: 13.0344827586vw;
    right: 10.4137931034vw;
    padding-bottom: 11.3793103448vw;
    overflow: hidden;
  }
}
.topLead__imgWrapper::after {
  content: "";
  display: block;
  width: 80%;
  height: 32vw;
  background-color: #fca212;
  border-radius: 50vh;
  position: absolute;
  left: 50%;
  right: 0;
  bottom: 0;
  transform: translate(-50%, 100%);
}
@media (min-width: 768px) {
  .topLead__imgWrapper::after {
    height: 16.9270833333vw;
  }
}
@media (min-width: 1200px) {
  .topLead__imgWrapper::after {
    height: 11.3793103448vw;
    transform: translateX(-50%);
  }
}
.topLead__itchan {
  width: 29.0666666667vw;
  position: absolute;
  bottom: 0;
  left: 12.88vw;
}
@media (min-width: 768px) {
  .topLead__itchan {
    width: 16.5885416667vw;
    left: 7.34375vw;
  }
}
@media (min-width: 1200px) {
  .topLead__itchan {
    width: 16.4827586207vw;
    left: 7.2965517241vw;
    bottom: 11.3793103448vw;
  }
}
.topLead__textBlock {
  padding-left: 10.8vw;
  display: flex;
  flex-direction: column;
  row-gap: 1.8666666667vw;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .topLead__textBlock {
    padding-left: 4.5572916667vw;
    row-gap: 1.171875vw;
  }
}
@media (min-width: 1200px) {
  .topLead__textBlock {
    padding-left: 7.5862068966vw;
    row-gap: 0.6896551724vw;
  }
}
.topLead__text {
  display: block;
  width: fit-content;
  padding-inline: 5.0666666667vw;
  background-color: #fff;
  border-radius: 2.1333333333vw;
  font-size: 4.2666666667vw;
  font-weight: 700;
}
@media (min-width: 768px) {
  .topLead__text {
    padding-inline: 1.953125vw;
    border-radius: 1.0416666667vw;
    font-size: 2.2135416667vw;
  }
}
@media (min-width: 1200px) {
  .topLead__text {
    padding-inline: 1.3793103448vw;
    border-radius: 0.6896551724vw;
    font-size: 1.5862068966vw;
    line-height: 3.3103448276vw;
  }
}

.topTopics {
  padding-top: 16vw;
  padding-bottom: 10.6666666667vw;
  position: relative;
  overflow-x: hidden;
}
@media (min-width: 768px) {
  .topTopics {
    padding-top: 7.421875vw;
    padding-bottom: 10.4166666667vw;
    display: flex;
    align-items: stretch;
  }
}
@media (min-width: 1200px) {
  .topTopics {
    padding-top: 4.8965517241vw;
    padding-bottom: 6.8965517241vw;
  }
}
.topTopics__top {
  padding-left: 10.6666666667vw;
  height: 44.5333333333vw;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 4.2666666667vw;
}
@media (min-width: 768px) {
  .topTopics__top {
    height: auto;
    padding-left: 19.53125vw;
    margin-bottom: 0;
  }
}
@media (min-width: 1200px) {
  .topTopics__top {
    padding-left: 18.6896551724vw;
  }
}
.topTopics__heading {
  font-size: 7.7333333333vw;
  font-weight: 700;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .topTopics__heading {
    font-size: 2.9947916667vw;
    line-height: 1.5;
    margin-right: 4.1666666667vw;
  }
}
@media (min-width: 1200px) {
  .topTopics__heading {
    font-size: 3.0344827586vw;
    line-height: 1.5227272727;
    margin-right: 6.6206896552vw;
  }
}
.topTopics__waves {
  display: block;
  width: 10.9333333333vw;
  position: absolute;
  right: 27.2vw;
  top: 50%;
  transform: rotate(180deg) translateY(50%);
  transform-origin: center;
}
@media (min-width: 768px) {
  .topTopics__waves {
    width: 4.9479166667vw;
    right: unset;
    left: 11.9791666667vw;
    transform: rotate(0) translateY(-50%);
  }
}
@media (min-width: 1200px) {
  .topTopics__waves {
    width: 4.4137931034vw;
    left: 10.6206896552vw;
  }
}
.topTopics__it-chan {
  display: block;
  width: 27.2vw;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(-180deg);
  transform-origin: center;
}
@media (min-width: 768px) {
  .topTopics__it-chan {
    width: 10.4166666667vw;
    right: unset;
    left: 0;
    top: 50%;
    transform-origin: unset;
    transform: rotate(0) translateY(-50%);
  }
}
@media (min-width: 1200px) {
  .topTopics__it-chan {
    width: 9.2413793103vw;
  }
}
@media (min-width: 768px) {
  .topTopics__cloud--01 {
    display: block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23a8e1f4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 0vw;
    height: calc(0vw * 0.5751702239);
    position: absolute;
    left: 16.9270833333vw;
    bottom: 6.5104166667vw;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .topTopics__cloud--01 {
    width: 13.4114583333vw;
    height: calc(13.4114583333vw * 0.5751702239);
  }
}
@media (min-width: 768px) and (min-width: 1450px) {
  .topTopics__cloud--01 {
    width: 12.9655172414vw;
    height: calc(12.9655172414vw * 0.5751702239);
  }
}
@media (min-width: 1200px) {
  .topTopics__cloud--01 {
    left: 16.3448275862vw;
    bottom: -4.0689655172vw;
  }
}
@media (min-width: 1200px) {
  .topTopics__cloud--02 {
    display: block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23a8e1f4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 0vw;
    height: calc(0vw * 0.5751702239);
    position: absolute;
    top: 23.3793103448vw;
    right: -3.0344827586vw;
  }
}
@media (min-width: 1200px) and (min-width: 768px) {
  .topTopics__cloud--02 {
    width: 0vw;
    height: calc(0vw * 0.5751702239);
  }
}
@media (min-width: 1200px) and (min-width: 1450px) {
  .topTopics__cloud--02 {
    width: 12.9655172414vw;
    height: calc(12.9655172414vw * 0.5751702239);
  }
}
@media (min-width: 768px) {
  .topTopics__bottom {
    width: 54.1666666667vw;
  }
}
@media (min-width: 1200px) {
  .topTopics__bottom {
    width: 42.7586206897vw;
  }
}
.topTopics__links {
  display: grid;
  grid-auto-rows: 1fr;
  row-gap: 5.0666666667vw;
  padding-inline: 5.3333333333vw;
}
@media (min-width: 768px) {
  .topTopics__links {
    row-gap: 2.6041666667vw;
    padding-inline: 0;
  }
}
@media (min-width: 1200px) {
  .topTopics__links {
    row-gap: 1.724137931vw;
  }
}
.topTopics__links .c-btn {
  height: 100%;
}

.topAwareness {
  position: relative;
  padding-bottom: 27.2vw;
}
@media (min-width: 768px) {
  .topAwareness {
    padding-bottom: 20.4427083333vw;
  }
}
@media (min-width: 1200px) {
  .topAwareness {
    padding-bottom: 20.3448275862vw;
  }
}
.topAwareness::before {
  content: "";
  display: block;
  width: 100%;
  height: 20.2666666667vw;
  background-image: url("../img/top/awareness/bg_top_sp.svg");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .topAwareness::before {
    height: 20.1822916667vw;
    background-image: url("../img/top/awareness/bg_top_tb.svg");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .topAwareness::before {
    height: 20.1379310345vw;
    background-image: url("../img/top/awareness/bg_top_pc.svg");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
.topAwareness::after {
  content: "";
  display: block;
  width: 100%;
  height: 88.5333333333vw;
  background-color: #effaff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -61.3333333333vw;
  pointer-events: none;
  background-image: url("../img/top/awareness/bg_bottom_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .topAwareness::after {
    height: 63.4114583333vw;
    bottom: -42.96875vw;
    background-image: url("../img/top/awareness/bg_bottom_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .topAwareness::after {
    height: 61.2413793103vw;
    bottom: -40.8965517241vw;
    background-image: url("../img/top/awareness/bg_bottom_pc.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
.topAwareness__heading {
  position: absolute;
  width: calc(100% - 10.6666666667vw);
  top: 22.4vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
@media (min-width: 768px) {
  .topAwareness__heading {
    top: 11.8489583333vw;
    width: 57.9427083333vw;
  }
}
@media (min-width: 1200px) {
  .topAwareness__heading {
    width: 57.9310344828vw;
    top: 11.7931034483vw;
  }
}
.topAwareness__headingText {
  display: block;
  position: relative;
  color: #19468d;
  font-size: 6.1333333333vw;
  font-weight: 700;
  text-align: center;
  padding-bottom: 2.6666666667vw;
}
@media (min-width: 768px) {
  .topAwareness__headingText {
    font-size: 3.515625vw;
    line-height: 1.2962962963;
    padding-bottom: 1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .topAwareness__headingText {
    font-size: 3.5172413793vw;
    line-height: 1.4509803922;
    padding-bottom: 1.724137931vw;
  }
}
.topAwareness__headingText::before, .topAwareness__headingText::after {
  content: "";
  display: block;
  width: 0.8vw;
  height: 8.8vw;
  background-color: #19468d;
  border-radius: 0.8vw;
  position: absolute;
  bottom: -2.6666666667vw;
  transform-origin: top;
}
@media (min-width: 768px) {
  .topAwareness__headingText::before, .topAwareness__headingText::after {
    width: 0.390625vw;
    height: 5.5989583333vw;
    border-radius: 0.390625vw;
    bottom: -1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .topAwareness__headingText::before, .topAwareness__headingText::after {
    width: 0.4827586207vw;
    height: 5.6551724138vw;
    border-radius: 0.4827586207vw;
    bottom: -0.6896551724vw;
  }
}
.topAwareness__headingText::before {
  left: 0;
  transform: rotate(-45deg);
}
.topAwareness__headingText::after {
  right: 0;
  transform: rotate(45deg);
}
.topAwareness__wrapper {
  background-color: #effaff;
  padding-top: 35.2vw;
  padding-bottom: 11.2vw;
  position: relative;
  height: 100%;
}
@media (min-width: 768px) {
  .topAwareness__wrapper {
    padding-top: 8.8541666667vw;
    padding-bottom: 6.25vw;
  }
}
@media (min-width: 1200px) {
  .topAwareness__wrapper {
    padding-top: 9.724137931vw;
    padding-bottom: 6.7586206897vw;
  }
}
.topAwareness__main {
  display: block;
  width: 80.2666666667vw;
  margin-inline: auto;
  position: relative;
}
@media (min-width: 768px) {
  .topAwareness__main {
    width: 46.875vw;
  }
}
@media (min-width: 1200px) {
  .topAwareness__main {
    width: 39.9310344828vw;
  }
}
.topAwareness__btn {
  width: 73.3333333333vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 10.4vw);
}
@media (min-width: 768px) {
  .topAwareness__btn {
    width: 39.0625vw;
    transform: translate(-50%, 50%);
  }
}
@media (min-width: 1200px) {
  .topAwareness__btn {
    width: 28.9655172414vw;
  }
}
.topAwareness__cloudWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.topAwareness__cloud-01 {
  width: 15.4666666667vw;
  position: absolute;
  top: 56vw;
  left: 0;
  transform: translateX(-2.4vw);
}
@media (min-width: 768px) {
  .topAwareness__cloud-01 {
    width: 14.9739583333vw;
    top: 27.734375vw;
    transform: translateX(4.0364583333vw);
  }
}
@media (min-width: 1200px) {
  .topAwareness__cloud-01 {
    width: 12.5517241379vw;
    top: 26.5517241379vw;
    transform: translateX(10.0689655172vw);
  }
}
.topAwareness__cloud-02 {
  width: 18.4vw;
  position: absolute;
  top: 39.7333333333vw;
  left: 0;
  transform: translateX(9.8666666667vw);
}
@media (min-width: 768px) {
  .topAwareness__cloud-02 {
    width: 20.3125vw;
    top: 10.546875vw;
    transform: translateX(9.375vw);
  }
}
@media (min-width: 1200px) {
  .topAwareness__cloud-02 {
    width: 16.8275862069vw;
    top: 11.5172413793vw;
    transform: translateX(15.2413793103vw);
  }
}
.topAwareness__cloud-03 {
  width: 16vw;
  position: absolute;
  top: 29.6vw;
  right: 0;
  transform: translateX(-25.3333333333vw);
}
@media (min-width: 768px) {
  .topAwareness__cloud-03 {
    width: 15.8854166667vw;
    top: 7.421875vw;
    transform: translateX(-18.2291666667vw);
  }
}
@media (min-width: 1200px) {
  .topAwareness__cloud-03 {
    width: 13.3103448276vw;
    top: 9.5172413793vw;
    transform: translateX(-23.7931034483vw);
  }
}
.topAwareness__cloud-04 {
  width: 17.8666666667vw;
  position: absolute;
  top: 41.0666666667vw;
  right: 0;
  transform: translateX(-5.8666666667vw);
}
@media (min-width: 768px) {
  .topAwareness__cloud-04 {
    width: 20.1822916667vw;
    top: 20.4427083333vw;
    transform: translateX(-1.5625vw);
  }
}
@media (min-width: 1200px) {
  .topAwareness__cloud-04 {
    width: 16.5517241379vw;
    top: 18.3448275862vw;
    transform: translateX(-7.724137931vw);
  }
}
.topAwareness__cloud-05 {
  width: 15.7333333333vw;
  position: absolute;
  top: 60vw;
  right: 0;
  transform: translateX(1.6vw);
}
@media (min-width: 768px) {
  .topAwareness__cloud-05 {
    width: 17.1875vw;
    top: 40.1041666667vw;
    transform: translateX(-8.0729166667vw);
  }
}
@media (min-width: 1200px) {
  .topAwareness__cloud-05 {
    width: 14.275862069vw;
    top: 33.724137931vw;
    transform: translateX(-15.1724137931vw);
  }
}

.topExplore {
  background-color: #effaff;
  position: relative;
  margin-top: -1px;
  z-index: 1;
}
.topExplore__top {
  position: relative;
  height: 63.2vw;
  background-color: #69d38e;
  padding-left: 5.3333333333vw;
  padding-top: 11.2vw;
}
@media (min-width: 768px) {
  .topExplore__top {
    height: 46.09375vw;
    padding-left: 3.90625vw;
    padding-top: 5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__top {
    height: 46vw;
    padding-left: 14.0689655172vw;
    padding-top: 5.1724137931vw;
  }
}
.topExplore__top::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  background-image: url("../img/top/explore/top_bg_top_sp.svg");
  background-size: auto 100%;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .topExplore__top::before {
    background-image: url("../img/top/explore/top_bg_top_tb.svg");
    background-size: auto 100%;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .topExplore__top::before {
    background-image: url("../img/top/explore/top_bg_top_pc.svg");
    background-size: auto 100%;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
.topExplore__top::after {
  content: "";
  display: block;
  width: 100%;
  height: 20vw;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2.6666666667vw;
  pointer-events: none;
  background-image: url("../img/top/explore/top_bg_bottom_sp.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .topExplore__top::after {
    height: 20.1822916667vw;
    bottom: -0.1302083333vw;
    background-image: url("../img/top/explore/top_bg_bottom_tb.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .topExplore__top::after {
    height: 20.1379310345vw;
    bottom: 6.2068965517vw;
    background-image: url("../img/top/explore/top_bg_bottom_pc.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
.topExplore__lead {
  color: #fff;
  font-size: 5.3333333333vw;
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 0 1.3793103448vw #418d41;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .topExplore__lead {
    font-size: 3.515625vw;
    line-height: 1.625;
    text-shadow: 0 0 2.6041666667vw #418d41;
  }
}
@media (min-width: 1200px) {
  .topExplore__lead {
    font-size: 3.5172413793vw;
    line-height: 1.4509803922;
    text-shadow: 0 0 1.3793103448vw #418d41;
  }
}
.topExplore__lead--lg {
  display: block;
  margin-top: 1.3333333333vw;
  font-size: 6.9333333333vw;
  line-height: 1.4230769231;
}
@media (min-width: 768px) {
  .topExplore__lead--lg {
    margin-top: 0.6510416667vw;
    font-size: 4.0364583333vw;
    line-height: 1.4516129032;
  }
}
@media (min-width: 1200px) {
  .topExplore__lead--lg {
    margin-top: 0.6206896552vw;
    font-size: 3.9310344828vw;
    line-height: 1.4385964912;
  }
}
.topExplore__itchan {
  width: 16.8vw;
  z-index: 1;
  position: absolute;
  bottom: 1.6vw;
  left: 10.2933333333vw;
}
@media (min-width: 768px) {
  .topExplore__itchan {
    width: 13.0208333333vw;
    left: 14.0625vw;
    bottom: 4.1666666667vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__itchan {
    width: 8.9655172414vw;
    left: 15.5517241379vw;
    bottom: 12.6896551724vw;
  }
}
.topExplore__bottom {
  padding-top: 12.8vw;
  background-color: #effaff;
  position: relative;
}
@media (min-width: 768px) {
  .topExplore__bottom {
    padding-top: 0;
    z-index: 1;
    margin-top: -1.953125vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__bottom {
    margin-top: -11.0344827586vw;
  }
}
.topExplore__textWrapper {
  padding-left: 5.3333333333vw;
  margin-bottom: 10.6666666667vw;
}
@media (min-width: 768px) {
  .topExplore__textWrapper {
    padding-left: 3.90625vw;
    margin-bottom: 6.5104166667vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__textWrapper {
    padding-left: 13.7931034483vw;
    margin-bottom: 0vw;
  }
}
.topExplore__balloon {
  display: block;
  width: 89.3333333333vw;
  margin-bottom: 3.2vw;
}
@media (min-width: 768px) {
  .topExplore__balloon {
    width: 49.4791666667vw;
    margin-bottom: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__balloon {
    width: 41.1034482759vw;
    margin-bottom: 1.4482758621vw;
  }
}
.topExplore__heading {
  color: #19468d;
  font-size: 7.4666666667vw;
  font-weight: 700;
  line-height: 1.6428571429;
  letter-spacing: -0.05em;
  margin-bottom: 5.3333333333vw;
}
@media (min-width: 768px) {
  .topExplore__heading {
    font-size: 4.0364583333vw;
    line-height: 1.4516129032;
    margin-bottom: 3.2552083333vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__heading {
    font-size: 3.9310344828vw;
    line-height: 1.4385964912;
    margin-bottom: 2.6896551724vw;
  }
}
.topExplore__text {
  color: #19468d;
  font-size: 3.7333333333vw;
  font-weight: 700;
}
@media (min-width: 768px) {
  .topExplore__text {
    font-size: 2.34375vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__text {
    font-size: 1.4482758621vw;
  }
}
.topExplore__sliderWrapper {
  padding-right: 5.3333333333vw;
  height: 151.2vw;
  padding-bottom: 68.2666666667vw;
  position: relative;
}
@media (min-width: 768px) {
  .topExplore__sliderWrapper {
    padding-right: 26.5625vw;
    padding-bottom: 18.0989583333vw;
    height: 72.9166666667vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__sliderWrapper {
    padding-right: 31.5862068966vw;
    padding-bottom: 13.3793103448vw;
    height: 45.5172413793vw;
    margin-top: 4.8965517241vw;
  }
}
.topExplore__sliderWrapper::before {
  content: "";
  display: block;
  width: calc(100% - 5.3333333333vw);
  height: 81.6vw;
  background-image: url("../img/top/explore/slider_bg_sp.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  bottom: 41.6vw;
  z-index: 0;
}
@media (min-width: 768px) {
  .topExplore__sliderWrapper::before {
    width: 73.4375vw;
    height: 52.0833333333vw;
    bottom: 2.6041666667vw;
    background-image: url("../img/top/explore/slider_bg_tb.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .topExplore__sliderWrapper::before {
    width: 68.5517241379vw;
    height: 29.724137931vw;
    bottom: 2.2068965517vw;
    background-image: url("../img/top/explore/slider_bg_pc.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
.topExplore__sliderWrapper::after {
  content: "";
  display: block;
  width: 100%;
  height: 11.2vw;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2666666667vw;
  pointer-events: none;
  background-image: url("../img/top/explore/bg_bottom_sp.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .topExplore__sliderWrapper::after {
    height: 11.0677083333vw;
    bottom: -0.1302083333vw;
    background-image: url("../img/top/explore/bg_bottom_tb.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .topExplore__sliderWrapper::after {
    height: 11.1034482759vw;
    bottom: -0.0689655172vw;
    background-image: url("../img/top/explore/bg_bottom_pc.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
.topExplore__characterArea {
  position: absolute;
  width: 83.2vw;
  height: 48vw;
  right: 5.3333333333vw;
  bottom: 3.2vw;
}
@media (min-width: 768px) {
  .topExplore__characterArea {
    width: 32.5520833333vw;
    height: 56.640625vw;
    right: 0;
    bottom: 5.5989583333vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__characterArea {
    width: 37.1034482759vw;
    height: 50.6896551724vw;
    right: -0.3448275862vw;
    bottom: 6.6206896552vw;
  }
}
.topExplore__characterImage {
  width: 32.8vw;
  position: absolute;
  right: 0;
  bottom: 0;
}
@media (min-width: 768px) {
  .topExplore__characterImage {
    width: 23.4375vw;
    right: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__characterImage {
    width: 19.9310344828vw;
    right: 8.275862069vw;
  }
}
.topExplore__characterBg {
  position: relative;
  width: 47.2vw;
  height: 34.9333333333vw;
}
@media (min-width: 768px) {
  .topExplore__characterBg {
    width: 100%;
    height: 26.0416666667vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__characterBg {
    height: 29.5862068966vw;
  }
}
.topExplore__characterBgItem {
  mask-image: url("../img/top/explore/gear.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #d0f1ff;
  animation: spin 10s linear infinite;
  position: absolute;
}
.topExplore__characterBgItem--large {
  width: 19.7333333333vw;
  height: 19.7333333333vw;
  background-color: #d0f1ff;
  top: 0;
  left: 0;
}
@media (min-width: 768px) {
  .topExplore__characterBgItem--large {
    left: unset;
    right: 0px;
    width: 13.5416666667vw;
    height: 13.5416666667vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__characterBgItem--large {
    width: 15.4482758621vw;
    height: 15.4482758621vw;
  }
}
.topExplore__characterBgItem--medium {
  width: 14.6666666667vw;
  height: 14.6666666667vw;
  background-color: #d4f6ff;
  transform: rotate(25deg);
  top: 15.7333333333vw;
  right: 12.2666666667vw;
}
@media (min-width: 768px) {
  .topExplore__characterBgItem--medium {
    width: 9.6354166667vw;
    height: 9.6354166667vw;
    top: 12.2395833333vw;
    right: 13.28125vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__characterBgItem--medium {
    width: 11.5862068966vw;
    height: 11.5862068966vw;
    top: 13.9310344828vw;
    right: 14.8275862069vw;
  }
}
.topExplore__characterBgItem--small {
  width: 9.0666666667vw;
  height: 9.0666666667vw;
  background-color: #d9f4ff;
  transform: rotate(-3deg);
  right: 0;
  bottom: 0;
}
@media (min-width: 768px) {
  .topExplore__characterBgItem--small {
    right: unset;
    left: 0;
    width: 6.3802083333vw;
    height: 6.3802083333vw;
  }
}
@media (min-width: 1200px) {
  .topExplore__characterBgItem--small {
    width: 7.2413793103vw;
    height: 7.2413793103vw;
  }
}

.peekSlider {
  position: relative;
  /* ---- SP 既定（必要に応じて調整） ---- */
  --slide-w: 83.7333333333vw;
  /* 1枚の幅 */
  --h: 82.6666666667vw;
  --gap: 5.0666666667vw;
  /* 見た目上の間隔（左の待機位置を決める） */
  --peek-left: 10.9333333333vw;
  /* 左に覗かせる幅 */
  --dur: 0.6s;
  /* アニメーション時間 */
  --ease: cubic-bezier(0.22, 0.7, 0.24, 1);
  --hover-dur: 0.3s;
  --hover-ease: cubic-bezier(0.22, 0.7, 0.24, 1);
  /* ---- ビューポート ----
     左 padding で“チラ見せ帯”を作る。右側は overflow:hidden で見せない。 */
  /* ---- ステージ ----
    ステージを left: var(--peek-left) に置くのがミソ。
    X負方向に置いた「次スライド」が padding 部分に覗ける。 */
  /* ---- パネル（常に2枚のみ） ---- */
  /* 現在のパネル（手前2番目） */
  /* 左で待機しているパネル（最前面） */
  /* 走らせる時は JS で .is-moving を付与して translateX(0) へ */
  /* =========================================================
   * コントロール（peekSlider__control / __dots / __buttons / __prev / __next）
   * そのまま差し込んだ指定を BEM ネストで統合
   * ======================================================= */
  /* コントロール */
}
@media (min-width: 768px) {
  .peekSlider {
    --slide-w: 52.0833333333vw;
    --h: 54.8177083333vw;
    --gap: 2.6041666667vw;
    --peek-left: 13.0208333333vw;
    --radius: 20px;
  }
}
@media (min-width: 1200px) {
  .peekSlider {
    --slide-w: 45.9310344828vw;
    --h: 30.7586206897vw;
    --gap: 3.8620689655vw;
    --peek-left: 13.7931034483vw;
    --radius: 22px;
  }
}
@media (min-width: 768px) {
  .peekSlider::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 10.4166666667vw;
    pointer-events: none;
    background: linear-gradient(to right, rgba(239, 250, 255, 0.6), rgba(239, 250, 255, 0.02));
    z-index: 4;
  }
}
@media (min-width: 1200px) {
  .peekSlider::before {
    width: 12.4137931034vw;
  }
}
.peekSlider__viewport {
  position: relative;
  overflow: hidden;
  padding-left: var(--peek-left);
  block-size: var(--h);
}
.peekSlider__stage {
  position: absolute;
  inset: 0 auto 0 0;
  /* viewport 左端に貼る */
  left: var(--peek-left);
  /* ←重要 */
  inline-size: 100%;
  block-size: 100%;
  pointer-events: auto;
  /* パネル内リンク等を有効化（不要なら none） */
}
.peekSlider__pane {
  position: absolute;
  top: 0;
  inline-size: var(--slide-w);
  block-size: 100%;
  overflow: hidden;
  will-change: transform;
  /* GPU ヒント */
  /* 見た目の影などは中身(.card 等)側に委譲 */
}
.peekSlider__pane > * {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.peekSlider__pane.is-current {
  z-index: 2;
  transform: translate3d(0, 0, 0);
}
.peekSlider__pane.is-peek {
  z-index: 1;
}
.peekSlider__pane.is-incoming {
  z-index: 3;
  /* 初期位置：ステージ左基準で -(スライド幅 + gap) */
  transform: translate3d(calc(-1 * (var(--slide-w) + var(--gap))), 0, 0);
  transition: transform var(--dur) var(--ease);
}
.peekSlider__pane.is-incoming.is-moving {
  transform: translate3d(0, 0, 0);
}
.peekSlider__control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 6.6666666667vw;
  padding-right: 7.7333333333vw;
  padding-bottom: 0.8vw;
  margin-top: 5.8666666667vw;
}
@media (min-width: 768px) {
  .peekSlider__control {
    column-gap: 3.2552083333vw;
    padding-right: 12.2395833333vw;
    padding-bottom: 0.390625vw;
    margin-top: 3.2552083333vw;
  }
}
@media (min-width: 1200px) {
  .peekSlider__control {
    column-gap: 1.724137931vw;
    padding-right: 10.9655172414vw;
    padding-bottom: 0.2068965517vw;
    margin-top: 2.3448275862vw;
  }
}
.peekSlider__dots {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: 4.5333333333vw;
  height: 2.1333333333vw;
  /* JSで生成するのは <button> 要素（class不要） */
}
@media (min-width: 768px) {
  .peekSlider__dots {
    gap: 2.8645833333vw;
    height: 1.0416666667vw;
  }
}
@media (min-width: 1200px) {
  .peekSlider__dots {
    gap: 1.5172413793vw;
    height: 0.5517241379vw;
  }
}
.peekSlider__dots button {
  inline-size: 1.0666666667vw;
  block-size: 1.0666666667vw;
  border-radius: 50%;
  background: #89cb51;
  transition: all 0.3s ease;
  margin-top: 0.4vw;
}
@media (min-width: 768px) {
  .peekSlider__dots button {
    inline-size: 0.5208333333vw;
    block-size: 0.5208333333vw;
    margin-top: 0.1953125vw;
  }
}
@media (min-width: 1200px) {
  .peekSlider__dots button {
    inline-size: 0.275862069vw;
    block-size: 0.275862069vw;
  }
}
.peekSlider__dots button[aria-selected=true] {
  background: #38a067;
  transform: scale(2);
  transform-origin: center;
}
.peekSlider__buttons {
  display: flex;
  align-items: center;
  column-gap: 4vw;
}
@media (min-width: 768px) {
  .peekSlider__buttons {
    column-gap: 1.953125vw;
  }
}
@media (min-width: 1200px) {
  .peekSlider__buttons {
    column-gap: 1.0344827586vw;
  }
}
.peekSlider__prev, .peekSlider__next {
  inline-size: 11.7333333333vw;
  block-size: 8.5333333333vw;
  cursor: pointer;
  filter: drop-shadow(0 0.8vw 0 #5a9a24);
  transition: all 0.2s ease;
}
@media (min-width: 768px) {
  .peekSlider__prev, .peekSlider__next {
    inline-size: 5.7291666667vw;
    block-size: 4.1666666667vw;
    filter: drop-shadow(0 0.390625vw 0 #5a9a24);
  }
}
@media (min-width: 1200px) {
  .peekSlider__prev, .peekSlider__next {
    inline-size: 3.0344827586vw;
    block-size: 2.2068965517vw;
    filter: drop-shadow(0 0.2068965517vw 0 #5a9a24);
  }
}
.peekSlider__prev:active, .peekSlider__next:active {
  transform: translateY(0.8vw);
  filter: unset;
}
@media (min-width: 768px) {
  .peekSlider__prev:active, .peekSlider__next:active {
    transform: translateY(0.390625vw);
  }
}
@media (min-width: 1200px) {
  .peekSlider__prev:active, .peekSlider__next:active {
    transform: translateY(0.2068965517vw);
  }
}
@media (min-width: 1200px) {
  .peekSlider__prev:hover, .peekSlider__next:hover {
    filter: unset;
    transform: translateY(0.2068965517vw);
  }
}

.illustCard {
  --color-01: #fdd595;
  --color-02: #f4b148;
  height: 100%;
  display: flex;
  line-height: 0;
  align-items: flex-end;
}
.illustCard__svg {
  display: block;
  width: 100%;
  height: auto;
}
.illustCard__svg--sp {
  display: block;
}
@media (min-width: 768px) {
  .illustCard__svg--sp {
    display: none;
  }
}
.illustCard__svg--tb {
  display: none;
}
@media (min-width: 768px) {
  .illustCard__svg--tb {
    display: block;
  }
}
@media (min-width: 1200px) {
  .illustCard__svg--tb {
    display: none;
  }
}
.illustCard__svg--pc {
  display: none;
}
@media (min-width: 1200px) {
  .illustCard__svg--pc {
    display: block;
    transform-box: view-box;
    transform-origin: left bottom;
    transition: transform 0.25s ease;
    backface-visibility: hidden;
  }
}

.peekSliderContent {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 16vw;
  padding-left: 10.4vw;
  padding-right: 9.3333333333vw;
}
@media (min-width: 768px) {
  .peekSliderContent {
    padding-top: 10.6770833333vw;
    padding-left: 5.7291666667vw;
    padding-right: 5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .peekSliderContent {
    padding-top: 8.8275862069vw;
    padding-left: 5.4482758621vw;
    padding-right: 4.1379310345vw;
  }
}
.peekSliderContent__heading {
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 4.5333333333vw;
  line-height: 1.7058823529;
  margin-bottom: 3.2vw;
}
@media (min-width: 768px) {
  .peekSliderContent__heading {
    font-size: 3.125vw;
    line-height: 1.7083333333;
    margin-bottom: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .peekSliderContent__heading {
    font-size: 2vw;
    line-height: 1.9166666667;
    margin-bottom: 1.724137931vw;
  }
}
.peekSliderContent__heading span {
  display: block;
  width: fit-content;
  position: relative;
}
@media (min-width: 1200px) {
  .peekSliderContent__heading span {
    padding-inline: 0.3448275862vw;
  }
}
.peekSliderContent__heading span::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.8vw;
  border-radius: 50vh;
  background-color: #f4b148;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
@media (min-width: 768px) {
  .peekSliderContent__heading span::before {
    height: 0.390625vw;
  }
}
@media (min-width: 1200px) {
  .peekSliderContent__heading span::before {
    height: 0.3448275862vw;
  }
}
.peekSliderContent__heading--02 span::before {
  background-color: #fca260;
}
.peekSliderContent__heading--03 span::before {
  background-color: #7ed888;
}
.peekSliderContent__text {
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 3.2vw;
  margin-bottom: 4vw;
}
@media (min-width: 768px) {
  .peekSliderContent__text {
    font-size: 2.0833333333vw;
    margin-bottom: 2.34375vw;
  }
}
@media (min-width: 1200px) {
  .peekSliderContent__text {
    padding-inline: 0.3448275862vw;
    font-size: 1.1034482759vw;
    margin-bottom: 1.9310344828vw;
  }
}
.peekSliderContent__link {
  display: flex;
  align-items: center;
  column-gap: 2.9333333333vw;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3.7333333333vw;
  font-weight: 700;
}
@media (min-width: 768px) {
  .peekSliderContent__link {
    column-gap: 1.5625vw;
    font-size: 2.2135416667vw;
  }
}
@media (min-width: 1200px) {
  .peekSliderContent__link {
    column-gap: 0.8965517241vw;
    font-size: 1.1724137931vw;
  }
}
.peekSliderContent__linkIcon {
  display: block;
  width: 10.488vw;
  height: 7.8986666667vw;
  transition: all 0.2s ease;
  --pill-press-y: 0.8vw;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2036.15'%3E%3Cg%20transform='translate(-284.138%20-738.478)'%3E%3Cellipse%20cx='24'%20cy='17'%20rx='24'%20ry='17'%20transform='translate(284.138%20738.478)'%20fill='%23fca212'/%3E%3Cpath%20d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z'%20transform='translate(319.138%20750.478)%20rotate(90)'%20fill='%23fff'/%3E%3Crect%20width='15'%20height='3'%20rx='1.5'%20transform='translate(297.138%20753.978)'%20fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 var(--pill-press-y) 0 #ba7505);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.peekSliderContent__linkIcon:hover, .peekSliderContent__linkIcon:active {
  filter: unset;
  transform: translateY(var(--pill-press-y));
}
@media (min-width: 768px) {
  .peekSliderContent__linkIcon {
    --pill-press-y: 0.390625vw;
  }
}
@media (min-width: 1200px) {
  .peekSliderContent__linkIcon {
    --pill-press-y: 0.2068965517vw;
  }
}
@media (min-width: 768px) {
  .peekSliderContent__linkIcon {
    width: 6.25vw;
    height: 4.70703125vw;
  }
}
@media (min-width: 1200px) {
  .peekSliderContent__linkIcon {
    width: 3.3103448276vw;
    height: 2.4931034483vw;
  }
}
.peekSliderContent__linkIcon--02 {
  --pill-press-y: 0.8vw;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2036.15'%3E%3Cg%20transform='translate(-284.138%20-738.478)'%3E%3Cellipse%20cx='24'%20cy='17'%20rx='24'%20ry='17'%20transform='translate(284.138%20738.478)'%20fill='%23fd994f'/%3E%3Cpath%20d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z'%20transform='translate(319.138%20750.478)%20rotate(90)'%20fill='%23fff'/%3E%3Crect%20width='15'%20height='3'%20rx='1.5'%20transform='translate(297.138%20753.978)'%20fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 var(--pill-press-y) 0 #e68138);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.peekSliderContent__linkIcon--02:hover, .peekSliderContent__linkIcon--02:active {
  filter: unset;
  transform: translateY(var(--pill-press-y));
}
@media (min-width: 768px) {
  .peekSliderContent__linkIcon--02 {
    --pill-press-y: 0.390625vw;
  }
}
@media (min-width: 1200px) {
  .peekSliderContent__linkIcon--02 {
    --pill-press-y: 0.2068965517vw;
  }
}
.peekSliderContent__linkIcon--03 {
  --pill-press-y: 0.8vw;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2036.15'%3E%3Cg%20transform='translate(-284.138%20-738.478)'%3E%3Cellipse%20cx='24'%20cy='17'%20rx='24'%20ry='17'%20transform='translate(284.138%20738.478)'%20fill='%237ed888'/%3E%3Cpath%20d='M4.077,2.215a1,1,0,0,1,1.846,0l3.5,8.4A1,1,0,0,1,8.5,12h-7a1,1,0,0,1-.923-1.385Z'%20transform='translate(319.138%20750.478)%20rotate(90)'%20fill='%23fff'/%3E%3Crect%20width='15'%20height='3'%20rx='1.5'%20transform='translate(297.138%20753.978)'%20fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 var(--pill-press-y) 0 #5fb769);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.peekSliderContent__linkIcon--03:hover, .peekSliderContent__linkIcon--03:active {
  filter: unset;
  transform: translateY(var(--pill-press-y));
}
@media (min-width: 768px) {
  .peekSliderContent__linkIcon--03 {
    --pill-press-y: 0.390625vw;
  }
}
@media (min-width: 1200px) {
  .peekSliderContent__linkIcon--03 {
    --pill-press-y: 0.2068965517vw;
  }
}

.peekSlider__pane:active .peekSliderContent__linkIcon {
  transform: translateY(0.8vw);
  filter: unset !important;
}
@media (min-width: 768px) {
  .peekSlider__pane:active .peekSliderContent__linkIcon {
    transform: translateY(0.390625vw);
  }
}
@media (min-width: 1200px) {
  .peekSlider__pane:active .peekSliderContent__linkIcon {
    transform: translateY(0.2068965517vw);
  }
}

@media (min-width: 1200px) {
  .peekSlider__pane:hover .peekSliderContent__linkIcon {
    filter: unset !important;
    transform: translateY(0.2068965517vw);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.topIntroduction {
  padding-top: 16.8vw;
  position: relative;
  /* コントロール一式（左矢印・ドット・右矢印の順） */
  /* ドット */
  /* 矢印 */
}
@media (min-width: 768px) {
  .topIntroduction {
    padding-top: 13.0208333333vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction {
    padding-top: 8.275862069vw;
  }
}
.topIntroduction::before {
  content: "";
  display: block;
  width: 100%;
  height: 10.4vw;
  background-image: url("../img/top/introduction/bg_bottom_sp.svg");
  background-size: auto 100%;
  background-position: center top;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18.1333333333vw;
  pointer-events: none;
}
@media (min-width: 768px) {
  .topIntroduction::before {
    height: 10.15625vw;
    background-image: url("../img/top/introduction/bg_bottom_tb.svg");
    background-size: auto 100%;
    background-position: center top;
    background-repeat: no-repeat;
    bottom: 19.140625vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction::before {
    height: 10.3448275862vw;
    background-image: url("../img/top/introduction/bg_bottom_pc.svg");
    background-size: auto 100%;
    background-position: center top;
    background-repeat: no-repeat;
    bottom: 14.4827586207vw;
  }
}
.topIntroduction::after {
  content: "";
  display: block;
  width: 100%;
  height: 18.4vw;
  background-color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1302083333vw;
  pointer-events: none;
}
@media (min-width: 768px) {
  .topIntroduction::after {
    height: 19.2708333333vw;
    bottom: -0.1302083333vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction::after {
    height: 14.5517241379vw;
    bottom: -0.0689655172vw;
  }
}
.topIntroduction__top {
  margin-bottom: 25.3333333333vw;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .topIntroduction__top {
    margin-bottom: 19.53125vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__top {
    margin-bottom: 13.9310344828vw;
  }
}
.topIntroduction__bg {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.topIntroduction__bg--cloud {
  background-image: url("../img/top/introduction/cloud_sp.svg");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  height: 93.3333333333vw;
  top: -17.3333333333vw;
}
@media (min-width: 768px) {
  .topIntroduction__bg--cloud {
    background-image: url("../img/top/introduction/cloud_tb.svg");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    height: 63.671875vw;
    top: -13.0208333333vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__bg--cloud {
    background-image: url("../img/top/introduction/cloud_pc.svg");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    height: 45.5862068966vw;
    top: -9.8620689655vw;
  }
}
.topIntroduction__bg--line {
  z-index: 1;
  background-image: url("../img/top/introduction/bg_top_sp.svg");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  height: 74.4vw;
  top: -14.6666666667vw;
}
@media (min-width: 768px) {
  .topIntroduction__bg--line {
    background-image: url("../img/top/introduction/bg_top_tb.svg");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    height: 52.8645833333vw;
    top: -9.765625vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__bg--line {
    background-image: url("../img/top/introduction/bg_top_pc.svg");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    height: 39.2413793103vw;
    top: -7.9310344828vw;
  }
}
.topIntroduction__headingBlock {
  color: #19468d;
  text-align: center;
  position: relative;
  z-index: 2;
}
.topIntroduction__headingLead {
  font-size: 5.8666666667vw;
  font-weight: 700;
  line-height: 1.4090909091;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 7.2vw;
  position: relative;
}
@media (min-width: 768px) {
  .topIntroduction__headingLead {
    font-size: 3.6458333333vw;
    line-height: 1.8214285714;
    margin-bottom: 5.46875vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__headingLead {
    font-size: 3.1034482759vw;
    line-height: 1.6666666667;
    margin-bottom: 3.7931034483vw;
  }
}
.topIntroduction__headingLead::before, .topIntroduction__headingLead::after {
  content: "";
  display: block;
  width: 0.5333333333vw;
  height: 8.8vw;
  background-color: #19468d;
  border-radius: 0.5333333333vw;
  position: absolute;
  bottom: -2.6666666667vw;
}
@media (min-width: 768px) {
  .topIntroduction__headingLead::before, .topIntroduction__headingLead::after {
    width: 0.390625vw;
    height: 6.6067708333vw;
    border-radius: 0.390625vw;
    bottom: -1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__headingLead::before, .topIntroduction__headingLead::after {
    width: 0.275862069vw;
    height: 4.8965517241vw;
    border-radius: 0.275862069vw;
    bottom: -0.6896551724vw;
  }
}
.topIntroduction__headingLead::before {
  left: 0;
  transform-origin: left bottom;
  transform: rotate(-45deg);
}
@media (min-width: 768px) {
  .topIntroduction__headingLead::before {
    left: -2.734375vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__headingLead::before {
    left: -0.9655172414vw;
  }
}
.topIntroduction__headingLead::after {
  right: 0;
  transform-origin: right bottom;
  transform: rotate(45deg);
}
@media (min-width: 768px) {
  .topIntroduction__headingLead::after {
    right: -2.734375vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__headingLead::after {
    right: -0.9655172414vw;
  }
}
.topIntroduction__headingText {
  font-size: 6.4vw;
  font-weight: 700;
  line-height: 1.6666666667;
}
@media (min-width: 768px) {
  .topIntroduction__headingText {
    font-size: 4.6875vw;
    line-height: 1.8333333333;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__headingText {
    font-size: 3.6551724138vw;
    line-height: 1.641509434;
  }
}
.topIntroduction__sliderWrapper {
  width: 89.3333333333vw;
  height: 74.6666666667vw;
  margin-inline: auto;
  background-image: url("../img/top/introduction/monitor.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  padding-top: 7.2vw;
  padding-inline: 5.8666666667vw;
}
@media (min-width: 768px) {
  .topIntroduction__sliderWrapper {
    width: 84.6354166667vw;
    height: 70.5729166667vw;
    padding-top: 2.6041666667vw;
    padding-inline: 2.8645833333vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderWrapper {
    width: 62.0689655172vw;
    height: 51.7931034483vw;
    padding-top: 1.9310344828vw;
    padding-inline: 1.5862068966vw;
  }
}
.topIntroduction__sliderWrapper::after {
  content: "";
  display: block;
  width: 32.8vw;
  height: 41.3333333333vw;
  background-image: url("../img/top/introduction/it-chan.png");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -4vw;
  right: 0;
}
@media (min-width: 768px) {
  .topIntroduction__sliderWrapper::after {
    width: 37.7604166667vw;
    height: 47.65625vw;
    bottom: 4.8177083333vw;
    right: -6.5104166667vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderWrapper::after {
    width: 27.6551724138vw;
    height: 34.9655172414vw;
    bottom: 2.4827586207vw;
    right: -5.1034482759vw;
  }
}
.topIntroduction__wave {
  display: block;
  width: 13.3333333333vw;
  height: 7.4666666667vw;
  position: absolute;
  top: -5.3333333333vw;
  left: 50%;
  transform: translate(-50%, -100%);
  transform-origin: bottom;
}
@media (min-width: 768px) {
  .topIntroduction__wave {
    width: 10.9375vw;
    height: 5.9895833333vw;
    top: -3.90625vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__wave {
    width: 7.8620689655vw;
    height: 3.4482758621vw;
    top: -3.0344827586vw;
  }
}
.topIntroduction__slider {
  max-width: 100%;
}
.topIntroduction__slider .slick-list {
  overflow: hidden;
}
.topIntroduction__sliderItem {
  width: 100%;
  outline: none;
}
.topIntroduction__sliderContent {
  display: block;
  padding-bottom: 1.0666666667vw;
}
@media (min-width: 768px) {
  .topIntroduction__sliderContent {
    padding-top: 3.2552083333vw;
    padding-left: 6.7708333333vw;
    padding-bottom: 0.5208333333vw;
    min-height: 42.96875vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderContent {
    padding-top: 3.7931034483vw;
    padding-left: 6.8965517241vw;
    padding-bottom: 0.3448275862vw;
    min-height: 32.0689655172vw;
  }
}
.topIntroduction__sliderTitle {
  color: #19468d;
  font-size: 5.3333333333vw;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 2.1333333333vw;
}
@media (min-width: 768px) {
  .topIntroduction__sliderTitle {
    font-family: "DotGothic16", sans-serif;
    font-size: 4.6875vw;
    font-weight: 400;
    line-height: 1.5833333333;
    margin-bottom: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderTitle {
    font-size: 3.5862068966vw;
    line-height: 1.4615384615;
    margin-bottom: 2.0689655172vw;
  }
}
.topIntroduction__sliderText {
  color: #19468d;
  font-size: 3.2vw;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.15em;
  margin-bottom: 3.7333333333vw;
}
@media (min-width: 768px) {
  .topIntroduction__sliderText {
    font-family: "DotGothic16", sans-serif;
    font-size: 2.0833333333vw;
    font-weight: 400;
    line-height: 1.6875;
    margin-bottom: 3.2552083333vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderText {
    font-size: 1.3793103448vw;
    line-height: 1.65;
    margin-bottom: 2.6206896552vw;
  }
}
.topIntroduction__sliderBtn {
  width: 42.6666666667vw;
}
@media (min-width: 768px) {
  .topIntroduction__sliderBtn {
    width: 39.0625vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderBtn {
    width: 28.9655172414vw;
  }
}
.topIntroduction__sliderControls {
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (min-width: 768px) {
  .topIntroduction__sliderControls {
    bottom: 7.4869791667vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderControls {
    bottom: 9.6896551724vw;
    display: flex;
    column-gap: 1.724137931vw;
  }
}
.topIntroduction__sliderDots {
  margin-bottom: 5.3333333333vw;
  line-height: 1;
}
@media (min-width: 768px) {
  .topIntroduction__sliderDots {
    margin-bottom: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderDots {
    margin-bottom: 0;
  }
}
.topIntroduction__dotList {
  display: inline-flex;
  gap: 4.5333333333vw;
}
@media (min-width: 768px) {
  .topIntroduction__dotList {
    gap: 2.8645833333vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__dotList {
    gap: 1.5172413793vw;
  }
}
.topIntroduction__dotList li.slick-active .topIntroduction__dot {
  background: #38a067;
  transform: scale(2);
}
.topIntroduction__dot {
  width: 1.0666666667vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #89cb51;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, background 0.15s ease;
}
@media (min-width: 768px) {
  .topIntroduction__dot {
    width: 0.5208333333vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__dot {
    width: 0.275862069vw;
  }
}
.topIntroduction__sliderArrows {
  display: flex;
  column-gap: 4vw;
  align-items: center;
}
@media (min-width: 768px) {
  .topIntroduction__sliderArrows {
    column-gap: 1.953125vw;
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderArrows {
    column-gap: 1.0344827586vw;
  }
}
.topIntroduction__sliderArrow {
  width: 9.6vw;
  cursor: pointer;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 0.8vw 0 #5a9a24);
  transition: transform 0.15s ease;
}
@media (min-width: 768px) {
  .topIntroduction__sliderArrow {
    width: 5.7291666667vw;
    filter: drop-shadow(0 0.390625vw 0 #5a9a24);
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderArrow {
    width: 3.0344827586vw;
    filter: drop-shadow(0 0.2068965517vw 0 #5a9a24);
  }
}
.topIntroduction__sliderArrow:active {
  filter: unset;
  transform: translateY(0.8vw);
}
@media (min-width: 768px) {
  .topIntroduction__sliderArrow:active {
    transform: translateY(0.390625vw);
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderArrow:active {
    transform: translateY(0.2068965517vw);
  }
}
@media (min-width: 1200px) {
  .topIntroduction__sliderArrow:hover {
    filter: unset;
    transform: translateY(0.2068965517vw);
  }
}
.topIntroduction__sliderArrowImg {
  display: block;
  width: 100%;
  height: auto;
}

.topItchan {
  background-color: #fff;
  position: relative;
}
.topItchan::before {
  content: "";
  display: block;
  width: 100%;
  height: 20.5333333333vw;
  background-color: #e1f6ff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2666666667vw;
}
@media (min-width: 768px) {
  .topItchan::before {
    height: 20.1822916667vw;
    bottom: -0.1302083333vw;
  }
}
@media (min-width: 1200px) {
  .topItchan::before {
    height: 20.1379310345vw;
    bottom: -0.0689655172vw;
  }
}
.topItchan__outer {
  padding-top: 6.6666666667vw;
  padding-bottom: 20.2666666667vw;
  padding-inline: 5.3333333333vw;
  position: relative;
}
@media (min-width: 768px) {
  .topItchan__outer {
    padding-top: 4.296875vw;
    padding-bottom: 20.0520833333vw;
    padding-inline: 4.1666666667vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__outer {
    padding-top: 3.724137931vw;
    padding-bottom: 16.0689655172vw;
    padding-inline: 3.3103448276vw;
  }
}
.topItchan__outer::before {
  content: "";
  display: block;
  width: auto;
  height: 54.6666666667vw;
  background-image: url("../img/top/itchan/bg_bottom_sp.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
@media (min-width: 768px) {
  .topItchan__outer::before {
    height: 20.0520833333vw;
    background-image: url("../img/top/itchan/bg_bottom_tb.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .topItchan__outer::before {
    height: 20.1379310345vw;
    background-image: url("../img/top/itchan/bg_bottom_pc.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
.topItchan__inner {
  background-color: #fca212;
  position: relative;
  z-index: 1;
  border-radius: 10.6666666667vw;
  padding-top: 17.8666666667vw;
  padding-bottom: 10.9333333333vw;
}
@media (min-width: 768px) {
  .topItchan__inner {
    border-radius: 5.2083333333vw;
    padding-top: 6.25vw;
    padding-bottom: 8.3333333333vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__inner {
    border-radius: 3.8620689655vw;
    padding-top: 5.9310344828vw;
    padding-bottom: 8.5517241379vw;
  }
}
.topItchan__inner::before {
  content: "";
  display: block;
  width: 100vw;
  height: 179.7333333333vw;
  background-image: url("../img/top/itchan/bg_cloud_sp.svg");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  position: absolute;
  left: -5.3333333333vw;
  top: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  .topItchan__inner::before {
    height: 82.1614583333vw;
    background-image: url("../img/top/itchan/bg_cloud_tb.svg");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    left: -4.1666666667vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__inner::before {
    height: 70.5517241379vw;
    background-image: url("../img/top/itchan/bg_cloud_pc.svg");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    left: -3.3103448276vw;
  }
}
.topItchan__indexContainer {
  position: relative;
  z-index: 1;
}
.topItchan__binoculars {
  width: 25.0666666667vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fca212;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -6.6666666667vw);
}
@media (min-width: 768px) {
  .topItchan__binoculars {
    width: 21.3541666667vw;
    transform: translate(-50%, -4.296875vw);
  }
}
@media (min-width: 1200px) {
  .topItchan__binoculars {
    width: 18.4827586207vw;
    transform: translate(-50%, -3.724137931vw);
  }
}
.topItchan__binocularsInner {
  width: 14.1333333333vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8.08vw;
}
@media (min-width: 768px) {
  .topItchan__binocularsInner {
    width: 6.25vw;
    top: 5.078125vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__binocularsInner {
    width: 5.5862068966vw;
    top: 3.4482758621vw;
  }
}
.topItchan__heading {
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  font-size: 5.3333333333vw;
  font-weight: 700;
  position: relative;
  margin-bottom: 35.2vw;
}
@media (min-width: 768px) {
  .topItchan__heading {
    font-size: 3.125vw;
    margin-bottom: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__heading {
    font-size: 2.6896551724vw;
    margin-bottom: 5.3793103448vw;
  }
}
.topItchan__heading--lg {
  font-size: 8.2666666667vw;
  line-height: 1.4516129032;
  letter-spacing: -0.05em;
}
@media (min-width: 768px) {
  .topItchan__heading--lg {
    font-size: 4.5572916667vw;
    line-height: 1.4571428571;
  }
}
@media (min-width: 1200px) {
  .topItchan__heading--lg {
    font-size: 4.1379310345vw;
    line-height: 1.45;
  }
}
.topItchan__heading--mid {
  display: block;
  font-size: 6.6666666667vw;
  line-height: 1.44;
  margin-top: 3.2vw;
}
@media (min-width: 768px) {
  .topItchan__heading--mid {
    font-size: 3.7760416667vw;
    line-height: 1.4482758621;
    margin-top: 2.2135416667vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__heading--mid {
    font-size: 3.3103448276vw;
    line-height: 1.4583333333;
    margin-top: 1.724137931vw;
  }
}
.topItchan__heading--em {
  position: relative;
}
.topItchan__heading--em::before {
  content: "";
  display: block;
  width: 1.3333333333vw;
  height: 1.6vw;
  border-radius: 50%;
  background-color: #2d2d36;
  position: absolute;
  top: -1.0666666667vw;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .topItchan__heading--em::before {
    width: 0.8723958333vw;
    height: 0.9114583333vw;
    top: -0.6510416667vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__heading--em::before {
    width: 0.6206896552vw;
    height: 0.6896551724vw;
    top: -0.3103448276vw;
  }
}
.topItchan__heading::before, .topItchan__heading::after {
  content: "";
  display: block;
  width: 0.5333333333vw;
  height: 8.8vw;
  background-color: #2d2d36;
  border-radius: 0.5333333333vw;
  position: absolute;
  bottom: -2.6666666667vw;
}
@media (min-width: 768px) {
  .topItchan__heading::before, .topItchan__heading::after {
    width: 0.390625vw;
    height: 7.2057291667vw;
    border-radius: 0.390625vw;
    bottom: -1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__heading::before, .topItchan__heading::after {
    width: 0.275862069vw;
    height: 5.6551724138vw;
    border-radius: 0.275862069vw;
    bottom: -0.6896551724vw;
  }
}
.topItchan__heading::before {
  left: 2.6666666667vw;
  transform-origin: left bottom;
  transform: rotate(-45deg);
}
@media (min-width: 768px) {
  .topItchan__heading::before {
    left: -2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__heading::before {
    left: 0;
  }
}
.topItchan__heading::after {
  right: 2.6666666667vw;
  transform-origin: right bottom;
  transform: rotate(45deg);
}
@media (min-width: 768px) {
  .topItchan__heading::after {
    right: -2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__heading::after {
    right: 0;
  }
}
.topItchan__contentWrapper {
  position: relative;
}
.topItchan__contentInner {
  position: relative;
  width: 79.2vw;
  height: 49.6vw;
  background-image: url("../img/top/itchan/balloon_center_sp.svg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  margin-inline: auto;
  margin-bottom: 27.2vw;
}
@media (min-width: 768px) {
  .topItchan__contentInner {
    width: 56.640625vw;
    height: 36.9791666667vw;
    background-image: url("../img/top/itchan/balloon_center_tb.svg");
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__contentInner {
    width: 48.275862069vw;
    height: 30.1379310345vw;
    background-image: url("../img/top/itchan/balloon_center_pc.svg");
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 2.8965517241vw;
  }
}
.topItchan__contentInner--mask {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../img/top/itchan/balloon_center_sp_mask.svg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .topItchan__contentInner--mask {
    background-image: url("../img/top/itchan/balloon_center_tb_mask.svg");
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .topItchan__contentInner--mask {
    background-image: url("../img/top/itchan/balloon_center_pc_mask.svg");
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
  }
}
.topItchan__itchan {
  display: block;
  width: 33.0666666667vw;
  position: absolute;
  bottom: -1.3333333333vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
@media (min-width: 768px) {
  .topItchan__itchan {
    width: 24.8697916667vw;
    bottom: -0.6510416667vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__itchan {
    width: 20.5517241379vw;
    bottom: -0.3448275862vw;
  }
}
.topItchan__itchan::before {
  content: "";
  display: block;
  width: 13.3333333333vw;
  height: 5.8666666667vw;
  background-color: #fca212;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
@media (min-width: 768px) {
  .topItchan__itchan::before {
    width: 9.1145833333vw;
    height: 4.0364583333vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__itchan::before {
    width: 6.8965517241vw;
    height: 3.4482758621vw;
    border-top-left-radius: 1.3793103448vw;
    border-top-right-radius: 1.3793103448vw;
  }
}
.topItchan__balloonGroup {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 3;
}
.topItchan__balloonGroup--top {
  padding-left: 3.52vw;
  padding-right: 2.1066666667vw;
  top: -24.2666666667vw;
}
@media (min-width: 768px) {
  .topItchan__balloonGroup--top {
    padding-left: 13.5026041667vw;
    padding-right: 12.2395833333vw;
    top: -1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__balloonGroup--top {
    padding-left: 19.8620689655vw;
    padding-right: 18.7586206897vw;
    top: -0.7586206897vw;
  }
}
.topItchan__balloonGroup--bottom {
  padding-left: 3.6533333333vw;
  padding-right: 1.6vw;
  bottom: -23.7333333333vw;
}
@media (min-width: 768px) {
  .topItchan__balloonGroup--bottom {
    padding-left: 8.0729166667vw;
    padding-right: 5.9895833333vw;
    bottom: -3.6458333333vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__balloonGroup--bottom {
    padding-left: 16.0689655172vw;
    padding-right: 13.5862068966vw;
    bottom: -3.2413793103vw;
  }
}
.topItchan__balloon--01 {
  width: 35.4666666667vw;
}
@media (min-width: 768px) {
  .topItchan__balloon--01 {
    width: 19.4010416667vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__balloon--01 {
    width: 15.9655172414vw;
  }
}
.topItchan__balloon--02 {
  width: 34.2666666667vw;
}
@media (min-width: 768px) {
  .topItchan__balloon--02 {
    width: 19.8567708333vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__balloon--02 {
    width: 16.3448275862vw;
  }
}
.topItchan__balloon--03 {
  width: 30.2666666667vw;
}
@media (min-width: 768px) {
  .topItchan__balloon--03 {
    width: 19.53125vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__balloon--03 {
    width: 16.1034482759vw;
  }
}
.topItchan__balloon--04 {
  width: 32.1333333333vw;
}
@media (min-width: 768px) {
  .topItchan__balloon--04 {
    width: 21.3541666667vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__balloon--04 {
    width: 17.5862068966vw;
  }
}
.topItchan__btn {
  width: 73.3333333333vw;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .topItchan__btn {
    width: 39.0625vw;
  }
}
@media (min-width: 1200px) {
  .topItchan__btn {
    width: 28.9655172414vw;
  }
}

.topPlay {
  padding-bottom: 35.7333333333vw;
}
@media (min-width: 768px) {
  .topPlay {
    padding-bottom: 8.3333333333vw;
  }
}
@media (min-width: 1200px) {
  .topPlay {
    padding-bottom: 3.5862068966vw;
  }
}
.topPlay__outer {
  position: relative;
}
.topPlay__outer:before {
  content: "";
  display: block;
  width: 100%;
  height: 183.7333333333vw;
  background-image: url("../img/top/play/bg_sp.svg");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  top: 10.6666666667vw;
  z-index: 2;
  pointer-events: none;
}
@media (min-width: 768px) {
  .topPlay__outer:before {
    width: 94.7916666667vw;
    height: 114.3229166667vw;
    background-image: url("../img/top/play/bg_tb.svg");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    top: 4.4270833333vw;
    left: 2.6041666667vw;
    right: unset;
  }
}
@media (min-width: 1200px) {
  .topPlay__outer:before {
    width: 100%;
    height: 80.6896551724vw;
    background-image: url("../img/top/play/bg_pc.svg");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    top: -2.0689655172vw;
    left: 0;
    right: 0;
  }
}
.topPlay__headingBlock {
  padding-top: 21.3333333333vw;
  position: relative;
  margin-bottom: 2.6666666667vw;
  z-index: 1;
}
@media (min-width: 768px) {
  .topPlay__headingBlock {
    padding-top: 13.671875vw;
    margin-bottom: 2.2135416667vw;
  }
}
@media (min-width: 1200px) {
  .topPlay__headingBlock {
    padding-top: 8.3448275862vw;
    margin-bottom: 5.6551724138vw;
  }
}
.topPlay__heading {
  display: block;
  width: 84vw;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .topPlay__heading {
    width: 62.5vw;
  }
}
@media (min-width: 1200px) {
  .topPlay__heading {
    width: 45.3793103448vw;
  }
}
.topPlay__itchan {
  width: 29.0666666667vw;
  position: absolute;
  top: -4vw;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .topPlay__itchan {
    width: 19.53125vw;
    top: -4.5572916667vw;
  }
}
@media (min-width: 1200px) {
  .topPlay__itchan {
    width: 12.4137931034vw;
    top: -3.1724137931vw;
  }
}
.topPlay__modifier {
  display: block;
  width: 2.1333333333vw;
  position: absolute;
}
@media (min-width: 768px) {
  .topPlay__modifier {
    width: 1.8229166667vw;
  }
}
@media (min-width: 1200px) {
  .topPlay__modifier {
    width: 1.1724137931vw;
  }
}
.topPlay__modifier--l1 {
  top: 13.7866666667vw;
  left: 19.92vw;
}
@media (min-width: 768px) {
  .topPlay__modifier--l1 {
    top: 7.2265625vw;
    left: 25.9114583333vw;
  }
}
@media (min-width: 1200px) {
  .topPlay__modifier--l1 {
    top: 4.1379310345vw;
    left: 34.4137931034vw;
  }
}
.topPlay__modifier--l2 {
  top: 7.52vw;
  left: 27.8666666667vw;
}
@media (min-width: 768px) {
  .topPlay__modifier--l2 {
    top: 1.6927083333vw;
    left: 32.9427083333vw;
  }
}
@media (min-width: 1200px) {
  .topPlay__modifier--l2 {
    top: 0.5517241379vw;
    left: 38.9655172414vw;
  }
}
.topPlay__modifier--l3 {
  top: 15.6vw;
  left: 30.96vw;
}
@media (min-width: 768px) {
  .topPlay__modifier--l3 {
    top: 8.8541666667vw;
    left: 35.6770833333vw;
  }
}
@media (min-width: 1200px) {
  .topPlay__modifier--l3 {
    top: 5.2068965517vw;
    left: 40.6896551724vw;
  }
}
.topPlay__modifier--r1 {
  top: 15.6533333333vw;
  right: 33.5733333333vw;
}
@media (min-width: 768px) {
  .topPlay__modifier--r1 {
    top: 8.8541666667vw;
    right: 36.71875vw;
  }
}
@media (min-width: 1200px) {
  .topPlay__modifier--r1 {
    top: 5.2068965517vw;
    right: 41.3793103448vw;
  }
}
.topPlay__modifier--r2 {
  top: 7.5733333333vw;
  right: 28.08vw;
}
@media (min-width: 768px) {
  .topPlay__modifier--r2 {
    top: 1.7578125vw;
    right: 31.9010416667vw;
  }
}
@media (min-width: 1200px) {
  .topPlay__modifier--r2 {
    top: 0.6206896552vw;
    right: 38.275862069vw;
  }
}
.topPlay__modifier--r3 {
  top: 13.7866666667vw;
  right: 21.2533333333vw;
}
@media (min-width: 768px) {
  .topPlay__modifier--r3 {
    top: 7.2265625vw;
    right: 25.9114583333vw;
  }
}
@media (min-width: 1200px) {
  .topPlay__modifier--r3 {
    top: 4.1379310345vw;
    right: 34.3448275862vw;
  }
}
.topPlay__linkBtn {
  width: 49.3333333333vw;
  margin-inline: auto;
  margin-top: 9.0666666667vw;
}
@media (min-width: 768px) {
  .topPlay__linkBtn {
    width: 31.25vw;
    margin-top: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .topPlay__linkBtn {
    width: 19.3103448276vw;
    margin-top: 2.0689655172vw;
  }
}

/*-------------------------------
  スライダー
-------------------------------*/
/* 色の指定 */
.topPlaySlider__item--orange {
  --c1: #fca212;
  --c2: #de8b06;
  --c3: #ffcd7e;
  /* SVGに確実に届かせたい場合は保険で子にも */
}
.topPlaySlider__item--orange .topPlaySlider__cardImg {
  --c1: #fca212;
  --c2: #de8b06;
}

.topPlaySlider__item--green {
  --c1: #4fb721;
  --c2: #309b01;
  --c3: #c6f0ca;
  /* SVGに確実に届かせたい場合は保険で子にも */
}
.topPlaySlider__item--green .topPlaySlider__cardImg {
  --c1: #4fb721;
  --c2: #309b01;
}

.topPlaySlider__item--blue {
  --c1: #4167e6;
  --c2: #2947aa;
  --c3: #c2e6f8;
  /* SVGに確実に届かせたい場合は保険で子にも */
}
.topPlaySlider__item--blue .topPlaySlider__cardImg {
  --c1: #4167e6;
  --c2: #2947aa;
}

.topPlaySlider__item--pink {
  --c1: #ed47b4;
  --c2: #d12897;
  --c3: #fcedf8;
  /* SVGに確実に届かせたい場合は保険で子にも */
}
.topPlaySlider__item--pink .topPlaySlider__cardImg {
  --c1: #ed47b4;
  --c2: #d12897;
}

.topPlaySlider__item--red {
  --c1: #e64141;
  --c2: #d10f0f;
  --c3: #f8c0c1;
  /* SVGに確実に届かせたい場合は保険で子にも */
}
.topPlaySlider__item--red .topPlaySlider__cardImg {
  --c1: #e64141;
  --c2: #d10f0f;
}

/* 共通：見切れ防止 */
.topPlay__sliderBlock {
  opacity: 0;
  overflow: visible;
  margin-inline: auto;
  transition: all 1.5s 1s;
  position: relative;
  z-index: 3;
}
.topPlay__sliderBlock.active {
  opacity: 1;
}
.topPlay__slider {
  padding-bottom: 0.8275862069vw;
}

.topPlaySlider {
  /* ===== SP 既定 ===== */
  --cardW: 83.2vw;
  --open-gap: 12vw;
  --base-gap: 2.6666666667vw;
  --fan-rot-left: -10deg;
  --fan-rot-right: 10deg;
  --fan-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fan-time: 0.14s;
  /* “リング”の平行移動量：1段分（is-L1/R1 のずらし幅） */
  --ring-gap: calc((var(--open-gap) / 2) - var(--base-gap));
  display: flex;
  flex-wrap: nowrap;
  /* TB */
  /* PC */
  /* スライド“見た目幅”（variableWidth なのでここが効く） */
}
@media (min-width: 768px) {
  .topPlaySlider {
    --cardW: 51.0416666667vw;
    --open-gap: 12.3697916667vw;
    --base-gap: 2.6041666667vw;
    --fan-rot-left: -20deg;
    --fan-rot-right: 20deg;
    --ring-gap: calc((var(--open-gap) / 2) - var(--base-gap));
  }
}
@media (min-width: 1200px) {
  .topPlaySlider {
    --cardW: 32.4137931034vw;
    --open-gap: 8.275862069vw;
    --base-gap: 1.3793103448vw;
    /* 角度必要ならここで上書き */
    --ring-gap: calc((var(--open-gap) / 2) - var(--base-gap));
  }
}
@media (min-width: 768px) {
  .topPlaySlider::before, .topPlaySlider::after {
    content: "";
    display: block;
    width: 20.8333333333vw;
    height: 78.125vw;
    position: absolute;
    top: -1.4322916667vw;
    z-index: 1;
  }
}
@media (min-width: 1200px) {
  .topPlaySlider::before, .topPlaySlider::after {
    width: 15.8620689655vw;
    height: 65.9310344828vw;
    top: -10.4827586207vw;
  }
}
.topPlaySlider::before {
  left: 0;
  background: linear-gradient(to right, rgba(225, 246, 255, 0.6), rgba(225, 246, 255, 0));
}
.topPlaySlider::after {
  right: 0;
  background: linear-gradient(to left, rgba(225, 246, 255, 0.6), rgba(225, 246, 255, 0));
}
.topPlaySlider__viewport {
  position: relative;
  width: 100%;
  contain: layout paint;
  padding-top: 2.6666666667vw;
}
@media (min-width: 768px) {
  .topPlaySlider__viewport {
    padding-top: 1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__viewport {
    padding-top: 0.6896551724vw;
  }
}
.topPlaySlider__item {
  /* ベース：translateX→rotate、支点は中央下（左右は内側下角に上書き） */
  --fan-rot: 0deg;
  --fan-shift: 0px;
  margin: 0 var(--base-gap);
  transform: translateX(var(--fan-shift)) rotate(var(--fan-rot));
  transform-origin: 50% 100%;
  transition: transform var(--fan-time) var(--fan-ease);
  flex: 0 0 auto;
  /* variable width 前提で縮ませない */
  backface-visibility: hidden;
  will-change: transform;
}
.topPlaySlider:not(.is-interacting) .topPlaySlider__item:hover .topPlaySlider__heading {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
}
.topPlaySlider:not(.is-interacting) .topPlaySlider__item:hover .topPlaySlider__pointImg {
  transform: scale(1.1);
}
@media (min-width: 1200px) {
  .topPlaySlider:not(.is-interacting) .topPlaySlider__item:hover .c-btn {
    transform: translateY(0.3448275862vw);
    box-shadow: unset;
  }
}
.topPlaySlider__card {
  display: block;
  width: var(--cardW);
  height: auto;
  position: relative;
}
.topPlaySlider__cardImg {
  display: block;
  width: 100%;
  height: auto;
}
.topPlaySlider__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 5.3333333333vw;
  padding-top: 14.5333333333vw;
}
@media (min-width: 768px) {
  .topPlaySlider__content {
    border-radius: 2.6041666667vw;
    padding-top: 8.1510416667vw;
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__content {
    border-radius: 1.3793103448vw;
    padding-top: 5.1724137931vw;
  }
}
.topPlaySlider__heading {
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  color: var(--c1);
  font-size: 4.8vw;
  font-weight: 700;
  line-height: 1.4444444444;
  position: relative;
  margin-bottom: 2.6666666667vw;
}
@media (min-width: 768px) {
  .topPlaySlider__heading {
    font-size: 2.6041666667vw;
    line-height: 1.45;
    margin-bottom: 1.8229166667vw;
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__heading {
    font-size: 1.9310344828vw;
    line-height: 1.4285714286;
    margin-bottom: 0.8275862069vw;
  }
}
.topPlaySlider__heading::before {
  content: "＼";
}
.topPlaySlider__heading::after {
  content: "／";
}
.topPlaySlider__point {
  width: 57.0666666667vw;
  aspect-ratio: 1;
  border-radius: 50%;
  margin-inline: auto;
  background-color: var(--c3);
  border: 1.6vw solid var(--c1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3.8666666667vw;
}
@media (min-width: 768px) {
  .topPlaySlider__point {
    width: 32.5520833333vw;
    border-width: 1.0416666667vw;
    margin-bottom: 2.2135416667vw;
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__point {
    width: 20.6896551724vw;
    border-width: 0.5517241379vw;
    margin-bottom: 1.3793103448vw;
  }
}
.topPlaySlider__btn {
  width: 56.8vw;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .topPlaySlider__btn {
    width: 31.9010416667vw;
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__btn {
    width: 20.6896551724vw;
  }
}
.topPlaySlider__btn .c-btn {
  background-color: var(--c1);
  box-shadow: 0 1.0666666667vw 0 var(--c2);
}
@media (min-width: 768px) {
  .topPlaySlider__btn .c-btn {
    box-shadow: 0 0.5208333333vw 0 var(--c2);
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__btn .c-btn {
    box-shadow: 0 0.3448275862vw 0 var(--c2);
  }
}
.topPlaySlider__bottomWrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 55%);
}
@media (min-width: 768px) {
  .topPlaySlider__bottomWrapper {
    bottom: -1.3020833333vw;
    transform: translateX(-50%);
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__bottomWrapper {
    bottom: -0.6896551724vw;
  }
}
.topPlaySlider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.3333333333vw;
  margin-top: 5.3333333333vw;
  padding-bottom: 0.5333333333vw;
}
@media (min-width: 768px) {
  .topPlaySlider__controls {
    gap: 3.2552083333vw;
    margin-top: 6.1197916667vw;
    padding-bottom: 0.2604166667vw;
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__controls {
    gap: 1.724137931vw;
    margin-top: 3.2413793103vw;
    padding-bottom: 0.1379310345vw;
  }
}
.topPlaySlider__arrow {
  appearance: none;
  width: 10.6666666667vw;
  cursor: pointer;
  transition: transform 0.15s ease;
}
@media (min-width: 768px) {
  .topPlaySlider__arrow {
    width: 6.25vw;
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__arrow {
    width: 3.3103448276vw;
  }
}
.topPlaySlider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}
.topPlaySlider__arrowImg {
  filter: drop-shadow(0 0.8vw 0 #1352aa);
}
@media (min-width: 768px) {
  .topPlaySlider__arrowImg {
    filter: drop-shadow(0 0.390625vw 0 #1352aa);
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__arrowImg {
    filter: drop-shadow(0 0.2068965517vw 0 #1352aa);
  }
}
.topPlaySlider__arrowImg:active {
  filter: unset;
  transform: translateY(0.8vw);
}
@media (min-width: 768px) {
  .topPlaySlider__arrowImg:active {
    transform: translateY(0.390625vw);
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__arrowImg:active {
    transform: translateY(0.2068965517vw);
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__arrowImg:hover {
    filter: unset;
    transform: translateY(0.2068965517vw);
  }
}
.topPlaySlider__dots {
  display: inline-flex;
  align-items: center;
  gap: 5.3333333333vw;
  padding-bottom: 0.5333333333vw;
  line-height: 1;
  list-style: none;
}
@media (min-width: 768px) {
  .topPlaySlider__dots {
    gap: 2.8645833333vw;
    padding-bottom: 0.390625vw;
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__dots {
    gap: 1.5172413793vw;
    padding-bottom: 0.2068965517vw;
  }
}
.topPlaySlider__dots li.slick-active .topPlaySlider__dot {
  transform: scale(1.6);
}
@media (min-width: 768px) {
  .topPlaySlider__dots li.slick-active .topPlaySlider__dot {
    transform: scale(1.67);
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__dots li.slick-active .topPlaySlider__dot {
    transform: scale(1.67);
  }
}
.topPlaySlider__dot {
  width: 1.3333333333vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #3e8ce6;
  cursor: pointer;
  transition: transform 0.15s ease;
}
@media (min-width: 768px) {
  .topPlaySlider__dot {
    width: 0.78125vw;
  }
}
@media (min-width: 1200px) {
  .topPlaySlider__dot {
    width: 0.4137931034vw;
  }
}

/* ---------------------------------------
  KV
--------------------------------------- */
.lowerKv {
  height: 144vw;
  padding-top: 40vw;
}
@media (min-width: 768px) {
  .lowerKv {
    height: 41.40625vw;
    padding-top: 9.1145833333vw;
  }
}
@media (min-width: 1200px) {
  .lowerKv {
    height: 41.3793103448vw;
    padding-top: 8.7586206897vw;
  }
}
.lowerKv--low {
  height: 112vw;
  padding-top: 36vw;
}
@media (min-width: 768px) {
  .lowerKv--low {
    height: 35.8072916667vw;
    padding-top: 12.890625vw;
  }
}
@media (min-width: 1200px) {
  .lowerKv--low {
    height: 35.8620689655vw;
    padding-top: 11.724137931vw;
  }
}

/* ---------------------------------------
  ページタイトル
--------------------------------------- */
.lowerPageTitle {
  text-align: center;
  font-size: 7.4666666667vw;
  font-weight: 700;
  line-height: 1.5;
  color: #19468d;
  height: 21.8666666667vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .lowerPageTitle {
    font-size: 3.6458333333vw;
    height: 10.6770833333vw;
  }
}
@media (min-width: 1200px) {
  .lowerPageTitle {
    font-size: 3.9310344828vw;
    line-height: 1.4385964912;
    height: 11.5862068966vw;
  }
}
.lowerPageTitle--3rd {
  font-size: 6.6666666667vw;
  height: 20vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .lowerPageTitle--3rd {
    text-align: left;
    font-size: 3.125vw;
    height: 10.0260416667vw;
    justify-content: flex-start;
  }
}
@media (min-width: 1200px) {
  .lowerPageTitle--3rd {
    font-size: 3.2413793103vw;
    line-height: 1.6382978723;
    height: 10.6206896552vw;
  }
}
.lowerPageTitle--white {
  color: #fff;
}

.lowerSecHeading {
  text-align: center;
  font-size: 5.3333333333vw;
  font-weight: 700;
  line-height: 1.625;
  color: #19468d;
  margin-bottom: 8vw;
}
@media (min-width: 768px) {
  .lowerSecHeading {
    font-size: 2.6041666667vw;
    line-height: 1.45;
    margin-bottom: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .lowerSecHeading {
    text-align: start;
    font-size: 2.2068965517vw;
    line-height: 1.625;
    margin-bottom: 2.7586206897vw;
  }
}

/* ---------------------------------------
  パンくずリスト
--------------------------------------- */
.lowerBreadcrumb {
  height: 32vw;
  margin-top: -16vw;
  background-image: url("../img/lower/common/breadcrumb_bg_sp.png");
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  font-size: 2.9333333333vw;
  font-weight: 700;
  line-height: 1.4545454545;
  position: relative;
}
@media (min-width: 768px) {
  .lowerBreadcrumb {
    height: 21.3541666667vw;
    margin-top: -6.5104166667vw;
    background-image: url("../img/lower/common/breadcrumb_bg_tb.png");
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    font-size: 1.5625vw;
    line-height: 1.4166666667;
    display: block;
    padding-top: 7.5520833333vw;
  }
}
@media (min-width: 1200px) {
  .lowerBreadcrumb {
    height: 21.3793103448vw;
    margin-top: -6vw;
    background-image: url("../img/lower/common/breadcrumb_bg_pc.png");
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    font-size: 0.8965517241vw;
    line-height: 1.4615384615;
    padding-top: 8.275862069vw;
  }
}
.lowerBreadcrumb::before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background-color: #effaff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: -1;
}
.lowerBreadcrumb__list {
  display: flex;
  column-gap: 2.6666666667vw;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  white-space: nowrap;
  touch-action: pan-x;
  padding-bottom: 1.6vw;
}
@media (min-width: 768px) {
  .lowerBreadcrumb__list {
    column-gap: 1.3020833333vw;
    padding-bottom: 0.78125vw;
  }
}
@media (min-width: 1200px) {
  .lowerBreadcrumb__list {
    column-gap: 1.0344827586vw;
    padding-bottom: 0.4137931034vw;
  }
}
.lowerBreadcrumb__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: max-content;
}
.lowerBreadcrumb__link, .lowerBreadcrumb__current {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-block: 1.6vw;
}
@media (min-width: 768px) {
  .lowerBreadcrumb__link, .lowerBreadcrumb__current {
    padding-block: 0.78125vw;
  }
}
@media (min-width: 1200px) {
  .lowerBreadcrumb__link, .lowerBreadcrumb__current {
    padding-block: 0.4137931034vw;
  }
}
.lowerBreadcrumb__link::before, .lowerBreadcrumb__current::before {
  content: "";
  display: block;
  width: 2.1333333333vw;
  height: 1.3333333333vw;
  border-radius: 50%;
  background-color: #89cb51;
  margin-right: 2.6666666667vw;
}
@media (min-width: 768px) {
  .lowerBreadcrumb__link::before, .lowerBreadcrumb__current::before {
    width: 1.171875vw;
    height: 0.78125vw;
    margin-right: 1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .lowerBreadcrumb__link::before, .lowerBreadcrumb__current::before {
    width: 0.6896551724vw;
    height: 0.4827586207vw;
    margin-right: 1.0344827586vw;
  }
}
@media (min-width: 1200px) {
  .lowerBreadcrumb__link:hover {
    color: #89cb51;
  }
}
.lowerBreadcrumb__item--home {
  text-transform: uppercase;
}
.lowerBreadcrumb__item--home > .lowerBreadcrumb__link::before {
  width: 4.2666666667vw;
  height: 4.2666666667vw;
  background-color: transparent;
  background-image: url("../img/lower/common/icon_home.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 1.3333333333vw;
  border-radius: 0;
}
@media (min-width: 768px) {
  .lowerBreadcrumb__item--home > .lowerBreadcrumb__link::before {
    width: 2.0833333333vw;
    height: 2.0833333333vw;
    margin-right: 0.6510416667vw;
  }
}
@media (min-width: 1200px) {
  .lowerBreadcrumb__item--home > .lowerBreadcrumb__link::before {
    width: 1.3793103448vw;
    height: 1.3793103448vw;
    margin-right: 0.3448275862vw;
  }
}
.lowerBreadcrumb__link:focus-visible {
  outline: 2px solid #3e8ce6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* =======================================
  下層のデフォルトのセクション
  lowerDefaultSection
    SP: 縦積み Grid
    TB: 画像だけ float で回り込み（flow-root）
    PC: Grid + float解除
======================================= */
.lowerDefaultSection {
  position: relative;
  overflow: visible;
  padding-top: 2.6666666667vw;
  padding-bottom: 21.3333333333vw;
  /* 余白バリエーション */
  /* セクション下端の雲（次セクションへ1px重ねる） */
  /* 背景の色味違い（雲の絵柄差し替え） */
  /* 雲を表示しない（後方互換で --noBg も同義に） */
  /* ====== 中身 ====== */
}
@media (min-width: 768px) {
  .lowerDefaultSection {
    padding-top: 0;
    padding-bottom: 9.8958333333vw;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection {
    padding-bottom: 8.5517241379vw;
  }
}
.lowerDefaultSection--pt30 {
  padding-top: 8vw;
}
@media (min-width: 768px) {
  .lowerDefaultSection--pt30 {
    padding-top: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection--pt30 {
    padding-top: 2.7586206897vw;
  }
}
.lowerDefaultSection--pbNarrow {
  padding-bottom: 6.4vw;
}
@media (min-width: 768px) {
  .lowerDefaultSection--pbNarrow {
    padding-bottom: 5.859375vw;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection--pbNarrow {
    padding-bottom: 3.4482758621vw;
  }
}
.lowerDefaultSection--pbWide {
  padding-bottom: 21.3333333333vw;
}
@media (min-width: 768px) {
  .lowerDefaultSection--pbWide {
    padding-bottom: 14.9739583333vw;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection--pbWide {
    padding-bottom: 13.1034482759vw;
  }
}
.lowerDefaultSection::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -0.2666666667vw;
  width: 100%;
  height: 16vw;
  pointer-events: none;
  display: block;
  background-image: url("../img/lower/common/sec_bg_cloud_pale_sp.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerDefaultSection::after {
    height: 13.8020833333vw;
    bottom: -0.1302083333vw;
    background-image: url("../img/lower/common/sec_bg_cloud_pale_tb.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection::after {
    height: 13.7931034483vw;
    bottom: -0.0689655172vw;
    background-image: url("../img/lower/common/sec_bg_cloud_pale_pc.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
.lowerDefaultSection--pale {
  background-color: #effaff;
}
.lowerDefaultSection--pale::after {
  background-image: url("../img/lower/common/sec_bg_cloud_sp.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerDefaultSection--pale::after {
    background-image: url("../img/lower/common/sec_bg_cloud_tb.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection--pale::after {
    background-image: url("../img/lower/common/sec_bg_cloud_pc.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
.lowerDefaultSection--noSep::after, .lowerDefaultSection--noBg::after {
  content: none !important;
}
.lowerDefaultSection__inner {
  position: relative;
  z-index: 1;
  /* TB: 画像だけ回り込み（clearfix不要） */
}
@media (min-width: 768px) {
  .lowerDefaultSection__inner {
    display: flow-root;
    padding-inline: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection__inner {
    padding-right: 4.4827586207vw;
    padding-left: 47.2413793103vw;
    min-height: 44.1379310345vw;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection__inner--reverse {
    padding-right: 47.2413793103vw;
    padding-left: 4.4827586207vw;
  }
}
.lowerDefaultSection__title {
  grid-area: title;
}
.lowerDefaultSection__art {
  grid-area: art;
  margin-bottom: 8vw;
  /* TB: 左（または右）に float してテキスト回り込み */
  /* PC: float 解除 */
}
@media (min-width: 768px) {
  .lowerDefaultSection__art {
    float: left;
    width: 45.0520833333vw;
    margin-right: 2.6041666667vw;
    margin-bottom: 2.6041666667vw;
    shape-outside: margin-box;
  }
  .lowerDefaultSection__art--reverse {
    float: right;
    margin-left: 2.6041666667vw;
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection__art {
    float: none;
    width: 48.275862069vw;
    height: 41.3793103448vw;
    overflow: hidden;
    margin: 0;
    position: absolute;
    top: 2.7586206897vw;
    left: 0;
  }
  .lowerDefaultSection__art img {
    display: block;
    width: 100%;
    height: auto;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .lowerDefaultSection__art img {
    width: 55.1724137931vw;
    object-fit: cover;
    object-position: -6.8965517241vw 0;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection__art--reverse {
    position: absolute;
    top: 2.7586206897vw;
    right: 0;
    left: unset;
  }
  .lowerDefaultSection__art--reverse img {
    object-position: 0 0;
  }
}
.lowerDefaultSection__text {
  grid-area: text;
  padding-inline: 5.3333333333vw;
  margin-bottom: 8vw;
  font-weight: 700;
  color: #19468d;
}
@media (min-width: 768px) {
  .lowerDefaultSection__text {
    padding: 0;
    margin-bottom: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection__text {
    margin-bottom: 4.1379310345vw;
  }
}
.lowerDefaultSection__text--noMb {
  margin-bottom: 0;
}
.lowerDefaultSection__btn {
  grid-area: btn;
  width: 73.3333333333vw;
  margin-inline: auto;
  padding-bottom: 2.6666666667vw;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .lowerDefaultSection__btn {
    clear: both;
    display: flex;
    width: 39.0625vw;
    margin-top: 2.0833333333vw;
    padding-bottom: 1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .lowerDefaultSection__btn {
    width: 28.9655172414vw;
    margin: 0;
    padding-bottom: 0.6896551724vw;
  }
}

.lowerSummarySection {
  background-color: #fff;
  position: relative;
  padding-bottom: 21.3333333333vw;
}
@media (min-width: 768px) {
  .lowerSummarySection {
    padding-bottom: 14.3229166667vw;
  }
}
@media (min-width: 1200px) {
  .lowerSummarySection {
    padding-bottom: 15.4482758621vw;
  }
}
.lowerSummarySection::before {
  content: "";
  display: block;
  width: 100%;
  height: 21.3333333333vw;
  position: absolute;
  left: 0;
  right: 0;
  top: -18.4vw;
  pointer-events: none;
  background-image: url("../img/lower/common/sec_bg_cloud_white_sp.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerSummarySection::before {
    height: 10.4166666667vw;
    top: -5.078125vw;
    background-image: url("../img/lower/common/sec_bg_cloud_white_tb.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .lowerSummarySection::before {
    height: 10.3448275862vw;
    top: -5.1724137931vw;
    background-image: url("../img/lower/common/sec_bg_cloud_white_pc.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
.lowerSummarySection__outer {
  position: relative;
  z-index: 1;
}
.lowerSummarySection__it-chan {
  display: block;
  width: 29.8666666667vw;
  margin-inline: auto;
  margin-bottom: -3.2vw;
}
@media (min-width: 768px) {
  .lowerSummarySection__it-chan {
    width: 13.8020833333vw;
    margin-bottom: -1.5625vw;
  }
}
@media (min-width: 1200px) {
  .lowerSummarySection__it-chan {
    width: 13.7931034483vw;
    margin-bottom: -1.6551724138vw;
  }
}
.lowerSummarySection__title {
  background-color: #3e8ce6;
  color: #fff;
  border-radius: 2.6666666667vw;
  min-height: 20.8vw;
  padding: 2.6666666667vw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 4.8vw;
  font-weight: 700;
  line-height: 1.6111111111;
  margin-bottom: 7.4666666667vw;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .lowerSummarySection__title {
    border-radius: 1.953125vw;
    padding: 1.3020833333vw 2.6041666667vw;
    min-height: 5.9895833333vw;
    font-size: 2.34375vw;
    line-height: 1.4444444444;
    margin-bottom: 1.5625vw;
  }
}
@media (min-width: 1200px) {
  .lowerSummarySection__title {
    border-radius: 1.3793103448vw;
    padding: 1.3793103448vw 2.0689655172vw;
    min-height: 5.9310344828vw;
    font-size: 2.2068965517vw;
    line-height: 1.5;
    margin-bottom: 2.7586206897vw;
  }
}
.lowerSummarySection__text {
  font-weight: 700;
  color: #19468d;
}
.lowerSummarySection__modifier {
  position: absolute;
  top: 0;
}
@media (min-width: 768px) {
  .lowerSummarySection__modifier--sp {
    display: none;
  }
}
@media (max-width: 767px) {
  .lowerSummarySection__modifier--tb {
    display: none;
  }
}
.lowerSummarySection__modifier--sp-01 {
  width: 19.7333333333vw;
  left: 0;
  transform: translate(5.3333333333vw, 2.6666666667vw);
}
.lowerSummarySection__modifier--sp-02 {
  width: 10.4vw;
  right: 0;
  transform: translate(-11.7333333333vw, 0);
}
.lowerSummarySection__modifier--sp-03 {
  width: 16vw;
  right: 0;
  transform: translate(4vw, 10.6666666667vw);
}
.lowerSummarySection__modifier--tb-01 {
  width: 5.3385416667vw;
  left: 0;
  top: unset;
  bottom: 0;
  transform: translate(1.3020833333vw, 1.3020833333vw);
}
@media (min-width: 1200px) {
  .lowerSummarySection__modifier--tb-01 {
    width: 6.0689655172vw;
    transform: translate(2.5517241379vw, 7.2413793103vw);
  }
}
.lowerSummarySection__modifier--tb-02 {
  width: 13.671875vw;
  left: 0;
  transform: translate(5.3385416667vw, 0.6510416667vw);
}
@media (min-width: 1200px) {
  .lowerSummarySection__modifier--tb-02 {
    width: 15.5172413793vw;
    transform: translate(4.0689655172vw, 0);
  }
}
.lowerSummarySection__modifier--tb-03 {
  width: 7.6822916667vw;
  right: 0;
  transform: translate(-4.1666666667vw, 2.6041666667vw);
}
@media (min-width: 1200px) {
  .lowerSummarySection__modifier--tb-03 {
    width: 8.8275862069vw;
    transform: translate(-5.1034482759vw, 3.1034482759vw);
  }
}
.lowerSummarySection__modifier--tb-04 {
  width: 19.921875vw;
  top: unset;
  bottom: 0;
  right: 0;
  transform: translate(6.3802083333vw, 7.8125vw);
}
@media (min-width: 1200px) {
  .lowerSummarySection__modifier--tb-04 {
    width: 22.9655172414vw;
    transform: translate(6.2068965517vw, 11.724137931vw);
  }
}

.lowerMore {
  position: relative;
  /* ---------------------------------------
    装飾の雲
  --------------------------------------- */
}
.lowerMore::before {
  content: "";
  display: block;
  width: 100%;
  height: 16vw;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * 16vw + 1px);
  pointer-events: none;
  background-image: url("../img/lower/common/sec_bg_cloud_more_sp.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerMore::before {
    height: 11.0677083333vw;
    top: calc(-1 * 11.0677083333vw + 1px);
    background-image: url("../img/lower/common/sec_bg_cloud_more_tb.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .lowerMore::before {
    height: 11.0344827586vw;
    top: calc(-1 * 11.0344827586vw + 1px);
    background-image: url("../img/lower/common/sec_bg_cloud_more_pc.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
.lowerMore__outer {
  padding-top: 17.0666666667vw;
  padding-bottom: 23.4666666667vw;
  position: relative;
}
@media (min-width: 768px) {
  .lowerMore__outer {
    padding-top: 6.25vw;
    padding-bottom: 11.4583333333vw;
  }
}
@media (min-width: 1200px) {
  .lowerMore__outer {
    padding-top: 5.724137931vw;
    padding-bottom: 8.8275862069vw;
  }
}
.lowerMore__box {
  width: 89.3333333333vw;
  margin-inline: auto;
  background-color: #effaff;
  border-radius: 5.3333333333vw;
  padding-top: 4vw;
  padding-right: 4vw;
  padding-bottom: 5.0666666667vw;
  padding-left: 32vw;
  position: relative;
}
@media (min-width: 768px) {
  .lowerMore__box {
    width: 58.59375vw;
    margin-left: 21.2239583333vw;
    border-radius: 4.1666666667vw;
    padding-top: 3.2552083333vw;
    padding-right: 4.5572916667vw;
    padding-bottom: 3.7760416667vw;
    padding-left: 14.9739583333vw;
  }
}
@media (min-width: 1200px) {
  .lowerMore__box {
    width: 60.3448275862vw;
    margin-left: 24.275862069vw;
    border-radius: 3.8620689655vw;
    padding-top: 3.4482758621vw;
    padding-right: 4.1379310345vw;
    padding-bottom: 3.7931034483vw;
    padding-left: 13.724137931vw;
  }
}
.lowerMore__box::before {
  content: "";
  display: block;
  width: 41.0666666667vw;
  height: 38.4vw;
  background-image: url("../img/lower/common/it-chan_02.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-6.4vw, -50%);
  will-change: transform;
}
@media (min-width: 768px) {
  .lowerMore__box::before {
    width: 23.4375vw;
    height: 22.0052083333vw;
    left: 0;
    transform: translate(-8.984375vw, -50%);
  }
}
@media (min-width: 1200px) {
  .lowerMore__box::before {
    width: 23.4482758621vw;
    height: 22.6206896552vw;
    left: 0;
    transform: translate(-11.1724137931vw, -50%);
  }
}
.lowerMore__content {
  position: relative;
  z-index: 1;
}
.lowerMore__text {
  text-align: center;
  font-size: 4.8vw;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: #19468d;
  margin-bottom: 2.6666666667vw;
}
@media (min-width: 768px) {
  .lowerMore__text {
    font-size: 2.2135416667vw;
    line-height: 1.4705882353;
    margin-bottom: 1.953125vw;
  }
}
@media (min-width: 1200px) {
  .lowerMore__text {
    text-align: left;
    font-size: 2.4827586207vw;
    line-height: 1.4444444444;
    margin-bottom: 2.0689655172vw;
  }
}
@media (min-width: 1200px) {
  .lowerMore__btn {
    width: 28.9655172414vw;
  }
}
.lowerMore__btn .c-btn--bgBlueSmall {
  box-shadow: 0 0.5333333333vw 0 #2447a8;
}
@media (min-width: 768px) {
  .lowerMore__btn .c-btn--bgBlueSmall {
    box-shadow: 0 0.390625vw 0 #2447a8;
  }
}
@media (min-width: 1200px) {
  .lowerMore__btn .c-btn--bgBlueSmall {
    box-shadow: 0 0.4137931034vw 0 #2447a8;
  }
}
.lowerMore__cloud {
  position: absolute;
  z-index: 1;
  will-change: transform;
}
.lowerMore__cloud--01 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23fff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 18.6666666667vw;
  height: calc(18.6666666667vw * 0.5751702239);
}
@media (min-width: 768px) {
  .lowerMore__cloud--01 {
    width: 10.4166666667vw;
    height: calc(10.4166666667vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .lowerMore__cloud--01 {
    width: 10.3448275862vw;
    height: calc(10.3448275862vw * 0.5751702239);
  }
}
.lowerMore__cloud--01 {
  top: 46.6666666667vw;
  left: 0;
  transform: translateX(-8vw);
}
@media (min-width: 768px) {
  .lowerMore__cloud--01 {
    top: unset;
    bottom: 5.859375vw;
    left: 0;
    transform: translateX(7.1614583333vw);
  }
}
@media (min-width: 1200px) {
  .lowerMore__cloud--01 {
    bottom: 3.4482758621vw;
    left: 0;
    transform: translateX(5.5172413793vw);
  }
}
.lowerMore__cloud--02 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23fff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 16.8vw;
  height: calc(16.8vw * 0.5751702239);
}
@media (min-width: 768px) {
  .lowerMore__cloud--02 {
    width: 16.6666666667vw;
    height: calc(16.6666666667vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .lowerMore__cloud--02 {
    width: 16.5517241379vw;
    height: calc(16.5517241379vw * 0.5751702239);
  }
}
.lowerMore__cloud--02 {
  top: 2.6666666667vw;
  left: 0;
  transform: translateX(17.3333333333vw);
}
@media (min-width: 768px) {
  .lowerMore__cloud--02 {
    top: -4.0364583333vw;
    left: 0;
    transform: translateX(-4.296875vw);
  }
}
@media (min-width: 1200px) {
  .lowerMore__cloud--02 {
    top: -4.4137931034vw;
    right: 0;
    transform: translateX(2.8965517241vw);
  }
}
.lowerMore__cloud--03 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23fff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 22.1333333333vw;
  height: calc(22.1333333333vw * 0.5751702239);
}
@media (min-width: 768px) {
  .lowerMore__cloud--03 {
    width: 12.5vw;
    height: calc(12.5vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .lowerMore__cloud--03 {
    width: 12.4137931034vw;
    height: calc(12.4137931034vw * 0.5751702239);
  }
}
.lowerMore__cloud--03 {
  top: 9.6vw;
  right: 0;
  transform: translateX(5.0666666667vw);
}
@media (min-width: 768px) {
  .lowerMore__cloud--03 {
    top: unset;
    bottom: 26.3020833333vw;
    right: 0;
    transform: translateX(-14.1927083333vw);
  }
}
@media (min-width: 1200px) {
  .lowerMore__cloud--03 {
    bottom: 23.7931034483vw;
    right: 0;
    transform: translateX(-11.4482758621vw);
  }
}
.lowerMore__cloud--04 {
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187.694 107.956'><path d='M153.609,38.45A53.987,53.987,0,0,0,54.7,27.791a41.217,41.217,0,1,0-13.483,80.165H152.932a34.756,34.756,0,0,0,.681-69.506Z' fill='%23fff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 14.9333333333vw;
  height: calc(14.9333333333vw * 0.5751702239);
}
@media (min-width: 768px) {
  .lowerMore__cloud--04 {
    width: 15.234375vw;
    height: calc(15.234375vw * 0.5751702239);
  }
}
@media (min-width: 1450px) {
  .lowerMore__cloud--04 {
    width: 15.1724137931vw;
    height: calc(15.1724137931vw * 0.5751702239);
  }
}
.lowerMore__cloud--04 {
  top: 58.4vw;
  right: 0;
  transform: translateX(-28.5333333333vw);
}
@media (min-width: 768px) {
  .lowerMore__cloud--04 {
    top: unset;
    bottom: 11.1979166667vw;
    right: 0;
    transform: translateX(4.4270833333vw);
  }
}
@media (min-width: 1200px) {
  .lowerMore__cloud--04 {
    bottom: 9.0344827586vw;
    right: 0;
    transform: translateX(6.5517241379vw);
  }
}

/* ---------------------------------------
  modal 本体
--------------------------------------- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
}
.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.modal__body {
  padding: 16vw 5.3333333333vw 8vw;
  width: 89.3333333333vw;
  max-height: 92vh;
  background: #fff;
  border-radius: 10.6666666667vw;
  position: relative;
}
@media (min-width: 768px) {
  .modal__body {
    width: 92.1875vw;
    border-radius: 5.2083333333vw;
    max-height: 90vh;
    padding: 7.8125vw 5.2083333333vw 5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .modal__body {
    width: 80vw;
    max-width: 1160px;
    padding: min(4.1379310345vw, 60px) min(5.5172413793vw, 80px);
    border-radius: min(2.7586206897vw, 40px);
  }
}
.modal__scrollWrapper {
  overflow-y: auto;
  margin-right: -2.6666666667vw;
  padding-right: 2.6666666667vw;
  padding-bottom: 2.6666666667vw;
  max-height: calc(92vh - 29.3333333333vw);
}
@media (min-width: 768px) {
  .modal__scrollWrapper {
    margin-right: -2.6041666667vw;
    padding-right: 2.6041666667vw;
    padding-bottom: 1.3020833333vw;
    max-height: calc(90vh - 15.625vw);
  }
}
@media (min-width: 1200px) {
  .modal__scrollWrapper {
    margin-top: min(1.3793103448vw, 20px);
    margin-right: min(-1.724137931vw, -25px);
    padding-right: min(1.724137931vw, 25px);
    padding-bottom: min(1.3793103448vw, 20px);
    max-height: calc(90vh - min(9.6551724138vw, 140px));
  }
}
.modal__scrollWrapper::-webkit-scrollbar {
  background: #fff;
  width: 1.0666666667vw;
  height: 1.0666666667vw;
  border-radius: 5.3333333333vw;
}
@media (min-width: 768px) {
  .modal__scrollWrapper::-webkit-scrollbar {
    width: 0.78125vw;
    height: 0.78125vw;
  }
}
@media (min-width: 1200px) {
  .modal__scrollWrapper::-webkit-scrollbar {
    width: min(0.5517241379vw, 8px);
    height: min(0.5517241379vw, 8px);
  }
}
.modal__scrollWrapper::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 5.3333333333vw;
}
.modal__title {
  font-size: 5.3333333333vw;
  font-weight: 700;
  line-height: 1.8;
  color: #19468d;
}
@media (min-width: 768px) {
  .modal__title {
    font-size: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .modal__title {
    font-size: min(2.2068965517vw, 32px);
  }
}
.modal__title--center {
  text-align: center;
}
.modal__image {
  text-align: center;
  margin-top: 5.3333333333vw;
}
@media (min-width: 768px) {
  .modal__image {
    margin-top: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .modal__image {
    margin-top: min(2.7586206897vw, 40px);
  }
}
.modal__image img {
  max-width: 100%;
  height: auto;
  border-radius: 2.6666666667vw;
}
@media (min-width: 768px) {
  .modal__image img {
    border-radius: 1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .modal__image img {
    border-radius: min(0.6896551724vw, 10px);
  }
}
.modal__text {
  margin-top: 5.3333333333vw;
  font-size: 3.7333333333vw;
  line-height: 2;
  font-weight: 700;
  color: #2d2d36;
}
@media (min-width: 768px) {
  .modal__text {
    margin-top: 2.6041666667vw;
    font-size: 1.8229166667vw;
  }
}
@media (min-width: 1200px) {
  .modal__text {
    margin-top: min(2.0689655172vw, 30px);
    font-size: min(1.1034482759vw, 16px);
  }
}
.modal__openWrapper {
  border-radius: 5.3333333333vw;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
@media (min-width: 768px) {
  .modal__openWrapper {
    border-radius: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .modal__openWrapper {
    border-radius: 2.7586206897vw;
  }
}
.modal__openWrapper:active .modal__openBtn {
  transform: translateY(0.5333333333vw);
  box-shadow: unset;
}
@media (min-width: 768px) {
  .modal__openWrapper:active {
    transform: translateY(0.2604166667vw);
  }
}
@media (min-width: 1200px) {
  .modal__openWrapper:active {
    transform: translateY(0.1379310345vw);
  }
}
@media (min-width: 1200px) {
  .modal__openWrapper:hover .modal__openBtn {
    transform: translateY(0.1379310345vw);
    box-shadow: unset;
  }
}
.modal__openImage {
  transition: 0.3s ease;
}
.modal__openImage:hover {
  transform: scale(1.1);
}
.modal__openBtn {
  width: 12.8vw;
  height: 9.0666666667vw;
  background-color: #89cb51;
  box-shadow: 0 0.5333333333vw 0 #5a9a24;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  transition: 0.3s ease;
  position: absolute;
  right: 5.3333333333vw;
  bottom: 5.3333333333vw;
}
@media (min-width: 768px) {
  .modal__openBtn {
    width: 6.25vw;
    height: 4.4270833333vw;
    box-shadow: 0 0.2604166667vw 0 #5a9a24;
    right: 2.6041666667vw;
    bottom: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .modal__openBtn {
    width: 3.3103448276vw;
    height: 2.3448275862vw;
    box-shadow: 0 0.1379310345vw 0 #5a9a24;
    right: 1.3793103448vw;
    bottom: 1.3793103448vw;
  }
}
.modal__openBtn--job {
  position: unset;
}
.modal__openBtn--orange {
  background-color: #fca212;
  box-shadow: 0 0.5333333333vw 0 #de8b06;
}
@media (min-width: 768px) {
  .modal__openBtn--orange {
    box-shadow: 0 0.2604166667vw 0 #de8b06;
  }
}
@media (min-width: 1200px) {
  .modal__openBtn--orange {
    box-shadow: 0 0.1379310345vw 0 #de8b06;
  }
}
.modal__openBtn--purple {
  background-color: #9c33ea;
  box-shadow: 0 0.5333333333vw 0 #792faf;
}
@media (min-width: 768px) {
  .modal__openBtn--purple {
    box-shadow: 0 0.2604166667vw 0 #792faf;
  }
}
@media (min-width: 1200px) {
  .modal__openBtn--purple {
    box-shadow: 0 0.1379310345vw 0 #792faf;
  }
}
.modal__openBtn--cyan {
  background-color: #13b2d0;
  box-shadow: 0 0.5333333333vw 0 #2e8fa2;
}
@media (min-width: 768px) {
  .modal__openBtn--cyan {
    box-shadow: 0 0.2604166667vw 0 #2e8fa2;
  }
}
@media (min-width: 1200px) {
  .modal__openBtn--cyan {
    box-shadow: 0 0.1379310345vw 0 #2e8fa2;
  }
}
.modal__openBtn--red {
  background-color: #e64141;
  box-shadow: 0 0.5333333333vw 0 #d10f0f;
}
@media (min-width: 768px) {
  .modal__openBtn--red {
    box-shadow: 0 0.2604166667vw 0 #d10f0f;
  }
}
@media (min-width: 1200px) {
  .modal__openBtn--red {
    box-shadow: 0 0.1379310345vw 0 #d10f0f;
  }
}
.modal__openBtn--blue {
  background-color: #4167e6;
  box-shadow: 0 0.5333333333vw 0 #2947aa;
}
@media (min-width: 768px) {
  .modal__openBtn--blue {
    box-shadow: 0 0.2604166667vw 0 #2947aa;
  }
}
@media (min-width: 1200px) {
  .modal__openBtn--blue {
    box-shadow: 0 0.1379310345vw 0 #2947aa;
  }
}
.modal__openBtn--pink {
  background-color: #ed47b4;
  box-shadow: 0 0.5333333333vw 0 #d12897;
}
@media (min-width: 768px) {
  .modal__openBtn--pink {
    box-shadow: 0 0.2604166667vw 0 #d12897;
  }
}
@media (min-width: 1200px) {
  .modal__openBtn--pink {
    box-shadow: 0 0.1379310345vw 0 #d12897;
  }
}
.modal__openBtn--green {
  background-color: #4fb721;
  box-shadow: 0 0.5333333333vw 0 #309b01;
}
@media (min-width: 768px) {
  .modal__openBtn--green {
    box-shadow: 0 0.2604166667vw 0 #309b01;
  }
}
@media (min-width: 1200px) {
  .modal__openBtn--green {
    box-shadow: 0 0.1379310345vw 0 #309b01;
  }
}
.modal__openBtnIcon {
  width: 8vw;
  height: 5.3333333333vw;
  display: block;
  position: relative;
}
@media (min-width: 768px) {
  .modal__openBtnIcon {
    width: 3.90625vw;
    height: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .modal__openBtnIcon {
    width: 2.0689655172vw;
    height: 1.3793103448vw;
  }
}
.modal__openBtnIcon::before, .modal__openBtnIcon::after {
  content: "";
  display: block;
  margin: auto;
  width: 100%;
  height: 1.0666666667vw;
  background-color: #fff;
  border-radius: 0.5333333333vw;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media (min-width: 768px) {
  .modal__openBtnIcon::before, .modal__openBtnIcon::after {
    height: 0.5208333333vw;
    border-radius: 0.2604166667vw;
  }
}
@media (min-width: 1200px) {
  .modal__openBtnIcon::before, .modal__openBtnIcon::after {
    height: 0.275862069vw;
    border-radius: 0.1379310345vw;
  }
}
.modal__openBtnIcon::after {
  width: 5.3333333333vw;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
@media (min-width: 768px) {
  .modal__openBtnIcon::after {
    width: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .modal__openBtnIcon::after {
    width: 1.3793103448vw;
  }
}
.modal__close {
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  position: absolute;
  top: 2.6666666667vw;
  right: 4vw;
  cursor: pointer;
}
@media (min-width: 768px) {
  .modal__close {
    padding: 1.0416666667vw;
    width: 5.2083333333vw;
    height: 5.2083333333vw;
    top: 1.5625vw;
    right: 2.34375vw;
  }
}
@media (min-width: 1200px) {
  .modal__close {
    padding: min(0.6896551724vw, 10px);
    width: min(2.7586206897vw, 40px);
    height: min(2.7586206897vw, 40px);
    top: min(1.724137931vw, 25px);
    right: min(2.0689655172vw, 30px);
  }
}
.modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8vw;
  height: 1.3333333333vw;
  background-color: #19468d;
  border-radius: 13.3333333333vw;
  transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
  .modal__close span {
    width: 3.90625vw;
    height: 0.6510416667vw;
    border-radius: 6.5104166667vw;
  }
}
@media (min-width: 1200px) {
  .modal__close span {
    width: min(2.0689655172vw, 30px);
    height: min(0.3448275862vw, 5px);
    border-radius: min(0.3448275862vw, 5px);
  }
}
.modal__close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(35deg);
}
.modal__close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-35deg);
}
.modal__closeBtn {
  padding: 3.2vw 8vw;
  font-size: 3.7333333333vw;
  width: 34.1333333333vw;
  margin: 8vw auto 0;
  border-radius: 10.6666666667vw;
}
@media (min-width: 768px) {
  .modal__closeBtn {
    padding: 1.5625vw 3.90625vw;
    font-size: 1.953125vw;
    margin: 5.2083333333vw auto 0;
    width: 16.6666666667vw;
    border-radius: 5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .modal__closeBtn {
    margin: min(2.7586206897vw, 40px) auto 0;
    font-size: min(1.2413793103vw, 18px);
    width: 9.1034482759vw;
    max-width: 132px;
    border-radius: min(3.3103448276vw, 48px);
    padding: min(0.6206896552vw, 9px) 0;
  }
}
.modal__closeBtn.c-btn--bgBlue {
  display: block;
  text-align: center;
  background-color: #19468d;
  box-shadow: 0 1.0666666667vw 0 #102c5a;
}
@media (min-width: 768px) {
  .modal__closeBtn.c-btn--bgBlue {
    box-shadow: 0 0.5208333333vw 0 #102c5a;
  }
}
@media (min-width: 1200px) {
  .modal__closeBtn.c-btn--bgBlue {
    box-shadow: 0 min(0.275862069vw, 4px) 0 #102c5a;
  }
  .modal__closeBtn.c-btn--bgBlue:hover {
    transform: translateY(0.275862069vw);
  }
}
.modal__closeBtn.c-btn--bgBlue::after {
  display: none;
}

/* ---------------------------------------
  KV
--------------------------------------- */
.lowerKv--about-01 {
  background-image: url("../img/lower/about/kv_01_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerKv--about-01 {
    background-image: url("../img/lower/about/kv_01_pc_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
.lowerKv--about-02 {
  background-image: url("../img/lower/about/kv_02_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerKv--about-02 {
    background-image: url("../img/lower/about/kv_02_pc_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
.lowerKv--about-03 {
  background-image: url("../img/lower/about/kv_03_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerKv--about-03 {
    background-image: url("../img/lower/about/kv_03_pc_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

.about__PageTitle--3rd {
  color: #fff;
}
@media (min-width: 1200px) {
  .about__PageTitle--3rd {
    text-align: left;
  }
}

/* ---------------------------------------
  KV
--------------------------------------- */
.lowerKv--work-01 {
  background-image: url("../img/lower/work/kv_01_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerKv--work-01 {
    background-image: url("../img/lower/work/kv_01_pc_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
.lowerKv--work-02 {
  background-image: url("../img/lower/work/kv_02_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerKv--work-02 {
    background-image: url("../img/lower/work/kv_02_pc_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
.lowerKv--work-03 {
  background-image: url("../img/lower/work/kv_03_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerKv--work-03 {
    background-image: url("../img/lower/work/kv_03_pc_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

/* ======================================
  どんな仕事があるのかな？
======================================*/
.jobSection {
  padding-bottom: 25.8666666667vw;
}
@media (min-width: 768px) {
  .jobSection {
    padding-bottom: 16.2760416667vw;
  }
}
@media (min-width: 1200px) {
  .jobSection {
    padding-bottom: 13.1034482759vw;
  }
}

.job__inner {
  padding-left: 5.3333333333vw;
  padding-right: 5.3333333333vw;
}
@media (min-width: 768px) {
  .job__inner {
    padding-left: 3.90625vw;
    padding-right: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .job__inner {
    padding-left: 10vw;
    padding-right: 10vw;
  }
}

.job__title-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 6.9333333333vw;
}
@media (min-width: 768px) {
  .job__title-inner {
    flex-direction: row;
    justify-content: center;
    gap: 2.9947916667vw;
  }
}
@media (min-width: 1200px) {
  .job__title-inner {
    gap: 3.1724137931vw;
  }
}

.job__title {
  background: #3e8ce6;
  border-radius: 5.3333333333vw;
  color: #fff;
  padding: 4vw 5.3333333333vw;
  font-size: 5.3333333333vw;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .job__title {
    border-radius: 2.6041666667vw;
    padding: 2.6041666667vw 1.3020833333vw 2.6041666667vw 1.953125vw;
    font-size: 2.6041666667vw;
    text-align: left;
    width: 75.5208333333vw;
  }
}
@media (min-width: 1200px) {
  .job__title {
    border-radius: 2.0689655172vw;
    padding: 2.0689655172vw;
    font-size: 2.2068965517vw;
    line-height: 1.8125;
    width: 65.1724137931vw;
  }
}
.job__title::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  left: 60%;
  bottom: -8vw;
  transform: translateX(-50%);
  border-width: 4.2666666667vw 5.8666666667vw 4.2666666667vw 0;
  border-style: solid;
  border-color: #3e8ce6 transparent transparent transparent;
}
@media (min-width: 768px) {
  .job__title::after {
    left: auto;
    right: -1.0416666667vw;
    top: 40%;
    bottom: auto;
    transform: rotate(73deg);
    border-width: 1.1724137931vw 1.5862068966vw 1.1724137931vw 0;
    border-style: solid;
    border-color: transparent #3e8ce6 transparent transparent;
  }
}
@media (min-width: 1200px) {
  .job__title::after {
    right: -0.8275862069vw;
  }
}

.job__title-img {
  flex-shrink: 0;
}
.job__title-img img {
  display: block;
  width: 26.4vw;
  max-width: 100%;
}
@media (min-width: 768px) {
  .job__title-img img {
    width: 13.671875vw;
  }
}
@media (min-width: 1200px) {
  .job__title-img img {
    width: 11.724137931vw;
  }
}

.job__office-img img {
  display: block;
  width: 100%;
}

/* カードレイアウト */
.job__cards {
  margin-top: 16vw;
  display: grid;
  gap: 6.6666666667vw 4vw;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
}
@media (min-width: 768px) {
  .job__cards {
    gap: 0 1.953125vw;
    margin-top: 5.2083333333vw;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
  }
}
@media (min-width: 1200px) {
  .job__cards {
    gap: 1.3793103448vw;
    margin-top: 9.3793103448vw;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

.svg-setting path,
.svg-setting rect,
.svg-setting circle,
.svg-setting line,
.svg-setting polyline {
  vector-effect: non-scaling-stroke;
}

.job__card {
  aspect-ratio: 275/405;
  width: 100%;
  position: relative;
  padding: 4vw 1.6vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6666666667vw;
  overflow: hidden;
  cursor: pointer;
  /* カードタイトル */
  /* カード画像 */
  /* カード内にキラキラエフェクト */
  /* カードホバー時の画像スケール */
  /* カードホバー時のボタンアニメーション */
}
.job__card:nth-child(odd) {
  margin-top: -8vw;
}
@media (min-width: 768px) {
  .job__card {
    padding: 1.953125vw 1.953125vw 1.3020833333vw;
    gap: 1.3020833333vw;
  }
  .job__card:nth-child(odd) {
    margin-top: 0;
  }
  .job__card:nth-child(even) {
    margin-top: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .job__card {
    padding: 2.4137931034vw 1.6551724138vw 0;
    vertical-align: bottom;
    gap: 1.3793103448vw;
  }
  .job__card:nth-child(even) {
    margin-top: -5.5172413793vw;
  }
}
.job__cardBg {
  width: 100%;
  height: 100%;
  fill: #ffecce;
  stroke-width: 1.6vw; /* 線の太さ */
  stroke: #fca212; /* 線の色 */
  stroke-linecap: butt; /* 線の端の形 */
  stroke-linejoin: round; /* 線のつなぎ目の形 */
  filter: drop-shadow(0 0.8vw 0 #de8b06); /* 影 */
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
@media (min-width: 768px) {
  .job__cardBg {
    stroke-width: 0.78125vw; /* 線の太さ */
    filter: drop-shadow(0 0.390625vw 0 #de8b06); /* 影 */
  }
}
@media (min-width: 1200px) {
  .job__cardBg {
    stroke-width: 0.5517241379vw; /* 線の太さ */
    filter: drop-shadow(0 0.3448275862vw 0 #de8b06); /* 影 */
  }
}
.job__cardBg--yellowgreen {
  fill: #f6ffd1;
  stroke: #89cb51;
  filter: drop-shadow(0 0.8vw 0 #5a9a24);
}
@media (min-width: 768px) {
  .job__cardBg--yellowgreen {
    stroke-width: 0.78125vw;
    filter: drop-shadow(0 0.390625vw 0 #5a9a24);
  }
}
@media (min-width: 1200px) {
  .job__cardBg--yellowgreen {
    stroke-width: 0.5517241379vw;
    filter: drop-shadow(0 0.3448275862vw 0 #5a9a24);
  }
}
.job__cardBg--purple {
  fill: #f2e5fc;
  stroke: #9c33ea;
  filter: drop-shadow(0 0.8vw 0 #792faf);
}
@media (min-width: 768px) {
  .job__cardBg--purple {
    stroke-width: 0.78125vw;
    filter: drop-shadow(0 0.390625vw 0 #792faf);
  }
}
@media (min-width: 1200px) {
  .job__cardBg--purple {
    stroke-width: 0.5517241379vw;
    filter: drop-shadow(0 0.3448275862vw 0 #792faf);
  }
}
.job__cardBg--cyan {
  fill: #e0faff;
  stroke: #13b2d0;
  filter: drop-shadow(0 0.8vw 0 #2e8fa2);
}
@media (min-width: 768px) {
  .job__cardBg--cyan {
    stroke-width: 0.78125vw;
    filter: drop-shadow(0 0.390625vw 0 #2e8fa2);
  }
}
@media (min-width: 1200px) {
  .job__cardBg--cyan {
    stroke-width: 0.5517241379vw;
    filter: drop-shadow(0 0.3448275862vw 0 #2e8fa2);
  }
}
.job__cardBg--red {
  fill: #ffebeb;
  stroke: #e64141;
  filter: drop-shadow(0 0.8vw 0 #d10f0f);
}
@media (min-width: 768px) {
  .job__cardBg--red {
    stroke-width: 0.78125vw;
    filter: drop-shadow(0 0.390625vw 0 #d10f0f);
  }
}
@media (min-width: 1200px) {
  .job__cardBg--red {
    stroke-width: 0.5517241379vw;
    filter: drop-shadow(0 0.3448275862vw 0 #d10f0f);
  }
}
.job__cardBg--blue {
  fill: #e5ecff;
  stroke: #4167e6;
  filter: drop-shadow(0 0.8vw 0 #2947aa);
}
@media (min-width: 768px) {
  .job__cardBg--blue {
    stroke-width: 0.78125vw;
    filter: drop-shadow(0 0.390625vw 0 #2947aa);
  }
}
@media (min-width: 1200px) {
  .job__cardBg--blue {
    stroke-width: 0.5517241379vw;
    filter: drop-shadow(0 0.3448275862vw 0 #2947aa);
  }
}
.job__cardBg--pink {
  fill: #fcedf8;
  stroke: #ed47b4;
  filter: drop-shadow(0 0.8vw 0 #d12897);
}
@media (min-width: 768px) {
  .job__cardBg--pink {
    stroke-width: 0.78125vw;
    filter: drop-shadow(0 0.390625vw 0 #d12897);
  }
}
@media (min-width: 1200px) {
  .job__cardBg--pink {
    stroke-width: 0.5517241379vw;
    filter: drop-shadow(0 0.3448275862vw 0 #d12897);
  }
}
.job__cardBg--green {
  fill: #ebffe2;
  stroke: #4fb721;
  filter: drop-shadow(0 0.8vw 0 #309b01);
}
@media (min-width: 768px) {
  .job__cardBg--green {
    stroke-width: 0.78125vw;
    filter: drop-shadow(0 0.390625vw 0 #309b01);
  }
}
@media (min-width: 1200px) {
  .job__cardBg--green {
    stroke-width: 0.5517241379vw;
    filter: drop-shadow(0 0.3448275862vw 0 #309b01);
  }
}
.job__card-title {
  width: 33.3333333333vw;
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 3.7333333333vw;
  line-height: 1.2142857143;
  font-weight: 400;
  color: #fff;
  padding: 1.8666666667vw 1.6vw;
  background-color: #fca212;
  border-radius: 7.4666666667vw;
  text-align: center;
  /* カードタイトル色替え */
}
@media (min-width: 768px) {
  .job__card-title {
    width: 16.2760416667vw;
    font-size: 1.8229166667vw;
    line-height: 1.2142857143;
    padding: 1.171875vw 0.78125vw;
    border-radius: 3.6458333333vw;
  }
}
@media (min-width: 1200px) {
  .job__card-title {
    font-size: 1.1034482759vw;
    line-height: 1.5;
    padding: 0.7586206897vw 0.6896551724vw;
    border-radius: 1.6551724138vw;
  }
}
.job__card-title--yellowgreen {
  background-color: #89cb51;
}
.job__card-title--purple {
  background-color: #9c33ea;
}
.job__card-title--cyan {
  background-color: #13b2d0;
}
.job__card-title--red {
  background-color: #e64141;
}
.job__card-title--blue {
  background-color: #4167e6;
}
.job__card-title--pink {
  background-color: #ed47b4;
}
.job__card-title--green {
  background-color: #4fb721;
}
.job__card-img {
  width: 26.6666666667vw;
  height: 26.6666666667vw;
  transition: transform 0.3s ease;
}
@media (min-width: 768px) {
  .job__card-img {
    width: 13.0208333333vw;
    height: 13.0208333333vw;
  }
}
@media (min-width: 1200px) {
  .job__card-img {
    width: 13.7931034483vw;
    height: 13.7931034483vw;
  }
}
.job__card::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 10%;
  width: 32vw;
  height: 29.3333333333vw;
  background-image: url("/it-chan/assets/img/lower/work/job_card_sparkle_sptb.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
  pointer-events: none;
}
@media (min-width: 768px) {
  .job__card::after {
    display: block;
    width: 14.84375vw;
    height: 13.8020833333vw;
    left: 15%;
  }
}
@media (min-width: 1200px) {
  .job__card::after {
    background-image: url("/it-chan/assets/img/lower/work/job_card_sparkle_pc.png");
    width: 14.3448275862vw;
    height: 14vw;
    top: 23%;
    left: 13%;
  }
}
@media (min-width: 1200px) {
  .job__card:hover::after, .job__card:has(.job__card-btn:hover)::after, .job__card.hover-effect::after {
    opacity: 1;
    transform: scale(1.1);
  }
}
@media (min-width: 1200px) {
  .job__card:hover .job__card-img, .job__card:has(.job__card-btn:hover) .job__card-img, .job__card.hover-effect .job__card-img {
    transform: scale(1.1);
  }
}
@media (min-width: 1200px) {
  .job__card:hover .modal__openBtn, .job__card:has(.modal__openBtn:hover) .modal__openBtn, .job__card.hover-effect .modal__openBtn {
    transform: translateY(0.1379310345vw);
    box-shadow: unset;
  }
}

/* ジョブモーダル */
.jobModal__profile {
  margin-bottom: 10.6666666667vw;
}
@media (min-width: 768px) {
  .jobModal__profile {
    margin-bottom: 6.25vw;
  }
}
@media (min-width: 1200px) {
  .jobModal__profile {
    margin-bottom: min(3.8620689655vw, 56px);
  }
}
.jobModal__profile-content {
  display: grid;
  gap: 4.2666666667vw;
  grid-template-areas: "name" "icon" "lists";
  padding-bottom: 8.5333333333vw;
  border-top: 1.0666666667vw solid;
  border-bottom: 1.0666666667vw solid;
}
@media (min-width: 768px) {
  .jobModal__profile-content {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name icon" "lists icon";
    gap: 3.125vw 4.4270833333vw;
    align-items: start;
    padding-bottom: 0;
    border-top: 0.78125vw solid;
    border-bottom: 0.78125vw solid;
  }
}
@media (min-width: 1200px) {
  .jobModal__profile-content {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name icon" "lists icon";
    gap: min(2.7586206897vw, 40px) min(2.9655172414vw, 43px);
    align-items: start;
    border-top: min(0.5517241379vw, 8px) solid;
    border-bottom: min(0.5517241379vw, 8px) solid;
  }
}
.jobModal__profile-content--orange {
  border-color: #fca212;
}
.jobModal__profile-content--yellowgreen {
  border-color: #89cb51;
}
.jobModal__profile-content--purple {
  border-color: #9c33ea;
}
.jobModal__profile-content--cyan {
  border-color: #13b2d0;
}
.jobModal__profile-content--red {
  border-color: #e64141;
}
.jobModal__profile-content--blue {
  border-color: #4167e6;
}
.jobModal__profile-content--pink {
  border-color: #ed47b4;
}
.jobModal__profile-content--green {
  border-color: #4fb721;
}
.jobModal__profile-name {
  grid-area: name;
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 3.7333333333vw;
  line-height: 1.2142857143;
  font-weight: 400;
  color: #fff;
  background-color: #fca212;
  border-radius: 0 0 2.6666666667vw 2.6666666667vw;
  padding: 1.3333333333vw 8vw;
  width: 30.9333333333vw;
  height: 8vw;
  margin: 0 auto;
  /* 見出し色替え */
}
@media (min-width: 768px) {
  .jobModal__profile-name {
    font-size: 1.8229166667vw;
    line-height: 1.2142857143;
    border-radius: 0 0 1.3020833333vw 1.3020833333vw;
    padding: 0 3.90625vw 0.6510416667vw;
    width: 15.1041666667vw;
    height: 3.125vw;
    margin: 0;
  }
}
@media (min-width: 1200px) {
  .jobModal__profile-name {
    font-size: min(1.1034482759vw, 16px);
    line-height: 1.25;
    padding: 0 min(2.7586206897vw, 40px) min(0.4827586207vw, 7px);
    width: 10.4827586207vw;
    max-width: 152px;
    height: 2.2068965517vw;
    max-height: 32px;
    border-radius: 0 0 min(0.6896551724vw, 10px) min(0.6896551724vw, 10px);
  }
}
.jobModal__profile-name--yellowgreen {
  background-color: #89cb51;
}
.jobModal__profile-name--purple {
  background-color: #9c33ea;
}
.jobModal__profile-name--cyan {
  background-color: #13b2d0;
}
.jobModal__profile-name--red {
  background-color: #e64141;
}
.jobModal__profile-name--blue {
  background-color: #4167e6;
}
.jobModal__profile-name--pink {
  background-color: #ed47b4;
}
.jobModal__profile-name--green {
  background-color: #4fb721;
}
.jobModal__profile-lists {
  grid-area: lists;
  display: flex;
  flex-direction: column;
  gap: 2.6666666667vw;
  width: 100%;
  margin: 4vw auto 0;
}
@media (min-width: 768px) {
  .jobModal__profile-lists {
    gap: 2.0833333333vw;
    width: 51.3020833333vw;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 3.125vw;
    padding-left: 3.90625vw;
    padding-bottom: 3.125vw;
  }
}
@media (min-width: 1200px) {
  .jobModal__profile-lists {
    gap: min(1.6551724138vw, 24px) min(2.2068965517vw, 32px);
    width: min(39.7931034483vw, 577px);
    padding-left: min(3.1034482759vw, 45px);
    padding-bottom: min(2.7586206897vw, 40px);
  }
}
.jobModal__profile-list {
  display: flex;
  align-items: flex-start;
  padding-bottom: 1.0666666667vw;
  border-bottom: 4px dotted #ddd;
  padding-top: 0.2em;
}
@media (min-width: 768px) {
  .jobModal__profile-list {
    flex-direction: column;
    gap: 0.78125vw;
    padding-bottom: 0.5208333333vw;
    padding-top: 0;
  }
}
@media (min-width: 1200px) {
  .jobModal__profile-list {
    gap: min(0.5517241379vw, 8px);
    padding-bottom: min(0.5517241379vw, 8px);
  }
}
.jobModal__profile .br-tb {
  display: none;
}
@media (min-width: 768px) {
  .jobModal__profile .br-tb {
    display: block;
  }
}
@media (min-width: 1200px) {
  .jobModal__profile .br-tb {
    display: none;
  }
}
.jobModal__profile .br-tbpc {
  display: none;
}
@media (min-width: 768px) {
  .jobModal__profile .br-tbpc {
    display: block;
  }
}
.jobModal__profile dt {
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 3.2vw;
  font-weight: 400;
  color: #19468d;
  width: 25.3333333333vw;
  line-height: 1.2142857143;
}
@media (min-width: 768px) {
  .jobModal__profile dt {
    font-size: 1.5625vw;
    line-height: 1;
    width: 11.0677083333vw;
  }
}
@media (min-width: 1200px) {
  .jobModal__profile dt {
    font-size: min(0.9655172414vw, 14px);
    line-height: 1.4285714286;
    width: 9.3793103448vw;
    max-width: 136px;
  }
}
.jobModal__profile dd {
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 3.7333333333vw;
  margin: 0;
  width: 53.3333333333vw;
  line-height: 1.2142857143;
}
@media (min-width: 768px) {
  .jobModal__profile dd {
    font-size: 1.6927083333vw;
    line-height: 1.5384615385;
    width: 100%;
    text-align: center;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: pre-line;
  }
}
@media (min-width: 1200px) {
  .jobModal__profile dd {
    font-size: min(1.1724137931vw, 17px);
    line-height: 1.5882352941;
  }
}
.jobModal__profile-icon {
  margin: 0 auto;
  width: 53.3333333333vw;
  grid-area: icon;
  flex-shrink: 0;
  text-align: center;
}
@media (min-width: 768px) {
  .jobModal__profile-icon {
    margin-bottom: -0.78125vw;
    width: 26.0416666667vw;
    text-align: left;
    align-self: flex-end;
  }
}
@media (min-width: 1200px) {
  .jobModal__profile-icon {
    margin-bottom: min(-0.4137931034vw, -8px);
    width: 20.6896551724vw;
    max-width: 300px;
    text-align: left;
  }
}
.jobModal__qa {
  margin-bottom: 8vw;
}
@media (min-width: 768px) {
  .jobModal__qa {
    margin-bottom: 5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .jobModal__qa {
    margin-bottom: min(2.7586206897vw, 40px);
  }
}
.jobModal__qa-title {
  font-size: 4.8vw;
  font-weight: 600;
  margin-bottom: 5.3333333333vw;
}
@media (min-width: 768px) {
  .jobModal__qa-title {
    font-size: 2.6041666667vw;
    margin-bottom: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .jobModal__qa-title {
    font-size: min(1.3793103448vw, 20px);
    margin-bottom: min(1.3793103448vw, 20px);
  }
}
.jobModal__qa-list {
  display: flex;
  flex-direction: column;
  gap: 8.5333333333vw;
}
@media (min-width: 768px) {
  .jobModal__qa-list {
    gap: 4.1666666667vw;
  }
}
@media (min-width: 1200px) {
  .jobModal__qa-list {
    gap: min(3.3103448276vw, 48px);
  }
}
.jobModal__qa-question {
  position: relative;
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 4vw;
  line-height: 1.6;
  color: #2d2d36;
  background-color: #effaff;
  padding: 3.2vw 3.2vw 3.2vw 13.8666666667vw;
  border-radius: 3.2vw;
}
@media (min-width: 768px) {
  .jobModal__qa-question {
    font-size: 1.953125vw;
    line-height: 1.6;
    padding: 1.5625vw 3.90625vw 1.5625vw 7.9427083333vw;
    border-radius: 1.5625vw;
  }
}
@media (min-width: 1200px) {
  .jobModal__qa-question {
    font-size: min(1.3793103448vw, 20px);
    line-height: 1.6;
    padding: min(1.0344827586vw, 15px) min(2.7586206897vw, 40px) min(1.0344827586vw, 15px) min(5.2413793103vw, 76px);
    border-radius: min(1.1034482759vw, 16px);
  }
}
.jobModal__qa-question::before {
  content: "";
  display: block;
  width: 10.6666666667vw;
  height: 100%;
  background-image: url("../img/lower/work/icon_fukidashi.svg");
  background-size: 5.3333333333vw auto;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #3e8ce6;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-radius: 3.2vw 0 0 3.2vw;
}
@media (min-width: 768px) {
  .jobModal__qa-question::before {
    width: 5.859375vw;
    background-size: 3.125vw auto;
    border-radius: 1.5625vw 0 0 1.5625vw;
  }
}
@media (min-width: 1200px) {
  .jobModal__qa-question::before {
    width: 4.1379310345vw;
    max-width: 60px;
    background-size: min(2.2068965517vw, 32px) auto;
    border-radius: min(1.1034482759vw, 16px) 0 0 min(1.1034482759vw, 16px);
  }
}
.jobModal__qa-answer {
  font-size: 3.7333333333vw;
  line-height: 2;
  font-weight: 700;
  padding: 3.2vw 0 0;
}
@media (min-width: 768px) {
  .jobModal__qa-answer {
    font-size: 1.8229166667vw;
    line-height: 2;
    padding: 1.953125vw 0 0;
  }
}
@media (min-width: 1200px) {
  .jobModal__qa-answer {
    font-size: min(1.2413793103vw, 18px);
    line-height: 2;
    padding: 1.1034482759vw 0 0;
  }
}
.jobModal__qa-answer + .jobModal__qa-answer {
  padding-top: 0;
}

/* ======================================
  職場見学に行ってみよう！
======================================*/
.officeSection {
  padding-top: 8vw;
  position: relative;
  overflow: visible;
  padding-bottom: 23.4666666667vw;
}
@media (min-width: 768px) {
  .officeSection {
    padding-top: 3.90625vw;
    padding-bottom: 13.0208333333vw;
  }
}
@media (min-width: 1200px) {
  .officeSection {
    padding-top: 2.7586206897vw;
    padding-bottom: 10.3448275862vw;
  }
}

.officeSection::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -0.2666666667vw;
  width: 100%;
  height: 20vw;
  pointer-events: none;
  display: block;
  background-image: url("../img/lower/work/bg_cloud_pale_sp.png");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .officeSection::after {
    height: 20.0520833333vw;
    background-image: url("../img/lower/work/bg_cloud_pale_tb.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .officeSection::after {
    bottom: -6.8965517241vw;
    height: 20vw;
    background-image: url("../img/lower/work/bg_cloud_pale_pc.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}

.officeSection--pale {
  background-color: #effaff;
}

.officeSection--pale::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -0.2666666667vw;
  width: 100%;
  height: 23.4666666667vw;
  pointer-events: none;
  display: block;
  background-image: url("../img/lower/work/bg_cloud_sp.png");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .officeSection--pale::after {
    height: 11.0677083333vw;
    background-image: url("../img/lower/work/bg_cloud_tb.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .officeSection--pale::after {
    height: 11.0344827586vw;
    background-image: url("../img/lower/work/bg_cloud_pc.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}

/* 中電シーティーアイのこだわりオフィスツアー */
.officeSection--office {
  padding-bottom: 30.6666666667vw;
  padding-top: 0;
}
@media (min-width: 768px) {
  .officeSection--office {
    padding-bottom: 20.0520833333vw;
  }
}
@media (min-width: 1200px) {
  .officeSection--office {
    padding-bottom: 8.275862069vw;
  }
}

.officeSection__inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "imagearea" "text";
  align-items: start;
  position: relative;
  z-index: 1;
  display: flow-root;
  padding-inline: 5.3333333333vw;
}
@media (min-width: 768px) {
  .officeSection__inner {
    padding-inline: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .officeSection__inner {
    padding-inline: 4.4827586207vw;
  }
}

@media (min-width: 1200px) {
  .lowerSecHeading--office {
    text-align: center;
    margin-bottom: 4.1379310345vw;
  }
}

@media (min-width: 768px) {
  .officeLayout__imagearea {
    width: 47.65625vw;
    float: left;
  }
}
@media (min-width: 1200px) {
  .officeLayout__imagearea {
    width: 47.2413793103vw;
  }
}
.officeLayoutImage {
  position: relative;
  margin-bottom: 2.6666666667vw;
}
@media (min-width: 768px) {
  .officeLayoutImage {
    width: 45.0520833333vw;
    height: 26.4322916667vw;
    margin-bottom: 1.3020833333vw;
  }
}
@media (min-width: 768px) and (min-width: 1200px) {
  .officeLayoutImage {
    width: 43.7931034483vw;
    height: 25.8620689655vw;
  }
}
.officeLayoutImage__main {
  position: relative;
}
@media (min-width: 768px) {
  .officeLayoutThumb {
    width: 45.0520833333vw;
  }
}
@media (min-width: 1200px) {
  .officeLayoutThumb {
    width: 43.7931034483vw;
  }
}
.officeLayoutThumb__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 2.6666666667vw;
}
@media (min-width: 768px) {
  .officeLayoutThumb__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4322916667vw;
  }
}
.officeLayoutThumb__item {
  border-radius: 2.6666666667vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .officeLayoutThumb__item {
    border-radius: 1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .officeLayoutThumb__item {
    border-radius: 1.3793103448vw;
  }
}

.officeLayoutImage__main {
  position: relative;
  border-radius: 5.3333333333vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .officeLayoutImage__main {
    border-radius: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .officeLayoutImage__main {
    border-radius: 2.7586206897vw;
  }
}
.officeLayoutImage__main img {
  width: 100%;
  aspect-ratio: 335/200;
  object-fit: cover;
}
@media (min-width: 768px) {
  .officeLayoutImage__main img {
    aspect-ratio: 346/203;
  }
}
@media (min-width: 1200px) {
  .officeLayoutImage__main img {
    aspect-ratio: 635/375;
  }
}
.officeLayoutImage__icon {
  display: none;
}
@media (min-width: 1200px) {
  .officeLayoutImage__icon {
    display: block;
    width: 5.5172413793vw;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
  }
}

.original-image:hover {
  cursor: url("/it-chan/assets/img/lower/work/icon_zoom.svg"), auto;
}

.zoom-container {
  width: 27.5862068966vw;
  height: 24.1379310345vw;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(110%);
  display: none;
  background-color: #fff;
}

.zoomed-image {
  position: absolute;
  left: 0;
  top: 0;
}

.zoom-cursor {
  width: 10.3448275862vw;
  height: 10.3448275862vw;
  background-color: rgba(255, 255, 255, 0.6);
  position: absolute;
  pointer-events: none;
  display: none;
  transform: translate(-40%, -40%);
}

.officeSection__text {
  margin-top: 8vw;
  font-size: 3.7333333333vw;
  line-height: 2;
  font-weight: 700;
  color: #19468d;
}
@media (min-width: 768px) {
  .officeSection__text {
    margin-top: 2.6041666667vw;
    font-size: 1.8229166667vw;
    line-height: 2;
    color: #19468d;
  }
}
@media (min-width: 1200px) {
  .officeSection__text {
    font-size: 1.1034482759vw;
    line-height: 2;
    color: #19468d;
  }
}

/* ちょっと聞いてみた！僕の・私のお気に入りスペース */
.officeSection--space {
  padding-bottom: 26.6666666667vw;
  padding-top: 0;
}
@media (min-width: 768px) {
  .officeSection--space {
    padding-top: 0;
    margin-top: -6.5104166667vw;
    padding-bottom: 10.4166666667vw;
  }
}
@media (min-width: 1200px) {
  .officeSection--space {
    margin-top: 0;
    padding-bottom: 8.275862069vw;
  }
}

.officeSection--space::after {
  content: "";
}

/* グリッドレイアウト */
.officeSection__inner.spaceLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8vw;
}
.officeSection__inner.spaceLayout .spaceLayout__title {
  grid-column: 1;
}
.officeSection__inner.spaceLayout .spaceLayout__img {
  grid-column: 1;
}
@media (min-width: 768px) {
  .officeSection__inner.spaceLayout {
    gap: 2.8645833333vw;
    grid-template-columns: repeat(36, 1fr);
    grid-template-rows: repeat(12, 2.8645833333vw);
  }
  .officeSection__inner.spaceLayout .spaceLayout__title {
    grid-column: 17/31;
    grid-row: 1/2;
    align-self: start;
    justify-self: end;
    text-align: left;
    line-height: 1.8;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout01 {
    grid-column: 1/17;
    grid-row: 1/span 6;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout02 {
    grid-column: 17/30;
    grid-row: 3/span 3;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout03 {
    grid-column: 1/8;
    grid-row: 8/span 8;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout04 {
    grid-column: 8/17;
    grid-row: 6/span 4;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout05 {
    grid-column: 17/27;
    grid-row: 7/span 3;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout06 {
    grid-column: 27/34;
    grid-row: 7/span 4;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout07 {
    grid-column: 8/21;
    grid-row: 10/span 3;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout08 {
    grid-column: 21/30;
    grid-row: 10/span 3;
  }
}
@media (min-width: 1200px) {
  .officeSection__inner.spaceLayout {
    gap: 2.7586206897vw;
    grid-template-columns: repeat(36, 1fr);
    grid-template-rows: repeat(13, 2.7586206897vw);
  }
  .officeSection__inner.spaceLayout .spaceLayout__title {
    grid-column: 18/30;
    grid-row: 1/2;
    align-self: start;
    justify-self: end;
    text-align: left;
    line-height: 1.8;
    white-space: nowrap;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout01 {
    grid-column: 1/18;
    grid-row: 1/span 6;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout02 {
    grid-column: 18/31;
    grid-row: 3/span 3;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout03 {
    grid-column: 1/9;
    grid-row: 7/span 8;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout04 {
    grid-column: 9/18;
    grid-row: 6/span 4;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout05 {
    grid-column: 18/28;
    grid-row: 7/span 3;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout06 {
    grid-column: 28/35;
    grid-row: 7/span 4;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout07 {
    grid-column: 7/21;
    grid-row: 10/span 3;
  }
  .officeSection__inner.spaceLayout .spaceLayout__layout08 {
    grid-column: 22/31;
    grid-row: 10/span 3;
  }
}

/* ---------------------------------------
  KV
--------------------------------------- */
.lowerKv--teach-01 {
  background-image: url("../img/lower/teach/kv_01_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerKv--teach-01 {
    background-image: url("../img/lower/teach/kv_01_pc_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
.lowerKv--teach-02 {
  background-image: url("../img/lower/teach/kv_02_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerKv--teach-02 {
    background-image: url("../img/lower/teach/kv_02_pc_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
.lowerKv--teach-03 {
  background-image: url("../img/lower/teach/kv_03_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerKv--teach-03 {
    background-image: url("../img/lower/teach/kv_03_pc_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

body.page-play {
  background-color: #effaff;
}

/* ---------------------------------------
  KV
--------------------------------------- */
.lowerKv--play-01 {
  background-image: url("../img/lower/play/kv_01_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerKv--play-01 {
    background-image: url("../img/lower/play/kv_01_pc_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

/* ---------------------------------------
  ページ共通
--------------------------------------- */
.play__inner {
  padding-left: 5.3333333333vw;
  padding-right: 5.3333333333vw;
}
@media (min-width: 768px) {
  .play__inner {
    padding-left: 3.90625vw;
    padding-right: 3.90625vw;
  }
}

.play__title {
  font-size: 5.3333333333vw;
  font-weight: 700;
  line-height: 1.8;
  color: #ed47b4;
  padding: 8vw 0;
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .play__title {
    font-size: 2.6041666667vw;
    line-height: 1.8;
    padding: 3.90625vw 0;
  }
}
@media (min-width: 1200px) {
  .play__title {
    font-size: 2.4827586207vw;
    line-height: 1.8055555556;
    padding: 2.7586206897vw 0;
  }
}

/* ---------------------------------------
  ゲーム
--------------------------------------- */
.playSection--game {
  position: relative;
  z-index: 2;
  padding-bottom: 2.6666666667vw;
}
@media (min-width: 768px) {
  .playSection--game {
    padding-bottom: 0;
  }
}
@media (min-width: 1200px) {
  .playSection--game {
    padding-bottom: 0;
  }
}

.play__game-contents {
  position: relative;
  z-index: 1;
}

.play__game-contents::before {
  content: "";
  display: block;
  width: 45.6vw;
  height: 25.6vw;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(50%, -100%);
  background-image: url("../img/lower/play/play_it-chan_sp.png");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .play__game-contents::before {
    width: 15.4947916667vw;
    height: 21.6145833333vw;
    top: 95%;
    right: 7.1614583333vw;
    background-image: url("../img/lower/play/play_it-chan_pctb.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .play__game-contents::before {
    width: 16.8275862069vw;
    height: 23.4482758621vw;
    top: 95%;
    right: 13.7931034483vw;
  }
}

.play__title--game {
  width: 48vw;
  height: 24.5333333333vw;
  background-image: url("../img/lower/play/play_title_01_sp.png");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .play__title--game {
    width: 23.4375vw;
    height: 11.9791666667vw;
    background-image: url("../img/lower/play/play_title_01_tb.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .play__title--game {
    width: 18.9655172414vw;
    height: 9.4482758621vw;
    background-image: url("../img/lower/play/play_title_01.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.play__game-img {
  margin: 0 auto;
  width: 89.3333333333vw;
  height: 100%;
  text-align: center;
  background-image: url("../img/lower/play//play_game_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .play__game-img {
    width: 52.0833333333vw;
  }
}
@media (min-width: 1200px) {
  .play__game-img {
    width: 27.5862068966vw;
  }
}

.play__gameThumbnail {
  padding-top: 2.6666666667vw;
  width: auto;
  max-width: 89.3333333333vw;
  max-height: calc(100% - 25.3333333333vw);
}
@media (min-width: 768px) {
  .play__gameThumbnail {
    padding-top: 1.3020833333vw;
    max-width: 52.0833333333vw;
    max-height: calc(100% - 13.671875vw);
  }
}
@media (min-width: 1200px) {
  .play__gameThumbnail {
    padding-top: 0.6896551724vw;
    max-width: 27.5862068966vw;
    max-height: calc(100% - 8vw);
  }
}

.play__text {
  font-size: 3.7333333333vw;
  line-height: 2;
  color: #19468d;
  font-weight: 700;
  margin-top: 5.3333333333vw;
}
@media (min-width: 768px) {
  .play__text {
    font-size: 1.8229166667vw;
    line-height: 2;
    text-align: center;
    margin: 2.6041666667vw auto 0;
  }
}
@media (min-width: 1200px) {
  .play__text {
    font-size: 1.1034482759vw;
    line-height: 2;
    margin: 1.3793103448vw auto 0;
  }
}
.play__textBgWrap {
  padding-bottom: 5.3333333333vw;
  background-color: #fff;
  position: relative;
  z-index: 0;
  margin-bottom: -6.6666666667vw;
}
@media (min-width: 768px) {
  .play__textBgWrap {
    padding-bottom: 2.2135416667vw;
    margin-bottom: 0;
  }
}
@media (min-width: 1200px) {
  .play__textBgWrap {
    padding-bottom: 1.724137931vw;
  }
}
.play__textBgWrap::before {
  content: "";
  display: block;
  z-index: 0;
  width: 100%;
  height: 20.2666666667vw;
  background-image: url("../img/lower/play/play_bg_cloud_top.svg");
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: absolute;
  top: -20vw;
  left: 0;
}
@media (min-width: 768px) {
  .play__textBgWrap::before {
    height: 17.1875vw;
    top: -17.0572916667vw;
  }
}
@media (min-width: 1200px) {
  .play__textBgWrap::before {
    height: 17.2413793103vw;
    top: -15.1724137931vw;
  }
}
.play__textBgWrap::after {
  content: "";
  display: block;
  width: 100%;
  height: 6.9333333333vw;
  background-image: url("../img/lower/play/play_bg_cloud_bottom.svg");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  bottom: -6.6666666667vw;
}
@media (min-width: 768px) {
  .play__textBgWrap::after {
    height: 6.9010416667vw;
    bottom: -6.7708333333vw;
  }
}
@media (min-width: 1200px) {
  .play__textBgWrap::after {
    height: 6.8965517241vw;
    bottom: -6.8275862069vw;
  }
}
.play__text--center {
  text-align: center;
}

.play__text--br {
  display: none;
}
@media (min-width: 768px) {
  .play__text--br {
    display: none;
  }
}
@media (min-width: 1200px) {
  .play__text--br {
    display: block;
  }
}

.play__btn {
  margin: 5.3333333333vw auto 0;
}
@media (min-width: 768px) {
  .play__btn {
    margin: 2.6041666667vw auto 0;
  }
}
@media (min-width: 1200px) {
  .play__btn {
    margin: 1.3793103448vw auto 0;
  }
}

@media (min-width: 768px) {
  .play__btn--game {
    width: 35.8072916667vw;
  }
}
@media (min-width: 1200px) {
  .play__btn--game {
    width: 20.1379310345vw;
  }
}

.play__btn .c-btn--bgBlue {
  display: block;
  text-align: center;
  background-color: #ed47b4;
  box-shadow: 0 1.0666666667vw 0 #d12897;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 768px) {
  .play__btn .c-btn--bgBlue {
    box-shadow: 0 0.5208333333vw 0 #d12897;
  }
}
@media (min-width: 1200px) {
  .play__btn .c-btn--bgBlue {
    box-shadow: 0 0.4137931034vw 0 #d12897;
  }
}

.play__btn .c-btn--bgBlue::after {
  display: none;
}

.play__gameArea {
  margin: 30.9333333333vw auto 0;
  width: 89.3333333333vw;
  height: calc(89.3333333333vw + 150px);
  overflow: hidden;
  border: none;
  position: relative;
  z-index: 1;
  border-radius: 10px;
}
@media (min-width: 768px) {
  .play__gameArea {
    margin-top: 5.2083333333vw;
    width: 52.0833333333vw;
    height: calc(52.0833333333vw + 150px);
  }
}
@media (min-width: 1200px) {
  .play__gameArea {
    margin-top: 4.1379310345vw;
    width: 27.5862068966vw;
    height: calc(27.5862068966vw + 150px);
  }
}

.play__gameArea iframe {
  margin: 0 auto;
  display: none;
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
}

/* ---------------------------------------
  オリジナルかべがみ
--------------------------------------- */
.playSection--kabegami {
  position: relative;
  padding-top: 21.3333333333vw;
  padding-bottom: 21.3333333333vw;
  background-color: #e1f6ff;
}
@media (min-width: 768px) {
  .playSection--kabegami {
    padding-top: 15.625vw;
    padding-bottom: 18.2291666667vw;
  }
}
@media (min-width: 1200px) {
  .playSection--kabegami {
    padding-top: 10.7586206897vw;
    padding-bottom: 13.7931034483vw;
  }
}

.playSection--kabegami::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -0.2666666667vw;
  width: 100%;
  height: 16vw;
  pointer-events: none;
  display: block;
  background-image: url("../img/lower/play/play_bg_cloud_pale_sp.png");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .playSection--kabegami::after {
    height: 13.8020833333vw;
    background-image: url("../img/lower/play/play_bg_cloud_pale_tb.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .playSection--kabegami::after {
    background-image: url("../img/lower/play/play_bg_cloud_pale_pc.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.play__title--kabegami {
  width: 80vw;
  height: 24.5333333333vw;
  color: #e64141;
  background-image: url("../img/lower/play/play_title_02_sp.png");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .play__title--kabegami {
    width: 39.0625vw;
    height: 11.5885416667vw;
    background-image: url("../img/lower/play/play_title_02_tb.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .play__title--kabegami {
    width: 35.3793103448vw;
    height: 9.4482758621vw;
    background-image: url("../img/lower/play/play_title_02.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}

.play__kabegamiContents {
  display: flex;
  flex-direction: column;
  gap: 13.3333333333vw;
  margin-top: 10.6666666667vw;
}
@media (min-width: 768px) {
  .play__kabegamiContents {
    flex-direction: row;
    gap: 4.9479166667vw;
    margin: 5.2083333333vw auto 0;
  }
}
@media (min-width: 1200px) {
  .play__kabegamiContents {
    gap: 2.7586206897vw;
    width: 52.4137931034vw;
    margin: 4.1379310345vw auto 0;
  }
}

@media (min-width: 768px) {
  .play__kabegamiContent {
    width: calc((100% - 4.9479166667vw) / 2);
  }
}
@media (min-width: 1200px) {
  .play__kabegamiContent {
    width: calc((100% - 2.7586206897vw) / 2);
  }
}

.play__kabegamiContent-btn {
  width: 73.3333333333vw;
  margin: 0 auto;
  font-size: 4.2666666667vw;
  line-height: 1.25;
  color: #fca212;
  font-weight: 700;
  margin-top: 5.3333333333vw;
}
@media (min-width: 768px) {
  .play__kabegamiContent-btn {
    width: 35.8072916667vw;
    font-size: 2.0833333333vw;
    line-height: 1.25;
    margin-top: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .play__kabegamiContent-btn {
    width: 20.1379310345vw;
    font-size: 1.5172413793vw;
    line-height: 1.2727272727;
    margin-top: 1.3793103448vw;
  }
}

.play__kabegamiContent-btn .c-btn--bgBlue {
  background-color: #e64141;
  box-shadow: 0 1.0666666667vw 0 #d10f0f;
  border-radius: 13.3333333333vw;
  padding-top: 2.1333333333vw;
  padding-bottom: 2.1333333333vw;
}
@media (min-width: 768px) {
  .play__kabegamiContent-btn .c-btn--bgBlue {
    border-radius: 6.5104166667vw;
    box-shadow: 0 0.6510416667vw 0 #d10f0f;
    padding-top: 0.9114583333vw;
    padding-bottom: 0.6510416667vw;
  }
}
@media (min-width: 1200px) {
  .play__kabegamiContent-btn .c-btn--bgBlue {
    border-radius: 3.8620689655vw;
    box-shadow: 0 0.4137931034vw 0 #d10f0f;
    padding-top: 0.8275862069vw;
    padding-bottom: 0.8275862069vw;
  }
}

.play__kabegamiContent-btn .c-btn--text > span {
  font-size: 3.2vw;
  display: block;
}
@media (min-width: 768px) {
  .play__kabegamiContent-btn .c-btn--text > span {
    font-size: 1.5625vw;
  }
}
@media (min-width: 1200px) {
  .play__kabegamiContent-btn .c-btn--text > span {
    font-size: 1.1034482759vw;
  }
}

.play__kabegamiContent-btn .c-btn--bgBlue::after {
  background-image: url("../img/lower/play/play_btn_icon-red.svg");
  background-size: auto 95%;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 11.7333333333vw;
  height: 8.5333333333vw;
}
@media (min-width: 768px) {
  .play__kabegamiContent-btn .c-btn--bgBlue::after {
    width: 5.7291666667vw;
    height: 4.1666666667vw;
  }
}
@media (min-width: 1200px) {
  .play__kabegamiContent-btn .c-btn--bgBlue::after {
    width: 4.6206896552vw;
    height: 3.1724137931vw;
    right: 2.0689655172vw;
  }
}

/* ---------------------------------------
  ぬりえ
--------------------------------------- */
.playSection--nurie {
  position: relative;
  background-color: #effaff;
  padding-top: 2.6666666667vw;
  padding-bottom: 21.3333333333vw;
}
@media (min-width: 768px) {
  .playSection--nurie {
    padding-top: 0;
    padding-bottom: 15.625vw;
  }
}
@media (min-width: 1200px) {
  .playSection--nurie {
    padding-bottom: 13.7931034483vw;
  }
}

.playSection--nurie::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -0.2666666667vw;
  width: 100%;
  height: 16vw;
  pointer-events: none;
  display: block;
  background-image: url("../img/lower/play/play_bg_cloud_sp.png");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .playSection--nurie::after {
    height: 13.8020833333vw;
    background-image: url("../img/lower/play/play_bg_cloud_tb.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .playSection--nurie::after {
    background-image: url("../img/lower/play/play_bg_cloud_pc.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.play__title--nurie {
  width: 48vw;
  height: 24.5333333333vw;
  color: #fca212;
  background-image: url("../img/lower/play/play_title_03_sp.png");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .play__title--nurie {
    width: 23.4375vw;
    height: 11.5885416667vw;
    background-image: url("../img/lower/play/play_title_03_tb.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .play__title--nurie {
    width: 18.9655172414vw;
    height: 9.4482758621vw;
    background-image: url("../img/lower/play/play_title_03.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.play__nurieContents {
  display: flex;
  flex-direction: column;
  gap: 13.3333333333vw;
  margin-top: 10.6666666667vw;
}
@media (min-width: 768px) {
  .play__nurieContents {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4.9479166667vw;
    margin: 5.2083333333vw auto 0;
  }
}
@media (min-width: 1200px) {
  .play__nurieContents {
    flex-wrap: nowrap;
    gap: 2.7586206897vw;
    width: 80vw;
    margin: 4.1379310345vw auto 0;
  }
}

.play__nurieContent {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .play__nurieContent {
    width: calc((100% - 4.9479166667vw) / 2);
  }
}
@media (min-width: 1200px) {
  .play__nurieContent {
    width: calc((100% - 5.5172413793vw) / 3);
  }
}

.play__nurieContent-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.play__nurieContent-btn {
  width: 73.3333333333vw;
  margin: 0 auto;
  font-size: 4.2666666667vw;
  line-height: 1.25;
  color: #fca212;
  font-weight: 700;
  margin-top: 5.3333333333vw;
}
@media (min-width: 768px) {
  .play__nurieContent-btn {
    width: 35.8072916667vw;
    font-size: 2.0833333333vw;
    line-height: 1.25;
    margin-top: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .play__nurieContent-btn {
    width: 20.1379310345vw;
    font-size: 1.5172413793vw;
    line-height: 1.2727272727;
    margin-top: 1.3793103448vw;
  }
}

.play__nurieContent-btn .c-btn--bgBlue {
  text-align: center;
  background-color: #fca212;
  box-shadow: 0 1.0666666667vw 0 #de8b06;
  border-radius: 13.3333333333vw;
  padding: 4vw 6.6666666667vw 3.4666666667vw;
}
@media (min-width: 768px) {
  .play__nurieContent-btn .c-btn--bgBlue {
    border-radius: 6.5104166667vw;
    box-shadow: 0 0.6510416667vw 0 #de8b06;
    padding: 1.953125vw 3.2552083333vw 1.6927083333vw;
  }
}
@media (min-width: 1200px) {
  .play__nurieContent-btn .c-btn--bgBlue {
    border-radius: 3.8620689655vw;
    box-shadow: 0 0.4137931034vw 0 #de8b06;
    padding: 1.3103448276vw 2.0689655172vw 1.3103448276vw 2.7586206897vw;
  }
}

.play__nurieContent-btn .c-btn--bgBlue::after {
  background-image: url("../img/lower/play/play_btn_icon-orange.svg");
  background-size: auto 95%;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 11.7333333333vw;
  height: 8.5333333333vw;
}
@media (min-width: 768px) {
  .play__nurieContent-btn .c-btn--bgBlue::after {
    width: 5.7291666667vw;
    height: 4.1666666667vw;
  }
}
@media (min-width: 1200px) {
  .play__nurieContent-btn .c-btn--bgBlue::after {
    width: 4.6206896552vw;
    height: 3.1724137931vw;
    right: 2.0689655172vw;
  }
}

/* ---------------------------------------
  まんが
--------------------------------------- */
.playSection--manga {
  position: relative;
  background-color: #e1f6ff;
  padding-top: 2.6666666667vw;
  padding-bottom: 21.3333333333vw;
}
@media (min-width: 768px) {
  .playSection--manga {
    padding-top: 0;
    padding-bottom: 15.625vw;
  }
}
@media (min-width: 1200px) {
  .playSection--manga {
    padding-bottom: 15.1724137931vw;
  }
}

.playSection--manga::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -0.2666666667vw;
  width: 100%;
  height: 16vw;
  pointer-events: none;
  display: block;
  background-image: url("../img/lower/play/play_bg_cloud_pale_sp.png");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .playSection--manga::after {
    height: 13.8020833333vw;
    background-image: url("../img/lower/play/play_bg_cloud_pale_tb.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .playSection--manga::after {
    background-image: url("../img/lower/play/play_bg_cloud_pale_pc.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.play__title--manga {
  width: 64vw;
  height: 24.5333333333vw;
  color: #4fb721;
  background-image: url("../img/lower/play/play_title_04_sp.png");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .play__title--manga {
    width: 31.25vw;
    height: 11.9791666667vw;
    background-image: url("../img/lower/play/play_title_04_tb.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .play__title--manga {
    width: 27.1724137931vw;
    height: 9.4482758621vw;
    background-image: url("../img/lower/play/play_title_04.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}

.play__mangaContents {
  display: flex;
  flex-direction: column;
  gap: 13.3333333333vw;
  margin-top: 10.6666666667vw;
}
@media (min-width: 768px) {
  .play__mangaContents {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4.9479166667vw;
    margin: 5.2083333333vw auto 0;
  }
}
@media (min-width: 1200px) {
  .play__mangaContents {
    column-gap: 2.7586206897vw;
    row-gap: 4.1379310345vw;
    width: 80vw;
    margin: 4.1379310345vw auto 0;
  }
}

@media (min-width: 768px) {
  .play__mangaContent {
    width: calc((100% - 4.9479166667vw) / 2);
  }
}
@media (min-width: 1200px) {
  .play__mangaContent {
    width: calc((100% - 5.5172413793vw) / 3);
  }
}

/* ---------------------------------------
  6角返し
--------------------------------------- */
.playSection--rokkaku {
  padding-top: 2.6666666667vw;
  padding-bottom: 6.6666666667vw;
}
@media (min-width: 768px) {
  .playSection--rokkaku {
    padding-top: 0;
    padding-bottom: 5.859375vw;
  }
}
@media (min-width: 1200px) {
  .playSection--rokkaku {
    padding-top: 0;
    padding-bottom: 3.4482758621vw;
  }
}

.play__title--rokkaku {
  width: 50.6666666667vw;
  height: 24.5333333333vw;
  color: #4167e6;
  background-image: url("../img/lower/play/play_title_05_sp.png");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .play__title--rokkaku {
    width: 24.7395833333vw;
    height: 11.9791666667vw;
    background-image: url("../img/lower/play/play_title_05_tb.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .play__title--rokkaku {
    width: 20.9655172414vw;
    height: 9.4482758621vw;
    background-image: url("../img/lower/play/play_title_05.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.play__rokkaku-contents {
  margin-top: 10.6666666667vw;
}
@media (min-width: 768px) {
  .play__rokkaku-contents {
    width: 92.1875vw;
    margin: 0 auto;
  }
}
@media (min-width: 1200px) {
  .play__rokkaku-contents {
    width: 52.4137931034vw;
  }
}

.play__rokkaku-img {
  margin-top: 30.9333333333vw;
  aspect-ratio: 760/470;
  width: 89.3333333333vw;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .play__rokkaku-img {
    margin-top: 3.90625vw;
    width: 52.0833333333vw;
  }
}
@media (min-width: 1200px) {
  .play__rokkaku-img {
    margin-top: 4.1379310345vw;
    width: 52.4137931034vw;
  }
}

.play__text {
  font-size: 3.7333333333vw;
  line-height: 2;
  color: #19468d;
  font-weight: 700;
  margin-top: 5.3333333333vw;
}
@media (min-width: 768px) {
  .play__text {
    font-size: 1.8229166667vw;
    line-height: 2;
    margin: 2.6041666667vw auto 0;
  }
}
@media (min-width: 1200px) {
  .play__text {
    font-size: 1.1034482759vw;
    line-height: 2;
    margin: 1.3793103448vw auto 0;
  }
}

.play__rokkakuContent-btn {
  width: 73.3333333333vw;
  margin: 0 auto;
  font-size: 4.2666666667vw;
  line-height: 1.25;
  color: #fca212;
  font-weight: 700;
  margin-top: 5.3333333333vw;
}
@media (min-width: 768px) {
  .play__rokkakuContent-btn {
    width: 35.8072916667vw;
    font-size: 2.0833333333vw;
    line-height: 1.25;
    margin-top: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .play__rokkakuContent-btn {
    width: 20.1379310345vw;
    font-size: 1.5172413793vw;
    line-height: 1.2727272727;
    margin-top: 1.3793103448vw;
  }
}

.play__rokkakuContent-btn .c-btn--bgBlue {
  text-align: center;
  background-color: #4167e6;
  box-shadow: 0 1.0666666667vw 0 #2947aa;
  border-radius: 13.3333333333vw;
}
@media (min-width: 768px) {
  .play__rokkakuContent-btn .c-btn--bgBlue {
    border-radius: 6.5104166667vw;
    box-shadow: 0 0.6510416667vw 0 #2947aa;
  }
}
@media (min-width: 1200px) {
  .play__rokkakuContent-btn .c-btn--bgBlue {
    border-radius: 3.8620689655vw;
    box-shadow: 0 0.4137931034vw 0 #2947aa;
    padding: 1.3103448276vw 2.7586206897vw;
  }
}

.play__rokkakuContent-btn .c-btn--text > span {
  font-size: 3.2vw;
  display: block;
}
@media (min-width: 768px) {
  .play__rokkakuContent-btn .c-btn--text > span {
    font-size: 1.5625vw;
  }
}
@media (min-width: 1200px) {
  .play__rokkakuContent-btn .c-btn--text > span {
    font-size: 1.1034482759vw;
  }
}

.play__rokkakuContent-btn .c-btn--bgBlue::after {
  background-image: url("../img/lower/play/play_btn_icon_blue.svg");
  background-size: auto 95%;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 11.7333333333vw;
  height: 8.5333333333vw;
}
@media (min-width: 768px) {
  .play__rokkakuContent-btn .c-btn--bgBlue::after {
    width: 6.5104166667vw;
    height: 3.90625vw;
  }
}
@media (min-width: 1200px) {
  .play__rokkakuContent-btn .c-btn--bgBlue::after {
    width: 4.6206896552vw;
    height: 3.1724137931vw;
    right: 2.0689655172vw;
  }
}

body.page-hello {
  background-color: #effaff;
}

/* ---------------------------------------
  KV
--------------------------------------- */
.lowerKv--hello-01 {
  background-image: url("../img/lower/hello/kv_01_sp.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .lowerKv--hello-01 {
    background-image: url("../img/lower/hello/kv_01_pc_tb.png");
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

/* ---------------------------------------
  ページ共通
--------------------------------------- */
.hello__inner {
  padding-left: 5.3333333333vw;
  padding-right: 5.3333333333vw;
}
@media (min-width: 768px) {
  .hello__inner {
    padding-left: 3.90625vw;
    padding-right: 3.90625vw;
  }
}

.hello__title {
  width: 78.6666666667vw;
  height: 33.8666666667vw;
  font-size: 5.3333333333vw;
  font-weight: 700;
  line-height: 1.8;
  color: #19468d;
  padding: 10.6666666667vw 0 0;
  text-align: center;
  margin: 0 auto;
  background-image: url("../img/lower/hello/bg_title_sp.png");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .hello__title {
    width: 38.4114583333vw;
    height: 16.1458333333vw;
    font-size: 2.6041666667vw;
    line-height: 1.8;
    padding: 5.46875vw 0;
    background-image: url("../img/lower/hello/bg_title_tb.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .hello__title {
    width: 31.0344827586vw;
    height: 13.3793103448vw;
    font-size: 2.4827586207vw;
    line-height: 1.8055555556;
    padding: 4.1379310345vw 0;
    background-image: url("../img/lower/hello/bg_title_pc.png");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}

.hello__title-inner {
  border-bottom: 6px dotted #fca212;
}

.hello__title-small {
  font-size: 4.2666666667vw;
}
@media (min-width: 768px) {
  .hello__title-small {
    font-size: 2.0833333333vw;
  }
}
@media (min-width: 1200px) {
  .hello__title-small {
    font-size: 1.7931034483vw;
  }
}

.hello__contents {
  margin-top: 8vw;
}
@media (min-width: 768px) {
  .hello__contents {
    margin-top: 7.8125vw;
  }
}
@media (min-width: 1200px) {
  .hello__contents {
    margin-top: 4.1379310345vw;
  }
}

/* ---------------------------------------
  イットちゃん図鑑
--------------------------------------- */
.helloSection--zukan {
  position: relative;
  background-color: #effaff;
  padding-top: 8vw;
  padding-bottom: 21.3333333333vw;
}
@media (min-width: 768px) {
  .helloSection--zukan {
    padding-top: 3.90625vw;
    padding-bottom: 15.625vw;
  }
}
@media (min-width: 1200px) {
  .helloSection--zukan {
    padding-top: 2.7586206897vw;
    padding-bottom: 15.1724137931vw;
  }
}

@media (min-width: 768px) {
  .helloSection--zukan::before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 29.296875vw;
    left: 0;
    right: 0;
    width: 100%;
    height: 23.828125vw;
    pointer-events: none;
    display: block;
    background-image: url("../img/lower/hello/bg_cloud_group_tb.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .helloSection--zukan::before {
    height: 24.0689655172vw;
    background-image: url("../img/lower/hello/bg_cloud_group_pc.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}

.helloSection--zukan::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -0.2666666667vw;
  width: 100%;
  height: 16vw;
  pointer-events: none;
  display: block;
  background-image: url("../img/lower/hello/bg_cloud_sp.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .helloSection--zukan::after {
    height: 13.8020833333vw;
    background-image: url("../img/lower/hello/bg_cloud_tb.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .helloSection--zukan::after {
    height: 13.7931034483vw;
    background-image: url("../img/lower/hello/bg_cloud_pc.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}

.carousel3d {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.carousel3d__wrapper {
  position: relative;
  width: 100%;
  height: 45.3333333333vw;
  transform-style: preserve-3d;
  transition: transform 1s ease;
}
@media (min-width: 768px) {
  .carousel3d__wrapper {
    height: 26.0416666667vw;
  }
}
@media (min-width: 1200px) {
  .carousel3d__wrapper {
    height: 22.4137931034vw;
  }
}

.carousel3d__item {
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: center center;
  transform: translateX(-50%);
  transition: all 1s ease;
  width: 78.6666666667vw;
  height: 45.3333333333vw;
  display: none;
}
@media (min-width: 768px) {
  .carousel3d__item {
    width: 21.6145833333vw;
    height: 13.0208333333vw;
    display: block;
  }
}
@media (min-width: 1200px) {
  .carousel3d__item {
    width: 20.6896551724vw;
    height: 11.8620689655vw;
  }
}

.carousel3d__item img {
  width: 100%;
  height: 100%;
}

/* アクティブ・左右配置 */
.carousel3d__item.active {
  transform: translateX(-50%);
  z-index: 3;
  display: block;
}
@media (min-width: 768px) {
  .carousel3d__item.active {
    width: 38.4114583333vw;
    height: 23.1770833333vw;
  }
}
@media (min-width: 1200px) {
  .carousel3d__item.active {
    width: 33.1034482759vw;
    height: 19.0344827586vw;
  }
}

.carousel3d__item.left {
  transform: translateX(-200%) rotateY(40deg) translateZ(0);
  z-index: 2;
}

.carousel3d__item.right {
  transform: translateX(100%) rotateY(-40deg) translateZ(0);
  z-index: 2;
}

/* 3D強調: 768px以上でアクティブを前面・左右を奥へ */
@media (min-width: 768px) {
  .carousel3d {
    perspective: 1350px;
  }
  .carousel3d__wrapper {
    height: 28.6458333333vw;
  }
  .carousel3d__item.left,
  .carousel3d__item.right {
    display: block;
  }
  .carousel3d__item.active {
    transform: translateX(-50%) translateZ(31.25vw);
    z-index: 3;
  }
  .carousel3d__item.left {
    transform: translateX(-200%) translateY(-50%) rotateY(5deg);
    z-index: 2;
    opacity: 0.9;
  }
  .carousel3d__item.right {
    transform: translateX(100%) translateY(-50%) rotateY(-5deg);
    z-index: 2;
    opacity: 0.9;
  }
}
@media (min-width: 1200px) {
  .carousel3d {
    perspective: 1400px;
  }
  .carousel3d__wrapper {
    height: 22.4137931034vw;
  }
  .carousel3d__item.left,
  .carousel3d__item.right {
    display: block;
  }
  .carousel3d__item.active {
    transform: translate(-50%, 0) rotateY(0deg) translateZ(340px);
  }
  .carousel3d__item.left {
    transform: translate(-180%, -20%) rotateY(28deg) translateZ(-80px);
  }
  .carousel3d__item.right {
    transform: translate(80%, -20%) rotateY(-28deg) translateZ(-80px);
  }
}
/* ナビ部分 */
.carousel3d__nav {
  margin-top: 5.3333333333vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.6666666667vw;
}
@media (min-width: 768px) {
  .carousel3d__nav {
    margin-top: 2.6041666667vw;
    gap: 3.2552083333vw;
  }
}
@media (min-width: 1200px) {
  .carousel3d__nav {
    margin-top: 2.4137931034vw;
    gap: 1.724137931vw;
  }
}

.carousel3d__btn {
  position: relative;
  display: inline-block;
  width: 12.8vw;
  height: 9.0666666667vw;
  padding: 0;
  border: none;
  background-color: #89cb51;
  box-shadow: 0 0.5333333333vw 0 #5a9a24;
  border-radius: 50%;
  margin-top: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (min-width: 768px) {
  .carousel3d__btn {
    width: 6.25vw;
    height: 4.6875vw;
    box-shadow: 0 0.2604166667vw 0 #5a9a24;
  }
}
@media (min-width: 1200px) {
  .carousel3d__btn {
    width: 3.3103448276vw;
    height: 2.4827586207vw;
    box-shadow: 0 0.1379310345vw 0 #5a9a24;
  }
  .carousel3d__btn:hover, .carousel3d__btn:active, .carousel3d__btn.is-pressed {
    transform: translateY(0.1379310345vw);
    box-shadow: none;
  }
}

.carousel3d__prev {
  background-image: url("../img/lower/hello/button_prev.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.carousel3d__next {
  background-image: url("../img/lower/hello/button_next.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.carousel3d__dots {
  display: flex;
  gap: 5.8666666667vw;
  align-items: center;
}
@media (min-width: 768px) {
  .carousel3d__dots {
    gap: 2.8645833333vw;
  }
}
@media (min-width: 1200px) {
  .carousel3d__dots {
    gap: 1.5172413793vw;
  }
}

.carousel3d__dot {
  width: 1.6vw;
  height: 1.6vw;
  background: #89cb51;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .carousel3d__dot {
    width: 0.78125vw;
    height: 0.78125vw;
  }
}
@media (min-width: 1200px) {
  .carousel3d__dot {
    width: 0.4137931034vw;
    height: 0.4137931034vw;
  }
}

.carousel3d__dot.active {
  width: 2.6666666667vw;
  height: 2.6666666667vw;
  background: #38a067;
}
@media (min-width: 768px) {
  .carousel3d__dot.active {
    width: 1.3020833333vw;
    height: 1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .carousel3d__dot.active {
    width: 0.6896551724vw;
    height: 0.6896551724vw;
  }
}

/* テキスト */
.carousel3d__text-area {
  margin-top: 5.3333333333vw;
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 3.7333333333vw;
  line-height: 2;
  font-weight: 700;
  background-color: #fff;
  border-radius: 5.3333333333vw;
  box-shadow: 0 1.0666666667vw 0 #cbcbcb;
  padding: 5.3333333333vw;
}
@media (min-width: 768px) {
  .carousel3d__text-area {
    margin: 0 auto 0;
    width: 43.6197916667vw;
    font-size: 1.8229166667vw;
    line-height: 2;
    border-radius: 3.6458333333vw;
    box-shadow: 0 0.5208333333vw 0 #cbcbcb;
    padding: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .carousel3d__text-area {
    width: 48.9655172414vw;
    font-size: 1.1034482759vw;
    line-height: 2.25;
    border-radius: 1.6551724138vw;
    box-shadow: 0 0.275862069vw 0 #cbcbcb;
    padding: 2.7586206897vw 3.4482758621vw 2.7586206897vw;
  }
}

.carousel3d__text-title {
  color: #fff;
  background-color: #19468d;
  border-radius: 4.8vw;
  padding: 0.8vw 5.6vw 0.2666666667vw;
  display: inline-block;
  font-weight: 400;
}
@media (min-width: 768px) {
  .carousel3d__text-title {
    padding: 0.390625vw 2.6041666667vw 0.1302083333vw;
  }
}
@media (min-width: 1200px) {
  .carousel3d__text-title {
    padding: 0.2068965517vw 1.4482758621vw 0.0689655172vw;
  }
}

.carousel3d__text {
  margin-top: 2.6666666667vw;
  display: block;
  white-space: pre-wrap;
  word-break: break-all;
  background-image: url("../img/lower/hello/line_sptb.png");
  background-size: 100%;
  background-position: center -1.3333333333vw;
  background-repeat: no-repeat;
  background-repeat: repeat-y;
  padding-bottom: 2.1333333333vw;
}
@media (min-width: 768px) {
  .carousel3d__text {
    margin-top: 1.3020833333vw;
    font-size: 1.8229166667vw;
    line-height: 2;
    text-underline-offset: 0.2604166667vw;
    text-decoration-thickness: 0.2604166667vw;
    background-image: url("../img/lower/hello/line_sptb.png");
    background-size: 100%;
    background-position: center -0.6510416667vw;
    background-repeat: no-repeat;
    background-repeat: repeat-y;
    padding-bottom: 1.0416666667vw;
  }
}
@media (min-width: 1200px) {
  .carousel3d__text {
    margin-top: 0.6896551724vw;
    font-size: 1.2413793103vw;
    line-height: 2;
    text-underline-offset: 0.1379310345vw;
    text-decoration-thickness: 0.1379310345vw;
    background-image: url("../img/lower/hello/line_pc.png");
    background-size: 100%;
    background-position: center -0.3448275862vw;
    background-repeat: no-repeat;
    background-repeat: repeat-y;
  }
}

/* ---------------------------------------
  イットちゃんのQ & A
--------------------------------------- */
.helloSection--qa {
  padding-top: 2.6666666667vw;
  padding-bottom: 21.3333333333vw;
  position: relative;
  background-color: #e1f6ff;
}
@media (min-width: 768px) {
  .helloSection--qa {
    padding-top: 0;
    padding-bottom: 15.625vw;
  }
}
@media (min-width: 1200px) {
  .helloSection--qa {
    padding-bottom: 13.7931034483vw;
  }
}

.helloSection--qa::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -0.2666666667vw;
  width: 100%;
  height: 16vw;
  pointer-events: none;
  display: block;
  background-image: url("../img/lower/hello/bg_cloud_pale_sp.svg");
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .helloSection--qa::after {
    height: 13.8020833333vw;
    background-image: url("../img/lower/hello/bg_cloud_pale_tb.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  .helloSection--qa::after {
    height: 13.7931034483vw;
    background-image: url("../img/lower/hello/bg_cloud_pale_pc.svg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}

/* カードレイアウト */
.qa__cards {
  display: grid;
  gap: 6.9333333333vw;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, auto);
}
@media (min-width: 768px) {
  .qa__cards {
    gap: 5.2083333333vw 4.9479166667vw;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
  }
}
@media (min-width: 1200px) {
  .qa__cards {
    gap: 0 3.4482758621vw;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
  }
}

.qa__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .qa__card {
    gap: 2.6041666667vw;
  }
}
@media (min-width: 1200px) {
  .qa__card {
    gap: 2.2068965517vw;
    align-items: flex-start;
  }
}

@media (min-width: 768px) {
  .qa__card--02 {
    margin-top: 5.2083333333vw;
  }
}
@media (min-width: 768px) {
  .qa__card--04 {
    margin-top: 5.2083333333vw;
  }
}
@media (min-width: 1200px) {
  .qa__card--04 {
    margin-top: 5.5172413793vw;
  }
}

/* 質問 */
.qa__q {
  font-size: 3.7333333333vw;
  line-height: 2;
  font-weight: 700;
  color: #19468d;
  padding: 2.1333333333vw 2.6666666667vw 1.8666666667vw;
  background-color: #fff;
  border-radius: 5.3333333333vw;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2.6666666667vw;
}
@media (min-width: 768px) {
  .qa__q {
    font-size: 1.8229166667vw;
    line-height: 1.2142857143;
    padding: 1.171875vw 1.3020833333vw;
    border-radius: 3.6458333333vw;
    gap: 1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .qa__q {
    font-size: 1.2413793103vw;
    line-height: 2.25;
    padding: 0.9655172414vw 1.3793103448vw;
    border-radius: 2.5517241379vw;
    gap: 1.724137931vw;
    width: 31.724137931vw;
  }
}

.qa__q-number {
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 4.2666666667vw;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  background-color: #3e8ce6;
  border-radius: 50%;
  padding: 0.8vw 0 1.3333333333vw;
  display: inline-block;
  width: 10.4vw;
  text-align: center;
}
@media (min-width: 768px) {
  .qa__q-number {
    width: 5.078125vw;
    height: 3.2552083333vw;
    font-size: 2.0833333333vw;
    padding: 0.390625vw 0 0.6510416667vw;
  }
}
@media (min-width: 1200px) {
  .qa__q-number {
    width: 5.1034482759vw;
    height: 3.3103448276vw;
    font-size: 2.2068965517vw;
    padding: 0.4137931034vw 0 0.3448275862vw;
  }
}

.qa__q-text {
  position: relative;
}

.qa__q-text::after {
  content: "?";
  position: absolute;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%) rotate(20deg);
  right: -7.4666666667vw;
  width: 6.4vw;
  font-size: 6.4vw;
  line-height: 1;
}
@media (min-width: 768px) {
  .qa__q-text::after {
    font-size: 3.125vw;
    top: 80%;
  }
}
@media (min-width: 1200px) {
  .qa__q-text::after {
    font-size: 2.0689655172vw;
  }
}

/* 回答 */
.qa__a {
  display: flex;
  gap: 4.2666666667vw;
}
@media (min-width: 768px) {
  .qa__a {
    gap: 2.0833333333vw;
    flex-basis: auto;
  }
}
@media (min-width: 1200px) {
  .qa__a {
    gap: 2.1379310345vw;
  }
}

.qa__a-text {
  font-size: 3.7333333333vw;
  line-height: 2;
  font-weight: 700;
  color: #19468d;
  padding: 2.1333333333vw 5.3333333333vw 2.6666666667vw 2.6666666667vw;
  background-color: #fff;
  border-radius: 5.3333333333vw;
  display: flex;
  width: 64.8vw;
  gap: 2.6666666667vw;
  position: relative;
}
@media (min-width: 768px) {
  .qa__a-text {
    font-size: 1.8229166667vw;
    line-height: 2;
    width: 31.640625vw;
    padding: 1.0416666667vw 2.6041666667vw 1.3020833333vw 1.3020833333vw;
    border-radius: 2.6041666667vw;
    gap: 1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .qa__a-text {
    width: 31.724137931vw;
    border-radius: 2.7586206897vw;
    padding: 0.9655172414vw 1.724137931vw 1.724137931vw 1.3793103448vw;
    font-size: 1.2413793103vw;
    line-height: 2;
    gap: 1.724137931vw;
  }
}
.qa__a-text::after {
  content: "";
  display: block;
  position: absolute;
  right: -1.3333333333vw;
  top: 5.3333333333vw;
  bottom: auto;
  transform: rotate(-49deg);
  border-width: 4.2666666667vw 4.8vw 4.2666666667vw 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  z-index: -1;
}
@media (min-width: 768px) {
  .qa__a-text::after {
    right: -0.6510416667vw;
    top: 2.6041666667vw;
    border-width: 2.0833333333vw 2.34375vw 2.0833333333vw 0;
  }
}
@media (min-width: 1200px) {
  .qa__a-text::after {
    border-width: 2.0689655172vw 2.3448275862vw 2.0689655172vw 0;
    right: -0.3448275862vw;
    top: 2.6206896552vw;
  }
}

.qa__a-number {
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 4.2666666667vw;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  background-color: #ed47b4;
  border-radius: 50%;
  padding: 0.8vw 0 1.3333333333vw;
  display: inline-block;
  width: 10.4vw;
  height: 6.6666666667vw;
  text-align: center;
}
@media (min-width: 768px) {
  .qa__a-number {
    width: 5.078125vw;
    height: 3.2552083333vw;
    font-size: 2.0833333333vw;
    padding: 0.390625vw 0 0.6510416667vw;
  }
}
@media (min-width: 1200px) {
  .qa__a-number {
    width: 5.1034482759vw;
    height: 3.3103448276vw;
    font-size: 2.2068965517vw;
    padding: 0.4137931034vw 0 0.3448275862vw;
  }
}

.qa__a-text-text {
  width: calc(100% - 13.0666666667vw);
}
@media (min-width: 768px) {
  .qa__a-text-text {
    width: calc(100% - 5.859375vw);
  }
}
@media (min-width: 1200px) {
  .qa__a-text-text {
    margin-top: 0.6206896552vw;
    width: calc(100% - 6.4827586207vw);
  }
}

.qa__a-img {
  width: calc(100% - 67.7333333333vw);
  text-align: right;
}
@media (min-width: 768px) {
  .qa__a-img {
    width: calc(100% - 33.0729166667vw);
  }
}
@media (min-width: 1200px) {
  .qa__a-img {
    margin-top: 0.5517241379vw;
    width: calc(100% - 33.1034482759vw);
  }
}

.qa__a-img--01 img {
  width: 20.2666666667vw;
  height: 22.4vw;
}
@media (min-width: 768px) {
  .qa__a-img--01 img {
    width: 9.8958333333vw;
    height: 10.9375vw;
  }
}
@media (min-width: 1200px) {
  .qa__a-img--01 img {
    width: 9.9310344828vw;
    height: 10.8965517241vw;
  }
}

.qa__a-img--02 img {
  width: 16.5333333333vw;
  height: 24vw;
}
@media (min-width: 768px) {
  .qa__a-img--02 img {
    width: 8.0729166667vw;
    height: 11.71875vw;
  }
}
@media (min-width: 1200px) {
  .qa__a-img--02 img {
    width: 7.5172413793vw;
    height: 10.8965517241vw;
  }
}

.qa__a-img--03 img {
  width: 18.4vw;
  height: 29.6vw;
}
@media (min-width: 768px) {
  .qa__a-img--03 img {
    width: 8.984375vw;
    height: 14.453125vw;
  }
}
@media (min-width: 1200px) {
  .qa__a-img--03 img {
    width: 8.3448275862vw;
    height: 13.4482758621vw;
  }
}

.qa__a-img--04 img {
  width: 19.4666666667vw;
  height: 22.6666666667vw;
}
@media (min-width: 768px) {
  .qa__a-img--04 img {
    width: 9.5052083333vw;
    height: 11.0677083333vw;
  }
}
@media (min-width: 1200px) {
  .qa__a-img--04 img {
    width: 9.3793103448vw;
    height: 11.0344827586vw;
  }
}

/* ---------------------------------------
  動画ギャラリー
--------------------------------------- */
.helloSection--movie {
  position: relative;
  background-color: #effaff;
  padding-top: 8vw;
  padding-bottom: 6.4vw;
}
@media (min-width: 768px) {
  .helloSection--movie {
    padding-top: 0;
    padding-bottom: 5.859375vw;
  }
}
@media (min-width: 1200px) {
  .helloSection--movie {
    padding-bottom: 3.4482758621vw;
    margin-top: -3.4482758621vw;
  }
}

/* カードレイアウト */
.movie__cards {
  display: grid;
  gap: 13.3333333333vw;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, auto);
}
@media (min-width: 768px) {
  .movie__cards {
    gap: 4.9479166667vw;
    margin-top: 3.90625vw;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
  }
}
@media (min-width: 1200px) {
  .movie__cards {
    gap: 3.4482758621vw;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, auto);
    width: 80vw;
    margin: 4.1379310345vw auto 0;
  }
}

.movie__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .movie__card {
    gap: 1.953125vw;
  }
}
@media (min-width: 1200px) {
  .movie__card {
    gap: 1.3793103448vw;
  }
}

.movie__card-movie {
  width: 89.3333333333vw;
  height: 50.1333333333vw;
  overflow: hidden;
  border-radius: 5.3333333333vw;
}
@media (min-width: 768px) {
  .movie__card-movie {
    width: 43.6197916667vw;
    height: 24.4791666667vw;
    border-radius: 3.6458333333vw;
  }
}
@media (min-width: 1200px) {
  .movie__card-movie {
    width: 38.275862069vw;
    height: 21.5172413793vw;
    border-radius: 2.7586206897vw;
  }
}

.movie__card-movie iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie__card-title {
  display: flex;
  gap: 2.6666666667vw;
  width: 100%;
  font-size: 4.8vw;
  line-height: 1.5;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .movie__card-title {
    font-size: 2.34375vw;
    line-height: 1.5;
    gap: 1.3020833333vw;
  }
}
@media (min-width: 1200px) {
  .movie__card-title {
    font-size: 1.5862068966vw;
    line-height: 1.5652173913;
    gap: 0.6896551724vw;
  }
}

.movie__card-number {
  font-family: "Mochiy Pop One", sans-serif;
  font-size: 4.2666666667vw;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  background-color: #9cc716;
  border-radius: 50%;
  padding: 1.3333333333vw 0 1.3333333333vw;
  display: inline-block;
  width: 10.4vw;
  height: 6.6666666667vw;
  text-align: center;
}
@media (min-width: 768px) {
  .movie__card-number {
    width: 5.078125vw;
    height: 3.2552083333vw;
    font-size: 2.0833333333vw;
    padding: 0.6510416667vw 0 0.6510416667vw;
  }
}
@media (min-width: 1200px) {
  .movie__card-number {
    width: 5.1034482759vw;
    height: 3.3103448276vw;
    font-size: 1.9310344828vw;
    padding: 0.6206896552vw 0 0.6206896552vw;
  }
}

.movie__card-title-title {
  width: calc(100% - 10.4vw);
  font-weight: 700;
}
@media (min-width: 768px) {
  .movie__card-title-title {
    font-size: 2.34375vw;
    line-height: 1.5;
    width: calc(100% - 5.078125vw);
  }
}
@media (min-width: 1200px) {
  .movie__card-title-title {
    font-size: 1.5862068966vw;
    line-height: 1.5652173913;
    width: calc(100% - 5.1034482759vw);
  }
}

.movie__card-text {
  font-size: 3.7333333333vw;
  line-height: 2;
  font-weight: 700;
}
@media (min-width: 768px) {
  .movie__card-text {
    font-size: 1.8229166667vw;
    line-height: 2;
  }
}
@media (min-width: 1200px) {
  .movie__card-text {
    font-size: 1.1034482759vw;
    line-height: 2;
  }
}

/* Scroll Reveal: 下からフェードイン */
.js-scrollTarget {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 13.3333333333vw));
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
}
@media (min-width: 768px) {
  .js-scrollTarget {
    transform: translateY(var(--reveal-distance-tb, 6.5104166667vw));
  }
}
@media (min-width: 1200px) {
  .js-scrollTarget {
    transform: translateY(var(--reveal-distance-tb, 6.8965517241vw));
  }
}

.js-scrollTarget.is-revealPrep {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 13.3333333333vw));
}
@media (min-width: 768px) {
  .js-scrollTarget.is-revealPrep {
    transform: translateY(var(--reveal-distance-tb, 6.5104166667vw));
  }
}
@media (min-width: 1200px) {
  .js-scrollTarget.is-revealPrep {
    transform: translateY(var(--reveal-distance-tb, 6.8965517241vw));
  }
}

.js-scrollTarget.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 動きを減らす設定への配慮（任意） */
@media (prefers-reduced-motion: reduce) {
  .js-scrollTarget {
    transition: none !important;
  }
}
/**
 * 見た目（初期 transform・transition）をまとめたスタイル側
 * Hook:   .js-topReveal
 * Visual: .reveal とそのモディファイア
 *
 * モディファイア（種類）
 *  - .reveal--up       : 下からフェードイン
 *  - .reveal--left     : 左からフェードイン
 *  - .reveal--right    : 右からフェードイン
 *  - .reveal--dl45     : 左斜め45°下からフェードイン
 *  - .reveal--scaleUp  : 小さくから大きく
 *
 * モディファイア（duration）
 *  - .reveal--dur-300 / 600 / 900 / 1200 ...（任意で拡張）
 * または data-reveal-duration で自由指定（JSが --reveal-duration を設定）
 */
/* 共通デフォ（既定は非表示・位置は本来の場所） */
.reveal,
.js-topReveal {
  --reveal-duration: 2s;
  --reveal-delay: 0s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-opacity-from: 0;
  /* 移動距離（端末別） */
  --reveal-dy-sp: 12.8vw;
  --reveal-dy-tb: 6.25vw;
  --reveal-dy-pc: 5.5172413793vw;
  --reveal-dx-sp: 10.6666666667vw;
  --reveal-dx-tb: 5.2083333333vw;
  --reveal-dx-pc: 4.4137931034vw;
  opacity: var(--reveal-opacity-from);
  /* ここがポイント：transform を使わず個別プロパティで */
  translate: none;
  scale: 1;
  will-change: opacity, translate, scale;
  transition: opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay), translate var(--reveal-duration) var(--reveal-ease) var(--reveal-delay), scale var(--reveal-duration) var(--reveal-ease) var(--reveal-delay);
}

/* 初期ステート（JSが is-revealPrep を付けたら“本来位置から”待機側へオフセット） */
.js-topReveal.is-revealPrep {
  /* 左下 → 斜め上　*/
  /* 右下 → 斜め上　*/
  /* 左上 → 斜め下　*/
  /* 右上 → 斜め下　*/
}
.js-topReveal.is-revealPrep.reveal--up {
  translate: 0 var(--reveal-dy-sp);
}
@media (min-width: 768px) {
  .js-topReveal.is-revealPrep.reveal--up {
    translate: 0 var(--reveal-dy-tb);
  }
}
@media (min-width: 1200px) {
  .js-topReveal.is-revealPrep.reveal--up {
    translate: 0 var(--reveal-dy-pc);
  }
}
.js-topReveal.is-revealPrep.reveal--left {
  translate: calc(-1 * var(--reveal-dx-sp)) 0;
}
@media (min-width: 768px) {
  .js-topReveal.is-revealPrep.reveal--left {
    translate: calc(-1 * var(--reveal-dx-tb)) 0;
  }
}
@media (min-width: 1200px) {
  .js-topReveal.is-revealPrep.reveal--left {
    translate: calc(-1 * var(--reveal-dx-pc)) 0;
  }
}
.js-topReveal.is-revealPrep.reveal--right {
  translate: var(--reveal-dx-sp) 0;
}
@media (min-width: 768px) {
  .js-topReveal.is-revealPrep.reveal--right {
    translate: var(--reveal-dx-tb) 0;
  }
}
@media (min-width: 1200px) {
  .js-topReveal.is-revealPrep.reveal--right {
    translate: var(--reveal-dx-pc) 0;
  }
}
.js-topReveal.is-revealPrep.reveal--dl45 {
  translate: calc(-1 * var(--reveal-dx-sp)) var(--reveal-dy-sp);
}
@media (min-width: 768px) {
  .js-topReveal.is-revealPrep.reveal--dl45 {
    translate: calc(-1 * var(--reveal-dx-tb)) var(--reveal-dy-tb);
  }
}
@media (min-width: 1200px) {
  .js-topReveal.is-revealPrep.reveal--dl45 {
    translate: calc(-1 * var(--reveal-dx-pc)) var(--reveal-dy-pc);
  }
}
.js-topReveal.is-revealPrep.reveal--dr45 {
  translate: var(--reveal-dx-sp) var(--reveal-dy-sp);
}
@media (min-width: 768px) {
  .js-topReveal.is-revealPrep.reveal--dr45 {
    translate: var(--reveal-dx-tb) var(--reveal-dy-tb);
  }
}
@media (min-width: 1200px) {
  .js-topReveal.is-revealPrep.reveal--dr45 {
    translate: var(--reveal-dx-pc) var(--reveal-dy-pc);
  }
}
.js-topReveal.is-revealPrep.reveal--ul45 {
  translate: calc(-1 * var(--reveal-dx-sp)) calc(-1 * var(--reveal-dy-sp));
}
@media (min-width: 768px) {
  .js-topReveal.is-revealPrep.reveal--ul45 {
    translate: calc(-1 * var(--reveal-dx-tb)) calc(-1 * var(--reveal-dy-tb));
  }
}
@media (min-width: 1200px) {
  .js-topReveal.is-revealPrep.reveal--ul45 {
    translate: calc(-1 * var(--reveal-dx-pc)) calc(-1 * var(--reveal-dy-pc));
  }
}
.js-topReveal.is-revealPrep.reveal--ur45 {
  translate: var(--reveal-dx-sp) calc(-1 * var(--reveal-dy-sp));
}
@media (min-width: 768px) {
  .js-topReveal.is-revealPrep.reveal--ur45 {
    translate: var(--reveal-dx-tb) calc(-1 * var(--reveal-dy-tb));
  }
}
@media (min-width: 1200px) {
  .js-topReveal.is-revealPrep.reveal--ur45 {
    translate: var(--reveal-dx-pc) calc(-1 * var(--reveal-dy-pc));
  }
}
.js-topReveal.is-revealPrep.reveal--scaleUp {
  scale: 0.86;
  transform-origin: center;
}
.js-topReveal.is-revealPrep.reveal--scaleDown {
  scale: 1.2;
  transform-origin: center;
}
.js-topReveal.is-revealPrep.reveal--upWithScaleUp {
  scale: 0.86;
  transform-origin: center;
  translate: 0 var(--reveal-dy-sp);
}
@media (min-width: 768px) {
  .js-topReveal.is-revealPrep.reveal--upWithScaleUp {
    translate: 0 var(--reveal-dy-tb);
  }
}
@media (min-width: 1200px) {
  .js-topReveal.is-revealPrep.reveal--upWithScaleUp {
    translate: 0 var(--reveal-dy-pc);
  }
}

/* 発火後：常に“本来の位置＆サイズ”で着地（他の transform は壊さない） */
.js-topReveal.is-revealed {
  opacity: 1 !important;
  translate: none !important;
  scale: 1 !important;
}

/* 動きを減らす */
@media (prefers-reduced-motion: reduce) {
  .js-topReveal {
    transition: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
  }
}/*# sourceMappingURL=style.css.map */