@charset "utf-8";
/* CSS Document */

:root {
    --font-base:"BIZ UDPGothic", /* 太字安定、UDで読みやすい */
                  "Noto Sans JP",  /* Google配布、日本語太字の定番 */
                  "Hiragino Sans", /* Mac標準で太字しっかり */
                  "Hiragino Kaku Gothic ProN",
                  "Segoe UI",      /* 英数UI用 */
                  "Yu Gothic UI",  /* Windows標準UIフォント */
                  "Meiryo",        /* 最終バックアップ */
                  sans-serif;
    --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --color-main: #4ECDC4; /*エメラルドグリーン*/
    --color-bg: #f4eadb; /*クリームホワイト*/
    --color-bg-b: #d1d7a6; /*芝グリーン*/
    --color-accent1: #FF6FAE; /*ピンク*/
    --color-accent2: #FFE066; /*イエロー*/
    --color-accent2_5: rgba(209,215,166,0.6); /*芝グリーン透過*/
    --color-link: #5EDFFF; /*スカイブルー*/
    --color-txt: #333333;
    --color-txt-b: #111111;
    --link-txt: #658ed4;
    --max-width: 1100px;
    --main_width: 728px;
    --side_width: 336px;
    --space-s: 0.5rem;
    --space-m: 1rem;
    --space-l: 2rem;
}

html{
    -webkit-text-size-adjust: 100%;
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.1rem;
    color-scheme: light dark;
    height: 100%;
}
body{
    margin: 0;
    color: var(--color-txt);
    background: var(--color-bg);
    font-size: var(--font-size-base);
    background-size: auto 100%;
    height: 100%;
}
a, a:hover {
    text-decoration: none;
}

/* リセット */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: bold;
    line-height: 1;
}

ol, ul, li, menu, summary, dd, dl, dt {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 段落とリスト */
p, ul, ol {
    margin: 0;
}

/* リンクと画像 */
a {
    color: inherit;
    text-decoration: none;
}
a:hover,
button:hover {
    opacity: .7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
    transition: all .2s;
}
a:hover img {
    opacity: .7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
    transition: all .2s
}
a:active,
button:active {
    opacity: .9;
    filter: alpha(opacity=90);
    -ms-filter: "alpha( opacity=90 )";
}
img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* フォーム */
input, button, textarea, select {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* 文字装飾リセット */
em, b, strong {
    text-decoration: none;
    font-style: normal;
}

em, b, strong {
    font-weight: bold;
}

/* 視覚的に非表示 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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