/* ============================================================
   base.css — Studio.design ランタイム CSS の再現
   本番 (routes.*.css) のリセットと .sd / .text / .image などの
   基本ルールをそのまま移植している。ここを変えると全要素に効く。
   ============================================================ */

/* ---- webfonts (self-hosted) ---- */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/assets/fonts/MaterialIcons-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/assets/fonts/fa-brands-400.woff2') format('woff2');
}

html, body { margin: 0; padding: 0; }
body { background: #fff; }

/* ---- reset (Studio) ---- */
:where(.render-canvas , .render-canvas :is(a, abbr, address, article, aside, 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: var(--color-text, #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 var(--dur-studio, .3s) var(--ease-studio, cubic-bezier(.4,.4,0,1));
}
:where(.render-canvas :is(a, button):focus:not(:focus-visible)) { outline: none; }
:where(.render-canvas :is(a, button)) { vertical-align: baseline; background: 0 0; margin: 0; padding: 0; font-size: 100%; }
:where(.render-canvas a, .render-canvas a.icon, .render-canvas a.text) { -webkit-tap-highlight-color: #00000026; }

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

/* ---- 基本ボックス: すべての要素は縦並び flex・中央揃え・relative ---- */
:where(.render-canvas .sd) {
  z-index: 0;
  pointer-events: all;
  -webkit-overflow-scrolling: touch;
  flex-flow: column;
  flex: none;
  align-content: center;
  align-items: center;
  max-width: 100%;
  display: flex;
  position: relative;
}
.render-canvas :where(.sd)::-webkit-scrollbar { display: none; }
:where(.render-canvas .sd[tabindex]:focus) { outline: none; }
:where(.render-canvas .sd[tabindex]:focus-visible) { outline: 1px solid highlight; outline-color: -webkit-focus-ring-color; }

/* ---- 画像ボックス: ::before に background-image (cover) ---- */
:where(.render-canvas .image) { position: relative; }
.render-canvas :where(.image)::before {
  content: "";
  border-radius: inherit;
  z-index: -2;
  pointer-events: none;
  background-image: var(--bg);
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  transition: inherit;
  position: absolute;
  top: 0;
  left: 0;
}

/* ---- テキスト ---- */
:where(.render-canvas .sd.text, .render-canvas .sd:where(.icon)) {
  word-break: break-word;
  overflow-wrap: anywhere;
  flex-direction: row;
  place-content: center;
  align-items: center;
  display: flex;
  overflow: visible;
}

/* ---- アイコン ---- */
:where(.render-canvas .material-icons) {
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  direction: ltr;
  justify-content: center;
  align-items: center;
  font-family: 'Material Icons';
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
}
:where(.render-canvas .sd:where(.icon.fa-brands)) { display: inline-flex; }
.fa-brands {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.fa-brands::before { display: inline-block; }
.fa-square-x-twitter::before { content: "\e61a"; }
.fa-square-instagram::before { content: "\e055"; }
.fa-x-twitter::before { content: "\e61b"; }
.fa-instagram::before { content: "\f16d"; }

/* ---- 位置・リンク・ボタン ---- */
:where(.render-canvas .fixed) { z-index: 2; }
:where(.render-canvas .sticky) { z-index: 1; }
:where(.render-canvas .button) { cursor: pointer; transition: all var(--dur-button, .4s) var(--ease-studio); }
:where(.render-canvas .link) { cursor: pointer; }

/* ---- img ---- */
:where(.render-canvas img.sd) { object-fit: cover; }

/* ---- Modal (Studio の studio-modal://menu) ---- */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
}
.modal > .sd { transition: opacity .4s var(--ease-studio), transform .4s var(--ease-studio); }
.modal.is-entering > .sd { opacity: 0; transform: translateY(100px); }

/* ---- Carousel (Studio carousel 2.2) ---- */
.carousel > .sd { will-change: transform; transition-property: transform; }
.carousel.no-transition > .sd { transition: none !important; }

/* ---- Toggle 用の高さアニメーション補助 ---- */
.sd[data-toggle] > .sd { transition: all var(--dur-button, .4s) var(--ease-studio); }