@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: clamp(5rem, 4.6rem + 2vw, 7rem);
    --space-inner-md: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    --space-inner-sm-fluid: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    --space-inner-sm-fixed: 1.5rem;

    --font-size-body: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);

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

    --line-height-sm: 1.5;
    --line-height-lg: 2;

    --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;
    --hover-spacing: 0.125rem;

    interpolate-size: allow-keywords;
}

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

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

    .cta {
        width: 100%;
        max-width: 400px;
    }

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

    .header {
        padding: clamp(0.5rem, 0.229rem + 1.2vw, 1rem) 1rem;
    }

    .header_inner {
        height: auto;
        padding: 0;
    }

    .header_title {
        width: 50%;
        max-width: 300px;
    }

    .header_title--logo {
        width: 100%;
    }

    .header_title--text {
        display: none;
    }

    .sp-nav {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .login {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: auto;
        height: 3rem;
        color: var(--color-primary);
    }

    .login_inner {
        width: 2.5rem;
        height: 2rem;
    }

    .login_icon {
        width: 100%;
        height: 100%;
    }

    .sp-nav_text {
        display: block;
        font-size: clamp(0.75rem, 0.614rem + 0.6vw, 1rem);
        font-weight: 800;
        line-height: 0.8;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: auto;
        height: 3rem;
        cursor: pointer;
        z-index: 999;
    }

    .hamburger_inner {
        position: relative;
        margin-block: 0.25rem;
        width: 2.25rem;
        height: 1.5rem;
    }

    .hamburger_line {
        position: absolute;
        left: 0;
        width: 100%;
        height: 0.1875rem;
        border-radius: 10px;
        background: var(--color-text);
        transition: transform 0.5s, opacity 0.3s;
    }

    .hamburger_line:nth-of-type(1) {
        top: 0;
    }

    .hamburger_line:nth-of-type(2) {
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger_line:nth-of-type(3) {
        bottom: 0;
    }

    .hamburger.open .hamburger_line:nth-of-type(1) {
        transform: translateY(10.5px) rotate(40deg);
    }

    .hamburger.open .hamburger_line:nth-of-type(2) {
        opacity: 0;
    }

    .hamburger.open .hamburger_line:nth-of-type(3) {
        transform: translateY(-10.5px) rotate(-40deg);
    }

    .sp-nav_text--close {
        display: none;
    }

    .hamburger.open .sp-nav_text--menu {
        display: none;
    }

    .hamburger.open .sp-nav_text--close {
        display: block;
    }

    .header_nav {
        position: fixed;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: clamp(1.25rem, 0.682rem + 2.84vw, 2.5rem);
        top: 0;
        right: 0;
        width: 400px;
        height: 100svh;
        padding-inline: 2rem;
        border-radius: var(--radius-button) 0 0 var(--radius-button);
        background: rgb(252 252 252 / 0.8);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.4s ease;
        z-index: 998;
    }

    .header_nav.open {
        transform: translateX(0);
    }

    .sp-header_wrapper {
        flex: 0;
        width: 100%;
    }

    .header_list {
        flex: 0;
        flex-direction: column;
        margin-top: var(--header-height);
    }

    .header_list-item {
        width: 100%;
        text-align: left;
    }

    .header_list-link {
        display: block;
        padding: 0.75rem 0.5rem 0.75rem 0;
        font-size: clamp(1rem, 0.886rem + 0.57vw, 1.25rem);
        font-weight: 700;
        color: var(--color-primary);
    }

    .header_login {
        display: none;
    }

    .sp-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(0.5rem, 0.273rem + 1.14vw, 1rem);
        width: 100%;
        margin-top: var(--space-inner-md);
    }

    .sp-cta_link {
        font-size: clamp(1rem, 0.886rem + 0.57vw, 1.25rem);
    }

    .sp-cta_link--regist {
        border-color: var(--hover-cta);
        background: var(--color-cta);
    }

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

    .sp-menu_foot {
        display: block;
        width: 80%;
        margin-inline: auto;
        margin-bottom: var(--header-height);
    }

    .sp-menu_foot-logo {
        width: 100%;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgb(8, 65, 120, 0.8);
        opacity: 0;
        transition: opacity 0.2s ease;
        cursor: pointer;
        pointer-events: none;
        z-index: 997;
    }

    .overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

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

    .float-cta {
        display: none;
    }

    .float-back {
        display: none;
    }

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

    .footer_inner {
        flex-direction: column;
        gap: 2rem;
    }

    .footer_logo {
        max-width: 300px;
        width: 60%;
    }

    .footer_logo-img {
        width: 100%;
    }

    .footer_nav {
        width: 90%;
    }

    .footer_list {
        justify-content: center;
        gap: 1.5rem;
    }

    /* ============================
    * index
    * ========================= */

    .top {
        padding-top: clamp(5rem, 4rem + 5vw, 10rem);
    }

    .top::before {
        transform: translateY(-5vw) rotate(-90deg);
    }

    .top::after {
        width: clamp(25rem, 10.687rem + 45.8vw, 40rem);
        transform: translate(1vw, 10%);
    }

    /* ============================
    * about
    * ========================= */

    .about-features {
        padding-block: 1rem 3rem;
    }

    /* ============================
    * affiliate
    * ========================= */

    .explain-area::before,
    .explain-area::after {
        display: none;
    }

    .explain_contents {
        padding-bottom: 0;
    }

    .explain_contents:nth-of-type(1)::after,
    .explain_contents:nth-of-type(2)::after {
        content: "";
        display: block;
        margin-inline: auto;
        margin-top: var(--space-inner-sm-fluid);
        z-index: 0;
    }

    .explain_contents:nth-of-type(1)::after {
        width: clamp(9.375rem, 2.232rem + 11.16vw, 15.625rem);
        aspect-ratio: 300 / 369;
        background: url(/images/about_right.webp) center / contain no-repeat;
    }

    .explain_contents:nth-of-type(2)::after {
        width: clamp(8.125rem, 1.696rem + 10.04vw, 13.75rem);
        aspect-ratio: 300 / 372;
        background: url(/images/about_left.webp) center / contain no-repeat;
    }

    .flow_item-text {
        font-size: clamp(0.625rem, 0.029rem + 1.91vw, 1.25rem);
    }
}

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

    /* ============================
    * index
    * ========================= */

    .top::before {
        width: 130%;
        transform: translate(-10vw, -10vw) rotate(-90deg);
    }

    .top-highlight_inner {
        flex-direction: column;
    }

    .top-highlight_title {
        font-size: clamp(1.5rem, 0.786rem + 3.57vw, 2.5rem);
        text-align: left;
    }

    .top-highlight_text {
        font-size: 0.875rem;
        text-align: left;
    }

    .recommend_list {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .strengths_list {
        grid-template-columns: 1fr;
    }

    .strengths_item.zoom--query {
        transition: transform 0.5s, opacity 1s;
    }

    .strengths_visual {
        width: 40%;
    }

    /* ============================
    * about
    * ========================= */

    .about_text {
        font-size: 0.875rem;
    }

    .about-features {
        align-items: flex-end;
        padding-block: var(--space-section-sm-fluid);
    }

    .about-feature {
        min-width: 0;
    }

    .about-feature::after {
        display: none;
    }

    .about-feature--perspective {
        padding-top: 0;
    }

    .about-feature_name::after {
        color: var(--color-secondary);
    }

    .about-feature_en {
        font-size: clamp(1.25rem, 0.893rem + 1.79vw, 1.75rem);
        background: linear-gradient(to right bottom, var(--color-accent) 0%, var(--color-secondary) 50%, var(--color-primary) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .about-feature_text {
        font-size: 0.875rem;
    }

    .about-detail_img {
        width: 50%;
    }

    /* ============================
    * affiliate
    * ========================= */

    .structure_item {
        gap: var(--space-inner-sm-fluid);
    }

    /* ============================
    * faq
    * ========================= */

    .faq_header-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        row-gap: 1rem;
        width: 80%;
        margin-inline: auto;
    }

    .faq_header-link {
        justify-content: space-between;
        padding: 0.25rem;
    }

    .faq_header-link-text {
        font-size: 0.875rem;
    }

    /* ============================
    * step
    * ========================= */

    .step_container {
        flex-direction: column;
        align-items: normal;
    }

    .step_container:first-of-type {
        gap: var(--space-inner-md);
    }

    .step_left-wrapper {
        margin-inline: auto;
    }

    .step_action--container,
    .step_action--bottom {
        width: 100%;
        margin-inline: auto;
    }

    .step_link {
        margin-inline: auto;
    }

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

    /* ============================
    * advertise
    * ========================= */

    .advertise_intro::after {
        top: 3rem;
        right: 1.5rem;
        bottom: 0;
        width: 12rem;
        opacity: 0.5;
        z-index: -1;
    }
}


@media screen and (max-width: 500px) {

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

    .title {
        font-size: clamp(1.5rem, 1.056rem + 2.22vw, 1.75rem);
        font-weight: 800;
    }

    .link {
        width: 90%;
        max-width: none;
    }

    .cta {
        width: 90%;
        max-width: none;
        margin-inline: auto;
        padding: 1.5rem 1rem;
    }

    .cta::before {
        top: -0.375rem;
        font-size: clamp(0.5rem, 0.056rem + 2.22vw, 0.75rem);
    }

    .layout-inner {
        padding-inline: var(--space-inner-sm-fixed);
    }

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

    .header_inner.layout-inner {
        padding-inline: 0;
    }

    .header_nav {
        width: 70%;
    }

    .sp-cta_link {
        width: 100%;
    }

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

    .footer_sns-text {
        font-size: 0.625rem;
    }

    .footer_inner {
        padding-block: 4rem;
    }

    .footer_list {
        flex-direction: column;
    }

    /* ============================
    * index
    * ========================= */

    .top::before {
        display: none;
    }

    .top::after {
        top: 0;
        left: 50%;
        right: auto;
        transform: translate(-25%, 30%);
    }

    .top_sub-copy {
        font-weight: 400;
    }

    .top_action {
        margin-inline: auto;
        margin-top: 10rem;
    }

    .top-highlight_title {
        font-size: 1.25rem;
    }

    .sp-top-highlight_title {
        display: block;
        font-size: 2.25rem;
    }

    /* recommend */
    .recommend {
        background-position: 70%;
    }

    .recommend_inner.layout-inner {
        padding-inline: 1rem;
    }

    /* strengths */
    .strengths_label {
        font-size: 0.625rem;
    }

    .strengths_heading {
        font-size: 1.25rem;
        letter-spacing: 0.0625rem;
    }

    .strengths_text {
        margin-top: 1rem;
        font-size: 0.875rem;
        font-weight: 400;
    }

    /* top-faq */
    .faq_summary {
        padding-inline: 1rem;
    }

    .faq_answer {
        padding-inline: 1rem;
    }

    /* ============================
    * notice
    * ========================= */

    .pagination {
        gap: 1rem;
    }

    .pagination_arrow {
        gap: 1rem;
    }

    .pagination_number {
        gap: 0.5rem;
    }

    /* ============================
    * about
    * ========================= */

    .about-features {
        flex-wrap: wrap;
        padding-bottom: 0;
    }

    .about-feature {
        flex: 0 1 calc((100% - 1rem * 2) / 2);
    }

    .about-feature_name {
        text-align: center;
    }

    .about-feature_text {
        margin-top: 0.25rem;
        font-size: 0.625rem;
    }

    .about-detail {
        padding: var(--space-section-sm-fluid);
    }

    .about-detail_text {
        font-size: 0.875rem;
    }

    .about_action--link {
    display: block;
    margin-top: var(--space-section-sm-fluid);
    text-align: center;
}

    /* ============================
    * affiliate
    * ========================= */

    .structure_contents {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .structure_item {
        gap: var(--space-inner-md);
    }

    .structure_item:not(:last-of-type)::after {
        top: auto;
        right: auto;
        bottom: calc(var(--space-section-md) / -2 - (clamp(2rem, 0.857rem + 1.79vw, 3rem) / 2));
        left: 50%;
        transform: translate(-50%, 0) rotate(90deg);
    }

    .flow_container {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: 1fr;
        margin-top: var(--space-section-md);
    }

    .flow_item {
        width: 80%;
        margin-inline: auto;
    }

    .flow_item::after {
        aspect-ratio: 729 / 238;
        mask-image: url(/images/flow_arrow-sp.svg);
    }

    .flow_item:nth-of-type(1)::before {
        position: absolute;
        top: 0;
        width: 100%;
        height: 3rem;
    }

    .flow_item-text {
        font-size: 0.875rem;
        font-weight: 500;
        text-align: center;
    }

    .flow_item:not(:first-of-type) .flow_item-text {
        margin-top: 0.1875rem;
    }

    .flow_annotation {
        text-align: center;
    }

    .flow_message-heading {
        font-size: 1rem;
    }

    .flow_message-text {
        text-align: left;
    }

    /* ============================
    * faq
    * ========================= */

    .faq_header-list {
        width: 100%;
    }

    .faq_heading {
        text-align: center;
    }

    /* ============================
    * step
    * ========================= */

    .step_container {
        gap: var(--space-inner-md);
    }

    .step_container::before {
        right: auto;
        left: 50%;
        width: 30%;
        transform: translateX(-50%) translateY(-50%);
    }

    .step_heading {
        font-size: 1.375rem;
        text-align: center;
    }

    .step_container:first-of-type .step_image {
        width: 80%;
    }

    .step_message-text {
        text-align: left;
    }

    .step_action--bottom {
        margin-top: var(--space-section-sm-fixed);
    }

    /* ============================
    * advertise
    * ========================= */

    .advertise_intro::after {
        top: 4rem;
        right: 1rem;
        bottom: 0;
        opacity: 0.5;
        z-index: -1;
    }

    .advertise_title {
        text-align: left;
    }

    .advertise_copy {
        font-size: 0.75rem;
        text-align: left;
    }

    .advertise_intro .advertise_action {
        margin-top: var(--space-section-lg);
    }

    .advertise_point-heading::before {
        top: 50%;
        right: 0;
        left: 0;
        width: 3rem;
        aspect-ratio: 1 / 1;
        mask-image: url(/images/check.svg);
        mask-position: center;
        mask-size: contain;
        mask-repeat: no-repeat;
        background: var(--color-secondary-200);
        transform: translateY(-50%);
        z-index: -1;
    }

}

@media screen and (max-width: 450px) {
    /* ============================
    * コンポーネント
    * ========================= */

    .button {
        width: 100%;
    }

    /* ============================
    * index
    * ========================= */

    .top-highlight_text {
        line-height: var(--line-height-sm);
    }

    /* ============================
    * notice
    * ========================= */

    .notice_item {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .notice_item-text,
    .notice_item-link {
        margin-top: 0.5rem;
    }

    /* ============================
    * about
    * ========================= */

    .about-detail_img,
    .about-detail_text {
        margin-block: var(--space-inner-sm-fluid);
    }

    /* ============================
    * affiliate
    * ========================= */

    .affiliate_title {
        font-size: 1.25rem;
    }

    /* ============================
    * step
    * ========================= */

    .step_container {
        padding-inline: var(--space-section-sm-fluid);
    }

    .step_cta--container {
        width: 100%;
    }

}