@charset "UTF-8";

/* base.css
 * 担当範囲はこのファイルだけで編集。414px基準・既存の縮小式を維持。
 * 色は 店舗側 presentation/theme.css。条件・優先度は表示維持のため残しています。
 */


body {
  margin: 0;
  padding: 0;
  line-height: 0;
  width: 100%;
  height: 100%;
  font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

#container {
  width: min(100%, 414px);
  overflow: clip;
  margin: 0 auto;
  display: flow-root;
}



.yohaku20 {
  height: 20px;
}

.yohaku40 {
  height: 40px;
}

.yohaku15 {
  height: 15px;
}

.clear {
  clear: both;
}

.yohaku {
  width: 100%;
  height: 15px;
}

html,
body {
  background: var(--ui-sp-shell-canvas-background, var(--ui-sp-main-base-bg-variant-2, var(--ui-sp-base-bg-variant-2)));
}

#container {
  background: var(--ui-sp-main-base-bg-variant-3, var(--ui-sp-base-bg-variant-3));
}

:where(body[data-page="credit"]) .yohaku40 {
  background: var(--ui-sp-main-base-bg-variant-4, var(--ui-sp-base-bg-variant-4)) !important;
}

:where(body[data-page="profile"]) .yohaku10 {
  height: 10px;
}

@media screen and (max-width: 413px) {
  :where(body[data-page="profile"]) .yohaku10 {
    height: clamp(7.7295px, 2.4155vw, 10px);
  }
}

:where(body[data-page="profile"]) .yohaku10,
:where(body[data-page="profile"]) .yohaku15,
:where(body[data-page="profile"]) .yohaku20,
:where(body[data-page="profile"]) .yohaku40 {
  background: var(--ui-sp-main-profile-bg, var(--ui-sp-profile-bg)) !important;
}

:where(body:not([data-page="profile"])) blockquote {
  border: solid 1px var(--ui-sp-main-profile-border, var(--ui-sp-profile-border));
}

@media screen and (max-width: 413px) {
  :where(body:not([data-page="profile"])) blockquote {
    border: solid 1px var(--ui-sp-main-profile-border, var(--ui-sp-profile-border));
  }
}

body.natural-theme.natural-sp {
  color: var(--ui-sp-main-base-text-variant-2, var(--ui-sp-base-text-variant-2));
  background: var(--ui-sp-shell-page-background, var(--ui-sp-main-base-bg-variant-5, var(--ui-sp-base-bg-variant-5)) var(--ui-sp-base-bg-asset) repeat) !important;
}

body.natural-theme.natural-sp #container {
  min-height: 100vh;
  box-shadow: 0 0 28px var(--ui-sp-main-base-shadow, var(--ui-sp-base-shadow));
}

body.natural-theme.natural-sp a {
  transition: opacity .18s ease, color .18s ease;
}

body.natural-theme.natural-sp a:active {
  opacity: .72;
}

body.natural-theme.natural-sp #container {
  background: var(--ui-sp-shell-container-background, var(--ui-sp-main-base-bg-variant-6, var(--ui-sp-base-bg-variant-6))) !important;
}

.ui-shell, .ui-main {
  display: contents;
}