@charset "utf-8";

.header_wrap { position: relative; z-index: 100; letter-spacing: 0.04em; }
.header_logo_link { position: relative; }
.header_logo_v { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.header_logo_jp { position: absolute; top: 148px; left: 0; opacity: 0; pointer-events: none; }

@media ( max-width: 1539px ) {
    main { position: relative; background: none; }
    main::before { content: ''; position: fixed; top: 0; display: block; width: 100%; height: 80px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(16px); background: #F4F0EC98; z-index: 10; pointer-events: none;
        mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 5%,
            rgba(0,0,0,.9) 20%,
            rgba(0,0,0,.8) 60%,
            rgba(0,0,0,0) 100%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 5%,
            rgba(0,0,0,.9) 20%,
            rgba(0,0,0,.8) 60%,
            rgba(0,0,0,0) 100%
        );
    }

    header { height: 48px; }
    .header_wrap { position: fixed; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 0; z-index: 100; }

    .header_overlay { position: fixed; inset: 0; background: #2F2F2F50; opacity: 0; visibility: hidden; z-index: 0; transition: all .4s ease-out; }
    .header_overlay.is_open { opacity: 1; visibility: visible; }

    .header_logo_img { display: block; height: 48px; }

    .hamburger { position: relative; display: block; height: 36px; aspect-ratio: 1/1; z-index: 2; }
    .hamburger span { position: absolute; right: 0; left: 0; height: 1px; width: 32px; margin: auto; background: #2F2F2F; transition: all .4s ease-out; }
    .hamburger span:nth-child(1) { top: 5px; }
    .hamburger span:nth-child(2) { top: 50%; }
    .hamburger span:nth-child(3) { bottom: 5px; }
    .hamburger.is_active span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
    .hamburger.is_active span:nth-child(2) { opacity: 0; }
    .hamburger.is_active span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

    .header_menu { position: absolute; top: 0; bottom: 0; right: 0; display: block; width: min(100vw,300px); height: 100vh; transform: translateX(100vw); background: #FFF; opacity: 0; visibility: hidden; z-index: 1; transition: all .4s ease-out; }
    .header_menu_list { height: calc(100% - 60px); margin-top: 60px; border-top: 1px solid #BCBCBC; overflow-y: scroll; }
    .header_menu_list li:first-child { border-top: none; }
    .header_menu_list li { border-top: 1px solid #BCBCBC; }
    .header_menu_list li.header_menu_contact { border-color: #000; }
    .header_menu_list li.header_menu_contact_sell { border-bottom: 1px solid; }
    .header_menu_list li.header_menu_contact .header_icon_mail { display: none; }
    .header_menu_list li a { display: block; width: 100%; padding: 12px; }
    .header_menu.is_open { transform: translateX(0); opacity: 1; visibility: visible;  }

    @media ( min-width: 768px ) {
        .header_wrap { padding: 20px 20px 0; }
    }
}

.header_cta_wrap { display: none; }
@media ( min-width: 768px ) and ( max-width: 1539px ) {
    .header_cta_wrap { display: flex; align-items: center; gap: 12px; margin-left: auto; margin-right: 16px; }
    .header_cta_btn { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; border-radius: 100px; font-size: 14px; font-weight: bold; white-space: nowrap; color: #FFF; transition: opacity .2s ease-out; }
    .header_cta_btn:hover { opacity: .8; }
    .header_cta_buy  { background: #4C8B4F; }
    .header_cta_sell { background: #CB4524; }
}

@media ( min-width: 1540px ) {
    .hamburger { display: none; }
    .header_overlay { display: none; }
    .header_menu { visibility: visible; }

    main { position: relative; background: none; }
    main::before { content: ''; position: fixed; top: 0; display: block; width: 100%; height: 120px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(16px); background: #F4F0EC98; z-index: 10; pointer-events: none;
        mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 5%,
            rgba(0,0,0,.9) 20%,
            rgba(0,0,0,.8) 60%,
            rgba(0,0,0,0) 100%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,1) 0%,
            rgba(0,0,0,1) 5%,
            rgba(0,0,0,.9) 20%,
            rgba(0,0,0,.8) 60%,
            rgba(0,0,0,0) 100%
        );
    }

    header { height: 72px; }
    .header_wrap { position: fixed; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 24px max(3%,24px) 0; margin: 0 auto; }

    .header_logo_link { transition: opacity .2s ease-out; }
    .header_logo_link:hover { opacity: 0.5; }
    .header_logo_h { height: 48px; margin-top: -4px; }

    .header_menu_list { display: flex; align-items: center; gap: 18px; font-size: 14px; }
    .header_menu_top { display: none; }
    .header_menu_list li a { transition: color .2s ease-out; }
    .header_menu_list li a:hover { color: #CB4524; }
    .header_menu_list li.header_menu_contact a { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; width: fit-content; padding: 0 20px; border-radius: 100px; font-weight: bold; white-space: nowrap; overflow: hidden; z-index: 2; transition: color .2s ease-out; }
    .header_menu_list li.header_menu_contact_buy a { border: 1px solid #4C8B4F; background: #4C8B4F; color: #FFF; }
    .header_menu_list li.header_menu_contact_sell a { border: 1px solid #CB4524; background: #CB4524; color: #FFF; }
    .header_menu_list li.header_menu_contact a::before { content: ''; position: absolute; top: 50%; right: 0; left: 0; transform: translateY(-50%) scale(0.1); display: block; width: 100%; height: 0; padding-top: 100%; margin: auto; border-radius: 50%; background: #FFF; opacity: 0; z-index: -1; transition: opacity .2s, transform 0s; transition-delay: 0s, .2s; pointer-events: none; }
    .header_menu_list li.header_menu_contact_buy a:hover { color: #4C8B4F; }
    .header_menu_list li.header_menu_contact_sell a:hover { color: #CB4524; }
    .header_menu_list li.header_menu_contact a:hover::before { transform: translateY(-50%) scale(1.1); opacity: 1; transition: opacity .8s, transform .6s ease-in-out; transition-delay: 0s; }
}
/* @media ( min-width: 1540px ) {
    .header_menu_list { gap: 28px; }
} */


.header_logo_caption { display: none; }
@media ( min-width: 768px ) {
    .header_logo_caption { position: absolute; top: 64px; left: 20px; display: block; padding-top: 8px; }
    .header_logo_caption_l1 { font-size: 12px; line-height: 1.5; }
    .header_logo_caption_l2 { font-size: 16px; line-height: 1.5; }
}
@media ( min-width: 1200px ) {
    .header_logo_caption { top: 72px; left: max(3%,24px); }
}