@charset "utf-8";
/* ------------------------------------------------------------------
   Compatibility layer for hosting the espokids design inside this
   Tailwind project. Not part of the original site.

   Loaded before the ported stylesheets, so anything they declare still wins.
   ------------------------------------------------------------------

   Edits made directly to the ported stylesheets (style.css / style_sp.css),
   to match how the live site actually renders:
   - font-weight: 900 -> 700 (the live site has no 900 font file, so it
     shows 700).
   - font-family: YakuHanJP, "Noto Sans JP" -> "Noto Sans JP". The live site
     never loads a font called YakuHanJP (only YakuHanJP_Noto), so these rules
     fall back to Noto Sans JP with full-width brackets/punctuation. This project
     loads YakuHanJP globally, which would make that punctuation half-width.
   ------------------------------------------------------------------ */

/* Tailwind ships a `.container` utility of its own (width:100% plus a
   per-breakpoint max-width) that the ported markup collides with. The page-id
   prefix wins on specificity, so load order between the two stops mattering. */
:is(#Top, #Service, #Rates, #Access) .container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
  box-sizing: border-box;
}
@media only screen and (max-width: 899px) {
  :is(#Top, #Service, #Rates, #Access) .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Undo this project's global Tailwind preflight, which the standalone site
   never had. Values are the ones the ported stylesheets declare on `body` and
   on their bare element selectors; preflight overrides those purely by load
   order, so they are restated here at one class of specificity: enough to beat
   preflight's element selectors whatever the order, low enough that every
   ported rule still wins. */
.espokids {
  line-height: 1;
}
.espokids :where(h1, h2, h3, h4, h5, h6) {
  font-size: 16px;
  font-weight: 500;
}
/* only display / vertical-align: the ported style.css declares its own
   img { max-width: 100%; height: auto } and must keep owning those. */
.espokids :where(img) {
  display: inline;
  vertical-align: bottom;
}
.espokids :where(svg, video, canvas, audio, iframe, embed, object) {
  display: inline;
  vertical-align: baseline;
}
.espokids :where(a) {
  color: #000;
  transition: 0.3s;
}
.espokids :where(a):hover {
  opacity: 1;
}

/* The SP stylesheet puts writing-mode: vertical-rl on the 長期夏休みパック利用 <td>
   itself (PC only sets it on the inner span). Table layout sizes a vertical cell
   unreliably and can blow that column up to most of the table's width. Keep the
   cell horizontal and turn only the span vertical, as the PC stylesheet does.
   Same specificity as the ported rule plus one class, so it wins regardless of
   load order. */
@media only screen and (max-width: 899px) {
  #Rates main .sect_3 .container .content .amount-table .row .col .table-1 tbody tr td.rowspan7.rowspan7 {
    writing-mode: horizontal-tb;
  }
  #Rates main .sect_3 .container .content .amount-table .row .col .table-1 tbody tr td.rowspan7.rowspan7 span {
    display: inline-block;
  }
}

/* Tailwind preflight makes form controls inherit font-size, line-height,
   letter-spacing, weight and color from their parent. The standalone site left
   them at the browser defaults, which is what its stylesheets were tuned
   against. Inputs and selects get their font-size from layout.css; buttons
   don't, so theirs goes back to the browser's own value (`revert`). */
.espokids :where(input, select, textarea, button) {
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  color: #000;
}
.espokids :where(button) {
  font-size: revert;
}

/* The standalone site loads Noto Sans JP as static weights 100/300/400/500/700
   only, so its 600 renders as 700. This project loads the variable font, which
   draws a real (lighter) 600, so pin those rules to 700 at the widths where each
   applies. (Its two 900s had the same problem; they are set to 700 directly in
   style_sp.css.) */
@media only screen and (min-width: 900px) {
  #Rates.espokids main .sect_6 .calculate__col .selectionGroup .fee_wrap02 .mark,
  #Rates.espokids main .sect_6 .calculate__result .label,
  #Rates.espokids main .sect_6 .calculate__result .total #totalEditable,
  #Rates.espokids main .sect_6 .calculate__result .total small {
    font-weight: 700;
  }
}
@media only screen and (max-width: 899px) {
  #Rates.espokids main .sect_6 .calculate__col .selectionGroup .fee_wrap02 .mark {
    font-weight: 700;
  }
}