@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap');

/* サイドバー領域は白背景を維持 */
.app-sidebar,
.l-side {
  background-color: #ffffff;
}

/* 汎用レイアウトクラス */
.machigai-container {
  max-width: 896px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: normal;
}
/* style.css の section { margin-top: 56px } を打ち消し。先頭以外は 32px */
.machigai-container section {
  margin-top: 0;
}
.machigai-container section + section {
  margin-top: 32px;
}
.machigai-space-y > * + * {
  margin-top: 32px;
}

        .machigai-p-inner {
          padding: 24px;
        }

        @media (min-width: 768px) {
          .machigai-p-inner { padding: 32px; }
        }

        /* ヘッダー */
        .machigai-header {
         background-color: #15803D;
         color: #ffffff;
         padding: 20px;
         text-align: center;
        }
        .machigai-header h1 {
         font-size: 30px;
         line-height: 36px;
         font-weight: 700;
        }
        @media (min-width: 768px) {
         .machigai-header h1 { font-size: 36px; line-height: 40px; }
        }
        .machigai-header p {
         font-size: 18px;
        }
        @media (min-width: 768px) {
         .machigai-header p { font-size: 20px; }
        }

        /* セクション共通 */
        .machigai-section {
         border-radius: 12px;
         padding: 24px;
         border-width: 4px;
         border-style: solid;
        }
        .machigai-section-title {
         font-size: 24px;
         font-weight: 700;
         margin-bottom: 16px;
         margin-top: 0;
         padding: 0;
         border-left: none;
         background: transparent;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
        }
        .machigai-section-title svg {
         width: 32px; height: 32px;
        }
        .machigai-section-desc {
         text-align: center;
         font-size: 18px;
         margin-bottom: 24px;
        }
        .machigai-highlight-number {
         color: #D1301E;
         font-weight: 700;
         font-size: 24px;
        }

        /* セクション別カラー設定 */
        .machigai-section-heat {
            background-color: #f0fdf4;
            border-color: #bbf7d0;
        }
        .machigai-section-heat .machigai-section-title { color: #15803d; }

        .machigai-section-typhoon {
            background-color: #eff6ff;
            border-color: #bfdbfe;
        }
        .machigai-section-typhoon .machigai-section-title { color: #1d4ed8; }

        /* 画像エリア */
        .machigai-image-wrapper {
            position: relative;
            width: 100%;
            max-width: 672px;
            margin: 0 auto;
            border: 4px solid;
            border-radius: 12px;
            overflow: hidden;
            background-color: #ffffff;
        }
        .machigai-section-heat .machigai-image-wrapper { border-color: #ffffff; } 
        .machigai-section-typhoon .machigai-image-wrapper { border-color: #ffffff; } 

        .machigai-image {
            width: 100%;
            height: auto;
            display: block;
            user-select: none;
            pointer-events: none;
        }

        /* スポット（透明ボタン） */
        .machigai-spot-btn {
            position: absolute;
            border-radius: 9999px;
            border: 4px solid transparent;
            background-color: transparent;
            cursor: pointer;
            z-index: 10;
            padding: 0;
            /* ホバーエフェクトは無効化済み */
        }
        
        /* ⭕️マーク用SVGラッパー */
        .machigai-circle-wrapper {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        .machigai-circle-svg {
            width: 100%;
            height: 100%;
            color: #D1301E;
            filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07)) drop-shadow(0 2px 2px rgba(0,0,0,0.06));
            padding: 5%;
        }

        /* クリック順の番号バッジ (画像上の丸の右上) */
        .machigai-number-badge {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #D1301E;
            color: #ffffff;
            border-radius: 9999px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            z-index: 20;
            transform: translate(30%, -30%);
        }

        /* 進行状況（カウンター）周り */
        .machigai-progress-area {
            margin-top: 32px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }
        .machigai-counter-box {
            background-color: #f3f4f6;
            padding: 16px 32px;
            border-radius: 9999px;
            font-weight: 700;
            color: #374151;
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
            font-size: 18px;
            border: 2px solid #e5e7eb;
        }
        .machigai-counter-number-heat { color: #16a34a; font-size: 30px; margin: 0 8px; }
        .machigai-counter-number-typhoon { color: #2563eb; font-size: 30px; margin: 0 8px; }

        .machigai-reset-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #6b7280;
            background-color: #ffffff;
            padding: 8px 16px;
            border-radius: 8px;
            border: 1px solid #d1d5db;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: color 0.2s, background-color 0.2s;
            font-size: 16px;
        }
        .machigai-reset-btn svg { width: 20px; height: 20px; }
        .machigai-reset-btn.machigai-reset-heat:hover {
            color: #16a34a;
            background-color: #f0fdf4;
        }
        .machigai-reset-btn.machigai-reset-typhoon:hover {
            color: #2563eb;
            background-color: #eff6ff;
        }
        
        /* こたえをみるボタン用のスタイル */
        .machigai-show-answer-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #ffffff;
            padding: 8px 16px;
            border-radius: 8px;
            border: 1px solid transparent;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: opacity 0.2s;
            font-size: 16px;
            font-weight: 700;
        }
        .machigai-show-answer-btn svg { width: 20px; height: 20px; }
        .machigai-show-answer-btn:hover { opacity: 0.8; }
        .machigai-show-answer-btn.machigai-show-answer-heat {
            background-color: #15803D;
        }
        .machigai-show-answer-btn.machigai-show-answer-typhoon {
            background-color: #2563eb;
        }
        
        .machigai-buttons-wrapper {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center;
        }

        /* 補足テキスト */
        .machigai-note-area { margin-top: 16px; text-align: center; }
        .machigai-note-title { font-size: 14px; color: #4b5563; font-weight: 700; margin-bottom: 0; }
        .machigai-note-desc { font-size: 14px; color: #6b7280; margin-top: 0; }

        /* こたえあわせ表示エリア（画像の下に追加されていくリスト） */
        .machigai-answers-display-area {
            display: none; /* 初期状態は非表示 */
            background-color: #f9fafb;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            padding: 24px;
            margin-top: 24px;
            margin-bottom: 24px;
            animation: machigaiFadeIn 0.3s ease-out;
        }
        .machigai-answers-display-title {
            font-size: 20px;
            font-weight: 700;
            color: #374151;
            margin-top: 0;
            margin-bottom: 16px;
            text-align: center;
            border-bottom: 2px solid #d1d5db;
            padding-bottom: 8px;
        }
        .machigai-answers-display-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .machigai-answers-display-list li {
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px dashed #d1d5db;
            animation: machigaiFadeIn 0.3s ease-out;
        }
        .machigai-answers-display-list li:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        .machigai-answers-display-list .machigai-display-heading {
            font-size: 16px;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 4px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            line-height: 1.5;
        }
        .machigai-answers-display-list .machigai-answer-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background-color: #D1301E;
            color: #ffffff;
            border-radius: 9999px;
            font-size: 14px;
            flex-shrink: 0;
        }
        .machigai-answers-display-list .machigai-display-desc {
            font-size: 14px;
            color: #4b5563;
            padding-left: 32px;
        }

        /* 参考情報セクション */
        .machigai-ref-section {
            background-color: #f9fafb;
            padding: 24px;
            border-radius: 12px;
            font-size: 14px;
            color: #4b5563;
            border: 1px solid #e5e7eb;
        }
        .machigai-ref-title {
            font-weight: 700;
            color: #374151;
            margin-top: 0;
            margin-bottom: 8px;
            border-bottom: 1px solid #d1d5db;
            padding-bottom: 4px;
            font-size: 16px;
        }
        .machigai-ref-list { padding-left: 20px; margin-bottom: 8px;}
        .machigai-ref-list > li { margin-bottom: 8px; }
        .machigai-ref-sublist { padding-left: 20px; margin-top: 4px;}
        .machigai-ref-sublist > li { margin-bottom: 0; }
        .machigai-link { color: #3b82f6; text-decoration: none; }
        .machigai-link:hover { text-decoration: underline; }
        
        .machigai-ref-box {
            margin-top: 16px;
            padding: 12px;
            background-color: #ffffff;
            border-radius: 4px;
            border: 1px solid #e5e7eb;
            font-size: 12px;
            color: #6b7280;
        }
        .machigai-ref-box-title { font-weight: 700; color: #374151; margin-top: 0; margin-bottom: 0px; }
        .machigai-ref-box p { margin-top: 0; margin-bottom: 0px; }

        /* フッター */
        .machigai-footer {
            background-color: #ffffff;
            border-top: 1px solid #e5e7eb;
            padding: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        @media (min-width: 768px) {
            .machigai-footer { padding: 32px; }
        }

        /* アニメーション */
        .machigai-correct-animation {
            animation: machigaiPop 0.3s ease-out forwards;
        }
        @keyframes machigaiPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        
        @keyframes machigaiFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* JavaScript用の状態リセット用クラス */
        .machigai-spot-btn.machigai-found {
            border-color: transparent !important;
            background-color: transparent !important;
        }