@charset "UTF-8";
/*!
  Reset Stylesheet
  Author: yama-dev - https://github.com/yama-dev
  */
html, body, div, span, object, iframe, embed, main,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, tbody, tfoot, thead, tr, th, td, caption,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, source {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: middle;
  background: transparent;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q {
  quotes: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

ol, ul {
  list-style: none;
}

button, input, select, textarea, datalist {
  vertical-align: middle;
  min-height: 1.5em;
  background-color: transparent;
}

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

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
}

a[href^=tel] {
  display: inline-block;
  color: inherit;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

iframe {
  border: none;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0;
}

[role=button] {
  cursor: pointer;
}

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

[aria-controls] {
  cursor: pointer;
}

[aria-disabled=true],
[disabled] {
  cursor: not-allowed;
}

body {
  line-height: 1;
}

body, button, input, select, textarea, datalist {
  font-family: YakuHanJP, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  word-wrap: break-word;
}

:root {
  --in-sine: cubic-bezier(.47, 0, .745, .715);
  --out-sine: cubic-bezier(.39, .575, .565, 1);
  --in-out-sine: cubic-bezier(.445, .05, .55, .95);
  --in-quad: cubic-bezier(.55, .085, .68, .53);
  --out-quad: cubic-bezier(.25, .46, .45, .94);
  --in-out-quad: cubic-bezier(.455, .03, .515, .955);
  --in-cubic: cubic-bezier(.55, .055, .675, .19);
  --out-cubic: cubic-bezier(.215, .61, .355, 1);
  --in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --in-quart: cubic-bezier(.895, .03, .685, .22);
  --out-quart: cubic-bezier(.165, .84, .44, 1);
  --in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --in-quint: cubic-bezier(.755, .05, .855, .06);
  --out-quint: cubic-bezier(.23, 1, .32, 1);
  --in-out-quint: cubic-bezier(.86, 0, .07, 1);
  --in-expo: cubic-bezier(.95, .05, .795, .035);
  --out-expo: cubic-bezier(.19, 1, .22, 1);
  --in-out-expo: cubic-bezier(1, 0, 0, 1);
  --in-circ: cubic-bezier(.6, .04, .98, .335);
  --out-circ: cubic-bezier(.075, .82, .165, 1);
  --in-out-circ: cubic-bezier(.785, .135, .15, .86);
  --in-back: cubic-bezier(.6, -.28, .735, .045);
  --out-back: cubic-bezier(.175, .885, .32, 1.275);
  --in-out-back: cubic-bezier(.68, -.55, .265, 1.55);
}

:root {
  --font-jp: "IBM Plex Sans JP";
  --font-jp-min: "Noto Serif JP";
  --font-en: "Goldman";
}

img {
  max-width: 100%;
  display: block;
  vertical-align: middle;
}

@media screen and (min-width: 768px) {
  .is-pc {
    display: block;
  }
  .is-sp {
    display: none;
  }
  .is-pc-inline {
    display: inline-block;
  }
  .is-sp-inline {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .is-pc {
    display: none;
  }
  .is-sp {
    display: block;
  }
  .is-pc-inline {
    display: none;
  }
  .is-sp-inline {
    display: inline-block;
  }
}
:root {
  /* カラー定義 */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray: #f5f5f5;
  --color-aqua: #00a3ff;
  --color-yellow: #ffef00;
  --color-light: #77ceff;
}

.u-color--aqua {
  color: var(--color-aqua) !important;
}

.u-color--yellow {
  color: var(--color-yellow) !important;
}

.u-color--light {
  color: var(--color-light) !important;
  border: 1px solid var(--color-light);
}

html {
  font-size: 62.5%;
  font-family: var(--font-jp);
  font-weight: 400;
}

body {
  font-family: var(--font-jp);
  font-weight: 400;
  position: relative;
}
body::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 14px solid var(--color-aqua);
  box-sizing: border-box;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  body::before {
    border: 8px solid var(--color-aqua);
  }
}

button {
  border: none;
  cursor: pointer;
  font-family: var(--font-jp);
}

section {
  position: relative;
}

.l-wrapper {
  position: relative;
}
.l-wrapper::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  width: 8rem;
  height: 8rem;
  background: url(../img/frame/frame_corner.png) no-repeat top left;
  background-size: contain;
  transform: rotate(90deg);
}
@media screen and (max-width: 767px) {
  .l-wrapper::before {
    width: 5rem;
    height: 5rem;
  }
}
.l-wrapper::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
  width: 8rem;
  height: 8rem;
  background: url(../img/frame/frame_corner.png) no-repeat top left;
  background-size: contain;
  transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
  .l-wrapper::after {
    width: 5rem;
    height: 5rem;
  }
}
.l-wrapper-inner::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 1;
  width: 8rem;
  height: 8rem;
  background: url(../img/frame/frame_corner.png) no-repeat top left;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .l-wrapper-inner::before {
    width: 5rem;
    height: 5rem;
  }
}
.l-wrapper-inner::after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 1;
  width: 8rem;
  height: 8rem;
  background: url(../img/frame/frame_corner.png) no-repeat top left;
  background-size: contain;
  transform: rotate(-90deg);
}
@media screen and (max-width: 767px) {
  .l-wrapper-inner::after {
    width: 5rem;
    height: 5rem;
  }
}

.l-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg/bg_main.jpg) no-repeat center center;
  background-size: cover;
}

.c-btn {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.c-btn.--width\:fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.c-btn.--width\:full {
  width: 100%;
}
.c-btn.--type\:outline {
  border: 1px solid var(--color-light);
}
.c-btn.--type\:solid {
  background: var(--color-black);
}
.c-btn.--role\:select {
  border-radius: 0.8rem;
}
.c-btn.--role\:select::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  background: url(../img/frame/btn_corner.png) no-repeat top left;
  background-size: contain;
}
.c-btn.--role\:select::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  background: url(../img/frame/btn_corner.png) no-repeat top left;
  background-size: contain;
  transform: rotate(90deg);
}
.c-btn.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}
.c-btn button,
.c-btn a {
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.c-btn-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 1.6em 2rem;
  font-size: 1.5rem;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .c-btn-link {
    font-size: 1.2rem;
  }
}
.--width\:fit .c-btn-link {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.--type\:outline .c-btn-link {
  color: var(--color-black);
}
.--type\:solid .c-btn-link {
  color: var(--color-white);
}
.--role\:select .c-btn-link {
  padding: 1.4em 2rem 1.6em;
}
@media screen and (max-width: 767px) {
  .--role\:select .c-btn-link {
    padding: 1em 1.6rem 1.2em;
  }
}
.--role\:select .c-btn-link::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  background: url(../img/frame/btn_corner.png) no-repeat top left;
  background-size: contain;
  transform: rotate(-90deg);
}
.--role\:select .c-btn-link::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  background: url(../img/frame/btn_corner.png) no-repeat top left;
  background-size: contain;
  transform: rotate(180deg);
}
.--role\:submit .c-btn-link {
  padding: 0.9em 10.4rem;
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  .--role\:submit .c-btn-link {
    padding: 0.7em 0.4rem;
    font-size: 1.5rem;
  }
}
.--role\:submit .c-btn-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  background: url(../img/arrow.svg) no-repeat center center;
  background-size: contain;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .--role\:submit .c-btn-link::after {
    right: 1.2rem;
    width: 1.6rem;
    height: 1.6rem;
  }
}
.--role\:back .c-btn-link {
  padding: 0.9em 6.4rem;
  font-size: 2.4rem;
}
@media screen and (max-width: 767px) {
  .--role\:back .c-btn-link {
    padding: 0.7em 0.4rem;
    font-size: 1.5rem;
  }
}
.--role\:back .c-btn-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  background: url(../img/arrow.svg) no-repeat center center;
  background-size: contain;
  transform: translateY(-50%) rotate(180deg);
}
@media screen and (max-width: 767px) {
  .--role\:back .c-btn-link::after {
    left: 1.2rem;
    width: 1.6rem;
    height: 1.6rem;
  }
}

.c-section-title {
  margin-bottom: 5rem;
  font-size: 3rem;
  font-family: var(--font-en);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .c-section-title {
    margin-bottom: 3rem;
    font-size: 7vw;
  }
}
.c-section-title-txt {
  display: inline-block;
  position: relative;
  padding: 0 4rem;
}
@media screen and (max-width: 767px) {
  .c-section-title-txt {
    padding: 0 0.7em;
  }
}
.c-section-title-txt::before, .c-section-title-txt::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100vw;
  height: 1px;
  background: var(--color-white);
}
.c-section-title-txt::before {
  left: -100vw;
}
.c-section-title-txt::after {
  right: -100vw;
}

.p-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
.p-header .p-header-logo {
  width: 27rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .p-header .p-header-logo {
    width: 40%;
  }
}
.p-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 26%;
  padding-top: 100%;
  background: url(../img/kv/kv_sunflower.png) no-repeat top left;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .p-header::before {
    width: 36%;
  }
}
.p-header::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 26%;
  padding-top: 100%;
  background: url(../img/kv/kv_sunflower.png) no-repeat top right;
  background-size: contain;
  transform: rotateY(180deg);
}
@media screen and (max-width: 767px) {
  .p-header::after {
    width: 36%;
  }
}

.p-hero {
  padding-top: 12rem;
  padding-bottom: 6.5rem;
}
@media screen and (max-width: 767px) {
  .p-hero {
    padding-top: 7.5rem;
    padding-bottom: 2rem;
  }
}

.p-hero-title {
  position: relative;
  width: 70%;
  max-width: 66rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .p-hero-title {
    width: 87%;
  }
}
.p-hero-title-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 20%;
  max-width: 13rem;
  transform: translate(30%, -30%);
}
@media screen and (max-width: 767px) {
  .p-hero-title-badge {
    width: 22%;
    max-width: 10rem;
    transform: translate(10%, -50%);
  }
}
.p-hero-title-badge img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
}

.p-hero-period {
  position: relative;
  width: 70%;
  max-width: 640px;
  margin: 1.5rem auto 0;
  background-color: var(--color-yellow);
  color: var(--color-aqua);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 1rem 3rem 1rem 4.5rem;
}
@media screen and (max-width: 767px) {
  .p-hero-period {
    display: block;
    width: 84%;
    padding: 1.4rem 0 1.2rem;
    text-align: center;
  }
}
.p-hero-period-label {
  position: relative;
  padding-right: 3rem;
  font-size: 1.6rem;
  font-weight: 600;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .p-hero-period-label {
    padding-right: 0;
    margin-bottom: 0.4rem;
    font-size: 3.2vw;
  }
}
.p-hero-period-label::after {
  content: "";
  position: absolute;
  top: -30%;
  right: 0;
  width: 2px;
  height: 170%;
  background-color: var(--color-aqua);
}
@media screen and (max-width: 767px) {
  .p-hero-period-label::after {
    display: none;
  }
}
.p-hero-period-date {
  letter-spacing: 0.02em;
  padding-left: 2rem;
  font-size: 2.4rem;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .p-hero-period-date {
    padding-left: 0;
    font-size: 4.2vw;
  }
}
.p-hero-period-date span {
  font-size: 1.8rem;
  vertical-align: baseline;
}
@media screen and (max-width: 767px) {
  .p-hero-period-date span {
    padding-left: 0;
    font-size: 3vw;
  }
}
@media screen and (max-width: 767px) {
  .p-hero-period-deco {
    display: none;
  }
}
.p-hero-period-deco-item {
  position: absolute;
  top: 0;
  width: 9.5rem;
}
.p-hero-period-deco-item:nth-child(1) {
  left: 0;
  transform: translate(-50%, -25%);
}
.p-hero-period-deco-item:nth-child(2) {
  right: 0;
  transform: translate(50%, -25%);
}

.p-about {
  position: relative;
  margin: 5rem auto;
  color: var(--color-white);
}
.p-about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 2.9%;
  background: url(../img/frame/base_top_pc.png) no-repeat bottom center;
  background-size: 100% 100%;
  transform: translateY(-100%);
}
@media screen and (max-width: 767px) {
  .p-about::before {
    padding-top: 6%;
    background: url(../img/frame/base_top_sp.png) no-repeat bottom center;
    background-size: 100% 100%;
  }
}
.p-about::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 2.9%;
  background: url(../img/frame/base_bottom_pc.png) no-repeat top center;
  background-size: 100% 100%;
  transform: translateY(100%);
}
@media screen and (max-width: 767px) {
  .p-about::after {
    padding-top: 6%;
    background: url(../img/frame/base_bottom_sp.png) no-repeat top center;
    background-size: 100% 100%;
  }
}
.p-about-inner {
  background: url(../img/frame/base_ptn.png) repeat center center;
  background-size: 9px;
  padding: 7.6rem 0 8.6rem;
}
@media screen and (max-width: 767px) {
  .p-about-inner {
    padding: 4.5rem 0 4.2rem;
  }
}
@media screen and (min-width: 768px) {
  .p-about-deco {
    display: none;
  }
}
.p-about-deco-item {
  position: absolute;
  top: 0;
  width: 6.2rem;
}
.p-about-deco-item:nth-child(1) {
  left: 0;
  transform: translate(65%, -65%);
}
.p-about-deco-item:nth-child(2) {
  right: 0;
  transform: translate(-70%, -70%);
}
.p-about-head {
  margin-bottom: 7rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-about-head {
    margin-bottom: 4.5rem;
  }
}
.p-about-lead {
  font-size: 2rem;
  line-height: 1.78;
}
@media screen and (max-width: 767px) {
  .p-about-lead {
    font-size: 3.6vw;
    line-height: 1.9;
  }
}
.p-about-lead a {
  color: var(--color-yellow);
  text-decoration: underline;
  letter-spacing: 0.02em;
}
.p-about-lead a:hover {
  color: var(--color-white);
}
.p-about-schedule {
  width: 90%;
  max-width: 920px;
  margin: 0 auto 2rem;
  padding: 5rem 0 5rem;
  background: url(../img/frame/box_ptn.png) repeat center center;
  -webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
@media screen and (max-width: 767px) {
  .p-about-schedule {
    margin-bottom: 1.2rem;
    padding: 3.2rem 0 2rem;
  }
}
.p-about-schedule-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2%;
  width: 91%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .p-about-schedule-list {
    width: 92%;
    justify-content: flex-start;
    gap: 3.5%;
  }
}
.p-about-schedule-item {
  position: relative;
  width: 23%;
  margin-bottom: 3rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-about-schedule-item {
    width: 48%;
    margin-bottom: 1.3rem;
  }
}
.p-about-schedule-item-inner {
  padding: 1.2rem 0 1.2rem;
}
@media screen and (max-width: 767px) {
  .p-about-schedule-item-inner {
    padding: 1rem 0 1rem;
  }
}
.is-today .p-about-schedule-item-inner::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  width: 7rem;
  padding-top: 12%;
  background: url(../img/sche_today.png) no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -80%);
}
.p-about-schedule-item::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1.2rem;
  height: 100%;
  background: url(../img/frame/brackets_white_pc.png) no-repeat center center;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .p-about-schedule-item::before {
    width: 1rem;
    background: url(../img/frame/brackets_white_sp.png) no-repeat center center;
    background-size: contain;
  }
}
.p-about-schedule-item::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 1.2rem;
  height: 100%;
  background: url(../img/frame/brackets_white_pc.png) no-repeat center center;
  background-size: contain;
  transform: rotateY(180deg);
}
@media screen and (max-width: 767px) {
  .p-about-schedule-item::after {
    width: 1rem;
    background: url(../img/frame/brackets_white_sp.png) no-repeat center center;
    background-size: contain;
  }
}
.p-about-schedule-item.is-today .p-about-schedule-date,
.p-about-schedule-item.is-today .p-about-schedule-subject {
  color: var(--color-yellow);
}
.p-about-schedule-date {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--color-white);
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  .p-about-schedule-date {
    font-size: 3vw;
    margin-bottom: 0.4rem;
  }
}
.p-about-schedule-subject {
  display: block;
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .p-about-schedule-subject {
    font-size: 5vw;
  }
}
.p-about-howto {
  width: 90%;
  max-width: 920px;
  margin: 0 auto 2rem;
  padding: 5rem 0 5rem;
  background: url(../img/frame/box_ptn.png) repeat center center;
  -webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
@media screen and (max-width: 767px) {
  .p-about-howto {
    padding: 3rem 0 2rem;
  }
}
.p-about-howto-sub {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 2.5rem;
  padding-top: 0.5rem;
  font-size: 2.1rem;
  font-weight: 600;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-about-howto-sub {
    margin-bottom: 1em;
    font-size: 4vw;
  }
}
.p-about-howto-sub::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: -6rem;
  width: 4.3rem;
  height: 1.9rem;
  background: url(../img/subtitle_deco.svg) no-repeat center center;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .p-about-howto-sub::before {
    top: 0.3em;
    left: -2.7em;
    width: 2em;
    height: 1em;
  }
}
.p-about-howto-sub::after {
  content: "";
  position: absolute;
  top: 0.7rem;
  right: -6rem;
  width: 4.3rem;
  height: 1.9rem;
  background: url(../img/subtitle_deco.svg) no-repeat center center;
  background-size: contain;
  transform: rotateY(180deg);
}
@media screen and (max-width: 767px) {
  .p-about-howto-sub::after {
    top: 0.3em;
    right: -2.7em;
    width: 2em;
    height: 1em;
  }
}
.p-about-howto-note {
  width: 78%;
  margin: 0 auto 2.8rem;
  text-align: left;
  color: var(--color-gray);
}
@media screen and (max-width: 767px) {
  .p-about-howto-note {
    width: 92%;
    margin-bottom: 1.5rem;
  }
}
.p-about-howto-note li {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.6rem;
  line-height: 1.75;
}
@media screen and (max-width: 767px) {
  .p-about-howto-note li {
    font-size: 1.3rem;
    line-height: 1.5;
  }
}
.p-about-special {
  width: 90%;
  max-width: 920px;
  margin: 0 auto 2rem;
  padding: 5rem 0 5rem;
  background: url(../img/frame/box_ptn.png) repeat center center;
  -webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
@media screen and (max-width: 767px) {
  .p-about-special {
    padding: 3rem 0 2rem;
  }
}
.p-about-special-sub {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 3.5rem;
  padding-top: 0.5rem;
  font-size: 2.1rem;
  font-weight: 600;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-about-special-sub {
    margin-bottom: 1.3em;
    font-size: 4vw;
  }
}
.p-about-special-sub::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: -6rem;
  width: 4.3rem;
  height: 1.9rem;
  background: url(../img/subtitle_deco.svg) no-repeat center center;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .p-about-special-sub::before {
    top: 0.3em;
    left: -2.7em;
    width: 2em;
    height: 1em;
  }
}
.p-about-special-sub::after {
  content: "";
  position: absolute;
  top: 0.7rem;
  right: -6rem;
  width: 4.3rem;
  height: 1.9rem;
  background: url(../img/subtitle_deco.svg) no-repeat center center;
  background-size: contain;
  transform: rotateY(180deg);
}
@media screen and (max-width: 767px) {
  .p-about-special-sub::after {
    top: 0.3em;
    right: -2.7em;
    width: 2em;
    height: 1em;
  }
}
.p-about-special-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 2%;
  width: 92%;
  margin: 0 auto 3.5rem;
}
@media screen and (max-width: 767px) {
  .p-about-special-list {
    display: block;
    margin-bottom: 1.8rem;
  }
}
.p-about-special-item {
  height: 10rem;
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.2em 0 0;
  text-align: center;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .p-about-special-item {
    height: auto;
    line-height: 1.6;
    padding: 1.6em 0 1.4em;
  }
  .p-about-special-item + .p-about-special-item {
    margin-top: 1em;
  }
}
.p-about-special-item-txt {
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  .p-about-special-item-txt {
    font-size: 1.2rem;
  }
}
.p-about-special-item-txt span {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .p-about-special-item-txt span {
    font-size: 1.4rem;
  }
}
.p-about-special-note {
  width: 78%;
  margin: 0 auto 2.2rem;
  text-align: left;
  color: var(--color-gray);
}
@media screen and (max-width: 767px) {
  .p-about-special-note {
    width: 95%;
    margin-bottom: 1.6rem;
  }
}
.p-about-special-note li {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.6rem;
  line-height: 1.75;
}
@media screen and (max-width: 767px) {
  .p-about-special-note li {
    font-size: 1.3rem;
    line-height: 1.5;
  }
}

.p-test {
  width: 90%;
  max-width: 1000px;
  margin: 14rem auto 8rem;
  background: var(--color-white);
  color: var(--color-black);
}
@media screen and (max-width: 767px) {
  .p-test {
    margin: 7rem auto 6rem;
  }
}
.p-test::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 8rem;
  height: 8rem;
  background: url(../img/frame/corner_deco.png) no-repeat top left;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .p-test::before {
    width: 5rem;
    height: 5rem;
  }
}
.p-test::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 8rem;
  height: 8rem;
  background: url(../img/frame/corner_deco.png) no-repeat top left;
  background-size: contain;
  transform: rotate(90deg);
}
@media screen and (max-width: 767px) {
  .p-test::after {
    width: 5rem;
    height: 5rem;
  }
}
.p-test-inner {
  padding: 5.7rem 4rem;
}
@media screen and (max-width: 767px) {
  .p-test-inner {
    padding: 2.6rem 0;
  }
}
.p-test-inner::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 8rem;
  height: 8rem;
  background: url(../img/frame/corner_deco.png) no-repeat top left;
  background-size: contain;
  transform: rotate(-90deg);
}
@media screen and (max-width: 767px) {
  .p-test-inner::before {
    width: 5rem;
    height: 5rem;
  }
}
.p-test-inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8rem;
  height: 8rem;
  background: url(../img/frame/corner_deco.png) no-repeat top left;
  background-size: contain;
  transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
  .p-test-inner::after {
    width: 5rem;
    height: 5rem;
  }
}
.p-test-header {
  position: relative;
  margin-bottom: 6.5rem;
  padding-bottom: 4.5rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-test-header {
    margin-bottom: 3.4rem;
    padding-bottom: 2.7rem;
  }
}
.p-test-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 4.95%;
  background: url(../img/frame/line_deco_pc.png) no-repeat center center;
  background-size: contain;
  transform: translateY(50%);
}
@media screen and (max-width: 767px) {
  .p-test-header::after {
    padding-top: 8%;
    background: url(../img/frame/line_deco_sp.png) no-repeat center center;
    background-size: contain;
  }
}
.p-test-header-title {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 1.1rem 3.5rem 1rem;
  font-size: 2.3rem;
  font-weight: 600;
  text-align: center;
  font-family: var(--font-jp);
  letter-spacing: 0.05em;
  color: var(--color-aqua);
}
@media screen and (max-width: 767px) {
  .p-test-header-title {
    font-size: 1.5rem;
    padding: 0.8rem 2.5rem 0.6rem;
  }
}
.p-test-header-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1.1rem;
  width: 1.1rem;
  height: 4rem;
  background: url(../img/frame/brackets_blue.png) no-repeat center center;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .p-test-header-title::before {
    width: 0.8rem;
    height: 3rem;
  }
}
.p-test-header-title::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1.1rem;
  width: 1.1rem;
  height: 4rem;
  background: url(../img/frame/brackets_blue.png) no-repeat center center;
  background-size: contain;
  transform: rotateY(180deg);
}
@media screen and (max-width: 767px) {
  .p-test-header-title::after {
    width: 0.8rem;
    height: 3rem;
  }
}
.p-test-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .p-test-list {
    width: 92%;
    margin: 0 auto;
  }
}
.is-page-result .p-test-list {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.p-test-item {
  margin-bottom: 6rem;
  border-bottom: 1px solid var(--color-black);
  padding-bottom: 8rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-test-item {
    margin-bottom: 4rem;
    padding-bottom: 5rem;
  }
}
.p-test-item-title {
  margin-bottom: 3.8rem;
  font-family: var(--font-jp-min);
  font-size: 2.9rem;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .p-test-item-title {
    margin-bottom: 1.7rem;
    font-size: 1.3rem;
  }
}
.p-test-item-title span {
  position: relative;
  top: 0.02em;
  padding: 0 1.7rem;
  vertical-align: baseline;
  font-size: 4.5rem;
}
@media screen and (max-width: 767px) {
  .p-test-item-title span {
    padding: 0 1rem;
    font-size: 2.2rem;
  }
}
.p-test-item-subtitle {
  margin-bottom: 3.2rem;
  font-family: var(--font-jp-min);
  font-size: 1.9rem;
}
@media screen and (max-width: 767px) {
  .p-test-item-subtitle {
    margin-bottom: 2rem;
    font-size: 1.3rem;
  }
}
.p-test-item-image {
  width: 91%;
  margin: 0 auto 4.2rem;
  padding-top: 51.2%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
@media screen and (max-width: 767px) {
  .p-test-item-image {
    width: 100%;
    margin-bottom: 2.8rem;
    padding-top: 56%;
  }
}
.p-test-item-audio {
  width: 57%;
  margin: 0 auto 4.2rem;
}
@media screen and (max-width: 767px) {
  .p-test-item-audio {
    width: 100%;
    margin-bottom: 2rem;
  }
}
.p-test-item-audio-player {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--color-gray);
  padding: 3.2rem 3.5rem 3.2rem 3rem;
}
@media screen and (max-width: 767px) {
  .p-test-item-audio-player {
    padding: 2rem 2.5rem 2rem 2rem;
  }
}
.p-test-item-audio-player-btn button {
  width: 4rem;
  height: 4rem;
  background: url(../img/player/btn_play.png) no-repeat center center;
  background-size: contain;
  font-size: 0;
}
@media screen and (max-width: 767px) {
  .p-test-item-audio-player-btn button {
    width: 3.6rem;
    height: 3.6rem;
  }
}
.p-test-item-audio-player-btn button.is-pmb-active {
  background: url(../img/player/btn_pause.png) no-repeat center center;
  background-size: contain;
}
.p-test-item-audio-player-seekbar {
  margin-left: 2rem;
  flex: 1;
}
.p-test-item-audio-player-seekbar .ui-seekbar-time {
  width: 100%;
  height: 13px;
  padding: 4px 0;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  touch-action: manipulation;
}
.p-test-item-audio-player-seekbar .ui-seekbar-time .ui-seekbar-time-bg {
  width: 100%;
  height: 5px;
  background: #ddd;
  position: absolute;
  top: 0;
  left: 0;
  margin: 4px 0;
}
.p-test-item-audio-player-seekbar .ui-seekbar-time span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--color-aqua);
  position: relative;
}
.p-test-item-choices {
  width: 78.5%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.1rem;
}
@media screen and (max-width: 767px) {
  .p-test-item-choices {
    width: 100%;
    gap: 1.3rem;
  }
}
.p-test-item-choice {
  position: relative;
}
.p-test-item-choice a,
.p-test-item-choice button {
  font-family: var(--font-jp-min);
}
.p-test-item-choice.is-selected {
  border-radius: 0.8rem;
  background-color: rgba(0, 163, 255, 0.1);
}
.p-test-item-choice::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 12rem;
  height: 12rem;
  background: url(../img/check/check_right.png) no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%) scale(2);
  opacity: 0;
  pointer-events: none;
}
.is-correct .p-test-item-choice::after {
  background: url(../img/check/check_correct.png) no-repeat center center;
  background-size: contain;
}
.is-page-result .p-test-item-choice.is-selected::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.p-test-result {
  margin: 0 auto 3.2rem;
}
.p-test-result-title {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 3rem;
  padding-top: 0.5rem;
  font-size: 2.1rem;
  color: var(--color-aqua);
  font-weight: 600;
  text-align: center;
}
.p-test-result-title::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: -6rem;
  width: 4.3rem;
  height: 1.9rem;
  background: url(../img/subtitle_deco-blue.svg) no-repeat center center;
  background-size: contain;
}
.p-test-result-title::after {
  content: "";
  position: absolute;
  top: 0.7rem;
  right: -6rem;
  width: 4.3rem;
  height: 1.9rem;
  background: url(../img/subtitle_deco-blue.svg) no-repeat center center;
  background-size: contain;
  transform: rotateY(180deg);
}
.p-test-result-info {
  font-size: 1.8rem;
  line-height: 1.9;
}
@media screen and (max-width: 767px) {
  .p-test-result-info {
    font-size: 1.4rem;
  }
}
.p-test-cta {
  text-align: center;
  margin-top: 8rem;
  margin-bottom: 6.5rem;
}
@media screen and (max-width: 767px) {
  .p-test-cta {
    width: 86%;
    margin: 4rem auto 3.5rem;
  }
}

.p-attention {
  position: relative;
  margin: 5rem auto;
  color: var(--color-white);
}
.p-attention-inner {
  background: url(../img/frame/base_ptn.png) repeat center center;
  background-size: 9px;
  padding: 11.6rem 0 8.6rem;
}
@media screen and (max-width: 767px) {
  .p-attention-inner {
    padding: 4.5rem 0 4.2rem;
  }
}
.p-attention-list {
  width: 90%;
  max-width: 840px;
  margin: 0 auto 2rem;
}
.p-attention-list-sub {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 3rem;
  padding-top: 0.5rem;
  font-size: 2.1rem;
  font-weight: 600;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-attention-list-sub {
    margin-bottom: 1.6em;
    font-size: 4vw;
  }
}
.p-attention-list-sub::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: -6rem;
  width: 4.3rem;
  height: 1.9rem;
  background: url(../img/subtitle_deco.svg) no-repeat center center;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .p-attention-list-sub::before {
    top: 0.3em;
    left: -2.7em;
    width: 2em;
    height: 1em;
  }
}
.p-attention-list-sub::after {
  content: "";
  position: absolute;
  top: 0.7rem;
  right: -6rem;
  width: 4.3rem;
  height: 1.9rem;
  background: url(../img/subtitle_deco.svg) no-repeat center center;
  background-size: contain;
  transform: rotateY(180deg);
}
@media screen and (max-width: 767px) {
  .p-attention-list-sub::after {
    top: 0.3em;
    right: -2.7em;
    width: 2em;
    height: 1em;
  }
}
.p-attention-list-note li {
  color: var(--color-gray);
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.6rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .p-attention-list-note li {
    font-size: 1.2rem;
    line-height: 1.85;
  }
}
.p-attention-bottom {
  width: 90%;
  max-width: 840px;
  margin: 0 auto 2rem;
  color: var(--color-gray);
  font-size: 1.6rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .p-attention-bottom {
    font-size: 1.2rem;
    line-height: 1.85;
  }
}
.p-attention-bottom a {
  color: var(--color-yellow);
  text-decoration: underline;
  letter-spacing: 0.02em;
}
.p-attention-bottom a:hover {
  color: var(--color-white);
}

.p-footer {
  position: relative;
  padding: 0 0 10rem;
  color: var(--color-aqua);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-footer {
    padding: 0 0 6rem;
  }
}
.p-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.p-footer-pagetop {
  width: 10rem;
  margin: 0 auto 5.5rem;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
@media screen and (max-width: 767px) {
  .p-footer-pagetop {
    width: 7.5rem;
    margin-bottom: 4.5rem;
  }
}
.p-footer-pagetop:hover {
  transform: translateY(-5px);
}
.p-footer-share {
  width: 32rem;
  margin: 0 auto 4.4rem;
  padding: 1.2rem 0;
  border-radius: 8px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  background: url(../img/sns/sns_bg.png) no-repeat center center;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .p-footer-share {
    width: 26rem;
    padding: 1rem 0;
    margin-bottom: 3.8rem;
  }
}
.p-footer-share-title {
  padding: 0 3.5rem 0 0;
  font-family: var(--font-en);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  .p-footer-share-title {
    padding: 0 3rem 0 0;
    font-size: 1.2rem;
  }
}
.p-footer-share-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2.8rem;
}
@media screen and (max-width: 767px) {
  .p-footer-share-list {
    gap: 2rem;
  }
}
.p-footer-share-link {
  display: block;
}
.p-footer-share-link svg {
  width: 2.4rem;
  height: 2.4rem;
  fill: var(--color-white);
}
@media screen and (max-width: 767px) {
  .p-footer-share-link svg {
    width: 1.8rem;
    height: 1.8rem;
  }
}
.p-footer-share-link:hover svg {
  fill: var(--color-yellow);
}
.p-footer-nav {
  margin-bottom: 3.4rem;
}
@media screen and (max-width: 767px) {
  .p-footer-nav {
    margin-bottom: 2.5rem;
  }
}
.p-footer-nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-footer-nav-item {
  position: relative;
  font-size: 1.2rem;
  font-family: var(--font-en);
}
@media screen and (max-width: 767px) {
  .p-footer-nav-item {
    font-size: 3.2vw;
    font-size: min(3.2vw, 1.2rem);
  }
}
.p-footer-nav-item + li {
  margin-left: 2rem;
  padding-left: 2rem;
}
@media screen and (max-width: 767px) {
  .p-footer-nav-item + li {
    margin-left: 1.8em;
    padding-left: 1.8em;
  }
}
.p-footer-nav-item + li::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 0;
  width: 1px;
  height: 80%;
  background-color: var(--color-aqua);
}
.p-footer-nav-item a {
  display: block;
  text-decoration: none;
  color: var(--color-aqua);
  transition: color 0.3s ease;
}
.p-footer-nav-item a:hover {
  color: var(--color-yellow);
}
.p-footer-copy {
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .p-footer-copy {
    line-height: 1.5;
    font-size: min(2.8vw, 1.2rem);
  }
}
.p-footer-copy p + p {
  margin-top: 2em;
}