@charset "UTF-8";

/* ===========================================================================
*   WHOLE
=========================================================================== */
:root {
    --main-color: #FFFFFF;

    /* テキストフォント */
    --font-base-family: 'Roboto', 'Noto Sans JP', sans-serif;
    --font-base-size: 1rem; /* 16px */
    --font-base-weight-medium: 500;
    --font-base-weight-regular: 400;
    --font-base-weight-bold: 700;
    --font-base-weight-black: 900;
    --font-base-line-height: 1.8;

    /* テキストカラー */
    --base-text-color: #1E1E1E;
    --white-text: #FFFFFF;
    --blue-text-color: #01498E;
}

html {
    font-family: var(--font-base-family);
    font-size: var(--font-base-size);
    font-weight: var(--font-base-weight-medium);
    line-height: var(--font-base-line-height);
    background: var(--main-color);
    color: var(--base-text-color);
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    position: relative;
}

:is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

a:is(:link, :visited) {
    color: inherit;
}

address {
    font-style: normal;
}

:where(ol, ul) {
    list-style: none;
}

img {
    width: 100%;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    border: none;
}
ul {
    padding-inline-start: 0;
}
.pc {
    display: block;
}

.sp {
    display: none;
}

@media only screen and (min-width: 1024px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
	}
}
.drag-sort-y { display:flow-root;}

/* ===========================================================================
*   リンクボタン
=========================================================================== */

/* 共通ボタン（PC基準） */
/* ボタン背景グラデーション */

.common-button > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.5rem;
    width: 200px;
    height: 40px;
    border-radius: 21px;
    cursor: pointer;
    overflow: hidden;
    gap: 2.5rem;

    font-weight: var(--font-base-weight-medium);
    font-size: var(--font-base-size);
    color: var(--white-text);
    font-style: normal;
    line-height: 19;
    white-space: nowrap;

    /* 初期色 */
    background: #1E1E1E;

    transition: gap 0.5s ease;
}

/* 矢印アイコン */
.common-button > a::after {
    content: "";
    display: inline-block;

    width: 35px;
    height: 24.83px;

    background-image: url("../../image/basic/common-button-yajirushi.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

/* hover できるデバイス（PCなど）だけ hover を適用 */
@media (any-hover: hover) {
    .common-button > a:hover {
        gap: 50px;
        background: #373737;
    }
}


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

.responsive-drawer {
    display: none;
}

.site-logo {
    display: block;
}

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    z-index: 1;
}

/* ===============================
 ロゴ
=============================== */
.logo-wrap {
    padding-top: 2.5vw; /* 1920px幅のデザイン上での48px 48 ÷ 1920 × 100 = 2.5 */
    padding-left: 2.08vw; /* 1920px幅のデザイン上での40px 40 ÷ 1920 × 100 = 2.083.. */
    
}

.header-nav {
    position: absolute;
    right: 0;
    color: var(--white-text);
    font-weight: var(--font-base-weight-bold);
}

/* ===============================
 ナビ全体
=============================== */
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list a {
    line-height: 1;
}

/* ===============================
 上段（2分割）
=============================== */
.nav-top-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50%ずつ */
}

.nav-top {
    font-size: var(--font-base-size);
    font-size: clamp(0.625rem, 0.374rem + 0.52vw, 1rem);
    /* font-size: 10px; */
    text-align: center;
}

.nav-top a {
    display: block;
    width: 100%;
    padding: 1.07em 0;
}

.nav-top:nth-child(1) {
    background-color: #0D67BD;
    border-bottom-left-radius: 7px;
}

.nav-top:nth-child(2) {
    background-color: #1E1E1E;
}

/* ===============================
 下段（横並び）
=============================== */
.nav-bottom-list {
    display: flex;
    gap: 2.3em;
    padding-left: 1em;
    padding-right: 0.875em;
}

.nav-bottom {
    display: inline-block;
    margin-top: 23px;
    font-size: 1.0625rem;
    font-size: clamp(0.688rem, 0.437rem + 0.52vw, 1.063rem);
    /* font-size: 11px; */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

.nav-bottom:last-child {
    margin-right: 0;
}

.nav-item a {
    transition: 0.5s;
}

.nav-item a:hover {
    opacity: 0.8;
}

/*===========================================================================
*   main
===========================================================================*/
main {
    width: 100%;
}

section {
    padding: 0 25px 0 25px;
}

.container-1200 {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

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

.site-footer {
    background-image: 
            linear-gradient(159deg, rgba(68, 68, 68, 1) 0%, rgba(68, 68, 68, 1) 45%, rgba(68, 68, 68, 0) 100%),
            url(../../image/basic/noise.png);    
        /* フォールバック用の背景色（画像やグラデーションが出ない時用） */
    background-color: #444;
    background-repeat: repeat;       /* 画像をタイル状に繰り返す */
    background-size: auto;           /* ノイズの粒をそのままのサイズで出す（重要） */

    padding-top: 110px;
    padding-bottom: 110px;
    padding: 5.729vw 13.541vw 5.729vw 13.541vw;
}

.footer-inner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    /* padding: 56px 100px; */
    padding: 2.916vw 5.208vw; /* 1920px幅のデザイン上での56px 100px */

    /* gap: 146px; */
    /* 1920px幅のデザイン上での146px 146 ÷ 1920 × 100 = 7.604... */
    gap: 7.604vw;

    background: #4C4B4B;
    color: var(--white-text);

    width: 1400px;
    max-width: 100%;
    margin: 0 auto;
}

/* 左右中央の縦棒 */
.footer-inner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 1px;
    height: 331px;
    background: #696767;

    transform: translate(-50%, -50%);
}

.footer-company {
    flex: 1 1 50%;
}

.footer-company img {
    width: 230px;
    height: auto;
}

.footer-company .company-name {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    width: 100%;

    font-size: 1.5rem;
    font-weight: var(--font-base-weight-bold);
    line-height: 2.625;

    line-height: 1.5;
    padding: 20px 0 20px 0;
}

.footer-company .address {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    line-height: 2;
}

.footer-links {
    flex: 1 1 50%;
}

.footer-links .contact .title-wrap {
    width: 100%;
    display: inline-block;
    cursor: pointer;
    transition: opacity 0.5s ease;
    background: #5c5c5c;
    padding: 1rem 2rem;
    border-radius: 10px;
}

.footer-links .contact .title {
    display: flex;
    flex-direction: row;
    gap: 18.5px;
    align-items: center;

    font-size: 1.8rem;
    font-weight: var(--font-base-weight-bold);
    line-height: 1.5;
}

.footer-links .contact .title-en {
    font-size: 1.5rem;
    font-weight: var(--font-base-weight-regular);
}

.footer-links .contact .title::after {
    content: "";
    display: block;

    width: 32px;
    height: 32px;

    background: 
        url("../../image/basic/paper-airplane.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.footer-links .contact .request-message {
    display: flex;
    flex-direction: column;
    gap: 14px;

    padding: 26px 0 14px 0;

    font-weight: var(--font-base-weight-medium);
    line-height: 2.25;
}

.footer-links .contact .request-message > div:last-child {
    font-size: 0.9375rem;
}

.privacy-policy-wrap {
    text-align: end;
}

.footer-links .privacy-policy {
    display: inline-block;
    text-align: end;
    
    font-weight: var(--font-base-weight-bold);
    line-height: 2.5;

    cursor: pointer;
    transition: opacity 0.5s ease;
}


/* hover できるデバイス（PCなど）だけ hover を適用 */
@media (any-hover: hover) {

    .footer-links .contact .title-wrap:hover,
    footer .privacy-policy:hover {
        opacity: 0.8;
    }
}

.copyright {
    padding: 1.875em 0;
    text-align: center;
    font-weight: var(--font-base-weight-regular);
    line-height: 2.5;

    background: var(--main-color);
}

/*===========================================================================
*   FOOTER PDFエリア
===========================================================================*/
#footer .pdf {
    background: rgba(30, 30, 30, 0.9);
    padding-top: 110px;
    padding-bottom: 110px;
}

#footer .pdf .drag-sort-y {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

#footer .pdf a{
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 1.25rem;
    font-weight: var(--font-base-weight-bold);
    line-height: 3.15;

    box-sizing: border-box;

    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 10px;

    padding: 0.3em 0.85em 0.3em 1.5em;

    width: 274px;

    transition: opacity 0.5s ease;
}

#footer .pdf a::after{
    content: "";
    display: block;

    width: 31px;
    height: 35px;

    background-image: url("../../image/pdf.png");
    background-repeat: no-repeat;
    background-size: contain;
}

#footer .pdf .drag-sort-y table[align="center"] {
    width: 100%;
    text-align: center;
}

#footer .pdf-content table tr td:first-child { display:none; }

/* hover できるデバイス（PCなど）だけ hover を適用 */
@media (any-hover: hover) {
    #footer .pdf a:hover {
        opacity: 0.8;
    }
}

/*===========================================================================
*  PHONE
===========================================================================*/

/* ▼ 1000px～1200px：PC */
@media screen and (min-width: 1000px) and (max-width: 1200px) {

    .logo-link  img {
        width: 400px;
    }

}

/* ▼ ～1000px：PC */
@media screen and (max-width: 1000px) {

    .footer-inner {
        flex-direction: column;
        padding: 60px 20px;
        gap: 81px;
        width: 100%;
    }

    .footer-company {
        order: 2;
    }
    
    .footer-links {
        order: 1;
        padding: 0;
    }

    .footer-links .contact .title {
        display: flex;
        flex-direction: row;
        gap: 11px;
        align-items: center;
        font-size: 1.5rem;
        line-height: 1;
    }

    .footer-links .contact .title::after {
        width: 23.51px;
        height: 24.97px;
    }

    .footer-links .contact .title-en {
        font-size: 0.625rem;
    }

    .footer-links .contact .request-message {
        gap: 40px;

        padding: 40px 0 0 0;
        line-height: 1.5;
    }

    .footer-links .privacy-policy-wrap {
        padding: 40px 0 20px 0;
    }

    .footer-company {
        width: 100%;

        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-company img {
        width: 175px;
        height: 78.5px;
    }

    .footer-company .company-name {
        padding: 19px 0 24px 0;

        font-size: 1.125rem;
        line-height: 1.666;
        flex-direction: column;
    }

    .footer-company .address {
        width: 100%;
        flex-direction: column;
        gap: 0;
        line-height: 1.6;
    }

    .footer-company .tel {
        width: 100%;
    }

    .footer-company .address,
    .footer-company .tel {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    .copyright {
        padding: 1.571em 0;
        font-size: 0.875rem;
        line-height: 1;
    }

    /* 左右中央の横棒 */
    .footer-inner::before {
        width: 331px;
        height: 1px;
    }

}

/* ▼ 850px～999px：PC */
@media screen and (min-width: 850px) and (max-width: 999px) {

    .logo-link  img {
        width: 300px;
    }

}

/* ▼ 769px～849px：PC */
@media screen and (min-width: 769px) and (max-width: 849px) {

    .logo-link  img {
        width: 250px;
    }

}

/* ▼ ～768px：スマホ～タブレット */
@media screen and (max-width: 768px) {

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

    html.is-mobile .logo-wrap {
        padding-top: 2.666vw; /* 375px幅のデザイン上での10px 10 ÷ 375 × 100 = 2.666 */
        /* padding-top: 10px; */
        padding-left: 20px;
    }

    /* PC用ヘッダー */
    html.is-mobile .header-nav {
        display: none;
    }

    /* スマホ画面用ヘッダー */
    html.is-mobile .responsive-header {
        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        /* 375px幅のデザイン上での56px 56 ÷ 375 × 100 = 14.933 */
        /* width: 14.933vw; */
        /* 375px幅のデザイン上での30px 30 ÷ 375 × 100 = 8 */
        /* height: 8vw; */
        width: 56px;
        height: 30px;
        right: 0;
        top: 10px;

        background: #FFFFFF;
        border-radius: 5.33vw 0px 0px 5.33vw; /* 375px幅のデザイン上での20px 20 ÷ 375 × 100 = 5.33 */
        /* border-radius: 20px 0px 0px 20px; */

        z-index: 1001;
    }

    html.is-mobile .hamburger {
        display: flex;
        flex-direction: column;
        /* 375px幅のデザイン上での5px 5 ÷ 375 × 100 = 1.333 */
        /* gap: 1.333vw; */
        gap: 5px;
        position: relative;
    }

    /* ハンバーガー */
    html.is-mobile .hamburger span {
        display: block;
        /* 375px幅のデザイン上での20px 20 ÷ 375 × 100 = 5.333 */
        /* width: 5.333vw; */
        /* 375px幅のデザイン上での2px 2 ÷ 375 × 100 = 0.533 */
        /* height: 0.533vw; */
        width: 20px;
        height: 2px;

        background: #000000;
        border-radius: 10px;

        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center center;
    }

    /* バツ状態 */
    html.is-mobile.menu-open .hamburger span:nth-child(1) {
        transform: translateY(4px) rotate(25deg);
    }
    
    html.is-mobile.menu-open .hamburger span:nth-child(2) {
        /* transform: translateY(-0.93315vw) rotate(-25deg); */
        transform: translateY(-4px) rotate(-25deg);
    }

    /* スマホメニュー表示 */
    .responsive-drawer {
        padding: 50px 23px 0 23px;
        display: flex;

        position: fixed;
        inset: 0;
        top: 0;
        left: 0;

        background-color: #454545;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: scale(1.03);
        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0s linear 0.25s;
        
        color: var(--white-text);

        overflow-y: auto;
        scrollbar-width: none;    /* Firefox */
        -ms-overflow-style: none; /* IE, Edgeレガシー */

        /* 背景をスクロールさせないようにする */
        overflow: auto;
        overscroll-behavior-y: contain;
        
        z-index: 1000;
    }

    .responsive-drawer::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge */
    }

    /* スマホメニュー背景ロゴ（疑似要素） */
    .responsive-drawer::before {
        content: "";
        position: absolute;
        top: 501px;
        left: 50%;
        transform: translateX(-50%);

        width: 100%;
        height: 40vw; /* 375px幅のデザイン上での150px 150 ÷ 375 × 100 = 40 */
        /* height: 150px; */

        background-image: url("../../image/basic/sp-menu-bg.webp");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-size: cover;
        background-position: center;

        opacity: 0.3;
        pointer-events: none;

        z-index: 0;
    }

    html.menu-open.is-mobile .responsive-drawer {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);
        transition: 
        opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        visibility 0s;
        }

    /* スマホメニューが開いた時に表示されている[position: absolute]などの要素を見えなくさせるため */
    html.menu-open main * {
        z-index: 0;
    }

    .drawer-menu-wrap-wrap {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        height: auto;

        text-align: center;
        font-weight: var(--font-base-weight-bold);
    }

    /* 入会案内 & 会員専用 */
    /* ロゴ */
    .drawer-menu-wrap-wrap img {
        width: 100px;
    }

    /* 社名 */
    .drawer-menu-wrap-wrap .company-name {
        font-size: clamp(0.875rem, 0.338rem + 2.29vw, 1.438rem);
        font-weight: var(--font-base-weight-bold);
        line-height: 1.2;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        padding: 15.74px 0 33px 0;
    }

    /* アルファベット */
    .drawer-menu-wrap-wrap .company-name .en {
        font-size: clamp(0.625rem, 0.088rem + 2.29vw, 1.188rem);
        line-height: 1.2;
        letter-spacing: 0.23em;
        text-shadow: none;
    }

    /* 入会案内 & 会員専用 */
    .membership-information {
        display: flex;
        flex-direction: column;
        gap: 10px;

        width: 100%;

        padding-bottom: 30px;

        font-size: clamp(1rem, 0.463rem + 2.29vw, 1.563rem);
    }

    .membership-information a {
        text-align: center;
        line-height: 1;

        padding: 0.9375em 0 0.9375em 0;
    }

    .membership-information .blue {
        background: #0D67BD;
    }
    
    .membership-information .black {
        background: #1E1E1E;
    }

    /* メニューリスト */
    .drawer-menu {
        list-style: none;
        
        display: flex;
        flex-direction: column;
        gap: 24px;

        font-size: clamp(1rem, 0.463rem + 2.29vw, 1.563rem);
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    }

    .drawer-menu li > a {
        display: block;
        line-height: 1;
    }

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

    .site-footer {
        background: #4C4B4B;
        padding: 0 0 0 0;
    }

    .footer-inner {
        flex-direction: column;
        padding: 60px 20px;
        /* 375px幅のデザイン上での81px 81 ÷ 375 × 100 = 21.6 */
        /* gap: 21.6vw; */
        gap: 81px;
        width: 100%;
    }

    .footer-inner::before {
        top: 55%;
    }

    .footer-company {
        order: 2;
    }
    
    .footer-links {
        order: 1;
        padding: 0;
    }

    .footer-links .contact .title {
        display: flex;
        flex-direction: row;
        gap: 11px;
        align-items: center;
        font-size: 1.5rem;
        line-height: 1;
    }

    .footer-links .contact .title::after {
        width: 33.51px;
        height: 34.97px;
        /* width: 23.51px;
        height: 24.97px; */
    }

    .footer-links .contact .title-en {
        font-size: 0.625rem;
    }

    .footer-links .contact .request-message {
        gap: 40px;

        padding: 40px 0 0 0;
        line-height: 1.5;
    }

    .footer-links .contact .request-message > div:last-child {
        font-size: 1rem;
    }
    
    .footer-company {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-company img {
        width: 175px;
        height: 78.5px;
    }

    .footer-company .company-name {
        padding: 19px 0 24px 0;

        font-size: 1.125rem;
        line-height: 1.666;

        
        flex-direction: column;
    }

    .footer-company .address {
        width: 100%;
        flex-direction: column;
        gap: 0;
        line-height: 1.6;
    }

    .footer-company .tel {
        width: 100%;
    }

    .footer-company .address,
    .footer-company .tel {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    .copyright {
        padding: 1.571em 0;
        font-size: 0.875rem;
        line-height: 1;
    }

    /* 左右中央の横棒 */
    .footer-inner::before {
        width: 331px;
        height: 1px;
    }
}

/* ▼ 600px～768px：タブレット */
@media screen and (min-width: 600px) and (max-width: 768px) {

    /* スマホ画面用ヘッダー */
    /* html.is-mobile .responsive-header {
        width: 115px;
        height: 61px;
    } */

    /* html.is-mobile .hamburger {
        gap: 10px;
    } */

    /* ハンバーガー */
    /* html.is-mobile .hamburger span {
        width: 41px;
        height: 4px;
    } */

    /* バツ状態 */
    html.is-mobile.menu-open .hamburger span:nth-child(1) {
        transform: translateY(3.5px) rotate(25deg);
    }
    
    html.is-mobile.menu-open .hamburger span:nth-child(2) {
        transform: translateY(-3.5px) rotate(-25deg);
    }

}

    /* スマホ画面用フッターPDFエリア */
@media screen and (max-width: 670px) {
    .pdf .drag-sort-y {
        column-gap: 16px;
    }
}

/* ▼ 431px～599px：スマホ～タブレット */
@media screen and (min-width: 431px) and (max-width: 599px) {

    /* スマホ画面用ヘッダー */
    html.is-mobile .responsive-header {
        width: 90px;
        height: 48px;
    }

    html.is-mobile .hamburger {
        gap: 8px;
    }

    /* ハンバーガー */
    html.is-mobile .hamburger span {
        width: 32px;
        height: 3px;
    }

    /* バツ状態 */
    html.is-mobile.menu-open .hamburger span:nth-child(1) {
        transform: translateY(5.5px) rotate(25deg);
    }
    
    html.is-mobile.menu-open .hamburger span:nth-child(2) {
        transform: translateY(-5.5px) rotate(-25deg);
    }

}