@charset "UTF-8";
/* =========================================================
   2610-update-lp （2026年10月アップデート告知LP）専用スタイル
   - 構成: 支給ワイヤー（lp_wire.pdf）に準拠
     TOP画像+リード / メンテナンスお知らせ / アイコンナビ(6) /
     アップデート内容(6セクション) / クロージング
   - 本文はブロックエディタのコアブロック（group / heading / paragraph /
     image / columns）で構成しているため、当CSSはコアブロックが出力する
     DOM（.wp-block-group__inner-container 等）を前提にしている。
   - トンマナはTOP / feature / price に準拠
     見出し 36px/700、リード lh1.9〜2、黄色帯(#ffde5b)、
     お知らせ枠は parts/mainte.php と同じ「白地 + 2px teal ボーダー」
   - 共通CSS(common.css)と衝突しないよう .lp2610 配下に限定する
   - ブレークポイント: ~767px(SP) / 768-1025px(TB) / 1026px~(PC)
     ※ TBは共通ヘッダーがハンバーガーに切り替わる帯と揃えている
   ========================================================= */
/* 白背景上の小さい文字・リンク・フォーカスリング用（白に対し 4.7:1） */
/* 該当画面キャプチャ動画のレターボックス余白。
   扉画像・動画本体どちらの地色（#e9f4ff / #eaf3fe）とも馴染む中間色 */
/* 角丸はカード類 12px に統一する */
/* 固定ヘッダー分のアンカーオフセット（帯ごとの実測ヘッダー高 + 20px） */
/* タブレット（768-1025px）専用。mq(767) と重ならないよう範囲指定にする */
.lp2610 {
  width: 100%;
  color: #000000;
  font-family: "Noto Sans JP", sans-serif;
  /* -------------------------------------------------
     コアブロック共通の調整
     ------------------------------------------------- */
  /* セクション（トップレベルのgroup）の内側幅。common.css の .inner に合わせる */
}
.lp2610 > .wp-block-group > .wp-block-group__inner-container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .lp2610 > .wp-block-group > .wp-block-group__inner-container {
    width: 95%;
  }
}
@media screen and (max-width: 767px) {
  .lp2610 > .wp-block-group > .wp-block-group__inner-container {
    max-width: 88%;
  }
}
.lp2610 {
  /* core/image は figure。既定のマージンを打ち消す */
}
.lp2610 .wp-block-image {
  margin: 0;
}
.lp2610 .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}
.lp2610 {
  /* -------------------------------------------------
     1. ファーストビュー（TOP画像 + キャッチ + リード）
     ------------------------------------------------- */
}
.lp2610 .lp2610-fv {
  /* 固定ヘッダー（PC実測130px）の下に既存サブページ相当の余白を取る */
  padding: 190px 0 80px;
  background: #ffde5b;
  text-align: center;
}
.lp2610 .lp2610-fv .lp2610-fv__catch {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 34px;
}
.lp2610 .lp2610-fv {
  /* TOP画像 */
}
.lp2610 .lp2610-fv .lp2610-fv__img {
  max-width: 620px;
  margin: 0 auto 34px;
}
.lp2610 .lp2610-fv {
  /* リード文は読みやすさ優先で左寄せ・中央配置 */
}
.lp2610 .lp2610-fv .lp2610-fv__lead {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}
.lp2610 .lp2610-fv .lp2610-fv__lead + .lp2610-fv__lead {
  margin-top: 18px;
}
.lp2610 .lp2610-fv .lp2610-fv__lead strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, #ffffff 62%);
}
@media screen and (min-width: 768px) and (max-width: 1025px) {
  .lp2610 .lp2610-fv {
    padding: 120px 0 64px;
  }
  .lp2610 .lp2610-fv .lp2610-fv__catch {
    font-size: 30px;
  }
}
@media screen and (max-width: 767px) {
  .lp2610 .lp2610-fv {
    padding: 22vw 0 12vw;
  }
  .lp2610 .lp2610-fv .lp2610-fv__catch {
    font-size: 6vw;
    line-height: 1.55;
    margin-bottom: 5vw;
  }
  .lp2610 .lp2610-fv .lp2610-fv__img {
    max-width: 100%;
    margin-bottom: 6vw;
  }
  .lp2610 .lp2610-fv .lp2610-fv__lead {
    font-size: 3.5vw;
    line-height: 1.95;
  }
  .lp2610 .lp2610-fv .lp2610-fv__lead + .lp2610-fv__lead {
    margin-top: 4vw;
  }
}
.lp2610 {
  /* -------------------------------------------------
     2. メンテナンスお知らせ
     （parts/mainte.php の「白地 + 2px teal ボーダー」を踏襲）
     ------------------------------------------------- */
}
.lp2610 .lp2610-notice {
  padding: 80px 0 0;
}
.lp2610 .lp2610-notice .lp2610-notice__box {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border: 2px solid #1cb6b8;
  border-radius: 12px;
  padding: 34px 40px;
}
.lp2610 .lp2610-notice .lp2610-notice__ttl {
  position: relative;
  padding-left: 38px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 18px;
  /* 注意喚起の記号。装飾なので読み上げ対象から外す */
}
.lp2610 .lp2610-notice .lp2610-notice__ttl::before {
  content: "!"/"";
  position: absolute;
  top: 3px;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #159a9c;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
.lp2610 .lp2610-notice .lp2610-notice__txt {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
}
.lp2610 .lp2610-notice {
  /* 停止日時 */
}
.lp2610 .lp2610-notice .lp2610-notice__date {
  background: #f3fbfb;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 20px 0;
}
.lp2610 .lp2610-notice .lp2610-notice__date .lp2610-notice__date-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 6px;
}
.lp2610 .lp2610-notice .lp2610-notice__date .lp2610-notice__date-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: #12807f;
}
.lp2610 .lp2610-notice .lp2610-notice__note {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 14px;
}
@media screen and (min-width: 768px) and (max-width: 1025px) {
  .lp2610 .lp2610-notice {
    padding: 64px 0 0;
  }
  .lp2610 .lp2610-notice .lp2610-notice__box {
    padding: 30px 32px;
  }
}
@media screen and (max-width: 767px) {
  .lp2610 .lp2610-notice {
    padding: 12vw 0 0;
  }
  .lp2610 .lp2610-notice .lp2610-notice__box {
    padding: 6vw 5vw;
    border-radius: 2vw;
  }
  .lp2610 .lp2610-notice .lp2610-notice__ttl {
    padding-left: 8vw;
    font-size: 4.4vw;
    margin-bottom: 4vw;
  }
  .lp2610 .lp2610-notice .lp2610-notice__ttl::before {
    top: 0.6vw;
    width: 5.6vw;
    height: 5.6vw;
    font-size: 3.4vw;
    line-height: 5.6vw;
  }
  .lp2610 .lp2610-notice .lp2610-notice__txt {
    font-size: 3.4vw;
  }
  .lp2610 .lp2610-notice .lp2610-notice__date {
    padding: 4vw 4.5vw;
    margin: 4.5vw 0;
  }
  .lp2610 .lp2610-notice .lp2610-notice__date .lp2610-notice__date-label {
    font-size: 3.4vw;
  }
  .lp2610 .lp2610-notice .lp2610-notice__date .lp2610-notice__date-value {
    font-size: 4.6vw;
  }
  .lp2610 .lp2610-notice .lp2610-notice__note {
    font-size: 3.1vw;
    margin-bottom: 3vw;
  }
}
.lp2610 {
  /* -------------------------------------------------
     3. アイコンナビ（各アップデート内容へのページ内リンク）
     ------------------------------------------------- */
}
.lp2610 .lp2610-nav {
  padding: 80px 0 0;
}
.lp2610 .lp2610-nav .lp2610-nav__ttl {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 34px;
}
.lp2610 .lp2610-nav {
  /* core/columns。コアの is-layout-flex に依存せず自前で組む */
}
.lp2610 .lp2610-nav .lp2610-nav__row {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin-bottom: 24px;
}
.lp2610 .lp2610-nav .lp2610-nav__row:last-child {
  margin-bottom: 0;
}
.lp2610 .lp2610-nav {
  /* core/column = カード */
}
.lp2610 .lp2610-nav .lp2610-nav__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 18px 18px 22px;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
.lp2610 .lp2610-nav .lp2610-nav__card:hover {
  transform: translateY(-5px);
  border-color: #ffde5b;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.lp2610 .lp2610-nav .lp2610-nav__label {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 1行/2行が混在してもピルの高さを揃える（2行ぶんを確保） */
  min-height: 58px;
  background: #ffde5b;
  border-radius: 100vh;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 14px;
}
.lp2610 .lp2610-nav .lp2610-nav__ico {
  width: 116px;
  margin: 0 auto;
}
.lp2610 .lp2610-nav .lp2610-nav__ico a {
  display: block;
  /* リンクは画像に付くが、擬似要素でカード全体を当たり判定にする */
}
.lp2610 .lp2610-nav .lp2610-nav__ico a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.lp2610 .lp2610-nav .lp2610-nav__ico a:focus-visible::after {
  outline: 3px solid #12807f;
  outline-offset: 3px;
}
@media screen and (min-width: 768px) and (max-width: 1025px) {
  .lp2610 .lp2610-nav {
    padding: 64px 0 0;
  }
  .lp2610 .lp2610-nav .lp2610-nav__row {
    gap: 16px;
    margin-bottom: 16px;
  }
  .lp2610 .lp2610-nav .lp2610-nav__label {
    min-height: 52px;
    font-size: 12px;
    padding: 9px 8px;
  }
  .lp2610 .lp2610-nav .lp2610-nav__ico {
    width: 96px;
  }
}
@media screen and (max-width: 767px) {
  .lp2610 .lp2610-nav {
    padding: 12vw 0 0;
    /* PCは2行×3列。SPでは2列×3行のグリッドとして流し直す。
       core/columns の行を display:contents で透過させ、
       セクションのコンテナ側をグリッドにしている */
  }
  .lp2610 .lp2610-nav .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5vw;
  }
  .lp2610 .lp2610-nav .lp2610-nav__ttl {
    grid-column: 1/-1;
    font-size: 4.6vw;
    margin-bottom: 2.5vw;
  }
  .lp2610 .lp2610-nav .lp2610-nav__row {
    display: contents;
  }
  .lp2610 .lp2610-nav .lp2610-nav__card {
    padding: 3.5vw 3vw 4.5vw;
    border-radius: 2vw;
  }
  .lp2610 .lp2610-nav .lp2610-nav__label {
    /* 日本語UIの可読下限を割らないよう 3.2vw(375pxで12px) を維持する。
       収まらないラベルは本文側の <br> で折り、min-height で高さを揃える */
    min-height: 13vw;
    padding: 2vw 1vw;
    font-size: 3.2vw;
    margin-bottom: 3vw;
  }
  .lp2610 .lp2610-nav .lp2610-nav__ico {
    width: 24vw;
  }
}
.lp2610 {
  /* -------------------------------------------------
     4. アップデート内容（黄色見出しバー + キャプチャ + 説明）
     ------------------------------------------------- */
}
.lp2610 .lp2610-features {
  /* 1つ目の .lp2610-feature が negative margin で上がるぶんを足しておく */
  padding: 190px 0 0;
}
.lp2610 .lp2610-features > .wp-block-group__inner-container {
  max-width: 800px;
}
@media screen and (min-width: 768px) and (max-width: 1025px) {
  .lp2610 .lp2610-features {
    padding: 179px 0 0;
  }
}
@media screen and (max-width: 767px) {
  .lp2610 .lp2610-features {
    padding: calc(14vw + 88px) 0 0;
  }
}
.lp2610 .lp2610-feature {
  /* padding と negative margin で「見た目そのまま」にアンカー位置だけ上へずらす。
     common.js のスムーススクロールは offset().top を見るため、
     scroll-margin-top では効かず、実位置をずらす必要がある */
  padding-top: 100px;
  margin-top: -100px;
  margin-bottom: 70px;
}
.lp2610 .lp2610-feature:last-child {
  margin-bottom: 0;
}
.lp2610 .lp2610-feature {
  /* 黄色の見出しバー（ワイヤー準拠） */
}
.lp2610 .lp2610-feature .lp2610-feature__bar {
  background: #ffde5b;
  border-radius: 6px;
  padding: 13px 22px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 26px;
  /* アンカー移動時に focus() する。マウス操作では枠を出さない */
}
.lp2610 .lp2610-feature .lp2610-feature__bar:focus {
  outline: none;
}
.lp2610 .lp2610-feature .lp2610-feature__bar:focus-visible {
  outline: 3px solid #12807f;
  outline-offset: 3px;
}
.lp2610 .lp2610-feature {
  /* 該当画面キャプチャ。画像/動画のどちらでも枠は共通 */
}
.lp2610 .lp2610-feature .lp2610-feature__figure {
  max-width: 720px;
  margin: 0 auto 26px;
}
.lp2610 .lp2610-feature .lp2610-feature__figure img {
  border-radius: 12px;
}
.lp2610 .lp2610-feature .lp2610-feature__figure {
  /* 動画（デザインを自由に！）は扉画像(poster 1424x722)と
     動画本体(1200x608)でほぼ同じアスペクト比に揃えてある。
     - コアCSSの .wp-block-video [poster] { object-fit: cover } のままだと
       扉画像の左右（ロゴ側）が見切れるため contain で全体を見せる。
     - ブラウザは未再生時は扉画像、再生時は動画の比率で高さを決めるため、
       height:auto のままだと再生開始でボックスの高さが変わり
       以降のコンテンツが動く。動画側の比率で固定して止める。 */
}
.lp2610 .lp2610-feature .lp2610-feature__figure video {
  border-radius: 12px;
  aspect-ratio: 1200/608;
  object-fit: contain;
  background-color: #eaf3fe;
}
.lp2610 .lp2610-feature .lp2610-feature__ttl {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 14px;
}
.lp2610 .lp2610-feature .lp2610-feature__txt {
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
}
@media screen and (min-width: 768px) and (max-width: 1025px) {
  .lp2610 .lp2610-feature {
    padding-top: 107px;
    margin-top: -107px;
    margin-bottom: 56px;
  }
  .lp2610 .lp2610-feature .lp2610-feature__bar {
    font-size: 17px;
    margin-bottom: 22px;
  }
  .lp2610 .lp2610-feature .lp2610-feature__ttl {
    font-size: 19px;
  }
}
@media screen and (max-width: 767px) {
  .lp2610 .lp2610-feature {
    padding-top: 88px;
    margin-top: -88px;
    margin-bottom: 12vw;
  }
  .lp2610 .lp2610-feature .lp2610-feature__bar {
    padding: 3vw 4vw;
    font-size: 4vw;
    border-radius: 1.5vw;
    margin-bottom: 5vw;
  }
  .lp2610 .lp2610-feature .lp2610-feature__figure {
    max-width: 100%;
    margin-bottom: 5vw;
  }
  .lp2610 .lp2610-feature .lp2610-feature__figure img {
    border-radius: 2vw;
  }
  .lp2610 .lp2610-feature .lp2610-feature__figure video {
    border-radius: 2vw;
  }
  .lp2610 .lp2610-feature .lp2610-feature__ttl {
    font-size: 4.4vw;
    margin-bottom: 3vw;
  }
  .lp2610 .lp2610-feature .lp2610-feature__txt {
    font-size: 3.5vw;
    line-height: 1.95;
  }
}
.lp2610 {
  /* -------------------------------------------------
     5. クロージング
     ------------------------------------------------- */
}
.lp2610 .lp2610-closing {
  margin-top: 90px;
  background: #e3f2f3;
  padding: 70px 0;
  text-align: center;
}
.lp2610 .lp2610-closing > .wp-block-group__inner-container {
  max-width: 800px;
}
.lp2610 .lp2610-closing .lp2610-closing__txt {
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 24px;
}
.lp2610 .lp2610-closing .lp2610-closing__lead {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (min-width: 768px) and (max-width: 1025px) {
  .lp2610 .lp2610-closing {
    margin-top: 72px;
    padding: 56px 0;
  }
  .lp2610 .lp2610-closing .lp2610-closing__lead {
    font-size: 21px;
  }
}
@media screen and (max-width: 767px) {
  .lp2610 .lp2610-closing {
    margin-top: 14vw;
    padding: 12vw 0;
  }
  .lp2610 .lp2610-closing .lp2610-closing__txt {
    font-size: 3.5vw;
    text-align: left;
    margin-bottom: 5vw;
  }
  .lp2610 .lp2610-closing .lp2610-closing__lead {
    font-size: 4.2vw;
  }
}