/* リセット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;}

@media (min-width: 769px) {
    #contents{
        width: 1080px;
    }
}

/* フォーム全体 */
.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 {
    background-color: #D90000; 
    color: #fff; 
    font-size: 0.7em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 0px; /* 角丸 */
    white-space: nowrap;
}

/* 所要時間 */
.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-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; /* 選択時の背景色を薄いオレンジに */
}

@media (min-width: 769px) {
    .calendar-item-button:hover .calendar-item-content {
        background-color: #edfbff; /* ホバー時の背景色を薄いオレンジに */
        border-color: #00306d; /* ホバー時のボーダー色をオレンジに */
        cursor: pointer;
    }
}
.calendar-item-content[data-status="tel"] { /* TELの日付のスタイル */
    cursor: default; /* クリック不可のためカーソルをデフォルトに */
}
@media (min-width: 769px) {
    .calendar-item-content[data-status="tel"]:hover { /* TELの日付のホバー効果をなし */
        background-color: #fff;
        border-color: #ccc;
    }
}


.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; /* ◯ の色をオレンジに */
}

/* 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: currentColor;
   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 はメディアクエリで調整 */
}

@media (min-width: 769px) {
    .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; /* チェック時の背景色を薄いオレンジに */
}

@media (min-width: 769px) {
    .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;
}

@media (min-width: 769px) {
    .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;
    }
}