@charset "UTF-8";

/*=================================
  1. 変数（テーマカラー・基本設定）
=================================*/
:root {
    --color-bg: #05070a;
    --color-bg-secondary: #0a0c10;
    --color-text: #ffffff;
    --color-text-muted: #94a3b8;
    --color-accent: #3b82f6;
    /* Cyber Blue */
    --color-accent-glow: rgba(59, 130, 246, 0.5);
    --color-border: rgba(255, 255, 255, 0.1);
    --color-card-bg: rgba(255, 255, 255, 0.03);

    --font-primary: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Courier New", Courier, monospace;

    --container-width: 1200px;
    --header-height: 80px;
}

/*=================================
  2. リセット＆ベーススタイル
=================================*/
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.7;
    font-feature-settings: "palt";
    background-image:
        radial-gradient(circle at 50% 0%, #1e3a8a 0%, transparent 40%),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--color-accent);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

/*=================================
  3. ヘッダー・フッター・ナビゲーション
=================================*/
.site-header {
    height: var(--header-height);
    background: rgba(5, 7, 10, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    width: 32px;
    height: 32px;
    fill: var(--color-accent);
}

.logo-text {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--color-text);
    text-transform: uppercase;
}

.site-nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.site-nav a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    position: relative;
    padding: 0.5rem 0;
}

.site-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

.site-nav a:hover {
    color: var(--color-text);
}

.site-nav a:hover::after {
    width: 100%;
}

.breadcrumbs {
    padding: 1rem 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 0.5rem;
    color: var(--color-border);
    font-family: var(--font-mono);
}

.breadcrumbs a:hover {
    color: var(--color-accent);
}

.breadcrumbs li:last-child {
    color: var(--color-text);
    font-weight: 600;
}

.site-footer {
    border-top: 1px solid var(--color-border);
    padding: 3rem 0;
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
    background: var(--color-bg-secondary);
}

/*=================================
  4. トップページ・ポータル表示
=================================*/
.main-content {
    padding: 4rem 0;
    min-height: calc(100vh - var(--header-height) - 100px);
}

.page-header {
    margin-bottom: 3rem;
    animation: fadeIn 0.8s ease-out;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-subtitle {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

/* アプリグリッド＆カード */
.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* ★auto-fill に変更 */
    gap: 2rem;
}

.app-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(5px);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: fadeIn 0.5s ease;
}

.app-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.06), transparent 40%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.app-card:hover::before {
    opacity: 1;
}

.app-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 20px var(--color-accent-glow);
}

.app-card.hidden {
    display: none;
}

.card-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid var(--color-border);
    background: #000;
}

.card-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
    background-size: 200% 200%;
    animation: shine 6s infinite;
}

.card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.card-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

/* フィルターボタン */
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    justify-content: center;
}

.filter-btn {
    background-color: transparent;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    padding: 8px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.filter-btn.active, .filter-btn:hover {
    background-color: var(--color-accent);
    color: #fff;
}

/*=================================
  5. 共通UI（全アプリで使うパーツ）
=================================*/
/* アプリ本体の外枠 */
#in-app {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    background-color: #0f172a;
    border: 1px solid #334155;
    padding: 2.5rem;
    font-family: var(--font-primary);
    border-radius: 8px;
    /* 少し角丸に統一 */
}

#in-app .hidden {
    display: none !important;
}

/* 共通ボタン（CLICK・変換・生成など） */
.card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 2.5rem;
    background: transparent;
    color: var(--color-accent);
    font-size: 0.9rem;
    font-weight: bold;
    border: 1px solid var(--color-accent);
    transition: all 0.2s;
    text-transform: uppercase;
    cursor: pointer;
    align-self: center;
}

.card-link:hover:not(:disabled) {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 0 15px var(--color-accent-glow);
}

.card-link:disabled {
    border-color: #334155;
    color: #475569;
    cursor: not-allowed;
}

/* 共通アクションエリア */
.action-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    text-align: center;
}

#reset-btn {
    background: none;
    border: none;
    color: #94a3b8;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    margin-top: 1rem;
}

#reset-btn:hover {
    color: #f8fafc;
}

/* 共通フォーム入力要素 */
.setting-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.setting-group label, .group-label {
    font-size: 0.75rem;
    color: #60a5fa;
    font-family: var(--font-mono);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.setting-group input:not([type="checkbox"]):not([type="range"]), .setting-group select {
    width: 100%;
    background: #0f172a;
    border: 1px solid #334155;
    color: #f8fafc;
    padding: 0.8rem;
    font-size: 1rem;
    transition: 0.2s;
}

.setting-group input:focus, .setting-group select:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 10px var(--color-accent-glow);
}

/* 共通チェックボックス */
.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    color: #cbd5e1;
    font-size: 0.95rem;
}

.check-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
    margin: 0;
}

.checkbox-item label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    color: #cbd5e1;
    font-size: 0.9rem;
}

/* 共通SEOコンテンツエリア（以前は6回も書かれていたものをここに統合！） */
.seo-content-area {
    max-width: 850px;
    margin: 4rem auto 0;
    color: #cbd5e1;
    text-align: left;
}

.seo-content-area h2 {
    font-size: 1.5rem;
    color: #f8fafc;
    border-left: 4px solid var(--color-accent);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.seo-content-area p {
    line-height: 1.8;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid #334155;
    padding: 1.5rem;
    transition: 0.3s;
}

.feature-card:hover {
    border-color: var(--color-accent);
    background: rgba(59, 130, 246, 0.05);
}

.feature-card h3 {
    color: #60a5fa;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.feature-card p {
    margin-bottom: 0;
    font-size: 0.9rem;
    color: #94a3b8;
}



/*=================================
  アフィリエイト・PR枠 
=================================*/
/* アフィリエイト・PR枠 */
.ad-container {
    max-width: 850px;
    /* メインコンテンツの #in-app と同じ幅にする */
    margin: 3rem auto;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid #334155;
    /* 点線より実線の方が馴染みます */
    text-align: center;
}

/* 広告画像が枠からはみ出さないようにし、かつ中央に配置する */
.ad-container a img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.ad-label {
    display: inline-block;
    font-size: 0.75rem;
    color: #94a3b8;
    background: #1e293b;
    padding: 0.2rem 0.8rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* 広告フレックスレイアウト */
.ad-flex-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.ad-side-content {
    flex: 1;
    display: flex;
    align-items: center;
}

.ad-side-content.left {
    justify-content: flex-end;
    text-align: right;
}

.ad-side-content.right {
    justify-content: flex-start;
    text-align: left;
}

.ad-catch {
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.4;
    white-space: nowrap;
}

.ad-catch .highlight {
    color: var(--color-accent);
    font-size: 1.1rem;
}

.ad-main-unit {
    flex: 0 0 300px;
    /* バナーの幅を300pxに固定 */
}

/* 広告メッセージエリア */
.ad-message-area {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ad-main-message {
    font-size: 1.1rem;
    font-weight: 700;
    color: #60a5fa;
    /* 少し明るい青で目を引く */
    margin-bottom: 10px;
}

.ad-sub-message {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

/* 枠幅の調整（コンテンツ幅に合わせる） */
.ad-container {
    max-width: 850px;
    /* #in-app の幅と統一 */
    margin: 4rem auto;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #334155;
    padding: 2rem;
}

/* スマホ表示の調整（画面幅768px未満） */
@media (max-width: 767px) {
    .ad-flex-layout {
        flex-direction: column;
        /* 縦並びに戻す */
        gap: 10px;
    }

    .ad-side-content {
        justify-content: center !important;
        text-align: center !important;
    }

    .ad-catch br {
        display: none;
    }

    /* スマホでは改行を解除して1行に */
}

.site-disclosure {
    border-bottom: 1px dashed #1e293b;
    width: 100%;
}

.disclosure-inner {
    max-width: 850px;
    margin: 0 auto;
    padding: 0.6rem 1rem;
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: right;
}

/*=================================
  6. 各ツールの専用スタイル
=================================*/
/* --- 画像処理ツール（App 1, 2） --- */
.drop-zone {
    border: 2px dashed var(--color-accent);
    background-color: rgba(15, 23, 42, 0.6);
    padding: 4rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.drop-zone:hover, .drop-zone.dragover {
    border-color: #60a5fa;
    background-color: rgba(59, 130, 246, 0.1);
}

.upload-icon {
    width: 48px;
    height: 48px;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.drop-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f8fafc;
}

.drop-subtext {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 0.5rem;
    display: block;
}

.drop-zone * {
    pointer-events: none;
}

/* App 1 プログレス＆結果 */
#progress-container, #result-container {
    padding: 3rem 2rem;
    background-color: #1e293b;
    border: 1px solid #334155;
    text-align: center;
    margin-bottom: 1.5rem;
}

.status-header {
    margin-bottom: 1.5rem;
    font-family: var(--font-mono);
    color: #60a5fa;
    font-weight: bold;
}

.progress-bar-bg {
    width: 100%;
    height: 4px;
    background-color: #334155;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background-color: var(--color-accent);
    transition: width 0.2s ease;
}

.result-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-box {
    padding: 1.5rem;
    border: 1px solid #334155;
    background: #0f172a;
    min-width: 160px;
}

.stat-box.highlight {
    border-color: var(--color-accent);
    background: rgba(59, 130, 246, 0.1);
}

.stat-label {
    font-size: 0.75rem;
    color: #94a3b8;
    font-family: var(--font-mono);
    margin-bottom: 0.5rem;
    display: block;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

/* App 1, 2 リスト＆テーブル */
.file-list-container {
    max-height: 200px;
    overflow-y: auto;
    background: #0f172a;
    border: 1px solid #334155;
    margin-bottom: 1.5rem;
    text-align: left;
}

.file-list {
    list-style: none;
}

.file-list li {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #1e293b;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
}

.file-reduction {
    color: #60a5fa;
    font-weight: bold;
}

.rename-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid #1e293b;
}

.preview-table-wrapper {
    max-height: 400px;
    overflow-y: auto;
    margin: 1.5rem 0 2.5rem;
    border: 1px solid #334155;
    background: #0f172a;
}

.preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.preview-table th {
    position: sticky;
    top: 0;
    background: #1e293b;
    padding: 1rem;
    color: #60a5fa;
    font-family: var(--font-mono);
    border-bottom: 2px solid #334155;
}

.preview-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #1e293b;
    color: #cbd5e1;
}

/* --- テキスト＆パスワードツール（App 3, 5） --- */
.convert-options, .password-settings {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid #1e293b;
}

.text-area-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .text-area-grid {
        grid-template-columns: 1fr;
    }
}

textarea {
    width: 100%;
    height: 300px;
    background: #0a0c10;
    border: 1px solid #334155;
    color: #f8fafc;
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: none;
    font-family: inherit;
}

textarea:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 10px var(--color-accent-glow);
}

.password-display-area {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

#generated-password {
    flex-grow: 1;
    background: #0a0c10;
    border: 2px solid var(--color-accent);
    color: #60a5fa;
    padding: 1rem;
    font-size: 1.5rem;
    font-family: var(--font-mono);
    text-align: center;
    outline: none;
}

.icon-btn {
    background: #1e293b;
    border: 1px solid #334155;
    color: #f8fafc;
    padding: 0 1.5rem;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
    white-space: nowrap;
}

.icon-btn:hover {
    background: #334155;
    border-color: #60a5fa;
}

.icon-btn.success {
    background: #10b981;
    border-color: #059669;
    color: #ffffff;
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--color-accent);
    cursor: pointer;
    margin-top: -8px;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #334155;
    border-radius: 2px;
}

/* --- QRコードツール（App 4） --- */
.wifi-settings {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid #1e293b;
}

.qr-output-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

#qrcode {
    padding: 1rem;
    background: #ffffff;
    border: 4px solid var(--color-accent);
    max-width: 200px;
    width: 100%;
    margin: 0 auto;
}

#qrcode img {
    width: 100% !important;
    height: auto !important;
}

.qr-notice {
    font-size: 0.85rem;
    color: #94a3b8;
    text-align: center;
}

/* --- AI口コミ作成アシスト（App 6〜9） --- */
.step-guide {
    color: #60a5fa;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--color-accent);
    padding-left: 0.8rem;
}

.keyword-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.keyword-btn {
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    padding: 0.8rem 1.2rem;
    border-radius: 30px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: 0.2s;
}

.keyword-btn.active {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--color-accent);
    color: #60a5fa;
    box-shadow: 0 0 10px var(--color-accent-glow);
}

.ai-btn {
    background: var(--color-accent);
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.ai-btn:disabled {
    background: #334155;
    color: #94a3b8;
    cursor: not-allowed;
}

#generated-review {
    width: 100%;
    height: 150px;
    background: #0a0c10;
    border: 2px solid #334155;
    color: #f8fafc;
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.6;
    border-radius: 8px;
    resize: vertical;
}

/* アニメーション */
@keyframes shine {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*=================================
  7. スマホ向け共通レスポンシブ調整（全アプリ適用）
=================================*/
@media screen and (max-width: 768px) {

    /* H1ページタイトルのサイズ調整 */
    .page-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.8rem !important;
    }

    .page-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* ★画面両端の余白を極限まで減らして画面幅をフルに使う */
    .container {
        padding: 0 0.5rem !important;
    }

    /* ★アプリ共通の外枠（#in-app）の内側余白をさらに削る */
    #in-app {
        padding: 1.2rem 0.8rem !important;
        border-radius: 6px !important;
    }

    /* 広告枠のスマホ余白調整 */
    .ad-container {
        padding: 1.2rem 0.8rem !important;
    }

    /* アプリ内の入力要素などの共通余白も少し詰めてスッキリさせる */
    .setting-group input,
    .setting-group select,
    .input-control {
        font-size: 1rem !important;
        padding: 0.6rem 0.8rem !important;
    }
}

.center {
    text-align: center;
}

.thumb-app {
    margin-bottom: 1.5rem;
}

/* =========================================
   Utility & Component Classes (Migrated)
========================================= */
.c-qr-preview-box {
    background: #ffffff;
    padding: 25px;
    display: inline-block;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.c-panel-box-md {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid #334155;
    padding: 1.5rem;
    border-radius: 8px;
}

.c-panel-box-lg {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid #334155;
    padding: 2rem;
    border-radius: 8px;
}

.c-bg-light.u-mb-15px {
    background: #ecf0f1;
    color: #333;
    margin-bottom: 15px;
}

.c-border-top-dashed.u-pt-1-5rem {
    border-top: 1px dashed #334155;
    padding-top: 1.5rem;
}

.u-text-accent.u-fs-1-1rem {
    color: #60a5fa;
    font-size: 1.1rem;
}

.u-text-accent.u-mb-0-8rem.u-fs-1-1rem {
    color: #60a5fa;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.u-text-muted.u-fs-0-8rem.u-mb-2rem {
    color: #94a3b8;
    font-size: 0.8rem;
    margin-bottom: 2rem;
}

.u-text-muted.u-mb-2rem {
    color: #94a3b8;
    margin-bottom: 2rem;
}

.u-text-muted.u-mb-2rem.u-font-mono {
    color: #94a3b8;
    margin-bottom: 2rem;
    font-family: monospace;
}

.u-text-light.u-fs-0-95rem {
    color: #cbd5e1;
    font-size: 0.95rem;
}

.u-text-lighter.u-fs-0-9rem.u-mb-1-5rem {
    color: #e2e8f0;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.u-text-red.u-fs-1-1rem {
    color: #ef4444;
    font-size: 1.1rem;
}

.u-text-white.u-fw-bold {
    color: #fff;
    font-weight: bold;
}

.u-text-primary {
    color: #3b82f6
}

.u-text-accent {
    color: #60a5fa;
}

.u-text-muted {
    color: #94a3b8
}

.u-text-white.u-mb-10px.u-fs-1-1rem {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.c-grid-240 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.c-grid-280 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.c-btn-inline {
    display: inline-block;
    width: auto;
    padding: 12px 30px;
    font-size: 1rem;
}

.u-display-none {
    display: none;
}

.c-hidden-panel {
    display: none;
    margin-top: 2rem;
    text-align: center;
    padding-top: 2rem;
    border-top: 1px dashed #334155;
}

.u-display-block.u-mb-10px.u-text-accent.u-fw-bold {
    display: block;
    margin-bottom: 10px;
    color: #60a5fa;
    font-weight: bold;
}

.u-fs-0-85rem {
    font-size: 0.85rem;
}

.u-fs-0-85rem.u-text-muted.u-mt-8px {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 8px;
}

.u-fs-0-9rem.u-text-muted {
    font-size: 0.9rem;
    color: #94a3b8;
}

.c-heading-bordered {
    font-size: 1.5rem;
    color: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

.u-fs-1rem.u-text-muted.u-ml-10px {
    font-size: 1rem;
    color: #94a3b8;
    margin-left: 10px;
}

.u-fs-2rem {
    font-size: 2rem;
}

.u-fs-3-5rem.u-pointer-none {
    font-size: 3.5rem;
    pointer-events: none;
}

.u-fs-0-85rem {
    font-size: 0.85rem;
}

.u-fw-bold.u-text-white {
    font-weight: bold;
    color: #f8fafc
}

.u-fw-bold.u-text-white {
    font-weight: bold;
    color: #fff;
}

.u-lh-1-8.u-mb-2rem.u-fs-0-95rem {
    line-height: 1.8;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.u-lh-1-8.u-pl-1-5rem.u-m-0 {
    line-height: 1.8;
    padding-left: 1.5rem;
    margin: 0;
}

.u-m-0.u-fs-0-9rem.u-text-muted.u-lh-1-6 {
    margin: 0;
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.6;
}

.u-mb-1-5rem {
    margin-bottom: 1.5rem;
}

.u-mb-10px {
    margin-bottom: 10px;
}

.u-mb-2rem {
    margin-bottom: 2rem;
}

.u-mt-1-5rem {
    margin-top: 1.5rem;
}

.u-mt-1rem {
    margin-top: 1rem;
}

.u-mt-2rem {
    margin-top: 2rem;
}

.u-mt-3rem {
    margin-top: 3rem;
}

.c-container-600 {
    max-width: 600px;
    margin: 0 auto;
}

.c-container-600-panel {
    max-width: 600px;
    margin: 0 auto;
    padding: 2.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #334155;
    border-radius: 8px;
}

.c-seo-area-800 {
    max-width: 800px;
    margin: 3rem auto 3rem;
    color: #cbd5e1;
    text-align: left;
}

.c-seo-area-800-alt {
    max-width: 800px;
    margin: 4rem auto 2rem;
    color: #cbd5e1;
    text-align: left;
}

.c-seo-area-900 {
    max-width: 900px;
    margin: 0 auto 3rem;
    color: #cbd5e1;
    text-align: left;
}

.c-seo-area-900-alt {
    max-width: 900px;
    margin: 4rem auto 2rem;
    color: #cbd5e1;
    text-align: left;
}

.u-min-w-100 {
    min-width: 100px;
}

.u-min-w-120 {
    min-width: 120px;
}

.u-min-w-200 {
    min-width: 200px;
}

.u-min-w-300 {
    min-width: 300px;
}

.u-overflow-x-auto {
    overflow-x: auto;
}

.u-p-0 {
    padding: 0;
}

.u-text-center {
    text-align: center;
}

.u-text-center.u-mb-2rem {
    text-align: center;
    margin-bottom: 2rem;
}

.u-text-center.u-mt-1-5rem {
    text-align: center;
    margin-top: 1.5rem;
}

.u-text-right {
    text-align: right;
}

.c-status-message-box {
    text-align: center;
    padding: 20px;
    color: #60a5fa;
    display: none;
    font-weight: bold;
}

.c-btn-full-primary {
    width: 100%;
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 1.1rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.c-img-cover-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.u-w-full.u-mt-1rem {
    width: 100%;
    margin-top: 1rem;
}

.c-input-full {
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #3b82f6;
    color: #fff;
    border-radius: 4px;
    font-size: 1.1rem;
}

.c-input-full-pointer {
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #3b82f6;
    color: #fff;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

.u-w-full.u-display-none.u-mb-20px {
    width: 100%;
    display: none;
    margin-bottom: 20px;
}

.c-iframe-container {
    width: 100%;
    max-width: 900px;
    border-radius: 8px;
    border: 1px solid #334155;
}

/* =========================================
  独自追加
========================================= */
/*PCのみ表示*/
.pcView {
    display: block;
}

@media (max-width: 600px) {
    .pcView {
        display: none;
    }
}