@charset "UTF-8";

/* ==============================================
  変数定義（カラーパレットの一元管理）
=============================================== */
:root {
    /* --- ベース・テキスト・ボーダー --- */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-black-light: #111111;
    --color-text-base: #333333;
    --color-text-muted: #666666;
    --color-text-light: #999999;
    --color-text-error: #F4511E;
    --color-bg-base: #F2F3F6;
    --color-bg-error: #FEEDE8;
    --color-border: #cccccc;
    --color-border-light: #e5e7eb;
    --color-border-lighter: #eeeeee;

    /* --- メインテーマカラー --- */
    --color-primary: #131F71;      /* 濃いネイビー */
    --color-accent: #155DFC;       /* 鮮やかな青（メインボタン等） */
    --color-accent-bg: #E7EEFF;    /* 鮮やかな青の背景用 */
    --color-accent-hover: #0C3CB2; /* ボタンホバー時 */
    --color-gold: #D5D18D;         /* ゴールド（ヒーローラベル等） */
    
    /* --- リンク・ボタン関連 --- */
    --color-link: #3b82f6;
    --color-link-hover: #0066cc;
    --color-nav-hover: #2563eb;
    --color-nav-btn-hover: #1d4ed8;

    /* --- 各プラン・セクション固有カラー --- */
    --color-book-main: #A5070A;
    --color-book-bg: #FAF0F1;
    --color-digital-main: #0F90BF;
    --color-digital-bg: #F1F8FB;
    --color-corporate-main: #333333;
    --color-corporate-bg: #F5F5F5;

    /* --- サブセクション固有 --- */
    --color-benefit-bg: #F1F0DF;
    --color-benefit-text: #FBF9CC;
    --color-benefit-icon: #213C7E;
    --color-feature-bg-light: #F4F5FD;
    --color-about-bg: #1a1e4a;
    --color-footer-bg: #333333;
    
    --color-about-sales01: #24A2AD;
    --color-about-sales02: #0F90BF;
    
    --color-pdf: #D80C18;
}

.color-white { color: var(--color-white); }
.color-primary { color: var(--color-primary); }
.color-text-base { color: var(--color-text-base); }
.color-text-muted { color: var(--color-text-muted); }
.color-text-light { color: var(--color-text-light); }
.color-sales01 { color: var(--color-about-sales01); }
.color-sales02 { color: var(--color-about-sales02); }
.color-pdf { color: var(--color-pdf); }

/* ==============================================
  Component: Button (.c-button)
  汎用ボタンコンポーネント
=============================================== */
/* ① ベーススタイル（共通の形状・挙動） */
.c-button {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap:4px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, opacity 0.3s ease, color 0.3s ease;
    /* 高さがずれないようにデフォルトで透明なborderを設定 */
    border: 2px solid transparent; 
}

/* アイコンの位置調整用クラス */
.c-button--icon-left .material-symbols-outlined { margin-right: 4px; }
.c-button--icon-right .material-symbols-outlined { margin-left: 4px; }

/* ② モディファイア（装飾パターンの切り替え） */
/* プライマリー（青背景・白文字） */
.c-button--primary {
    background-color: var(--color-accent);
    color: var(--color-white);
}
.c-button--primary:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-white);
}
.c-button--primary:disabled {
    pointer-events: none;
    background-color: #8CAbFF;
    color: var(--color-white);
}

/* セカンダリー（薄青背景・青枠・青文字） */
.c-button--secondary {
    background-color: var(--color-accent-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.c-button--secondary:hover {
    color:#fff;
    border-color: var(--color-accent);
    background-color: var(--color-accent);
}

/* ディセーブル（無効化：グレー背景・白文字） */
.c-button--disabled {
    background-color: var(--color-text-muted);
    color: var(--color-white);
    cursor: not-allowed;
}
.c-button--disabled:hover {
    opacity: 1; /* disabledはホバーさせない */
}

/* アウトライン（白背景・青枠・青文字） */
.c-button--outline {
    background-color: var(--color-white);
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}
.c-button--outline:hover {
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
}

/* グレー（グレー背景・白文字・無効化用） */
.c-button--gray {
    background-color: #666;
    color: var(--color-white);
}

/* 2段組みボタン（PDFダウンロードなど） */
.c-button--row {
    display: flex;
    flex-direction: column;
}
.c-button--row > div {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* ==============================================
  Component: Tag / Badge (.c-tag)
=============================================== */
.c-tag {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 100px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
/* 四角いバッジ（重要、最新など） */
.c-tag--square {
    border-radius: 2px;
    padding: 4px 8px;
}

/* カラーバリエーション */
.c-tag--orange { background-color: #EA580C; color: #FFF; } /* 重要・最新 */
.c-tag--gray   { background-color: #F4F5FD; color: var(--color-text-base); } /* お知らせカテゴリ */
.c-tag--navy   { background-color: var(--color-primary); color: #FFF; } /* マイページステータス */
.c-tag--purple { background-color: #F5F3FF; color: var(--color-primary); } /* 参加済 */
.c-tag--green  { background-color: #EDF7ED; color: #4CAF50; gap: 4px; } /* 参加予定・ダウンロード済 */
.c-tag--green .material-symbols-outlined { font-size: 16px; }

/* 枠線タイプ（会員限定など） */
.c-tag--outline {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 2px 16px;
}

/* ==============================================
  Header Navigation (グローバルナビゲーション)
=============================================== */
#header-area {
    position: sticky;
    top: 0;
    z-index: 999;
}
.global-nav {
    position: relative;
    padding-inline: 40px;
    width: 100%;
    height: 80px;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
}

.global-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* --- 左側：ブランドエリア --- */
.global-nav__brand {
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.global-nav__logo-wrapper {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.global-nav__logo img {
    height: 32px;
    width: auto;
    display: block;
}

.global-nav__lists {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.global-nav__item {
    position: relative;
}

.global-nav__link {
    color: var(--color-text-base);
    /* 1024pxで16pxに到達させる場合 */
    font-size: clamp(11px, calc(11px + 5 * ((100vw - 375px) / 649)), 16px);
    font-weight: 700;
    text-decoration: none;
    padding: 10px 0;
    display: inline-block;
    transition: color 0.2s;
}

.global-nav__link:hover {
    color: var(--color-nav-hover);
}

/* 現在のページ（アクティブ）の下線スタイル */
.global-nav__item.is-active .global-nav__link {
    color: var(--color-black-light);
}

.global-nav__item:hover::after, .global-nav__item.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-black-light);
}

/* --- ログインボタン --- */
.global-nav__login-btn {
    padding: 10px 32px;
}

/* ==============================================
   ヘッダードロップダウン用（マイページメニュー）
=============================================== */
.global-nav__actions {
    position: relative;
    margin-left: 16px;
}
.global-nav__mypage-btn {
    background: none;
    border: none;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.global-nav__mypage-btn:hover {
    background-color: var(--color-bg-base);
}
.global-nav__mypage-menu {
    position: absolute;
    top: calc(100% + 30px);
    right: 0;
    width: 240px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light, #E5E7EB);
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 100;
}
.global-nav__mypage-user {
    padding: 16px;
    border-bottom: 1px solid var(--color-border-light, #E5E7EB);
    color: var(--color-text-base);
}
.global-nav__mypage-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.global-nav__mypage-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    border-bottom: 1px solid var(--color-border-light, #E5E7EB);
    color: var(--color-accent);
    text-decoration: none;
}
.global-nav__mypage-list a:hover {
    background-color: var(--color-accent-bg);
}
.global-nav__mypage-logout {
    padding: 16px;
}
.global-nav__mypage-logout .c-button {
    display: flex;
    padding:16px 24px;
}

@media screen and (max-width: 1023px) {
    .global-nav__mypage-menu {
        top: calc(100% + 4px);
        right: 16px;
    }
}

/* スマホ等でハンバーガーメニューにする場合は、必要に応じて display: none; などを調整してください */
@media screen and (max-width: 1023px) {
    .global-nav__right {
        display: none;
    }
}

/* 汎用セクション見出し（青い縦線付き） */
.c-sec-title {
    font-weight: 900;
    color: var(--color-primary);
    position: relative;
    padding-bottom:16px;
    border-bottom:1px solid var(--color-primary);
}
.c-sec-title--secondary {
    color: var(--color-digital-main);
}
.c-sec-title--secondary::before {
    background-color: var(--color-digital-main);
}
.c-sec-subtitle {
    font-weight: 900;
    color: var(--color-primary);
    position: relative;
    margin-bottom:clamp(16px, calc(16px + 8 * ((100vw - 375px) / 393)), 24px);
    padding-left:16px;
    border-left:10px solid var(--color-primary);
}

.color-primary { color: var(--color-primary); }
.color-accent { color: var(--color-accent); }
.color-sales01 { color: var(--color-about-sales01); }
.color-sales02 { color: var(--color-about-sales02); }
.color-pdf { color: var(--color-pdf); }

/* --- パンくず --- */
.breadcrumb {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    color: var(--color-text-light);
}
.breadcrumb li {
    display: flex;
    align-items: center;
}
.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin: 0 10px;
}
.breadcrumb a {
    color: var(--color-text--light);
    text-decoration: underline;
}

/* --- パンくずリスト（白背景・グレー背景用の黒文字版） --- */
.breadcrumb.breadcrumb--dark li {
    color: #EAEAEA;
}

.breadcrumb.breadcrumb--dark a {
    color: #EAEAEA;
}

/* --- main --- */
main {
    background: var(--color-bg-base);
}

.subpage-faq main, .subpage-legal main {
    background: #fff;
}

/* --- ページヘッダー --- */
.page-header {
}
.page-header__bg {
    position: relative;
    background: url(../images/bg-hero.webp) no-repeat center center / cover;
    color: var(--color-white);
}
.page-header__inner {
    position: relative;
    margin: 0 auto;
}
.page-header__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block:24px 40px;
    width:calc(100% - 480px);
}
.subpage-about .page-header__inner {
    height:100%;
}
.subpage-about .page-header__content {
    height: 100%;
}
.page-header__title {
    margin-bottom: 8px;
    font-weight: 900;
    line-height:1.4;
}
.page-header__sub {
}
.page-header__figure {
    width: 35%;
    position: absolute;
    right: 0;
    bottom:0;
    transform: translate(0,50%);
    z-index: 10;
}
.page-header__image {
    width: 100%;
    height: auto;
}
.page-header__lead {
    padding-top:40px;
    background-color: var(--color-white);
}
.page-header__lead-inner {
}
.page-header__lead-content {
    width:calc(100% - 480px);
}
.page-header__lead-title {
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
}

@media screen and (max-width: 1024px) {
    .page-header__bg { padding-top: 24px; padding-inline:16px;}
    .page-header__inner { flex-direction: column; text-align: left; }
    .breadcrumb { margin-bottom: 32px;}
    .page-header__content {justify-content: flex-start; padding-block:0; width:100%; height:auto;}
    .page-header__figure {left:50%; width:100%; max-width: 420px; transform: translate(-50%,62%);}
    .page-header__lead { padding-top: 30px; padding-bottom: 30px; padding-inline:16px;}
    .page-header__lead-content { width: 100%; }
}

/* ==============================================
  Hero
=============================================== */
/* ベースのコンテナ設定 */
.hero {
    position: relative;
    padding-top: 80px;
    background: url(../images/bg-hero.webp) no-repeat;
    background-size: cover;
}

.hero__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: var(--color-white);
    margin: 0 auto;
}

/* 左カラム：テキストエリア */
.hero__content {
    width: 680px;
}

/* 右カラム：画像エリア */
.hero__figure {
    width: 480px;
    border:1px solid #fff;
}

.hero__figure-image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 各テキスト要素のスタイリング */
.hero__label {
    color: var(--color-gold);
    font-weight: 700;
    margin-bottom: 24px;
}

.hero__credit {
    font-weight: 700;
    margin-bottom: 16px;
}

.hero__logo {
    margin-bottom: 8px;
    width: clamp(240px, calc(240px + 240 * ((100vw - 375px) / 393)), 480px);
}

.hero__logo-image {
    max-width: 100%;
    height: auto;
}

.hero__edition {
    margin-bottom: 16px;
    line-height: 1;
}

.hero__catchcopy {
    margin-bottom: 24px;
    font-weight: 700;
}

.hero__action-box {
    display: flex;
    flex-direction: column;
    padding: 24px;
    text-align: center;
    background-color: rgba(19, 31, 113, 0.9);
}

.hero__campaign {
    color: var(--color-gold);
    font-weight: 700;
    text-align: left;
    margin-bottom: 16px;
}

.hero__button {
    padding: 18px;
    margin-bottom: 16px;
    width: 100%;
}
.hero__button .material-symbols-outlined {
    font-size: 24px; /* Heroだけアイコンを大きくするため残す */
}

.hero__link {
    color: var(--color-white);
}

.hero__link:hover {
    color:var(--color-gold);
}

/* =========================================
   「AI白書2026」刊行記念特典セクション
========================================= */

/* コンテナ全体 */
.benefit {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,50%);
}

/* 上部のオレンジ色タイトルバー */
.benefit__title {
    background-color: var(--color-book-main);
    color: var(--color-benefit-text);
    text-align: center;
    font-weight: bold;
    padding: 8px 20px;
    margin: 0;
    border-radius: 8px 8px 0 0;
}

/* メインコンテンツ（黄色の背景エリア） */
.benefit__content {
    border-right: 4px solid var(--color-book-main);
    border-bottom: 4px solid var(--color-book-main);
    border-left: 4px solid var(--color-book-main);
    background-color: #FFFEF4;
    padding: 24px 40px;
    border-radius: 0 0 8px 8px;
}

/* リード文 */
.benefit__lead {
    text-align: center;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.6
}

.benefit__lead p {
    margin: 0;
}

/* ステップのリストコンテナ */
.benefit__steps {
    display: flex;
    justify-content: center;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0 auto 16px;
    width: 100%;
}

/* 各ステップのカード */
.benefit__step {
    flex: 1;
    position: relative;
    padding: 16px;
    border: 1px solid var(--color-gold);
    background-color: var(--color-white);
}

/* ステップ間の矢印（CSS三角形で描画） */
.benefit__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 20px;
    border-color: transparent transparent transparent var(--color-gold);
    z-index: 1;
}

/* STEP 01 などのラベル部分 */
.benefit__step-label {
    background-color: var(--color-book-main);
    color: var(--color-benefit-text);
    text-align: center;
    font-weight: bold;
    margin-bottom:8px;
    padding: 4px 16px;
}

/* アイコンとテキストを含むボディ部分 */
.benefit__step-body {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* アイコンコンテナ */
.benefit__step-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height:80px;
    flex-shrink: 0;
}

.benefit__step:nth-child(1) .benefit__step-icon span {
    color: var(--color-benefit-icon);
    font-size: 64px;
}

.benefit__step-image {
    max-width: 100%;
    height: auto;
}

/* テキストコンテナ */
.benefit__step-text {
    flex-grow: 1;
    color: var(--color-text-base);
}

.benefit__step-title {
    font-weight: 700;
    margin: 0 0 5px 0;
}

.benefit__step-title a {
    color:inherit;
}

.benefit__step-desc {
    color: var(--color-text-muted);
    margin: 0;
}

/* 下部の注釈 */
.benefit__note {
    text-align: center;
    font-weight: 700;
    margin-top: 16px;
}

/* =========================================
   レスポンシブ対応（スマートフォン向け）
========================================= */
@media screen and (max-width: 1024px) {
    .benefit__steps {
        flex-direction: column;
        gap: 20px;
    }

    /* スマホ表示時は矢印を下向きに変更 */
    .benefit__step:not(:last-child)::after {
        top: auto;
        bottom: -20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        border-width: 20px 25px 0 25px;
        border-color: var(--color-white) transparent transparent transparent;
    }
}

/* =========================================
   サブスク情報セクション全体
========================================= */
.subscription-info {
    background-color: var(--color-bg-base);
    color: var(--color-white);
    padding: 234px 20px 80px;
}

/* ヘッダー部分 */
.subscription-info__header {
    text-align: center;
    line-height: 1.4;
    margin-bottom: 40px;
}

.subscription-info__header-sub {
    display: block;
    color: var(--color-primary);
    font-weight: 900;
}

.subscription-info__header-main {
    color: var(--color-primary);
    font-weight: 900;
    margin: 0;
}

/* =========================================
   4つの特典 (.features)
========================================= */
.features {
    margin: 0 auto;
    margin-bottom: clamp(64px, calc(64px + 24 * ((100vw - 375px) / 393)), 88px);
}

.features__lead {
    text-align: center;
    margin-bottom: 40px;
}

.features__lead-title {
    color: var(--color-primary);
    font-weight: 900;
    margin: 0 0 8px;
}

.features__lead-desc {
    color: var(--color-text-base);
}

.features__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC時は2列 */
    gap: 30px;
    list-style: none;
}

/* 特典カード */
.features__item {
    background-color: var(--color-white);
    color: var(--color-text-base);
    padding: 24px;
}

.features__item-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px;
}

.features__item-badge {
    background-color: var(--color-primary);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
}

.features__item-badge-label {
    font-weight: 900;
}

.features__item-badge-num {
    font-weight: 700;
    line-height: 1;
}

.features__item-title {
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1.4;
    margin: 0;
}

.features__item-desc {
    margin-bottom: 16px;
}

.features__item-gallery {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.features__item-gallery figure {
    flex: 1;
}

.features__item-figure {
    margin: 0 0 16px;
    text-align: center;
}

.features__item-image {
    max-width: 100%;
    height: auto;
}

/* チェックマークリスト */
.features__item-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    list-style: none;
    background-color: var(--color-feature-bg-light);
}

.features__item-point {
    position: relative;
    display: flex;
    align-items: center;
}

.features__item-point:last-child {
    margin-bottom: 0;
}

.features__item-point span {
    margin-right: 8px;
    color: var(--color-primary);
    font-size: 24px;
}

/* =========================================
   料金プラン (.pricing)
========================================= */
.pricing {
    margin: 0 auto;
}

.pricing__header {
    text-align: center;
    margin-bottom: 56px;
}

.pricing__title {
    margin-bottom: 8px;
    color: var(--color-primary);
    font-weight: 900;
}

.pricing__lead {
    color: var(--color-text-base);
    font-weight: 700;
    margin: 0;
}

.pricing__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0;
    margin-bottom: 48px;
    list-style: none;
}

/* プランカード */
.pricing__item {
    background-color: var(--color-white);
    color: var(--color-text-base);
    position: relative;
    padding: 30px 16px 24px;
    border: 2px solid;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

/* プランごとのテーマカラー（枠線） */
.pricing__item--book { border-color: var(--color-book-main); }
.pricing__item--digital { border-color: var(--color-digital-main); }
.pricing__item--corporate { border-color: var(--color-corporate-main); }

/* バッジ（カード上部にはみ出す部分） */
.pricing__badge {
    position: absolute;
    top:0;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--color-white);
    font-weight: 900;
    padding: 8px 24px;
    border-radius: 20px;
    white-space: nowrap;
}
.pricing__badge--book { color:var(--color-benefit-text); background-color: var(--color-book-main); }
.pricing__badge--digital { background-color: var(--color-digital-main); }
.pricing__badge--corporate { background-color: var(--color-corporate-main); }

.pricing__item-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.pricing__name {
    font-weight: 900;
}

.pricing__item--book .pricing__name {
    color: var(--color-book-main);
}
.pricing__item--digital .pricing__name {
    color: var(--color-digital-main);
}
.pricing__item--corporate .pricing__name {
    color: var(--color-corporate-main);
}

.pricing__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    line-height: 1;
}

.pricing__amount {
    font-weight: 700;
}

.pricing__tax {
    font-weight: 900;
    color: var(--color-text-base);
}

.pricing__coming {
    font-weight: 700;
    color: var(--color-text-muted);
}

.pricing__item-body {
    /* flex-grow: 1; */
    margin-bottom:24px;
}

/* 紙書籍版だけにあるオレンジタイトルの帯 */
.pricing__features-title {
    background-color: var(--color-book-main);
    color: var(--color-benefit-text);
    font-weight: 700;
    text-align: center;
    padding: 8px 16px;
    margin-bottom: 15px;
}

.pricing__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}
.pricing__item--book .pricing__features {
    background: var(--color-book-bg);
}
.pricing__item--digital .pricing__features {
    background: var(--color-digital-bg);
}
.pricing__item--corporate .pricing__features {
    background: var(--color-corporate-bg);
}

.pricing__feature {
    display: flex;
    align-items: center;
    position: relative;
}
.pricing__item--corporate .pricing__feature {
    justify-content: center;
    font-weight: 700;
}
.pricing__item--book .pricing__feature .material-symbols-outlined {
    color: var(--color-book-main);
}
.pricing__item--digital .pricing__feature .material-symbols-outlined {
    color: var(--color-digital-main);
}

.pricing__desc {
    margin-bottom:24px;
    color: var(--color-text-base);
}

.pricing__link {
    color: var(--color-link);
    text-decoration: underline;
}

.pricing__note {
    color: var(--color-text-base);
    margin-bottom: 20px;
}
.pricing__note-highlight {
    color: var(--color-book-main);
}


/* ボタン群 */
.pricing__button-wrapper {
    margin-top:auto;
    padding-top:24px;
    border-top:1px solid var(--color-border);
}

.pricing__button {
    padding: 16px;
    width: 100%;
    height: 56px;
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 1024px) {
    .features__list,
    .pricing__list {
        grid-template-columns: 1fr; /* スマホ時は1列にする */
    }
}

/* --- コンテナ --- */
.comparison {
    color: var(--color-text-base);
}

.comparison__table-note {
    margin-bottom:16px;
    line-height:1.6;
}

/* SPなど画面が狭い場合に横スクロールさせるためのラッパー */
.comparison__table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.comparison__table {
    width: 100%;
    min-width: 800px; /* 横幅が狭くなりすぎるのを防ぐ */
    border-collapse: collapse;
    text-align: center;
}

/* --- ヘッダーセル (th) --- */
.comparison__th {
    padding: 20px 10px;
    color: var(--color-white);
    font-weight: bold;
    vertical-align: middle;
    border: 1px solid var(--color-border);
}

.comparison__th--feature {
    background-color: var(--color-primary);
    width: 25%;
    text-align: left;
    padding-left: 20px;
}

.comparison__th--book {
    background-color: var(--color-book-main);
    width: 25%;
}

.comparison__th--digital {
    background-color: var(--color-digital-main);
    width: 25%;
}

.comparison__th--corporate {
    background-color: var(--color-corporate-main);
    width: 25%;
}

.comparison__plan-name {
    display: block;
    font-weight: 900;
}

.comparison__plan-price {
    display: block;
    font-weight: 700;
}

/* --- データセル (td) --- */
.comparison__td {
    padding: 20px 10px;
    border: 1px solid var(--color-border);
    vertical-align: middle;
}

.comparison__td--feature {
    background-color: var(--color-white);
    text-align: left;
    padding-left: 20px;
    font-weight: 700;
}

/* 各列の薄い背景色 */
.comparison__td--book {
    background-color: var(--color-book-bg);
}

.comparison__td--digital {
    background-color: var(--color-digital-bg);
}

.comparison__td--corporate {
    background-color: var(--color-corporate-bg);
}

/* --- アイコン --- */
/* 丸印（〇） */
.comparison__icon-circle {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--color-black);
    background-color: transparent;
}

.comparison__icon-circle--book {
    border-color: var(--color-book-main);
}

.comparison__icon-circle--digital {
    border-color: var(--color-digital-main);
}

.comparison__icon-circle--corporate {
    border-color: var(--color-corporate-main);
}

/* ハイフン（-） */
.comparison__icon-hyphen {
    display: inline-block;
    width: 20px;
    height: 4px;
    background-color: var(--color-black);
    border-radius: 2px;
    vertical-align: middle;
}

.comparison__icon-hyphen--book {
    background-color: var(--color-book-main);
}

.comparison__icon-hyphen--digital {
    background-color: var(--color-digital-main);
}

/* --- 注釈テキスト --- */
.comparison__note {
    margin-top: 15px;
    color: var(--color-text-base);
}

/* ==============================================
  Newsletter CTA (ニュースレター登録)
=============================================== */
.newsletter {
    position: relative;
    margin: 80px auto 0;
    padding: 50px 40px;
    border: 4px solid var(--color-border-light);
    background-color: var(--color-white);
}

/* 上部にはみ出すバッジ */
.newsletter__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    border:2px solid var(--color-white);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 900;
    padding: 8px 40px;
    white-space: nowrap;
}

/* 左右分割のレイアウト */
.newsletter__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* --- 左側（コンテンツ） --- */
.newsletter__content {
    flex: 1;
}

.newsletter__title {
    color: var(--color-primary);
    font-weight: 900;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}

.newsletter__desc {
    color: var(--color-text-base);
}

.newsletter__link {
    color: var(--color-link);
    transition: opacity 0.2s;
}

.newsletter__link:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* --- 右側（フォームエリア） --- */
.newsletter__form-wrapper {
    flex: 1;
    background-color: var(--color-bg-base);
    padding: 24px;
}

.newsletter__input-group {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}

.newsletter__input {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid var(--color-border);
    outline: none;
}

.newsletter__input::placeholder {
    color: var(--color-text-light);
}

.newsletter__input:focus {
    border-color: var(--color-nav-btn-hover);
}

.newsletter__submit {
    background-color: var(--color-accent);
    color: var(--color-white);
    font-weight: bold;
    border: none;
    padding: 0 30px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.newsletter__submit:hover {
    background-color: var(--color-accent-hover);
}

.newsletter__disclaimer {
    color: var(--color-text-base);
}

.newsletter__disclaimer-link {
    color: var(--color-link);
    text-decoration: underline;
}

.newsletter__disclaimer-link:hover {
    text-decoration: none;
}

/* ==============================================
  About AIWP (「AI白書」とは)
=============================================== */
.about-aiwp {
    margin-bottom: 80px;
    padding-inline: 40px;
    color: var(--color-white);
}

.about-aiwp__inner {
    padding: 80px;
    width: 100%;
    border-radius: 8px;
    background-color: var(--color-about-bg);
}

/* --- 上部：イントロダクション --- */
.about-aiwp__intro {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 40px;
}

@media (min-width: 1024px) {
    .about-aiwp__intro {
        flex-direction: row;
        gap: 60px;
    }
}

/* 左側：画像 */
.about-aiwp__figure {
    width: 100%;
}

@media (min-width: 1024px) {
    .about-aiwp__figure {
        width: 45%; /* PCでは左側45%の幅 */
        flex-shrink: 0;
    }
}

.about-aiwp__image {
    width: 100%;
    height: auto;
    display: block;
}

/* 右側：テキストコンテンツ */
.about-aiwp__content {
    flex: 1;
}

/* 「AI白書」とは ＋ 横線 */
.about-aiwp__label-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.about-aiwp__label {
    color: var(--color-gold);
    font-weight: 700;
}

.about-aiwp__label-line {
    flex: 1;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
}

.about-aiwp__title {
    color: var(--color-gold);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 24px;
}

.about-aiwp__desc {
    margin-bottom: 24px;
}

.about-aiwp__desc p {
    margin-bottom: 1em;
}

.about-aiwp__desc p:last-child {
    margin-bottom: 0;
}

.about-aiwp__button {
    padding: 16px 20px;
    min-width: 400px;
}

/* --- 下部：ターゲット（オススメの役職） --- */
.about-aiwp__target {
    background-color: var(--color-white);
    color: var(--color-text-base);
    padding: 24px 32px;
}

.about-aiwp__target-title {
    text-align: center;
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.about-aiwp__target-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 1024px) {
    .about-aiwp__target-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .about-aiwp__target-list {
        gap: 30px;
    }
}

.about-aiwp__target-item {
    background-color: var(--color-feature-bg-light);
    padding: 30px 20px;
}

.about-aiwp__target-role {
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-primary);
}

.about-aiwp__target-text {
    color: var(--color-text-base);
}

/* ==============================================
  Purchase CTA (購入・登録アクション)
=============================================== */
.purchase-cta {
    padding: 80px 0;
    color: var(--color-white);
    background: url(../images/bg-hero.webp) no-repeat;
}

.purchase-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0 auto;
    align-items: center;
}

@media (min-width: 1024px) {
    .purchase-cta__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
    }
}

/* --- 左側：画像 --- */
.purchase-cta__figure {
    width: 100%;
    max-width: 300px; /* 画像の最大幅（スマホ時） */
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .purchase-cta__figure {
        width: 40%;
        max-width: 400px; /* PC時の最大幅 */
        margin: 0;
    }
}

.purchase-cta__image {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 右側：コンテンツ --- */
.purchase-cta__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.purchase-cta__title {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
}

.purchase-cta__subtitle {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
}

.purchase-cta__desc {
    font-weight: 700;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.9);
}

/* --- ボタンエリア --- */
.purchase-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 400px;
}

.purchase-cta__button {
    width: 100%;
    padding: 18px 20px;
}

/* ==============================================
  Site Footer (フッター)
=============================================== */
.site-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-white);
    padding: 60px 0 30px;
}

@media (min-width: 1024px) {
    .site-footer {
        padding: 80px 0 40px;
    }
}

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 上部：情報とナビゲーション --- */
.site-footer__top {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-bottom: 40px;
}

@media (min-width: 1024px) {
    .site-footer__top {
        flex-direction: row;
        justify-content: space-between;
        gap: 40px;
    }
}

/* 左側：サイト情報 */
.site-footer__info {
    flex: 0 0 auto;
    flex-direction: column;
    width: 45%;
}

.site-footer__logo {
    margin-bottom: 16px;
    width: 200px;
}

.site-footer__logo-image {
    max-width: 250px;
    height: auto;
}

.site-footer__desc {
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.9);
}

.site-footer__sns-link {
    display: inline-block;
    color: var(--color-white);
    font-size: 24px;
    transition: opacity 0.3s;
}

.site-footer__sns-link:hover {
    opacity: 0.7;
}

/* 右側：ナビゲーション群 */
.site-footer__nav-group {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 640px) {
    .site-footer__nav-group {
        flex-direction: row;
        gap: 80px;
    }
}

@media (min-width: 1024px) {
    .site-footer__nav-group {
        flex: 1;
        justify-content: flex-end; /* 右寄せ */
    }
}

.site-footer__nav-col {
    min-width: 150px;
}

.site-footer__nav-title {
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.site-footer__nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    gap: 6px;
}

.site-footer__nav-item {
    display: flex;
    align-items: center;
}

.site-footer__nav-item .material-symbols-outlined {
    margin-left: 4px;
}

.site-footer__nav-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: opacity 0.3s;
}

.site-footer__nav-link:hover {
    text-decoration: underline;
}

/* --- 下部：コピーライト --- */
.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* 薄い白のボーダー */
    padding-top: 25px;
    text-align: left; /* 画像に合わせ左寄せ */
}

.site-footer__copyright {
}

/* モーダル
------------------------------------ */
.modal {
  position: relative;
  margin: 0 auto;
  max-width: 800px;
  max-height:80vh;
  overflow: auto;
}

html.modal-open {
  overflow: hidden;
}

.modal__inner {
    position: relative;
}

.modal__session-body {
    padding:40px 24px;
    background:#fff;
    box-sizing: border-box;
}

.mfp-close-btn-in .mfp-close {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    top:auto;
    left:50%;
    bottom:0;
    color: #fff;
    text-decoration: none;
    transform: translate(-50%,0);
}

.mfp-close-btn-in .mfp-close * {
    pointer-events: none;
}

.mfp-close-btn-in .mfp-close .material-symbols-outlined {
    margin-right:10px;
}

.modal__inner-body_fig {
  width: 25%;
}

.modal__inner-body_content {
  width: 72%;
}

.modal__inner-body_content a {
  color: #0000EE;
}

.modal__inner-body_content .name {
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  color: #e60012;
  border-bottom: 2px solid #e60012;
}

.modal__inner-body_content .pos {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.modal__inner-body_content .txt {
  font-size: 1.4rem;
}

.mfp-bg {
  background: #000;
  opacity: 0.9;
}

.purchase-modal__title {
    margin-bottom:16px;
    font-weight: 700;
    text-align: center;
}

.purchase-buttons {
    display: flex;
    gap: 16px;
    position: relative;
}
#purchase-modal .purchase-buttons {
}
.purchase-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    color: var(--color-white);
    font-weight: 900;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s;
}
.purchase-btn:hover { opacity: 0.8;}
.purchase-btn--amazon { background-color: #F90; }
.purchase-btn--kadokawa { background-color: #000; }
.purchase-btn--honto { background-color: #0085CD; }
.purchase-btn .material-symbols-outlined { margin-left: 8px; font-size: 18px;}

@media screen and (max-width: 1279px) {
    .global-nav {
        padding-inline: 16px;
    }
    .page-header__bg {
        padding-block: 24px;
        /*padding-inline: 16px;*/
    }
    .subpage-about .page-header__bg {
        padding-bottom: 0;
    }
    .hero__content {
        width: 56.6666%;
    }
    .hero__figure {
        width: 40%;
    }
}

/* ==============================================
   Mobile Styles (max-width: 1024px)
=============================================== */
@media screen and (max-width: 1024px) {
    .br--sp {
        display: block;
    }
    
    /* ==============================================
       Header Navigation (SP)
       画像に基づく2段構成（上段：ロゴ＆ボタン / 下段：タブ4つ）
    =============================================== */
    .global-nav {
        padding-top:8px;
        height: auto;
        border-bottom: none;
    }

    .global-nav__inner {
        flex-wrap: wrap; /* 子要素を折り返させる */
        height:auto;
    }

    /* --- 上段（ロゴとログインボタン） --- */
    .global-nav__brand {
        margin-left: 16px;
    }

    .global-nav__logo img {
        height: 26px;
    }

    .global-nav__login-btn {
        margin-right: 16px;
        padding: 8px 12px;
    }

    .global-nav__login-btn span {
        font-size: 18px;
        margin-right: 4px;
    }

    /* --- 下段（ナビゲーションタブ 4等分） --- */
    .global-nav__lists {
        margin-top:8px;
        width: 100%;
        order: 3;
        gap: 0;
        align-items: stretch;
        border-top: 1px solid var(--color-border-light);
        border-bottom: 1px solid var(--color-border-light);
    }

    .global-nav__item {
        flex: 1;
        border-right: 1px solid var(--color-border-light);
    }
    .global-nav__item:last-child {
        border-right: none;
    }

    .global-nav__link {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 9px 0;
        font-size: 11px;
        line-height: 1.4;
        text-align: center;
    }

    /* --- アクティブタブ（ホーム）の装飾 --- */
    .global-nav__item.is-active {
        background-color: var(--color-feature-bg-light);
    }

    .global-nav__item.is-active::after {
        height: 3px; /* 下線を少し太めに */
        background-color: var(--color-text-base);
    }

    /* --- Hero Section --- */
    .hero {
        padding-block: 40px 60px;
        background-position: center bottom;
    }

    .hero__inner {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    /* display: contents; で .hero__content の箱を無効化し、中の要素を直接flexアイテムとして扱う */
    .hero__content {
        display: contents;
    }

    .hero__figure {
        width: 100%;
        max-width: clamp(320px, calc(320px + 160 * ((100vw - 375px) / 393)), 480px);
        margin: 0 auto;
    }

    /* カンプ通りの順番に order で並べ替え */
    .hero__logo { order: 3; margin-bottom: 12px; }
    .hero__edition { order: 4; margin-bottom: 24px; text-align: left; }
    .hero__label { order: 0; }
    .hero__credit { order: 2; }
    .hero__catchcopy { order: 5; margin-bottom: 32px; }
    .hero__figure { order: 0; margin-bottom: 16px; }
    .hero__action-box { order: 7; width: 100%; padding: 20px 16px; }

    /* --- Benefit (刊行記念特典) --- */
    /* PCの絶対配置（重なり）を解除し、通常のフローに戻す */
    .benefit {
    }
    
    .benefit__step-label { padding: 4px 16px; }
    
    .benefit__title {
        padding: 8px 16px;
    }

    .benefit__content {
        padding: 20px 16px;
    }

    .benefit__step {
        padding: 16px;
    }
    
    .benefit__step-body {
        gap: 20px;
    }
    
    .benefit__step-icon {
        margin-right: 0;
    }

    /* スマホ時は矢印を下向きに変更 */
    .benefit__step:not(:last-child)::after {
        top: auto;
        bottom: -20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        border-width: 20px 25px 0 25px;
        border-color: var(--color-gold) transparent transparent transparent;
    }
    
    .benefit__note {
        text-align: left;
    }

    /* --- Subscription Info --- */
    .subscription-info {
        padding: 60px 0; /* JSで計算していたpadding-topを固定値で上書き */
    }

    .features__list {
        grid-template-columns: 1fr; /* 1列にする */
    }

    .features__item {
        padding: 16px;
    }
    
    .features__item-header {
        flex-direction: column;
        align-items: center;
        gap:8px;
    }

    /* --- Pricing --- */
    .pricing__list {
        grid-template-columns: 1fr; /* 1列にする */
        gap: 40px;
    }

    .pricing__button {
        height: 50px;
    }

    /* --- Comparison (比較表) --- */
    .comparison__table-wrapper {
        border-right: none;
        border-left: none;
    }

    /* --- Newsletter --- */
    .newsletter {
        padding: 40px 16px 24px;
        margin-top: 60px;
    }
    
    .purchase-cta .newsletter {
        margin-top: 96px;
    }

    .newsletter__inner {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    
    .newsletter__content {
        text-align: center;
    }
    
    .newsletter__form-wrapper {
        padding: 24px 16px;
    }

    .newsletter__input-group {
    }

    .newsletter__submit {
    }

    /* --- About AIWP --- */
    .about-aiwp {
        padding-inline: 20px;
        margin-bottom: 60px;
    }

    .about-aiwp__inner {
        padding: 16px;
    }

    .about-aiwp__intro {
        flex-direction: column;
        gap: 30px;
    }

    .about-aiwp__button {
        min-width: 100%;
        width: 100%;
    }

    .about-aiwp__target {
        padding: 24px 18px;
    }

    .about-aiwp__target-list {
        grid-template-columns: 1fr;
    }

    /* --- Purchase CTA --- */
    .purchase-cta {
        padding: 40px 0;
    }
    
    .subpage-about .purchase-cta {
        padding: 40px 0 56px;
    }

    .purchase-cta__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .purchase-cta__figure {
        max-width: clamp(320px, calc(320px + 160 * ((100vw - 375px) / 393)), 480px);
    }
    
    .purchase-cta__subtitle {
        margin-bottom:16px;
    }

    .purchase-cta__desc {
        margin-bottom:16px;
        text-align: left;
    }

    .purchase-cta__actions {
        max-width: 100%;
    }

    /* --- Footer --- */
    .site-footer {
        padding: 40px 20px 20px;
    }

    .site-footer__top {
        flex-direction: column;
        gap: 40px;
    }

    .site-footer__info {
        width: 100%;
    }

    .site-footer__nav-group {
        flex-direction: column;
        gap: 30px;
    }
    
    .material-symbols-outlined {
        font-size: 24px;
    }
    
    .purchase-buttons { flex-direction: column; gap: 10px;}
}

@media screen and (max-width: 768px) {
    
}