@charset "UTF-8";

/* ============================
* 設定
* ========================= */

:root {
    --color-text: #2d2d2d;
    --color-white: #fcfcfc;
    --color-white-rgb: rgb(252, 252, 252);
    --color-primary: #0D66BC;
    --color-primary-0: #E7F0F8;
    --color-primary-200: #90b9e0;
    --color-primary-300: #649dd4;
    --color-primary-400: #3982c8;
    --color-primary-600: #0b549a;
    --color-primary-700: #084178;
    --color-secondary: #66BAFF;
    --color-secondary-200: #b9dfff;
    --color-bg: #A5A5A5;
    --color-bg-100: #e6e6e6;
    --color-bg-300: #c5c5c5;
    --color-cta: #FC4F79;
    --color-accent: #FFF6A4;

    --space-section-lg: clamp(5rem, 3.239rem + 5.63vw, 10rem);
    --space-section-md: clamp(2.5rem, 1.62rem + 2.82vw, 5rem);
    --space-section-sm-fluid: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
    --space-section-sm-fixed: 3rem;

    --space-inner-lg: 3rem;
    --space-inner-md: clamp(1rem, 0.648rem + 1.13vw, 2rem);
    --space-inner-sm: 1.5rem;

    --font-size-heading: clamp(1.5rem, 1.214rem + 0.45vw, 1.75rem);

    --letter-spacing-heading: 0.25rem;
    --letter-spacing-body: 0.125rem;

    --radius-cta: 20px;
    --radius-button: 50px;

    --box-shadow-low: 0px 5px 35px -12px rgba(0, 0, 0, 0.35);
    --box-shadow-high: 0px 5px 35px -10px rgb(13 102 188 / 0.5);

    --hover-primary: oklch(from var(--color-primary) calc(l - 0.08) c h);
    --hover-cta: oklch(from var(--color-cta) calc(l - 0.08) c h);
    --hover-underline: underline;

    interpolate-size: allow-keywords;
}

html {
    color: var(--color-text);
    font-family: "Noto Sans JP", 'ヒラギノ角ゴ ProN W3', 'Helvetica', 'Arial', sans-serif;
    font-feature-settings: "palt";
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    background: var(--color-white);
}

img {
    display: block;
    width: 100%;
    height: auto;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.wbr {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.br::before {
    content: "\A";
    white-space: pre;
}

.bold {
    font-weight: 700;
}

/* ============================
* コンポーネント
* ========================= */

/* inner */
.layout-inner {
    margin-inline: auto;
    padding-inline: 2rem;
}

/* h2 */
.title {
    font-size: clamp(1.75rem, 1.574rem + 0.56vw, 2.25rem);
    font-weight: 800;
    text-align: center;
}

/* link */
.link {
    position: relative;
    display: block;
    width: clamp(20rem, 18.239rem + 5.63vw, 25rem);
    padding: 1rem 0;
    font-size: clamp(1rem, 0.912rem + 0.28vw, 1.25rem);
    font-weight: 700;
    text-align: center;
    border-radius: var(--radius-button);
    cursor: pointer;
    z-index: 0;
}

.link::after {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 0.75rem;
    width: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    height: 1rem;
    mask-image: url(/images/button_arrow.svg);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    background: var(--color-primary);
    transform: translateY(-50%);
}

.link--primary {
    margin-inline: auto;
    margin-top: var(--space-section-sm-fluid);
    border: solid 2px var(--color-primary);
}

/* cta */
.cta {
    position: relative;
    display: block;
    width: 25%;
    padding: 1.5rem 1rem;
    font-size: clamp(1.25rem, 1.074rem + 0.56vw, 1.75rem);
    font-weight: 700;
    color: var(--color-white);
    text-align: center;
    border-radius: var(--radius-cta);
    background: var(--color-cta);
    transition: background 0.2s ease;
    z-index: 1;
}

.cta::before {
    content: "今すぐ登録！";
    display: block;
    position: absolute;
    top: -0.625rem;
    left: 50%;
    width: 40%;
    padding: 0.125rem 1rem;
    font-size: clamp(0.625rem, 0.575rem + 0.25vw, 0.875rem);
    color: var(--color-text);
    letter-spacing: var(--letter-spacing-body);
    border-radius: 5px;
    background: var(--color-white);
    transform: translateX(-50%);
}

.cta::after {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 0.875rem;
    width: 1.5rem;
    height: 1rem;
    mask-image: url(/images/button_arrow.svg);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    background: var(--color-white);
    transform: translateY(-50%);
}

.cta:hover {
    background: var(--hover-cta);
}

/* marker */
.marker {
    position: relative;
    z-index: 0;
}

.marker::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
    background: var(--color-accent);
    z-index: -1;
}

/* ============================
* header
* ========================= */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.25rem 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    z-index: 9999;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: 1500px;
    margin-inline: auto;
    padding-inline: min(2rem, calc((1532px - 100vw)/2));
}

.header__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 250px;
}

.header__title-logo {
    width: clamp(12.5rem, 8.929rem + 5.58vw, 15.625rem);
}

.header__title-text {
    margin-top: 0.25rem;
    font-size: clamp(0.375rem, 0.299rem + 0.35vw, 0.625rem);
    font-weight: 500;
}

.sp-nav {
    display: none;
}

.header__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 75%;
}

.header__list {
    flex: 3.5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    row-gap: 0.5rem;
    width: 100%;
}

.header__list-item {
    text-align: center;
}

.header__list-link {
    display: block;
    padding: 0.5rem 1rem;
    font-size: clamp(0.75rem, 0.481rem + 0.42vw, 0.875rem);
    font-weight: 700;
}

.header__login {
    flex: 1;
    text-align: center;
}

.header__login-text {
    font-size: clamp(0.625rem, 0.125rem + 0.8vw, 0.875rem);
    font-weight: 600;
}

.material-symbols-outlined.header__login-icon {
    font-size: clamp(1rem, 0.848rem + 0.7vw, 1.5rem);
    vertical-align: -7px;
}

.header-login__link {
    width: auto;
    margin-top: 0.25rem;
    padding: 0.75rem 0;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-primary);
}

.header-login__link.link::after {
    width: clamp(0.75rem, 0.179rem + 0.89vw, 1.25rem);
    background: var(--color-white);
}

.header-login__link:hover {
    background: var(--hover-primary);
}

.sp-cta {
    display: none;
}

.sp-menu {
    display: none;
}

/* ============================
* float-cta
* ========================= */

.float {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    isolation: isolate;
}

.float-cta,
.float-back {
    position: absolute;
    display: flex;
    width: clamp(2.5rem, 0.786rem + 2.68vw, 4rem);
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
    z-index: 1;
    cursor: pointer;
    pointer-events: auto;
}

.float.is-show .float-cta,
.float.is-show .float-back {
    opacity: 1;
    visibility: visible;
}

.float-cta {
    flex-direction: column;
    gap: 1rem;
    top: 50%;
    left: 3%;
    transform: translateY(-50%);
}

.float-cta__regist {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.5rem 0 1rem;
    border-radius: var(--radius-button);
    background: var(--color-cta);
    box-shadow: var(--box-shadow-low);
}

.float-cta__regist.cta::before,
.float-cta__regist.cta::after {
    display: none;
}

.material-symbols-outlined.float-cta__icon {
    padding: clamp(0.25rem, -0.036rem + 0.45vw, 0.5rem);
    font-size: clamp(1rem, -0.143rem + 1.79vw, 2rem);
    color: var(--color-cta);
    border-radius: 50%;
    background: var(--color-white);
}

.float-cta__text {
    writing-mode: vertical-rl;
    font-size: clamp(0.875rem, 0.446rem + 0.67vw, 1.25rem);
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: var(--letter-spacing-heading);
}

.float-cta__link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(2.5rem, 0.786rem + 2.68vw, 4rem);
    height: clamp(2.5rem, 0.786rem + 2.68vw, 4rem);
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: var(--box-shadow-low);
}

.float-cta__img {
    width: 50%;
}

.float-cta__img--note {
    width: 70%;
}

.float-back {
    justify-content: center;
    align-items: center;
    padding: clamp(0.25rem, -0.036rem + 0.45vw, 0.5rem);
    right: 3%;
    bottom: 3%;
    width: clamp(3rem, 1.857rem + 1.79vw, 4rem);
    height: clamp(3rem, 1.857rem + 1.79vw, 4rem);
    border-radius: var(--radius-button);
    background: var(--color-white);
    box-shadow: var(--box-shadow-low);
}

.float-back__img {
    width: 70%;
}

/* ============================
* breadcrumb
* ========================= */

.breadcrumb {
    max-width: 1200px;
    margin-top: var(--header-height);
}

.breadcrumb__item {
    display: inline;
    font-size: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
    font-weight: 500;
}

.breadcrumb__item::after {
    content: ">";
    padding: 0 0.5rem;
    color: var(--color-bg);
}

.breadcrumb__item:last-child::after {
    content: "";
}

.breadcrumb__link {
    color: var(--color-primary);
}

.breadcrumb__link:hover {
    text-decoration: var(--hover-underline);
}


/* ============================
* footer
* ========================= */

.footer {
    position: relative;
    width: 100%;
    padding-block: var(--space-section-md);
    background: linear-gradient(transparent, #0d66bc);
    z-index: 0;
}

.footer.noise-full::after {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;

    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
    mask-repeat: no-repeat;
    mask-size: cover;
}

.footer__sns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: auto;
    margin-inline: auto;
}

.footer__sns-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary-700);
}

.footer__sns-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: clamp(6rem, 5.2rem + 4vw, 10rem);
}

.footer__sns-link {
    flex: 1;
    display: block;
    width: auto;
    height: clamp(3rem, 2.9rem + 0.5vw, 3.5rem);
}

.footer__sns-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1500px;
    margin-inline: auto;
    padding-block: 6rem 4rem;
}

.footer__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 250px;
}

.footer__logo-img {
    width: clamp(12.5rem, 8.929rem + 5.58vw, 15.625rem);
}

.footer__nav {
    width: 65%;
}

.footer__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer__list-item {
    text-align: center;
}

.footer__list-link {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
}

.footer__copy {
    font-size: 0.625rem;
    color: var(--color-white);
    text-align: center;
}

/* ============================
* main - top
* ========================= */

.main {
    height: 100%;
}

.top {
    position: relative;
    width: 100%;
    padding-top: 12rem;
    overflow-x: hidden;
}

.top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: url(/images/vvv.svg) center / contain no-repeat;
    transform: translateY(-25vw) rotate(-90deg);
    z-index: -1;
}

.top::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(40rem, 22.857rem + 26.79vw, 55rem);
    aspect-ratio: 1 / 1;
    background: url(/images/logo.svg) center / contain no-repeat;
    transform: translate(-5vw, -1vw);
    pointer-events: none;
    z-index: -1;
}

.top__inner {
    max-width: 1400px;
    position: relative;
    z-index: 1;
}

.top__title {
    font-size: clamp(2.125rem, 1.707rem + 1.91vw, 4rem);
    font-weight: 800;
    letter-spacing: var(--letter-spacing-heading);
}

.marker--top.marker::after {
    bottom: 0.5rem;
}

.top__text {
    margin-top: var(--space-inner-sm);
    font-size: clamp(0.75rem, 0.662rem + 0.28vw, 1rem);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-body);
}

.top__cta {
    width: 40%;
    margin-top: var(--space-section-md);
    padding-block: 2rem;
    box-shadow: var(--box-shadow-high);
}

.top__highlight {
    position: relative;
    width: 100%;
    padding-block: var(--space-section-lg);
    z-index: 0;
}

.highlight__inner {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    max-width: 900px;
}

.top__highlight-title {
    display: block;
    font-size: clamp(2rem, 1.648rem + 1.13vw, 3rem);
    font-weight: 800;
    font-style: italic;
    color: var(--color-primary);
    text-align: center;
}

.top__highlight-copy {
    margin-top: var(--space-inner-lg);
}

.top__highlight-text {
    font-size: 1rem;
    font-weight: 500;
    line-height: 2;
    text-align: center;
    letter-spacing: var(--letter-spacing-body);
}

.top__highlight-text:not(:first-child) {
    margin-top: 2rem;
}

.top__highlight-cta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: var(--space-section-md);
}

.top__highlight-link {
    width: 20rem;
    padding: 1rem 0;
    font-weight: 700;
    border: solid 2px var(--color-primary);
    background: var(--color-white);
}

.top__highlight-link::after {
    width: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    background: var(--color-primary);
}

.top__highlight-link:hover {
}

/* ============================
* main - recommend
* ========================= */

.recommend {
    position: relative;
    padding-block: var(--space-section-lg);
    border-radius: var(--radius-button) var(--radius-button) 0 0;
    background: linear-gradient(to right bottom, var(--color-secondary) 0%, var(--color-primary) 100%);
    box-shadow: 0px -15px 35px -15px rgba(13 102 188 / 0.5);
}

.recommend__inner {
    max-width: 1200px;
}

.recommend__contents {
    text-align: center;
}

.recommend__title {
    color: var(--color-white);
}

.recommend__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: 100%;
    margin-inline: auto;
    margin-top: var(--space-section-md);
    text-align: left;
}

.recommend__item {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: var(--radius-button);
    background: var(--color-white);
}

.recommend__item-icon {
    font-variation-settings: 'FILL' 1;
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
    color: var(--color-primary-600);
}

.recommend__item-text {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    letter-spacing: var(--letter-spacing-body);
}

.marker--recommend.marker::after {
    bottom: 0;
    height: 30%;
    background: var(--color-accent);
    z-index: -1;
}

.recommend__cta {
    width: 40%;
    margin-inline: auto;
    margin-top: var(--space-section-md);
    box-shadow: var(--box-shadow-high);
}

.recommend__cta.cta::before {
    display: none;
}

.recommend__cta-bottom {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-white);
}

.recommend__cta-bottom:hover {
    text-decoration: var(--hover-underline);
}

/* ============================
* main - strengths
* ========================= */

.strengths {
    position: relative;
    z-index: 0;
}

.strengths::after {
    position: absolute;
    content: "";
    bottom: 0;
    width: 100%;
    height: 10rem;
    background: var(--color-bg-100);
    z-index: -1;
}

.strengths__wrapper {
    padding-block: var(--space-section-lg);
    border-radius: 0 0 var(--radius-button) var(--radius-button);
    background: var(--color-secondary-200);
    box-shadow: 0px 15px 35px -15px rgba(13 102 188 / 0.5);
}

.strengths__inner {
    max-width: 1200px;
}

.strengths__title {
    color: var(--color-primary-700);
}

.strengths__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-inner-md);
    margin-top: var(--space-section-md);
}

.strengths__item {
    display: flex;
    flex-direction: column;
    padding: var(--space-section-sm-fluid);
    border-radius: var(--radius-cta);
    background: var(--color-white);
    box-shadow: var(--box-shadow-high);
}

.strengths__label {
    font-size: 0.875rem;
    color: var(--color-primary);
}

.strengths__label::before {
    font-family: 'Material Symbols Outlined';
    content: "\e697";
    font-variation-settings: 'FILL' 1;
    font-size: 1.5rem;
    vertical-align: middle;
}

.strengths__visual {
    width: 50%;
    margin-inline: auto;
}

.strengths__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.strengths__heading {
    font-size: var(--font-size-heading);
    font-weight: 700;
    color: var(--color-primary-700);
}

.strengths__text {
    margin-top: var(--space-inner-sm);
    font-weight: 500;
}

.strengths__link {
    margin-inline: auto;
    margin-top: var(--space-section-sm-fluid);
    border: solid 2px var(--color-primary);
}

.strengths__link:hover {
}


/* ============================
* main - top-faq
* ========================= */

.top-faq {
    padding-block: var(--space-section-lg);
    background: var(--color-bg-100);
}

.top-faq__inner {
    max-width: 1200px;
}

.top-faq__title {
    color: var(--color-text);
}

.top-faq__contents {
    margin-top: var(--space-section-md);
}

.top-faq__accordion {
    width: 100%;
    font-size: clamp(1rem, 0.714rem + 0.45vw, 1.25rem);
    border-radius: var(--radius-cta);
    background: var(--color-white);
}

.top-faq__accordion::details-content {
    height: 0;
    border-top: 0px solid rgb(165 165 165 / 0);
    overflow: clip;
    transition:
        height 0.4s ease,
        border 0.3s ease,
        content-visibility 400ms ease allow-discrete;
}

.top-faq__accordion[open]::details-content {
    height: auto;
    border-top: 1px solid rgb(165 165 165 / .5);
}

.top-faq__accordion+.top-faq__accordion {
    margin-top: var(--space-inner-sm);
}

.top-faq__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-inner-sm);
    padding-inline: 2rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.top-faq__summary::marker,
.top-faq__summary::-webkit-details-marker {
    display: none;
}

.top-faq__summary::after {
    content: "\e145";
    display: block;
    font-family: 'Material Symbols Outlined';
    font-size: 2rem;
    color: var(--color-cta);
    transition: color 0.2s;
}

.top-faq__accordion[open] .top-faq__summary::after {
    content: "\e15b";
    color: var(--color-text);
}

.top-faq__question {
    display: flex;
    align-items: center;
    gap: var(--space-inner-md);
    flex: 1;
    min-width: 0;
}

.top-faq__question::before {
    content: "";
    display: block;
    width: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    min-width: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    height: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    mask-image: url(/images/qa_q.svg);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    background: var(--color-primary);
}

.top-faq__answer {
    display: flex;
    align-items: center;
    gap: var(--space-inner-md);
    padding-block: var(--space-inner-sm);
    padding-inline: 2rem;
}

.top-faq__answer::before {
    content: "";
    display: block;
    width: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    min-width: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    height: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    mask-image: url(/images/qa_a.svg);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    background: var(--color-primary-200);
}

.top-faq__link {
    margin-inline: auto;
    margin-top: var(--space-section-sm-fluid);
    border: solid 2px var(--color-primary);
}

/* ============================
* main - top-notice / notice
* ========================= */

.top-notice {
    padding-block: var(--space-section-lg);
}

.top-notice__inner {
    max-width: 768px;
}

.top-notice__title {
    color: var(--color-text);
}

.top-notice__contents {
    margin-top: var(--space-section-md);
}

.top-notice__link {
    margin-inline: auto;
    margin-top: var(--space-section-sm-fluid);
    border: solid 2px var(--color-primary);
}

.notice {
    padding-block: var(--space-section-sm-fluid) var(--space-section-lg);
}

.notice__inner {
    max-width: 768px;
}

.notice__title {
    color: var(--color-text);
}

.notice__contents {
    margin-top: var(--space-section-md);
}

.notice__item {
    padding-block: var(--space-inner-sm);
    padding-inline: 1rem;
    border-top: solid 1px var(--color-bg);
}

.notice__item:last-of-type {
    border-bottom: solid 1px var(--color-bg);
}

.notice__item {
    display: grid;
    grid-template-columns: clamp(8rem, 7.296rem + 2.25vw, 10rem) 1fr;
    align-items: center;
    font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
}

.notice__item-data {
    margin-right: var(--space-inner-md);
    color: var(--color-primary-700);
}

.notice__item-text {
    font-weight: 500;
}


/* ============================
* メディアクエリ
* ========================= */