:root {

    /* ルール */
    /* Lの数字は大きく変えない（20%未満だと黒潰れ、98%以上だと色消失） */
    /* Cは */

    --primary-bland-color-lightbright: oklch(89.869% 0.02113 261.821);
    --primary-bland-color-bright: oklch(40.503% 0.13174 261.028);
    --primary-bland-color: #013389;
    --primary-bland-color-dark: oklch(25.503% 0.15174 261.028);
    --primary-bland-color-deepdark: oklch(15.503% 0.15174 261.028);
    --primary-bland-color-transparent: rgba(0, 129, 204, 0.85);

    --secondary-bland-color-lightbright: oklch(95.615% 0.125 91.231);
    --secondary-bland-color-bright: oklch(90.615% 0.15 91.231);
    --secondary-bland-color: oklch(86.615% 0.17702 91.231);
    --secondary-bland-color-dark: oklch(62.615% 0.17702 91.231);
    --secondary-bland-color-deepdark: oklch(50.615% 0.17702 91.231);

    --third-bland-color-lightbright: oklch(70.086% 0.1159 30.396);
    --third-bland-color-bright: oklch(60.127% 0.15722 30.396);
    --third-bland-color: oklch(54.808% 0.21722 30.396);
    --third-bland-color-dark: oklch(30% 0.055 30.396);
    --third-bland-color-darkdark: oklch(22% 0.045 30.396);

    --accent-color: #4B1C1C;

    /* 背景 */
    --cta-bg-color: #fff1d2;
    --bg-primary-tuning-color: oklch(92% 0.05 261.028);
    --bg-yellow-tuning-color: #fff7e6;

    /* その他 */
    --black: #222222;
    --white: white;
    --red: #e60012;
    --darkpink: #f199bf;
    --yellow: #f5f500;
    --green-of-line: #06c755;
    --green-of-line-bright: #82c09c;
    --green-of-line-banner: #00b900;
    --interest-circle-color: #f2f2f2;

    /* 灰 */
    --darkgray: #333333; /* 落ち着いた印象。Webデザイン定番のテキスト・背景色 */
    --darkgray-bright: #555555;   /* 明るめのダークグレー。補助テキストやサブ情報に最適。 */
    --gray: #666666;              /* 目立たせない要素や説明に使いやすい */
    --lightgray: #999999;         /* 背景とのコントラストを弱め、補助的な要素に最適 */
    --lightgray-bright: #cccccc;  /* 境界線や背景に使用すると主張しすぎず、引き締め効果を発揮 */
    --whitegray: #f5f5f5;         /* 背景色として優秀で柔らかい印象 */

    /* 白 */
    --white: #ffffff;             /* 清潔感 */
    --snow-white: #fffafa;        /* 清潔感、純粋さ、洗練された印象 */
    --off-white: #f5f5f5;         /* 温かみや柔らかい効果 */
    --ivory: #fffff0;             /* リラックス効果と優しい穏やかな空気に */

    /* 線関係 */
    --border-color-dimgrey: #4d4d4d;

    /* ヘッダー関係 */
    --height-header-pc: 73px;
    --height-header-tablet: 51px;
    --height-element-in-header-tablet: 29px;
    --height-header-sp: 51px;
    --height-element-in-header-sp: 29px;

    /* 画面幅 */
    --inner-xlarge: 1400px;
    --inner-large: 1280px;
    --inner-medium: 1140px;
    --inner-small: 960px;
    --inner-xsmall: 800px;

    /* --inner-medium要素の左端と合わせる計算式 */
    --left-edge-to-inner-medium: calc((100% - var(--inner-medium)) / 2); 

    /* 文字関係 */
    --line-height: 1.5;
    --paragraph-margin: 1em;

    /* ジャンプ率 */
    --golden-ratio: 1.618;
    --silver-ratio: 1.414;
    --silver-ratio-half: 1.207;

    /* 文字サイズ */
    --fontsize-xxsmall: calc(var(--fontsize-medium) * 0.6);
    --fontsize-xsmall: calc(var(--fontsize-medium) * 0.7);
    --fontsize-small: calc(var(--fontsize-medium) * 0.8);
    --fontsize-medium: 1.6rem;
    --fontsize-xmedium: calc(var(--fontsize-medium) * var(--silver-ratio-half));;
    --fontsize-large: calc(var(--fontsize-medium) * var(--silver-ratio));
    --fontsize-xlarge: calc(var(--fontsize-large) * var(--silver-ratio));
    --fontsize-xxlarge: calc(var(--fontsize-xlarge) * var(--silver-ratio));
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: inherit;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: var(--height-header-pc);
}

body {
    font-family: "Noto Serif JP", "ヒラギノ明朝 ProN W6", HiraMinProN-W6, HG明朝E, "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;    margin: 0 auto;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 1px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
}

section {
    display: grid;
    place-items: center;
    padding: 64px 5%
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    section {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

p, a, dl {
    font-size: 1.6rem;
}

p {
    line-height: 1.5;
    color: var(--black);
}

.test {
    margin-bottom: var(--paragraph-margin);
}

a {
    text-decoration: none;
    color: var(--black);
}

a:hover {
    opacity: 0.6;
}

em {
    font-style: normal;
}

strong {
    font-weight: bold;
}

address {
    font-style: normal;
}

figcaption {
    font-size: 1.6rem;
    padding: 16px;
    text-align: center;
}

picture {
    display: block;
    line-height: 0;
}

.space {
    margin-top: 80px;
}