/*
 Theme Name:   Mirairo Career Theme
 Theme URI:    https://github.com/Mirairo-Inc/MirairoCareer-generatepress-child
 Description:  GeneratePress子テーマ — Mirairo Careerプロジェクト用。コンポーネントレベルのビジュアルスタイルをCSS Custom Propertiesで制御します。
 Author:       Mirairo Inc
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  mirairo-career-theme
*/

/* ============================================================
   Design Tokens — コンポーネントレベルのカラー・タイポグラフィ・スペーシング
   グローバル設計（ヘッダー型、コンテナ幅等）はCustomizerで管理し、
   コンポーネントの装飾はここで一元管理する
   ============================================================ */
:root {
    /* --- カラーパレット --- */
    --mc-text: #1a1a1a;
    --mc-text-sub: #333333;
    --mc-text-muted: #505050;
    --mc-white: #ffffff;

    --mc-primary: #103a70;
    --mc-primary-dark: #092a55;
    --mc-primary-bright: #0014cf;
    --mc-primary-soft: #eef5ff;

    --mc-orange: #F55600;
    --mc-orange-deep: #e33d00;
    --mc-orange-deep-bright: #ee3f00;
    --mc-orange-hover: #e95f14;
    --mc-orange-soft: #fff3ec;

    --mc-green: #079a43;
    --mc-green-dark: #087238;

    --mc-bg: #f6f9ff;
    --mc-bg-warm: #fff8f2;
    --mc-border: #d8e2ee;
    --mc-border-strong: #b9c9da;

    --mc-focus: #0014cf;

    --mc-orange-pale: #ffd7c2;
    --mc-footer-bg: #101f35;

    --mc-shadow-sm: 0 4px 14px rgba(16, 58, 112, 0.10);
    --mc-shadow-md: 0 12px 32px rgba(16, 58, 112, 0.14);

    --mc-font-sans: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* --- ヒーロー背景画像 --- */
    --mc-hero-bg-image: url("/wp/wp-content/uploads/2026/06/hero-bz-a.jpg");

    --mc-container: 1120px;
    --mc-section-py: clamp(4rem, 8vw, 6.5rem);

    /* --- スペーシング --- */
    --mc-space-xs: 4px;
    --mc-space-sm: 8px;
    --mc-space-md: 16px;
    --mc-space-lg: 32px;
    --mc-space-xl: 64px;
    --mc-space-2xl: 96px;

    /* --- レイアウト --- */
    --mc-container-max: 1200px;
    --mc-border-radius: 8px;
    --mc-border-radius-lg: 16px;
}

/* ============================================================
   Base Styles — GeneratePressのデフォルトスタイルを上書き
   ============================================================ */
body {
    font-family: var(--mc-font-sans);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--mc-text);
    background-color: var(--mc-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   00. GeneratePress Theme Reset (homeページのみ)
   ============================================================ */
body.home {
    overflow-x: hidden; /* 横スクロール防止 */
}

body.home .site-content,
body.home .site-content .content-area,
body.home .site-main {
    margin: 0;
    padding: 0;
}

/* inside-article のパディングもリセット（GP one-container のデフォルト40pxを除去） */
body.home .inside-article {
    margin: 0;
    padding: 0;
}

/* one-container: GPデフォルトの背景色とパディングをリセット */
body.home.one-container .site-content {
    padding: 0 !important; /* GP @media(max-width:768px) の padding:30px を上書き */
}

body.home.one-container .container {
    background-color: transparent;
}

/* entry-contentの余白もリセット（セクション自身がパディング管理） */
body.home .entry-content {
    padding: 0;
}

/* grid-containerのmax-widthをリセット（背景を全幅に） */
body.home #page.grid-container {
    max-width: 100%;
    padding: 0;
}

/* ============================================================
   01. GeneratePress Header Override
   ============================================================ */
.site-header {
    background: var(--mc-primary-dark) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.site-header .inside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
}

.site-header .header-image img,
.site-header .custom-logo,
.site-header img.is-logo-image {
    width: clamp(160px, 18vw, 240px) !important;
    max-width: 240px !important;
    height: auto !important;
}

/* サイトタイトルテキスト非表示（ロゴ画像のみ表示） */
.site-header .site-title,
.site-header .site-description,
.site-header .site-branding {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* ナビゲーションが不要な場合の非表示 */
.main-navigation:not(.toggled) .main-nav {
    display: none;
}

/* --- ヘッダーCTAボタン --- */
.mc-header__account-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    min-width: 0;
}

.mc-header__account-actions .mc-account-cta {
    min-width: 0;
}

.mc-header__login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 2.75rem;
    padding: 0.45rem 0.875rem;
    border: 1px solid var(--mc-white);
    border-radius: 999px;
    color: var(--mc-white) !important;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none !important;
}

.mc-header__login:hover,
.mc-header__login:focus-visible {
    background: var(--mc-white);
    color: var(--mc-primary-dark) !important;
}

.mc-header__login:focus-visible {
    outline: 2px solid var(--mc-white);
    outline-offset: 3px;
}

.mc-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.45rem 0.45rem 1rem;
    color: var(--mc-white) !important;
    background: linear-gradient(90deg,
        var(--mc-orange-deep) 0%,
        var(--mc-orange-deep-bright) 70%,
        var(--mc-orange) 100%);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(200, 70, 18, 0.22);
    font-family: var(--mc-font-sans);
    font-size: 0.875rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.mc-header__cta:hover,
.mc-header__cta:focus-visible {
    color: var(--mc-orange-deep) !important;
    background: var(--mc-white);
    box-shadow: none;
    outline: 3px solid var(--mc-orange-deep);
}

.mc-header__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--mc-orange-deep);
    background: var(--mc-white);
    border-radius: 50%;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.mc-header__cta:hover .mc-header__cta-arrow,
.mc-header__cta:focus-visible .mc-header__cta-arrow {
    color: var(--mc-white);
    background: var(--mc-orange-deep);
}

/* Laravel連携メニュー: 標準メニューのリストをCTAとして配置 */
.mc-account-cta__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mc-account-cta__menu > li {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.site-header .inside-header:has(.mc-account-cta--header) {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.mc-account-cta--header .mc-header__cta {
    display: inline-flex;
    white-space: normal;
}

.mc-account-cta--header .mc-header__cta-arrow {
    flex: 0 0 auto;
}

/* ============================================================
   02. Hero Section
   ============================================================ */
.mc-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(34rem, 70vh, 40em);
    padding-block: clamp(2em, 9vw, 4rem);
    overflow: hidden;
    background-color: var(--mc-bg);
    background-image:
        linear-gradient(90deg,
            rgba(246, 249, 255, 0.98) 0%,
            rgba(246, 249, 255, 0.90) 46%,
            rgba(246, 249, 255, 0.58) 100%),
        var(--mc-hero-bg-image);
    background-position: center;
    background-size: cover;
}

/* GB の .gb-inside-container は max-width:1120px + margin:auto がインラインCSSで付く。
   .mc-hero が display:flex のため子が content-width に縮むので、
   明示的に width:100% で全幅に広げる。コンテンツ制御は .mc-hero__inner 側で行う */
.mc-hero > .gb-inside-container {
    width: 100%;
}

.mc-hero::after {
    position: absolute;
    right: max(-10rem, -8vw);
    bottom: -11rem;
    width: clamp(22rem, 45vw, 42rem);
    height: clamp(22rem, 45vw, 42rem);
    content: "";
    background: radial-gradient(circle,
        rgba(0, 20, 207, 0.12),
        rgba(255, 110, 25, 0.08) 45%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.mc-hero__inner {
    position: relative;
    z-index: 1;
    width: min(100% - 3rem, var(--mc-container));
    max-width: var(--mc-container);
    margin-inline: auto;
}

.mc-hero__sub {
    margin-bottom: 0.65rem;
    color: var(--mc-orange);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.6;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.1rem;
}

.mc-hero__title {
    color: var(--mc-primary-dark) !important;
    font-size: clamp(2rem, 5.4vw, 3.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.25;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.2rem;
    background: none !important;
    border: 0 !important;
}

.mc-hero__lead {
    margin-top: 1.5rem;
    color: var(--mc-text-sub);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.95;
}

.mc-hero__cta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 2.2rem;
}

.mc-hero__note {
    margin-top: 1rem;
    color: var(--mc-text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

/* ============================================================
   03. Shared Button Styles
   ============================================================ */
.mc-btn-primary,
.mc-btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    min-height: 3.25rem;
    border-radius: 999px;
    font-family: var(--mc-font-sans);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.mc-btn-primary {
    padding: 0.9rem 0.9rem 0.9rem 1.75rem;
    color: var(--mc-white);
    background: linear-gradient(90deg,
        var(--mc-orange-deep) 0%,
        var(--mc-orange-deep-bright) 70%,
        var(--mc-orange) 100%);
    border: 0;
    box-shadow: 0 8px 20px rgba(200, 70, 18, 0.26);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.mc-btn-primary:hover,
.mc-btn-primary:focus-visible {
    color: var(--mc-orange-deep);
    background: var(--mc-white);
    box-shadow: none;
    outline: 3px solid var(--mc-orange-deep);
}

/* アローアイコン — CSS ::after で描画（GBブロック互換性のためHTML内にSVGを置かない） */
.mc-btn-primary::after,
.mc-btn-line::after {
    content: "";
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    transition: background-color 0.18s ease;
}

.mc-btn-primary::after {
    background-color: var(--mc-white);
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7h8M7 3l4 4-4 4' stroke='%23c84612' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mc-btn-primary:hover::after,
.mc-btn-primary:focus-visible::after {
    background-color: var(--mc-orange-deep);
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7h8M7 3l4 4-4 4' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mc-btn-line {
    padding: 0.85rem 0.85rem 0.85rem 1.65rem;
    color: var(--mc-green-dark);
    background: var(--mc-white);
    border: 2px solid var(--mc-white);
    font-size: 1rem;
}

.mc-btn-line:hover,
.mc-btn-line:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--mc-shadow-md);
}

.mc-btn-line::after {
    background-color: var(--mc-green);
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7h8M7 3l4 4-4 4' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============================================================
   04. Shared Section Styles
   ============================================================ */
.mc-section {
    padding-block: var(--mc-section-py);
}

.mc-container {
    width: min(100% - 3rem, var(--mc-container));
    max-width: var(--mc-container);
    margin-inline: auto;
}

.mc-section--white {
    background: var(--mc-white);
}

.mc-section--accent {
    color: var(--mc-white);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 110, 25, 0.16), transparent 32rem),
        linear-gradient(135deg, var(--mc-primary-dark), var(--mc-primary));
}

.mc-section--line {
    padding-block: clamp(3rem, 6vw, 4.5rem);
    color: var(--mc-white);
    background: linear-gradient(135deg, var(--mc-green-dark), var(--mc-green));
}

.mc-eyebrow {
    display: inline-block;
    margin-bottom: 0.9rem;
    color: var(--mc-orange);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.12em;
}

.mc-section-header h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.55rem) !important;
    font-weight: 800 !important;
    color: var(--mc-primary-dark) !important;
    line-height: 1.35;
    letter-spacing: 0.1rem;
    font-feature-settings: "palt" 1;
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mc-section--white .mc-section-header h2 {
    color: var(--mc-primary-dark) !important;
}

.mc-section--accent .mc-section-header h2,
.mc-section--line .mc-section-header h2 {
    color: var(--mc-white) !important;
}

.mc-section--accent p:not(.mc-eyebrow),
.mc-section--line p:not(.mc-eyebrow) {
    color: rgba(255, 255, 255, 0.94) !important;
}

.mc-divider {
    width: 3rem;
    height: 3px;
    margin: 1.25rem 0 1.75rem;
    background: var(--mc-orange) !important;
    border: none !important;
    border-radius: 999px;
    opacity: 1 !important; /* WP separator の has-alpha-channel-opacity を上書き */
}

.mc-section-header p {
    color: var(--mc-text-sub);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.85;
    font-weight: 500;
}

/* Only registration and SNS labels use the requested pale orange. */
.mc-section--accent .mc-eyebrow,
.mc-section--line .mc-eyebrow {
    color: var(--mc-orange-pale);
}

/* ============================================================
   05. News Section
   ============================================================ */
.mc-news {
    padding-block: 1rem;
    background: var(--mc-white);
    border-block: 1px solid var(--mc-border);
}

.mc-news + .mc-section {
    padding-top: clamp(2rem, 8vw, 4rem) !important;
}

/* News見出しを一覧の上に配置（全画面幅共通） */
.mc-news .mc-container:has(> .mc-news__label),
.mc-news .mc-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mc-news__label {
    flex: 0 0 auto;
    margin: 0;
    color: var(--mc-primary-bright);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

/* テーブルブロックの figure をリセット */
.mc-news__table {
    width: 100%;
    margin: 0 !important;
}

.mc-news__table table {
    table-layout: auto !important;
    border-collapse: collapse;
    width: 100%;
    border: none !important;
}

.mc-news__table th,
.mc-news__table td {
    border: none !important;
}

.mc-news__table td {
    padding: 1.1rem 0.6rem;
    color: var(--mc-text);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: middle;
    border: none !important;
}

/* セパレーター行（偶数行） */
.mc-news__table tr:nth-child(even) td {
    padding: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border-top: 1px solid var(--mc-border) !important;
}

/* 1列目: 日付 */
.mc-news__table td:nth-child(1) {
    width: 6.5rem;
    color: var(--mc-text-muted);
    font-size: 0.875rem;
    font-weight: 400;
    white-space: nowrap;
}

/* 2列目: タグ（バッジ風） */
.mc-news__table td:nth-child(2) {
    display: inline-block;
    width: auto;
    padding: 0.15rem 0.6rem;
    margin-block: 0.85rem;
    color: var(--mc-primary-dark);
    background: var(--mc-primary-soft);
    border: 1px solid var(--mc-border) !important;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    line-height: 1.6;
}

/* セパレーター行のタグ列リセット */
.mc-news__table tr:nth-child(even) td:nth-child(2) {
    display: table-cell;
    padding: 0;
    margin: 0;
    background: none;
    border: none !important;
    border-top: 1px solid var(--mc-border) !important;
    border-radius: 0;
}

/* 3列目: テキスト */
.mc-news__table td:nth-child(3) {
    font-weight: 600;
}

/* タイトルと同じセル内で詳細文を囲み、左端を揃える */
.mc-news__detail {
    display: block;
    margin-top: 0.4rem;
    color: var(--mc-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.mc-news__table td a {
    color: var(--mc-text);
    text-decoration: none;
}

.mc-news__table td a:hover,
.mc-news__table td a:focus-visible {
    color: var(--mc-primary-bright);
    text-decoration: underline;
}

/* ============================================================
   05-B. Sub-page Shared Styles
   (page-hero, mc-doc, mc-table, mc-highlight-box, mc-notice, mc-form)
   ============================================================ */

/* --- Page Hero（サブページ紺グラデヘッダー） --- */

/* mc-page-heroがあるページのWPデフォルトタイトルを非表示 */
.page .entry-content:has(.mc-page-hero) ~ .entry-header,
.page:has(.mc-page-hero) > .inside-article > .entry-header,
.page:has(.mc-page-hero) .entry-header {
    display: none !important;
}

/* GPデフォルトのpadding/marginをリセットしてヒーローをヘッダー直下に */
.page:has(.mc-page-hero) .site-content {
    padding-top: 0 !important;
}

.page:has(.mc-page-hero) .entry-content {
    margin-top: 0 !important;
}

.mc-page-hero {
    padding: clamp(3rem, 6vw, 4.5rem) 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, var(--mc-primary-dark), var(--mc-primary));
    /* コンテナからブレイクアウトして全幅に */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.mc-page-hero__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--mc-orange-pale);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    font-family: var(--mc-font-sans);
}

.mc-page-hero__title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    color: var(--mc-white);
    font-weight: 800;
    margin-bottom: 0;
}

.mc-page-hero__lead {
    margin-top: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 36rem;
    margin-inline: auto;
}

/* --- Document Container --- */
.mc-doc {
    max-width: 720px;
    margin: 0 auto;
}

/* --- Document Lead Text --- */
.mc-doc__lead {
    font-size: 1.05rem;
    color: var(--mc-text-sub);
    line-height: 2;
    margin-bottom: 3rem;
    font-weight: 500;
}

/* --- Document Section --- */
.mc-doc__section {
    margin-bottom: 3rem;
}

.mc-doc__section:last-child {
    margin-bottom: 0;
}

/* --- Document Heading (h2) --- */
.mc-doc__heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mc-primary);
    border-left: 3px solid var(--mc-orange);
    padding-left: 0.9rem;
    margin-bottom: 1rem;
}

/* --- Document Body Text --- */
.mc-doc__text {
    font-size: 1rem;
    color: var(--mc-text-sub);
    line-height: 1.95;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.mc-doc__text:last-child {
    margin-bottom: 0;
}

/* --- Document Sub-heading --- */
.mc-doc__sub-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mc-primary-dark);
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

/* --- Document Lists --- */
.mc-doc ul,
.mc-doc ol {
    padding-left: 1.4em;
    margin-bottom: 0.75rem;
}

.mc-doc ul li,
.mc-doc ol li {
    font-size: 1rem;
    color: var(--mc-text-sub);
    line-height: 1.85;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

/* --- Info Table (operator, biz-rules) --- */
.mc-doc__table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
    border: 1px solid var(--mc-border) !important;
}

.mc-doc__table th,
.mc-doc__table td {
    border: 1px solid var(--mc-border) !important;
}

.mc-doc__table th,
.mc-doc__table td {
    padding: 0.85rem 1.1rem;
    font-size: 1rem;
    line-height: 1.75;
    border-bottom: 1px solid var(--mc-border) !important;
    vertical-align: top;
    color: var(--mc-text-sub);
}

.mc-doc__table th {
    white-space: nowrap;
    font-weight: 700;
    color: var(--mc-primary);
    background: var(--mc-primary-soft);
    text-align: left;
}

.mc-doc__table tr:first-child th,
.mc-doc__table tr:first-child td {
    border-top: 1px solid var(--mc-border) !important;
}

/* 返還金テーブル（2列均等） */
.mc-doc__table--fee th,
.mc-doc__table--fee td {
    width: 50%;
}

/* --- Highlight Box --- */
.mc-highlight-box {
    background: var(--mc-primary-soft);
    border: 1px solid var(--mc-border);
    border-radius: 0.75rem;
    padding: 1.1rem 1.4rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mc-highlight-box p {
    margin-bottom: 0.4rem;
}

.mc-highlight-box p:last-child {
    margin-bottom: 0;
}

/* --- Document Separator --- */
.mc-doc__separator {
    border: none !important;
    border-top: 1px solid var(--mc-border) !important;
    margin: 2.5rem 0 !important;
    opacity: 1 !important;
}

/* --- Note Text --- */
.mc-doc__note {
    font-size: 0.875rem;
    color: var(--mc-text-muted);
    margin-top: 0.6rem;
}

/* --- Enacted Date（制定日） --- */
.mc-enacted {
    font-size: 0.9rem;
    color: var(--mc-text-muted);
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--mc-border);
    line-height: 2;
}

/* --- Privacy Mark --- */
.mc-pm {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--mc-primary-soft);
    border: 1px solid var(--mc-border);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.mc-pm img {
    height: 3.75rem;
    width: auto;
    flex-shrink: 0;
}

.mc-pm p {
    font-size: 0.9rem;
    color: var(--mc-text-sub);
    margin: 0;
}

/* --- Notice Box (inquiry) --- */
.mc-notice {
    max-width: 720px;
    margin: 0 auto 3rem;
    background: var(--mc-primary-soft);
    border: 1px solid var(--mc-border);
    border-radius: 0.75rem;
    padding: 1.4rem 1.75rem;
}

.mc-notice__heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mc-primary);
    margin-bottom: 0.75rem;
}

.mc-notice ul {
    padding-left: 0;
    list-style: none;
}

.mc-notice li {
    font-size: 1rem;
    color: var(--mc-text-sub);
    line-height: 1.8;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

/* --- Form Wrapper (iframe) --- */
.mc-form-wrap {
    max-width: 720px;
    margin: 0 auto;
}

.mc-form-wrap iframe {
    display: block;
    width: 100%;
    border: none;
}

/* ============================================================
   06. Concern Section
   ============================================================ */
.mc-concern-pills {
    display: grid;
    gap: 1.8rem;
    margin-top: 3rem;
}

/* Legacy cards are spaced by their margins inside one wrapper, not grid gaps. */
.mc-concern-pills:has(> .mc-concern-pill) {
    display: block;
}

.mc-concern-pill {
    width: 100%;
    padding: clamp(0rem, 1vw, 0.5rem) clamp(0.8rem, 3vw, 1.8rem);
    background: var(--mc-white);
    border: 3px solid var(--mc-border-strong);
    border-radius: 2rem;
    box-shadow: var(--mc-shadow-sm);
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Support both legacy GB wrappers and containers with direct block children. */
.mc-concern-pill:has(> .mc-concern-pill__icon),
.mc-concern-pill > .gb-inside-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: center;
}

.mc-concern-pill.risen {
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 1.2rem;
}

.mc-concern-pill__icon {
    margin: 0; /* wp:image の figure デフォルト margin をリセット */
}

.mc-concern-pill__icon img {
    width: clamp(12rem, 14vw, 16rem);
    display: block;
    object-fit: cover;
    background: var(--mc-primary-soft);
    border-radius: 0.85rem;
}

/* Keep the same text spacing with or without a GB inner wrapper. */
.mc-concern-pill__body:has(> .mc-concern-pill__text),
.mc-concern-pill__body > .gb-inside-container {
    display: grid;
    gap: 0.35rem;
}

.mc-concern-pill__text {
    color: var(--mc-primary-dark);
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 800;
    line-height: 1.6;
    font-feature-settings: "palt" 1;
}

.mc-concern-pill__caption {
    color: var(--mc-text-sub);
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    line-height: 1.8;
}

.mc-concern-resolve {
    margin-top: 2.5rem;
    padding: clamp(1.5rem, 4vw, 2.4rem);
    color: var(--mc-text);
    background: var(--mc-orange-soft);
    border: 2px solid rgba(255, 110, 25, 0.35);
    border-radius: 1.25rem;
}

/* Support both legacy GB wrappers and containers with direct block children. */
.mc-concern-resolve:has(> .mc-concern-resolve__icon),
.mc-concern-resolve > .gb-inside-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
}

.mc-concern-resolve__icon {
    margin: 0;
}

.mc-concern-resolve__icon img {
    width: clamp(5.75rem, 12vw, 8.5rem);
    height: clamp(5.75rem, 12vw, 8.5rem);
    display: block;
    object-fit: cover;
    border-radius: 1rem;
}

.mc-concern-resolve p {
    color: var(--mc-text) !important;
    font-weight: 600;
}

/* ============================================================
   07. Form Section
   ============================================================ */
.mc-form-notice {
    max-width: 100%;
    margin-bottom: 2rem;
    padding: 1.1rem 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.10);
    border: 2px solid rgba(255, 255, 255, 0.24);
    border-radius: 0.85rem;
    font-size: 1.05rem;
    line-height: 1.8;
}

.mc-form-notice a {
    color: var(--mc-white);
    font-weight: 800;
    text-decoration: underline;
}

.mc-form-cta {
    text-align: center;
    padding: 48px 24px;
}

.mc-form-cta:has(> .mc-form-cta__note),
.mc-form-cta .gb-inside-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mc-form-cta .mc-form-cta__note {
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

/* ============================================================
   08. LINE Section
   ============================================================ */
.mc-line__text h2 {
    font-weight: 900;
}

/* Support both legacy GB wrappers and containers with direct block children. */
.mc-line__inner:has(> .mc-line__text),
.mc-line__inner > .gb-inside-container {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(2rem, 6vw, 4rem);
    align-items: center;
}

.mc-line__btn-wrap {
    margin-top: 1.8rem;
}

.mc-line__qr {
    display: grid;
    place-items: center;
    width: clamp(8rem, 18vw, 10rem);
    height: clamp(8rem, 18vw, 10rem);
    padding: 0.75rem;
    background: var(--mc-white);
    border-radius: 1rem;
    box-shadow: var(--mc-shadow-md);
}

.mc-line__qr img {
    width: 100%;
    display: block;
}

/* ============================================================
   09. GeneratePress Footer Override (5-column widget → stacked layout)
   ============================================================ */
.site-footer {
    background: var(--mc-footer-bg) !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

/* GeneratePressインラインCSSの var(--base-3) 背景を上書き */
.footer-widgets {
    background: var(--mc-footer-bg) !important;
}

.site-info {
    background: var(--mc-footer-bg) !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

.site-info a {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ウィジェットタイトル非表示 */
.footer-widgets .widget-title {
    display: none;
}

/* 5カラムを段組みに再配置 */
.footer-widgets-container.grid-container {
    max-width: 100% !important;
    padding: 0 !important;
}

.inside-footer-widgets {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    max-width: var(--mc-container) !important;
    width: 100%;
    margin: 0 auto !important;
    padding: 3rem clamp(1.5rem, 4vw, 2rem) !important;
    box-sizing: border-box;
}

/* ウィジェット内のGP inner-padding をリセット */
.footer-widgets .widget.inner-padding {
    padding: 0;
}

/* Row 1: ロゴ + リンク集 — 横並び */
.footer-widget-1,
.footer-widget-2 {
    grid-column: 1;
}

.footer-widget-1 {
    display: flex;
    align-items: center;
    padding-bottom: 1.5rem;
}

.footer-widget-2 {
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Row 1 横並びにする（ロゴとリンク） */
@media (min-width: 600px) {
    .inside-footer-widgets {
        grid-template-columns: auto 1fr !important;
    }

    .footer-widget-1 {
        grid-column: 1;
        grid-row: 1;
    }

    .footer-widget-2 {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        padding-bottom: 1.5rem;
        border-bottom: 0;
    }

    /* Row 1 下のボーダー */
    .footer-widget-3 {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .footer-widget-4 {
        grid-column: 1 / -1;
    }

    .footer-widget-5 {
        grid-column: 1 / -1;
    }
}

/* フッターウィジェット内テキスト色 */
.footer-widgets,
.footer-widgets a,
.footer-widgets p,
.footer-widgets span,
.footer-widgets li {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.9rem;
    line-height: 1.8;
}

.footer-widgets a {
    text-decoration: none;
}

.footer-widgets a:hover,
.footer-widgets a:focus-visible {
    text-decoration: underline;
}

/* ロゴテキスト */
.mc-footer__logo-text {
    color: var(--mc-white) !important;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

/* フッターナビメニュー横並び */
.footer-widget-2 .menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget-2 .menu li {
    list-style: none;
}

.footer-widget-2 .menu a {
    font-size: 0.875rem;
}

/* Row 2: 許可番号 */
.mc-footer__license {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

/* Row 3: 注釈 */
.footer-widget-4 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-widget-4 p {
    font-size: 0.85rem !important;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Row 4: ブランドエリア */
.mc-footer__brand {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.mc-footer__brand-left {
    display: grid;
    gap: 0.75rem;
}

.mc-footer__mirairo-logo {
    width: 9.5rem;
    height: auto;
}

.mc-footer__copy {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.mc-footer__sns {
    display: flex;
    gap: 0.75rem;
}

.mc-footer__sns a {
    display: grid;
    place-items: center;
    text-decoration: none !important;
}

.mc-footer__sns a:hover .mc-footer__line-icon,
.mc-footer__sns a:focus-visible .mc-footer__line-icon {
    opacity: 0.85;
}

/* LINEアイコン — SVGを子テーマに配置しCSSで参照（WPがウィジェットのSVGをサニタイズするため） */
/* 元SVG: width="36" height="36" background:#06C755 border-radius:8px padding:4px */
.mc-footer__line-icon {
    display: block;
    width: 36px;
    height: 36px;
    font-size: 0 !important;
    background-color: #06C755;
    background-image: url("images/line-icon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    border-radius: 8px;
    transition: opacity 0.2s;
}

/* GeneratePressデフォルトのフッターバー（コピーライト）非表示 */
.site-info .copyright-bar {
    display: none;
}

/* Widget padding 3 */
.footer-widget-3 {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}

.footer-widget-5 {
    padding-top: 0.5rem;
}

/* ============================================================
   10. Scroll Reveal Animation
   ============================================================ */
.mc-reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.mc-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   11. Focus & Accessibility
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--mc-focus);
    outline-offset: 4px;
    border-radius: 0.35rem;
}

/* ============================================================
   12. Utility
   ============================================================ */

/* ============================================================
   13. Responsive — Mobile First (min-width)
   ============================================================ */

/* --- モバイルデフォルト（〜500px相当） --- */
.mc-pc-br { display: none; }
.mc-sp-br { display: block; }

.mc-container,
.mc-hero__inner {
    width: min(100% - 2rem, var(--mc-container));
}

.site-header .inside-header {
    padding-inline: 1rem;
}

.mc-hero {
    min-height: auto;
    padding-block: 2rem;
    background-image:
        linear-gradient(180deg,
            rgba(246, 249, 255, 0.98) 0%,
            rgba(246, 249, 255, 0.92) 62%,
            rgba(246, 249, 255, 0.82) 100%),
        var(--mc-hero-bg-image);
}

.mc-hero__cta-wrap {
    align-items: stretch;
    flex-direction: column;
}

.mc-btn-primary,
.mc-btn-line {
    width: 100%;
    justify-content: space-between;
}

.mc-header__cta {
    display: none;
}

.mc-concern-pill:has(> .mc-concern-pill__icon),
.mc-concern-pill > .gb-inside-container,
.mc-concern-resolve:has(> .mc-concern-resolve__icon),
.mc-concern-resolve > .gb-inside-container {
    grid-template-columns: 1fr;
}

.mc-concern-pill__icon,
.mc-concern-resolve__icon {
    width: 100%;
    display: flex;
    justify-content: center;
}

.mc-concern-pill__icon img,
.mc-concern-resolve__icon img {
    width: 100%;
    max-width: 18rem;
    height: auto;
    object-fit: contain;
}

.mc-concern-pill {
    padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 3vw, 1.8rem);
}

/* モバイルではテーブルを縦積み */
.mc-news__table td {
    display: block;
    padding: 0.2rem 0;
}

.mc-line__inner:has(> .mc-line__text),
.mc-line__inner > .gb-inside-container {
    grid-template-columns: 1fr;
}

.mc-line__cta {
    justify-self: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (max-width: 599px) {
    .inside-footer-widgets {
        grid-template-columns: 1fr !important;
    }

    .footer-widget-2 {
        justify-self: start;
    }
}

/* --- 501px〜 --- */
@media (min-width: 501px) {
    :root {
        --mc-section-py: clamp(4rem, 8vw, 6.5rem);
    }

    .mc-pc-br { display: block; }
    .mc-sp-br { display: none; }

    .mc-container,
    .mc-hero__inner {
        width: min(100% - 3rem, var(--mc-container));
    }

    .site-header .inside-header {
        padding-inline: 1.5rem;
    }

    .mc-hero {
        min-height: clamp(34rem, 70vh, 40em);
        padding-block: clamp(2em, 9vw, 4rem);
        background-image:
            linear-gradient(90deg,
                rgba(246, 249, 255, 0.98) 0%,
                rgba(246, 249, 255, 0.90) 46%,
                rgba(246, 249, 255, 0.58) 100%),
            var(--mc-hero-bg-image);
    }

    .mc-news__table td {
        display: table-cell;
    }
}

/* --- 521px〜 --- */
@media (min-width: 521px) {
    .mc-hero__cta-wrap {
        align-items: center;
        flex-direction: row;
    }

    .mc-btn-primary,
    .mc-btn-line {
        width: auto;
    }

    .mc-header__cta {
        display: inline-flex;
    }

    .mc-concern-pill:has(> .mc-concern-pill__icon),
    .mc-concern-pill > .gb-inside-container,
    .mc-concern-resolve:has(> .mc-concern-resolve__icon),
    .mc-concern-resolve > .gb-inside-container {
        grid-template-columns: auto 1fr;
    }

    .mc-concern-pill__icon img {
        width: clamp(12rem, 14vw, 16rem);
    }

    .mc-concern-resolve__icon img {
        width: clamp(5.75rem, 12vw, 8.5rem);
        height: clamp(5.75rem, 12vw, 8.5rem);
    }

    .mc-concern-pill {
        padding: clamp(0rem, 1vw, 0.5rem) clamp(0.8rem, 3vw, 1.8rem);
    }
}

/* --- 901px〜 --- */
@media (min-width: 901px) {
    .mc-line__inner:has(> .mc-line__text),
    .mc-line__inner > .gb-inside-container {
        grid-template-columns: 1fr auto;
    }

    .mc-line__cta {
        justify-self: auto;
        width: auto;
        display: grid;
    }
}


/* ============================================================
   14. Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .mc-reveal,
    .mc-concern-pill {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   プライバシーマーク認定（元サイトの .mc-pm に合わせる）
   ============================================================ */
.mc-privacy-mark {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    color: var(--mc-text-sub);
    background: var(--mc-primary-soft);
    border: 1px solid var(--mc-border);
    border-radius: 0.75rem;
}
.mc-privacy-mark > .gb-inside-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.mc-privacy-mark__image {
    flex: 0 0 auto;
    margin: 0;
}
.mc-privacy-mark__image a {
    display: block;
}
.mc-privacy-mark__image img {
    display: block;
    width: auto;
    height: 3.75rem;
}
.mc-privacy-mark a:focus-visible {
    outline: 3px solid var(--mc-focus);
    outline-offset: 4px;
}
.mc-privacy-mark p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.95;
}
@media (min-width: 801px) {
    .mc-privacy-mark > .gb-inside-container {
        flex-direction: row;
        align-items: center;
    }
}