/* バンドのミカタ 共通スタイルシート（最終完成版 - マージン調整）
  URL: https://tricoworks.jp/bandnomikata/css/common_styles.css
*/

:root {
    --ship-accent-red: #e53935;
    --ship-accent-blue: #1e88e5;
    --ship-accent-green: #2e7d32;
    --ship-bg-light: #fdfdfd;
    --ship-text-main: #333;
    --ship-text-sub: #666;
}

/* --- 共通見出し --- */
.midasi {
    text-align: left !important;
    margin: 30px 0 15px !important;
    border-bottom: 1px solid #004471;
    padding-bottom: 5px;
    font-weight: bold;
    color: #004471;
}

/* --- カート誘導バナー --- */
.cart-banner {
    text-align: center;
    font-weight: 900;
    padding: 15px 10px;
    color: var(--ship-accent-blue);
    background: #f0f7ff;
    border: 2px solid var(--ship-accent-blue);
    border-radius: 8px;
    margin: 25px 0;
    font-size: 1.05rem;
    box-shadow: 0 2px 10px rgba(30, 136, 229, 0.1);
}

/* --- 自動商品説明ボックス --- */
.auto-description-box {
    margin: 20px 0;
    padding: 20px;
    line-height: 1.8;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    color: #444;
    font-size: 0.95rem;
    text-align: left;
}
.description-feature {
    margin-bottom: 15px;
    padding: 12px 15px;
    background: #fff9f9;
    border-left: 4px solid var(--ship-accent-red);
    font-weight: bold;
}

/* --- 納期シミュレーター --- */
.shipping-timeline-container { margin: 25px 0; font-family: sans-serif; color: var(--ship-text-main); clear: both; text-align: left; }
.shipping-timeline-header { font-size: 0.85rem; font-weight: bold; margin-bottom: 12px; color: var(--ship-text-sub); display: flex; justify-content: space-between; align-items: center; }

.shipping-timeline-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--ship-bg-light);
    padding: 25px 15px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    position: relative;
}

.ship-step-box { flex: 0 0 130px; }
.ship-step-content {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 10px 5px;
    min-height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
    position: relative;
}
.ship-step-content:hover { background-color: #f9f9f9; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.ship-step-box.start .ship-step-content { border-color: var(--ship-accent-red); }
.ship-step-box.end .ship-step-content { border-color: var(--ship-accent-blue); }

.ship-change-btn { margin-top: 6px; font-size: 0.7rem; color: #fff; padding: 2px 8px; border-radius: 20px; display: inline-block; font-weight: bold; pointer-events: none; }
.ship-step-box.start .ship-change-btn { background: var(--ship-accent-red); }
.ship-step-box.end .ship-change-btn { background: var(--ship-accent-blue); }

.ship-date-display { font-weight: bold; font-size: 1.15rem; }

.ship-time-tag { font-size: 0.7rem; font-weight: bold; display: inline-block; padding: 2px 8px; border-radius: 4px; margin-top: 4px; }
.ship-time-tag.is-early { background: #f1f8e9; color: var(--ship-accent-green); border: 1px solid #c8e6c9; }
.ship-time-tag.is-late { background: #fdf2f2; color: var(--ship-accent-red); border: 1px solid #ffcdd2; }

.ship-timeline-arrow { flex: 1; height: 2px; background-color: #ddd; margin: 0 10px; position: relative; display: flex; justify-content: center; align-items: center; }
.ship-timeline-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border-left: 10px solid #ddd; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ship-lead-label { position: absolute; top: -30px; font-size: 0.8rem; background: #fff; padding: 3px 12px; border-radius: 20px; border: 1px solid #ddd; white-space: nowrap; color: var(--ship-text-main); font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

.ship-reduction-warning {
    margin: 20px auto; padding: 15px 20px; background: #fff5f5; border: 2px solid var(--ship-accent-red); border-radius: 12px; 
    color: #c62828; font-size: 0.95rem; font-weight: bold; text-align: center; line-height: 1.6; 
    animation: redPulse 2s infinite; width: fit-content; max-width: 95%; box-sizing: border-box;
}
.reduction-link { color: #c62828 !important; text-decoration: underline !important; font-weight: 900 !important; }
@keyframes redPulse { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.2); } 50% { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); } }

.ship-footer-note { font-size: 0.75rem; color: #999; margin: 10px 0; text-align: left; line-height: 1.6; }

/* --- 工程バナー --- */
.ship-banner-container { margin: 25px 0; border: 1px solid #ddd; background: #fff; overflow: hidden; font-family: sans-serif; text-align: left; }
.ship-banner-header { background-color: #555; color: #fff; padding: 8px 15px; font-size: 13px; font-weight: bold; }
.ship-banner-main { display: flex; padding: 20px 15px; gap: 15px; background: #fff; }
.ship-banner-flow { flex: 1.3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; }
.ship-banner-step { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 11px; font-weight: bold; color: #004471; padding: 10px 0; background: #eef7fd; border-radius: 6px; position: relative; line-height: 1.3; }
.ship-banner-icon { height: 35px; display: flex; align-items: center; justify-content: center; color: #55acee; }
.ship-banner-icon svg { width: 30px; height: 30px; fill: currentColor; }
.ship-banner-step-arrow { position: absolute; color: #f39800; font-size: 14px; font-weight: bold; }
.arr-r { right: -12px; top: 50%; transform: translateY(-50%); }
.arr-d { bottom: -12px; left: 50%; transform: translateX(-50%); }
.arr-l { left: -12px; top: 50%; transform: translateY(-50%); }
.ship-banner-highlight { flex: 0.7; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 2px solid #eee; padding-left: 15px; }
.ship-banner-days { color: #e60012; font-size: 1.25rem; font-weight: 900; border-bottom: 3.5px solid #e60012; line-height: 1.4; margin-bottom: 8px; text-align: center; }
.ship-banner-free { color: #4eb2d6; font-size: 32px; font-weight: 900; line-height: 1; text-align: center; }
.ship-banner-footer { background:#555; color:#fff; padding:8px 15px; font-size:13px; font-weight:bold; }

/* --- サイドカレンダー（極限再現・余白調整版） --- */
.side-calendar-wrapper {
    background: #fff;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    margin-bottom: 20px;
    width: 100%;
}

/* タイトルバーはフル幅 */
.category_title_new2 {
    background: #0088cc !important;
    color: #fff !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: left;
    display: flex;
    align-items: center;
    border-radius: 2px 2px 0 0;
}
.category_title_new2::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    background: #fff;
    margin-right: 10px;
}

/* 月タイトルは中央寄せのマージンを確保 */
.side-calendar-month-title {
    color: #0088cc !important;
    font-size: 15px !important;
    font-weight: bold !important;
    margin: 15px auto 8px auto !important; /* 左右中央 */
    padding-bottom: 3px !important;
    border-bottom: 1px solid #0088cc !important;
    display: block;
    width: 92%; /* 左右に余白 */
}

/* カレンダーテーブルの幅を92%に絞って中央寄せ */
table.calendar_table {
    width: 92% !important; /* フル幅から92%へ変更 */
    border-collapse: collapse !important;
    font-size: 12px !important;
    table-layout: fixed !important;
    border: 1px solid #ddd !important;
    margin: 0 auto 15px auto !important; /* 中央寄せ & 下マージン */
}

table.calendar_table th {
    background: #f9f9f9 !important;
    font-weight: normal !important;
    padding: 6px 0 !important;
    text-align: center !important;
    border: 1px solid #ddd !important;
    color: #666 !important;
}

table.calendar_table td {
    text-align: center !important;
    padding: 7px 0 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
    height: 28px;
}

table.calendar_table .sun,
table.calendar_table th:first-child { color: #e60012 !important; }
table.calendar_table .sat,
table.calendar_table th:last-child { color: #1e88e5 !important; }

table.calendar_table .holiday {
    background-color: #ffeded !important;
    color: #e60012 !important;
    font-weight: bold !important;
}

table.calendar_table .today {
    background-color: #ffffcc !important;
    font-weight: bold !important;
}

/* 注釈エリアのパディング調整 */
.calTXT {
    padding: 12px 15px !important; /* 左右の余白を多めに設定 */
    font-size: 11px !important;
    color: #333 !important;
    line-height: 1.6 !important;
    text-align: left;
}
.holidayBox {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ffeded;
    border: 1px solid #ffcdd2;
    vertical-align: middle;
    margin-right: 5px;
    color: transparent;
    overflow: hidden;
}

/* メニュー・レスポンシブ等は変更なし */
.ship-date-menu { position: fixed; width: 280px; background: #fff; border: 1px solid #ccc; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); display: none; z-index: 2147483647; max-height: 400px; overflow-y: auto; text-align: left; }
.ship-date-menu.is-show { display: block; animation: shipFadeIn 0.15s ease-out; }
.ship-menu-item { padding: 12px 15px; font-size: 0.9rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f9f9f9; color: #333; }
.ship-menu-item:hover { background-color: #f5f5f5; }
.ship-menu-tag { font-size: 0.65rem; padding: 2px 8px; border-radius: 12px; border: 1px solid #ddd; font-weight: bold; }
.ship-menu-tag.success { color: #2e7d32; background: #f1f8e9; border-color: #c8e6c9; }
.ship-menu-tag.warning { color: #c62828; background: #fff5f5; border-color: #ffcdd2; }

@media (max-width: 640px) {
    .shipping-timeline-flow { flex-direction: column; gap: 15px; }
    .ship-timeline-arrow { height: 40px; width: 2px; margin: 10px 0; }
    .ship-timeline-arrow::after { transform: rotate(90deg); right: -4px; bottom: -5px; top: auto; }
    .ship-lead-label { top: auto; left: 20px; }
}