/* obon_hours.css
   お盆期間 営業時間変更ページ 専用スタイル
   既存サイトの共通CSS（bar_red, box, pankuzu 等）とは独立して読み込む前提。 */

:root{
  --obon-red:#E40500;
  --obon-red-dark:#B80400;
  --obon-gray-bg:#F6F6F4;
  --obon-line:#E3E1DC;
  --obon-text:#2A2724;
  --obon-text-sub:#767268;
  --obon-extend-bg:#FFF1EC;
  --obon-extend-text:#B80400;
  --obon-closed-bg:#F1F1F1;
  --obon-closed-text:#8A8580;
}

.note-list{
  font-size:12.5px;
  color:var(--obon-text-sub);
  line-height:1.9;
  margin:8px 0 4px;
  padding-left:1.1em;
}
.note-list li{margin-bottom:2px;}

/* ---- controls ---- */
.obon-controls{
  position:sticky;
  top:0;
  z-index:30;
  background:#fff;
  padding:12px 0 10px;
  border-bottom:2px solid var(--obon-line);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.obon-area-tabs{display:flex;flex-wrap:wrap;gap:6px;}
.obon-area-tab{
  appearance:none;
  border:1px solid var(--obon-red);
  background:#fff;
  color:var(--obon-red);
  font-size:13px;
  font-weight:700;
  padding:7px 14px;
  border-radius:20px;
  cursor:pointer;
  transition:.15s;
  white-space:nowrap;
}
.obon-area-tab:hover{background:var(--obon-extend-bg);}
.obon-area-tab.active{background:var(--obon-red);color:#fff;}

.obon-search-box{position:relative;flex:none;width:230px;}
.obon-search-box input{
  box-sizing:border-box;
  width:100%;
  padding:8px 12px;
  border:1px solid var(--obon-line);
  border-radius:20px;
  font-size:13px;
  background:var(--obon-gray-bg);
}
.obon-search-box input:focus{outline:2px solid var(--obon-red);outline-offset:1px;}

@media (max-width:560px){
  .obon-controls{flex-direction:column;align-items:stretch;}
  .obon-search-box{width:100%;}
  .obon-search-box input{font-size:16px;} /* iOSの自動ズーム対策 */
}

/* ---- section / table ---- */
.obon-area-section{margin-bottom:38px;}
.obon-area-title{
  font-size:15px;
  font-weight:700;
  color:var(--obon-text);
  border-left:4px solid var(--obon-red);
  padding-left:10px;
  margin:18px 0 10px;
}
.obon-table-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid var(--obon-line);
  border-radius:6px;
  -webkit-overflow-scrolling:touch;
}
table.obon-hours{
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  font-size:12.5px;
}
table.obon-hours th, table.obon-hours td{
  border-bottom:1px solid var(--obon-line);
  border-right:1px solid var(--obon-line);
  padding:9px 10px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* 店舗名列・日付列とも固定幅にすることで、店舗数や表記の長さが違っても
   すべてのエリアの表で同じ列幅になるようにする */
table.obon-hours th:first-child, table.obon-hours td:first-child{
  width:170px;
}
table.obon-hours th:not(:first-child), table.obon-hours td:not(:first-child){
  width:110px;
}
table.obon-hours thead th{
  background:#fff;
  position:sticky;
  top:0;
  z-index:5;
  font-weight:700;
  color:var(--obon-text);
  border-bottom:2px solid var(--obon-red);
}
table.obon-hours tbody th{
  position:sticky;
  left:0;
  z-index:4;
  background:var(--obon-gray-bg);
  text-align:left;
  font-weight:600;
  border-right:2px solid var(--obon-line);
}
table.obon-hours tbody th a{color:var(--obon-text);text-decoration:underline;}
table.obon-hours thead th:first-child{
  position:sticky;
  left:0;
  z-index:6;
  text-align:left;
  background:#fff;
  border-right:2px solid var(--obon-line);
}

.cell-normal{color:var(--obon-text-sub);background:#ffffff;}
.cell-extend{
  background:var(--obon-extend-bg);
  color:var(--obon-extend-text);
  font-weight:700;
  border-radius:3px;
}
.cell-closed{
  background:var(--obon-closed-bg);
  color:var(--obon-closed-text);
}
.cell-blank{color:#C9C5BE;background:#ffffff;}

.obon-no-result{
  padding:30px;
  text-align:center;
  color:var(--obon-text-sub);
  font-size:13px;
  display:none;
}
.obon-scroll-hint{
  display:none;
  font-size:11px;
  color:var(--obon-text-sub);
  margin:4px 2px 0;
}
@media (max-width:700px){
  .obon-scroll-hint{display:block;}
}