/*************************************************
variables.css
**************************************************/
/* 変数 */
:root {

--scrollbar-width: 0px; --header-height: 189.81666564941406; --header-width: 1543.199951171875; --headerCZ-height: 189.81666564941406;
 --headerCZ-width: 1400; --sh-logo-height: 199.38333129882812; --sh-logo-width: 231.48333740234375; --slider-height: 564; --slider-width: 1400;
 
  /* common ＞ design-template ＞ size ＞ Buttons */
  --button-size--min-mobile : 48px; /*andriod*/
  --button-size--min-ios    : 44px; /*ios*/

  /*  common ＞ design-template ＞ size ＞ Negative */
  --negative-1  : -1px;
  --negative-2  : -2px;
  --negative-4  : -4px;
  --negative-8  : -8px;
  --negative-12 : -12px;
  --negative-16 : -16px;
  --negative-24 : -24px;

  /* common ＞ design-template ＞ Elevation */
  --elevation-01 : 0px 2px 8px 1px rgba(0, 0, 0, 0.1), 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
  --elevation-02 : 0px 2px 12px 2px rgba(0, 0, 0, 0.1), 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
  --elevation-03 : 0px 4px 16px 3px rgba(0, 0, 0, 0.1), 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
  --elevation-04 : 0px 6px 20px 4px rgba(0, 0, 0, 0.1), 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
  --elevation-05 : 0px 8px 24px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px 0px rgba(0, 0, 0, 0.3);
  --elevation-06 : 0px 10px 30px 6px rgba(0, 0, 0, 0.1), 0px 3px 12px 0px rgba(0, 0, 0, 0.3);
  --elevation-07 : 0px 12px 36px 7px rgba(0, 0, 0, 0.1), 0px 3px 14px 0px rgba(0, 0, 0, 0.3);
  --elevation-08 : 0px 14px 40px 7px rgba(0, 0, 0, 0.1), 0px 3px 16px 0px rgba(0, 0, 0, 0.3);

  /* common ＞ z-index */
  --stack-top        : calc(infinity);
  --stack-drawer     : 300;
  --stack-head       : 200;
  --stack-foot       : 100;
  --stack-foreground : 1;
  --stack-background : -1;

  /* common ＞ font ＞ ratio */
  --font-size-base : 16;
  --em             : 1em / 16;
  --rem            : 1rem / 16;
  /* common ＞ font ＞ value */
  --font-size      : calc(var(--font-size-base) * var(--em)); /* 1em */
  /* common ＞ font ＞ property */
  --font-size-10   : calc(10 / var(--font-size-base) * var(--font-size));
  --font-size-11   : calc(11 / var(--font-size-base) * var(--font-size));
  --font-size-12   : calc(12 / var(--font-size-base) * var(--font-size));
  --font-size-13   : calc(13 / var(--font-size-base) * var(--font-size));
  --font-size-14   : calc(14 / var(--font-size-base) * var(--font-size)); /* 0.875em */
  --font-size-15   : calc(15 / var(--font-size-base) * var(--font-size));
  --font-size-16   : var(--font-size); /* 1em */
  --font-size-18   : calc(18 / var(--font-size-base) * var(--font-size)); /* 1.125em */
  --font-size-19   : calc(19 / var(--font-size-base) * var(--font-size));
  --font-size-20   : calc(20 / var(--font-size-base) * var(--font-size)); /* 1.25em */
  --font-size-22   : calc(22 / var(--font-size-base) * var(--font-size)); /* 1.375em */
  --font-size-24   : calc(24 / var(--font-size-base) * var(--font-size)); /* 1.5em */
  --font-size-26   : calc(26 / var(--font-size-base) * var(--font-size)); /* 1.625em */
  --font-size-28   : calc(28 / var(--font-size-base) * var(--font-size)); /* 1.75em */
  --font-size-30   : calc(30 / var(--font-size-base) * var(--font-size)); /* 1.875em */
  --font-size-32   : calc(32 / var(--font-size-base) * var(--font-size)); /* 2em */
  --font-size-36   : calc(36 / var(--font-size-base) * var(--font-size)); /* 2.25em */
  --font-size-44   : calc(44 / var(--font-size-base) * var(--font-size));
  --font-size-48   : calc(48 / var(--font-size-base) * var(--font-size));
  --font-size-64   : calc(64 / var(--font-size-base) * var(--font-size));
  --letter-spacing : normal;

  /* common ＞ font ＞ Weight */
  /* value */
  --FontWeight-400     : 400;
  --FontWeight-500     : 500;
  /* property */
  --fontweight-regular : var(--FontWeight-500);
  --fontweight-medium  : var(--FontWeight-500);

  /* common ＞ space */
  --space-measure : unset;

  --space-unit : calc(8 * var(--rem));
  --space-none : 0;
  --space-1    : calc(1 * var(--rem)); /* 1px */
  --space-2    : calc(2 * var(--rem)); /* 2px */
  --space-4    : calc(4 * var(--rem)); /* 4px */
  --space-6    : calc(6 * var(--rem)); /* 6px */
  --space-8    : var(--space-unit); /* 8px */
  --space-12   : calc(12 * var(--rem)); /* 12px */
  --space-16   : calc(16 * var(--rem)); /* 16px */
  --space-24   : calc(24 * var(--rem)); /* 24px */
  --space-32   : calc(32 * var(--rem)); /* 32px */
  --space-40   : calc(40 * var(--rem)); /* 40px */
  --space-48   : calc(48 * var(--rem)); /* 48px */
  --space-64   : calc(64 * var(--rem)); /* 64px */
  --space-80   : calc(80 * var(--rem)); /* 80px */
  --space-96   : calc(96 * var(--rem)); /* 96px */
  --space-128  : calc(128 * var(--rem)); /* 128px */
  --space-160  : calc(160 * var(--rem)); /* 160px */

  /* common ＞ Responsive */
  --max-content-width : 1120px;
  --container-content : calc(var(--max-content-width) + calc(var(--space-16) * 2));
  --device-width-sm   : 576px;
  --device-width-md   : 768px;
  --device-width-lg   : 992px;
  --device-width-xl   : 1200px;
  --device-width-xxl  : 1440px;

  /* common ＞ Aspect-ratio */
  --aspect-square         : 1 / 1;
  --aspect-video          : 16 / 9;
  --aspect-video-vertical : 9 / 16;
  --aspect-golden         : 1.618 / 1;
  --aspect-photo          : 4 / 3;
  --aspect-photo-vertical : 3 / 4;
  --aspect-landscape      : 3 / 2;
  --aspect-portrait       : 2 / 3;
  --aspect-thumbnail      : 1.91 / 1;

  /* common ＞ Border-radius */
  --rounded-4    : 4px;
  --rounded-6    : 6px;
  --rounded-8    : 8px;
  --rounded-12   : 12px;
  --rounded-16   : 16px;
  --rounded-24   : 24px;
  --rounded-32   : 32px;
  --rounded-full : calc(infinity * 1px);

  /* common ＞ Border-width */
  --border-width-sm : 0.5px;
  --border-width-md : 1px;
  --border-width-lg : 2px;
  --border-width-xl : 4px;

  --border-width-default-when-hover  : 3px;
  --border-width-form-input-default  : 1px;
  --border-width-form-button-default : 1px;

  /* サイト別設定 ＞ Border-width */


  /* common ＞ Outline-width */
  --outline-width-md : 1px;
  --outline-width-lg : 2px;
  --outline-width-xl : 4px;

  /* common ＞ Layout */
  /* ビューポートの最小幅 (ピクセル単位) */
  --min-viewport-width: 375;
  /* ビューポートの最大幅 (ピクセル単位) */
  --max-viewport-width: 1400;

  /* ------- typography ------- */
  --font-primary-default: Noto sans JP, Helvetica Neue, arial, Hiragino Kaku Gothic ProN, Hiragino Sans, BIZ UDPGothic, meiryo, sans-serif;
  /* ------- Font Size ------- */

  /* サイト別設定 ＞ フォント */
  --font-primary : "游ゴシック体 Medium", Noto sans JP, Helvetica Neue, arial, Hiragino Kaku Gothic ProN, Hiragino Sans, BIZ UDPGothic, meiryo, sans-serif;
  --font-ennum   : 'Fira Sans Extra Condensed', sans-serif; /* linkタグが必要 */


  /*  サイト別設定 ＞ レイアウト */
  /* site-proper-standard */
  /* the-widest-media */
  /* th-nannowest-media */
  --sps-glbl-layout-twm-padding-right : 10%;
  --sps-glbl-layout-twm-padding-left  : 10%;

  --sps-glbl-layout-md1-padding-right : 7.5%;
  --sps-glbl-layout-md1-padding-left  : 7.5%;
  
  --sps-glbl-layout-md2-padding-right : 1%;
  --sps-glbl-layout-md2-padding-left  : 1%;

  --sps-glbl-layout-tnm-padding-right : 5%;
  --sps-glbl-layout-tnm-padding-left  : 5%;
         

  /* ------- Letter Spacing ------- */
  /* ratio */
  --tracking-unit     : 0.1em;
  /* value */
  --tracking-value-0  : 0; /* 0 (0) */
  --tracking-value-1  : 0.1; /* 0.01em (1%) */
  --tracking-value-2  : 0.2; /* 0.02em (2%) */
  --tracking-value-3  : 0.3; /* 0.03em (3%) */
  --tracking-value-4  : 0.4; /* 0.04em (4%) */
  --tracking-value-5  : 0.5; /* 0.05em (5%) */
  --tracking-value-6  : 0.6; /* 0.06em (6%) */
  --tracking-value-7  : 0.7; /* 0.07em (7%) */
  --tracking-value-8  : 0.8; /* 0.08em (8%) */
  --tracking-value-9  : 0.9; /* 0.09em (9%) */
  --tracking-value-10 : 1; /* 0.1em (10%) */
  /* property */
  --tracking-0  : calc(var(--tracking-value-0) * var(--tracking-unit));
  --tracking-1  : calc(var(--tracking-value-1) * var(--tracking-unit));
  --tracking-2  : calc(var(--tracking-value-2) * var(--tracking-unit));
  --tracking-3  : calc(var(--tracking-value-3) * var(--tracking-unit));
  --tracking-4  : calc(var(--tracking-value-4) * var(--tracking-unit));
  --tracking-5  : calc(var(--tracking-value-5) * var(--tracking-unit));
  --tracking-6  : calc(var(--tracking-value-6) * var(--tracking-unit));
  --tracking-7  : calc(var(--tracking-value-7) * var(--tracking-unit));
  --tracking-8  : calc(var(--tracking-value-8) * var(--tracking-unit));
  --tracking-9  : calc(var(--tracking-value-9) * var(--tracking-unit));
  --tracking-10 : calc(var(--tracking-value-10) * var(--tracking-unit));

  /* common ＞ Colors ＞ color-template ＞ fixed-using-as-const */
  /* コントラスト変化でも、ここの色変数（の値）は変化させないこと */
  --color-const-black                   : #000;
  --color-const-white                   : #fff;
  --color-const-bluet-link              : #3922ad;
  --color-const-blue2-as-default-link   : #0a3760;
  --color-const-water1-as-default-link  : #3299fa;
  --color-const-red1-as-default-focused : #E71B12;
  
  /* common ＞ Colors ＞ neutral */
  --color-neutral-100 : #000;
  --color-neutral-90  : #1a1a1a; /*#000 90%*/
  --color-neutral-80  : #333; /*#000 80%*/
  --color-neutral-70  : #4d4d4d; /*#000 70%*/
  --color-neutral-60  : #666; /*#000 60%*/
  --color-neutral-54  : #767676; /*#000 54%*/
  --color-neutral-50  : #7f7f7f; /*#000 50%*/
  --color-neutral-42  : #949494; /*#000 42%*/
  --color-neutral-40  : #999; /*#000 40%*/
  --color-neutral-30  : #b3b3b3; /*#000 30%*/
  --color-neutral-20  : #ccc; /*#000 20%*/
  --color-neutral-10  : #e6e6e6; /*#000 10%*/
  --color-neutral-5   : #f5f5f5; /*#000 5%*/
  --color-neutral-0   : #fff; /*#000 0%*/

  /* サイト別設定 ＞ サイト固有色 */
  /* ここで宣言された変数自体は「highcontrast.css」「lowcontrast.css」では変更しないこと。 */
  /* 原則として、ここで宣言された変数は直接参照せず、「サイト別設定 ＞ primary」で参照して利用するのが原則 */

  --color-site-proper-mizuho     : #D1FEFB;
  --color-site-proper-motosayama : #FBC2C3;
  --color-site-proper-nagaoka    : #D1ECB1;  
  --color-site-proper-musashino  : #F1F46F; /* 黄 <= クリーム */
  --color-site-proper-tonogaya   : #F9B759; /* オレンジ <= 黄 */

  --color-site-proper-01-a       : #7ED2C3; /* C50、M0、Y25	濃度100％ */
  --color-site-proper-01-b       : #B8E6DA; /* C50、M0、Y25	濃度55％ */
  --color-site-proper-02-a       : #F580AA; /* C0、M50、Y15	濃度100％ */
  --color-site-proper-02-b       : #F8B8CD; /* C0、M50、Y15	濃度55％ */

  /* https://kamimotto.jp/SHOP/187084/list.html */

  --color-site-proper-gry1       : #dcdcdc; /* (220/255) 14% */
  --color-site-proper-gry2       : #E0E0E0;
  --color-site-proper-gry3       : #c5c5c5;
  --color-site-proper-gry4       : #c2c2c2;

  --color-site-proper-91-a       : #F3F2F2; /* 画像（非透過部分＞波線）と同じ色 */

  /*  サイト別設定 ＞ スライダー ＞ ドット */
  /* ※要素自体の背景と、その親要素の背景はセットで設定・変更する必要がある */
  --color-site-btn1-parent-bg                   : var(--color-site-proper-91-a);

  /* active-押されていて、もう状態変化あるまで押せない */
  /* enabled-まだ押されておらず、押して確定させると状態変化が起こる状態 */
  --color-site-btn1-self-active-notOn-bg        : var(--color-neutral-100);
  --color-site-btn1-self-active-on-bg           : var(--color-neutral-100);
  --color-site-btn1-self-enabled-notOn-bg       : var(--color-site-proper-gry3);
  --color-site-btn1-self-enabled-on-bg          : var(--color-site-proper-gry2);

  --color-site-btn1-self-active-notOn-brd       : var(--color-neutral-100);
  --color-site-btn1-self-active-on-brd          : var(--color-neutral-100);
  --color-site-btn1-self-enabled-notOn-brd      : var(--color-site-proper-gry3);
  --color-site-btn1-self-enabled-on-brd         : var(--color-site-proper-gry2);

  --color-site-btn1-self-active-notOn-outLine   : var(--color-neutral-100);
  --color-site-btn1-self-active-on-outLine      : var(--color-neutral-100);
  --color-site-btn1-self-enabled-notOn-outLine  : var(--color-site-proper-gry3);
  --color-site-btn1-self-enabled-on-outLine     : var(--color-site-proper-gry2);

  /* サイト別設定 ＞ primary */
  /* ここで独自の色を（指定）宣言することは原則禁止 */
  --color-named-01-01-by-site   : var(--color-site-proper-mizuho);
  --color-named-01-02-by-site   : var(--color-site-proper-motosayama);
  --color-named-01-03-by-site   : var(--color-site-proper-nagaoka);
  --color-named-01-04-by-site   : var(--color-site-proper-musashino);
  --color-named-01-05-by-site   : var(--color-site-proper-tonogaya);

  --color-primary-01-a          : var(--color-site-proper-01-a);
  --color-primary-01-b          : var(--color-site-proper-01-b);
  --color-primary-02-a          : var(--color-site-proper-02-a);
  --color-primary-02-b          : var(--color-site-proper-02-b);

  /* サイト別設定 ＞ other-default */
  --color-text                  : var(--color-const-black); /* #3621150; */
  --color-gray                  : var(--color-neutral-54);
  --color-right-gray            : var(--color-neutral-42);
  --color-white                 : var(--color-neutral-0);
  --color-black                 : var(--color-neutral-100);
  --color-link                  : var(--color-const-blue1-as-default-link);

  --color-img-cnstrctFilter-for-black : none;

  /* Semantic Colors:Text Colors */
  --color-text-default                        : var(--color-text);
  --color-text-bredcrumb                      : var(--color-text);
  --color-text-bredcrumb-link                 : var(--color-link);
  --color-text-form-input-placeholder-default : var(--color-neutral-54);
  --color-text-form-input-inputed-default     : var(--color-neutral-100);

  /* 背景色 ＞ 共通機能 ＞ 標準（スライダー） */
  --color-bg-slider-ctrl-btn-active-notOn    : var(--color-site-btn1-self-active-notOn-bg);
  --color-bg-slider-ctrl-btn-active-on       : var(--color-site-btn1-self-active-on-bg);
  --color-bg-slider-ctrl-btn-enabled-notOn   : var(--color-site-btn1-self-enabled-notOn-bg);
  --color-bg-slider-ctrl-btn-enabled-on      : var(--color-site-btn1-self-enabled-on-bg);

  /* 背景色 ＞ 共通機能 ＞ 標準（フォーム） */
  --color-background-form-input-default   : var(--color-neutral-0);
  --color-background-form-button-default  : var(--color-neutral-54);
  --color-background-gene-button-default  : var(--color-neutral-54);
  --color-background-gene-button-hover    : var(--color-neutral-0);
  --color-background-gene-button-pushed   : var(--color-neutral-50);

  /* 背景色 ＞ サイト別設定 */
  /* Semantic Colors:Background Colors */
  --color-background-default                    : var(--color-white);

  --color-main-site-proper                      : var(--color-background-default);

  /* 背景色 ＞ サイト別設定 ＞ ヘッダーとフッター */
  --color-background-header-default             : var(--color-main-site-proper);
  
  --color-background-footer-default             : var(--color-main-site-proper);
  --color-background-footer-logoAndLocationZone : var(--color-primary-01-b);

  /* 背景色 ＞ サイト別設定 ＞ アクセシビリティ系 */
  --color-background-hbgMenu-canvus             : var(--color-neutral-0);
  --color-background-hbgMenu-bar                : var(--color-neutral-100);
  --color-background-drawer                     : var(--color-neutral-0);

  /* 背景色 ＞ サイト別設定 ＞ その他 */

 /* 境界線＞ 共通機能 ＞ 標準（スライダー） */
  --color-brd-slider-ctrl-btn-active-notOn   : var(--color-site-btn1-self-active-notOn-brd);
  --color-brd-slider-ctrl-btn-active-on      : var(--color-site-btn1-self-active-on-brd);
  --color-brd-slider-ctrl-btn-enabled-notOn  : var(--color-site-btn1-self-enabled-notOn-brd);
  --color-brd-slider-ctrl-btn-enabled-on     : var(--color-site-btn1-self-enabled-on-brd);

  --color-oLn-slider-ctrl-btn-active-notOn   : var(--color-site-btn1-self-active-notOn-outLine);
  --color-oLn-slider-ctrl-btn-active-on      : var(--color-site-btn1-self-active-on-outLine);
  --color-oLn-slider-ctrl-btn-enabled-notOn  : var(--color-site-btn1-self-enabled-notOn-outLine);
  --color-oLn-slider-ctrl-btn-enabled-on     : var(--color-site-btn1-self-enabled-on-outLine);

  /* 境界線＞ 共通機能 ＞ 標準（フォーム） */
  --color-border-default                        : var(--color-black);
  --color-border-form-input-default             : var(--color-neutral-20);
  --color-border-form-button-default            : var(--color-neutral-70);
  --color-border-form-focused-default           : var(--color-const-red1-as-default-focused);

  /* 境界線 ＞ 共通機能 ＞ アクセシビリティ系 */
  --color-border-accessibility-default : var(--color-neutral-100);
  --color-border-accessibility-bold    : var(--color-site-proper-01-b);

  --color-border-hbgMenu               : var(--color-neutral-100);

  /* 境界線 ＞ 共通機能 ＞ その他 */
  --color-border-bold                  : var(--color-border-default);

  /* 境界線 ＞ 共通機能 ＞ ホバー時 */
  --color-border-button-hover-01    : var(--color-site-proper-01-b);
  --color-border-underline-hover-01 : var(--color-site-proper-01-b);
  --color-border-underline-hover-02 : var(--color-site-proper-02-b);


  /* そのほか ＞ 共通機能 ＞ 画像 ＞ フィルター */
  --color-filter-for-only-black-img : none;
  --color-filter-cnstrst-for-black  : none;

}

/* サイト別設定 ＞ メディア幅ごとに再代入 */
:where(:root) {
  --sps-glbl-layout-sctn-mrgn-top     : 0;
  --sps-glbl-layout-sctn-mrgn-bttm    : 0;

  --sps-glbl-layout-sctn-padding-top  : 3.5em;
  --sps-glbl-layout-sctn-padding-bttm : 3.5em;

  --sps-glbl-layout-padding-left   : var(--sps-glbl-layout-twm-padding-left);
  --sps-glbl-layout-padding-right  : var(--sps-glbl-layout-twm-padding-right);

  --sps-lcl1-layout-padding-left   : var(--sps-glbl-layout-twm-padding-left);
  --sps-lcl1-layout-padding-right  : var(--sps-glbl-layout-twm-padding-right);
}

/* 320px,430px,576px,768px,800px,992px,1441px */
/* 1350px */
@media (width < 1350px) {
  :where(:root) {
    --sps-glbl-layout-padding-left  : var(--sps-glbl-layout-tnm-padding-left);
    --sps-glbl-layout-padding-right : var(--sps-glbl-layout-tnm-padding-right);

    --sps-lcl1-layout-padding-left  : var(--sps-glbl-layout-md2-padding-left);
    --sps-lcl1-layout-padding-right : var(--sps-glbl-layout-md2-padding-right);
  }
}
@media (width < 576px) {
  :where(:root) {
    --sps-lcl1-layout-padding-left  : var(--sps-glbl-layout-tnm-padding-left);
    --sps-lcl1-layout-padding-right : var(--sps-glbl-layout-tnm-padding-right);
  }
}