/* リセットCSS (基本的なスタイルを初期化) */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}
.red { color: #D90000;}

/* フォーム全体 */
.booking-form {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1140px; /* PCサイズで広げる */
    box-sizing: border-box;
}

/* 各セクションの共通スタイル */
.booking-section {
    margin-bottom: 40px;
}

/* フォームラベル（日付、時間、集合場所のタイトル） */
.booking-label-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* タイトルと所要時間/凡例を下に揃える */
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.booking-label-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-heading {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
}

.booking-required {
content: "必須";
  font-size: 11px;
  padding: 2px 12px;
  font-weight: 500;
  color: #FFF;
  background: #1E2C48;
  border-radius: 3px;
  float: right;
}

/* 所要時間 */
.booking-duration {
    font-size: 0.85em;
    color: #666;
    white-space: nowrap;
}

/* ================================================================
   日付選択セクション
   ================================================================ */
.calendar-display {
    overflow-x: auto; /* 常に横スクロール可能 */
    -webkit-overflow-scrolling: touch; /* iOSの滑らかなスクロール */
    margin-bottom: 20px; /* Notesとの間にスペース */
    padding-left: 0; /* 左右の余白をなくす */
    padding-right: 0; /* 左右の余白をなくす */
}

/* 追加: カレンダーと次のセクション（写真ギャラリー等）との余白を広げる */
.calendar-section-wrapper {
    /* detail.php の構造上、カレンダー周りをまとめる親ラッパがない場合は
       .calendar-display の下に直接マージンを追加するための保険的クラスです */
    margin-bottom: 28px; /* デフォルトでゆったりした余白 */
}

/* カレンダー本体と下段の注釈との間隔を広げる（注釈 .calendar-notes がある場合） */
.calendar-notes {
    margin-top: 12px; /* カレンダー本体との距離 */
    margin-bottom: 20px; /* 次セクションとの距離 */
}

/* reserve.php と見た目を合わせるための追加余白（モバイルとPCで調整） */
@media (max-width: 768px) {
    .calendar-display { margin-bottom: 18px; }
    .calendar-notes { margin-bottom: 16px; }
}
@media (min-width: 769px) {
    .calendar-display { margin-bottom: 32px; }
    .calendar-notes { margin-bottom: 28px; }
}

/* 見出しのスタイルを統一: .borders を使用する全 h3 の見た目を揃える */
h3.borders {
    font-size: 1.25rem; /* 写真ギャラリーなどと同等の大きさに調整 */
    line-height: 1.3;
    margin-top: 24px;
    margin-bottom: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* カレンダーをスマホでフリックしやすく調整 */
.calendar-display {
    -webkit-overflow-scrolling: touch; /* iOS でスムーズスクロール */
    overflow-x: auto;
    overflow-y: hidden;
}

/* カレンダー内アイテムがモバイルで勝手に伸びすぎないよう最小幅を設定 */
.calendar-item {
    min-width: 72px; /* モバイル時の最小幅(見やすさ重視) */
}

/* スライダーやフリック感を reserve.php に近づけるため、
   カレンダーリストは nowrap で横並び、タッチで左右に動くようにする */
.calendar-list {
    display: flex;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* モバイル専用微調整 */
@media (max-width: 768px) {
    h3.borders { font-size: 1.15rem; margin-top: 18px; margin-bottom: 14px; }
    .calendar-item { min-width: 70px; }
    .calendar-list { gap: 6px; padding-bottom: 8px; }
}

.calendar-list {
    display: flex;
    flex-wrap: nowrap; /* アイテムが折り返さないようにする */
    width: auto; /* flexアイテムに幅を任せる */
    padding-bottom: 10px; /* スクロールバーのためのスペース */
}

/* 個々の日付アイテム */
.calendar-item {
    flex-shrink: 0; /* アイテムが縮小しないようにする */
    box-sizing: border-box;
    text-align: center;
    margin-right: 1px; /* アイテム間の隙間を狭く */
    width: calc((100% - (2px * 13)) / 14); /* 14等分し、マージンを考慮した幅 */
    min-width: 70px; /* 各日付アイテムの最小幅を設定 (フォントサイズに合わせて調整) */
}

.calendar-list .calendar-item:last-child {
    margin-right: 0;
}

.calendar-item-button { /* リンクの代わりにボタンを使用 */
    display: block;
    height: 100%;
    width: 100%; /* 親要素の幅いっぱいに広げる */
}

.calendar-item-content {
    border: 1px solid #ccc;
    padding: 5px 3px; /* 上下左右のパディングをさらに調整 */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* 子要素の幅を親に合わせる */
    justify-content: space-between; /* 縦方向の要素を均等に配置 */
    height: 85px; /* アイテムの高さ固定 (フォントサイズに合わせて調整) */
    background-color: #fff;
    position: relative;
    transition: all 0.2s ease-in-out; /* ホバー/選択時のアニメーション */
}

.calendar-item-content.is-selected {
    border-color: #00306d; /* 選択時のボーダー色をオレンジに */
    background-color: #edfbff; /* 選択時の背景色を薄いオレンジに */
}

.calendar-item-button:hover .calendar-item-content {
    background-color: #edfbff; /* ホバー時の背景色を薄いオレンジに */
    border-color: #00306d; /* ホバー時のボーダー色をオレンジに */
    cursor: pointer;
}

.calendar-item-content[data-status="tel"] { /* TELの日付のスタイル */
    cursor: default; /* クリック不可のためカーソルをデフォルトに */
}
.calendar-item-content[data-status="tel"]:hover { /* TELの日付のホバー効果をなし */
    background-color: #fff;
    border-color: #ccc;
}

/* 当日枠（TEL）はクリック・フォーカスされても選択スタイルを表示しない */
.calendar-item-content.is-today-tel.is-selected,
.calendar-item-content[data-is-today="1"].is-selected,
.calendar-item-content.is-today-tel:active,
.calendar-item-content[data-is-today="1"]:active,
.calendar-item-content.is-today-tel:focus,
.calendar-item-content[data-is-today="1"]:focus {
    background-color: #fff !important;
    border-color: #ccc !important;
    outline: none !important;
}

/* 親ボタンの hover/active/focus による子要素の見た目変化を防ぐ（当日用） */
.calendar-item-button:hover .calendar-item-content[data-is-today="1"],
.calendar-item-button:active .calendar-item-content[data-is-today="1"],
.calendar-item-button:focus .calendar-item-content[data-is-today="1"],
.calendar-item-button:hover .calendar-item-content.is-today-tel,
.calendar-item-button:active .calendar-item-content.is-today-tel,
.calendar-item-button:focus .calendar-item-content.is-today-tel {
    background-color: #fff !important;
    border-color: #ccc !important;
    cursor: default !important;
}

/* --- 強制上書き: 当日枠はどんな状態でも選択スタイルを表示しない --- */
.calendar-item-content[data-is-today="1"],
.calendar-item-content.is-today-tel,
.calendar-item-content[data-is-today="1"].is-selected,
.calendar-item-content.is-today-tel.is-selected,
.calendar-item-content[data-is-today="1"]:active,
.calendar-item-content.is-today-tel:active,
.calendar-item-content[data-is-today="1"]:focus,
.calendar-item-content.is-today-tel:focus {
    background-color: #fff !important;
    border-color: #ccc !important;
    color: inherit !important;
}

/* 子要素の色やSVGの currentColor にも影響が出ないように強制適用 */
.calendar-item-content[data-is-today="1"] *,
.calendar-item-content.is-today-tel * {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}


.calendar-dayofweek {
    font-size: 11px; /* フォントを小さく */
    color: #666;
    margin-bottom: 2px;
    text-align: left; /* 左揃え */
    padding-left: 2px; /* 微調整 */
    line-height: 1.5;
}

.calendar-date-display {
    font-size: 1.0em; /* フォントを小さく */
    font-weight: bold;
    color: #333;
    line-height: 1.1em; /* 行高さを調整 */
    text-align: center; /* 中央揃え */
}

/* 土曜日のスタイル */
.calendar-item-content[data-dayofweek="土"] .calendar-dayofweek,
.calendar-item-content[data-dayofweek="土"] .calendar-date-display {
    color: #007bff; /* 青色 (土日は維持) */
}

/* 日曜日のスタイル */
.calendar-item-content[data-dayofweek="日"] .calendar-dayofweek,
.calendar-item-content[data-dayofweek="日"] .calendar-date-display {
    color: #dc3545; /* 赤色 (土日は維持) */
}

/* ステータス（TEL, ◯ など） */
.calendar-status-info {
    font-size: 1.0em; /* フォントを小さく */
    font-weight: bold;
    height: 18px; /* TELや〇のSVGアイコンの高さに合わせる */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 1px 0; /* 文字やSVGが中央に来るように調整 */
    line-height: 1em; /* テキストの行高さを調整 */
    text-align: center; /* 中央揃え */
}

.status-tel {
    color: #666;
}

.status-available {
    color: #00306d; /* ◯ の色をオレンジに */
}

.status-square {
    color: #00306d; /* ノート凡例と一致 */
}

/* SVGアイコンの共通スタイル */
.icon-tel-svg, .icon-circle-svg {
    display: block;
    width: 25px; /* SVGアイコンのサイズを小さく */
    height: 18px; /* SVGアイコンのサイズを小さく */
}
.icon-circle-svg circle {
    stroke: currentColor;
}
/* ▲ のSVGスタイルを追加 */
.icon-triangle-svg path {
    fill: none;
    stroke: currentColor;
}

/* カレンダー下部の注釈 */
.calendar-notes {
    font-size: 0.75em; /* フォントを小さく */
    color: #666;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px; /* 隙間を小さく */
}

.note-icon {
    display: inline-block;
    font-weight: bold;
}
.note-icon--circle {
    color: #00306d; /* ◯ の凡例アイコンをオレンジに */
}
.note-icon--square {
    color: #00306d; /* 仮予約も画像では青色に見えるため、オレンジに */
}
.note-icon--tel {
    color: #666;
}
.note-phone-number {
    white-space: nowrap;
}


/* ================================================================
   時間選択セクション
   ================================================================ */
.time-selection-grid {
    /* デフォルト（モバイル含む）で横スクロールを許可 */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; /* iOSの滑らかなスクロール */
    padding-bottom: 10px; /* スクロールバーのためのスペース */
}

.time-tags-list {
    display: flex;
    /* ここを変更：デフォルト（モバイル含む）では改行しない */
    flex-wrap: nowrap; 
    gap: 8px; /* ボタン間の隙間を小さく */
    /* 全てのボタンが横に並ぶために必要な幅 (モバイルで横スクロールを発生させるため) */
    width: calc((60px + 8px) * 20); /* min-width:60px, gap:8px, 20個のボタンで計算 */
}

.time-tag-button {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    padding: 5px 12px; /* パディングを小さく */
    border-radius: 30px; 
    font-size: 0.9em; /* フォントを小さく */
    color: #333;
    transition: background-color 0.3s, border-color 0.3s;
    flex-shrink: 0;
    min-width: 85px; /* 最小幅 */
    box-sizing: border-box;
    text-align: center;
    /* width はメディアクエリで調整 */
}

.time-tag-button:hover:not(.is-disabled) {
    background-color: #e0e0e0;
    border-color: #999;
}

.time-tag-button.is-selected {
    background-color: #00306d; /* 選択時の背景色をオレンジに */
    color: #fff;
    border-color: #00306d; /* 選択時のボーダー色をオレンジに */
}

.time-tag-button.is-disabled {
    background-color: #f0f0f0;
    color: #ccc;
    border-color: #e0e0e0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ================================================================
   レスポンシブ対応
   ================================================================ */
@media (max-width: 768px) {
    /* ... 既存のモバイル用スタイルは省略 ... */
    
    .time-tag-button {
        /* モバイルでは横スクロールで表示されるため、幅は小さく固定 */
        min-width: 60px;
        padding: 8px 10px;
        font-size: 0.85em;
        width: auto; /* min-widthに任せる */
    }
}

/* PC表示の場合のスタイル */
@media (min-width: 769px) {
    /* 時間選択セクションのPC表示用スタイル */
    .time-selection-grid {
        overflow-x: hidden; /* PCでは横スクロールを非表示に */
        padding-bottom: 0; /* スクロールバーのためのパディングも削除 */
    }
    .time-tags-list {
        flex-wrap: wrap; /* PCでは改行して表示 */
        width: auto; /* 親要素の幅に合わせて改行 */
    }
    .time-tag-button {
        width: calc(100% / 6 - 8px); /* 例: 1行に8個表示 (max-width: 1140pxに合わせ調整) */
        /* min-width はデフォルトの 60px を継承 */
    }
}

/* ================================================================
   集合場所選択セクション
   ================================================================ */
.meeting-spot-options {
    display: flex;
    flex-direction: column;
    gap: 12px; /* ラジオボタン間の隙間を小さく */
}

.radio-card {
    display: block;
    cursor: pointer;
}

.radio-card-input {
    display: none;
}

.radio-card-body {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 10px; /* パディングを小さくして、見切れないように調整 */
    border-radius: 4px; /* 角丸を小さく */
    transition: border-color 0.3s, background-color 0.3s;
    background-color: #fff;
}

.radio-card-input:checked + .radio-card-body {
    border-color: #00306d; /* チェック時のボーダー色をオレンジに */
    background-color: #edfbff; /* チェック時の背景色を薄いオレンジに */
}

.radio-card-input:hover + .radio-card-body {
    border-color: #999;
}

.radio-card-icon {
    flex-shrink: 0;
    width: 24px; /* アイコンサイズを調整 */
    height: 24px; /* アイコンサイズを調整 */
    margin-right: 10px; /* マージンを調整 */
    position: relative;
}

.radio-card-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.radio-card-icon .icon-checked {
    display: none;
}
.radio-card-input:checked + .radio-card-body .radio-card-icon .icon-checked {
    display: block;
}
.radio-card-input:checked + .radio-card-body .radio-card-icon .icon-default {
    display: none;
}

/* ラジオボタンのデフォルトアイコンの青色部分をオレンジに */
.radio-card-icon .icon-default path[fill="#5CA4D1"] {
    fill: #999; /* 非選択時はグレー */
}
.radio-card-icon .icon-default path[fill="#E9F3F7"] {
    fill: #eee; /* 非選択時は薄いグレー */
}
/* チェック済みアイコンの緑色部分をオレンジに */
.radio-card-icon .icon-checked path[fill="#6FBA2C"] {
    fill: #00306d; /* オレンジに変更 */
}


.radio-card-content {
    flex-grow: 1;
}

.spot-name {
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 2px; /* マージンを小さく */
    font-size: 0.95em; /* フォントを小さく */
}
.spot-name span {
    font-weight: normal;
}

.spot-detail {
    font-size: 0.8em; /* フォントを小さく */
    color: #666;
}

/* ================================================================
   次へボタン
   ================================================================ */
.submit-button-group {
    text-align: center;
    margin-top: 30px; /* マージンを小さく */
}

.submit-button {
    background-color: #00306d; /* ボタンの背景色をオレンジに */
    color: #fff;
    padding: 12px 25px; /* パディングを小さく */
    border-radius: 4px; /* 角丸を小さく */
    font-size: 1em; /* フォントを小さく */
    font-weight: bold;
    width: 100%;
    max-width: 250px; /* 最大幅を小さく */
    box-sizing: border-box;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: #e06b00; /* ホバー時の背景色を少し濃いオレンジに */
}


/* ================================================================
   レスポンシブ対応
   ================================================================ */
@media (max-width: 768px) {
    form {
  width: 95%;
  margin: auto;
}
    .booking-form {
        padding: 15px; /* モバイルでのパディングをさらに小さく */
    }
    
    .booking-label-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .booking-heading {
        font-size: 1.1em;
    }

    .booking-required, .booking-duration {
        font-size: 0.75em;
    }
    
    .calendar-item {
        /* モバイルでは1画面に4日表示されるように調整 */
        /* width: calc(100% / 4 - 2px); 4等分し、マージン考慮 */
        min-width: 70px; /* 各アイテムの最小幅を確保 */
    }

    .calendar-list {
        /* モバイルでは14日分が横に並ぶ固定幅 */
        width: calc((70px + 2px) * 14); /* min-widthとmargin-rightに基づき再計算 */
        padding-bottom: 10px; /* スクロールバーのためのスペース */
    }

    .calendar-item-content {
        height: 85px; /* 高さを揃える */
    }

    .calendar-notes {
        font-size: 0.7em; /* フォントをさらに小さく */
        gap: 5px 10px;
    }

    .time-tag-button {
        /* モバイルでは横スクロールで表示されるため、幅は小さく固定 */
        min-width: 60px;
        padding: 8px 10px;
        font-size: 0.85em;
        width: auto; /* min-widthに任せる */
    }
    .submit-button {
        padding: 10px 15px;
        font-size: 0.9em;
    }
}

/* PC表示の場合のスタイル */
@media (min-width: 769px) {
    /* PC表示でのカレンダーアイテム幅 */
    .calendar-item {
        width: calc(100% / 14 - 2px); /* 14日分を均等に表示、マージン考慮 */
        min-width: 70px; /* 最小幅を維持 */
    }
    .calendar-list {
        width: auto; /* 親要素の幅に合わせてアイテムが均等に広がるように */
    }
    .calendar-display {
        overflow-x: hidden; /* PCでは横スクロールバーを非表示 */
    }
}

/* -------------------------------
　　　　 フローコンテナ 
---------------------------------- */
.flow-container {
    display: flex; /* 子要素を横並びにする */
    justify-content: space-between; /* 子要素を均等に配置 */
    width: 100%; /* 幅を100%に設定 */
    background-color: #fff; /* フローコンテナの背景色 */
    border-radius: 0px;
    overflow: hidden; /* 角丸を適用するために必要 */
    margin-bottom: 30px;
}

/* 各フローのステップ */
.flow-step {
    flex: 1; /* 各ステップが均等な幅を占めるようにする */
    padding: 10px 10px; /* PCでのパディング */
    text-align: center;
    color: #333; /* デフォルトの文字色 */
    background-color: #fff; /* 非アクティブ時の背景色を白に */
    border: 1px solid #00306d; /* 1pxの#00306dの線を追加 */
    border-right: none; /* 矢印との境界線があるので右の線は削除 */
    position: relative; /* 擬似要素の位置指定の基準 */
    display: flex;
    flex-direction: row; /* PCでは数字とテキストを横並びにする */
    align-items: center; /* 垂直方向中央揃え */
    justify-content: center; /* 水平方向中央揃え */
    font-weight: bold;
    cursor: default; /* カーソルをデフォルトに戻す */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border-radius: 0 !important; /* 個別の角丸も完全に除去 */
}

/* 最後のステップの右側の線は必要 */
.flow-step:last-child {
    border-right: 1px solid #00306d;
}

/* 矢印の生成 (最後のステップ以外) */
.flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -14px; /* 三角形が少し重なるように調整 */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: calc(10px + 15px) solid transparent; /* paddingの半分+元のborder幅 */
    border-bottom: calc(10px + 15px) solid transparent; /* paddingの半分+元のborder幅 */
    border-left: 15px solid #fff; /* 三角形の色 (非アクティブステップの背景色と合わせる) */
    z-index: 1; /* ステップより手前に表示 */
    transition: border-left-color 0.3s ease;
}

/* 各ステップの左側に経線を追加 */
.flow-step:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -1px; /* 前のステップの枠線と重なるように調整 */
    top: 0;
    bottom: 0;
    width: 1px; /* 線の幅 */
    background-color: #00306d; /* 非アクティブ時の線の色 */
    z-index: 2; /* 矢印よりも手前に表示 */
}

/* アクティブなステップ */
.flow-step.active {
    background-color: #00306d; /* アクティブなステップの背景色 */
    color: #fff; /* アクティブなステップの文字色 */
    border-color: #00306d; /* アクティブなステップの枠線色 */
}

/* アクティブなステップの矢印の色 */
.flow-step.active::after {
    border-left-color: #00306d; /* アクティブなステップの背景色と合わせる */
}

/* アクティブステップの後のステップの左側の線と丸角を調整 */
.flow-step.active + .flow-step {
    border-left: none; /* 前のステップの矢印と::beforeで隠れるため、自身の左枠線は不要 */
}

/* アクティブなステップより前のステップのスタイルを調整 */
.flow-container .flow-step:not(.active) {
    background-color: #fff;
    color: #333;
    border-color: #00306d;
}

.flow-container .flow-step:not(.active) .step-number {
    background-color: #00306d;
    color: #fff;
}

.flow-container .flow-step:not(.active)::after {
    //border-left-color: #fff;
}

/* ここが新しい変更点：アクティブなステップの直前のステップの矢印を非表示にする */
.flow-step.active ~ .flow-step:first-of-type::after, /* 最初のステップがアクティブになった場合 */
.flow-step.active ~ .flow-step:not(:last-child)::after, /* アクティブなステップより前の非アクティブなステップの矢印 */
.flow-step:has(+ .active)::after { /* アクティブなステップの直前のステップの矢印 */
    /* transparent のままにして隠す */
    border-left-color: transparent;
}


/* アクティブなステップの次のステップ（右隣）の線をアクティブ色にする */
.flow-step.active + .flow-step::before {
    background-color: #00306d;
}

/* アクティブなステップより前のステップの::before の色も #00306d に維持 */
.flow-step:not(.active)::before {
    background-color: #00306d;
}


/* ステップ番号 */
.step-number {
    width: 30px;
    height: 30px;
    background-color: #00306d; /* 非アクティブ時の番号の背景色 */
    color: #fff;
    border-radius: 0; /* 角丸をなくす */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    margin-right: 10px; /* PCでは右マージンを設ける */
    margin-bottom: 0; /* PCでは下マージンは不要 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* アクティブなステップの番号 */
.flow-step.active .step-number {
    background-color: #fff; /* アクティブな番号の背景色 */
    color: #00306d; /* アクティブな番号の文字色 */
}

/* アクティブなステップより前のステップの数字色を調整 */
.flow-step.active ~ .flow-step .step-number {
    background-color: #00306d; /* 非アクティブ時の数字色 */
    color: #fff;
}


/* ステップテキスト */
.step-text {
    font-size: 0.9em;
    white-space: nowrap; /* PCではテキストの折り返しを防ぐ */
    line-height: 1.3; /* 行の高さ調整は維持 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .flow-container {
        overflow-x: hidden; /* 横スクロールを禁止 */
        white-space: normal; /* 折り返しを許可 */
        max-width: 100%; /* スマホでの最大幅 */
    }

    .flow-step {
        padding: 10px 5px; /* スマホでは左右のパディングを狭く */
        flex-shrink: 1; /* 縮小を許可 */
        width: auto; /* 幅を自動調整 */
        min-width: unset; /* 最小幅をリセット */
        flex-direction: column; /* スマホでは数字とテキストを縦並びにする */
        border-radius: 0 !important; /* 角丸はPCと同じく0 */
    }

    /* スマホ時のステップ番号 */
    .step-number {
        margin-right: 0; /* スマホでは右マージンは不要 */
        margin-bottom: 5px; /* スマホでは下マージンを設ける */
    }

    /* スマホ時のステップテキスト */
    .step-text {
        white-space: normal; /* スマホではテキストの折り返しを許可 */
    }

    /* スマートフォン表示でも矢印を表示 (PCと同じ定義を維持) */
    .flow-step::after,
    .flow-step::before {
        display: block;
    }

    /* スマホの場合、アクティブなステップの前の矢印を非表示に */
    .flow-step:has(+ .active)::after {
        border-left-color: transparent;
    }
}
textarea {
font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif;
  font-weight: 400;
  font-feature-settings: "palt";
  letter-spacing: 0.024em;
  font-size: 14px;
  background: #f4f4f5;
  width: 100%;
  padding: 8px 12px;
  border: none;
  display: block;
  outline: none;
  border-radius: 4px;
  transition: background 300ms ease-in-out, box-shadow 300ms ease-in-out;
}
textarea:focus {
  background-color: #FFF;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}