:root {
    /* common setting */

    /* 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-deep-1: #313336;
    --d-color-deep-2: #1D1E1F;

    /* brand color start */
    --d-brand-color: #51B3B1;
    --d-brand-color-thin-1: #7BD7D5;
    --d-brand-color-thin-2: #A5E3E2;
    --d-brand-color-thin-3: #C7E6E5;
    --d-brand-color-deep-1: #24908E;
    --d-brand-color-deep-2: #006361;

    --d-brand-passion-color: #FFEB9F;
    --d-brand-passion-color-thin-1: #FFF8DF;
    --d-brand-passion-color-deep-1: #FFDC5A;
    --d-brand-passion-color-deep-2: #F9C918;
    --d-brand-passion-color-deep-3: #E4B505;

    --d-brand-change-color: #FFB1B1;
    --d-brand-change-color-thin-1: #FFE8E8;
    --d-brand-change-color-deep-1: #FF9292;

    --attention-color: #800019;

    --d-brand-sub-color: #979797;
    --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 * /

    /* 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.75 ); /* 1.2rem */
    --d-font-size-min-2: calc( var(--d-font-size) * 0.5 );  /* 0.8rem */
    --d-font-size-min-3: calc( var(--d-font-size) * 0.7 );
    --d-font-size-min-4: calc( var(--d-font-size) * 0.6 ); /* 1rem に相当 */

    /* 読み物用 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-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:    'Open Sans Condensed',ヒラギノ角ゴ Pro W3, ＭＳ\ ゴシック, MS Gothic, Osaka－等幅, Osaka-mono, monospace, 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;

    /* 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-left-side-nav : 60px;
    --width-main : 690px;
    --width-right-side-nav : 336px;
    --width-in: calc( var(--width-main) + var(--width-right-side-nav));
}
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%);}

/**********************
font-face
***********************/
@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(--d-brand-color-deep-1);
}
a:link, a:visited {
    text-decoration: none;
}

a:active, a:hover {
    text-decoration: underline;
}
/**********************
not Copy
***********************/
dt,
dd,
h3,
h2,
h1,
li,
span,
p,
img,
ul,
ol {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
img{
    pointer-events:none;
}