/* =========================================================
   Base / Reset
========================================================= */
html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #222;
  background: #f6efe3; /* 画像のベージュ系 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

/* =========================================================
   App Layout (スマホデザイン優先)
   - 画像のデザイン基準をここに集約
========================================================= */
.app-header {
  background: #d7efe7; /* 薄いミント */
  padding: 18px 16px;
}

.app-header__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}

.app-header__logo {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.app-header__logo-img {
  width: 72px;
  height: 72px;
  display: block;
}

.app-header__texts { line-height: 1.2; }

.app-header__company {
  font-size: 14px;
  color: #222;
  margin-bottom: 6px;
}

.app-header__title {
  font-size: 24px;
  font-weight: 800;
}

.app-header__title-sub {
  font-size: 16px;
  font-weight: 700;
  color: #0b5a3e;
}

.main {
  max-width: 520px;          /* SP基準 */
  margin: 0 auto;
  padding: 18px 16px 28px;
  flex: 1 0 auto;
  min-width: 0; /* ★これを追加（flex配下の横はみ出し対策） */
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* =========================================================
   Footer (アプリ用)
========================================================= */

footer, .l-footer, .p-footer {
  margin-top: auto;
}

.app-footer{
  background: #0b5a3e;
  color: #fff;
  padding: 14px 12px;
}

.app-footer__inner{
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.app-footer__links{
  font-size: 12px;
  margin-bottom: 10px;
}

.app-footer__links a{
  color: #fff;
  text-decoration: none;
}

.app-footer__links .sep{
  margin: 0 8px;
  opacity: .8;
}

.app-footer__meta{
  font-size: 12px;
  opacity: .95;
}

.app-footer__ver{
  margin-bottom: 6px;
}

/* =========================================================
   Forms (共通)
========================================================= */
.form-login { max-width: 520px; margin-top: 18px; }
.form-event { max-width: 520px; margin-top: 18px; }

.form-row { margin-bottom: 12px; display: block; }

.form-row label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"]{
  width: 100%;
  box-sizing: border-box;
  padding: 14px 12px;
  border: 1px solid #d7d0c6;
  border-radius: 2px;
  background: #fff;
  font-size: 16px;
}

.form-row-inline label { display: inline-block; font-size: 13px; }

.form-actions { margin-top: 16px; }

.form-help { font-size: 12px; color: #6b7280; margin-top: 6px; }

/* =========================================================
   Buttons (共通)
   - SPは画像どおり「幅100%・緑」
========================================================= */
.btn-primary,
.btn-secondary,
button[type="submit"]{
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 14px;
  border: 0;
  border-radius: 12px;
  background: #0b5a3e;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  margin: 20px 0 0;
}

.btn-primary:hover,
.btn-secondary:hover,
button[type="submit"]:hover { opacity: .92; }

/* 例外：リンクボタン等で幅を絞りたい場合に使う */
.btn-inline { width: auto !important; display: inline-flex !important; }

/* =========================================================
   Alerts
========================================================= */
.alert-error {
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #b91c1c;
  padding: 10px 12px;
  margin: 12px 0;
  border-radius: 8px;
  font-size: 13px;
}

.alert-success {
  border: 1px solid #b5e4b8;
  background: #ecfdf3;
  color: #166534;
  padding: 10px 12px;
  margin: 12px 0;
  border-radius: 8px;
  font-size: 13px;
}

/* =========================================================
   Section header
========================================================= */
.section-header {
  margin-top: 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-header h3 { margin: 0; font-size: 18px; }

/* =========================================================
   Table
   - SPでは table-wrap 内だけ横スクロール
   - body/html に overflow-x:hidden は使わない（iOSで途中停止するため）
========================================================= */

/* まず「横に広がる原因」を親側で潰す（共通・安全） */
.main { 
  min-width: 0;
}
.container { min-width: 0; }

.table-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 余計な “inline-table” をやめる（これが全体横スクロールの原因になりやすい） */
.table-list{
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #d7d0c6;
}

.table-list th,
.table-list td{
  border: 1px solid #d7d0c6;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

td a.btn-secondary ,
td button.btn-secondary {
    margin: 0;
}

.table-list th{
  background: #efe7d8;
  font-weight: 700;
}

/* =========================================================
   Pagination
   - 以前の調整を維持
========================================================= */
.pagination-wrap { margin-top: 16px; }

/* Laravel defaultの余計な部分を非表示 */
.pagination-wrap .gap-2 { display: none; }
.pagination-wrap p.text-sm { display: none; }

/* nav本体 */
.pagination-wrap nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination-wrap nav > * { margin: 0 6px; }

/* SVG（矢印）がある場合 */
.pagination-wrap nav svg {
  width: 16px !important;
  height: 16px !important;
}

/* ページ要素（枠付き） */
.pagination-wrap nav a,
.pagination-wrap nav span[aria-current="page"] span,
.pagination-wrap nav span[aria-disabled="true"] span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #d7d0c6;
  background: #fff;
  color: #222;
  font-size: 14px;
  line-height: 1;
  box-sizing: border-box;
  vertical-align: middle;
  border-radius: 10px;
}

.pagination-wrap nav span[aria-current="page"] span {
  background: #0b5a3e;
  color: #fff;
  border-color: #0b5a3e;
}

.pagination-wrap nav a:hover { background: #f3f4f6; }

.pagination-wrap nav a[rel="prev"],
.pagination-wrap nav a[rel="next"] {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  line-height: 1;
}

.pagination-wrap nav a svg { display: block; }

/* mobile */
@media (max-width: 480px) {
  .pagination-wrap nav { flex-wrap: wrap; }
  .pagination-wrap nav > * { margin: 4px; }

  .pagination-wrap nav a,
  .pagination-wrap nav span[aria-current="page"] span,
  .pagination-wrap nav span[aria-disabled="true"] span {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
  }

  .pagination-wrap nav svg {
    width: 14px !important;
    height: 14px !important;
  }

  .pagination-wrap nav a[rel="prev"],
  .pagination-wrap nav a[rel="next"] {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    line-height: 1;
  }
}

/* PC/SP表示切替（partials.pagination側で使う場合のみ） */
.pagination-sp { display: none; }
.pagination-pc { display: block; }

@media (max-width: 640px) {
  .pagination-sp { display: block; }
  .pagination-pc { display: none; }
}

/* =========================================================
   Events list: SP cards / PC table
========================================================= */
.events-cards { display: block; }
.events-table { display: none; }

.event-card {
  background: #fff;
  border: 1px solid #d7d0c6;
  border-radius: 14px;
  padding: 12px;
  margin: 10px 0;
}

.event-card__title {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 8px;
  word-break: break-word;
}

.event-card__meta {
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
  display: grid;
  gap: 4px;
}

.event-card__label { font-weight: 800; color: #111827; }

.event-card__actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* SPのカード内ボタンは押しやすく */
.event-card__actions a {
  width: 100%;
  /*text-align: center;*/
  padding: 14px 14px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PCではテーブルに */
@media (min-width: 768px) {
  .events-cards { display: none; }
  .events-table { display: block; }
}

/* PCテーブル内の操作ボタン整列（table側で .event-actions を使う時） */
.event-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-actions .btn-secondary {
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  white-space: nowrap;
  font-size: 14px;
  border-radius: 10px;
}

/* =========================================================
   Badges
========================================================= */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid #d7d0c6;
  background: #efe7d8;
  color: #222;
}

.badge-done {
  border-color: #86efac;
  background: #ecfdf3;
  color: #166534;
}

/* =========================================================
   SP refresh bar
========================================================= */
.sp-refresh-bar {
  display: none;
  padding: 8px 16px;
  background: #f6efe3;
  border-bottom: 1px solid #d7d0c6;
}

.sp-refresh-btn {
  width: 100%;
  text-align: center;
  padding: 12px 16px;
  border-radius: 12px;
  background: #efe7d8;
  color: #222;
  font-weight: 800;
}

@media (max-width: 768px) {
  .sp-refresh-bar { display: block; }
}

/* =========================================================
   Responsive helpers
========================================================= */
.sp-only { display: none; }
.pc-only { display: block; }

@media (max-width: 767px) {
  .sp-only { display: block; }
  .pc-only { display: none; }
}

/* =========================================================
   Accordion (PC/SP 統一：枠＋見出し＋開閉)
========================================================= */
.acc {
  border: 1px solid #d7d0c6;
  border-radius: 12px;
  background: #fff;
  margin: 12px 0;
  overflow: hidden;
}

.acc__summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.acc__summary h3 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.acc__summary::-webkit-details-marker { display: none; }

.acc__summary::after {
  content: "▾";
  font-size: 22px;
  line-height: 1;
  opacity: 0.8;
}

.acc[open] .acc__summary::after { content: "▴"; }

.acc__title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.acc__body {
  border-top: 1px solid #efe7d8;
  padding: 12px 14px;
}

.acc:not([open]) .acc__body { display: none; }

ul {
    padding: 0;
}

ul li {
    list-style: none;
    border-bottom: 1px solid #d7d0c7;
    padding: 20px 20px 10px;
}

ul li a {
    display: block;
    width: 100%;
}

/* =========================================================
   PC対応（スマホの見た目を維持しつつ拡張）
========================================================= */
@media (min-width: 768px) {
  /* PCでは横幅を広げて前回のPC表示（テーブル等）に対応 */
  .app-header__inner,
  .main,
  .app-footer__inner {
    max-width: 1080px;
  }

  .app-header {
    padding: 22px 24px;
  }

  .app-header__inner {
    gap: 18px;
  }

  .app-header__logo {
    width: 84px;
    height: 84px;
  }

  .app-header__logo-img {
    width: 84px;
    height: 84px;
  }

  .app-header__company {
    font-size: 15px;
  }

  .app-header__title {
    font-size: 28px;
  }

  .app-header__title-sub {
    font-size: 18px;
  }

  .main {
    padding: 24px 24px 40px;
  }

  /* PCではボタンを必要に応じて横並びしやすく（既存を壊さない範囲） */
  .event-card__actions a {
    width: auto;
    min-width: 220px;
  }

  .btn-primary, .btn-secondary, button[type="submit"] {
    width: auto;
  }
}


/* =========================================================
   PC：一覧（テーブル）内のボタンだけ横並び＆幅autoに戻す
========================================================= */
@media (min-width: 768px) {

  /* テーブル内のボタンは width:100% を解除 */
  .table-list .btn-primary,
  .table-list .btn-secondary,
  .table-list button[type="submit"]{
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 12px;
    white-space: nowrap;
  }

  /* 操作欄（ボタンの親）が .event-actions の想定：横並びにする */
  .event-actions{
    flex-direction: row;
    flex-wrap: wrap;   /* 画面が狭いときは折り返し */
    gap: 10px;
    align-items: center;
  }

  /* 念のため：テーブルの「操作」セルが狭い場合でも崩れにくく */
  .table-list td:last-child{
    white-space: normal;
  }
}

/* =========================================================
   Survey / Event Answer (アンケート画面の見た目を整える)
   - 既存の .form-event / .form-row を前提にCSSのみで適用
========================================================= */

/* 最終回答日時などのテキスト（画面上部の情報） */
.form-event .meta,
.form-event .event-meta,
.form-event .last-answered,
.form-event p:has(strong),
.form-event p {
  line-height: 1.8;
}

/* 質問ブロック（1問ごとの間隔を広めに） */
.form-event .form-row {
  margin-bottom: 28px;
}

/* 質問文（ラベル） */
.form-event .form-row > label,
.form-event .form-row label {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

/* セレクト：見た目を画像のUIに寄せる */
.form-event select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #fff;

  /* 右の▼をCSSで表現（濃い緑） */
  background-image:
    linear-gradient(45deg, transparent 50%, #0b5a3e 50%),
    linear-gradient(135deg, #0b5a3e 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;

  padding-right: 44px; /* ▼分の余白 */
}

/* フォーカス時の強調（やりすぎない） */
.form-event select:focus,
.form-event textarea:focus,
.form-event input:focus {
  outline: none;
  border-color: #0b5a3e;
  box-shadow: 0 0 0 3px rgba(11, 90, 62, 0.12);
}

/* テキストエリア（自由記入欄） */
.form-event textarea {
  min-height: 180px;
  resize: vertical;
}

/* 送信ボタン（SPは既に100%・緑・角丸なので、上下余白だけ整える） */
.form-event .form-actions,
.form-event .actions {
  margin-top: 26px;
}

.form-event button[type="submit"],
.form-event .btn-primary {
  margin-top: 10px;
}

/* 余計な行間で詰まらないように */
.form-event .form-help {
  margin-top: 8px;
}

/* PC：アンケートは読みやすさ優先で幅を少し絞る（全体1080pxのままでもOK） */
@media (min-width: 768px) {
  .form-event {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}



/* =========================================================
   Survey (answer page)
========================================================= */
.survey-meta{
  margin: 0 0 16px;
  font-size: 16px;
}

.survey-form .form-row{
  margin-bottom: 60px;
}

.survey-form .form-row label{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.survey-actions{
  margin-top: 18px;
}

/* =========================================================
   Static pages (FAQ / 操作ガイド / 利用規約 / プライバシー / 障害情報)
========================================================= */
.static-page .page-title{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
}

.static-lead{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.9;
  color: #374151;
}

/* 目次 */
.toc{
  background: #fff;
  border: 1px solid #d7d0c6;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0 18px;
}

.toc__title{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
}

.toc__list{
  margin: 0;
  padding: 0;
}

.toc__list li{
  border-bottom: 1px solid #efe7d8;
  padding: 10px 0;
  list-style: none;
}

.toc__list li:last-child{
  border-bottom: 0;
}

.toc__list a{
  display: block;
  width: 100%;
  padding: 4px 2px;
}

/* セクション */
.static-section{
  margin-top: 20px;
}

.static-h2{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  padding-left: 10px;
  border-left: 6px solid #0b5a3e;
}

.static-h3{
  margin: 14px 0 8px;
  font-size: 16px;
  font-weight: 800;
}

.static-body p{
  margin: 0 0 12px;
  line-height: 1.9;
}

.static-body ul,
.static-body ol{
  margin: 0 0 12px;
  padding-left: 18px;
}

.static-body ul li,
.static-body ol li{
  border-bottom: 0; /* ← 既存の ul li の下線を無効化（静的ページ内だけ） */
  padding: 0;
  list-style: initial;
  margin: 6px 0;
}

.static-body ol li{ list-style: decimal; }

/* table をスマホで崩さない */
.static-body .table-wrap{
  margin: 10px 0 14px;
}
.static-body .table-list{
  margin-top: 0;
}

/* =========================================================
   FAQ
========================================================= */
.faq-page h2{
  margin-top: 60px;   /* A/B/C/D タイトルの上 */
  margin-bottom: 14px;/* A/B/C/D タイトルの下 */
  font-size: 18px;
  font-weight: 800;
  border-left: 6px solid #0b5a3e;
  padding-left: 10px;
}

.faq-page h3{
  margin-top: 40px;        /* 質問タイトルの上 */
  margin-bottom: 20px;     /* 質問タイトルの下 */
  padding-bottom: 20px;    /* 下線との距離 */
  border-bottom: 1px solid #d7d0c6; /* 下線 */
  font-size: 16px;
  font-weight: 800;
}

/* 回答ブロックの下に余白（次の質問までの間隔） */
.faq-page h3 + p,
.faq-page h3 + ul,
.faq-page h3 + ol{
  margin-top: 0;
}

.faq-page p,
.faq-page ul,
.faq-page ol,
.faq-page table{
  margin-bottom: 18px; /* 回答の下部マージン */
}

/* FAQ内は「全体 ul/li 強制スタイル」を確実に無効化して通常表示に戻す */
.faq-page ul,
.faq-page ol{
  padding-left: 18px;
}

.faq-page ul li,
.faq-page ol li{
  border-bottom: none;
  padding: 0;
  margin: 6px 0;
  width: auto;
}

.faq-page ul li{ list-style: disc; }
.faq-page ol li{ list-style: decimal; }

/* FAQ内のリンクは幅100%強制を外す（ul li a の影響を遮断） */
.faq-page ul li a{
  display: inline;
  width: auto;
}

/* =========================================================
   Manual (操作ガイド)
   - static-page の見た目に統一
========================================================= */
.static-page .manual-figure { margin: 14px 0 22px; }
.static-page .manual-figure img {
  width: 50%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid #d7d0c6;
  background: #fff;
}

.static-page .manual-note {
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #d7d0c6;
  border-radius: 14px;
  line-height: 1.9;
}

.static-page .manual-steps { margin: 10px 0 0; padding-left: 18px; }
.static-page .manual-steps li { margin: 8px 0; }

.static-page .manual-qa { margin: 12px 0 0; padding-left: 18px; }
.static-page .manual-qa li { margin: 10px 0 14px; }
.static-page .manual-q { margin: 0 0 6px; }
.static-page .manual-a { margin: 0; }

/* 管理ダッシュボード：操作ガイドボタン */
.dashboard-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.operation-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex: 0 0 auto;
}

.operation-guide__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0b5a3c;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.operation-guide__text {
  font-size: 14px;
  font-weight: 700;
  color: #0b5a3c;
}