@charset "UTF-8";
/** app css */

:root {
  --body-bgcolor: #f1f1f1;
  --content-width: 1300px;
  --content-bgcolor: rgb(255 255 255 / 90%);
  --tbl-hd-bgcolor: var(--tea);

/*  --app-theme-color: red;*/
}

body { background-image: url(/resources/app/img/bg4.png); }
.content { width: var(--content-width); max-width: var(--content-width); min-height: calc(100vh - 1px); min-height: calc(100dvh - 1px); margin: 0 auto; background-color: var(--content-bgcolor); }
.btn-outer .btn ~ .btn { margin-left: 40px; }

/* 共通上書き */
.btn { background-image: none !important; }
table.list-tbl tr th, table.tbl-th tr th { font-weight: normal; letter-spacing: 0.1em; padding: 4px 0; }
.list-tbl:not(.no-sort) .sort.asc label, .list-tbl:not(.no-sort) .sort.desc label, .list-box:not(.no-sort) .sort.asc label, .list-box:not(.no-sort) .sort.desc label { border-bottom-color: transparent; }
.list-tbl:not(.no-sort) .sort:hover label, .list-box:not(.no-sort) .sort:hover label { border-bottom-color: transparent;  }
tr.to-det-btn, tr[onclick] { cursor: pointer; }
.required_clm::after { display: none; }
input, textarea, select, .toggle-chk { font-size: 16px; height: 29px; }
input, textarea, select { padding: 4px 8px; }
.list-box .tbl-outer { background-color: #fff; }
.tab-outer[data-tab-c="tea"] > .tab-content { background-color: #f1fbfb; }
.btn-outer { padding: 12px 0; }

/* message */
.msgbox-outer { z-index: 99; position: fixed; top: 70px; left: 50%; transform: translateX(-50%); font-size: 16px; max-height: 850px; border: 2px solid #000; padding: 8px 12px; letter-spacing: 0.1em; min-width: 350px; border-radius: 6px; max-height: 400px; overflow-y: auto; }
.msgbox-outer:empty { display: none; }
.msgbox-outer.mb-err { background-color: rgb(255, 233, 233, 0.9); border-color: var(--dan); color: var(--dan); }
.msgbox-outer.mb-wrn { background-color: rgb(255, 255, 233, 0.9); border-color: var(--war); color: var(--war); }
.msgbox-outer.mb-cmp { background-color: rgb(233, 255, 233, 0.9); border-color: var(--suc); color: var(--suc); }
.msgbox-outer > li { overflow: visible; text-overflow: clip; white-space: break-spaces; font-size: 15px; }

/* 共通エラー画面 */
.err-box { min-width: 350px; max-width: 850px; }
.err-box h1 { font-size: 25px; font-weight: bold; padding: 10px 10px; }
.err-box p { padding: 0 10px; }
.fail-ax {
  padding: 8px 20px;
  margin: 20px 40px;
  display: inline-block;
  background-color: var(--alert);
  border: 2px solid;
  background-color: rgb(255, 233, 233, 0.9);
  color: var(--dan);
  line-height: 1.4;
  border-radius: 4px;
}

/* 必須マーク */
[data-ie="edit"] form dl:has([data-vc-type*="required"]) dt::after {
  content: '*';
  color: var(--danger);
}

/* 表示⇔編集 */
[data-ie="init"] .edit-only,
[data-ie="edit"] .init-only,
[data-ie="init"] .required_clm::after,
[data-ie="init"] .angle,
[data-ie="init"] .datepicker-here-wrap.icn-cal::after,
[data-ie="init"] .date-clear-btn,
[data-ie="init"] .fjtime-box::before,
[data-ie="init"] [type="radio"]:not(:checked) + label,
[data-ie="init"] [type="radio"] + label:not([class*="u-"])::before,
[data-ie="init"] [type="radio"] + label:not([class*="u-"])::after,
[data-ie="init"] [type="checkbox"]:not(:checked) + label
 { display: none !important; }
[data-ie="init"] input,
[data-ie="init"] textarea :not(.memo-editable),
[data-ie="init"] select,
[data-ie="init"] [type="radio"] + label,
[data-ie="init"] [type="checkbox"] + label
 { border-color: transparent; pointer-events: none; background-color: transparent; }
[data-ie="init"] [type="radio"] + label,
[data-ie="init"] [type="checkbox"] + label
 { color: #555 !important; }
[data-ie="init"] .band-rdo input[type="radio"]:checked + label
 { background-color: transparent !important; width: 100% !important; padding: 0; }
[data-ie="init"] .band-rdo input[type="checkbox"]:checked + label
 { background-color: transparent !important; padding: 0; }
[data-ie="init"] select { appearance: none; }
[data-ie="init"] .toggle-chk label { display: none; }
[data-ie="init"] .toggle-chk[data-off-lbl]:has([type="checkbox"]:checked)::before { display: none; }
[data-ie="init"] .toggle-chk[data-on-lbl]:not(:has([type="checkbox"]:checked))::after { display: none; }
[data-ie="init"] .toggle-chk[data-off-lbl]::before, [data-ie="init"] .toggle-chk[data-on-lbl]::after { color: #555 !important; }
/* 表示⇔編集＞placeholder */
[data-ie="init"] [placeholder]:empty { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
[data-ie="init"] :placeholder-shown { color: transparent; }
[data-ie="init"] ::-webkit-input-placeholder { color: transparent; } /* Google Chrome, Safari, Opera 15+, Android, iOS */
[data-ie="init"] :-moz-placeholder { color: transparent; opacity: 0; } /* Firefox 18- */
[data-ie="init"] ::-moz-placeholder { color: transparent; opacity: 0; } /* Firefox 19+ */
[data-ie="init"] :-ms-input-placeholder { color: transparent; } /* IE 10+ */
.l2d-det .det-content > .kurukuru {
  font-size: 100px;
  margin: 80px 0;
  text-align: center;
}

/* カテゴリ */
[data-cate-id].cate-lbl {
  border-radius: 20px;
  color: #ffffff;
}
[data-cate-id].cate-lbl {
  display: inline-block;
  padding: 6px 20px;
  width: 104px;
  text-align-last: justify;
  text-align: center;
}
[data-cate-id="1"].cate-lbl { padding: 6px 24px; }
[data-cate-id="4"].cate-lbl { padding: 6px 12px; }
[data-cate-id].cate-lbl, [data-cate-id].shop-info-wrap .shop-box, [data-cate-id].ticket-box .ticket-name { background-color: var(--gra); }
[data-cate-id="1"].cate-lbl, [data-cate-id="1"].shop-info-wrap .shop-box, [data-cate-id="1"].ticket-box .ticket-name { background-color: var(--tmt); }
[data-cate-id="2"].cate-lbl, [data-cate-id="2"].shop-info-wrap .shop-box, [data-cate-id="2"].ticket-box .ticket-name { background-color: var(--blu); }
[data-cate-id="3"].cate-lbl, [data-cate-id="3"].shop-info-wrap .shop-box, [data-cate-id="3"].ticket-box .ticket-name { background-color: var(--suc); }
[data-cate-id="4"].cate-lbl, [data-cate-id="4"].shop-info-wrap .shop-box, [data-cate-id="4"].ticket-box .ticket-name { background-color: var(--pur); }
[data-cate-id="5"].cate-lbl, [data-cate-id="5"].shop-info-wrap .shop-box, [data-cate-id="5"].ticket-box .ticket-name { background-color: var(--red); }
[name*="cateId"] option[value="1"], [data-cate-id="1"].ticket-box [data-use-cnt] { color: var(--tmt); }
[name*="cateId"] option[value="2"], [data-cate-id="2"].ticket-box [data-use-cnt] { color: var(--blu); }
[name*="cateId"] option[value="3"], [data-cate-id="3"].ticket-box [data-use-cnt] { color: var(--suc); }
[name*="cateId"] option[value="4"], [data-cate-id="4"].ticket-box [data-use-cnt] { color: var(--pur); }
[name*="cateId"] option[value="5"], [data-cate-id="5"].ticket-box [data-use-cnt] { color: var(--red); }
[data-cate-id="1"].ticket-box { background-color: var(--tmt-tntn); border-color: var(--tmt); }
[data-cate-id="2"].ticket-box { background-color: var(--blu-tntn); border-color: var(--blu); }
[data-cate-id="3"].ticket-box { background-color: var(--suc-tntn); border-color: var(--suc); }
[data-cate-id="4"].ticket-box { background-color: var(--pur-tntn); border-color: var(--pur); }
[data-cate-id="5"].ticket-box { background-color: var(--red-tntn); border-color: var(--red); }
[data-cate-id="1"].tri-t-r::after { border-top-color: var(--tmt); }
[data-cate-id="2"].tri-t-r::after { border-top-color: var(--blu); }
[data-cate-id="3"].tri-t-r::after { border-top-color: var(--suc); }
[data-cate-id="4"].tri-t-r::after { border-top-color: var(--pur); }
[data-cate-id="5"].tri-t-r::after { border-top-color: var(--red); }
.st-list-wrap li:not(.ticket-box)[data-cate-id="1"] { background-color: var(--tmt-tntn); }
.st-list-wrap li:not(.ticket-box)[data-cate-id="2"] { background-color: var(--blu-tntn); }
.st-list-wrap li:not(.ticket-box)[data-cate-id="3"] { background-color: var(--suc-tntn); }
.st-list-wrap li:not(.ticket-box)[data-cate-id="4"] { background-color: var(--pur-tntn); }
.st-list-wrap li:not(.ticket-box)[data-cate-id="5"] { background-color: var(--red-tntn); }

.cate-box {
  display: flex;
}
.cate-box > li {
  flex-grow: 1;
  border-bottom: 6px solid #000;
  padding: 8px 0 6px;
  text-align: center;
  background-image: linear-gradient(0deg, var(--gra-op20) 0%, #fff 90%);
  color: #777;
}
.cate-box > li.actv { color: #000; text-decoration: underline; text-decoration-style: wavy; }
.cate-box > li[data-cate-id="1"] { border-bottom-color: var(--tmt); background-image: linear-gradient(0deg, var(--tmt-op40) 0%, #fff 90%); }
.cate-box > li[data-cate-id="2"] { border-bottom-color: var(--blu); background-image: linear-gradient(0deg, var(--blu-op40) 0%, #fff 90%); }
.cate-box > li[data-cate-id="3"] { border-bottom-color: var(--suc); background-image: linear-gradient(0deg, var(--suc-op40) 0%, #fff 90%); }
.cate-box > li[data-cate-id="4"] { border-bottom-color: var(--pur); background-image: linear-gradient(0deg, var(--pur-op40) 0%, #fff 90%); }
.cate-box > li[data-cate-id="5"] { border-bottom-color: var(--red); background-image: linear-gradient(0deg, var(--red-op40) 0%, #fff 90%); }

/* アイコン */
[data-icon-id]::before {
  font-family: 'Font Awesome 5 Free';
  border-radius: 12px;
  width: 40px;
  height: 36px;
  display: inline-block;
  text-align: center;
  line-height: 36px;
  font-size: 24px;
}
.shop-box.sml [data-icon-id]::before {
  width: 32px;
  height: 28px;
  line-height: 28px;
  font-size: 20px;
  border-radius: 8px;
}
.shop-box {
  display: flex;
  gap: 12px;
  align-items: center;
}
.shop-box.sml {
  gap: 4px;
}
.shop-box dd {
  font-size: 22px;
}
.shop-box.sml dd {
  font-size: 18px;
}
.shop-box:not(.sml) dt[data-icon-id] { /* 店名の横のアイコンは無い方が良さそう */
  display: none;
}

/* 属性情報 */
.attr-box dl ~ dl { margin-top: 20px; }
.attr-box dl { width: 100%; }
.attr-box dl.w50 { width: 47%; }
.attr-box dl.w60 { width: 58%; }
.attr-box dl dt { font-style: italic; text-decoration: underline; text-decoration-style: wavy; letter-spacing: 0.2em; }
.attr-box dl dd { padding: 12px 0 0 20px; }

/* ユーザー用 店舗一覧 */
.shop-list-wrap li { margin: 12px 0; padding: 8px 4px; min-height: 92px; border-bottom: 1px solid #999; }
.shop-list-wrap li > .clm1 { padding-right: 4px; }
.shop-list-wrap li > .clm2 { width: 100px; text-align: center; }
.shop-list-wrap li > .clm2 img { height: 75px; }
.shop-list-wrap li > .clm1 .txa-box { margin-top: 6px; }

/* ユーザーフッター（プレビューにも使う） */
footer.menu-wrap ul {
  display: flex;
  border-top: 1px solid #ccc;
}
footer.menu-wrap ul li {
  width: 50%;
  text-align: center;
  padding: 4px 0 2px;
  line-height: 1.3;
  height: 56px;
  cursor: pointer;
}
footer.menu-wrap li[onclick]::before {
  font-family: 'Font Awesome 5 Free';
  display: block;
  font-size: 22px;
}
footer.menu-wrap li[onclick*="/uticket"]::before {
  content: '\f09d';
}
footer.menu-wrap li[onclick*="/ushop"]::before {
  content: '\f54e';
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px #555;
}
[data-jsp-path*="ticket"] .menu-wrap li[onclick*="/uticket"],
[data-jsp-path*="shop"] .menu-wrap li[onclick*="/ushop"] {
  color: var(--tea);
}
[data-jsp-path*="shop"] .menu-wrap li[onclick*="/ushop"]::before {
  -webkit-text-stroke: 1px var(--tea);
}


/* プレビュー */
.preview-box .sp-cover {
  padding: 40px 8px;
  background-color: #000;
  border-radius: 16px;
  position: relative;
}
.preview-box .sp-cover::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 8px;
  right: 8px;
  background-color: var(--content-bgcolor);
  pointer-events: none;
}
.preview-box .sp-cover .sp-screen {
  height: 667px;
  background-image: url(/resources/app/img/bg4.png);
  overflow: auto;
  scrollbar-color: #000 #fff;
  scrollbar-width: thin;
}
.preview-box .sp-cover .sp-screen > * {
  position: relative;
}

/* 店舗情報 */
.shop-info-wrap .shop-box {
  padding: 12px 8px;
  justify-content: center;
  color: #fff;
}
.shop-info-wrap dl:has([data-prev-link]):not(.shop-box) {
  margin: 12px 0;
  padding: 12px 8px;
}
.shop-info-wrap [data-prev-link="shop.postCode"] {
  margin-bottom: 6px;
}
.shop-info-wrap dl:has([data-prev-link]) ~ dl:has([data-prev-link]) {
  border-top: 1px dashed #ccc;
}
.shop-info-wrap dd:has([data-prev-link]) {
  padding-left: 28px;
  position: relative;
}
.shop-info-wrap dd:has([data-prev-link])::before {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.shop-info-wrap dd:has([data-prev-link="shop.postCode"])::before {
  left: 8px;
  content: '\f3c5';
  color: var(--red);
}
.shop-info-wrap dd:has([data-prev-link="shop.openTime"])::before {
  content: '\f017';
  color: var(--suc);
}
.shop-info-wrap dd:has([data-prev-link="shop.shopDescription"])::before {
  content: '\f05a';
  color: var(--blu);
}
.shop-info-wrap dd:has([data-prev-link="shop.shopDescription"])::before {
  content: '\f05a';
  color: var(--blu);
}
.shop-info-wrap dd:has([data-prev-link="shop.hpUrl"])::before {
  content: '\f015';
  color: var(--tmt);
}
.shop-info-wrap dl:has([data-prev-link]:empty),
.shop-info-wrap dl:has([data-prev-link].txa-box > div:first-of-type:empty) {
  display: none;
}
.shop-info-wrap .gmap-wrap {
  margin-top: 20px;
  border: var(--tbl-br);
  min-height: 182px;
}
[data-ie="edit"] .shop-info-wrap .gmap-wrap,
.shop-info-wrap .gmap-wrap:empty {
  background-color: #f1f1f1;
  text-align: center;
  padding: 80px 0;
  color: #777;
}
[data-ie="edit"] .shop-info-wrap .gmap-wrap::before,
.shop-info-wrap .gmap-wrap:empty::before {
  content: '登録すると地図が表示されます。';
}

/* チケット */
.ticket-list-wrap > h3 {
  font-size: 28px;
  padding: 8px 0;
  text-align: center;
}
.ticket-box {
  border: 2px dotted;
  width: 320px;
  margin: 20px auto;
  padding: 12px 6px;
  align-items: flex-start;
  border-radius: 12px;
}
.ticket-box > .clm1 {
  text-align: center;
}
.ticket-box > .clm2 {
  width: 262px;
  padding-left: 4px;
}
.ticket-box dt {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 8px;
}
.ticket-box > .clm2 .ticket-name {
  display: inline-block;
  padding: 4px 8px;
  color: #fff;
  border-radius: 8px;
}
.ticket-box > .clm2 dd .txa-box {
  font-size: 14px;
  margin-top: 8px;
}
.ticket-box > .clm2 dd[data-use-cnt] {
  margin-top: 12px;
  text-align: right;
  padding: 0 12px;
  font-size: 18px;
  font-weight: bold;
}
.ticket-box > .clm2 dd[data-use-cnt]::before {
  content: '利用回数：'attr(data-use-cnt)' / ' ;
}
.ticket-box > .clm2 dd[data-use-cnt]::after {
  content: attr(data-limit-cnt);
}
.ticket-box > .clm2 dd[data-limit-cnt=""] {
  display: none;
}

.use-ticket-box form {
  text-align: center;
}
.use-ticket-box button.btn.lrg {
  width: 300px;
  padding: 32px 32px;
  font-size: 32px;
}
.use-ticket-box .use-info {
  color: #1e40af;
  border: 1px solid #bfdbfe;
  background-color: #eff6ff;
  padding: 16px;
  width: 300px;
  margin: 20px auto;
  border-radius: 12px;
}
.use-ticket-box .use-warn {
  color: #92400e;
  border: 1px solid #fde68a;
  background-color: #fffbeb;
  padding: 16px;
  width: 300px;
  margin: 20px auto;
  border-radius: 12px;
}
.use-ticket-box .use-his {
  width: 300px;
  margin: auto;
  line-height: 1.3;
}
.use-ticket-box h4 {
  font-size: 22px;
  text-align: center;
  margin-bottom: 16px;
}
.use-ticket-box .use-info h4::before {
  content: '\f06a';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.use-ticket-box .use-warn h4::before {
  content: '\f071';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: var(--tmt);
}
.use-ticket-box .use-his:not(:has(ul li))::after {
  content: '利用歴はありません。';
  display: block;
  color: #777;
}
.use-ticket-box .use-his h4 {
  margin-bottom: 6px;
}
.use-ticket-box .use-his li {
  border-bottom: 1px dotted #777;
  margin-bottom: 4px;
  padding: 0 12px;
}



@media screen and (max-width: 767px) {
  .content {
    width: 100%;
    max-width: 450px;
  }

  .loading-content span { display: none; } /* スマホだとメッセージがきれいに表示されない */
}