@charset "UTF-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document

   ========================================================================== */

/**

 * 1. Correct the line height in all browsers.

 * 2. Prevent adjustments of font size after orientation changes in iOS.

 */

html {

  line-height: 1.15; /* 1 */

  -webkit-text-size-adjust: 100%; /* 2 */

}



/* Sections

   ========================================================================== */

/**

 * Remove the margin in all browsers.

 */

body {

  margin: 0;

}



/**

 * Render the `main` element consistently in IE.

 */

main {

  display: block;

}



/**

 * Correct the font size and margin on `h1` elements within `section` and

 * `article` contexts in Chrome, Firefox, and Safari.

 */

h1 {

  font-size: 2em;

  margin: 0.67em 0;

}



/* Grouping content

   ========================================================================== */

/**

 * 1. Add the correct box sizing in Firefox.

 * 2. Show the overflow in Edge and IE.

 */

hr {

  box-sizing: content-box; /* 1 */

  height: 0; /* 1 */

  overflow: visible; /* 2 */

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */

pre {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}



/* Text-level semantics

   ========================================================================== */

/**

 * Remove the gray background on active links in IE 10.

 */

a {

  background-color: transparent;

}



/**

 * 1. Remove the bottom border in Chrome 57-

 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

 */

abbr[title] {

  border-bottom: none; /* 1 */

  text-decoration: underline; /* 2 */

  -webkit-text-decoration: underline dotted;

          text-decoration: underline dotted; /* 2 */

}



/**

 * Add the correct font weight in Chrome, Edge, and Safari.

 */

b,

strong {

  font-weight: bolder;

}



/**

 * 1. Correct the inheritance and scaling of font size in all browsers.

 * 2. Correct the odd `em` font sizing in all browsers.

 */

code,

kbd,

samp {

  font-family: monospace, monospace; /* 1 */

  font-size: 1em; /* 2 */

}



/**

 * Add the correct font size in all browsers.

 */

small {

  font-size: 80%;

}



/**

 * Prevent `sub` and `sup` elements from affecting the line height in

 * all browsers.

 */

sub,

sup {

  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline;

}



sub {

  bottom: -0.25em;

}



sup {

  top: -0.5em;

}



/* Embedded content

   ========================================================================== */

/**

 * Remove the border on images inside links in IE 10.

 */

img {

  border-style: none;

}



/* Forms

   ========================================================================== */

/**

 * 1. Change the font styles in all browsers.

 * 2. Remove the margin in Firefox and Safari.

 */

button,

input,

optgroup,

select,

textarea {

  font-family: inherit; /* 1 */

  font-size: 100%; /* 1 */

  line-height: 1.15; /* 1 */

  margin: 0; /* 2 */

}



/**

 * Show the overflow in IE.

 * 1. Show the overflow in Edge.

 */

button,

input { /* 1 */

  overflow: visible;

}



/**

 * Remove the inheritance of text transform in Edge, Firefox, and IE.

 * 1. Remove the inheritance of text transform in Firefox.

 */

button,

select { /* 1 */

  text-transform: none;

}



/**

 * Correct the inability to style clickable types in iOS and Safari.

 */

button,

[type=button],

[type=reset],

[type=submit] {

  -webkit-appearance: button;

}



/**

 * Remove the inner border and padding in Firefox.

 */

button::-moz-focus-inner,

[type=button]::-moz-focus-inner,

[type=reset]::-moz-focus-inner,

[type=submit]::-moz-focus-inner {

  border-style: none;

  padding: 0;

}



/**

 * Restore the focus styles unset by the previous rule.

 */

button:-moz-focusring,

[type=button]:-moz-focusring,

[type=reset]:-moz-focusring,

[type=submit]:-moz-focusring {

  outline: 1px dotted ButtonText;

}



/**

 * Correct the padding in Firefox.

 */

fieldset {

  padding: 0.35em 0.75em 0.625em;

}



/**

 * 1. Correct the text wrapping in Edge and IE.

 * 2. Correct the color inheritance from `fieldset` elements in IE.

 * 3. Remove the padding so developers are not caught out when they zero out

 *    `fieldset` elements in all browsers.

 */

legend {

  box-sizing: border-box; /* 1 */

  color: inherit; /* 2 */

  display: table; /* 1 */

  max-width: 100%; /* 1 */

  padding: 0; /* 3 */

  white-space: normal; /* 1 */

}



/**

 * Add the correct vertical alignment in Chrome, Firefox, and Opera.

 */

progress {

  vertical-align: baseline;

}



/**

 * Remove the default vertical scrollbar in IE 10+.

 */

textarea {

  overflow: auto;

}



/**

 * 1. Add the correct box sizing in IE 10.

 * 2. Remove the padding in IE 10.

 */

[type=checkbox],

[type=radio] {

  box-sizing: border-box; /* 1 */

  padding: 0; /* 2 */

}



/**

 * Correct the cursor style of increment and decrement buttons in Chrome.

 */

[type=number]::-webkit-inner-spin-button,

[type=number]::-webkit-outer-spin-button {

  height: auto;

}



/**

 * 1. Correct the odd appearance in Chrome and Safari.

 * 2. Correct the outline style in Safari.

 */

[type=search] {

  -webkit-appearance: textfield; /* 1 */

  outline-offset: -2px; /* 2 */

}



/**

 * Remove the inner padding in Chrome and Safari on macOS.

 */

[type=search]::-webkit-search-decoration {

  -webkit-appearance: none;

}



/**

 * 1. Correct the inability to style clickable types in iOS and Safari.

 * 2. Change font properties to `inherit` in Safari.

 */

::-webkit-file-upload-button {

  -webkit-appearance: button; /* 1 */

  font: inherit; /* 2 */

}



/* Interactive

   ========================================================================== */

/*

 * Add the correct display in Edge, IE 10+, and Firefox.

 */

details {

  display: block;

}



/*

 * Add the correct display in all browsers.

 */

summary {

  display: list-item;

}



/* Misc

   ========================================================================== */

/**

 * Add the correct display in IE 10+.

 */

template {

  display: none;

}



/**

 * Add the correct display in IE 10.

 */

[hidden] {

  display: none;

}



:root {

  --font-jp: "Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック","Yu Gothic","YuGothic","メイリオ",Meiryo,sans-serif;

  --font-en: "LINE Seed JP", sans-serif;

  --color-drak-gray: #6E6E6E;

  --color-light-gray: #E4E4E4;

  --color-bg: #FDFAF2;

  --color-black: #2E2E2E;

  --color-black-2: #000000;

  --color-white: #FFFFFF;

  --color-blue: #006CB8;

  --color-yellow: #FFDA7A;

  --color-light-blue:#DDEFFC;

  --base-font-size: 1em;

  --base-font-default-num: 16;

  --font-size-12: calc(12 / var(--base-font-default-num) * 1rem);

  --font-size-14: calc(14 / var(--base-font-default-num) * 1rem);

  --font-size-16: calc(16 / var(--base-font-default-num) * 1rem);

  --font-size-18: calc(18 / var(--base-font-default-num) * 1rem);

  --font-size-19: calc(19 / var(--base-font-default-num) * 1rem);

  --font-size-20: calc(20 / var(--base-font-default-num) * 1rem);

  --font-size-22: calc(22 / var(--base-font-default-num) * 1rem);

  --font-size-24: calc(24 / var(--base-font-default-num) * 1rem);

  --font-size-28: calc(28 / var(--base-font-default-num) * 1rem);

  --font-size-32: calc(32 / var(--base-font-default-num) * 1rem);

  --font-size-40: calc(40 / var(--base-font-default-num) * 1rem);

  --font-size-48: calc(48 / var(--base-font-default-num) * 1rem);

  --font-size-56: calc(56 / var(--base-font-default-num) * 1rem);

  --font-size-64: calc(64 / var(--base-font-default-num) * 1rem);

  --z-index-high:100;

  --z-index-middle-high:70;

  --z-index-middle:50;

  --z-index-middle-low:30;

  --z-index-low:0;

  --font-weight-regular: 400;

  --font-weight-semibold:600;

  --font-weight-bold:700;

  --header-height:74px;

  --lower-header-breadcrumb-height: 18px;

  --scrollbar-width: 0px;

}

@media (min-width: 1440px) {

  :root {

    --header-height: 88px;

  }

}



:root {

  color-scheme: light dark;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



* {

  margin: 0;

  padding: 0;

  font: inherit;

  color: inherit;

}



html {

  overflow-x: hidden;

  line-height: 1.5;

  font-family: var(--font-jp);

}



body {

  background: var(--color-bg);

  color: var(--color-black);

  overflow-wrap: anywhere;

  word-break: normal;

  line-break: strict;

  font-family: var(--font-jp);

}



h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, li {

  margin: 0;

}



:focus {

  outline: none;

}



:focus-visible {

  outline: 2px solid var(--color-blue);

  outline-offset: 2px;

}



img,

picture,

video,

canvas,

svg {

  display: block;

  max-width: 100%;

  height: auto;

}



video {

  -o-object-fit: cover;

     object-fit: cover;

}



button {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  padding: 0;

  border: none;

  font: inherit;

  background: transparent;

  cursor: pointer;

}



input,

textarea,

select {

  font: inherit;

  color: inherit;

}



input,

textarea,

select,

button {

  -webkit-tap-highlight-color: transparent;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



ul,

ol {

  list-style: none;

}



em {

  font-style: italic;

}



html.is-lock,

body.is-lock {

  overflow: hidden;

  touch-action: none;

  overscroll-behavior: none;

}



html.is-lock {

  scrollbar-gutter: stable;

}



.l-header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: var(--z-index-high);

}

@media screen and (min-width: 1440px) {

  .l-header {

    background: var(--color-white);

    border-bottom: 1px solid var(--color-light-gray);

  }

}



.l-header__body {

  position: relative;

}

@media screen and (min-width: 1440px) {

  .l-header__body {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: auto;

    padding: 0 40px;

    max-width: 1440px;

    width: 100%;

    height: 77px;

  }

}



.l-header__inner {

  position: relative;

  padding: 0 24px;

  display: flex;

  height: 64px;

  background: var(--color-white);

  border-bottom: 1px solid var(--color-light-gray);

  align-items: center;

  justify-content: space-between;

  z-index: var(--z-index-high);

}

@media screen and (min-width: 1440px) {

  .l-header__inner {

    display: block;

    padding: 0;

    background: unset;

    height: unset;

    border-bottom: unset;

  }

}



.l-header__logo {

  width: 240px;

  height: 26px;

}

@media screen and (min-width: 1440px) {

  .l-header__logo {

    width: 368px;

    height: 40px;

  }

}



.l-header-button {

  position: relative;

  width: 40px;

  height: 40px;

}

.l-header-button:before, .l-header-button:after {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  width: 40px;

  height: 40px;

  content: "";

  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;

  transform-origin: center center;

}

.l-header-button:before {

  opacity: 1;

  background: url(../img/common/icon-open-btn.svg) center/contain no-repeat;

  transform: rotate(0);

}

.l-header-button:after {

  opacity: 0;

  background: url(../img/common/icon-close-btn.svg) center/contain no-repeat;

  transform: rotate(-180deg);

}

@media screen and (min-width: 1440px) {

  .l-header-button {

    display: none;

  }

}



.l-header-button[aria-expanded=true]:before {

  opacity: 0;

  transform: rotate(180deg);

}

.l-header-button[aria-expanded=true]:after {

  opacity: 1;

  transform: rotate(0);

}



.l-header-nav {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  opacity: 0;

  z-index: var(--z-index-middle-high);

  pointer-events: none;

  cursor: none;

}

@media screen and (min-width: 1440px) {

  .l-header-nav {

    position: unset;

    top: unset;

    left: unset;

    transition: none;

    display: block;

    opacity: 1;

    pointer-events: unset;

    cursor: unset;

  }

}



.l-header-nav.is-interactive {

  transition: display 0.5s allow-discrete, opacity 0.5s;

}



.l-header-nav.is-open {

  display: block;

  opacity: 1;

  pointer-events: unset;

  cursor: unset;

}

@starting-style {

  .l-header-nav.is-open {

    opacity: 0;

  }

}



.l-header-nav__body {

  padding: 0 24px;

  display: grid;

  align-items: start;

  justify-items: center;

  width: 100%;

  height: 100vh;

  height: 100dvh;

  background-color: var(--color-bg);

  overflow-y: scroll;

}

@media screen and (min-width: 1440px) {

  .l-header-nav__body {

    display: unset;

    align-items: unset;

    justify-items: unset;

    padding: 0;

    width: 100%;

    height: auto;

    background-color: transparent;

    overflow-y: unset;

  }

}



.l-header-nav__inner {

  width: 100%;

}

@media screen and (min-width: 1440px) {

  .l-header-nav__inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

}



.l-header-nav__list {

  display: flex;

  flex-direction: column;

  gap: 25px 0;

  padding: 114px 0 0 0;

}

@media screen and (min-width: 480px) {

  .l-header-nav__list {

    margin: auto;

    max-width: 342px;

  }

}

@media screen and (min-width: 1440px) {

  .l-header-nav__list {

    margin: 0 32px 0 auto;

    flex-direction: row;

    gap: 0 32px;

    padding: 0;

    max-width: unset;

  }

}



.l-header-nav__link {

  font-size: var(--font-size-16);

  font-weight: var(--font-weight-semibold);

  line-height: 1.8;

  text-decoration: none;

  color: var(--color-black);

  transition: color 0.2s ease;

}

.l-header-nav__link[target=_blank] {

  display: inline-grid;

  grid-template-columns: 1fr auto;

  align-items: center;

  justify-content: flex-start;

}

.l-header-nav__link[target=_blank]:after, .l-header-nav__link[target=_blank]:before {

  grid-column: 2;

  grid-row: 1;

  margin: 0 0 0 6px;

  display: block;

  width: 12px;

  height: 12px;

  content: "";

  transition: opacity ease 0.2s;

}

.l-header-nav__link[target=_blank]:after {

  background: url(../img/common/icon-blank-black.svg) center/contain no-repeat;

  opacity: 1;

}

.l-header-nav__link[target=_blank]:before {

  background: url(../img/common/icon-blank-blue.svg) center/contain no-repeat;

  opacity: 0;

}

@media screen and (min-width: 1440px) and (any-hover: hover) {

  .l-header-nav__link:hover {

    color: var(--color-blue);

  }

  .l-header-nav__link:hover:after {

    opacity: 0;

  }

  .l-header-nav__link:hover:before {

    opacity: 1;

  }

}

.l-header-nav__link.is-current {

  color: var(--color-blue);

}



.l-header-nav__contact {

  margin: 50px 0 0 0;

}

@media screen and (min-width: 480px) {

  .l-header-nav__contact {

    margin: 50px auto 0;

    max-width: 342px;

  }

}

@media screen and (min-width: 1440px) {

  .l-header-nav__contact {

    margin: 0;

    max-width: unset;

  }

}



.l-header-nav__contact-button {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 54px;

  width: 100%;

  background-color: var(--color-blue);

  border: 2px solid var(--color-blue);

  color: var(--color-white);

  text-decoration: none;

  border-radius: 64px;

  transition: background-color ease 0.2s;

}

.l-header-nav__contact-button:before {

  margin: auto;

  position: absolute;

  top: 0;

  right: 16px;

  bottom: 0;

  display: block;

  width: 24px;

  height: 24px;

  background: url(../img/common/icon-arrow-white.svg) center/contain no-repeat;

  content: "";

}

.l-header-nav__contact-button:after {

  margin: auto;

  position: absolute;

  top: 0;

  right: 16px;

  bottom: 0;

  display: block;

  width: 24px;

  height: 24px;

  background: url(../img/common/icon-arrow-blue.svg) center/contain no-repeat;

  opacity: 0;

  content: "";

}

@media screen and (min-width: 1440px) {

  .l-header-nav__contact-button {

    height: 45px;

    width: 156px;

  }

  .l-header-nav__contact-button:before, .l-header-nav__contact-button:after {

    right: 14px;

    width: 16px;

    height: 16px;

    border-radius: 54px;

    transition: opacity ease 0.2s;

  }

}

@media screen and (min-width: 1440px) and (any-hover: hover) {

  .l-header-nav__contact-button:hover {

    background-color: var(--color-white);

    color: var(--color-blue);

  }

  .l-header-nav__contact-button:hover:after {

    opacity: 1;

  }

  .l-header-nav__contact-button:hover:before {

    opacity: 0;

  }

}



.l-header-nav__contact-text {

  font-size: var(--font-size-16);

  font-weight: var(--font-weight-semibold);

  line-height: 1.8;

  color: inherit;

  transform: translateX(-7px);

}

@media screen and (min-width: 1440px) and (any-hover: hover) {

  .l-header-nav__contact-text {

    transition: color ease 0.2s;

  }

}



.l-footer a:focus-visible {

  outline: 2px solid var(--color-white);

  outline-offset: 2px;

}



.l-footer__inner {

  padding: 48px 24px;

  background: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .l-footer__inner {

    padding: 64px 24px;

  }

}



@media screen and (min-width: 1024px) {

  .l-footer__contents {

    margin: auto;

    display: flex;

    max-width: 1200px;

  }

}



.l-footer__logo {

  margin: auto;

  width: 240px;

  aspect-ratio: 240/26;

}

.l-footer__logo a {

  display: block;

}

@media screen and (min-width: 1024px) {

  .l-footer__logo {

    margin: unset;

  }

  .l-footer__logo a {

    width: 380px;

  }

}



@media screen and (min-width: 1024px) {

  .l-footer-nav {

    transform: translateY(5px);

    margin: 0 0 0 auto;

  }

}



.l-footer-nav__list {

  margin: 32px 0 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

  gap: 16px 0;

}

@media screen and (min-width: 1024px) {

  .l-footer-nav__list {

    margin: 0;

    flex-direction: row;

    gap: 0 32px;

  }

}



.l-footer-nav__link {

  text-decoration: none;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

  color: var(--color-white);

  transition: opacity ease 0.2s;

}

.l-footer-nav__link[target=_blank] {

  display: inline-grid;

  grid-template-columns: 1fr auto;

  align-items: center;

  justify-content: flex-start;

}

.l-footer-nav__link[target=_blank]:after, .l-footer-nav__link[target=_blank]:before {

  grid-column: 2;

  grid-row: 1;

  margin: 0 0 0 6px;

  display: block;

  width: 12px;

  height: 12px;

  content: "";

  transition: opacity ease 0.2s;

}

.l-footer-nav__link[target=_blank]:after {

  background: url(../img/common/icon-blank-white.svg) center/contain no-repeat;

}

@media screen and (min-width: 1024px) and (any-hover: hover) {

  .l-footer-nav__link:hover {

    opacity: 0.8;

  }

}



.l-footer__copywrite {

  padding: 9px 24px;

  text-align: center;

  background: var(--color-black-2);

}



.l-footer__copywrite-text {

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-12);

  line-height: 1.5;

  color: var(--color-white);

}



.l-main {

  overflow-x: hidden;

}



.c-title__sub {

  padding: 0 0 10px;

  position: relative;

  display: block;

  font-family: var(--font-en);

  font-weight: var(--font-weight-bold);

  font-size: var(--font-size-16);

  line-height: 1.4;

  letter-spacing: 0.03em;

  text-align: center;

  color: var(--color-blue);

}

.c-title__sub:after {

  margin: auto;

  position: absolute;

  right: 0;

  left: 0;

  bottom: 0;

  display: block;

  width: 16px;

  height: 2px;

  background-color: var(--color-blue);

  content: "";

}

@media screen and (min-width: 1024px) {

  .c-title__sub {

    padding: 0 0 19px;

    font-size: var(--font-size-20);

    line-height: 1;

  }

}



.c-title__text {

  margin: 4px 0 0 0;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-28);

  line-height: 1.8;

  text-align: center;

  color: var(--color-black);

}

@media screen and (min-width: 1024px) {

  .c-title__text {

    margin: 14px 0 0 0;

    font-size: var(--font-size-40);

    line-height: 1.5;

  }

}



.c-title__text-sub {

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-24);

  line-height: 1.5;

  text-align: center;

}



.c-title-dec {

  display: flex;

  justify-content: flex-start;

  align-items: flex-start;

  position: relative;

  font-size: var(--font-size-20);

  font-weight: var(--font-weight-semibold);

  letter-spacing: 0;

  gap: 0 8px;

}

.c-title-dec:before {

  flex: 0 0 16px;

  display: block;

  width: 16px;

  aspect-ratio: 1/1;

  content: "";

  background-color: var(--color-blue);

  border-radius: 50%;

  transform: translateY(0.4em);

}

@media screen and (min-width: 1024px) {

  .c-title-dec {

    font-size: var(--font-size-24);

  }

}



.c-title-dec .u-no-split {

  display: contents;

}



.c-title-catch-text {

  display: block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-28);

  line-height: 1.5;

  color: var(--color-blue);

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .c-title-catch-text {

    font-size: var(--font-size-40);

    text-align: left;

  }

}



.c-button {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  background-color: var(--color-white);

  border: 2px solid var(--color-blue);

  color: var(--color-blue);

  border-radius: 64px;

  transition: background-color ease 0.2s;

}

.c-button:before {

  margin: auto;

  position: absolute;

  top: 0;

  right: 16px;

  bottom: 0;

  display: block;

  width: 24px;

  height: 24px;

  background: url(../img/common/icon-arrow-blue.svg) center/contain no-repeat;

  content: "";

  pointer-events: none;

}

.c-button:after {

  margin: auto;

  position: absolute;

  top: 0;

  right: 16px;

  bottom: 0;

  display: block;

  width: 24px;

  height: 24px;

  background: url(../img/common/icon-arrow-white.svg) center/contain no-repeat;

  opacity: 0;

  content: "";

  pointer-events: none;

}

@media screen and (min-width: 1024px) {

  .c-button:before, .c-button:after {

    right: 14px;

    width: 24px;

    height: 24px;

    transition: opacity ease 0.2s;

  }

}

@media screen and (min-width: 1024px) and (any-hover: hover) {

  .c-button:hover {

    background-color: var(--color-blue);

    color: var(--color-white);

  }

  .c-button:hover:after {

    opacity: 1;

  }

  .c-button:hover:before {

    opacity: 0;

  }

}



.c-button__link {

  display: flex;

  justify-content: center;

  align-items: center;

  text-decoration: none;

  height: 54px;

  width: 100%;

}



.c-button__link-text {

  font-size: var(--font-size-16);

  font-weight: var(--font-weight-semibold);

  line-height: 1.8;

  color: inherit;

}

@media screen and (min-width: 1024px) and (any-hover: hover) {

  .c-button__link-text {

    transition: color ease 0.2s;

  }

}



@media screen and (min-width: 1024px) {

  .c-button.c-button--large {

    height: 72px;

  }

  .c-button.c-button--large:before, .c-button.c-button--large:after {

    right: 22px;

    width: 32px;

    height: 32px;

  }

  .c-button.c-button--large .c-button__link-text {

    font-size: var(--font-size-20);

    transform: translateX(2px);

  }

}



.c-button.c-button--anchor:after, .c-button.c-button--anchor:before {

  transform: rotate(90deg);

}



.c-link {

  position: relative;

  display: inline-block;

  padding: 0 20px 0 0;

  color: var(--color-blue);

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-14);

  line-height: 1.8;

  text-decoration: none;

  transition: opacity ease 0.2s;

}

.c-link:before {

  margin: auto;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  display: block;

  width: 16px;

  height: 16px;

  background: url(../img/common/icon-arrow-blue.svg) center/contain no-repeat;

  content: "";

}

@media screen and (min-width: 1024px) {

  .c-link {

    font-size: var(--font-size-16);

  }

}

@media screen and (min-width: 1024px) and (any-hover: hover) {

  .c-link:hover:not(.is-no-effect) {

    opacity: 0.8;

  }

}



.c-horizontal-scroll {

  position: relative;

  display: block;

  width: 100%;

}



.c-horizontal-scroll__hint {

  display: none;

}

@media screen and (min-width: 768px) {

  .c-horizontal-scroll__hint {

    margin: 0 0 8px;

    display: block;

    font-size: 14px;

    line-height: 1.4;

    text-align: center;

    color: var(--c-horizontal-scroll-hint-color, #666);

    transition: opacity 0.3s ease;

    pointer-events: none;

  }

}

@media screen and (min-width: 1200px) {

  .c-horizontal-scroll__hint {

    display: none;

  }

}



.c-horizontal-scroll.is-scrolled .c-horizontal-scroll__hint {

  opacity: 0;

}



.c-horizontal-scroll__viewport {

  width: 100%;

}

@media screen and (min-width: 768px) {

  .c-horizontal-scroll__viewport {

    overflow-x: auto;

    overflow-y: hidden;

    touch-action: manipulation;

    scrollbar-width: none;

    -ms-overflow-style: none;

  }

}

@media screen and (min-width: 1200px) {

  .c-horizontal-scroll__viewport {

    overflow-x: visible;

    overflow-y: visible;

    touch-action: auto;

  }

}



.c-horizontal-scroll__viewport::-webkit-scrollbar {

  display: none;

}



.c-horizontal-scroll__content {

  width: 100%;

}

@media screen and (min-width: 768px) {

  .c-horizontal-scroll__content {

    width: var(--c-horizontal-scroll-content-width, 1200px);

    min-width: var(--c-horizontal-scroll-content-width, 1200px);

  }

}

@media screen and (min-width: 1200px) {

  .c-horizontal-scroll__content {

    margin: 0 auto;

    min-width: 0;

    width: var(--c-horizontal-scroll-content-width, 1200px);

    max-width: 100%;

  }

}



.c-horizontal-scroll__bar {

  display: none;

}

@media screen and (min-width: 768px) {

  .c-horizontal-scroll__bar {

    position: relative;

    margin: var(--c-horizontal-scroll-bar-gap, 16px) auto 0;

    display: block;

    width: 100%;

    max-width: var(--c-horizontal-scroll-bar-max, 600px);

    height: var(--c-horizontal-scroll-bar-height, 6px);

    background: var(--c-horizontal-scroll-track-bg, rgba(0, 0, 0, 0.08));

    border-radius: 999px;

    touch-action: none;

    -moz-user-select: none;

         user-select: none;

    -webkit-user-select: none;

    cursor: pointer;

  }

}

@media screen and (min-width: 1200px) {

  .c-horizontal-scroll__bar {

    display: none;

  }

}



.c-horizontal-scroll__thumb {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 0;

  background: var(--c-horizontal-scroll-thumb-bg, rgba(0, 0, 0, 0.55));

  border-radius: 999px;

  touch-action: none;

  will-change: transform, width;

  transition: background-color 0.2s ease;

}



.c-horizontal-scroll__thumb:hover {

  background: var(--c-horizontal-scroll-thumb-bg-hover, rgba(0, 0, 0, 0.8));

}



.c-horizontal-scroll.is-dragging .c-horizontal-scroll__thumb {

  background: var(--c-horizontal-scroll-thumb-bg-active, #000);

}



.c-horizontal-scroll.is-active .c-horizontal-scroll__viewport {

  cursor: grab;

}



.c-horizontal-scroll.is-content-dragging .c-horizontal-scroll__viewport {

  cursor: grabbing;

  -moz-user-select: none;

       user-select: none;

  -webkit-user-select: none;

}



.c-horizontal-scroll__content img {

  -webkit-user-drag: none;

}



.c-accordion {

  margin: 0;

}



.c-accordion__item {

  border: 2px solid var(--color-light-gray);

  transition: border-color ease 0.2s;

  background: #ffffff;

  border-radius: 8px;

  overflow: hidden;

}



.c-accordion__header {

  position: relative;

  margin: 0;

}

.c-accordion__header:before {

  position: absolute;

  top: 18px;

  right: 14px;

  display: block;

  width: 24px;

  height: 24px;

  background: url(../img/common/icon-plus-blue.svg) center/contain no-repeat;

  content: "";

  pointer-events: none;

  z-index: var(--z-index-middle-low);

  transition: opacity ease 0.2s, transform ease 0.2s;

}

.c-accordion__header:after {

  position: absolute;

  top: 18px;

  right: 14px;

  display: block;

  width: 24px;

  height: 24px;

  background: url(../img/common/icon-minus-white.svg) center/contain no-repeat;

  opacity: 0;

  content: "";

  pointer-events: none;

  z-index: var(--z-index-middle-low);

  transition: opacity ease 0.2s, transform ease 0.2s;

  transform: rotate(-90deg);

}

@media screen and (min-width: 1024px) {

  .c-accordion__header:before, .c-accordion__header:after {

    top: 26px;

    right: 30px;

    width: 32px;

    height: 32px;

  }

}



.c-accordion__button {

  position: relative;

  display: block;

  width: 100%;

  border: 0;

  padding: 16px 48px;

  text-align: left;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

  cursor: pointer;

  color: var(--color-black);

  background: var(--color-white);

  transition: background-color ease 0.2s, color ease 0.2s;

}

.c-accordion__button:before {

  position: absolute;

  top: 18px;

  left: 16px;

  display: block;

  width: 24px;

  height: 24px;

  background: url(../img/common/icon-question-blue.svg) center/contain no-repeat;

  content: "";

  pointer-events: none;

  z-index: var(--z-index-middle-low);

  transition: opacity ease 0.2s;

}

.c-accordion__button:after {

  position: absolute;

  top: 18px;

  left: 16px;

  display: block;

  width: 24px;

  height: 24px;

  background: url(../img/common/icon-question-white.svg) center/contain no-repeat;

  opacity: 0;

  content: "";

  pointer-events: none;

  z-index: var(--z-index-middle-low);

  transition: opacity ease 0.2s;

}

@media screen and (min-width: 1024px) {

  .c-accordion__button {

    padding: 24px 48px 24px 96px;

    font-size: var(--font-size-20);

  }

  .c-accordion__button:before, .c-accordion__button:after {

    top: 23px;

    left: 32px;

    width: 40px;

    height: 40px;

  }

}



.c-accordion__button-meta {

  margin: 8px 0 0 0;

  display: flex;

  gap: 8px;

  justify-content: flex-end;

}

@media screen and (min-width: 1024px) {

  .c-accordion__button-meta {

    margin: 0px 24px 0 0;

    transform: translateY(-2px);

  }

}



@media screen and (min-width: 1024px) {

  .c-accordion__button:has(> .c-accordion__button-meta) {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 64px;

  }

}



.c-accordion__button-type {

  padding: 4px 12px;

  background-color: var(--color-yellow);

  border-radius: 60px;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-12);

  line-height: 1.5;

  color: var(--color-black);

}

@media screen and (min-width: 1024px) {

  .c-accordion__button-type {

    padding: 8px 16px;

    align-self: flex-start;

    font-size: var(--font-size-16);

  }

}



.c-accordion__item:has(.c-accordion__button:focus-visible) {

  outline: 2px solid var(--color-blue);

  outline-offset: 2px;

}



.c-accordion__panel {

  overflow: hidden;

  height: 0;

}



.c-accordion__panel-inner {

  position: relative;

  display: flex;

  justify-content: flex-start;

  align-items: flex-start;

  padding: 16px;

  gap: 0 8px;

}

.c-accordion__panel-inner:before {

  flex: 0 0 24px;

  display: block;

  width: 24px;

  height: 24px;

  background: url(../img/common/icon-answer.svg) center/contain no-repeat;

  content: "";

  pointer-events: none;

  z-index: var(--z-index-middle-low);

}

@media screen and (min-width: 1024px) {

  .c-accordion__panel-inner {

    padding: 32px 48px 32px 96px;

    font-size: var(--font-size-16);

  }

  .c-accordion__panel-inner:before {

    position: absolute;

    top: 26px;

    left: 32px;

    width: 40px;

    height: 40px;

  }

}



.c-accordion__panel-text {

  line-height: 2;

}



.c-accordion__item.is-opening {

  border-color: var(--color-blue);

}

.c-accordion__item.is-opening .c-accordion__header:before {

  opacity: 0;

  transform: rotate(90deg);

}

.c-accordion__item.is-opening .c-accordion__header:after {

  opacity: 1;

  transform: rotate(0deg);

}

.c-accordion__item.is-opening .c-accordion__button {

  background: var(--color-blue);

  color: var(--color-white);

}

.c-accordion__item.is-opening .c-accordion__button:before {

  opacity: 0;

}

.c-accordion__item.is-opening .c-accordion__button:after {

  opacity: 1;

}



.c-accordion__item.is-open {

  border-color: var(--color-blue);

}

.c-accordion__item.is-open .c-accordion__header:before {

  opacity: 0;

  transform: rotate(90deg);

}

.c-accordion__item.is-open .c-accordion__header:after {

  opacity: 1;

  transform: rotate(0deg);

}

.c-accordion__item.is-open .c-accordion__button {

  background: var(--color-blue);

  color: var(--color-white);

}

.c-accordion__item.is-open .c-accordion__button:before {

  opacity: 0;

}

.c-accordion__item.is-open .c-accordion__button:after {

  opacity: 1;

}



.c-accordion__item.is-closed .c-accordion__button {

  background: var(--color-white);

}



.c-accordion[data-design-type=case-detail] .c-accordion__item {

  position: relative;

  border: unset;

  transition: unset;

  background: unset;

  border-radius: unset;

  overflow: hidden;

}

.c-accordion[data-design-type=case-detail] .c-accordion__item:after {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 4px;

  pointer-events: none;

  background: url(../img/common/bg-flow-line-w.svg) repeat-x left center/auto 4px;

  content: "";

}

.c-accordion[data-design-type=case-detail] .c-accordion__header {

  position: relative;

  margin: 0;

}

.c-accordion[data-design-type=case-detail] .c-accordion__header:before {

  top: 0;

  right: 0;

  bottom: 0;

  margin: auto;

}

.c-accordion[data-design-type=case-detail] .c-accordion__header:after {

  top: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  background: url(../img/common/icon-minus-blue.svg) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .c-accordion[data-design-type=case-detail] .c-accordion__panel {

    overflow: unset;

  }

}

.c-accordion[data-design-type=case-detail] .c-accordion__panel-text {

  margin: -8px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .c-accordion[data-design-type=case-detail] .c-accordion__panel-text {

    margin: -12px 0 0 0;

  }

}

.c-accordion[data-design-type=case-detail] .c-accordion__button {

  padding: 24px 48px 24px 0;

  background: transparent;

  transition: unset;

  color: var(--color-blue);

}

.c-accordion[data-design-type=case-detail] .c-accordion__button:before {

  all: unset;

  display: none;

}

.c-accordion[data-design-type=case-detail] .c-accordion__button:after {

  all: unset;

  display: none;

}

@media screen and (min-width: 1024px) {

  .c-accordion[data-design-type=case-detail] .c-accordion__button {

    padding: 30px 48px 30px 0;

    font-size: var(--font-size-24);

  }

  .c-accordion[data-design-type=case-detail] .c-accordion__button:before, .c-accordion[data-design-type=case-detail] .c-accordion__button:after {

    all: unset;

  }

}

.c-accordion[data-design-type=case-detail] .c-accordion__panel-inner {

  padding: 0 0 24px;

}

.c-accordion[data-design-type=case-detail] .c-accordion__panel-inner:before {

  all: unset;

  display: none;

}

@media screen and (min-width: 1024px) {

  .c-accordion[data-design-type=case-detail] .c-accordion__panel-inner {

    padding: 0 0 40px;

  }

  .c-accordion[data-design-type=case-detail] .c-accordion__panel-inner:before {

    all: unset;

  }

}

.c-accordion[data-design-type=case-detail] .c-accordion__item.is-opening {

  border-color: unset;

}

.c-accordion[data-design-type=case-detail] .c-accordion__item.is-opening .c-accordion__button {

  background: unset;

}

.c-accordion[data-design-type=case-detail] .c-accordion__item.is-open {

  border-color: unset;

}

.c-accordion[data-design-type=case-detail] .c-accordion__item.is-open .c-accordion__button {

  background: unset;

}

.c-accordion[data-design-type=case-detail] .c-accordion__item.is-closed .c-accordion__button {

  background: unset;

}



.c-breadcrumb {

  margin: auto;

  position: relative;

  z-index: var(--z-index-middle-low);

}

@media screen and (min-width: 1024px) {

  .c-breadcrumb {

    max-width: 1200px;

  }

}



.c-breadcrumb-list {

  font-size: 0;

}



.c-breadcrumb-item {

  word-break: break-all;

  display: inline;

}



.c-breadcrumb-item + .c-breadcrumb-item:before {

  margin: 0 5px;

  display: inline-block;

  width: 16px;

  height: 16px;

  background: url(../img/common/icon-smple-arrow-dark-gray.svg) center/contain no-repeat;

  content: "";

  vertical-align: middle;

}



.c-breadcrumb-link {

  font-size: var(--font-size-12);

  color: var(--color-blue);

  line-height: 1.5;

  text-decoration: none;

  cursor: pointer;

  vertical-align: middle;

}

@media screen and (min-width: 1024px) {

  .c-breadcrumb-link {

    font-size: var(--font-size-14);

    line-height: 1.8;

  }

}

@media screen and (min-width: 1024px) and (any-hover: hover) {

  .c-breadcrumb-link:hover {

    text-decoration: underline;

  }

}



.c-breadcrumb-text {

  font-size: var(--font-size-12);

  color: var(--color-drak-gray);

  line-height: 1.5;

  vertical-align: middle;

}

@media screen and (min-width: 1024px) {

  .c-breadcrumb-text {

    font-size: var(--font-size-14);

    line-height: 1.8;

  }

}



.c-lower-header {

  position: relative;

  margin: 16px 0 0 0;

  padding: 64px 24px 0;

}

@media screen and (min-width: 1024px) {

  .c-lower-header {

    margin: 24px 0 0 0;

    padding: 77px 24px 0;

  }

}



@media screen and (min-width: 1024px) {

  .c-lower-header__mv--simgle {

    margin: 100px 0 0 0;

  }

}



.c-lower-header__bg-item {

  position: absolute;

  pointer-events: none;

  z-index: var(--z-index-low);

}

.c-lower-header__bg-item img {

  width: 100%;

  height: auto;

  display: block;

}



.c-lower-header__bg > .c-lower-header__bg-item:nth-of-type(1) {

  width: 620px;

  height: 620px;

  top: -58px;

  right: -311px;

}

@media screen and (min-width: 480px) {

  .c-lower-header__bg > .c-lower-header__bg-item:nth-of-type(1) {

    right: 0;

    margin: auto;

    left: 0;

    transform: translateX(25vw);

  }

}

@media screen and (min-width: 768px) {

  .c-lower-header__bg > .c-lower-header__bg-item:nth-of-type(1) {

    transform: translateX(22vw);

  }

}

@media screen and (min-width: 1024px) {

  .c-lower-header__bg > .c-lower-header__bg-item:nth-of-type(1) {

    width: 1340px;

    height: 1340px;

    top: -807px;

    transform: translateX(37vw);

  }

}

@media screen and (min-width: 1200px) {

  .c-lower-header__bg > .c-lower-header__bg-item:nth-of-type(1) {

    transform: translateX(41vw);

  }

}

@media screen and (min-width: 1440px) {

  .c-lower-header__bg > .c-lower-header__bg-item:nth-of-type(1) {

    transform: translateX(591px);

  }

}

.c-lower-header__bg > .c-lower-header__bg-item:nth-of-type(2) {

  width: 136px;

  height: 136px;

  top: 473px;

  left: -47px;

}

@media screen and (min-width: 1024px) {

  .c-lower-header__bg > .c-lower-header__bg-item:nth-of-type(2) {

    width: 462px;

    height: 462px;

    top: 83px;

    left: -254px;

  }

}

.c-lower-header__bg > .c-lower-header__bg-item:nth-of-type(3) {

  width: 80px;

  height: 80px;

  top: 60px;

  left: 14px;

}

@media screen and (min-width: 1024px) {

  .c-lower-header__bg > .c-lower-header__bg-item:nth-of-type(3) {

    width: 208px;

    height: 208px;

    top: 369px;

    left: 484px;

  }

}



.c-lower-header__simplebg-item {

  position: absolute;

  pointer-events: none;

  z-index: var(--z-index-low);

}

.c-lower-header__simplebg-item img {

  width: 100%;

  height: auto;

  display: block;

}



.c-lower-header__simplebg > .c-lower-header__simplebg-item {

  margin: auto;

  width: 979px;

  height: 197px;

  top: 75px;

  left: 50%;

  transform: translateX(-480px);

}

@media screen and (min-width: 1024px) {

  .c-lower-header__simplebg > .c-lower-header__simplebg-item {

    width: 2445px;

    height: 415px;

    top: 86px;

    transform: translateX(-1200px);

  }

}



.c-lower-header__detailbg-item {

  position: absolute;

  pointer-events: none;

  z-index: var(--z-index-low);

}

.c-lower-header__detailbg-item img {

  width: 100%;

  height: auto;

  display: block;

}



.c-lower-header__detailbg > .c-lower-header__detailbg-item:nth-of-type(1) {

  width: 120px;

  height: 120px;

  top: 147px;

  left: -50px;

}

@media screen and (min-width: 1024px) {

  .c-lower-header__detailbg > .c-lower-header__detailbg-item:nth-of-type(1) {

    width: 344px;

    height: 344px;

    top: 117px;

    left: -150px;

  }

}

.c-lower-header__detailbg > .c-lower-header__detailbg-item:nth-of-type(2) {

  width: 500px;

  height: 500px;

  top: calc(-217px + var(--lower-header-breadcrumb-height, 18px));

  right: -230px;

}

@media screen and (min-width: 1024px) {

  .c-lower-header__detailbg > .c-lower-header__detailbg-item:nth-of-type(2) {

    width: 838px;

    height: 838px;

    right: 0;

    margin: auto;

    left: 0;

    top: calc(-340px + var(--lower-header-breadcrumb-height, 18px));

    transform: translateX(51vw);

  }

}

@media screen and (min-width: 1200px) {

  .c-lower-header__detailbg > .c-lower-header__detailbg-item:nth-of-type(2) {

    transform: translateX(48vw);

  }

}

@media screen and (min-width: 1440px) {

  .c-lower-header__detailbg > .c-lower-header__detailbg-item:nth-of-type(2) {

    transform: translateX(601px);

  }

}



.c-lower-mv {

  position: relative;

  z-index: var(--z-index-middle-low);

  margin: 30px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .c-lower-mv {

    margin: auto;

    max-width: 1200px;

  }

}



@media screen and (min-width: 1024px) {

  .c-lower-mv__inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

}



.c-lower-mv__title {

  color: var(--color-blue);

}



.c-lower-mv__title-sub {

  display: block;

  font-family: var(--font-en);

  color: inherit;

  font-weight: var(--font-weight-bold);

  letter-spacing: 0.03em;

  text-align: center;

  font-size: var(--font-size-14);

  line-height: 1.4;

}

@media screen and (min-width: 1024px) {

  .c-lower-mv__title-sub {

    font-size: var(--font-size-20);

    line-height: 1;

    text-align: left;

  }

}



.c-lower-mv__title-main {

  font-family: var(--font-jp);

  font-weight: var(--font-weight-semibold);

  line-height: 1.8;

  color: inherit;

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .c-lower-mv__title-main {

    margin: 16px 0 0 0;

    line-height: 1.5;

    text-align: left;

  }

}



.c-lower-mv__title-main-text {

  font-weight: inherit;

  color: inherit;

  line-height: inherit;

  font-size: var(--font-size-40);

}

@media screen and (min-width: 1024px) {

  .c-lower-mv__title-main-text {

    font-size: var(--font-size-64);

  }

}



.c-lower-mv__title-main-suffix {

  font-weight: inherit;

  color: inherit;

  line-height: inherit;

  font-size: var(--font-size-32);

}

@media screen and (min-width: 1024px) {

  .c-lower-mv__title-main-suffix {

    font-size: var(--font-size-56);

  }

}



.c-lower-mv__frame {

  margin: auto;

  height: auto;

}



.c-lower-detailmv {

  position: relative;

  z-index: var(--z-index-middle-low);

  margin: 23px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .c-lower-detailmv {

    margin: 47px auto 0;

    max-width: 1200px;

  }

}



.c-lower-detailmv__inner {

  display: flex;

  flex-direction: column-reverse;

}

@media screen and (min-width: 1024px) {

  .c-lower-detailmv__inner {

    flex-direction: unset;

    justify-content: space-between;

    align-items: flex-start;

    gap: 0 144px;

  }

}



.c-lower-detailmv__title {

  margin: 8px 0 0;

  font: var(--font-jp);

}

@media screen and (min-width: 1024px) {

  .c-lower-detailmv__title {

    margin: 32px 0 0 0;

  }

}



.c-lower-detailmv__title-type {

  display: inline-block;

  padding: 8px 24px;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-14);

  line-height: 1;

  color: var(--color-white);

  background-color: var(--color-blue);

  border-radius: 60px;

}

@media screen and (min-width: 1024px) {

  .c-lower-detailmv__title-type {

    font-size: var(--font-size-20);

  }

}



.c-lower-detailmv__title-main {

  margin: 13px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .c-lower-detailmv__title-main {

    margin: 16px 0 0 0;

  }

}



.c-lower-detailmv__title-main-text {

  display: inline-block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-24);

  line-height: 1.5;

}

@media screen and (min-width: 1024px) {

  .c-lower-detailmv__title-main-text {

    font-size: var(--font-size-32);

    line-height: 1.8;

  }

}



.c-lower-detailmv__title-sub {

  margin: 15px 0 0 0;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-14);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .c-lower-detailmv__title-sub {

    margin: 16px 0 0 0;

    font-size: var(--font-size-20);

  }

}



.c-lower-detailmv__frame {

  margin: 0 0 0 auto;

  width: 183px;

  height: auto;

}

@media screen and (min-width: 1024px) {

  .c-lower-detailmv__frame {

    width: 336px;

    height: auto;

    min-height: 336px;

    flex: 0 0 336px;

  }

}



.c-flow-item:not(:last-of-type):after {

  margin: auto;

  display: block;

  width: 48px;

  height: 48px;

  background: url(../img/common/icon-arrow-blue.svg) center/contain no-repeat;

  background-size: 32px 32px;

  transform: rotate(90deg);

  transform-origin: center center;

  content: "";

}



.c-flow-card {

  padding: 17px 21px 22px;

  border: 2px solid var(--color-light-gray);

  background-color: var(--color-white);

  border-radius: 16px;

}

@media screen and (min-width: 1024px) {

  .c-flow-card {

    padding: 30px 48px 30px 36px;

    display: grid;

    grid-template-columns: 109px 149px 1fr;

    grid-template-rows: 36px 1fr;

  }

  .c-flow-card:before {

    grid-column: 2/3;

    grid-row: 1/3;

    display: block;

    width: 80px;

    aspect-ratio: 1/1;

    justify-self: flex-end;

    align-self: center;

    transform: translateX(-24px);

    content: "";

  }

  .c-flow-card:after {

    grid-column: 1/2;

    grid-row: 1/3;

    display: block;

    width: 4px;

    height: 100%;

    justify-self: flex-end;

    pointer-events: none;

    content: "";

    background: url(../img/common/bg-flow-line-h.svg) repeat-y center top/4px auto;

  }

}



.c-flow-card__header {

  position: relative;

  padding: 0 0 10px;

  display: flex;

  justify-content: flex-start;

  align-items: center;

}

.c-flow-card__header:after {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 4px;

  pointer-events: none;

  background: url(../img/common/bg-flow-line-w.svg) repeat-x left center/auto 4px;

  content: "";

}

@media screen and (min-width: 1024px) {

  .c-flow-card__header {

    all: unset;

    display: contents;

  }

  .c-flow-card__header:after {

    all: unset;

  }

}



.c-flow-card__header-step {

  margin: 0 16px 0 0;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  width: 64px;

}

@media screen and (min-width: 1024px) {

  .c-flow-card__header-step {

    margin: unset;

    gap: 7px 0;

    grid-column: 1/2;

    grid-row: 1/3;

    flex-direction: column;

    justify-content: center;

  }

}



.c-flow-card__header-en {

  flex: 0 0 42px;

  width: 42px;

  display: inline-block;

  font-family: var(--font-en);

  font-weight: var(--font-weight-bold);

  font-size: var(--font-size-14);

  line-height: 1.4;

  letter-spacing: 0.03em;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .c-flow-card__header-en {

    flex: unset;

    width: unset;

    font-size: var(--font-size-16);

    line-height: 1;

  }

}



.c-flow-card__header-num {

  display: inline-block;

  font-family: var(--font-en);

  font-weight: var(--font-weight-bold);

  font-size: var(--font-size-28);

  line-height: 1.4;

  letter-spacing: 0.03em;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .c-flow-card__header-num {

    font-size: var(--font-size-48);

    line-height: 1;

    letter-spacing: 0;

  }

}



.c-flow-card__header-text {

  grid-column: 3/4;

  grid-row: 1/2;

  display: inline-block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .c-flow-card__header-text {

    font-size: var(--font-size-20);

    line-height: 1.8;

  }

}



.c-flow-card__body {

  margin: 16px 0 0 0;

  display: flex;

  gap: 0 16px;

}

.c-flow-card__body:before {

  flex: 0 0 64px;

  display: block;

  width: 64px;

  aspect-ratio: 1/1;

  align-self: flex-start;

  content: "";

}

@media screen and (min-width: 1024px) {

  .c-flow-card__body {

    all: unset;

    display: contents;

  }

  .c-flow-card__body:before {

    all: unset;

  }

}



.c-flow-card__body-text {

  grid-column: 3/4;

  grid-row: 2/3;

}

@media screen and (min-width: 1024px) {

  .c-flow-card__body-text {

    padding: 10px 0 0 0;

  }

}



.c-flow-card__body-sentence {

  font-size: var(--font-size-16);

  line-height: 2;

}



.c-flow-card__body-atn {

  display: block;

  font-size: var(--font-size-14);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .c-flow-card__body-atn {

    padding: 4px 0 0 0;

  }

}



/*

.c-flow-item[data-step="1"]{

  .c-flow-card__body{

    &:before{

      background: url() center / contain no-repeat;

    }

  }



  @media screen and (min-width: 1024px) {

    .c-flow-card{

      &:before{

        background: url() center / contain no-repeat;

      }

    }



    .c-flow-card__body{

      &:before{

        all: unset;

      }

    }

  }

}



.c-flow-item[data-step="2"]{

  .c-flow-card__body{

    &:before{

      background: url() center / contain no-repeat;

    }

  }

  @media screen and (min-width: 1024px) {

    .c-flow-card{

      &:before{

        background: url() center / contain no-repeat;

      }

    }



    .c-flow-card__body{

      &:before{

        all: unset;

      }

    }

  }

}



.c-flow-item[data-step="3"]{

  .c-flow-card__body{

    &:before{

      background: url() center / contain no-repeat;

    }

  }

  @media screen and (min-width: 1024px) {

    .c-flow-card{

      &:before{

        background: url() center / contain no-repeat;

      }

    }



    .c-flow-card__body{

      &:before{

        all: unset;

      }

    }

  }

}



.c-flow-item[data-step="4"]{

  .c-flow-card__body{

    &:before{

      background: url() center / contain no-repeat;

    }

  }

  @media screen and (min-width: 1024px) {



    .c-flow-card{

      &:before{

        background: url() center / contain no-repeat;

      }

    }



    .c-flow-card__body{

      &:before{

        all: unset;

      }

    }

  }

}

*/

.c-case-card {

  position: relative;

  border-radius: 16px;

  border: 2px solid var(--color-light-gray);

  background: var(--color-white);

}

.c-case-card:before {

  position: absolute;

  top: 16px;

  left: 16px;

  display: block;

  width: 18px;

  height: 13px;

  background: url(../img/common/bg-em-left.svg) no-repeat center;

  background-size: 18px 13px;

  content: "";

  pointer-events: none;

  z-index: var(--z-index-middle-low);

}

@media screen and (min-width: 1024px) {

  .c-case-card:before {

    top: 22px;

    left: 23px;

    width: 24px;

    height: 17px;

    background-size: 24px 17px;

  }

}



.c-case-card__link {

  display: block;

  padding: 22px 24px;

  text-decoration: none;

}

@media screen and (min-width: 1024px) {

  .c-case-card__link {

    padding: 29px 32px 28px 31px;

  }

}

@media screen and (min-width: 1440px) and (any-hover: hover) {

  .c-case-card__link {

    transition: opacity 0.3s ease;

  }

  .c-case-card__link:hover {

    opacity: 0.8;

  }

}



.c-case-card__inner {

  display: grid;

  grid-template-columns: 64px 1fr;

  grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, auto);

}

@media screen and (min-width: 1024px) {

  .c-case-card__inner {

    grid-template-columns: 80px 1fr 116px;

    grid-template-rows: minmax(0, auto) minmax(0, auto);

  }

}



.c-case-card__header {

  padding: 0 0 16px;

  grid-column: 1/3;

  grid-row: 1/2;

}

@media screen and (min-width: 1024px) {

  .c-case-card__header {

    padding: 0 0 26px;

    grid-column: 1/4;

  }

}



.c-case-card__header-text {

  position: relative;

  padding: 0 12px 0 16px;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.5;

  color: var(--color-blue);

}

.c-case-card__header-text:after {

  position: absolute;

  right: -10px;

  bottom: -8px;

  display: block;

  width: 18px;

  height: 13px;

  background: url(../img/common/bg-em-right.svg) no-repeat center;

  background-size: 18px 13px;

  content: "";

  pointer-events: none;

  z-index: var(--z-index-middle-low);

}

@media screen and (min-width: 1024px) {

  .c-case-card__header-text {

    padding: 0 24px;

    font-size: var(--font-size-20);

  }

  .c-case-card__header-text:after {

    bottom: -10px;

    width: 24px;

    height: 17px;

    background-size: 24px 17px;

  }

}



.c-case-card__frame {

  grid-column: 1/2;

  grid-row: 2/3;

  align-self: center;

}



.c-case-card__contents {

  margin: 0 0 0 16px;

  grid-column: 2/3;

  grid-row: 2/3;

  align-self: center;

}



.c-case-card__contents-text {

  font-size: var(--font-size-14);

  line-height: 1.5;

}

@media screen and (min-width: 1024px) {

  .c-case-card__contents-text {

    font-size: var(--font-size-16);

  }

}



.c-case-card__action {

  margin: 8px 0 0 0;

  grid-column: 1/3;

  grid-row: 3/4;

  align-self: flex-end;

  justify-self: flex-end;

  transform: translateY(-1px) translateX(1px);

}

@media screen and (min-width: 1024px) {

  .c-case-card__action {

    margin: 0;

    grid-column: 3/4;

    grid-row: 2/3;

    transform: translateY(-1px) translateX(2px);

  }

}



.c-pre-container {

  display: flex;

  position: relative;

  padding: 200px 24px 0;

  width: 100%;

  flex-direction: column;

  gap: 32px 0;

}

.c-pre-container::before {

  content: "";

  position: absolute;

  z-index: 0;

  pointer-events: none;

  left: 50%;

  top: -8px;

  transform: translateX(-50%);

  width: 955px;

  height: 291px;

  background-image: url(../img/common/bg-line-03-sp.svg);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 955px 291px;

}

@media screen and (min-width: 1024px) {

  .c-pre-container {

    padding: 256px 24px 0;

    gap: 50px 0;

  }

  .c-pre-container::before {

    background-image: url(../img/common/bg-line-03-pc.svg);

    top: -128px;

    width: 2381px;

    height: 527px;

    background-size: 2381px 527px;

  }

}

@media screen and (min-width: 1200px) {

  .c-pre-container {

    margin: auto;

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .c-pre-container {

    padding: 256px 0 0;

  }

}



.c-pre-container--bottom {

  position: relative;

}

.c-pre-container--bottom:after {

  display: block;

  height: 48px;

  width: 100%;

  content: "";

}

@media screen and (min-width: 1024px) {

  .c-pre-container--bottom:after {

    height: 128px;

  }

}



.c-pre-container__atn {

  padding: 0 0 16px;

  margin: 32px 0 0 0;

  font-size: var(--font-size-14);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .c-pre-container__atn {

    display: block;

    margin: 34px 0 0;

    padding: 0 0 26px;

    max-width: 1200px;

    text-align: right;

  }

}



.c-pre-links {

  position: relative;

  z-index: var(--z-index-middle-low);

}

@media screen and (min-width: 768px) {

  .c-pre-links {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 32px;

  }

}

@media screen and (min-width: 1024px) {

  .c-pre-links {

    gap: 50px;

  }

}



.c-pre-links__item + .c-pre-links__item {

  margin: 32px 0 0 0;

}

@media screen and (min-width: 768px) {

  .c-pre-links__item + .c-pre-links__item {

    margin: 0;

  }

}



.c-pre-links__link {

  display: flex;

  justify-content: space-between;

  text-decoration: none;

  overflow: hidden;

  border-radius: 16px;

  border: 2px solid var(--color-blue);

  background: var(--color-white);

}

@media screen and (min-width: 1024px) {

  .c-pre-links__link {

    max-height: 220px;

  }

}



.c-pre-links__link-group {

  padding: 22px 0 22px 24px;

  width: 196px;

  flex-shrink: 0;

}

@media screen and (min-width: 390px) {

  .c-pre-links__link-group {

    width: unset;

    flex-shrink: unset;

  }

}

@media screen and (min-width: 1024px) {

  .c-pre-links__link-group {

    padding: 22px 0 22px 46px;

  }

}

@media screen and (min-width: 1440px) {

  .c-pre-links__link-group {

    padding: 36px 0 22px 46px;

  }

}



.c-pre-links__link-name {

  padding: 0 30px 0 0;

  position: relative;

  display: inline-flex;

  justify-content: center;

  align-items: flex-start;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-20);

  color: var(--color-blue);

  line-height: 1.5;

}

.c-pre-links__link-name:after, .c-pre-links__link-name:before {

  margin: auto;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  display: block;

  width: 24px;

  height: 24px;

  content: "";

  transition: opacity 0.2s ease-in-out;

}

.c-pre-links__link-name:before {

  opacity: 1;

  background: url(../img/common/icon-circle-button-right.svg) center/contain no-repeat;

}

.c-pre-links__link-name:after {

  opacity: 0;

  background: url(../img/common/icon-circle-button-right-blue.svg) center/contain no-repeat;

}

@media screen and (min-width: 1200px) {

  .c-pre-links__link-name {

    padding: 0 56px 0 0;

    font-size: var(--font-size-32);

    line-height: 1.8;

  }

  .c-pre-links__link-name:before, .c-pre-links__link-name:after {

    width: 40px;

    height: 40px;

  }

}



.c-pre-links__link-text {

  margin: 8px 0 0 0;

  padding: 0 22px 0 0;

  display: block;

  font-size: var(--font-size-14);

  line-height: 1.8;

}

@media screen and (min-width: 1200px) {

  .c-pre-links__link-text {

    margin: 17px 0 0 0;

    padding: 0 32px 0 0;

    font-size: var(--font-size-16);

    line-height: 2;

  }

}



.c-pre-links__link-frame {

  overflow: hidden;

}

@media screen and (min-width: 390px) {

  .c-pre-links__link-frame {

    flex-shrink: 0;

    width: 142px;

  }

}

@media screen and (min-width: 1024px) {

  .c-pre-links__link-frame {

    width: 240px;

  }

}



.c-pre-links__link-frame-image {

  width: 142px;

}

@media screen and (min-width: 390px) {

  .c-pre-links__link-frame-image {

    width: unset;

  }

}

.c-pre-links__link-frame-image img {

  transition: transform ease 0.2s;

  transform-origin: center;

}



@media screen and (min-width: 1024px) and (any-hover: hover) {

  .c-pre-links__link:hover .c-pre-links__link-name:before {

    opacity: 0;

  }

  .c-pre-links__link:hover .c-pre-links__link-name:after {

    opacity: 1;

  }

  .c-pre-links__link:hover .c-pre-links__link-frame-image img {

    transform: scale(1.1);

  }

}



.c-pre-contact {

  position: relative;

  padding: 30px 24px;

  border-radius: 16px;

  border: 2px solid var(--color-blue);

  background: var(--color-white);

  z-index: var(--z-index-middle-low);

}

@media screen and (min-width: 1024px) {

  .c-pre-contact {

    padding: 64px 24px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

  }

}



.c-pre-contact__header {

  display: flex;

  justify-content: center;

  align-items: center;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-28);

  color: var(--color-blue);

  line-height: 1.5;

}

@media screen and (min-width: 1024px) {

  .c-pre-contact__header {

    display: block;

    font-size: var(--font-size-40);

  }

}



.c-pre-contact__body {

  margin: 14px 0 0;

}

@media screen and (min-width: 1024px) {

  .c-pre-contact__body {

    margin: 24px 0 0;

  }

}



.c-pre-contact__text {

  font-size: var(--font-size-16);

  line-height: 2;

}

@media screen and (min-width: 768px) {

  .c-pre-contact__text {

    text-align: center;

  }

}



.c-pre-contact__bold {

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .c-pre-contact__bold {

    font-size: var(--font-size-20);

  }

}



.c-pre-contact__body--case .c-pre-contact__text {

  margin: 8px 0 0 0;

}

@media screen and (min-width: 768px) {

  .c-pre-contact__body--case .c-pre-contact__text {

    margin: 16px 0 0 0;

  }

}



.c-pre-contact__atn {

  display: inline-block;

  margin: 8px 0 0 0;

  font-size: var(--font-size-14);

  line-height: 1.8;

}



.c-pre-contact__action {

  margin: 16px 0 0;

}

@media screen and (min-width: 768px) {

  .c-pre-contact__action {

    margin: 16px auto 0;

    max-width: 432px;

  }

}

@media screen and (min-width: 1024px) {

  .c-pre-contact__action {

    margin: 40px auto 0;

  }

  .c-pre-contact__action .c-button {

    height: 72px;

  }

}



.p-top-mv {

  position: relative;

  width: 100%;

  isolation: isolate;

  --mv-canvas-width: 1440px;

  --mv-canvas-height: 776px;

  --mv-stage-width: 1200px;

  --mv-stage-offset-y: 37px;

  --mv-orbit-center-x-pc: 1480px;

  --mv-orbit-center-y-pc: 122px;

  --mv-bg-ellipse-half-pc: 875px;

  --mv-bg-ellipse-center-x-sp: 1257px;

  --mv-bg-ellipse-center-y-sp: 345px;

  --mv-bg-ellipse-half-sp: 451px;

  --mv-bg-ellipse-offset-x-sp: -3px;

  --mv-bg-ellipse-offset-y-sp: -10px;

  --orbit-shift-x: calc(50vw - (var(--scrollbar-width, 0px) / 2) - 1056px);

  --orbit-shift-y: calc(-25% - 277px);

  --mv-bg-orbit-shift-x: var(--orbit-shift-x);

}



.p-top-mv-stage {

  position: relative;

  display: grid;

  grid-template-columns: minmax(0, auto);

  grid-template-rows: minmax(0, auto) minmax(0, auto);

  max-width: var(--mv-stage-width);

  margin: 90px auto 0;

  min-height: 650px;

  height: auto;

  width: 100%;

  z-index: 2;

  align-content: start;

}



.p-top-mv-effect {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  overflow: visible;

}



.p-top-mv-bg {

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  overflow: visible;

}



.p-top-mv-bg-orbit {

  position: absolute;

  inset: 0;

  transform: translateY(var(--orbit-shift-y));

  overflow: visible;

}



.p-top-mv-bg-orbit-frame {

  position: relative;

  width: var(--mv-canvas-width);

  height: var(--mv-canvas-height);

  margin: 0 auto;

  transform: translateX(var(--mv-bg-orbit-shift-x));

  overflow: visible;

}



.p-top-mv-bg-orbit-frame picture,

.p-top-mv-bg-orbit-frame img {

  display: block;

}



.p-top-mv-bg-orbit-frame img {

  position: absolute;

  max-width: none;

  width: 902px;

  height: 902px;

  left: calc(var(--mv-bg-ellipse-center-x-sp) - var(--mv-bg-ellipse-half-sp) + var(--mv-bg-ellipse-offset-x-sp));

  top: calc(var(--mv-bg-ellipse-center-y-sp) - var(--mv-bg-ellipse-half-sp) + var(--mv-bg-ellipse-offset-y-sp));

}



.p-top-mv-orbit-layer {

  position: absolute;

  inset: 0;

  pointer-events: none;

  transform: translateY(var(--orbit-shift-y));

  overflow: visible;

}



.p-top-mv-orbit-layer svg {

  display: block;

  width: var(--mv-canvas-width);

  max-width: none;

  height: auto;

  aspect-ratio: 1440/776;

  margin: 0 auto;

  transform: translateX(var(--orbit-shift-x));

  overflow: visible;

}



.p-top-mv-pane {

  grid-row: 1/2;

  position: relative;

  width: 100%;

  pointer-events: none;

}



.p-top-mv-figure {

  margin: 0 auto;

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

  gap: 16px;

}



.p-top-mv-figure-right {

  flex-shrink: 0;

  position: relative;

  display: grid;

  place-items: center;

  width: 310px;

  height: 310px;

  --mv-mask-radius: 155px;

  --mv-mask-peak-radius: 189px;

  --mv-ball-diameter: 223px;

  --mv-pedestal-diameter: calc(var(--mv-ball-diameter) + 6px);

}



@media screen and (min-width: 900px) {

  .p-top-mv {

    --mv-stage-offset-y: 41px;

    --orbit-shift-x: calc(50vw - (var(--scrollbar-width, 0px) / 2) - 720px - 63px);

    /* --orbit-shift-y: -25%; */

    --orbit-shift-y: -34.5%;

    --mv-bg-ellipse-offset-x-pc: -10px;

    --mv-bg-ellipse-offset-y-pc: 10px;

  }

  .p-top-mv-stage {

    display: block;

    margin: var(--mv-stage-offset-y) auto 0;

    height: var(--mv-canvas-height);

    min-height: 0;

    padding-bottom: 0;

  }

  .p-top-mv-bg-orbit-frame img {

    width: 1750px;

    height: 1750px;

    left: calc(var(--mv-orbit-center-x-pc) - var(--mv-bg-ellipse-half-pc) + var(--mv-bg-ellipse-offset-x-pc));

    top: calc(var(--mv-orbit-center-y-pc) - var(--mv-bg-ellipse-half-pc) + var(--mv-bg-ellipse-offset-y-pc));

  }

  .p-top-mv-pane {

    position: absolute;

    inset: auto;

    top: 0;

    bottom: 0;

    left: 50%;

    right: auto;

    width: var(--mv-canvas-width);

    margin-left: calc(var(--mv-canvas-width) / -2);

  }

  .p-top-mv-figure {

    position: relative;

    flex-direction: row;

    justify-content: end;

    align-items: center;

    width: 1200px;

    height: 100%;

    gap: 24px;

  }

  .p-top-mv-figure-right {

    width: 600px;

    height: 600px;

    --mv-mask-radius: 300px;

    --mv-mask-peak-radius: 365px;

    --mv-ball-diameter: 430px;

    --mv-pedestal-diameter: calc(var(--mv-ball-diameter) + 8px);

  }

}

@media screen and (min-width: 1440px) {

  .p-top-mv {

    --orbit-shift-x: -63px;

  }

}

.p-top-mv-orbit-ball {

  stroke-width: 2;

  transform-box: fill-box;

  transform-origin: center;

}



.p-top-mv-orbit-slide-0,

.p-top-mv-orbit-slide-1,

.p-top-mv-orbit-slide-2 {

  fill: #ffda7a;

  stroke: #ffda7a;

}



.p-top-mv-hole {

  grid-area: 1/1;

  position: relative;

  width: 100%;

  height: 100%;

}



.p-top-mv-hole:not(.is-active) {

  visibility: hidden;

}



.p-top-mv-hole:not(.is-active) .p-top-mv-circle-inner {

  clip-path: circle(0px at 50% 50%);

  opacity: 0;

}



.p-top-mv-circle-wrap {

  position: relative;

  width: 100%;

  height: 100%;

  -webkit-tap-highlight-color: transparent;

}



.p-top-mv-circle-wrap.is-animating .p-top-mv-circle-inner,

.p-top-mv-circle-wrap.is-animating .p-top-mv-circle-layer--split-outside {

  will-change: clip-path, opacity;

}



.p-top-mv-circle-front {

  position: absolute;

  inset: 0;

  z-index: 2;

  overflow: visible;

}



.p-top-mv-circle-pedestal {

  position: absolute;

  left: 50%;

  top: 50%;

  width: var(--mv-pedestal-diameter, var(--mv-ball-diameter));

  height: var(--mv-pedestal-diameter, var(--mv-ball-diameter));

  margin-left: calc(var(--mv-pedestal-diameter, var(--mv-ball-diameter)) / -2);

  margin-top: calc(var(--mv-pedestal-diameter, var(--mv-ball-diameter)) / -2);

  border-radius: 50%;

  background: #FDFAF2;

  transform: scale(0);

  transform-origin: 50% 50%;

  opacity: 0;

  z-index: 0;

  pointer-events: none;

}



.p-top-mv-circle-bg {

  position: absolute;

  inset: calc(var(--mv-mask-radius) - var(--mv-mask-peak-radius));

  z-index: 0;

  opacity: 1;

}



.p-top-mv-circle-fill {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  pointer-events: none;

}



.p-top-mv-circle-fill--base {

  background: #ffda7a;

}



.p-top-mv-circle-inner {

  position: relative;

  width: 100%;

  height: 100%;

  clip-path: circle(var(--mv-mask-radius) at 50% 50%);

  opacity: 1;

}



.p-top-mv-circle-layer--clipped,

.p-top-mv-circle-layer--outside,

.p-top-mv-circle-layer--split-outside {

  width: 100%;

  height: 100%;

  pointer-events: none;

}



.p-top-mv-circle-layer--clipped {

  position: relative;

  z-index: 2;

}



.p-top-mv-circle-layer--outside {

  position: absolute;

  inset: 0;

  z-index: 2;

}



.p-top-mv-circle-layer--split-outside {

  position: absolute;

  inset: 0;

  z-index: 1;

  opacity: 0;

}



.p-top-mv-circle-image {

  position: absolute;

  top: 0;

  left: 0;

}



.p-top-mv-circle-image picture {

  display: block;

}



.p-top-mv-circle-image--pop .p-top-mv-circle-image__body {

  display: block;

}



.p-top-mv-burst {

  position: absolute;

  inset: 0;

  z-index: 1;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform-origin: center center;

}



.p-top-mv-burst__line {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 2px;

  height: 20%;

  margin-left: -1px;

  border-radius: 1px;

  background: var(--color-black);

  transform-origin: 50% 0;

}

.p-top-mv-burst__line:nth-child(1) {

  transform: rotate(0deg) translateY(6px);

}

.p-top-mv-burst__line:nth-child(2) {

  transform: rotate(60deg) translateY(6px);

}

.p-top-mv-burst__line:nth-child(3) {

  transform: rotate(120deg) translateY(6px);

}

.p-top-mv-burst__line:nth-child(4) {

  transform: rotate(180deg) translateY(6px);

}

.p-top-mv-burst__line:nth-child(5) {

  transform: rotate(240deg) translateY(6px);

}

.p-top-mv-burst__line:nth-child(6) {

  transform: rotate(300deg) translateY(6px);

}



.p-top-mv-circle-image[data-image=bg] {

  inset: auto;

  left: 50%;

  top: 50%;

  z-index: 0;

  width: calc(var(--mv-mask-peak-radius) * 2);

  height: calc(var(--mv-mask-peak-radius) * 2);

}



.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image=bg] {

  transform: translate(calc(-50% + 5px), calc(-50% + 5px));

}

@media screen and (min-width: 900px) {

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image=bg] {

    transform: translate(calc(-50% - 15px), calc(-50% + 15px));

  }

}



.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image=bg] {

  transform: translate(calc(-50% - 5px), calc(-50% + 0px));

}

@media screen and (min-width: 900px) {

  .p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image=bg] {

    transform: translate(calc(-50% - 5px), calc(-50% + 0px));

  }

}



.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image=bg] {

  transform: translate(calc(-50% + 5px), calc(-50% + 5px));

}

@media screen and (min-width: 900px) {

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image=bg] {

    transform: translate(calc(-50% - 15px), calc(-50% + 15px));

  }

}



.p-top-mv-circle-image[data-image=bg] img {

  display: block;

  width: 100%;

  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;

}



.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image--all-top {

  clip-path: inset(0 0 calc(60% - 1px) 0);

}



.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image--all-top {

  clip-path: inset(0 0 calc(60% - 1px) 0);

}



.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image--all-top {

  clip-path: inset(0 0 calc(60% - 1px) 0);

}



.p-top-mv-circle-bottom-fade {

  position: absolute;

  inset: calc(var(--mv-mask-radius) - var(--mv-mask-peak-radius));

  z-index: 3;

  pointer-events: none;

  border-radius: 50%;

  background: linear-gradient(180deg, rgba(255, 218, 122, 0) 91%, #ffda7a 93%);

}



.p-top-mv-circle-image:not([data-image=bg]) {

  z-index: 2;

}



.p-top-mv-circle-image:not([data-image=bg]) img {

  display: block;

}



.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="4"] {

  top: 9px;

  left: -17px;

  transform-origin: center bottom;

}

.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="4"] img {

  width: 146px;

  height: 105px;

}

.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="0"] {

  top: 205px;

  left: 95px;

  transform-origin: center bottom;

}

.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="0"] img {

  width: 97px;

  height: 119px;

}

.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="1"] {

  top: 97px;

  left: 64px;

  transform-origin: left bottom;

}

.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="1"] img {

  width: 80px;

  height: 93px;

}

.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="2"] {

  top: 118px;

  left: -19px;

  transform-origin: right bottom;

}

.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="2"] img {

  width: 55px;

  height: 52px;

}

.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="3"] {

  top: 108px;

  left: 23px;

  transform-origin: right bottom;

}

.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="3"] img {

  width: 39px;

  height: 37px;

}

.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="5"] {

  top: 144px;

  left: 10px;

  transform-origin: center bottom;

}

.p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="5"] img {

  width: 101px;

  height: 266px;

}



.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="0"] {

  top: 130px;

  left: 132px;

  transform-origin: center bottom;

}

.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="0"] img {

  width: 171px;

  height: 236px;

}

.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="1"] {

  top: 20px;

  left: 261px;

}

.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="1"] img {

  width: 71px;

  height: 60px;

  max-width: unset;

}

.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="2"] {

  top: 102px;

  left: -27px;

}

.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="2"] img {

  width: 47px;

  height: 46px;

}

.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="3"] {

  top: 252px;

  left: 132px;

}

.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="3"] img {

  width: 42px;

  height: 49px;

}

.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="4"] {

  top: 197px;

  left: 0;

  transform-origin: right center;

}

.p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="4"] img {

  width: 141px;

  height: 95px;

}



.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="0"] {

  top: 90px;

  left: 14px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="0"] img {

  width: 59px;

  height: 65px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="1"] {

  top: 25px;

  left: 68px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="1"] img {

  width: 52px;

  height: 59px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="2"] {

  top: 21px;

  left: 118px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="2"] img {

  width: 39px;

  height: 35px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="3"] {

  top: -6px;

  left: 175px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="3"] img {

  width: 44px;

  height: 54px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="4"] {

  top: 49px;

  left: 161px;

  transform-origin: center bottom;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="4"] img {

  width: 174px;

  height: 106px;

  max-width: unset;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="5"] {

  top: 140px;

  left: 251px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="5"] img {

  width: 59px;

  height: 69px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="6"] {

  top: 90px;

  left: 66px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="6"] img {

  width: 24px;

  height: 29px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="7"] {

  top: 70px;

  left: 28px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="7"] img {

  width: 26px;

  height: 34px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="8"] {

  top: 32px;

  left: 76px;

}

.p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="8"] img {

  width: 31px;

  height: 37px;

}



@media screen and (min-width: 900px) {

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="4"] {

    top: 22px;

    left: -23px;

    transform-origin: center bottom;

  }

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="4"] img {

    width: 248px;

    height: 191px;

  }

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="0"] {

    top: 393px;

    left: 185px;

    transform-origin: center bottom;

  }

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="0"] img {

    width: 188px;

    height: 229px;

  }

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="1"] {

    top: 185px;

    left: 127px;

    transform-origin: left bottom;

  }

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="1"] img {

    width: 154px;

    height: 180px;

  }

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="2"] {

    top: 226px;

    left: -34px;

    transform-origin: right bottom;

  }

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="2"] img {

    width: 106px;

    height: 100px;

  }

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="3"] {

    top: 208px;

    left: 49px;

    transform-origin: right bottom;

  }

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="3"] img {

    width: 74px;

    height: 72px;

  }

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="5"] {

    top: 286px;

    left: 22px;

    transform-origin: center bottom;

  }

  .p-top-mv-hole[data-slide="0"] .p-top-mv-circle-image[data-image="5"] img {

    width: 196px;

    height: 514px;

  }

  .p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="0"] {

    top: 257px;

    left: 251px;

    transform-origin: center bottom;

  }

  .p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="0"] img {

    width: 330px;

    height: 457px;

  }

  .p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="1"] {

    top: 40px;

    left: 500px;

  }

  .p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="1"] img {

    width: 138px;

    height: 115px;

    max-width: unset;

  }

  .p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="2"] {

    top: 201px;

    left: -53px;

  }

  .p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="2"] img {

    width: 91px;

    height: 88px;

  }

  .p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="3"] {

    top: 490px;

    left: 249px;

  }

  .p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="3"] img {

    width: 80px;

    height: 95px;

  }

  .p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="4"] {

    top: 380px;

    left: 30px;

    transform-origin: right center;

  }

  .p-top-mv-hole[data-slide="1"] .p-top-mv-circle-image[data-image="4"] img {

    width: 242px;

    height: 172px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="0"] {

    top: 180px;

    left: 25px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="0"] img {

    width: 114px;

    height: 126px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="1"] {

    top: 54px;

    left: 125px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="1"] img {

    width: 101px;

    height: 114px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="2"] {

    top: 45px;

    left: 223px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="2"] img {

    width: 76px;

    height: 68px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="3"] {

    top: -4px;

    left: 338px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="3"] img {

    width: 86px;

    height: 105px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="4"] {

    top: 106px;

    left: 304px;

    transform-origin: center bottom;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="4"] img {

    width: 296px;

    height: 192px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="5"] {

    top: 278px;

    left: 486px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="5"] img {

    width: 114px;

    height: 133px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="6"] {

    top: 180px;

    left: 132px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="6"] img {

    width: 45px;

    height: 57px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="7"] {

    top: 140px;

    left: 56px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="7"] img {

    width: 49px;

    height: 65px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="8"] {

    top: 76px;

    left: 150px;

  }

  .p-top-mv-hole[data-slide="2"] .p-top-mv-circle-image[data-image="8"] img {

    width: 60px;

    height: 72px;

  }

}

.p-top-mv-slider {

  grid-row: 1/2;

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(54%) translateY(23px);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1px;

  z-index: var(--z-index-middle-low);

  pointer-events: auto;

}

@media screen and (min-width: 900px) {

  .p-top-mv-slider {

    left: auto;

    right: 24px;

    transform: translateY(-65px);

    gap: 8px;

  }

}

@media screen and (min-width: 1440px) {

  .p-top-mv-slider {

    left: 50%;

    right: auto;

    transform: translateX(278%) translateY(-65px);

    gap: 8px;

  }

}



.p-top-mv-slider-head {

  display: flex;

  align-items: center;

}



.p-top-mv-slider-titles {

  width: 64px;

  text-align: center;

}

@media screen and (min-width: 900px) {

  .p-top-mv-slider-titles {

    width: 95px;

  }

}



.p-top-mv-slider-titles__sub {

  display: block;

  font-family: var(--font-en);

  color: var(--color-blue);

  font-weight: var(--font-weight-bold);

  font-size: var(--font-size-12);

  line-height: 1;

  letter-spacing: 0.03em;

}

@media screen and (min-width: 900px) {

  .p-top-mv-slider-titles__sub {

    font-size: var(--font-size-14);

  }

}



.p-top-mv-slider-title-item {

  display: none;

}



.p-top-mv-slider-title-item.is-active {

  display: block;

}



.p-top-mv-slider-title-item-text {

  margin: 0;

  color: var(--color-blue);

  font-size: var(--font-size-14);

  font-weight: var(--font-weight-semibold);

  line-height: 1.7;

}

@media screen and (min-width: 900px) {

  .p-top-mv-slider-title-item-text {

    font-size: var(--font-size-20);

    line-height: 1.8;

  }

}



.p-top-mv-slider-pager {

  display: flex;

  gap: 4px;

  align-items: center;

}

@media screen and (min-width: 900px) {

  .p-top-mv-slider-pager {

    gap: 8px;

  }

}



.p-top-mv-pager-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--color-white);

  border: 1px solid var(--color-blue);

  cursor: pointer;

  transition: background 0.3s;

}



.p-top-mv-pager-dot.is-active {

  background: var(--color-blue);

}



.p-top-mv-slider-btn {

  flex-shrink: 0;

  position: relative;

  width: 24px;

  height: 24px;

  transform: translateY(16%);

}

.p-top-mv-slider-btn:before, .p-top-mv-slider-btn:after {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  width: 24px;

  height: 24px;

  content: "";

  transition: opacity 0.4s ease-in-out;

}

.p-top-mv-slider-btn:before {

  opacity: 1;

}

.p-top-mv-slider-btn:after {

  opacity: 0;

}

@media screen and (min-width: 900px) {

  .p-top-mv-slider-btn {

    width: 32px;

    height: 32px;

  }

  .p-top-mv-slider-btn:before, .p-top-mv-slider-btn:after {

    width: 32px;

    height: 32px;

  }

}

@media screen and (min-width: 900px) and (any-hover: hover) {

  .p-top-mv-slider-btn:hover:before, .p-top-mv-slider-btn:focus-visible:before {

    opacity: 0;

  }

  .p-top-mv-slider-btn:hover:after, .p-top-mv-slider-btn:focus-visible:after {

    opacity: 1;

  }

}



.p-top-mv-slider-prev:before {

  background: url(../img/common/icon-circle-button-left.svg) center/contain no-repeat;

}

.p-top-mv-slider-prev:after {

  background: url(../img/common/icon-circle-button-left-blue.svg) center/contain no-repeat;

}



.p-top-mv-slider-next:before {

  background: url(../img/common/icon-circle-button-right.svg) center/contain no-repeat;

}

.p-top-mv-slider-next:after {

  background: url(../img/common/icon-circle-button-right-blue.svg) center/contain no-repeat;

}



.p-top-mv-lead {

  grid-row: 2/3;

  position: relative;

  z-index: 3;

  width: 100%;

  box-sizing: border-box;

  padding: 40px 16px 0;

  display: flex;

  justify-content: center;

  z-index: var(--z-index-middle-low);

}

@media screen and (min-width: 900px) {

  .p-top-mv-lead {

    position: absolute;

    top: 50%;

    left: 24px;

    transform: translateY(-50%);

    width: 480px;

    max-width: 50%;

    padding: 0;

    justify-content: flex-start;

    align-items: center;

  }

}

@media screen and (min-width: 1440px) {

  .p-top-mv-lead {

    left: 0;

  }

}



.p-top-mv-lead-inner {

  max-width: 100%;

}

@media screen and (min-width: 900px) {

  .p-top-mv-lead-inner {

    width: 100%;

    margin: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    height: 500px;

    box-sizing: border-box;

    padding-inline: 0;

  }

}



.p-top-mv-lead-head {

  display: flex;

  justify-content: center;

  align-items: center;

}

@media screen and (min-width: 1024px) {

  .p-top-mv-lead-head {

    display: block;

    margin: 22px 0 0 0;

    max-width: 487px;

  }

}

.p-top-mv-lead-head img {

  max-width: unset;

}



.p-top-mv-lead-text {

  margin: 14px 0 0 0;

  font-size: var(--font-size-16);

  font-weight: var(--font-weight-semibold);

  font-family: var(--font-jp);

  line-height: 1.8;

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .p-top-mv-lead-text {

    margin: 30px 0 0 0;

    font-size: var(--font-size-24);

    text-align: left;

    letter-spacing: 0.03em;

  }

}



.p-top-mv-lead-results {

  margin: 25px 0 0 0;

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 16px;

}

@media screen and (min-width: 1024px) {

  .p-top-mv-lead-results {

    justify-content: space-between;

    margin: 53px 0 0 0;

    gap: 24px;

  }

}



.p-top-mv-lead-results__item {

  position: relative;

  width: 145px;

}

.p-top-mv-lead-results__item:before, .p-top-mv-lead-results__item:after {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  width: 16px;

  height: 53px;

  content: "";

  pointer-events: none;

}

.p-top-mv-lead-results__item:before {

  background: url(../img/top/mv/bg-mv-lead-text-left.webp) center/contain no-repeat;

}

.p-top-mv-lead-results__item:after {

  left: unset;

  right: 0;

  background: url(../img/top/mv/bg-mv-lead-text-right.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-top-mv-lead-results__item {

    width: 228px;

  }

  .p-top-mv-lead-results__item:before, .p-top-mv-lead-results__item:after {

    width: 24px;

    height: 80px;

  }

}



.p-top-mv-lead-results__atn {

  display: block;

  width: 100%;

  font-size: var(--font-size-14);

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .p-top-mv-lead-results__atn {

    text-align: left;

  }

}



.p-top-mv-lead-results__inner {

  padding: 3px 0 0;

  display: grid;

  grid-template-rows: auto auto;

  grid-template-columns: auto auto;

  width: 100%;

  gap: 5px 4px;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

}



.p-top-mv-lead-results__name {

  grid-column: 1/3;

  grid-row: 1/2;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-14);

  line-height: 1;

  text-align: center;

  width: 100%;

}

@media screen and (min-width: 1024px) {

  .p-top-mv-lead-results__name {

    font-size: var(--font-size-18);

  }

}



.p-top-mv-lead-results__num {

  grid-column: 1/2;

  grid-row: 2/3;

  font-family: var(--font-en);

  font-weight: var(--font-weight-bold);

  font-size: var(--font-size-24);

  line-height: 1;

  letter-spacing: -2%;

  align-self: self-end;

  transform: translateY(0.1em);

}

@media screen and (min-width: 1024px) {

  .p-top-mv-lead-results__num {

    font-size: var(--font-size-40);

  }

}



.p-top-mv-lead-results__text {

  grid-column: 2/3;

  grid-row: 2/3;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-14);

  line-height: 1;

  align-self: self-end;

}

@media screen and (min-width: 1024px) {

  .p-top-mv-lead-results__text {

    font-size: var(--font-size-20);

  }

}



.p-top-point {

  position: relative;

  padding: 68px 24px 0;

  width: 100%;

}

.p-top-point::before {

  content: "";

  position: absolute;

  z-index: 0;

  pointer-events: none;

  left: 50%;

  top: -30px;

  transform: translateX(-50%);

  width: 949px;

  height: 331px;

  background-image: url(../img/common/bg-line-01-sp.svg);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 949px 331px;

}

@media screen and (min-width: 1024px) {

  .p-top-point {

    padding: 139px 24px 0;

  }

  .p-top-point::before {

    background-image: url(../img/common/bg-line-01-pc.svg);

    width: 2528px;

    height: 821px;

    background-size: 2528px 821px;

  }

}

@media screen and (min-width: 1200px) {

  .p-top-point {

    margin: auto;

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-top-point {

    padding: 0;

  }

}



.p-top-point__header {

  position: relative;

  z-index: 1;

}



.p-top-point__body {

  position: relative;

  z-index: 1;

}



.p-top-point__text {

  margin: 32px 0 0 0;

  font-size: var(--font-size-16);

  line-height: 2;

}

@media screen and (min-width: 768px) {

  .p-top-point__text {

    text-align: center;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-point__text {

    margin: 47px 0 0 0;

  }

}



.p-top-point__split {

  margin: 48px 0 0 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 48px;

}

@media screen and (min-width: 1024px) {

  .p-top-point__split {

    margin: 66px auto 0;

    flex-direction: row;

    justify-content: space-between;

    align-items: unset;

    max-width: 1200px;

  }

}



.p-top-point-role {

  width: 100%;

  max-width: 576px;

}



.p-top-point-role__header {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 52px;

  border-top-left-radius: 16px;

  border-top-right-radius: 16px;

  color: var(--color-white);

  background: var(--color-blue);

  border: 2px solid var(--color-blue);

  border-bottom: none;

}

@media screen and (min-width: 1024px) {

  .p-top-point-role__header {

    height: 57px;

    border: 4px solid var(--color-blue);

    border-bottom: none;

  }

}



.p-top-point-role__title-text {

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-20);

  line-height: 1.8;

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .p-top-point-role__title-text {

    font-size: var(--font-size-24);

  }

}



.p-top-point-role__title-sub {

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .p-top-point-role__title-sub {

    font-size: var(--font-size-20);

  }

}



.p-top-point-role__body {

  padding: 22px 22px 30px;

  border: 2px solid var(--color-blue);

  background: var(--color-white);

  border-bottom-right-radius: 16px;

  border-bottom-left-radius: 16px;

}

@media screen and (min-width: 1024px) {

  .p-top-point-role__body {

    padding: 12px 30px 28px;

    height: calc(100% - 57px);

    border: 4px solid var(--color-blue);

  }

}



.p-top-point-role__description {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0 16px;

}

.p-top-point-role__description:before {

  flex: 0 0 80px;

  display: block;

  width: 80px;

  aspect-ratio: 1/1;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-top-point-role__description {

    gap: 0 26px;

  }

  .p-top-point-role__description:before {

    flex: 0 0 120px;

    width: 120px;

  }

}



.p-top-point-role--shop .p-top-point-role__description:before {

  background: url(../img/top/point/img-point-01.webp) center/contain no-repeat;

}



.p-top-point-role--users .p-top-point-role__description:before {

  background: url(../img/top/point/img-point-02.webp) center/contain no-repeat;

}



.p-top-point-role__description-text {

  flex: 1;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .p-top-point-role__description-text {

    font-size: var(--font-size-20);

  }

}



.p-top-point-role__list {

  margin: 24px 0 0 0;

  display: flex;

  flex-direction: column;

  gap: 16px 0;

}

@media screen and (min-width: 1024px) {

  .p-top-point-role__list {

    flex-direction: row;

    justify-content: space-between;

  }

}



.p-top-point-role__list-item {

  display: flex;

  gap: 0 8px;

  border-radius: 8px;

  padding: 16px;

  background: var(--color-light-blue);

}

.p-top-point-role__list-item:before {

  display: block;

  width: 24px;

  aspect-ratio: 1/1;

  background: url(../img/common/icon-checkーblue.svg) center/contain no-repeat;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-top-point-role__list-item {

    padding: 16px 4px;

    flex-direction: column;

    justify-content: flex-start;

    align-items: center;

    gap: 8px 0;

    width: calc((100% - 32px) / 3);

    max-width: 160px;

  }

}



.p-top-point-role__list-value {

  font-size: var(--font-size-14);

  line-height: 1.8;

  color: var(--color-black);

}

@media screen and (min-width: 1024px) {

  .p-top-point-role__list-value {

    font-size: var(--font-size-16);

    line-height: 1.5;

    text-align: center;

  }

}



.p-top-point-role__action {

  margin: 24px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-top-point-role__action {

    margin: 24px auto 0;

    width: 245px;

  }

}



.p-top-service {

  margin: 130px auto 0;

  padding: 0 24px 0;

}

@media screen and (min-width: 1024px) {

  .p-top-service {

    margin: 200px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-top-service {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-top-service {

    padding: 0;

  }

}



.p-top-service__lead {

  margin: 34px 0 0 0;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-20);

  line-height: 1.8;

}

@media screen and (min-width: 768px) {

  .p-top-service__lead {

    text-align: center;

  }

}

@media screen and (min-width: 1024px) {

  .p-top-service__lead {

    margin: 46px 0 0 0;

    font-size: var(--font-size-32);

  }

}



.p-top-service__lead-marker {

  position: relative;

}

.p-top-service__lead-marker:before {

  margin: auto;

  position: absolute;

  left: 0;

  right: 0;

  width: calc(100% - 1em);

  height: 8px;

  bottom: 0;

  z-index: 0;

  background: var(--color-yellow);

  pointer-events: none;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-top-service__lead-marker {

    font-size: inherit;

  }

  .p-top-service__lead-marker:before {

    height: 16px;

  }

}



.p-top-service__lead-marker-target {

  position: relative;

  display: inline-block;

  z-index: 1;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-20);

  line-height: 1.8;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-top-service__lead-marker-target {

    font-size: inherit;

  }

}



.p-top-service__text {

  margin: 16px 0 0 0;

  font-size: var(--font-size-16);

  line-height: 2;

}

@media screen and (min-width: 768px) {

  .p-top-service__text {

    text-align: center;

  }

}



.p-top-service-section {

  margin: 63px auto 0;

}

@media screen and (min-width: 1024px) {

  .p-top-service-section {

    margin: 68px auto 0;

    max-width: 1200px;

  }

}



.p-top-service-section__merit {

  margin: 24px auto 0;

  max-width: 1200px;

}

.p-top-service-section__merit .c-horizontal-scroll__content img {

  width: 100%;

}

@media screen and (min-width: 1024px) {

  .p-top-service-section__merit {

    margin: 27px auto 0;

  }

}



.p-top-service-section__list {

  margin: 24px 0 0;

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(calc(50% - 24px), 1fr));

  gap: 24px;

}

@media screen and (min-width: 1024px) {

  .p-top-service-section__list {

    margin: 28px 0 0;

    grid-template-columns: repeat(auto-fill, minmax(calc(25% - 48px), 1fr));

    gap: 48px;

  }

}



.p-top-service-section__card-image img {

  overflow: hidden;

  border-radius: 16px;

}



.p-top-service-section__card-name {

  margin: 8px 0 0 0;

  display: block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .p-top-service-section__card-name {

    margin: 16px 0 0 0;

    font-size: var(--font-size-20);

  }

}



.p-top-service-section__card-value {

  margin: 4px 0 0 0;

  display: block;

  font-size: var(--font-size-14);

  line-height: 1.8;

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .p-top-service-section__card-value {

    font-size: var(--font-size-16);

    line-height: 2;

    letter-spacing: 0;

  }

}



.p-top-flow {

  position: relative;

  padding: 128px 24px 0;

  width: 100%;

}

.p-top-flow::before {

  content: "";

  position: absolute;

  z-index: 0;

  pointer-events: none;

  left: 50%;

  top: -168px;

  transform: translateX(-50%);

  width: 877px;

  height: 399px;

  background-image: url(../img/common/bg-line-02-sp.svg);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 877px 399px;

}

@media screen and (min-width: 1024px) {

  .p-top-flow {

    padding: 200px 24px 0;

  }

  .p-top-flow::before {

    top: -298px;

    background-image: url(../img/common/bg-line-02-pc.svg);

    width: 2318px;

    height: 1056px;

    background-size: 2318px 1056px;

  }

}

@media screen and (min-width: 1200px) {

  .p-top-flow {

    margin: auto;

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-top-flow {

    padding: 200px 0 0;

  }

}



.p-top-flow__header {

  position: relative;

  z-index: 1;

}



.p-top-flow__body {

  position: relative;

  z-index: 1;

  margin: 32px auto 0;

  max-width: 1200px;

}

@media screen and (min-width: 1024px) {

  .p-top-flow__body {

    margin: 48px auto 0;

  }

}



.p-top-flow__step-item:not(:last-of-type):after {

  display: block;

  width: 100%;

  height: 48px;

  background: url(../img/common/icon-arrow-blue.svg) center/contain no-repeat;

  background-size: 32px 32px;

  transform: rotate(90deg);

  transform-origin: center center;

  content: "";

}



.p-top-flow-step-card {

  padding: 17px 21px 22px;

  border: 2px solid var(--color-light-gray);

  background-color: var(--color-white);

  border-radius: 16px;

}

@media screen and (min-width: 1024px) {

  .p-top-flow-step-card {

    padding: 30px 48px 30px 36px;

    display: grid;

    grid-template-columns: 109px 149px 1fr;

    grid-template-rows: 36px 1fr;

  }

  .p-top-flow-step-card:before {

    grid-column: 2/3;

    grid-row: 1/3;

    display: block;

    width: 80px;

    aspect-ratio: 1/1;

    justify-self: flex-end;

    align-self: center;

    transform: translateX(-24px);

    content: "";

  }

  .p-top-flow-step-card:after {

    grid-column: 1/2;

    grid-row: 1/3;

    display: block;

    width: 4px;

    height: 100%;

    justify-self: flex-end;

    pointer-events: none;

    content: "";

    background: url(../img/common/bg-flow-line-h.svg) repeat-y center top/4px auto;

  }

}



.p-top-flow-step-card__header {

  position: relative;

  padding: 0 0 10px;

  display: flex;

  justify-content: flex-start;

  align-items: center;

}

.p-top-flow-step-card__header:after {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 4px;

  pointer-events: none;

  background: url(../img/common/bg-flow-line-w.svg) repeat-x left center/auto 4px;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-top-flow-step-card__header {

    all: unset;

    display: contents;

  }

  .p-top-flow-step-card__header:after {

    all: unset;

  }

}



.p-top-flow-step-card__header-step {

  margin: 0 16px 0 0;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  width: 64px;

}

@media screen and (min-width: 1024px) {

  .p-top-flow-step-card__header-step {

    margin: unset;

    gap: 7px 0;

    grid-column: 1/2;

    grid-row: 1/3;

    flex-direction: column;

    justify-content: center;

  }

}



.p-top-flow-step-card__header-en {

  flex: 0 0 42px;

  width: 42px;

  display: inline-block;

  font-family: var(--font-en);

  font-weight: var(--font-weight-bold);

  font-size: var(--font-size-14);

  line-height: 1.4;

  letter-spacing: 0.03em;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-top-flow-step-card__header-en {

    flex: unset;

    width: unset;

    font-size: var(--font-size-16);

    line-height: 1;

  }

}



.p-top-flow-step-card__header-num {

  display: inline-block;

  font-family: var(--font-en);

  font-weight: var(--font-weight-bold);

  font-size: var(--font-size-28);

  line-height: 1.4;

  letter-spacing: 0.03em;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-top-flow-step-card__header-num {

    font-size: var(--font-size-48);

    line-height: 1;

    letter-spacing: 0;

  }

}



.p-top-flow-step-card__header-text {

  grid-column: 3/4;

  grid-row: 1/2;

  display: inline-block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .p-top-flow-step-card__header-text {

    font-size: var(--font-size-20);

    line-height: 1.8;

  }

}



.p-top-flow-step-card__body {

  margin: 16px 0 0 0;

  display: flex;

  gap: 0 16px;

}

.p-top-flow-step-card__body:before {

  flex: 0 0 64px;

  display: block;

  width: 64px;

  aspect-ratio: 1/1;

  align-self: flex-start;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-top-flow-step-card__body {

    all: unset;

    display: contents;

  }

  .p-top-flow-step-card__body:before {

    all: unset;

  }

}



.p-top-flow-step-card__body-text {

  grid-column: 3/4;

  grid-row: 2/3;

}

@media screen and (min-width: 1024px) {

  .p-top-flow-step-card__body-text {

    padding: 10px 0 0 0;

  }

}



.p-top-flow-step-card__body-sentence {

  font-size: var(--font-size-16);

  line-height: 2;

}



.p-top-flow-step-card__body-atn {

  display: block;

  font-size: var(--font-size-14);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .p-top-flow-step-card__body-atn {

    padding: 4px 0 0 0;

  }

}



.p-top-flow__step-item[data-step="1"] .p-top-flow-step-card__body:before {

  background: url(../img/top/flow/icon-flow-step-01.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-top-flow__step-item[data-step="1"] .p-top-flow-step-card:before {

    background: url(../img/top/flow/icon-flow-step-01.webp) center/contain no-repeat;

  }

  .p-top-flow__step-item[data-step="1"] .p-top-flow-step-card__body:before {

    all: unset;

  }

}



.p-top-flow__step-item[data-step="2"] .p-top-flow-step-card__body:before {

  background: url(../img/top/flow/icon-flow-step-02.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-top-flow__step-item[data-step="2"] .p-top-flow-step-card:before {

    background: url(../img/top/flow/icon-flow-step-02.webp) center/contain no-repeat;

  }

  .p-top-flow__step-item[data-step="2"] .p-top-flow-step-card__body:before {

    all: unset;

  }

}



.p-top-flow__step-item[data-step="3"] .p-top-flow-step-card__body:before {

  background: url(../img/top/flow/icon-flow-step-03.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-top-flow__step-item[data-step="3"] .p-top-flow-step-card:before {

    background: url(../img/top/flow/icon-flow-step-03.webp) center/contain no-repeat;

  }

  .p-top-flow__step-item[data-step="3"] .p-top-flow-step-card__body:before {

    all: unset;

  }

}



.p-top-flow__step-item[data-step="4"] .p-top-flow-step-card__body:before {

  background: url(../img/top/flow/icon-flow-step-04.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-top-flow__step-item[data-step="4"] .p-top-flow-step-card:before {

    background: url(../img/top/flow/icon-flow-step-04.webp) center/contain no-repeat;

  }

  .p-top-flow__step-item[data-step="4"] .p-top-flow-step-card__body:before {

    all: unset;

  }

}



.p-top-voice {

  position: relative;

  padding: 128px 24px 0;

  width: 100%;

}

.p-top-voice::before {

  content: "";

  position: absolute;

  z-index: 0;

  pointer-events: none;

  left: 50%;

  top: 0;

  transform: translateX(-50%);

  width: 949px;

  height: 331px;

  background-image: url(../img/common/bg-line-01-sp.svg);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 949px 331px;

}

@media screen and (min-width: 1024px) {

  .p-top-voice {

    padding: 200px 24px 0;

  }

  .p-top-voice::before {

    top: -79px;

    background-image: url(../img/common/bg-line-01-pc.svg);

    width: 2528px;

    height: 821px;

    background-size: 2528px 821px;

  }

}

@media screen and (min-width: 1200px) {

  .p-top-voice {

    margin: auto;

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-top-voice {

    padding: 200px 0 0;

  }

}



.p-top-voice__header {

  position: relative;

  z-index: 1;

}



.p-top-voice__body {

  position: relative;

  z-index: 1;

  margin: 32px auto 0;

  max-width: 1200px;

}

@media screen and (min-width: 1024px) {

  .p-top-voice__body {

    margin: 48px auto 0;

  }

}



.p-top-voice__inner {

  display: flex;

  flex-direction: column;

}



.p-top-voice__action {

  margin: 48px auto 0;

  max-width: 432px;

  width: 100%;

}

@media screen and (min-width: 1024px) {

  .p-top-voice__action {

    width: 432px;

  }

}



.p-top-voice-section + .p-top-voice-section {

  margin: 64px 0 0 0;

}

@media screen and (min-width: 768px) {

  .p-top-voice-section + .p-top-voice-section {

    margin: 32px 0 0 0;

  }

}



.p-top-voice-section__contents {

  margin: 24px 0 0 0;

}

@media screen and (min-width: 768px) {

  .p-top-voice-section__contents {

    margin: 28px 0 0 0;

  }

}



@media screen and (min-width: 768px) {

  .p-top-voice-section-list {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 48px), 1fr));

    gap: 48px;

  }

}



.p-top-voice-section-list__item + .p-top-voice-section-list__item {

  margin: 24px 0 0 0;

}

@media screen and (min-width: 768px) {

  .p-top-voice-section-list__item + .p-top-voice-section-list__item {

    margin: unset;

  }

}



.p-top-faq {

  position: relative;

  padding: 128px 24px 64px;

  width: 100%;

}

.p-top-faq::before {

  content: "";

  position: absolute;

  z-index: 0;

  pointer-events: none;

  left: 50%;

  top: -180px;

  transform: translateX(-50%);

  width: 877px;

  height: 399px;

  background-image: url(../img/common/bg-line-02-sp.svg);

  background-repeat: no-repeat;

  background-position: center;

  background-size: 877px 399px;

}

@media screen and (min-width: 1024px) {

  .p-top-faq {

    padding: 200px 24px 160px;

  }

  .p-top-faq::before {

    background-image: url(../img/common/bg-line-02-pc.svg);

    width: 2318px;

    height: 1056px;

    background-size: 2318px 1056px;

  }

}

@media screen and (min-width: 1200px) {

  .p-top-faq {

    margin: auto;

    max-width: 1248px;

  }

}

@media screen and (min-width: 1440px) {

  .p-top-faq {

    max-width: 1200px;

    padding: 200px 0 160px;

  }

}



.p-top-faq__header {

  position: relative;

  z-index: 1;

}



.p-top-faq__body {

  position: relative;

  z-index: 1;

  margin: 32px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-top-faq__body {

    margin: 52px 0 0 0;

  }

}



.p-top-faq__accordion {

  margin: auto;

  max-width: 1200px;

}

.p-top-faq__accordion .c-accordion {

  display: flex;

  flex-direction: column;

  gap: 24px;

}

@media screen and (min-width: 1024px) {

  .p-top-faq__accordion .c-accordion {

    gap: 31px;

  }

}



.p-top-faq__action {

  margin: 32px auto 0;

  max-width: 432px;

  width: 100%;

}

@media screen and (min-width: 1024px) {

  .p-top-faq__action {

    margin: 48px auto 0;

    width: 432px;

  }

}



.p-top-contact {

  padding: 64px 0 0 0;

  background: var(--color-white);

}

@media screen and (min-width: 1024px) {

  .p-top-contact {

    padding: 128px 0 0 0;

  }

}



.p-top-contact__header {

  padding: 0 0 38px;

}

.p-top-contact__header iframe {

  border: none;

}



.p-top-contact__atn {

  padding: 16px 24px;

  margin: 48xp 0 0 0;

  font-size: var(--font-size-14);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .p-top-contact__atn {

    display: block;

    padding: 24px 0;

    margin: 34px auto 0;

    width: 1200px;

    text-align: right;

  }

}



.p-school-supplies-store__header .c-lower-mv__frame {

  margin: 18px auto 0;

  width: 276px;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store__header .c-lower-mv__frame {

    margin: 0;

    width: 432px;

    transform: translateY(-12px);

  }

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store__header .c-lower-mv__title {

    transform: translateY(-7px);

  }

}



.p-school-supplies-store__body {

  position: relative;

  margin: 80px 0 0;

  z-index: var(--z-index-middle-low);

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store__body {

    margin: 108px auto 0;

  }

}



.p-school-supplies-store-benefits {

  padding: 0 24px;

}

@media screen and (min-width: 1200px) {

  .p-school-supplies-store-benefits {

    margin: auto;

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-school-supplies-store-benefits {

    padding: 0;

  }

}



.p-school-supplies-store-benefits__header {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  flex-direction: column;

  gap: 24px;

}



.p-school-supplies-store-benefits__lead {

  font-size: var(--font-size-16);

  line-height: 2;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-benefits__lead {

    margin: 10px 0 0 0;

    text-align: center;

  }

}



.p-school-supplies-store-benefits__section {

  margin: 64px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-benefits__section {

    margin: 64px auto 0;

    max-width: 1200px;

  }

}



@media screen and (min-width: 1024px) {

  .p-school-supplies-store-benefits__section + .p-school-supplies-store-benefits__section {

    margin: 96px auto 0;

    max-width: 1200px;

  }

}



.p-school-supplies-store-benefits__section-text {

  margin: 24px 0 0 0;

  font-size: var(--font-size-16);

  line-height: 2;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-benefits__section-text {

    margin: 16px 0 0 0;

  }

}



.p-school-supplies-store-benefits__section-merit {

  margin: 24px 0 0;

}



.p-school-supplies-store-benefits__section-diff {

  margin: 24px 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-benefits__section-diff {

    margin: 32px 0 0;

  }

}



.p-school-supplies-store-benefits__section-diff .c-horizontal-scroll__content img {

  width: 100%;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-school-supplies-store-benefits__section-diff .c-horizontal-scroll__content img {

    width: unset;

    text-align: unset;

  }

}



.p-school-supplies-store-reasons {

  margin: 128px auto 0;

  padding: 0 24px;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-reasons {

    margin: 160px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-school-supplies-store-reasons {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-school-supplies-store-reasons {

    padding: 0;

  }

}



.p-school-supplies-store-reasons__header {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

}



.p-school-supplies-store-reasons__lead {

  margin: 24px 0 0;

  font-size: var(--font-size-16);

  line-height: 2;

  width: 100%;

  text-align: left;

}

@media screen and (min-width: 768px) {

  .p-school-supplies-store-reasons__lead {

    text-align: center;

  }

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-reasons__lead {

    margin: 32px 0 0;

  }

}



.p-school-supplies-store-reasons__body {

  margin: 24px 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-reasons__body {

    margin: 64px 0 0;

  }

}



@media screen and (min-width: 768px) {

  .p-school-supplies-store-reasons__list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto;

    justify-content: flex-start;

    align-items: flex-start;

    gap: 24px;

  }

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-reasons__list {

    grid-template-columns: 1fr 1fr 1fr;

  }

}

@media screen and (min-width: 1200px) {

  .p-school-supplies-store-reasons__list {

    max-width: 1200px;

  }

}



@media screen and (min-width: 768px) {

  .p-school-supplies-store-reasons__item {

    display: grid;

    grid-template-rows: subgrid;

    grid-row: span 1;

    gap: 0;

  }

}



.p-school-supplies-store-reasons__item + .p-school-supplies-store-reasons__item {

  margin: 24px 0 0;

}

@media screen and (min-width: 768px) {

  .p-school-supplies-store-reasons__item + .p-school-supplies-store-reasons__item {

    margin: 0;

  }

}

.p-school-supplies-store-reasons-card {

  padding: 23px 21px 22px;

  border: 2px solid var(--color-light-gray);

  background-color: var(--color-white);

  border-radius: 16px;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-reasons-card {

    max-width: 384px;

    padding: 23px 21px 24px;

  }

}



.p-school-supplies-store-reasons-card__header-inner {

  position: relative;

  padding: 0 0 23px;

  display: flex;

  justify-content: flex-start;

  align-items: center;

}

.p-school-supplies-store-reasons-card__header-inner:before {

  flex: 0 0 64px;

  display: block;

  width: 64px;

  aspect-ratio: 1/1;

  align-self: flex-start;

  content: "";

}

.p-school-supplies-store-reasons-card__header-inner:after {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 4px;

  pointer-events: none;

  background: url(../img/common/bg-flow-line-w.svg) repeat-x left center/auto 4px;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-reasons-card__header-inner {

    padding: 0 0 24px;

  }

  .p-school-supplies-store-reasons-card__header-inner:before {

    flex: 0 0 80px;

    width: 80px;

  }

}



.p-school-supplies-store-reasons-card__header-text {

  padding: 0 0 0 14px;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-reasons-card__header-text {

    transform: translateX(2px);

    font-size: var(--font-size-20);

  }

}



.p-school-supplies-store-reasons-card__body-inner {

  margin: 24px 0 0 0;

  display: flex;

}



.p-school-supplies-store-reasons-card__body-emphasis {

  display: block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

}



.p-school-supplies-store-reasons-card__body-sentence {

  display: block;

  margin: 8px 0 0 0;

  font-size: var(--font-size-16);

  line-height: 2;

}



.p-school-supplies-store-reasons-card__body-atn {

  display: block;

  margin: 4px 0 0 0;

  font-size: var(--font-size-14);

  line-height: 1.8;

}



.p-school-supplies-store-reasons__item[data-index="1"] .p-school-supplies-store-reasons-card__header-inner:before {

  background: url(../img/school-supplies-store/reasons/icon-reasons-01.webp) center/contain no-repeat;

}



.p-school-supplies-store-reasons__item[data-index="2"] .p-school-supplies-store-reasons-card__header-inner:before {

  background: url(../img/school-supplies-store/reasons/icon-reasons-02.webp) center/contain no-repeat;

}



.p-school-supplies-store-reasons__item[data-index="3"] .p-school-supplies-store-reasons-card__header-inner:before {

  background: url(../img/school-supplies-store/reasons/icon-reasons-03.webp) center/contain no-repeat;

}



.p-school-supplies-store-reasons__item[data-index="4"] .p-school-supplies-store-reasons-card__header-inner:before {

  background: url(../img/school-supplies-store/reasons/icon-reasons-04.webp) center/contain no-repeat;

}



.p-school-supplies-store-reasons__item[data-index="5"] .p-school-supplies-store-reasons-card__header-inner:before {

  background: url(../img/school-supplies-store/reasons/icon-reasons-05.webp) center/contain no-repeat;

}



.p-school-supplies-store-scene {

  margin: 128px auto 0;

  padding: 0 24px;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-scene {

    margin: 160px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-school-supplies-store-scene {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-school-supplies-store-scene {

    padding: 0;

  }

}



.p-school-supplies-store-scene__header {

  display: flex;

  justify-content: center;

}



.p-school-supplies-store-scene__body {

  margin: 32px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-scene__body {

    margin: 23px 0 0 0;

  }

}



@media screen and (min-width: 768px) {

  .p-school-supplies-store-scene-section {

    display: flex;

    gap: 0 38px;

    justify-content: center;

    align-items: center;

  }

}



.p-school-supplies-store-scene-section + .p-school-supplies-store-scene-section {

  margin: 48px 0 0 0;

}



.p-school-supplies-store-scene-section__title-group {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  gap: 8px;

}



.p-school-supplies-store-scene-section__title-num {

  display: inline-flex;

  flex-shrink: 0;

  justify-content: center;

  align-items: center;

  width: 24px;

  aspect-ratio: 1/1;

  border-radius: 50%;

  font-size: var(--font-size-14);

  background: var(--color-blue);

  color: var(--color-white);

  font-family: var(--font-en);

  line-height: 1;

  font-weight: var(--font-weight-bold);

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-scene-section__title-num {

    width: 32px;

    font-size: var(--font-size-19);

  }

}



.p-school-supplies-store-scene-section__title-text {

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-scene-section__title-text {

    font-size: var(--font-size-20);

    line-height: 1.5;

  }

}



.p-school-supplies-store-scene-section__text {

  margin: 8px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-scene-section__text {

    margin: 24px 0 0 0;

  }

}



.p-school-supplies-store-scene-section__sentence {

  font-size: var(--font-size-16);

  line-height: 2;

}



.p-school-supplies-store-scene-section__sentence + .p-school-supplies-store-scene-section__sentence {

  margin: 2em 0 0 0;

}



.p-school-supplies-store-scene-section__view {

  margin: 27px 0 0 0;

  flex-shrink: 0;

}



.p-school-supplies-store-scene-section__frame-image img {

  width: 100%;

}



.p-school-supplies-store-flow {

  margin: 128px auto 0;

  padding: 0 24px;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-flow {

    margin: 160px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-school-supplies-store-flow {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-school-supplies-store-flow {

    padding: 0;

  }

}



.p-school-supplies-store-flow__header {

  display: flex;

  justify-content: center;

}



.p-school-supplies-store-flow__body {

  margin: 32px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-flow__body {

    margin: 48px 0 0 0;

  }

}



.p-school-supplies-store-flow__body-step .c-flow-item[data-step="1"] .c-flow-card__body:before {

  background: url(../img/school-supplies-store/flow/icon-flow-step-01.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-flow__body-step .c-flow-item[data-step="1"] .c-flow-card:before {

    background: url(../img/school-supplies-store/flow/icon-flow-step-01.webp) center/contain no-repeat;

  }

  .p-school-supplies-store-flow__body-step .c-flow-item[data-step="1"] .c-flow-card__body:before {

    all: unset;

  }

}

.p-school-supplies-store-flow__body-step .c-flow-item[data-step="2"] .c-flow-card__body:before {

  background: url(../img/school-supplies-store/flow/icon-flow-step-02.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-flow__body-step .c-flow-item[data-step="2"] .c-flow-card:before {

    background: url(../img/school-supplies-store/flow/icon-flow-step-02.webp) center/contain no-repeat;

  }

  .p-school-supplies-store-flow__body-step .c-flow-item[data-step="2"] .c-flow-card__body:before {

    all: unset;

  }

}

.p-school-supplies-store-flow__body-step .c-flow-item[data-step="3"] .c-flow-card__body:before {

  background: url(../img/school-supplies-store/flow/icon-flow-step-03.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-flow__body-step .c-flow-item[data-step="3"] .c-flow-card:before {

    background: url(../img/school-supplies-store/flow/icon-flow-step-03.webp) center/contain no-repeat;

  }

  .p-school-supplies-store-flow__body-step .c-flow-item[data-step="3"] .c-flow-card__body:before {

    all: unset;

  }

}

.p-school-supplies-store-flow__body-step .c-flow-item[data-step="4"] .c-flow-card__body:before {

  background: url(../img/school-supplies-store/flow/icon-flow-step-04.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-supplies-store-flow__body-step .c-flow-item[data-step="4"] .c-flow-card:before {

    background: url(../img/school-supplies-store/flow/icon-flow-step-04.webp) center/contain no-repeat;

  }

  .p-school-supplies-store-flow__body-step .c-flow-item[data-step="4"] .c-flow-card__body:before {

    all: unset;

  }

}



.p-school-parent__header .c-lower-mv__title-main {

  margin: 9px 0 0 0;

  line-height: 1.4;

}

@media screen and (min-width: 1024px) {

  .p-school-parent__header .c-lower-mv__title-main {

    line-height: 1.5;

  }

}

.p-school-parent__header .c-lower-mv__frame {

  margin: 18px auto 0;

  width: 276px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent__header .c-lower-mv__frame {

    margin: 0;

    width: 432px;

    transform: translateY(-2px);

  }

}

@media screen and (min-width: 1024px) {

  .p-school-parent__header .c-lower-mv__title {

    transform: translateY(-2px);

  }

}



.p-school-parent__body {

  position: relative;

  margin: 67px 0 0;

  z-index: var(--z-index-middle-low);

}

@media screen and (min-width: 1024px) {

  .p-school-parent__body {

    margin: 118px auto 0;

  }

}



.p-school-parent-info {

  padding: 0 24px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-info {

    margin: 0 auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-school-parent-info {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-school-parent-info {

    padding: 0;

  }

}



.p-school-parent-info__lead {

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-info__lead {

    font-size: var(--font-size-20);

  }

}



.p-school-parent-info__frame {

  margin: 24px auto 0;

  max-width: 624px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-info__frame {

    margin: 33px auto 0;

  }

}



.p-school-parent-info__actions {

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

  gap: 22px;

  margin: 48px auto 0;

  max-width: 624px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-info__actions {

    justify-content: space-between;

    flex-direction: row;

    margin: 64px auto 0;

  }

}



@media screen and (min-width: 1024px) {

  .p-school-parent-info__action {

    flex-shrink: 0;

    width: 288px;

  }

}



.p-school-parent-schools {

  scroll-margin-top: var(--header-height);

  position: relative;

  margin: 120px auto 0;

  padding: 0 24px 96px;

}

.p-school-parent-schools:after {

  position: absolute;

  left: 24px;

  right: 24px;

  bottom: 0;

  height: 4px;

  pointer-events: none;

  background: url(../img/common/bg-flow-line-w.svg) repeat-x left center/auto 4px;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools {

    margin: 160px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-school-parent-schools {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-school-parent-schools {

    padding: 0 0 128px;

  }

  .p-school-parent-schools:after {

    left: 0;

    right: 0;

  }

}



.p-school-parent-schools__lead {

  margin: 32px 0 0 0;

  display: block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

}

@media screen and (min-width: 768px) {

  .p-school-parent-schools__lead {

    text-align: center;

  }

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools__lead {

    margin: 64px 0 0 0;

    font-size: var(--font-size-20);

  }

}



.p-school-parent-schools__list {

  position: relative;

  display: flex;

  flex-direction: column;

  margin: 24px 0 0 0;

  gap: 24px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools__list {

    margin: 32px 0 0 0;

    display: grid;

    flex-direction: unset;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: minmax(0, auto) minmax(0, auto);

  }

}

@media screen and (min-width: 1200px) {

  .p-school-parent-schools__list {

    grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, auto);

    gap: 0;

    justify-content: space-between;

  }

}



@media screen and (min-width: 1024px) {

  .p-school-parent-schools__item {

    display: grid;

    grid-template-rows: subgrid;

    grid-row: span 1;

  }

}

@media screen and (min-width: 1200px) {

  .p-school-parent-schools__item {

    gap: 0;

    width: 379px;

  }

}



.p-school-parent-schools__item:last-of-type:after {

  margin: 8px auto 0;

  display: block;

  width: 40px;

  height: 40px;

  background: url(../img/common/icon-arrow-blue.svg) center/contain no-repeat;

  background-size: 40px 40px;

  transform: rotate(90deg);

  transform-origin: center center;

  content: "";

  pointer-events: none;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools__item:last-of-type:after {

    margin: auto;

    position: absolute;

    right: 0;

    left: 0;

    bottom: -64px;

    height: 48px;

    background-size: 48px 48px;

  }

}



.p-school-parent-schools__card {

  border-radius: 16px;

  padding: 22px 24px 22px 24px;

  background-color: var(--color-white);

  border: 2px solid var(--color-light-gray);

}



.p-school-parent-schools__card-title {

  display: block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools__card-title {

    font-size: var(--font-size-20);

    line-height: 1.5;

  }

}



.p-school-parent-schools__card-text {

  margin: 5px 0 0 0;

  font-size: var(--font-size-16);

  line-height: 2;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools__card-text {

    margin: 15px 0 0 0;

  }

}



.p-school-parent-schools__emphasis-lead {

  margin: 8px 0 0 0;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  flex-direction: column;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools__emphasis-lead {

    display: block;

    margin: 80px 0 0 0;

    text-align: center;

  }

}



.p-school-parent-schools__emphasis-marker {

  position: relative;

  display: inline-block;

}

.p-school-parent-schools__emphasis-marker:before {

  margin: auto;

  position: absolute;

  left: 0;

  right: 0;

  width: 100%;

  height: 8px;

  bottom: 7px;

  z-index: 0;

  background: var(--color-yellow);

  pointer-events: none;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools__emphasis-marker {

    font-size: inherit;

  }

  .p-school-parent-schools__emphasis-marker:before {

    height: 16px;

  }

}



.p-school-parent-schools__emphasis-marker-target {

  position: relative;

  display: inline-block;

  z-index: 1;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-24);

  line-height: 1.8;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools__emphasis-marker-target {

    font-size: var(--font-size-32);

  }

}



.p-school-parent-schools__emphasis-text {

  margin: 14px 0 0 0;

  font-size: var(--font-size-16);

  line-height: 2;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools__emphasis-text {

    margin: 16px 0 0 0;

    text-align: center;

  }

}



.p-school-parent-schools-section {

  margin: 64px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-section {

    margin: 98px 0 0 0;

  }

}



.p-school-parent-schools-section__contents {

  margin: 24px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-section__contents {

    margin: 16px 0 0 0;

  }

}



.p-school-parent-schools-section__lead {

  font-size: var(--font-size-16);

  line-height: 2;

}



.p-school-parent-schools-section__list {

  margin: 24px 0 0 0;

  display: flex;

  flex-direction: column;

  gap: 24px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-section__list {

    margin: 32px 0 0 0;

    display: grid;

    flex-direction: unset;

    grid-template-columns: 1fr 1fr;

    gap: 32px;

  }

}



.p-school-parent-schools-section__card {

  padding: 24px;

  border-radius: 16px;

  background-color: var(--color-white);

  border: 2px solid var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-section__card {

    padding: 30px 20px 30px 29px;

  }

}



@media screen and (min-width: 1024px) {

  .p-school-parent-schools-section__card-inner {

    display: grid;

    grid-template-columns: 144px 1fr;

    grid-template-rows: minmax(0, auto) minmax(0, auto);

    gap: 0 25px;

  }

  .p-school-parent-schools-section__card-inner:before {

    margin: 0 24px 0 0;

    grid-column: 1/2;

    grid-row: 1/3;

    display: block;

    flex: unset;

    width: 144px;

    aspect-ratio: 1/1;

    align-self: center;

    content: "";

  }

}



.p-school-parent-schools-section__card-header {

  position: relative;

  display: flex;

  justify-content: flex-start;

  align-items: center;

}

.p-school-parent-schools-section__card-header:before {

  display: block;

  flex: 0 0 80px;

  width: 80px;

  aspect-ratio: 1/1;

  align-self: flex-start;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-section__card-header {

    display: block;

    justify-content: unset;

    grid-column: 2/3;

    grid-row: 1/2;

    align-self: flex-end;

  }

  .p-school-parent-schools-section__card-header:before {

    display: none;

    flex: 0 0 144px;

    width: 144px;

  }

}



.p-school-parent-schools-section__card-body {

  margin: 16px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-section__card-body {

    margin: 7px 0 0 0;

    grid-column: 2/3;

    grid-row: 2/3;

  }

}



.p-school-parent-schools-section__card-header-text {

  padding: 0 0 0 16px;

  font-size: var(--font-size-16);

  font-weight: var(--font-weight-semibold);

  line-height: 1.8;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-section__card-header-text {

    padding: 0;

    font-size: var(--font-size-20);

  }

}



.p-school-parent-schools-section__card-text {

  font-size: var(--font-size-16);

  line-height: 2;

}



.p-school-parent-schools-section__item[data-index="1"] .p-school-parent-schools-section__card-header:before {

  background: url(../img/school-parent/schools/img-schools-section-merit-01.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-section__item[data-index="1"] .p-school-parent-schools-section__card-inner:before {

    background: url(../img/school-parent/schools/img-schools-section-merit-01.webp) center/contain no-repeat;

  }

}



.p-school-parent-schools-section__item[data-index="2"] .p-school-parent-schools-section__card-header:before {

  background: url(../img/school-parent/schools/img-schools-section-merit-02.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-section__item[data-index="2"] .p-school-parent-schools-section__card-inner:before {

    background: url(../img/school-parent/schools/img-schools-section-merit-02.webp) center/contain no-repeat;

  }

}



.p-school-parent-schools-section__diff {

  margin: 24px 0 0 0;

}

.p-school-parent-schools-section__diff .c-horizontal-scroll__content img {

  width: 100%;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-school-parent-schools-section__diff .c-horizontal-scroll__content img {

    width: unset;

    text-align: unset;

  }

}



.p-school-parent-schools-result {

  margin: 96px 0 0 0;

  border-radius: 16px;

  padding: 24px;

  background-color: var(--color-light-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-result {

    padding: 48px;

    margin: 120px 0 0 0;

  }

}



.p-school-parent-schools-result__inner {

  position: relative;

  border-radius: 8px;

  padding: 24px;

  background-color: var(--color-white);

}

.p-school-parent-schools-result__inner:before {

  display: block;

  margin: auto;

  width: 120px;

  aspect-ratio: 1/1;

  background: url(../img/school-parent/schools/img-schools-section-result.webp) center/contain no-repeat;

  background-size: 120px 120px;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-result__inner {

    display: grid;

    grid-template-columns: 144px 1fr;

    grid-template-rows: minmax(0, auto) minmax(0, auto);

    gap: 0 32px;

    padding: 32px 40px;

  }

  .p-school-parent-schools-result__inner:before {

    width: 144px;

    background-size: 144px 144px;

    grid-column: 1/2;

    grid-row: 1/3;

    align-self: center;

  }

}



.p-school-parent-schools-result__header {

  display: block;

  margin: 16px 0 0 0;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-20);

  line-height: 1.8;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-result__header {

    margin: unset;

    grid-column: 2/3;

    grid-row: 1/2;

    align-self: flex-end;

    font-size: var(--font-size-24);

  }

}



@media screen and (min-width: 1024px) {

  .p-school-parent-schools-result__body {

    grid-column: 2/3;

    grid-row: 2/3;

    align-self: flex-start;

  }

}



.p-school-parent-schools-result__text {

  margin: 8px 0 0 0;

  font-size: var(--font-size-16);

  line-height: 2;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-result__text {

    margin: 18px 0 0 0;

  }

}



.p-school-parent-schools-attention {

  margin: 16px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-attention {

    margin: 20px 0 0 0;

  }

}



.p-school-parent-schools-attention__title {

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-14);

  line-height: 1.7;

}



.p-school-parent-schools-attention__text {

  font-size: var(--font-size-14);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-schools-attention__text {

    margin: 8px 0 0 0;

  }

}



.p-school-parent-parents {

  scroll-margin-top: var(--header-height);

  position: relative;

  margin: 97px auto 0;

  padding: 0 24px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents {

    margin: 128px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-school-parent-parents {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-school-parent-parents {

    padding: 0;

  }

}



.p-school-parent-parents__lead {

  margin: 32px 0 0 0;

  display: block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

}

@media screen and (min-width: 768px) {

  .p-school-parent-parents__lead {

    text-align: center;

  }

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents__lead {

    margin: 64px 0 0 0;

    font-size: var(--font-size-20);

  }

}



.p-school-parent-parents__list {

  position: relative;

  display: flex;

  flex-direction: column;

  margin: 24px 0 0 0;

  gap: 24px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents__list {

    margin: 32px 0 0 0;

    display: grid;

    flex-direction: unset;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: minmax(0, auto) minmax(0, auto);

  }

}

@media screen and (min-width: 1200px) {

  .p-school-parent-parents__list {

    grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, auto);

    gap: 0;

    justify-content: space-between;

  }

}



@media screen and (min-width: 1024px) {

  .p-school-parent-parents__item {

    display: grid;

    grid-template-rows: subgrid;

    grid-row: span 1;

  }

}

@media screen and (min-width: 1200px) {

  .p-school-parent-parents__item {

    gap: 0;

    width: 379px;

  }

}



.p-school-parent-parents__item:last-of-type:after {

  margin: 8px 0 0;

  display: block;

  width: 100%;

  height: 40px;

  background: url(../img/common/icon-arrow-blue.svg) center/contain no-repeat;

  background-size: 40px 40px;

  transform: rotate(90deg);

  transform-origin: center center;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents__item:last-of-type:after {

    margin: auto;

    position: absolute;

    right: 0;

    left: 0;

    bottom: -64px;

    height: 48px;

    background-size: 48px 48px;

  }

}



.p-school-parent-parents__card {

  border-radius: 16px;

  padding: 22px 24px 22px 24px;

  background-color: var(--color-white);

  border: 2px solid var(--color-light-gray);

}



.p-school-parent-parents__card-title {

  display: block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents__card-title {

    font-size: var(--font-size-20);

    line-height: 1.5;

  }

}



.p-school-parent-parents__card-text {

  margin: 5px 0 0 0;

  font-size: var(--font-size-16);

  line-height: 2;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents__card-text {

    margin: 15px 0 0 0;

  }

}



.p-school-parent-parents__emphasis-lead {

  margin: 8px 0 0 0;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  flex-direction: column;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents__emphasis-lead {

    display: block;

    margin: 80px 0 0 0;

    text-align: center;

  }

}



.p-school-parent-parents__emphasis-marker {

  position: relative;

  display: inline-block;

}

.p-school-parent-parents__emphasis-marker:before {

  margin: auto;

  position: absolute;

  left: 0;

  right: 0;

  width: 100%;

  height: 8px;

  bottom: 7px;

  z-index: 0;

  background: var(--color-yellow);

  pointer-events: none;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents__emphasis-marker {

    font-size: inherit;

  }

  .p-school-parent-parents__emphasis-marker:before {

    height: 16px;

  }

}



.p-school-parent-parents__emphasis-marker-target {

  position: relative;

  display: inline-block;

  z-index: 1;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-24);

  line-height: 1.8;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents__emphasis-marker-target {

    font-size: var(--font-size-32);

  }

}



.p-school-parent-parents__emphasis-text {

  margin: 14px 0 0 0;

  font-size: var(--font-size-16);

  line-height: 2;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents__emphasis-text {

    margin: 16px 0 0 0;

    text-align: center;

  }

}



.p-school-parent-parents-section {

  margin: 64px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-section {

    margin: 98px 0 0 0;

  }

}



.p-school-parent-parents-section__contents {

  margin: 24px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-section__contents {

    margin: 16px 0 0 0;

  }

}



.p-school-parent-parents-section__lead {

  font-size: var(--font-size-16);

  line-height: 2;

}



.p-school-parent-parents-section__list {

  margin: 24px 0 0 0;

  display: flex;

  flex-direction: column;

  gap: 24px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-section__list {

    margin: 32px 0 0 0;

    display: grid;

    flex-direction: unset;

    grid-template-columns: 1fr 1fr;

    gap: 32px;

  }

}



.p-school-parent-parents-section__card {

  padding: 24px;

  border-radius: 16px;

  background-color: var(--color-white);

  border: 2px solid var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-section__card {

    padding: 30px 20px 30px 29px;

  }

}



@media screen and (min-width: 1024px) {

  .p-school-parent-parents-section__card-inner {

    display: grid;

    grid-template-columns: 144px 1fr;

    grid-template-rows: minmax(0, auto) minmax(0, auto);

    gap: 0 25px;

  }

  .p-school-parent-parents-section__card-inner:before {

    margin: 0 24px 0 0;

    grid-column: 1/2;

    grid-row: 1/3;

    display: block;

    flex: unset;

    width: 144px;

    aspect-ratio: 1/1;

    align-self: center;

    content: "";

  }

}



.p-school-parent-parents-section__card-header {

  position: relative;

  display: flex;

  justify-content: flex-start;

  align-items: center;

}

.p-school-parent-parents-section__card-header:before {

  display: block;

  flex: 0 0 80px;

  width: 80px;

  aspect-ratio: 1/1;

  align-self: flex-start;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-section__card-header {

    display: block;

    justify-content: unset;

    grid-column: 2/3;

    grid-row: 1/2;

    align-self: flex-end;

  }

  .p-school-parent-parents-section__card-header:before {

    display: none;

    flex: 0 0 144px;

    width: 144px;

  }

}



.p-school-parent-parents-section__card-body {

  margin: 16px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-section__card-body {

    margin: 7px 0 0 0;

    grid-column: 2/3;

    grid-row: 2/3;

  }

}



.p-school-parent-parents-section__card-header-text {

  padding: 0 0 0 16px;

  font-size: var(--font-size-16);

  font-weight: var(--font-weight-semibold);

  line-height: 1.8;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-section__card-header-text {

    padding: 0;

    font-size: var(--font-size-20);

  }

}



.p-school-parent-parents-section__card-text {

  font-size: var(--font-size-16);

  line-height: 2;

}



.p-school-parent-parents-section__item[data-index="1"] .p-school-parent-parents-section__card-header:before {

  background: url(../img/school-parent/parents/img-parents-section-merit-01.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-section__item[data-index="1"] .p-school-parent-parents-section__card-inner:before {

    background: url(../img/school-parent/parents/img-parents-section-merit-01.webp) center/contain no-repeat;

  }

}



.p-school-parent-parents-section__item[data-index="2"] .p-school-parent-parents-section__card-header:before {

  background: url(../img/school-parent/parents/img-parents-section-merit-02.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-section__item[data-index="2"] .p-school-parent-parents-section__card-inner:before {

    background: url(../img/school-parent/parents/img-parents-section-merit-02.webp) center/contain no-repeat;

  }

}



.p-school-parent-parents-section__item[data-index="3"] .p-school-parent-parents-section__card-header:before {

  background: url(../img/school-parent/parents/img-parents-section-merit-03.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-section__item[data-index="3"] .p-school-parent-parents-section__card-inner:before {

    background: url(../img/school-parent/parents/img-parents-section-merit-03.webp) center/contain no-repeat;

  }

}



.p-school-parent-parents-section__diff {

  margin: 24px 0 0 0;

}

.p-school-parent-parents-section__diff .c-horizontal-scroll__content img {

  width: 100%;

  text-align: center;

}

@media screen and (min-width: 768px) {

  .p-school-parent-parents-section__diff .c-horizontal-scroll__content img {

    width: unset;

    text-align: unset;

  }

}



.p-school-parent-parents-flow {

  position: relative;

  width: 100%;

}



.p-school-parent-parents-flow__header {

  position: relative;

  z-index: 1;

}



.p-school-parent-parents-flow__body {

  position: relative;

  z-index: 1;

  margin: 22px auto 0;

  max-width: 1200px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow__body {

    margin: 38px auto 0;

  }

}



.p-school-parent-parents-flow__step-item:not(:last-of-type):after {

  margin: auto;

  display: block;

  width: 32px;

  height: 48px;

  background: url(../img/common/icon-arrow-blue.svg) center/contain no-repeat;

  background-size: 32px 32px;

  transform: rotate(90deg);

  transform-origin: center center;

  pointer-events: none;

  content: "";

}



.p-school-parent-parents-flow-step-card {

  padding: 17px 21px 22px;

  border: 2px solid var(--color-light-gray);

  background-color: var(--color-white);

  border-radius: 16px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow-step-card {

    padding: 30px 48px 30px 36px;

    display: grid;

    grid-template-columns: 109px 149px 1fr;

    grid-template-rows: 36px 1fr;

  }

  .p-school-parent-parents-flow-step-card:before {

    grid-column: 2/3;

    grid-row: 1/3;

    display: block;

    width: 80px;

    aspect-ratio: 1/1;

    justify-self: flex-end;

    align-self: center;

    transform: translateX(-24px);

    content: "";

  }

  .p-school-parent-parents-flow-step-card:after {

    grid-column: 1/2;

    grid-row: 1/3;

    display: block;

    width: 4px;

    height: 100%;

    justify-self: flex-end;

    pointer-events: none;

    content: "";

    background: url(../img/common/bg-flow-line-h.svg) repeat-y center top/4px auto;

  }

}



.p-school-parent-parents-flow-step-card__header {

  position: relative;

  padding: 0 0 10px;

  display: flex;

  justify-content: flex-start;

  align-items: center;

}

.p-school-parent-parents-flow-step-card__header:after {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 4px;

  pointer-events: none;

  background: url(../img/common/bg-flow-line-w.svg) repeat-x left center/auto 4px;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow-step-card__header {

    all: unset;

    display: contents;

  }

  .p-school-parent-parents-flow-step-card__header:after {

    all: unset;

  }

}



.p-school-parent-parents-flow-step-card__header-step {

  margin: 0 16px 0 0;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  width: 64px;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow-step-card__header-step {

    margin: unset;

    gap: 7px 0;

    grid-column: 1/2;

    grid-row: 1/3;

    flex-direction: column;

    justify-content: center;

  }

}



.p-school-parent-parents-flow-step-card__header-en {

  flex: 0 0 42px;

  width: 42px;

  display: inline-block;

  font-family: var(--font-en);

  font-weight: var(--font-weight-bold);

  font-size: var(--font-size-14);

  line-height: 1.4;

  letter-spacing: 0.03em;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow-step-card__header-en {

    flex: unset;

    width: unset;

    font-size: var(--font-size-16);

    line-height: 1;

  }

}



.p-school-parent-parents-flow-step-card__header-num {

  display: inline-block;

  font-family: var(--font-en);

  font-weight: var(--font-weight-bold);

  font-size: var(--font-size-28);

  line-height: 1.4;

  letter-spacing: 0.03em;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow-step-card__header-num {

    font-size: var(--font-size-48);

    line-height: 1;

    letter-spacing: 0;

  }

}



.p-school-parent-parents-flow-step-card__header-text {

  grid-column: 3/4;

  grid-row: 1/2;

  display: inline-block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow-step-card__header-text {

    font-size: var(--font-size-20);

    line-height: 1.8;

  }

}



.p-school-parent-parents-flow-step-card__body {

  margin: 16px 0 0 0;

  display: flex;

  gap: 0 16px;

}

.p-school-parent-parents-flow-step-card__body:before {

  flex: 0 0 64px;

  display: block;

  width: 64px;

  aspect-ratio: 1/1;

  align-self: flex-start;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow-step-card__body {

    all: unset;

    display: contents;

  }

  .p-school-parent-parents-flow-step-card__body:before {

    all: unset;

  }

}



.p-school-parent-parents-flow-step-card__body-text {

  grid-column: 3/4;

  grid-row: 2/3;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow-step-card__body-text {

    padding: 10px 0 0 0;

  }

}



.p-school-parent-parents-flow-step-card__body-sentence {

  font-size: var(--font-size-16);

  line-height: 2;

}



.p-school-parent-parents-flow-step-card__body-atn {

  display: block;

  font-size: var(--font-size-14);

  line-height: 1.8;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow-step-card__body-atn {

    padding: 4px 0 0 0;

  }

}



.p-school-parent-parents-flow__step-item[data-step="1"] .p-school-parent-parents-flow-step-card__body:before {

  background: url(../img/school-parent/parents/img-parents-section-flow-01.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow__step-item[data-step="1"] .p-school-parent-parents-flow-step-card:before {

    background: url(../img/school-parent/parents/img-parents-section-flow-01.webp) center/contain no-repeat;

  }

  .p-school-parent-parents-flow__step-item[data-step="1"] .p-school-parent-parents-flow-step-card__body:before {

    all: unset;

  }

}



.p-school-parent-parents-flow__step-item[data-step="2"] .p-school-parent-parents-flow-step-card__body:before {

  background: url(../img/school-parent/parents/img-parents-section-flow-02.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow__step-item[data-step="2"] .p-school-parent-parents-flow-step-card:before {

    background: url(../img/school-parent/parents/img-parents-section-flow-02.webp) center/contain no-repeat;

  }

  .p-school-parent-parents-flow__step-item[data-step="2"] .p-school-parent-parents-flow-step-card__body:before {

    all: unset;

  }

}



.p-school-parent-parents-flow__step-item[data-step="3"] .p-school-parent-parents-flow-step-card__body:before {

  background: url(../img/school-parent/parents/img-parents-section-flow-03.webp) center/contain no-repeat;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-flow__step-item[data-step="3"] .p-school-parent-parents-flow-step-card:before {

    background: url(../img/school-parent/parents/img-parents-section-flow-03.webp) center/contain no-repeat;

  }

  .p-school-parent-parents-flow__step-item[data-step="3"] .p-school-parent-parents-flow-step-card__body:before {

    all: unset;

  }

}



.p-school-parent-parents-result {

  margin: 96px 0 0 0;

  border-radius: 16px;

  padding: 24px;

  background-color: var(--color-light-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-result {

    padding: 48px;

    margin: 120px 0 0 0;

  }

}



.p-school-parent-parents-result__inner {

  position: relative;

  border-radius: 8px;

  padding: 24px;

  background-color: var(--color-white);

}

.p-school-parent-parents-result__inner:before {

  display: block;

  margin: auto;

  width: 125px;

  height: 120px;

  aspect-ratio: 304/288;

  background: url(../img/school-parent/parents/img-parents-section-result.webp) center/contain no-repeat;

  background-size: 125px 120px;

  content: "";

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-result__inner {

    display: grid;

    grid-template-columns: 144px 1fr;

    grid-template-rows: minmax(0, auto) minmax(0, auto);

    gap: 0 32px;

    padding: 32px 40px;

  }

  .p-school-parent-parents-result__inner:before {

    width: 152px;

    height: auto;

    background-size: 152px 144px;

    grid-column: 1/2;

    grid-row: 1/3;

    align-self: center;

  }

}



.p-school-parent-parents-result__header {

  display: block;

  margin: 16px 0 0 0;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-20);

  line-height: 1.8;

  color: var(--color-blue);

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-result__header {

    margin: unset;

    grid-column: 2/3;

    grid-row: 1/2;

    align-self: flex-end;

    font-size: var(--font-size-24);

  }

}



@media screen and (min-width: 1024px) {

  .p-school-parent-parents-result__body {

    grid-column: 2/3;

    grid-row: 2/3;

    align-self: flex-start;

  }

}



.p-school-parent-parents-result__text {

  margin: 8px 0 0 0;

  font-size: var(--font-size-16);

  line-height: 2;

}

@media screen and (min-width: 1024px) {

  .p-school-parent-parents-result__text {

    margin: 18px 0 0 0;

  }

}



.p-faq__header .c-lower-mv__title-main {

  margin: 9px 0 0 0;

  line-height: 1.4;

}

@media screen and (min-width: 1024px) {

  .p-faq__header .c-lower-mv__title-main {

    line-height: 1.5;

  }

}

@media screen and (min-width: 1024px) {

  .p-faq__header .c-lower-mv__title {

    transform: translateY(-2px);

  }

}



.p-faq__body {

  position: relative;

  margin: 128px 0 0;

  z-index: var(--z-index-middle-low);

}

@media screen and (min-width: 1024px) {

  .p-faq__body {

    margin: 256px auto 0;

  }

}



.p-faq__navi {

  position: relative;

  margin: 48px auto 0;

  padding: 0 24px;

}

@media screen and (min-width: 1024px) {

  .p-faq__navi {

    margin: 95px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-faq__navi {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-faq__navi {

    padding: 0;

  }

}



.p-faq__subtitle {

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-20);

  line-height: 1.8;

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .p-faq__subtitle {

    font-size: var(--font-size-24);

  }

}



.p-faq-tabs {

  padding: 0 24px;

  position: relative;

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

}

@media screen and (min-width: 1024px) {

  .p-faq-tabs {

    margin: auto;

  }

}

@media screen and (min-width: 1200px) {

  .p-faq-tabs {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-faq-tabs {

    padding: 0;

  }

}



.p-faq-tabs__tab {

  position: relative;

  padding: 16px 8px;

}

.p-faq-tabs__tab:before, .p-faq-tabs__tab:after {

  position: absolute;

  bottom: 0;

  left: 0;

  display: block;

  height: 2px;

  content: "";

  transition: width 0.2s ease, color 0.2s ease;

}

.p-faq-tabs__tab:after {

  width: 0%;

  background-color: var(--color-blue);

}

.p-faq-tabs__tab:before {

  width: 100%;

  background-color: var(--color-light-gray);

}

@media screen and (min-width: 1024px) {

  .p-faq-tabs__tab {

    padding: 24px 16px;

  }

  .p-faq-tabs__tab:before, .p-faq-tabs__tab:after {

    height: 4px;

  }

}

@media screen and (min-width: 1024px) and (any-hover: hover) {

  .p-faq-tabs__tab:hover:after {

    width: 100%;

  }

}



.p-faq-tabs__tab-name {

  display: block;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.4;

  text-align: center;

  color: inherit;

}

@media screen and (min-width: 768px) {

  .p-faq-tabs__tab-name {

    display: inline;

  }

}

@media screen and (min-width: 1024px) {

  .p-faq-tabs__tab-name {

    font-size: var(--font-size-20);

    line-height: 1.8;

  }

}



.p-faq-tabs__tab[aria-selected=true]:after {

  width: 100%;

}

.p-faq-tabs__tab[aria-selected=true] {

  color: var(--color-blue);

}



.p-faq-nav {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-start;

  gap: 16px;

  margin: 24px 0 0 0;

}

@media screen and (min-width: 1200px) {

  .p-faq-nav {

    margin: 32px auto 0;

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-faq-nav {

    padding: 0;

  }

}



.p-faq-nav__item {

  width: calc((100% - 16px) / 2);

}

@media screen and (min-width: 768px) {

  .p-faq-nav__item {

    width: calc((100% - 32px) / 3);

  }

}

@media screen and (min-width: 1200px) {

  .p-faq-nav__item {

    width: calc((100% - 48px) / 4);

  }

}



.p-faq-nav__item:has(> [hidden]) {

  display: none;

}



.p-faq-nav__link {

  border: 2px solid var(--color-blue);

  background-color: var(--color-white);

  color: var(--color-blue);

  border-radius: 8px;

  padding: 8px 12px;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-12);

  line-height: 1.5;

  transition: background-color 0.2s ease, color 0.2s ease;

  height: 100%;

  width: 100%;

  text-align: left;

}

@media screen and (min-width: 1024px) {

  .p-faq-nav__link {

    font-size: var(--font-size-16);

  }

}

@media screen and (min-width: 1024px) and (any-hover: hover) {

  .p-faq-nav__link:hover {

    background-color: var(--color-blue);

    color: var(--color-white);

  }

}



.p-faq-nav__link[aria-current=true] {

  background-color: var(--color-blue);

  color: var(--color-white);

}



.p-faq-main__panel {

  scroll-margin-top: var(--header-height);

  position: relative;

  margin: 64px auto 0;

  padding: 0 24px;

}

@media screen and (min-width: 1024px) {

  .p-faq-main__panel {

    margin: 96px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-faq-main__panel {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-faq-main__panel {

    padding: 0;

  }

}



.p-faq-main__group-body {

  margin: 24px 0 0 0;

}

.p-faq-main__group-body .c-accordion {

  display: flex;

  flex-direction: column;

  gap: 24px;

}



.p-case__header .c-lower-mv__title-main {

  margin: 9px 0 0 0;

  line-height: 1.4;

}

@media screen and (min-width: 1024px) {

  .p-case__header .c-lower-mv__title-main {

    line-height: 1.5;

  }

}

@media screen and (min-width: 1024px) {

  .p-case__header .c-lower-mv__title {

    transform: translateY(-2px);

  }

}



.p-case__body {

  position: relative;

  margin: 128px 0 0;

  z-index: var(--z-index-middle-low);

}

@media screen and (min-width: 1024px) {

  .p-case__body {

    margin: 256px auto 0;

  }

}



.p-case__navi {

  position: relative;

  margin: 48px auto 0;

  padding: 0 24px;

}

@media screen and (min-width: 1024px) {

  .p-case__navi {

    margin: 95px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-case__navi {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-case__navi {

    padding: 0;

  }

}



.p-case__subtitle {

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-20);

  line-height: 1.8;

  text-align: center;

}

@media screen and (min-width: 1024px) {

  .p-case__subtitle {

    font-size: var(--font-size-24);

  }

}



.p-case-schools__inner {

  scroll-margin-top: var(--header-height);

  position: relative;

  margin: 32px auto 0;

  padding: 0 24px;

}

@media screen and (min-width: 1024px) {

  .p-case-schools__inner {

    margin: 48px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-case-schools__inner {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-case-schools__inner {

    padding: 0;

  }

}



@media screen and (min-width: 768px) {

  .p-case-schools__list {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 48px), 1fr));

    gap: 48px;

  }

}



.p-case-schools__item + .p-case-schools__item {

  margin: 24px 0 0 0;

}

@media screen and (min-width: 768px) {

  .p-case-schools__item + .p-case-schools__item {

    margin: unset;

  }

}



.p-case-shops {

  margin: 128px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-case-shops {

    margin: 160px 0 0 0;

  }

}



.p-case-shops__inner {

  scroll-margin-top: var(--header-height);

  position: relative;

  margin: 32px auto 0;

  padding: 0 24px;

}

@media screen and (min-width: 1024px) {

  .p-case-shops__inner {

    margin: 48px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-case-shops__inner {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-case-shops__inner {

    padding: 0;

  }

}



@media screen and (min-width: 768px) {

  .p-case-shops__list {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 48px), 1fr));

    gap: 48px;

  }

}



.p-case-shops__item + .p-case-shops__item {

  margin: 24px 0 0 0;

}

@media screen and (min-width: 768px) {

  .p-case-shops__item + .p-case-shops__item {

    margin: unset;

  }

}



.p-case-detail__section {

  margin: 128px 0 0 0;

}

@media screen and (min-width: 1024px) {

  .p-case-detail__section {

    margin: 160px 0 0 0;

  }

}



.p-case-detail-faq {

  position: relative;

  margin: 43px auto 0;

  padding: 0 24px;

}

@media screen and (min-width: 1024px) {

  .p-case-detail-faq {

    margin: 95px auto 0;

  }

}

@media screen and (min-width: 1200px) {

  .p-case-detail-faq {

    max-width: 1200px;

  }

}

@media screen and (min-width: 1440px) {

  .p-case-detail-faq {

    padding: 0;

  }

}



.p-case-detail-slider {

  position: relative;

  width: 100%;

  margin: 32px 0 0;

  overflow: hidden;

}

@media screen and (min-width: 1024px) {

  .p-case-detail-slider {

    margin: 48px 0 0;

  }

}



.p-case-detail-slider__inner {

  width: 100%;

}



.p-case-detail-slider__swiper {

  width: 100%;

}



.swiper-slide.p-case-detail-slider__slide {

  padding: 0 0 0 24px;

  box-sizing: content-box;

  width: 275px;

  height: auto;

}

@media screen and (min-width: 1024px) {

  .swiper-slide.p-case-detail-slider__slide {

    padding: 0 24px;

    width: 343px;

  }

}



.p-case-detail-slider__actions {

  margin: 32px auto 0;

  position: relative;

  padding: 0 24px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  z-index: var(--z-index-middle);

  gap: 0 24px;

}

@media screen and (min-width: 768px) {

  .p-case-detail-slider__actions {

    display: grid;

    grid-template-columns: 1fr;

    grid-template-rows: auto;

    justify-content: unset;

    align-items: unset;

    max-width: 1200px;

  }

}



.p-case-detail-slider__controls {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 0 16px;

}

@media screen and (min-width: 768px) {

  .p-case-detail-slider__controls {

    grid-column: 1/2;

    grid-row: 1/2;

    justify-content: flex-start;

    align-items: center;

  }

}

@media screen and (min-width: 1024px) {

  .p-case-detail-slider__controls {

    gap: 0 32px;

  }

}



.p-case-detail-slider__button {

  flex-shrink: 0;

  position: relative;

  width: 56px;

  height: 56px;

}

.p-case-detail-slider__button:before, .p-case-detail-slider__button:after {

  position: absolute;

  top: 0;

  left: 0;

  display: block;

  width: 56px;

  height: 56px;

  content: "";

  transition: opacity 0.3s ease-in-out;

}

.p-case-detail-slider__button:before {

  opacity: 1;

}

.p-case-detail-slider__button:after {

  opacity: 0;

}

@media screen and (min-width: 1024px) {

  .p-case-detail-slider__button {

    width: 64px;

    height: 64px;

  }

  .p-case-detail-slider__button:before, .p-case-detail-slider__button:after {

    width: 64px;

    height: 64px;

  }

}

@media screen and (min-width: 1024px) and (any-hover: hover) {

  .p-case-detail-slider__button:hover:before, .p-case-detail-slider__button:focus-visible:before {

    opacity: 0;

  }

  .p-case-detail-slider__button:hover:after, .p-case-detail-slider__button:focus-visible:after {

    opacity: 1;

  }

}



.p-case-detail-slider__button--next:before {

  background: url(../img/case/detail/slider/icon-case-slider-left.svg) center/contain no-repeat;

}

.p-case-detail-slider__button--next:after {

  background: url(../img/case/detail/slider/icon-case-slider-left-blue.svg) center/contain no-repeat;

}



.p-case-detail-slider__button--prev:before {

  background: url(../img/case/detail/slider/icon-case-slider-right.svg) center/contain no-repeat;

}

.p-case-detail-slider__button--prev:after {

  background: url(../img/case/detail/slider/icon-case-slider-right-blue.svg) center/contain no-repeat;

}



.p-case-detail-slider__link {

  max-width: 191px;

  width: 100%;

}

@media screen and (min-width: 768px) {

  .p-case-detail-slider__link {

    grid-column: 1/2;

    grid-row: 1/2;

    justify-self: center;

    align-self: center;

    max-width: 432px;

  }

}



@media screen and (min-width: 768px) {

  .p-case-detail-slider__link .c-button__link {

    height: 72px;

  }

  .p-case-detail-slider__link .c-button__link-text {

    font-size: var(--font-size-20);

  }

}



.p-case-detail-slider-card {

  position: relative;

  border-radius: 16px;

  border: 2px solid var(--color-light-gray);

  background: var(--color-white);

}

.p-case-detail-slider-card:before {

  position: absolute;

  top: 16px;

  left: 16px;

  display: block;

  width: 18px;

  height: 13px;

  background: url(../img/common/bg-em-left.svg) no-repeat center;

  background-size: 18px 13px;

  content: "";

  pointer-events: none;

  z-index: var(--z-index-middle-low);

}



.p-case-detail-slider-card__link {

  display: block;

  padding: 22px 24px;

  text-decoration: none;

}

@media screen and (min-width: 1440px) and (any-hover: hover) {

  .p-case-detail-slider-card__link {

    transition: opacity 0.3s ease;

  }

  .p-case-detail-slider-card__link:hover {

    opacity: 0.8;

  }

}



.p-case-detail-slider-card__inner {

  display: grid;

  grid-template-columns: 64px 1fr;

  grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, auto);

}



.p-case-detail-slider-card__header {

  padding: 0 0 16px;

  grid-column: 1/3;

  grid-row: 1/2;

}



.p-case-detail-slider-card__header-text {

  position: relative;

  padding: 0 12px 0 16px;

  font-weight: var(--font-weight-semibold);

  font-size: var(--font-size-16);

  line-height: 1.5;

  color: var(--color-blue);

}

.p-case-detail-slider-card__header-text:after {

  position: absolute;

  right: -10px;

  bottom: -8px;

  display: block;

  width: 18px;

  height: 13px;

  background: url(../img/common/bg-em-right.svg) no-repeat center;

  background-size: 18px 13px;

  content: "";

  pointer-events: none;

  z-index: var(--z-index-middle-low);

}



.p-case-detail-slider-card__frame {

  grid-column: 1/2;

  grid-row: 2/3;

  align-self: center;

}



.p-case-detail-slider-card__contents {

  margin: 0 0 0 16px;

  grid-column: 2/3;

  grid-row: 2/3;

  align-self: center;

}



.p-case-detail-slider-card__contents-text {

  font-size: var(--font-size-14);

  line-height: 1.5;

}



.p-case-detail-slider-card__action {

  margin: 8px 0 0 0;

  grid-column: 1/3;

  grid-row: 3/4;

  align-self: flex-end;

  justify-self: flex-end;

  transform: translateY(-1px) translateX(1px);

}



.u-visually-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(1px, 1px, 1px, 1px);

  clip-path: inset(50%);

  white-space: nowrap;

  border: 0;

}



.u-only-sp {

  display: block;

}

@media screen and (min-width: 1024px) {

  .u-only-sp {

    display: none;

  }

}



.u-only-tablet {

  display: none;

}

@media screen and (min-width: 1024px) and (max-width: 1439px) {

  .u-only-tablet {

    display: block;

  }

}



.u-only-pc {

  display: none;

}

@media screen and (min-width: 1024px) {

  .u-only-pc {

    display: block;

  }

}



@media screen and (max-width: 1023px) {

  .u-hide-sp {

    display: none;

  }

}



@media screen and (min-width: 1024px) and (max-width: 1439px) {

  .u-hide-tablet {

    display: none;

  }

}



@media screen and (min-width: 1440px) {

  .u-hide-pc {

    display: none;

  }

}



.u-no-split {

  display: inline-block;

  white-space: nowrap;

}

/*# sourceMappingURL=style.css.map */