@charset "UTF-8";


/* ==========================================================
   Variables
========================================================== */

:root {

    /* Colors */

    --color-navy-dark: #041f3e;
    --color-navy: #243b56;
    --color-gold: #b8924a;

    --color-text: #333333;
    --color-gray: #a7b0bb;

    --color-bg: #f7f7f7;
    --color-white: #ffffff;


    /* Fonts */

    --font-ja:
        "Shippori Mincho",
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    --font-en:
        "Spectral",
        "Times New Roman",
        serif;


    /* Font Weight */

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;


    /* Font Size */

    --font-xs: 0.75rem;
    /* 12px */
    --font-sm: 0.875rem;
    /* 14px */
    --font-base: 1rem;
    /* 16px */
    --font-md: 1.125rem;
    /* 18px */

    --font-lg: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
    /* 20px → 24px */

    --font-xl: clamp(1.5rem, 1.3rem + 0.6vw, 2rem);
    /* 24px → 32px */

    --font-2xl: clamp(1.75rem, 1.4rem + 1vw, 2.625rem);
    /* 28px → 42px */

    --font-3xl: clamp(2rem, 1.5rem + 1.5vw, 3.125rem);
    /* 32px → 50px */

    --font-display: clamp(3rem, 1.8rem + 4vw, 5.5rem);
    /* 48px → 88px */


    /* Layout */

    --content-width: 1440px;
    --page-padding: 40px;


    --header-height: 0px;


}

/* SP
-------------------------------- */

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

    :root {

        --font-xs: 0.6875rem;
        /* 11px */

        --font-sm: 0.75rem;
        /* 12px */

        --font-base: 0.875rem;
        /* 14px */

        --font-md: 1rem;
        /* 16px */

        --font-lg: 1.125rem;
        /* 18px */

        --font-xl: 1.125rem;
        /* 18px */

        --font-2xl: 1.375rem;
        /* 22px */

        --font-3xl: 1.875rem;
        /* 30px */

        --font-display: 2.5rem;
        /* 40px */

    }

}


/* 固定ヘッダー分だけコンテンツを下げる */
#page {
    padding-top: var(--header-height);
    overflow-x: hidden;
}


/* ページ内リンク・scrollIntoViewなどのスクロール位置を調整 */
html {
    scroll-padding-top: var(--header-height);
}


/* 念のためターゲット側にも指定 */
:target {
    scroll-margin-top: var(--header-height);
}

/* ==========================================================
   Reset
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;

    background-color: var(--color-white);

    color: var(--color-text);

    font-family: var(--font-ja);
    font-size: var(--font-base);
    font-weight: var(--font-regular);
    line-height: 1.8;

    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;

    list-style: none;
}

img,
svg {
    display: block;

    max-width: 100%;
    height: auto;
}

a {
    color: inherit;

    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}


/* ==========================================================
   Base
========================================================== */

body {
    min-width: 320px;
}

a {
    transition: opacity 0.3s ease;
}

@media (hover: hover) {

    a:hover {
        opacity: 0.7;
    }

}


/* ==========================================================
   Layout
========================================================== */

.l-container {
    width: 95%;
    max-width: var(--content-width);
    margin-inline: auto;
}


/* ==========================================================
   Utility
========================================================== */

.u-font-en {
    font-family: var(--font-en);
}

.u-color-navy {
    color: var(--color-navy);
}

.u-color-gold {
    color: var(--color-gold);
}

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


/* ==========================================================
   Responsive
========================================================== */

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

    :root {
        --page-padding: 20px;
    }

}




.c-section-heading {
    position: relative;

    margin-bottom: 1.5em;
    padding-bottom: 1em;

    color: var(--color-navy);

    font-size: var(--font-3xl);
    line-height: 1;
    font-weight: 600;
}

.c-section-heading::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 1.2em;
    height: 2px;

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

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

    .c-section-heading {
        margin-bottom: 1em;
        padding-bottom: .7em;

        font-size: var(--font-2xl);
    }

}



input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
    border-color: var(--color-gray);
    color: var(--color-gray);
    padding: .5em;
}