@charset "UTF-8";
/*font--------------------------------*/
/*---
Noto Sans JP
---*/
@font-face {
    font-family: "Noto Sans JP";
    font-weight: 400;
    src: local("Noto Sans JP Regular"), local("NotoSansJP-Regular"), url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans JP";
    font-weight: 500;
    src: local("Noto Sans JP Medium"), local("NotoSansJP-Medium"), url("../fonts/NotoSansJP-Medium.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans JP";
    font-weight: 600;
    src: local("Noto Sans JP SemiBold"), local("NotoSansJP-SemiBold"), url("../fonts/NotoSansJP-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}
@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;
}

/*=======================================
設定
=======================================*/
:root {
    interpolate-size: allow-keywords;
    /*container  =============================*/
    /*container size*/
    --container-max: 1366px;
    /*左右padding*/
    --container-pd: clamp(16px, 60vw/13.66, 60px);
    --inner-pd: clamp(20px, 40vw/13.66, 40px);
    --inner-pd-s: clamp(16px, 24vw/13.66, 24px);
    --box-pd: clamp(16px, 24vw/13.66, 24px);
    /*上padding*/
    --section-top: clamp(24px, 40vw/13.66, 40px);
    /*下padding*/
    --section-bottom: clamp(32px, 48vw/13.66, 48px);
    /*header parts*/
    --header-parts-h: clamp(30px, 40vw/13.66, 40px);
    /*pagetitle space*/
    --pagetitle-top: clamp(32px, 40vw/13.66, 40px);
    --pagetitle-bottom: clamp(16px, 24vw/13.66, 24px);

    /*header/footer  =============================*/
    --header-h: 100px;
    --header-h-total: 100px;
    --footer-h: 100px;

    /*font  =============================*/
    --font-ja: "Noto Sans JP";
    --font-ja-weight: 400;
    --font-en: Futura, "Century Gothic";
    --font-en-weight: 700;
    --font-base: clamp(1.4rem, 16vw/13.66, 1.6rem);
    --font-s: clamp(1.2rem, 14vw/13.66, 1.4rem);
    --font-ss: clamp(1rem, 12vw/13.66, 1.2rem);
    --font-l: clamp(1.6rem, 18vw/13.66, 1.8rem);
    --font-xl: clamp(1.8rem, 24vw/13.66, 2.4rem);

    /*color  =============================*/
    /*site color ---------*/
    --maincolor: #6fd9dd;
    --maincolor-dark: color-mix(in srgb, var(--maincolor), var(--black) 20%);
    --subcolor: #ef7fb4;
    --accentcolor: #5ecea8;

    /*text color ---------*/
    --base-tx-color: #101010;
    --light-tx-color: #fff;
    --error-color: #da251d;
    --marker-color: #ffff66;

    /*基本色 ------*/
    --white: #fff;
    --black: #1a1a1a;
    --gray: #888;
    --light-gray: #d3dad3;

    /*線 ------*/
    --border-color: #c0c0c0;

    /*背景色 ------*/
    --bg-white: #fff;
    --bg-color01: #e4fdff;
    --bg-color02: #edeff1;
    /*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%);
    /*box-shadow -----*/
    --box-shadow01: color-mix(in srgb, var(--light-gray), transparent 50%) -4px 0 25px -6px;

    /*hamburger icon =============================*/
    --hamburger-w: 40px;
    --hamburger-boder-size: 5px;
    --hamburger-duration: 0.3s;
    --hamburger-color: var(--gray);
    --hamburger-position: 7px;
    --hamburger-open-size: 80%;
    --hamburger-open-boder-size: 2px;

    /*other =============================*/
    --base-radius: 16px;
    --inner-radius: 8px;
    --btn-radius: 100px;

    /*z-index =============================*/
    --header-z: 998;
    --toggle-z: 3;
    --header-parts-z: 2;
    --pagetop-z: 997;
    --nav-z: -1;
    --mypage-tab-z: 1;
}

/*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,
body {
    scroll-behavior: smooth;
}
html {
    font: 62.5%/1.7 "メイリオ", 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-en), 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;
}