:root {
    /* common setting */
    /* bootstrap.php _CSS_IMG_VER と値を合わせる  */
    /* --img_ver : 220809144421; */
    /* 文字列の連結ができないので直接記述とする */

    /* デフォルトのフォントを変更する*/
    --base-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

    /* mpbile用 PCで読み込む際に計算式で必要 数字に影響が出ないように1とする start */
    --mobile-margin-top-balance: 1;
    --mobile-font-balance :1;
    --mobile-width-balance :1;
    --mobile-margin-left-balance :1;
    /* mpbile用 end */

    --d-color: #4D5156; /* --default-color */
    --d-color-thin-0: #64686C;
    --d-color-thin-1: #83878C;
    --d-color-thin-2: #B8BBBF;
    --d-color-thin-3: #DFE2E5;
    --d-color-thin-4: #F5F5F5;
    --d-color-thin-5: #F7F6F6;

    --d-color-deep-1: #313336;
    --d-color-deep-2: #1D1E1F;

    /* brand color start */
    --primary-color: #D01516;
    --primary-color-2: #D73B14;
    --primary-color-3: #E06D1E;
    --primary-color-4: #FFE8CF;
    --primary-color-5: #FFF9F3;
    --error-color: #EE141E;
    --white : #fff;
    --black : #000;
    --d-contents-background-color: #F5F5F5;

    /* padding */
    --d-padding-r: 1.2em; /* --default-padding-right */
    --d-padding-l: 1.2em; /* --default-padding-left */
    --d-padding-b: 3em; /* --default-padding-bottom * /

    /* header 調整の変数*/
    --header-margin: 57px;

    /* margin */
    --d-margin-r: 1.2em; /* --default-padding-right */
    --d-margin-l: 1.2em; /* --default-padding-left */
    --d-margin-b: 6em; /* --default-padding-bottom * /

    /* font size */
    --d-font-size: 1.6rem; /* --default-font-size */

    --d-font-size-1: calc( var(--d-font-size) * 1.25 ); /* 2.4rem */
    --d-font-size-2: calc( var(--d-font-size) * 1.35 );   /* 3.2rem */
    --d-font-size-3: calc( var(--d-font-size) * 1.5 );   /* 3.2rem */
    --d-font-size-4: calc( var(--d-font-size) * 1.75 );
    --d-font-size-5: calc( var(--d-font-size) * 2 );
    --d-font-size-6: calc( var(--d-font-size) * 2.25 );

    --d-font-size-min-0: calc( var(--d-font-size) * 0.9 ); /* 1.2rem */
    --d-font-size-min-1: calc( var(--d-font-size) * 0.85 ); /* 1.2rem */
    --d-font-size-min-2: calc( var(--d-font-size) * 0.8 );  /* 0.8rem */
    --d-font-size-min-3: calc( var(--d-font-size) * 0.75 );
    --d-font-size-min-4: calc( var(--d-font-size) * 0.45 ); /* 1rem に相当 */
    --d-font-size-min-5: calc( var(--d-font-size) * 0.4 );
    /* 読み物用 size */
    --read-font-size: 1.8rem;
    --read-line-height: 1.8;

    /* font margin */
    --d-font-margin-b: 1.5em; /* --default-font-margin-bottom */
    --d-font-size-2-margin-b: 0.4em; /* --d-font-size-2-margin-bottom */
    --d-font-size-4-margin-b: 1em; /* --d-font-size-4-margin-bottom */

    /* line height */
    --d-font-line-h: 1.8; /* --default-font-line-height */
    --d-font-line-h-1: calc( var(--d-font-line-h) * 1.111 );
    --d-font-line-h-2: calc( var(--d-font-line-h) * 1.33 );
    --d-font-line-h-min-1: calc( var(--d-font-line-h) * 0.92);
    --d-font-line-h-min-2: calc( var(--d-font-line-h) * 0.8);

    /* font family */
    /*  'Noto Serif JP'は android micho 対応 */
    --font-price-bord: 'DIN-Exp', Hiragino Sans, "ヒラギノ角ゴシック",
    Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3",
    Roboto, "Droid Sans",
    YuGothic, "游ゴシック",
    Verdana, "ＭＳ Ｐゴシック",
    Arial, BIZ UDPGothic,
    Meiryo, "メイリオ",
    ＭＳ\ ゴシック, MS Gothic, Osaka－等幅, Osaka-mono, monospace;

    --font-f-en-gothic: 'DIN', Hiragino Sans, "ヒラギノ角ゴシック",
    Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3",
    Roboto, "Droid Sans",
    YuGothic, "游ゴシック",
    Verdana, "ＭＳ Ｐゴシック",
    Arial, BIZ UDPGothic,
    Meiryo, "メイリオ",
    ＭＳ\ ゴシック, MS Gothic, Osaka－等幅, Osaka-mono, monospace;

    --font-f-en-ranking: 'Zapf', ＭＳ\ Ｐ明朝, MS PMincho, ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serif;
    --font-f-en-big:    'Didot', ＭＳ\ Ｐ明朝, MS PMincho, ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serif;
    --font-f-en:        'Windsor', ＭＳ\ Ｐ明朝, MS PMincho, ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serif;
    --font-f-mincho:    ＭＳ\ Ｐ明朝, MS PMincho, ヒラギノ明朝 Pro W3, Hiragino Mincho Pro,'Noto Serif JP',  serif;
    --font-f-mincho-h:  'Hannari', ＭＳ\ Ｐ明朝, MS PMincho, ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, 'Noto Serif JP', serif;
    --font-f-gothic:
            Hiragino Sans, "ヒラギノ角ゴシック",
            Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3",
            Roboto, "Droid Sans",
            YuGothic, "游ゴシック",
            Verdana, "ＭＳ Ｐゴシック",
            Arial, BIZ UDPGothic,
            Meiryo, "メイリオ",
            ＭＳ\ ゴシック, MS Gothic, Osaka－等幅, Osaka-mono, monospace;

    --font-f-number:    'D-DIN',ヒラギノ角ゴ Pro W3, ＭＳ\ ゴシック, MS Gothic, Osaka－等幅, Osaka-mono, monospace, sans-serif;

    --font-f-tel-number: "Lato", sans-serif;

    --font-f-times-italic: 'Old Standard TT', ＭＳ\ Ｐ明朝, MS PMincho, ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serif;

    --d-font-weight-light: 280;
    --d-font-weight: 400;

    --d-font-weight-bold-2:700;
    --d-font-weight-bold-1:650;
    --d-font-weight-bold: 600;
    --d-font-weight-bold-min-0:550;
    --d-font-weight-bold-min-1:450;

    /* indent title */
    --d-indent: 2em;
    --d-indent-min-0: 0px;
    --d-indent-min-1: -1px;

    /* heroImage用 */
    --hero-height : 540px;

    /* common shadow */
    --shadow : 0 -2px 10px rgba(0,0,0,.15);
    --shadow-top:0 -15px 10px rgba(0,0,0,.15);
    --shadow-in : 0 10px 10px rgba(0,0,0,.3) inset;
    --shadow-thin-1 : 0 -1px 5px rgba(0,0,0,.05);

    /* common in page contents width */
    --width-sidebar : 230px;
    --width-main : 980px;
    --width-in: 735px;
}
body{
    font-family: var(--base-font);
}
body *:not(h1){
    /* body の h1以外に yellow */
    /* background-color: yellow; */
}
/**********************
font size
***********************/
.f-min1{
    padding: 1em 2em;
    font-size: var(--d-font-size-min-1);
    line-height: var(--d-font-line-h-1);
    margin-bottom: var(--d-font-margin-b);
}
.f-min2{
    font-size: var(--d-font-size-min-2);
    line-height: var(--d-font-line-h);
    margin-bottom: var(--d-font-margin-b);
}
/**********************
font family
***********************/
.ff-m{
    font-family: var(--font-f-mincho);
}
.ff-m-h{
    font-family: var(--font-f-mincho-h);
}
.ff-en{
    font-family: var(--font-f-en);
}
.ff-g{
    font-family: var(--font-f-gothic);
}
.ff-g-b{
    font-family: var(--font-f-gothic);
    font-weight: var(--d-font-weight-bold);
}
.ff-num{
    font-family: var(--font-f-number);
}
.ff-i{
    font-family: var(--font-f-times-italic);
}
/**********************
font decoration
***********************/
.b{ font-weight: var(--d-font-weight-bold); margin-right:0.3em; }
.marker-y{ background: linear-gradient(transparent 70%, #FFF89D 70%);}
.marker-r{ background: linear-gradient(transparent 70%, #FFF89D 70%);}


/**********************
text-indent
***********************/
.indent-min-0{
    letter-spacing: var(--d-indent-min-0);
}
.indent-min-1{
    letter-spacing: var(--d-indent-min-1);
}

/**********************
font-face
***********************/
@font-face {
    font-family: 'Helvetica';
    src:
            url('../font/Zapfino.woff2') format('woff2'),
            url('../font/Zapfino.woff') format('woff'),
            url('../font/Zapfino.eot') format('embedded-opentype');
    font-display: swap;
}
@font-face {
    font-family: 'Didot';
    src:
            url('../font/Didot.woff2') format('woff2'),
            url('../font/Didot.woff') format('woff'),
            url('../font/Didot.eot') format('embedded-opentype');
    font-display: swap;
}
@font-face {
    font-family: 'DIN';
    src:
            url('../font/D-DINCondensed.woff2') format('woff2'),
            url('../font/D-DINCondensed.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'DIN-Exp';
    src:
            url('../font/D-DINExp-Bold.woff2') format('woff2'),
            url('../font/D-DINExp-Bold.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Hannari';
    src:
            url('../font/Subset_Hannari.woff2') format('woff2'),
            url('../font/Subset_Hannari.woff') format('woff'),
            url('../font/Subset_Hannari.otf') format('opentype');
    font-display: swap;
}
@font-face {
    font-family: 'Windsor';
    src: url('../font/Subset_windsorlightbt.eot');
    src:
            url('../font/Subset_windsorlightbt.woff2') format('woff2'),
            url('../font/Subset_windsorlightbt.woff') format('woff'),
            url('../font/Subset_windsorlightbt.eot') format('embedded-opentype'),
            url('../font/Subset_windsorlightbt.ttf') format('truetype');
    font-display: swap;
}
.fonts_hannari{ font-family:var( --font-f-mincho-h);}
/**********************
link
***********************/
a{
    text-decoration: none;
    color: var(--primary-color  );
    animation-name:fadeInAnime;
    animation-duration:.5s;
    animation-fill-mode:forwards;
}
a:link, a:visited {
    text-decoration: none;
}

a:active, a:hover {
    text-decoration: underline;
}

picture{
    display: block;
}
img{
    pointer-events:none;
}

::placeholder {
    color:var(--d-color-thin-2);
}
html {
    scroll-behavior: smooth;
}