@charset "utf-8";

:root {
    --color-purple: #411b31;
    --color-dark-gray: #463b3b;
    --color-white: #fff;
    --color-light-gray: #f9f9f9;
    --color-light-purple: #f3ebf0;
    --letter-spacing: 0.05em;
    --zIndex-headerLogo: 150;
    --zIndex-menu: 100;
    --zIndex-hamburger: 150;
    --color-outline: #737373;
}
@media (min-width: 769px) {
    :root {
        --inner: 1080px;
    }
    [data-disp-only]:not([data-disp-only~='pc']) {
        display: none !important;
    }
    @media (hover: hover) {
        .hover_opacity {
            transition: opacity 0.3s;
        }
        .hover_opacity:hover {
            opacity: 0.6;
        }
    }
}
:focus-visible {
    outline: 1px solid var(--color-outline);
    outline-offset: -1px;
}
@media (max-width: 768px) {
    [data-disp-only]:not([data-disp-only~='sp']) {
        display: none !important;
    }
}
html {
    scrollbar-gutter: stable;
}

@font-face {
    font-family: 'Zen Old Mincho';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/Zen_Old_Mincho/ZenOldMincho-Medium.ttf) format('TrueType');
}
@font-face {
    font-family: 'Zen Kaku Gothic New';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.ttf) format('TrueType');
}

body {
    overflow-wrap: anywhere;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--color-dark-gray);
}
* {
    letter-spacing: var(--letter-spacing);
}

img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}
button {
    color: inherit;
    cursor: pointer;
}

.font_mincho {
    font-family: 'Zen Old Mincho', serif;
    font-weight: 500;
    font-style: normal;
}

.wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    min-height: 100vh;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 10;
}
.header_left {
    display: flex;
}
.header_left_inner {
    display: flex;
    line-height: 1;
}
.header_right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 40px;
}
.btn_logout {
    padding: 15px 40px;
    border: 1px solid var(--color-purple);
    border-radius: 48px;
    line-height: 1;
}
.header_menu_btn {
    background-color: var(--color-purple);
    border: none;
    position: absolute;
    top: 20px;
    right: 20px;
    transition: background-color 0.4s ease;
}
.header_menu_line {
    background-color: var(--color-white);
    width: 16px;
    height: 1px;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    transition: transform 0.4s ease;
}
.header_menu_line:nth-child(1) {
    top: 19px;
}
.header_menu_line:nth-child(2) {
    top: 24px;
}
.header_menu_btn.is_active .header_menu_line:nth-child(1) {
    animation: menu_line_1 0.75s forwards;
}
.header_menu_btn.is_active .header_menu_line:nth-child(2) {
    animation: menu_line_2 0.75s forwards;
}
@keyframes menu_line_1 {
    0% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(2px) rotate(0);
    }
    100% {
        transform: translateY(2px) rotate(40deg);
    }
}
@keyframes menu_line_2 {
    0% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-3px) rotate(0);
    }
    100% {
        transform: translateY(-3px) rotate(-40deg);
    }
}

.overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(243, 235, 240, 0.9) 0%, rgba(243, 235, 240, 0) 100%);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    z-index: 2;
}
@media (min-width: 769px) {
    .header {
        padding: 40px 40px 64px 40px;
    }
    .header_left {
        height: 46px;
    }
    .header_left_inner {
        gap: 40px;
    }
    .header_logo {
        width: 250px;
    }
    .header_logo a {
        display: block;
    }
    .header_cm_logo {
        width: 179px;
    }
    .header_menu_btn {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .header {
        gap: 0;
    }
    .header_left_inner {
        gap: 16px;
        max-width: 90%;
    }
    .header_right {
        gap: 16px;
        flex: 0 0 auto;
    }
}
@media (max-width: 768px) {
    .overlay.is_active {
        opacity: 1;
        visibility: visible;
    }
    .header {
        padding: 20px 20px 0 20px;
    }
    .header_left {
        height: 44px;
        align-items: center;
        position: relative;
        z-index: var(--zIndex-headerLogo);
    }
    .header_left_inner {
        align-items: flex-start;
        gap: 16px;
    }
    .header_logo {
        width: 143px;
    }
    .header_cm_logo {
        width: 89px;
    }
    .header_right {
        position: fixed;
        right: 0;
        transform: translateY(-100%);
        top: 0;
        height: 100dvh;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 144px;
        transition: transform 0.6s ease;
        padding-inline: 20px;
        row-gap: 40px;
        overflow: auto;
        font-size: 13px;
        overscroll-behavior: contain;
        z-index: var(--zIndex-menu);
        backdrop-filter: blur(0px);
        will-change: backdrop-filter;
        background: linear-gradient(180deg, var(--color-light-purple) 42.79%, rgba(243, 235, 240, 0) 100%);
    }
    .header_right.is_active {
        transform: translateY(0%);
        backdrop-filter: blur(5px);
    }
    .header_right a {
        opacity: 0;
        transition: opacity 0.4s 0s;
    }
    .header_right.is_active a {
        opacity: 1;
        transition: opacity 0.4s 0.7s;
    }
    .header_menu_btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: block;
        z-index: var(--zIndex-hamburger);
    }
    .header_menu_btn.is_active {
        position: fixed;
        background: transparent;
        border: 1px solid var(--color-purple);
    }
    .header_menu_btn.is_active .header_menu_line {
        background-color: var(--color-purple);
    }
}

.main {
    position: relative;
    z-index: 1;
    overflow-x: clip;
}

.container {
    margin-inline: auto;
}
.inner {
    max-width: var(--inner);
    margin-inline: auto;
}
@media (min-width: 769px) {
    .container {
        padding-inline: 40px;
    }
    .page_other .container {
        padding-top: 80px;
    }
}
@media (max-width: 768px) {
    .container {
        padding-inline: 20px;
    }
    .page_other .container {
        padding-top: 64px;
    }
}

.page_ttl_wrap {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}
.page_ttl {
    color: var(--color-purple);
    line-height: 1;
}
.page_txt {
    line-height: 2;
}
@media (min-width: 769px) {
    .page_ttl {
        font-size: 32px;
    }
    .page_txt {
        font-size: 18px;
    }
}
@media (max-width: 768px) {
    .page_ttl {
        font-size: 20px;
    }
    .page_txt {
        font-size: 13px;
    }
}

.btn_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    text-align: center;
}
.btn_back {
    background-color: var(--color-dark-gray);
    color: var(--color-white);
    line-height: 1;
}
.btn_next {
    border: 1px solid var(--color-dark-gray);
}
.btn_back_disagree {
    background-color: transparent;
    color: var(--color-dark-gray);
    border: 1px solid var(--color-dark-gray);
}
.btn_next_disagree {
    background-color: var(--color-dark-gray);
    color: var(--color-white);
    border: 1px solid var(--color-dark-gray);
}
@media (min-width: 769px) {
    .btn_wrap {
        margin-top: 80px;
    }
    .btn_back {
        padding: 24px 80px;
        border-radius: 64px;
        font-size: 16px;
    }
    .btn_next {
        padding: 32px 120px;
        border-radius: 82px;
    }
}
@media (max-width: 768px) {
    .btn_wrap {
        margin-top: 64px;
    }
    .btn_back {
        min-height: 52px;
        min-width: 210px;
        padding: 16px 48px;
        border-radius: 53px;
        font-size: 13px;
        line-height: 1.5;
    }
    .btn_next {
        padding: 24px 80px;
        border-radius: 72px;
    }
    .btn_next_disagree,
    .btn_back_disagree {
        width: 243px;
        padding-inline: 0;
    }
}

.footer {
    text-align: center;
    position: relative;
    z-index: 1;
}
@media (min-width: 769px) {
    .footer {
        padding-block: 160px 80px;
        font-size: 12px;
    }
}
@media (max-width: 768px) {
    .footer {
        padding-block: 64px 40px;
        font-size: 10px;
    }
}

/* maker_input_note */
.maker_input_note {
    display: flex;
    justify-content: space-between;
    border: 1px dashed var(--color-dark-gray);
    gap: 12px;
}
.maker_input_note_txt {
    line-height: 2;
    display: grid;
    grid-template-columns: auto 1fr;
}
.maker_input_note_btn {
    border: 1px solid var(--color-dark-gray);
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 100px;
}
@media (min-width: 769px) {
    .maker_input_note {
        padding: 24px;
        align-items: center;
    }
    .maker_input_note_txt {
        font-size: 16px;
    }
    .maker_input_note_btn {
        height: 48px;
        padding-inline: 40px;
    }
    @media (hover: hover) {
        .maker_input_note_btn {
            transition:
                color 0.3s,
                background-color 0.3s;
        }
        .maker_input_note_btn:hover {
            color: var(--color-white);
            background-color: var(--color-dark-gray);
        }
    }
}
@media (max-width: 768px) {
    .maker_input_note {
        padding: 16px 20px;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .maker_input_note_txt {
        font-size: 13px;
    }
    .maker_input_note_btn {
        align-self: center;
        font-size: 13px;
        padding: 12px 32px;
    }
}

/* modal */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalFadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.modal {
    display: none;
}

.modal.is_open {
    display: block;
}

.modal[aria-hidden='false'] .modal_overlay {
    animation: modalFadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.modal[aria-hidden='true'] .modal_overlay {
    animation: modalFadeout 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.modal .modal_container,
.modal .modal_overlay {
    will-change: transform;
}
.is_modal_open .header {
    z-index: 1;
}

.modal_overlay {
    background-color: rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal_container {
    padding: 40px 20px;
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
}
.modal_inner {
    max-width: 80%;
    margin: auto;
    position: relative;
}
.modal_title {
    text-align: center;
    font-size: 18px;
    color: var(--color-purple);
}
.modal_video {
    width: 100%;
}
.modal_close {
    border: none;
    position: absolute;
    z-index: 1;
}
.modal_close::before,
.modal_close::after {
    width: 114%;
    height: 1px;
    background-color: var(--color-dark-gray);
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
.modal_close::before {
    rotate: -45deg;
}
.modal_close::after {
    rotate: 45deg;
}
@media (min-width: 769px) {
    .modal_close {
        width: 50px;
        height: 50px;
        top: 80px;
        right: 80px;
    }
    .modal_title {
        font-size: 18px;
    }
    .modal_video {
        margin-top: 40px;
    }
}
@media (max-width: 768px) {
    .modal_close {
        width: 35px;
        height: 35px;
        top: 20px;
        right: 20px;
    }
    .modal_title {
        font-size: 15px;
        line-height: 1.75;
    }
    .modal_video {
        margin-top: 24px;
    }
    .modal_inner {
        max-width: 100%;
    }
}