@charset "UTF-8";
:root {
  /* TYPOGRAPHY */
  --SN-Font-size-100: 6.4rem;
  --SN-Font-size-90: 5.7rem;
  --SN-Font-size-80: 4.8rem;
  --SN-Font-size-70: 3.6rem;
  --SN-Font-size-60: 3.2rem;
  --SN-Font-size-50: 2.8rem;
  --SN-Font-size-40: 2.4rem;
  --SN-Font-size-35: 2.2rem;
  --SN-Font-size-30: 2rem;
  --SN-Font-size-25: 1.8rem;
  --SN-Font-size-20: 1.6rem;
  --SN-Font-size-10: 1.4rem;
  --SN-Font-size-5: 1.2rem;
  --SN-Font-size-0: 1rem;
  --SN-Contents-Title-XL-Font-size: var(--SN-Font-size-70);
  --SN-Contents-Title-L-Font-size: var(--SN-Font-size-60);
  --SN-Contents-Display-Font-family: var(--SN-Font-family-Japanese-Default);
  --SN-Contents-Display-Line-height: var(--SN-Line-height-S);
  --SN-Contents-Display-Letter-spacing: var(--SN-Letter-spacing-S);
  --SN-Contents-Display-L-Font-weight: var(--SN-Font-weight-Med);
  --SN-Contents-Display-L-Font-size: var(--SN-Font-size-100);
  --SN-Contents-Display-M-Font-size: var(--SN-Font-size-90);
  --SN-Contents-Display-S-Font-size: var(--SN-Font-size-80);
  --SN-Contents-Title-Line-height: var(--SN-Line-height-M);
  --SN-Contents-Title-Letter-spacing: var(--SN-Letter-spacing-S);
  --SN-Contents-Title-Font-family: var(--SN-Font-family-Japanese-Default);
  --SN-Contents-Title-M-Font-size: var(--SN-Font-size-50);
  --SN-Contents-Title-S-Font-size: var(--SN-Font-size-35);
  --SN-Contents-Subtitle-Font-family: var(--SN-Font-family-Japanese-Default);
  --SN-Contents-Subtitle-M-Font-size: var(--SN-Font-size-30);
  --SN-Contents-Subtitle-Line-height: var(--SN-Line-height-M);
  --SN-Contents-Subtitle-Letter-spacing: var(--SN-Letter-spacing-S);
  --SN-Contents-Body-Font-family: var(--SN-Font-family-Japanese-Default);
  --SN-Contents-Body-M-Font-size: var(--SN-Font-size-20);
  --SN-Contents-Body-Line-height: var(--SN-Line-height-L);
  --SN-Contents-Body-Letter-spacing: var(--SN-Letter-spacing-S);
  --SN-Contents-Body-S-Font-size: var(--SN-Font-size-10);
  --SN-Contents-Caption-Font-family: var(--SN-Font-family-Japanese-Default);
  --SN-Contents-Caption-M-Font-size: var(--SN-Font-size-10);
  --SN-Contents-Caption-Line-height: var(--SN-Line-height-L);
  --SN-Contents-Caption-Letter-spacing: var(--SN-Letter-spacing-None);
  --SN-Contents-Spacing-Section-XL: var(--SN-Space-80);
  --SN-Contents-Spacing-Section-L: var(--SN-Space-64);
  --SN-Contents-Spacing-Section-M: var(--SN-Space-40);
  --SN-Contents-Spacing-Body-L: var(--SN-Space-24);
  --SN-Contents-Spacing-Body-M: var(--SN-Space-16);
  --SN-Contents-Spacing-Body-S: var(--SN-Space-8);
  --SN-Contents-Caption-S-Font-size: var(--SN-Font-size-5);
  --SN-UI-Single-Font-family: var(--SN-Font-family-Japanese-Default);
  --SN-UI-Single-Line-height: var(--SN-Line-height-None);
  --SN-UI-Single-Letter-spacing: var(--SN-Letter-spacing-None);
  --SN-UI-Single-XL-Font-size: var(--SN-Font-size-30);
  --SN-UI-Single-L-Font-size: var(--SN-Font-size-20);
  --SN-UI-Single-M-Font-size: var(--SN-Font-size-10);
  --SN-UI-Single-S-Font-size: var(--SN-Font-size-5);
  --SN-UI-Number-Font-family-num: var(--SN-Font-family-Alphanumeric-Default);
  --SN-UI-Compact-Font-family: var(--SN-Font-family-Japanese-Default);
  --SN-UI-Compact-Line-height: var(--SN-Line-height-S);
  --SN-UI-Compact-Letter-spacing: var(--SN-Letter-spacing-None);
  --SN-UI-Compact-L-Font-size: var(--SN-Font-size-20);
  --SN-UI-Compact-M-Font-size: var(--SN-Font-size-10);
  --SN-UI-Compact-S-Font-size: var(--SN-Font-size-5);
  --SN-UI-Number-Line-height: var(--SN-Line-height-None);
  --SN-UI-Number-Letter-spacing: var(--SN-Letter-spacing-None);
  --SN-UI-Number-XL-Font-size: var(--SN-Font-size-35);
  --SN-UI-Number-L-Font-size: var(--SN-Font-size-25);
  --SN-UI-Number-M-Font-size: var(--SN-Font-size-20);
  --SN-UI-Number-S-Font-size: var(--SN-Font-size-10);
  --SN-UI-_Button-Font-family: var(--SN-Font-family-Japanese-Default);
  --SN-UI-_Button-L-Font-size: var(--SN-Font-size-30);
  --SN-UI-_Button-Line-height: var(--SN-Line-height-None);
  --SN-UI-_Button-Letter-spacing: var(--SN-Letter-spacing-None);
  --SN-UI-_Button-M-Font-size: var(--SN-Font-size-20);
  --SN-UI-_Button-S-Font-size: var(--SN-Font-size-10);
  --SN-Contents-Subtitle-S-Font-size: var(--SN-Font-size-20);
  --SN-UI-_Label-Font-family: var(--SN-Font-family-Japanese-Default);
  --SN-UI-_Label-Line-height: var(--SN-Line-height-None);
  --SN-UI-_Label-Letter-spacing: var(--SN-Letter-spacing-None);
  --SN-UI-_Label-M-Font-size: var(--SN-Font-size-10);
  --SN-UI-_Label-S-Font-size: var(--SN-Font-size-5);
  --SN-UI-Single-XS-Font-size: var(--SN-Font-size-0);
  --SN-Contents-Title-XS-Font-size: var(--SN-Font-size-30);
  --SN-Line-height-none: 1;
  --SN-Line-height-XS: 1.2;
  --SN-Line-height-S: 1.4;
  --SN-Line-height-M: 1.5;
  --SN-Line-height-L: 1.75;
  --SN-Letter-spacing-none: 0;
  --SN-Letter-spacing-S: 0.02em;
  --SN-Letter-spacing-M: 0.04em;
  --SN-Font-weight-Reg: 400;
  --SN-Font-weight-Med: 500;
  --SN-Font-weight-Bd: 700;
  --SN-Space-0: 0;
  --SN-Space-2: 0.2rem;
  --SN-Space-4: 0.4rem;
  --SN-Space-8: 0.8rem;
  --SN-Space-16: 1.6rem;
  --SN-Space-24: 2.4rem;
  --SN-Space-32: 3.2rem;
  --SN-Space-40: 4rem;
  --SN-Space-48: 4.8rem;
  --SN-Space-64: 6.4rem;
  --SN-Space-80: 8rem;
  --SN-Space-96: 9.6rem;
  --SN-Space-128: 12.8rem;
  --SN-Space--04: -0.4rem;
  --SN-Space--08: -0.8rem;
  --SN-Space--12: -1.2rem;
  --SN-Space--16: -1.6rem;
  --SN-Space--24: -2.4rem;
  --SN-Space--32: -3.2rem;
  --SN-Space--40: -4rem;
  --SN-Radius-0: 0;
  --SN-Radius-2: 0.2rem;
  --SN-Radius-4: 0.4rem;
  --SN-Radius-8: 0.8rem;
  --SN-Radius-16: 1.6rem;
  --SN-Radius-40: 4rem;
  --SN-Radius-64: 6.4rem;
  --SN-Radius-128: 12.8rem;
  --SN-Radius-Full: 100rem;
  --SN-PMcolor-Alpha-White-0: rgba(255, 255, 255, 0);
  --SN-PMcolor-Alpha-Black-0: rgba(12, 12, 13, 0);
  --SN-PMcolor-Gray-white: #ffffff;
  --SN-PMcolor-Slate-1: #fcfdfd;
  --SN-PMcolor-Slate-2: #f6f7f8;
  --SN-PMcolor-Slate-3: #f1f3f4;
  --SN-PMcolor-Slate-4: #e9eced;
  --SN-PMcolor-Slate-5: #e0e4e6;
  --SN-PMcolor-Slate-6: #d8dddf;
  --SN-PMcolor-Slate-7: #cdd3d6;
  --SN-PMcolor-Slate-8: #b9c2c6;
  --SN-PMcolor-Slate-9: #86969c;
  --SN-PMcolor-Slate-10: #7b8d93;
  --SN-PMcolor-Slate-11: #5c6b70;
  --SN-PMcolor-Slate-12: #1e2324;
  --SN-PMcolor-Azure-1: #fafdff;
  --SN-PMcolor-Azure-2: #f5fcff;
  --SN-PMcolor-Azure-3: #e5f6ff;
  --SN-PMcolor-Azure-4: #d6f1ff;
  --SN-PMcolor-Azure-5: #c2ebff;
  --SN-PMcolor-Azure-6: #a8e2ff;
  --SN-PMcolor-Azure-7: #85d6ff;
  --SN-PMcolor-Azure-8: #4db5ff;
  --SN-PMcolor-Azure-9: #0092fa;
  --SN-PMcolor-Azure-10: #0089eb;
  --SN-PMcolor-Azure-11: #0077cc;
  --SN-PMcolor-Azure-12: #003961;
  --SN-PMcolor-Gray-black: #000000;
  --SN-PMcolor-Gray-1: #fafafa;
  --SN-PMcolor-Gray-2: #f2f2f2;
  --SN-PMcolor-Gray-3: #e6e6e6;
  --SN-PMcolor-Gray-4: #cccccc;
  --SN-PMcolor-Gray-5: #b3b3b3;
  --SN-PMcolor-Gray-6: #999999;
  --SN-PMcolor-Gray-7: #808080;
  --SN-PMcolor-Gray-8: #666666;
  --SN-PMcolor-Gray-9: #4d4d4d;
  --SN-PMcolor-Gray-10: #333333;
  --SN-PMcolor-Gray-11: #1a1a1a;
  --SN-PMcolor-Gray-12: #0d0d0d;
  --SN-PMcolor-Teal-1: #fafefc;
  --SN-PMcolor-Teal-2: #f6fefa;
  --SN-PMcolor-Teal-3: #e9fcf2;
  --SN-PMcolor-Teal-4: #dbfaea;
  --SN-PMcolor-Teal-5: #bae8d9;
  --SN-PMcolor-Teal-6: #9cdec8;
  --SN-PMcolor-Teal-7: #75d1b3;
  --SN-PMcolor-Teal-8: #1cbaa0;
  --SN-PMcolor-Teal-9: #1da58e;
  --SN-PMcolor-Teal-10: #1ca08a;
  --SN-PMcolor-Teal-11: #00856a;
  --SN-PMcolor-Teal-12: #003d31;
  --SN-PMcolor-Yellow-1: #fdfdf9;
  --SN-PMcolor-Yellow-2: #fefce9;
  --SN-PMcolor-Yellow-3: #fffab8;
  --SN-PMcolor-Yellow-4: #fff394;
  --SN-PMcolor-Yellow-5: #ffe770;
  --SN-PMcolor-Yellow-6: #f3d768;
  --SN-PMcolor-Yellow-7: #e4c767;
  --SN-PMcolor-Yellow-8: #d5ae39;
  --SN-PMcolor-Yellow-9: #ffd633;
  --SN-PMcolor-Yellow-10: #ffcc00;
  --SN-PMcolor-Yellow-11: #9e6c00;
  --SN-PMcolor-Yellow-12: #473b1f;
  --SN-PMcolor-Green-1: #fdfefb;
  --SN-PMcolor-Green-2: #f4fbe4;
  --SN-PMcolor-Green-3: #e8fad6;
  --SN-PMcolor-Green-4: #daf2cf;
  --SN-PMcolor-Green-5: #c7edc0;
  --SN-PMcolor-Green-6: #a4e5a4;
  --SN-PMcolor-Green-7: #8dce92;
  --SN-PMcolor-Green-8: #5bb96b;
  --SN-PMcolor-Green-9: #30ab45;
  --SN-PMcolor-Green-10: #1fad36;
  --SN-PMcolor-Green-11: #237b32;
  --SN-PMcolor-Green-12: #113c18;
  --SN-PMcolor-Orange-1: #fefcfb;
  --SN-PMcolor-Orange-2: #fff7ed;
  --SN-PMcolor-Orange-3: #ffefd6;
  --SN-PMcolor-Orange-4: #ffdfb5;
  --SN-PMcolor-Orange-5: #ffd19a;
  --SN-PMcolor-Orange-6: #ffc182;
  --SN-PMcolor-Orange-7: #f5ae73;
  --SN-PMcolor-Orange-8: #ec9455;
  --SN-PMcolor-Orange-9: #ed6f21;
  --SN-PMcolor-Orange-10: #ec6613;
  --SN-PMcolor-Orange-11: #c63e10;
  --SN-PMcolor-Orange-12: #582d1d;
  --SN-PMcolor-Red-1: #fffcfc;
  --SN-PMcolor-Red-2: #fff8f7;
  --SN-PMcolor-Red-3: #feebe7;
  --SN-PMcolor-Red-4: #ffdcd3;
  --SN-PMcolor-Red-5: #ffcdc2;
  --SN-PMcolor-Red-6: #fdbdaf;
  --SN-PMcolor-Red-7: #f5a898;
  --SN-PMcolor-Red-8: #f78670;
  --SN-PMcolor-Red-9: #d10000;
  --SN-PMcolor-Red-10: #bd0000;
  --SN-PMcolor-Red-11: #b81414;
  --SN-PMcolor-Red-12: #5c271f;
  --SN-PMcolor-Bronze-1: #fdfdfc;
  --SN-PMcolor-Bronze-2: #faf9f2;
  --SN-PMcolor-Bronze-3: #f2f0e7;
  --SN-PMcolor-Bronze-4: #eae6db;
  --SN-PMcolor-Bronze-5: #e1dccf;
  --SN-PMcolor-Bronze-6: #d8d0bf;
  --SN-PMcolor-Bronze-7: #cbc0aa;
  --SN-PMcolor-Bronze-8: #b9a88d;
  --SN-PMcolor-Bronze-9: #978365;
  --SN-PMcolor-Bronze-10: #8c7a5e;
  --SN-PMcolor-Bronze-11: #71624b;
  --SN-PMcolor-Bronze-12: #3b352b;
  --SN-PMcolor-Blue-1: #fdfdfe;
  --SN-PMcolor-Blue-2: #f7f9ff;
  --SN-PMcolor-Blue-3: #edf2fe;
  --SN-PMcolor-Blue-4: #e1e9ff;
  --SN-PMcolor-Blue-5: #d2deff;
  --SN-PMcolor-Blue-6: #c1d0ff;
  --SN-PMcolor-Blue-7: #abbdf9;
  --SN-PMcolor-Blue-8: #8da4ef;
  --SN-PMcolor-Blue-9: #3e63dd;
  --SN-PMcolor-Blue-10: #3358d4;
  --SN-PMcolor-Blue-11: #3a5bc7;
  --SN-PMcolor-Blue-12: #1f2d5c;
  --SN-PMcolor-Crimson-1: #fffcfd;
  --SN-PMcolor-Crimson-2: #fef7f9;
  --SN-PMcolor-Crimson-3: #ffe9f0;
  --SN-PMcolor-Crimson-4: #fedce7;
  --SN-PMcolor-Crimson-5: #facedd;
  --SN-PMcolor-Crimson-6: #f3bed1;
  --SN-PMcolor-Crimson-7: #eaacc3;
  --SN-PMcolor-Crimson-8: #e093b2;
  --SN-PMcolor-Crimson-9: #e93d82;
  --SN-PMcolor-Crimson-10: #df3478;
  --SN-PMcolor-Crimson-11: #cb1d63;
  --SN-PMcolor-Crimson-12: #621639;
  --SN-PMcolor-Purple-1: #fefcfe;
  --SN-PMcolor-Purple-2: #fbf7fe;
  --SN-PMcolor-Purple-3: #f7edfe;
  --SN-PMcolor-Purple-4: #f2e2fc;
  --SN-PMcolor-Purple-5: #ead5f9;
  --SN-PMcolor-Purple-6: #e0c4f4;
  --SN-PMcolor-Purple-7: #d1afec;
  --SN-PMcolor-Purple-8: #be93e4;
  --SN-PMcolor-Purple-9: #8e4ec6;
  --SN-PMcolor-Purple-10: #8347b9;
  --SN-PMcolor-Purple-11: #8145b5;
  --SN-PMcolor-Purple-12: #402060;
  --SN-PMcolor-Lime-1: #fbfef6;
  --SN-PMcolor-Lime-2: #f6fde9;
  --SN-PMcolor-Lime-3: #ecfad1;
  --SN-PMcolor-Lime-4: #daf5a3;
  --SN-PMcolor-Lime-5: #c7f075;
  --SN-PMcolor-Lime-6: #b4eb47;
  --SN-PMcolor-Lime-7: #a1e51a;
  --SN-PMcolor-Lime-8: #81b814;
  --SN-PMcolor-Lime-9: #6a9f00;
  --SN-PMcolor-Lime-10: #415c0a;
  --SN-PMcolor-Lime-11: #202e05;
  --SN-PMcolor-Lime-12: #101703;
  --SN-PMcolor-Cyan-1: #f4fcff;
  --SN-PMcolor-Cyan-2: #e0f6ff;
  --SN-PMcolor-Cyan-3: #ccf0ff;
  --SN-PMcolor-Cyan-4: #99e0ff;
  --SN-PMcolor-Cyan-5: #70d4ff;
  --SN-PMcolor-Cyan-6: #1fbcff;
  --SN-PMcolor-Cyan-7: #009adb;
  --SN-PMcolor-Cyan-8: #007db2;
  --SN-PMcolor-Cyan-9: #00567a;
  --SN-PMcolor-Cyan-10: #003952;
  --SN-PMcolor-Cyan-11: #002433;
  --SN-PMcolor-Cyan-12: #00121a;
  --SN-PMcolor-Alpha-Black-5: rgba(12, 12, 13, 0.05);
  --SN-PMcolor-Alpha-Black-10: rgba(12, 12, 13, 0.1);
  --SN-PMcolor-Alpha-Black-20: rgba(12, 12, 13, 0.2);
  --SN-PMcolor-Alpha-Black-30: rgba(12, 12, 13, 0.3);
  --SN-PMcolor-Alpha-Black-40: rgba(12, 12, 13, 0.4);
  --SN-PMcolor-Alpha-Black-50: rgba(12, 12, 13, 0.5);
  --SN-PMcolor-Alpha-Black-60: rgba(12, 12, 13, 0.6);
  --SN-PMcolor-Alpha-Black-70: rgba(12, 12, 13, 0.7);
  --SN-PMcolor-Alpha-Black-80: rgba(12, 12, 13, 0.8);
  --SN-PMcolor-Alpha-Black-90: rgba(12, 12, 13, 0.9);
  --SN-PMcolor-Alpha-Black-100: #0c0c0d;
  --SN-PMcolor-Alpha-White-5: rgba(255, 255, 255, 0.05);
  --SN-PMcolor-Alpha-White-10: rgba(255, 255, 255, 0.1);
  --SN-PMcolor-Alpha-White-20: rgba(255, 255, 255, 0.2);
  --SN-PMcolor-Alpha-White-30: rgba(255, 255, 255, 0.3);
  --SN-PMcolor-Alpha-White-40: rgba(255, 255, 255, 0.4);
  --SN-PMcolor-Alpha-White-50: rgba(255, 255, 255, 0.5);
  --SN-PMcolor-Alpha-White-60: rgba(255, 255, 255, 0.6);
  --SN-PMcolor-Alpha-White-70: rgba(255, 255, 255, 0.7);
  --SN-PMcolor-Alpha-White-80: rgba(255, 255, 255, 0.8);
  --SN-PMcolor-Alpha-White-90: rgba(255, 255, 255, 0.9);
  --SN-PMcolor-Alpha-White-100: #ffffff;
  --SN-Role-Primary-1: var(--SN-PMcolor-Azure-1);
  --SN-Role-Primary-2: var(--SN-PMcolor-Azure-2);
  --SN-Role-Primary-3: var(--SN-PMcolor-Azure-3);
  --SN-Role-Primary-4: var(--SN-PMcolor-Azure-4);
  --SN-Role-Primary-5: var(--SN-PMcolor-Azure-5);
  --SN-Role-Primary-6: var(--SN-PMcolor-Azure-6);
  --SN-Role-Primary-7: var(--SN-PMcolor-Azure-7);
  --SN-Role-Primary-8: var(--SN-PMcolor-Azure-8);
  --SN-Role-Primary-9: var(--SN-PMcolor-Azure-9);
  --SN-Role-Primary-10: var(--SN-PMcolor-Azure-10);
  --SN-Role-Primary-11: var(--SN-PMcolor-Azure-11);
  --SN-Role-Primary-12: var(--SN-PMcolor-Azure-12);
  --SN-Role-Neutral-1: var(--SN-PMcolor-Bronze-1);
  --SN-Role-Neutral-2: var(--SN-PMcolor-Bronze-2);
  --SN-Role-Neutral-3: var(--SN-PMcolor-Bronze-3);
  --SN-Role-Neutral-4: var(--SN-PMcolor-Bronze-4);
  --SN-Role-Neutral-5: var(--SN-PMcolor-Bronze-5);
  --SN-Role-Neutral-6: var(--SN-PMcolor-Bronze-6);
  --SN-Role-Neutral-7: var(--SN-PMcolor-Bronze-7);
  --SN-Role-Neutral-8: var(--SN-PMcolor-Bronze-8);
  --SN-Role-Neutral-9: var(--SN-PMcolor-Bronze-9);
  --SN-Role-Neutral-10: var(--SN-PMcolor-Bronze-10);
  --SN-Role-Neutral-11: var(--SN-PMcolor-Bronze-11);
  --SN-Role-Neutral-12: var(--SN-PMcolor-Bronze-12);
  --SN-Role-Surface-1: var(--SN-PMcolor-Slate-1);
  --SN-Role-Surface-2: var(--SN-PMcolor-Slate-2);
  --SN-Role-Surface-3: var(--SN-PMcolor-Slate-3);
  --SN-Role-Surface-4: var(--SN-PMcolor-Slate-4);
  --SN-Role-Surface-5: var(--SN-PMcolor-Slate-5);
  --SN-Role-Surface-6: var(--SN-PMcolor-Slate-6);
  --SN-Role-Surface-7: var(--SN-PMcolor-Slate-7);
  --SN-Role-Surface-8: var(--SN-PMcolor-Slate-8);
  --SN-Role-Surface-9: var(--SN-PMcolor-Slate-9);
  --SN-Role-Surface-10: var(--SN-PMcolor-Slate-10);
  --SN-Role-Surface-11: var(--SN-PMcolor-Slate-11);
  --SN-Role-Surface-12: var(--SN-PMcolor-Slate-12);
  --SN-Role-Success-1: var(--SN-PMcolor-Teal-1);
  --SN-Role-Success-2: var(--SN-PMcolor-Teal-2);
  --SN-Role-Success-3: var(--SN-PMcolor-Teal-3);
  --SN-Role-Success-4: var(--SN-PMcolor-Teal-4);
  --SN-Role-Success-5: var(--SN-PMcolor-Teal-5);
  --SN-Role-Success-6: var(--SN-PMcolor-Teal-6);
  --SN-Role-Success-7: var(--SN-PMcolor-Teal-7);
  --SN-Role-Success-8: var(--SN-PMcolor-Teal-8);
  --SN-Role-Success-9: var(--SN-PMcolor-Teal-9);
  --SN-Role-Success-10: var(--SN-PMcolor-Teal-10);
  --SN-Role-Success-11: var(--SN-PMcolor-Teal-11);
  --SN-Role-Success-12: var(--SN-PMcolor-Teal-12);
  --SN-Role-Alert-1: var(--SN-PMcolor-Red-1);
  --SN-Role-Alert-2: var(--SN-PMcolor-Red-2);
  --SN-Role-Alert-3: var(--SN-PMcolor-Red-3);
  --SN-Role-Alert-4: var(--SN-PMcolor-Red-4);
  --SN-Role-Alert-5: var(--SN-PMcolor-Red-5);
  --SN-Role-Alert-6: var(--SN-PMcolor-Red-6);
  --SN-Role-Alert-7: var(--SN-PMcolor-Red-7);
  --SN-Role-Alert-8: var(--SN-PMcolor-Red-8);
  --SN-Role-Alert-9: var(--SN-PMcolor-Red-9);
  --SN-Brand-Support-1: var(--SN-PMcolor-Green-1);
  --SN-Brand-Support-2: var(--SN-PMcolor-Green-2);
  --SN-Role-Alert-10: var(--SN-PMcolor-Red-10);
  --SN-Brand-Support-3: var(--SN-PMcolor-Green-3);
  --SN-Brand-Support-4: var(--SN-PMcolor-Green-4);
  --SN-Brand-Support-5: var(--SN-PMcolor-Green-5);
  --SN-Brand-Support-6: var(--SN-PMcolor-Green-6);
  --SN-Brand-Support-7: var(--SN-PMcolor-Green-7);
  --SN-Brand-Support-8: var(--SN-PMcolor-Green-8);
  --SN-Brand-Support-9: var(--SN-PMcolor-Green-9);
  --SN-Role-Alert-11: var(--SN-PMcolor-Red-11);
  --SN-Brand-Support-10: var(--SN-PMcolor-Green-10);
  --SN-Brand-Support-11: var(--SN-PMcolor-Green-11);
  --SN-Brand-Support-12: var(--SN-PMcolor-Green-12);
  --SN-Role-Alert-12: var(--SN-PMcolor-Red-12);
  --SN-Brand-Sale-1: var(--SN-PMcolor-Orange-1);
  --SN-Brand-Sale-2: var(--SN-PMcolor-Orange-2);
  --SN-Brand-Sale-3: var(--SN-PMcolor-Orange-3);
  --SN-Brand-Sale-4: var(--SN-PMcolor-Orange-4);
  --SN-Brand-Sale-5: var(--SN-PMcolor-Orange-5);
  --SN-Brand-Sale-6: var(--SN-PMcolor-Orange-6);
  --SN-Brand-Sale-7: var(--SN-PMcolor-Orange-7);
  --SN-Brand-Sale-8: var(--SN-PMcolor-Orange-8);
  --SN-Brand-Sale-9: var(--SN-PMcolor-Orange-9);
  --SN-Brand-Sale-10: var(--SN-PMcolor-Orange-10);
  --SN-Brand-Sale-11: var(--SN-PMcolor-Orange-11);
  --SN-Brand-Sale-12: var(--SN-PMcolor-Orange-12);
  --SN-Brand-Cart-1: var(--SN-PMcolor-Yellow-1);
  --SN-Brand-Cart-2: var(--SN-PMcolor-Yellow-2);
  --SN-Brand-Cart-3: var(--SN-PMcolor-Yellow-3);
  --SN-Brand-Cart-4: var(--SN-PMcolor-Yellow-4);
  --SN-Brand-Cart-5: var(--SN-PMcolor-Yellow-5);
  --SN-Brand-Cart-6: var(--SN-PMcolor-Yellow-6);
  --SN-Brand-Cart-7: var(--SN-PMcolor-Yellow-7);
  --SN-Brand-Cart-8: var(--SN-PMcolor-Yellow-8);
  --SN-Brand-Cart-9: var(--SN-PMcolor-Yellow-9);
  --SN-Brand-Cart-10: var(--SN-PMcolor-Yellow-10);
  --SN-Brand-Cart-11: var(--SN-PMcolor-Yellow-11);
  --SN-Brand-Cart-12: var(--SN-PMcolor-Yellow-12);
  --SN-Color-Text-Default: var(--SN-PMcolor-Alpha-Black-90);
  --SN-Color-Text-High: var(--SN-PMcolor-Alpha-Black-100);
  --SN-Color-Text-Low: var(--SN-PMcolor-Alpha-Black-80);
  --SN-Color-Text-Subtle: var(--SN-PMcolor-Alpha-Black-60);
  --SN-Color-Text-Disable: var(--SN-PMcolor-Alpha-Black-30);
  --SN-Color-Text-UI-Solid: var(--SN-PMcolor-Alpha-White-100);
  --SN-Color-Text-Link: var(--SN-PMcolor-Azure-11);
  --SN-Color-Text-Neutral-Low-contrast: var(--SN-PMcolor-Slate-11);
  --SN-Color-Text-Neutral-warm-Low-contrast: var(--SN-PMcolor-Bronze-11);
  --SN-Color-Text-Grayscale-Low-contrast: var(--SN-PMcolor-Gray-11);
  --SN-Color-Text-Grayscale-High-contrast: var(--SN-PMcolor-Gray-12);
  --SN-Color-Text-Neutral-warm-High-contrast: var(--SN-PMcolor-Bronze-12);
  --SN-Color-Text-Neutral-High-contrast: var(--SN-PMcolor-Slate-12);
  --SN-Color-Text-Primary-Low-contrast: var(--SN-PMcolor-Azure-11);
  --SN-Color-Text-Price: var(--SN-PMcolor-Red-11);
  --SN-Color-Text-Primary-High-contrast: var(--SN-PMcolor-Azure-12);
  --SN-Color-Text-Primary-dark-Low-contrast: var(--SN-PMcolor-Blue-11);
  --SN-Color-Text-Primary-dark-High-contrast: var(--SN-PMcolor-Blue-12);
  --SN-Color-Text-Success-Low-contrast: var(--SN-PMcolor-Teal-11);
  --SN-Color-Text-Support-Low-contrast: var(--SN-PMcolor-Green-11);
  --SN-Color-Text-Cart-Low-contrast: var(--SN-PMcolor-Yellow-11);
  --SN-Color-Text-Cart-High-contrast: var(--SN-PMcolor-Yellow-12);
  --SN-Color-Text-Support-High-contrast: var(--SN-PMcolor-Green-12);
  --SN-Color-Text-Sale-Low-contrast: var(--SN-PMcolor-Orange-11);
  --SN-Color-Text-Sale-High-contrast: var(--SN-PMcolor-Orange-12);
  --SN-Color-Text-Alert-Low-contrast: var(--SN-PMcolor-Red-11);
  --SN-Color-Background-Neutral-App: var(--SN-PMcolor-Slate-1);
  --SN-Color-Background-Neutral-warm-App: var(--SN-PMcolor-Bronze-1);
  --SN-Color-Background-Neutral-warm-Subtle: var(--SN-PMcolor-Bronze-2);
  --SN-Color-Background-Neutral-warm-UI--Enable: var(--SN-PMcolor-Bronze-4);
  --SN-Color-Background-Neutral-warm-UI--Hover: var(--SN-PMcolor-Bronze-3);
  --SN-Color-Background-Neutral-warm-UI--Active: var(--SN-PMcolor-Bronze-5);
  --SN-Color-Background-Neutral-warm-Solid--Enable: var(--SN-PMcolor-Bronze-10);
  --SN-Color-Background-Neutral-warm-Solid--Hover: var(--SN-PMcolor-Bronze-9);
  --SN-Color-Background-Neutral-Subtle: var(--SN-PMcolor-Slate-2);
  --SN-Color-Background-Neutral-UI--Enable: var(--SN-PMcolor-Slate-4);
  --SN-Color-Background-Neutral-UI--Hover: var(--SN-PMcolor-Slate-3);
  --SN-Color-Background-Neutral-UI--Active: var(--SN-PMcolor-Slate-5);
  --SN-Color-Background-Neutral-Solid--Enable: var(--SN-PMcolor-Slate-10);
  --SN-Color-Background-Neutral-Solid--Hover: var(--SN-PMcolor-Slate-9);
  --SN-Color-Background-Grayscale-App: var(--SN-PMcolor-Gray-1);
  --SN-Color-Background-Grayscale-Subtle: var(--SN-PMcolor-Gray-2);
  --SN-Color-Background-Primary-App: var(--SN-PMcolor-Azure-1);
  --SN-Color-Background-Primary-Subtle: var(--SN-PMcolor-Azure-2);
  --SN-Color-Background-Primary-UI--Enable: var(--SN-PMcolor-Azure-4);
  --SN-Color-Background-Primary-UI--Hover: var(--SN-PMcolor-Azure-3);
  --SN-Color-Background-Primary-UI--Active: var(--SN-PMcolor-Azure-5);
  --SN-Color-Background-Primary-Solid--Enable: var(--SN-PMcolor-Azure-10);
  --SN-Color-Background-Primary-Solid--Hover: var(--SN-PMcolor-Azure-9);
  --SN-Color-Background-Primary-dark-App: var(--SN-PMcolor-Blue-1);
  --SN-Color-Background-Primary-dark-Subtle: var(--SN-PMcolor-Blue-2);
  --SN-Color-Background-Primary-dark-UI--Enable: var(--SN-PMcolor-Blue-4);
  --SN-Color-Background-Primary-dark-UI--Hover: var(--SN-PMcolor-Blue-3);
  --SN-Color-Background-Primary-dark-UI--Active: var(--SN-PMcolor-Blue-5);
  --SN-Color-Background-Primary-dark-Solid--Enable: var(--SN-PMcolor-Blue-10);
  --SN-Color-Background-Primary-dark-Solid--Hover: var(--SN-PMcolor-Blue-9);
  --SN-Color-Background-Success-App: var(--SN-PMcolor-Teal-1);
  --SN-Color-Background-Success-Subtle: var(--SN-PMcolor-Teal-2);
  --SN-Color-Background-Success-UI--Enable: var(--SN-PMcolor-Teal-4);
  --SN-Color-Background-Success-UI--Hover: var(--SN-PMcolor-Teal-3);
  --SN-Color-Background-Success-UI--Active: var(--SN-PMcolor-Teal-5);
  --SN-Color-Background-Success-Solid--Enable: var(--SN-PMcolor-Teal-10);
  --SN-Color-Background-Success-Solid--Hover: var(--SN-PMcolor-Teal-9);
  --SN-Color-Background-Support-App: var(--SN-PMcolor-Green-1);
  --SN-Color-Background-Support-Subtle: var(--SN-PMcolor-Green-2);
  --SN-Color-Background-Support-UI--Enable: var(--SN-PMcolor-Green-4);
  --SN-Color-Background-Support-UI--Hover: var(--SN-PMcolor-Green-3);
  --SN-Color-Background-Support-UI--Active: var(--SN-PMcolor-Green-5);
  --SN-Color-Background-Support-Solid--Enable: var(--SN-PMcolor-Green-10);
  --SN-Color-Background-Support-Solid--Hover: var(--SN-PMcolor-Green-9);
  --SN-Color-Background-Cart-App: var(--SN-PMcolor-Yellow-1);
  --SN-Color-Background-Cart-Subtle: var(--SN-PMcolor-Yellow-2);
  --SN-Color-Background-Grayscale-UI--Enable: var(--SN-PMcolor-Gray-4);
  --SN-Color-Background-Cart-UI--Enable: var(--SN-PMcolor-Yellow-4);
  --SN-Color-Background-Sale-App: var(--SN-PMcolor-Orange-1);
  --SN-Color-Background-Sale-Subtle: var(--SN-PMcolor-Orange-2);
  --SN-Color-Background-Alert-App: var(--SN-PMcolor-Red-1);
  --SN-Color-Background-Sale-UI--Enable: var(--SN-PMcolor-Orange-4);
  --SN-Color-Background-Alert-Subtle: var(--SN-PMcolor-Red-2);
  --SN-Color-Background-Alert-UI--Enable: var(--SN-PMcolor-Red-4);
  --SN-Color-Background-Grayscale-UI--Hover: var(--SN-PMcolor-Gray-3);
  --SN-Color-Background-Cart-UI--Hover: var(--SN-PMcolor-Yellow-3);
  --SN-Color-Background-Sale-UI--Hover: var(--SN-PMcolor-Orange-3);
  --SN-Color-Background-Alert-UI--Hover: var(--SN-PMcolor-Red-3);
  --SN-Color-Background-Grayscale-UI--Active: var(--SN-PMcolor-Gray-5);
  --SN-Color-Background-Grayscale-Solid--Enable: var(--SN-PMcolor-Gray-10);
  --SN-Color-Background-Grayscale-Solid--Hover: var(--SN-PMcolor-Gray-9);
  --SN-Color-Background-Cart-UI--Active: var(--SN-PMcolor-Yellow-5);
  --SN-Color-Background-Cart-Solid--Enable: var(--SN-PMcolor-Yellow-10);
  --SN-Color-Background-Cart-Solid--Hover: var(--SN-PMcolor-Yellow-9);
  --SN-Color-Background-Sale-UI--Active: var(--SN-PMcolor-Orange-5);
  --SN-Color-Background-Alert-UI--Active: var(--SN-PMcolor-Red-5);
  --SN-Color-Background-Default: var(--SN-PMcolor-Gray-white);
  --SN-Color-Background-Disable: var(--SN-PMcolor-Gray-3);
  --SN-Color-Background-Link: var(--SN-PMcolor-Azure-11);
  --SN-Color-Border-default: var(--SN-PMcolor-Alpha-Black-50);
  --SN-Color-Border-subtle: var(--SN-PMcolor-Alpha-Black-30);
  --SN-Color-Border-bold: var(--SN-PMcolor-Alpha-Black-80);
  --SN-Color-Border-inverse: var(--SN-PMcolor-Alpha-White-90);
  --SN-Color-Background-Sale-Solid--Enable: var(--SN-PMcolor-Orange-10);
  --SN-Color-Background-Alert-Solid--Enable: var(--SN-PMcolor-Red-10);
  --SN-Color-Background-Sale-Solid--Hover: var(--SN-PMcolor-Orange-9);
  --SN-Color-Background-Alert-Solid--Hover: var(--SN-PMcolor-Red-9);
  --SN-Color-Text-Success-High-contrast: var(--SN-PMcolor-Teal-12);
  --SN-Color-Text-Alert-High-contrast: var(--SN-PMcolor-Red-12);
  --SN-Color-Border-Neutral-Subtle: var(--SN-PMcolor-Slate-6);
  --SN-Color-Border-Neutral-warm-Subtle: var(--SN-Role-Neutral-6);
  --SN-Color-Border-Neutral-warm-UI-element--Enable: var(--SN-PMcolor-Bronze-7);
  --SN-Color-Border-Neutral-warm-UI-element--Hover: var(--SN-PMcolor-Bronze-8);
  --SN-Color-Border-Grayscale-Subtle: var(--SN-PMcolor-Gray-6);
  --SN-Color-Border-Grayscale-UI-element--Enable: var(--SN-PMcolor-Gray-7);
  --SN-Color-Border-Grayscale-UI-element--Hover: var(--SN-PMcolor-Gray-8);
  --SN-Color-Border-Neutral-UI-element--Enable: var(--SN-PMcolor-Slate-7);
  --SN-Color-Border-Neutral-UI-element--Hover: var(--SN-PMcolor-Slate-8);
  --SN-Color-Border-Primary-Subtle: var(--SN-PMcolor-Azure-6);
  --SN-Color-Border-Primary-UI-element--Enable: var(--SN-PMcolor-Azure-7);
  --SN-Color-Border-Primary-UI-element--Hover: var(--SN-PMcolor-Azure-8);
  --SN-Color-Border-Primary-dark-Subtle: var(--SN-PMcolor-Blue-6);
  --SN-Color-Border-Primary-dark-UI-element--Enable: var(--SN-PMcolor-Blue-7);
  --SN-Color-Border-Primary-dark-UI-element--Hover: var(--SN-PMcolor-Blue-8);
  --SN-Color-Border-Success-Subtle: var(--SN-PMcolor-Teal-6);
  --SN-Color-Border-Success-UI-element--Enable: var(--SN-PMcolor-Teal-7);
  --SN-Color-Border-Success-UI-element--Hover: var(--SN-PMcolor-Teal-8);
  --SN-Color-Border-Support-Subtle: var(--SN-PMcolor-Green-6);
  --SN-Color-Border-Support-UI-element--Enable: var(--SN-PMcolor-Green-7);
  --SN-Color-Border-Support-UI-element--Hover: var(--SN-PMcolor-Green-8);
  --SN-Color-Border-Cart-Subtle: var(--SN-PMcolor-Yellow-6);
  --SN-Color-Border-Cart-UI-element--Enable: var(--SN-PMcolor-Yellow-7);
  --SN-Color-Border-Cart-UI-element--Hover: var(--SN-PMcolor-Yellow-8);
  --SN-Color-Border-Sale-Subtle: var(--SN-PMcolor-Orange-6);
  --SN-Color-Border-Sale-UI-element--Enable: var(--SN-PMcolor-Orange-7);
  --SN-Color-Border-Sale-UI-element--Hover: var(--SN-PMcolor-Orange-8);
  --SN-Color-Border-Alert-Subtle: var(--SN-PMcolor-Red-6);
  --SN-Color-Border-Alert-UI-element--Enable: var(--SN-PMcolor-Red-7);
  --SN-Color-Border-Alert-UI-element--Hover: var(--SN-PMcolor-Red-8);
}

/**
 * 暫定対応: 記事画像コンポーネント内のpタグを非表示にします。
 * 本来はCMSの出力側で制御されるべきですが、一時的な措置としてCSSで対応しています。
 */
.mwsc__article_img > p {
  display: none;
}

/**
 * ブック共通設定:
 * mwsc__itemで始まるクラスを持つsection要素の最大幅をリセットします。
 * これにより、子要素で幅をコントロールしやすくなります。
 */
main > section[class^=mwsc__item] {
  max-width: none;
}

/**
 * ブックラベル: mwsc__labelを含むクラスを持つli要素のスタイル（プレースホルダー）
 */
/**
 * ブック（原稿）切り替えタブ:
 * 複数のブックを切り替えるためのタブUIのスタイルです。
 * Flexboxを使用してタブを横並びに配置し、横スクロール可能にしています。
 */
ul.mwsc__manuscript_tabs {
  display: flex;
  max-width: var(--width_max_pc_l);
  margin: 0 auto;
  overflow-x: auto;
  padding: 1.6rem 1rem;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  gap: 1rem;
}
ul.mwsc__manuscript_tabs > li:only-child {
  display: none;
}
ul.mwsc__manuscript_tabs > li {
  background: var(--color_ui_light);
  display: grid;
  box-shadow: 0rem 0.2rem 0.6rem rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.9882352941);
  border-radius: 0.2rem;
  cursor: pointer;
  flex: 1;
  flex-wrap: wrap;
  height: 6.2rem;
  min-width: 18rem;
  place-items: center;
  transition: all 0.2s;
  box-sizing: border-box;
}
ul.mwsc__manuscript_tabs > li > label {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
ul.mwsc__manuscript_tabs > li:hover {
  background: #fff;
}
ul.mwsc__manuscript_tabs > li--current {
  background: #fff;
  border-top: solid var(--color_ui_dark) 0.4rem;
  box-shadow: 0rem -0.2rem 0.3rem rgba(0, 0, 0, 0.16);
  display: grid;
  flex: 1;
  margin: 0.5rem 1rem 0 1rem;
  min-width: 18rem;
  padding: 0rem 0.8rem 1rem 0.8rem;
  place-items: center;
  transition: all 0.2s;
  z-index: 1;
}
ul.mwsc__manuscript_tabs > li > label {
  cursor: pointer;
}

/**
 * ブック内ページ切り替えタブ:
 * 一つのブック内でページを切り替えるためのタブUIのスタイルです。
 * input[type=radio]とlabelを利用したタブ切り替えを想定しています。
 */
.mwsc__page_selector_container > input {
  display: none;
}
.mwsc__page_selector_container > ul.mwsc__page_tabs > li:only-child {
  display: none;
}
.mwsc__page_selector_container > ul.mwsc__page_tabs {
  display: flex;
  max-width: var(--width_max_pc_l);
  margin: 0 auto;
  overflow-x: auto;
  padding: 1.6rem 1rem;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  gap: 1rem;
}
.mwsc__page_selector_container > ul.mwsc__page_tabs > li {
  background: var(--SN-Color-Background-Neutral-Subtle);
  display: grid;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16), 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
  border-radius: 0.2rem;
  cursor: pointer;
  flex: 1;
  flex-wrap: wrap;
  min-width: 18rem;
  place-items: center;
  transition: all 0.2s;
  box-sizing: border-box;
  line-height: 1em;
}
.mwsc__page_selector_container > ul.mwsc__page_tabs > li > label {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: var(--SN-Space-16) var(--SN-Space-24);
  box-sizing: border-box;
}
.mwsc__page_selector_container > ul.mwsc__page_tabs > li:hover {
  background: #fff;
}
.mwsc__page_selector_container > ul.mwsc__page_tabs > li--current {
  background: #fff;
  border-top: solid var(--color_ui_dark) 0.4rem;
  box-shadow: 0rem -0.2rem 0.3rem rgba(0, 0, 0, 0.16);
  display: grid;
  flex: 1;
  margin: 0.5rem 1rem 0 1rem;
  min-width: 18rem;
  padding: 0rem 0.8rem 1rem 0.8rem;
  place-items: center;
  transition: all 0.2s;
  z-index: 1;
}
.mwsc__page_selector_container > ul.mwsc__page_tabs > li > label {
  cursor: pointer;
  font-size: var(--SN-UI-Single-L-Font-size);
}

/**
 * ページ共通設定:
 * ページ全体のコンテナや背景色などの基本設定です。
 */
.mwsc__page_selector_container {
  max-width: none;
  overflow: hidden;
}
/**
 * ページセクション:
 * mwsc__page--で始まるIDを持つ各ページコンテンツの基本スタイルです。
 */
section[id^=mwsc__page--] {
  display: flow-root;
}
@media screen and (min-width: 600px) {
  section[id^=mwsc__page--] {
    background: var(--SN-PMcolor-Alpha-White-100);
  }
}
@media screen and (max-width: 599px) {
  section[id^=mwsc__page--] {
    background: var(--SN-PMcolor-Alpha-White-100);
  }
}

/**
 * ページコンテナ内のレイヤー設定:
 * 背景色などを調整します。
 */
.mwsc__page_selector_container section.box-gray {
  background: var(--color-ui-light);
}
.mwsc__page_selector_container .layer--1:first-child > .mwsc__article {
  border-top: none;
}
@media screen and (min-width: 600px) {
  .mwsc__page_selector_container .layer--1 {
    background: transparent;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__page_selector_container .layer--1 {
    background: transparent;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__page_selector_container .layer--1:nth-child(even) {
    background: transparent;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__page_selector_container .layer--1:nth-child(even) {
    background: transparent;
  }
}

/**
 * 記事コンテナ (.mwsc__articles):
 * 複数の記事(.mwsc__article)をまとめるラッパー要素です。
 * CSS Gridを使用してレイアウトを制御し、基本的なタイポグラフィや見出しスタイルを定義します。
 * 修飾子クラス(例: .layer--1, .child--2, .img--x1-050)によって多様なレイアウトを実現します。
 */
.mwsc__articles {
  font-size: var(--SN-Contents-Body-M-Font-size);
  color: var(--SN-Color-Text-Default);
  display: grid;
  gap: var(--SN-Contents-Spacing-Section-L);
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "article";
  justify-content: stretch;
  justify-items: center;
  align-items: start;
  text-align: center;
  /**
   * レイヤー修飾子 (.layer--1):
   * 記事コンテナに背景や区切り線、余白などを追加し、セクションとしての見た目を定義します。
   * 主にページのトップレベルのコンテナとして使用されます。
   */
  /**
   * 入れ子になった記事コンテナのスタイル:
   * .mwsc__articlesの中にさらに.mwsc__articlesが存在する場合のスタイルを調整します。
   * 主にgap(間隔)を調整するために使用されます。
   */
}
@media screen and (max-width: 599px) {
  .mwsc__articles {
    gap: var(--SN-Contents-Spacing-Section-M);
  }
}
.mwsc__articles > * {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 600px) {
  .mwsc__articles > * {
    max-width: var(--mwsc__max-width-content);
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles > * {
    max-width: var(--mwsc__max-width-content_sp);
  }
}
.mwsc__articles .mwsc__article_img img {
  width: 100%;
  height: auto;
}
.mwsc__articles h1,
.mwsc__articles h2,
.mwsc__articles h3,
.mwsc__articles h4,
.mwsc__articles h5,
.mwsc__articles h6 {
  text-align: center;
  font-weight: bold;
  color: var(--SN-Color-Text-Default);
  margin: 0 auto;
  font-feature-settings: "palt" on;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 600px) {
  .mwsc__articles h1,
.mwsc__articles h2,
.mwsc__articles h3,
.mwsc__articles h4,
.mwsc__articles h5,
.mwsc__articles h6 {
    font-weight: var(--SN-Font-weight-Med);
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles h1,
.mwsc__articles h2,
.mwsc__articles h3,
.mwsc__articles h4,
.mwsc__articles h5,
.mwsc__articles h6 {
    font-weight: var(--SN-Font-weight-Bd);
  }
}
.mwsc__articles a:not([class]) {
  color: var(--SN-Color-Text-Link);
}
.mwsc__articles a[class^=sn_btn--] {
  color: var(--SN-PMcolor-Alpha-White-100);
}
.mwsc__articles figcaption {
  font-size: var(--SN-Contents-Body-M-Font-size);
  letter-spacing: var(--SN-Letter-spacing-S);
  font-feature-settings: "palt" off;
}
@media screen and (min-width: 600px) {
  .mwsc__articles header h1 {
    font-size: var(--SN-Font-size-70);
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles header h1 {
    font-size: var(--SN-Font-size-70);
  }
}
.mwsc__articles header h2 {
  line-height: var(--SN-Line-height-M);
}
@media screen and (min-width: 600px) {
  .mwsc__articles header h2 {
    font-size: var(--SN-Contents-Title-XL-Font-size);
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles header h2 {
    font-size: var(--SN-Font-size-60);
  }
}
.mwsc__articles header h3 {
  line-height: var(--SN-Line-height-M);
}
@media screen and (min-width: 600px) {
  .mwsc__articles header h3 {
    font-size: var(--SN-Contents-Title-M-Font-size);
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles header h3 {
    font-size: var(--SN-Font-size-40);
  }
}
.mwsc__articles header h4 {
  line-height: var(--SN-Line-height-M);
}
@media screen and (min-width: 600px) {
  .mwsc__articles header h4 {
    font-size: var(--SN-Contents-Title-S-Font-size);
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles header h4 {
    font-size: var(--SN-Font-size-30);
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles header h5 {
    font-size: var(--SN-Font-size-10);
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles header h5 {
    font-size: var(--SN-Font-size-10);
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles header h6 {
    font-size: var(--SN-Font-size-10);
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles header h6 {
    font-size: var(--SN-Font-size-10);
  }
}
.mwsc__articles.layer--1 {
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  gap: var(--SN-Contents-Spacing-Section-M);
}
@media screen and (min-width: 600px) {
  .mwsc__articles.layer--1 {
    max-width: var(--mwsc__max-width-section);
    margin: 0 auto;
    background: transparent;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.layer--1 {
    max-width: var(--mwsc__max-width-section_sp);
    margin: 0 auto;
    background: transparent;
  }
}
.mwsc__articles.layer--1 > .mwsc__article {
  border-top: 1px solid var(--SN-Color-Border-subtle);
}
.mwsc__articles.layer--1 > * {
  box-sizing: border-box;
}
@media screen and (min-width: 600px) {
  .mwsc__articles.layer--1 > * {
    max-width: var(--mwsc__max-width-content);
  }
  .mwsc__articles.layer--1 > *:first-child {
    padding-top: var(--SN-Contents-Spacing-Section-M);
  }
  .mwsc__articles.layer--1 > *:last-child {
    padding-bottom: var(--SN-Contents-Spacing-Section-L);
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.layer--1 > * {
    max-width: var(--mwsc__max-width-content_sp);
  }
  .mwsc__articles.layer--1 > *:first-child {
    padding-top: 2.4rem;
  }
  .mwsc__articles.layer--1 > *:last-child {
    padding-bottom: calc(var(--mwsc__clear-space-content_sp--h) * 1.6);
  }
}
.mwsc__articles.layer--1:not(.child--none) > .mwsc__articles {
  box-sizing: border-box;
}
@media screen and (min-width: 600px) {
  .mwsc__articles.layer--1.child--2, .mwsc__articles.layer--1.child--3, .mwsc__articles.layer--1.child--4 {
    gap: var(--SN-Contents-Spacing-Section-M);
  }
}
.mwsc__articles.layer--2 {
  justify-content: center;
}
.mwsc__articles.layer--3 {
  justify-content: center;
}
.mwsc__articles .is_empty {
  display: contents;
}
.mwsc__articles .mwsc__articles {
  gap: var(--SN-Contents-Spacing-Section-M);
}
@media screen and (min-width: 600px) {
  .mwsc__articles .mwsc__articles .mwsc__article {
    gap: 2.4rem !important;
  }
}
.mwsc__articles.no_hx > .mwsc__article {
  grid-template-areas: "article_img" "article_text" "article_table";
}
.mwsc__articles.no_img > .mwsc__article {
  grid-template-areas: "article_header" "article_text" "article_table";
}
.mwsc__articles.no_text > .mwsc__article {
  grid-template-areas: "article_header" "article_img" "article_table";
}
.mwsc__articles.no_table > .mwsc__article {
  grid-template-areas: "article_header" "article_img" "article_text";
}
.mwsc__articles.no_hx.no_img > .mwsc__article {
  grid-template-areas: "article_text" "article_table";
}
.mwsc__articles.no_hx.no_text > .mwsc__article {
  grid-template-areas: "article_img" "article_table";
}
.mwsc__articles.no_hx.no_table > .mwsc__article {
  grid-template-areas: "article_img" "article_text";
}
.mwsc__articles.no_img.no_text > .mwsc__article {
  grid-template-areas: "article_header" "article_table";
}
.mwsc__articles.no_img.no_table > .mwsc__article {
  grid-template-areas: "article_header" "article_text";
}
.mwsc__articles.no_text.no_table > .mwsc__article {
  grid-template-areas: "article_header" "article_img";
}
.mwsc__articles.no_hx.no_img.no_text > .mwsc__article {
  grid-template-areas: "article_table";
}
.mwsc__articles.no_hx.no_img.no_table > .mwsc__article {
  grid-template-areas: "article_text";
}
.mwsc__articles.no_hx.no_text.no_table > .mwsc__article {
  grid-template-areas: "article_img";
}
.mwsc__articles.no_img.no_text.no_table > .mwsc__article {
  grid-template-areas: "article_header";
}

/**
 * @mixin mwsc__article
 * .mwsc__article内の特定の子要素(.mwsc__article_imgなど)にスタイルを適用するためのヘルパーMixinです。
 * DRY(Don't Repeat Yourself)原則に従い、コードの重複を避けるために使用します。
 */
/**
 * 画像レイアウト修飾子 (img--*):
 * 記事内の画像の数やサイズ、配置を制御します。
 * img--x{n}-* : 画像の列数や幅を指定します。
 */
@media screen and (min-width: 600px) {
  .mwsc__articles[class*=img--x1-] > .mwsc__article > .mwsc__article_img ul {
    grid-template-columns: 1fr;
  }
  .mwsc__articles[class*=img--x2-] > .mwsc__article > .mwsc__article_img ul {
    grid-template-columns: 1fr 1fr;
  }
  .mwsc__articles[class*=img--x3-] > .mwsc__article > .mwsc__article_img ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .mwsc__articles[class*=img--x4-] > .mwsc__article > .mwsc__article_img ul {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.mwsc__articles.img--none > .mwsc__article > .mwsc__article_img .mwsc__image {
  width: 100%;
}
.mwsc__articles.img--x1 {
  /**
   * 画像サイズ修飾子 (img--x1-*):
   * 1列表示の場合の画像幅を制御します。
   */
  /**
   * 画像とテキストの横並びレイアウト:
   * -050, -040, -030 は画像とテキストを横に並べます。
   * "-r" サフィックスは左右反転レイアウトを意味します。
   */
}
.mwsc__articles.img--x1-100 > .mwsc__article > .mwsc__article_img .mwsc__image {
  width: 100%;
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x1-080 > .mwsc__article > .mwsc__article_img .mwsc__image {
    width: 80%;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x1-070 > .mwsc__article > .mwsc__article_img .mwsc__image {
    width: 70%;
  }
}
.mwsc__articles.img--x1-100 > .mwsc__article, .mwsc__articles.img--x1-080 > .mwsc__article, .mwsc__articles.img--x1-070 > .mwsc__article {
  grid-template-columns: 1fr;
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x1-050 > .mwsc__article, .mwsc__articles.img--x1-040 > .mwsc__article, .mwsc__articles.img--x1-030 > .mwsc__article, .mwsc__articles.img--x1-025 > .mwsc__article, .mwsc__articles.img--x1-020 > .mwsc__article {
    grid-template-areas: "article_img article_header" "article_img article_text" "article_img article_table";
  }
  .mwsc__articles.img--x1-050-r > .mwsc__article, .mwsc__articles.img--x1-040-r > .mwsc__article, .mwsc__articles.img--x1-030-r > .mwsc__article, .mwsc__articles.img--x1-025-r > .mwsc__article, .mwsc__articles.img--x1-020-r > .mwsc__article {
    grid-template-areas: "article_header article_img" "article_text article_img" "article_table article_img";
  }
  .mwsc__articles.img--x1-050.no_hx > .mwsc__article, .mwsc__articles.img--x1-040.no_hx > .mwsc__article, .mwsc__articles.img--x1-030.no_hx > .mwsc__article, .mwsc__articles.img--x1-025.no_hx > .mwsc__article, .mwsc__articles.img--x1-020.no_hx > .mwsc__article {
    grid-template-areas: "article_img article_text" "article_img article_table";
  }
  .mwsc__articles.img--x1-050.no_text > .mwsc__article, .mwsc__articles.img--x1-040.no_text > .mwsc__article, .mwsc__articles.img--x1-030.no_text > .mwsc__article, .mwsc__articles.img--x1-025.no_text > .mwsc__article, .mwsc__articles.img--x1-020.no_text > .mwsc__article {
    grid-template-areas: "article_img article_header" "article_img article_table";
  }
  .mwsc__articles.img--x1-050.no_table > .mwsc__article, .mwsc__articles.img--x1-040.no_table > .mwsc__article, .mwsc__articles.img--x1-030.no_table > .mwsc__article, .mwsc__articles.img--x1-025.no_table > .mwsc__article, .mwsc__articles.img--x1-020.no_table > .mwsc__article {
    grid-template-areas: "article_img article_header" "article_img article_text";
  }
  .mwsc__articles.img--x1-050-r.no_hx > .mwsc__article, .mwsc__articles.img--x1-040-r.no_hx > .mwsc__article, .mwsc__articles.img--x1-030-r.no_hx > .mwsc__article, .mwsc__articles.img--x1-025-r.no_hx > .mwsc__article, .mwsc__articles.img--x1-020-r.no_hx > .mwsc__article {
    grid-template-areas: "article_text article_img" "article_table article_img";
  }
  .mwsc__articles.img--x1-050-r.no_text > .mwsc__article, .mwsc__articles.img--x1-040-r.no_text > .mwsc__article, .mwsc__articles.img--x1-030-r.no_text > .mwsc__article, .mwsc__articles.img--x1-025-r.no_text > .mwsc__article, .mwsc__articles.img--x1-020-r.no_text > .mwsc__article {
    grid-template-areas: "article_header article_img" "article_table article_img";
  }
  .mwsc__articles.img--x1-050-r.no_table > .mwsc__article, .mwsc__articles.img--x1-040-r.no_table > .mwsc__article, .mwsc__articles.img--x1-030-r.no_table > .mwsc__article, .mwsc__articles.img--x1-025-r.no_table > .mwsc__article, .mwsc__articles.img--x1-020-r.no_table > .mwsc__article {
    grid-template-areas: "article_header article_img" "article_text article_img";
  }
  .mwsc__articles.img--x1-050.no_hx.no_text > .mwsc__article, .mwsc__articles.img--x1-040.no_hx.no_text > .mwsc__article, .mwsc__articles.img--x1-030.no_hx.no_text > .mwsc__article, .mwsc__articles.img--x1-025.no_hx.no_text > .mwsc__article, .mwsc__articles.img--x1-020.no_hx.no_text > .mwsc__article {
    grid-template-areas: "article_img article_table";
  }
  .mwsc__articles.img--x1-050.no_hx.no_table > .mwsc__article, .mwsc__articles.img--x1-040.no_hx.no_table > .mwsc__article, .mwsc__articles.img--x1-030.no_hx.no_table > .mwsc__article, .mwsc__articles.img--x1-025.no_hx.no_table > .mwsc__article, .mwsc__articles.img--x1-020.no_hx.no_table > .mwsc__article {
    grid-template-areas: "article_img article_text";
  }
  .mwsc__articles.img--x1-050.no_text.no_table > .mwsc__article, .mwsc__articles.img--x1-040.no_text.no_table > .mwsc__article, .mwsc__articles.img--x1-030.no_text.no_table > .mwsc__article, .mwsc__articles.img--x1-025.no_text.no_table > .mwsc__article, .mwsc__articles.img--x1-020.no_text.no_table > .mwsc__article {
    grid-template-areas: "article_img article_header";
  }
  .mwsc__articles.img--x1-050-r.no_hx.no_text > .mwsc__article, .mwsc__articles.img--x1-040-r.no_hx.no_text > .mwsc__article, .mwsc__articles.img--x1-030-r.no_hx.no_text > .mwsc__article, .mwsc__articles.img--x1-025-r.no_hx.no_text > .mwsc__article, .mwsc__articles.img--x1-020-r.no_hx.no_text > .mwsc__article {
    grid-template-areas: "article_table article_img";
  }
  .mwsc__articles.img--x1-050-r.no_hx.no_table > .mwsc__article, .mwsc__articles.img--x1-040-r.no_hx.no_table > .mwsc__article, .mwsc__articles.img--x1-030-r.no_hx.no_table > .mwsc__article, .mwsc__articles.img--x1-025-r.no_hx.no_table > .mwsc__article, .mwsc__articles.img--x1-020-r.no_hx.no_table > .mwsc__article {
    grid-template-areas: "article_text article_img";
  }
  .mwsc__articles.img--x1-050-r.no_text.no_table > .mwsc__article, .mwsc__articles.img--x1-040-r.no_text.no_table > .mwsc__article, .mwsc__articles.img--x1-030-r.no_text.no_table > .mwsc__article, .mwsc__articles.img--x1-025-r.no_text.no_table > .mwsc__article, .mwsc__articles.img--x1-020-r.no_text.no_table > .mwsc__article {
    grid-template-areas: "article_header article_img";
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x1-050 > .mwsc__article, .mwsc__articles.img--x1-050-r > .mwsc__article, .mwsc__articles.img--x1-040 > .mwsc__article, .mwsc__articles.img--x1-040-r > .mwsc__article, .mwsc__articles.img--x1-030 > .mwsc__article, .mwsc__articles.img--x1-030-r > .mwsc__article {
    gap: 1.6rem var(--SN-Contents-Spacing-Section-M);
  }
  .mwsc__articles.img--x1-050 > .mwsc__article > .mwsc__article_header, .mwsc__articles.img--x1-050-r > .mwsc__article > .mwsc__article_header, .mwsc__articles.img--x1-040 > .mwsc__article > .mwsc__article_header, .mwsc__articles.img--x1-040-r > .mwsc__article > .mwsc__article_header, .mwsc__articles.img--x1-030 > .mwsc__article > .mwsc__article_header, .mwsc__articles.img--x1-030-r > .mwsc__article > .mwsc__article_header {
    align-self: end;
  }
  .mwsc__articles.img--x1-050 > .mwsc__article > .mwsc__article_text, .mwsc__articles.img--x1-050-r > .mwsc__article > .mwsc__article_text, .mwsc__articles.img--x1-040 > .mwsc__article > .mwsc__article_text, .mwsc__articles.img--x1-040-r > .mwsc__article > .mwsc__article_text, .mwsc__articles.img--x1-030 > .mwsc__article > .mwsc__article_text, .mwsc__articles.img--x1-030-r > .mwsc__article > .mwsc__article_text {
    align-self: start;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x1-050 > .mwsc__article {
    grid-template-columns: 50% 1fr;
  }
  .mwsc__articles.img--x1-050-r > .mwsc__article {
    grid-template-columns: 1fr 50%;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.img--x1-050 > .mwsc__article > .mwsc__article_img {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x1-040 > .mwsc__article {
    grid-template-columns: 40% 1fr;
  }
  .mwsc__articles.img--x1-040-r > .mwsc__article {
    grid-template-columns: 1fr 40%;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.img--x1-040 > .mwsc__article > .mwsc__article_img {
    width: 80%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x1-030 > .mwsc__article {
    grid-template-columns: 30% 1fr;
  }
  .mwsc__articles.img--x1-030-r > .mwsc__article {
    grid-template-columns: 1fr 30%;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.img--x1-030 > .mwsc__article > .mwsc__article_img {
    width: 70%;
    margin: 0 auto;
  }
}
.mwsc__articles.img--x1-025 > .mwsc__article > .mwsc__article_header, .mwsc__articles.img--x1-020 > .mwsc__article > .mwsc__article_header {
  align-self: end;
}
.mwsc__articles.img--x1-025 > .mwsc__article > .mwsc__article_text, .mwsc__articles.img--x1-020 > .mwsc__article > .mwsc__article_text {
  align-self: start;
}
@media screen and (max-width: 599px) {
  .mwsc__articles.img--x1-025 > .mwsc__article, .mwsc__articles.img--x1-020 > .mwsc__article {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "article_header" "article_img" "article_text";
  }
  .mwsc__articles.img--x1-025 > .mwsc__article > .mwsc__article_header > h1, .mwsc__articles.img--x1-020 > .mwsc__article > .mwsc__article_header > h1 {
    margin-bottom: var(--SN-Space-16);
  }
  .mwsc__articles.img--x1-025 > .mwsc__article > .mwsc__article_img, .mwsc__articles.img--x1-020 > .mwsc__article > .mwsc__article_img {
    align-self: start;
    width: 60%;
  }
  .mwsc__articles.img--x1-025-r > .mwsc__article, .mwsc__articles.img--x1-020-r > .mwsc__article {
    grid-template-columns: 1fr;
    grid-template-areas: "article_header" "article_img" "article_text";
  }
  .mwsc__articles.img--x1-025-r > .mwsc__article > .mwsc__article_img, .mwsc__articles.img--x1-020-r > .mwsc__article > .mwsc__article_img {
    align-self: start;
    width: 60%;
  }
  .mwsc__articles.img--x1-025:not(.tbl--none) > .mwsc__article, .mwsc__articles.img--x1-020:not(.tbl--none) > .mwsc__article {
    grid-template-columns: 1fr;
    grid-template-areas: "article_header" "article_img" "article_text";
  }
  .mwsc__articles.img--x1-025-r:not(.tbl--none) > .mwsc__article, .mwsc__articles.img--x1-020-r:not(.tbl--none) > .mwsc__article {
    grid-template-columns: 1fr;
    grid-template-areas: "article_header" "article_img" "article_text";
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x1-025 > .mwsc__article {
    grid-template-columns: 25% 1fr;
  }
  .mwsc__articles.img--x1-025-r > .mwsc__article {
    grid-template-columns: 1fr 25%;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x1-020 > .mwsc__article {
    grid-template-columns: 20% 1fr;
  }
  .mwsc__articles.img--x1-020-r > .mwsc__article {
    grid-template-columns: 1fr 20%;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x2-040 > .mwsc__article > .mwsc__article_img > ul {
    grid-template-columns: 40% 40%;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.img--x2-040 > .mwsc__article > .mwsc__article_img > ul {
    grid-template-columns: 80%;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x2-030 > .mwsc__article > .mwsc__article_img > ul {
    grid-template-columns: 30% 30%;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.img--x2-030 > .mwsc__article > .mwsc__article_img > ul {
    grid-template-columns: 70%;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x2-020 > .mwsc__article > .mwsc__article_img > ul {
    grid-template-columns: 20% 20%;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.img--x2-020 > .mwsc__article > .mwsc__article_img > ul {
    grid-template-columns: 0.5fr 0.5fr;
    gap: var(--SN-Contents-Spacing-Body-M);
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x3-025 > .mwsc__article > .mwsc__article_img > ul {
    grid-template-columns: 25% 25% 25%;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.img--x3-025 > .mwsc__article > .mwsc__article_img > ul {
    display: flex;
    overflow-x: auto;
    justify-content: left;
    margin-left: calc(-1 * var(--SN-Space-16));
    width: calc(100% + var(--SN-Space-32));
    padding: var(--SN-Space-16);
    padding-top: 0;
    box-sizing: border-box;
    gap: var(--SN-Contents-Spacing-Body-M);
  }
  .mwsc__articles.img--x3-025 > .mwsc__article > .mwsc__article_img > ul > li {
    flex: 0 0 60%;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.img--x4-020 > .mwsc__article > .mwsc__article_img > ul {
    grid-template-columns: 20% 20% 20% 20%;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.img--x4-020 > .mwsc__article > .mwsc__article_img > ul {
    display: flex;
    overflow-x: auto;
    justify-content: left;
    margin-left: calc(-1 * var(--SN-Space-16));
    width: calc(100% + var(--SN-Space-32));
    padding: var(--SN-Space-16);
    padding-top: 0;
    box-sizing: border-box;
    gap: var(--SN-Contents-Spacing-Body-M);
  }
  .mwsc__articles.img--x4-020 > .mwsc__article > .mwsc__article_img > ul > li {
    flex: 0 0 60%;
  }
}

/**
 * 子要素段組み修飾子 (child--*):
 * .mwsc__articlesの直接の子要素（通常は.mwsc__article）を複数カラムでレイアウトします。
 * child--2, child--3, child--4 でそれぞれ2, 3, 4段組になります。
 */
.mwsc__articles.child {
  /**
   * アコーディオン修飾子 (child--accordion):
   * 子要素をアコーディオンUIとして機能させます。
   * .mwsc__articleがクリック可能なヘッダーとなり、それに続く.mwsc__articlesが開閉するコンテンツ部分となります。
   * .openクラスの付け外しで開閉を制御します。
   */
}
.mwsc__articles.child--1, .mwsc__articles.child--none {
  grid-template-columns: 1fr;
}
.mwsc__articles.child--2, .mwsc__articles.child--3, .mwsc__articles.child--4 {
  gap: var(--SN-Contents-Spacing-Body-M);
}
@media screen and (max-width: 599px) {
  .mwsc__articles.child--2, .mwsc__articles.child--3, .mwsc__articles.child--4 {
    gap: var(--SN-Contents-Spacing-Body-M);
    width: 90%;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.child--2 {
    grid-template-columns: repeat(2, calc((var(--mwsc__max-width-content) - var(--SN-Space-32) * 1) / 2));
    grid-template-areas: "article article" ". .";
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.child--3 {
    grid-template-columns: repeat(3, calc((var(--mwsc__max-width-content) - var(--SN-Space-32) * 2) / 3));
    grid-template-areas: "article article article" ". . .";
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.child--4 {
    grid-template-columns: repeat(4, calc((var(--mwsc__max-width-content) - var(--SN-Space-32) * 3) / 4));
    grid-template-areas: "article article article article" ". . . .";
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.child--4 {
    grid-template-columns: repeat(2, 50%);
    grid-template-areas: "article article" ". . ";
  }
}
.mwsc__articles.child--accordion {
  position: relative;
  padding: var(--SN-Space-16) 0 !important;
}
@media screen and (min-width: 600px) {
  .mwsc__articles.child--accordion:last-child {
    margin-bottom: 4rem;
  }
}
.mwsc__articles.child--accordion::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: var(--SN-Space-16) auto 0;
  width: 100vw;
  max-width: 95rem;
  border-radius: var(--SN-Radius-8);
  height: calc(100% - var(--SN-Space-32));
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.16), 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
  background-color: #fff;
}
@media screen and (max-width: 599px) {
  .mwsc__articles.child--accordion::before {
    width: 100%;
    max-width: 90vw;
  }
}
.mwsc__articles.child--accordion > * {
  background: #fff;
}
.mwsc__articles.child--accordion > .mwsc__articles:first-of-type {
  padding: var(--SN-Contents-Spacing-Body-L, 2.4rem) 0;
}
.mwsc__articles.child--accordion > .mwsc__articles:last-child {
  border-radius: 0 0 var(--radius_l) var(--radius_l);
}
.mwsc__articles.child--accordion > .mwsc__articles {
  display: none;
  overflow: hidden;
  transition: height 0.5s;
  --mwsc__max-width-content: calc(
    var(--width_max_pc_m) - var(--mwsc__clear-space-content--v) * 2 -
      1.6rem * 4
  );
  --mwsc__max-width-content_sp: calc(
    100vw - var(--mwsc__clear-space-content_sp--v) * 2 - 1.6rem * 2
  );
}
.mwsc__articles.child--accordion > .mwsc__article {
  position: relative;
  border: none;
  gap: 0 1.6rem;
  border-radius: var(--radius_l);
  margin: 0;
  box-sizing: border-box;
  background-color: #fff;
  cursor: pointer;
  max-width: unset;
}
@media screen and (min-width: 600px) {
  .mwsc__articles.child--accordion > .mwsc__article {
    padding: 1.6rem 4.8rem;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.child--accordion > .mwsc__article {
    padding: 1.6rem 3.2rem 1.6rem 1.6rem;
    max-width: 90vw;
    gap: 1.6rem;
  }
}
.mwsc__articles.child--accordion > .mwsc__article::after {
  content: "";
  background-image: url("/~/media/img/common/icon/icon_caret_open_w.svg");
  background-color: var(--color_ui_dark);
  background-repeat: no-repeat;
  background-position: center center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius_max);
  color: var(--color_font_mid);
  position: absolute;
  right: 1rem;
  box-sizing: border-box;
  transition: all 0.3s;
  background-size: contain;
}
@media screen and (max-width: 599px) {
  .mwsc__articles.child--accordion > .mwsc__article::after {
    top: 1em;
  }
}
.mwsc__articles.child--accordion > .mwsc__article:hover {
  background-color: #fafafa;
}
.mwsc__articles.child--accordion > .mwsc__article:hover::after {
  background-color: var(--color_ui_dark_hover);
}
.mwsc__articles.child--accordion > .mwsc__article.open {
  border-radius: var(--SN-Radius-8) var(--SN-Radius-8) 0px 0px;
  border-bottom: 1px solid var(--SN-Color-Border-Neutral-Subtle, #d8dddf);
  background: var(--SN-Color-Background-Neutral-Subtle, #f6f7f8);
}
.mwsc__articles.child--accordion > .mwsc__article.open ~ .mwsc__articles {
  display: grid;
  height: auto;
  z-index: 1;
}
@media screen and (min-width: 600px) {
  .mwsc__articles.child--accordion > .mwsc__article.open ~ .mwsc__articles {
    place-items: flex-start;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.child--accordion > .mwsc__article.open ~ .mwsc__articles {
    max-width: 90vw;
  }
}
.mwsc__articles.child--accordion > .mwsc__article.open::after {
  content: "";
  background-image: url("/~/media/img/common/icon/icon_caret_close_w.svg");
  background-color: var(--SN-Color-Background-Neutral-Solid--Enable);
}
.mwsc__articles.child--accordion > .mwsc__article.open:hover::after {
  background-color: var(--color_ui_mid_hover);
}
.mwsc__articles.child--accordion .mwsc__articles {
  max-width: unset;
}
.mwsc__articles.child--accordion .mwsc__articles .mwsc__article {
  gap: 1.6rem !important;
}
.mwsc__articles.child--accordion .mwsc__article .mwsc__article_header h2 {
  font-size: var(--SN-Contents-Title-M-Font-size);
}
@media screen and (max-width: 599px) {
  .mwsc__articles.child--accordion .mwsc__article .mwsc__article_header h2 {
    font-size: var(--SN-Font-size-40);
  }
}
.mwsc__articles.child--accordion .mwsc__article .mwsc__article_header h3 {
  font-size: var(--SN-Contents-Title-S-Font-size);
}
@media screen and (max-width: 599px) {
  .mwsc__articles.child--accordion .mwsc__article .mwsc__article_header h3 {
    font-size: var(--SN-Font-size-30);
  }
}
.mwsc__articles.child--accordion .mwsc__article .mwsc__article_header h4 {
  font-size: var(--SN-Contents-Subtitle-M-Font-size);
}
@media screen and (max-width: 599px) {
  .mwsc__articles.child--accordion .mwsc__article .mwsc__article_header h4 {
    font-size: var(--SN-Font-size-30);
  }
}
.mwsc__articles.child--accordion .mwsc__article .mwsc__article_text_note {
  margin-top: var(--SN-Contents-Spacing-Body-M);
}
.mwsc__articles.child--accordion.layer--1 {
  gap: 0;
}
@media screen and (min-width: 600px) {
  .mwsc__articles.child--accordion.child--none {
    grid-template-columns: repeat(1, 95rem);
  }
}
.mwsc__articles.child--accordion.child--none .mwsc__articles {
  width: auto;
}
@media screen and (min-width: 600px) {
  .mwsc__articles.child--accordion.child--none .mwsc__articles {
    padding: 2.4rem 4.8rem;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.child--accordion.child--2 {
    grid-template-areas: "article article";
    grid-template-columns: repeat(2, 46.7rem);
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.child--accordion.child--3 {
    grid-template-areas: "article article article";
    grid-template-columns: repeat(3, 30.6rem);
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.child--accordion.child--4 {
    grid-template-areas: "article article article article";
    grid-template-columns: repeat(4, 22.6rem);
  }
}
.mwsc__articles.child--accordion.child--2 .mwsc__articles, .mwsc__articles.child--accordion.child--3 .mwsc__articles, .mwsc__articles.child--accordion.child--4 .mwsc__articles {
  box-shadow: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 1.6rem 1.6rem;
}
@media screen and (max-width: 599px) {
  .mwsc__articles.child--accordion.child--2, .mwsc__articles.child--accordion.child--3, .mwsc__articles.child--accordion.child--4 {
    grid-template-columns: 1fr;
    grid-template-areas: "article";
  }
}

/**
 * テキスト段組み修飾子 (column--*):
 * .mwsc__article_text_body内のテキストを複数カラムで表示します。
 * CSSの `columns` プロパティを使用しています。
 */
@media screen and (min-width: 600px) {
  .mwsc__articles.column--2 > .mwsc__article > .mwsc__article_text > .mwsc__article_text_body {
    -moz-columns: 2;
         columns: 2;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.column--3 > .mwsc__article > .mwsc__article_text > .mwsc__article_text_body {
    -moz-columns: 3;
         columns: 3;
  }
}
@media screen and (min-width: 600px) {
  .mwsc__articles.column--4 > .mwsc__article > .mwsc__article_text > .mwsc__article_text_body {
    -moz-columns: 4;
         columns: 4;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__articles.column--4 > .mwsc__article > .mwsc__article_text > .mwsc__article_text_body {
    -moz-columns: 2;
         columns: 2;
  }
}
.mwsc__articles.column--2 > .mwsc__article > .mwsc__article_text > .mwsc__article_text_body > *, .mwsc__articles.column--3 > .mwsc__article > .mwsc__article_text > .mwsc__article_text_body > *, .mwsc__articles.column--4 > .mwsc__article > .mwsc__article_text > .mwsc__article_text_body > * {
  width: auto;
}

/**
 * 記事コンポーネント (.mwsc__article):
 * サイトの主要なコンテンツブロックのスタイルです。
 * CSS Gridを使用して、ヘッダー、画像、テキスト、テーブルなどの内部要素を配置します。
 * このコンポーネントがコンテンツの最小単位となります。
 */
.mwsc__article {
  grid-area: article;
  margin: 0 auto;
  display: grid;
  gap: var(--SN-Contents-Spacing-Section-M);
  justify-content: stretch;
  justify-items: center;
  align-items: center;
  width: 100%;
  /**
   * 記事ヘッダー (.mwsc__article_header): 見出しなどが入ります。
   */
  /**
   * 記事画像エリア (.mwsc__article_img): 画像や画像のリストを配置します。
   */
  /**
   * 記事テキストエリア (.mwsc__article_text): 本文や注釈などが入ります。
   */
  /**
   * 記事テーブルエリア (.mwsc__article_table): テーブルを配置します。
   */
}
@media screen and (max-width: 599px) {
  .mwsc__article {
    gap: var(--SN-Contents-Spacing-Body-M);
    word-break: break-word;
  }
}
.mwsc__article.tbl--none {
  grid-template-areas: "article_header" "article_img" "article_text";
}
.mwsc__article:not(.tbl--none) {
  grid-template-areas: "article_header" "article_img" "article_text" "article_table";
}
.mwsc__article_header {
  grid-area: article_header;
}
.mwsc__article_header.unlabeled {
  display: none;
}
.mwsc__article_img {
  grid-area: article_img;
  width: 100%;
}
.mwsc__article_img ul {
  display: grid;
  gap: var(--SN-Contents-Spacing-Body-M);
  margin: 0;
  padding: 0;
  justify-content: center; /*strech*/
  justify-items: center;
  align-items: center;
}
@media screen and (min-width: 600px) {
  .mwsc__article_img ul {
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
  }
}
.mwsc__article_img ul li {
  list-style: none;
}
.mwsc__article_img ul li P {
  font-size: var(--SN-Font-size-5);
  text-align: center;
  margin: 0 auto;
}
.mwsc__article_text {
  grid-area: article_text;
  text-align: center;
}
.mwsc__article_text_body {
  text-align: left;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: var(--mwsc__max-width-txt);
  margin-left: auto;
  margin-right: auto;
}
.mwsc__article_text_body p {
  -webkit-margin-after: 0.5em;
          margin-block-end: 0.5em;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  font-size: var(--SN-Contents-Body-M-Font-size);
  line-height: var(--SN-Line-height-L);
  font-weight: var(--SN-Font-weight-Reg);
  letter-spacing: var(--SN-Letter-spacing-S);
  font-feature-settings: "palt" off;
}
.mwsc__article_text_body ul,
.mwsc__article_text_body ol {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: var(--mwsc__max-width-txt);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  padding: 0;
}
@media screen and (max-width: 599px) {
  .mwsc__article_text_body ul,
.mwsc__article_text_body ol {
    margin-left: 0rem;
  }
}
.mwsc__article_text_body li {
  margin: 0 0 0.5em 2em;
  list-style: initial;
}
.mwsc__article_text_body ol li {
  list-style: decimal;
}
.mwsc__article_text p:first-of-type {
  margin-top: 0;
}
.mwsc__article_text_note {
  font-size: var(--SN-Contents-Caption-M-Font-size);
  line-height: var(--SN-Line-height-S);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: var(--mwsc__max-width-txt);
  margin: 0 auto;
  text-align: left;
}
.mwsc__article_text_note p {
  -webkit-margin-after: 0.5em;
          margin-block-end: 0.5em;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  letter-spacing: var(--SN-Letter-spacing-S);
  font-feature-settings: "palt" off;
}
.mwsc__article_text_body + .mwsc__article_text_note {
  margin-top: 2em;
}
.mwsc__article_table {
  grid-area: article_table;
  max-width: 100%;
}
.mwsc__article_table > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mwsc__image > input[type=checkbox] {
  display: none;
}

/**
 * 画像・動画コンポーネント (.mwsc__image):
 * 画像や動画の表示スタイルを定義します。チェックボックスを利用したモーダル表示機能も含まれます。
 */
.mwsc__image {
  /**
   * Youtube埋め込み動画: アスペクト比を16:9に保ちます。
   */
  /**
   * 画像ポップアップの制御:
   * チェックボックス(.mwsc__image_cb)の状態に応じてモーダルウィンドウの表示/非表示を切り替えます。
   */
}
.mwsc__image img {
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.mwsc__image .mwsc__image_image {
  /*
  display: grid;
  place-items: center;
  */
  /**
   * 画像モーダル: クリック時に画像を画面全体にポップアップ表示します。
   */
}
.mwsc__image .mwsc__image_image--modal {
  position: fixed;
  display: none;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5000;
}
.mwsc__image .mwsc__image_movie {
  width: 100%;
  aspect-ratio: 16/9;
}
.mwsc__image .mwsc__image_cb + figure label {
  cursor: pointer;
}
.mwsc__image .mwsc__image_cb:checked + figure .mwsc__image_image--modal {
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 2em;
}
.mwsc__image .mwsc__image_cb:checked + figure .mwsc__image_image--modal > img {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
}
.mwsc__image .mwsc__image_cb + figure .mwsc__image_image {
  position: relative;
}
.mwsc__image .mwsc__image_cb + figure .mwsc__image_image::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url(/~/media/img/common/icon/ZOOM.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

/**
 * テーブルスタイル:
 * .mwsc__article_table 内のテーブルは、横幅がはみ出した場合にスクロールできるように設定されています。
 */
.mwsc__article_table {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 1em;
  box-sizing: border-box;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.mwsc__article_table::-webkit-scrollbar {
  width: 1rem;
  height: 1rem;
}
.mwsc__article_table::-webkit-scrollbar-thumb {
  background: var(--color_ui_mid);
  border-radius: 100vh;
  border: 0.1rem solid transparent;
  background-clip: padding-box;
  height: 0.4rem;
}
.mwsc__article_table::-webkit-scrollbar-track {
  background: var(--color_ui_light);
  border-radius: 100vh;
}
.mwsc__article_table table {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
@media screen and (min-width: 600px) {
  .mwsc__article_table table {
    max-width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .mwsc__article_table table {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
}

.mwsc__article_text_body table {
  max-width: var(--width_max_pc_l);
  display: block;
  overflow-x: auto;
  padding: 1em;
  box-sizing: border-box;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 599px) {
  .mwsc__article_text_body table {
    width: calc(100vw - 2em);
  }
}
.mwsc__article_text_body table::-webkit-scrollbar {
  width: 1rem;
  height: 1rem;
}
.mwsc__article_text_body table::-webkit-scrollbar-thumb {
  background: var(--color_ui_mid);
  border-radius: 100vh;
  border: 0.1rem solid transparent;
  background-clip: padding-box;
  height: 0.4rem;
}
.mwsc__article_text_body table::-webkit-scrollbar-track {
  background: var(--color_ui_light);
  border-radius: 100vh;
}

/**
 * テーブル共通スタイル: th, tdのボーダーやパディングなどを定義します。
 */
.mwsc__article_table table th,
.mwsc__article_table table td,
.mwsc__article_text_body table th,
.mwsc__article_text_body table td {
  text-align: left;
  padding: 0.2em 1em;
  border: 0.1rem solid var(--color_border_dark);
  font-weight: normal;
  white-space: inherit;
}
.mwsc__article_table table UL,
.mwsc__article_table table OL,
.mwsc__article_text_body table UL,
.mwsc__article_text_body table OL {
  margin-left: 1.5em;
}
.mwsc__article_table table > LI,
.mwsc__article_text_body table > LI {
  margin-left: 1.5em;
  font-size: 11px;
}
.mwsc__article_table table tbody,
.mwsc__article_text_body table tbody {
  width: 100%;
  display: table-row-group;
}
.mwsc__article_table table thead,
.mwsc__article_text_body table thead {
  display: table-header-group;
}
.mwsc__article_table table tfoot,
.mwsc__article_text_body table tfoot {
  display: table-footer-group;
}
.mwsc__article_table table.dTbl td,
.mwsc__article_text_body table.dTbl td {
  background-color: #fff;
}
.mwsc__article_table table.dTbl th,
.mwsc__article_text_body table.dTbl th {
  background-color: var(--color_ui_light);
}

/**
 * アイコンバッジ:
 * "NEW", "power up", "update" などのテキストバッジのスタイルです。
 */
.mwsc__article .icon--new::before {
  content: "NEW";
}
.mwsc__article .icon--pow::before {
  content: "power up";
}
.mwsc__article .icon--upd::before {
  content: "update";
}
.mwsc__article .icon--new, .mwsc__article .icon--pow, .mwsc__article .icon--upd {
  display: inline-flex;
  line-height: 1;
  font-size: 0;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}
.mwsc__article .icon--new::before, .mwsc__article .icon--pow::before, .mwsc__article .icon--upd::before {
  display: block;
  line-height: 1.4;
  color: white;
  background-color: #b00;
  border-radius: 0.2rem;
  margin: auto 0.5em;
  padding: 0.1em 0.5em;
  font-size: var(--SN-Font-size-10);
  font-weight: 900;
}

/**
 * PCスペックアイコンリスト:
 * PCのスペック（CPU, メモリなど）を一覧表示するための特殊なコンポーネントのスタイルです。
 */
.icon_pc_spec__list {
  display: flex;
  justify-content: center;
  list-style: none;
  width: 98rem;
  padding: 0;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  .icon_pc_spec__list {
    flex-wrap: wrap;
    width: 100%;
  }
}
.icon_pc_spec__list li {
  color: #fff;
  font-size: var(--size_txt_s);
  border-radius: var(--radius_s);
  padding: 0.5em;
  box-sizing: border-box;
  width: 14rem;
  margin: 0.5em 0.25em;
  text-align: center;
  list-style: none;
}
@media screen and (max-width: 599px) {
  .icon_pc_spec__list li {
    width: 100%;
    display: flex;
    margin: 0.1em;
  }
}
.icon_pc_spec__list li::before {
  content: "";
  display: block;
  font-weight: bold;
  font-size: var(--size_h_xs);
  border-bottom: 1px solid #fff;
  padding-bottom: 0.25em;
  margin-bottom: 0.25em;
}
@media screen and (max-width: 599px) {
  .icon_pc_spec__list li::before {
    border-bottom: 0;
    width: 12em;
    border-right: 1px solid #fff;
    padding-right: 0.5em;
    margin-right: 1em;
  }
}
.icon_pc_spec__list li > span {
  text-align: left;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  .icon_pc_spec__list li > span {
    width: 100%;
  }
}
.icon_pc_spec__list li.spec_on {
  background: #4693d0;
}
.icon_pc_spec__list li.spec_off {
  background: #c9c9c9;
}
.icon_pc_spec__list li.spec_display::before {
  content: "液晶サイズ";
}
.icon_pc_spec__list li.spec_cpu::before {
  content: "CPU";
}
.icon_pc_spec__list li.spec_memory::before {
  content: "メモリ容量";
}
.icon_pc_spec__list li.spec_storage::before {
  content: "ストレージ容量";
}
.icon_pc_spec__list li.spec_os::before {
  content: "OS";
}
.icon_pc_spec__list li.spec_office::before {
  content: "Office";
}
.icon_pc_spec__list li.spec_drive::before {
  content: "ドライブ";
}