@charset "UTF-8";

/* ==========================================================================
   全体レイアウト ＆ フォントベース
   ========================================================================== */
#tatami-step-container {
    max-width: 680px;
    margin: 30px auto;
    padding: 30px 24px;
    border: 3px solid #111111;
    border-radius: 16px;
    box-shadow: 7px 7px 0px #111111;
    font-family: 'Noto Sans JP', sans-serif;
    transition: background-color 0.4s ease;
}

/* ヘッダー */
.step-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 3px dashed #111111;
    padding-bottom: 20px;
}
.step-header h2 {
    font-family: 'Yuji Syuku', serif; /* 手書きのハネ・払いの美しさと躍動感 */
    font-size: 28px;
    font-weight: normal;
    color: #111111;
    margin: 0 0 8px 0;
    line-height: 1.3;
}
.step-header p {
    font-size: 14px;
    color: #333333;
    margin: 0;
    font-weight: 700;
}

/* ==========================================================================
   フォーム画面でもバシッと残る「履歴エリア」
   ========================================================================== */
#selection-history {
    background: #111111;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    box-shadow: 3px 3px 0px #25D366;
}
.history-label {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Yuji Syuku', serif;
}
#history-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
/* 履歴のバッジ文字もタイプライター風に統一 */
.tag-badge {
    color: #111111;
    background: #FFF9E6;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    border: 2px solid #111111;
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace !important;
}
.tag-badge.separator {
    background: none;
    border: none;
    color: #25D366;
    padding: 0 2px;
    font-size: 14px;
}
.animated-tag {
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   各ステップ・質問タイトル
   ========================================================================== */
.step-box { display: none; }
.step-box.active { display: block; }

.step-badge {
    display: inline-block;
    background: #111111;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.step-box h3 {
    font-family: 'Yuji Syuku', serif;
    font-size: 22px;
    color: #111111;
    margin: 0 0 20px 0;
    line-height: 1.4;
}

/* ==========================================================================
   全体の高さをスマートにスリム化した「選択肢カード」
   ========================================================================== */
.step-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.option-card {
    position: relative;
    cursor: pointer;
    display: block;
}
.option-card input[type="radio"] { position: absolute; opacity: 0; }

/* paddingを14pxに圧縮して、スマートな縦幅に！ */
.option-content {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 12px;
    padding: 14px 20px; 
    transition: all 0.15s ease;
    box-shadow: 3px 3px 0px #111111;
    overflow: hidden;
}

.option-content .icon {
    font-size: 32px;
    float: left;
    margin-right: 14px;
    line-height: 1.2;
}

/* ==========================================================================
   最終フォーム（書き込み欄をワイドに拡大！）
   ========================================================================== */
.form-lead {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 25px;
    box-shadow: 3px 3px 0px #111111;
}
.form-lead h3 { 
    font-family: 'Yuji Syuku', serif;
    font-size: 22px; 
    color: #111111; 
    margin: 0 0 10px 0;
}
.form-lead p { font-size: 14px; color: #333333; font-weight: 700; line-height: 1.6; }

.input-group { margin-bottom: 22px; } /* 間隔を少し広げてゆったりと */
.input-group label {
    display: block;
    font-size: 16px; /* 少し大きく */
    font-weight: 700;
    color: #111111;
    margin-bottom: 8px;
}
/* ⚡【修正】書き込み欄（インプット欄）をひと回り大きく、打ちやすく拡大！ */
.input-group input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px; /* 上下左右の余白を広げて文字を大きく打ちやすく */
    border: 2.5px solid #111111; /* 枠線を少し太くくっきりと */
    border-radius: 10px;
    font-size: 18px; /* 入力文字を15pxから18pxへ大胆に拡大！ */
    font-weight: 700;
    background: #ffffff;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.03); /* 高級感のある内側の影 */
    transition: all 0.2s;
}
.input-group input:focus {
    outline: none;
    background: #FFF9E6;
    border-color: #25D366;
    box-shadow: inset 0 0 0px #111111, 4px 4px 0px #111111; /* フォーカス時にポップに浮き出る */
}

/* ⚡【大修正】メール送信ボタン：くっきり太くて可愛いフォントへ変更！ */
.submit-btn {
    width: 100%;
    background: #25D366;
    color: #ffffff;
    font-family: 'Mochiy Pop One', sans-serif !important; /* 超くっきり可愛い丸文字 */
    font-size: 20px; /* フォントの特性に合わせて最適化 */
    padding: 18px;
    border: 3px solid #111111;
    border-radius: 100px;
    cursor: pointer;
    box-shadow: 0 6px 0px #111111;
    transition: all 0.1s;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 0px #111111; /* 文字の輪郭をさらにくっきりと */
}
.submit-btn:hover {
    background: #1eaf53;
    transform: translateY(3px);
    box-shadow: 0 3px 0px #111111;
}

/* 最終フォーム内のLINE合流バナー */
.line-escape-box {
    margin: 30px 0 15px 0;
    padding-top: 25px;
    border-top: 2px dashed #111111;
    text-align: center;
}
.line-escape-box p {
    font-size: 13px;
    font-weight: 700;
    color: #555555;
    margin: 0 0 14px 0;
}

/* ⚡【大修正】LINEボタン：メールボタンとお揃いの「くっきり太い可愛いフォント」へ！ */
.line-step-btn {
    display: block;
    background: #06C755; /* LINEグリーン */
    color: #ffffff !important;
    text-decoration: none;
    font-family: 'Mochiy Pop One', sans-serif !important; /* 超くっきり可愛い丸文字 */
    font-size: 19px;
    padding: 16px;
    border: 3px solid #111111;
    border-radius: 100px;
    box-shadow: 0 6px 0px #111111;
    transition: all 0.1s;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 0px #111111; /* メールとお揃いのくっきり影 */
}
.line-step-btn:hover {
    background: #05b34c;
    transform: translateY(3px);
    box-shadow: 0 3px 0px #111111;
}
.line-icon {
    font-size: 22px;
    margin-right: 6px;
    vertical-align: middle;
}
.input-group input:focus {
    outline: none;
    background: #FFF9E6;
    border-color: #25D366;
}

/* メール送信ボタン：スマートでキレのあるデザイン */
.submit-btn {
    width: 100%;
    background: #25D366;
    color: #ffffff;
    font-family: 'Yuji Syuku', serif;
    font-size: 21px;
    padding: 15px;
    border: 2.5px solid #111111;
    border-radius: 100px;
    cursor: pointer;
    box-shadow: 0 5px 0px #111111;
    transition: all 0.1s;
}
.submit-btn:hover {
    background: #1eaf53;
    transform: translateY(3px);
    box-shadow: 0 2px 0px #111111;
}

/* ⚡最終フォーム内のLINE合流バナーデザイン */
.line-escape-box {
    margin: 25px 0 15px 0;
    padding-top: 20px;
    border-top: 2px dashed #111111;
    text-align: center;
}
.line-escape-box p {
    font-size: 13px;
    font-weight: 700;
    color: #555555;
    margin: 0 0 12px 0;
}
.line-step-btn {
    display: block;
    background: #06C755; /* LINEグリーン */
    color: #ffffff !important;
    text-decoration: none;
    font-family: 'Yuji Syuku', serif;
    font-size: 18px;
    font-weight: 700;
    padding: 14px;
    border: 2.5px solid #111111;
    border-radius: 50px;
    box-shadow: 0 4px 0px #111111;
    transition: all 0.1s;
}
.line-step-btn:hover {
    background: #05b34c;
    transform: translateY(2px);
    box-shadow: 0 2px 0px #111111;
}
.line-icon {
    font-size: 20px;
    margin-right: 6px;
    vertical-align: middle;
}

.back-btn {
    background: none;
    border: none;
    color: #555555;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    display: block;
    margin: 20px auto 0 auto;
}

/* ==========================================================================
   ⚡【修正】WhatsAppエスケープエリア＆くっきり可愛いグローバルボタン
   ========================================================================== */
.whatsapp-escape-box {
    margin: 30px 0 15px 0;
    padding-top: 25px;
    border-top: 2px dashed #111111;
    text-align: center;
}
.whatsapp-escape-box p {
    font-size: 14px;
    font-weight: 700;
    color: #555555;
    margin: 0 0 14px 0;
}

/* ⚡メールボタンとお揃いの「くっきり太くて可愛い」最高峰のデザインを強制適用！ */
.whatsapp-step-btn {
    display: block;
    background: #25D366; /* 鮮烈なWhatsAppグリーン */
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: 'Mochiy Pop One', sans-serif !important; /* くっきり可愛い丸文字 */
    font-size: 19px;
    padding: 16px;
    border: 3px solid #111111;
    border-radius: 100px;
    box-shadow: 0 6px 0px #111111;
    transition: all 0.1s;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 0px #111111; /* くっきり引き立つ黒影 */
}
.whatsapp-step-btn:hover {
    background: #1eaf53;
    transform: translateY(3px);
    box-shadow: 0 3px 0px #111111;
}
.whatsapp-icon {
    font-size: 22px;
    margin-right: 6px;
    vertical-align: middle;
}

/* ==========================================================================
   ⚡【英語サイト専用】選択ボックス内を最高にクールなタイプライター文字に上書き
   ========================================================================== */
.option-card h4 {
    font-family: 'Courier Prime', Courier, monospace !important;
    font-size: 20px; /* 英語で見映えするよう少しダイナミックに */
    font-weight: 700;
    color: #111111;
    margin: 0 0 6px 0;
    letter-spacing: -0.2px;
}

.option-card p {
    font-family: 'Courier Prime', Courier, monospace !important;
    font-size: 14px;
    color: #444444;
    margin: 0;
    line-height: 1.5;
    font-weight: 400; /* 本物のタイプライターに近い絶妙な太さに */
    letter-spacing: 0px;
}

/* 上部の履歴バッジ（英語表記）も、ボックスとお揃いのタイプライター文字に完全連動 */
.tag-badge {
    font-family: 'Courier Prime', Courier, monospace !important;
    font-size: 13px;
    font-weight: 700;
}

/* ==========================================================================
   ⚡【世界最先端】マイクロインタラクション＆ハイブリッドSNSデザイン
   ========================================================================== */

/* 上部進捗ゲージ */
.progress-bar-container {
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.08);
    border-radius: 10px;
    margin-bottom: 25px;
    overflow: hidden;
}
#progress-gauge {
    height: 100%;
    background: #25D366;
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* バウンドするような心地よいアニメーション */
}

/* 触覚的3Dカードエフェクトの上書き */
.option-card {
    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    cursor: pointer;
}
.option-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.15) !important;
}
.option-card:active {
    transform: translateY(2px) !important;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1) !important;
}

/* 近未来的ステップローダー */
#step-loader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#step-loader p {
    font-family: 'Yuji Syuku', serif;
    font-size: 20px;
    font-weight: bold;
    color: #111111;
    margin-top: 20px;
}
.spinner {
    width: 50px; height: 50px;
    border: 5px solid #EBF7EE;
    border-top: 5px solid #25D366;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 次世代ツインSNSコンポーネント */
.hybrid-sns-container {
    margin: 35px 0 20px 0;
    padding-top: 25px;
    border-top: 2px dashed #111111;
    text-align: center;
}
.hybrid-lead {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 16px 0;
}
.hybrid-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    max-width: 500px;
    margin: 0 auto;
}
@media (max-width: 480px) {
    .hybrid-buttons-grid {
        grid-template-columns: 1fr; /* スマホでは押しやすいよう縦並びに */
    }
}
.hybrid-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: 'Mochiy Pop One', sans-serif;
    font-size: 15px;
    padding: 14px 10px;
    border: 3px solid #111111;
    border-radius: 50px;
    box-shadow: 0 5px 0px #111111;
    cursor: pointer;
    transition: all 0.1s;
    text-shadow: 1px 1px 0px #111111;
}
.hybrid-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0px #111111;
}
.line-color { background: #06C755; }
.line-color:hover { background: #05b34c; }
.whatsapp-color { background: #25D366; }
.whatsapp-color:hover { background: #20ba5a; }
.btn-icon { font-size: 18px; margin-right: 6px; }