@import url("reset.css");
.dopc {
  display: none;
}
/* common */
.fnDela {
  font-family: 'Dela Gothic One', cursive;
}
:root {
  --color-green1: #9CD000;
  --color-darkgray: #777;
  --color-yellow: rgb(253, 255, 130);
  --color-gray: #777;
}
body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--color-darkgray);
    background-color: rgb(34,34,34);
    background-size: cover;
    background-attachment: fixed;
}

/* ローディングアイコン設定 */
#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    font-weight: bold;
}
/*jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示*/
#loading.disappear{
  display: none;   
}

#wrapper {
    width: 100%;
    margin: 0 auto;
}
header #logo {
  /* ① 新ロゴは旧ロゴより描画部分が小さい（実測 456px幅 → 353px幅／キャンバスは同じ720px）ため、
     表示枠を 70% → 90% に広げて従来と同じ見た目の大きさに揃えている。 */
  width: 90%;
  margin: 20px auto 0px;
}
/* ① ロゴ下のエリア名（全国TOPでは出力されない） */
#logoAreaName {
  text-align: center;
  color: #e7c76d;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top: 2px;
}
main {
  padding: 10px;
}
h1,
h2 {
  font-size:30px;
  text-align: center;
  margin: 20px;
  background: -webkit-linear-gradient( 45deg, #e7c76d, #e7c76d 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #e7c76d;
}
.logotext{
  text-align: center;
  /* 端末幅に応じて縮小し、1〜2文字だけ折り返す崩れを防ぐ。
     最長行（エリア名を含む1行目）が画面内に収まるよう vw で追従させる。 */
  font-size: clamp(11px, 3.4vw, 16px);
  line-height: 1.9;
  color: #fff;
  margin-top: 25px;
  padding: 0 8px;
}
/* 店舗一覧 */
/* 店舗一覧のタブ */
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.tac {
  text-align: center;
}
#shopListSelecter {
  border: solid 1px #ccc;
  border-bottom: solid 5px #ccc;
  border-radius: 5px 5px 0 0;
  margin: 0px 10px 0px 10px;
}
#shopListSelecter li:nth-child(1) {
  border-left: none;
}
#shopListSelecter li:nth-child(1).current {
  background: var(--color-green1);
  color: #fff;
}
#shopListSelecter li:nth-child(2).current {
  background: #432dbb;
  color: var(--color-yellow);
}
#shopListSelecter li:nth-child(3).current {
  background: #ff9c86;
  color: #f2121d;
}
#shopListSelecter li {
  width: calc(100% /3);
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  border-left: solid 1px #ccc;
}
#shopListSelecter .timeZoneLabel {
  margin-left: 4px;
  font-size: 13px;
}

/* 店舗一覧 */
.shopList {
  margin-bottom: 10px;
}
.shopList li {
  width: 100%;
}
.shopList.small li {
  width: calc(100% / 2);
}
.shopList li .inner {
  padding: 10px;
  margin: 10px;
  /* background: rgba( 255, 255, 255, 0.9 ); */
  box-shadow: 0 8px 32px 0 #e7c76d4d;
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.shopList li a {
  display: block;
}
.shopList li a:hover {
  transform: scale(1.01);
  text-decoration: none;
  color: var(--color-green2)
}
.shopList li .shopInfo li, .shopList li .systemWrap ul li {
  width: 100%;
}
.shopList li .shopInfo li:first-child {
  font-weight: bold;
  font-size: 20px;
}
.shopList li .shopInfo li {
  border-bottom: solid 1px #ccc;
}
.shopList li .systemWrap {
  position: relative;
}
.shopList li .systemWrap ul li span {
  font-weight: bold;
  padding-right: 10px;
}
.shopList li .systemWrap .qr {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 65px;
    width: 65px;
}
.shopList li .systemWrap .qr img {
  width: 100%;
}
.shopList li .imgWrap .qr {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 50px;
}

/* 店舗一覧の店舗詳細 */
.shopDatail .shopName {
  font-size: 24px;
  /* border-bottom: solid 3px #ccc; */
  font-weight: bold;
  padding: 0 5px;
}
.shopDatail .shopNameHeader {
  justify-content: left;
  font-size: 12px;
  margin-bottom: 10px;
}
.shopDatail .shopNameHeader li {
  border-radius: 20px;
  padding: 0 5px;
  margin-right: 5px;
  height: 18px;
  position: relative;
  top: 5px;
}
.shopDatail .shopNameHeader li:nth-child(2) {
  background: #432dbb;
  color: var(--color-yellow);
  margin-top: 10px;
  margin-left: auto;
}
.shopDatail .shopNameHeader li:nth-child(3) {
  background: #ff9c86;
  color: #f2121d;
  margin-top: 10px;
}
.shopDatail .shopNameHeader li.disabled {
  background: #ccc;
  color: #979797;
}
.shopDatail .shopNameHeader li {
  border-radius: 20px;
  padding: 0 5px;
  margin-right: 5px;
  height: 18px;
  position: relative;
  top: 5px;
  width: auto;
}
.shopDatail .shopName{
  color: #fff;
}
.shopDatail .shopNameKana{
  margin-left: 6px;
  border-bottom: solid 1px #ccc;
}

/* ⑬ 店名部分：エリア名と月/太陽アイコンを同じ行（エリア名=左 / アイコン=右端）、
      店名は独立行にしてフリガナとの重なりを解消 */
.shopDatail .shopAreaRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  margin-bottom: 2px;
}
.shopDatail .shopArea{
  font-size: 11px;
  line-height: 1.4;
  color: #e7c76d;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shopDatail .timeZoneIcons{
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 5px;
  font-size: 12px;
  margin-left: 8px;
}
.shopDatail .timeZoneIcons li{
  /* `.shopList li { width:100% }` を打ち消さないと縦積みになる */
  width: auto;
  flex: 0 0 auto;
  border-radius: 20px;
  padding: 0 6px;
  height: 20px;
  line-height: 20px;
}
.shopDatail .timeZoneIcons li.moon{ background: #432dbb; color: var(--color-yellow); }
.shopDatail .timeZoneIcons li.sun{ background: #ff9c86; color: #f2121d; }
.shopDatail .timeZoneIcons li.disabled{ background: #ccc; color: #979797; }
.shopDatail .shopNameHeader{
  display: block;
  margin-bottom: 4px;
}
.shopDatail .shopNameHeader li.shopName{
  height: auto;
  top: 0;
  margin-right: 0;
  line-height: 1.25;
  word-break: break-word;
}
.shopDatail .shopNameKana{
  margin-top: 2px;
}

/* ⑫ 掲載プランの表示差異：Aプラン＝金枠 / Bプラン＝銀枠
   ------------------------------------------------------------
   額縁のような装飾感を出すため、以下を重ねている。
     1. 太めの多段グラデーション枠（金属の映り込みを表現）
     2. 枠の内外に細いハイライト線（box-shadow で二重枠に見せる）
     3. 四隅のコーナー飾り（::before の複数背景で L 字を4つ描画）
     4. 外側のグロー */
.shopList li.planA .inner,
.shopList li.planB .inner{
  position: relative;
  border-width: 5px;
  border-style: solid;
  padding: 14px;
}
.shopList li.planA .inner::before{
  content: "";
  position: absolute;
  top: 4px; right: 4px; bottom: 4px; left: 4px;
  pointer-events: none;
}

/* --- Aプラン：金（枠の光沢が流れる） ---
   Bプランと同じく背景2枚重ねの方式。上位プランなので銀よりゆっくり動かし、
   周期をずらすことで全カードが同時に光る不自然さを避けている。 */
.shopList li.planA .inner{
  border-color: transparent;
  background-image:
    linear-gradient(rgb(34,34,34), rgb(34,34,34)),
    linear-gradient(115deg,
      #6d5210 0%,  #b8912c 8%,  #f7e08a 16%, #fff8dc 22%,
      #d4af37 30%, #8a6d1f 40%, #d4af37 50%, #fff8dc 58%,
      #f7e08a 66%, #b8912c 76%, #8a6d1f 88%, #6d5210 100%);
  background-origin: border-box;
  -webkit-background-clip: padding-box, border-box;
          background-clip: padding-box, border-box;
  background-repeat: no-repeat, repeat-x;
  background-size: auto, 300% 100%;
  background-position: 0 0, 0 0;
  animation: goldShine 9s linear infinite;
  box-shadow:
    inset 0 0 0 1px rgba(255,248,220,.5),
    inset 0 0 24px rgba(212,175,55,.16),
    0 0 0 1px rgba(109,82,16,.9),
    0 6px 26px rgba(212,175,55,.4);
}
@keyframes goldShine{
  from { background-position: 0 0,    0% 0; }
  to   { background-position: 0 0, -300% 0; }
}
.shopList li.planA .inner::before{
  background:
    linear-gradient(#ffeaa7,#ffeaa7) left  top    / 16px 2px no-repeat,
    linear-gradient(#ffeaa7,#ffeaa7) left  top    / 2px 16px no-repeat,
    linear-gradient(#ffeaa7,#ffeaa7) right top    / 16px 2px no-repeat,
    linear-gradient(#ffeaa7,#ffeaa7) right top    / 2px 16px no-repeat,
    linear-gradient(#ffeaa7,#ffeaa7) left  bottom / 16px 2px no-repeat,
    linear-gradient(#ffeaa7,#ffeaa7) left  bottom / 2px 16px no-repeat,
    linear-gradient(#ffeaa7,#ffeaa7) right bottom / 16px 2px no-repeat,
    linear-gradient(#ffeaa7,#ffeaa7) right bottom / 2px 16px no-repeat;
}

/* --- Bプラン：銀（枠の光沢が流れる） ---
   border-image はアニメーションできないため、背景を2枚重ねる方式にしている。
     1枚目 = カードの地色（padding-box までで切る）
     2枚目 = 金属のグラデーション（border-box まで＝枠の部分に出る）
   2枚目の background-position を動かすことで光沢が流れて見える。
   グラデーションの先頭と末尾を同じ色にしてあるので、繰り返しても継ぎ目が出ない。 */
.shopList li.planB .inner{
  border-color: transparent;
  background-image:
    linear-gradient(rgb(34,34,34), rgb(34,34,34)),
    linear-gradient(115deg,
      #6f7a80 0%,  #9aa7ae 8%,  #e8f1f6 16%, #ffffff 22%,
      #c8d2d8 30%, #7d878d 40%, #c8d2d8 50%, #ffffff 58%,
      #e8f1f6 66%, #9aa7ae 76%, #7d878d 88%, #6f7a80 100%);
  background-origin: border-box;
  -webkit-background-clip: padding-box, border-box;
          background-clip: padding-box, border-box;
  background-repeat: no-repeat, repeat-x;
  background-size: auto, 300% 100%;
  background-position: 0 0, 0 0;
  animation: silverShine 7s linear infinite;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5),
    0 0 0 1px rgba(111,122,128,.85),
    0 6px 26px rgba(220,232,240,.32);
}
@keyframes silverShine{
  from { background-position: 0 0,    0% 0; }
  to   { background-position: 0 0, -300% 0; }
}
/* 動きを減らす設定にしている利用者には静止させる */
@media (prefers-reduced-motion: reduce){
  .shopList li.planA .inner,
  .shopList li.planB .inner{ animation: none; }
}

.shopDatail .shopHoliday{
  margin-left: 6px;
  border-bottom: solid 1px #ccc;
  color: #ccc;
}
.shopDatail .shopOpen{
  margin-left: 6px;
  border-bottom: solid 1px #ccc;
  color: #ccc;
}
.shopDatail .description {
  font-size: 14px;
  line-height: 18px;
  /* border: solid 1px #ccc; */
  padding: 3px;
  margin-top: 5px;
  color: #fff;
}
.shopDatail .coupon {
  padding: 0 5px;
  height: 58px;
  border-radius: 3px;
  font-weight: bold;
  height: auto;
  overflow: hidden;
  font-size: 14px;
  margin-top: 5px;
  background-color: #fff;
}
.shopDatail .imgWrap{
  margin-top: 5px;
}
.shopDatail .caption{
  text-align: left;
  font-size: 16px;
  color: red;
}

/* 店舗詳細のスタッフの画像スライダー */
/* ⑦ 一覧のキャストスライダー（slick を廃止し、横スクロール＋自動ドリフトに変更） */
.castSlider {
  margin: 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.castSlider::-webkit-scrollbar { display: none; }
.castTrack {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start; /* キャストが少なくても左寄せ */
  align-items: flex-start;
  width: max-content;
}
.castItem {
  width: 38vw;
  max-width: 150px;
  flex: 0 0 auto;
  margin-right: 8px;
}
.castLink { display: block; }
.castPhoto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;   /* 推奨サイズ比で強制的に揃える */
  overflow: hidden;
  background: #333;
}
.castPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.castName {
  display: block;
  height: 25px;
  line-height: 25px;
  padding: 0 4px;
  background-color: #ccc;
  color: #000;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;      /* 名前は必ず1行 */
  overflow: hidden;
  text-overflow: ellipsis;  /* 長い場合は「…」で省略 */
}

/* ⑧ 拡大表示（colorbox を廃止した自前モーダル） */
body.castModalOpen { overflow: hidden; }
.castModal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(0,0,0,.88);
  display: flex;
  align-items: center;
}
.castModal[hidden] { display: none; }
.castModalClose {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  padding: 6px 10px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.castModalViewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;   /* 縦には動かさない */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.castModalViewport::-webkit-scrollbar { display: none; }
.castModalTrack {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  padding: 0 11vw;   /* 両端に前後の写真を少し見せる */
}
.castModalItem {
  width: 78vw;
  flex: 0 0 auto;
  margin-right: 10px;
}
.castModalPhoto {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 76vh;
  overflow: hidden;
  background: #111;
}
.castModalPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.castModalName {
  margin: 8px auto 0;
  padding: 4px 10px;
  max-width: 90%;
  background-color: #ccc;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ページャ（2段組み）
   上段＝前後移動 / 下段＝最初・ページ番号・最後。
   1行に詰め込むと端末幅によって折り返しが乱れるため段を分けている。 */
.frontPager{
  margin: 30px auto;
  text-align: center;
}
.frontPager ul{
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.frontPager li{
  list-style: none;
  width: auto;          /* `.shopList li { width:100% }` の影響を受けないように */
  flex: 0 0 auto;
}
.frontPager a,
.frontPager span{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  text-decoration: none;
  line-height: 1.2;
  border: 1px solid #d5d5d5;
  background: #fff;
  color: #333;
}
/* 移動できない側（1ページ目の「前へ」など）は消さずに非活性表示。
   消すと段の高さが変わってページ移動のたびにガタつくため。 */
.frontPager li.disabled span{
  border-color: #4a4a4a;
  background: #3a3a3a;
  color: #8a8a8a;
}
.frontPager li.current span{
  background: #ff5e74;
  border-color: #ff5e74;
  color: #fff;
  font-weight: 700;
}

/* 上段：前後のページ移動。画面幅を2分割して並べる */
.frontPager .frontPagerStep{
  margin: 0 10px 16px;
  gap: 10px;
}
.frontPagerStep li{
  flex: 1 1 0;
  min-width: 0;
}
.frontPagerStep a,
.frontPagerStep span{
  gap: 6px;
  min-height: 54px;
  padding: 8px 6px;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
}

/* 下段：最初・ページ番号・最後
   «(最初) + 番号5つ + »(最後) の計7個。
   320px 幅でも 7×38px + 6×4px = 290px で収まるため段落ちしない。 */
.frontPager .frontPagerNum{
  flex-wrap: wrap;
  margin: 0 10px;
  gap: 4px;
}
.frontPagerNum li{
  flex: 0 1 auto;
  min-width: 0;
}
.frontPagerNum a,
.frontPagerNum span{
  min-width: 38px;
  height: 44px;
  padding: 0 2px;
  font-size: 15px;
}

/* 件数表示。参考画像に合わせて帯状に */
.frontPagerInfo{
  margin: 12px 10px 0;
  padding: 12px 10px;
  background: #333;
  border-radius: 3px;
  color: #ccc;
  font-size: 13px;
}
.frontPagerInfo strong{
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-right: 8px;
}

/* 店舗一覧の電話、地図ボタン */
.shopListContactBtnGroup{
  margin-top: 10px;
}
.shopListContactBtnGroup .btn {
  width: calc(50% - 4px);
  text-align: center;
  background: #f5f5f5;
  margin: 2px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
.shopListContactBtnGroup .btn a {
  text-decoration: none;
  display: block;
  font-weight: bold;
  color: #fff;
}
.shopListContactBtnGroup .btn.tel {
  background: var(--color-green1);
}
.shopListContactBtnGroup .btn.map {
  background: #2FA5E0;
}
.shopListContactBtnGroup .btn.datanone{
  background: #777;
}

/* フッター */
footer {
  /* background: -webkit-linear-gradient( 45deg, #fffbbd, #e7c76d 90%); */
  color: #fff;
  text-align: center;
  border-top: solid 3px #e7c76d;
}
/* Q&A見出し画像：reset の `img { display:block }` により左寄せになるため中央に寄せる
   （親の text-align:center はブロック要素の img には効かない） */
#qa img {
  margin-left: auto;
  margin-right: auto;
}
footer .inner {
  width: 100%;
  padding: 20px;
  margin: 0 auto;
}
footer #footerLogo {
  width: 200px;
  margin: 20px auto;
}
footer address {
    font-size: 13px;
    line-height: 23px;
}
footer #areaNav .title {
  text-align: center;
  font-weight: bold;
  margin-top: 20px;
}
footer #areaNav ul {
  width: 100%;
  padding: 10px;
  float: left;
  justify-content: left;
}
footer #areaNav ul li {
  padding-right: 5px;
  font-size: 15px;
  width: 100%;
}
footer #areaNav ul li:nth-child(1) {
  font-weight: bold;
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
  border-bottom: solid 1px #e5e5e5;
  text-decoration: none;
}
footer #footerBottomNav {
  margin: 20px;
  font-size: 12px;
}
footer #footerBottomNav li::after {
  content: "｜";
}

/* Q&A */
.qaarea dt {
  position: relative;
  font-weight: bold;
  font-size: 90%;
  border-bottom: 1px solid #000;
  text-align: left;
}
.qaarea dt:before {
  content: 'Q';
  color: #C0C0C0;
  font-size: 24px;
  margin-right: 5px;
}
.qaarea dd {
  padding: 5px;
  text-align: left;
  font-size: 12px;
  margin-bottom: 10px;
}
.qaarea dd:before {
  content: 'A';
  color: #BC9C22;
  font-size: 24px;
  margin-right: 5px;
}

/* プライバシーポリシー、Q&A */
main .title {
  font-family: 'RocknRoll One', sans-serif;
  font-size: 17px;
  border-bottom: solid 3px #e7c76d;
  line-height: 24px;
  padding: 5px;
  margin: 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

article {
  padding: 10px;
  background: #333;
  border-radius: 10px;
  font-size: 14px;
  line-height: 24px;
  color: aliceblue;
}

article ul {
  display: list-item;
  margin-left: 20px;
}

article ul.sub {
  display: list-item;
  list-style: none;
  padding: 10px;
}

.linkBtn {
    background: -webkit-linear-gradient( 45deg, var(--color-green1), var(--color-green2) 90%);
    color: #fff;
    text-align: center;
    display: block;
    max-width: 80%;
    padding: 10px;
    border-radius: 10px;
    font-size: 20px;
    letter-spacing: 4px;
    margin: 0 auto 100px;
}
.linkBtn span {
  display: block;
  font-size:12px;
  color: #fdff70;
}