/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
    /* Primitives */

    /* color */
    --color-blue-blue-100: #1a4989;
    --color-blue-blue-20: #f7f7f7;
    --color-blue-blue-60: #0235cc;
    --color-blue-blue-80: #3860be;
    --color-gray-gray-00: #fff;
    --color-gray-gray-100: #000;
    --color-gray-gray-20: #f7f7f7;
    --color-gray-gray-40: #dfe1e2;
    --color-gray-gray-60: #c2cbcc;
    --color-gray-gray-70: #555;
    --color-gray-gray-80: #333;
    --color-green-green-100: #007a46;
    --color-green-green-20: #f1f8f5;
    --color-green-green-40: #c3ecd3;
    --color-green-green-60: #5ec88b;
    --color-green-green-80: #0cba5e;
    --color-red-red-100: #bf1a32;
    --color-red-red-80: #ff6b6b;
    --color-others-blue: #3055b5;
    --color-others-blue-dark: #2f5993;
    --color-others-blue-gray: #93aab9;
    --color-others-blue-gray-dark: #557288;
    --color-others-cyan: #0ca7d3;
    --color-others-green: #5ebf43;
    --color-others-green-dark: #00a05c;
    --color-others-green-light: #09c82d;
    --color-others-orange: #f78832;
    --color-others-red: #fa434b;
    --color-others-yellow: #e3bb00;
    --color-pink-pink-100: #f36a9e;
    --color-pink-pink-20: #f7f7f7;
    --color-pink-pink-60: #fbdce5;
    --color-pink-pink-80: #a86ba3;

    /* number */
    --type-size-type-size-10: 10px;
    --type-size-type-size-12: 12px;
    --type-size-type-size-14: 14px;
    --type-size-type-size-16: 16px;
    --type-size-type-size-17: 17px;
    --type-size-type-size-18: 18px;
    --type-size-type-size-20: 20px;
    --type-size-type-size-23: 23px;
    --type-size-type-size-24: 24px;
    --type-size-type-size-26: 26px;
    --type-size-type-size-28: 28px;
    --type-size-type-size-32: 32px;
    --type-size-type-size-36: 36px;
    --type-size-type-size-46: 46px;
    --type-line-height-line-height-13: 1.3;
    --type-line-height-line-height-16: 1.6;
    --type-line-height-line-height-19: 1.9;
    --type-line-height-line-height-736: 73.6;
    --type-line-height-line-height-576: 57.6;
    --type-line-height-line-height-416: 41.6;
    --type-line-height-line-height-288: 28.8;
    --type-line-height-line-height-32: 32;
    --type-line-height-line-height-304: 30.4;
    --type-line-height-line-height-266: 26.6;
    --size-opacity-opacity-75: 0.75;
    --size-border-border-1: 1px;
    --size-border-border-2: 2px;
    --size-border-border-3: 3px;
    --size-border-border-4: 4px;
    --size-radius-radius-0: 0px;
    --size-radius-radius-10: 10px;
    --size-spacing-spacing-2: 2px;
    --size-spacing-spacing-4: 4px;
    --size-spacing-spacing-8: 8px;
    --size-spacing-spacing-12: 12px;
    --size-spacing-spacing-16: 16px;
    --size-spacing-spacing-20: 20px;
    --size-spacing-spacing-24: 24px;
    --size-spacing-spacing-32: 32px;
    --size-spacing-spacing-40: 40px;
    --size-spacing-spacing-48: 48px;
    --size-spacing-spacing-64: 64px;
    --size-spacing-spacing-72: 72px;
    --size-spacing-spacing-80: 80px;
    --size-spacing-spacing-110: 110px;
    --size-spacing-spacing-135: 135px;

    /* string */
    --type-font-font-noto-sans-en: noto sans;
    --type-font-font-noto-sans: noto sans jp;
    --type-font-font-yu-gothic: "游ゴシック体", yugothic, "游ゴシック Medium", yu gothic medium, "Hiragino Sans", "ヒラギノ角 ProN W3", "Hiragino Kaku Gothic ProN";
    --type-font-font-rounded-mplus1c: "M PLUS Rounded 1c";
    --type-font-weight-font-weight-400: 400;
    --type-font-weight-font-weight-700: 700;

    /* Semantic */

    /* color */
    --accordion-header-background-default: var(--color-gray-gray-40);
    --accordion-header-text-color-default: var(--color-gray-gray-80);
    --brand-color-color-default: var(--color-primary-base);
    --bread-crumb-background-primary: var(--color-breadcrumbs-bg-primary);
    --bread-crumb-color-default: var(--color-gray-gray-80);
    --bread-crumb-color-link: var(--color-primary-base);
    --button-outline-background-default: var(--color-gray-gray-00);
    --button-outline-border-color-accent: var(--color-primary-accent);
    --button-outline-border-color-default: var(--color-primary-base);
    --button-outline-border-color-disabled: var(--color-gray-gray-40);
    --button-outline-border-color-hover: var(--color-primary-hover);
    --button-outline-text-color-accent: var(--color-primary-accent);
    --button-outline-text-color-default: var(--color-primary-base);
    --button-outline-text-color-disabled: var(--color-gray-gray-40);
    --button-outline-text-color-hover: var(--color-primary-hover);
    --button-solid-background-accent: var(--color-primary-accent);
    --button-solid-background-default: var(--color-primary-base);
    --button-solid-background-disabled: var(--color-gray-gray-40);
    --button-solid-background-hover: var(--color-primary-hover);
    --button-solid-background-purchase: var(--color-eyecatch-red-store);
    --button-solid-border-color-default: var(--color-gray-gray-00);
    --button-solid-text-color-default: var(--color-gray-gray-00);
    --overlay-background: var(--color-primary-base);
    --section-background-primary: var(--color-section-bg-primary);
    --section-background-quaternary: var(--color-section-bg-quaternary);
    --section-background-secondary: var(--color-section-bg-secondary);
    --section-background-tertiary: var(--color-section-bg-tertiary);
    --section-contents-background-primary: var(--color-section-contents-bg-primary);
    --section-contents-background-quaternary: var(--color-section-contents-bg-quaternary);
    --section-contents-background-secondary: var(--color-section-contents-bg-secondary);
    --section-contents-background-tertiary: var(--color-section-contents-bg-tertiary);
    --section-contents-color-primary: var(--color-section-contents-color-primary);
    --section-contents-color-secondary: var(--color-section-contents-color-secondary);
    --section-contents-color-tertiary: var(--color-section-contents-color-tertiary);
    --section-contents-border-color-border-1: var(--color-section-contents-border-color-border-1);
    --section-contents-border-color-border-2: var(--color-section-contents-border-color-border-2);
    --section-contents-border-color-border-3: var(--color-section-contents-border-color-border-3);
    --surface-page: var(--color-gray-gray-00);
    --surface-primary: var(--color-gray-gray-00);
    --surface-secondary: var(--color-section-bg-primary);
    --surface-tertiary: var(--color-section-bg-secondary);
    --surface-bg-primary: #fff;
    --surface-content-bg-primary: #fff;
    --table-cell-primary: var(--color-table-cell-bg-primary);
    --table-cell-secondary: var(--color-table-cell-bg-secondary);
    --table-cell-text-color: var(--color-gray-gray-100);
    --table-header-primary: var(--color-table-header-bg-primary);
    --table-header-text-color-primary: var(--typography-text-color-title);
    --table-header-text-color-secondary: var(--color-gray-gray-00);
    --tabs-background-default: var(--color-gray-gray-00);
    --tabs-background-hover: var(--color-primary-base);
    --tabs-border-color-default: var(--color-gray-gray-00);
    --tabs-text-color-action: var(--color-gray-gray-00);
    --tabs-text-color-default: var(--typography-text-color-title);
    --tabs-text-color-hover: var(--typography-text-color-brand-color);
    --tags-color-default: var(--brand-color-color-default);
    --tags-color-new: var(--color-others-red);
    --tags-color-text-color: var(--color-gray-gray-00);
    --text-link-color-default: var(--color-primary-base);
    --text-link-color-hover: var(--color-primary-hover);
    --color-mega-menu-bg: var(--color-gray-gray-00);
    --color-mega-menu-contents-color: var(--color-gray-gray-80);
    --color-mega-menu-icon-color: var(--color-primary-base);
    --color-mega-menu-hover-color: var(--color-primary-base);
    --mega-menu-bg: var(--color-mega-menu-bg);
    --mega-menu-contents-color: var(--color-mega-menu-contents-color);
    --mega-menu-icon-color: var(--color-mega-menu-icon-color);
    --mega-menu-hover-color: var(--color-mega-menu-hover-color);
    --typography-text-color-brand-color: var(--brand-color-color-default);
    --typography-text-color-emphasis-color: var(--color-primary-emphasis);
    --typography-text-color-paragraph: var(--color-text-color-paragraph);
    --typography-text-color-title: var(--color-text-color-title);

    /* number */
    --accordion-accordion-header-font-size: var(--responsive-typography-paragraph-l-font-size);
    --accordion-header-gap-icon-gap: var(--jumper-page-margin32-16);
    --accordion-header-padding-vertical: var(--size-spacing-spacing-16);
    --accordion-header-padding-horizontal: var(--jumper-page-margin24-12);
    --banner-padding-lr: var(--jumper-page-margin80-20);
    --bread-crumb-font-size-default: var(--type-size-type-size-12);
    --bread-crumb-font-line-height: var(--type-line-height-line-height-13);
    --button-font-size-default: var(--responsive-typography-paragraph-l-font-size);
    --button-gap-icon-gap: var(--size-spacing-spacing-8);
    --button-icon-size-default: var(--type-size-type-size-24);
    --button-icon-size-online: var(--type-size-type-size-24);
    --button-outline-border-size-default: var(--size-border-border-1);
    --button-outline-border-size-hover: var(--size-border-border-1);
    --button-outline-border-color-font-size: var(--responsive-typography-paragraph-s-font-size);
    --button-outline-padding-horizontal: var(--size-spacing-spacing-16);
    --button-radius-no-radius: var(--size-radius-radius-0);
    --button-radius-default: var(--size-radius-radius-10);
    --button-solid-padding-horizontal: var(--size-spacing-spacing-48);
    --default-padding-padding-xxs: var(--size-spacing-spacing-4);
    --default-padding-padding-xs: var(--size-spacing-spacing-8);
    --default-padding-padding-ss: var(--size-spacing-spacing-12);
    --default-padding-padding-s: var(--size-spacing-spacing-16);
    --default-padding-padding-m: var(--size-spacing-spacing-24);
    --default-padding-padding-l: var(--size-spacing-spacing-32);
    --default-padding-padding-ll: var(--size-spacing-spacing-48);
    --overlay-opacity: var(--size-opacity-opacity-75);
    --table-cell-font-size-cell: var(--type-size-type-size-16);
    --table-cell-min-width-default: 68px;
    --table-cell-min-width: 120px;
    --table-header-font-size-header: var(--type-size-type-size-17);
    --tabs-padding-horizontal: var(--size-spacing-spacing-16);
    --tags-no-radius: var(--size-radius-radius-0);
    --tags-default: var(--size-radius-radius-10);
    --tags-color-tag-text-size: var(--type-size-type-size-16);
    --text-link-font-size-default: var(--typography-paragraph-m-font-size-paragraph-m-size);
    --text-link-gap-icon-gap: var(--size-spacing-spacing-8);
    --text-link-icon-size-default: var(--type-size-type-size-16);
    --typography-h1-font-size-h1-size: var(--responsive-typography-h1-font-size);
    --typography-h1-line-height-h1-height: var(--responsive-typography-h1-line-height);
    --typography-h2-font-size-h2-size: var(--responsive-typography-h2-font-size);
    --typography-h2-line-height-h2-height: var(--responsive-typography-h2-line-height);
    --typography-h3-font-size-h3-size: var(--responsive-typography-h3-font-size);
    --typography-h3-line-height-h3-height: var(--responsive-typography-h3-line-height);
    --typography-h4-font-size-h4-size: var(--responsive-typography-h4-font-size);
    --typography-h4-line-height-h4-height: var(--responsive-typography-h4-line-height);
    --typography-h5-font-size-h5-size: var(--responsive-typography-h5-font-size);
    --typography-h5-line-height-h5-height: var(--responsive-typography-h5-line-height);
    --typography-option-font-size-option-size: var(--responsive-typography-option-font-size);
    --typography-option-line-height-option-height: var(--responsive-typography-option-line-height);
    --typography-paragraph-l-font-size-paragraph-l-size: var(--responsive-typography-paragraph-l-font-size);
    --typography-paragraph-l-line-height-paragraph-l-height: var(--responsive-typography-paragraph-l-line-height);
    --typography-paragraph-m-font-size-paragraph-m-size: var(--responsive-typography-paragraph-m-font-size);
    --typography-paragraph-m-line-height-paragraph-m-height: var(--responsive-typography-paragraph-m-line-height);
    --typography-paragraph-s-font-size-paragraph-s-size: var(--responsive-typography-paragraph-s-font-size);
    --typography-paragraph-s-line-height-paragraph-s-height: var(--responsive-typography-paragraph-s-line-height);
    --section-contents-border-line-size: var(--size-border-border-2);
    --columns-border-size: var(--size-border-border-2);
    --columns-border-color: var(--color-gray-gray-40);

    /* string */
    --accordion-font-weight-default: var(--type-font-weight-font-weight-400);
    --bread-crumb-font-weight-default: var(--type-font-weight-font-weight-400);
    --button-font-weight-default: var(--type-font-weight-font-weight-400);
    --table-cell-font-weight-default: var(--type-font-weight-font-weight-400);
    --table-header-font-weight-default: var(--type-font-weight-font-weight-700);
    --text-link-font-weight-default: var(--type-font-weight-font-weight-400);
    --typography-font-family-default: var(--font-brand-jp);
    --typography-font-family-default-en: var(--font-brand-en);
    --typography-font-family-title: var(--font-brand-jp-title);
    --typography-font-family-title-en: var(--font-brand-en-title);
    --typography-h1-font-weight-primary: var(--type-font-weight-font-weight-700);
    --typography-h1-font-weight-secondary: var(--type-font-weight-font-weight-400);
    --typography-h2-font-weight-primary: var(--type-font-weight-font-weight-700);
    --typography-h2-font-weight-secondary: var(--type-font-weight-font-weight-400);
    --typography-h3-font-weight-primary: var(--type-font-weight-font-weight-700);
    --typography-h3-font-weight-secondary: var(--type-font-weight-font-weight-400);
    --typography-h4-font-weight-primary: var(--type-font-weight-font-weight-700);
    --typography-h4-font-weight-secondary: var(--type-font-weight-font-weight-400);
    --typography-h5-font-weight-primary: var(--type-font-weight-font-weight-700);
    --typography-h5-font-weight-secondary: var(--type-font-weight-font-weight-400);
    --typography-option-font-weight-bold: var(--type-font-weight-font-weight-700);
    --typography-option-font-weight-single: var(--type-font-weight-font-weight-400);
    --typography-paragraph-l-font-weight-bold: var(--type-font-weight-font-weight-700);
    --typography-paragraph-l-font-weight-single: var(--type-font-weight-font-weight-400);
    --typography-paragraph-m-font-weight-bold: var(--type-font-weight-font-weight-700);
    --typography-paragraph-m-font-weight-single: var(--type-font-weight-font-weight-400);
    --typography-paragraph-s-font-weight-bold: var(--type-font-weight-font-weight-700);
    --typography-paragraph-s-font-weight-single: var(--type-font-weight-font-weight-400);


    /* Responsive */

    /* Desktop */

    /* number */
    --screen-size-pc: 1366px;
    --screen-size-tablet: 768px;
    --screen-size-mobile: 375px;
    --jumper-page-margin: 0rem;
    --jumper-page-margin24-12: var(--size-spacing-spacing-24);
    --jumper-page-margin32-16: var(--size-spacing-spacing-32);
    --jumper-page-margin32-20: var(--size-spacing-spacing-32);
    --jumper-page-margin48-32: var(--size-spacing-spacing-48);
    --jumper-page-margin80-20: var(--size-spacing-spacing-80);
    --responsive-typography-h1-font-size: var(--type-size-type-size-46);
    --responsive-typography-h1-line-height: var(--type-line-height-line-height-16);
    --responsive-typography-h2-font-size: var(--type-size-type-size-36);
    --responsive-typography-h2-line-height: var(--type-line-height-line-height-16);
    --responsive-typography-h3-font-size: var(--type-size-type-size-26);
    --responsive-typography-h3-line-height: var(--type-line-height-line-height-16);
    --responsive-typography-h4-font-size: var(--type-size-type-size-20);
    --responsive-typography-h4-line-height: var(--type-line-height-line-height-16);
    --responsive-typography-h5-font-size: var(--type-size-type-size-18);
    --responsive-typography-h5-line-height: var(--type-line-height-line-height-16);
    --responsive-typography-option-font-size: var(--type-size-type-size-10);
    --responsive-typography-option-line-height: var(--type-line-height-line-height-13);
    --responsive-typography-paragraph-l-font-size: var(--type-size-type-size-16);
    --responsive-typography-paragraph-l-line-height: var(--type-line-height-line-height-19);
    --responsive-typography-paragraph-m-font-size: var(--type-size-type-size-14);
    --responsive-typography-paragraph-m-line-height: var(--type-line-height-line-height-19);
    --responsive-typography-paragraph-s-font-size: var(--type-size-type-size-12);
    --responsive-typography-paragraph-s-line-height: var(--type-line-height-line-height-13);
    --responsive-typography-jumper-16-12: var(--size-spacing-spacing-16);
    --responsive-typography-jumper-16-8: var(--size-spacing-spacing-16);
    --responsive-typography-jumper-20-16: var(--size-spacing-spacing-20);
    --responsive-typography-jumper-32-8: var(--size-spacing-spacing-32);
    --responsive-typography-jumper-32-16: var(--size-spacing-spacing-32);
    --responsive-typography-jumper-40-24: var(--size-spacing-spacing-40);
    --responsive-typography-jumper-80-48: var(--size-spacing-spacing-80);


    /* Corp */
    
    /* color */
    --color-breadcrumbs-bg-primary: var(--color-green-green-20);
    --color-eyecatch-red-alert: var(--color-red-red-100);
    --color-eyecatch-red-store: var(--color-red-red-80);
    --color-primary-accent: var(--color-blue-blue-100);
    --color-primary-base: var(--color-green-green-100);
    --color-primary-hover: var(--color-green-green-80);
    --color-section-bg-primary: var(--color-green-green-100);
    --color-section-bg-secondary: var(--color-green-green-80);
    --color-section-bg-tertiary: var(--color-green-green-20);
    --color-section-bg-quaternary: var(--color-gray-gray-20);
    --color-section-contents-bg-primary: var(--color-green-green-100);
    --color-section-contents-bg-secondary: var(--color-green-green-60);
    --color-section-contents-bg-tertiary: var(--color-green-green-20);
    --color-section-contents-bg-quaternary: var(--color-gray-gray-20);
    --color-section-contents-color-primary: var(--color-gray-gray-80);
    --color-section-contents-color-secondary: var(--color-gray-gray-00);
    --color-section-contents-color-tertiary: var(--color-green-green-100);
    --color-section-contents-border-color-border-1: var(--color-gray-gray-40);
    --color-section-contents-border-color-border-2: var(--color-gray-gray-80);
    --color-section-contents-border-color-border-3: var(--color-primary-base);
    --color-table-cell-bg-primary: var(--color-gray-gray-00);
    --color-table-cell-bg-secondary: var(--color-green-green-20);
    --color-table-header-bg-primary: var(--color-green-green-100);
    --color-table-header-text-color: var(--color-gray-gray-00);
    --color-text-color-paragraph: var(--color-gray-gray-80);
    --color-text-color-title: var(--color-gray-gray-100);
    --color-primary-emphasis: #BF1A32;

    /* string */
    --font-brand-en: var(--type-font-font-noto-sans-en);
    --font-brand-en-title: var(--type-font-font-noto-sans-en);
    --font-brand-jp: var(--type-font-font-noto-sans);
    --font-brand-jp-title: var(--type-font-font-noto-sans);
}

/* SP breakpoint */
@media (width < 768px) {
    /* Responsive */
    :root {
        /* number */
        --jumper-page-margin24-12: var(--size-spacing-spacing-12);
        --jumper-page-margin32-16: var(--size-spacing-spacing-16);
        --jumper-page-margin: var(--size-spacing-spacing-20);
        --jumper-page-margin80-20: var(--size-spacing-spacing-20);
        --jumper-page-margin48-32: var(--size-spacing-spacing-32);
        --jumper-page-margin32-20: var(--size-spacing-spacing-20);
        --responsive-typography-h1-font-size: var(--type-size-type-size-32);
        --responsive-typography-h2-font-size: var(--type-size-type-size-28);
        --responsive-typography-h3-font-size: var(--type-size-type-size-23);
        --responsive-typography-h4-font-size: var(--type-size-type-size-18);
        --responsive-typography-h5-font-size: var(--type-size-type-size-17);
        --responsive-typography-option-font-size: var(--type-size-type-size-10);
        --responsive-typography-paragraph-l-font-size: var(
            --type-size-type-size-16
        );
        --responsive-typography-paragraph-m-font-size: var(
            --type-size-type-size-14
        );
        --responsive-typography-jumper-80-48: var(--size-spacing-spacing-48);
        --responsive-typography-jumper-40-24: var(--size-spacing-spacing-24);
        --responsive-typography-jumper-20-16: var(--size-spacing-spacing-16);
        --responsive-typography-jumper-32-8: var(--size-spacing-spacing-8);
        --responsive-typography-jumper-32-16: var(--size-spacing-spacing-16);
        --responsive-typography-jumper-16-12: var(--size-spacing-spacing-12);
        --responsive-typography-jumper-16-8: var(--size-spacing-spacing-8);
    }
}

html {
    scroll-padding-top: calc((var(--header-height, 121px)) + var(--jumper-page-margin24-12)); 
    scroll-behavior: smooth;
}

body {
    display: none;
    margin: 0;
    background-color: var(--surface-page);
    color: var(--typography-text-color-paragraph);
    font-family: var(--typography-font-family-default-en), var(--typography-font-family-default), sans-serif;
    font-size: var(--responsive-typography-paragraph-l-font-size);
    line-height: var(--responsive-typography-paragraph-l-line-height);
}

body.appear {
    display: block;
}

header {
    height: var(--size-spacing-spacing-80);
}

/* notificationが存在する場合のheaderの最小高さを確保してLayout Shiftを防ぐ */
header.has-notification {
    min-height: 144px; /* モバイル: 80px (header) + 64px (notification) */
}

header .header,
footer .footer {
    visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
    visibility: visible;
}

@media (width >= 768px) {
    /* notificationが存在する場合のheaderの最小高さ（デスクトップ） */
    header.has-notification {
        min-height: 150px; /* デスクトップ: 80px (header) + 70px (notification) */
    }

    /* Breadcrumb wrapper display control based on data-breadcrumbs attribute */
    .breadcrumbs-wrapper[data-breadcrumbs="upper"] {
      display: block;
      min-height: 50px;
    }
  
    .breadcrumbs-wrapper[data-breadcrumbs="lower"] {
      display: none;
    }
}

@media (width < 768px) {
    /* Breadcrumb wrapper display control based on data-breadcrumbs attribute */
    .breadcrumbs-wrapper[data-breadcrumbs="upper"] {
      display: none;
    }
  
    .breadcrumbs-wrapper[data-breadcrumbs="lower"] {
      display: block;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--typography-text-color-title);
    font-family: var(--typography-font-family-title-en), var(--typography-font-family-title), sans-serif;
}

h1 {
    font-size: var(--responsive-typography-h1-font-size);
    line-height: var(--responsive-typography-h1-line-height);
    font-weight: var(--typography-h1-font-weight-primary);
}

h2 {
    font-size: var(--responsive-typography-h2-font-size);
    line-height: var(--responsive-typography-h2-line-height);
    font-weight: var(--typography-h2-font-weight-primary);
}

h3 {
    font-size: var(--responsive-typography-h3-font-size);
    line-height: var(--responsive-typography-h3-line-height);
    font-weight: var(--typography-h3-font-weight-primary);
}

h4 {
    font-size: var(--responsive-typography-h4-font-size);
    line-height: var(--responsive-typography-h4-line-height);
    font-weight: var(--typography-h4-font-weight-primary);
}

h5 {
    font-size: var(--responsive-typography-h5-font-size);
    line-height: var(--responsive-typography-h5-line-height);
    font-weight: var(--typography-h5-font-weight-primary);
}

.heading-emphasis h1 strong,
.heading-emphasis h2 strong,
.heading-emphasis h3 strong,
.heading-emphasis h4 strong,
.heading-emphasis h5 strong,
.heading-emphasis a.any-link strong {
    font-weight: inherit;
    font-size: 130%;
}

.heading-emphasis h1 em,
.heading-emphasis h2 em,
.heading-emphasis h3 em,
.heading-emphasis h4 em,
.heading-emphasis h5 em,
.heading-emphasis a.any-link em {
    color: var(--typography-text-color-emphasis-color);
    font-style: normal;
}

.heading-emphasis h1 sub,
.heading-emphasis h2 sub,
.heading-emphasis h3 sub,
.heading-emphasis h4 sub,
.heading-emphasis h5 sub,
.heading-emphasis a.any-link sub {
    font-size: 75%;
    vertical-align: baseline;
}

/* Top-level page headings (Default Content only) */
main .default-content-wrapper h1,
main .default-content-wrapper h2,
main .default-content-wrapper h3,
main .default-content-wrapper h4,
main .default-content-wrapper h5 {
    color: var(--typography-text-color-title);
}

main .default-content-wrapper h1 {
    font-size: var(--responsive-typography-h1-font-size);
    line-height: var(--responsive-typography-h1-line-height);
    font-weight: var(--typography-h1-font-weight-primary);
    margin: var(--responsive-typography-jumper-16-8) 0 var(--responsive-typography-jumper-80-48);
}

main .default-content-wrapper h2 {
    position: relative;
    font-size: var(--responsive-typography-h2-font-size);
    line-height: var(--responsive-typography-h2-line-height);
    font-weight: var(--typography-h2-font-weight-primary);
    margin: var(--size-spacing-spacing-48) 0 var(--responsive-typography-jumper-40-24);
    padding-top: var(--responsive-typography-jumper-20-16);
}

main .default-content-wrapper h3 {
    position: relative;
    font-size: var(--responsive-typography-h3-font-size);
    line-height: var(--responsive-typography-h3-line-height);
    font-weight: var(--typography-h3-font-weight-primary);
    margin: var(--responsive-typography-jumper-32-16) 0;
    padding-bottom: var(--default-padding-padding-xxs);
    padding-left: var(--default-padding-padding-s);
}

main .default-content-wrapper h4 {
    position: relative;
    font-size: var(--responsive-typography-h4-font-size);
    line-height: var(--responsive-typography-h4-line-height);
    font-weight: var(--typography-h4-font-weight-primary);
    margin: var(--responsive-typography-jumper-32-8) 0 var(--responsive-typography-jumper-16-12);
    padding-left: var(--default-padding-padding-ss);
}

main .default-content-wrapper h5 {
    font-size: var(--responsive-typography-h5-font-size);
    line-height: var(--responsive-typography-h5-line-height);
    font-weight: var(--typography-h5-font-weight-primary);
    margin: 0 0 var(--responsive-typography-jumper-16-12);
}

/* Remove top margin from headings when they are the first element in a section */
main .section > .default-content-wrapper:first-child h1:first-child,
main .section > .default-content-wrapper:first-child h2:first-child,
main .section > .default-content-wrapper:first-child h3:first-child,
main .section > .default-content-wrapper:first-child h4:first-child,
main .section > .default-content-wrapper:first-child h5:first-child {
    margin-top: 0;
}

/* H2 dual-tone rule: gray base + brand segment */
main .default-content-wrapper h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--size-border-border-3);
    background-color: var(--color-gray-gray-40);
}

main .default-content-wrapper h2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--size-spacing-spacing-135);
    height: var(--size-border-border-3);
    background-color: var(--typography-text-color-brand-color);
}

main .default-content-wrapper h3::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--size-border-border-2);
    background-color: var(--color-gray-gray-60);
}

main .default-content-wrapper h3::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--size-border-border-4);
    background-color: var(--typography-text-color-brand-color);
}

main .default-content-wrapper h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--size-border-border-3);
    height: var(--size-spacing-spacing-24);
    background-color: var(--typography-text-color-brand-color);
}

main .default-content-wrapper .button-container {
    text-align: center;
}

p,
dl,
ol,
ul,
pre,
blockquote {
    margin: 0;
    color: var(--typography-text-color-paragraph);
    font-weight: var(--typography-paragraph-l-font-weight-single);
}

@media (width < 768px) {
    ol,
    ul {
        padding-left: var(--size-spacing-spacing-20);
    }
}

code,
pre {
    font-size: var(--responsive-typography-option-font-size);
    line-height: var(--responsive-typography-option-line-height);
    overflow-wrap: break-word;
    white-space: pre-wrap;
    font-family: var(--typography-font-family-default-en), var(--typography-font-family-default), sans-serif;
}

code {
    display: inline-block;
}

main > div {
    margin: 0 var(--default-padding-padding-m);
}

input,
textarea,
select,
button {
    font: inherit;
}

/* links */
a:any-link {
    color: var(--text-link-color-default);
    text-decoration: underline;
    overflow-wrap: break-word;
}

a:hover {
    color: var(--text-link-color-hover);
    text-decoration: none;
    opacity: var(--overlay-opacity);
}

/* links with picture */
.section > .default-content-wrapper > p > a:any-link:has(picture) {
    display: block;
}

/* buttons */
a.button:any-link,
button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    width: 100%;
    border-radius: var(--button-radius-default);
    padding: var(--default-padding-padding-s) var(--button-solid-padding-horizontal);
    font-family: var(--font-brand-en), var(--font-brand-jp), sans-serif;
    font-size: var(--button-font-size-default);
    font-weight: var(--button-font-weight-default);
    line-height: var(--responsive-typography-paragraph-l-line-height);
    text-align: center;
    text-decoration: none;
    background-color: var(--button-solid-background-default);
    color: var(--button-solid-text-color-default);
    cursor: pointer;
    white-space: normal;
    position: relative;
    word-break: break-all;
}

a.button:any-link {
    width: auto;
    max-width: 400px;
    min-width: min(100%, 250px);
    min-height: 62px;
}

a.button:hover,
button:hover {
    background-color: var(--button-solid-background-hover);
    cursor: pointer;
    opacity: unset;
}

button:disabled,
button:disabled:hover {
    background-color: var(--button-solid-background-disabled);
    cursor: unset;
}

a.button.secondary,
button.secondary {
    font-style: normal;
    background-color: var(--button-outline-background-default);
    border: var(--button-outline-border-size-default) solid var(--button-outline-border-color-default);
    color: var(--button-outline-text-color-default);
}

a.button.secondary em {
    font-style: normal;
}

a.button.secondary:hover,
button.secondary:hover {
    border: var(--button-outline-border-size-hover) solid var(--button-outline-border-color-hover);
    color: var(--button-outline-text-color-hover);
}

a.button.primary,
button.primary {
    background-color: var(--button-solid-background-accent);
}

a.button.primary strong {
    font-weight: inherit;
}

a.button.primary:hover,
button.primary:hover {
    opacity: var(--overlay-opacity);
}

a.button.primary.secondary,
button.primary.secondary {
    background-color: var(--button-outline-background-default);
    border: var(--button-outline-border-size-default) solid var(--button-solid-background-accent);
    color: var(--button-solid-background-accent);
}

a.button.primary.secondary:hover,
button.primary.secondary:hover {
    border: var(--button-outline-border-size-hover) solid var(--button-solid-background-accent);
    opacity: var(--overlay-opacity);
}

a.button.button-online,
button.button-online {
    background-color: var(--button-solid-background-purchase);
    color: var(--button-solid-text-color-default);
}

a.button.button-online:hover,
button.button-online:hover {
    opacity: var(--overlay-opacity);
}

/* Purchase promotion specific styles - higher specificity, placed before .section.button-large */
main .purchase-promotion-class a.button:any-link {
  max-width: 100px;
  min-width: 100px;
  height: 100px;
  text-align: center;
  padding: 0 10px 9px;
  flex-direction: column;
  line-height: var(--type-line-height-line-height-13);
  display: flex;
  justify-content: center;
  align-items: center;
}

main img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

.icon {
    display: inline-block;
    width: 24px;
}

span.icon-svg {
    display: inline-block;
    vertical-align: middle;
    padding-left: var(--text-link-gap-icon-gap);
}

span.icon-svg svg {
    width: var(--text-link-icon-size-default);
    height: var(--text-link-icon-size-default);
}

a.button span.icon {
    width: var(--button-icon-size-default);
    height: var(--button-icon-size-default);
    flex-shrink: 0;
    position: absolute;
    left: var(--size-spacing-spacing-16);
}

.icon img {
    height: 100%;
    width: 100%;
}

a.button span.icon-svg {
    width: var(--button-icon-size-default);
    height: var(--button-icon-size-default);
    display: inline-block;
    margin-left: auto;
    position: absolute;
    right: var(--size-spacing-spacing-16);
}

a.button span.icon-svg svg {
    width: var(--button-icon-size-default);
    height: var(--button-icon-size-default);
    color: var(--button-solid-text-color-default);
}

a.button:hover span.icon-svg svg {
    color: var(--button-solid-text-color-hover);
}

a.button.primary span.icon-svg svg {
    color: var(--button-solid-text-color-default);
}

a.button.secondary span.icon-svg svg {
    color: var(--button-outline-text-color-default);
}

/* Purchase promotion icon styles - higher specificity, placed before a.button.primary:hover */
main .purchase-promotion-class a.button span.icon-svg {
    position: static;
    width: var(--type-size-type-size-32);
    height: var(--type-size-type-size-32);
    padding: var(--size-spacing-spacing-8) 0;
    margin: 0;
}

main .purchase-promotion-class a.button span.icon-svg svg {
    width: var(--type-size-type-size-32);
    height: var(--type-size-type-size-32);
}

a.button.primary:hover span.icon-svg svg {
    color: var(--button-solid-text-color-hover);
}

a.button.secondary:hover span.icon-svg svg {
    color: var(--button-outline-text-color-hover);
}

a.button.primary.secondary span.icon-svg svg {
    color: var(--button-solid-background-accent);
}

a.button.primary.secondary:hover span.icon-svg svg {
    opacity: var(--overlay-opacity);
}

/* table */
table {
    width: 100%;
    max-width: 1200px;
    border-collapse: collapse;
    font-size: var(--table-cell-font-size-cell);
    font-weight: var(--table-cell-font-weight-default);
    line-height: 32px;
    color: var(--typography-text-color-paragraph);
    border: var(--size-border-border-1) solid var(--color-gray-gray-60);
}

/* データ行のスタイル */
table tbody {
    background-color: var(--table-cell-primary);
}

/* thead がある場合,データ行偶数行のスタイル */
table:has(thead) tbody tr:nth-child(even) {
    background-color: var(--table-cell-secondary);
}

/* thead がない場合,データ行奇数行のスタイル */
table:not(:has(thead)) tbody tr:nth-child(odd) {
    background-color: var(--table-cell-secondary);
}

/* thead がない場合,データ行1行目のスタイル */
table:not(:has(thead)) tbody tr:first-child {
    font-size: var(--table-header-font-size-header);
    font-weight: var(--table-header-font-weight-default);
    color: var(--color-table-header-text-color);
    background-color: var(--table-header-primary);
}

/* ヘッダーセルのスタイル */
table th {
    background-color: var(--table-header-primary);

}

table th,
table th > * {
    font-size: var(--table-header-font-size-header);
    font-weight: var(--table-header-font-weight-default);
    color: var(--color-table-header-text-color);
}

/* td に明示的に背景色を設定 */
table td {
    background-color: inherit;
}

/* ヘッダーとデータセルのスタイル */
table th,
table td {
    border: var(--size-border-border-1) solid var(--color-gray-gray-60);
    padding: var(--size-spacing-spacing-8) var(--size-spacing-spacing-16);
    min-width: var(--table-cell-min-width-default);
}

/* デフォルト横揃え（center） */
table th:not([data-align], [align]),
table td:not([data-align], [align]) {
    text-align: left;
}

/* 横揃え */
table th[data-align="left"],
table td[data-align="left"] {
    text-align: left;
}

table th[data-align="center"],
table td[data-align="center"] {
    text-align: center;
}

table th[data-align="right"],
table td[data-align="right"] {
    text-align: right;
}

/* デフォルト縦揃え（middle） */
table th:not([data-valign], [valign]),
table td:not([data-valign], [valign]) {
    vertical-align: middle;
}

/* 縦揃え */
table th[data-valign="top"],
table td[data-valign="top"] {
    vertical-align: top;
}

table th[data-valign="middle"],
table td[data-valign="middle"] {
    vertical-align: middle;
}

table th[data-valign="bottom"],
table td[data-valign="bottom"] {
    vertical-align: bottom;
}

/* セル内の段落スタイル */
table th p,
table td p {
    margin: 0;
    line-height: 32px;
}

/* table-stack-mobile のとき、
   1行目(thead がある場合はtbodyの1行目)のスタイルを、
   データ行スタイルに変更する */

/* th の見た目をデータ行スタイルにする */
.table-stack-mobile table th,
.table-stack-mobile table th > * {
    font-size: var(--table-cell-font-size-cell);
    font-weight: var(--table-cell-font-weight-default);
    color: var(--table-cell-text-color);
}

/* th の背景色もデータ行と同じにする */
.table-stack-mobile table th {
    background-color: var(--table-cell-secondary);
}

/* thead がない場合に、tbody 1行目だけデータ行スタイルにする */
.table-stack-mobile table:not(:has(thead)) tbody tr:first-child {
    font-size: var(--table-cell-font-size-cell);
    font-weight: var(--table-cell-font-weight-default);
    color: var(--table-cell-text-color);
    background-color: var(--table-cell-secondary);
}

/* .overflow-scrollの場合のスタイル */
.overflow-scroll table th,
.overflow-scroll table td {
    min-width: var(--table-cell-min-width);
}

/* auto-phrase が使えるブラウザだけ上書き */
@supports (word-break: auto-phrase) {
  .overflow-scroll table th,
  .overflow-scroll table td {
    min-width: 0;
    word-break: auto-phrase;
  }
}

/* スクロールガイドのスタイル */
.table-scroll-guide-root {
    position: relative;
}

/* オーバーレイ全体 */
.table-scroll-guide-root .table-scroll-guide-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease-out, visibility .4s ease-out;
}

/* 中央のコンテンツ */
.table-scroll-guide-root .table-scroll-guide-content {
    position: absolute;
    display: inline-block;
    width: 106px;
    left: 50%;
    transform: translateX(-50%);
    top: 20%;
}

/* テキスト画像 */
.table-scroll-guide-root .table-scroll-guide-text {
    display: block;
}

/* 手アイコン：テキスト中央に重ねる */
.table-scroll-guide-root .table-scroll-guide-icon-wrapper {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
}

/* 手アイコン画像 */
.table-scroll-guide-root .table-scroll-guide-icon {
    width: 40px;
    display: block;
    animation: none;
}

/* 1本目: 中央(0) → 右(+12.5px) */
@keyframes table-scroll-guide-hand-intro {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(12.5px);
    }
}

/* 2本目: 右(+12.5px) ↔ 左(-12.5px) を往復 */
@keyframes table-scroll-guide-hand-loop {
    from {
        transform: translateX(12.5px);
    }

    to {
        transform: translateX(-12.5px);
    }
}

/* 表示中 */
.table-scroll-guide-root.table-scroll-guide-visible .table-scroll-guide-overlay {
    opacity: 1;
    visibility: visible;
}

.table-scroll-guide-root.table-scroll-guide-visible .table-scroll-guide-icon {
    /* 2 本の animation をカンマ区切りで指定 */
    animation:
        /* 1本目 : 中央 → 右 へ 0.75s（ディレイ 0.1s） */
        table-scroll-guide-hand-intro 0.75s ease-in-out 0.1s 1 forwards,

        /* 2本目 : 右 ↔ 左 を 1.5s で往復。0.85s(=0.1+0.75) 後に開始 */
        table-scroll-guide-hand-loop 1.5s ease-in-out 0.85s infinite alternate;
}

/* 非表示後 */
.table-scroll-guide-root.table-scroll-guide-hidden .table-scroll-guide-overlay {
    opacity: 0;
    visibility: hidden;
}

/* Responsive table stacking for mobile (opt-in via .table-stack-mobile) */
@media (width < 768px) {
  .table-stack-mobile table {
    display: block;
    border: none;
  }
  
  .table-stack-mobile table thead,
  .table-stack-mobile table tbody,
  .table-stack-mobile table tr {
    display: block;
    border: none;
  }
  
  .table-stack-mobile table th,
  .table-stack-mobile table td {
    display: block;
    border: var(--size-border-border-1) solid var(--color-gray-gray-60);
    border-bottom: none;
  }

  /* Last cell in each row gets bottom border */
  .table-stack-mobile table tr td:last-child,
  .table-stack-mobile table tr th:last-child {
    border-bottom: var(--size-border-border-1) solid var(--color-gray-gray-60);
  }

  /* full-width images in stacked first cells */
  .table-stack-mobile table td:first-child img,
  .table-stack-mobile table th:first-child img {
    width: 100%;
  }

  /* 2行目以降の先頭セルのborder-top を消す
    （thead / tbody の有無にかかわらず有効） */
  .table-stack-mobile table tr:not(:first-child) th:first-child,
  .table-stack-mobile table tr:not(:first-child) td:first-child {
    border-top: none;
  }

  /* thead がある場合：tbody 1行目の全セルの border-top を消す */
  .table-stack-mobile table:has(thead) tbody tr:first-child th:first-child,
  .table-stack-mobile table:has(thead) tbody tr:first-child td:first-child {
    border-top: none;
  }

  /* .table-stack-mobile + .table-bold-heading のとき：
     2行目以降の見出し行の前に余白を追加 */
  .table-stack-mobile.table-bold-heading table tbody tr:not(:first-child):has(
    > td > em > strong,
    > td > p > em > strong,
    > th > em > strong,
    > th > p > em > strong
  ) {
    margin-top: var(--size-spacing-spacing-16);
  }

  /* 2行目以降の見出し行の先頭セルのborder-top を追加 */
  .table-stack-mobile.table-bold-heading table tbody tr:not(:first-child):has(
    > td > em > strong,
    > td > p > em > strong,
    > th > em > strong,
    > th > p > em > strong
  ) th:first-child,
  .table-stack-mobile.table-bold-heading table tbody tr:not(:first-child):has(
    > td > em > strong,
    > td > p > em > strong,
    > th > em > strong,
    > th > p > em > strong
  ) td:first-child {
    border-top: var(--size-border-border-1) solid var(--color-gray-gray-60);
  }
}

/* sections */
main > .section {
    margin: 0;
    padding: var(--jumper-page-margin48-32) var(--size-spacing-spacing-20);
    display: flow-root;
}

main > .section > div {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

main .section > div:not(:last-child) {
    margin-bottom: var(--jumper-page-margin32-16);
}

p:not(:last-child),
ul:not(:last-child),
ol:not(:last-child),
pre:not(:last-child) {
    margin-bottom: var(--jumper-page-margin32-16);
}

div[data-align='center'] {
    text-align: center;
}

div[data-align='right'] {
    text-align: right;
}

/* section metadata */
main .section.bg-1 {
    background-color: var(--color-section-bg-primary);
}

main .section.bg-2 {
    background-color: var(--color-section-bg-secondary);
}

main .section.bg-3 {
    background-color: var(--color-section-bg-tertiary);
}

main .section.bg-4 {
    background-color: var(--color-section-bg-quaternary);
}

main .section.pt-0 {
    padding-top: 0;
}

main .section.pb-0 {
    padding-bottom: 0;
}

main .section.full-width {
    padding-left: 0;
    padding-right: 0;
}

main .section.full-width > div {
    max-width: 1920px;
}

/* Content background: single centered bar behind section content */
main .section[class*="content-bg-"] {
    position: relative;
}

main .section[class*="content-bg-"] > div,
main .section[class*="border-"] > div {
    /* keep default max-width: 1200px from generic rule */
    padding: 0 var(--jumper-page-margin32-20);
    box-sizing: border-box;
    display: flow-root; /* prevent margin-collapsing with headings, etc. */
}

main .section[class*="content-bg-"]::before {
    content: '';
    position: absolute;
    top: var(--jumper-page-margin48-32);
    bottom: var(--jumper-page-margin48-32);
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, calc(100% - (var(--jumper-page-margin32-20) * 2)));
    max-width: 1200px;
    z-index: 0;
    pointer-events: none;
}

main .section.content-bg-1::before {
    background-color: var(--color-section-contents-bg-primary);
}

main .section.content-bg-2::before {
    background-color: var(--color-section-contents-bg-secondary);
}

main .section.content-bg-3::before {
    background-color: var(--color-section-contents-bg-tertiary);
}

main .section.content-bg-4::before {
    background-color: var(--color-section-contents-bg-quaternary);
}

/* Ensure content paints above the background bar */
main .section[class*="content-bg-"] > * {
    position: relative;
    z-index: 1;
}

/* section metadata border styles - border-* */
main .section[class*="border-"] {
    position: relative;
}

main .section[class*="border-"]::after {
    content: '';
    position: absolute;
    top: var(--jumper-page-margin48-32);
    bottom: var(--jumper-page-margin48-32);
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, calc(100% - (var(--jumper-page-margin32-20) * 2)));
    max-width: 1200px;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
}

main .section.border-1::after {
    border: var(--section-contents-border-line-size) solid var(--section-contents-border-color-border-1);
}

main .section.border-2::after {
    border: var(--section-contents-border-line-size) solid var(--section-contents-border-color-border-2);
}

main .section.border-3::after {
    border: var(--section-contents-border-line-size) solid var(--section-contents-border-color-border-3);
}

main > .fragment-container > .fragment-wrapper > .section[class*='border-']::after {
    border: unset;
}

main > .section .library-metadata > div {
    display: flex;
    flex-direction: row;
    gap: var(--size-spacing-spacing-12);
    
    --typography-text-color-paragraph: var(--color-gray-gray-80);
}

/* Apply vertical padding only at the top and bottom edges of content stack */
main .section[class*="content-bg-"] > div:first-child {
    padding-top: var(--jumper-page-margin32-20);
}

main .section[class*="content-bg-"] > div:last-child {
    padding-bottom: var(--jumper-page-margin32-20);
}

main .section[class*="border-"]:not([class*="content-bg-"]) > div:first-child {
    padding-top: var(--jumper-page-margin32-20);
}

main .section[class*="border-"]:not([class*="content-bg-"]) > div:last-child {
    padding-bottom: var(--jumper-page-margin32-20);
}

main .section.content-1 {
    --typography-text-color-brand-color: var(--color-section-contents-color-primary);
    --typography-text-color-paragraph: var(--color-section-contents-color-primary);
    --typography-text-color-title: var(--color-section-contents-color-primary);
    --text-link-color-default: var(--color-section-contents-color-primary);
    --text-link-color-hover: var(--color-section-contents-color-primary);
}

main .section.content-2 {
    --typography-text-color-brand-color: var(--color-section-contents-color-secondary);
    --typography-text-color-paragraph: var(--color-section-contents-color-secondary);
    --typography-text-color-title: var(--color-section-contents-color-secondary);
    --text-link-color-default: var(--color-section-contents-color-secondary);
    --text-link-color-hover: var(--color-section-contents-color-secondary);
}

main .section.content-3 {
    --typography-text-color-brand-color: var(--color-section-contents-color-tertiary);
    --typography-text-color-paragraph: var(--color-section-contents-color-tertiary);
    --typography-text-color-title: var(--color-section-contents-color-tertiary);
    --text-link-color-default: var(--color-section-contents-color-tertiary);
    --text-link-color-hover: var(--color-section-contents-color-tertiary);
}

main .section.btn-border a.button {
    border: var(--button-outline-border-size-default) solid var(--button-solid-border-color-default);
}

.section.button-large a.button:any-link {
    width: 100%;
    max-width: 400px;
    min-width: min(100%, 300px);
    min-height: 80px;
}

main .section[data-background-image] {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

main .section[data-background-image].bg-repeat {
    background-repeat: repeat;
    background-size: auto;
    background-position: left top;
}

main .section[data-background-image].bg-fixed-top {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto;
    background-attachment: scroll;
}

main .section[data-background-image].content-bg-fixed-top {
    background-image: none;
}

main .section[data-background-image].content-bg-fixed-top::before {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto;
    background-attachment: scroll;
    background-image: var(--section-background-image);
}

main .section[data-background-image].content-bg-repeat {
    background-image: none;
}

main .section[data-background-image].content-bg-repeat::before {
    background-repeat: repeat;
    background-position: left top;
    background-size: auto;
    background-image: var(--section-background-image);
}

main .section.checksheet-container {
    max-width: 800px;
    margin: 0 auto;
}

/* purchase promotion styles */
main .purchase-promotion-class {
    position: fixed;
    bottom: 150px;
    margin-right: var(--size-spacing-spacing-16);
    right: 0;
    line-height: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 900;
}

main .purchase-promotion-class.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

main .purchase-promotion-class p {
    margin: var(--size-spacing-spacing-8) 0 0 0;
}

/* Sidekick Library */
main > .section.page-metadata-container {
    display: none;
}

main > .section .library-metadata {
    margin-top: var(--size-spacing-spacing-20);
    padding: var(--size-spacing-spacing-20);
    background-color: var(--color-gray-gray-40);
    border-radius: var(--size-radius-radius-10);
}

main > .section .library-metadata > div > div:first-of-type p {
    text-transform: capitalize;
    font-weight: var(--type-font-weight-font-weight-700);
}

main > .section .library-metadata > div > div:first-of-type p::after {
    content: ':';
}

@media (width < 768px) {
    main .purchase-promotion-class {
        margin: 0;
        bottom: var(--size-spacing-spacing-20);
        left: var(--size-spacing-spacing-8);
        right: var(--size-spacing-spacing-8);
        width: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--size-spacing-spacing-8);
        transform: translateY(100%);
    }

    main .purchase-promotion-class:has(p:only-child) {
        grid-template-columns: 1fr;
    }

    main .purchase-promotion-class a.button:any-link {
        max-width: none;
        min-width: 175.5px;
        height: var(--size-spacing-spacing-40);
        min-height: var(--size-spacing-spacing-40);
        padding: 0 var(--size-spacing-spacing-12);
        text-align: center;
        display: flex;
        flex-direction: row-reverse;
        gap: var(--size-spacing-spacing-8);
        border: var(--button-outline-border-size-default) solid var(--button-solid-border-color-default);
        font-size: var(--responsive-typography-paragraph-m-font-size);
    }

    main .purchase-promotion-class a.button span.icon-svg {
        width: 21px;
        height: 21px;
    }

    main .purchase-promotion-class a.button span.icon-svg svg {
        width: 21px;
        height: 21px;
    }

    main .purchase-promotion-class:has(p:only-child) a.button:any-link {
        min-width: 359px;
    }

    main .purchase-promotion-class.visible {
        transform: translateY(0);
    }
}


/* table-bold-headingでは、太字かつ斜体のセルを見出しスタイルにする */
.table-bold-heading table :is(td, th):has(
    > em:only-child > strong:only-child,
    > p:only-child > em:only-child > strong:only-child
) {
    /* セル自体の背景指定 */
    background-color: var(--table-header-primary);
}

/* 中身の文字スタイル */
.table-bold-heading table :is(td, th):has(
    > em:only-child > strong:only-child,
    > p:only-child > em:only-child > strong:only-child
) > *,
.table-bold-heading table :is(td, th):has(
    > em:only-child > strong:only-child,
    > p:only-child > em:only-child > strong:only-child
) em,
.table-bold-heading table :is(td, th):has(
    > em:only-child > strong:only-child,
    > p:only-child > em:only-child > strong:only-child
) strong {
    font-size: var(--table-header-font-size-header);
    font-weight: var(--table-header-font-weight-default);
    color: var(--color-table-header-text-color);
}

/* italic 無効化 */
.table-bold-heading table :is(td, th):has(
    > em:only-child > strong:only-child,
    > p:only-child > em:only-child > strong:only-child
) em {
    font-style: normal;
}

/* 特定クラスが付与された要素のみ font-family を明示指定 */
.lang-ja {
    font-family: var(--font-brand-jp), sans-serif;
}