:root {

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

    --primary-bland-color-lightbright: oklch(60.086% 0.01159 162.827);
    --primary-bland-color-bright: oklch(49.932% 0.03132 162.827);
    --primary-bland-color: oklch(37.394% 0.06227 162.827);
    --primary-bland-color-dark: oklch(30% 0.055 162.827);
    --primary-bland-color-deepdark: oklch(22% 0.045 162.827);
    --black-transparent: #00000085;



    --secondary-bland-color: #E9A418;
    --accent-color: #4B1C1C;

    /* 背景色 */
    /* --primary-bg-color: oklch(25.424% 0.04303 144.212); */
    --primary-bg-color: oklch(22% 0.045 162.827);;
    --secondary-bg-color: #eeeeee;
    --third-bg-color: white;
    --third-bg-color-transparent: #1c4b37ef;
    --fourth-bg-color: #4B1C1C;
    --category-bg-color: #9c9c9c;
    --term-bg-color: #c6c7c8;

    /* その他 */
    --black: rgb(34, 34, 34);
    --white: white;
    --red: #e60012;
    --darkpink: #f199bf;
    --yellow: #f5f500;
    --lightgrey: #eeeeee;
    --green-of-line: #06c755;
    --green-of-line-banner: #00b900;

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

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

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

    /* ヘッダー関係 */
    --height-header-pc: 78.4px;
    --height-header-tablet: 64px;
    --height-element-in-header-tablet: 40px;
    --height-header-sp: 56px;
    --height-element-in-header-sp: 32px;

    /* 画面幅 */
    --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.7);
    --fontsize-xsmall: calc(var(--fontsize-medium) * 0.8);
    --fontsize-small: calc(var(--fontsize-medium) * 0.9);
    --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));
}

*,
*: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: 104px
}

body {
    /* font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif; */
    /* font-family: "Cormorant Garamond", "Times New Roman", serif; */
    /* font-family: "Playfair Display", "Times New Roman", serif; */
    font-family: "Noto Serif JP", "ヒラギノ明朝 ProN W6", HiraMinProN-W6, HG明朝E, "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

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

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

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