/* Common Styles */

/****************************************************/
/* Design Tokens */
/****************************************************/
:root {
    /* --- Colors --- */
    --color-corporate: #00349a;
    --color-sub1: #06c;
    --color-sub2: #001f5c;
    --color-sub3: #dbe6f1;
    --color-accent1: #ff6b35;
    --color-accent2: #00a86b;
    --color-accent3: #eecd15;

    --color-text: #222;
    --color-text-white: #fafdfe;
    --color-text-muted: #666;
    --color-text-sub: #555;
    --color-bg: #fafdfe;
    --color-bg-sub: #f7f7f7;
    --color-bg-gray: #e0eaef;

    --color-rakuten: #bf0000;
    --color-yahoo: #ff8400;

    --color-required: #c91f1f;
    --color-hero-end: #3190ee;

    /* --- Gradients (hero 系・円形グラデ共通) --- */
    --gradient-hero: linear-gradient(70deg, var(--color-corporate), var(--color-hero-end));
    --gradient-hero-radial: radial-gradient(circle at 30% 20%, var(--color-hero-end), var(--color-corporate));

    /* 左上三角装飾用：hero と同じグラデ */
    --gradient-corner-accent: var(--gradient-hero);

    /* --- Fonts --- */
    --font-sans: 'Noto Sans JP', sans-serif;
    --font-english: 'Montserrat', sans-serif; 

    /* --- Font Sizes --- */
    --fs-xxs: 0.625rem; /* 10px */
    --fs-xs: 0.75rem;   /* 12px */
    --fs-sm: 0.875rem;  /* 14px */
    --fs-md: 1rem;      /* 16px */
    --fs-lg: 1.125rem;  /* 18px */
    --fs-xl: 1.25rem;   /* 20px */
    --fs-2xl: 1.5rem;   /* 24px */
    --fs-3xl: 1.75rem;  /* 28px */
    --fs-4xl: 2rem;     /* 32px */
    --fs-5xl: 2.25rem;  /* 36px */
    --fs-6xl: 2.5rem;   /* 40px */
    --fs-7xl: 3rem;     /* 48px */
    --fs-8xl: 3.5rem;   /* 56px */
    --fs-9xl: 4rem;     /* 64px */

    /* --- Front page section headings (top) --- */
    --fs-front-heading-en: clamp(var(--fs-6xl), 6vw, var(--fs-8xl));
    --fs-front-heading-jp: clamp(var(--fs-lg), 3vw, var(--fs-2xl));

    /* --- Fluid heading sizes (clamp: min / preferred vw / max) --- */
    --fs-hero-title: clamp(2rem, 9vw, var(--fs-9xl));
    --fs-hero-subtitle: clamp(1.25rem, 2.5vw, var(--fs-2xl));
    --fs-hero-catch: clamp(1rem, 1.8vw, 1.5rem);
    --fs-section-heading: clamp(1.5rem, 3.5vw, 2.75rem);
    --fs-section-heading-sm: clamp(1.25rem, 2.5vw, 2rem);
    --fs-section-heading-sub: clamp(1rem, 1.8vw, 1.5rem);
    --fs-cta-heading: clamp(1.75rem, 3.5vw, var(--fs-4xl));

    /* --- Line Heights --- */
    --lh-tight: 1.4;
    --lh-normal: 1.6;
    --lh-loose: 2.0;

    /* --- Spacing --- */
    --space-xxs: 0.25rem; /* 4px */
    --space-xs: 0.5rem;  /* 8px */
    --space-s: 0.75rem; /* 12px */
    --space-sm: 1rem;    /* 16px */
    --space-m: 1.25rem;  /* 20px */
    --space-md: 1.5rem;  /* 24px */
    --space-lg: 2rem;    /* 32px */
    --space-xl: 2.5rem;  /* 40px */
    --space-2xl: 3rem;   /* 48px */
    --space-3xl: 3.5rem; /* 56px */
    --space-4xl: 4rem;   /* 64px */
    --space-5xl: 4.5rem;  /* 72px */
    --space-6xl: 5rem;   /* 80px */
    --space-7xl: 5.5rem; /* 88px */
    --space-8xl: 6rem;   /* 96px */
    --space-9xl: 6.5rem; /* 104px */
    --space-10xl: 7rem;   /* 112px */
    --space-11xl: 7.5rem; /* 120px */
    --space-12xl: 8rem;  /* 128px */

    /* --- Radius --- */
    --radius-sm: 5px;
    --radius-md:15px;
    --radius-lg: 50px;

    /* --- Hero (viewport-responsive width) --- */
    --hero-max-width: clamp(1800px, 1628.571px + 22.321vw, 2200px);

    /* --- Content (viewport-responsive width) --- */
    --content-max-width: clamp(1200px, 65vw, 1600px);

    /* --- Guide CTA (viewport-responsive width) --- */
    --guide-cta-max-width: clamp(1800px, 75vw, 2200px);

    /* --- Content inner padding: SP時を含むコンテンツ左右余白（16px）。1280px以上で0 --- */
    --content-inner-padding-inline: var(--space-sm);
}

/* 768px以上: Hero の左右余白比率を 2560px 時と同じ約7%に維持 */
@media (min-width: 768px) {
    :root {
        --hero-max-width: clamp(660px, 86vw, 2200px);
    }
}

/* 1280px以上: コンテンツ幅＋padding が収まるため inner の左右 padding なし */
@media (min-width: 1280px) {
    :root {
        --content-inner-padding-inline: 0;
    }
}

/* 超ワイド: clamp+vw の見出しが Safari/Firefox で極端に大きくならないよう上限で固定 */
@media (min-width: 1920px) {
    :root {
        --fs-front-heading-en: var(--fs-8xl);
        --fs-front-heading-jp: var(--fs-2xl);
        --fs-hero-title: var(--fs-9xl);
        --fs-hero-subtitle: var(--fs-2xl);
        --fs-hero-catch: 1.5rem;
        --fs-section-heading: 2.75rem;
        --fs-section-heading-sm: 2rem;
        --fs-section-heading-sub: 1.5rem;
        --fs-cta-heading: var(--fs-4xl);
    }
}

/****************************************************/
/* Reset and Base Styles */
/****************************************************/
*,
*::before,
*::after{
    box-sizing:border-box;
}

html {
    font-size: 16px;
    scroll-padding-top: 6rem; /* アンカー飛び先が sticky ヘッダーに隠れないように */
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 500;
    font-feature-settings: "palt";
    line-height: var(--lh-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    letter-spacing: 0.15em;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    &:hover, 
    &:focus,
    &:active {
        color: var(--color-text-white);
    }
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    &:hover, &:focus {
        color: transparent;
        background-color: transparent;
    }
}

ol, ul {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

header, footer {
    letter-spacing: 0.05em;
}

/****************************************************/
/* Typography */
/****************************************************/
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-sm);
}

h1 { font-size: var(--fs-9xl);}
h2 { font-size: var(--fs-4xl);}
h3 { font-size: var(--fs-2xl);}
h4 { font-size: var(--fs-md);}

p {
    margin: 0 0 var(--space-sm);
}

small {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.site-main, .page-main {
    margin: 0 !important;
}

/****************************************************/
/* 商品カタログページのログイン情報バー */
/****************************************************/
.catalog-auth-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-md);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-sm);
    background-color: #fff;
    font-size: var(--fs-sm);
}

.catalog-auth-bar__username {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-sub);
}

.catalog-auth-bar__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35em 0.9em;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    background-color: var(--color-bg);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.catalog-auth-bar__logout:hover,
.catalog-auth-bar__logout:focus-visible {
    outline: none;
    background-color: var(--color-corporate);
    color: var(--color-text-white);
    border-color: var(--color-corporate);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

.catalog-auth-bar__logout:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

@media (max-width: 599px) {
    .catalog-auth-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}
/****************************************************/

/****************************************************/
/* Content Section */
/****************************************************/
.content-section {
    position: relative;
}

.content-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(-45deg, #aedff0, #aedff0 256px, transparent 256px, transparent 384px, #aedff0 384px, #aedff0 512px, transparent 512px, transparent 768px);
    filter: blur(130px) contrast(120%) opacity(0.5); 
    z-index: -1;
}

/****************************************************/
/* サブ見出し（▶ テキスト ◀ の三角形アイコン付き） */
/****************************************************/
.content-block__subheading,
.card-on-gradient__subheading {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.content-block__subheading::before,
.card-on-gradient__subheading::before,
.content-block__subheading::after,
.card-on-gradient__subheading::after {
    content: '';
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-style: solid;
    transform: translateY(-1px);
}

/* 左向き三角形 ◀ */
.content-block__subheading::after,
.card-on-gradient__subheading::after {
    border-width: 0.35em 0.5em 0.35em 0;
    border-color: transparent var(--color-corporate) transparent transparent;
}

/* 右向き三角形 ▶ */
.content-block__subheading::before,
.card-on-gradient__subheading::before {
    border-width: 0.35em 0 0.35em 0.5em;
    border-color: transparent transparent transparent var(--color-corporate);
}