@charset "UTF-8";
/* ========================================================
   カスケードレイヤーの順序定義
   ======================================================== */
@import url("../normalize.css") layer(legacy);
@import url("../default.css") layer(legacy);
/* ========================================================
   カスケードレイヤーの順序定義
   ======================================================== */
@layer legacy, reset, foundation, base, layout, components, project, utilities;
/* ========================================================
   Legacy（既存テーマCSS → 最下層レイヤー）
   ======================================================== */
@layer legacy {
  body.materials-guide-map {
    overflow-x: clip;
  }
  .materials-guide-map #pageTitle {
    display: none;
  }
  .materials-guide-map #mainContent {
    float: none;
    width: auto;
    min-height: 0;
    margin-right: 0;
  }
}
/* ========================================================
   Foundation
   ======================================================== */
@layer foundation {
  :root {
    --color-teal-100: #e6f8f7;
    --color-teal-200: #ccf2f0;
    --color-teal-300: #b3ece8;
    --color-teal-400: #67d8d1;
    --color-teal-500: #01beb3;
    --color-teal-600: #01988f;
    --color-teal-700: #01726b;
    --color-teal-800: #004c48;
    --color-teal-900: #003936;
    --color-teal-100-rgb: 230 248 247;
    --color-teal-200-rgb: 204 242 240;
    --color-teal-300-rgb: 179 236 232;
    --color-teal-400-rgb: 103 216 209;
    --color-teal-500-rgb: 1 190 179;
    --color-teal-600-rgb: 1 152 143;
    --color-teal-700-rgb: 1 114 107;
    --color-teal-800-rgb: 0 76 72;
    --color-teal-900-rgb: 0 57 54;
    --color-gray-100: #f3f3f3;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #cccccc;
    --color-gray-400: #b3b3b3;
    --color-gray-500: #999999;
    --color-gray-600: #808080;
    --color-gray-700: #666666;
    --color-gray-800: #4d4d4d;
    --color-gray-900: #333333;
    --color-gray-100-rgb: 243 243 243;
    --color-gray-200-rgb: 229 229 229;
    --color-gray-300-rgb: 204 204 204;
    --color-gray-400-rgb: 179 179 179;
    --color-gray-500-rgb: 153 153 153;
    --color-gray-600-rgb: 128 128 128;
    --color-gray-700-rgb: 102 102 102;
    --color-gray-800-rgb: 77 77 77;
    --color-gray-900-rgb: 51 51 51;
    --color-blue-200: #d2eaff;
    --color-blue-300: #99d0ff;
    --color-blue-400: #68b6fa;
    --color-blue-200-rgb: 210 234 255;
    --color-blue-300-rgb: 153 208 255;
    --color-blue-400-rgb: 104 182 250;
    --color-beige-100: #f7f4f0;
    --color-beige-100-rgb: 247 244 240;
    --color-red-500: #ea365c;
    --color-red-500-rgb: 234 54 92;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-white-rgb: 255 255 255;
    --color-black-rgb: 0 0 0;
    /* --------------------------------------------------------
       Alpha（rgb() / slash 構文）
    -------------------------------------------------------- */
    --color-black-alpha-20: rgb(var(--color-black-rgb) / var(--opacity-20));
  }
}
@layer foundation {
  :root {
    --font-family-system-jp: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
    --font-family-lato: "Lato", sans-serif;
    --font-family-noto-sans-jp: "Noto Sans JP", var(--font-family-system-jp);
    --font-family-barlow: "Barlow", sans-serif;
    --font-family-inter: "Inter", var(--font-family-noto-sans-jp);
  }
}
@layer foundation {
  :root {
    --font-size-2xs: 0.625rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.5rem;
    --font-size-7xl: 4rem;
    --font-size-8xl: 6rem;
    --font-size-9xl: 6.5rem;
    --line-height-2xs: 1;
    --line-height-xs: 1.2;
    --line-height-sm: 1.4;
    --line-height-md: 1.7;
    --line-height-lg: 1.8;
    --line-height-xl: 2;
    --letter-spacing-md: 0em;
    --letter-spacing-xs: 0.01em;
    --letter-spacing-sm: 0.02em;
    --letter-spacing-lg: 0.05em;
    --letter-spacing-xl: 0.1em;
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --spacing-0: 0rem;
    --spacing-2xs: 0.125rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 5rem;
    --spacing-5xl: 8rem;
    --radius-0: 0;
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --container-max-default: 62.5rem;
    --container-max-narrow: 50rem;
    --container-gutter: var(--spacing-md);
    --shadow-default: 0 var(--spacing-2xs) var(--spacing-sm) rgb(0 0 0 / var(--opacity-10));
    --z-index-base: 0;
    --z-index-under: -1;
    --z-index-layer-low: 10;
    --z-index-layer-mid: 20;
    --z-index-layer-high: 30;
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --transition-default: all var(--duration-base) ease;
    --transition-fast: all var(--duration-fast) ease;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-50: 0.5;
    --opacity-70: 0.7;
    --border-width-thin: 1px;
    --border-width-bold: 2px;
    --border-width-heavy: 4px;
    --icon-triangle-up: url("../../images/mgm/icon_triangle.svg");
    --icon-arrow-forward: url("../../images/mgm/icon_arrow.svg");
  }
}
@layer foundation {
  :root {
    --semantic-text: var(--color-black);
    --semantic-text-strong: var(--color-black);
    --semantic-text-subtle: var(--color-gray-500);
    --semantic-text-inverse: var(--color-white);
    --semantic-text-accent: var(--color-teal-500);
    --semantic-text-emphasis: var(--color-red-500);
    --semantic-bg-surface: var(--color-white);
    --semantic-bg-muted: var(--color-gray-100);
    --semantic-bg-warm: var(--color-beige-100);
    --semantic-bg-accent: var(--color-teal-500);
    --semantic-border-color-subtle: var(--color-gray-200);
    --semantic-border-color-neutral: var(--color-gray-300);
    --semantic-border-color-strong: var(--color-gray-500);
    --semantic-border-color-strongest: var(--color-gray-900);
    --semantic-border-color-accent: var(--color-teal-500);
    --semantic-border-style-subtle: var(--border-width-thin) solid var(--semantic-border-color-subtle);
    --semantic-border-style-neutral: var(--border-width-thin) solid var(--semantic-border-color-neutral);
    --semantic-border-style-strong: var(--border-width-thin) solid var(--semantic-border-color-strong);
    --semantic-border-style-strongest: var(--border-width-thin) solid var(--semantic-border-color-strongest);
    --semantic-border-style-brand: var(--border-width-thin) solid var(--semantic-border-color-accent);
    --semantic-link-fg: var(--color-teal-500);
    --semantic-link-fg-visited: var(--color-teal-500);
    --semantic-link-fg-hover: var(--color-teal-600);
    --semantic-link-fg-active: var(--color-teal-700);
    --semantic-focus-ring: var(--color-teal-500);
    --semantic-button-primary-bg: var(--color-teal-500);
    --semantic-button-primary-bg--hover: var(--color-teal-400);
    --semantic-button-primary-text: var(--color-white);
    --semantic-button-primary-border: var(--color-teal-500);
    --semantic-button-outline-bg: var(--color-white);
    --semantic-button-outline-bg--hover: var(--color-teal-100);
    --semantic-button-outline-text: var(--color-gray-900);
    --semantic-button-outline-border: var(--color-gray-900);
    --semantic-bg-anchor-button: var(--color-white);
    --semantic-bg-anchor-button--hover: var(--color-teal-100);
    --semantic-text-anchor-button: var(--color-black);
    --semantic-border-style-anchor-button: var(--border-width-heavy) solid var(--color-blue-300);
    --semantic-text-section-h2-subtitle: var(--color-blue-400);
    --semantic-border-style-section-h2-head: var(--semantic-border-style-brand);
    --semantic-bg-image-card-figure: var(--color-gray-300);
    --semantic-border-style-note: var(--border-width-heavy) solid var(--color-black);
    --semantic-bg-table-thead-th: var(--color-teal-500);
    --semantic-text-table-thead-th: var(--color-white);
    --semantic-bg-table-tbody-td: var(--color-white);
    --semantic-bg-table-row--stripe: var(--color-gray-100);
    --semantic-bg-table-row--hover: var(--color-teal-100);
    --semantic-border-style-table: var(--semantic-border-style-neutral);
    --semantic-bg-mgm-hero: var(--color-gray-100);
    --semantic-text-mgm-hero: var(--color-black);
    --semantic-bg-mgm-about-box: var(--color-blue-200);
    --semantic-bg-mgm-advisor: var(--color-blue-200);
    --semantic-text-mgm-advisor-title: var(--color-blue-400);
  }
}
@layer foundation {
  :root {
    --semantic-radius-none: var(--radius-0);
    --semantic-radius-xs: var(--radius-xs);
    --semantic-radius-sm: var(--radius-sm);
    --semantic-radius-md: var(--radius-md);
    --semantic-radius-full: var(--radius-full);
    --semantic-outline-width: var(--border-width-bold);
    --semantic-outline-offset: 2px;
    --semantic-section-gap: var(--spacing-4xl);
    --semantic-section-gap--sm: var(--spacing-3xl);
    --semantic-scroll-margin-top: var(--spacing-lg);
    --semantic-radius-button: var(--radius-md);
    --semantic-min-inline-size-button: 19.9375rem;
    --semantic-min-block-size-button: 5.0625rem;
    --semantic-size-button-icon: var(--spacing-md);
    --semantic-pad-block-button: var(--spacing-md);
    --semantic-pad-inline-button: var(--spacing-xl);
    --semantic-radius-anchor-button: var(--radius-md);
    --semantic-min-block-size-anchor-button: 9.6875rem;
    --semantic-inline-size-anchor-button-icon: 2.0625rem;
    --semantic-block-size-anchor-button-icon: var(--spacing-lg);
    --semantic-inset-block-end-anchor-button-icon: var(--spacing-sm);
    --semantic-pad-block-section-h2-head: var(--spacing-sm);
    --semantic-gap-section-h2-head: var(--spacing-lg);
    --semantic-inline-size-image-card-item: 16rem;
    --semantic-gap-image-card: var(--spacing-xl);
    --semantic-gap-image-card-item: var(--spacing-md);
    --semantic-radius-image-card-figure: var(--radius-0);
    --semantic-aspect-ratio-image-card-figure: 16 / 10;
    --semantic-pad-inline-start-note: var(--spacing-lg);
    --semantic-pad-block-table-cell: var(--spacing-sm);
    --semantic-pad-inline-table-cell: var(--spacing-md);
    --semantic-min-block-size-mgm-hero: 43.75rem;
    --semantic-pad-block-start-mgm-hero: 8.875rem;
    --semantic-gap-mgm-hero-body: 1.625rem;
    --semantic-inline-size-mgm-hero-image: 95.25rem;
    --semantic-offset-inline-mgm-hero-image: 45rem;
    --semantic-offset-block-mgm-hero-image: -18.375rem;
    --semantic-gap-mgm-about-box: var(--spacing-xl);
    --semantic-pad-block-start-mgm-about-box: var(--spacing-3xl);
    --semantic-pad-block-end-mgm-about-box: 10.5rem;
    --semantic-overlap-mgm-anchor-nav: 7.1875rem;
    --semantic-gap-mgm-list: var(--spacing-xl);
    --semantic-margin-block-start-mgm-list--first: var(--spacing-2xl);
    --semantic-pad-block-mgm-advisor: var(--spacing-3xl);
    --semantic-gap-mgm-advisor: var(--spacing-xl);
    --semantic-grid-template-columns-mgm-advisor-body: minmax(0, 605fr) minmax(0, 483fr);
    --semantic-aspect-ratio-mgm-advisor-photo: 483 / 302;
    --semantic-margin-block-end-mgm-advisor-list: 1.75rem;
  }
}
@layer foundation {
  :root {
    --semantic-font-family-body-text: var(--font-family-noto-sans-jp);
    --semantic-font-size-body-text: var(--font-size-md);
    --semantic-font-weight-body-text: var(--font-weight-regular);
    --semantic-line-height-body-text: var(--line-height-xl);
    --semantic-letter-spacing-body-text: var(--letter-spacing-md);
    --semantic-line-height-section-h2: var(--line-height-xs);
    --semantic-font-size-section-h2-title: 2.25rem;
    --semantic-font-weight-section-h2-title: var(--font-weight-bold);
    --semantic-font-size-section-h2-subtitle: var(--font-size-2xl);
    --semantic-font-weight-section-h2-subtitle: var(--font-weight-regular);
    --semantic-font-size-note: var(--font-size-sm);
    --semantic-line-height-note: var(--line-height-sm);
    --semantic-font-family-update-date: var(--font-family-inter);
    --semantic-font-size-update-date: var(--font-size-xs);
    --semantic-font-size-button: var(--font-size-md);
    --semantic-font-weight-button: var(--font-weight-regular);
    --semantic-font-size-anchor-button: var(--font-size-lg);
    --semantic-font-weight-anchor-button: var(--font-weight-bold);
    --semantic-font-size-image-card-title: var(--font-size-md);
    --semantic-font-weight-image-card-title: var(--font-weight-bold);
    --semantic-font-size-image-card-text: var(--font-size-sm);
    --semantic-line-height-image-card: var(--line-height-sm);
    --semantic-font-size-table: var(--font-size-sm);
    --semantic-line-height-table: var(--line-height-sm);
    --semantic-font-family-mgm-hero: var(--font-family-noto-sans-jp);
    --semantic-line-height-mgm-hero: var(--line-height-xs);
    --semantic-font-size-mgm-hero-shoulder: var(--font-size-lg);
    --semantic-font-weight-mgm-hero-shoulder: var(--font-weight-bold);
    --semantic-font-family-mgm-hero-shoulder-en: var(--font-family-barlow);
    --semantic-font-size-mgm-hero-shoulder-en: var(--font-size-xl);
    --semantic-font-weight-mgm-hero-shoulder-en: var(--font-weight-light);
    --semantic-font-family-mgm-hero-title: var(--font-family-barlow);
    --semantic-font-size-mgm-hero-title-main: var(--font-size-9xl);
    --semantic-font-weight-mgm-hero-title-main: var(--font-weight-bold);
    --semantic-letter-spacing-mgm-hero-title-main: var(--letter-spacing-xs);
    --semantic-font-size-mgm-hero-title-sub: var(--font-size-8xl);
    --semantic-font-weight-mgm-hero-title-sub: var(--font-weight-thin);
    --semantic-font-size-mgm-hero-catch: var(--font-size-2xl);
    --semantic-font-weight-mgm-hero-catch: var(--font-weight-bold);
    --semantic-line-height-mgm-hero-catch: 1.3333;
    --semantic-font-size-mgm-about-title: var(--font-size-2xl);
    --semantic-font-weight-mgm-about-title: var(--font-weight-bold);
    --semantic-line-height-mgm-about-title: var(--line-height-sm);
    --semantic-line-height-mgm-advisor: 1.75;
    --semantic-font-size-mgm-advisor-catch: var(--font-size-md);
    --semantic-font-size-mgm-advisor-title: var(--font-size-2xl);
    --semantic-font-size-mgm-advisor-title-quote: var(--font-size-3xl);
    --semantic-font-weight-mgm-advisor-title: var(--font-weight-bold);
    --semantic-font-size-mgm-advisor-list: var(--font-size-xl);
    --semantic-line-height-mgm-advisor-list: var(--line-height-xl);
    --semantic-font-size-mgm-advisor-text: var(--font-size-md);
  }
}
/* ========================================================
   Base（.p-mgm の内側に限定）
   ======================================================== */
@layer base {
  :where(.p-mgm) {
    color: var(--semantic-text);
    font-family: var(--semantic-font-family-body-text);
    font-size: var(--semantic-font-size-body-text);
    font-weight: var(--semantic-font-weight-body-text);
    line-height: var(--semantic-line-height-body-text);
    letter-spacing: var(--semantic-letter-spacing-body-text);
    text-align: start;
    background-color: var(--semantic-bg-surface);
    line-break: strict;
  }
  :where(.p-mgm),
  :where(.p-mgm) *,
  :where(.p-mgm) ::before,
  :where(.p-mgm) ::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  :where(.p-mgm) :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: var(--spacing-0);
  }
  :where(.p-mgm) :is(ul, ol)[class] {
    margin: var(--spacing-0);
    padding: var(--spacing-0);
    list-style: none;
  }
  :where(.p-mgm) a {
    color: var(--semantic-link-fg);
    text-decoration: underline;
    text-underline-offset: 0.16em;
    text-decoration-thickness: 0.08em;
    -webkit-transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
    transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
  }
  :where(.p-mgm) a:visited {
    color: var(--semantic-link-fg-visited);
  }
  :where(.p-mgm) a:hover {
    color: var(--semantic-link-fg-hover);
  }
  :where(.p-mgm) a:active {
    color: var(--semantic-link-fg-active);
  }
  :where(.p-mgm) a:focus-visible {
    outline: var(--semantic-outline-width) solid var(--semantic-focus-ring);
    outline-offset: var(--semantic-outline-offset);
  }
  :where(.p-mgm) img,
  :where(.p-mgm) svg,
  :where(.p-mgm) video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  :where(.p-mgm) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--semantic-text-strong);
    text-wrap: balance;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(.p-mgm) * {
      -webkit-transition: none !important;
      transition: none !important;
    }
  }
}
/* ========================================================
   Layout
   ======================================================== */
@layer layout {
  .l-bleed {
    margin-inline: calc(50% - 50vw);
  }
}
@layer layout {
  .l-container {
    --container-cap: var(--container-max-default);
    inline-size: min(100% - var(--container-gutter) * 2, var(--container-cap));
    margin-inline: auto;
  }
  .l-container--narrow {
    --container-cap: var(--container-max-narrow);
  }
}
@layer layout {
  .l-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
    gap: var(--grid-gap, var(--spacing-lg));
  }
  .l-grid--2 {
    --grid-cols: 2;
  }
  .l-grid--3 {
    --grid-cols: 3;
  }
}
@layer layout {
  .l-section {
    padding-block: var(--semantic-section-gap);
  }
  .l-section--sm {
    padding-block: var(--semantic-section-gap--sm);
  }
  .l-section--flush-top {
    -webkit-padding-before: var(--spacing-0);
            padding-block-start: var(--spacing-0);
  }
}
@layer layout {
  .l-stack {
    display: grid;
    row-gap: var(--stack-gap, var(--spacing-lg));
  }
  .l-stack--sm {
    --stack-gap: var(--spacing-md);
  }
  .l-stack--lg {
    --stack-gap: var(--spacing-2xl);
  }
}
/* ========================================================
   Components
   ======================================================== */
@layer components {
  .c-anchor-button {
    position: relative;
    display: grid;
    place-items: center;
    font-size: var(--semantic-font-size-anchor-button);
    font-weight: var(--semantic-font-weight-anchor-button);
    line-height: var(--line-height-sm);
    text-align: center;
    text-decoration: none;
    background-color: var(--semantic-bg-anchor-button);
    border: var(--semantic-border-style-anchor-button);
    border-radius: var(--semantic-radius-anchor-button);
    -webkit-transition: var(--transition-default);
    transition: var(--transition-default);
    min-block-size: var(--semantic-min-block-size-anchor-button);
    padding-inline: var(--spacing-md);
  }
  .c-anchor-button::after {
    position: absolute;
    background: var(--icon-arrow-forward) center/contain no-repeat;
    -webkit-transition: translate var(--duration-base) ease;
    transition: translate var(--duration-base) ease;
    block-size: var(--semantic-block-size-anchor-button-icon);
    content: "";
    inline-size: var(--semantic-inline-size-anchor-button-icon);
    inset-block-end: var(--semantic-inset-block-end-anchor-button-icon);
    inset-inline: 0;
    margin-inline: auto;
    rotate: 90deg;
  }
  .c-anchor-button, .c-anchor-button:is(:link, :visited, :hover) {
    color: var(--semantic-text-anchor-button);
  }
  .c-anchor-button:hover {
    background-color: var(--semantic-bg-anchor-button--hover);
  }
  .c-anchor-button:hover::after, .c-anchor-button:focus-visible::after {
    translate: 0 var(--spacing-xs);
  }
  .c-anchor-button__label {
    display: block;
  }
  .p-mgm-anchor-nav__list {
    list-style: none;
  }
}
@layer components {
  .c-button {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: var(--spacing-md);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-inline-size: var(--semantic-min-inline-size-button);
    min-block-size: var(--semantic-min-block-size-button);
    padding-block: var(--semantic-pad-block-button);
    padding-inline: var(--semantic-pad-inline-button);
    color: var(--semantic-button-primary-text);
    font-size: var(--semantic-font-size-button);
    font-weight: var(--semantic-font-weight-button);
    line-height: var(--line-height-xs);
    text-decoration: none;
    background-color: var(--semantic-button-primary-bg);
    border: var(--border-width-thin) solid var(--semantic-button-primary-border);
    border-radius: var(--semantic-radius-button);
    -webkit-transition: var(--transition-default);
    transition: var(--transition-default);
  }
  .c-button::after {
    position: absolute;
    inline-size: var(--semantic-size-button-icon);
    aspect-ratio: 1;
    background-color: currentColor;
    -webkit-transition: translate var(--duration-base) ease;
    transition: translate var(--duration-base) ease;
    content: "";
    inset-block-start: 50%;
    inset-inline-end: var(--spacing-md);
    -webkit-mask: var(--icon-triangle-up) center/contain no-repeat;
            mask: var(--icon-triangle-up) center/contain no-repeat;
    rotate: 90deg;
    translate: 0 -50%;
  }
  .c-button:is(:link, :visited) {
    color: var(--semantic-button-primary-text);
  }
  .c-button:hover {
    color: var(--semantic-button-primary-text);
    background-color: var(--semantic-button-primary-bg--hover);
  }
  .c-button:hover::after, .c-button:focus-visible::after {
    translate: var(--spacing-xs) -50%;
  }
  .c-button--outline {
    background-color: var(--semantic-button-outline-bg);
    border-color: var(--semantic-button-outline-border);
  }
  .c-button--outline, .c-button--outline:is(:link, :visited, :hover) {
    color: var(--semantic-button-outline-text);
  }
  .c-button--outline:hover {
    background-color: var(--semantic-button-outline-bg--hover);
  }
  .c-button__label {
    display: block;
  }
}
@layer components {
  .c-data-table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .c-data-table {
    inline-size: 100%;
    font-size: var(--semantic-font-size-table);
    line-height: var(--semantic-line-height-table);
    border-collapse: collapse;
  }
  .c-data-table :is(th, td) {
    padding-block: var(--semantic-pad-block-table-cell);
    padding-inline: var(--semantic-pad-inline-table-cell);
    text-align: start;
    vertical-align: middle;
    border: var(--semantic-border-style-table);
  }
  .c-data-table thead th {
    color: var(--semantic-text-table-thead-th);
    font-weight: var(--font-weight-bold);
    background-color: var(--semantic-bg-table-thead-th);
  }
  .c-data-table tbody td {
    background-color: var(--semantic-bg-table-tbody-td);
  }
  .c-data-table tbody tr:nth-child(even) td {
    background-color: var(--semantic-bg-table-row--stripe);
  }
  .c-data-table tbody tr:hover td {
    background-color: var(--semantic-bg-table-row--hover);
  }
}
@layer components {
  .c-lead {
    text-align: justify;
  }
  .c-lead--center {
    text-align: center;
  }
}
@layer components {
  .c-note {
    -webkit-padding-start: var(--semantic-pad-inline-start-note);
            padding-inline-start: var(--semantic-pad-inline-start-note);
    font-size: var(--semantic-font-size-note);
    line-height: var(--semantic-line-height-note);
    -webkit-border-start: var(--semantic-border-style-note);
            border-inline-start: var(--semantic-border-style-note);
  }
}
@layer components {
  .c-section-h2-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-column-gap: var(--semantic-gap-section-h2-head);
       -moz-column-gap: var(--semantic-gap-section-h2-head);
            column-gap: var(--semantic-gap-section-h2-head);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-block: var(--semantic-pad-block-section-h2-head);
    line-height: var(--semantic-line-height-section-h2);
    -webkit-border-after: var(--semantic-border-style-section-h2-head);
            border-block-end: var(--semantic-border-style-section-h2-head);
  }
  .c-section-h2-title {
    color: var(--semantic-text-strong);
    font-size: var(--semantic-font-size-section-h2-title);
    font-weight: var(--semantic-font-weight-section-h2-title);
    line-height: inherit;
  }
  .c-section-h2-subtitle {
    color: var(--semantic-text-section-h2-subtitle);
    font-size: var(--semantic-font-size-section-h2-subtitle);
    font-weight: var(--semantic-font-weight-section-h2-subtitle);
  }
}
@layer components {
  .c-image-card {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--semantic-inline-size-image-card-item);
    gap: var(--semantic-gap-image-card);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .c-image-card__item {
    display: grid;
    gap: var(--semantic-gap-image-card-item);
    -ms-flex-line-pack: start;
        align-content: start;
    line-height: var(--semantic-line-height-image-card);
  }
  .c-image-card__figure {
    aspect-ratio: var(--semantic-aspect-ratio-image-card-figure);
    overflow: clip;
    background-color: var(--semantic-bg-image-card-figure);
    border-radius: var(--semantic-radius-image-card-figure);
  }
  .c-image-card__img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
    block-size: 100%;
    inline-size: 100%;
  }
  .c-image-card__title {
    margin-bottom: 0;
    font-size: var(--semantic-font-size-image-card-title);
    font-weight: var(--semantic-font-weight-image-card-title);
    text-align: center;
  }
  .c-image-card__text {
    margin: 0 auto;
    font-size: var(--semantic-font-size-image-card-text);
  }
  .c-image-card__link {
    justify-self: start;
    font-size: var(--semantic-font-size-image-card-text);
    text-decoration: none;
    -webkit-margin-before: var(--spacing-xs);
            margin-block-start: var(--spacing-xs);
  }
  .c-image-card__link::before {
    content: "> "/"";
  }
  .c-image-card__link:hover {
    text-decoration: underline;
  }
}
@layer components {
  .c-update-date {
    color: var(--semantic-text);
    font-family: var(--semantic-font-family-update-date);
    font-size: var(--semantic-font-size-update-date);
    line-height: var(--line-height-xs);
    text-align: end;
  }
}
/* ========================================================
   Project
   ======================================================== */
/* ===================================================================
   Project: .p-mgm
   Materials Guide MAP ページのルート要素（<main class="p-mgm">）
   - WordPress 移行期は base のスコープ（$scope: '.p-mgm'）を兼ねる
   =================================================================== */
@layer project {
  .p-mgm [id] {
    scroll-margin-block-start: var(--semantic-scroll-margin-top);
  }
}
/* ===================================================================
   Project: .p-mgm-hero
   ヒーロー（背景：道標のメインビジュアル／右寄せ：タイトル群）
   構成：.p-mgm-hero(.l-bleed)
           > .p-mgm-hero-main-image（背景画像。_mgm-hero-main-image.scss）
           + .p-mgm-hero__inner(.l-container)
             > .p-mgm-hero__body
               (.p-mgm-hero__shoulder + .p-mgm-hero__title + .p-mgm-hero__catch)
   =================================================================== */
@layer project {
  .p-mgm-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    color: var(--semantic-text-mgm-hero);
    font-family: var(--semantic-font-family-mgm-hero);
    line-height: var(--semantic-line-height-mgm-hero);
    background-color: var(--semantic-bg-mgm-hero);
    min-block-size: var(--semantic-min-block-size-mgm-hero);
    -webkit-padding-before: var(--semantic-pad-block-start-mgm-hero);
            padding-block-start: var(--semantic-pad-block-start-mgm-hero);
  }
  .p-mgm-hero__inner {
    display: grid;
    justify-items: end;
  }
  .p-mgm-hero__body {
    display: grid;
    gap: var(--semantic-gap-mgm-hero-body);
    text-align: end;
  }
  .p-mgm-hero__shoulder {
    font-size: var(--semantic-font-size-mgm-hero-shoulder);
    font-weight: var(--semantic-font-weight-mgm-hero-shoulder);
  }
  .p-mgm-hero__shoulder-en {
    font-family: var(--semantic-font-family-mgm-hero-shoulder-en);
    font-size: var(--semantic-font-size-mgm-hero-shoulder-en);
    font-weight: var(--semantic-font-weight-mgm-hero-shoulder-en);
  }
  .p-mgm-hero__title {
    color: inherit;
    font-family: var(--semantic-font-family-mgm-hero-title);
    line-height: inherit;
  }
  .p-mgm-hero__title-main,
  .p-mgm-hero__title-sub {
    display: block;
  }
  .p-mgm-hero__title-main {
    font-size: var(--semantic-font-size-mgm-hero-title-main);
    font-weight: var(--semantic-font-weight-mgm-hero-title-main);
    letter-spacing: var(--semantic-letter-spacing-mgm-hero-title-main);
  }
  .p-mgm-hero__title-sub {
    font-size: var(--semantic-font-size-mgm-hero-title-sub);
    font-weight: var(--semantic-font-weight-mgm-hero-title-sub);
  }
  .p-mgm-hero__catch {
    font-size: var(--semantic-font-size-mgm-hero-catch);
    font-weight: var(--semantic-font-weight-mgm-hero-catch);
    line-height: var(--semantic-line-height-mgm-hero-catch);
  }
}
/* ===================================================================
   Project: .p-mgm-hero-main-image
   ヒーローの背景画像（装飾。テキストは HTML 側に持つため alt="" ）
   - 画面幅 1152px でデザインと同じ切り抜きになるよう、画像をヒーロー中央基準で配置
   - それより広い画面では左端に寄せ、幅を画面いっぱいまで広げて隙間を出さない
   構成：.p-mgm-hero-main-image > .p-mgm-hero-main-image__img
   =================================================================== */
@layer project {
  .p-mgm-hero-main-image {
    position: absolute;
    inset: 0;
    z-index: var(--z-index-under);
    overflow: clip;
  }
  .p-mgm-hero-main-image__img {
    position: absolute;
    block-size: auto;
    inline-size: max(var(--semantic-inline-size-mgm-hero-image), 100%);
    inset-block-start: var(--semantic-offset-block-mgm-hero-image);
    inset-inline-start: min(0px, 50% - var(--semantic-offset-inline-mgm-hero-image));
    max-inline-size: none;
  }
}
/* ===================================================================
   Project: .p-mgm-about
   「Materials Guide MAP について」の説明ボックス（全幅背景）
   構成：.p-mgm-about > .p-mgm-about__box(.l-bleed)
           > .p-mgm-about__inner(.l-container)
             > .p-mgm-about__title + .c-lead + .c-image-card + .c-lead + .c-note
   ※ ボックスの下端にページ内リンク（.p-mgm-anchor-nav）が重なる
   =================================================================== */
@layer project {
  .p-mgm-about {
    -webkit-margin-before: var(--semantic-section-gap);
            margin-block-start: var(--semantic-section-gap);
  }
  .p-mgm-about__box {
    padding-block: var(--semantic-pad-block-start-mgm-about-box) var(--semantic-pad-block-end-mgm-about-box);
    background-color: var(--semantic-bg-mgm-about-box);
  }
  .p-mgm-about__inner {
    display: grid;
    gap: var(--semantic-gap-mgm-about-box);
  }
  .p-mgm-about__title {
    font-size: var(--semantic-font-size-mgm-about-title);
    font-weight: var(--semantic-font-weight-mgm-about-title);
    line-height: var(--semantic-line-height-mgm-about-title);
    text-align: center;
  }
}
/* ===================================================================
   Project: .p-mgm-anchor-nav
   一覧セクションへのページ内リンク（3つ並び・About ボックスの下端に重ねる）
   構成：nav.p-mgm-anchor-nav(.l-container) > ul.p-mgm-anchor-nav__list(.l-grid .l-grid--3)
           > li > a.c-anchor-button
   =================================================================== */
@layer project {
  .p-mgm-anchor-nav {
    position: relative;
    -webkit-margin-before: calc(var(--semantic-overlap-mgm-anchor-nav) * -1);
            margin-block-start: calc(var(--semantic-overlap-mgm-anchor-nav) * -1);
  }
  .p-mgm-anchor-nav__list {
    --grid-gap: var(--spacing-xl);
  }
  .p-mgm-anchor-nav__list .c-anchor-button {
    block-size: 100%;
  }
}
/* ===================================================================
   Project: .p-mgm-list
   資料一覧セクション（技術資料／開発事例／課題解決 の3回使用）
   構成：section.p-mgm-list(.l-container)
           > .c-section-h2-head + .c-lead + .c-update-date
             + .c-data-table-scroll > table.c-data-table
   Variant：--tech / --case / --solution（デザインで差を付ける場合に使用）
   =================================================================== */
@layer project {
  .p-mgm-list {
    display: grid;
    gap: var(--semantic-gap-mgm-list);
    -webkit-margin-before: var(--semantic-section-gap);
            margin-block-start: var(--semantic-section-gap);
  }
  .p-mgm-about + .p-mgm-list {
    -webkit-margin-before: var(--semantic-margin-block-start-mgm-list--first);
            margin-block-start: var(--semantic-margin-block-start-mgm-list--first);
  }
}
/* ===================================================================
   Project: .p-mgm-advisor
   ご相談の案内セクション（全幅背景）
   構成：.p-mgm-advisor(.l-bleed) > .p-mgm-advisor__inner(.l-container)
           > .p-mgm-advisor__head (.p-mgm-advisor__catch + .p-mgm-advisor__title)
           + .p-mgm-advisor__body
             (.p-mgm-advisor__text > .p-mgm-advisor__list + p)
             + (.p-mgm-advisor__photo > .p-mgm-advisor__img)
           + .p-mgm-advisor__action (.c-button)
   =================================================================== */
@layer project {
  .p-mgm-advisor {
    background-color: var(--semantic-bg-mgm-advisor);
    margin-block: var(--semantic-section-gap);
    padding-block: var(--semantic-pad-block-mgm-advisor);
  }
  .p-mgm-advisor__inner {
    display: grid;
    gap: var(--semantic-gap-mgm-advisor);
  }
  .p-mgm-advisor__head {
    display: grid;
    gap: var(--semantic-gap-mgm-advisor);
    text-align: center;
  }
  .p-mgm-advisor__catch {
    font-size: var(--semantic-font-size-mgm-advisor-catch);
    line-height: var(--semantic-line-height-mgm-advisor);
  }
  .p-mgm-advisor__title {
    color: var(--semantic-text-mgm-advisor-title);
    font-size: var(--semantic-font-size-mgm-advisor-title);
    font-weight: var(--semantic-font-weight-mgm-advisor-title);
    line-height: var(--line-height-xs);
  }
  .p-mgm-advisor__title-quote {
    font-size: var(--semantic-font-size-mgm-advisor-title-quote);
  }
  .p-mgm-advisor__body {
    display: grid;
    grid-template-columns: var(--semantic-grid-template-columns-mgm-advisor-body);
    gap: var(--semantic-gap-mgm-advisor);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
  .p-mgm-advisor__text {
    font-size: var(--semantic-font-size-mgm-advisor-text);
    line-height: var(--semantic-line-height-mgm-advisor);
  }
  .p-mgm-advisor__list {
    font-size: var(--semantic-font-size-mgm-advisor-list);
    line-height: var(--semantic-line-height-mgm-advisor-list);
    list-style: none;
    -webkit-margin-after: var(--semantic-margin-block-end-mgm-advisor-list);
            margin-block-end: var(--semantic-margin-block-end-mgm-advisor-list);
  }
  .p-mgm-advisor__list > li::before {
    content: "⚫︎"/"";
  }
  .p-mgm-advisor__photo {
    aspect-ratio: var(--semantic-aspect-ratio-mgm-advisor-photo);
    overflow: clip;
  }
  .p-mgm-advisor__img {
    -o-object-fit: cover;
       object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
  }
  .p-mgm-advisor__action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
/* ========================================================
   utility
   ======================================================== */
@layer utilities {
  /* スクリーンリーダー専用（視覚的に隠すけど読み上げ対象にする） */
  .u-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: var(--spacing-0, 0);
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* 旧仕様のフォールバック */
    clip-path: inset(50%); /* 現行ブラウザ向け */
    white-space: nowrap;
    border: 0;
  }
}
@layer utilities {
  .u-text-uppercase {
    text-transform: uppercase;
  }
  .u-text-lowercase {
    text-transform: lowercase;
  }
  .u-text-capitalize {
    text-transform: capitalize;
  }
  .u-text-left {
    text-align: left;
  }
  .u-text-center {
    text-align: center;
  }
  .u-text-right {
    text-align: right;
  }
  .u-text-nowrap {
    white-space: nowrap;
  }
  .u-text-pre-line {
    white-space: pre-line;
  }
  .u-font-normal {
    font-weight: 400;
  }
  .u-font-bold {
    font-weight: 700;
  }
  .u-font-italic {
    font-style: italic;
  }
  .u-text-underline {
    text-decoration: underline;
  }
  .u-text-line-through {
    text-decoration: line-through;
  }
  .u-text-sup {
    font-size: var(--font-size-2xs);
  }
  .u-block {
    display: block;
  }
  .u-br--sm {
    display: none;
  }
  @media (width <= 48rem) {
    .u-center--sm {
      text-align: center;
    }
  }
  @supports (word-break: auto-phrase) {
    [lang=ja] .u-wrap-auto-phrase {
      word-break: auto-phrase;
    }
  }
}/*# sourceMappingURL=main-mgm-wp.css.map */