/* 共通の土台。ページごとのレイアウトは css/<page>.css にある */
html, body { margin: 0; padding: 0; }

:where(.rc),
:where(.rc) :is(a, abbr, address, article, aside, audio, b, blockquote, button, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, input, ins, kbd, label, legend, li, main, mark, menu, nav, object, ol, p, pre, q, samp, section, select, small, span, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video) {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  color: #333;
  word-spacing: 1px;
  -webkit-backface-visibility: hidden;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  line-height: 1;
  text-decoration: none;
  list-style: none;
  transition: all .3s cubic-bezier(.4, .4, 0, 1);
}
:where(.rc) a:focus:not(:focus-visible),
:where(.rc) button:focus:not(:focus-visible),
:where(.rc) summary:focus:not(:focus-visible) { outline: none; }
:where(.rc) a,
:where(.rc) button  { vertical-align: baseline; background: 0 0; margin: 0; padding: 0; font-size: 100%; }
:where(.rc) a { -webkit-tap-highlight-color: rgba(0, 0, 0, .15); }
:where(.rc) table { border-collapse: collapse; border-spacing: 0; }
:where(.rc) input,
:where(.rc) select  { vertical-align: middle; }
:where(.rc) input[type=email],
:where(.rc) input[type=tel],
:where(.rc) input[type=text],
:where(.rc) select,
:where(.rc) textarea  { -webkit-appearance: none; appearance: none; }
:where(.rc) select { cursor: pointer; }
:where(.rc) textarea { resize: none; }

.canvas { height: auto; min-height: 100dvh; display: flex; }
.canvas > .sd { min-height: 100dvh; overflow: clip; }

/* 要素の基本形（縦並びのflex） */
:where(.rc) .sd {
  z-index: 0;
  pointer-events: all;
  flex-flow: column;
  flex: none;
  align-content: center;
  align-items: center;
  max-width: 100%;
  display: flex;
  position: relative;
}
:where(.rc) .sd::-webkit-scrollbar { display: none; }
:where(.rc) .sd,
:where(.rc) .sd.richText *  {
  transition-property: all, --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11;
}
:where(.rc) input.sd,
:where(.rc) textarea.sd  { align-content: normal; }
:where(.rc) .sd[tabindex]:focus { outline: none; }
:where(.rc) .sd[tabindex]:focus-visible { outline: 1px solid highlight; outline-color: -webkit-focus-ring-color; }
:where(.rc) .sd.text,
:where(.rc) .sd:where(.icon) {
  word-break: break-word;
  overflow-wrap: anywhere;
  flex-direction: row;
  place-content: center;
  align-items: center;
  display: flex;
  overflow: visible;
}
:where(.rc) .sd:where(.icon.fa) { display: inline-flex; }
/* 埋め込み（STUDIO の埋め込み枠） */
:where(.rc) .frame { display: block; overflow: hidden; }
:where(.rc) .frame > iframe { width: 100%; height: 100%; }
:where(.rc) .material-icons {
  font-family: 'Material Icons';
  font-feature-settings: normal;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
:where(.rc) .image { position: relative; }
:where(.rc) .image::before {
  content: "";
  border-radius: inherit;
  z-index: -2;
  pointer-events: none;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  transition: inherit;
  position: absolute;
  top: 0;
  left: 0;
}
/* お知らせのサムネイル（CMSの画像をstyle属性の --thumb で受け取る） */
.sd.image.cms-thumb.cms-thumb::before { background-image: var(--thumb); }

:where(.rc) .fixed { z-index: 2; }
:where(.rc) .sticky { z-index: 1; }
:where(.rc) .button { cursor: pointer; transition: all .4s cubic-bezier(.4, .4, 0, 1); }
:where(.rc) .link { cursor: pointer; }

:where(.rc) .sd.section { flex-flow: column !important; align-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; padding: 0 !important; }
:where(.rc) .sd.section-inner { position: static !important; }

/* リッチテキスト（お知らせ本文など） */
:where(.rc) .richText { word-break: break-word; display: block; }
:where(.rc) .richText [data-thread],
:where(.rc) .richText a,
:where(.rc) .richText blockquote,
:where(.rc) .richText em,
:where(.rc) .richText h1,
:where(.rc) .richText h2,
:where(.rc) .richText h3,
:where(.rc) .richText h4,
:where(.rc) .richText li,
:where(.rc) .richText ol,
:where(.rc) .richText p,
:where(.rc) .richText p > code,
:where(.rc) .richText pre,
:where(.rc) .richText pre > code,
:where(.rc) .richText s,
:where(.rc) .richText strong,
:where(.rc) .richText table tbody,
:where(.rc) .richText table tbody tr,
:where(.rc) .richText table tbody tr > td,
:where(.rc) .richText table tbody tr > th,
:where(.rc) .richText u,
:where(.rc) .richText ul  { color: inherit; font-family: inherit; font-size: inherit; text-align: inherit; letter-spacing: inherit; line-height: inherit; font-weight: inherit; font-style: inherit; -webkit-backface-visibility: visible; backface-visibility: visible; }
:where(.rc) .richText p { align-self: stretch; margin: 10px 0; display: block; }
:where(.rc) .richText > p { min-height: 1em; }
:where(.rc) .richText img,
:where(.rc) .richText video  { vertical-align: bottom; max-width: 100%; height: auto; }
:where(.rc) .richText h1 { align-self: stretch; margin: 20px 0; font-size: 3em; font-weight: 700; display: block; }
:where(.rc) .richText h2 { align-self: stretch; margin: 10px 0; font-size: 2em; font-weight: 700; display: block; }
:where(.rc) .richText h3 { align-self: stretch; margin: 10px 0; font-size: 1em; font-weight: 700; display: block; }
:where(.rc) .richText h4,
:where(.rc) .richText h5  { align-self: stretch; margin: 10px 0; font-size: 1em; font-weight: 600; display: block; }
:where(.rc) .richText h6 { align-self: stretch; margin: 10px 0; font-size: 1em; font-weight: 500; display: block; }
:where(.rc) .richText table { table-layout: auto; border-collapse: collapse; color: #1a1a1a; border: 1px solid #f2f2f2; margin: 10px 0; font-size: 14px; line-height: 1.4; }
:where(.rc) .richText table tr th { background: rgba(245, 245, 245, .5); }
:where(.rc) .richText table tr td,
:where(.rc) .richText table tr th  { border: 1px solid #f2f2f2; min-width: 100px; max-width: 240px; padding: 12px; }
:where(.rc) .richText table tr td p,
:where(.rc) .richText table tr th p  { margin: 0; }
:where(.rc) .richText blockquote { border-left: 3px solid rgba(0, 0, 0, .15); margin: 10px 0; padding: 10px 15px; font-style: italic; }
:where(.rc) .richText ul,
:where(.rc) .richText ol  { margin: 0 0 0 20px; }
:where(.rc) .richText ul li { margin: 10px 0; list-style: outside; }
:where(.rc) .richText ol li { margin: 10px 0; list-style: decimal; }
:where(.rc) .richText li p { margin: 0; }
:where(.rc) .richText hr { border: 0; border-top: 1px solid #ccc; height: 1px; margin: 10px 0; }
:where(.rc) .richText strong { color: inherit; font-family: inherit; font-weight: 900; display: inline; }
:where(.rc) .richText em { font-style: italic; }
:where(.rc) .richText u { text-decoration: underline; }
:where(.rc) .richText s { text-decoration: line-through; }
:where(.rc) .richText a { color: #007cff; text-decoration: underline; display: inline; }
:where(.rc) .richText figure { margin: 10px 0; }

/* メニュー（モーダル） */
.modal { pointer-events: none; z-index: 2; width: 100%; height: 100%; transition: none; position: fixed; top: 0; left: 0; }
.modal:focus { outline: none; }
.modal__canvas { pointer-events: none; height: 100%; transition: all .4s cubic-bezier(.4, .4, 0, 1); }
.modal__canvas > * { pointer-events: none; background: 0 0 !important; }
.modal__base { pointer-events: auto; z-index: -1; width: 100%; height: 100%; transition: all .4s cubic-bezier(.4, .4, 0, 1); position: fixed; top: 0; left: 0; border: 0; padding: 0; margin: 0; cursor: default; }
@property --g-angle { syntax: "<angle>"; inherits: false; initial-value: 180deg; }
@property --g-color-0 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-0 { syntax: "<percentage>"; inherits: false; initial-value: .01%; }
@property --g-color-1 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-1 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --g-color-2 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-2 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --g-color-3 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-3 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --g-color-4 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-4 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --g-color-5 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-5 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --g-color-6 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-6 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --g-color-7 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-7 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --g-color-8 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-8 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --g-color-9 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-9 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --g-color-10 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-10 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --g-color-11 { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --g-position-11 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }

/* ページ移動：離れるページは0.3秒でフェードアウト（site.js）。
   移動先は元サイトと同じく 0.6秒のフェードインを0.18秒進めた状態から表示する */
@keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }
html.page-enter .canvas { animation: page-enter .6s cubic-bezier(.4, .4, 0, 1) -.18s both; }
.canvas.page-leave { opacity: 0; transition: opacity .3s cubic-bezier(.4, .4, 0, 1); }

/* 料金カード：数字を消した画像の上に、管理画面で入力した金額を同じ縮尺の SVG で重ねる */
.price-card { position: relative; overflow: clip; overflow-clip-margin: content-box; unicode-bidi: normal; }
.price-card > img { display: block; width: 100%; height: 100%; }
.price-card > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* 画面には出さず、検索エンジン・読み上げには伝える文字（料金カードの中身など） */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}