/* ========================================
   simple.css - Bootstrap代替シンプルCSS
   楽天モバイル災害用伝言板風デザイン
   ======================================== */

/* ========================================
   Web Fonts (ローカル配布)
   ======================================== */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-sans-jp-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/noto-sans-jp-700.woff2') format('woff2');
}

/* リセット & ベース */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 125%; /* 16px × 1.25 = 20px が 1rem の基準 */
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

a {
  color: #0066cc;
  text-decoration: underline;
}

hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 16px 0;
}

/* ========================================
   ページヘッダー（タイトル部分）
   ======================================== */
.simple-page-header {
  background-color: #f7f7f7;
  padding: 32px 16px;
  text-align: center;
}

.simple-page-header-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
  margin: 0;
}

/* ページヘッダーの英語併記（画面仕様書 DMBA-2A41【7-1-9】） */
.simple-page-header-subtitle {
  font-size: 0.8rem;
  color: #333;
  margin: 8px 0 0 0;
}

/* ========================================
   コンテナ
   ======================================== */
.simple-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
}

/* ========================================
   セクションヘッダー（各ページのタイトル）
   ======================================== */
.simple-section-header {
  padding: 12px 0;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  margin-bottom: 16px;
}

/* ========================================
   コンテンツエリア
   ======================================== */
.simple-content {
  padding: 0;
}

/* ========================================
   通知メッセージ（トピックス）
   ======================================== */
.simple-notice {
  background-color: #fff9e6;
  border-left: 3px solid #f90;
  padding: 12px;
  margin-bottom: 16px;
}

/* ========================================
   テキストリンク
   ======================================== */
.simple-link {
  color: #0066cc;
  text-decoration: underline;
  display: block;
  padding: 8px 0;
  min-height: 44px;
  line-height: 28px;
}

/* 大きめリンク（トップページの登録・確認・削除用） */
.simple-link-large {
  color: #0066cc;
  text-decoration: underline;
  display: block;
  padding: 12px 0;
  min-height: 48px;
  font-size: 1.6rem;
  font-weight: normal;
}

/* 戻るリンク */
.simple-back-link {
  color: #0066cc;
  text-decoration: underline;
  display: block;
  padding: 8px 0;
  min-height: 44px;
}

/* ========================================
   フォーム要素
   ======================================== */
.simple-form-group {
  margin-bottom: 16px;
}

.simple-label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
}

.simple-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.8rem;
  min-height: 44px;
}

.simple-input:focus {
  outline: none;
  border-color: #0066cc;
}

.simple-input-error {
  border-color: #c00;
}

.simple-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.8rem;
  resize: vertical;
  min-height: 100px;
}

.simple-textarea:focus {
  outline: none;
  border-color: #0066cc;
}

.simple-textarea-error {
  border-color: #c00;
}

.simple-select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.8rem;
  min-height: 44px;
  background-color: #fff;
}

.simple-select:focus {
  outline: none;
  border-color: #0066cc;
}

/* チェックボックス */
.simple-checkbox-group {
  margin-bottom: 0;
}

.simple-checkbox-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
  min-height: 44px;
  padding: 4px 0;
}

.simple-checkbox-group input[type="checkbox"] {
  margin-right: 8px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ラジオボタン */
.simple-radio-group {
  margin-bottom: 8px;
}

.simple-radio-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
  min-height: 44px;
  padding: 4px 0;
}

.simple-radio-group input[type="radio"] {
  margin-right: 8px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ========================================
   エラーメッセージ
   ======================================== */
.simple-error {
  color: #c00;
  font-size: 0.8rem;
  margin-top: 4px;
}

/* ========================================
   ヒントテキスト
   ======================================== */
.simple-hint {
  color: #666;
  font-size: 0.8rem;
  margin-top: 4px;
}

/* ========================================
   アクションリンク（ボタン代替）
   ======================================== */
.simple-action {
  display: block;
  padding: 12px;
  text-align: center;
  color: #0066cc;
  text-decoration: underline;
  min-height: 44px;
}

/* submit リンク（フォーム送信用、リンク形式） */
.simple-submit {
  display: block;
  width: 100%;
  /* 左右の余白は付けない。「戻る」等の左端は同じ画面の他のリンクと揃う
     （画面仕様書 DMBA-2A41【2-2-8】【5-1-8】【2-4-1】【7-1-5】【7-1-7】） */
  padding: 12px 0;
  /* 「戻る」等は左寄せ（画面仕様書 DMBA-2A41【2-2-3】【2-2-4】【2-4-2】【2-5-2】） */
  text-align: left;
  color: #0066cc;
  background: none;
  border: none;
  /* 本文と同じ文字サイズ。button 要素は font-size を継承しないため値を明示する
     （画面仕様書 DMBA-2A41【2-2-8】【5-1-8】等は「戻る」が本文と同じ大きさ） */
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px;
  font-family: inherit;
  /* button 要素は iOS 15 系 Safari の既定で太字になるため、a 要素と同じ継承値に揃える
     （画面仕様書 DMBA-2A41【2-5-2】は「終了」「再設定」とも同じリンク表記） */
  font-weight: inherit;
  /* button 要素は line-height も継承しないため body と同じ値を明示し、a 要素と行の高さを揃える
     （画面仕様書 DMBA-2A41【2-5-2】は「終了」「再設定」が等間隔に並ぶ） */
  line-height: 1.6;
  text-decoration: underline;
}

/* 中央寄せの遷移リンク（画面仕様書 DMBA-2A41【7-1-1】の「確認」）。
   simple-submit の左寄せを上書きするため必ず後ろに置く */
.simple-submit-center {
  text-align: center;
}

/* ボタン型（フォーム送信・確認画面用） */
.simple-button {
  display: block;
  width: 100%;
  padding: 14px 20px;
  text-align: center;
  color: #fff;
  background-color: #0066cc;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  min-height: 48px;
  font-family: inherit;
  text-decoration: none;
  margin: 8px 0;
}

/* セカンダリボタン（いいえ・戻る用） */
.simple-button-secondary {
  display: block;
  width: 100%;
  padding: 14px 20px;
  text-align: center;
  color: #0066cc;
  background-color: #fff;
  border: 2px solid #0066cc;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  min-height: 48px;
  font-family: inherit;
  text-decoration: none;
  margin: 8px 0;
}

.simple-button-secondary:hover {
  background-color: #f0f7ff;
}

/* ボタンを中央寄せするためのラッパー */
.simple-button-wrapper {
  text-align: center;
  margin: 16px 0;
}

.simple-button-wrapper .simple-button {
  margin: 0;
}

.simple-button:hover {
  background-color: #0055aa;
}

/* 危険ボタン（削除用） */
.simple-button-danger {
  background-color: #c00;
}

.simple-button-danger:hover {
  background-color: #a00;
}

/* 危険アクション（削除など） */
.simple-action-danger {
  color: #c00;
}

.simple-action-danger:hover {
  color: #900;
}

/* ========================================
   結果リスト（検索結果など）
   ======================================== */
.simple-result-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.simple-result-list li {
  border-bottom: 1px solid #eee;
}

.simple-result-item {
  display: block;
  padding: 12px 0;
  color: #0066cc;
  text-decoration: underline;
  min-height: 44px;
}

/* submit ボタンをリストアイテムとして表示 */
.simple-result-button {
  display: block;
  width: 100%;
  padding: 12px 0;
  text-align: left;
  color: #0066cc;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px;
  font-family: inherit;
  text-decoration: underline;
}

.simple-result-number {
  display: inline-block;
  background-color: #666;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.6rem;
  margin-right: 8px;
}

/* ========================================
   詳細表示（dl/dt/dd）
   ======================================== */
.simple-detail-list {
  margin: 0;
}

.simple-detail-list dt {
  font-weight: bold;
  margin-top: 16px;
  color: #666;
  font-size: 1rem;
}

.simple-detail-list dt:first-child {
  margin-top: 0;
}

.simple-detail-list dd {
  margin: 4px 0 0 0;
}

/* ========================================
   情報ボックス
   ======================================== */
.simple-info-box {
  background-color: #f5f5f5;
  padding: 12px;
  margin-bottom: 16px;
}

/* ========================================
   フッター
   ======================================== */
.simple-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
}

/* リンクが2つ並ぶ画面では、区切り線は「伝言板トップへ」の直前の1本のみ
   （DMBA-2A41_画面仕様書（伝言板サービス））。フッタ枠の上罫線は表示しない */
.simple-footer-no-border {
  border-top: none;
}

.simple-footer-note {
  color: #666;
  font-size: 0.7rem;
  margin-bottom: 8px;
}

.simple-footer-copyright {
  background-color: #f7f7f7;
  color: #666;
  font-size: 0.8rem;
  text-align: center;
  margin: 16px 0 0 0;
  padding: 24px 16px;
  /* コンテナを突き抜けて画面幅いっぱいに広げる */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* ========================================
   テキストユーティリティ
   ======================================== */
.simple-text-muted {
  color: #666;
}

.simple-text-small {
  font-size: 0.7rem;
}

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

.simple-text-bold {
  font-weight: bold;
}

.simple-text-danger {
  color: #c00;
}

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

/* ========================================
   リスト
   ======================================== */
.simple-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* インラインリンク（ブロックではない） */
.simple-link-inline {
  color: #0066cc;
  text-decoration: underline;
}

/* 区切り線 */
.simple-divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 16px 0;
}

/* 電話リンク */
.simple-tel-link {
  color: #0066cc;
}

/* ========================================
   スペーシングユーティリティ
   ======================================== */
.simple-mb-0 { margin-bottom: 0; }
.simple-mb-1 { margin-bottom: 8px; }
.simple-mb-2 { margin-bottom: 16px; }
.simple-mb-3 { margin-bottom: 24px; }
.simple-mt-1 { margin-top: 8px; }
.simple-mt-2 { margin-top: 16px; }
.simple-mt-3 { margin-top: 24px; }

/* ========================================
   テキストユーティリティ
   ======================================== */
/* メッセージ定義（messages.properties）中の改行文字をそのまま改行として表示する */
.simple-pre-line { white-space: pre-line; }

/* ========================================
   レスポンシブ対応
   ======================================== */
@media (max-width: 480px) {
  .simple-container {
    padding: 12px;
  }

  .simple-page-header {
    padding: 32px 16px;
  }

  .simple-page-header-title {
    font-size: 1.4rem;
  }

  .simple-section-header {
    padding: 10px 0;
    margin-bottom: 12px;
  }

  .simple-footer-copyright {
    margin: 16px 0 0 0;
    padding: 20px 12px;
  }
}

/* ========================================
   電話番号リンク: PC では無効化、モバイルのみ有効
   ======================================== */
@media (pointer: fine) {
  a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
    cursor: default;
  }
}

@media (pointer: coarse) {
  a[href^="tel:"] {
    color: #0066cc;
    text-decoration: underline;
    pointer-events: auto;
    cursor: pointer;
  }
}