@charset "UTF-8";

/*font--------------------------------*/
/*---
Noto Sans JP
---*/
@font-face {
    font-family: "Noto Sans JP";
    font-weight: 700;
    src: local("Noto Sans JP Bold"), local("NotoSansJP-Bold"), url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    font-weight: 900;
    src: local("Noto Sans JP Black"), local("NotoSansJP-Black"), url("../fonts/NotoSansJP-Black.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}

/*=======================================
設定
=======================================*/
:root {
    interpolate-size: allow-keywords;
    /*container  =============================*/
    /*container size*/
    --container-max:1790px;
    /*左右padding*/
    --container-pd: clamp(16px, 4vw, 48px);
    /*上padding*/
    --section-top: clamp(40px, 6vw, 100px);
    /*下padding*/
    --section-bottom: clamp(40px, 6vw, 100px);
    /*section gap*/
    --section-gap:clamp(32px, 4vw, 72px);
    /*font  =============================*/
    --step: 1rem;
    --font-ja: "Noto Sans JP";
    --font-ja-weight: 700;
    --font-en: "Grenze", sans-serif;
    --font-en-weight: 700;
    --font-num: "Roboto", sans-serif;
    /*base*/
    --font-base:16px;
    /*Major Second x 1.125*/
    /*s size*/
    --font-s: calc(var(--font-base) * 0.875);
    /*l size*/
    --font-l: calc(var(--font-base) * 1.125);
    /*lg size*/
    --font-lg: calc(var(--font-base) * 1.266);
    /*xl size*/
    --font-xl: calc(var(--font-base) * 1.424);
    /*xxl size*/
    --font-xxl: calc(var(--font-base) * 1.602);

    /*color  =============================*/
    /*site color ---------*/
    --base-color: #000;
    --sub-color: #16ab7e;
    --gold: #C9A000;
    /*text color ---------*/
    --base-tx-color: #000;
    --light-tx-color: #fff;
    --error-color: #c43d33;
    /*shadow color ---------*/
    --tx-shadow-bl: black 2px 0px, black -2px 0px,
        black 0px -2px, black 0px 2px,
        black 2px 2px, black -2px 2px,
        black 2px -2px, black -2px -2px,
        black 1px 2px, black -1px 2px,
        black 1px -2px, black -1px -2px,
        black 2px 1px, black -2px 1px,
        black 2px -1px, black -2px -1px;
    --tx-shadow-wh: white 2px 0px, white -2px 0px,
        white 0px -2px, white 0px 2px,
        white 2px 2px, white -2px 2px,
        white 2px -2px, white -2px -2px,
        white 1px 2px, white -1px 2px,
        white 1px -2px, white -1px -2px,
        white 2px 1px, white -2px 1px,
        white 2px -1px, white -2px -1px;
    /*基本色 ------*/
    --white: #fff;
    --black: #000;
    --gray: #666;
    --light-gray: #d3dad3;
    /*線 ------*/
    --border-color: #c0c0c0;
    /*背景色 ------*/
    --bg-white: #fff;
    --bg-color01: #f0f0f0;
    /*a ------*/
    --a-tx: #49aad7;
    --a-hover: color-mix(in srgb, var(--a-tx), var(--white) 40%);
    --a-visited: color-mix(in srgb, var(--a-tx), var(--black) 20%);

    /*other =============================*/
    --base-radius: clamp(6px, 12vw/7.68, 12px);

    /*z-index =============================*/
    --pagetop-z: 997;
    --header-z: 998;
}

@media (min-width: 768px) {
    :root {
        --font-base: 18px;
    }
}

/*reset--------------------------------*/
* {
    box-sizing: border-box;
}

body,
div,
pre,
p,
blockquote,
form,
fieldset,
input,
textarea,
select,
option,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
table,
th,
td,
tr,
embed,
object,
a,
img,
figure,
figcaption {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

/*font*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
em {
    font-style: normal;
    font-weight: normal;
}

/*others*/
table {
    border-spacing: 0;
}

* html table {
    border-collapse: collapse;
}

*:first-child+html table {
    border-collapse: collapse;
}

th,
td {
    vertical-align: middle;
    border-collapse: collapse;
}

table,
th,
td,
tr,
img {
    border: 0;
}

img {
    vertical-align: bottom;
}

q:before,
q:after {
    content: "";
}

ul {
    list-style: none;
}

/*base--------------------------------*/
html {
    font-size: 100%;
    font: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

/*body*/
body {
    height: 100%;
    text-align: center;
    word-break: break-all;
    background-color: #fff;
    font-family: var(--font-ja);
    font-weight: var(--font-ja-weight);
    font-size: var(--font-base);
    color: var(--base-tx-color);
    font-feature-settings: "palt";
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

/*link*/
a {
    color: var(--a-tx);
    text-decoration: underline;
}

a img {
    border-style: none;
}

a:visited {
    color: var(--a-visited);
}

a:hover {
    color: var(--a-hover);
}

/*font size*/
h1,
h2,
h3,
h4,
h5,
p {
    font-size: var(--font-base);
}

li,
dt,
dd {
    font-size: var(--font-base);
}

table {
    font-size: var(--font-base);
}

/*other*/
figure {
    padding: 0;
    margin: 0;
}

svg:where(:not([fill])) {
    fill: currentColor;
}