/************************************************* variables.css **************************************************/ /* 変数 */ :root { /* 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 : calc(16 / var(--font-size-base) * 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-21 : calc(21 / var(--font-size-base) * var(--font-size)); --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-25 : calc(25 / var(--font-size-base) * var(--font-size)); --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-35 : calc(35 / var(--font-size-base) * var(--font-size)); --font-size-36 : calc(36 / var(--font-size-base) * var(--font-size)); /* 2.25em */ --font-size-40 : calc(40 / var(--font-size-base) * var(--font-size)); --font-size-44 : calc(44 / var(--font-size-base) * var(--font-size)); --font-size-45 : calc(45 / var(--font-size-base) * var(--font-size)); --font-size-48 : calc(48 / var(--font-size-base) * var(--font-size)); --font-size-50 : calc(50 / var(--font-size-base) * var(--font-size)); --font-size-55 : calc(55 / var(--font-size-base) * var(--font-size)); --font-size-60 : calc(60 / 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-10 : 10px; --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 : 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-pure : #ff0000; --color-const-red1-as-default-focused : #E71B12; --color-const-model-txt-form-required : #dd0000; --color-const-model-txt-form-error : #dd0000; --color-const-model-brd-form-dot : #aaa; /* 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-central : #C0EDF5; --color-site-proper-ogori : #F7C3C2; --color-site-proper-aio : #D2ECB5; --color-site-proper-ajisu : #EFF47C; --color-site-proper-tokuji : #F3B863; --color-site-proper-ato : #E6DAFD; --color-site-proper-01-a : #004EA2; --color-site-proper-01-b : #2250A0; --color-site-proper-01-c : #204E9F; --color-site-proper-01-d : #0D2041; --color-site-proper-01-e : #296DB5; --color-site-proper-01-f : #223A75; --color-site-proper-01-g : #1C3D79; --color-site-proper-01-h : #062042; --color-site-proper-01-i : #688DC1; --color-site-proper-01-j : #3399FF; --color-site-proper-01-k : #062042; --color-site-proper-02-a : #E2F7F6; --color-site-proper-02-b : #BBEEF6; --color-site-proper-02-c : #C0EDF5; --color-site-proper-02-d : #66D9E8; --color-site-proper-02-e : #DBF5F9; --color-site-proper-02-f : #0DFFDB; --color-site-proper-02-g : #E4F7F6; --color-site-proper-02-h : #D1ECB1; --color-site-proper-02-i : #99E7DC; --color-site-proper-02-j : #C0D4F0; --color-site-proper-02-k : #d4e7ff; --color-site-proper-02-l : #35A4BD; --color-site-proper-02-m : #00A5BF; --color-site-proper-02-n : #a6e2eb; --color-site-proper-03-a : #E6DAFD; --color-site-proper-04-a : #4B3E2F; --color-site-proper-05-a : #D3FFCF; --color-site-proper-06-a : #FFCFD2; --color-site-proper-wht1 : #F4FDFF; --color-site-proper-wht2 : #F5FDFF; --color-site-proper-gry1 : #666666; --color-site-proper-gry2 : #ECEFF3; --color-site-proper-gry3 : #E9E9E9; --color-site-proper-91-a : #FF6600; /* ↑法令遵守（コンストラスト）のために算出した色 */ /* https://kamimotto.jp/SHOP/187084/list.html */ /* サイト別設定 ＞ スライダー ＞ ドット */ /* ※要素自体の背景と、その親要素の背景はセットで設定・変更する必要がある */ /* --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); */ /* サイト別固有色ではない定型色 */ /* 「highcontrast.css」「lowcontrast.css」で代入しなおす余地あり */ /* ただし還俗として「highcontrast.css」「lowcontrast.css」で代入しなおさない */ --color-white : var(--color-neutral-0); --color-white-for-txt-dflt : var(--color-white); --color-white-for-txt-on : var(--color-white); --color-white-for-bg-dflt : var(--color-white); --color-white-for-bg-on : var(--color-white); --color-white-for-brd-dflt : var(--color-white); --color-white-for-brd-on : var(--color-white); --color-black : var(--color-neutral-100); --color-black-for-txt-dflt : var(--color-black); --color-black-for-txt-on : var(--color-black); --color-black-for-bg-dflt : var(--color-black); --color-black-for-bg-on : var(--color-black); --color-black-for-brd-dflt : var(--color-black); --color-black-for-brd-on : var(--color-black); /* サイト別固有色ではない定型色 */ /* 「highcontrast.css」「lowcontrast.css」で代入しなおす */ --color-txt-form-required : var(--color-const-model-txt-form-required); --color-txt-form-error : var(--color-const-model-txt-form-error); --color-brd-form-dot : var(--color-const-model-brd-form-dot); /* サイト別設定 ＞ primary */ /* ここで独自の色を（指定）宣言することは原則禁止 */ /* 「highcontrast.css」「lowcontrast.css」で代入しなおす */ --color-named-01-01-by-site : var(--color-site-proper-central); --color-named-01-02-by-site : var(--color-site-proper-ogori); --color-named-01-03-by-site : var(--color-site-proper-aio); --color-named-01-04-by-site : var(--color-site-proper-ajisu); --color-named-01-05-by-site : var(--color-site-proper-tokuji); --color-named-01-06-by-site : var(--color-site-proper-ato); --color-primary-01-a : var(--color-site-proper-01-a); --color-primary-01-b : var(--color-site-proper-01-b); --color-primary-01-c : var(--color-site-proper-01-c); --color-primary-01-d : var(--color-site-proper-01-d); --color-primary-01-e : var(--color-site-proper-01-e); --color-primary-01-f : var(--color-site-proper-01-f); --color-primary-01-g : var(--color-site-proper-01-g); --color-primary-01-h : var(--color-site-proper-01-h); --color-primary-01-i : var(--color-site-proper-01-i); --color-primary-01-j : var(--color-site-proper-01-j); --color-primary-01-k : var(--color-site-proper-01-k); --color-primary-02-a : var(--color-site-proper-02-a); --color-primary-02-b : var(--color-site-proper-02-b); --color-primary-02-c : var(--color-site-proper-02-c); --color-primary-02-d : var(--color-site-proper-02-d); --color-primary-02-e : var(--color-site-proper-02-e); --color-primary-02-f : var(--color-site-proper-02-f); --color-primary-02-g : var(--color-site-proper-02-g); --color-primary-02-h : var(--color-site-proper-02-h); --color-primary-02-i : var(--color-site-proper-02-i); --color-primary-02-j : var(--color-site-proper-02-j); --color-primary-02-k : var(--color-site-proper-02-k); --color-primary-02-l : var(--color-site-proper-02-l); --color-primary-02-m : var(--color-site-proper-02-m); --color-primary-02-n : var(--color-site-proper-02-n); --color-primary-03-a : var(--color-site-proper-03-a); --color-primary-04-a : var(--color-site-proper-04-a); --color-primary-05-a : var(--color-site-proper-05-a); --color-primary-06-a : var(--color-site-proper-06-a); --color-primary-wht1 : var(--color-site-proper-wht1); --color-primary-wht2 : var(--color-site-proper-wht2); --color-primary-gry1 : var(--color-site-proper-gry1); --color-primary-gry2 : var(--color-site-proper-gry2); --color-primary-gry3 : var(--color-site-proper-gry3); --color-relect-01-a : var(--color-site-proper-91-a); /* サイト別設定 ＞ other-default */ /* --color-text : var(--color-const-black); --color-gray : var(--color-neutral-54); --color-right-gray : var(--color-neutral-42); --color-link : var(--color-const-blue1-as-default-link); */ --color-img-cnstrctFilter-for-black : none; /* Semantic Colors:Text Colors */ --color-txt-dflt : var(--color-black-for-txt-dflt); --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-dflt-bgBrdOlnBs-focused-01 : var(--color-relect-01-a); --color-bg-focused-01-src01-a : var(--color-primary-01-a); --color-bg-focused-02-src02-m : var(--color-primary-02-m); --color-bg-focused-03-src01-j : var(--color-primary-01-j); --color-bg-focused-04-src02-k : var(--color-primary-02-k); --color-bg-focused-05-src02-g : var(--color-primary-02-g); --color-bg-focused-06-src02-j : var(--color-primary-02-j); --color-bg-focused-07-src02-n : var(--color-primary-02-n); --color-bg-focused-07-src02-b : var(--color-primary-02-b); --color-bg-focused-08-src01-c : var(--color-primary-01-c); --color-bg-focused-09-src05-a : var(--color-primary-05-a); --color-bg-focused-31-src-wht1 : var(--color-primary-wht1); --color-bg-focused-32-src-wht2 : var(--color-primary-wht2); --color-bg-focused-51-src02-g : var(--color-primary-02-g); --color-bg-focused-52-src02-h : var(--color-primary-02-h); --color-bg-focused-53-src02-i : var(--color-primary-02-i); --color-bg-focused-54-src02-j : var(--color-primary-02-j); --color-bg-focused-named-01 : var(--color-named-01-01-by-site); --color-bg-focused-named-02 : var(--color-named-01-02-by-site); --color-bg-focused-named-03 : var(--color-named-01-03-by-site); --color-bg-focused-named-04 : var(--color-named-01-04-by-site); --color-bg-focused-named-05 : var(--color-named-01-05-by-site); --color-bg-focused-named-06 : var(--color-named-01-06-by-site); --color-brd-focused-01-src01-a : var(--color-primary-01-a); --color-brd-focused-02-src01-c : var(--color-primary-01-c); --color-brd-focused-03-src02-g : var(--color-primary-02-g); --color-brd-focused-04-src05-a : var(--color-primary-05-a); /* --color-ULn-focused-01-srcNN-* : var(); */ --color-txt-focused-01-01 : var(--color-black-for-txt-on); /* 黒系 */ --color-txt-focused-02-01 : var(--color-white-for-txt-on); /* 白系 */ --color-txt-focused-01-src01-c : var(--color-primary-01-c); --color-txt-focused-02-src01-f : var(--color-primary-01-f); --color-txt-focused-03-src01-g : var(--color-primary-01-g); --color-txt-focused-04-src01-h : var(--color-primary-01-h); --color-txt-focused-05-src01-k : var(--color-primary-01-k); /* **************** 非フォーカス時 **************** */ --color-bg-01-src01-a : var(--color-primary-01-a); --color-bg-02-src01-c : var(--color-primary-01-c); --color-bg-03-src01-d : var(--color-primary-01-d); --color-bg-04-src01-e : var(--color-primary-01-e); --color-bg-05-src02-a : var(--color-primary-02-a); --color-bg-06-src02-b : var(--color-primary-02-b); --color-bg-07-src02-c : var(--color-primary-02-c); --color-bg-08-src02-d : var(--color-primary-02-d); --color-bg-09-src02-e : var(--color-primary-02-e); --color-bg-10-src02-g : var(--color-primary-02-g); --color-bg-11-src02-h : var(--color-primary-02-h); --color-bg-12-src02-i : var(--color-primary-02-i); --color-bg-13-src02-j : var(--color-primary-02-j); --color-bg-14-src03-a : var(--color-primary-03-a); --color-bg-15-src04-a : var(--color-primary-04-a); --color-bg-16-src06-a : var(--color-primary-06-a); --color-bg-31-src-gry1 : var(--color-primary-gry1); --color-bg-32-src-gry2 : var(--color-primary-gry2); --color-bg-33-src-gry3 : var(--color-primary-gry3); --color-brd-01-src01-c : var(--color-primary-01-c); --color-brd-02-src01-i : var(--color-primary-01-i); --color-brd-03-src02-a : var(--color-primary-02-a); --color-brd-04-src02-b : var(--color-primary-02-b); --color-brd-05-src02-l : var(--color-primary-02-l); --color-brd-06-src02-m : var(--color-primary-02-m); --color-brd-07-src02-n : var(--color-primary-02-n); --color-brd-08-src01-a : var(--color-primary-01-a); --color-brd-31-src-gry3 : var(--color-primary-gry3); --color-txt-01-src01-b : var(--color-primary-01-b); --color-txt-02-src01-c : var(--color-primary-01-c); --color-txt-03-src01-d : var(--color-primary-01-d); --color-txt-04-src01-h : var(--color-primary-01-h); --color-txt-05-src01-i : var(--color-primary-01-i); --color-red-for-txt-dflt : var(--color-const-red1-pure); /* 背景色 ＞ 共通機能 ＞ 標準（スライダー） */ /* 削除(2025-09-22) */ /* 背景色 ＞ 共通機能 ＞ 標準（フォーム） */ /* --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-bg-dflt : var(--color-white-for-bg-dflt); /* --color-background-hover-default : var(--color-background-default); */ /* 背景色 ＞ サイト別設定 ＞ アクセシビリティ系 */ /* --color-background-hbgMenu-canvus : var(--color-neutral-0); --color-background-hbgMenu-bar : var(--color-neutral-100); */ /* サイト別設定 ＞ 背景色と文字色 ＞ サイト別設定 ＞ ヘッダーとフッター */ --color-bg-header-dflt : var(--color-white-for-bg-dflt); --color-txt-header-dflt : var(--color-black-for-txt-dflt); --color-bg-footer-dflt : var(--color-bg-01-src01-a); --color-txt-footer-dflt : var(--color-white-for-txt-dflt); --color-bg-footer-lgAndLcZn-dflt : var(--color-bg-06-src02-b); --color-txt-footer-lgAndLcZn-dflt : var(--color-black-for-txt-dflt); /* サイト別設定 ＞ 背景色と文字色 ＞ サイト別設定 ＞ ドローワー */ --color-bg-drawer-dflt : var(--color-bg-01-src01-a); --color-tet-drawer-dflt : var(--color-white-for-txt-dflt); /* 背景色 ＞ サイト別設定 ＞ その他 */ /* 境界線＞ 共通機能 ＞ 標準（スライダー） */ /* 削除(2025-09-22) */ /* 境界線＞ 共通機能 ＞ 標準（フォーム） */ /* --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-primary-relect-01-a); --color-border-accessibility-bold : var(--color-primary-relect-01-a); */ /* 境界線 ＞ 共通機能 ＞ その他 */ /* --color-border-accent-default : var(--color-border-bold); */ /* 境界線 ＞ 共通機能 ＞ ホバー時 */ /* --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); } }