@charset "UTF-8";
@import url("../fonts/meitetsu/style.css");
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
    --text-color: #433216;
    --key-color1: #443215;
    --key-color2: #07aa96;
    --key-color3: #ed7a7a;
    --key-color4: #fed6d7;
    --key-color5: #e8b356;
    --key-color6: #333;
    --key-color7: #f9e6b2;
    --key-color8: #faf4e3;
    --key-color9: #fcdede;
    --key-color10: #e9d6ed;
    --key-color11: #a3e5db;
    --color-marker-yellow: #f5f95d;
    --color-marker-pink: #f7c4eb;
    --color-marker-blue: #c4f2e9;
    --color-grad-green1: linear-gradient(to right, rgba(91, 179, 36, 1) 0%, rgba(181, 229, 26, 1) 100%);
    --color-grad-green2: linear-gradient(to right, rgba(221, 233, 155, 1) 0%, rgba(159, 226, 148, 1) 100%);
    --color-grad-green3: linear-gradient(to right, rgba(159, 226, 148, 1) 0%, rgba(159, 226, 148, 1) 100%);
    --color-grad-green4: linear-gradient(to right, rgba(236, 133, 38, 1) 0%, rgba(244, 189, 64, 1) 100%);
    --color-grad-green5: linear-gradient(135deg, rgba(221, 233, 155, 1) 0%, rgba(214, 233, 175, 1) 93%);
    --color-bg-white: #fff;
    --color-bg-gray: #eee;
    --color-bg-pale-green: #e7ffd7;
    --color-border-gray: #D9E4DF;
    --link-hover-decoration: none;
    --link-default-decoration: underline;
    --color-link: var(--text-color);
    --color-link-hover: var(--key-color2);
    --focus-color: var(--key-color5);
    --font-family-sansserif: "Noto Sans JP","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
    --font-family-serif: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    --font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
    --base-font-family: var(--font-family-sansserif);
    --base-icon-font: 'basicfont';
    --font1: "Zen Maru Gothic", sans-serif;
    --font2: "Nothing You Could Do", cursive;
    --font3: "Outfit", sans-serif;
    --base-font-size-pc: 16;
    --base-font-size-sp: 14;
    --base-form-font-size-sp: 16;
    --base-line-height: 1.8;
    --base-radius: 0.5rem;
    --base-device-width-pc: 1000;
    --base-device-width-sp: 375;
    --nav-menu-pc: 6.15vw;
    --nav-menu-sp: 16vw;
    --header-height-pc: 6.1538461vw;
    --header-height-sp: 16vw;
    --content-gap-pc: 7.692vw;
    --content-gap-sp: 6.6vw;
    --col-gap-pc: 1.953125vw;
    --col-gap-sp: 3.3333333333333335vw;
    --site-gap-pc: 3vw;
    --site-gap-sp: 4vw;
}

/* ==========================================================================
   Main Visual
   ========================================================================== */
.mv {
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 0; 
}
.mv picture {
    display: block;
    width: 100%;
    height: auto;
}
.mv-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    line-height: 1; 
    text-align: center;
}

/* ==========================================================================
   Page Nav
   ========================================================================== */
.pagenav {
    position: relative;
    background-color: #fff;
    padding-top: 7rem; 
    padding-bottom: 6rem;
    z-index: 10;
}
.pagenav__list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagenav__list li {
    flex: 1;
}
/* --- ボタン本体 --- */
.pagenav__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 5rem 1rem 3.5rem;
    background-color: var(--key-color2); /* #07aa96 */
    border-radius: 5rem;
    text-decoration: none;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
}
.pagenav__link::after {
    content: "";
    position: absolute;
    bottom: 2.5rem; 
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 1.4rem;
    height: 1.4rem;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
@media (hover: hover) and (pointer: fine) {
    .pagenav__link:hover {
        transform: translateY(-0.3rem);
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.18);
        opacity: 1;
    }
}
.pagenav__img {
    position: absolute;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% - 4vw);
    width: 50%; 
    height: auto;
    margin-bottom: 0.3em;
}
.pagenav__text {
    color: #fff;
    font-family: var(--font1);
    font-weight: 700;
    font-size: clamp(1.2rem, 1.692vw, 2rem);
    text-align: center;
    line-height: 1.4;
    padding-bottom: 2rem;
}

/* ==========================================================================
   Guide
   ========================================================================== */
.guide1, .guide2, .guide3, .guide4 {
    position: relative;
    width: 100%;
    height: auto;
}
.guide1 {
    overflow-x: hidden;
}
/* --- Guide1 --- */
.guide1 {
    margin-top: 0; /* 最初のセクションだけ戻す */
    z-index: 0;
    background: url("../images/bg-guide1.png") no-repeat center top / 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}
.guide1::before {
    content: "";
    position: absolute;
    top: 10vw;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--key-color8);
    z-index: -1;
}
/* --- Guide2 --- */
.guide2 {
    position: relative;
    z-index: 0;
}
.guide2::before {
    content: "";
    position: absolute;
    top: 10vw;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--key-color9);
    z-index: -2;
}
.guide2::after {
    content: "";
    position: absolute;
    background: url("../images/bg-guide2.png") no-repeat center top / 100% auto;
    top: -3vw;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}
/* --- Guide3 --- */
.guide3 {
    position: relative;
    z-index: 0;
}
.guide3::before {
    content: "";
    position: absolute;
    top: 10vw;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--key-color10);
    z-index: -2;
}
.guide3::after {
    content: "";
    position: absolute;
    background: url("../images/bg-guide3.png") no-repeat center top / 100% auto;
    top: -3vw;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}
/* --- Guide4 --- */
.guide4 {
    position: relative;
    z-index: 0;
}
.guide4::before {
    content: "";
    position: absolute;
    top: 10vw;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--key-color11);
    z-index: -2;
}
.guide4::after {
    content: "";
    position: absolute;
    background: url("../images/bg-guide4.png") no-repeat center top / 100% auto;
    top: -3vw;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}
/* ---contact --- */
.contact {
    position: relative;
    z-index: 1; 
    padding-bottom: 5vw;
}

/* --- base --- */
.guide-header {
    padding-top: 6vw;
}
#guide2 .guide-header,
#guide3 .guide-header {
    padding-bottom: 8vw;
}
#guide4 .guide-header {
    padding-bottom: 6vw;
}
.guide-header__main {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}
.guide-header__top {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.guide-header__title {
    width: clamp(20rem, 44.2vw, 44.2rem);
    max-width: 100%;
    height: auto;
}
.guide-header__text  {
    font-family: var(--font1);
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 700;
    color: var(--key-color1);
    text-align: center;
}
.guide-header__people {
    position: absolute;
    z-index: 1;
    top: 4vw; 
    left: 6.5%;
}
.guide-header__people img {
    width: 100%;
    height: auto;
}
/* --- 白枠 --- */
.guide-white-box {
    position: relative;
    z-index: 2;
    background-color: #fff;
    border-radius: 4rem;
    padding: 3vw;
    width: 100%;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}
/* --- Q&A --- */
.guide-q {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    background: var(--key-color1);
    color: var(--color-bg-white);
    border-radius: 2rem;
}
.guide-q .guide-label {
    font-size: 4rem;
    font-family: var(--font1);
    font-weight: 700;
    line-height: 1;
    margin-top: -0.5rem;
}
.guide-question {
    font-size: 2rem;
    font-family: var(--font1);
    font-weight: 600;
    line-height: 1.6;
}
.guide-a {
    display: flex;
    gap: 1.5rem;
    padding: 2.5rem 1rem;
}
.guide-a .guide-label {
    font-size: 7rem;
    font-family: var(--font1);
    font-weight: 700;
    line-height: 1;
    color: var(--key-color3);
}
.guide-answer {
    font-size: 1.8rem;
    line-height: var(--base-line-height);
    margin-top: 2.5rem;
    line-height: 1.6;
}
.guide-media {
    display: flex;
    gap: var(--col-gap-pc);
    margin-top: 2rem;
}
.guide-media-item {
    flex: 1;
}
.guide-media-item img {
    width: 100%;
    display: block;
}
.guide-media-text {
    margin-top: 1.2rem;
    font-size: 1.8rem;
    line-height: 1.6;
    text-align: center;
}
/* --- 免許取得までの流れ --- */
/* 吹き出し */
.guide-flow-intro {
    text-align: center;
    margin: 8rem 2rem 3rem;
}
.guide-flow-text {
    position: relative;
    display: inline-block;
    font-weight: 600;
    font-size: 2.17rem;
    font-family: var(--font1);
    padding: 0 3rem;
    line-height: 1.4;
}
.guide-flow-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.7rem;
    height: 3rem;
    background: url("../images/flow-deco-left.png") no-repeat center;
    background-size: contain;
}
.guide-flow-text::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.7rem;
    height: 3rem;
    background: url("../images/flow-deco-right.png") no-repeat center;
    background-size: contain;
}
.guide-flow-intro-goal {
    text-align: center;
    margin: 3rem 2rem;
}
.guide-flow-text-goal {
    position: relative;
    display: inline-block;
    font-weight: 600;
    font-size: 3.2rem;
    font-family: var(--font1);
    padding: 0 3rem;
    line-height: 1.4;
}
.guide-flow-text-goal::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.7rem;
    height: 3rem;
    background: url("../images/flow-deco-left.png") no-repeat center;
    background-size: contain;
}
.guide-flow-text-goal::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.7rem;
    height: 3rem;
    background: url("../images/flow-deco-right.png") no-repeat center;
    background-size: contain;
}
.guide-flow-intro__pink {
    text-align: center;
    margin: 2rem 0;
}
.guide-flow-text__pink {
    position: relative;
    display: inline-block;
    font-weight: 600;
    font-size: 2rem;
    font-family: var(--font1);
    color: var(--key-color3);
    padding: 0 2rem;
    line-height: 1.4;
}
.guide-flow-text__pink::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3rem;
    height: 2.3rem;
    background: url("../images/flow-deco-left-pink.png") no-repeat center;
    background-size: contain;
}
.guide-flow-text__pink::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3rem;
    height: 2.3rem;
    background: url("../images/flow-deco-right-pink.png") no-repeat center;
    background-size: contain;
}
/* --- Step --- */
.guide-step-wrap {
    position: relative;
    padding: 0 0 4rem;
}
.guide-step-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    bottom: 0;
    background: url("../images/bg-guide1-maru.png") repeat-y center top;
    background-size: 100% auto;
    z-index: -1;
    pointer-events: none;
}
.guide-step-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 11rem;
}
.guide-step-item.is-reverse {
    flex-direction: row-reverse;
}
.guide-step-content {
    flex: 0 0 47%;
}
.guide-step-num img {
    width: 24rem;
    height: auto;
    display: block;
    margin-bottom: 1rem;
}
.guide-step-title {
    font-size: 3.2rem;
    font-family: var(--font1);
    font-weight: 700;
    line-height: 1.4;
    color: var(--key-color3);
    margin-bottom: 1.8rem;
}
.guide-step-text1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.guide-step-text2 {
    font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.guide-step-text3 {
    margin-top: 1.5rem;
    font-size: 1.8rem;
    line-height: 1.6;
}
.step-need__title{
    font-weight: 700;
}
.step-need .list-dot {
    font-size: 1.8rem;
    margin-top: 0.3rem;
    margin-bottom: 0.4rem;
}
.step-need .list-dot__item {
    margin-bottom: 0;
}
.step-need .list-kome + .list-dot {
    margin-top: 0.5rem;
    margin-bottom: 1.2rem;
}
.step-need .list-kome {
    font-size: 1.6rem;
    margin-top: 0.5rem;
    padding-left: 0;
}
.step-need .list-kome__item {
    margin-top: 0.2rem;
    padding-left: 1.8rem;
}
.step-need .list-kome__item::before {
    position: absolute;
    margin-top: 0.2rem;
    left: 0;
}
.step-need .kome-left {
    padding-left: 1.8rem;
    margin-bottom: 0.5rem;
}
.menkyo{
    margin-top: 0.8rem;
}
/* --- Step pink box --- */
.guide-step-wrapper {
    display: flex;
    gap: 1.4rem;
    align-items: stretch;
}
.guide-step-wrapper .guide-step-box {
    flex: 1;
}
.guide-step-wrapper--grid {
    flex-wrap: wrap;
    gap: 4rem 1.4rem;
}
.guide-step-wrapper--grid .guide-step-box {
    flex: 0 0 calc((100% - 1.4rem) / 2);
}
.guide-step-wrapper--grid .guide-step-box:nth-child(-n+3) {
    position: relative;
}
.guide-step-wrapper--grid .guide-step-box:nth-child(-n+3)::after {
    /* ---
    content: "▼";
    position: absolute;
    bottom: -4rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--key-color3);
    --- */
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -3rem;
    width: 3rem;
    height: 1.4rem;
    background: url("../images/arrow-down__pink.png") no-repeat center;
    background-size: contain;
}

.guide-step-box {
    background-color: var(--key-color4);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem;
}
.guide-step-box ul + p {
    margin-top: 1rem;
}
.guide-step-box .list-kome {
    font-size: 1.6rem;
    margin-top: 0.2rem;
}
.guide-step-box-text1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.2rem;
}
.guide-step-box-text1__pink {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--key-color3);
    margin-bottom: 1rem;
}
.guide-step-box-text2 {
    font-size: 1.8rem;
    line-height: 1.6;
}
.guide-step-highlight {
    font-size: 2rem;
    font-weight: 700;
    border-bottom: 2px solid var(--key-color3);
    padding-bottom: 0.3rem;
    display: inline-block;
}
/* --- Step 写真 --- */
.guide-step-image {
    flex: 0 0 48%;
    margin-top: 5rem;
}
.guide-step-image img {
    width: 100%;
    height: auto;
    display: block;
}
/* --- Step 矢印 --- */
.guide-step-item {
    position: relative;
}
.guide-step-item:has(+ .guide-step-item)::after {
    content: "";
    position: absolute;
    bottom: -11rem;
    left: 50%;
    transform: translateX(-50%);
    width: 10.25rem;
    height: 8.2rem;
    background: url("../images/step-arrow-right.png") no-repeat center;
    background-size: contain;
    z-index: 10;
}
.guide-step-item.is-reverse:has(+ .guide-step-item)::after {
    background: url("../images/step-arrow-left.png") no-repeat center;
    background-size: contain;
}
/*
.guide-step-item + .guide-step-item {
    position: relative;
}
.guide-step-item + .guide-step-item::before {
    content: "";
    position: absolute;
    top: -11rem;
    left: 50%;
    transform: translateX(-50%);
    width: 10.25rem;
    height: 8.2rem;
    background: url("../images/step-arrow-right.png") no-repeat center;
    background-size: contain;
}
*/

/* --- Step7 List --- */
.list-dot__yellow .list-dot {
    color: var(--key-color5);
    font-size: 1.8rem;
    font-weight: 500;
}

/* --- Goal --- */
.guide-step-goal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -3rem;
}
.guide-step-goal-content {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
}
.guide-step-goal-num {
    position: absolute;
    left: 0;
}
.guide-step-goal-num img {
    width: 23.6rem;
    height: auto;
    display: block;
    margin-bottom: 1rem;
}
.guide-step-goal-head-text {
    text-align: center;
    width: 60%; 
}
.guide-step-goal-title {
    font-size: 3.2rem;
    font-family: var(--font1);
    font-weight: 700;
    line-height: 1.4;
    color: var(--key-color3);
    margin-bottom: 1.8rem;
}
.guide-step-goal-text1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.guide-step-goal-text2 {
    font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.guide-step-goal-image {
    width: 100%;
    margin-bottom: 10rem;
    text-align: center;
}
.guide-step-goal-image img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 1169px) {
    .guide-step-goal-content {
        flex-direction: column;
        width: 100%;
        position: static; /* relativeを解除 */
    }
    .guide-step-goal-num {
        display: flex;
        position: static; /* absoluteを解除 */
        justify-content: center;
    }
    .guide-step-goal-head-text {
        width: 100%; 
        text-align: center;
    }
    .guide-step-goal-image {
        margin-bottom: 7rem;
    }
}

/* --- guide2 以降 --- */
/*
:is(.guide2, .guide3, .guide4) .guide-answer {
    margin-top: 4rem;
}
*/
/* yellow-box */
.price-card {
    margin-top: 2rem;
    background: var(--key-color7);
    color: var(--key-color1);
    border-radius: 3rem;
    padding: 5rem 1.5rem;
    text-align: center;
    max-width: 100%;
}
.price-card__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem
}
.price-card__plan-name {
  background-color: var(--key-color3);
  color: #fff;
  padding: 0.3em 1em;
  border-radius: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  width: auto;
  align-items: center;
  text-align: center;
  margin: 0;
}
.price-card__price-wrapper {
  display: flex;
  align-items: baseline;
  font-weight: 700;
}
.price-card__number {
  font-size: 4.8rem;
  font-family: var(--font3);
  margin-right: 0.2em;
  line-height: 1;
  max-width: 100%;
}
.price-card__unit {
  font-size: 2.6rem;
}
.price-card__tax {
  font-size: 1.6rem;
  font-weight: normal;
  margin-left: -0.3em;
  white-space: nowrap;
}

.dot-box {
    margin-top: 2rem;
    color: var(--key-color1);
    background-color: var(--key-color8);
    border-radius: 3rem;
    padding: 3rem;
    width: 100%;
    height: auto;
    background-image: 
        radial-gradient(circle, rgba(255, 255, 255, 0.4) max(0.3vw, 3px), transparent max(0.3vw, 3px)),
        radial-gradient(circle, rgba(255, 255, 255, 0.4) max(0.3vw, 3px), transparent max(0.3vw, 3px));
    background-size: max(1.5vw, 15px) max(1.5vw, 15px);
    background-position: 0 0, max(0.75vw, 7.5px) max(0.75vw, 7.5px); 
    background-repeat: repeat;
}
.dot-box__title {
    text-align: center;
    font-weight: 700;
    font-size: 1.8rem;
    font-family: var(--font1);
    margin-bottom: 2rem;
}
.dot-box__container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
}
.dot-box__white-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    gap: 0.8rem;
}
.dot-box__white-box-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0;
    gap: 2rem;
}
.pink-item {
    display: flex;
    background-color: var(--key-color4);
    padding: 1rem 1.5rem;
    font-size: 1.6rem;
    align-items: center;
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--key-color1);
    color: #fff;
    border-radius: 50%;
    font-size: 1.8rem;
    margin-right: 0.8rem;
    flex-shrink: 0;
}
.step-num::before {
    content: attr(data-number);
}
.pink-under-text {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    margin-top: 0.8rem;
}
.pink-under-text__cyu {
    font-size: 1.4rem;
    color: #937f72;
    text-align: center;
    margin-top: -0.8rem;
}
.plus-mark {
    position: relative;
    align-self: center; 
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
}
.plus-mark::before,
.plus-mark::after {
    content: "";
    position: absolute;
    background-color: var(--key-color3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.plus-mark::before {
    width: 100%;
    height: 0.4rem;
}
.plus-mark::after {
    width: 0.4rem;
    height: 100%;
}
.dot-box .list-kome{
    margin-top: -0.5rem;
}
.dot-box .list-kome__item{
    font-size: 1.4rem;
    color: #937f72;
    text-align: end;
}
.box-text {
    margin-top: 3rem;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
}
.pay-card {
    margin-top: 3rem;
}
.pay__header {
    font-size: 2.4rem;
    font-weight: 700;
    font-family: var(--font1);
    line-height: 1.4;
    color: var(--key-color1);
    text-align: center;
}
.pay__body {
    margin-top: 0.8rem;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: -1rem;
}
.pay__title {
    margin-top: 3rem;
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font1);
    line-height: 1.6;
}
.pay__text {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    line-height: 1.6;
}
.pay-point {
    margin-top: 2rem;
    background-color: var(--key-color3);
    color: #fff;
    border-radius: 3rem;
    padding: 2rem 3rem 3rem;
    width: 100%;
    height: auto;
}
.pay-point__title {
    display: inline-block;
    color: var(--key-color7);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--key-color7);
    padding-bottom: 0.3rem;
}
.pay-point__text {
    font-size: 1.6rem;
    line-height: 1.6;
}
.pay-bank {
    display: inline-block;
    line-height: 1.4;
    margin: 0.5em 0 0.4rem;
    padding: 1rem 8em 1rem 1.5rem;
    background-color: var(--key-color8);
    /*border: 2px dashed var(--key-color2);*/
}
.pay-bank__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.pay-bank__text {
    font-size: 1.6rem;
    line-height: 1.6;
}
.pay-card .list-kome__item{
    font-size: 1.4rem;
    color: #937f72;
    text-align: left;
}
/* --- guide3 以降 --- */
/* green box */
.map-card {
    background-color: #d3efea;
    color: var(--key-color1);
    border-radius: 3rem;
    padding: 3rem;
    margin-top: 2rem;
    width: 100%;
    text-align: center;
}
.map-card__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2.5rem;
    width: 100%;
}
.map-card__google-map {
    width: 62.0rem;
    aspect-ratio: 6 / 4;
    max-width: 100%;
    overflow: hidden;
}
.map-card__google-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
.map-card__img {
    flex: 0 1 13.3rem;
}
.map-card__img img {
    width: 100%;
    height: auto;
    display: block;
}
.map-card__lead {
    font-size: 1.6rem;
    line-height: 1.6;
}
.map-card .btn-container {
  margin-top: 3rem;
}
.map-extra {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    margin: 4rem auto;
}
.map-extra__main-photo img {
    width: 100%;
    height: auto;
    display: block;
}
.map-extra__side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    gap: 1rem;
}
.map-extra__text {
    font-size: 3.2rem;
    font-weight: 700;
    font-family: var(--font1);
    line-height: 1.4;
    color: var(--key-color1);
}
.map-extra__text__pink {
    color: var(--key-color3);
}
.map-extra__access img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- guide4 以降 --- */
.guide4-step {
    margin-top: 2rem;
    background-color: var(--key-color8);
    color: var(--key-color1);
    border-radius: 3rem;
    padding: 3rem;
    width: 100%;
}
.guide4-step__item {
    display: grid;
    grid-template-columns: 8rem 1fr;
    grid-template-rows: auto auto;
    gap: 0 2rem;
    margin-bottom: 5rem;
    position: relative;
}
.guide4-step__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 8rem;
    left: 4rem;
    width: 0.2rem;
    height: calc(100% - 3rem);
    background-image: linear-gradient(to bottom, var(--key-color3) 70%, transparent 50%);
    background-size: 100% 1rem;
    background-repeat: repeat-y;
    z-index: 1;
}
.guide4-step__icon {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    background-color: var(--key-color3);
    color: #fff;
    border-radius: 50%;
    font-family: var(--font1);
    line-height: 1;
    z-index: 2;
}
.guide4-step__icon-step {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
}
.guide4-step__icon-num {
    font-size: 3rem;
    font-weight: 700;
}
.guide4-step__header {
    align-self: center;
    grid-column: 2;
    grid-row: 1;
    margin-top: 1rem;
    padding-bottom: 0;
}
.guide4-step__title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--key-color1);
    margin: 0;
}
.guide4-step__body {
    grid-column: 2;
    grid-row: 2;
    font-size: 1.6rem;
    line-height: 1.6;
}
.guide4-step__body .time-schedule {
    margin-top: 3rem;
    margin-bottom: 1rem;
}
.guide4-step__body .list-kome__item {
    font-size: 1.4rem;
    color: #937f72;
    text-align: end;
    margin: 1rem 0 0;
}
.guide4-flex-content {
    display: flex;
    align-items: end;
    justify-content: flex-start;
    gap: 3rem;
    margin-top: 1rem;
    margin-left: 0;
    margin-right: auto;
}
.guide4-flex-content .btn-container-left {
    width: auto;
}
.guide4-flex-content__img {
    flex: 0 1 24rem;
}
.guide4-flex-content__img img {
    width: 100%;
    height: auto;
    display: block;
}
.guide4-sub-hd {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--key-color1);
    margin: 3rem 0 2rem;
    border-bottom: 1px solid var(--key-color1);
    padding-bottom: 0.4rem;
}
.guide4-map-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}
.guide4-map-row__map {
    flex: 0 1 40rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.guide4-map-row__map iframe {
    width: 100%;
    height: 100%;
}
.guide4-map-row__content {
    flex: 1;
    width: 100%;
}
.time-schedule {
    display: flex;
    gap: 1.5rem;
    width: 100%;
}
.time-card {
    position: relative;
    flex: 1;
    background-color: #fff;
    padding: 2.5rem 1rem 2rem;
    border-radius: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.time-schedule.is-col-3 .time-card {
    flex: 1;
}
.time-schedule.is-col-2 .time-card {
    flex: 0 1 25rem;
    padding: 3.5rem 2rem 2.5rem;
}
.time-card__tag {
    display: flex;
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    background-color: var(--key-color1);
    color: #fff;
    font-size: clamp(1.2rem, 1.6vw, 1.6rem);
    font-weight: 700;
    width: 70%;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    line-height: 1;
    white-space: nowrap;
}
.time-card__number {
    color: var(--key-color1);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

/* --- contact --- */
.contact-white-box {
    position: relative;
    background-color: #fff;
    border-radius: 4rem;
    padding: 1vw;
    width: 100%;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    z-index: 2;
}
.contact__dot-box {
    color: var(--key-color1);
    border-radius: 3rem;
    padding: 6rem 3rem;
    width: 100%;
    height: auto;
    background-image: 
        /* 1. 白いドット（上層） */
        radial-gradient(circle, rgba(255, 255, 255, 0.4) max(0.3vw, 3px), transparent max(0.3vw, 3px)),
        radial-gradient(circle, rgba(255, 255, 255, 0.4) max(0.3vw, 3px), transparent max(0.3vw, 3px)),
        /* 2. 黄色のグラデーション（下層：上#ebe565の20%から下#ffdf4f 100%へ色が濃くなる） */
        linear-gradient(to bottom, rgba(235, 229, 101, 0.2) 0%, #ffdf4f 100%);
    /* ドット用のサイズ・位置設定 */
    background-size: 
        max(1.5vw, 15px) max(1.5vw, 15px), 
        max(1.5vw, 15px) max(1.5vw, 15px), 
        100% 100%; /* グラデーションは全体に広げる */
    background-position: 
        0 0, 
        max(0.75vw, 7.5px) max(0.75vw, 7.5px), 
        0 0; 
    background-repeat: repeat, repeat, no-repeat;
    z-index: 10;
}   
.contact-btn-flex {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}
.contact-btn-flex .btn-container {
    margin-top: 0;
    margin-bottom: 0;
    flex: 0 1 26.5rem;
}
.contact-img__title {
    position: absolute;
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(20rem, 45vw, 55rem);
    max-width: 100%;
    z-index: 0;
}
.contact-img__left {
    position: absolute;
    top: -8rem;
    left: 1rem;
    width: 21rem;
    z-index: 0;
}
.contact-img__right {
    position: absolute;
    top: -3rem;
    right: 3rem;
    width: 16rem;
    z-index: 0;
}
.contact-img__title img,
.contact-img__left img,
.contact-img__right img{
    width: 100%;
    height: auto;
    display: block;
}
.contact-img__bottom img{
    display: none;
}
.contact-text {
    text-align: center;
    font-size: 2.6rem;
    font-family: var(--font1);
    font-weight: 500;
    padding: 2rem 14rem 0.5rem;
    line-height: 1.4;
}

/* ==========================================================================
   Base & Reset
   ========================================================================== */
*,
*:after,
*:before {
    box-sizing: border-box;
}

html {
    text-size-adjust: 100%;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    block-size: 100dvb;
    line-height: var(--base-line-height);
    -webkit-font-smoothing: antialiased;
    word-wrap: break-word;
    color: var(--text-color);
    background-color: #fff;
    font-family: var(--base-font-family);
    font-size: clamp(10px, calc(16 * 100vw / var(--base-device-width-pc)), calc(16 * 100vw / var(--base-device-width-pc)));
}
@media (max-width: 1290px) {
    body {
        font-size: clamp(12px, 1.27vw, 1.33vw);
    }
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}
img {
    vertical-align: bottom;
}
:where(img, picture) {
    height: auto;
}
picture {
    display: block;
}
:where(h1, h2, h3, h4, h5, h6, p) {
    font-size: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

:where(a) {
    color: var(--color-link);
    transition: all 0.2s linear;
    text-decoration: underline solid var(--color-link) clamp(1px, 0.05em, 0.05em);
    text-underline-offset: 0.25em;
}
@media (hover: hover) and (pointer: fine) {
    :where(a):hover {
        color: var(--color-link-hover);
        text-decoration-color: transparent;
    }
}

html.PC a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: var(--text-color);
}

#main-content {
    position: relative;
    width: 100%;
    background-color: var(--color-bg-white);
    clear: both;
}

/* ==========================================================================
   Layout & Containers
   ========================================================================== */
.container-stage {
    position: relative;
    z-index: -1;
}
.container-outliner {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--content-gap-pc);
    padding-left: var(--content-gap-pc);
    max-width: calc(1000px + (var(--content-gap-pc) * 2));
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}
.header-top {
    padding-top: 2.23vw;
    padding-left: 1.92vw;
}
.header-top__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
}
.header-top-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.header-top-logo__img {
    width: auto;
    display: flex;
    height: 2.36vw;
}
.header-top-logo__img img {
    display: block;
}
.header-top-logo__area {
    color: #000;
    font-weight: 500;
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1;
    white-space: nowrap;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-group {
    position: relative;
    z-index: 2;
    margin-top: -5vw;
    padding-top: 10vw;
}
.footer-group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10vw;
    background-color: var(--key-color11);
    z-index: -2;
}
.footer-group::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../images/bg-end.jpg") no-repeat center bottom / 100% auto;
    z-index: -1;
    pointer-events: none;
}
.footer {
    background-color: transparent;
    position: relative;
    z-index: 1; 
    padding-bottom: 2vw;
}
.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.footer-company-school__name {
    padding-bottom: 1.5rem;
}
.footer-company-school__name img {
    width: auto;
    height: 2.8vw;
    display: block;
}
.footer .school-address {
    font-size: 1.6rem;
    color: var(--text-color);
    text-align: center;
    padding-bottom: 0.5rem;
}
.footer-company-info__name {
    padding-bottom: 3rem;
}
.footer-company-info__name img {
    width: 15vw;
    height: auto;
    display: block;
}
.footer .policy {
    font-size: 1.6rem;
    color: var(--text-color);
    text-align: center;
    padding-bottom: 0.5rem;
}
.policy a {
    text-decoration: none;
}
.footer .copyright {
    font-family: var(--font3);
    font-weight: 500;
    color: var(--text-color);
    text-align: center;
    font-size: clamp(10px, 1.076vw, 14px);
    line-height: 1.2;
}

/* ==========================================================================
   Button
   ========================================================================== */
.btn-container {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
    margin-bottom: 1rem;
    width: 100%;
}
.btn-container-left {
    display: flex;
    justify-content: flex-start;
    margin-top: 2rem;
    margin-left: 0;
    text-align: left;
    width: auto;
}
.btn-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30rem; 
    max-width: 100%;
    padding: 1.1rem 4rem 1.1rem;
    background-color: var(--key-color2);
    color: #fff;
    font-family: var(--font1);
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}
.btn-contener-left .btn-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28rem; 
    max-width: 100%;
    padding: 1.1rem 4rem 1.1rem;
    background-color: var(--key-color2);
    color: #fff;
    font-family: var(--font1);
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}
.btn-arrow-brown {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 26rem;
    width: 100%;
    padding: 1.8rem 4rem 1.8rem;
    background-color: var(--key-color1);
    color: #fff;
    font-family: var(--font1);
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}
.btn-arrow::after, .btn-arrow-brown::after {
    content: "";
    position: absolute;
    right: 2rem;
    width: 0.8rem;
    height: 0.8rem;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}
.btn-arrow[target="_blank"]::after,
.btn-arrow-brown[target="_blank"]::after {
    border: none;
    transform: translateY(-50%);
    top: 50%;
    right: 1.8rem;
    width: 1.4rem;
    height: 1.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
@media (hover: hover) {
    .btn-arrow:hover, .btn-arrow-brown:hover {
        opacity: 0.9;
        transform: translateY(-0.2rem);
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.18);
    }
    .btn-arrow:hover::after, .btn-arrow-brown:hover::after {
        transform: translateX(5px) rotate(45deg);
    }
}
@media (hover: hover) {
    .btn-arrow[target="_blank"]:hover::after,
    .btn-arrow-brown[target="_blank"]:hover::after {
        transform: translateY(-50%) translateX(0.3rem);
    }
}

/* ==========================================================================
   List
   ========================================================================== */
/*
ol {
    list-style: none;
    counter-reset: my-counter3;
    margin: 0.5em 0 1em 0;
    padding-left: 0;
}
ol li {
    position: relative;
    line-height: 1.8;
    margin-bottom: 1em;
    padding-left: 1.8em;
}
ol li::before {
    content: counter(my-counter3) ".";
    counter-increment: my-counter3;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--text-color);
    line-height: inherit;
}
ol ul {
    margin: 0.7em 0 0.5em 0;
}
ol ul li {
    padding-bottom: 0;
}
*/

.list-dot,
.list-dot-large {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.list-dot__item,
.list-dot-large__item {
    position: relative;
    padding-left: 1em;
    margin-bottom: 0.4em;
    line-height: 1.4;
}
.list-dot__item:last-child,
.list-dot-large__item:last-child {
    margin-bottom: 0;
}
.list-dot__item::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
    width: 1em;
    height: 1em;
    line-height: inherit;
}
.list-dot-large__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2vw;
    height: 2vw;
    background-color: var(--key-color1);
    border-radius: 50%;
}
/*
.list-number-bold {
    font-weight: 600;
}
.list-number-bold__item {
    position: relative;
    margin-bottom: 0.8em;
    line-height: 1.6;
}
.list-number-bold__item > *:not(.btn, .ti) {
    font-weight: normal;
}
.list-number-bold__item > .btn {
    font-weight: 600;
}
.list-number-bold__item > h1,
.list-number-bold__item > h2,
.list-number-bold__item > h3,
.list-number-bold__item > h4,
.list-number-bold__item > h5,
.list-number-bold__item > h6 {
    margin-bottom: 0.4em;
    line-height: 1.6;
}
*/

.list-kome {
    list-style: none;
    margin: 0.5rem 0 0;
    padding-left: 0;
}

.list-kome__item {
    position: relative;
    margin-top: 0.1em;
    line-height: 1.4;
}
.list-kome__item:first-child {
    margin-top: 0;
}
.list-kome__item::before {
    content: "※";
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    vertical-align: middle;
    margin-right: 0.2em;
    margin-bottom: 0.3em;
    color: inherit;
}
@supports (background: -webkit-named-image(i)) {
    .list-kome__item::before {
        margin-bottom: 0.1em;
    }
}
.list-kome-number {
    margin: 0;
    padding-left: 0;
    counter-reset: item;
    list-style: none;
}
.list-kome-number__item {
    position: relative;
    padding-left: 2.5em;
    margin-bottom: 0.2em;
    line-height: 1.6;
}
.list-kome-number__item::before {
    counter-increment: item;
    content: "※" counter(item) "：";
    position: absolute;
    left: 0;
    top: 0.15em;
    font-size: 0.875em;
    line-height: inherit;
}
/*
.list-kakko {
    margin: 0;
    padding-left: 0;
    counter-reset: item;
    list-style: none;
}
.list-kakko__item {
    position: relative;
    padding-left: 2em;
}
.list-kakko__item::before {
    counter-increment: item;
    content: "(" counter(item) ")";
    position: absolute;
    left: 0;
    line-height: inherit;
}


.list-cyu-number {
    margin: 0;
    padding-left: 0;
    counter-reset: item;
    list-style: none;
}
.list-cyu-number__item {
    position: relative;
    padding-left: 2.5em;
}
.list-cyu-number__item::before {
    counter-increment: item;
    content: "注" counter(item) ".";
    position: absolute;
    left: 0;
}
.list-cyu-number__item ul {
    margin-left: 1.5em;
}


.list-border-dot {
    margin-bottom: 12px;
}
.list-border-dot__item {
    position: relative;
    padding: 12px 0;
}
.list-border-dot__item::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(to right, #918c8a 0 4px, transparent 4px 7px);
}

.list-maru-number {
    list-style: none;
    counter-reset: my-counter1;
    padding: 0;
}
.list-maru-number > li {
    position: relative;
    padding-left: 1.5em;
    margin-left: 0;
}
.list-maru-number > li::before {
    content: counter(my-counter1);
    counter-increment: my-counter1;
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 1.5em;
    height: 1.5em;
    font-size: 0.8em;
    text-align: center;
    line-height: 1.15;
    letter-spacing: -0.02em;
    background-color: #fff;
    border-radius: 50%;
    border: 0.077vw solid var(--text-color);
}*/

/* ==========================================================================
   Other
   ========================================================================== */
/*
.bl-box {
    margin-block-start: 0;
    margin-block-end: 0;
}
.bl-teigi .bl-teigi__item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    gap: 1.8461538462vw;
    border-bottom: 0.0769230769vw solid var(--key-color10);
    padding-top: 1.5384615385vw;
    padding-bottom: 1.5384615385vw;
}
.bl-step {
    padding-block-start: 1.3076923077vw;
}
.bl-step__item {
    position: relative;
    display: grid;
    grid-template-columns: 7.6923076923vw 1fr;
    grid-template-rows: repeat(2, auto);
    padding-block-end: 4.3846153846vw;
}
.bl-accordion {
    border-radius: 2.6923076923vw;
    background-color: #faf4e4;
    box-shadow: 0 0 0.5384615385vw 0 rgba(0,0,0,0.2);
    margin-bottom: 2.3076923077vw;
}
.bl-accordion__summary {
    color: var(--text-color);
    cursor: pointer;
    position: relative;
    padding: 1.5384615385vw 4.6153846154vw 1.5384615385vw 3.0769230769vw;
}
.bl-accordion__content {
    padding-left: 3.0769230769vw;
    padding-right: 3.0769230769vw;
}
.bl-faq-accordion {
    border-bottom: 0.0769230769vw solid #D9E4DF;
    padding: 1.1111111111em 0;
}
.bl-flow__item {
    border: 0.0769230769vw solid #D9E4DF;
    border-radius: 0.7692307692vw;
    padding: 1.2307692308vw 1.5384615385vw;
    background-color: #F3F6F5;
    position: relative;
}

.bl-arrow-list__inner {
    display: flex;
    align-items: center;
    position: relative;
    gap: 1.5384615385vw;
    padding-top: 1.5384615385vw;
    padding-bottom: 1.5384615385vw;
}

.card-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 2.3076923077vw;
}
.card-list__item {
    background-color: #fff;
    box-shadow: 0 0 0.9230769231vw rgba(0,0,0,0.2);
    border-radius: 2.8461538462vw;
    flex: 0 0 calc((100% - 2.3076923077vw) / 2);
}

.tag {
    background-color: #f8eec3;
    font-size: 0.9230769231vw;
    text-align: center;
    line-height: 1.5;
    padding: 0.3em 0.5em;
    border-radius: 0.6923076923vw;
}
*/
.text-center{
    text-align: center;
}

.pc {
    display: inline;
}
.sp {
    display: none;
}

.scrollUp {
    position: fixed;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    width: 8rem;
    height: 8rem;
    right: 3vw;
    bottom: 4vw;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    padding: 0;
}
.scrollUp.is-changed {
    opacity: 1;
    visibility: visible;
}
.scrollUp::after {
    content: "";
    position: absolute;
    top: 55%;
    left: 50%;
    width: 1.2rem;
    height: 1.2rem;
    border-top: 2px solid var(--key-color3);
    border-left: 2px solid var(--key-color3);
    transform: translate(-50%, -50%) rotate(45deg);
}
@media (hover: hover) {
    .scrollUp:hover {
        background-color: var(--key-color3);
        transform: translateY(-0.3rem);
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.18);
    }
    .scrollUp:hover::after {
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
    }
}