@charset "UTF-8";

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* font */
@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/NotoSansJP-Regular_subset.woff2") format("woff2"), url("../fonts/NotoSansJP-Regular_subset.woff") format("woff");
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/NotoSansJP-Bold_subset.woff2") format("woff2"), url("../fonts/NotoSansJP-Bold_subset.woff") format("woff");
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/NotoSansJP-Black_subset.woff2") format("woff2"), url("../fonts/NotoSansJP-Black_subset.woff") format("woff");
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Oswald-SemiBold_subset.woff2") format("woff2"), url("../fonts/Oswald-SemiBold_subset.woff") format("woff");
}

body {
    font-family: "Noto Sans JP", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.8;
    color: #262626;
    background-color: #fff;
    background-image: url(../images/gridSingle.svg);
    background-size: 24px;
}

@media screen and (min-width: 768px) {
    body {
        background-size: 40px;
    }
}

/* ======= 共通 ======= */
.pc-only {
    display: none;
}

.text {
    font-size: 14px;
}

.textcolor-orange {
    color: #ff9124;
}

.textcolor-pink {
    color: #ff3e91;
}

.textcolor-blue {
    color: #007ff6;
}

.textcolor-purple {
    color: #bb3eff;
}

.section-container {
    width: 88.888%;
    margin: 0 auto;
    padding-top: 88px;
}

.section__title img {
    margin: 0 auto;
    width: 100%;
    height: auto;
}

@media screen and (min-width: 768px) {
    .pc-only {
        display: block;
    }

    .sp-only {
        display: none;
    }

    .text {
        font-size: 16px;
    }

    .section-container {
        max-width: 1200px;
        width: 83.333%;
        padding-top: 144px;
    }
}

/*========= ボタンのためのCSS ===============*/

.btn {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-decoration: none;
    width: fit-content;
    white-space: nowrap;
}

.btn__sm {
    height: 37px;
    border-width: 1px;
    border-radius: 19px;
    padding: 0 40.5px 0 32px;
    font-size: 13px;
    font-weight: 700;
}

.btn__md {
    border-width: 2px;
    height: 42px;
    border-radius: 21px;
    padding: 0 46px 0 24px;
    font-size: 13px;
    font-weight: 700;
}

.btn__lg {
    border-radius: 30px;
    padding: 16px 44px 16px 32px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.btn__xl {
    border-width: 2px;
    border-radius: 60px;
    padding: 14px 80px 14px 54px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.btn__header-menu--sp {
    height: 42px;
    border-radius: 21px;
    padding: 10px 46px 10px 24px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
    transition: 0.3s;
}

.btn--pink {
    border: none;
    background-color: #ff3e91;
    color: #fff;
}

.btn__line--pink {
    border: 1px solid #ff3e91;
    background-color: #fff;
    color: #ff3e91;
}

.btn--blue {
    background-color: #007ff6;
    color: #fff;
}

.btn__line--white {
    border-color: #262626;
    border-style: solid;
    background-color: #fff;
    color: #262626;
}

.btn--yellow {
    border-color: #262626;
    border-style: solid;
    background-color: #ffe102;
    color: #262626;
}

.btn--orange {
    background-color: #ff9124;
    color: #fff;
}

.btn--green {
    background-color: #5ac700;
    color: #fff;
}

.btn--purple {
    background-color: #bb3eff;
    color: #fff;
}

.btn-text {
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .btn__sm {
        height: 46px;
        border-radius: 23px;
        font-size: 14px;
    }

    .btn__md {
        height: 58px;
        border-radius: 29px;
        padding: 0 52px 0 32px;
        font-size: 16px;
    }

    .btn__lg {
        border-radius: 40px;
        padding: min(1.388vw, 20px) min(6.666vw, 96px) min(1.388vw, 20px) min(3.333vw, 48px);
        font-size: clamp(16px, 1.666vw, 24px);
        line-height: 1.6;
    }

    .btn__xl {
        border-width: 3px;
        border-radius: 46px;
        padding: 1.52vw min(10vw, 108px) 1.52vw min(3.8vw, 56px);
        font-size: min(2vw, 30px);
        max-height: 92px;
        white-space: nowrap;
    }
}

@media (any-hover: hover) {
    .btn__header-menu--sp:hover {
        opacity: 70%;
    }
}

/* ボタン内・山型マークについて */
/* 山型マークを囲む円・位置/共通 */
.chevron::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #fff;
}

/* 山型マーク・位置/共通 */
.chevron::after {
    content: "";
    position: absolute;
    top: 0px;
    bottom: 0;
    margin: auto;
}

/* 山型マーク・その他の設定/サイズ違い */
.chevron__sm::after {
    right: 16px;
    width: 7px;
    height: 7px;
    border-top: 2px solid;
    border-right: 2px solid;
    transition: 0.3s;
}

.chevron__md::before {
    right: 16px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    transition: 0.3s;
}

.chevron__md::after {
    right: 23px;
    width: 6px;
    height: 6px;
    border-top: 2px solid;
    border-right: 2px solid;
    transition: 0.3s;
}

.chevron__lg::before {
    right: 16px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    transition: 0.3s;
}

.chevron__lg::after {
    right: 24px;
    width: 6px;
    height: 6px;
    border-top: 2px solid;
    border-right: 2px solid;
    transition: 0.3s;
}

.chevron__xl::before {
    right: 24px;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    transition: 0.3s;
}

.chevron__xl::after {
    right: 34px;
    width: 7px;
    height: 7px;
    border-top: 2px solid;
    border-right: 2px solid;
    transition: 0.3s;
}

.chevron__linebtn-md::after {
    right: 22.5px;
    width: 5px;
    height: 5px;
    border-top: 1px solid;
    border-right: 1px solid;
}

.chevron__header-menu--colorchenge::after {
    top: 1px;
    right: 22px;
    width: 6px;
    height: 6px;
    border-top: 2px solid;
    border-right: 2px solid;
}

.chevron__header-menu--sp::before {
    right: 16px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
}

.chevron__menu::before {
    right: 16px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    transition: 0.3s;
}

.chevron__menu::after {
    right: 24px;
    width: 6px;
    height: 6px;
    border-top: 2px solid;
    border-right: 2px solid;
    transition: 0.3s;
}

@media screen and (min-width: 768px) {
    .chevron__md::before {
        width: 24px;
        height: 24px;
        border-radius: 12px;
    }

    .chevron__md::after {
        right: 26px;
    }

    .chevron__lg::before {
        right: 5.52%;
        width: 2.777vw;
        height: 2.777vw;
        max-width: 40px;
        max-height: 40px;
        border-radius: 1.388vw;
    }

    .chevron__lg::after {
        right: 10%;
        width: 0.75vw;
        height: 0.75vw;
        max-width: 9.5px;
        max-height: 9.5px;
        border-top: min(0.258vw, 3px) solid;
        border-right: min(0.258vw, 3px) solid;
    }

    .chevron__xl::before {
        right: 5.52%;
        width: 3.61vw;
        height: 3.61vw;
        max-width: 52px;
        max-height: 52px;
        border-radius: 26px;
    }

    .chevron__xl::after {
        right: 10.5%;
        width: 0.972vw;
        height: 0.972vw;
        max-width: 12px;
        max-height: 12px;
        border-top: min(0.258vw, 3px) solid;
        border-right: min(0.258vw, 3px) solid;
    }
}

/* ボタンの山型マークの向き */
.chevron-down::after {
    transform: translateY(-2px) rotate(135deg);
}

.chevron-right::after {
    transform: rotate(45deg);
}

/* 山型マークを囲む円・各色 */
.chevron--color::before {
    background-color: #fff;
}

.chevron__linebtn--pink::before {
    background-color: #ff3e91;
}

.chevron__linebtn--white::before,
.chevron__linebtn--yellow::before {
    background-color: #262626;
}

/* 山型マーク・各色 */
.chevron__linebtn::after,
.chevron__sm::after {
    border-color: #fff;
}

.chevron--pink::after {
    border-color: #ff3e91;
}

.chevron--blue::after {
    border-color: #007ff6;
}

.chevron--yellow::after {
    border-color: #ffe102;
}

.chevron--orange::after {
    border-color: #ff9124;
}

.chevron--green::after {
    border-color: #5ac700;
}

.chevron--purple::after {
    border-color: #bb3eff;
}

.chevron--black::after {
    border-color: #262626;
}

/*========= ボタンのためのCSS ここまで ===============*/

/* ======= ヘッダー ======= */
.header {
    position: fixed;
    width: 100%;
    padding: 16px 16px 16px 20px;
    z-index: 98;
    transition: 0.3s;
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.header-wrapper a {
    display: flex;
    align-items: center;
    transition: 0.3s;
}

h1,
h1 picture {
    width: 88px;
    height: auto;
}

.btn-wrapper {
    display: none;
}

.header__bg-color {
    background-color: #fff;
}

@media screen and (min-width: 1032px) {
    .header {
        padding: 32px 72px;
    }

    h1,
    h1 picture,
    h1 img {
        width: 314px;
        height: auto;
    }

    .btn-wrapper {
        display: flex;
        gap: 24px;
    }
}

@media (any-hover: hover) {
    .header-logo:hover {
        opacity: 70%;
    }

    .header__try-btn:hover .chevron__md::before,
    .header__watch-btn:hover .chevron__md::before {
        right: 12px;
    }

    .header__try-btn:hover .chevron__md::after,
    .header__watch-btn:hover .chevron__md::after {
        right: 22px;
    }
}

/* ====== spメニューのレイアウト ====== */
#menu {
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position: fixed;
    z-index: -1;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s;
}

/* backdrop-filter 非対応ブラウザ用 */
@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
    #menu {
        background: rgba(255, 255, 255, 0.8);
    }
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#menu.panelactive {
    opacity: 1;
    z-index: 97;
}

/*ナビゲーション*/
#menu-list {
    display: none;
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: fit-content;
    border: 2px solid #262626;
    border-radius: 16px;
    background-image: url(../images/gridSingle.svg);
    background-size: 24px;
    background-color: #fff;
}

#menu.panelactive #menu-list {
    display: block;
}

/*リストのレイアウト設定*/

#menu li {
    display: block;
    text-align: center;
}

#menu li:nth-child(2) {
    padding-top: 24px;
}

#menu li a {
    color: #fff;
    text-decoration: none;
    padding: 18px 44px 18px 32px;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    height: auto;
    width: 284px;
    border-radius: 29px;
    margin: 8px auto 0;
}

.menu-list__inner {
    margin: 56px auto;
}

.menu-list__inner img {
    margin: 0 auto;
    height: auto;
}

.menu__title {
    margin: 0 auto;
    width: 208px;
    height: auto;
}

.menu-list__inner ul {
    margin-top: 32px;
}

.menu__try-btn,
.menu__watch-btn {
    height: 18px;
    margin: 0 auto;
}

@media screen and (min-width: 1032px) {
    #menu {
        opacity: 1;
        height: 122px;
        padding: 32px 0;
        z-index: 100;
        backdrop-filter: none;
        margin-left: 50%;
        width: 50%;
    }

    #menu-list {
        display: block;
        border: none;
        background: none;
        height: inherit;
        transform: none;
        top: 30px;
        left: auto;
        right: 16px;
        width: auto;
    }

    .menu-list__inner {
        margin: 0;
        width: auto;
    }

    .menu-list__inner ul {
        display: flex;
        gap: 24px;
        margin: 0;
    }

    #menu li:nth-child(2) {
        padding-top: 0;
    }
}

/* ボタンがクリックされたら */
.openbtn.panelactive {
    color: #ff3e91;
    border: 1px solid #ff3e91;
    background-color: #fff;
}

.btnopen--colorchenge.panelactive::before {
    background-color: #ff3e91;
}

.btnopen--colorchenge.panelactive::after {
    border-color: #fff;
}

/* クローズボタンのスタイル */
.close-button {
    background-color: black;
    border: none;
    border-radius: 0 16px 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 0;
    transition: 0.3s;
}

/* ×を表現する要素 */
.x-mark {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

@media screen and (min-width: 1032px) {
    .openbtn,
    #menu {
        display: none;
    }
}

@media (any-hover: hover) {
    .close-button:hover {
        opacity: 80%;
    }

    .menu__btn:hover .chevron__menu::before {
        right: 12px;
    }

    .menu__btn:hover .chevron__menu::after {
        right: 20px;
    }
}
/* ======= ヘッダーここまで ======= */

/* 今回のお題・・テーブル */
.table__wrapper {
    display: block;
}

table {
    border-spacing: 0px;
    width: 100%;
}

table ul {
    margin: 0 0 0 20px;
    list-style-type: "・ ";
    list-style-position: outside;
}

th,
td {
    display: block;
    font-size: 14px;
    text-align: start;
    padding: 8px 16px;
}

th {
    font-weight: 600;
}

table td ul li:not(:first-child) {
    padding-top: 8px;
}

table tr:first-child > *:first-child {
    border-radius: 12px 12px 0 0;
}

table tr:last-child > *:last-child {
    border-radius: 0 0 12px 12px;
}

@media screen and (min-width: 768px) {
    th,
    td {
        display: table-cell;
        font-size: 16px;
        padding: 16px 24px;
    }

    th {
        font-weight: 400;
    }

    table tr:first-child > *:first-child {
        border-radius: 16px 0 0 0;
    }

    table tr:first-child > *:last-child {
        border-radius: 0 16px 0 0;
    }

    table tr:last-child > *:first-child {
        border-radius: 0 0 0 16px;
    }

    table tr:last-child > *:last-child {
        border-radius: 0 0 16px 0;
    }

    table {
        border-spacing: 2px;
    }
}

/* ======= フッター ======= */
footer {
    background-color: #f2f9ff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    height: fit-content;
    margin-top: 64px;
}

footer .section-container {
    padding-top: 40px;
    padding-bottom: 16px;
}

.footer-logo__top-link {
    display: inline-block;
    width: fit-content;
    transition: 0.3s;
}

.footer-logo {
    width: 220px;
    height: auto;
}

.footer__linkframe {
    padding-top: 32px;
}

.footer__nav ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer__nav ul:nth-child(2) {
    padding-top: 4px;
}

.footer__nav ul li {
    font-size: 14px;
    line-height: 1;
    height: fit-content;
    width: fit-content;
    transition: 0.3s;
}

.footer__nav a {
    text-decoration: none;
    color: #262626;
    display: inline-block;
    height: 30px;
}

.footer__iconlink {
    text-align: center;
    padding-top: 48px;
}

.footer__sns-icon {
    display: flex;
    gap: 16px;
    justify-content: center;
    transition: 0.3s;
}

.footer__sns-icon img {
    height: 36px;
    width: 36px;
}

.footer__link-btn {
    display: inline-block;
    padding-top: 24px;
}

.footer__copyright {
    font-size: 12px;
    text-align: center;
    padding-top: 32px;
}

@media (any-hover: hover) {
    .footer-btn:hover .chevron__sm::after {
        right: 12px;
    }
}

@media screen and (min-width: 768px) {
    footer {
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
        margin-top: 144px;
    }

    footer .section-container {
        padding-top: 56px;
        padding-bottom: 24px;
    }

    .footer__sns-icon img {
        height: 40px;
        width: 40px;
    }

    .footer__link-btn {
        padding-top: 20px;
    }
}

@media screen and (min-width: 900px) {
    .footer__nav ul {
        flex-direction: row;
        gap: 32px;
    }

    .footer__nav ul:nth-child(2) {
        padding-top: 16px;
    }

    .footer__nav ul li {
        font-size: 16px;
        line-height: 1.8;
    }

    .footer-logo {
        width: 175px;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .footer__linkframe {
        display: block;
    }
}

@media screen and (min-width: 1200px) {
    .footer__linkframe {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 40px;
    }

    .footer__iconlink {
        padding: 0;
    }

    .footer__copyright {
        padding-top: 24px;
    }
}

@media (any-hover: hover) {
    .footer-logo__top-link:hover {
        opacity: 80%;
    }

    .footer__sns-icon li:hover {
        opacity: 70%;
    }

    .footer__nav ul li a:hover {
        text-decoration: underline;
        text-decoration-color: #262626;
    }
}

/* ====== 下層・セクションタイトルエリア ====== */
.subpage__section-title-wrapper p {
    font-size: 14px;
    font-weight: 400;
    padding-top: 24px;
}

@media screen and (min-width: 768px) {
    .subpage__section-title-wrapper p {
        font-size: 16px;
        padding-top: 40px;
    }
}

/* トップページ共通 */
.title-wrapper {
    display: flex;
    justify-content: center;
}

.js-menubtn,
.js-chevron__menu {
    transition: color 0.4s ease-out;
}

/* ====== ファーストビュー ====== */
.title-img img {
    width: 100%;
    height: auto;
}

.mv {
    padding-top: 108px;
}

.mv .section-container {
    padding: 0;
    max-width: 1500px;
}

.mv__title-container {
    position: relative;
    width: 100%;
    height: auto;
}

.mv__title {
    width: 100%;
    height: auto;
}

.mv__subtitle {
    width: 100%;
    height: auto;
}

.mv__title-img {
    width: 91.875%;
    height: auto;
    padding-top: 6px;
}

.number-of-times {
    position: absolute;
    bottom: 7px;
    left: 54%;
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 600;
    line-height: 1;
    font-size: clamp(28px, 6.666vw, 50px);
    color: #ff3e91;
}

.mv-inner {
    padding-top: clamp(16px, 4.444vw, 48px);
    display: flex;
    flex-direction: column;
    gap: 49px;
    align-items: center;
}

.mv__date {
    display: flex;
    align-items: flex-end;
}

.date__day-of-week {
    border: clamp(1px, 0.277vw, 2px) solid #262626;
    font-weight: 900;
    font-size: clamp(16px, 4.444vw, 32px);
    width: clamp(22px, 6.111vw, 48px);
    height: clamp(22px, 6.111vw, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
}

.date__time {
    display: flex;
    align-items: flex-end;
    margin-left: 8px;
}

.date__time span {
    font-size: clamp(24px, 6.666vw, 50px);
    margin-left: clamp(2px, 0.364vw, 4px);
}

.time__colon {
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.911vw, 10px);
    margin-left: 4px;
    padding-bottom: clamp(2px, 0.555vw, 7px);
}

.time__hyphen {
    padding-bottom: clamp(2px, 0.555vw, 7px);
}

.date__year,
.date__month,
.date__day,
.date__time {
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 600;
    line-height: 1;
}

.date__year {
    font-size: clamp(14px, 3.888vw, 30px);
    text-align: center;
}

.date__month {
    font-size: clamp(36px, 10vw, 76px);
}

.date__day {
    font-size: clamp(58px, 16.111vw, 122px);
    margin-bottom: -2px;
}

.date__dot {
    margin: auto;
    background-color: #262626;
}

.date__dot {
    width: clamp(6px, 1.666vw, 9px);
    height: clamp(6px, 1.666vw, 9px);
    margin: 0 auto 2px 2px;
}

.free {
    font-weight: 700;
    line-height: 1.1;
    font-size: clamp(14px, 3.888vw, 29px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #262626;
    border-radius: 60px;
    width: clamp(50px, 13.888vw, 106px);
    height: clamp(50px, 13.888vw, 106px);
    margin-left: clamp(8px, 0.52vw, 18px);
    margin-bottom: -2px;
}

@media (any-hover: hover) {
    .mv-btn:hover .chevron__xl::before {
        right: 19px;
    }

    .mv-btn:hover .chevron__xl::after {
        right: 29px;
    }
}

@media screen and (min-width: 768px) {
    .mv {
        padding-top: min(15.902%, 229px);
    }

    .mv__title-container {
        display: flex;
        gap: 6.91%;
        height: auto;
    }

    .mv__title {
        max-height: 682px;
        width: 79.166vw;
    }

    .mv__subtitle {
        width: 83.309%;
    }

    .mv__title-img {
        height: auto;
        width: 100%;
        padding-top: 10px;
    }

    .mv__serif--pc {
        height: auto;
        max-height: 682px;
        width: 44.791vw;
        margin-top: -30px;
    }

    .number-of-times {
        bottom: 10px;
        left: 34.833%;
        font-size: min(4.166vw, 80px);
    }

    .mv-inner {
        padding-top: min(7.291vw, 80px);
        flex-direction: row;
        justify-content: space-between;
        gap: unset;
        align-items: flex-end;
    }

    .mv__date {
        width: fit-content;
        min-width: 52.5%;
    }

    .date__year {
        font-size: min(2.083vw, 31.245px);
    }

    .date__month {
        font-size: min(5.277vw, 79.155px);
    }

    .date__dot {
        width: min(0.833vw, 12px);
        height: min(0.833vw, 12px);
        margin: 0 0 4px 8px;
    }

    .date__day {
        font-size: min(8.472vw, 127.08px);
    }

    .date__day-of-week {
        font-size: min(2.222vw, 33.33px);
        width: min(3.333vw, 50px);
        height: min(3.333vw, 50px);
        margin-left: min(0.902vw, 13.5px);
    }

    .date__time {
        margin-left: min(1.666vw, 25px);
    }

    .date__time span {
        font-size: min(3.472vw, 52px);
    }

    .time__colon {
        gap: min(0.694vw, 10px);
        margin-left: 4px;
        padding-bottom: min(0.486vw, 4.3px);
    }

    .time__dot {
        width: min(0.416vw, 6px);
        height: min(0.416vw, 6px);
    }

    .time__hyphen {
        padding-bottom: min(0.416vw, 6px);
    }

    .free {
        font-size: min(2.013vw, 30px);
        width: min(7.361vw, 110.5px);
        height: min(7.361vw, 110.5px);
        margin-left: min(1.25vw, 18px);
    }

    @media (any-hover: hover) {
        .mv-btn:hover .chevron__xl::before {
            right: 3.52%;
        }

        .mv-btn:hover .chevron__xl::after {
            right: 8.5%;
        }
    }
}

/* ====== メッセージ ====== */
#message {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-bottom: 104px;
}

.bg-wrapper {
    position: absolute;
    top: 160px;
    left: -90px;
    height: 77%;
    width: 100%;
    max-height: 670px;
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: rotate(330deg);
}

.bg__line1,
.bg__line2,
.bg__line3,
.bg__line4 {
    border-radius: 32px;
    height: 9vw;
    max-height: 40px;
}

.bg__line1 {
    background-color: #bb3eff;
    width: 53vw;
    margin-left: 218px;
}

.bg__line2 {
    background-color: #ff3e91;
    width: 128vw;
    margin-left: 140px;
}

.bg__line3 {
    background-color: #bb3eff;
    width: 53vw;
}

.bg__line4 {
    background-color: #ff3e91;
    width: 83vw;
    margin-left: 45vw;
}

#message .section-container {
    padding-top: 128px;
}

.message-container {
    border: #262626 solid 2px;
    border-radius: 16px;
    background-color: #fff;
}

.message-inner {
    margin: 40px 15px;
    position: relative;
}

.message__title-bubble {
    position: absolute;
    top: -64px;
    left: -30px;
    max-width: 80px;
    width: 20vw;
    height: auto;
}

.message__title {
    margin: 0 auto;
    padding-bottom: 32px;
    width: 81.25%;
    max-width: 295px;
    height: auto;
}

.message-inner p {
    font-size: 14px;
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0.02em;
    text-align: center;
    margin: 0;
}

.message-inner p:not(:last-child) {
    padding-bottom: 24px;
}

.w890 {
    display: none;
}

@media screen and (min-width: 768px) {
    #message {
        padding-bottom: 144px;
    }

    #message .section-container {
        padding-top: min(19.944vw, 244px);
    }

    .message-container {
        margin: 0 auto;
        border: #262626 solid 3px;
        border-radius: 24px;
        max-width: 812px;
    }

    .message-inner {
        margin: 64px 74px 56px;
    }

    .message__title-bubble {
        top: -96px;
        left: -8.5px;
        max-width: 135px;
        width: 13vw;
    }

    .message__title {
        padding-bottom: 64px;
        width: 61.196%;
        max-width: 393px;
    }

    .message-inner p {
        font-size: 20px;
        line-height: 2.6;
    }

    .message-inner p:not(:last-child) {
        padding-bottom: 32px;
    }
}

@media screen and (min-width: 768px) and (max-width: 889px) {
    .w890 {
        display: block;
    }

    .w890none {
        display: none;
    }
}

@media screen and (min-width: 890px) {
    .message__sp-only,
    .w890 {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1119px) {
    .bg-wrapper {
        height: 90%;
        max-height: none;
        top: 110px;
    }

    .bg__line1,
    .bg__line2,
    .bg__line3,
    .bg__line4 {
        height: 7vw;
        max-height: 56px;
    }

    .bg__line1 {
        width: 40vw;
        margin-left: 200px;
    }

    .bg__line2 {
        max-width: 1280px;
        width: 125vw;
        margin-left: 35px;
    }

    .bg__line3 {
        width: 116vw;
        margin-left: -30px;
    }

    .bg__line4 {
        width: 48vw;
        margin-left: 52vw;
    }
}

@media screen and (min-width: 1120px) {
    .bg-wrapper {
        height: 100%;
        max-height: none;
        width: 90%;
        justify-content: normal;
        top: 20px;
        left: min(-3.472vw, 20px);
    }

    .bg__line1,
    .bg__line2,
    .bg__line3,
    .bg__line4 {
        height: 4.5vw;
        max-height: 64px;
    }

    .bg__line1 {
        width: 16vw;
        margin-left: 200px;
    }

    .bg__line2 {
        width: 77vw;
        max-width: 1570px;
        margin-left: 43px;
        margin-top: min(18.02vw, 259px);
    }

    .bg__line3 {
        width: 106vw;
        max-width: 1700px;
        margin-left: 4.944vw;
        margin-top: min(27.48vw, 389.5px);
    }

    .bg__line4 {
        width: 43vw;
        margin-left: 74vw;
        margin-top: min(21.215vw, 305.5px);
    }
}

/* ====== こんな人にオススメ ====== */
#problem .section-container {
    padding-top: 0;
}

.problem__title {
    width: 95.9375%;
    max-width: 407px;
    height: auto;
}

.problem-container {
    padding-top: 40px;
}

.problem__item-wrapper {
    display: grid;
    gap: 16px;
    margin: 0 auto;
    width: 312px;
    grid-template-columns: repeat(2, minmax(148px, 1fr));
}

.problem__item {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 20.5555vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.problem__item--blue {
    background-color: #007ff6;
}

.problem__item--green {
    background-color: #5ac700;
}

.problem__text {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.problem__item:nth-child(odd) .problem__text {
    line-height: 1.7;
}

.problem__item:nth-child(even) .problem__text {
    line-height: 1.3;
}

.problem__text--big {
    font-size: 16px;
}

@media screen and (min-width: 976px) {
    .problem__item-wrapper {
        max-width: 472px;
        width: 39.333%;
    }
}

@media screen and (min-width: 768px) {
    .problem__title {
        width: 53.083%;
        max-width: 637px;
    }

    .problem-container {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: min(4.44vw, 64px);
        padding-top: 80px;
    }

    .problem__item-wrapper {
        gap: max(1.666vw, 16px) max(2.222vw, 16px);
        margin: 0;
    }

    .problem-left,
    .problem-right {
        width: 20.25%;
        max-width: 243px;
        height: auto;
    }

    .problem__text {
        font-size: min(1.111vw, 16px);
    }

    .problem__text--big {
        font-size: min(1.666vw, 24px);
    }
}

/* ====== できること ====== */
.feature__title {
    width: 60.3125%;
    max-width: 246px;
}

.feature-inner {
    margin: 0 auto;
}

.feature__card {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background-color: #fff8f0;
}

.feature-card__image {
    border-radius: 16px;
    width: 100%;
    background-color: #ff9124;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 149px;
}

.feature-card__image img {
    height: 35vw;
    max-height: 180px;
    padding: min(3vw, 43px);
}

.feature-card__content {
    padding: 32px 24px;
}

.feature-card__title p {
    font-weight: 700;
    line-height: 1.4;
}

.feature-card__title .title-text--big {
    font-size: 26px;
}

.feature-card__text {
    padding-top: 24px;
}

.feature-card__text p {
    font-size: 14px;
}

@media screen and (min-width: 768px) {
    .feature__title {
        width: 32.08%;
        max-width: 385px;
    }
}

@media screen and (min-width: 768px) and (max-width: 925px) {
    .feature__w1094,
    .feature__w1044 {
        display: none;
    }
}

@media screen and (min-width: 926px) {
    .feature-inner {
        padding-top: 40px;
        width: fit-content;
    }

    .feature__card {
        flex-direction: row-reverse;
        max-width: 1056px;
        border-radius: 24px;
    }

    .feature-card__image {
        min-width: 325px;
        width: 30.776%;
        height: inherit;
        border-radius: 24px;
    }

    .feature-card__image img {
        height: auto;
        max-height: none;
        max-width: none;
        width: auto;
        margin: 0 auto;
    }

    .feature-card__content {
        padding: 48px 56px 40px;
        margin: 0 auto;
        max-width: 763px;
    }

    .feature-card__title .title-text--small {
        font-size: 22px;
    }

    .feature-card__title .title-text--big {
        font-size: 42px;
    }

    .feature-card__title p {
        font-size: 28px;
        line-height: 1.3;
    }

    .feature-card__text {
        padding-top: 32px;
    }

    .feature-card__text p {
        font-size: 18px;
    }
}

@media screen and (min-width: 926px) and (max-width: 1044px) {
    .feature__w1044 {
        display: block;
    }
}

@media screen and (min-width: 926px) and (max-width: 1093px) {
    .feature__w1094 {
        display: block;
    }
}

@media screen and (min-width: 1044px) {
    .feature__w1044 {
        display: none;
    }
}

@media screen and (min-width: 1094px) {
    .feature__w1094 {
        display: none;
    }
}

/* ・・・・・・・講師紹介・・・・・・・ */

.instructor__image-wrapper {
    padding-top: 120px;
    position: relative;
    width: 68%;
}

.instructor__bubble {
    position: absolute;
    top: 65px;
    right: -16px;
    width: 29.444vw;
    min-width: 106px;
    height: auto;
}

.prof-image {
    border-radius: 16px;
    width: 100%;
    height: auto;
}

.instructor__content {
    background-color: #64bd1c;
    background-color: #262626;
    border-radius: 16px;
    margin-top: -72px;
    margin-left: 20px;
    padding: 104px 24px 40px;
}

.instructor__content p {
    color: #fff;
}

.instructor__position {
    font-size: 12px;
    line-height: 1.7;
}

.instructor__name-container {
    padding-top: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.instructor__name-container p {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.instructor__name-container a {
    padding-top: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instructor__name-container a img {
    width: 24px;
    height: 24px;
    transition: 0.3s;
}

.instructor__name-kana {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding-top: 6px;
}

.instructor__text {
    display: flex;
    flex-direction: column;
    row-gap: 1.5em;
    padding-top: 32px;
}
.works-link {
    margin-top: 56px;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    display: inline-block;
    position: relative;
}

.works-link__image {
    height: auto;
    width: 100%;
    transition: transform 0.6s ease;
}

@media screen and (min-width: 769px) {
    .instructor__image-wrapper {
        padding-top: 144px;
        padding-left: 12vw;
        width: 42%;
    }

    .instructor__bubble {
        top: 88px;
        left: 8vw;
        right: auto;
        width: 9.305vw;
    }

    .prof-image {
        border-radius: 24px;
        width: 100%;
    }

    .instructor__content {
        border-radius: 24px;
        margin-top: -27vw;
        margin-left: 35%;
        padding-top: 56px;
        padding-bottom: 56px;
        padding-right: 8vw;
        padding-left: 10.2vw;
    }

    .instructor__position {
        font-size: 14px;
        line-height: 1.8;
    }

    .instructor__name-container {
        padding-top: 16px;
        gap: 16px;
    }

    .instructor__name-container p {
        font-size: 36px;
    }

    .instructor__name-container a img {
        width: 28px;
        height: 28px;
    }

    .instructor__name-kana {
        font-size: 14px;
        padding-top: 12px;
    }

    .instructor__text {
        padding-top: 40px;
    }

    .instructor__works {
        font-size: 20px;
    }

    .works-link {
        margin-bottom: 24px;
        border-radius: 16px;
    }

    .link-icon {
        width: 56px;
        height: 56px;
    }
}

/* ======= 添削してもらうとこんなに変わる！セクション ======= */
.case-container {
    width: 88%;
    margin: 0 auto;
    padding-top: 88px;
}

.case__title {
    padding-bottom: 40px;
    width: 85.9375%;
    max-width: 413px;
    height: auto;
}

.case__item:last-child {
    margin-top: 32px;
}

.case-item__before {
    border-top: 2px solid #007ff6;
    border-left: 2px solid #007ff6;
    border-right: 2px solid #007ff6;
    border-radius: 16px 16px 0 0;
    background-color: #fff;
    padding: 8% 8% 4% 8%;
}

.case-item__after {
    border-left: 2px solid #ff9124;
    border-right: 2px solid #ff9124;
    border-bottom: 2px solid #ff9124;
    border-radius: 0 0 16px 16px;
    background-color: #fff;
    padding: 4% 8% 8% 8%;
}

.case-item__situation--before-sp,
.case-item__situation--after-sp {
    border-radius: 8px;
    padding: 8px 24px;
    width: fit-content;
    height: auto;
    margin-bottom: 8px;
}

.case-item__situation--before-sp {
    background-color: #007ff6;
}

.case-item__situation--after-sp {
    background-color: #ff9124;
}

.case-item__situation--before-sp img,
.case-item__situation--after-sp img {
    height: 14px;
}

.case-item__img,
.instructor__icon {
    width: 100%;
    height: auto;
}

.case-item__button {
    margin: 0 auto;
    display: block;
    margin-top: 32px;
    position: relative;
    background-color: #007ff6;
    color: #fff;
    height: 42px;
    border-color: transparent;
    border-radius: 21px;
    padding: 0 46px 0 24px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

@media (any-hover: hover) {
    .case-item__button:hover {
        opacity: 80%;
    }
}

@media screen and (min-width: 768px) {
    .case-item__button {
        height: 58px;
        border-radius: 29px;
        padding: 0 52px 0 32px;
        font-size: 16px;
    }
}

.case-item__button img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 16px;
    width: 18px;
    height: 18px;
}

@media screen and (min-width: 768px) {
    .case-item__button img {
        width: 24px;
        height: 24px;
    }
}

@media screen and (min-width: 769px) {
    .case-container {
        max-width: 1032px;
        width: 71.666%;
        padding-top: 144px;
    }

    .case__title {
        padding-bottom: 80px;
        width: 53.87%;
        max-width: 556px;
    }

    .case__item:last-child {
        margin-top: 64px;
    }

    .case-item__situation-wrapper {
        display: flex;
    }

    .case-item__situation--before,
    .case-item__situation--after {
        height: 5vw;
        max-height: 72px;
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .case-item__situation--before {
        background-color: #007ff6;
        border-top-left-radius: 24px;
        position: relative;
    }

    .case-item__situation--before::after {
        content: "";
        position: absolute;
        background-color: #007ff6;
        border-radius: 0 0.9vw 0 0;
        width: 3.5vw;
        height: 3.5vw;
        max-width: 50px;
        max-height: 50px;
        right: max(-1.8vw, -25px);
        transform: rotate(45deg);
    }

    .case-item__situation--after {
        background-color: #ff9124;
        border-top-right-radius: 24px;
    }

    .case-item__situation-wrapper img {
        margin: 0 auto;
        height: 37.5%;
        max-height: 27px;
    }

    .case-item__inner {
        display: flex;
    }

    .case-item__before {
        border-left: 3px solid #007ff6;
        border-bottom: 3px solid #007ff6;
        border-top: none;
        border-right: none;
        border-radius: 0 0 0 24px;
        background-color: #fff;
        height: fit-content;
        padding: 5.42% 2.71% 5.42% 5.42%;
    }

    .case-item__after {
        border-right: 3px solid #ff9124;
        border-bottom: 3px solid #ff9124;
        border-left: none;
        border-radius: 0 0 24px 0;
        background-color: #fff;
        height: fit-content;
        padding: 5.42% 5.42% 5.42% 2.71%;
        position: relative;
    }

    .case-item__button {
        position: absolute;
        bottom: 40px;
        left: 0;
        transform: translateX(-50%);
    }
}

/* モーダルウインドウ */
/* bodyのスクロールを制御 */
body.modal-open {
    overflow: hidden;
    height: 100vh;
    touch-action: none; /* iOSのスクロール防止 */
}

.modal-overlay {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
    -ms-overflow-style: none;
    pointer-events: none;
}

/* backdrop-filter 非対応ブラウザ用 */
@supports not ((-webkit-backdrop-filter: blur(30px)) or (backdrop-filter: blur(30px))) {
    .modal-overlay {
        background: rgba(255, 255, 255, 0.8);
    }
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.modal-overlay.hide {
    opacity: 0;
    visibility: hidden;
    backdrop-filter: none;
}

/* モーダルコンテンツ */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 320px;
    display: block;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-height: 100vh;
    visibility: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    pointer-events: auto;
}

.modal::-webkit-scrollbar {
    display: none;
}

.modal__inner {
    margin-top: 56px;
    margin-bottom: 56px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border: 2px solid #262626;
    border-radius: 16px;
    display: block;
    height: auto;
}

/* 閉じるボタン (×) */
.modal__close {
    position: sticky;
    top: 0;
    margin: 0 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0 12px 0 16px;
    background: #262626;
    cursor: pointer;
    z-index: 2001;
    transition: opacity 0.2s ease;
    display: none;
    pointer-events: all;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.modal__close span {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

/* モーダルが開いたら ✕ ボタンを表示 */
.modal-overlay.show .modal__close {
    display: flex;
}

.modal__close:hover {
    opacity: 0.7;
}

.modal__content {
    margin: 16px 32px 32px;
}

.modal__case-item {
    margin: 0 auto;
}

.modal__case-item:not(:first-child) {
    padding-top: 48px;
}

.comment-wrapper {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
}

.comment__icon-wrapper img {
    width: 48px;
    max-width: none;
}

.comment__icon-wrapper p {
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
}

.comment__text {
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.6;
    color: #fff;
    background-color: #007ff6;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    height: fit-content;
    width: 100%;
}

/* アニメーション: 開くとき（ズームイン） */
.modal.show {
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* アニメーション: 閉じるとき（ズームアウト） */
.modal.hide {
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

@media screen and (min-width: 768px) {
    .modal {
        width: 71.666%;
        max-width: 1032px;
        min-width: 640px;
    }

    .modal__inner {
        border: 3px solid #262626;
        border-radius: 24px;
        margin-top: 80px;
        margin-bottom: 80px;
    }

    .modal__close {
        border-radius: 0 18px 0 24px;
        /* top: 81px; */
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .modal__close span {
        color: #fff;
        font-size: 26px;
        font-weight: 500;
        line-height: 1;
    }

    .modal__content {
        margin: 40px 56px 56px;
    }

    .modal__case-item {
        display: flex;
        flex-direction: row-reverse;
        gap: 4.34%;
        align-items: center;
    }

    .modal__case-item img {
        width: 44.67%;
    }

    .comment-wrapper {
        gap: 24px;
        align-items: center;
    }

    .comment__icon-wrapper img {
        width: 80px;
    }

    .comment__icon-wrapper p {
        font-size: 12px;
        line-height: 1;
        padding-top: 8px;
        white-space: nowrap;
    }

    .comment__icon-wrapper p span {
        display: inline-block;
    }

    .comment__text {
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
        border-bottom-left-radius: 16px;
        font-size: 16px;
        padding: 16px 24px;
    }
}

/* ======= 今回の課題セクション ======= */
#thema {
    padding-top: 64px;
}

.thema-area {
    background-color: #f8fef1;
    border-radius: 20px;
    padding: 48px 20px;
}

.thema-container {
    background-color: #fff;
    border: 2px solid #262626;
    border-radius: 16px;
    margin: 0 auto;
    padding: 40px 24px 48px;
}

.thema__title {
    width: min(75.367%, 283px);
    height: auto;
}

.thema-wrapper {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-top: 56px;
    margin: 0 auto;
    height: fit-content;
}

.thema__point h3 {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 140%;
    background-color: #5ac700;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 1em;
}

.thema__thema p {
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
    margin-bottom: 2em;
}

.thema__point-list p {
    margin-bottom: 2em;
}
.thema-area ul li {
    line-height: 140%;
}
.thema-area ul li:not(:last-child) {
    margin-bottom: 0.8em;
}

.table__wrapper {
    padding-top: 32px;
}

.thema__table th,
.thema__table td {
    padding: 8px 16px;
}

.thema__table th {
    background-color: #dbf3c8;
    width: auto;
}

.thema__table td {
    background-color: #f8fef1;
}

.thema-container a {
    margin: 40px auto 0;
}

.example__wrapper {
    display: inline-block;
    margin: 0 auto;
}

.example__wrapper img {
    width: 100%;
    max-width: 354px;
    height: auto;
}

.table__text p,
.text-item__mark,
.example__wrapper p {
    font-size: 12px;
    line-height: 1.6;
}

.table__text {
    padding-top: 16px;
}

.table__text-item:not(:first-child) {
    padding-top: 4px;
}

.table__text-item {
    display: flex;
    align-items: flex-start;
}

.example__wrapper p {
    padding-top: 8px;
}

.thema-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(100%, 320px);
    height: 64px;
    border-radius: 99em;
    font-weight: 700;
    font-size: 16px;
}
@media screen and (min-width: 768px) {
    .thema-btn {
        font-size: 18px;
    }
}
@media (any-hover: hover) {
    .thema-btn:hover .chevron__md::before {
        right: 12px;
    }

    .thema-btn:hover .chevron__md::after {
        right: 19px;
    }
}

@media screen and (min-width: 768px) {
    #thema {
        padding-top: 144px;
    }

    .thema-area {
        border-radius: 32px;
        padding: 8.333%;
    }

    .thema-container {
        border: 3px solid #262626;
        border-radius: 24px;
        max-width: 1200px;
        padding: 88px 64px 56px;
    }

    .thema__title {
        width: clamp(283px, 36.1%, 387px);
    }

    .thema__thema h3,
    .thema__point h3 {
        font-size: 14px;
        border-radius: 8px;
        padding: 8px 16px;
    }

    .thema__thema p {
        font-size: 24px;
    }

    .table__wrapper {
        padding-top: 56px;
    }

    .thema__table th,
    .thema__table td {
        padding: 16px;
    }

    .thema__table th {
        width: 23.88%;
        min-width: 114px;
    }

    .thema-container a {
        margin: 48px auto 0;
    }

    .table__wrapper,
    .example__wrapper p {
        font-size: 12px;
    }

    @media (any-hover: hover) {
        .thema-btn:hover .chevron__md::before {
            right: 12px;
        }

        .thema-btn:hover .chevron__md::after {
            right: 22px;
        }
    }
}

@media screen and (min-width: 1032px) {
    .thema-wrapper {
        flex-direction: row-reverse;
        align-items: flex-start;
        gap: 48px;
        padding-top: 80px;
    }

    .example__wrapper {
        position: sticky;
        top: 122px;
        height: fit-content;
        width: 33.022%;
        min-width: 200px;
    }

    .example__wrapper img {
        width: 100%;
        max-width: none;
    }

    .table__text p,
    .example__wrapper p {
        font-size: 14px;
        line-height: 1.8;
    }

    .table__text p:not(:first-child) {
        padding-top: 0px;
    }
}

/* ====== 参加の流れ ====== */
.flow__title {
    padding-top: 64px;
    width: 56.666%;
    max-width: 205px;
    height: auto;
}

.flow__text {
    font-size: 14px;
    font-weight: 400;
    margin: 0 auto;
    padding-top: 26px;
    width: 88.888%;
}

.tab {
    width: 100%;
    margin: 0 auto;
    margin-top: 32px;
    position: relative;
}

/* タブメニュー */
.tab__item-list {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 50px;
    padding: 0;
    margin: 0;
}

.tab__item {
    position: relative;
    list-style: none;
    width: 50%;
    height: clamp(222px, 54vw, 306px);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.tab__item--try {
    background-color: #bb3eff;
    border-top-left-radius: 20px;
}

.tab__item--watch {
    background-color: #ff9124;
    border-top-right-radius: 20px;
}

.tab__item::before {
    position: absolute; /* 三角形をタブ内の特定位置に配置 */
    display: none;
    bottom: -8px; /* 三角形をタブの下に表示 */
    width: 18px; /* 三角形の幅 */
    height: 9px; /* 三角形の高さ */
    content: ""; /* 擬似要素の内容（空） */
    clip-path: polygon(0 0, 100% 0, 50% 100%); /* 三角形の形状を作成 */
}

.tab__item--try::before,
.tab__item--watch::before {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.tab__item--try::before {
    background-color: #bb3eff;
}

.tab__item--watch::before {
    background-color: #ff9124;
}

.flow__chara-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    overflow: hidden;
}

.flow__chara01--color,
.flow__chara01--gray {
    width: 26.111%;
    max-width: 188px;
    margin-left: 22.916%;
    z-index: 1;
    height: auto;
}

.flow__chara01--clear {
    left: 12.777%;
    width: 46.388%;
    max-width: 334px;
    height: auto;
}

.flow__chara02--color,
.flow__chara02--gray {
    width: 36.111%;
    max-width: 260px;
    margin-left: 50.555%;
    z-index: 1;
    height: auto;
}

.flow__chara02--clear {
    left: 33.138%;
    width: 66.944%;
    max-width: 482px;
    height: auto;
}

.flow__chara01--color,
.flow__chara02--color {
    display: none;
}

.flow__chara01--clear,
.flow__chara02--clear {
    position: absolute;
    bottom: 0;
    mix-blend-mode: screen;
}

.item__try-copy-wrapper,
.item__watch-copy-wrapper {
    position: absolute;
    height: min(16.666vw, 80px);
}

.item__try-copy-wrapper {
    bottom: 24px;
    right: 4vw;
}

.item__watch-copy-wrapper {
    bottom: 24px;
    left: 4vw;
}

.item__subcopy--try,
.item__subcopy--watch {
    margin: 0 auto;
    height: min(3.6vw, 18px);
    width: auto;
}

.item__copy--try,
.item__copy--watch {
    height: min(10.555vw, 40px);
    margin: 8px auto 0;
    width: auto;
}

.item__copy--try img,
.item__copy--watch img {
    height: 100%;
    margin: 0 auto;
    width: auto;
}

.item__copy-wrapper {
    transition: 0.3s;
}

.flow__copy-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    width: 100%;
}

.flow__copy {
    margin: 0 auto;
    padding-top: 40px;
    width: 65%;
    height: auto;
}

/* is-activeがついている時のスタイル */
.tab__item.is-active::before {
    display: block;
}

.tab__item.is-active .flow__chara01--color,
.tab__item.is-active .flow__chara02--color {
    display: none;
}

.tab__item.is-active .flow__chara01--gray,
.tab__item.is-active .flow__chara02--gray {
    display: none;
}

/* タブパネル */
.tab__panel {
    width: 100%;
}

.tab__panel-box {
    min-height: 461px;
    height: fit-content;
    padding: 32px 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* is-showがついている時のスタイル */
.tab__panel-box.is-show {
    display: block;
}

.tab__panel-box01 {
    background-color: #fcf7ff;
    display: none;
}

.tab__panel-box02 {
    background-color: #fff8f0;
    display: none;
}

.tab__panel-inner {
    margin: 0 auto;
    width: 320px;
}

.panel__card-list {
    display: grid;
    gap: 47px;
    justify-content: center;
}

.panel__card {
    display: grid;
    background-color: #fff;
    border-radius: 12px;
    gap: 16px;
    padding: 24px;
    width: 320px;
    position: relative;
}

.panel-card__title-wrapper {
    display: flex;
    gap: 10px;
}

.panel-card--1,
.panel-card--2,
.panel-card--4 {
    padding-left: 64px;
}

.panel-card--3 {
    padding-left: 44px;
}

.panel-card__number {
    width: 30px;
    height: 30px;
}

.panel-card__title {
    font-size: 20px;
    font-weight: 700;
}

.panel-card__text {
    font-size: 14px;
}

.panel-card__deadline {
    display: inline-block;
    font-weight: 700;
    margin-top: 1em;
}

.panel__card a {
    margin: 8px auto 0;
}

/* 三角アイコンのスタイル */
.panel__card:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid #262626;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 0 solid transparent;
    transform: translateX(-50%);
}

@media (any-hover: hover) {
    .tab__item:hover .item__copy-wrapper {
        scale: 1.1;
    }

    .flow-btn:hover .chevron__sm::after {
        right: 12px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1299px) {
    .tab__panel-inner {
        width: fit-content;
        margin: 0 auto;
    }

    .panel__card-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1300px) and (max-width: 1407px) {
    .tab__panel-inner {
        width: 92.307%;
        max-width: 1200px;
    }

    .tab__panel-inner--watch {
        width: fit-content;
    }

    .panel__card-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .panel__card-list--watch {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1408px) {
    .tab__panel-inner {
        width: 83.333%;
        max-width: 1200px;
    }

    .tab__panel-inner--watch {
        width: fit-content;
    }

    .panel__card-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .panel__card-list--watch {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 768px) {
    .flow__title {
        padding-top: 120px;
        width: 26.736%;
        max-width: 385px;
    }

    .flow__text {
        font-size: 16px;
        text-align: center;
        padding-top: 48px;
    }

    .tab {
        margin-top: 56px;
    }

    .flow__copy {
        margin: 0 auto;
        padding-top: 72px;
        width: 515px;
    }

    .flow__copy img {
        width: 35.763%;
        max-width: 515px;
    }

    .tab__item {
        height: 408px;
    }

    .tab__item--try {
        border-top-left-radius: 32px;
    }

    .tab__item--watch {
        border-top-right-radius: 32px;
    }

    .tab__item::before {
        bottom: -18px;
        width: 28px;
        height: 19px;
    }

    .tab__item--try::before,
    .tab__item--watch::before {
        transform: none;
    }

    .tab__item--try::before {
        left: auto;
        right: 21%;
    }

    .tab__item--watch::before {
        left: 21%;
    }

    .tab__item.is-active .flow__chara01--color,
    .tab__item.is-active .flow__chara02--color {
        display: block;
    }

    .tab__menu-item.is-active .flow__chara01--gray,
    .tab__menu-item.is-active .flow__chara02--gray {
        display: none;
    }

    .item__try-copy-wrapper {
        bottom: 40px;
        right: min(4vw, 48px);
    }

    .item__watch-copy-wrapper {
        bottom: 40px;
        left: min(4vw, 48px);
    }

    .item__try-copy-wrapper,
    .item__watch-copy-wrapper {
        height: 6.527vw;
        max-height: 94px;
    }

    .item__copy--try img,
    .item__copy--watch img {
        height: 100%;
    }

    .item__subcopy--try,
    .item__subcopy--watch {
        margin: 0 auto;
        height: 1.527vw;
        max-height: 20px;
        min-height: 14px;
    }

    .item__copy--try,
    .item__copy--watch {
        padding-top: 10px;
        height: 6.305vw;
        max-height: 72px;
        min-height: 38px;
    }

    .tab__panel-box {
        border-bottom-right-radius: 32px;
        border-bottom-left-radius: 32px;
        padding: 80px 0 64px;
    }

    .panel__card {
        grid-row: span 3;
        grid-template-rows: subgrid;
        border: 2px solid #262626;
        border-radius: 16px;
        padding: 32px 22px;
        min-height: 317px;
        width: 258px;
    }

    .panel-card__title-wrapper {
        position: relative;
        justify-content: center;
        padding: 0;
    }

    .panel-card__number {
        position: absolute;
        top: -58px;
        left: -48px;
        width: 62px;
        height: 62px;
    }

    .panel-card__title {
        font-size: 24px;
    }

    .panel__card a {
        margin: 24px auto 0;
    }

    .panel__card:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        bottom: auto;
        left: auto;
        right: -40px;
        width: 0;
        height: 0;
        border-top: 10px solid #262626;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-bottom: 0 solid transparent;
        transform: translateY(-50%) rotate(270deg);
    }
}

/* ====== スケジュール ====== */
.schedule__title {
    width: 65.9375%;
    max-width: 222px;
    height: auto;
}

.schedule-container {
    background-color: #fff;
    border: 2px solid #262626;
    border-radius: 16px;
    margin: 32px auto 0;
    width: 100%;
}

.schedule-container ul {
    margin: 32px 24px;
}

.schedule-container li:not(:last-child) {
    padding-bottom: 40px;
}

.schedule__item {
    position: relative;
    display: flex;
    flex-direction: column;
}

.schedule-item__name {
    background-color: #27d1d0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
}

.schedule-item__date {
    background-color: #f0ffff;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 0 0 12px 12px;
}

.schedule-item__name--different-color {
    background-color: #fe6a4c;
}

.schedule-item__date--different-color {
    background-color: #fff9f7;
}

.tab-only {
    display: none;
}

/* 三角アイコンのスタイル */
.schedule__item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 16px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 8px solid #262626;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 0 solid transparent;
    transform: translateX(-50%);
}

@media screen and (min-width: 768px) and (max-width: 824px) {
    .tab-only {
        display: block;
    }
}

@media screen and (min-width: 825px) {
    .tab-only {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .schedule__title {
        width: 34.666%;
        max-width: 416px;
    }

    .schedule-container {
        border: 3px solid #262626;
        border-radius: 24px;
        max-width: 944px;
        margin-top: 80px;
        /* width: 65.55%; */
    }

    .schedule-container ul {
        margin: 88px auto;
        width: 81.35%;
    }

    .schedule-container li:not(:last-child) {
        padding-bottom: 55px;
    }

    .schedule__item {
        flex-direction: row;
    }

    .schedule-item__name {
        font-size: 18px;
        border-radius: 16px 0 0 16px;
        padding: 20px 32px;
        width: 35.6%;
        min-width: 222px;
    }

    .schedule-item__date {
        font-size: 18px;
        border-radius: 0 16px 16px 0;
        padding: 20px 32px;
        width: 64.4%;
    }

    .schedule__item:not(:last-child)::after {
        bottom: 24px;
        border-top: 12px solid #262626;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
    }
}

/* ====== みんなの声 ====== */
.voice__title {
    width: 59.6875%;
    max-width: 204px;
    height: auto;
}

.voice__cardlist {
    padding-top: 32px;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.voice-card {
    display: grid;
    gap: 10px;
    grid-row: span 2;
    grid-template-rows: subgrid;
}

.voice-card__text {
    padding: 20px 24px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.voice-card:nth-child(odd) .voice-card__text {
    background-color: #daecfd;
}

.voice-card:nth-child(even) .voice-card__text {
    background-color: #f4dfff;
}

.voice-card__name-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.voice-card__name-icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

.voice-card__name {
    font-size: 12px;
    font-weight: 400;
}

@media screen and (min-width: 768px) {
    .voice__title {
        width: 31.75%;
        max-width: 381px;
    }

    .voice__cardlist {
        gap: 48px;
        padding-top: 80px;
    }

    .voice-card {
        gap: 12px;
    }

    .voice-card__text {
        padding: 32px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        border-bottom-right-radius: 24px;
    }

    .voice-card__name-icon {
        width: 44px;
        height: 44px;
        border-radius: 22px;
    }

    .voice-card__name {
        font-size: 14px;
    }
}

/* ====== よくあるご質問 ====== */
.qa__title {
    width: 78.75%;
    max-width: 264px;
    height: auto;
}

.qa__itemlist {
    padding-top: 32px;
}

.qa__item {
    background-color: #fff;
    border: 2px solid #262626;
    border-radius: 16px;
    padding: 20px;
    width: 100%;
}

.qa__item:not(:first-child) {
    margin-top: 24px;
}

.qa-item__question,
.qa-item__answer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.qa-item__answer {
    padding-top: 12px;
}

.icon-question,
.icon-answer {
    width: 28px;
    height: auto;
}

.qa-item__question p {
    font-size: 14px;
    font-weight: 700;
}

.submit-link {
    color: #007ff6;
}

@media screen and (min-width: 768px) {
    .qa__title {
        width: 41.166%;
        max-width: 494px;
    }

    .qa__itemlist {
        padding-top: 80px;
    }

    .qa__item {
        border-radius: 24px;
        padding: 24px 32px;
    }

    .qa-item__question,
    .qa-item__answer {
        align-items: center;
        gap: 16px;
    }

    .icon-question,
    .icon-answer {
        width: 34px;
    }

    .qa-item__question p {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* ====== 運営について ====== */
.organizer__title {
    width: 71.875%;
    max-width: 248px;
    height: auto;
}

.organizer-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 32px;
}

.logo-SLash-box {
    border: 2px solid #262626;
    border-radius: 16px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding-left: min(22.777vw, 104px);
    margin: 0 auto;
    width: min(100%, 400px);
    height: min(49.722vw, 225px);
}

.logo-SLash {
    width: 38.888vw;
    max-width: 175px;
    height: auto;
}

.organizer__text {
    font-size: 14px;
    font-weight: 400;
}

.organizer-contents a {
    margin: 32px auto 0;
}

@media (any-hover: hover) {
    .organizer-btn:hover .chevron__md::before {
        right: 12px;
    }

    .organizer-btn:hover .chevron__md::after {
        right: 19px;
    }
}

@media screen and (min-width: 768px) {
    .organizer__title {
        width: 37.25%;
        max-width: 447px;
    }

    .organizer-wrapper {
        flex-direction: row;
        gap: 48px;
        padding-top: 80px;
    }

    .logo-SLash-box {
        border-radius: 24px;
        padding-left: min(9.16vw, 132px);
        width: 41.666vw;
        height: min(23.402vw, 337px);
    }

    .logo-SLash {
        width: 21.25vw;
        max-width: 306px;
    }

    .organizer-contents {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 38.333vw;
        max-width: 552px;
    }

    .organizer__text {
        font-size: 18px;
        line-height: 2;
    }

    .organizer-contents a {
        margin: 24px 0 0 0;
    }

    @media (any-hover: hover) {
        .organizer-btn:hover .chevron__md::before {
            right: 12px;
        }

        .organizer-btn:hover .chevron__md::after {
            right: 22px;
        }
    }
}

/* ====== CTAセクション ====== */
.cta-container {
    width: 100%;
    height: fit-content;
    position: relative;
    margin-top: 88px;
}

.cta__bg-wrapper {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.cta__try-area,
.cta__watch-area {
    display: flex;
    flex-direction: column;
    justify-content: end;
    overflow: hidden;
}

.cta__try-area {
    position: relative;
    background-color: #ff9124;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 50%;
    overflow: hidden;
}

.cta__chara01--clear {
    position: absolute;
    left: -40px;
    bottom: -20px;
    mix-blend-mode: screen;
    width: 64%;
    max-width: 458px;
    height: auto;
}

.cta__chara01--color {
    width: 26%;
    max-width: 188px;
    margin-left: 16%;
    z-index: 1;
    height: auto;
}

.cta__watch-area {
    position: relative;
    background-color: #ff3e91;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 50%;
}

.cta__chara02--clear {
    position: absolute;
    bottom: 0;
    right: 0;
    mix-blend-mode: screen;
    height: 77%;
    max-height: 443px;
}

.cta__chara02--color {
    width: 36%;
    max-width: 260px;
    margin-left: 61%;
    z-index: 1;
    height: auto;
}

.cta-contents {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.cta__serif {
    margin: 0 auto;
    width: 46.666%;
    max-width: 168px;
    height: auto;
}

.cta__copy {
    margin: 0 auto;
    padding-top: 16px;
    width: 82.222%;
    max-width: 361px;
    height: auto;
}

.cta__btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.cta__try-copy,
.cta__watch-copy {
    height: 24px;
    margin: 0 auto;
    width: auto;
}

.cta__btn-wrapper a {
    border: 2px solid #fff;
    margin-top: 5px;
    width: 288px;
}

.cta__btn-wrapper a img {
    height: 18px;
    margin: 2px auto;
    width: auto;
}

@media (any-hover: hover) {
    .cta__try-btn:hover .chevron__lg::before,
    .cta__watch-btn:hover .chevron__lg::before {
        right: 12px;
    }

    .cta__try-btn:hover .chevron__lg::after,
    .cta__watch-btn:hover .chevron__lg::after {
        right: 20px;
    }
}

@media screen and (min-width: 768px) {
    .cta-container {
        margin-top: 144px;
    }

    .cta__try-area {
        border-top-left-radius: 24px;
        border-bottom-left-radius: 24px;
    }

    .cta__watch-area {
        border-top-right-radius: 24px;
        border-bottom-right-radius: 24px;
    }

    .cta-contents {
        padding-top: 64px;
    }

    .cta__serif {
        width: 19.791%;
        max-width: 285px;
        min-width: 168px;
    }

    .cta__copy {
        width: 47.083%;
        max-width: 678px;
        padding-top: 20px;
    }

    .cta-btn__try-container,
    .cta-btn__watch-container {
        width: 27.152%;
        max-width: 391px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cta__btn-wrapper {
        flex-direction: row;
        gap: min(4.444vw, 64px);
        justify-content: center;
        padding-top: 70px;
        padding-bottom: 56px;
    }

    .cta__try-copy,
    .cta__watch-copy {
        height: 2.222%;
    }

    .cta__btn-wrapper a {
        width: fit-content;
    }

    .cta__btn-wrapper a img {
        height: 1.944vw;
        max-height: 28px;
        margin: clamp(4px, 0.35vw, 11px) 0;
    }

    .cta__try-btn .chevron__lg::after,
    .cta__watch-btn .chevron__lg::after {
        right: 10%;
    }

    @media (any-hover: hover) {
        .cta__try-btn:hover .chevron__lg::before,
        .cta__watch-btn:hover .chevron__lg::before {
            right: 4%;
        }

        .cta__try-btn:hover .chevron__lg::after,
        .cta__watch-btn:hover .chevron__lg::after {
            right: 8.5%;
        }
    }
}

/* ====== 課題の詳細 ====== */
#thema-detail .section-container {
    padding-top: 106px;
}

.thema-detail__title {
    width: 55%;
    max-width: 207px;
    height: auto;
}

.detail-container {
    padding-top: 40px;
    width: 100%;
}

.detail__table-container {
    width: 100%;
}

.detail__table-container:not(:first-child) {
    padding-top: 40px;
}

.table-title {
    font-size: 20px;
    font-weight: 700;
}

.table__wrapper {
    padding-top: 8px;
}

.thema th {
    background-color: #ffe5ca;
}

.thema td {
    background-color: #fff8f0;
}

.apply th {
    background-color: #f4dfff;
}

.apply td {
    background-color: #fcf7ff;
}

.data-download {
    color: #007ff6;
}

@media screen and (min-width: 768px) {
    #thema-detail .section-container {
        padding-top: 202px;
    }

    .thema-detail__title {
        width: 32%;
        max-width: 383px;
    }

    .detail-container {
        padding-top: 80px;
        width: min(100%, 910px);
    }

    .detail__table-container:not(:first-child) {
        padding-top: 72px;
    }

    .table-title {
        font-size: 36px;
    }

    .thema th,
    .apply th {
        width: 27%;
        min-width: 209px;
    }
}

/* ====== 課題の提出 ====== */
/* .submit-wrapper {
  margin: 0 auto;
  text-align: center;
}

.submit__text {
  font-size: 13px;
  font-weight: 500;
  padding-top: 8px;
} */

/* @media screen and (min-width:768px) {
  .submit__text {
    font-size: 14px;
  }
} */

#submit .section-container {
    padding-top: 88px;
}

.submit__title {
    width: 58%;
    max-width: 224px;
    height: auto;
}

.subpage__section-title-wrapper p a {
    color: #007ff6;
}

.form-container {
    border: 2px solid #262626;
    border-radius: 16px;
    background-color: #fff;
    margin-top: 42px;
    width: 100%;
}

.submit-form {
    padding: 40px 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.form-group:not(:first-child) {
    padding-top: 24px;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 21%;
    min-width: 166px;
    height: auto;
    font-size: 14px;
    font-weight: 700;
}

.required {
    display: inline-block;
    background-color: #ff3e91;
    border-radius: 4px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 0 8px;
}

.any {
    display: inline-block;
    background-color: #999999;
    border-radius: 4px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 0 8px;
}

.form-inputarea {
    width: 100%;
}

.form-input {
    border: 1px solid #b6b6b6;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
}

.form-input--short {
    width: min(100%, 374px);
}

.form-input--long {
    width: 100%;
}

.example {
    font-size: 12px;
    color: #999999;
    padding-top: 6px;
}

.form__file {
    white-space: pre-line;
}

/* フォーム・・ファイルを選択 */
.form__file::file-selector-button {
    font-weight: regular;
    color: #007ff6;
    background: #fff;
    font-size: 14px;
    border: 1;
    border-radius: 12px;
    border-color: #007ff6;
    padding: 8px 16px;
    text-align: center;
    cursor: pointer;
}

.form__file::file-selector-button:hover {
    color: #0466c3;
    border-color: #0466c3;
}

.form__text {
    padding-bottom: 12px;
}

.submit-form button {
    margin: 40px auto 0;
    width: min(100%, 272px);
}

@media (any-hover: hover) {
    .submit-button:hover .chevron__lg::before {
        right: 12px;
    }

    .submit-button:hover .chevron__lg::after {
        right: 20px;
    }
}

@media screen and (min-width: 768px) {
    #submit .section-container {
        padding-top: 168px;
    }

    .submit__title {
        width: 32%;
        max-width: 380px;
    }

    .form-container {
        border: 3px solid #262626;
        border-radius: 24px;
        margin: 80px auto 0;
        width: min(100%, 910px);
    }

    .submit-form {
        padding: 56px;
    }

    .form-group {
        flex-direction: row;
    }

    .form-group:not(:first-child) {
        padding-top: 40px;
    }

    .required,
    .any {
        border-radius: 6px;
        font-size: 13px;
    }

    .form-input {
        border-radius: 12px;
        font-size: 16px;
    }

    .form-label {
        font-size: 16px;
        height: 49px;
    }

    .example {
        font-size: 13px;
        padding-top: 8px;
    }

    .form-label__file {
        height: auto;
    }

    .form-label__textarea {
        height: 29px;
    }

    .form__text {
        padding-bottom: 16px;
    }

    .submit-form button {
        margin: 80px auto 0;
        width: auto;
    }

    @media (any-hover: hover) {
        .submit-button:hover .chevron__lg::before {
            right: calc(5.52% - 4px);
        }

        .submit-button:hover .chevron__lg::after {
            right: calc(10.5% - 4px);
        }
    }
}

.privacy-policy__title {
    width: 92%;
    max-width: 424px;
    height: auto;
}

.policy__wrap {
    padding: 22px;
    background: #fff;
    display: grid;
    gap: 24px;
    border: 2px solid #262626;
    border-radius: 16px;
}

.policy__item,
.policyInner,
.policyInner--en {
    display: grid;
    gap: 4px;
}

.policy__heading {
    font-weight: 700;
}

.policy__indent {
    padding-left: 1em;
    text-indent: -1em;
}

.policyInner {
    padding-left: 1em;
}

.policyInner--en {
    padding-top: 4px;
}

@media screen and (min-width: 768px) {
    .privacy-policy__title {
        width: 55.25%;
        max-width: 663px;
    }

    .policy__wrap {
        padding: 48px;
        border-width: 3px;
        border-radius: 24px;
        gap: 40px;
    }

    .policy__heading {
        font-size: 22px;
    }

    .policy__item,
    .policyInner,
    .policyInner--en {
        gap: 8px;
    }
}

.thanks {
    padding-top: 106px;
}

.thanks .section-container {
    padding-top: 0;
}

.thanks-img {
    margin: 0 auto;
    width: 96.875%;
    max-width: 433px;
    height: auto;
}

.thanks-text {
    padding-top: 24px;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    width: 90%;
}

.thanks__link-btn {
    padding-top: 56px;
}

.thanks a {
    margin: 0 auto;
}
.thanks {
    min-height: 60svh;
}
@media screen and (min-width: 768px) {
    .thanks {
        padding-top: 202px;
    }

    .thanks-img {
        width: 56.416%;
        max-width: 677px;
    }

    .thanks-text {
        font-size: 18px;
        padding-top: 56px;
    }

    .thanks__link-btn {
        padding-top: 104px;
    }

    .thanks__link-btn a span::after {
        right: 10%;
    }
}

/*  */
#thema-detail .infoTable ul,
#thema-detail .infoTable ol {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 1.2em;
    list-style: none;
}
#thema-detail .infoTable li {
    position: relative;
    line-height: 140%;
    margin: unset;
    padding: unset;
    padding-left: 1em;
}
#thema-detail .infoTable ul li {
    padding-left: 1em;
}
#thema-detail .infoTable ol li {
    padding-left: 1.7em;
}
#thema-detail .infoTable td {
    padding: 2em 1em;
}
@media screen and (min-width: 768px) {
    #thema-detail .infoTable td {
        padding: 3em 2em;
    }
}

#thema-detail .infoTable ul li::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 0.5em;
    height: 0.5em;
}
#thema-detail .infoTable ol li::before {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    font-size: 1em;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    color: #fff;
    background: #5ac700;
}
#thema-detail .infoTable ol li:nth-child(1)::before {
    content: "1";
}
#thema-detail .infoTable ol li:nth-child(2)::before {
    content: "2";
}
#thema-detail .infoTable ol li:nth-child(3)::before {
    content: "3";
}
#thema-detail .infoTable ol li:nth-child(4)::before {
    content: "4";
}
#thema-detail .infoTable ol li:nth-child(5)::before {
    content: "5";
}
#thema-detail .infoTable ol li:nth-child(6)::before {
    content: "6";
}
#thema-detail .infoTable--1 th {
    font-weight: 700;
    color: #fff;
    background-color: #ff3e91;
}
#thema-detail .infoTable--1 li::before {
    background-color: #ff3e91;
}
#thema-detail .infoTable--1 td {
    background-color: #ffe8f2;
}

#thema-detail .infoTable--2 th {
    font-weight: 700;
    color: #fff;
    background-color: #007ff6;
}
#thema-detail .infoTable--2 li::before {
    background-color: #007ff6;
}
#thema-detail .infoTable--2 td {
    background-color: #deefff;
}

#thema-detail .infoTable--3 th {
    font-weight: 700;
    color: #fff;
    background-color: #5ac700;
}
#thema-detail .infoTable--3 li::before {
    background-color: #5ac700;
}
#thema-detail .infoTable--3 td {
    background-color: #edffde;
}
#thema-detail .infoTable .note {
    display: block;
    font-weight: 700;
    font-size: 12px;
}
#thema-detail .infoTable .link {
    font-weight: 700;
    color: #007ff6;
}
.submit-button {
    display: flex;
    flex-direction: column;
}
.btn-note {
    font-size: 11px;
    padding-bottom: 0.3em;
}
.submit-button .btn-text {
    margin: 0;
}
.submit-button {
    width: min(100%, 320px) !important;
    border-radius: 99em !important ;
}

.video {
    margin-top: 64px;
}
.video__frame {
    width: 100%;
    background-color: #eee;
}
.video__title {
    width: min(80%, 320px);
    margin-inline: auto;
    margin-bottom: 24px;
}
.video__text {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 150%;
}
.video__wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}
@media screen and (min-width: 768px) {
    .video {
        margin-top: 88px;
    }
    .video__wrapper {
        row-gap: 40px;
    }
    .video__title {
        margin-bottom: 40px;
    }
    .video__text {
        display: flex;
        flex-direction: column;
        row-gap: 1.2em;
        font-size: 16px;
        max-width: 800px;
        margin-inline: auto;
    }
}