@charset "UTF-8";

/*font--------------------------------*/
/*---
"M PLUS Rounded 1c"
---*/
@font-face {
    font-family: "M PLUS Rounded 1c";
    font-weight: 500;
    src: local("M PLUS Rounded 1c Medium"), local("MPLUSRounded1c-Medium"), url("../fonts/MPLUSRounded1c-Medium.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    font-weight: 800;
    src: local("M PLUS Rounded 1c Bold"), local("MPLUSRounded1c-ExtraBold"), url("../fonts/MPLUSRounded1c-ExtraBold.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}

/*---
icon
---*/
.material-symbols-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

/*=======================================
設定

※※
seasonの変更の際は変数の　--season-color　の差し替え（★★　season 設定　部分[138行目]）と
bodyタグのクラスの置換をする
bodyタグ　→　シーズンでclass名全ファイル置換変更　season_summer　/　season_winter　/　season_spring
※※
=======================================*/

:root {
    interpolate-size: allow-keywords;
    /*container  =============================*/
    /*fluid 対象幅 -----------------*/
    /*sp幅*/
    --fluid-min-width: 375px;
    /*pc幅*/
    --fluid-max-width: 1200px;

    /*container size*/
    --container-max: 1207px;
    --container-narrow: 960px;
    /* セクション横padding */
    --container-padding-x-min: 1.11rem;
    --container-padding-x-max: 2.66rem;
    --container-pd:clamp(1.11rem, 0.411rem + 2.98vw, 2.66rem);
    /* セクション上余白 */
    --section-padding-top-min: 1.5rem;
    --section-padding-top-max: 4.44rem;
    --section-top: clamp(1.5rem, 0.175rem + 5.65vw, 4.44rem);
    /*下padding*/
    --section-padding-bottom-min: 2.22rem;
    --section-padding-bottom-max: 4.44rem;
    --section-bottom: clamp(2.22rem, 1.219rem + 4.27vw, 4.44rem);

    /*moyou*/
    --moyou-height: clamp(1.5rem, -0.5rem + 8.53vw, 5.9rem);

    /*header height(js)*/
    --header-h: 100px;
    /*font  =============================*/
    --font-ja: "M PLUS Rounded 1c";
    --font-ja-weight: 500;
    --font-en: "Chewy", sans-serif;
    --font-en-weight: 400;

    /*base*/
    /*14px*/
    --font-size-base-min: 0.875rem;
    /*18px*/
    --font-size-base-max: 1.125rem;
    --font-base:clamp(1rem, 0.875rem + 0.48vw, 1.125rem);

    /*Major Second x 1.125*/
    /*s size*/
    --font-xs: calc(var(--font-base) * 0.75);
    /*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 ---------*/
    --maincolor: #3e408d;
    --subcolor: #fa6f59;

    /*colors*/
    --color-pink: #fab2fc;
    --color-purple: #a897fc;
    --color-blue: #4fcee5;
    --color-green: #34e546;
    --color-yellow: #faea6b;
    --color-red: #fa6f59;

    --base-tx-color: #475262;
    --light-tx-color: #fff;
    --error-color: #e43b21;
    /*基本色 ------*/
    --white: #fff;
    --black: #1a1a1a;
    --gray: #666;
    --light-gray: #cdd5da;
    /*線 ------*/
    --border-color: #d5d6d4;
    /*背景色 ------*/
    --bg-white: #fff;
    --bg-color01: #f8f7f0;
    --bg-color02: #eeece4;
    /*a ------*/
    --a-tx: #4368ac;
    --a-hover: color-mix(in srgb, var(--a-tx), var(--white) 40%);
    --a-visited: color-mix(in srgb, var(--a-tx), var(--black) 20%);

    /*season　===========================*/
    --spring-color: #fbc6fc;
    --winter-color: #8bea95;
    --summer-color: #faea6b;
    /*★★　season 設定　*/
    --season-color: var(--summer-color);

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


    /*hamburger =============================*/
    --hamburger-w: 40px;
    --hamburger-h: 24px;
    --hamburger-boder-size: 2px;
    --hamburger-duration: 0.3s;
    --hamburger-color: var(--maincolor);

    /*z-index =============================*/
    --pagetop-z: 997;
    --toggle-z: 1000;
    --nav-z: 999;
    --header-z: 998;
}

/*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: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-size: 100%;
    scroll-behavior: smooth;
    /*scrollbar 設定*/
    scrollbar-width: thin;
    scrollbar-color: var(--season-color) transparent;
    scrollbar-gutter: stable;
    text-spacing-trim: trim-start;
    text-autospace: ideograph-alpha;
    line-break: strict;
    font-feature-settings: "palt";
}

/*body*/
body {
    word-break: normal;
    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: clip;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background: var(--bg-color01);
}

:where(body) {
    text-align: center;
}

/*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;
}