/**
 * フロントとエディタの両方に適応するスタイル
 */

@charset "UTF-8";

/*共通*/
body * {
  font-feature-settings: "palt";
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Helvetica Neue", Arial, Meiryo, sans-serif;
}

.baskerville,
.baskerville * {
  font-family: "Libre Baskerville", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Helvetica Neue", Arial, Meiryo, sans-serif;
}

a {
  text-decoration: none !important;
}

a:hover,
.ek-linked-block:hover {
  opacity: 0.7 !important;
  cursor: pointer;
}

/*リンクカラーリセット*/
.link-color-unset>a {
  color: unset !important
}

sub,
sup {
  font-size: 10px;
  letter-spacing: .1em;
  display: block;
}

/*幅広オーバーライド from 1230px to 1200px*/
@media (min-width: 1238px) {
  .alignwide {
    left: -85px;
    width: calc(100% + 170px);
  }
}

/*リストスタイルnone*/
ul.list-style-none {
  list-style: none !important;
  padding-left: 0 !important;
}

/*リストスタイルnone*/

/*リストスタイル四角*/
ul.is-style-square {
  list-style: none;
}

ul.is-style-square li {
  position: relative;
}

ul.is-style-square li:before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  position: absolute;
  border: 1px solid var(--color_text);
  top: 0.4em;
  left: -1.5em;
}

/*リストスタイル四角*/

/*●付きアコーディオン
   .beg-aq-aco summary:before {
     color: var(--color_list_good);
     content: "\ea56";
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     background: none;
     border: none;
     border-radius: 0;
     display: block;
     font-family: icomoon;
     position: absolute;
     width: 1em;
     height: 1em;
     left: 35px;
     top: 40px;
   }
   
   .beg-aq-aco {
     font-size: 1.125rem;
   }
   
   .beg-aq-aco summary {
     background: #fff;
     padding: 35px 70px;
   
   }
   
   .beg-aq-aco .swell-block-accordion__body {
     background: #fff;
     padding: 0px 70px 35px;
   }
   
   .beg-aq-aco .icon-plus:before,
   .beg-aq-aco .icon-minus:before {
     font-size: 40px;
     color: #FFD255;
   }
   */

/*swellのリッチカラムセンター配置*/
.swell-rich-col-center .swell-block-columns__inner {
  justify-content: center !important;
}

/*swellのリッチカラムspace-around配置*/
.swell-rich-col-around .swell-block-columns__inner {
  justify-content: space-around !important;
}

/*swellのリッチカラムspace-around配置*/
.swell-rich-col-between .swell-block-columns__inner {
  justify-content: space-between !important;
}

/*swellのリッチカラム幅均等配置(リッチカラムの幅設定は効かなくなる)*/
.swell-rich-col-evenly .swell-block-columns__inner .swell-block-column {
  flex: 1 !important;
}

/* 投稿リストブロックのカード型とサムネイル型を4,5列表示にする */
@media (min-width: 960px) {

  .-col4 .-type-card.-pc-col3 .p-postList__item,
  .-col4 .-type-thumb.-pc-col3 .p-postList__item {
    width: calc(100% / 4);
  }

  .-col5 .-type-card.-pc-col3 .p-postList__item,
  .-col4 .-type-thumb.-pc-col3 .p-postList__item {
    width: calc(100% / 5);
  }
}

/*テキストの前後に＼/をつける*/
.text-decoration-slash {
  position: relative;
}

/*背景スタイル*/
/*台形*/
.trapezoid-left:before {
  content: "";
  background: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  clip-path: polygon(0 48%, 100% 0, 100% 100%, 0% 100%);
}

.text-decoration-slash:before,
.text-decoration-slash:after {
  content: "";
  position: absolute;
  width: 19px;
  height: 1.4px;
  background-color: black;
  top: 7px;
}

.text-decoration-slash:before {
  transform: rotate(55deg) translate(-11px, 11px);
  transform-origin: 0 0;

}

.text-decoration-slash:after {
  transform: rotate(-55deg) translate(0px, -7px);
  transform-origin: 100% 0;
}

.f-before-btn a {
  width: 280px;
  padding: 23px 50px !important;
  border-radius: 34.5px !important;
}

/*共通*/


/*ユーティリティ*/
.width-100 {
  width: 100%;
}

.sec-child-width-100 :nth-child(n+2) {
  width: 100%;
}

.ps-relative {
  position: relative;
}

.pd-0 {
  padding: 0 !important;
}

.pd-04em {
  padding: .4em !important;
}

.pd-05em {
  padding: .5em !important;
}

.pd-l-04em {
  padding-left: .4em !important;
}

.pd-l-0 {
  padding-left: 0 !important;
}

.pd-r-0 {
  padding-right: 0 !important;
}

.mg-0 {
  margin: 0 !important;
}

.mg-b-0 {
  margin-bottom: 0 !important;
}

.mg-b-125em {
  margin-bottom: 1.25em !important;
}

.mg-b-08em {
  margin-bottom: .8em !important;
}

.mg-b-07em {
  margin-bottom: .7em !important;
}

.mg-l-auto {
  margin-left: auto !important;
}

.mg-auto {
  margin: 0 auto !important;
}

.fw-light {
  font-weight: 400;
}

.fw-normal {
  font-weight: 500;
}

.fw-bold {
  font-weight: 600;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

.text-align-left {
  text-align: left;
}

.text-align-justify {
  text-align: justify;
}

.text-align-last-justify {
  text-align-last: justify;
  text-justify: inter-ideograph;
}

.align-item-cnt {
  display: flex !important;
  align-items: center !important;
}

.align-item-stretch {
  align-items: stretch !important;
}

.justify-content-cnt {
  display: flex !important;
  justify-content: center !important;
}

.justify-content-btw {
  display: flex !important;
  justify-content: space-between !important;
}

.w-article {
  width: var(--article_size);
}

.d-inline-block {
  display: inline-block;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.flex-grow1 {
  flex-grow: 1;
}

.obj-fit-cover {
  object-fit: cover;
}

.text-narrow-08 {
  transform: scale(0.8, 1);
}

.zindex-1 {
  z-index: 1;
}

.border-bt-dotted {
  border-bottom: 1px dotted;
}

.ovf-visible,
.ovf-visible * {
  overflow: visible;
}

.gap-0 {
  gap: 0 !important;
}

/*スクロールバー非表示*/
.scb-none::-webkit-scrollbar {
  display: none;
}

.scb-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/*改行禁止*/
.nowrap {
  white-space: nowrap !important;
}

/*縦書き*/
.is-style-vertical-text {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

/*縦書き*/
.icon-posted:before {
  display: none;
}

.p-postList__meta :before {
  display: none;
}

/*テキスト波線*/
.text-with-wave {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--color_main);
  text-underline-offset: 6px;
}

/*破線*/
.dotted01-bottom {
  background-image: linear-gradient(to right, #000 1px, transparent 1px) !important;
  background-size: 3.8px 1px !important;
  background-repeat: repeat-x !important;
  background-position: left bottom !important;
}
/*破線：フルワイド(スペーサーに指定)*/
.dotted01-bottom-full{
	position:relative;
}
.dotted01-bottom-full:after{
  content:""!important;
  height:1px;
  width:100vw;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc((100vw - var(--container_size, 0px)) / -2);
  background-image: linear-gradient(to right, #000 1px, transparent 1px) !important;
  background-size: 3.8px 1px !important;
  background-repeat: repeat-x !important;
  background-position: left bottom !important;
}
@media(max-width:960px){
	.dotted01-bottom-full:after {
		left: calc(var(--swl-fw_inner_pad)* -1);
   }
}

.dotted01-top {
  background-image: linear-gradient(to right, #000 1px, transparent 1px) !important;
  background-size: 3.8px 1px !important;
  background-repeat: repeat-x !important;
  background-position: left top !important;
}

.dotted01-right {
  background-image: linear-gradient(to bottom, #000 1px, transparent 1px) !important;
  background-size: 1px 3.8px !important;
  background-repeat: repeat-y !important;
  background-position: right top !important;
}

.dotted01-left {
  background-image: linear-gradient(to bottom, #000 1px, transparent 1px) !important;
  background-size: 1px 3.8px !important;
  background-repeat: repeat-y !important;
  background-position: left top !important;
}

.dotted01-top-bottom {
  background-image: linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to right, #000 1px, transparent 1px);
  background-size: 3.8px 1px, 3.8px 1px;
  background-repeat: repeat-x, repeat-x;
  background-position: left top, left bottom;
}

/*投稿リストの一個目を消す*/
.disp-none-first-post ul>li:first-child {
  display: none;
}

/*
    * 画像の上に文字を重ねる
    * 以下の構成でグループに指定
    * グループ
    *  -画像
    *  -テキスト
    * */

.is-style-overlay-text {
  position: relative;
}

.is-style-overlay-text div:nth-child(n+2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overlay-text-parent {
  position: relative;
}

.overlay-text-child-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*ユーティリティ*/


/*D-school*/

/*講師ブロック*/
.ds-teacher-block {
  display: flex;
  flex-flow: row-reverse;
}

.ds-featured-media {
  width: 216px;
}

.ds-featured-media img {
  width: 100%;
  aspect-ratio: 1/1;
	object-fit:cover;
}

.ds-teacher-block-right {
  margin-left: 32px;
  min-width: 498px;
}

.ds-teacher-info.ds-categories {
  font-size: 0.8125em;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.ds-teacher-info.ds-title {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  padding-bottom: 17px;
  background-image: linear-gradient(to right, #000 0.8px, transparent 0.8px);
  background-size: 3.8px 0.8px;
  background-repeat: repeat-x;
  background-position: left bottom;
  margin-bottom: 20px;
}

.ds-teacher-info.ds-teacher-intro {
  font-size: 0.8125em;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 2;
  padding-right: 44px;
  white-space: pre-wrap;
  width: 100%;
}

@media (min-width:960px) {
  .ds-teacher-info.ds-teacher-intro.sp {
    display: none;
  }
}

/*投稿一覧のページネーション*/
.c-pagination {
  justify-content: flex-start;
  padding-bottom: 12em !important;
}

a.to-next-link,
a.to-prev-link {
  margin: 6px;
  font-size: 0.9375rem;
}

a.to-next-link {
  margin-left: 30px;
}

a.to-prev-link {
  margin-right: 30px;
}

a.to-prev-link:before {
  font-family: icomoon;
  content: "\e911";
  margin-right: 0.3em;
}

a.to-next-link:after {
  font-family: icomoon;
  content: "\e921";
  margin-left: 0.3em;
}

/*下層ページタイトル*/
.post_content .page-title-header {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
	padding-bottom: 9px!important;
  margin-left:0!important;
}

/*固定サイドナビ(内部ヘッダーウィジット)*/
.w-header.pc_ {
  position: fixed;
  display: flex;
  left: 0;
  top: 220px;
  margin: 0 !important;
}

.fix-side-col {
  position: relative;
}

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧サイドナビ: swellカラム用レイアウト / ボタン / Instagramアイコン / キャラ既定位置
.ds-fix-side-nav>div {
  flex-flow: column !important;
}

.ds-fix-side-nav-item a {
  width: 100% !important;
  padding: 13px 25px 16px 26px !important;
  height: 76px;
  display: flex;
  align-items: center;
  box-shadow: 3px 3px 3px rgba(45, 45, 45, 0.15);
  justify-content: flex-end;
}

.ds-fix-side-nav-item span.swl-inline-icon:after {
  width: 29.7px !important;
  height: 29.7px !important;
  max-width: unset !important;
  left: -4px !important;
}

svg.fix-side-chara {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  (*opacity: 0;*)
  width: 27px !important;
}
  ===== */

.fix-side-btn a:hover {
  opacity: 1 !important;
}

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧サイドナビ: キャラ個別位置(02/03)
.fix-side-col-02 svg.fix-side-chara {
  top: 50%;
  right: 5px;
  width: 41px !important;
}

.fix-side-col-03 svg.fix-side-chara {
  top: 40%;
  right: 3px;
  width: 39px !important;

}
  ===== */

/*Swellボタンの白ノーマルスタイル*/
.ds-swell-btn-normal a {
  width: 100%;
  padding: 24px;
  letter-spacing: 2px;
  background: #fff;
}

/*Swellボタンの白ノーマルスタイル*/
/*Swellボタンのmoreスタイルオーバライド*/
.swell-block-button.is-style-more_btn {
  width: 87px;
}

.is-style-more_btn a {
  box-shadow: none;
}

.is-style-more_btn a:after {
  content: "\e930";
  font-family: icomoon;
  position: absolute;
  right: 8px;
  bottom: -22px;
  font-size: 2em;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: -webkit-transform .25s;
  transition: transform .25s;
  transition: transform .25s, -webkit-transform .25s;
}

.is-style-more_btn a:hover {
  background: #fff;
  color: #3C3C3C;
}

/*Swellボタンのmoreスタイルオーバライド*/
/*くわしく知るの矢印*/
.more-arrow-01 {
  position: relative !important;
}

.more-arrow-01 a:before {
  content: "" !important;
  background: url(https://ddd-school.com/wp-content/uploads/2023/12/more-arrow-01.svg);
  width: 146px;
  height: 7px;
  position: absolute !important;
  background-size: contain;
  background-repeat: no-repeat;
  bottom: -7px;
  right: -60px;
}


/*トップ*/
.top-sec1-title1,
.top-sec1-title2 {
  background: #fff !important;
  width: 397px !important;
  padding: 0px 0px 4px 22px !important;
}

.top-durmission-wp {
  padding-left: 138px;
}

.top-durmission-left {
  background: #fff;
  max-height: 260.8px;
}

.top-durmission-left .more-arrow-01 {
  margin-right: 85px !important;
}

.post_content .top-sec-title {
    background: #fff;
    padding: 7px 10px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧レッスン: 見出しの反転背景(.top-sec-title-rev)
.top-sec-title-rev {
  background: #e6e6e6 !important;
}
  ===== */

.top-sec-innertitle {
  width: fit-content;
  padding-bottom: 12px !important;
}

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧レッスン: タイトル幅・キャラ位置・カラム/ナンバー(.top-system-*)
.top-system-title1 {
  width: 742px;
  margin-top: 0 !important;
}

.top-system-title2 {
  width: 657px;
}

.top-system-chara1 {
  position: absolute !important;
  right: 164px;
  top: 50%;
  transform: translateY(-50%)!important;
}

.top-system-chara2 {
  position: absolute !important;
  left: 26%;
  top: 50%;
  transform: translateY(-50%);
}

.top-system-chara3 {
  position: absolute !important;
  left: 55%;
  bottom: 12%;
}

.top-system-col-wp .wp-block-column {
  position: relative;
  border-radius: 15px;
  padding: 45px 45px 24px 45px !important;
}

.top-system-col-wp p.dotted01-bottom {
  padding-bottom: 1.5rem;
}

.top-system-number {
  position: absolute !important;
  top: 0;
  left: 0;
  border-radius: 15px 0 0 0;
  padding: 18px 60px 60px 18px !important;
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%)
}

.top-system-number p {
  transform: rotate(-45deg);
}
  ===== */

.top-sec2-title1 {
  width: 623px;
}

.top-sec2-title2 {
  width: 252px;
}

.top-sec2-left-chara {
  padding-right: 38px;
}

.top-sec2-left-text {
  padding-right: 32px;
}

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧お知らせ: 2カラム左側レイアウト・MOREボタン位置
.top-news-left {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.top-news-left .is-style-more_btn {
  margin-left: auto;
  margin-right: 100px;
}
  ===== */

.p-postListWrap.top-news-list .p-postList__body:after,
.p-postList__body:after {
  display: none;
}

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧お知らせ: meta/title の order・サイズ、simple型の枠線、リンクの上下padding
.p-postListWrap.top-news-list .p-postList__meta {
  order: 0;
  font-size: .815em !important;
}

.p-postListWrap.top-news-list .p-postList__title {
  order: 1;
  min-height: 43px;
  font-size: 1em !important;
}

.p-postListWrap.top-news-list .p-postList.-type-simple {
  border-top: none;
}

.p-postListWrap.top-news-list .p-postList__item a {
  padding-bottom: 0;
  padding-top: 2.3em;
}

.p-postListWrap.top-news-list .p-postList__item:first-child a {
  padding-top: 0;
}
  ===== */

.top-sec4-title1 {
  width: 428px;
}

.top-sec4-title2 {
  width: 550px;
}

.top-sec4-left-link {
  width: 322px;
  letter-spacing: 3px;
}

.top-sec4-left-link a {
  letter-spacing: 3px;
}

.top-sec5-left-link {
  width: 197px;
}

.top-sec5-left-link a {
  border-radius: 10px;
  padding: 21px;
  font-size: 1.18rem !important;
  font-weight: 300 !important;
  line-height: 1;
}

.top-contact-wp>div {
  box-shadow: 5px 5px 8px rgba(45, 45, 45, 0.25);
  border-radius: 50px;
  width: fit-content;
}

.top-contact-wp {
  padding-left: 68px;
}

.top-contact-left {
  background: #ffe100;
  border-radius: 50px 0 0 50px;
  max-height: 323px;
}

.top-contact-right figure {
  margin: 0 !important;
}

.top-contact-right img {
  border-radius: 0 50px 50px 0;
  min-height: 322px;
  object-fit: cover;
}

svg#discoverme-svg {
  display: flex;
  justify-content: center;
  align-items: center;
	margin: 0 auto;
}

@media (max-width:1200px) {
  svg#discoverme-svg {
    width: 100%;
  }
}

.top-youtube{
	height:100%;
	aspect-ratio: 16 / 9;
}

.top-airi-banner-wp {
    position: absolute;
    bottom: -136px;
    z-index: 1;
}
.top-airi-banner-inner {
    position: relative;
}
.top-airi-news-btn {
    position: absolute;
    right: -38px;
    bottom: -47px;
}
/*コンセプト*/
.concept-catch {
  background: #fff;
  width: 661px;
  padding: 36px 42px;
}

.concept-catch-img-01 {
  position: absolute;
  top: -88px;
  left: 312px;
}

.concept-catch-img-02 {
  position: absolute;
  left: 90px;
  top: 120px;
}

.concept-catch-img-03 {
  position: absolute;
  left: 760px;
  top: 116px;
}

.concept-points {
  background: #fff !important;
  width: 100% !important;
  padding: 13px 40px !important;
  border-left: 9px solid var(--color_main) !important;
  margin-bottom: 34px !important;
}

.concept-point-wp>.concept-points:nth-child(3n+1) {
  border-left: 9px solid #c9db55 !important;
}

.concept-point-wp>.concept-points:nth-child(3n) {
  border-left: 9px solid #f3b1b9 !important;
}

.concept-points-chara {
  position: absolute !important;
  top: 22px;
  z-index: 1;
  right: 40px;
}

.concept-sec1-text {
    position: absolute;
    white-space: nowrap;
    left: -104px;
    top: 40px;
}

.concept-sec2-col6-chara {
    position: absolute;
    top: -27px;
    right: 33px;
}
.concept-sec2-col6 {
    position: relative;
}

.concept-garalley-01 {
  left: -40px;
  position: relative;
}

.concept-garalley-02 {
  position: relative;
  right: -22px;
  top: 100px;
}

.concept-garalley-04 {
  position: relative;
  top: 136px;
  right: 21px;
}

.concept-logo-wp {
  padding: 10.9em 0 !important;
}

.concept-logo-wp>div {
  position: relative;
}

.concept-logo {
  position: absolute;
  top: -363px;
  left: 50%;
  transform: translateX(-50%);
}

/*システム*/
.system-catch {
  background: #fff;
  width: 280px;
  padding: 22px 26px;
}

.system-menbership {
  height: 288px;
}

.system-menbership>div {
  height: 100%;
  position: relative;
}

.system-menbership-col {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.system-menbership-col.dotted01-right:after {
  content: "";
  background: url(https://ddd-school.com/wp-content/uploads/2023/12/system-menber-arrow.svg);
  background-repeat: no-repeat;
  width: 100px;
  height: 38px;
  position: absolute;
  right: 0;
  bottom: 50%;
  transform: translate(50%, -50%);
}

.system-menbership-col:nth-child(1) {
  height: 68%;
}

.system-menbership-col:nth-child(1):after {
  bottom: 42.6%;
}

.system-menbership-col:nth-child(2) {
  height: 84%;
}

.system-menbership-col:nth-child(2):after {
  bottom: 56.6%;
}

.system-member-icon {
  background: #4c4948;
  width: 102px;
  height: 102px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 132px;
  left: 50%;
  transform: translateX(-50%);
}

.system-menbership>div:before {
  content: "";
  background: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  clip-path: polygon(0 48%, 100% 0, 100% 100%, 0% 100%);
}

.system-menber-chara1 {
  position: absolute;
  right: 35px;
  bottom: 138px;
}

.system-menber-chara2 {
  position: absolute;
  right: 34px;
  bottom: 190px;
}

.system-menber-chara3 {
  position: absolute;
  right: 35px;
  bottom: 220px;
}

.system-price-right .swell-block-columns__inner {
  min-height: 65px;
}

.system-price-back1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.system-price-back1:before {
  content: "";
  background: url(https://ddd-school.com/wp-content/uploads/2023/12/system-price-back1.png);
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.system-price-back2:before {
  background: #f3b1b9 !important;
}

.system-price-back3:before {
  background: #ffffff !important;
}

.system-dotted {
  position: relative;
}

.system-dotted:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 53%;
  height: 1px;
  background-image: linear-gradient(to right, #000 0.8px, transparent 0.8px);
  background-size: 3.8px 0.8px;
  background-repeat: repeat-x;
}

.system-price-beg-menbercol-2 .system-dotted:after {
  width: 44%;
}

.system-reserve-title {
  width: 443px;
}

.system-reserve-header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.system-price-btn a {
  background: #fff;
  color: #2d2d2d;
  border-radius: 12px;
  height: 93px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.system-price-btn .swl-inline-icon:after {
  max-width: 4ch;
  width: 35px;
  top: 3px;
  left: -4px;
}

.system-app-title {
  width: 174px;
  height: 29px;
  margin: 0 auto;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*コース紹介*/
.p-postListWrap.course-list .p-postList__body:after,
.p-postList__body:after,
.course-list .p-postListWrap .p-postList__body:after,
.p-postList__body:after {
  display: none;
}

.course-list .p-postList__meta {
  display: none;
}

.course-list .p-postList__excerpt,
.course-teacher-list .p-postList__excerpt {
  display: none;
}

@media (min-width: 960px) {

  .course-list.-col4 .-type-card.-pc-col3 .p-postList__item,
  .-col4 .-type-thumb.-pc-col3 .p-postList__item {
    width: calc(100% / 4 - 12px);
    margin-bottom: 12px;
  }
}

.course-list.-col4 ul li {
  border: 1px solid #2d2d2d;
  border-radius: 24px;
  background: #fff;
  margin-right: 12px;
  padding: 6px !important;
}

.course-list.-type-big .p-postList__body,
.-type-card .p-postList__body {
  padding-top: 0.4em;
}

.course-list .p-postList__thumb {
  border-radius: 21px 21px 0 0;
}

.course-list .p-postList__title {
  font-size: 0.9375em !important;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 56px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px;
}

.course-header {
  background: #fff;
  width: 363px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.course-class-list li {
  margin-top: 0;
  margin-bottom: 1.3em;
}

/*
 .course-teacher-list a {
   pointer-events: none;
 }
 */

.course-teacher-list.-col5 .-type-card.-pc-col3 .p-postList__item,
.-col5 .-type-thumb.-pc-col3 .p-postList__item {
  width: calc(100% / 5 - 12px);
  margin-bottom: 1em;
}

.course-teacher-list.-col5 ul li {
  background: #fff;
  margin-right: 12px;
  padding: 12px !important;
}

.course-teacher-list .p-postList__thumb.c-postThumb {
  box-shadow: none;
  border-radius: 0;
}

.course-teacher-list .c-postThumb__figure {
  margin-bottom: 13px;
}

.course-teacher-list .my_postThumb__term {
  display: flex;
  height: 24px;
  position: relative;
  padding-bottom: 5px;
  width: 100%;
  justify-content: flex-start;
}

/*カテゴリ表示。カスタマイザは、サムネの上に表示にする*/
.course-teacher-list .my_postThumb__term .c-postThumb__cat {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  margin: 0 5px 0 0;
  background: none;
  color: #000;
  padding: 0 !important;
  font-size: 0.73em !important;
  font-weight: 500 !important;
  border-radius: 0;
}

.course-teacher-list .p-postList__meta {
  display: none;
}

.course-teacher-list .my_postThumb__term .icon-folder:before {
  display: none;
}

.course-teacher-list .p-postList__body:after,
.p-postList__body:after {
  display: none;
}

.course-teacher-list h2.p-postList__title {
  font-weight: 500 !important;
  font-size: 1em !important;
  min-height: auto;
  letter-spacing: .1em;
}

.course-teacher-list .c-postThumb__figure:before {
  padding-top: 100%;
}

.course-teacher-list .p-postList__body {
  background-image: linear-gradient(to right, #000 0.8px, transparent 0.8px);
  background-size: 3.8px 0.8px;
  background-repeat: repeat-x;
  background-position: left top;
}

/*コースの投稿*/
.single-course main.-course {
  padding: 0 8.875em;
}

.single-course main.-course .my-custom-post-header .c-postTitle__date {
  display: none;
}

.single-course main.-course .my-custom-post-header .p-articleMetas.-top {
  display: none;
}

.single-course main.-course .my-custom-post-header {
  display: flex;
  flex-direction: row;
  margin-bottom: 4em !important;
  margin-top: 6em !important;
}

.single-course main.-course figure.p-articleThumb {
  width: 56%;
  margin: 0 !important;
}

.single-course main.-course .p-articleThumb__img {
  border-radius: 0;
  box-shadow: none;
}

.single-course main.-course .p-articleHead.c-postTitle {
  width: 42.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
}

.single-course main#main_content.-course {
  margin-bottom: 8em !important;
}

.single-course main#main_content.-course .c-postTitle__ttl {
  font-size: 1.3em !important;
  letter-spacing: .15em;
  padding: 36px;
}

.single-course .-course .p-pnLinks__link {
  flex-flow: column;
}

.single-course .-course .-next .p-pnLinks__link {
  flex-flow: column-reverse;
}

.single-course .-course .p-pnLinks__item.-prev:before,
.single-course .-course .p-pnLinks__item.-prev:after,
.single-course .-course .p-pnLinks__item.-next:before,
.single-course .-course .p-pnLinks__item.-next:after {
  border: none;
}

.single-course .-course .p-pnLinks__item.-prev:before,
.single-course .-course .p-pnLinks__item.-next:after {
  display: none;
}

.single-course .-course .p-pnLinks__item.-prev:after {
  right: 0;
  top: calc(50% - 16px);
  transform: translateY(-50%);
  background: #2d2d2d;
  height: calc(tan(65deg) * 14px / 2);
  width: 14px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.single-course .-course .p-pnLinks__item.-next:before {
  left: 0;
  top: calc(50% - 16px);
  transform: translateY(-50%);
  background: #2d2d2d;
  height: calc(tan(65deg) * 14px / 2);
  width: 14px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.single-course .-course .-list a.p-pnLinks__link {
  justify-content: center;
}

.single-course .-course .p-pnLinks__item.-prev .p-pnLinks__thumb {
  margin-right: 0px;
}

.single-course .-course .p-pnLinks__item.-next .p-pnLinks__thumb {
  margin-left: 0px;
}

.single-course .-course .p-pnLinks__item.-list {
  margin-top: -32px;
}

@media (min-width: 600px) {
  .single-course .-course .p-pnLinks__thumb {
    height: 98px;
    width: 147px;
  }
}

.single-course .p-articleFoot {
  margin-top: 7.5em;
}

/*講師の投稿*/
.single-teacher main.-teacher {
  padding: 0 8.875em;
}

.single-teacher main.-teacher .my-custom-post-header .c-postTitle__date {
  display: none;
}

.single-teacher main.-teacher .my-custom-post-header .p-articleMetas.-top {
  display: none;
}

.single-teacher main.-teacher .my-custom-post-header {
  display: flex;
  flex-direction: row;
  margin-bottom: 4em !important;
  margin-top: 6em !important;
}

.single-teacher main.-teacher figure.p-articleThumb {
  width: 56%;
  margin: 0 !important;
}

.single-teacher main.-teacher .p-articleThumb__img {
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  aspect-ratio: 1/1;
  max-height: 339.25px;
}

.single-teacher main.-teacher .p-articleHead.c-postTitle {
  width: 42.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
}

.single-teacher main#main_content.-teacher {
  margin-bottom: 8em !important;
}

.single-teacher main#main_content.-teacher .c-postTitle__ttl {
  font-size: 1.3em !important;
  letter-spacing: .15em;
  padding: 36px;
}

.single-teacher .-teacher .p-pnLinks__link {
  flex-flow: column;
}

.single-teacher .-teacher .-next .p-pnLinks__link {
  flex-flow: column-reverse;
}

.single-teacher .-teacher .p-articleMetas.-bottom {
  display: none;
}

.single-teacher .-teacher .p-pnLinks__item.-prev:before,
.single-teacher .-teacher .p-pnLinks__item.-prev:after,
.single-teacher .-teacher .p-pnLinks__item.-next:before,
.single-teacher .-teacher .p-pnLinks__item.-next:after {
  border: none;
}

.single-teacher .-teacher .p-pnLinks__item.-prev:before,
.single-teacher .-teacher .p-pnLinks__item.-next:after {
  display: none;
}

.single-teacher .-teacher .p-pnLinks__item.-prev:after {
  right: 0;
  top: calc(50% - 16px);
  transform: translateY(-50%);
  background: #2d2d2d;
  height: calc(tan(65deg) * 14px / 2);
  width: 14px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.single-teacher .-teacher .p-pnLinks__item.-next:before {
  left: 0;
  top: calc(50% - 16px);
  transform: translateY(-50%);
  background: #2d2d2d;
  height: calc(tan(65deg) * 14px / 2);
  width: 14px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.single-teacher .-teacher .-list a.p-pnLinks__link {
  justify-content: center;
}

.single-teacher .-teacher .p-pnLinks__item.-prev .p-pnLinks__thumb {
  margin-right: 0px;
}

.single-teacher .-teacher .p-pnLinks__item.-next .p-pnLinks__thumb {
  margin-left: 0px;
}

.single-teacher .-teacher .p-pnLinks__item.-list {
  margin-top: -32px;
}

@media (min-width: 600px) {
  .single-teacher .-teacher .p-pnLinks__thumb {
    height: 98px;
    width: 98px;
  }

  .single-teacher .-teacher .p-pnLinks__thumb img {
    aspect-ratio: 1/1;
  }
}

.single-teacher .p-articleFoot {
  margin-top: 7.5em;
}


/*お知らせ*/
.p-blogParts.post_content[data-partsid="1683"] {
  width: 100%;
}

.-cpl .p-pupularContent.u-mt-40 {
  margin: 0 !important;
}

.ds-custom-post-list-wp {
  padding-top: 49px
}

.ds-custom-post-list-item {
  padding: 22px 0;
  border-top: 1px solid #231815;
}

.ds-custom-post-list-item:last-child {
  border-bottom: 1px solid #231815;
}

.ds-custom-post-list-item a {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.-cpl .cpl-post-date {
  color: #000;
  font-size: 0.8125em;
  flex-basis: 24.2%;
  letter-spacing: 0.1em;
}

.cpl-post-info {
  flex-basis: 47.6%;
  height: auto;
}

.-cpl h2.cpl-post-title.scb-none {
  margin: 0 0 10px 0;
  font-size: 1.125em;
  min-height: unset;
  font-weight: 600;
  line-height: 1.25
}

ul.cpl-post-category {
  display: flex;
  flex-direction: row;
  margin-bottom: 36px;
  font-size: 0.875em;
  font-weight: 300;
  color: #646464;
}

li.cpl-post-category-item {
  background: #fff;
  padding: 7px 9px 7px 7px;
  margin-right: 10px;
  line-height: 1;
}

.cpl-post-excerpt {
  font-size: 0.875em;
  color: #646464;
  width: 254px;
}

.-cpl .cpl-post-thumbnail {
  height: 134px;
  margin-right: 42px;
  margin-left: 30px;
  flex-basis: 28.2%;
}

.-sidewedget h2.wp-block-heading {
  text-align: center;
  border-bottom: 0.3px solid #231815;
  padding-bottom: 24px;
  font-size: 0.9375rem !important;
  font-weight: 300;
  letter-spacing: 0.2em;
  margin-bottom: 36px;
}

.-sidewedget .widget_categories>ul>.cat-item>a:before,
.wp-block-categories-list>li>a:before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  position: absolute;
  border: 1px solid var(--color_text);
  top: 1.45em;
  left: 0;
}

.-sidewedget .widget_categories>ul>.cat-item>a,
.wp-block-categories-list>li>a {
  padding-left: 1.25em;
}

/*通常投稿*/
.single.single-post div#content {
    	margin-top: 4em;
}

.single-post main .p-articleThumb__img {
  border-radius: 0;
  box-shadow: none;
}

.single-post main#main_content {
  margin-bottom: 8em !important;
}

.single-post .p-articleMetas__times.c-postTimes.u-thin {
  font-size: .75em;
  letter-spacing: .1em;
  margin-bottom: 1.7em;
}

.single-post .c-postTitle__ttl {
  font-size: 1.3125em;
  letter-spacing: .1em;
}

.single-post .-normal-post .-list a.p-pnLinks__link {
  justify-content: center;
}

.single-post ul.p-pnLinks.-style-simple.-normal-post {
  width: 70%;
  margin-top: 13.125em !important;
}

.single-post .p-articleHead.c-postTitle {
  flex-flow: column-reverse;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 2em;
}

.single-post .p-articleFoot {
  display: none;
}

/*問い合わせ*/

/*フォーム*/
/*コンタクトフォーム*/
form.wpcf7-form.init {
  color: #000;
}

button,
input,
select,
textarea {
  border-color: var(--color_main);
}

span.haifun {
  padding: 4px;
}

.contact-form-requred {
  color: #FF0000;
}

.contact-form-wp {
  border: 1px solid var(--color_main);
  margin-bottom: 3.375em;
}

.contact-form-row {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  border: 1px solid var(--color_main);
}

.contact-form-row:not(:last-child) {
  border-bottom: 1px solid var(--color_main);
}

.contact-form-label {
  flex-basis: 31%;
  background: #B0D8D2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-form-items {
  flex-basis: 69%;
  padding: 24px 0 24px 30px;
  max-width: 69%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.message-field .contact-form-item {
  width: 94%;
}

span.wpcf7-list-item-label {
  line-height: 1;
}

span.wpcf7-form-control.wpcf7-radio.matter .wpcf7-list-item {
  margin-left: 0;
}

span.wpcf7-form-control.wpcf7-radio.matter {
  display: flex;
  flex-flow: column;
}

span.wpcf7-form-control.wpcf7-radio.contact-kind .wpcf7-list-item.first {
  margin-left: 0;
}

.contact-kind .wpcf7-list-item {
  margin: 0 0 0 0em;
}

.contact-kind .wpcf7-list-item.last label {
  margin-right: 0px;
}

.contact-form-item label {
  margin-right: 7px;
}

.name-field input.wpcf7-form-control.wpcf7-text {
  width: 80%;
}

.kana-field input.wpcf7-form-control.wpcf7-text {
  width: 75%;
}

.mail-field .contact-form-item {
  flex: 1;
}

input.wpcf7-form-control.wpcf7-email.email {
  width: 94%;
}

.phone-field .contact-form-item p {
  display: flex;
}

.phone-field span.wpcf7-form-control-wrap {
  flex-basis: 20%;
}

.phone-field .contact-form-item p span.wpcf7-form-control-wrap input {
  width: 100%;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance: textfield;
}

.address-field .contact-form-items {
  flex-flow: column;
  align-items: flex-start;
  gap: 0.5em;
}

.address-field .contact-form-item {
  width: 100%;
}

input.zipcode {
  width: 179px;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
  content: " ";
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.city,
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.address {
  width: 90%;
}

textarea.wpcf7-form-control.wpcf7-textarea.message {
  height: 117px;
  width: 100%;
}

.contact-form-under {
  text-align: center;
  margin-bottom: 2.8125em;
}

.contact-form-under a {
  color: #007DFF;
}

.contact-form-submit>p {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.contact-form-submit input.wpcf7-form-control.wpcf7-submit {
  background: var(--color_main);
  color: #fff;
  border-radius: 25px;
  padding: 24px 80px 23px 40px;
  line-height: 1;
  font-size: 1.125em;
}

.contact-form-submit input.wpcf7-form-control.wpcf7-submit:hover {
  opacity: .7;
}

.contact-form-submit>p:after {
  content: "";
  background: url(https://ddd-school.com/wp-content/uploads/2024/02/contact-submit-arrow.png);
  position: absolute;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  top: 24%;
  right: 25px;
}

.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item {
  margin-left: 0;
  padding-right: 1em;
}

.privacy-field.contact-form-row .contact-form-label {
  padding-left: 5px;
}

.company-info td,
.company-info th {
  border: 1px solid var(--color_main);
}

/*フッター直前*/
.f-before-wp {
  padding-top: 14em !Important;
  position: relative !important;
}

.f-before-links {
  background: #fff;
  justify-content: space-between;
  align-items: center;
  width: 650px;
  margin: 0 auto;
  padding: 30px 70px !important;
  border-radius: 38px;
  letter-spacing: .14em;
}

.f-before-charactors {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.f-before-cta-wp {
  width: 925px;
  border: 4px solid #93D0C5;
  box-shadow: 5px 5px 7px rgba(0, 188, 174, 0.5);
  border-radius: 129.5px;
  padding: 42px 40px 57px !important;
  position: absolute;
  top: -36%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.f-before-info>div {
  gap: 3.4em;
}

.f-before-cta-col-left {
  position: relative !important;
}

.f-before-cta-col-left:before {
  content: "" !important;
  background: url(https://ddd-school.com/wp-content/uploads/2023/12/ds-arrow-icon-right.png);
  width: 25px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute !important;
  top: 50% !important;
  right: -20px !important;
  transform: translate(-50%, -50%);
}

.f-before-cta-chara09 {
  position: absolute !important;
  left: 35px;
  bottom: -42px;
}

.f-before-cta-chara07 {
  position: absolute !important;
  right: 50px;
  bottom: -37px;
}



/*サイト幅～スマホサイズ*/
@media (min-width: 960px) and (max-width:1030px) {
  .top-contact-wp {
    padding-left: 0px;
  }
}

/* SwellのスマホとPC切り替わり */
@media (min-width: 960px) {}

@media (max-width: 959px) {

  /*full-wide*/
  .sp-full-wide .swell-block-fullWide__inner.l-article {
    padding: 0 !important;
  }

  /*text-align*/
  .sp-text-align-center {
    text-align: center !important;
  }

  .sp-text-align-justify {
    text-align: justify !important;
  }

  .sp-text-align-left {
    text-align: left !important;
  }

  /*font-size*/
  .sp-fs-08em {
    font-size: 0.8em !important;
  }

  .sp-fs-085em {
    font-size: 0.85em !important;
  }

  .sp-fs-09em {
    font-size: 0.9em !important;
  }

  .sp-fs-095em {
    font-size: 0.95em !important;
  }

  .sp-fs-1em {
    font-size: 1em !important;
  }

  .sp-fs-11em {
    font-size: 1.1em !important;
  }

  .sp-fs-12em {
    font-size: 1.2em !important;
  }

  .sp-fs-13em {
    font-size: 1.3em !important;
  }

  .sp-fs-135em {
    font-size: 1.35em !important;
  }

  .sp-fs-14em {
    font-size: 1.4em !important;
  }

  .sp-fs-15em {
    font-size: 1.5em !important;
  }

  .sp-fs-16em {
    font-size: 1.6em !important;
  }

  .sp-fs-17em {
    font-size: 1.7em !important;
  }

  .sp-fs-18em {
    font-size: 1.8em !important;
  }

  .sp-fs-19em {
    font-size: 1.9em !important;
  }

  .sp-fs-20em {
    font-size: 2.0em !important;
  }

  .sp-fs-21em {
    font-size: 2.1em !important;
  }

  .sp-fs-25em {
    font-size: 2.5em !important;
  }

  .sp-fs-29em {
    font-size: 2.9em !important;
  }

  .sp-fs-3em {
    font-size: 3em !important;
  }

  .sp-fs-48em {
    font-size: 4.8em !important;
  }

  .sp-fs-5em {
    font-size: 5em !important;
  }

  /*margin*/
  .sp-margin-0-auto {
    margin: 0 auto !important;
  }

  .sp-mg-bt-0 {
    margin-bottom: 0 !important;
  }

  .sp-mg-bt-05em {
    margin-bottom: .5em !important;
  }

  .sp-mg-bt-1em {
    margin-bottom: 1em !important;
  }

  .sp-mg-bt-2em {
    margin-bottom: 2em !important;
  }

  .sp-mg-bt-3em {
    margin-bottom: 3em !important;
  }

  .sp-mg-bt-4em {
    margin-bottom: 4em !important;
  }

  .sp-mg-lf-0 {
    margin-left: 0 !important;
  }

  .sp-mg-rg-0 {
    margin-right: 0 !important;
  }

  /*padding*/
  .sp-pd-0 {
    padding: 0 !important;
  }

  .sp-pd-05em {
    padding: 0.5em !important;
  }

  .sp-pd-1em {
    padding: 1em !important;
  }

  .sp-pd-l-04em {
    padding-left: 0.4em !important;
  }

  /*width*/
  .sp-width-91 {
    width: 91% !important;
  }

  .sp-width-90 {
    width: 90% !important;
  }

  .sp-width-80 {
    width: 80% !important;
  }

  /*height*/
  .sp-height-0 {
    height: 0 !important;
  }

  .sp-height-09em {
    height: 0.9em !important;
  }

  .sp-height-1em {
    height: 1em !important;
  }

  .sp-height-15em {
    height: 1.5em !important;
  }

  .sp-height-2em {
    height: 2em !important;
  }

  .sp-height-25em {
    height: 2.5em !important;
  }

  .sp-height-3em {
    height: 3em !important;
  }

  .sp-height-35em {
    height: 3.5em !important;
  }

  .sp-height-4em {
    height: 4em !important;
  }

  .sp-height-5em {
    height: 5em !important;
  }

  .sp-height-6em {
    height: 6em !important;
  }

  .sp-height-7em {
    height: 7em !important;
  }

  .sp-height-10em {
    height: 10em !important;
  }

  .sp-height-11em {
    height: 11em !important;
  }

  /*line-height*/
  .sp-lh-15 {
    line-height: 1.5 !important;
  }

  .sp-lh-2 {
    line-height: 2 !important;
  }

  /*letter-space*/
  .sp-ls-0 {
    letter-spacing: 0 !important;
  }

  /*scale*/
  .sp-scale-x-09 {
    transform: scaleX(0.9) !important;
  }

  /*flex*/
  .sp-flex-wrap {
    flex-wrap: wrap !important;
  }

  .sp-flex-nowrap {
    flex-wrap: nowrap !important;
  }

  /*gap*/
  .sp-row-gap-2em {
    row-gap: 2em !important;
  }

  .sp-figure-width img {
    width: 70vw !important;
  }

  /*TOP*/
  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧MV: SPキャッチ位置 + キャラSVG3体 + 写真3枚並び
  .top-hero-text-sp {
    position: relative;
    left: 6vw;
  }

  svg#uuid-bf814fe0-79d3-4a93-8366-656701f02ba8 {
    left: 12.8vw !important;
    top: 2.05vw !important;
    width: 11.5vw;
	   -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
	  overflow:hidden
  }

  svg#uuid-ed14ddcf-15ca-4005-bccc-41a9bc9a2e4f {
    position: absolute;
    left: 24.12vw !important;
    top: 22.7vw !important;
    width: 12.3vw;
	   -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
	  overflow:hidden
  }

  svg#uuid-1e88e187-20f9-4ae6-b7fe-a86bb9fde559 {
    position: absolute;
    right: 7.69vw !important;
    top: 25vw !important;
    width: 13.5vw;
	   -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
	  overflow:hidden
  }

  .top-hero-img-wp {
    height: 62.3vw;
  }

  .top-hero-img-left {
    padding: 0 !important;
  }

  .swell-block-column.swl-has-mb--s.top-hero-img-left img {
    width: 26.7vw !important;
  }

  .top-hero-img-left figure {
    position: absolute;
    left: 0.4em !important;
    top: 0.775em !important;
  }

  .top-hero-img-middle figure {
    position: absolute;
    left: 26.237vw;
    top: 6.1em;
  }

  .top-hero-img-middle img {
    width: 32vw !important;
  }

  .top-hero-img-right img {
    width: 44.35vw !important;
  }

  .top-hero-img-right figure {
    top: 2em !important;
    right: -4.18em !important;
  }
  ===== */

  .top-sec1-title1,
  .top-sec1-title2 {
    background: #fff !important;
    font-size: 2.82em !important;
    letter-spacing: 0.375rem !important;
    width: 83.5vw !important;
    padding: 0.56rem 0px 0.56rem 0.56rem !important;
  }

  .top-sec1-right.effect-scroll p {
    padding-left: 0.56em !important;
    font-size: 1em !important;
    letter-spacing: 0.156em !important;
    line-height: 2.3 !important;
  }

  .top-durmission-wp {
    padding: 0 1.2em !important;
  }

  .top-durmission-left img {
    width: 33vw !important;
  }

  .top-durmission-right figure,
  .top-durmission-right figure img {
    width: 100% !important;
  }

  .swell-block-column.swl-has-mb--s.top-durmission-left {
    padding-top: 23px;
    padding-bottom: 38px;
  }

  .top-durmission-left .more-arrow-01 {
    margin-right: auto !important;
    text-align: center;
  }

  .more-arrow-01 a:before {
    width: 9.125em;
    height: 7px;
    bottom: -10px;
    right: auto;
    left: 52%;
    transform: translateX(-50%);
  }

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧レッスン: SPのタイトル幅・キャラ位置(.top-system-*-sp)
  .top-system-title1-sp {
    width: 50vw;
    margin-top: 0 !important;
  }

  .top-system-title3-sp {
    width: 82.2vw;
  }

  .top-system-title4-sp {
    width: 47.8vw;
  }

  .top-system-chara1-sp {
    position: absolute;
    top: 5px;
    right: 24vw;
  }

  .top-system-chara2 img {
    width: 10vw !important;
  }

  .top-system-chara2 {
    left: 11%;
  }

  .top-system-chara3 img {
    width: 10vw !important;
  }

  .top-system-chara3 {
    bottom: 12%;
  }
  ===== */

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧レッスン: SPキャラ(#top-sec2-chara-01-sp)
  #top-sec2-chara-01-sp {
    position: absolute;
    left: 12vw;
    top: -2vw;
    width: 13.2vw;
  }
  ===== */

  .top-sec2-title1-sp,
  .top-sec2-title1-sp img,
  .top-sec2-title3-sp,
  .top-sec2-title3-sp img {
    width: 48.7vw !important;
  }

  .top-sec2-title2-sp,
  .top-sec2-title2-sp img {
    width: 75vw !important;
  }

  figure#top-sec2-chara-02 {
    width: 11.1vw;
    margin: 0 !important;
    position: relative;
    top: -6em;
  }

  .top-sec2-left-link {
    width: 70.25vw;
    max-width: 90%;
  }

  .top-sec2-wp {
    width: 100vw;
    left: calc(var(--swl-pad_container, 0)*-1);
    position: relative;
  }

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧お知らせ: SPキャラ画像・SP用MOREボタン
  figure#top-news-chara {
    width: 14.38vw !important;
    position: absolute;
    top: -6.2em;
    right: 3.5em;
  }

  .top-news-wp .is-style-more_btn.sp_only a {
    padding-left: 0;
  }
  ===== */

  .top-sec4-title1-sp.effect-scroll,
  .top-sec4-title1-sp.effect-scroll img {
    width: 84.5vw !important;
  }

  .top-sec4-title2-sp.effect-scroll,
  .top-sec4-title2-sp.effect-scroll img {
    width: 72.2vw !important;
  }

  .top-sec4-title-3-sp.effect-scroll,
  .top-sec4-title-3-sp.effect-scroll img {
    width: 38.5vw !important;
  }

  .top-sec4-img-sp {
    position: relative;
    top: -4em;
  }

  .top-contact-wp {
    padding: 0 0.7em;
  }

  .top-contact-left {
    border-radius: 50px 50px 0 0;
    max-height: unset;
    padding-bottom: 0 !important;
    padding-top: 30px !Important;
  }

  .top-contact-right img {
    border-radius: 0 0 50px 50px;
    min-height: unset;
  }

  .top-contact-left-title img {
    width: 36vw !important;
  }

  .top-contact-left-dot {
    margin-top: -10px !important;
  }

  .top-contact-left-dot img {
    width: 85% !important;
    margin: 0 auto;
  }

  .top-contact-left-text img {
    width: 43.6vw !important;
  }

  .top-sec5-left-link {
    width: 34vw;
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
  }

  .top-sec5-left-link a {
    padding: 1em;
    font-size: 1rem !important;
  }

  .top-contact-right figure {
    width: 100%;
  }

  .top-contact-right img {
    object-fit: cover;
    width: 100% !important;
  }

  svg#uuid-f5a9e1b9-0eae-46ef-844f-d17a25ce4e6d {
    width: 92.3vw;
	  margin: 0 auto;
  }
  
  .top-airi-banner-wp {
    width: 37%;
  }
	
  .top-airi-banner-inner {
    width: 100%;
	}
	
  .top-airi-banner {
    width: 100%;
  }

  .top-airi-banner img {
    width: 100% !important;
	}

	.top-airi-news-btn {
    width: 36% !important;
    right: -9%;
    bottom: -20%;
	}
	
  /*通常投稿*/
	.single.single-post div#content {
    	margin-top: 0em;
	}
  .single-post .p-articleMetas__times.c-postTimes.u-thin {
    margin-bottom: 0em !important;
  }

  .single-post ul.p-pnLinks.-style-simple.-normal-post {
    width: 100%;
    margin-top: 6.125em !important;
    justify-content: center;
  }

  .-sidewedget h2.wp-block-heading {
    margin-bottom: 1em;
  }

  div#block-6 {
    margin-bottom: 4em;
  }

  /*講師ブロック*/
  .ds-teacher-block {
    flex-wrap: wrap;
    column-gap: 5%;
  }

  .ds-teacher-block-left {
    flex-basis: 40%;
  }

  .ds-teacher-block-right {
    flex-basis: 55%;
    margin-left: 0px;
    min-width: unset;
  }

  .ds-featured-media {
    width: 100%;
  }

  .ds-teacher-info.ds-teacher-intro.pc {
    display: none;
  }

  .ds-teacher-info.ds-teacher-intro.sp {
    padding-right: 0px;
  }

  .-teacher .ds-teacher-info.ds-teacher-intro {
    padding-right: 0px;
  }

  /*コースの投稿*/
  .-course .p-pnLinks.-thumb-on {
    display: flex !important;
  }

  .single-course .-course .p-pnLinks__item.-prev:after {
    right: -4vw;
    height: calc(tan(65deg) * 10px / 2);
    width: 10px;
  }

  .single-course .-course .p-pnLinks__item.-next:before {
    left: -4vw;
    height: calc(tan(65deg) * 10px / 2);
    width: 10px;
  }

  /*講師の投稿*/
  .-teacher .p-pnLinks.-thumb-on {
    display: flex !important;
  }

  .single-teacher .-teacher .p-pnLinks__item.-prev:after {
    right: -4vw;
    height: calc(tan(65deg) * 10px / 2);
    width: 10px;
  }

  .single-teacher .-teacher .p-pnLinks__item.-next:before {
    left: -4vw;
    height: calc(tan(65deg) * 10px / 2);
    width: 10px;
  }
  
  /*コンセプト*/
  .concept-sec1-img img {
    width: 75vw !important;
    position: relative;
    left: -17px;
	  margin-bottom: 1em!important;
  }
  .concept-sec1-text {
    position: relative;
    white-space: pre-wrap;
	top:0;
	  left:0;
    font-size: 0.975rem !important;
    line-height: 2 !important;
    padding-bottom: 2.5em;
  }
  .concept-sec2-col1 {
    order: 0;
  }
  .concept-sec2-col2 {
    order: 1;
  }
  .concept-sec2-col3 {
    order: 2;
  }
  .concept-sec2-col4 {
    order: 1;
  }
  .concept-sec2-col5 {
    order: 3;
  }
  .concept-sec2-col6 {
    order: 5;
  }
  .concept-sec2-col6-chara {
    right: 23vw;
  }

  /*フッター直前*/
  .f-before-wp {
    padding-top: 20em !Important;
  }

  .f-before-gcalender {
    padding: 0 !Important;
  }

  .f-before-gmap>iframe {
    height: auto;
    aspect-ratio: 306/183;
  }

  .f-before-gcalender>iframe {
    height: auto;
    aspect-ratio: 1/1;
  }

  .f-before-links {
    width: 100%;
    flex-wrap: wrap;
    padding: 25px 18vw !important;
    border-radius: 3.3em;
    row-gap: 1em;
  }

  .f-before-links li {
    flex: 0 0 47%;
    box-sizing: border-box;
  }

  .f-before-links li:nth-child(2n) a span {
    margin-right: 0 !important;
    margin-left: auto;
  }

  .f-before-cta-wp {
    width: 60%;
    border-radius: 20vw;
    padding: 70px 60px 40px !important;
    top: -20%;
  }

  .f-before-btn a {
    width: 100%;
    padding: 23px 0px !important;
  }

  .f-before-cta-chara07 {
    position: absolute !important;
    right: 12px;
    bottom: 83%;
    width: 39.6px;
  }

  .f-before-cta-col-left:before {
    width: 25px;
    height: 28px;
    top: 107% !important;
    right: unset !important;
    left: 50%;
    transform: rotate(90deg) translate(-50%, 50%);
  }

  .f-before-cta-chara09 {
    position: absolute !important;
    left: 5px;
    bottom: -54px;
    width: 49px;
  }

  .text-decoration-slash:before,
  .text-decoration-slash:after {
    top: 2vw;
  }

}

/* SwellのスマホとPC切り替わり */

/*iPad以下*/
@media (max-width: 767px) {

  /*text-align*/
  .xs-text-align-center {
    text-align: center !important;
  }

  .xs-text-align-justify {
    text-align: justify !important;
  }

  /*font-size*/
  .xs-fs-063em {
    font-size: 0.63em !important;
  }

  .xs-fs-07em {
    font-size: 0.7em !important;
  }

  .xs-fs-08em {
    font-size: 0.8em !important;
  }

  .xs-fs-09em {
    font-size: 0.9em !important;
  }

  .xs-fs-095em {
    font-size: 0.95em !important;
  }

  .xs-fs-01em {
    font-size: 1em !important;
  }

  .xs-fs-11em {
    font-size: 1.1em !important;
  }

  .xs-fs-12em {
    font-size: 1.2em !important;
  }

  .xs-fs-13em {
    font-size: 1.3em !important;
  }

  .xs-fs-17em {
    font-size: 1.7em !important;
  }

  .xs-fs-18em {
    font-size: 1.8em !important;
  }

  /*line-height*/
  .xs-lh-10 {
    line-height: 1;
  }

  .xs-lh-11 {
    line-height: 1.1;
  }

  .xs-lh-12 {
    line-height: 1.2;
  }

  .xs-lh-13 {
    line-height: 1.3;
  }

  .xs-lh-14 {
    line-height: 1.4;
  }

  .xs-lh-15 {
    line-height: 1.5;
  }

  .xs-lh-2 {
    line-height: 2;
  }

  .xs-lh-25 {
    line-height: 2.5;
  }

  /*margin*/
  .xs-mg-bt-0 {
    margin-bottom: 0 !important;
  }

  .xs-mg-bt-05em {
    margin-bottom: 0.5em !important;
  }

  .xs-mg-bt-1em {
    margin-bottom: 1em !important;
  }

  .xs-mg-bt-2em {
    margin-bottom: 2em !important;
  }

  .xs-mg-bt-3em {
    margin-bottom: 3em !important;
  }

  .xs-mg-bt-4em {
    margin-bottom: 4em !important;
  }

  /*height*/
  .xs-height-1em {
    height: 1em !important;
  }
	
  .xs-height-4em {
    height: 4em !important;
  }

  .xs-height-6em {
    height: 6em !important;
  }

  .xs-height-7em {
    height: 7em !important;
  }

  .xs-height-8em {
    height: 8em !important;
  }

  /*padding*/
  .xs-pd-0 {
    padding: 0 !important;
  }

  /*line-height*/
  .xs-lh-2 {
    line-height: 2 !important;
  }

  /*flex*/
  .xs-flex-wrap {
    flex-wrap: wrap !important;
  }

  /*投稿一覧のページネーション*/
  .c-pagination {
    padding-bottom: 4em !important;
  }

  /*TOP*/
  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧MV: SPキャッチ位置(600px以下)
  .top-hero-text-sp {
    position: relative;
    left: 8vw;
  }
  ===== */

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧お知らせ: リスト項目の下マージン
  .top-news-wp .p-postList__item:not(:last-child) {
    margin-bottom: 0em;
  }
  ===== */

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧MV: 写真3枚並び 中央(600px以下)
  .top-hero-img-middle figure {
    left: 21.237vw;
  }
  ===== */

  .top-main-title img {
    width: 90% !important;
  }

  .top-sec-innertitle .mininote span {
    font-size: 10px !important;
  }

  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧レッスン: SPのカラム/ナンバー(600px以下)
  .top-system-col-wp {
    gap: 0.8em !important;
  }

  .top-system-col-wp .wp-block-column {
    padding: 27px 7px 18px !important;
  }

  .top-system-number {
    padding: 6px 18px 18px 6px !important;
    font-size: 5px !important;
  }

  .top-system-col-wp p.dotted01-bottom {
    padding-bottom: 0.8rem;

  }

  .top-system-col-wp * {
    letter-spacing: 1px !important;
  }
  ===== */
	
  .top-airi-banner-wp {
        width: 59%;
  }
	
  .top-airi-banner-wp { 
    bottom: -26vw;
  }

  /*フッター直前*/
  .f-before-charactors> :nth-child(n+10) {
    display: none;
  }

  svg#uuid-c48fb8be-2007-4f85-b891-e16abb7786e8,
  svg#uuid-478a3c7e-b7e5-4b79-865f-0f2f512e50a7,
  svg#uuid-9749ff49-4fb6-4efb-a7cc-7dbc74fcf9f5 {
    width: 19px;
  }

  svg#uuid-1b5bb91e-918a-4860-b05e-8620748c57b5,
  svg#uuid-f138f8d6-e9ee-4c79-9215-d8d8534b3f1f,
  svg#uuid-b108fb4f-c33c-4276-a5ae-d1285443018e {
    width: 27.5px;
  }

  svg#uuid-b10a8b32-1792-4256-ba95-a47feb1ea1a6,
  svg#uuid-eb1c9111-35c1-40ce-b3fc-12a15f0a986b,
  svg#uuid-b5b00280-ae3f-468a-bf6a-c34c444caf06 {
    width: 31.2px;
  }

  svg#uuid-f5a9e1b9-0eae-46ef-844f-d17a25ce4e6d {
    width: 70.3vw;
    display: block;
  }

  /*コース紹介*/
  .course-list.-col4 ul {
    justify-content: space-between !important;
  }

  .course-list.-col4 ul li {
    margin-right: 0px;
    padding: 6px !important;
    width: calc(100% / 2 - 6px) !important;
  }

  .course-list .p-postList__item:not(:last-child) {
    margin-bottom: 2em;
  }

  .course-teacher-list.-col5 ul {
    justify-content: space-between !important;
  }

  .course-teacher-list.-col5 .-type-card.-pc-col3 .p-postList__item {
    width: calc(100% / 2 - 6px);
  }

  .course-teacher-list.-col5 .-type-card.-pc-col3 .p-postList__item:nth-child(even) {
    margin-right: 0 !important;
  }

  .course-header {
    width: 100%;
  }


  /*コースの投稿*/
  .single-course main.-course {
    padding: 0;
  }

  .single-course main#main_content.-course .c-postTitle__ttl {
    font-size: 1.125em !important;
    padding: 10px;
  }

  .single-course main.-course .p-articleHead.c-postTitle {
    width: 53.5%;
  }

  .single-course main.-course figure.p-articleThumb {
    width: 46.5%;
  }

  .single-course .-course .p-pnLinks__thumb {
    height: auto;
    width: 100%;
  }

  /*講師の投稿*/
  .single-teacher main.-teacher {
    padding: 0;
  }

  .single-teacher main#main_content.-teacher .c-postTitle__ttl {
    font-size: 1.125em !important;
    padding: 10px;
  }

  .single-teacher main.-teacher .p-articleHead.c-postTitle {
    width: 53.5%;
  }

  .single-teacher main.-teacher figure.p-articleThumb {
    width: 46.5%;
  }

  .single-teacher .-teacher .p-pnLinks__thumb {
    height: auto;
    width: 100%;
    aspect-ratio: 1/1;
  }

  .single-teacher .-teacher .p-pnLinks__thumb img {
    aspect-ratio: 1/1;
  }

  /*コンセプト*/
  .concept-catch {
    width: 90%;
    padding: 18px 16px;
  }

  .concept-catch-img-01 {
    left: 35vw;
    top: -32px;
  }

  .concept-catch-img-01 img {
    width: 8vw !important;
  }

  .concept-catch-img-02 {
    left: 11vw;
    top: 62px;
  }

  .concept-catch-img-02 img {
    width: 9vw !important;
  }

  .concept-catch-img-03 {
    left: 80vw;
    top: 53px;
  }

  .concept-catch-img-03 img {
    width: 10vw !important;
  }

  .concept-points {
    padding: 13px 15px !important;
    font-size: 1.125em !Important;
  }

  .concept-points-chara img {
    width: 9vw !important;
  }

  .concept-points-chara {
    top: 49px;
    right: 4vw;
  }

  .concept-garalley-01 {
    left: 0px;
  }

  .concept-garalley-02 {
    right: 0px;
    top: 11vw;
  }

  .concept-garalley-04 {
    top: 17vw;
    right: 0px;
  }

  .concept-logo.u-mb-ctrl.u-mb-0 img {
    width: 35vw !important;
  }

  .concept-logo {
    top: -59vw;
  }

  .concept-logo-icons .swell-block-columns__inner {
    justify-content: space-evenly !important;
  }

  .concept-logo-icon-1 img {
    width: 15.1vw !Important;
  }

  .concept-logo-icon-2 img {
    width: 20.5vw !Important;
  }

  .concept-logo-icon-3 img {
    width: 24vw !Important;
  }
  .concept-sec2-col6-chara img{
	  width: 12vw!important;
	}
  .concept-sec2-col6-chara {
	  right: 7vw;
	}

  /*システム*/
  .system-catch {
    width: 58%;
    padding: 18px 16px;
  }

  .system-menbership-col {
    font-size: 0.7em;
  }

  .system-menbership-col p {
    padding: 0 3px !important;
  }

  .system-member-icon {
    width: 17vw;
    height: 17vw;
    bottom: 40vw;
  }

  .system-menbership-col.dotted01-right:after {
    width: 13vw;
    height: 38px;
  }

  .system-menbership-col:nth-child(2):after {
    bottom: 47.6%;
  }

  .system-menber-chara1 {
    right: -4vw;
    bottom: 44vw;
  }

  .system-menber-chara1 img {
    width: 9vw !important;
  }

  .system-menber-chara2 {
    right: -2vw;
    bottom: 55vw;
  }

  .system-menber-chara2 img {
    width: 9vw !Important;
  }

  .system-menber-chara3 {
    right: 2vw;
    bottom: 62vw;
  }

  .system-menber-chara3 img {
    width: 12vw !important;
  }

  .system-price-title {
    width: 53%;
  }

  .system-catch.system-reserve-title {
    width: 90%;
  }

  .system-reserve-col-right {
    padding-left: 1.5rem !important;
    font-size: .9em !important;
  }

  /*お知らせ*/
  .ds-custom-post-list-wp {
    padding-top: 0;
  }

  .-cpl .cpl-post-date {
    flex-basis: 100%;
    margin-bottom: 0.4em;
  }

  .ds-custom-post-list-item a {
    flex-wrap: wrap;
  }

  .cpl-post-excerpt {
    width: auto;
  }

  .cpl-post-info {
    flex-basis: 65%;
    height: auto;
  }

  .-cpl .cpl-post-thumbnail {
    flex-basis: 30%;
    height: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  li.cpl-post-category-item {
    padding: 5px 8px 5px 7px;
    margin-right: 10px;
    font-size: .9em !important;
  }

  ul.cpl-post-category {
    margin-bottom: 17px;
  }

  /*お問い合わせ*/
  /*フォーム*/
  .contact-form-title-wp {
    width: 100%;
    margin-bottom: 2em !important;
  }

  .contact-form-wp {
    font-size: .93rem;
  }

  .contact-form-items {
    padding: 24px 4px 24px 9px;
  }

  .name-field input.wpcf7-form-control.wpcf7-text,
  .kana-field input.wpcf7-form-control.wpcf7-text {
    width: 60%;
  }

  .contact-form-under {
    font-size: 1rem !important;
  }

  .contact-tel-wp {
    width: 100%;
    gap: .5em !important;
    padding: 1.5em 0.5em !important;
  }

  input.zipcode {
    width: 60%;
  }

  span.wpcf7-list-item-label {
    top: -3px;
    position: relative;
    letter-spacing: 0px;
  }

  .phone-field span.wpcf7-form-control-wrap {
    flex-basis: 25%;
  }

}

/* WPカラム切り替わり*/
@media (min-width: 782px) {}

@media (max-width: 781px) {}

/* WPカラム切り替わり*/

/*swellの可変サイズ有効化範囲*/
@media (max-width: 600px) {
  /* ===== [2026 リニューアルに伴い不要化 / 復元する場合はこのコメントを外す] 旧MV: キャラSVG(600px以下)
  svg#uuid-ed14ddcf-15ca-4005-bccc-41a9bc9a2e4f {
    position: absolute;
    left: 12.12vw !important;
    top: 39.7vw !important;
    width: 12.3vw;
  }
  ===== */

  .f-before-wp {
    padding-top: 20em !Important;
  }

  .f-before-cta-wp {
    width: 90%;
    border-radius: 25vw;
    padding: 55px 24px 25px !important;
    top: -28%;
  }

  .top-mid-gallery figure:nth-child(-n+3) {
    flex-basis: calc(33.333% - 10px);
  }

  .top-mid-gallery figure:nth-child(n+4) {
    flex-basis: calc(50% - 10px);
    /* 10pxは適切なマージンやパディングの値に置き換えてください */
  }
}

/*スマホ限定*/
@media (max-width: 428px) {

  .top-sec4-left-link {
    width: 70.2vw;
    letter-spacing: 3px;
    margin-top: -2em !important;
  }

  .top-contact-right img {
    min-height: unset;
    max-height: 150px;
    min-height: 138px;
    object-fit: cover;
    aspect-ratio: 337/138;
  }
}

/* ============================================================
   TOP メインビジュアル 2026 リニューアル
   デザイン: Ds_web_top_2026_ol.ai（アウトライン版）/ アートボード1200px
   コンテンツ幅 .l-mainContent = 1030px（デザインのガイド x=85 / x=1115 と一致）
   ------------------------------------------------------------
   実測値（デザイン座標）
     写真     x:263.2   y:220      w:741.6  h:488.1   角丸 左12.6 / 右130   枠1px #3e3a39
     キャッチ x:165.5   y:471.381  w:469    h:196.973
     キャラ01 x:183.000 y:443.189  w:20.511 h:29.029  (ピンク)
     キャラ02 x:316.250 y:501.569  w:22.818 h:33.184  (黄)
     キャラ03 x:330.492 y:637.000  w:29.508 h:30.299  (薄ピンク)
     キャラ04 x:496.203 y:545.850  w:30.028 h:42.499  (緑)
   ※キャラはキャッチ(.top-hero-copy)基準の%で配置。SPはcopyの位置だけ動かせば一括で追従します
   ============================================================ */

.top-hero-wp {
  position: relative;
  width: 100%;
}

/* 背景をフルワイドの白に（上のスペーサーから直下まで #fff） */
.top-hero-wp::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  top: -120px;       /* 上のスペーサー(60px〜)とヘッダー下端まで隙間なくカバー */
  bottom: 0;
  width: 100vw;
  background: #fff;
  z-index: -1;
  pointer-events: none;
}

/* --- 写真 --- */
.top-hero-photo {
  width: 72%;              /* 741.6 / 1030 */
  margin: 0 0 0 17.301%;   /* (263.2 - 85) / 1030 */
}

/* --- 写真のスライド（クロスフェード）2026-09-06 ---
   .top-hero-wp の中に .top-hero-photo（core/image）を並べるだけで自動切替が始まる。
   **1枚のときは何も起きない＝停止状態**。あとから編集画面で画像ブロックを
   増やせばスライドが動き出す。JS側は myscript.js の initHeroSlider()。

   1枚目は通常フローに残して .top-hero-wp の高さを決め、2枚目以降を重ねる。
   ※ left は 0 のまま。横位置は .top-hero-photo の margin-left（絶対配置でも
     包含ブロック幅基準で効く）に任せる。left にも値を書くと margin と二重に効いて
     2倍ずれる。幅も .top-hero-photo 側の指定がそのまま効くので書かない。
     こうしておくとSP（margin-left:0 / width:100%）にも自動で追従する */
.top-hero-photo + .top-hero-photo {
  position: absolute;
  left: 0;
  top: auto;
  transform: translateY(-100%);
  opacity: 0;          /* JSが動かない環境でも1枚目だけが見えるように */
}

/* JSが制御を始めたら .top-hero-slider-ready が付く（＝2枚以上あるとき） */
.top-hero-slider-ready .top-hero-photo {
  position: relative;  /* 1枚目にも z-index を効かせるため */
  opacity: 0;
  transition: opacity var(--ths-fade, 1.2s) ease;
}
.top-hero-slider-ready .top-hero-photo + .top-hero-photo {
  position: absolute;
  left: 0;
  top: auto;
  transform: translateY(-100%);
}

.top-hero-slider-ready .top-hero-photo.is-active { opacity: 1; z-index: 1; }

/* 切替中、直前の1枚は不透明のまま下に残す。
   両方を同時にフェードさせると重なった瞬間に背景が透けて明滅するため */
.top-hero-slider-ready .top-hero-photo.is-prev {
  opacity: 1;
  z-index: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .top-hero-slider-ready .top-hero-photo { transition: none; }
}

.top-hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 741.6 / 488.1;
  object-fit: cover;
  border: 1px solid #3e3a39;
  /* 角丸 12.6px / 130px。aspect-ratio固定なので%指定でも常に真円になる */
  border-radius: 1.699% 17.529% 17.529% 1.699% / 2.581% 26.634% 26.634% 2.581%;
}

/* --- メインビジュアル専用 初期ロードフェードイン（2026-09-06） ---
   SWELLヘッダーのフェードインと調和させ、ロード時に写真とキャッチコピーが
   ふわっと浮かび上がる演出。fade-in-up（スクロール監視）とは完全に別系統の
   CSSアニメーションとして実装。
   ※ 写真の親要素(.top-hero-photo)のopacityはスライド機能(JS)が制御するため、
     親ではなく中の img に適用してスライド切り替えと100%干渉しないようにする。
   ※ 背景(.top-hero-wp::before)は最初から不透明(白)なので下地グレーのチラつきはゼロ。 */
@keyframes top-hero-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 1枚目写真の初期フェードイン（ヘッダー開始直後 0.15s 〜 0.9s） */
.top-hero-photo:first-of-type img {
  animation: top-hero-fadein 0.9s ease 0.15s both;
}

/* --- キャッチコピー＋キャラのまとまり --- */
.top-hero-copy {
  position: absolute;
  left: 7.816%;            /* (165.5 - 85) / 1030 */
  top: 51.502%;            /* (471.381 - 220) / 488.1 */
  width: 45.534%;          /* 469 / 1030 */
  aspect-ratio: 469 / 196.973;
  z-index: 2;
  pointer-events: none;
  animation: top-hero-fadein 0.9s ease 0.3s both; /* 写真から少し遅れてふわっと出現 */
}

@media (prefers-reduced-motion: reduce) {
  .top-hero-photo:first-of-type img,
  .top-hero-copy {
    animation: none;
    opacity: 1;
  }
}

.top-hero-catch {
  display: block;
  width: 100%;
  height: auto;
}

/* --- キャラクター4体（ふわふわアニメーション） --- */
.top-hero-bird {
  position: absolute;
  display: block;
}

.top-hero-bird img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 90%;
  animation: top-hero-float var(--thb-dur, 4s) ease-in-out var(--thb-delay, 0s) infinite;
}

.top-hero-bird01 { left: 3.731%;  top: -14.313%; width: 4.373%; --thb-dur: 4.4s; --thb-delay: 0s;   }
.top-hero-bird02 { left: 32.143%; top: 15.326%;  width: 4.865%; --thb-dur: 3.6s; --thb-delay: .7s;  }
.top-hero-bird03 { left: 35.180%; top: 84.082%;  width: 6.292%; --thb-dur: 5.0s; --thb-delay: 1.2s; }
.top-hero-bird04 { left: 70.512%; top: 37.807%;  width: 6.403%; --thb-dur: 4.1s; --thb-delay: .35s; }

@keyframes top-hero-float {
  0%, 100% { transform: translateY(0)     rotate(0deg);  }
  25%      { transform: translateY(-16%)  rotate(-4deg); }
  50%      { transform: translateY(-24%)  rotate(0deg);  }
  75%      { transform: translateY(-10%)  rotate(4deg);  }
}

@media (prefers-reduced-motion: reduce) {
  .top-hero-bird img { animation: none; }
}

/* --- タブレット / SP（SPデザインは新規に設計） --- */
@media (max-width: 959px) {
  .top-hero-wp { padding-bottom: 9%; }

  .top-hero-photo {
    width: 100%;
    margin-left: 0;
  }

  .top-hero-copy {
    left: -2%;
    top: 58.8%;
    width: 74%;
  }
}

@media (max-width: 600px) {
  .top-hero-wp { padding-bottom: 16%; }

  .top-hero-copy {
    left: -3%;
    top: 62.2%;
    width: 90%;
  }
}

/* ============================================================
   ヘッダー 2026 ＋ ハンバーガー展開メニュー
   デザイン: Ds_web_top_2026_ol.ai  AB0(ヘッダー) / AB7(展開メニュー 1200x874)
   ------------------------------------------------------------
   実測値
     ロゴ           x:88.0   y:60.1  250 x 58.8
     Instagramボタン x:940.5  y:57.5   77 x 65   #98d1c4
     ハンバーガー枠  x:1037.2 y:57.1   78 x 66   枠1px #3e3a39
     3本線          31.17 x 2px / 間隔11.15px
     角丸           左5.6px / 右27px
     展開メニュー背景 #93d0c5
     ピルボタン      406 x 105 / 白 / 枠1px #3e3a39 / 全角丸
     列間52px 行間23px / メニュー領域 864px(x168〜1032)
   ============================================================ */

/* ---- PCでもハンバーガーを使う ---- */
@media (min-width: 960px) {
  #gnav.l-header__gnav {
    display: none !important;
  }

  .l-header__customBtn.sp_,
  .l-header__menuBtn.sp_ {
    display: flex !important;
  }

  .l-header__customBtn {
    margin-left: auto;
  }

  /* [data-loaded=false] .p-spMenu の初期非表示は残す（詳細度を上げない） */
  .p-spMenu {
    display: block;
  }
}

/* ---- ヘッダー右のボタン2つ ---- */
.l-header__customBtn,
.l-header__menuBtn {
  width: 77px;
  height: 65px;
  align-items: center;
  justify-content: center;
}

.l-header__customBtn {
  margin-right: 19.7px;
}

.l-header__customBtn .c-iconBtn,
.l-header__menuBtn .c-iconBtn {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 5.6px 27px 27px 5.6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Instagram（SWELL ヘッダーカスタムボタン） */

/* SWELLのカスタマイザーが生成するインラインCSS（#swell_custom-inline-css）が
   外側の div.l-header__customBtn に background-color を直接当てるため、
   角丸の無い長方形の緑がボタンの外にはみ出して見えていた。
   緑は内側の .c-iconBtn（＝ハンバーガーと同じ角丸を持つ要素）だけに持たせる。
   インラインCSSは (0,1,0)。子テーマCSSの方が後に読まれるので同詳細度でも勝てるが、
   カスタマイザーの再生成で順序が変わっても効くように (0,2,0) にしておく */
.l-header .l-header__customBtn {
  background: transparent;
}

.l-header__customBtn .c-iconBtn {
  background: #98d1c4;
  color: #fff;
}

/* アイコンの光学的な中央寄せ（2026-09-06）
   ボタンの角丸が左右非対称（左5.6px / 右27px）なので、右端が丸く削れて
   「塗りの重心」が幾何中心より左に来る。数値積分すると
     PC 77x65 r5.6/27 → 幾何中心38.50 / 面積重心36.44（左へ2.06px＝幅の2.68%）
     SP 54x46 r4/19   → 幾何中心27.00 / 面積重心25.56（左へ1.44px＝幅の2.67%）
   flexのcenterは幾何中心に置くため、アイコンが右寄りに見えていた。
   アイコン自体は左右対称（icomoon U+E906 のインク中心15.0 / 送り中心14.85）なので
   原因は形状の方。重心ぶんだけ左へ寄せる。
   ※ ハンバーガーは枠線があって輪郭が見えるぶん幾何中心で違和感がないので触らない */
.l-header__customBtn .c-iconBtn__icon {
  font-size: 29.7px;
  line-height: 1;
  transform: translateX(-2px);
}

.l-header__customBtn .c-iconBtn__label {
  display: none;
}

/* ハンバーガー */
.l-header__menuBtn .c-iconBtn {
  position: relative;
  border: 1px solid #3e3a39;
  background: transparent;
}

.l-header__menuBtn .c-iconBtn__label {
  display: none;
}

.l-header__menuBtn .c-iconBtn__icon {
  font-size: 0;
  width: 31.17px;
  height: 2px;
  background: #3e3a39;
}

.l-header__menuBtn .c-iconBtn::before,
.l-header__menuBtn .c-iconBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 31.17px;
  height: 2px;
  background: #3e3a39;
  transform: translateX(-50%);
}

.l-header__menuBtn .c-iconBtn::before {
  top: calc(50% - 12.15px);
}

.l-header__menuBtn .c-iconBtn::after {
  top: calc(50% + 10.15px);
}

/* ---- SPのヘッダーボタン（デザインはPC基準のため 77x65 → 54x46 に縮小） ---- */
@media (max-width: 959px) {
  .l-header__customBtn,
  .l-header__menuBtn {
    width: 54px;
    height: 46px;
  }

  .l-header__customBtn {
    margin-right: 14px;
  }

  /* ロゴの左余白(4vw)と対称にする */
  .l-header__menuBtn {
    margin-right: 4vw;
  }

  .l-header__customBtn .c-iconBtn,
  .l-header__menuBtn .c-iconBtn {
    border-radius: 4px 19px 19px 4px;
  }

  .l-header__customBtn .c-iconBtn__icon {
    font-size: 21px;
    transform: translateX(-1.4px);   /* 上記と同じ理由。SPは54px幅なので1.44px */
  }

  .l-header__menuBtn .c-iconBtn__icon,
  .l-header__menuBtn .c-iconBtn::before,
  .l-header__menuBtn .c-iconBtn::after {
    width: 22px;
  }

  .l-header__menuBtn .c-iconBtn::before {
    top: calc(50% - 8.9px);
  }

  .l-header__menuBtn .c-iconBtn::after {
    top: calc(50% + 6.9px);
  }
}

/* ============================================================
   展開メニュー（全画面ミント）
   ============================================================ */
.p-spMenu {
  z-index: 9999;
}

.p-spMenu__inner {
  width: 100% !important;
  max-width: none;
  padding-top: 0;
  box-shadow: none;
}

/* 閉：右外へ / 開：0 ※SWELL の [data-spmenu=opened] を潰さないよう詳細度を上げる */
.-right .p-spMenu__inner {
  transform: translateX(100%);
}

[data-spmenu="opened"] .-right .p-spMenu__inner {
  transform: translateX(0);
}

.p-spMenu__body {
  padding: 0;
  overflow-y: auto;
}

/* SWELL標準の「MENU」見出しとWPメニューは非表示（内容はブログパーツ1741側で持つ） */
.p-spMenu .c-widget__title.-spmenu,
.p-spMenu__nav {
  display: none;
}

.p-spMenu__bottom {
  margin-top: 0;
}

/* 閉じるボタン（78x66・ヘッダーのハンバーガーと同じ位置） */
.p-spMenu__closeBtn {
  width: 78px;
  height: 66px;
  top: 30px;
  right: calc(max(0px, (100% - 1126px) / 2) + 48px);
}

.p-spMenu__closeBtn .c-iconBtn {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
  border: 1px solid #3e3a39;
  border-radius: 5.6px 27px 27px 5.6px;
}

.p-spMenu__closeBtn .c-iconBtn__icon {
  font-size: 0;
}

.p-spMenu__closeBtn .c-iconBtn::before,
.p-spMenu__closeBtn .c-iconBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38.5px;
  height: 1px;
  background: #3e3a39;
}

.p-spMenu__closeBtn .c-iconBtn::before {
  transform: translate(-50%, -50%) rotate(28deg);
}

.p-spMenu__closeBtn .c-iconBtn::after {
  transform: translate(-50%, -50%) rotate(-28deg);
}

/* ---- メニュー本体（ブログパーツ 1741） ----
   デザイン AB7 = 1200 x 874 を基準にし、1200pxで頭打ちにして中央寄せ。
   縦は vh でも頭打ちにして、画面が低くてもスクロールしないようにする。
     ロゴ      x88.0  y58.6   249.9 x 58.8
     ピル      406 x 105 / 左列x168 右列x626 / 行ピッチ128（行間23・列間52）
     メニュー域 x168〜1032（幅864）
     キャラ列  x86.0  y776.8  1027 x 54.2
     下余白    43
   ------------------------------------------------------------ */
.ds-menu {
  width: min(1200px, 100%);
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: min(3.583%, 4vh);   /* 43 / 1200 */
}

.ds-menu__logo {
  width: 100%;
  padding: min(4.883%, 6vh) 0 0;   /* y58.6 */
}

.ds-menu__logo img {
  display: block;
  width: 20.825%;            /* 249.9 / 1200 */
  margin-left: 7.333%;       /* x88 / 1200 ※padding方式だと%の基準が内容幅になりズレる */
  min-width: 150px;
  height: auto;
}

.ds-menu__list {
  list-style: none;
  width: 72%;                /* 864 / 1200 */
  margin: 0 auto;
  /* SWELL の .post_content ul { padding-left } に勝つため !important */
  padding-inline: 0 !important;
  padding-block: min(4%, 4vh);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 6.019%;        /* 52 / 864 */
  row-gap: min(2.662%, 2.4vh);   /* 23 / 864 */
  flex: 1;
  align-content: center;
}

.ds-menu__list li {
  margin: 0;
}

.ds-menu__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 406 / 105;
  max-height: min(105px, 14vh);
  background: #fff;
  border: 1px solid #3e3a39;
  border-radius: 999px;
  color: #3e3a39;
  text-decoration: none;
  font-size: clamp(14px, 1.42vw, 17px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  transition: background-color .3s, color .3s, transform .3s;
}

.ds-menu__list a:hover {
  background: #3e3a39;
  color: #fff;
  transform: translateY(-2px);
}

.ds-menu__chara {
  margin-top: auto;
  padding-inline: 7.167%;    /* 86 / 1200 */
}

.ds-menu__chara img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- SP ---- */
@media (max-width: 959px) {
  .p-spMenu__closeBtn {
    width: 60px;
    height: 51px;
    top: 16px;
    right: 16px;
  }

  .p-spMenu__closeBtn .c-iconBtn::before,
  .p-spMenu__closeBtn .c-iconBtn::after {
    width: 30px;
  }

  .ds-menu {
    padding-bottom: 24px;
  }

  .ds-menu__logo {
    padding: 20px 0 0;
  }

  .ds-menu__logo img {
    width: 170px;
    min-width: 0;
    margin-left: 20px;
  }

  .ds-menu__list {
    width: 86%;
    row-gap: min(12px, 1.6vh);
    padding-block: 20px;
  }

  .ds-menu__list a {
    aspect-ratio: auto;
    max-height: none;
    padding: 13px 0;
    font-size: 16px;
  }

  /* キャラは実寸を保ったまま左右をトリミング（潰さない） */
  .ds-menu__chara {
    padding-inline: 0;
    overflow: hidden;
  }

  .ds-menu__chara img {
    width: 720px;
    max-width: none;
    margin-left: 16px;
  }
}
/* ---- 600px未満は1列 ---- */
@media (max-width: 599px) {
  .ds-menu__list {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   固定サイドナビ 2026（4タブ）
   デザイン実測: 85 x 79.7（枠4pxのセンター）/ 角丸 右27.4px / 縦ピッチ96.6px
   上から アフタースクール体験 / アフタースクール入会 / その他体験 / その他入会
   ============================================================ */

.ds-fix-side-nav {
  display: flex;
  flex-direction: column;
  gap: 12.9px;
}

.ds-fix-side-nav .fix-side-col {
  position: relative;
}

.ds-side-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 87px;
  height: 84px;
  padding: 0 6px 0 0;
  border: 4px solid;
  border-left: 0;
  border-radius: 0 27.4px 27.4px 0;
  text-decoration: none;
  text-align: center;
  line-height: 1.15;
  letter-spacing: 0.02em;
  transition: filter .3s;
}

/* ホバーでは何も変化させない（透過も暗転もなし）。ユーザー判断 2026-09-05。
   旧CSSが filter で暗くしていたのを打ち消すためだけに残しているルール。
   ※ 以前はここで opacity:.7 を掛けていた（旧CSSの
     .fix-side-btn a:hover{opacity:1 !important} (0,2,1) に勝つため
     セレクタを (0,3,1) にして !important を付けていた）。
     opacity を消した今、旧CSSの opacity:1 がそのまま効く＝変化なし、が意図どおり */
.fix-side-btn a.ds-side-tab:hover {
  filter: none;
}

.ds-side-tab__sub  { display: block; font-size: 12px; font-weight: 700; }
.ds-side-tab__main { display: block; font-size: 20px; font-weight: 700; margin-top: 2px; }

.ds-side-tab.-pink-fill  { background: #f3b1b9; border-color: #f3b1b9; color: #fff; }
.ds-side-tab.-pink-line  { background: #fff;    border-color: #f3b1b9; color: #f3b1b9; }
.ds-side-tab.-green-fill { background: #c9db55; border-color: #c9db55; color: #fff; }
.ds-side-tab.-green-line { background: #fff;    border-color: #c9db55; color: #c9db55; }

/* ホバーで出てくるキャラ
   ※ height:auto を必ず指定すること。SVGのheight属性が残ると余白ぶんだけ
      ボックスが縦に伸び、待機時にタブからはみ出して見えてしまいます */
.ds-fix-side-nav svg.fix-side-chara {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  height: auto;
}

.fix-side-col-01 svg.fix-side-chara { top: 6px;  right: 6px; width: 27px !important; }  /* ユーザー調整 2026-09-05（元: top 4px / right 2px） */
.fix-side-col-02 svg.fix-side-chara { top: 40%;  right: 5px; width: 41px !important; }
.fix-side-col-03 svg.fix-side-chara { top: 40%;  right: 3px; width: 39px !important; }
.fix-side-col-04 svg.fix-side-chara { top: 8px;  right: 4px; width: 30px !important; }

/* ============================================================
   [2026] SP固定フッター（SWELL「フッター固定メニュー」）
   ------------------------------------------------------------
   PCの固定サイドナビ(.ds-fix-side-nav)のSP版。同じ4アクションを並べる。
     1 アフタースクール体験  #f3b1b9 塗り（= .ds-side-tab.-pink-fill）
     2 アフタースクール入会  白地に #f3b1b9（= -pink-line）
     3 その他体験            #c9db55 塗り（= -green-fill）
     4 その他入会            白地に #c9db55（= -green-line）

   ■ 旧仕様（体験／入会／インスタグラム の3つ・文字＋キャラアイコン）からの変更点
     ・4つに増え、ラベルが「アフタースクール体験」＝10文字と長くなった
     ・375pxだと1項目 93.75px。10文字は10em必要なので 10px でも 100px となり収まらない
       （実際、変更前は1行で100px＝はみ出していた）
     → アイコンは廃止し、文字だけで2行に組む

   ■ 2行に「狙った位置で」折り返させる方法
     日本語は1文字＝ちょうど1em（このサイトのフォントで実測確認済み）。
     そこでラベルの幅を em で決め打ちし、8文字は入るが9文字は入らない幅にする。
       アフタースクール体験 → 8.4em → 「アフタースクール」＋「体験」
       その他体験           → 3.4em → 「その他」＋「体験」
     em基準なのでフォントサイズを変えても折り返し位置は動かない。

   ■ 並び順に依存する点（注意）
     色と幅は :nth-child() で振り分けている。**メニューの並び替え＝見た目が入れ替わる**。
     並びを変える場合はここも直すこと。
     （メニュー項目にCSSクラスを付けられるので、順序を頻繁に変えるなら
       クラス指定に切り替えた方が安全）

   ■ 旧CSSはカスタマイザーの「追加CSS」側にある
     style_both.css ではなく 外観 > カスタマイズ > 追加CSS。
     そちらの「固定フッター」ブロックはコメントアウト済み
     （`_backup_original/wp_custom_css.now.css` 参照）。
     ただし未反映でも壊れないよう、旧CSSの背景バー(::before)とアイコン(i)は
     ここで打ち消してある。追加CSSは <head> のindex15、この子テーマCSSはindex21で
     後勝ちになるため、同詳細度でも上書きできる。
   ============================================================ */

/* 旧CSSの打ち消し
   .fixed-sp-footer-exp:before / -join:before が高さ50pxの色帯を敷いていた (0,1,0)。
   #fix_bottom_menu を前置して (1,1,0) で消す。
   アイコンは <i> ごと消せば i::before の背景画像も出ない */
#fix_bottom_menu .menu-item::before,
#fix_bottom_menu .menu-item::after { content: none; }
#fix_bottom_menu .menu-item i { display: none; }

/* バー全体。SWELLは #fix_bottom_menu に safe-area ぶんの padding-bottom を入れるが、
   それだと色の下に白い帯が残る。paddingは<a>側へ移して色を最下端まで届かせる */
#fix_bottom_menu {
  padding-bottom: 0;
}

#fix_bottom_menu .menu_list {
  height: auto;
  align-items: stretch;   /* SWELLは center。色を全高に伸ばすため stretch へ */
  padding: 0;
}

#fix_bottom_menu .menu-item {
  height: auto;
  margin: 0;
  padding: 0;             /* 追加CSSの padding:2px 0 0 を打ち消す */
}

/* 色を持つのは <a>。バー全体がタップ領域になる（SWELL既定は高さ34pxしかない） */
#fix_bottom_menu .menu-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 50px;
  padding-bottom: calc(env(safe-area-inset-bottom) * .5);
  text-decoration: none;
}

/* ラベル。width は em 指定（上記の折り返し設計）。
   SWELL の #fix_bottom_menu span { font-size:10px; width:100%; margin-top:4px } (1,0,1) を
   #fix_bottom_menu .menu-item span (1,1,1) で上書きする */
#fix_bottom_menu .menu-item span {
  display: block;
  width: 8.4em;           /* 既定は長い方（1・2番目）。3・4番目は下で上書き */
  margin: 0 auto;
  font-size: clamp(9px, 2.6vw, 11px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
}

/* 3・4番目（その他体験 / その他入会）は3文字＋2文字で折る */
#fix_bottom_menu .menu-item:nth-child(n+3) span { width: 3.4em; }

/* ---- 配色（PCの固定サイドナビと同じ割り当て）---- */
#fix_bottom_menu .menu-item:nth-child(1) a { background: #f3b1b9; color: #fff; }
#fix_bottom_menu .menu-item:nth-child(3) a { background: #c9db55; color: #fff; }

#fix_bottom_menu .menu-item:nth-child(2) a {
  background: #fff;
  color: #f3b1b9;
  box-shadow: inset 0 0 0 1.5px #f3b1b9;
}

#fix_bottom_menu .menu-item:nth-child(4) a {
  background: #fff;
  color: #c9db55;
  box-shadow: inset 0 0 0 1.5px #c9db55;
}

/* テーマの a:hover { opacity:.7 !important } を打ち消す（帯が薄くなって見えるため） */
#fix_bottom_menu .menu-item a:hover {
  opacity: 1 !important;
}

/* ============================================================
   [2026] 展開メニュー 閉じるボタン位置の詳細度対策
   SWELL の .-right .p-spMenu__closeBtn { right:0 } を上書きする
   ============================================================ */
.-right .p-spMenu__closeBtn {
  right: calc(max(0px, (100% - 1126px) / 2) + 48px);
}

@media (max-width: 959px) {
  .-right .p-spMenu__closeBtn {
    right: 16px;
  }
}


/* ============================================================
   TOP CTA（メインビジュアル下）2026
   デザイン AB0 y815〜1372 / コンテンツ幅1030（デザイン x85〜1115）
   ------------------------------------------------------------
   大カード 452.5 x 262 / 枠1px #3e3a39 / 影 +10,+10 #3e3a39
     アフタースクール x130   y815   #93d0c5
     習い事           x621.5 y815   #c9db55
     フリースクール   x130   y1110  #f3b1b9
   小バー 453 x 71 / #c8c8c8 / 縦ピッチ91.5
   列gap 39 / 行gap 33 / グリッド全幅 944.5
   格子模様 ピッチ22.3 / 線0.25 / 白38%
   ============================================================ */

.ds-cta {
  position: relative;
  width: 100%;
}

/* 背景をフルワイドの白に（セクション範囲内 #fff）
   ※ z-index: -1 により、.ds-cta__bg (z-index: 0) の背面に敷かれ、
      ブロブ画像が白背景で隠されるのを防ぐ */
.ds-cta::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  top: 0;
  bottom: 0;
  width: 100vw;
  background: #fff;
  z-index: -1;
  pointer-events: none;
}

/* WordPress はクラシックテーマ向けに group ブロックの中身を
   .wp-block-group__inner-container で包み直す（wp_restore_group_inner_container）。
   そのままだと flex/grid の直下の子がラッパー1つだけになりレイアウトが壊れるため、
   display:contents でラッパーを無かったことにする */
:is(.ds-cta, .ds-cta__grid, .ds-cta__bars, .ds-card, .ds-bar,
    .ds-lesson, .ds-lesson__body, .ds-lcard, .ds-lcard__left,
    .ds-lcard__right, .ds-lesson__bars, .ds-lbar) > .wp-block-group__inner-container {
  display: contents;
}

/* コアブロック化に伴う既定のブロック間余白を打ち消す。
   :where() は詳細度0なので、個別の margin 指定はそのまま効く */
:where(.ds-cta, .ds-cta__grid, .ds-cta__bars, .ds-card, .ds-bar,
       .ds-lesson, .ds-lesson__body, .ds-lcard, .ds-lcard__left,
       .ds-lcard__right, .ds-lesson__bars, .ds-lbar,
       .wp-block-group__inner-container) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* 背景blobがビューポートを超えても横スクロールを出さない
   （overflow:hidden と違い clip はスクロールコンテナを作らないので
     SWELLの position:sticky ヘッダーを壊さない） */
html,
body {
  overflow-x: clip;
}

/* 背景blob */
.ds-cta__bg {
  position: absolute;
  top: -40px;              /* ユーザー調整 2026-09-05（元: 0） */
  left: 50%;
  width: min(1230px, 100vw);      /* デザイン1230 ※コンテンツ幅で切らずフルワイドに */
  margin-top: -3.777%;            /* (776.1-815)/1030 ※marginの%は幅基準 */
  transform: translateX(-47.04%); /* 中心をデザインどおり右へ36.4px寄せる */
  pointer-events: none;
  z-index: 0;
}

/* 画面が狭いときは右寄せの微差より「はみ出さないこと」を優先 */
@media (max-width: 1280px) {
  .ds-cta__bg {
    transform: translateX(-50%);
  }
}

.ds-cta__bg img {
  display: block;
  width: 100%;
  height: auto;
}

/* SP（1カラム）は横長のblobだと上端の帯にしか見えないため、
   3色のバブルを縦に散らした専用SVG(cta-bg-blobs-sp.svg)へ差し替え、
   セクション全体の高さを覆う。
   ※ ブロックのHTMLを変えずに済むよう、<img> を隠して背景画像で描く */
@media (max-width: 599px) {
  .ds-cta__bg {
    top: -4%;
    bottom: -2%;
    left: 50%;
    width: 100vw;
    margin-top: 0;
    transform: translateX(-50%);
    background: url("/wp-content/uploads/2026/09/cta-bg-blobs-sp.svg") center / cover no-repeat;
  }
  .ds-cta__bg img {
    display: none;
  }
}

/* グリッド */
.ds-cta__grid {
  position: relative;
  z-index: 1;
  width: 91.7%;          /* 944.5/1030 */
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 1fr だと min-content で膨らむ */
  column-gap: 4.13%;     /* 39/944.5 */
  row-gap: 0;            /* row-gapの%は高さ基準になるため使わず margin-top で取る */
}

/* 2段目の縦間隔 33px 相当
   ※グリッドアイテムの margin% は「グリッドエリアの幅(=453)」基準 */
.ds-card--free,
.ds-cta__bars {
  margin-top: 7.293%;    /* 33/452.5 */
}

/* ---- 共通：影付きの箱 ----
   レッスンセクション(.ds-lcard / .ds-lbar)も同じ意匠なので流用する */
.ds-card,
.ds-bar,
.ds-lcard,
.ds-lbar {
  position: relative;
  display: block;
  border: 1px solid #3e3a39;
  border-radius: 8px;            /* デザイン実測 8px（ボックス・影とも） */
  color: #3e3a39;
  text-decoration: none;
  background-repeat: repeat;
  /* 影は擬似要素ではなく box-shadow で。
     擬似要素だと半透明にしたとき背後の影が透けて見えてしまう */
  box-shadow: 10px 10px 0 rgba(62, 58, 57, .6);
  transition: transform .25s;
}

.ds-card:hover,
.ds-bar:hover,
.ds-lcard:hover,
.ds-lbar:hover {
  transform: translate(3px, 3px);
}

/* 格子模様（Illustratorのパターンスウォッチを再現） */
.ds-card,
.ds-bar,
.ds-lcard,
.ds-lbar {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 22.3px 22.3px;
}

/* ---- 大カード ---- */
.ds-card {
  aspect-ratio: 452.5 / 262;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 7.25%;      /* 32.8/452.5 */
}

.ds-card--after   { background-color: #93d0c5; }
.ds-card--lessons { background-color: #c9db55; }
.ds-card--free    { background-color: #f3b1b9; }

/* コアブロック化で <figure class="wp-block-image ds-card__ttl"><img></figure> になるため
   ラッパーで幅を決め、中の img を100%にする */
:where(.ds-cta, .ds-cta__grid) figure { margin: 0; }

/* テーマの .post_content figure { margin:1em 0 }(0,1,1) に負けるため、
   figure ベースの要素は詳細度(0,2,0)で余白を明示する */
.ds-cta .ds-card__ttl,
.ds-cta .ds-bar__ttl { margin: 0; }

/* テーマが div ブロックに付ける下マージン(16px)を打ち消す
   （小バーの縦ピッチが 91.5 → 107.5 になってしまうため） */
.ds-cta .ds-card,
.ds-cta .ds-bar,
.ds-lesson .ds-lcard,
.ds-lesson .ds-lbar { margin-bottom: 0; }
.ds-cta .ds-card__sub { margin: 2.39% 0 0; }   /* 10.8/452.5 */

.ds-card__ttl img,
.ds-card__sub img,
.ds-bar__ttl img,
.ds-ill img { display: block; width: 100%; height: auto; }

.ds-card__ttl { display: block; width: 66.44%; height: auto; }   /* 300.65/452.5 */
.ds-card--lessons .ds-card__ttl { width: 32.8%; }                /* 148.41/452.5 */
.ds-card--free    .ds-card__ttl { width: 58.3%; }                /* 263.81/452.5 */

.ds-card__sub {
  display: block;
  width: 32.5%;            /* 147/452.5 */
  height: auto;
  margin-top: 2.39%;       /* 10.8/452.5 */
}
.ds-card--lessons .ds-card__sub { width: 18.4%; }   /* 83.31/452.5 */
.ds-card--free    .ds-card__sub { width: 29.1%; }   /* 131.73/452.5 */

.ds-cta .ds-card__txt {
  display: block;
  width: 70%;              /* 設計の最長行 312.5/452.5=69.06% に余裕を足した値 */
  margin: 4.77% 0 0;       /* 21.6/452.5 ※<p>化したので下マージンも明示 */
  text-align: center;
  font-size: clamp(12px, 1.42vw, 16px);   /* 設計 16px（コンテンツ1030pxのとき最大） */
  line-height: 1.6875;                    /* 設計 行送り27px / 16px */
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* 矢印ボタン */
/* ---- 矢印ボタン（core/buttons + core/button）----
   ・見た目は白いピル。線と矢尻は背景SVGで描く
   ・リンク自体を ::before でカード全体に広げ、カードのどこを押しても遷移する
     （<a> を position:static にすることで ::before の基準がカードになる）
   ※ 以前は wp:html の <span> と <a> を置いていたが、
     カスタムHTMLは編集画面で中身が描画されずレイアウトが崩れるため廃止 */
.ds-cardbtn,
.ds-cardbtn .wp-block-button {
  position: static;
  margin: 0;
  padding: 0;
  display: block;
}

/* 外枠だけに幅を持たせ、内側は 100%（二重に%が掛からないように） */
.ds-cardbtn { width: 18.78%; margin-top: 2.607%; }   /* 85/452.5, 11.8/452.5 */
.ds-cardbtn .wp-block-button { width: 100%; }

.ds-cardbtn .wp-block-button__link {
  position: static;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  aspect-ratio: 85 / 34;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 8'><path d='M0.5 4H30M26.5 1.2L29.8 4l-3.3 2.8' fill='none' stroke='%233e3a39' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;   /* 34/85 */
  transition: background-size .25s;
}

/* カード全体をクリック可能にする（stretched link） */
.ds-cardbtn .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.ds-card:hover .ds-cardbtn .wp-block-button__link,
.ds-bar:hover  .ds-cardbtn .wp-block-button__link,
.ds-lcard:hover .ds-cardbtn .wp-block-button__link,
.ds-lbar:hover  .ds-cardbtn .wp-block-button__link { background-size: 46% auto; }

/* ---- 小バー ---- */
.ds-cta__bars {
  align-self: start;       /* カード高に引き伸ばされないように */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
  row-gap: 0;
}

.ds-bar + .ds-bar {
  margin-top: 4.525%;      /* 20.5/453 */
}


.ds-bar {
  aspect-ratio: 453 / 71;
  background-color: #c8c8c8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 9.7% 8.1%;   /* 44/453, 36.7/453 */
}

.ds-bar__ttl { display: block; width: 36.8%; height: auto; }   /* 166.7/453 */
.ds-bar--tsushin .ds-bar__ttl { width: 37.9%; }
.ds-bar--other   .ds-bar__ttl { width: 52.2%; }

.ds-bar .ds-cardbtn { width: 18.76%; margin-top: 0; }   /* 85/453 */

/* ---- イラスト ---- */
.ds-ill {
  position: absolute;
  height: auto;
  pointer-events: none;
}

.ds-ill--clock  { width: 10.47%; left: 2.76%;  top: 52.0%; }   /* 47.37/452.5, (143.5-131)/452.5, (952.1-816)/262 */
.ds-ill--birdy  { width: 12.78%; left: 5.79%;  top: 72.8%; }
.ds-ill--abc    { width: 17.66%; right: -5.68%; top: 53.32%; z-index: 1; }  /* 79.9/452.5, 枠外へ25.7px, (954.7-815)/262 */
.ds-ill--birdo  { width: 11.31%; right: 1.61%;  top: 68.65%; }  /* 51.2/452.5, 7.3/452.5, (994.9-815)/262 */
.ds-ill--birdb  { width: 10.43%; right: 2.2%;  top: 62.8%; }
.ds-ill--leaf   { width: 7.03%;  right: 13.3%; top: 83.3%; }

/* ============================================================
   [2026] キャラクターのアニメーション（CTA / レッスン共通）
   ------------------------------------------------------------
   MVの鳥（.top-hero-bird）と同じ CSS アニメーション方式。
   JSの floatAnimation() は使わない:
     ・要素ごとにIDが必要 → ページのcontentを触ることになる
     ・1体につき rAF ループが1本走る。14体だと無駄が大きい
   CSSなら transform だけなのでコンポジタ任せで済み、
   ページのcontentも変更不要。

   動かすのは figure ではなく中の <img>。
   figure 側は絶対配置の位置決めを持っているので触らない。

   2種類のキーフレームを使い分ける:
     ds-ill-float … ふわっと上下＋わずかに傾く（鳥・キャラ・文字）
     ds-ill-sway  … 左右に揺れる（葉っぱ・時計）
   振れ幅は --dsi-y（上下）/ --dsi-r（回転）で個別に調整する。
   周期と開始遅延は全部バラバラの値にして、同時に動いて見えないようにしている。
   ============================================================ */

.ds-ill img,
.ds-lill img {
  transform-origin: 50% 90%;   /* 足元を軸に。頭が振れる感じになる */
  animation: ds-ill-float var(--dsi-dur, 4.4s) ease-in-out var(--dsi-delay, 0s) infinite;
}

@keyframes ds-ill-float {
  0%, 100% { transform: translateY(0)                                rotate(0deg); }
  25%      { transform: translateY(calc(var(--dsi-y, 18%) * -0.66))   rotate(calc(var(--dsi-r, 3deg) * -1)); }
  50%      { transform: translateY(calc(var(--dsi-y, 18%) * -1))      rotate(0deg); }
  75%      { transform: translateY(calc(var(--dsi-y, 18%) * -0.42))   rotate(var(--dsi-r, 3deg)); }
}

@keyframes ds-ill-sway {
  0%, 100% { transform: translateY(0)                             rotate(calc(var(--dsi-r, 6deg) * -1)); }
  50%      { transform: translateY(calc(var(--dsi-y, 8%) * -1))   rotate(var(--dsi-r, 6deg)); }
}

/* 葉っぱと時計は揺れる方。葉は軸を根元に置くと自然に見える */
.ds-ill--leaf img,
.ds-lill--leaf img,
.ds-ill--clock img,
.ds-lill--clock img {
  animation-name: ds-ill-sway;
}
.ds-ill--leaf img,
.ds-lill--leaf img { transform-origin: 50% 100%; }

/* ---- CTA（MV下）---- */
.ds-ill--clock img { --dsi-dur: 5.2s; --dsi-delay: .4s;  --dsi-r: 5deg; --dsi-y: 6%;  }
.ds-ill--birdy img { --dsi-dur: 4.1s; --dsi-delay: 0s;   --dsi-y: 22%; --dsi-r: 4deg; }
.ds-ill--abc   img { --dsi-dur: 4.8s; --dsi-delay: 1.1s; --dsi-y: 14%; --dsi-r: 2.5deg; }
.ds-ill--birdo img { --dsi-dur: 3.7s; --dsi-delay: .6s;  --dsi-y: 22%; --dsi-r: 4deg; }
.ds-ill--birdb img { --dsi-dur: 4.5s; --dsi-delay: 1.6s; --dsi-y: 20%; --dsi-r: 3.5deg; }
.ds-ill--leaf  img { --dsi-dur: 3.9s; --dsi-delay: .9s;  --dsi-r: 9deg; --dsi-y: 8%;  }

/* ---- レッスン ---- */
.ds-lill--pig   img { --dsi-dur: 4.6s; --dsi-delay: .2s;  --dsi-y: 12%; --dsi-r: 2.5deg; }
.ds-lill--birdo img { --dsi-dur: 3.8s; --dsi-delay: 1.3s; --dsi-y: 22%; --dsi-r: 4deg; }
.ds-lill--abc   img { --dsi-dur: 5.0s; --dsi-delay: .5s;  --dsi-y: 14%; --dsi-r: 2.5deg; }
.ds-lill--kid   img { --dsi-dur: 4.3s; --dsi-delay: 1.8s; --dsi-y: 12%; --dsi-r: 2.5deg; }
.ds-lill--clock img { --dsi-dur: 5.4s; --dsi-delay: .8s;  --dsi-r: 5deg; --dsi-y: 6%;  }
.ds-lill--birdy img { --dsi-dur: 3.6s; --dsi-delay: .3s;  --dsi-y: 22%; --dsi-r: 4deg; }
.ds-lill--birdb img { --dsi-dur: 4.9s; --dsi-delay: 1.4s; --dsi-y: 20%; --dsi-r: 3.5deg; }
.ds-lill--leaf  img { --dsi-dur: 4.0s; --dsi-delay: 1.0s; --dsi-r: 9deg; --dsi-y: 8%;  }

/* ---- 「講師たち」セクションのキャラ2体（2026-09-06）----
   もともと固定ページのJSから floatAnimation() で動かしていたものをCSSへ移した。
   これで floatAnimation() が不要になり、固定ページ側のJSも丸ごと削除できる。

   旧JSのパラメータからの換算:
     chara-01  radiusX30 / radiusY10 + radiusY2 15 / speed .015 → X±30 Y±25 1周7.0秒
     chara-02  radiusX20 / radiusY15 + radiusY2 30 / speed .012 → X±20 Y±45 1周8.7秒
     （1周 = 2π/speed フレーム ÷ 60fps）

   旧JSは楕円状にXYへ漂う動きだったので、上下だけの ds-ill-float ではなく
   左右にも動く ds-chara-drift を使う。
   ただし旧JSのYは2つの正弦の合成で、常に最大まで振れるわけではないため、
   Yは最大値そのままではなく体感が近くなる値に落としてある（01:18px / 02:30px）。

   ※ IDは <img> 側に付いている（#top-sec2-chara-01 等）。
     ここでは消えにくい figure 側のクラスで指定している */
.top-sec2-right-chara img,
.top-sec2-left-chara img {
  animation: ds-chara-drift var(--dsc-dur, 8s) ease-in-out infinite;
}

@keyframes ds-chara-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(var(--dsc-x, 20px), calc(var(--dsc-y, 20px) * -0.6)) rotate(1.5deg); }
  50%      { transform: translate(0, calc(var(--dsc-y, 20px) * -1)) rotate(0deg); }
  75%      { transform: translate(calc(var(--dsc-x, 20px) * -1), calc(var(--dsc-y, 20px) * -0.6)) rotate(-1.5deg); }
}

.top-sec2-right-chara img { --dsc-dur: 7.0s; --dsc-x: 30px; --dsc-y: 18px; }
.top-sec2-left-chara  img { --dsc-dur: 8.7s; --dsc-x: 20px; --dsc-y: 30px; }

/* SPはカードが詰まっていて本文のすぐ下にキャラが来る。
   PCと同じ振れ幅だと、最大位置で本文に食い込む
   （実測: ds-lill--birdb -5.6px / ds-ill--birdo -5.0px、横方向も重なる）。
   上下の振れ幅だけ小さくする（回転はそのまま）。
   ※ 個別指定 .ds-ill--xxx img と同じ詳細度(0,1,1)なので、
     必ず個別指定より後ろに置くこと */
@media (max-width: 959px) {
  .ds-ill img,
  .ds-lill img { --dsi-y: 8%; }

  /* 「講師たち」の左キャラはSPで 81px → 42px まで縮むのに、
     振れ幅がpx固定だとPCと同じ量動いてしまう（高さの半分以上）。
     縮小率に合わせて落とす。右キャラは pc_only なのでSPでは出ない */
  .top-sec2-left-chara img { --dsc-x: 10px; --dsc-y: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-ill img,
  .ds-lill img,
  .top-sec2-right-chara img,
  .top-sec2-left-chara img { animation: none; }
}

/* ---- タブレット・SP ---- */
@media (max-width: 959px) {
  .ds-cta__grid {
    width: 92%;
  }

  .ds-card,
  .ds-bar {
    box-shadow: 7px 7px 0 rgba(62, 58, 57, .6);
  }

  /* カードが狭くなるので本文の幅を広げて3行を維持 */
  .ds-cta .ds-card__txt {
    font-size: 13px;
    width: 86%;
    line-height: 1.7;
  }

  /* 本文が広がるぶんイラストは四隅へ逃がす（サイズはPCの%指定を継承） */
  .ds-ill--clock { left: 2%;  top: 8%;  }
  .ds-ill--birdy { left: 3%;  top: auto; bottom: 8%; }
  .ds-ill--abc   { right: -4%; top: auto; bottom: 22%; }   /* PC同様、鳥の右上・わずかに枠外へ */
  .ds-ill--birdo { right: 3%; top: auto; bottom: 8%; }
  .ds-ill--birdb { right: 3%; top: auto; bottom: 8%; }
  .ds-ill--leaf  { right: 15%; top: auto; bottom: 5%; }
}

@media (max-width: 599px) {
  .ds-cta__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }

  /* 1列になるので2段目のマージンは不要（row-gapに任せる） */
  .ds-card--free,
  .ds-cta__bars {
    margin-top: 0;
  }

  .ds-card,
  .ds-bar {
    box-shadow: 6px 6px 0 rgba(62, 58, 57, .6);
  }

  .ds-card {
    aspect-ratio: auto;
    padding: 26px 0 24px;
  }

  .ds-cta .ds-card__txt { font-size: 13px; width: 86%; }
  .ds-card__ttl { width: 62%; }
  .ds-card--lessons .ds-card__ttl { width: 31%; }
  .ds-card--free    .ds-card__ttl { width: 55%; }
  .ds-card .ds-cardbtn { width: 84px; margin: 18px auto 0; }

  .ds-bar {
    aspect-ratio: auto;   /* height と競合して横に膨らむため解除 */
    height: 62px;
  }

  .ds-bar + .ds-bar { margin-top: 12px; }
  .ds-bar .ds-cardbtn { width: 80px; }

  /* イラストのサイズだけ固定値に（位置は959px以下の指定を継承） */
  .ds-ill--clock { width: 34px; }
  .ds-ill--birdy { width: 42px; }
  .ds-ill--abc   { width: 50px; bottom: 25%; }   /* キャラとの重なりを浅くする */
  .ds-ill--birdo { width: 36px; }
  .ds-ill--birdb { width: 36px; }
  .ds-ill--leaf  { width: 24px; }
}

/* ============================================================
   TOP 背景：メインビジュアル〜お知らせまでを #fff に
   デザイン(AB0)の左端をスキャンした結果、y0〜y2092 が #ffffff、
   y2092（お知らせの直下）から #e6e6e6 に切り替わっている。
   ------------------------------------------------------------
   body の背景(#e6e6e6)はそのままに、お知らせ下端を終端とする
   フルワイドの白帯を背面に敷いて実現する。
   ※ .top-news-wp の ::before は SWELL が使用済みのため ::after を使用
   ※ 100vw のはみ出しは html,body の overflow-x:clip で吸収
   ============================================================ */
/* ===== [2026-09-06 各セクションの白背景独立化に伴い不要化 / 復元する場合はこのコメントを外す]
   下から上へ-5000px逆流させていたため、.top-news-wp の fade-in-up (初期 opacity:0) により
   ページロード時に白背景が消えて灰色になり、スクロール時に出現して .ds-cta__bg を覆い隠す
   原因になっていた。白背景は .top-hero-wp::before / .ds-cta::before / .top-news-wp(SWELL標準)
   で各セクション自身が完結して持つ方式に変更。
.top-news-wp::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  top: -5000px;      (* ページ上端まで十分にカバーする *)
  bottom: 0;         (* お知らせの下端でグレーに戻る *)
  background: #fff;
  z-index: -1;
  pointer-events: none;
}
===== */


/* ============================================================
   TOP お知らせ 2026
   デザイン AB0 y1490〜2030 / コンテンツ幅1030（x85〜1115）
   ------------------------------------------------------------
   見出し「お知らせ」x131.2 y1490.8 ／ NEWS x305.6（右隣）
   カード幅 297.4 ／ x131.0・452.8・774.6（ピッチ321.8・gap24.4）
   サムネ枠 297.4 x 226（aspect 1.3159）
   メタ（カテゴリ｜日付）サムネ下から23.7
   タイトル メタ下から26.7・3行
   MORE 中央 85.7 x 34.7
   矢印 x86.1 / x1103.7（＝コンテンツ幅の左右端）サムネの縦中央
   ------------------------------------------------------------
   基準要素: .top-news-wp .swell-block-fullWide__inner
             （幅1030px・position:relative）
   投稿リストブロックの設定: listType=card / catPos=beside_date
   ============================================================ */

.top-news-wp .swell-block-fullWide__inner {
  position: relative;
}

/* ---- 見出し ---- */
/* ※ .post_content h2 (0,1,1) に負けるため .top-news-wp を前置して詳細度を上げる */
.top-news-wp .ds-news__head {
  display: flex;
  align-items: baseline;
  gap: 3.883%;               /* NEWS を設計位置 x305.6 に合わせる: 40/1030 */
  margin: 0 0 5.4%;
  padding-left: 4.485%;      /* (131.2-85)/1030 */
}

.top-news-wp .ds-news__ttl {
  margin: 0;
  padding: 0;
  background: none;          /* テーマのh2装飾（背景色）を打ち消す */
  border: none;
  color: inherit;
  font-size: clamp(24px, 2.9vw, 35px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.top-news-wp .ds-news__ttl::before,
.top-news-wp .ds-news__ttl::after { content: none; display: none; }

.top-news-wp .ds-news__sub {
  margin: 0;
  font-size: clamp(11px, 1.15vw, 14px);
  letter-spacing: 0.08em;
}

/* ---- スライダー本体（投稿リストブロック） ---- */
.top-news-list {
  width: 91.36% !important;  /* 941/1030 */
  margin-inline: auto;
  overflow: hidden;
}

.top-news-list .p-postList {
  display: flex !important;
  flex-wrap: nowrap !important;   /* SWELL既定の wrap を解除しないと折り返す */
  align-items: flex-start;
  gap: 2.593%;               /* 24.4/941 */
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  /* 送りは myscript.js の rAF アニメーションが担当する。
     scroll-snap / scroll-behavior:smooth はループの瞬間移動と競合するため使わない */
  scroll-snap-type: none;
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.top-news-list .p-postList::-webkit-scrollbar { display: none; }

.top-news-wp .top-news-list .p-postList__item {
  flex: 0 0 31.605%;         /* 297.4/941 */
  margin: 0;                 /* style.css の 6em(SP) を打ち消す */
  padding: 0;
  border: 0;
}

.top-news-list .p-postList__link {
  display: block;
  padding: 0;
  text-decoration: none;
  color: inherit;
}

/* ---- サムネイル ---- */
.top-news-list .p-postList__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 297.4 / 226;
  overflow: hidden;
  border-radius: 4px;
  margin: 0;
}

.top-news-list .c-postThumb__figure {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.top-news-list .c-postThumb__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- メタ（カテゴリ｜日付） ---- */
.top-news-list .p-postList__body {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.top-news-wp .top-news-list .p-postList__meta {
  order: -1;                 /* 日付・カテゴリをタイトルより前へ */
  display: flex;
  align-items: center;
  gap: 1em;
  /* ※ メタはDOM上の最終子なので SWELL の
       .post_content div > :last-child{margin-bottom:0 !important} (0,2,1) に負ける。
       .top-news-wp を前置して (0,3,0) にし !important で通す */
  margin: 3.98% 0 !important;
  font-size: clamp(12px, 1.07vw, 13px);
  color: #3e3a39;
}

/* catPos=beside_date で .p-postList__meta 内に出力されるカテゴリ */
.top-news-list .my_postThumb__cat {
  order: -1;                 /* デザインどおり「カテゴリ｜日付」の順に */
  display: flex;
  align-items: center;
  gap: 1em;
  position: static;
}

.top-news-list .my_postThumb__cat::after {
  content: "|";
  color: #c8c8c8;
}

/* カテゴリが2個のときの区切り */
.top-news-list .c-postThumb__cat + .c-postThumb__cat::before {
  content: "・";
  margin-right: .1em;
  color: #c8c8c8;
}

.top-news-wp .top-news-list .c-postThumb__cat {
  position: static;
  /* ※ カテゴリはDOM上の先頭子なので SWELL の :first-child{margin-top:0 !important}
       に上を消される。詳細度を上げて指定どおり上下に効かせる */
  margin: .5em 0 !important;
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  border-radius: 0;
}

.top-news-list .c-postThumb__cat::before,
.top-news-list .c-postTimes__posted::before { display: none; }

/* ---- タイトル ---- */
.top-news-list .p-postList__title {
  margin: 8.98% 0 0;         /* 26.7/297.4 */
  font-size: clamp(13px, 1.34vw, 16px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 全24件の実タイトルは1〜2行が23件・3行が1件。
     3行ぶん確保すると文字下に最大66pxの空白が出てしまうため2行で揃える
     （3行に戻す場合は clamp と min-height をどちらも 3行ぶんに） */
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.8em;       /* line-height 1.4 × 2行 */
}

.top-news-list .p-postList__title::before { display: none; }

/* ---- 矢印（コンテンツ幅の左右端・サムネの縦中央） ---- */
.ds-news__arrow {
  position: absolute;
  top: 0;                    /* JSでサムネの縦中央に合わせる */
  width: 17px;
  height: 54px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}

.ds-news__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-top: 1px solid #3e3a39;
  border-right: 1px solid #3e3a39;
}

.ds-news__arrow.-prev { left: 0; }
.ds-news__arrow.-next { right: 0; }
.ds-news__arrow.-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.ds-news__arrow.-next::before { transform: translate(-70%, -50%) rotate(45deg); }

.ds-news__arrow:disabled { opacity: .25; cursor: default; }

/* スクロール不要な件数のときは矢印ごと隠す（JSで付与） */
.ds-news__arrow.-hidden { display: none; }

/* ---- MORE ---- */
.ds-news__more {
  margin-top: 2.6%;          /* 設計は5.6%だが、タイトル下の空きと合わさって広く見えるため詰める */
  text-align: center;
}

.ds-news__more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 85.7px;
  height: 34.7px;
  border: 1px solid #3e3a39;
  border-radius: 999px;
  text-decoration: none;
  color: #3e3a39;
  transition: background-color .25s, border-color .25s;
}

/* ホバーは半透明ではなく塗りで分かりやすく。
   テーマの a:hover{opacity:.7 !important} が乗ると色がくすむので打ち消す */
.ds-news__more a:hover {
  opacity: 1 !important;
  background: #93d0c5;
  border-color: #93d0c5;
  color: #fff;
}
.ds-news__more a:hover::before { background: #fff; }
.ds-news__more a:hover::after  { border-color: #fff; }

.ds-news__more a::before {
  content: "";
  width: 27%;
  height: 1px;
  background: #3e3a39;
}

.ds-news__more a::after {
  content: "";
  position: absolute;
  left: 63.5%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid #3e3a39;
  border-right: 1px solid #3e3a39;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---- タブレット・SP ---- */
@media (max-width: 959px) {
  .top-news-list { width: 100% !important; }
  .top-news-list .p-postList { gap: 20px; }
  .top-news-wp .top-news-list .p-postList__item { flex: 0 0 46%; }
  .ds-news__arrow { display: none; }
}

@media (max-width: 599px) {
  .top-news-wp .top-news-list .p-postList__item { flex: 0 0 76%; }
  .top-news-wp .ds-news__head { padding-left: 4%; margin-bottom: 24px; }

  /* メタ（カテゴリ｜日付）が10pxまで縮んで読めなかったので固定サイズに。
     カテゴリは最大2個。区切りを詰めて、入りきらない場合は折り返す */
  .top-news-wp .top-news-list .p-postList__meta {
    gap: .55em;
    flex-wrap: wrap;
    row-gap: .2em;
    font-size: 12px;
  }
  .top-news-list .my_postThumb__cat { gap: .55em; flex-wrap: wrap; row-gap: .2em; }
}

/* ============================================================
   [2026] TOP 中間の画像ギャラリー（2×2・フルワイド・隙間なし）
   デザイン実測: y3437〜4165 / 幅1200 × 高さ728
   → 1枚あたり 600 × 364（= 支給画像 1200×728 のちょうど1/2）
   ------------------------------------------------------------
   ページに置かれている core/group（グリッドレイアウト）を
   :has() で特定してそのまま整える。ブロック側の変更は不要。
   ※ 手書きHTMLに差し替える場合のために .ds-midgal も併記
   ※ フルワイド化は 100vw + translateX。はみ出しは html,body の
     overflow-x: clip が吸収する（.ds-cta__bg と同じ方式）
   ============================================================ */
.ds-midgal,
.post_content > .wp-block-group.is-layout-grid:has(img[src*="top-mid-img-"]) {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  line-height: 0;          /* img 下の行間の隙間を消す */
  font-size: 0;
}

.ds-midgal figure,
.post_content > .wp-block-group.is-layout-grid:has(img[src*="top-mid-img-"]) figure {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.ds-midgal img,
.post_content > .wp-block-group.is-layout-grid:has(img[src*="top-mid-img-"]) img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 364;
  object-fit: cover;
  margin: 0;
  border: 0;
  border-radius: 0;
  vertical-align: top;
}

/* ============================================================
   [2026] TOP レッスンセクション
   「教科書と黒板では学べない / 好きから始まるレッスン」
   ------------------------------------------------------------
   デザイン実測（アートボード1200 / コンテンツ1030 = x85〜1115）
     セクション  y4165（ギャラリー下端）〜 y6216（次節の #e6e6e6 開始）背景 #fff
     見出し      52px 2行 行送り82.1
     カード      987.5 × 345（x101.2）影 +10/+10 角丸8px  ピッチ392（間47）
       習い事     y4620.1  #c9db55  アクセント #99b02b
       アフター   y5012.1  #93d0c5  アクセント #569d8e
       フリー     y5404.1  #f3b1b9  アクセント #da8292
     区切り線    x512 幅2 高278（カード内で上下中央）
     ピル        199.3 × 50  2列（x547.5 / x757.5）4行 ピッチ67
     丸写真      直径202.6（枠線7pxは中心線 → 外径209.6）x904.5
     ボタン      85 × 34（CTAと同一）x985
     バー        477.5 × 169  2列（x101.2 / x610.2）間31.4  #c8c8c8
     背景blob    [-3.3, 4266.9] 1180.4 × 1885.4（3色 opacity 0.3）
   箱の意匠（枠線・角丸・影・格子模様・ホバー）はCTAから流用。
   ※ すべてコアブロック。カード全体のリンクは矢印ボタン(core/button)の
     ::before をカード全面へ広げて実現（stretched link）
   ============================================================ */
.ds-lesson {
  position: relative;
  width: 100%;
  /* 上下の余白（デザイン: 上191.7px / 下250.9px） */
  padding-top: clamp(56px, 18.612%, 192px);
  padding-bottom: clamp(64px, 24.359%, 251px);
}

/* 背景をフルワイドの白に（デザインではギャラリー下端から次節まで #fff） */
.ds-lesson::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  top: 0;
  bottom: 0;
  width: 100vw;
  background: #fff;
  z-index: -2;
  pointer-events: none;
}

/* ---- 見出し ---- */
.ds-lesson .ds-lesson__ttl {
  position: relative;
  margin: 0 0 11.46%;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: clamp(26px, 4.62vw, 52px);
  font-weight: 700;
  line-height: 1.579;
  letter-spacing: 0.06em;
}

.ds-lesson .ds-lesson__ttl::before,
.ds-lesson .ds-lesson__ttl::after { content: none; display: none; }

/* ---- カードとバーのまとまり（背景blobの基準）---- */
.ds-lesson__body {
  position: relative;
  width: 95.87%;
  margin-left: 1.573%;
}

/* 背景blob（デザインのパスをそのまま書き出したもの） */
.ds-lesson__body::before {
  content: "";
  position: absolute;
  left: -10.582%;
  top: 0;
  margin-top: -35.767%;
  width: 119.534%;
  aspect-ratio: 1180.4 / 1885.4;
  background: url("/wp-content/uploads/2026/09/lesson-bg-blobs.svg") center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: -1;
}

/* ---- 大カード ---- */
.ds-lcard {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 987.5 / 345;
  color: #3e3a39;
}

.ds-lcard + .ds-lcard,
.ds-lesson__bars { margin-top: 4.759%; }

.ds-lcard--lessons { background-color: #c9db55; }
.ds-lcard--after   { background-color: #93d0c5; }
.ds-lcard--free    { background-color: #f3b1b9; }

/* 中央の区切り線 */
.ds-lcard::after {
  content: "";
  position: absolute;
  left: 41.60%;
  top: 9.83%;
  width: 3px;
  height: 80.58%;
}
.ds-lcard--lessons::after { background: #99b02b; }
.ds-lcard--after::after   { background: #569d8e; }
.ds-lcard--free::after    { background: #da8292; }

/* ---- 左カラム ---- */
.ds-lcard__left {
  position: absolute;
  left: 0;
  top: 0;
  width: 41.60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}

:where(.ds-lcard__left, .ds-lcard__right) figure { margin: 0; }

/* 同上（レッスン側） */
.ds-lesson .ds-lcard__ttl,
.ds-lesson .ds-lbar__ttl,
.ds-lesson .ds-lcard__photo { margin: 0; }
.ds-lesson .ds-lcard__sub { margin: 2.41% 0 0; }

.ds-lcard__ttl img,
.ds-lcard__sub img { display: block; width: 100%; height: auto; }

.ds-lcard--lessons .ds-lcard__ttl { width: 38.99%; }
.ds-lcard--after   .ds-lcard__ttl { width: 82.42%; }
.ds-lcard--free    .ds-lcard__ttl { width: 71.76%; }

.ds-lcard__sub { margin-top: 3.41%; }
.ds-lcard--lessons .ds-lcard__sub { width: 20.20%; }
.ds-lcard--after   .ds-lcard__sub { width: 35.78%; }
.ds-lcard--free    .ds-lcard__sub { width: 32.06%; }

.ds-lesson .ds-lcard__txt {
  margin: 6.9% 0 0;
  font-size: clamp(12px, 1.42vw, 16px);
  line-height: 1.6875;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.ds-lesson .ds-lcard__catch {
  margin: 6.6% 0 0;
  font-size: clamp(18px, 2.84vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.ds-lcard--after .ds-lcard__catch { color: #569d8e; }
.ds-lcard--free  .ds-lcard__catch { color: #da8292; }

/* ---- 右カラム ---- */
/* 幅は丸写真に潜り込まないことで決まる。
   写真は left 80.99% / 直径 21.23% の円で、テキストのy範囲を通して円が最も左に来るのは
   円の中心の高さ = 80.99%。そこから約15px空けた 79.3% を右端とし、
   左端 46.35% との差 → 33%（右端 783px / 写真の左端 799px）。
   ※ 45% のときは本文1行目が写真の下端に潜り込んでいた（2026-09-05 修正） */
.ds-lcard__right {
  position: absolute;
  left: 46.35%;
  top: 16.70%;   /* 幅を詰めて本文が3行→5行になったぶん上へ（カード内で上下センター） */
  width: 33%;
  margin: 0;
}

.ds-lesson .ds-lcard__lead {
  margin: 0;
  font-size: clamp(15px, 1.86vw, 21px);
  font-weight: 700;
  line-height: 1.714;
  letter-spacing: 0.06em;
}

.ds-lesson .ds-lcard__body {
  margin: 5.5% 0 0;
  font-size: clamp(13px, 1.42vw, 16px);
  line-height: 1.75;
}

/* ---- 丸写真 ---- */
.ds-lcard__photo {
  position: absolute;
  left: 80.99%;
  top: -2.38%;
  width: 21.23%;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  border: 7px solid #fff;
  overflow: hidden;
  background: #fff;
  z-index: 2;
}
.ds-lcard__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ---- 矢印ボタン（CTAの .ds-cardbtn を流用）---- */
.ds-lcard .ds-cardbtn,
.ds-lbar .ds-cardbtn {
  position: absolute;
  margin: 0;
  width: 8.61%;
  z-index: 2;
}
.ds-lcard .ds-cardbtn {
  left: 89.52%;
  top: 82.87%;
}

/* ---- 習い事カードだけは「カード全体のリンク」にしない（2026-09-05）----
   ピルを1つずつ別のcourseへのリンクにしたため、カード全面を覆う stretched link
   （.ds-cardbtn .wp-block-button__link::before / z-index:3）があるとピルを押せない。
   リンクになるのは内部要素＝ピルと矢印ボタンだけ。
   ※ ホバーの動き（カードが3px動く＋矢印が伸びる）は他のカードと揃える方針。
     リンクではないがホバーの見た目だけ共通、というのはユーザー判断 */
.ds-lcard--lessons .ds-cardbtn .wp-block-button__link::before { content: none; }

/* ---- 習い事カードのピル ---- */
.ds-lesson .ds-lesson__pills {
  position: absolute;
  left: 45.19%;
  top: 13.30%;
  width: 41.45%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.62%;
  row-gap: 0;
}

.ds-lesson .ds-lesson__pills li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 199.3 / 50;
  margin: 0 0 4.16%;
  padding: 0;
  border-radius: 999px;
  background: #a7bd37;
  color: #fff;
  font-size: clamp(11px, 1.51vw, 17px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ds-lesson .ds-lesson__pills li::before { content: none; }
.ds-lesson .ds-lesson__pills li small { font-size: 0.94em; font-weight: 500; opacity: 1!important;}

/* ピルは1つずつ course 投稿へのリンク（2026-09-05）。
   <a> をピル全面まで伸ばして、ピルのどこを押しても遷移するようにする */
.ds-lesson .ds-lesson__pills li a {
  display: flex;
  flex: 1;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
  transition: background-color .25s;
}

/* テーマの a:hover { opacity:.7 !important }(0,1,1) に勝つため !important 併用 */
.ds-lesson .ds-lesson__pills li a:hover {
  background: #99b02b;
  color: #fff;
  text-decoration: none;
  opacity: 1 !important;
}

.ds-lesson .ds-lesson__more {
  position: absolute;
  left: 90.04%;
  top: 65.85%;
  margin: 0;
  font-size: clamp(11px, 1.42vw, 16px);
  font-weight: 700;
  line-height: 1.375;
}

/* ---- カード内のキャラクター ----
   PDFのベクターパスから書き出した実データ（脚まで含む全パス）
   位置・サイズはカード(987.5 x 345)基準の実測 */
.ds-lill {
  position: absolute;
  margin: 0;
  z-index: 1;
}
.ds-lill img { display: block; width: 100%; height: auto; }

.ds-lill--pig   { left:  2.043%; top: -15.571%; width: 13.248%; }
.ds-lill--abc   { left: 83.565%; top: -16.725%; width:  9.033%; z-index: 2; }
.ds-lill--birdo { left: 83.162%; top:  -4.032%; width:  5.722%; }
.ds-lill--kid   { left: 90.722%; top:  31.513%; width:  7.810%; }
.ds-lill--clock { left:  1.648%; top:  61.510%; width:  4.923%; }
.ds-lill--birdy { left:  2.842%; top:  77.159%; width:  6.216%; }
.ds-lill--birdb { left: 37.643%; top:  74.345%; width:  5.798%; }
.ds-lill--leaf  { left: 32.764%; top:  87.988%; width:  3.359%; }

/* ---- 小バー ---- */
.ds-lesson__bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3.18%;
}

.ds-lbar {
  position: relative;
  aspect-ratio: 477.5 / 169;
  background-color: #c8c8c8;
  color: #3e3a39;
}

.ds-lbar__ttl {
  position: absolute;
  left: 10.95%;
  top: 25.38%;
  margin: 0;
}
.ds-lbar__ttl img { display: block; width: 100%; height: auto; }
.ds-lbar--tsushin .ds-lbar__ttl { width: 35.54%; }
.ds-lbar--other   .ds-lbar__ttl { width: 49.36%; }

.ds-lesson .ds-lbar__txt {
  position: absolute;
  left: 10.95%;
  top: 52.01%;
  margin: 0;
  font-size: clamp(12px, 1.42vw, 16px);
  line-height: 1.75;
}

.ds-lbar .ds-cardbtn {
  left: 74.86%;
  top: 40.00%;
  width: 17.80%;
}

/* ---- タブレット・SP（デザインなしのため独自レイアウト）----
   PCは絶対配置。狭い幅では通常フローに戻して
   HTMLの並び順（左ブロック → 写真/ピル → 本文 → ボタン）で縦積みにする */
@media (max-width: 959px) {
  .ds-lcard,
  .ds-lbar { box-shadow: 7px 7px 0 rgba(62, 58, 57, .6); }

  .ds-lesson__body { width: 92%; margin-left: 0; margin-inline: auto; }

  .ds-lcard {
    aspect-ratio: auto;
    padding: 34px 6% 30px;
    text-align: center;
  }

  .ds-lcard::after { display: none; }

  .ds-lcard__left,
  .ds-lcard__right {
    position: static;
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
  }

  .ds-lcard__left { display: block; }
  /* 基本側の .ds-lesson .ds-lcard__ttl{margin:0}(0,2,0) と同詳細度にして中央寄せ */
  .ds-lesson .ds-lcard__ttl,
  .ds-lesson .ds-lcard__sub { margin-inline: auto; }
  .ds-lcard--lessons .ds-lcard__ttl { width: 132px; }
  .ds-lcard--after   .ds-lcard__ttl { width: 260px; }
  .ds-lcard--free    .ds-lcard__ttl { width: 226px; }
  .ds-lcard--lessons .ds-lcard__sub { width: 70px; }
  .ds-lcard--after   .ds-lcard__sub { width: 124px; }
  .ds-lcard--free    .ds-lcard__sub { width: 111px; }
  .ds-lcard__sub { margin-top: 10px; }

  .ds-lesson .ds-lcard__txt   { margin-top: 18px; font-size: 13px; }
  .ds-lesson .ds-lcard__catch { margin-top: 16px; font-size: clamp(19px, 3.4vw, 26px); }

  /* SPは1カラムなので、左カラム（中央揃え）と揃えて右カラムもセンター寄せにする */
  .ds-lcard__right { margin-top: 22px; text-align: center; }
  .ds-lesson .ds-lcard__lead  { font-size: clamp(15px, 2.2vw, 19px); }
  .ds-lesson .ds-lcard__body  { margin-top: 12px; font-size: 13px; }

  .ds-lcard__photo {
    position: static;
    width: clamp(140px, 34vw, 190px);
    border-width: 5px;
  }
  /* margin は基本側の .ds-lesson .ds-lcard__photo{margin:0}(0,2,0) に負けるので
     同詳細度で指定する。これが無いと写真が左寄せのままになる */
  .ds-lesson .ds-lcard__photo { margin: 20px auto 0; }

  /* static にすると ::before の width:27% がカード基準になって矢印が伸びるため
     relative のまま（＝通常フロー）にする */
  .ds-lcard .ds-cardbtn,
  .ds-lbar .ds-cardbtn {
    position: static;
    left: auto;
    top: auto;
    width: 84px;
    margin: 22px auto 0;
  }

  .ds-lesson .ds-lesson__pills {
    position: static;
    width: 100%;
    margin-top: 22px;
    column-gap: 8px;
  }
  .ds-lesson .ds-lesson__pills li { margin-bottom: 8px; font-size: clamp(11px, 2.1vw, 15px); }

  .ds-lesson .ds-lesson__more {
    position: static;
    display: block;
    margin-top: 4px;
    font-size: 12px;
  }
  .ds-lesson .ds-lesson__more br { display: none; }

  .ds-lesson__bars {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .ds-lbar {
    aspect-ratio: auto;
    padding: 24px 6% 26px;
    text-align: center;
  }
  .ds-lbar__ttl,
  .ds-lesson .ds-lbar__txt {
    position: static;
    left: auto;
    top: auto;
  }
  /* 写真と同じ理由（.ds-lesson .ds-lbar__ttl{margin:0} に負ける）で (0,2,0) にする。
     これが無いとバーの見出し画像が左寄せのままになる */
  .ds-lesson .ds-lbar__ttl { margin-inline: auto; }
  .ds-lbar--tsushin .ds-lbar__ttl { width: 150px; }
  .ds-lbar--other   .ds-lbar__ttl { width: 208px; }
  .ds-lesson .ds-lbar__txt { margin-top: 12px; font-size: 13px; }

  /* 見出しと1枚目のカードの間。ブタのキャラがカード上端から-22pxはみ出すので
     28pxだと見出しとの間が実質6pxしか空かない。48pxにして余白を確保する */
  .ds-lesson .ds-lesson__ttl { margin-bottom: 48px; }

  /* 縦積みではカード基準の%が合わなくなるので四隅へ配置し直す */
  .ds-lill--pig   { left: 2%;   top: -26px; width: 78px; }
  .ds-lill--birdo { left: auto; right: 4%;  top: -18px; width: 38px; }
  .ds-lill--abc   { left: auto; right: 3%;  top: -50px; width: 60px; }
  .ds-lill--kid   { left: auto; right: 4%;  top: auto; bottom: 5%; width: 52px; }
  .ds-lill--clock { left: 2%;   top: auto; bottom: 12.5%; width: 30px; }
  .ds-lill--birdy { left: 3%;   top: auto; bottom: 4%;  width: 44px; }
  .ds-lill--birdb { left: auto; right: 4%; top: auto; bottom: 3%; width: 42px; }
  .ds-lill--leaf  { left: auto; right: 18%; top: auto; bottom: 3%; width: 24px; }
}

@media (max-width: 599px) {
  .ds-lcard,
  .ds-lbar { box-shadow: 6px 6px 0 rgba(62, 58, 57, .6); }

  .ds-lcard { padding: 28px 5% 26px; }
  .ds-lesson .ds-lesson__pills { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
  .ds-lesson .ds-lesson__pills li { font-size: 11px; }
  .ds-lcard--after .ds-lcard__ttl { width: 210px; }
  .ds-lcard--free  .ds-lcard__ttl { width: 182px; }
  .ds-lill--pig { width: 64px; top: -22px; }
  .ds-lill--abc { width: 50px; top: -42px; }
}

/* ============================================================
   編集画面（ブロックエディター）対策
   ------------------------------------------------------------
   Gutenberg は全ブロックに
     .block-editor-block-list__layout .block-editor-block-list__block { position: relative }
   (0,2,0) を当てるため、こちらの position:absolute (0,1,0) が負けて
   絶対配置の装飾がすべて通常フローに落ち、カードが崩れる。
   同じ要素を (0,3,0) で再指定して打ち消す。
   ※ フロント側には .block-editor-* が存在しないので影響しない
   ============================================================ */
.ds-cta .block-editor-block-list__block.ds-cta__bg,
.ds-cta .block-editor-block-list__block.ds-ill,
.ds-lesson .block-editor-block-list__block.ds-lcard__left,
.ds-lesson .block-editor-block-list__block.ds-lcard__right,
.ds-lesson .block-editor-block-list__block.ds-lcard__photo,
.ds-lesson .block-editor-block-list__block.ds-lesson__pills,
.ds-lesson .block-editor-block-list__block.ds-lesson__more,
.ds-lesson .block-editor-block-list__block.ds-lill,
.ds-lesson .block-editor-block-list__block.ds-lbar__ttl,
.ds-lesson .block-editor-block-list__block.ds-lbar__txt,
.ds-lesson .block-editor-block-list__block.ds-cardbtn {
  position: absolute;
}

/* グリッドアイテムに幅を明示する。
   編集画面ではブロックの内在幅（1030px）が効いてトラックからはみ出すため、
   width:100% でトラック幅に合わせる。フロントでも同じ結果になる
   （.ds-lcard は元から width:100% だったので崩れていなかった） */
.ds-card,
.ds-bar,
.ds-lbar {
  width: 100%;
  min-width: 0;
}

/* ============================================================
   トップページだけヘッダーを白に（下層は #e6e6e6 のまま）
   ※ home クラスは body ではなく #body_wrap に付く
   ============================================================ */
#body_wrap.home .l-header {
  background-color: #fff;
}

/* ============================================================
   トップページのロードアニメーション対策（2026-09-06）
   SWELLのページ遷移アニメーション（.l-content の 0.5s 遅延フェード）により、
   下地である body の背景色（#e6e6e6）がロード直後に露出するのを防ぐ。
   トップページのみ .l-content を最初から opacity: 1 で即時表示する。
   ============================================================ */
#body_wrap.home .l-content {
  animation: none !important;
  opacity: 1 !important;
}

/* ============================================================
   アフタースクール固定ページ（/afterschool/ = page-id-3924）2026-09-23
   デザイン: Ds_web_top_2026_AS.pdf（1200 x 6231 / コンテンツ x85〜1115）
   ブロック生成: _src/mk_as.py / 素材: _src/as_assets.py（as-*.svg / as-*.webp）
   ------------------------------------------------------------
   PC（960px〜）は .as-page をコンテナにして、コンテンツ幅1030を基準にした
   --u（= 100cqw / 1030）でデザイン座標をそのまま書く。
   コンテンツ幅が縮めば全体が相似に縮む（TOPの % 指定と同じ考え方）
   ※ 各数値のコメントは「デザイン座標 → セクション基準」
   セクション（デザインy）
     MV        126(ヘッダー下)〜1094  白
     ABOUT     1094〜1840  #f5c34e＋格子
     VALUE     1840〜2615  白
     TIME      2615〜3327  #93d0c5＋格子
     SUPPORT   3327〜4321  白
     SCHOOLS   4321〜5210  #e6e6dc＋格子（CONTACTピルの中心5340まで続く → ブログパーツ側）
   ============================================================ */

/* ページ限定は page ID ではなく「.as-page を含むページ」で判定する（2026-09-23）。
   開発(ID 3924)と本番で page ID が変わるため。#body_wrap:has(.as-page) は #body_wrap.page-id-N と同じ詳細度 (1,1,0)。
   :has() は Chrome 105+ / Safari 15.4+ / Firefox 121+ */
/* ページタイトルは出さない（MVのキャッチを h1 にしている） */
#body_wrap:has(.as-page) .c-pageTitle,
#body_wrap:has(.as-page) .l-topTitleArea { display: none; }

/* ヘッダーを白に（TOPの #body_wrap.home .l-header と同じ） */
#body_wrap:has(.as-page) .l-header { background-color: #fff; }

/* 下地を白に（2026-09-23）
   SWELL のロードアニメーション（.l-content が opacity:0 から FadeIn 1s）の間、
   MVの白背景（.as-mv::before）も .l-content ごと透明になり、body のグレー #e6e6e6 が見えていた。
   TOP は README 第57章でアニメーション自体を止めたが、このページは下層ページと同じフェードを残し、
   下地だけ白にする（このページはセクション背景が全面を覆うので、グレーが見える箇所は無い） */
#body_wrap:has(.as-page) { background-color: #fff; }

.as-page {
  --u: calc(100cqw / 1030);
  container-type: inline-size;
  position: relative;
  color: #3e3a39;
}
/* --u は未登録カスタムプロパティなので「使われた要素」で cqw が解決される
   → 子孫では .as-page（コンテナ）の幅基準になる */

/* group の inner-container を透過（TOPと同じ対策） */
.as-page .wp-block-group > .wp-block-group__inner-container,
.as-page > .wp-block-group__inner-container,
.as-contact > .wp-block-group__inner-container {
  display: contents;
}

/* テーマの .post_content h2 / p / figure (0,1,1) を打ち消す */
.post_content > .as-page,
.as-page :is(h1, h2, h3, p, figure, .wp-block-buttons, .wp-block-button, .wp-block-group) {
  margin: 0;
  padding: 0;
}
.as-page :is(h1, h2, h3) {
  background: none;
  border: 0;
  font-weight: 500;
  color: inherit;
  letter-spacing: .04em;
}
.as-page :is(h1, h2, h3)::before,
.as-page :is(h1, h2, h3)::after { content: none; }
.as-page p { line-height: 2; letter-spacing: .05em; }
.as-page figure img { display: block; width: 100%; height: auto; }

/* ---- セクション共通：フルワイド背景 ---- */
.as-mv, .as-about, .as-value, .as-time, .as-support, .as-schools {
  position: relative;
  z-index: 0;
}
.as-mv::before, .as-about::before, .as-value::before,
.as-time::before, .as-support::before, .as-schools::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background-color: #fff;
}
.as-mv::before { top: -130px; }   /* ヘッダーの裏まで白 */
.as-about::before  { background-color: #f5c34e; }
.as-time::before   { background-color: #93d0c5; }
.as-schools::before { background-color: #e6e6dc; }

/* 格子模様（TOPの .ds-card と同じスウォッチ） */
.as-about::before, .as-time::before, .as-schools::before,
.as-page .as-mv__btn .wp-block-button__link {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size: 22.3px 22.3px;
}

/* ---- 絶対配置の共通 ----
   ※ group の中身は inner-container(display:contents) に包まれるため
     子セレクタ > は使えない（HANDOVER 5-2） */
.as-page .as-ill,
.as-page .as-mv__label,
.as-page .as-mv__btn,
.as-page .as-mv__scroll,
.as-page .as-mv__photo,
.as-page .as-vcard__num { position: absolute; }

/* 英字ラベル（NORTHCLIFF をSVG化） */
.as-page .as-label { display: block; }

/* 見出し（PA1ゴシック）は Web で使えないため SVG（as-ttl-*.svg）を見出しタグ内に置く。文言は alt。
   位置・幅は SVG の外接矩形（デザイン実測）で指定する
   [2026-09-23 SVG化に伴い不要化 / 復元する場合はこのコメントを外す]
.as-page .as-ttl {
  font-size: calc(48 * var(--u));
  line-height: calc(77 * var(--u));
  letter-spacing: .06em;
} */
.as-page .as-ttl { line-height: 0; }
.as-page .as-ttl .as-ttl__img { display: block; width: 100%; height: auto; }

/* ============================== キャラ（浮遊アニメ） ==============================
   TOP の ds-ill-float / ds-ill-sway を流用 */
.as-page .as-ill { z-index: 2; pointer-events: none; }
.as-page .as-ill img {
  transform-origin: 50% 90%;
  animation: ds-ill-float var(--dsi-dur, 4.4s) ease-in-out var(--dsi-delay, 0s) infinite;
}
.as-ill--mv1   img { --dsi-dur: 4.2s; --dsi-delay: .2s;  --dsi-y: 18%; --dsi-r: 4deg; }
.as-ill--mv2   img { --dsi-dur: 3.8s; --dsi-delay: 1.1s; --dsi-y: 18%; --dsi-r: 4deg; }
.as-ill--mv3   img { --dsi-dur: 4.6s; --dsi-delay: .6s;  --dsi-y: 18%; --dsi-r: 4deg; }
.as-ill--about img { --dsi-dur: 4.9s; --dsi-delay: .4s;  --dsi-y: 8%;  --dsi-r: 2deg; }
.as-ill--abc   img { --dsi-dur: 4.4s; --dsi-delay: 1.3s; --dsi-y: 10%; --dsi-r: 2.5deg; }
.as-ill--value img { --dsi-dur: 4.1s; --dsi-delay: .8s;  --dsi-y: 12%; --dsi-r: 3deg; }
.as-ill--time  img { --dsi-dur: 5.2s; --dsi-delay: .1s;  --dsi-y: 8%;  --dsi-r: 3deg; }
.as-ill--sup01 img { --dsi-dur: 4.5s; --dsi-delay: .3s;  --dsi-y: 10%; --dsi-r: 3deg; }
.as-ill--sup02 img { --dsi-dur: 3.9s; --dsi-delay: 1.2s; --dsi-y: 10%; --dsi-r: 3deg; }
.as-ill--sup03 img { --dsi-dur: 4.7s; --dsi-delay: .7s;  --dsi-y: 10%; --dsi-r: 3deg; }
@media (prefers-reduced-motion: reduce) {
  .as-page .as-ill img { animation: none; }
}

/* ============================== MV ============================== */
.as-mv { height: calc(968 * var(--u)); }                    /* 1094-126 */

.as-page .as-mv__label { left: calc(2 * var(--u)); top: calc(88 * var(--u)); width: calc(310.8 * var(--u)); }

.as-page .as-mv__ttl {
  position: absolute;
  left: calc(5 * var(--u));          /* x90 */
  top: calc(157 * var(--u));         /* y283 */
  width: calc(482.2 * var(--u));
  z-index: 1;
}
.as-page .as-ill--mv1 { left: calc(133.5 * var(--u)); top: calc(131.8 * var(--u)); width: calc(29.5 * var(--u)); }
.as-page .as-ill--mv2 { left: calc(374.8 * var(--u)); top: calc(253.5 * var(--u)); width: calc(24 * var(--u)); }
.as-page .as-ill--mv3 { left: calc(95.5 * var(--u));  top: calc(379.8 * var(--u)); width: calc(27 * var(--u)); }

.as-page .as-mv__lead {
  position: absolute;
  left: calc(2 * var(--u));
  top: calc(486.5 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(35 * var(--u));
  letter-spacing: .12em;           /* デザインの行幅 248.4 / 254.8 / 274.1 に合わせる（2026-09-23） */
}

/* ボタン 424 x 92 / 枠1px / 影 +8,+8 #3e3a39 60% / 角丸9 */
.as-page .as-mv__btn { left: calc(-.5 * var(--u)); top: calc(638.5 * var(--u)); width: calc(424 * var(--u)); z-index: 1; }
.as-page .as-mv__btn .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(92 * var(--u));
  padding: 0;
  border: 1px solid #3e3a39;
  border-radius: 9px;
  background-color: #93d0c5;
  box-shadow: 8px 8px 0 rgba(62, 58, 57, .6);
  color: #3e3a39;
  font-size: calc(23 * var(--u));
  font-weight: 700;
  letter-spacing: .08em;
  transition: transform .25s;
}
.as-page .as-mv__btn .wp-block-button__link:hover { transform: translate(3px, 3px); opacity: 1 !important; }
/* 文字は SVG（as-txt-mvbtn.svg 299.2 x 22.5）。サイトフォントだと字幅が広く窮屈だったため */
.as-page .as-mv__btn .as-mv__btnimg {
  display: block;
  position: relative;
  left: calc(3 * var(--u));          /* 文字の中心はボタン中心より3右（x149.8） */
  width: calc(299.2 * var(--u));
  height: auto;
  margin: 0 auto;
}
/* core/button の外枠 .wp-block-button が中身の幅に縮み、ボタンが 424 → 301 になっていた */
.as-page .as-mv__btn .wp-block-button { width: 100%; }
/* [2026-09-23 A1ゴシックの文字をSVG化に伴い不要化 / 復元する場合はこのコメントを外す]
.as-mv__arrow { display: inline-block; margin-left: .3em; }
.as-mv__btn .wp-block-button__link:hover .as-mv__arrow { animation: as-arrow-down .8s ease-in-out infinite; } */
@keyframes as-arrow-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(.18em); }
}

/* 写真（ブロブ形の透過WebP） */
.as-page .as-mv__photo--01 { left: calc(704.6 * var(--u)); top: calc(93.1 * var(--u));  width: calc(251.7 * var(--u)); }
.as-page .as-mv__photo--02 { left: calc(531.5 * var(--u)); top: calc(365.4 * var(--u)); width: calc(267.8 * var(--u)); }
/* 03 は ai 原本のクリップ形状で書き出し直した（PDFはアートボード右端1200で切れていた）
   x930.1 y595.9 w290.1 → 右端はコンテンツ外へ 105px はみ出す（html の overflow-x:clip で切る） */
.as-page .as-mv__photo--03 {
  left: calc(845.1 * var(--u));
  top: calc(469.9 * var(--u));
  width: calc(290.1 * var(--u));
}
/* [2026-09-23 写真03のフル形状化に伴い不要化 / 復元する場合はこのコメントを外す]
.as-page .as-mv__photo--03 {
  left: auto;
  right: calc((100cqw - 100vw) / 2);
  top: calc(469.9 * var(--u));
  width: calc(279.4 * var(--u));
} */

/* SCROLL：キャラ（as-scroll-chara.svg x582.2 y929.2）と文字（as-scroll-text.svg x594.2 y950.8）を分け、
   キャラはほかのキャラと同じふわふわ。どちらも #as-about へのリンク（SWELLのJSでスムーズスクロール）
   ※ .as-ill は pointer-events:none なのでキャラだけ戻す */
.as-page .as-mv__scroll { left: calc(497.2 * var(--u)); top: calc(803.2 * var(--u)); width: calc(20.5 * var(--u)); }
.as-page .as-mv__scrolltxt { position: absolute; left: calc(509.2 * var(--u)); top: calc(824.8 * var(--u)); width: calc(13 * var(--u)); z-index: 2; }
.as-page .as-ill--scroll { pointer-events: auto; }
.as-ill--scroll img { --dsi-dur: 3.6s; --dsi-delay: .3s; --dsi-y: 22%; --dsi-r: 5deg; }
.as-page :is(.as-mv__scroll, .as-mv__scrolltxt) a { position: relative; display: block; }
.as-page :is(.as-mv__scroll, .as-mv__scrolltxt) a:hover { opacity: 1 !important; }
/* 押せる範囲を広げる（文字は幅13しかないため） */
.as-page .as-mv__scrolltxt a::before { content: ""; position: absolute; inset: -12px -18px; }
.as-page .as-mv__scrolltxt a:hover img { transform: translateY(4px); }
.as-page .as-mv__scrolltxt img { transition: transform .3s; }

/* ============================== ABOUT ============================== */
.as-about { height: calc(746 * var(--u)); }

.as-page .as-about__label { position: absolute; left: calc(2 * var(--u)); top: calc(93.8 * var(--u)); width: calc(327.2 * var(--u)); }
.as-page .as-about__ttl   { position: absolute; left: calc(3.2 * var(--u)); top: calc(158.2 * var(--u)); width: calc(454 * var(--u)); }
.as-page .as-ill--about   { left: calc(372.5 * var(--u)); top: calc(296.8 * var(--u)); width: calc(99.8 * var(--u)); }

.as-page .as-about__lead {
  position: absolute;
  left: calc(563 * var(--u));
  top: calc(82 * var(--u));
  font-size: calc(19 * var(--u));
  line-height: calc(33 * var(--u));
  font-weight: 700;
  letter-spacing: .02em;
}
.as-page .as-about__txt {
  position: absolute;
  left: calc(566 * var(--u));
  top: calc(177 * var(--u));
  width: calc(462 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(32 * var(--u));
  letter-spacing: .06em;
}
.as-page .as-ill--abc  { left: calc(945.8 * var(--u)); top: calc(381 * var(--u)); width: calc(75 * var(--u)); }
.as-page .as-about__play { position: absolute; left: calc(115.8 * var(--u)); top: calc(497.2 * var(--u)); width: calc(803.8 * var(--u)); }
.as-page .as-about__quote {
  position: absolute;
  left: calc(263.5 * var(--u));      /* x348.5 */
  top: calc(619.8 * var(--u));       /* y1713.8 */
  width: calc(503 * var(--u));
  line-height: 0;
}
.as-page .as-about__quote .as-ttl__img { display: block; width: 100%; height: auto; }

/* ============================== VALUE ============================== */
.as-value { height: calc(775 * var(--u)); }

.as-page .as-value__label { position: absolute; left: calc(443 * var(--u)); top: calc(101.5 * var(--u)); width: calc(143.8 * var(--u)); }
.as-page .as-value__ttl { position: absolute; left: calc(278.2 * var(--u)); top: calc(131.2 * var(--u)); width: calc(470.2 * var(--u)); }
.as-page .as-ill--value { left: calc(703.8 * var(--u)); top: calc(100.8 * var(--u)); width: calc(66.8 * var(--u)); }

.as-page .as-value__cards {
  position: absolute;
  left: calc(12 * var(--u));
  top: calc(289 * var(--u));
  width: calc(1006 * var(--u));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(23 * var(--u));
}
/* 320 x 355（線6pxの外形）/ 角丸 外13 */
.as-page .as-vcard {
  position: relative;
  width: 100%;
  min-width: 0;
  height: calc(355 * var(--u));
  padding: calc(93.5 * var(--u)) calc(22 * var(--u)) 0;   /* 左右とも枠の内側22（デザイン 左22 / 右約25） */
  border: calc(6 * var(--u)) solid var(--as-c);
  border-radius: calc(13 * var(--u));
  background: #fff;
}
.as-vcard--01 { --as-c: #93d0c5; }
.as-vcard--02 { --as-c: #c9db55; }
.as-vcard--03 { --as-c: #f3b1b9; }

/* 番号のブロブ（白塗り＋線）でカードの上辺を隠す。位置は border-box 基準 */
.as-page .as-vcard__num { top: calc(-44 * var(--u)); z-index: 1; }
.as-page .as-vcard--01 .as-vcard__num { left: calc(119.8 * var(--u)); width: calc(68.5 * var(--u)); }
.as-page .as-vcard--02 .as-vcard__num { left: calc(118 * var(--u));   width: calc(72 * var(--u)); top: calc(-42.2 * var(--u)); }
.as-page .as-vcard--03 .as-vcard__num { left: calc(107.2 * var(--u)); width: calc(93.5 * var(--u)); top: calc(-35.8 * var(--u)); }

.as-page .as-vcard__sub { height: calc(10.2 * var(--u)); }
.as-page .as-vcard__sub img { width: auto; height: 100%; }
.as-page .as-vcard__ttl { margin: calc(22.1 * var(--u)) 0 0 calc(1.8 * var(--u)); line-height: 0; }   /* x126.8 y2260.8 */
.as-vcard--01 .as-vcard__ttl { width: calc(219 * var(--u)); }
.as-vcard--02 .as-vcard__ttl { width: calc(168.5 * var(--u)); }
.as-vcard--03 .as-vcard__ttl { width: calc(212.8 * var(--u)); }
.as-page .as-vcard__ttl .as-ttl__img { display: block; width: 100%; height: auto; }
.as-page .as-vcard__txt {
  margin-top: calc(16.4 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: .04em;
}

/* ============================== AFTER SCHOOL TIME ============================== */
.as-time { height: calc(712 * var(--u)); color: #fff; }

.as-page .as-time__label { position: absolute; left: calc(2 * var(--u)); top: calc(153 * var(--u)); width: calc(244.8 * var(--u)); }
.as-page .as-time__ttl   { position: absolute; left: calc(-.5 * var(--u)); top: calc(216.8 * var(--u)); width: calc(414.5 * var(--u)); }
/* [2026-09-23 見出しSVG化（黄色の帯もSVGに含む）に伴い不要化 / 復元する場合はこのコメントを外す]
.as-marker {
  padding-inline: .04em;
  margin-inline: -.04em;
  background: linear-gradient(transparent 70%, #f5c34e 70%, #f5c34e 91%, transparent 91%);
} */
.as-page .as-time__txt {
  position: absolute;
  left: calc(2 * var(--u));
  top: calc(458 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(32 * var(--u));
  color: #fff;
}
.as-page .as-ill--time { left: calc(41 * var(--u)); top: calc(570.5 * var(--u)); width: calc(72.8 * var(--u)); }

/* 白カード 437 x 630 / 角丸10 / 中身の中心は x826.9（カード中心より6.6左） */
.as-page .as-time__card {
  position: absolute;
  left: calc(530 * var(--u));
  top: calc(41 * var(--u));
  width: calc(437 * var(--u));
  height: calc(630 * var(--u));
  padding: calc(44 * var(--u)) calc(13.2 * var(--u)) 0 0;
  border-radius: 10px;
  background: #fff;
  color: #3e3a39;
  text-align: center;
}
.as-page .as-step { position: relative; height: calc(147 * var(--u)); }
/* 丸・番号・名前は SVG 1枚（as-txt-step-0N.svg）。デザインは4行とも左端 x728.2 で揃っている */
.as-page .as-step__ttl { margin-left: calc(113.2 * var(--u)); line-height: 0; text-align: left; }
.as-page .as-step:nth-child(1) .as-step__ttl { width: calc(193 * var(--u)); }
.as-page .as-step:nth-child(2) .as-step__ttl { width: calc(160.5 * var(--u)); }
.as-page .as-step:nth-child(3) .as-step__ttl { width: calc(192.8 * var(--u)); }
.as-page .as-step:nth-child(4) .as-step__ttl { width: calc(191.5 * var(--u)); }
.as-page .as-step__ttl .as-ttl__img { display: block; width: 100%; height: auto; }
/* [2026-09-23 A1ゴシックの文字をSVG化に伴い不要化 / 復元する場合はこのコメントを外す]
.as-page .as-step__ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(11 * var(--u));
  height: calc(44 * var(--u));
  font-size: calc(35 * var(--u));
  line-height: 1;
  letter-spacing: .1em;
  color: #f5c34e;
}
.as-page .as-step__num {
  display: grid;
  place-items: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: 50%;
  background: #f5c34e;
  color: #3e3a39;
  font-size: calc(16 * var(--u));
  letter-spacing: .04em;
} */
.as-page .as-step__txt {
  margin-top: calc(8.5 * var(--u));   /* 見出しの下端→文字の上端 11px（デザイン11.5）。1.5 だと文字の実際の上端までは約4pxしかなかった */
  font-size: calc(15 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: .04em;
}
/* 矢印（線21 + 矢尻）ステップ上端から107 */
.as-page .as-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(107 * var(--u));
  width: calc(8 * var(--u));
  height: calc(30 * var(--u));
  transform: translateX(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 30'><path d='M4 0V21' stroke='%233e3a39' stroke-width='1'/><path d='M1.1 19.2L4 30l2.9-10.8z' fill='%233e3a39'/></svg>") center / 100% 100% no-repeat;
}

/* ============================== SUPPORT ============================== */
.as-support { height: calc(994 * var(--u)); }

.as-page .as-support__label { position: absolute; left: calc(450.2 * var(--u)); top: calc(89.2 * var(--u)); width: calc(129.5 * var(--u)); }
.as-page .as-support__ttl { position: absolute; left: calc(399 * var(--u)); top: calc(128.8 * var(--u)); width: calc(229.8 * var(--u)); }
.as-page .as-support__lead {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(219.5 * var(--u));
  text-align: center;
  font-size: calc(15 * var(--u));
  line-height: calc(22 * var(--u));
}

.as-page .as-support__list {
  position: absolute;
  left: calc(217 * var(--u));      /* 吹き出し本体の左 x302 */
  top: calc(333.8 * var(--u));
  width: calc(717 * var(--u));
  display: grid;
  row-gap: calc(21 * var(--u));
}
/* 吹き出し 717 x 162 / 枠1px / 角丸32.6 / しっぽ 幅35.5 高40.5（左・縦中央） */
.as-page .as-bubble {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: calc(162 * var(--u));
  border: 1px solid #3e3a39;
  border-radius: calc(32.6 * var(--u));
  background: var(--as-c);
}
.as-bubble--01 { --as-c: #98d1c4; }
.as-bubble--02 { --as-c: #c9db55; }
.as-bubble--03 { --as-c: #f3b1b9; }
/* しっぽ（幅35.5 高40.5・左・縦中央）は1本線のSVG。線は vector-effect:non-scaling-stroke で常に1px。
   右端2単位ぶんを塗りで伸ばして吹き出しの枠線（1px）を隠し、しっぽと本体をつなげる。
   SVGの x=36 を枠線の中心（-0.5px）に合わせる */
.as-page .as-bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-.5px - 36 * var(--u));
  width: calc(38 * var(--u));
  height: calc(41 * var(--u));
  transform: translateY(-50%);
  background: none center / 100% 100% no-repeat;
}
.as-page .as-bubble--01::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 41' preserveAspectRatio='none'><path d='M36 0L.6 20.5 36 41h2V0z' fill='%2398d1c4'/><path d='M36 0L.6 20.5 36 41' fill='none' stroke='%233e3a39' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>"); }
.as-page .as-bubble--02::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 41' preserveAspectRatio='none'><path d='M36 0L.6 20.5 36 41h2V0z' fill='%23c9db55'/><path d='M36 0L.6 20.5 36 41' fill='none' stroke='%233e3a39' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>"); }
.as-page .as-bubble--03::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 41' preserveAspectRatio='none'><path d='M36 0L.6 20.5 36 41h2V0z' fill='%23f3b1b9'/><path d='M36 0L.6 20.5 36 41' fill='none' stroke='%233e3a39' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>"); }
/* [2026-09-23 しっぽをSVG化（線が太く見えたため）に伴い不要化 / 復元する場合はこのコメントを外す]
.as-page .as-bubble::before,
.as-page .as-bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(35.5 * var(--u));
  height: calc(40.5 * var(--u));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  transform: translateY(-50%);
}
.as-page .as-bubble::before { right: calc(100% + 0px); background: #3e3a39; }
.as-page .as-bubble::after  { right: calc(100% - 2px); background: var(--as-c); clip-path: polygon(2.4px 50%, 100% 1.3px, 100% calc(100% - 1.3px)); } */

.as-page .as-bubble .as-ill { top: calc(48.7 * var(--u) - 1px); }
.as-page .as-ill--sup01 { left: calc(-115.8 * var(--u)); width: calc(56 * var(--u)); }
.as-page .as-ill--sup02 { left: calc(-118.8 * var(--u)); width: calc(62 * var(--u)); }
.as-page .as-ill--sup03 { left: calc(-132.8 * var(--u)); width: calc(74.2 * var(--u)); top: calc(49.7 * var(--u) - 1px); }

.as-page .as-bubble__head {
  width: calc(358 * var(--u));
  flex: 0 0 auto;
  text-align: center;
}
.as-page .as-bubble__sub { height: calc(12.5 * var(--u)); }
.as-page .as-bubble__sub img { width: auto; height: 100%; margin-inline: auto; }
.as-page .as-bubble__ttl { margin: calc(14.3 * var(--u)) auto 0; line-height: 0; }
.as-bubble--01 .as-bubble__ttl { width: calc(204 * var(--u)); }
.as-bubble--02 .as-bubble__ttl { width: calc(243 * var(--u)); }
.as-bubble--03 .as-bubble__ttl { width: calc(272.2 * var(--u)); }
.as-page .as-bubble__ttl .as-ttl__img { display: block; width: 100%; height: auto; }
.as-page .as-bubble__txt {
  margin-left: calc(-9 * var(--u));   /* 本文の左 x651 */
  font-size: calc(15 * var(--u));
  line-height: calc(26 * var(--u));
  letter-spacing: .04em;
}

.as-page .as-support__note {
  position: absolute;
  left: calc(90 * var(--u));
  right: 0;
  top: calc(886 * var(--u));
  text-align: center;
  font-size: calc(12 * var(--u));
  line-height: calc(18 * var(--u));
  letter-spacing: .04em;
}

/* ============================== OUR AFTER SCHOOLS ============================== */
.as-schools { height: calc(889.3 * var(--u)); scroll-margin-top: 100px; }

.as-page .as-schools__label { position: absolute; left: calc(2 * var(--u)); top: calc(94 * var(--u)); width: calc(250.5 * var(--u)); }
.as-page .as-schools__ttl   { position: absolute; left: calc(3.5 * var(--u)); top: calc(153.5 * var(--u)); width: calc(361.2 * var(--u)); }
.as-page .as-schools__lead {
  position: absolute;
  left: calc(424 * var(--u));
  top: calc(204 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(32 * var(--u));
}

.as-page .as-schools__cards {
  position: absolute;
  left: 0;
  top: calc(359.1 * var(--u));
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(24.9 * var(--u));
}
/* 326.7 x 385.8 / 角丸10 / 白 */
.as-page .as-scard {
  position: relative;
  width: 100%;
  min-width: 0;
  height: calc(385.8 * var(--u));
  padding-top: calc(55.1 * var(--u));
  border-radius: 10px;
  background: #fff;
  transition: transform .25s, box-shadow .25s;
}
.as-page .as-scard:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(62, 58, 57, .12); }
.as-page .as-scard__logo { margin-inline: auto; }
.as-scard--lab     .as-scard__logo { width: calc(211 * var(--u)); }
.as-scard--central .as-scard__logo { width: calc(257.5 * var(--u)); }
.as-scard--quest   .as-scard__logo { width: calc(191 * var(--u)); }

/* 点線（1pxの丸点 / 5px間隔）y4944 / 左右 33 内側 */
.as-page .as-scard__foot {
  position: absolute;
  left: calc(33 * var(--u));
  right: calc(33 * var(--u));
  top: calc(263.9 * var(--u));
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--u));
  padding-bottom: calc(16 * var(--u));
  background: radial-gradient(circle, #3e3a39 .5px, transparent .8px) 0 0 / 5px 1px repeat-x;
}
.as-page .as-scard__more {
  font-size: calc(16 * var(--u));
  line-height: 1;
  letter-spacing: .06em;
}

/* 矢印ボタン（黒ピル＋白矢印）85 x 34。リンクはカード全体に広げる */
.as-page .as-arrowbtn,
.as-page .as-arrowbtn .wp-block-button,
.as-contact .as-arrowbtn,
.as-contact .as-arrowbtn .wp-block-button { position: static; display: block; margin: 0; padding: 0; }
.as-page .as-arrowbtn,
.as-contact .as-arrowbtn { width: calc(85 * var(--u, 1px)); flex: 0 0 auto; }
.as-arrowbtn .wp-block-button__link {
  position: static;
  display: block;
  width: 100%;
  aspect-ratio: 85 / 34;
  padding: 0;
  border: 0;
  border-radius: 999px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: #3e3a39 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'><path d='M.35 3H23M20.4 .15L23.6 3l-3.2 2.85' fill='none' stroke='%23fff' stroke-width='.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 26% auto no-repeat;
  transition: background-size .25s;
}
.as-arrowbtn .wp-block-button__link:hover { opacity: 1 !important; }
.as-arrowbtn .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.as-scard:hover .as-arrowbtn .wp-block-button__link,
.as-contact:hover .as-arrowbtn .wp-block-button__link { background-size: 32% auto; }

/* ---- CONTACT（ブログパーツ #68 のピル内に入れる。既定は非表示）----
   #68 はサイト共通の「フッター直前」。このページだけ
   登録ピルの中身（.swell-block-columns）と discover-me のカバーを隠し、.as-contact を出す */
.f-before-cta-wp .as-contact { display: none; }
#body_wrap:has(.as-page) .f-before-cta-wp .as-contact { display: block; }
#body_wrap:has(.as-page) .f-before-cta-wp .swell-block-columns { display: none; }
#body_wrap:has(.as-page) .p-blogParts[data-partsid="68"] > .wp-block-cover,
#body_wrap:has(.as-page) .p-blogParts[data-partsid="68"] > .wp-block-spacer { display: none; }

/* ピル 925 x 263 の上端 = SCHOOLS の下端(5210)、水色の開始はピル上端+126
   既存は .swell-block-fullWide__inner 基準の absolute（top:-249.9 / translate(-50%,-50%)） */
#body_wrap:has(.as-page) .p-blogParts[data-partsid="68"] > .f-before-wp { margin-top: 126px !important; }
#body_wrap:has(.as-page) .f-before-cta-wp {
  top: -350px;                       /* fw の padding-top 224 + 126 */
  transform: translateX(-50%);
  padding: 33.7px 40px 27.3px !important;
}
/* ベージュをピルの裏（水色の開始まで）延ばす */
#body_wrap:has(.as-page) .as-schools::before { bottom: -126px; }

.as-contact { text-align: center; color: #3e3a39; }
.post_content .as-contact :is(h2, p, figure) { margin: 0; padding: 0; background: none; border: 0; color: inherit; }
.post_content .as-contact h2::before,
.post_content .as-contact h2::after { content: none; }
.post_content .as-contact .as-contact__label { width: 108.5px; margin-inline: auto; }
.as-contact .as-contact__label img { display: block; width: 100%; height: auto; }
.post_content .as-contact .as-contact__ttl {
  width: 611.8px;
  max-width: 100%;
  margin: 29.4px auto 0;
  line-height: 0;
}
.post_content .as-contact .as-contact__ttl .as-ttl__img { display: block; width: 100%; height: auto; }
.post_content .as-contact .as-contact__txt {
  margin-top: 9.8px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: .05em;
}
.post_content .as-contact .as-contact__btn { margin: 22px auto 0; }

/* ============================================================
   アフタースクール SP（〜959px）
   デザインが無いので実装判断（2026-09-23 了承済み）。
   --s = コンテンツ幅345基準（375px端末）。MVだけ絶対配置、以降は縦積み
   ============================================================ */
@media (max-width: 959px) {
  .as-page { --s: calc(100cqw / 345); }

  /* セクションの padding は .as-page を前置（リセットの :is(.wp-block-group) (0,2,0) に負けるため）
     絶対配置を解除して縦に流す（キャラと写真は除く） */
  .as-page :is(.as-about__label, .as-about__ttl, .as-about__lead, .as-about__txt, .as-about__play,
               .as-about__quote, .as-value__label, .as-value__ttl, .as-value__cards,
               .as-time__label, .as-time__ttl, .as-time__txt, .as-time__card,
               .as-support__label, .as-support__ttl, .as-support__lead, .as-support__list,
               .as-support__note, .as-schools__label, .as-schools__ttl, .as-schools__lead,
               .as-schools__cards) {
    position: relative;
    inset: auto;
    width: auto;
    white-space: normal;
  }
  .as-about, .as-value, .as-time, .as-support, .as-schools { height: auto; }

  /* 見出しSVGの幅：PCの見出し文字サイズ → SPの想定サイズの比で縮める
     about/time/schools 48→27（×.5625）/ value 34→22 / support 30→22 */
  .as-page .as-about__ttl   { width: calc(255.4 * var(--s)); }
  .as-page .as-time__ttl    { width: calc(233.2 * var(--s)); }
  .as-page .as-schools__ttl { width: calc(203.2 * var(--s)); }
  .as-page .as-value__ttl   { width: calc(304.2 * var(--s)); margin-inline: auto; }
  .as-page .as-support__ttl { width: calc(168.5 * var(--s)); margin-inline: auto; }
  .as-page .as-label img { width: auto; height: calc(11 * var(--s)); }

  /* ---------- MV（高さ固定・絶対配置）---------- */
  .as-mv { height: calc(800 * var(--s)); }   /* ボタンの影とABOUTの間に余白（760→790） */
  .as-mv::before { top: -100px; }
  /* 並び：ラベル → キャッチ → リード → ボタン → 写真3枚（2026-09-23 写真が先頭だったのを変更。上の余白 24→40） */
  .as-page .as-mv__label { left: 0; top: calc(40 * var(--s)); width: calc(200 * var(--s)); }
  .as-page .as-mv__ttl { left: calc(2.7 * var(--s)); top: calc(72 * var(--s)); width: calc(262.8 * var(--s)); }   /* PC×46/84.4 */
  /* PCのキャラ位置を見出しの縮尺(46/84.4)で写す（見出しとの相対位置は据え置き） */
  .as-page .as-ill--mv1 { left: calc(72.8 * var(--s));  top: calc(58.3 * var(--s));  width: calc(16 * var(--s)); }
  .as-page .as-ill--mv2 { left: calc(204.3 * var(--s)); top: calc(124.6 * var(--s)); width: calc(13 * var(--s)); }
  .as-page .as-ill--mv3 { left: calc(52 * var(--s));    top: calc(193.5 * var(--s)); width: calc(15 * var(--s)); }

  .as-page .as-mv__photo--01 { left: calc(160 * var(--s)); top: calc(452 * var(--s)); width: calc(150 * var(--s)); }
  .as-page .as-mv__photo--02 { left: calc(4 * var(--s));   top: calc(554 * var(--s)); width: calc(150 * var(--s)); }
  .as-page .as-mv__photo--03 { left: calc(200 * var(--s)); top: calc(632 * var(--s)); width: calc(156 * var(--s)); }

  .as-page .as-mv__lead {
    top: calc(260 * var(--s));
    left: 0;
    font-size: calc(13.5 * var(--s));
    line-height: calc(24 * var(--s));
    letter-spacing: .05em;           /* SPは従来どおり */
  }
  .as-page .as-mv__btn { left: 0; top: calc(354 * var(--s)); width: calc(338 * var(--s)); }   /* リード文の直後 */
  .as-page .as-mv__btn .as-mv__btnimg { width: calc(238.5 * var(--s)); left: 0; }   /* ボタン幅比 338/424 */
  .as-page .as-mv__btn .wp-block-button__link {
    height: calc(58 * var(--s));
    font-size: calc(16 * var(--s));
    box-shadow: 6px 6px 0 rgba(62, 58, 57, .6);
  }
  .as-page .as-mv__scroll,
  .as-page .as-mv__scrolltxt { display: none; }

  /* ---------- ABOUT ---------- */
  .as-page .as-about { padding: calc(72 * var(--s)) 0 calc(76 * var(--s)); }
  .as-page .as-about__ttl { margin-top: calc(18 * var(--s)); }
  .as-page .as-ill--about { left: auto; right: 0; top: calc(92 * var(--s)); width: calc(70 * var(--s)); }
  /* テーマの .post_content div > :first-child { margin-top:0 !important }(0,2,1) に勝つには
     !important だけでは足りず、詳細度も上げる必要がある（.post_content を前置 → (0,3,0)） */
  .post_content .as-page .as-about__lead { margin-top: calc(32 * var(--s)) !important; }
  .as-page .as-about__lead {
    font-size: calc(16 * var(--s));
    line-height: calc(28 * var(--s));
  }
  .as-page .as-about__txt {
    margin-top: calc(20 * var(--s));
    font-size: calc(14 * var(--s));
    line-height: calc(28 * var(--s));
    letter-spacing: .04em;
  }
  .as-page .as-ill--abc { left: auto; right: calc(30 * var(--s)); top: auto; bottom: calc(160 * var(--s)); width: calc(44 * var(--s)); }   /* 本文とPLAY/LEARNの間の空きに置く（重なっていた） */
  .as-page .as-about__play { margin-top: calc(96 * var(--s)); margin-inline: auto; width: calc(300 * var(--s)); }   /* 中央揃え */
  .as-page .as-about__quote { margin-top: calc(22 * var(--s)); width: 100%; }

  /* ---------- VALUE ---------- */
  .as-page .as-value { padding: calc(72 * var(--s)) 0 calc(80 * var(--s)); text-align: center; }
  .as-page .as-value__label img { margin-inline: auto; height: calc(10 * var(--s)); }
  .as-page .as-value__ttl { margin-top: calc(14 * var(--s)); }
  .as-page .as-ill--value { left: auto; right: calc(4 * var(--s)); top: calc(20 * var(--s)); width: calc(46 * var(--s)); }
  .as-page .as-value__cards {
    margin-top: calc(66 * var(--s));
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(62 * var(--s));
    text-align: left;
  }
  .as-page .as-vcard {
    height: auto;
    padding: calc(56 * var(--s)) calc(24 * var(--s)) calc(32 * var(--s));
    border-width: 5px;
  }
  .as-page .as-vcard__num { left: 50% !important; transform: translateX(-50%); width: calc(60 * var(--s)) !important; top: calc(-36 * var(--s)) !important; }
  .as-page .as-vcard--03 .as-vcard__num { width: calc(80 * var(--s)) !important; top: calc(-30 * var(--s)) !important; }
  .as-page .as-vcard__sub { height: calc(10 * var(--s)); }
  /* カード名 27→21（×.778） */
  .as-page .as-vcard__ttl { margin: calc(16 * var(--s)) 0 0; }
  .as-vcard--01 .as-vcard__ttl { width: calc(170.4 * var(--s)); }
  .as-vcard--02 .as-vcard__ttl { width: calc(131.1 * var(--s)); }
  .as-vcard--03 .as-vcard__ttl { width: calc(165.5 * var(--s)); }
  .as-page .as-vcard__txt { margin-top: calc(12 * var(--s)); }
  .as-page .as-vcard__txt { margin-top: calc(8 * var(--s)); font-size: calc(14 * var(--s)); line-height: calc(26 * var(--s)); }

  /* ---------- AFTER SCHOOL TIME ---------- */
  .as-page .as-time { padding: calc(72 * var(--s)) 0 calc(80 * var(--s)); }
  .as-page .as-time__ttl { margin-top: calc(18 * var(--s)); }
  .as-page .as-time__txt {
    margin-top: calc(24 * var(--s));
    font-size: calc(14 * var(--s));
    line-height: calc(26 * var(--s));
  }
  .as-page .as-time__txt br { display: none; }
  .as-page .as-ill--time { left: auto; right: calc(8 * var(--s)); top: calc(96 * var(--s)); width: calc(52 * var(--s)); }
  .as-page .as-time__card {
    margin-top: calc(40 * var(--s));
    height: auto;
    padding: calc(32 * var(--s)) calc(12 * var(--s)) calc(28 * var(--s));
  }
  .as-page .as-step { height: auto; }
  .as-page .as-step:not(:last-child) { padding-bottom: calc(52 * var(--s)); }
  .as-page .as-step:not(:last-child)::after { top: auto; bottom: calc(12 * var(--s)); width: 8px; height: 28px; }
  .as-page .as-step__txt { margin-top: calc(8 * var(--s)); font-size: calc(13.5 * var(--s)); line-height: calc(22 * var(--s)); }
  /* ステップ 35→28（×.8）。SPは中央寄せ */
  .as-page .as-step__ttl { margin-inline: auto; }
  .as-page .as-step:nth-child(1) .as-step__ttl { width: calc(154.4 * var(--s)); }
  .as-page .as-step:nth-child(2) .as-step__ttl { width: calc(128.4 * var(--s)); }
  .as-page .as-step:nth-child(3) .as-step__ttl { width: calc(154.2 * var(--s)); }
  .as-page .as-step:nth-child(4) .as-step__ttl { width: calc(153.2 * var(--s)); }

  /* ---------- SUPPORT ---------- */
  .as-page .as-support { padding: calc(72 * var(--s)) 0 calc(72 * var(--s)); text-align: center; }
  .as-page .as-support__label img { margin-inline: auto; height: calc(13 * var(--s)); }
  .as-page .as-support__ttl { margin-top: calc(16 * var(--s)); }
  .as-page .as-support__lead {
    margin-top: calc(16 * var(--s));
    font-size: calc(13.5 * var(--s));
    line-height: calc(24 * var(--s));
    text-align: left;
  }
  .as-page .as-support__lead br { display: none; }
  .as-page .as-support__list {
    margin-top: calc(110 * var(--s));
    row-gap: calc(124 * var(--s));
  }
  /* 吹き出しは縦組み。しっぽは上向きにしてキャラ（左上）へ向ける */
  .as-page .as-bubble {
    flex-direction: column;
    height: auto;
    padding: calc(26 * var(--s)) calc(18 * var(--s)) calc(24 * var(--s));
    border-radius: calc(24 * var(--s));
  }
  /* SPのしっぽは上向き（キャラの足元を指す）。PCと同じく1本線のSVG */
  .as-page .as-bubble::before {
    top: calc(-.5px - 24 * var(--s));
    left: calc(28 * var(--s));   /* 先端をキャラの中心（x42）に */
    width: calc(28 * var(--s));
    height: calc(26 * var(--s));
    transform: none;
  }
  .as-page .as-bubble--02::before { left: auto; right: calc(28 * var(--s)); }   /* PICK UP は右側：右から42＝キャラの中心 */
  .as-page .as-bubble--01::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26' preserveAspectRatio='none'><path d='M0 24L14 .6 28 24v2H0z' fill='%2398d1c4'/><path d='M0 24L14 .6 28 24' fill='none' stroke='%233e3a39' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>"); }
  .as-page .as-bubble--02::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26' preserveAspectRatio='none'><path d='M0 24L14 .6 28 24v2H0z' fill='%23c9db55'/><path d='M0 24L14 .6 28 24' fill='none' stroke='%233e3a39' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>"); }
  .as-page .as-bubble--03::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26' preserveAspectRatio='none'><path d='M0 24L14 .6 28 24v2H0z' fill='%23f3b1b9'/><path d='M0 24L14 .6 28 24' fill='none' stroke='%233e3a39' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>"); }
  /* [2026-09-23 しっぽをSVG化（線が太く見えたため）に伴い不要化 / 復元する場合はこのコメントを外す]
  .as-page .as-bubble::before,
  .as-page .as-bubble::after {
    top: auto;
    right: auto;
    left: calc(34 * var(--s));   (* キャラの足元を指す *)
    width: calc(28 * var(--s));
    height: calc(24 * var(--s));
    transform: none;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .as-page .as-bubble::before { bottom: 100%; }
  .as-page .as-bubble::after  { bottom: calc(100% - 2px); clip-path: polygon(50% 2.4px, calc(100% - 1.3px) 100%, 1.3px 100%); } */
  /* キャラは吹き出しの上に離して置く（足元が吹き出し上端の29上＝しっぽの先の5上）。以前は足が枠にかぶっていた */
  .as-page .as-bubble .as-ill { top: calc(-99 * var(--s)); left: calc(20 * var(--s)); width: calc(44 * var(--s)); }
  .as-page .as-bubble .as-ill--sup02 { top: calc(-92 * var(--s)); }
  /* PICK UP だけキャラとしっぽを右側に（左右交互にして単調にならないように・2026-09-23） */
  .as-page .as-bubble--02 .as-ill { left: auto; right: calc(20 * var(--s)); }
  .as-page .as-ill--sup03 { width: calc(56 * var(--s)) !important; top: calc(-87 * var(--s)) !important; }
  .as-page .as-bubble__head { width: auto; }
  .as-page .as-bubble__sub { height: calc(11 * var(--s)); }
  /* 吹き出し見出し 32→22（×.6875） */
  .as-page .as-bubble__ttl { margin-top: calc(10 * var(--s)); }
  .as-bubble--01 .as-bubble__ttl { width: calc(140.3 * var(--s)); }
  .as-bubble--02 .as-bubble__ttl { width: calc(167.1 * var(--s)); }
  .as-bubble--03 .as-bubble__ttl { width: calc(187.1 * var(--s)); }
  .as-page .as-bubble__txt {
    margin: calc(10 * var(--s)) 0 0;
    font-size: calc(13.5 * var(--s));
    line-height: calc(24 * var(--s));
    text-align: left;
  }
  .as-page .as-bubble__txt br { display: none; }
  /* 吹き出し内のリード文はSPでセンター揃え（2026-09-26）。文節で改行し（auto-phrase・Chrome/Edge）、行の長さをそろえる */
  .as-page .as-bubble__txt { text-align: center; word-break: auto-phrase; text-wrap: balance; }
  .as-page .as-support__note {
    margin-top: calc(28 * var(--s));
    font-size: calc(11 * var(--s));
    line-height: calc(19 * var(--s));
    text-align: left;
  }

  /* ---------- OUR AFTER SCHOOLS ---------- */
  .as-page .as-schools { padding: calc(72 * var(--s)) 0 calc(150 * var(--s)); }
  .as-page .as-schools__ttl { margin-top: calc(18 * var(--s)); }
  .as-page .as-schools__lead {
    margin-top: calc(16 * var(--s));
    font-size: calc(14 * var(--s));
    line-height: calc(26 * var(--s));
  }
  .as-page .as-schools__cards {
    margin-top: calc(32 * var(--s));
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(24 * var(--s));
  }
  .as-page .as-scard { height: auto; padding: calc(36 * var(--s)) 0 0; }
  .as-scard--lab     .as-scard__logo { width: calc(200 * var(--s)); }
  .as-scard--central .as-scard__logo { width: calc(240 * var(--s)); }
  .as-scard--quest   .as-scard__logo { width: calc(180 * var(--s)); }
  .as-page .as-scard__foot {
    position: relative;
    inset: auto;
    margin: calc(28 * var(--s)) calc(24 * var(--s)) 0;
    height: calc(74 * var(--s));
    padding-bottom: 0;
  }
  .as-page .as-scard__more { font-size: calc(14 * var(--s)); }
  .as-page .as-arrowbtn { width: calc(80 * var(--s)); }

  /* ---------- CONTACT（ブログパーツ内）----------
     既存SPは fw の padding-top 20em + ピル absolute。このページは流しにして
     ピルを上へ食い込ませ、ベージュ／水色の境目にまたがらせる */
  #body_wrap:has(.as-page) .p-blogParts[data-partsid="68"] > .f-before-wp {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #body_wrap:has(.as-page) .f-before-cta-wp {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    top: -110px;                 /* margin-top は :first-child の !important で消されるので top でずらす */
    margin: 0 0 -62px;
    padding: 32px 22px 30px !important;
    border-radius: 40px;
  }
  #body_wrap:has(.as-page) .as-schools::before { bottom: 0; }
  .post_content .as-contact .as-contact__label { width: 86px; }
  .post_content .as-contact .as-contact__ttl { width: 100%; margin-top: 18px; }   /* 1行のSVGを幅いっぱいに（約17.5px相当） */
  .post_content .as-contact .as-contact__txt { margin-top: 8px; font-size: 13px; line-height: 22px; text-align: left; }
  .post_content .as-contact .as-contact__txt br { display: none; }
  .post_content .as-contact .as-contact__btn { margin-top: 16px; }
}

/* ---- 本文の字間をデザインに合わせる（PCのみ・2026-09-23）----
   デザイン（ヒラギノ角ゴ W3/W6）の各行の幅を実測し、同じ文言の幅が合う字間を要素ごとに算出。
   調整前は1行あたり平均18px狭かった → 平均4px（残差はフォントの字幅差。Windows=Noto Sans JP）。
   自動改行に任せていた ABOUT本文・VALUEカード本文は本文側に <br class="pc_only"> を入れて
   デザインと同じ位置で改行させ、枠はフォント差で折り返さないよう少し広げている */
@media (min-width: 960px) {
  .as-page .as-mv__lead      { letter-spacing: .12em; }
  .as-page .as-about__lead   { letter-spacing: .11em; }
  .as-page .as-about__txt    { letter-spacing: .11em; width: calc(480 * var(--u)); }   /* 462 → 480 */
  .as-page .as-vcard__txt    { letter-spacing: .07em; }   /* 左右の余白を揃えたうえで最長行 257.6（本文幅264）。.10 は右余白8にしないと入らなかった */
  .as-page .as-time__txt     { letter-spacing: .11em; }
  .as-page .as-step__txt     { letter-spacing: .11em; }
  .as-page .as-support__lead { letter-spacing: .11em; }
  .as-page .as-bubble__txt   { letter-spacing: .08em; }   /* .11 だと最長行の右余白が23px（デザイン35px）→ .08 で33px */
  .as-page .as-support__note { letter-spacing: .10em; }
  .as-page .as-schools__lead { letter-spacing: .12em; }
  .as-page .as-scard__more   { letter-spacing: .09em; }
  .post_content .as-contact .as-contact__txt { letter-spacing: .10em; }
}

/* ---- タブレット（600〜959px）・極小SP の補正（2026-09-23 レスポンシブ確認）----
   SP のレイアウトは --s（= 100cqw / 345）で画面幅に比例して拡大するため、
   768px で本文 22〜33px、900px で 26〜38px まで大きくなっていた。
   タブレットは中身を最大幅 420px の列にして中央寄せ（背景は ::before の 100vw なので全幅のまま）
   → 拡大率の上限 ≒1.22 倍（本文 16〜19.5px）。CONTACT ピルも同じ幅で中央に。
   320px 幅では注記が 9.4px になるので 10px を下限にする */
@media (min-width: 600px) and (max-width: 959px) {
  .post_content > .as-page { max-width: 420px; margin-inline: auto; }
  #body_wrap:has(.as-page) .f-before-cta-wp { max-width: 420px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 959px) {
  .as-page .as-support__note { font-size: max(calc(11 * var(--s)), 10px); }
}

/* ---- フェードイン（2026-09-23）----
   判定は既存の myscript.js initFadeInUp()：.fade-in-up-offset を IntersectionObserver で監視し、
   画面下端から50px入ったら .effect-scroll を付ける（一度出したら戻さない / IO が無ければ即表示）。
   見た目はこのページ専用の .as-fade。既存の .fade-in-up は transform と transition:all を使うため、
   位置決め・ホバー・浮遊アニメに transform を多用しているこのページとは干渉する →
   独立プロパティの translate で動かす（transform とは別に合成される）。
   付与対象は mk_as.py の FADE_TARGETS（MV はファーストビューなので付けない） */
.as-fade {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .9s ease, translate .9s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--as-d, 0s);
}
.as-fade.effect-scroll { opacity: 1; translate: 0 0; }
/* 教室カードはホバーの transform / box-shadow の transition も残す */
.as-page .as-scard.as-fade {
  transition: opacity .9s ease var(--as-d, 0s),
              translate .9s cubic-bezier(.22, .61, .36, 1) var(--as-d, 0s),
              transform .25s, box-shadow .25s;
}
/* キャラは少し遅れて小さく、見出しはラベルの直後に。カードは左から順に */
.as-ill.as-fade { translate: 0 14px; --as-d: .25s; }
.as-ttl.as-fade { --as-d: .08s; }
.as-vcard--02.as-fade, .as-scard--central.as-fade { --as-d: .15s; }
.as-vcard--03.as-fade, .as-scard--quest.as-fade   { --as-d: .3s; }
/* 編集画面では常に表示（style_both.css は編集画面でも読まれる） */
.editor-styles-wrapper .as-fade { opacity: 1; translate: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .as-fade { opacity: 1; translate: none; transition: none; }
}

/* ---- 編集画面（ブロックエディタ）を見やすく（2026-09-23）----
   style_both.css は編集画面でも読まれるが、エディタは各ブロックに position:relative を強制し
   （HANDOVER 5-3）、SWELL の編集画面用見出しスタイル（背景色・上余白128px 等）も掛かるため、
   絶対配置のレイアウトが崩れて重なり、選択もしづらかった。
   編集画面では絶対配置をやめて上から順に並べる（背景色・カードの見た目は残す）。
   .editor-styles-wrapper / .block-editor-block-list__block は編集画面にしか無いのでフロントには影響しない */
.editor-styles-wrapper .as-page .block-editor-block-list__block {
  position: relative !important;
  inset: auto !important;
  transform: none;
  translate: none;
}
.editor-styles-wrapper .as-page :is(.as-mv, .as-about, .as-value, .as-time, .as-support, .as-schools) {
  height: auto !important;
  padding: 56px 0 !important;
}
.editor-styles-wrapper .as-page :is(.as-mv, .as-about, .as-value, .as-time, .as-support, .as-schools,
  .as-about__head, .as-about__body, .as-value__head, .as-time__head, .as-schools__head) {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.editor-styles-wrapper .as-page :is(.as-about__head, .as-about__body, .as-value__head, .as-time__head,
  .as-schools__head, .as-value__cards, .as-support__list, .as-schools__cards, .as-time__card) {
  width: 100% !important;
  margin: 0 !important;
}
.editor-styles-wrapper .as-page :is(.as-vcard, .as-scard, .as-time__card, .as-bubble, .as-step) { height: auto !important; }
.editor-styles-wrapper .as-page :is(.as-vcard, .as-scard) { display: flex !important; flex-direction: column; gap: 12px; }
.editor-styles-wrapper .as-page .as-vcard { padding-bottom: 24px !important; }
.editor-styles-wrapper .as-page .as-scard { align-items: center; padding-bottom: 24px !important; }
.editor-styles-wrapper .as-page .as-time__card { max-width: 437px; padding-bottom: 32px !important; }
/* SWELL の見出しスタイルを打ち消す */
.editor-styles-wrapper .as-page :is(h1, h2, h3) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.editor-styles-wrapper .as-page :is(h1, h2, h3)::before,
.editor-styles-wrapper .as-page :is(h1, h2, h3)::after { content: none !important; }
/* 吹き出し：キャラ・見出し・本文を横に並べる。キャラは吹き出しと同色なので白丸を敷く */
.editor-styles-wrapper .as-page .as-bubble { padding: 18px 28px 18px 20px !important; gap: 24px; align-items: center; }
.editor-styles-wrapper .as-page .as-bubble::before { display: none; }
.editor-styles-wrapper .as-page .as-bubble .as-ill { flex: 0 0 auto; background: #fff; border-radius: 50%; padding: 8px; box-sizing: content-box; }
.editor-styles-wrapper .as-page .as-bubble__head { display: flex !important; flex-direction: column; align-items: center; gap: 8px; }
/* キャラの浮遊アニメは止める */
.editor-styles-wrapper .as-page .as-ill img { animation: none; }

/* ============================================================
   フッター直前ナビ（ブログパーツ #68 の .f-before-links）2026-09-23
   ※ 全ページ共通（アフタースクール専用の節とは別）
   デザイン Ds_web_top_2026_AS: 白ピル 1029 x 76 / 7項目 15px / 項目間 約43（均等・中央）
     TOP / コンセプト / コース紹介 / アフタースクール / フリースクール / お知らせ / コンタクト
   元のCSS（style_both 原本）: PC 幅650・padding 30px 70px !important・space-between / SP 2列 47%・padding 18vw
   ・PC: 幅をコンテンツ幅いっぱいにして中央揃え。間隔はサイトフォントの字幅に合わせて 48（デザインの並び幅873に近づける）
   ・SP: 項目が長くなり（アフタースクール等）折り返していたため、余白を詰めて折り返し禁止・2列とも左揃え
     （SWELL の .-flex に横 gap 11.4px があるので 50% ではなく calc(50% - 6px)）
   ============================================================ */
@media (min-width: 960px) {
  .f-before-wp .f-before-links {
    width: 100%;
    max-width: 1030px;
    min-height: 76px;
    box-sizing: border-box;
    justify-content: center;
    column-gap: min(48px, 3.2vw);   /* 960px 付近で2行にならないよう画面幅に合わせて詰める */
    row-gap: 8px;
    flex-wrap: wrap;
    padding: 0 40px !important;
  }
  .f-before-wp .f-before-links .swell-block-linkList__link {
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .15em;
  }
}
@media (max-width: 959px) {
  .f-before-wp .f-before-links { padding: 24px 9vw !important; row-gap: .9em; }
  .f-before-wp .f-before-links li { flex: 0 0 calc(50% - 6px); }
  .f-before-wp .f-before-links .swell-block-linkList__link { white-space: nowrap; }
  .f-before-wp .f-before-links li:nth-child(2n) a span { margin-left: 0; }
}

/* ============================================================
   フリースクール固定ページ（/freeschool/）2026-10-21
   デザイン: Ds_web_top_2026_AS_FS.ai（1200 x 6510 / コンテンツ x85〜1115）
   ブロック生成: _src/mk_fs.py / 素材: _src/fs_assets.py（fs-*.svg / fs-*.webp）
   ------------------------------------------------------------
   アフタースクール（.as-page）と同じ作り。
   PC（960px〜）は .fs-page をコンテナにして --u（= 100cqw / 1030）でデザイン座標を書く
   ※ 各数値のコメントは「デザイン座標 → セクション基準」
   セクション（デザインy）
     MV        126(ヘッダー下)〜1054  #f8bb27＋格子（ヘッダーの裏まで）
     ABOUT     1054〜1725  白
     SUKI      1725〜2389  #e6e6dc（黄色のピル 1604〜1839 が ABOUT との境目にまたがる）
     VALUE     2389〜3157  白
     TIME      3157〜3891  #93d0c5＋格子
     PLACES    3891〜4713  白
     INFO      4713〜5489  #e6e6dc（CONTACTピルの中心まで続く → ブログパーツ側）
   ============================================================ */

/* ページ限定は page ID ではなく「.fs-page を含むページ」で判定（開発と本番で ID が変わるため） */
#body_wrap:has(.fs-page) .c-pageTitle,
#body_wrap:has(.fs-page) .l-topTitleArea { display: none; }

/* ヘッダーは MV の黄色（格子）を透かす（PC のみ。SP は他ページと同じ白 → SP の節） */
#body_wrap:has(.fs-page) .l-header { background-color: transparent; }
#body_wrap:has(.fs-page) { background-color: #fff; }

/* ハンバーガーの塗り（2026-10-21）
   共通指定（.l-header__menuBtn .c-iconBtn）は background: transparent で、ヘッダーの地色を透かす前提。
   このページは PC でヘッダー自体を透明にしているため、ボタンも MV の黄色が透けていた。
   デザインどおり白で塗る。共通指定は変えず、このページだけに限定する（他ページの見た目は変わらない） */
#body_wrap:has(.fs-page) .l-header__menuBtn .c-iconBtn { background-color: #fff; }

.fs-page {
  --u: calc(100cqw / 1030);
  container-type: inline-size;
  position: relative;
  color: #3e3a39;
}

/* group の inner-container を透過 */
.fs-page .wp-block-group > .wp-block-group__inner-container,
.fs-page > .wp-block-group__inner-container,
.fs-contact > .wp-block-group__inner-container {
  display: contents;
}

/* テーマの .post_content h2 / p / figure (0,1,1) を打ち消す */
.post_content > .fs-page,
.fs-page :is(h1, h2, h3, p, figure, .wp-block-buttons, .wp-block-button, .wp-block-group) {
  margin: 0;
  padding: 0;
}
.fs-page :is(h1, h2, h3) {
  background: none;
  border: 0;
  font-weight: 500;
  color: inherit;
  letter-spacing: .04em;
}
.fs-page :is(h1, h2, h3)::before,
.fs-page :is(h1, h2, h3)::after { content: none; }
.fs-page p { line-height: 2; letter-spacing: .05em; }
.fs-page figure img { display: block; width: 100%; height: auto; }

/* ---- セクション共通：フルワイド背景 ---- */
.fs-mv, .fs-about, .fs-suki, .fs-value, .fs-time, .fs-places, .fs-info {
  position: relative;
  z-index: 0;
}
.fs-mv::before, .fs-about::before, .fs-suki::before, .fs-value::before,
.fs-time::before, .fs-places::before, .fs-info::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background-color: #fff;
}
.fs-mv::before   { top: -130px; background-color: #f8bb27; }   /* ヘッダーの裏まで */
.fs-suki::before { background-color: #e6e6dc; }
.fs-time::before { background-color: #93d0c5; }
.fs-info::before { background-color: #e6e6dc; }

/* 格子模様（アフタースクールと同じスウォッチ） */
.fs-mv::before, .fs-time::before, .fs-page .fs-pill {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size: 22.3px 22.3px;
}

/* ---- 絶対配置の共通（inner-container は display:contents なので子セレクタ > は使わない） ---- */
.fs-page .fs-ill,
.fs-page .fs-mv__sub,
.fs-page .fs-mv__logo,
.fs-page .fs-mv__ttl,
.fs-page .fs-mv__lead,
.fs-page .fs-mv__btn,
.fs-page .fs-mv__photo,
.fs-page .fs-mv__scrolltxt,
.fs-page .fs-about__label,
.fs-page .fs-about__ttl,
.fs-page .fs-about__lead,
.fs-page .fs-about__txt,
.fs-page .fs-pill,
.fs-page .fs-suki__ttl,
.fs-page .fs-suki__txt,
.fs-page .fs-value__label,
.fs-page .fs-value__ttl,
.fs-page .fs-value__cards,
.fs-page .fs-vcard__num,
.fs-page .fs-time__label,
.fs-page .fs-time__ttl,
.fs-page .fs-time__txt,
.fs-page .fs-time__hours,
.fs-page .fs-time__note,
.fs-page .fs-time__card,
.fs-page .fs-places__label,
.fs-page .fs-places__ttl,
.fs-page .fs-places__lead,
.fs-page .fs-places__cards,
.fs-page .fs-info__label,
.fs-page .fs-info__ttl,
.fs-page .fs-info__table { position: absolute; }

.fs-page .fs-label { display: block; }
/* 見出し（PA1ゴシック）は SVG を見出しタグ内に置く。文言は alt。幅は SVG の外接矩形（デザイン実測） */
.fs-page .fs-ttl,
.fs-page .fs-vcard__ttl { line-height: 0; }
.fs-page .fs-ttl__img { display: block; width: 100%; height: auto; }

/* 本文の黒（デザインは #000） */
.fs-page :is(.fs-about__txt, .fs-suki__txt, .fs-vcard__txt) { color: #000; }

/* ============================== キャラ（浮遊アニメ：TOP の ds-ill-float を流用） ============================== */
.fs-page .fs-ill { z-index: 2; pointer-events: none; }
.fs-page .fs-ill img {
  transform-origin: 50% 90%;
  animation: ds-ill-float var(--dsi-dur, 4.4s) ease-in-out var(--dsi-delay, 0s) infinite;
}
.fs-ill--mv1   img { --dsi-dur: 4.2s; --dsi-delay: .2s;  --dsi-y: 18%; --dsi-r: 4deg; }
.fs-ill--mv2   img { --dsi-dur: 3.8s; --dsi-delay: 1.1s; --dsi-y: 18%; --dsi-r: 4deg; }
.fs-ill--mv3   img { --dsi-dur: 4.6s; --dsi-delay: .6s;  --dsi-y: 18%; --dsi-r: 4deg; }
.fs-ill--drone img { --dsi-dur: 4.9s; --dsi-delay: .4s;  --dsi-y: 8%;  --dsi-r: 2deg; }
.fs-ill--suki1 img { --dsi-dur: 4.4s; --dsi-delay: 1.3s; --dsi-y: 10%; --dsi-r: 2.5deg; }
.fs-ill--suki2 img { --dsi-dur: 4.1s; --dsi-delay: .8s;  --dsi-y: 10%; --dsi-r: 3deg; }
.fs-ill--time  img { --dsi-dur: 5.2s; --dsi-delay: .1s;  --dsi-y: 8%;  --dsi-r: 3deg; }
.fs-ill--scroll img { --dsi-dur: 3.6s; --dsi-delay: .3s; --dsi-y: 22%; --dsi-r: 5deg; }
@media (prefers-reduced-motion: reduce) {
  .fs-page .fs-ill img { animation: none; }
}

/* ============================== MV ============================== */
.fs-mv { height: calc(928 * var(--u)); }                    /* 1054-126 */

.fs-page .fs-mv__sub  { left: calc(383 * var(--u));   top: calc(85 * var(--u));    width: calc(262.5 * var(--u)); }   /* x468 y211 */
.fs-page .fs-mv__logo { left: calc(207.2 * var(--u)); top: calc(130.5 * var(--u)); width: calc(614.8 * var(--u)); z-index: 1; }   /* x292.2 y256.5 */
.fs-page .fs-mv__ttl  { left: calc(302.5 * var(--u)); top: calc(307.8 * var(--u)); width: calc(424.2 * var(--u)); z-index: 1; }   /* x387.5 y433.8 */
.fs-page .fs-ill--mv1 { left: calc(399.5 * var(--u)); top: calc(286.8 * var(--u)); width: calc(29.5 * var(--u)); }
.fs-page .fs-ill--mv2 { left: calc(357.2 * var(--u)); top: calc(355.2 * var(--u)); width: calc(25.5 * var(--u)); }
.fs-page .fs-ill--mv3 { left: calc(671.8 * var(--u)); top: calc(355.5 * var(--u)); width: calc(24 * var(--u)); }

/* リード 16 / 行送り35 / 中央（y597・632・667） */
.fs-page .fs-mv__lead {
  left: 0;
  right: 0;
  top: calc(468 * var(--u));         /* 文字の上端をデザインに合わせて +6.5（2026-10-21 実測） */
  z-index: 1;
  text-align: center;
  font-size: calc(16 * var(--u));
  line-height: calc(35 * var(--u));
  letter-spacing: .1em;
}

/* ボタン 424 x 92 / 枠1px / 影 +8,+8 #3e3a39 / 角丸9（x377.5 y797.5） */
.fs-page .fs-mv__btn { left: calc(292.5 * var(--u)); top: calc(671.5 * var(--u)); width: calc(424 * var(--u)); z-index: 3; }
.fs-page .fs-mv__btn .wp-block-button { width: 100%; }
.fs-page .fs-mv__btn .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(92 * var(--u));
  padding: 0;
  border: 1px solid #3e3a39;
  border-radius: 9px;
  background-color: #93d0c5;
  box-shadow: 8px 8px 0 #3e3a39;
  transition: transform .25s, box-shadow .25s;
}
.fs-page .fs-mv__btn .wp-block-button__link:hover { transform: translate(3px, 3px); box-shadow: 5px 5px 0 #3e3a39; opacity: 1 !important; }
/* 文字は SVG（fs-txt-mvbtn.svg 244.8 x 22.5。中心はボタン中心より2右） */
.fs-page .fs-mv__btn .fs-mv__btnimg {
  display: block;
  position: relative;
  left: calc(2 * var(--u));
  width: calc(244.8 * var(--u));
  height: auto;
  margin: 0 auto;
}

/* 写真（ブロブ形の透過WebP）。02 は右端がコンテンツ外へ18はみ出す（html の overflow-x:clip で切る） */
.fs-page .fs-mv__photo--01 { left: calc(-4 * var(--u));    top: calc(181.4 * var(--u)); width: calc(225.5 * var(--u)); }   /* x81 y307.4 */
.fs-page .fs-mv__photo--02 { left: calc(807.1 * var(--u)); top: calc(264.1 * var(--u)); width: calc(241.4 * var(--u)); }   /* x892.1 y390.1 */
.fs-page .fs-mv__photo--03 { left: calc(83.4 * var(--u));  top: calc(524 * var(--u));   width: calc(254.9 * var(--u)); }   /* x168.4 y650 */

/* SCROLL：キャラ（x978.2 y840.2）と文字（x990.2 y861.8）。どちらも #fs-about へ */
.fs-page .fs-mv__scroll    { left: calc(893.2 * var(--u)); top: calc(714.2 * var(--u)); width: calc(20.5 * var(--u)); }
.fs-page .fs-mv__scrolltxt { left: calc(905.2 * var(--u)); top: calc(735.8 * var(--u)); width: calc(13 * var(--u)); z-index: 2; }
.fs-page .fs-ill--scroll { pointer-events: auto; }
.fs-page :is(.fs-mv__scroll, .fs-mv__scrolltxt) a { position: relative; display: block; }
.fs-page :is(.fs-mv__scroll, .fs-mv__scrolltxt) a:hover { opacity: 1 !important; }
.fs-page .fs-mv__scrolltxt a::before { content: ""; position: absolute; inset: -12px -18px; }
.fs-page .fs-mv__scrolltxt img { transition: transform .3s; }
.fs-page .fs-mv__scrolltxt a:hover img { transform: translateY(4px); }

/* ============================== ABOUT ============================== */
.fs-about { height: calc(671 * var(--u)); scroll-margin-top: 80px; }

.fs-page .fs-about__label { left: calc(.2 * var(--u)); top: calc(135 * var(--u));   width: calc(292 * var(--u)); }     /* x85.2 y1189 */
.fs-page .fs-about__ttl   { left: calc(4.8 * var(--u)); top: calc(199.2 * var(--u)); width: calc(297.2 * var(--u)); }   /* x89.8 y1253.2 */

/* リード ヒラギノW6 19 / 行送り37（x648 y1174） */
.fs-page .fs-about__lead {
  left: calc(563 * var(--u));
  top: calc(119 * var(--u));         /* +8 実測 */
  font-size: calc(19 * var(--u));
  line-height: calc(37 * var(--u));
  font-weight: 700;
  letter-spacing: .08em;
}
/* 本文 16 / 行送り32（x648 y1313）。デザインの折り返し位置で <br class="pc_only"> */
.fs-page .fs-about__txt {
  left: calc(563 * var(--u));
  top: calc(257 * var(--u));         /* +6 実測 */
  width: calc(480 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(32 * var(--u));
  letter-spacing: .06em;
}
.fs-page .fs-ill--drone { left: calc(279.8 * var(--u)); top: calc(468.2 * var(--u)); width: calc(88.2 * var(--u)); }   /* x364.8 y1525.2 → 3 上げる（デザインは足がピル上端ぴったり。ゆらぎの回転で隠れないよう 2026-10-21） */

/* ============================== SUKI（好き）============================== */
.fs-suki { height: calc(664 * var(--u)); }

/* 黄色のピル 760 x 235（x220 y1604）。ABOUT との境目にまたがる */
.fs-page .fs-pill {
  left: calc(135 * var(--u));
  top: calc(-121 * var(--u));
  width: calc(760 * var(--u));
  height: calc(235 * var(--u));
  border-radius: 999px;
  background-color: #f8bb27;
  z-index: 1;
}
.fs-page .fs-pill__ttl {
  position: absolute;
  left: calc(118.5 * var(--u));      /* x338.5 */
  top: calc(58.5 * var(--u));        /* y1662.5 */
  width: calc(523.8 * var(--u));
}

.fs-page .fs-suki__ttl { left: calc(371.5 * var(--u)); top: calc(188 * var(--u)); width: calc(284.8 * var(--u)); }   /* x456.5 y1913 */
.fs-page .fs-ill--suki1 { left: calc(206.8 * var(--u)); top: calc(323 * var(--u));   width: calc(64 * var(--u)); }     /* x291.8 y2048 */
.fs-page .fs-ill--suki2 { left: calc(745.5 * var(--u)); top: calc(311.8 * var(--u)); width: calc(92.8 * var(--u)); }   /* x830.5 y2036.8 */

/* 本文 16 / 行送り36 / 中央（y2163〜2271） */
.fs-page .fs-suki__txt {
  left: 0;
  right: 0;
  top: calc(434.5 * var(--u));       /* +6.5 実測 */
  text-align: center;
  font-size: calc(16 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: .08em;
}

/* ============================== VALUE ============================== */
.fs-value { height: calc(768 * var(--u)); }

.fs-page .fs-value__label { left: calc(443 * var(--u)); top: calc(94.5 * var(--u));  width: calc(143.8 * var(--u)); }   /* x528 y2483.5 */
.fs-page .fs-value__ttl   { left: calc(348 * var(--u)); top: calc(124.5 * var(--u)); width: calc(333 * var(--u)); }     /* x433 y2513.5 */

/* カード 320 x 386（線6の外形 x97〜417 / y2671〜3057）間隔23 */
.fs-page .fs-value__cards {
  left: calc(12 * var(--u));
  top: calc(282 * var(--u));
  width: calc(1006 * var(--u));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(23 * var(--u));
}
.fs-page .fs-vcard {
  position: relative;
  width: 100%;
  min-width: 0;
  height: calc(386 * var(--u));
  padding: calc(87.5 * var(--u)) calc(22 * var(--u)) 0;   /* 英字の上端 = 外形の上端+93.5 / 左 +28 */
  border: calc(6 * var(--u)) solid var(--fs-c);
  border-radius: calc(13 * var(--u));
  background: #fff;
}
.fs-vcard--01 { --fs-c: #93d0c5; }
.fs-vcard--02 { --fs-c: #c9db55; }
.fs-vcard--03 { --fs-c: #f3b1b9; }

/* 番号のブロブ（白塗り＋線）でカードの上辺を隠す。位置は border-box 基準 */
.fs-page .fs-vcard__num { z-index: 1; }
.fs-page .fs-vcard--01 .fs-vcard__num { left: calc(125.8 * var(--u)); top: calc(-38 * var(--u));   width: calc(68.5 * var(--u)); }   /* x222.8 y2633 */
.fs-page .fs-vcard--02 .fs-vcard__num { left: calc(124 * var(--u));   top: calc(-36.2 * var(--u)); width: calc(72 * var(--u)); }     /* x564 y2634.8 */
.fs-page .fs-vcard--03 .fs-vcard__num { left: calc(113.2 * var(--u)); top: calc(-29.8 * var(--u)); width: calc(93.5 * var(--u)); }   /* x896.2 y2641.2 */

.fs-page .fs-vcard__sub { height: calc(10.2 * var(--u)); }
.fs-page .fs-vcard__sub img { width: auto; height: 100%; }
.fs-page .fs-vcard__ttl { margin: calc(28.3 * var(--u)) 0 0 calc(1.2 * var(--u)); }   /* y2803 */
.fs-vcard--01 .fs-vcard__ttl { width: calc(165 * var(--u)); }
.fs-vcard--02 .fs-vcard__ttl { width: calc(189.5 * var(--u)); }
.fs-vcard--03 .fs-vcard__ttl { width: calc(246.2 * var(--u)); }
.fs-page .fs-vcard__ttl .fs-ttl__img { display: block; width: 100%; height: auto; }
/* 本文 16 / 行送り30（y2897） */
.fs-page .fs-vcard__txt {
  margin-top: calc(25 * var(--u));   /* 19 → 25：本文の上端をデザインに合わせる（2026-10-21 実測 -6） */
  font-size: calc(16 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: .06em;
}

/* ============================== FREE SCHOOL TIME ============================== */
.fs-time { height: calc(734 * var(--u)); color: #fff; }

.fs-page .fs-time__label { left: calc(2 * var(--u));   top: calc(68.8 * var(--u));  width: calc(226.2 * var(--u)); }   /* x87 y3225.8 */
.fs-page .fs-time__ttl   { left: calc(3.8 * var(--u)); top: calc(132.5 * var(--u)); width: calc(339.5 * var(--u)); }   /* x88.8 y3289.5 */
.fs-page .fs-time__txt {
  left: calc(2 * var(--u));
  top: calc(298.5 * var(--u));       /* y3458 / 行送り32（+5.5 実測） */
  font-size: calc(16 * var(--u));
  line-height: calc(32 * var(--u));
  letter-spacing: .1em;
  color: #fff;
}
/* 白ピル 254 x 73（x85 y3549）。文字 10:00–15:00 は変更の可能性があるのでテキスト（2026-10-21）。
   書体はデザインの NORTHCLIFF（Web 不可）に近い Jost 500（OFL）。woff2 は子テーマの fonts/ に置く（CSS からの相対パス）。
   数字の高さ 16.5・全体の幅 166 をデザインに合わせて 22.85 / 字間 .133em（ダッシュは – ） */
@font-face {
  font-family: "fs-jost";
  src: url("fonts/fs-jost-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
.fs-page .fs-time__hours {
  left: 0;
  top: calc(392 * var(--u));
  display: grid;
  place-items: center;
  width: calc(254 * var(--u));
  height: calc(73 * var(--u));
  padding-left: .133em;              /* 字間の右余りぶん */
  border-radius: 999px;
  background: #fff;
  color: #3e3a39;
  font-family: "fs-jost", "Noto Sans JP", "Hiragino Sans", sans-serif;
  font-size: calc(22.85 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: .133em;
  font-variant-numeric: tabular-nums;
}
/* [2026-10-21 テキスト化に伴い不要化 / 復元する場合はこのコメントを外す]
.fs-page .fs-time__hours img { width: calc(167.5 * var(--u)); } */
.fs-page .fs-time__note {
  left: 0;
  top: calc(485 * var(--u));         /* y3644（+6 実測） */
  font-size: calc(16 * var(--u));
  line-height: calc(32 * var(--u));
  letter-spacing: .1em;
  color: #fff;
}
.fs-page .fs-ill--time { left: calc(293 * var(--u)); top: calc(458.5 * var(--u)); width: calc(72.8 * var(--u)); }   /* x378 y3615.5 */

/* 白カード 437 x 630 / 角丸10（x615 y3209）。タイムライン：線 x672.6 / 丸23 / 間隔111 */
.fs-page .fs-time__card {
  left: calc(530 * var(--u));
  top: calc(52 * var(--u));
  width: calc(437 * var(--u));
  height: calc(630 * var(--u));
  padding-top: calc(69 * var(--u));
  border-radius: 10px;
  background: #fff;
  color: #3e3a39;
}
.fs-page .fs-time__card::before {
  content: "";
  position: absolute;
  left: calc(56.6 * var(--u));
  top: calc(80 * var(--u));
  width: 2px;
  height: calc(470 * var(--u));
  background: #d2d2d2;
}
.fs-page .fs-step { position: relative; height: calc(111 * var(--u)); }
.fs-page .fs-step::before {
  content: "";
  position: absolute;
  left: calc(46.1 * var(--u));
  top: 0;
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
  border-radius: 50%;
  background: #f8bb27;
  box-shadow: 0 0 0 1.5px #fff;
}
.fs-page .fs-step__ttl { position: relative; height: calc(23 * var(--u)); }
.fs-page .fs-step__time {
  position: absolute;
  left: calc(81 * var(--u));
  top: calc(4 * var(--u));           /* +6 実測 */
  font-size: calc(15 * var(--u));
  line-height: 1;
  font-weight: 400;
  letter-spacing: .1em;
}
.fs-page .fs-step__img { position: absolute; left: calc(150.2 * var(--u)); height: auto; }
.fs-page .fs-step:nth-child(1) .fs-step__img { top: calc(-2.8 * var(--u)); width: calc(91 * var(--u)); }
.fs-page .fs-step:nth-child(2) .fs-step__img { top: calc(-6.5 * var(--u)); width: calc(133.2 * var(--u)); }
.fs-page .fs-step:nth-child(3) .fs-step__img { top: calc(-5.8 * var(--u)); width: calc(150.2 * var(--u)); }
.fs-page .fs-step:nth-child(4) .fs-step__img { top: calc(-5.2 * var(--u)); width: calc(202.5 * var(--u)); }
.fs-page .fs-step:nth-child(5) .fs-step__img { top: calc(-2.8 * var(--u)); width: calc(103.5 * var(--u)); }
.fs-page .fs-step__txt {
  margin: calc(15 * var(--u)) 0 0 calc(80 * var(--u));   /* +6.5 実測 */
  font-size: calc(15 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: .08em;
}

/* ============================== PLACES ============================== */
.fs-places { height: calc(822 * var(--u)); }

.fs-page .fs-places__label { left: calc(414.8 * var(--u)); top: calc(107.5 * var(--u)); width: calc(200.5 * var(--u)); }   /* x499.8 y3998.5（2026-10-21 LEARN 修正版 _ol_2） */
.fs-page .fs-places__ttl   { left: calc(267.5 * var(--u)); top: calc(137.8 * var(--u)); width: calc(492.8 * var(--u)); }   /* x352.5 y4028.8 */
.fs-page .fs-places__lead {
  left: 0;
  right: 0;
  top: calc(195 * var(--u));         /* y4083（+9.5 実測） */
  text-align: center;
  font-size: calc(15 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: .1em;
}

/* カード 459 幅 x2（x118 / 623）写真 y4153 */
.fs-page .fs-places__cards {
  left: calc(33 * var(--u));
  top: calc(262 * var(--u));
  width: calc(964 * var(--u));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(46 * var(--u));
}
.fs-page .fs-pcard { position: relative; width: 100%; min-width: 0; }
.fs-page .fs-pcard__photo img { border-radius: calc(20 * var(--u)); }
/* 曜日タグ 101 x 30 / 白 / 写真の左上から16 */
.fs-page .fs-pcard__day {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(16 * var(--u));
  width: calc(101 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 999px;
  background: #fff;
  text-align: center;
  font-size: calc(15 * var(--u));
  line-height: calc(30 * var(--u));
  font-weight: 700;
  letter-spacing: .1em;
}
/* 教室名 W6 21＋丸20（丸の中心 y4446） */
.fs-page .fs-pcard__name {
  position: relative;
  margin-top: calc(32 * var(--u));
  padding-left: calc(33 * var(--u)) !important;
  font-size: calc(21 * var(--u));
  line-height: calc(30 * var(--u));
  font-weight: 700;
  letter-spacing: .08em;
}
.fs-page .fs-pcard__name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  background: #f8bb27;
  border: 0;
  transform: translateY(-50%);
}
.fs-page .fs-pcard--terabe .fs-pcard__name::before { background: #98d1c4; }
/* キャッチ 19 / 下線 0.5（y4523） */
.fs-page .fs-pcard__catch {
  margin-top: calc(12.5 * var(--u));                       /* +7 実測。下線の位置は据え置き */
  padding-bottom: calc(19.5 * var(--u)) !important;
  border-bottom: .5px solid #3e3a39;
  font-size: calc(19 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: .08em;
}
.fs-page .fs-pcard__info {
  margin-top: calc(16.5 * var(--u));   /* +6.5 実測 */
  font-size: calc(16 * var(--u));
  line-height: calc(31 * var(--u));
  letter-spacing: .08em;
}

/* ============================== INFORMATION ============================== */
.fs-info { height: calc(776 * var(--u)); }

.fs-page .fs-info__label { left: calc(457.8 * var(--u)); top: calc(83.5 * var(--u));  width: calc(114.5 * var(--u)); }   /* x542.8 y4796.5 */
.fs-page .fs-info__ttl   { left: calc(428.5 * var(--u)); top: calc(113.5 * var(--u)); width: calc(174 * var(--u)); }     /* x513.5 y4826.5 */

/* 表 792.5 幅（x203.8 y4916.5）/ 行97 / 罫線 0.5 #3e3a39 */
.fs-page .fs-info__table {
  left: calc(118.8 * var(--u));
  top: calc(203.5 * var(--u));
  width: calc(792.5 * var(--u));
  border-bottom: .5px solid #3e3a39;
}
.fs-page .fs-info__row {
  display: flex;
  align-items: center;
  height: calc(97 * var(--u));
  border-top: .5px solid #3e3a39;
}
.fs-page .fs-info__th {
  flex: 0 0 calc(220.2 * var(--u));
  position: relative;
  top: calc(-3 * var(--u));          /* 実測で 3 下だった */
  font-size: calc(21 * var(--u));
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
}
.fs-page .fs-info__main {
  font-size: calc(19 * var(--u));
  line-height: calc(30 * var(--u));
  font-weight: 700;
  letter-spacing: .08em;
}
.fs-page .fs-info__sub {
  font-size: calc(16 * var(--u));
  line-height: calc(25 * var(--u));
  letter-spacing: .08em;
}
.fs-page .fs-info__main + .fs-info__sub { margin-top: calc(4 * var(--u)); }

/* ---- CONTACT（ブログパーツ #68 のピル内に入れる。既定は非表示）----
   アフタースクールの .as-contact と同じ仕組み。このページだけ .fs-contact を出す */
.f-before-cta-wp .fs-contact { display: none; }
#body_wrap:has(.fs-page) .f-before-cta-wp .fs-contact { display: block; margin-bottom: 0; }
/* ↑ ブログパーツでは .fs-contact を .as-contact の「前」に置いている（2026-10-21）。
   後ろに置くと .as-contact が :last-child でなくなり、アフタースクールの SP でピルの下に余白 1em が付いたため。
   その代わり .fs-contact が最後の子でなくなるので、下余白はここで 0 にする */
#body_wrap:has(.fs-page) .f-before-cta-wp .swell-block-columns { display: none; }
#body_wrap:has(.fs-page) .p-blogParts[data-partsid="68"] > .wp-block-cover,
#body_wrap:has(.fs-page) .p-blogParts[data-partsid="68"] > .wp-block-spacer { display: none; }

/* ピル 925 x 263 の上端 = INFO の下端（5489）、水色の開始はピル上端+126 */
#body_wrap:has(.fs-page) .p-blogParts[data-partsid="68"] > .f-before-wp { margin-top: 126px !important; }
#body_wrap:has(.fs-page) .f-before-cta-wp {
  top: -350px;                       /* fw の padding-top 224 + 126 */
  transform: translateX(-50%);
  padding: 33.7px 40px 27.3px !important;
}
/* ベージュをピルの裏（水色の開始まで）延ばす */
#body_wrap:has(.fs-page) .fs-info::before { bottom: -126px; }
.fs-contact { text-align: center; color: #3e3a39; scroll-margin-top: 120px; }
.post_content .fs-contact :is(h2, p, figure) { margin: 0; padding: 0; background: none; border: 0; color: inherit; }
.post_content .fs-contact h2::before,
.post_content .fs-contact h2::after { content: none; }
.post_content .fs-contact .fs-contact__label { width: 108.2px; margin-inline: auto; }
.fs-contact .fs-contact__label img { display: block; width: 100%; height: auto; }
.post_content .fs-contact .fs-contact__ttl {
  width: 562.5px;
  max-width: 100%;
  margin: 28.7px auto 0;
  line-height: 0;
}
.post_content .fs-contact .fs-contact__ttl .fs-ttl__img { display: block; width: 100%; height: auto; }
.post_content .fs-contact .fs-contact__txt {
  margin-top: 13.3px;                /* +4 実測 */
  font-size: 16px;
  line-height: 26px;
  letter-spacing: .1em;
}
.post_content .fs-contact .fs-contact__btn { margin: 18px auto 0; }   /* 本文を 4 下げたぶん詰める */

/* 矢印ボタン（黒ピル＋白矢印）85 x 34。リンクはピル全体に広げる（.as-arrowbtn と同じ見た目） */
.fs-contact .fs-arrowbtn,
.fs-contact .fs-arrowbtn .wp-block-button { position: static; display: block; margin: 0; padding: 0; }
.fs-contact .fs-arrowbtn { width: 85px; }
.fs-arrowbtn .wp-block-button__link {
  position: static;
  display: block;
  width: 100%;
  aspect-ratio: 85 / 34;
  padding: 0;
  border: 0;
  border-radius: 999px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: #3e3a39 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'><path d='M.35 3H23M20.4 .15L23.6 3l-3.2 2.85' fill='none' stroke='%23fff' stroke-width='.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 26% auto no-repeat;
  transition: background-size .25s;
}
.fs-arrowbtn .wp-block-button__link:hover { opacity: 1 !important; }
.fs-arrowbtn .wp-block-button__link::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.fs-contact:hover .fs-arrowbtn .wp-block-button__link { background-size: 32% auto; }

/* ============================================================
   フリースクール SP（〜959px）
   デザインが無いので実装判断（アフタースクールの SP と同じ方針）。
   --s = コンテンツ幅345基準（375px端末）。MVだけ絶対配置、以降は縦積み
   ============================================================ */
@media (max-width: 959px) {
  .fs-page { --s: calc(100cqw / 345); }

  /* 絶対配置を解除して縦に流す（MV・キャラ・ピル内の見出し・カード番号は除く） */
  .fs-page :is(.fs-about__label, .fs-about__ttl, .fs-about__lead, .fs-about__txt,
               .fs-pill, .fs-suki__ttl, .fs-suki__txt,
               .fs-value__label, .fs-value__ttl, .fs-value__cards,
               .fs-time__label, .fs-time__ttl, .fs-time__txt, .fs-time__hours, .fs-time__note, .fs-time__card,
               .fs-places__label, .fs-places__ttl, .fs-places__lead, .fs-places__cards,
               .fs-info__label, .fs-info__ttl, .fs-info__table) {
    position: relative;
    inset: auto;
    width: auto;
  }
  .fs-about, .fs-suki, .fs-value, .fs-time, .fs-places, .fs-info { height: auto; }
  .fs-page .fs-label img { width: auto; height: calc(11 * var(--s)); }

  /* ヘッダーは他ページと同じ白（2026-10-21）。SP はヘッダーが上部に追従するため、
     透明のままだとスクロール時にロゴ・ボタンが本文に重なっていた */
  #body_wrap:has(.fs-page) .l-header { background-color: #fff; }

  /* ---------- MV（高さ固定・絶対配置・中央揃え）---------- */
  .fs-mv { height: calc(862 * var(--s)); }   /* 790 → 862：写真3枚を重ねずに並べるぶん（2026-10-21） */
  /* ヘッダーとの間を広げる（2026-10-21）：ヘッダー下端〜「不登校の…」27px → 約46px（375px時）。
     子は絶対配置なので padding では動かない → MV ごと margin で下げ、黄色は ::before を同じだけ上に伸ばして隙間を埋める
     （ヘッダーが白になったので、旧 -100px のようにヘッダーの裏までは伸ばさない）。
     SWELL の .post_content div > :first-child{margin-top:0!important}（0,2,1）に勝つよう (0,3,0)+!important */
  .post_content .fs-page .fs-mv { margin-top: calc(20 * var(--s)) !important; }
  .fs-mv::before { top: calc(-20 * var(--s)); }
  .fs-page .fs-mv__sub  { left: calc(62.5 * var(--s)); top: calc(28 * var(--s)); width: calc(220 * var(--s)); }
  .fs-page .fs-mv__logo { left: calc(7.5 * var(--s));  top: calc(58 * var(--s)); width: calc(330 * var(--s)); }
  /* キャッチ 424.2 → 260（×.613）。キャラは見出しとの相対位置をそのまま縮める */
  .fs-page .fs-mv__ttl  { left: calc(42.5 * var(--s)); top: calc(146 * var(--s)); width: calc(260 * var(--s)); }
  .fs-page .fs-ill--mv1 { left: calc(102 * var(--s));  top: calc(133 * var(--s)); width: calc(18 * var(--s)); }
  .fs-page .fs-ill--mv2 { left: calc(76 * var(--s));   top: calc(175 * var(--s)); width: calc(15.6 * var(--s)); }
  .fs-page .fs-ill--mv3 { left: calc(269 * var(--s));  top: calc(175 * var(--s)); width: calc(14.7 * var(--s)); }
  .fs-page .fs-mv__lead {
    top: calc(240 * var(--s));
    font-size: calc(13.5 * var(--s));
    line-height: calc(25 * var(--s));
    letter-spacing: .05em;
  }
  .fs-page .fs-mv__btn { left: calc(20 * var(--s)); top: calc(338 * var(--s)); width: calc(300 * var(--s)); }
  .fs-page .fs-mv__btn .wp-block-button__link {
    height: calc(62 * var(--s));
    box-shadow: 6px 6px 0 #3e3a39;
  }
  .fs-page .fs-mv__btn .fs-mv__btnimg { left: 0; width: calc(185 * var(--s)); }
  /* 写真：左列に 01・03、右列に 02 を互い違いに置き、3枚とも重ならないようにする（2026-10-21）
     旧：01 (-6,440,w150) / 02 (190,470,w160) / 03 (66,620,w160) → 03 が 01・02 の両方に重なって詰まって見えた
     01 は左、02 は右に少しだけ裁ち落とし（コンテンツ外 8px / 3px） */
  .fs-page .fs-mv__photo--01 { left: calc(-8 * var(--s));  top: calc(426 * var(--s)); width: calc(158 * var(--s)); }   /* 下端 643 */
  .fs-page .fs-mv__photo--02 { left: calc(180 * var(--s)); top: calc(500 * var(--s)); width: calc(168 * var(--s)); }   /* 下端 706 */
  .fs-page .fs-mv__photo--03 { left: calc(26 * var(--s));  top: calc(676 * var(--s)); width: calc(168 * var(--s)); }   /* 下端 825 */
  .fs-page .fs-mv__scroll,
  .fs-page .fs-mv__scrolltxt { display: none; }

  /* ---------- ABOUT（下にピルの上半分＋ドローンのぶん空ける）---------- */
  .fs-page .fs-about { padding: calc(72 * var(--s)) 0 calc(150 * var(--s)); }
  .fs-page .fs-about__ttl { margin-top: calc(18 * var(--s)); width: calc(167.2 * var(--s)); }   /* 48→27 */
  .post_content .fs-page .fs-about__lead { margin-top: calc(32 * var(--s)) !important; }
  .fs-page .fs-about__lead { font-size: calc(16 * var(--s)); line-height: calc(28 * var(--s)); letter-spacing: .05em; }
  .fs-page .fs-about__txt {
    margin-top: calc(20 * var(--s));
    font-size: calc(14 * var(--s));
    line-height: calc(28 * var(--s));
    letter-spacing: .04em;
  }
  .fs-page .fs-ill--drone { left: calc(40 * var(--s)); top: auto; bottom: calc(56 * var(--s)); width: calc(56 * var(--s)); }   /* 52 → 56：足をピル上端（53.3）より少し上に */

  /* ---------- SUKI ---------- */
  .fs-page .fs-suki { padding: 0 0 calc(76 * var(--s)); text-align: center; }
  /* ピルは幅いっぱい（760:235）。上半分を ABOUT に食い込ませる */
  .fs-page .fs-pill {
    top: calc(-53.3 * var(--s));
    width: 100%;
    height: auto;
    aspect-ratio: 760 / 235;
    margin-bottom: calc(-53.3 * var(--s) + 56 * var(--s));
  }
  .fs-page .fs-pill__ttl { left: 15.6%; top: 24.9%; width: 68.9%; }
  .fs-page .fs-suki__ttl { width: calc(154.3 * var(--s)); margin-inline: auto; }   /* 48→26 */
  .fs-page .fs-ill--suki1 { left: calc(14 * var(--s)); top: calc(150 * var(--s)); width: calc(40 * var(--s)); }
  .fs-page .fs-ill--suki2 { left: auto; right: calc(6 * var(--s)); top: calc(142 * var(--s)); width: calc(58 * var(--s)); }
  .fs-page .fs-suki__txt {
    margin-top: calc(26 * var(--s));
    font-size: calc(14 * var(--s));
    line-height: calc(27 * var(--s));
    letter-spacing: .04em;
    word-break: auto-phrase;
    text-wrap: balance;
  }
  .fs-page .fs-suki__txt br { display: none; }

  /* ---------- VALUE ---------- */
  .fs-page .fs-value { padding: calc(72 * var(--s)) 0 calc(80 * var(--s)); text-align: center; }
  .fs-page .fs-value__label img { margin-inline: auto; height: calc(10 * var(--s)); }
  .fs-page .fs-value__ttl { margin-top: calc(14 * var(--s)); width: calc(270 * var(--s)); margin-inline: auto; }   /* 34→27.5 */
  .fs-page .fs-value__cards {
    margin-top: calc(66 * var(--s));
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(62 * var(--s));
    text-align: left;
  }
  .fs-page .fs-vcard {
    height: auto;
    padding: calc(56 * var(--s)) calc(24 * var(--s)) calc(32 * var(--s));
    border-width: 5px;
  }
  .fs-page .fs-vcard__num { left: 50% !important; transform: translateX(-50%); width: calc(60 * var(--s)) !important; top: calc(-36 * var(--s)) !important; }
  .fs-page .fs-vcard--03 .fs-vcard__num { width: calc(80 * var(--s)) !important; top: calc(-30 * var(--s)) !important; }
  .fs-page .fs-vcard__sub { height: calc(10 * var(--s)); }
  /* カード名 27→21（×.778） */
  .fs-page .fs-vcard__ttl { margin: calc(16 * var(--s)) 0 0; }
  .fs-vcard--01 .fs-vcard__ttl { width: calc(128.4 * var(--s)); }
  .fs-vcard--02 .fs-vcard__ttl { width: calc(147.4 * var(--s)); }
  .fs-vcard--03 .fs-vcard__ttl { width: calc(191.5 * var(--s)); }
  .fs-page .fs-vcard__txt { margin-top: calc(10 * var(--s)); font-size: calc(14 * var(--s)); line-height: calc(26 * var(--s)); letter-spacing: .04em; }

  /* ---------- FREE SCHOOL TIME ---------- */
  .fs-page .fs-time { padding: calc(72 * var(--s)) 0 calc(80 * var(--s)); }
  .fs-page .fs-time__ttl { margin-top: calc(18 * var(--s)); width: calc(191 * var(--s)); }   /* 48→27 */
  .fs-page .fs-time__txt {
    margin-top: calc(24 * var(--s));
    font-size: calc(14 * var(--s));
    line-height: calc(26 * var(--s));
    letter-spacing: .05em;
  }
  .fs-page .fs-time__hours { margin-top: calc(22 * var(--s)); width: calc(200 * var(--s)); height: calc(56 * var(--s)); font-size: calc(18 * var(--s)); }   /* PC の 22.85 をピル幅比 200/254 で */
  .fs-page .fs-time__note { margin-top: calc(12 * var(--s)); font-size: calc(13.5 * var(--s)); line-height: calc(24 * var(--s)); }
  .fs-page .fs-ill--time { left: auto; right: calc(10 * var(--s)); top: calc(200 * var(--s)); width: calc(56 * var(--s)); }
  /* カードの中は --u をカード幅 400 基準に読み替えて PC と同じ座標で縮める（345px で ×.86）。
     カード幅 = コンテナ（.fs-page）幅なので 100cqw がそのまま使える */
  .fs-page .fs-time__card {
    --u: calc(100cqw / 400);
    margin-top: calc(40 * var(--s));
    height: auto;
    padding: calc(40 * var(--s)) 0 calc(24 * var(--s));
  }
  .fs-page .fs-time__card::before { top: calc(40 * var(--s) + 11 * var(--u)); }
  .fs-page .fs-step:last-child { height: auto; }

  /* ---------- PLACES ---------- */
  .fs-page .fs-places { padding: calc(72 * var(--s)) 0 calc(80 * var(--s)); text-align: center; }
  .fs-page .fs-places__label img { margin-inline: auto; height: calc(10 * var(--s)); }
  .fs-page .fs-places__ttl { margin-top: calc(14 * var(--s)); width: 100%; }   /* 34→23.8 */
  .fs-page .fs-places__lead {
    margin-top: calc(14 * var(--s));
    font-size: calc(13.5 * var(--s));
    line-height: calc(24 * var(--s));
    letter-spacing: .04em;
    word-break: auto-phrase;
    text-wrap: balance;
  }
  .fs-page .fs-places__cards {
    margin-top: calc(32 * var(--s));
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(48 * var(--s));
    text-align: left;
  }
  .fs-page .fs-pcard__photo img { border-radius: calc(16 * var(--s)); }
  .fs-page .fs-pcard__day {
    left: calc(12 * var(--s));
    top: calc(12 * var(--s));
    width: calc(86 * var(--s));
    height: calc(28 * var(--s));
    font-size: calc(13 * var(--s));
    line-height: calc(28 * var(--s));
  }
  .fs-page .fs-pcard__name {
    margin-top: calc(20 * var(--s));
    padding-left: calc(26 * var(--s)) !important;
    font-size: calc(18 * var(--s));
    line-height: calc(26 * var(--s));
  }
  .fs-page .fs-pcard__name::before { width: calc(16 * var(--s)); height: calc(16 * var(--s)); }
  .fs-page .fs-pcard__catch {
    margin-top: calc(4 * var(--s));
    padding-bottom: calc(16 * var(--s)) !important;
    font-size: calc(15 * var(--s));
    line-height: calc(26 * var(--s));
  }
  .fs-page .fs-pcard__info {
    margin-top: calc(10 * var(--s));
    font-size: calc(13.5 * var(--s));
    line-height: calc(25 * var(--s));
    letter-spacing: .04em;
  }

  /* ---------- INFORMATION（見出し列は左に細く）---------- */
  .fs-page .fs-info { padding: calc(72 * var(--s)) 0 calc(150 * var(--s)); text-align: center; }
  .fs-page .fs-info__label img { margin-inline: auto; height: calc(10 * var(--s)); }
  .fs-page .fs-info__ttl { margin-top: calc(14 * var(--s)); width: calc(122 * var(--s)); margin-inline: auto; }   /* 34→23.8 */
  .fs-page .fs-info__table { margin-top: calc(32 * var(--s)); text-align: left; }
  .fs-page .fs-info__row { height: auto; min-height: calc(76 * var(--s)); padding: calc(16 * var(--s)) 0 !important; }
  .fs-page .fs-info__th { flex-basis: calc(92 * var(--s)); font-size: calc(15 * var(--s)); }
  .fs-page .fs-info__td { flex: 1 1 auto; min-width: 0; }
  .fs-page .fs-info__main { font-size: calc(15 * var(--s)); line-height: calc(24 * var(--s)); letter-spacing: .04em; }
  .fs-page .fs-info__sub { font-size: calc(13 * var(--s)); line-height: calc(22 * var(--s)); letter-spacing: .04em; }
  /* 折り返しは文節単位（本文の <span class="fs-nw"> の切れ目だけで改行する。2026-10-21）
     word-break: auto-phrase は iOS Safari 未対応のため、本文側で区切っている */
  .fs-page .fs-info .fs-nw { display: inline-block; }

  /* ---------- CONTACT（ブログパーツ内。アフタースクールと同じ）---------- */
  #body_wrap:has(.fs-page) .p-blogParts[data-partsid="68"] > .f-before-wp {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #body_wrap:has(.fs-page) .f-before-cta-wp {
    position: relative;
    top: -110px;
    left: auto;
    transform: none;
    width: auto;
    margin: 0 0 -62px;
    padding: 32px 22px 30px !important;
    border-radius: 40px;
  }
  #body_wrap:has(.fs-page) .fs-info::before { bottom: 0; }
  .post_content .fs-contact .fs-contact__label { width: 86px; }
  .post_content .fs-contact .fs-contact__ttl { width: 100%; margin-top: 18px; }
  .post_content .fs-contact .fs-contact__txt { margin-top: 8px; font-size: 13px; line-height: 22px; letter-spacing: .04em; text-align: left; }
  .post_content .fs-contact .fs-contact__txt br { display: none; }
  .post_content .fs-contact .fs-contact__btn { margin-top: 16px; }
}

/* タブレット（600〜959px）は中身を最大幅 420px の列にして中央寄せ（アフタースクールと同じ） */
@media (min-width: 600px) and (max-width: 959px) {
  .post_content > .fs-page { max-width: 420px; margin-inline: auto; }
  #body_wrap:has(.fs-page) .f-before-cta-wp { max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* ---- フェードイン：アフタースクールの .as-fade（myscript.js initFadeInUp）をそのまま使う ----
   キャラは少し遅れて、見出しはラベルの直後に、カードは左から順に */
.fs-ill.as-fade { translate: 0 14px; --as-d: .25s; }
/* ↑ と .as-fade.effect-scroll は同じ詳細度で、後に書いた ↑ が勝って表示後も 14px 下がったままだった（2026-10-21）。表示後は 0 に戻す */
.fs-ill.as-fade.effect-scroll { translate: 0 0; }
.fs-ttl.as-fade { --as-d: .08s; }
.fs-vcard--02.as-fade, .fs-pcard--terabe.as-fade { --as-d: .15s; }
.fs-vcard--03.as-fade { --as-d: .3s; }

/* ---- 編集画面（ブロックエディタ）では絶対配置をやめて上から順に並べる（.as-page と同じ考え方） ---- */
.editor-styles-wrapper .fs-page .block-editor-block-list__block {
  position: relative !important;
  inset: auto !important;
  transform: none;
  translate: none;
}
.editor-styles-wrapper .fs-page :is(.fs-mv, .fs-about, .fs-suki, .fs-value, .fs-time, .fs-places, .fs-info) {
  height: auto !important;
  padding: 56px 0 !important;
}
.editor-styles-wrapper .fs-page :is(.fs-mv, .fs-about, .fs-suki, .fs-value, .fs-time, .fs-places, .fs-info,
  .fs-about__head, .fs-about__body, .fs-value__head, .fs-time__head, .fs-places__head, .fs-info__head) {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.editor-styles-wrapper .fs-page :is(.fs-about__head, .fs-about__body, .fs-value__head, .fs-time__head,
  .fs-places__head, .fs-info__head, .fs-value__cards, .fs-places__cards, .fs-info__table, .fs-time__card, .fs-pill) {
  width: 100% !important;
  margin: 0 !important;
}
.editor-styles-wrapper .fs-page :is(.fs-vcard, .fs-time__card, .fs-step, .fs-pill, .fs-info__row) { height: auto !important; }
.editor-styles-wrapper .fs-page .fs-vcard { display: flex !important; flex-direction: column; gap: 12px; padding-bottom: 24px !important; }
.editor-styles-wrapper .fs-page .fs-time__card { max-width: 437px; padding-bottom: 32px !important; }
.editor-styles-wrapper .fs-page .fs-pill { padding: 32px 0 !important; aspect-ratio: auto; }
.editor-styles-wrapper .fs-page .fs-mv__btn .wp-block-button__link { height: 92px; }
.editor-styles-wrapper .fs-page .fs-time__hours { width: 254px; height: 73px; font-size: 22.85px; }
.editor-styles-wrapper .fs-page :is(h1, h2, h3) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit;
}
.editor-styles-wrapper .fs-page :is(h1, h2, h3)::before,
.editor-styles-wrapper .fs-page :is(h1, h2, h3)::after { content: none !important; }
.editor-styles-wrapper .fs-page .fs-ill img { animation: none; }

/* ---- 編集画面の並びをフロントに近づける（2026-10-21）----
   上の指定は「全部を上から左寄せで縦に並べる」だけなので、キャラや写真が1行に1つずつ並び、
   見出しの位置もフロントと違って見づらかった。ブロックの順番は変えず、並べ方だけを変える。
   ※ 編集画面ではブロックの間に .block-editor-block-list__layout などの包みが入るため、子セレクタ（>）は使えない。
     包みは display:contents 相当で透過されているので、グリッドの子には各ブロックがそのまま並ぶ */
.editor-styles-wrapper .fs-page :is(.fs-mv, .fs-about, .fs-suki, .fs-value, .fs-time, .fs-places, .fs-info) { padding: 64px 0 !important; }

/* MV：中央揃え。キャラ3体・写真3枚はそれぞれ横1列（3列グリッド）、他は1行ずつ */
.editor-styles-wrapper .fs-page .fs-mv {
  display: grid !important;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 20px 32px;
  text-align: center;
}
.editor-styles-wrapper .fs-page .fs-mv .block-editor-block-list__block:not(.fs-ill--mv1, .fs-ill--mv2, .fs-ill--mv3, .fs-mv__photo) { grid-column: 1 / -1; }
.editor-styles-wrapper .fs-page .fs-mv .fs-mv__photo { align-self: start; }

/* ABOUT：フロントと同じ 左＝見出し／右＝本文 */
.editor-styles-wrapper .fs-page .fs-about { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px 60px; align-items: start; }
.editor-styles-wrapper .fs-page .fs-about .fs-ill--drone { grid-column: 1 / -1; }

/* SUKI：中央揃え。黄色のピルは横長に、キャラ2体は見出しの下に左右から */
.editor-styles-wrapper .fs-page .fs-suki {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  gap: 24px 160px;
  text-align: center;
}
.editor-styles-wrapper .fs-page .fs-suki .block-editor-block-list__block:not(.fs-ill--suki1, .fs-ill--suki2) { grid-column: 1 / -1; }
.editor-styles-wrapper .fs-page .fs-suki .fs-ill--suki1 { justify-self: end; }
.editor-styles-wrapper .fs-page .fs-suki .fs-ill--suki2 { justify-self: start; }
.editor-styles-wrapper .fs-page .fs-suki .fs-pill {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 760px !important;
  max-width: 100%;
}

/* VALUE・PLACES・INFO：見出しは中央 */
.editor-styles-wrapper .fs-page :is(.fs-value, .fs-places, .fs-info) { align-items: center !important; }
.editor-styles-wrapper .fs-page :is(.fs-value__head, .fs-places__head, .fs-info__head) { align-items: center !important; text-align: center; }
.editor-styles-wrapper .fs-page .fs-vcard { justify-content: flex-start !important; gap: 10px; padding: 28px 24px !important; }
.editor-styles-wrapper .fs-page .fs-vcard .fs-vcard__ttl { margin-bottom: 6px !important; }

/* TIME：フロントと同じ 左＝見出し＋キャラ／右＝タイムライン */
.editor-styles-wrapper .fs-page .fs-time { display: grid !important; grid-template-columns: 1fr 437px; gap: 24px 60px; align-items: start; }
.editor-styles-wrapper .fs-page .fs-time .fs-time__head { grid-column: 1; grid-row: 1; }
.editor-styles-wrapper .fs-page .fs-time .fs-ill--time { grid-column: 1; grid-row: 2; }
.editor-styles-wrapper .fs-page .fs-time .fs-time__card {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex !important;
  flex-direction: column;
  gap: 22px;
  padding-top: 36px !important;
  padding-bottom: 36px !important;
  overflow: hidden;   /* 縦線がカードの下にはみ出さないように */
}
.editor-styles-wrapper .fs-page .fs-step { display: flex !important; flex-direction: column; gap: 6px; }

/* PLACES：曜日の札（白）は写真の左下に重ねる（白地の上だと見えないため） */
.editor-styles-wrapper .fs-page .fs-pcard { display: flex !important; flex-direction: column; gap: 10px; }
.editor-styles-wrapper .fs-page .fs-pcard .fs-pcard__day { margin-top: -54px !important; margin-left: 16px !important; padding: 4px 0 !important; text-align: center; z-index: 1; }
.editor-styles-wrapper .fs-page .fs-pcard .fs-pcard__day + * { margin-top: 12px !important; }

/* INFO：表は中央に 760px */
.editor-styles-wrapper .fs-page .fs-info__table { width: 100% !important; max-width: 760px; }
.editor-styles-wrapper .fs-page .fs-info__row { padding: 16px 0 !important; }

/* 編集画面のタブレット／モバイル表示（2026-10-24）
   上の並び（3列・2列・760px のピル・437px のタイムライン）は PC 幅前提で、
   プレビューを「モバイル」「タブレット」にすると写真・キャラ・ピル・タイムラインが枠の外に見切れていた。
   編集画面の iframe が 959px 以下のときは 1 列を基本に組み直す（フロントの SP 指定はそのまま効いている） */
@media (max-width: 959px) {
  .editor-styles-wrapper .fs-page :is(.fs-mv, .fs-about, .fs-suki, .fs-value, .fs-time, .fs-places, .fs-info) { padding: 48px 0 !important; }
  .editor-styles-wrapper .fs-page .block-editor-block-list__block { max-width: 100%; }

  /* MV：写真3枚・キャラ3体は横1列のまま、列幅を均等に縮める */
  .editor-styles-wrapper .fs-page .fs-mv { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 16px 10px; }
  .editor-styles-wrapper .fs-page .fs-mv .fs-mv__photo { width: 100% !important; }

  /* ABOUT・TIME：1 列（TIME は 見出し → キャラ → タイムライン） */
  .editor-styles-wrapper .fs-page .fs-about { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .editor-styles-wrapper .fs-page .fs-time { grid-template-columns: minmax(0, 1fr); }
  .editor-styles-wrapper .fs-page .fs-time .fs-ill--time { grid-row: 2; }
  .editor-styles-wrapper .fs-page .fs-time .fs-time__card { grid-column: 1; grid-row: 3; width: 100% !important; max-width: none; padding-left: 20px !important; padding-right: 20px !important; }
  .editor-styles-wrapper .fs-page :is(.fs-step, .fs-step__ttl) { width: 100% !important; }
  .editor-styles-wrapper .fs-page .fs-step__txt { width: auto !important; }

  /* SUKI：ピルと本文は幅いっぱい、キャラ2体の間隔を詰める */
  .editor-styles-wrapper .fs-page .fs-suki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; }
  .editor-styles-wrapper .fs-page .fs-suki .fs-pill { width: 100% !important; padding: 24px 12px !important; }
  .editor-styles-wrapper .fs-page .fs-suki .fs-pill__ttl { width: 88% !important; }
  .editor-styles-wrapper .fs-page .fs-suki .fs-suki__txt { width: 100% !important; }
}

/* ============================================================
   PC だけの改行（2026-10-24）：アフタースクール・フリースクール共通
   本文の「PC はデザインどおりの位置で改行、SP は自然に折り返す」改行は、もとは SWELL の <br class="pc_only"> だった。
   WordPress 7.1 の編集画面は <br> のクラスを保持しないため、その段落を編集画面で書き換えて保存すると
   ただの <br> になり、SP でも単語の途中で改行されてしまう。
   → 本文側を <span class="pcbr"><br></span> に置き換え（span のクラスは編集しても残る）、SP では span ごと消す。
   ※ SWELL の .pc_only は使わない（編集画面で display:block になり、<br> を包むと空行が 1 行増えるため）
   ============================================================ */
@media (max-width: 959px) {
  :is(.as-page, .fs-page) .pcbr { display: none; }
}