/* 全体のスタイル */
body {
    background-color: #f8f9fa;
    color: #333;
}

.container {
    max-width: 1200px;
    padding: 2rem 1rem;
}

/* ヘッダーロゴ */
.site-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
    flex-wrap: wrap;
}

.site-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.site-header h1 {
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    height: auto;
    word-break: break-word;
    text-align: center;
}

/* アップロードエリア */
.upload-area {
    border: 3px dashed #dee2e6;
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #0d6efd;
    background-color: #f8f9fa;
    transform: translateY(-2px);
}

.upload-area.dragover {
    border-color: #0d6efd;
    background-color: #e7f0ff;
}

/* 特徴カード */
.feature-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    height: 100%;
    margin-bottom: 1rem;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 2.5rem;
    color: #0d6efd;
    margin-bottom: 0.75rem;
}

.feature-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.feature-card p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0;
}

/* エディター部分 */
.editor-section {
    background: #f8f9fa;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: none;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* キャンバスコンテナ */
.canvas-container {
    background: transparent;
    border: none;
    border-radius: 8px;
    margin: 1.5rem 1rem 1rem;
    width: calc(100% - 2rem) !important;
    height: auto !important;
    aspect-ratio: 16/9;
    min-height: 400px !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
}

.canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border: none !important;
}

/* 編集図形のスタイル */
.canvas-container .shape-control {
    border: 2px solid #0d6efd;
    background-color: rgba(13, 110, 253, 0.2);
}

.canvas-container .shape-control:hover {
    border-color: #0a58ca;
    background-color: rgba(13, 110, 253, 0.3);
}

/* 回転・リサイズハンドルのスタイル */
.canvas-container .corner {
    background-color: #ffffff !important;
    border: 2px solid #0d6efd !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
}

.canvas-container .corner:hover {
    background-color: #f8f9fa !important;
    border-color: #0a58ca !important;
    transform: scale(1.1);
}

/* デバッグ・ステータス情報エリア */
.debug-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    margin: 0.5rem 1rem 1rem;
    font-family: monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    height: 80px;
    overflow-y: auto;
    color: #333;
}

.status-info {
    background: #e7f0ff;
    border: 1px solid #b6d4fe;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 1rem;
    font-size: 0.9rem;
    color: #084298;
    line-height: 1.4;
}

/* ツールバー */
.toolbar {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* アスペクト比セレクター */
.aspect-ratio-selector {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e9ecef;
}

/* ファイル形式セレクター */
.file-format-selector {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e9ecef;
}

/* 切り抜きサイズセレクター */
.crop-size-selector {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e9ecef;
}

.size-input {
    width: 70px;
    text-align: center;
}

.lock-icon {
    font-size: 1.2rem;
    color: #6c757d;
    cursor: pointer;
    user-select: none;
}

/* 「画像選択に戻る」ボタンのゴーストスタイル */
.back-to-select-button {
    background-color: transparent !important;
    color: #6c757d !important;
    border: 1px solid #dee2e6 !important;
    font-weight: normal !important;
}

.back-to-select-button:hover {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border-color: #adb5bd !important;
}

/* ボタンのスタイル改善 */
.btn-group .btn {
    border-radius: 6px !important;
    margin: 0 2px;
    font-weight: 500;
}

.btn-group .btn:first-child {
    margin-left: 0;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

.btn-group {
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.toolbar button {
    min-width: 100px;
    padding: 0.5rem 1rem;
}

.toolbar button.active {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
}

/* アクションボタン */
.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 1rem;
    background: #ffffff;
    border-radius: 0 0 16px 16px;
}

/* 使い方ガイド */
.guide-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.step {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.step-number {
    background: #0d6efd;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

/* アクセシビリティ対応 */
.btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* アニメーション */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.feature-card, .step {
    animation: fadeIn 0.6s ease-out forwards;
}

/* ローディングスピナー */
.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    z-index: 1000;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    
    /* ヘッダー部分 */
    .site-header {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .site-header h1 {
        font-size: 1.5rem;
        line-height: 1.2;
        text-align: center;
        width: 100%;
    }
    
    /* 特徴カード */
    .feature-card {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .feature-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    /* コンテンツセクション */
    .content-section {
        padding: 0;
        margin-bottom: 2rem;
    }
    
    /* アップロードエリア */
    .upload-area {
        padding: 2rem 1rem;
    }
    
    /* キャンバス */
    .canvas-container {
        aspect-ratio: 4/3;
        min-height: 300px !important;
        margin: 0.5rem;
    }
    
    /* デバッグ情報 */
    .debug-info {
        height: 60px;
        margin: 0.5rem;
    }
    
    /* ツールバー */
    .toolbar {
        padding: 0.5rem;
    }
    
    .toolbar button {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
        min-width: 80px;
    }
    
    /* ガイドステップ */
    .guide-steps {
        gap: 2.5rem;
    }
    
    /* フッター */
    footer {
        padding: 2rem 1rem !important;
    }
}

/* 小さいスマホ向け調整 */
@media (max-width: 576px) {
    .toolbar .btn-group {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .action-buttons button {
        width: 100%;
    }
    
    .upload-area {
        padding: 1.5rem 1rem;
    }
    
    .site-logo {
        width: 40px;
        height: 40px;
    }
    
    .site-header h1 {
        font-size: 1.3rem;
    }
    
    .language-switcher {
        top: 0.5rem;
        right: 0.5rem;
    }
    
    .language-switcher .btn-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* 言語切り替えメニュー */
.language-switcher {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}

.language-switcher .btn-link {
    color: #333;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.language-switcher .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

.language-switcher .dropdown-item.active {
    background-color: #0d6efd;
    color: #ffffff;
}

/* アラビア語用のRTLサポート */
[lang="ar"] {
    direction: rtl;
    text-align: right;
}

[lang="ar"] .site-header {
    flex-direction: row-reverse;
}

[lang="ar"] .toolbar,
[lang="ar"] .action-buttons {
    flex-direction: row-reverse;
}

/* 新機能用スタイル */
/* 操作ガイド */
.operation-guide {
    background: #e3f2fd;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border-left: 4px solid #2196f3;
    margin-bottom: 1rem;
}

.guide-steps-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1976d2;
}

.guide-step {
    background: #ffffff;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    border: 1px solid #bbdefb;
}

.guide-arrow {
    color: #1976d2;
    font-weight: bold;
}

/* アスペクト比セレクター */
.aspect-ratio-selector {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.aspect-ratio-selector .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    display: block;
}

.aspect-ratio-selector .btn-group-sm {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.aspect-ratio-selector .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* ファイル形式セレクター */
.file-format-selector {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 1rem;
}

.file-format-selector .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    display: block;
}

.file-format-selector .btn-group-sm {
    display: flex;
    gap: 0.3rem;
}

.file-format-selector .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .guide-steps-inline {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .guide-arrow {
        transform: rotate(90deg);
    }
    
    .aspect-ratio-selector .btn-group-sm,
    .file-format-selector .btn-group-sm {
        justify-content: center;
    }
}
/* ===== SEOコンテンツ（intro / 用途別 / FAQ） ===== */
.site-intro {
    max-width: 680px;
    margin: 0 auto 48px;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.9;
    text-align: center;
}

.usecase-card {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.usecase-card:hover {
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.08);
    transform: translateY(-2px);
}

.usecase-card h3 {
    color: #0d6efd;
    margin-bottom: 0.5rem;
}

.usecase-card p {
    color: #555;
    line-height: 1.7;
    font-size: 0.95rem;
}

.faq-section .accordion-button {
    font-weight: 600;
    color: #2c3e50;
}

.faq-section .accordion-button:not(.collapsed) {
    background-color: #eef4ff;
    color: #0d6efd;
}

.faq-section .accordion-body {
    color: #555;
    line-height: 1.75;
}

/* RTL（アラビア語）でのintro・カードの整列 */
[dir="rtl"] .usecase-card,
[dir="rtl"] .faq-section .accordion-body {
    text-align: right;
}

.usecase-link {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0d6efd;
    text-decoration: none;
}
.usecase-link:hover { text-decoration: underline; }

/* ==========================================================================
   Refined design (2026) — Claude Design ベースの洗練リニューアル
   トップページ／ツール一覧の見た目を刷新。エディタ機能のクラスは温存。
   ========================================================================== */
:root{
  --blue:#2563eb;
  --blue-bright:#2f6bf0;
  --green:#10b981;
  --purple:#8b5cf6;
  --amber:#f59e0b;
  --ink:#1e293b;
  --ink-soft:#334155;
  --muted:#64748b;
  --muted-light:#94a3b8;
  --line:#e7ebf3;
  --bg-top:#eef3fc;
  --bg-bot:#f7f9fc;
}

body{
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bot) 30%,#fbfcfe 100%);
  background-attachment:fixed;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- 装飾背景 ---------- */
.deco{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.deco span{position:absolute;display:block;}
.blob-tl{width:240px;height:240px;left:-90px;top:-70px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#d6e4ff,#e7eeff);opacity:.7;}
.blob-br{width:380px;height:380px;right:-120px;bottom:-120px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#d6f4e4,#e8faf0);opacity:.65;}
.dots-tr{width:150px;height:120px;right:60px;top:90px;
  background-image:radial-gradient(var(--blue) 1.7px,transparent 1.7px);
  background-size:15px 15px;opacity:.16;}
.dots-r{width:90px;height:90px;right:30px;top:360px;
  background-image:radial-gradient(var(--green) 1.7px,transparent 1.7px);
  background-size:15px 15px;opacity:.18;}
.arc{width:300px;height:300px;left:-150px;bottom:120px;border-radius:50%;
  border:2px solid #cfe0fb;opacity:.5;}
.arc::before,.arc::after{content:"";position:absolute;border-radius:50%;border:2px solid #cfe0fb;}
.arc::before{inset:34px;}
.arc::after{inset:68px;}

/* ---------- レイアウト ---------- */
.wrap{max-width:1140px;margin:0 auto;padding:0 28px;position:relative;z-index:1;}
.site-main{padding:56px 0 64px;}
.content-col{width:100%;}
.block{margin-bottom:64px;}

/* ---------- ヘッダーバー ---------- */
.app-header{position:relative;z-index:2;background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(226,232,240,.7);}
.head-inner{display:flex;align-items:center;gap:18px;padding:18px 28px;}
.logo-mark{width:46px;height:46px;border-radius:13px;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(30,35,48,.28);}
.logo-mark img{width:100%;height:100%;display:block;}
.brand-title{font-size:21px;font-weight:700;letter-spacing:.01em;color:#222b3a;
  flex:1;margin:0;line-height:1.35;}

/* 言語スイッチャー（ヘッダー内へ移設） */
.language-switcher{position:static;top:auto;right:auto;flex:0 0 auto;z-index:2;}
.language-switcher .lang{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  background:#fff;border:1px solid var(--line);border-radius:9px;
  font-size:14px;color:var(--ink-soft);cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.04);text-decoration:none;}
.language-switcher .lang::after{margin-left:2px;color:var(--muted-light);}
.language-switcher .dropdown-menu{max-height:320px;overflow-y:auto;border-radius:10px;
  border:1px solid var(--line);box-shadow:0 12px 30px rgba(15,23,42,.12);}
.language-switcher .dropdown-item.active{background-color:var(--blue);color:#fff;}

/* ---------- セクション見出し ---------- */
.sec-head{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;
  color:#222b3a;margin:0 0 26px;}
.sec-head i{font-size:20px;width:24px;text-align:center;}

/* ---------- 特徴カード ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.feature{position:relative;text-align:center;padding:38px 28px 34px;
  border:1px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:0 8px 24px rgba(30,41,59,.05);
  transition:transform .18s ease,box-shadow .18s ease;
  animation:fadeIn .6s ease-out forwards;}
.feature:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(30,41,59,.09);}
.feature.c-blue{background:linear-gradient(180deg,#fff 55%,#f1f6ff 100%);}
.feature.c-green{background:linear-gradient(180deg,#fff 55%,#f0fbf5 100%);}
.feature.c-purple{background:linear-gradient(180deg,#fff 55%,#f6f3ff 100%);}
.feature .ic{width:52px;height:52px;margin:0 auto 20px;display:flex;
  align-items:center;justify-content:center;}
.feature .ic i{font-size:40px;}
.feature.c-blue .ic i{color:var(--blue);}
.feature.c-green .ic i{color:var(--green);}
.feature.c-purple .ic i{color:var(--purple);}
.feature h3{font-size:18px;font-weight:700;color:#222b3a;margin-bottom:13px;}
.feature p{font-size:14px;color:var(--muted);line-height:1.85;margin:0;}

/* ---------- ドロップゾーン ---------- */
.upload-area.dropzone{border:2px dashed #b9cdf2;border-radius:20px;
  background:rgba(255,255,255,.55);padding:62px 30px;text-align:center;cursor:pointer;
  transition:border-color .18s,background .18s,transform .18s;}
.upload-area.dropzone:hover{border-color:var(--blue);background:rgba(239,244,255,.7);
  transform:translateY(-2px);}
.upload-area.dropzone.dragover{border-color:var(--blue);background:rgba(231,240,255,.9);}
.upload-area.dropzone .upload-content{position:relative;z-index:1;}
.dz-ic{width:78px;height:78px;border-radius:50%;margin:0 auto 22px;
  background:radial-gradient(circle at 50% 40%,#e4edff,#eef3fe);
  display:flex;align-items:center;justify-content:center;}
.dz-ic i{font-size:32px;color:var(--blue);}
.dz-title{font-size:21px;font-weight:700;color:#2b3343;margin-bottom:8px;}
.dz-or{font-size:14px;color:var(--muted-light);margin-bottom:20px;}
.btn-cta{display:inline-flex;align-items:center;gap:8px;
  background:var(--blue-bright);color:#fff;border:none;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;padding:13px 30px;border-radius:10px;
  box-shadow:0 8px 18px rgba(47,107,240,.32);transition:background .15s,transform .15s;}
.btn-cta:hover{background:#2257d6;transform:translateY(-1px);color:#fff;}

/* ---------- 使い方ガイド ---------- */
.guide{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.guide .step{position:relative;display:flex;gap:20px;padding:26px 26px 26px 24px;
  border:1px solid var(--line);border-radius:16px;background:#fff;text-align:left;
  box-shadow:0 6px 18px rgba(30,41,59,.04);
  animation:fadeIn .6s ease-out forwards;}
.guide .badge-wrap{position:relative;flex:0 0 auto;}
.guide .num{position:absolute;top:-9px;left:-9px;width:26px;height:26px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 2px 6px rgba(37,99,235,.4);border:2px solid #fff;
  transform:none;position:absolute;}
.guide .step .ic{width:62px;height:62px;border-radius:15px;display:flex;
  align-items:center;justify-content:center;margin:0;}
.guide .step .ic i{font-size:26px;}
.guide .s-blue .ic{background:#eaf1fe;}.guide .s-blue .ic i{color:var(--blue);}
.guide .s-green .ic{background:#e8f8f0;}.guide .s-green .ic i{color:var(--green);}
.guide .s-purple .ic{background:#f1ecfe;}.guide .s-purple .ic i{color:var(--purple);}
.guide .s-amber .ic{background:#fef3e0;}.guide .s-amber .ic i{color:var(--amber);}
.guide .step h3{font-size:16px;font-weight:700;color:#2b3343;margin-bottom:9px;}
.guide .step p{font-size:13.5px;color:var(--muted);line-height:1.85;margin:0;}

/* ---------- フッター ---------- */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--line);
  background:rgba(255,255,255,.6);backdrop-filter:blur(6px);
  padding:36px 0 28px;text-align:center;margin-top:24px;}
.site-footer .foot-row{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;color:var(--ink-soft);margin-bottom:11px;flex-wrap:wrap;}
.site-footer .foot-row i{color:var(--muted-light);}
.site-footer .foot-row .lbl{font-weight:700;color:#2b3343;}
.site-footer .foot-row a,.site-footer .foot-link{color:var(--blue);
  text-decoration:none;white-space:nowrap;}
.site-footer .foot-row a:hover,.site-footer .foot-link:hover{text-decoration:underline;}
.site-footer .foot-link{display:inline-block;font-size:14px;margin:6px 0 18px;}
.site-footer .copy{font-size:13px;color:var(--muted-light);}

/* ---------- SEO セクションをトーンに合わせる ---------- */
.usecase-card{border-color:var(--line);border-radius:14px;}
.usecase-card h3{color:var(--blue);}
.faq-section .accordion{border-radius:14px;overflow:hidden;border:1px solid var(--line);}
.faq-section .accordion-item{border-color:var(--line);}
.faq-section .accordion-button:not(.collapsed){background-color:#eef4ff;color:var(--blue);}
.faq-section .accordion-button:focus{box-shadow:0 0 0 .2rem rgba(37,99,235,.18);}

/* ---------- ツール一覧カード ---------- */
.tool-card{border:1px solid var(--line)!important;border-radius:16px!important;
  background:#fff;box-shadow:0 8px 24px rgba(30,41,59,.05);
  transition:transform .18s ease,box-shadow .18s ease;}
.tool-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(30,41,59,.09)!important;}
.tool-card h3{color:#222b3a;}
.tool-icon{color:var(--blue);}

/* ---------- レスポンシブ ---------- */
@media (max-width:880px){
  .features{grid-template-columns:1fr;}
  .guide{grid-template-columns:1fr;}
  .brand-title{font-size:17px;}
}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  .head-inner{gap:12px;padding:14px 18px;}
  .logo-mark{width:40px;height:40px;border-radius:11px;}
  .brand-title{font-size:15px;}
  .language-switcher .lang{padding:7px 11px;font-size:13px;}
  .upload-area.dropzone{padding:46px 18px;}
  .dz-title{font-size:18px;}
  .sec-head{font-size:18px;}
}

/* ---------- RTL（アラビア語） ---------- */
[dir="rtl"] .head-inner{flex-direction:row-reverse;}
[dir="rtl"] .guide .step{text-align:right;}
[dir="rtl"] .guide .num{left:auto;right:-9px;}
[dir="rtl"] .sec-head,[dir="rtl"] .feature,[dir="rtl"] .site-footer .foot-row{direction:rtl;}

/* ===== 画像編集画面（Claude Design ベースのUI） ===== */
/* 上段: ステップ + ヒント（全幅・横並び）。編集エリアを広く取るため
   左カラムをここへ移設した。 */
.ce-topbar{display:flex;gap:18px;align-items:stretch;margin:0 0 18px;}
/* min-width:0 を付けないと flex 子要素が内容幅で固定され、はみ出す */
.ce-topbar .ce-stepper-h{flex:1 1 auto;min-width:0;}
.ce-topbar .ce-hint-inline{flex:0 1 280px;min-width:0;margin-top:0;}

/* 下段: 画像編集エリア（広）+ 形状/サイズの2カラム */
.cropper-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:22px;align-items:start;margin:0;
}
.ce-panel{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 6px 20px rgba(30,41,59,.05);
}
.ce-panel-pad{padding:22px 20px;}
.ce-panel-title{font-size:15px;font-weight:700;color:#2b3343;margin-bottom:16px;}

/* 左: ステッパー */
.ce-stepper{padding:18px 16px;position:relative;}
.ce-step{display:flex;gap:13px;align-items:center;padding:9px 10px;border-radius:11px;}
.ce-step.active{background:#f3f7ff;}
.ce-dot{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  background:#fff;border:2px solid #d3dbe8;color:var(--muted-light);}
.ce-step.done .ce-dot{background:var(--blue);border-color:var(--blue);color:#fff;}
.ce-step.active .ce-dot{border-color:var(--blue);color:var(--blue);}
.ce-dot i{font-size:12px;}
.ce-step-txt h4{font-size:14px;font-weight:700;color:#475569;line-height:1.4;margin:0;}
.ce-step.done .ce-step-txt h4,.ce-step.active .ce-step-txt h4{color:var(--blue);}
.ce-step-line{display:block;width:2px;height:13px;margin:1px 0 1px 25px;border-left:2px dashed #d8dfeb;}

/* 横並びステッパー（上段バー用）。縦並びの基本スタイルを横向きに上書き。
   幅が足りないときはステップが縮んでラベルが折り返し、パネルからはみ出さない。 */
.ce-stepper-h{display:flex;align-items:center;padding:14px 18px;min-width:0;}
.ce-stepper-h .ce-step{flex:0 1 auto;min-width:0;padding:8px 8px;}
.ce-stepper-h .ce-step-txt{min-width:0;}
.ce-stepper-h .ce-step-txt h4{font-size:13.5px;white-space:normal;overflow-wrap:break-word;}
.ce-stepper-h .ce-step-line{width:auto;height:0;flex:1 1 8px;min-width:8px;
  margin:0 4px;border-left:none;border-top:2px dashed #d8dfeb;align-self:center;}

/* ヒント（上段バー内・縦中央寄せ） */
.ce-hint{margin-top:18px;padding:18px 16px;}
.ce-hint-inline{display:flex;flex-direction:column;justify-content:center;}
.ce-hint-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#2b3343;margin-bottom:8px;}
.ce-hint-head i{color:var(--amber);}
.ce-hint p{font-size:13px;color:var(--muted);line-height:1.8;margin:0;}

/* 中央 */
.cropper-center{display:flex;flex-direction:column;gap:18px;}
.ce-canvas-card{padding:16px;}
.cropper .toolbar.ce-toolbar{
  background:transparent;box-shadow:none;padding:0;margin:0 0 14px;border-radius:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.ce-tb-group{display:flex;align-items:center;gap:10px;}
.cropper .toolbar.ce-toolbar .ce-tb-btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:9px;
  font-size:13.5px;font-weight:500;color:var(--ink-soft);
  box-shadow:0 1px 2px rgba(15,23,42,.04);transition:background .14s,border-color .14s;}
.cropper .toolbar.ce-toolbar .ce-tb-btn:hover{background:#f6f8fc;border-color:#d3dbe8;}
.cropper .toolbar.ce-toolbar .ce-tb-btn i{color:var(--muted);font-size:14px;}
.cropper .status-info.ce-status{
  background:#eef4ff;border:1px solid #d9e6fb;color:#2b4f8e;
  border-radius:8px;padding:7px 13px;margin:0;font-size:12.5px;font-weight:500;
  line-height:1.4;max-width:62%;text-align:right;}

/* キャンバス（透過チェッカーボード） */
.cropper .canvas-container{
  margin:0 !important;width:100% !important;height:clamp(380px,64vh,680px) !important;
  min-height:0 !important;aspect-ratio:auto;border:none;border-radius:10px;overflow:hidden;
  background-color:#fbfcfe;
  background-image:
    linear-gradient(45deg,#e6ebf3 25%,transparent 25%),
    linear-gradient(-45deg,#e6ebf3 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e6ebf3 75%),
    linear-gradient(-45deg,transparent 75%,#e6ebf3 75%);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;}

/* アクションバー */
.cropper .ce-actionbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;}
.ce-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:700;
  padding:13px 22px;border-radius:10px;border:1px solid transparent;transition:all .15s;white-space:nowrap;}
.ce-btn i{font-size:16px;}
.ce-btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-soft);box-shadow:0 1px 2px rgba(15,23,42,.04);}
.ce-btn-ghost:hover{background:#f6f8fc;border-color:#d3dbe8;}
.ce-btn-ghost i{color:var(--muted);}
.ce-btn-green{background:var(--green);color:#fff;box-shadow:0 8px 18px rgba(16,185,129,.3);}
.ce-btn-green:hover{filter:brightness(.96);transform:translateY(-1px);}

/* 右: 形状選択 */
.cropper .toolbar.ce-shapes{
  background:transparent;box-shadow:none;padding:0;margin:0;border-radius:0;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.cropper .toolbar.ce-shapes .ce-shape-btn{
  display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;
  padding:16px 6px 12px;border:1.5px solid var(--line);border-radius:13px;background:#fff;
  transition:border-color .14s,background .14s;}
.cropper .toolbar.ce-shapes .ce-shape-btn:hover{border-color:#c2d0ec;background:#fafbfe;}
.cropper .toolbar.ce-shapes .ce-shape-btn.active{
  border-color:var(--blue);background:#f4f8ff;box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.ce-gicon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
.ce-gicon svg{width:34px;height:34px;}
.ce-shape-btn>span:last-child{font-size:12.5px;font-weight:500;color:var(--ink-soft);}
.cropper .toolbar.ce-shapes .ce-shape-btn.active>span:last-child{color:var(--blue);font-weight:700;}

/* 右: 調整オプション */
.ce-opt-block{margin-top:24px;}
.ce-opt-label{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:9px;}
.cropper .aspect-ratio-selector,
.cropper .crop-size-selector,
.cropper .file-format-selector{
  background:transparent;border:none;padding:0;border-radius:0;margin:0 0 18px;}
.ce-chip-row{display:flex;flex-wrap:wrap;gap:7px;}
.ce-chip{padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-size:13px;font-weight:500;color:var(--ink-soft);transition:all .14s;}
.ce-chip:hover{border-color:#c2d0ec;background:#fafbfe;}
.ce-chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}

/* 切り抜きサイズ（数値直接入力 + 縦横比ロック） */
.ce-size-row{display:flex;align-items:center;gap:10px;}
.ce-size-field{display:flex;align-items:center;gap:6px;flex:1;min-width:0;
  border:1px solid var(--line);border-radius:9px;padding:6px 10px;background:#fff;
  transition:border-color .14s,box-shadow .14s;}
.ce-size-field:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.ce-size-field label{font-size:12px;font-weight:700;color:var(--muted);margin:0;}
.cropper .size-input{flex:1;width:100%;min-width:0;border:none;outline:none;background:transparent;
  font-size:14px;color:var(--ink);text-align:right;padding:0;}
/* readonly 解除に伴うブラウザ既定のスピナーは隠してすっきり見せる */
.cropper .size-input::-webkit-outer-spin-button,
.cropper .size-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cropper .size-input{-moz-appearance:textfield;}
.ce-unit{font-size:12px;color:var(--muted-light);}

/* 縦横比ロックボタン（旧🔓絵文字を明確なトグルに） */
.ce-lock{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:#fff;
  color:var(--muted);cursor:pointer;transition:all .14s;}
.ce-lock:hover{border-color:#c2d0ec;background:#fafbfe;color:var(--ink-soft);}
.ce-lock i{font-size:13px;}
.ce-lock.locked{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 2px 6px rgba(37,99,235,.3);}

/* 「数値を直接入力できます」ヒント */
.ce-size-hint{display:flex;align-items:center;gap:6px;margin-top:8px;
  font-size:11.5px;color:var(--muted-light);}
.ce-size-hint i{font-size:11px;}

/* ファイル形式（セグメント） */
.ce-segment{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;}
.ce-segment label{flex:1;text-align:center;padding:8px 0;font-size:13px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;border-left:1px solid var(--line);transition:background .14s,color .14s;margin:0;}
.ce-segment label:first-of-type{border-left:none;}
.ce-segment .btn-check:checked+label{background:var(--blue);color:#fff;}

/* 仕上がり情報 */
.ce-info-box{margin-top:22px;background:#f1f6ff;border:1px solid #dbe7fb;border-radius:12px;padding:14px 15px;}
.ce-info-head{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#2b4f8e;margin-bottom:6px;}
.ce-info-head i{color:#3b6fd1;}
.ce-info-box p{font-size:12.5px;color:#5b6b86;line-height:1.75;margin:0;}

/* 編集画面レスポンシブ */
@media (max-width:992px){
  /* 上段バーを縦積みにして全幅利用 */
  .ce-topbar{flex-direction:column;gap:12px;}
  .ce-topbar .ce-hint-inline{flex:1 1 auto;}
  /* 編集エリアを上、コントロールを下の1カラムへ */
  .cropper-grid{grid-template-columns:1fr;gap:16px;}
  .cropper .canvas-container{height:clamp(340px,52vh,520px) !important;}
}
@media (max-width:560px){
  /* ステッパーは連結線を省きチップ状に折り返す */
  .ce-stepper-h{flex-wrap:wrap;gap:6px;padding:12px 14px;}
  .ce-stepper-h .ce-step-line{display:none;}
  .ce-stepper-h .ce-step{padding:6px 8px;}
  .ce-step-txt h4{font-size:12.5px;}
  .cropper .canvas-container{height:clamp(300px,46vh,420px) !important;}
  .cropper .ce-actionbar{flex-direction:column-reverse;}
  .ce-btn{width:100%;}
  .cropper .status-info.ce-status{max-width:55%;}
  /* サイズ入力は縦並びにして指で押しやすく */
  .ce-size-field{padding:8px 12px;}
}

/* RTL（編集画面） */
[dir="rtl"] .cropper .status-info.ce-status{text-align:left;}
[dir="rtl"] .cropper .size-input{text-align:left;}

/* 折りたたみ下部セクションは初期レンダリング対象から外して描画を軽量化（表示は不変） */
.usecases-section,
.faq-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}