{"id":2153,"date":"2022-02-28T05:00:05","date_gmt":"2022-02-27T20:00:05","guid":{"rendered":"https:\/\/nansiki.net\/2018\/?page_id=2153"},"modified":"2026-08-19T14:26:30","modified_gmt":"2026-08-19T05:26:30","slug":"2022%e5%b9%b4-%e6%98%a5%e6%9c%9f%e8%ac%9b%e7%bf%92%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b","status":"publish","type":"page","link":"https:\/\/nansiki.net\/2018\/2022%e5%b9%b4-%e6%98%a5%e6%9c%9f%e8%ac%9b%e7%bf%92%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b","title":{"rendered":"2027\u5e74 \u6625\u671f\u8b1b\u7fd2\u306e\u304a\u77e5\u3089\u305b"},"content":{"rendered":"\n<section class=\"spring2027-hero\">\n\n  <div class=\"spring2027-hero-inner\">\n\n    <div class=\"spring2027-hero-copy\">\n\n      <div class=\"spring2027-hero-label\">\n        SPRING LEARNING GUIDE\n        <span>2027<\/span>\n      <\/div>\n\n      <p class=\"spring2027-hero-season\">\n        \u65b0\u3057\u3044\u5b66\u5e74\u304c\u3001\u306f\u3058\u307e\u308b\u3002\n      <\/p>\n\n      <h1 class=\"spring2027-hero-title\">\n        \u3053\u306e\u6625\u3001<br>\n        \u65b0\u3057\u3044\u5b66\u5e74\u3092<br>\n        <span>\u5c11\u3057\u5148\u53d6\u308a<\/span>\u3057\u3088\u3046\u3002\n      <\/h1>\n\n      <p class=\"spring2027-hero-lead\">\n        \u5fa9\u7fd2\u3059\u308b\u3002\u4e88\u7fd2\u3059\u308b\u3002<br>\n        \u305d\u3057\u3066\u3001\u65b0\u3057\u3044\u5b66\u5e74\u3078\u3002\n      <\/p>\n\n      <a href=\"#spring2027-start\" class=\"spring2027-hero-button\">\n        \u6625\u671f\u8b1b\u7fd2\u306b\u3064\u3044\u3066\u898b\u308b\n        <span>\u2193<\/span>\n      <\/a>\n\n    <\/div>\n\n    <div class=\"spring2027-hero-visual\">\n\n      <!--\n        \u3053\u3053\u306b\u6625\u671f\u8b1b\u7fd2\u7528\u306e\u753b\u50cf\u3092\u914d\u7f6e\u3057\u307e\u3059\u3002\n        \u753b\u50cf\u304c\u5b8c\u6210\u3057\u305f\u3089 src \u306eURL\u3092\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n      -->\n      <div class=\"spring2027-hero-image\">\n\n        <div class=\"spring2027-hero-image-placeholder\">\n          <span>SPRING<\/span>\n          <strong>2027<\/strong>\n          <small>Learning begins here.<\/small>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"spring2027-hero-sticker\">\n        <span>NEW<\/span>\n        <strong>GRADE<\/strong>\n        <small>START<\/small>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n  <div class=\"spring2027-hero-bottom\">\n\n    <div class=\"spring2027-scroll\">\n      <span>SCROLL<\/span>\n      <i><\/i>\n    <\/div>\n\n    <div class=\"spring2027-hero-note\">\n      <span>NESCOM<\/span>\n      \u4e2d\u5b66\u751f\u30fb\u5c0f\u5b66\u751f\u30fb\u65b0\u9ad8\u68211\u5e74\u751f\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   NESCOM SPRING 2027\n   HERO\n========================================================= *\/\n\n.spring2027-hero {\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-cream: #faf9f5;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n  --spring-muted: #69736d;\n\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  background:\n    radial-gradient(\n      circle at 82% 20%,\n      rgba(95,128,108,.12) 0,\n      rgba(95,128,108,0) 32%\n    ),\n    linear-gradient(\n      135deg,\n      #faf9f5 0%,\n      #f5f7f2 100%\n    );\n\n  color: var(--spring-text);\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n  box-sizing: border-box;\n}\n\n.spring2027-hero *,\n.spring2027-hero *::before,\n.spring2027-hero *::after {\n  box-sizing: border-box;\n}\n\n\n\/* ---------------------------------------------------------\n   \u80cc\u666f\u88c5\u98fe\n--------------------------------------------------------- *\/\n\n.spring2027-hero::before {\n  content: \"\";\n  position: absolute;\n  width: 420px;\n  height: 420px;\n  border-radius: 50%;\n  background: rgba(95,128,108,.06);\n  top: -210px;\n  left: -180px;\n}\n\n.spring2027-hero::after {\n  content: \"\";\n  position: absolute;\n  width: 280px;\n  height: 280px;\n  border-radius: 50%;\n  border: 1px solid rgba(95,128,108,.14);\n  right: -110px;\n  bottom: -100px;\n}\n\n\n\/* ---------------------------------------------------------\n   INNER\n--------------------------------------------------------- *\/\n\n.spring2027-hero-inner {\n  position: relative;\n  z-index: 2;\n\n  width: min(1180px, calc(100% - 48px));\n  min-height: 680px;\n\n  margin: 0 auto;\n\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  align-items: center;\n  gap: 60px;\n\n  padding: 80px 0 60px;\n}\n\n\n\/* ---------------------------------------------------------\n   COPY\n--------------------------------------------------------- *\/\n\n.spring2027-hero-copy {\n  position: relative;\n  z-index: 3;\n}\n\n\n\/* LABEL *\/\n\n.spring2027-hero-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n\n  margin-bottom: 28px;\n\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: .18em;\n  color: var(--spring-green);\n}\n\n.spring2027-hero-label::before {\n  content: \"\";\n  width: 32px;\n  height: 1px;\n  background: var(--spring-green);\n}\n\n.spring2027-hero-label span {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  min-width: 42px;\n  height: 24px;\n\n  padding: 0 8px;\n\n  border-radius: 20px;\n\n  background: var(--spring-green);\n  color: #fff;\n\n  font-size: 11px;\n  letter-spacing: .08em;\n}\n\n\n\/* SEASON *\/\n\n.spring2027-hero-season {\n  margin: 0 0 12px;\n\n  font-size: clamp(14px, 1.5vw, 17px);\n  font-weight: 600;\n  letter-spacing: .12em;\n\n  color: var(--spring-muted);\n}\n\n\n\/* TITLE *\/\n\n.spring2027-hero-title {\n  margin: 0;\n\n  font-size: clamp(42px, 5vw, 72px);\n  line-height: 1.18;\n  letter-spacing: -.035em;\n  font-weight: 800;\n}\n\n.spring2027-hero-title span {\n  position: relative;\n  display: inline-block;\n  color: var(--spring-green-dark);\n}\n\n.spring2027-hero-title span::after {\n  content: \"\";\n\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -5px;\n\n  height: 7px;\n\n  border-radius: 50%;\n\n  background: rgba(232,201,106,.55);\n\n  transform: rotate(-1deg);\n}\n\n\n\/* LEAD *\/\n\n.spring2027-hero-lead {\n  margin: 30px 0 0;\n\n  font-size: clamp(16px, 1.8vw, 20px);\n  line-height: 1.9;\n  font-weight: 500;\n\n  color: var(--spring-muted);\n}\n\n\n\/* BUTTON *\/\n\n.spring2027-hero-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 18px;\n\n  margin-top: 38px;\n\n  padding: 16px 24px 16px 26px;\n\n  border-radius: 999px;\n\n  background: var(--spring-green-dark);\n  color: #fff !important;\n\n  text-decoration: none !important;\n\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: .05em;\n\n  box-shadow:\n    0 10px 24px rgba(63,95,77,.18);\n\n  transition:\n    transform .25s ease,\n    box-shadow .25s ease,\n    background .25s ease;\n}\n\n.spring2027-hero-button span {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 28px;\n  height: 28px;\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,.16);\n\n  transition: transform .25s ease;\n}\n\n.spring2027-hero-button:hover {\n  background: #304b3c;\n  transform: translateY(-3px);\n\n  box-shadow:\n    0 14px 30px rgba(63,95,77,.24);\n}\n\n.spring2027-hero-button:hover span {\n  transform: translateY(3px);\n}\n\n\n\/* ---------------------------------------------------------\n   VISUAL\n--------------------------------------------------------- *\/\n\n.spring2027-hero-visual {\n  position: relative;\n\n  width: 100%;\n  max-width: 520px;\n\n  margin-left: auto;\n}\n\n\n\/* IMAGE AREA *\/\n\n.spring2027-hero-image {\n  position: relative;\n\n  width: 100%;\n  aspect-ratio: 1 \/ 1;\n\n  border-radius: 36px;\n\n  overflow: hidden;\n\n  background:\n    linear-gradient(\n      145deg,\n      #e7eee8 0%,\n      #dce8df 100%\n    );\n\n  box-shadow:\n    0 24px 60px rgba(48,70,56,.12);\n}\n\n\n\/*\n  \u4eee\u753b\u50cf\u30a8\u30ea\u30a2\n  \u5b9f\u969b\u306e\u753b\u50cf\u3092\u5165\u308c\u305f\u3089\u3001\u3053\u306e\u90e8\u5206\u3092\n  <img> \u306b\u5909\u66f4\u3057\u3066\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002\n*\/\n\n.spring2027-hero-image-placeholder {\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  text-align: center;\n\n  color: var(--spring-green-dark);\n}\n\n.spring2027-hero-image-placeholder span {\n  font-size: 14px;\n  font-weight: 700;\n  letter-spacing: .35em;\n  margin-left: .35em;\n}\n\n.spring2027-hero-image-placeholder strong {\n  margin-top: 8px;\n\n  font-size: clamp(80px, 10vw, 130px);\n  line-height: 1;\n\n  font-weight: 800;\n  letter-spacing: -.06em;\n}\n\n.spring2027-hero-image-placeholder small {\n  margin-top: 18px;\n\n  font-family: Georgia, serif;\n  font-size: 13px;\n  font-style: italic;\n  letter-spacing: .05em;\n\n  opacity: .7;\n}\n\n\n\/* IMAGE DECORATION *\/\n\n.spring2027-hero-image::before {\n  content: \"\";\n\n  position: absolute;\n  width: 150px;\n  height: 150px;\n\n  border-radius: 50%;\n\n  border: 1px solid rgba(63,95,77,.18);\n\n  top: 36px;\n  right: 36px;\n}\n\n.spring2027-hero-image::after {\n  content: \"\";\n\n  position: absolute;\n  width: 80px;\n  height: 80px;\n\n  border-radius: 50%;\n\n  background: rgba(232,201,106,.28);\n\n  bottom: 45px;\n  left: 45px;\n}\n\n\n\/* STICKER *\/\n\n.spring2027-hero-sticker {\n  position: absolute;\n\n  right: -24px;\n  bottom: 42px;\n\n  width: 110px;\n  height: 110px;\n\n  border-radius: 50%;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  background: var(--spring-yellow);\n\n  color: #394238;\n\n  transform: rotate(8deg);\n\n  box-shadow:\n    0 12px 24px rgba(80,70,30,.12);\n}\n\n.spring2027-hero-sticker span {\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: .15em;\n}\n\n.spring2027-hero-sticker strong {\n  margin-top: 2px;\n\n  font-size: 18px;\n  line-height: 1;\n  letter-spacing: .05em;\n}\n\n.spring2027-hero-sticker small {\n  margin-top: 4px;\n\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: .12em;\n}\n\n\n\/* ---------------------------------------------------------\n   BOTTOM\n--------------------------------------------------------- *\/\n\n.spring2027-hero-bottom {\n  position: relative;\n  z-index: 3;\n\n  width: min(1180px, calc(100% - 48px));\n\n  margin: 0 auto;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 0 0 28px;\n}\n\n\n\/* SCROLL *\/\n\n.spring2027-scroll {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  color: var(--spring-muted);\n\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: .18em;\n}\n\n.spring2027-scroll i {\n  position: relative;\n\n  display: block;\n\n  width: 1px;\n  height: 42px;\n\n  background: var(--spring-green);\n}\n\n.spring2027-scroll i::after {\n  content: \"\";\n\n  position: absolute;\n\n  left: -3px;\n  bottom: 0;\n\n  width: 7px;\n  height: 7px;\n\n  border-right: 1px solid var(--spring-green);\n  border-bottom: 1px solid var(--spring-green);\n\n  transform: rotate(45deg);\n}\n\n\n\/* NOTE *\/\n\n.spring2027-hero-note {\n  font-size: 11px;\n  color: var(--spring-muted);\n  letter-spacing: .04em;\n}\n\n.spring2027-hero-note span {\n  margin-right: 10px;\n\n  color: var(--spring-green);\n  font-weight: 800;\n  letter-spacing: .12em;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n  .spring2027-hero-inner {\n    grid-template-columns: 1fr;\n\n    gap: 48px;\n\n    padding-top: 70px;\n  }\n\n  .spring2027-hero-copy {\n    text-align: center;\n  }\n\n  .spring2027-hero-label {\n    justify-content: center;\n  }\n\n  .spring2027-hero-visual {\n    margin: 0 auto;\n    max-width: 460px;\n  }\n\n  .spring2027-hero-bottom {\n    margin-top: 20px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .spring2027-hero-inner {\n    width: min(100% - 32px, 520px);\n\n    min-height: auto;\n\n    padding:\n      48px 0\n      44px;\n\n    gap: 38px;\n  }\n\n  .spring2027-hero-label {\n    margin-bottom: 22px;\n\n    font-size: 10px;\n  }\n\n  .spring2027-hero-label::before {\n    width: 22px;\n  }\n\n  .spring2027-hero-label span {\n    min-width: 38px;\n    height: 22px;\n  }\n\n  .spring2027-hero-season {\n    font-size: 13px;\n  }\n\n  .spring2027-hero-title {\n    font-size: clamp(38px, 11vw, 52px);\n    line-height: 1.22;\n  }\n\n  .spring2027-hero-title span::after {\n    height: 5px;\n    bottom: -3px;\n  }\n\n  .spring2027-hero-lead {\n    margin-top: 22px;\n\n    font-size: 15px;\n    line-height: 1.8;\n  }\n\n  .spring2027-hero-button {\n    margin-top: 28px;\n\n    padding: 14px 20px 14px 22px;\n\n    font-size: 13px;\n  }\n\n  .spring2027-hero-image {\n    border-radius: 26px;\n  }\n\n  .spring2027-hero-sticker {\n    width: 82px;\n    height: 82px;\n\n    right: -8px;\n    bottom: 22px;\n  }\n\n  .spring2027-hero-sticker strong {\n    font-size: 14px;\n  }\n\n  .spring2027-hero-sticker span {\n    font-size: 8px;\n  }\n\n  .spring2027-hero-sticker small {\n    font-size: 7px;\n  }\n\n  .spring2027-hero-image::before {\n    width: 90px;\n    height: 90px;\n\n    top: 24px;\n    right: 24px;\n  }\n\n  .spring2027-hero-image::after {\n    width: 55px;\n    height: 55px;\n\n    bottom: 28px;\n    left: 28px;\n  }\n\n  .spring2027-hero-bottom {\n    width: min(100% - 32px, 520px);\n\n    padding-bottom: 20px;\n  }\n\n  .spring2027-scroll {\n    display: none;\n  }\n\n  .spring2027-hero-note {\n    width: 100%;\n    text-align: center;\n\n    font-size: 9px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .spring2027-hero-button,\n  .spring2027-hero-button span {\n    transition: none;\n  }\n\n}\n\n<\/style>\n\n\n\n<section class=\"spring2027-intro\" id=\"spring2027-start\">\n\n  <div class=\"spring2027-intro-inner\">\n\n    <!-- \u30bb\u30af\u30b7\u30e7\u30f3\u898b\u51fa\u3057 -->\n    <div class=\"spring2027-section-heading\">\n\n      <p class=\"spring2027-section-kicker\">\n        WHY SPRING?\n      <\/p>\n\n      <h2>\n        \u6625\u4f11\u307f\u306f\u3001<br>\n        <span>\u300c\u6b21\u306e\u5b66\u5e74\u300d\u306e\u6e96\u5099\u671f\u9593\u3002<\/span>\n      <\/h2>\n\n      <p class=\"spring2027-section-lead\">\n        \u4eca\u307e\u3067\u3092\u632f\u308a\u8fd4\u308b\u3053\u3068\u3082\u3001<br class=\"spring2027-sp-only\">\n        \u3053\u308c\u304b\u3089\u3092\u5148\u53d6\u308a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u308b\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <!-- \u5c0e\u5165\u30e1\u30c3\u30bb\u30fc\u30b8 -->\n    <div class=\"spring2027-intro-message\">\n\n      <div class=\"spring2027-intro-message-number\">\n        <span>01<\/span>\n      <\/div>\n\n      <div class=\"spring2027-intro-message-body\">\n\n        <p>\n          \u6625\u4f11\u307f\u306f\u3001\u5b66\u6821\u306e\u6388\u696d\u304c\u3044\u3063\u305f\u3093\u6b62\u307e\u308b\u671f\u9593\u3002\n        <\/p>\n\n        <p>\n          \u3060\u304b\u3089\u3053\u305d\u3001\n          <strong>\u4eca\u307e\u3067\u306e\u52c9\u5f37\u3092\u632f\u308a\u8fd4\u308b\u3053\u3068\u3082\u3001<\/strong><br>\n          <strong>\u3053\u308c\u304b\u3089\u306e\u52c9\u5f37\u3092\u5148\u53d6\u308a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/strong>\n        <\/p>\n\n        <p>\n          \u65b0\u3057\u3044\u5b66\u5e74\u304c\u59cb\u307e\u3063\u3066\u304b\u3089\n          \u300c\u524d\u306e\u5b66\u5e74\u306e\u5185\u5bb9\u304c\u3088\u304f\u5206\u304b\u3089\u306a\u3044\u2026\u2026\u300d\n          \u3068\u306a\u308b\u524d\u306b\u5fa9\u7fd2\u3057\u3066\u304a\u304f\u3002\n        <\/p>\n\n        <p>\n          \u3042\u308b\u3044\u306f\u3001\n          \u300c\u3053\u306e\u5185\u5bb9\u3001\u5c11\u3057\u77e5\u3063\u3066\u3044\u308b\uff01\u300d\n          \u3068\u3044\u3046\u72b6\u614b\u3067\u65b0\u5b66\u671f\u3092\u8fce\u3048\u308b\u3002\n        <\/p>\n\n        <p class=\"spring2027-intro-emphasis\">\n          \u6625\u671f\u8b1b\u7fd2\u3067\u306f\u3001<br class=\"spring2027-sp-only\">\n          <span>\u4e00\u4eba\u3072\u3068\u308a\u306e\u76ee\u7684\u306b\u5408\u308f\u305b\u3066<\/span><br class=\"spring2027-sp-only\">\n          \u5b66\u7fd2\u5185\u5bb9\u3092\u8003\u3048\u307e\u3059\u3002\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- 3\u30b9\u30c6\u30c3\u30d7 -->\n    <div class=\"spring2027-flow\">\n\n      <div class=\"spring2027-flow-item\">\n\n        <div class=\"spring2027-flow-icon\">\n          <span>01<\/span>\n        <\/div>\n\n        <p class=\"spring2027-flow-label\">\n          LOOK BACK\n        <\/p>\n\n        <h3>\n          \u4eca\u307e\u3067\u3092<br>\n          \u632f\u308a\u8fd4\u308b\n        <\/h3>\n\n        <p>\n          \u82e6\u624b\u306a\u3068\u3053\u308d\u3084<br>\n          \u5fd8\u308c\u3066\u3044\u308b\u3068\u3053\u308d\u3092\u78ba\u8a8d\u3002\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"spring2027-flow-line\">\n        <span>\uff0b<\/span>\n      <\/div>\n\n\n      <div class=\"spring2027-flow-item\">\n\n        <div class=\"spring2027-flow-icon\">\n          <span>02<\/span>\n        <\/div>\n\n        <p class=\"spring2027-flow-label\">\n          LOOK AHEAD\n        <\/p>\n\n        <h3>\n          \u3053\u308c\u304b\u3089\u3092<br>\n          \u5148\u53d6\u308a\u3059\u308b\n        <\/h3>\n\n        <p>\n          \u65b0\u3057\u3044\u5b66\u5e74\u306e\u5185\u5bb9\u306b<br>\n          \u5c11\u3057\u89e6\u308c\u3066\u304a\u304f\u3002\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"spring2027-flow-line\">\n        <span>\uff1d<\/span>\n      <\/div>\n\n\n      <div class=\"spring2027-flow-item spring2027-flow-result\">\n\n        <div class=\"spring2027-flow-icon\">\n          <span>03<\/span>\n        <\/div>\n\n        <p class=\"spring2027-flow-label\">\n          NEW START\n        <\/p>\n\n        <h3>\n          \u65b0\u5b66\u671f\u3092<br>\n          \u4f59\u88d5\u3092\u6301\u3063\u3066\u8fce\u3048\u308b\n        <\/h3>\n\n        <p>\n          \u300c\u5c11\u3057\u77e5\u3063\u3066\u3044\u308b\u300d\u304c<br>\n          \u65b0\u5b66\u671f\u306e\u81ea\u4fe1\u306b\u306a\u308b\u3002\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- Bottom message -->\n    <div class=\"spring2027-intro-bottom\">\n\n      <span class=\"spring2027-intro-bottom-mark\">\u2713<\/span>\n\n      <p>\n        \u6625\u4f11\u307f\u3060\u304b\u3089\u3067\u304d\u308b\u3053\u3068\u3092\u3001<br class=\"spring2027-sp-only\">\n        \u6625\u4f11\u307f\u306e\u3046\u3061\u306b\u3002\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   NESCOM SPRING 2027\n   STEP 2 : INTRO\n========================================================= *\/\n\n.spring2027-intro {\n\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-cream: #faf9f5;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n  --spring-muted: #69736d;\n\n  position: relative;\n\n  overflow: hidden;\n\n  width: 100%;\n\n  padding:\n    110px 0\n    120px;\n\n  background: #ffffff;\n\n  color: var(--spring-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n  box-sizing: border-box;\n}\n\n.spring2027-intro *,\n.spring2027-intro *::before,\n.spring2027-intro *::after {\n  box-sizing: border-box;\n}\n\n\n\/* ---------------------------------------------------------\n   INNER\n--------------------------------------------------------- *\/\n\n.spring2027-intro-inner {\n\n  width: min(1080px, calc(100% - 48px));\n\n  margin: 0 auto;\n}\n\n\n\/* ---------------------------------------------------------\n   COMMON HEADING\n--------------------------------------------------------- *\/\n\n.spring2027-section-heading {\n\n  max-width: 760px;\n\n  margin: 0 auto 70px;\n\n  text-align: center;\n}\n\n\n.spring2027-section-kicker {\n\n  margin: 0 0 18px;\n\n  color: var(--spring-green);\n\n  font-size: 11px;\n  font-weight: 800;\n\n  letter-spacing: .22em;\n}\n\n\n.spring2027-section-heading h2 {\n\n  margin: 0;\n\n  font-size: clamp(34px, 4.5vw, 56px);\n\n  line-height: 1.3;\n\n  letter-spacing: -.035em;\n\n  font-weight: 800;\n}\n\n\n.spring2027-section-heading h2 span {\n\n  color: var(--spring-green-dark);\n}\n\n\n.spring2027-section-lead {\n\n  margin: 24px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: clamp(15px, 1.7vw, 18px);\n\n  line-height: 1.9;\n\n  letter-spacing: .04em;\n}\n\n\n\/* ---------------------------------------------------------\n   MESSAGE\n--------------------------------------------------------- *\/\n\n.spring2027-intro-message {\n\n  display: grid;\n\n  grid-template-columns: 90px 1fr;\n\n  gap: 35px;\n\n  max-width: 900px;\n\n  margin: 0 auto 100px;\n\n  padding: 48px 52px;\n\n  border-radius: 28px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #f5f8f5 0%,\n      #edf3ee 100%\n    );\n\n  border: 1px solid rgba(95,128,108,.10);\n}\n\n\n.spring2027-intro-message-number {\n\n  display: flex;\n\n  align-items: flex-start;\n\n  justify-content: center;\n}\n\n\n.spring2027-intro-message-number span {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 64px;\n  height: 64px;\n\n  border-radius: 50%;\n\n  background: var(--spring-green);\n\n  color: #ffffff;\n\n  font-size: 14px;\n\n  font-weight: 800;\n\n  letter-spacing: .05em;\n\n  box-shadow:\n    0 8px 20px rgba(63,95,77,.16);\n}\n\n\n.spring2027-intro-message-body p {\n\n  margin: 0 0 20px;\n\n  font-size: 15px;\n\n  line-height: 2;\n\n  color: var(--spring-muted);\n}\n\n\n.spring2027-intro-message-body p:last-child {\n\n  margin-bottom: 0;\n}\n\n\n.spring2027-intro-message-body strong {\n\n  color: var(--spring-text);\n\n  font-weight: 800;\n}\n\n\n.spring2027-intro-emphasis {\n\n  margin-top: 30px !important;\n\n  padding-top: 28px;\n\n  border-top: 1px solid rgba(95,128,108,.15);\n\n  color: var(--spring-text) !important;\n\n  font-size: 18px !important;\n\n  font-weight: 700;\n}\n\n\n.spring2027-intro-emphasis span {\n\n  position: relative;\n\n  color: var(--spring-green-dark);\n}\n\n\n\/* ---------------------------------------------------------\n   FLOW\n--------------------------------------------------------- *\/\n\n.spring2027-flow {\n\n  display: grid;\n\n  grid-template-columns:\n    1fr\n    55px\n    1fr\n    55px\n    1fr;\n\n  align-items: center;\n\n  max-width: 1000px;\n\n  margin: 0 auto;\n}\n\n\n.spring2027-flow-item {\n\n  position: relative;\n\n  min-height: 290px;\n\n  padding: 36px 28px;\n\n  border-radius: 24px;\n\n  background: #ffffff;\n\n  border: 1px solid #e4e9e5;\n\n  text-align: center;\n\n  box-shadow:\n    0 10px 30px rgba(40,60,45,.05);\n\n  transition:\n    transform .25s ease,\n    box-shadow .25s ease;\n}\n\n\n.spring2027-flow-item:hover {\n\n  transform: translateY(-5px);\n\n  box-shadow:\n    0 18px 38px rgba(40,60,45,.09);\n}\n\n\n.spring2027-flow-icon {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 54px;\n  height: 54px;\n\n  margin: 0 auto 20px;\n\n  border-radius: 50%;\n\n  background: var(--spring-green-light);\n\n  color: var(--spring-green-dark);\n\n  font-size: 12px;\n\n  font-weight: 800;\n}\n\n\n.spring2027-flow-label {\n\n  margin: 0 0 12px;\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n}\n\n\n.spring2027-flow-item h3 {\n\n  margin: 0;\n\n  font-size: 23px;\n\n  line-height: 1.45;\n\n  letter-spacing: -.02em;\n\n  font-weight: 800;\n}\n\n\n.spring2027-flow-item > p:last-child {\n\n  margin: 18px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 13px;\n\n  line-height: 1.8;\n}\n\n\n\/* RESULT *\/\n\n.spring2027-flow-result {\n\n  background:\n    linear-gradient(\n      145deg,\n      #f5f8f5 0%,\n      #edf3ee 100%\n    );\n\n  border-color:\n    rgba(95,128,108,.18);\n}\n\n\n.spring2027-flow-result .spring2027-flow-icon {\n\n  background: var(--spring-green);\n\n  color: #ffffff;\n}\n\n\n\/* ---------------------------------------------------------\n   FLOW LINE\n--------------------------------------------------------- *\/\n\n.spring2027-flow-line {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  color: var(--spring-yellow);\n\n  font-size: 24px;\n\n  font-weight: 300;\n}\n\n\n\/* ---------------------------------------------------------\n   BOTTOM MESSAGE\n--------------------------------------------------------- *\/\n\n.spring2027-intro-bottom {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 14px;\n\n  margin-top: 70px;\n\n  text-align: center;\n}\n\n\n.spring2027-intro-bottom-mark {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 30px;\n  height: 30px;\n\n  border-radius: 50%;\n\n  background: var(--spring-yellow);\n\n  color: #3f4639;\n\n  font-size: 14px;\n\n  font-weight: 800;\n}\n\n\n.spring2027-intro-bottom p {\n\n  margin: 0;\n\n  font-size: 15px;\n\n  font-weight: 700;\n\n  letter-spacing: .04em;\n}\n\n\n\/* ---------------------------------------------------------\n   MOBILE ONLY\n--------------------------------------------------------- *\/\n\n.spring2027-sp-only {\n  display: none;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n  .spring2027-intro {\n\n    padding:\n      90px 0\n      100px;\n  }\n\n\n  .spring2027-flow {\n\n    grid-template-columns:\n      1fr;\n\n    gap: 18px;\n  }\n\n\n  .spring2027-flow-item {\n\n    min-height: auto;\n\n    padding: 32px 24px;\n  }\n\n\n  .spring2027-flow-line {\n\n    height: 28px;\n\n    transform: rotate(90deg);\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .spring2027-intro {\n\n    padding:\n      75px 0\n      80px;\n  }\n\n\n  .spring2027-intro-inner {\n\n    width:\n      min(100% - 32px, 520px);\n  }\n\n\n  .spring2027-section-heading {\n\n    margin-bottom: 45px;\n  }\n\n\n  .spring2027-section-kicker {\n\n    margin-bottom: 14px;\n\n    font-size: 9px;\n  }\n\n\n  .spring2027-section-heading h2 {\n\n    font-size: 32px;\n\n    line-height: 1.35;\n  }\n\n\n  .spring2027-section-lead {\n\n    margin-top: 18px;\n\n    font-size: 14px;\n\n    line-height: 1.8;\n  }\n\n\n  .spring2027-intro-message {\n\n    grid-template-columns: 1fr;\n\n    gap: 22px;\n\n    margin-bottom: 60px;\n\n    padding: 30px 24px;\n\n    border-radius: 22px;\n  }\n\n\n  .spring2027-intro-message-number {\n\n    justify-content: flex-start;\n  }\n\n\n  .spring2027-intro-message-number span {\n\n    width: 48px;\n    height: 48px;\n\n    font-size: 11px;\n  }\n\n\n  .spring2027-intro-message-body p {\n\n    font-size: 14px;\n\n    line-height: 1.9;\n\n    margin-bottom: 17px;\n  }\n\n\n  .spring2027-intro-emphasis {\n\n    margin-top: 24px !important;\n\n    padding-top: 22px;\n\n    font-size: 16px !important;\n\n    line-height: 1.8;\n  }\n\n\n  .spring2027-flow-item {\n\n    padding: 30px 22px;\n\n    border-radius: 20px;\n  }\n\n\n  .spring2027-flow-icon {\n\n    width: 48px;\n    height: 48px;\n\n    margin-bottom: 16px;\n  }\n\n\n  .spring2027-flow-item h3 {\n\n    font-size: 21px;\n  }\n\n\n  .spring2027-flow-item > p:last-child {\n\n    font-size: 12px;\n\n    margin-top: 14px;\n  }\n\n\n  .spring2027-flow-line {\n\n    height: 22px;\n\n    font-size: 20px;\n  }\n\n\n  .spring2027-intro-bottom {\n\n    margin-top: 48px;\n\n    gap: 10px;\n  }\n\n\n  .spring2027-intro-bottom p {\n\n    font-size: 13px;\n\n    line-height: 1.7;\n  }\n\n\n  .spring2027-sp-only {\n\n    display: block;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .spring2027-flow-item {\n\n    transition: none;\n  }\n\n}\n<\/style>\n\n\n\n<section class=\"spring2027-diagnosis\" id=\"spring2027-diagnosis\">\n\n  <div class=\"spring2027-diagnosis-inner\">\n\n    <!-- HEADER -->\n    <div class=\"spring2027-section-heading spring2027-diagnosis-heading\">\n\n      <p class=\"spring2027-section-kicker\">\n        FIND YOUR LEARNING STYLE\n      <\/p>\n\n      <h2>\n        \u3042\u306a\u305f\u306f\u3001\u3053\u306e\u6625\u4f11\u307f\u3092<br>\n        <span>\u3069\u3046\u4f7f\u3044\u307e\u3059\u304b\uff1f<\/span>\n      <\/h2>\n\n      <p class=\"spring2027-section-lead\">\n        3\u3064\u306e\u8cea\u554f\u306b\u7b54\u3048\u308b\u3060\u3051\u3002<br>\n        \u3053\u306e\u6625\u306b\u304a\u3059\u3059\u3081\u306e\u5b66\u7fd2\u30b9\u30bf\u30a4\u30eb\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <!-- DIAGNOSIS CARD -->\n    <div class=\"spring2027-diagnosis-card\">\n\n\n      <!-- PROGRESS -->\n      <div class=\"spring2027-diagnosis-progress\">\n\n        <div class=\"spring2027-diagnosis-progress-top\">\n          <span id=\"spring2027-diagnosis-progress-text\">\n            QUESTION 1 \/ 3\n          <\/span>\n\n          <span id=\"spring2027-diagnosis-progress-percent\">\n            33%\n          <\/span>\n        <\/div>\n\n        <div class=\"spring2027-diagnosis-progress-bar\">\n          <span id=\"spring2027-diagnosis-progress-fill\"><\/span>\n        <\/div>\n\n      <\/div>\n\n\n      <!-- QUESTION AREA -->\n      <div class=\"spring2027-diagnosis-question\" id=\"spring2027-diagnosis-question\">\n\n        <p class=\"spring2027-diagnosis-question-number\">\n          QUESTION 01\n        <\/p>\n\n        <h3 id=\"spring2027-question-title\">\n          \u4eca\u306e\u5b66\u5e74\u306e\u52c9\u5f37\u306b\u3064\u3044\u3066\u3001\n          \u3069\u306e\u304f\u3089\u3044\u81ea\u4fe1\u304c\u3042\u308a\u307e\u3059\u304b\uff1f\n        <\/h3>\n\n\n        <div class=\"spring2027-diagnosis-options\">\n\n          <button type=\"button\" class=\"spring2027-diagnosis-option\" data-score=\"0\">\n            <span class=\"spring2027-option-number\">A<\/span>\n\n            <span class=\"spring2027-option-text\">\n              \u3061\u3087\u3063\u3068\u4e0d\u5b89\u306a\u3068\u3053\u308d\u304c\u3042\u308b\n            <\/span>\n\n            <span class=\"spring2027-option-arrow\">\u2192<\/span>\n          <\/button>\n\n\n          <button type=\"button\" class=\"spring2027-diagnosis-option\" data-score=\"1\">\n            <span class=\"spring2027-option-number\">B<\/span>\n\n            <span class=\"spring2027-option-text\">\n              \u3060\u3044\u305f\u3044\u5927\u4e08\u592b\n            <\/span>\n\n            <span class=\"spring2027-option-arrow\">\u2192<\/span>\n          <\/button>\n\n\n          <button type=\"button\" class=\"spring2027-diagnosis-option\" data-score=\"2\">\n            <span class=\"spring2027-option-number\">C<\/span>\n\n            <span class=\"spring2027-option-text\">\n              \u304b\u306a\u308a\u4f59\u88d5\u304c\u3042\u308b\n            <\/span>\n\n            <span class=\"spring2027-option-arrow\">\u2192<\/span>\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- RESULT -->\n      <div class=\"spring2027-diagnosis-result\" id=\"spring2027-diagnosis-result\">\n\n        <div class=\"spring2027-result-badge\" id=\"spring2027-result-badge\">\n          TYPE\n        <\/div>\n\n        <p class=\"spring2027-result-kicker\">\n          YOUR SPRING LEARNING STYLE\n        <\/p>\n\n        <h3 id=\"spring2027-result-title\">\n          \u3042\u306a\u305f\u306e\u30bf\u30a4\u30d7\n        <\/h3>\n\n        <p class=\"spring2027-result-description\" id=\"spring2027-result-description\">\n        <\/p>\n\n        <div class=\"spring2027-result-recommend\">\n\n          <span>\n            \u304a\u3059\u3059\u3081\u306e\u5b66\u7fd2\n          <\/span>\n\n          <strong id=\"spring2027-result-recommend\">\n            \u2015\n          <\/strong>\n\n        <\/div>\n\n        <button type=\"button\" class=\"spring2027-diagnosis-retry\" id=\"spring2027-diagnosis-retry\">\n          \u3082\u3046\u4e00\u5ea6\u8a3a\u65ad\u3059\u308b\n        <\/button>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- BOTTOM MESSAGE -->\n    <div class=\"spring2027-diagnosis-bottom\">\n\n      <span>POINT<\/span>\n\n      <p>\n        \u5927\u5207\u306a\u306e\u306f\u3001<strong>\u300c\u4f55\u65e5\u53c2\u52a0\u3059\u308b\u304b\u300d\u3067\u306f\u306a\u304f\u3001<br class=\"spring2027-sp-only\">\n        \u300c\u4f55\u3092\u5b66\u3076\u304b\u300d<\/strong>\u3067\u3059\u3002\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   STEP 3\n   SPRING LEARNING DIAGNOSIS\n========================================================= *\/\n\n.spring2027-diagnosis {\n\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-cream: #faf9f5;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n  --spring-muted: #69736d;\n\n  position: relative;\n\n  width: 100%;\n\n  overflow: hidden;\n\n  padding:\n    110px 0\n    120px;\n\n  background:\n    linear-gradient(\n      145deg,\n      #f5f8f5 0%,\n      #eef4ef 100%\n    );\n\n  color: var(--spring-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n  box-sizing: border-box;\n}\n\n.spring2027-diagnosis *,\n.spring2027-diagnosis *::before,\n.spring2027-diagnosis *::after {\n  box-sizing: border-box;\n}\n\n\n\/* ---------------------------------------------------------\n   INNER\n--------------------------------------------------------- *\/\n\n.spring2027-diagnosis-inner {\n\n  width:\n    min(1000px, calc(100% - 48px));\n\n  margin: 0 auto;\n}\n\n\n\/* ---------------------------------------------------------\n   HEADING\n--------------------------------------------------------- *\/\n\n.spring2027-diagnosis-heading {\n\n  max-width: 720px;\n\n  margin-bottom: 55px;\n}\n\n\n.spring2027-diagnosis-heading h2 span {\n\n  color: var(--spring-green-dark);\n}\n\n\n\/* ---------------------------------------------------------\n   CARD\n--------------------------------------------------------- *\/\n\n.spring2027-diagnosis-card {\n\n  position: relative;\n\n  max-width: 760px;\n\n  min-height: 510px;\n\n  margin: 0 auto;\n\n  padding:\n    44px 52px\n    52px;\n\n  background: #ffffff;\n\n  border:\n    1px solid\n    rgba(95,128,108,.12);\n\n  border-radius: 30px;\n\n  box-shadow:\n    0 24px 60px rgba(50,75,58,.10);\n}\n\n\n\/* ---------------------------------------------------------\n   PROGRESS\n--------------------------------------------------------- *\/\n\n.spring2027-diagnosis-progress {\n\n  margin-bottom: 48px;\n}\n\n\n.spring2027-diagnosis-progress-top {\n\n  display: flex;\n\n  justify-content: space-between;\n\n  align-items: center;\n\n  margin-bottom: 10px;\n\n  color: var(--spring-muted);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .14em;\n}\n\n\n.spring2027-diagnosis-progress-bar {\n\n  width: 100%;\n\n  height: 4px;\n\n  overflow: hidden;\n\n  border-radius: 999px;\n\n  background: #edf0ed;\n}\n\n\n.spring2027-diagnosis-progress-bar span {\n\n  display: block;\n\n  width: 33.333%;\n\n  height: 100%;\n\n  border-radius: inherit;\n\n  background: var(--spring-green);\n\n  transition:\n    width .4s ease;\n}\n\n\n\/* ---------------------------------------------------------\n   QUESTION\n--------------------------------------------------------- *\/\n\n.spring2027-diagnosis-question-number {\n\n  margin: 0 0 14px;\n\n  color: var(--spring-green);\n\n  font-size: 10px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n}\n\n\n.spring2027-diagnosis-question h3 {\n\n  max-width: 600px;\n\n  margin: 0;\n\n  font-size: clamp(22px, 3vw, 30px);\n\n  line-height: 1.55;\n\n  letter-spacing: -.025em;\n\n  font-weight: 800;\n}\n\n\n\/* ---------------------------------------------------------\n   OPTIONS\n--------------------------------------------------------- *\/\n\n.spring2027-diagnosis-options {\n\n  display: grid;\n\n  gap: 12px;\n\n  margin-top: 35px;\n}\n\n\n.spring2027-diagnosis-option {\n\n  width: 100%;\n\n  display: grid;\n\n  grid-template-columns:\n    42px\n    1fr\n    28px;\n\n  align-items: center;\n\n  gap: 14px;\n\n  padding: 15px 17px;\n\n  border:\n    1px solid\n    #e1e7e2;\n\n  border-radius: 15px;\n\n  background: #ffffff;\n\n  color: var(--spring-text);\n\n  text-align: left;\n\n  cursor: pointer;\n\n  font-family: inherit;\n\n  transition:\n    transform .2s ease,\n    border-color .2s ease,\n    background .2s ease,\n    box-shadow .2s ease;\n}\n\n\n.spring2027-diagnosis-option:hover {\n\n  transform: translateX(4px);\n\n  border-color:\n    rgba(95,128,108,.5);\n\n  background:\n    #f7faf7;\n\n  box-shadow:\n    0 7px 18px rgba(50,75,58,.06);\n}\n\n\n.spring2027-option-number {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 38px;\n  height: 38px;\n\n  border-radius: 50%;\n\n  background:\n    var(--spring-green-light);\n\n  color:\n    var(--spring-green-dark);\n\n  font-size: 11px;\n\n  font-weight: 800;\n}\n\n\n.spring2027-option-text {\n\n  font-size: 14px;\n\n  font-weight: 600;\n\n  line-height: 1.5;\n}\n\n\n.spring2027-option-arrow {\n\n  color: var(--spring-green);\n\n  font-size: 18px;\n\n  transition:\n    transform .2s ease;\n}\n\n\n.spring2027-diagnosis-option:hover\n.spring2027-option-arrow {\n\n  transform: translateX(4px);\n}\n\n\n\/* ---------------------------------------------------------\n   RESULT\n--------------------------------------------------------- *\/\n\n.spring2027-diagnosis-result {\n\n  display: none;\n\n  text-align: center;\n\n  padding:\n    15px\n    20px\n    0;\n}\n\n\n.spring2027-result-badge {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 78px;\n  height: 78px;\n\n  margin: 0 auto 25px;\n\n  border-radius: 50%;\n\n  background:\n    var(--spring-green);\n\n  color: #ffffff;\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  letter-spacing: .08em;\n\n  box-shadow:\n    0 10px 25px rgba(63,95,77,.16);\n}\n\n\n.spring2027-result-kicker {\n\n  margin: 0 0 10px;\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n}\n\n\n.spring2027-diagnosis-result h3 {\n\n  margin: 0;\n\n  font-size: clamp(28px, 4vw, 42px);\n\n  line-height: 1.3;\n\n  font-weight: 800;\n\n  letter-spacing: -.03em;\n}\n\n\n.spring2027-result-description {\n\n  max-width: 570px;\n\n  margin: 22px auto 0;\n\n  color: var(--spring-muted);\n\n  font-size: 14px;\n\n  line-height: 2;\n}\n\n\n.spring2027-result-recommend {\n\n  display: flex;\n\n  flex-direction: column;\n\n  gap: 7px;\n\n  margin: 30px auto 0;\n\n  max-width: 450px;\n\n  padding: 20px;\n\n  border-radius: 16px;\n\n  background:\n    var(--spring-green-light);\n}\n\n\n.spring2027-result-recommend span {\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n}\n\n\n.spring2027-result-recommend strong {\n\n  color: var(--spring-green-dark);\n\n  font-size: 17px;\n\n  font-weight: 800;\n}\n\n\n\/* RETRY *\/\n\n.spring2027-diagnosis-retry {\n\n  margin-top: 28px;\n\n  padding: 10px 18px;\n\n  border: none;\n\n  background: transparent;\n\n  color: var(--spring-muted);\n\n  font-family: inherit;\n\n  font-size: 11px;\n\n  font-weight: 600;\n\n  text-decoration: underline;\n\n  text-underline-offset: 4px;\n\n  cursor: pointer;\n}\n\n\n\/* ---------------------------------------------------------\n   BOTTOM\n--------------------------------------------------------- *\/\n\n.spring2027-diagnosis-bottom {\n\n  display: flex;\n\n  justify-content: center;\n\n  align-items: center;\n\n  gap: 14px;\n\n  margin-top: 55px;\n\n  text-align: center;\n}\n\n\n.spring2027-diagnosis-bottom span {\n\n  padding: 6px 10px;\n\n  border-radius: 999px;\n\n  background: var(--spring-yellow);\n\n  color: #404537;\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .12em;\n}\n\n\n.spring2027-diagnosis-bottom p {\n\n  margin: 0;\n\n  color: var(--spring-muted);\n\n  font-size: 13px;\n\n  line-height: 1.7;\n}\n\n\n.spring2027-diagnosis-bottom strong {\n\n  color: var(--spring-text);\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .spring2027-diagnosis {\n\n    padding:\n      75px 0\n      80px;\n  }\n\n\n  .spring2027-diagnosis-inner {\n\n    width:\n      min(100% - 32px, 520px);\n  }\n\n\n  .spring2027-diagnosis-heading {\n\n    margin-bottom: 38px;\n  }\n\n\n  .spring2027-diagnosis-heading h2 {\n\n    font-size: 31px;\n  }\n\n\n  .spring2027-diagnosis-card {\n\n    min-height: 490px;\n\n    padding:\n      28px 22px\n      34px;\n\n    border-radius: 23px;\n  }\n\n\n  .spring2027-diagnosis-progress {\n\n    margin-bottom: 34px;\n  }\n\n\n  .spring2027-diagnosis-question h3 {\n\n    font-size: 21px;\n\n    line-height: 1.55;\n  }\n\n\n  .spring2027-diagnosis-options {\n\n    margin-top: 28px;\n\n    gap: 10px;\n  }\n\n\n  .spring2027-diagnosis-option {\n\n    grid-template-columns:\n      36px\n      1fr\n      22px;\n\n    gap: 10px;\n\n    padding: 13px;\n  }\n\n\n  .spring2027-option-number {\n\n    width: 34px;\n    height: 34px;\n  }\n\n\n  .spring2027-option-text {\n\n    font-size: 13px;\n  }\n\n\n  .spring2027-result-description {\n\n    font-size: 13px;\n\n    line-height: 1.9;\n  }\n\n\n  .spring2027-diagnosis-bottom {\n\n    flex-direction: column;\n\n    gap: 10px;\n\n    margin-top: 40px;\n  }\n\n\n  .spring2027-diagnosis-bottom p {\n\n    font-size: 12px;\n  }\n\n}\n\n\n\/* ---------------------------------------------------------\n   REDUCED MOTION\n--------------------------------------------------------- *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .spring2027-diagnosis-option,\n  .spring2027-option-arrow,\n  .spring2027-diagnosis-progress-bar span {\n\n    transition: none;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const root =\n    document.querySelector(\".spring2027-diagnosis\");\n\n  if (!root) return;\n\n\n  const questionTitle =\n    root.querySelector(\"#spring2027-question-title\");\n\n  const questionNumber =\n    root.querySelector(\".spring2027-diagnosis-question-number\");\n\n  const options =\n    root.querySelectorAll(\".spring2027-diagnosis-option\");\n\n  const questionArea =\n    root.querySelector(\"#spring2027-diagnosis-question\");\n\n  const resultArea =\n    root.querySelector(\"#spring2027-diagnosis-result\");\n\n  const progressText =\n    root.querySelector(\"#spring2027-diagnosis-progress-text\");\n\n  const progressPercent =\n    root.querySelector(\"#spring2027-diagnosis-progress-percent\");\n\n  const progressFill =\n    root.querySelector(\"#spring2027-diagnosis-progress-fill\");\n\n  const resultBadge =\n    root.querySelector(\"#spring2027-result-badge\");\n\n  const resultTitle =\n    root.querySelector(\"#spring2027-result-title\");\n\n  const resultDescription =\n    root.querySelector(\"#spring2027-result-description\");\n\n  const resultRecommend =\n    root.querySelector(\"#spring2027-result-recommend\");\n\n  const retryButton =\n    root.querySelector(\"#spring2027-diagnosis-retry\");\n\n\n  \/* ---------------------------------------------\n     QUESTIONS\n  --------------------------------------------- *\/\n\n  const questions = [\n\n    {\n      title:\n        \"\u4eca\u306e\u5b66\u5e74\u306e\u52c9\u5f37\u306b\u3064\u3044\u3066\u3001\u3069\u306e\u304f\u3089\u3044\u81ea\u4fe1\u304c\u3042\u308a\u307e\u3059\u304b\uff1f\",\n\n      options: [\n        \"\u3061\u3087\u3063\u3068\u4e0d\u5b89\u306a\u3068\u3053\u308d\u304c\u3042\u308b\",\n        \"\u3060\u3044\u305f\u3044\u5927\u4e08\u592b\",\n        \"\u304b\u306a\u308a\u4f59\u88d5\u304c\u3042\u308b\"\n      ]\n    },\n\n    {\n      title:\n        \"\u5b66\u6821\u306e\u30c6\u30b9\u30c8\u306b\u3064\u3044\u3066\u3001\u4eca\u306e\u72b6\u614b\u306b\u8fd1\u3044\u3082\u306e\u306f\uff1f\",\n\n      options: [\n        \"\u82e6\u624b\u306a\u5358\u5143\u304c\u6b8b\u3063\u3066\u3044\u308b\",\n        \"\u3082\u3046\u5c11\u3057\u70b9\u6570\u3092\u4e0a\u3052\u305f\u3044\",\n        \"\u6bd4\u8f03\u7684\u5b89\u5b9a\u3057\u3066\u3044\u308b\"\n      ]\n    },\n\n    {\n      title:\n        \"\u65b0\u3057\u3044\u5b66\u5e74\u304c\u59cb\u307e\u308b\u524d\u306b\u3001\u3069\u3046\u3057\u3066\u304a\u304d\u305f\u3044\uff1f\",\n\n      options: [\n        \"\u307e\u305a\u306f\u4eca\u307e\u3067\u306e\u52c9\u5f37\u3092\u56fa\u3081\u305f\u3044\",\n        \"\u5fa9\u7fd2\u3057\u306a\u304c\u3089\u5c11\u3057\u4e88\u7fd2\u3082\u3057\u305f\u3044\",\n        \"\u3067\u304d\u308b\u3060\u3051\u5148\u53d6\u308a\u3057\u3066\u304a\u304d\u305f\u3044\"\n      ]\n    }\n\n  ];\n\n\n  let currentQuestion = 0;\n\n  let totalScore = 0;\n\n\n  \/* ---------------------------------------------\n     QUESTION DISPLAY\n  --------------------------------------------- *\/\n\n  function showQuestion(index) {\n\n    const question =\n      questions[index];\n\n\n    questionNumber.textContent =\n      \"QUESTION 0\" + (index + 1);\n\n\n    questionTitle.textContent =\n      question.title;\n\n\n    progressText.textContent =\n      \"QUESTION \" + (index + 1) + \" \/ 3\";\n\n\n    const percent =\n      Math.round(\n        ((index + 1) \/ 3) * 100\n      );\n\n\n    progressPercent.textContent =\n      percent + \"%\";\n\n\n    progressFill.style.width =\n      percent + \"%\";\n\n\n    options.forEach(function (button, i) {\n\n      const text =\n        button.querySelector(\n          \".spring2027-option-text\"\n        );\n\n      text.textContent =\n        question.options[i];\n\n    });\n\n  }\n\n\n  \/* ---------------------------------------------\n     ANSWER\n  --------------------------------------------- *\/\n\n  options.forEach(function (button) {\n\n    button.addEventListener(\n      \"click\",\n      function () {\n\n        const score =\n          Number(\n            button.dataset.score\n          );\n\n\n        totalScore += score;\n\n\n        if (currentQuestion < 2) {\n\n          currentQuestion++;\n\n\n          showQuestion(\n            currentQuestion\n          );\n\n        } else {\n\n          showResult();\n\n        }\n\n      }\n    );\n\n  });\n\n\n  \/* ---------------------------------------------\n     RESULT\n  --------------------------------------------- *\/\n\n  function showResult() {\n\n    questionArea.style.display =\n      \"none\";\n\n\n    resultArea.style.display =\n      \"block\";\n\n\n    progressText.textContent =\n      \"DIAGNOSIS COMPLETE\";\n\n\n    progressPercent.textContent =\n      \"100%\";\n\n\n    progressFill.style.width =\n      \"100%\";\n\n\n    let result;\n\n\n    \/*\n      0\uff5e2\n      \u2192 \u5fa9\u7fd2\u30bf\u30a4\u30d7\n\n      3\uff5e4\n      \u2192 \u30d0\u30e9\u30f3\u30b9\u578b\n\n      5\uff5e6\n      \u2192 \u4e88\u7fd2\u30bf\u30a4\u30d7\n    *\/\n\n    if (totalScore <= 2) {\n\n      result = {\n\n        badge: \"REVIEW\",\n\n        title:\n          \"\u571f\u53f0\u3092\u56fa\u3081\u308b\u300c\u5fa9\u7fd2\u30bf\u30a4\u30d7\u300d\",\n\n        description:\n          \"\u4eca\u307e\u3067\u306e\u5b66\u7fd2\u5185\u5bb9\u3092\u4e00\u5ea6\u6574\u7406\u3057\u3066\u3001\u82e6\u624b\u306a\u90e8\u5206\u3084\u5fd8\u308c\u3066\u3044\u308b\u5185\u5bb9\u3092\u78ba\u8a8d\u3059\u308b\u3053\u3068\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002\u65b0\u5b66\u5e74\u306e\u5b66\u7fd2\u3092\u59cb\u3081\u308b\u524d\u306b\u3001\u307e\u305a\u306f\u4eca\u306e\u5b66\u529b\u306e\u571f\u53f0\u3092\u6574\u3048\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002\",\n\n        recommend:\n          \"\u65e2\u7fd2\u7bc4\u56f2\u306e\u7dcf\u5fa9\u7fd2\"\n\n      };\n\n    } else if (totalScore <= 4) {\n\n      result = {\n\n        badge: \"BALANCE\",\n\n        title:\n          \"\u5fa9\u7fd2\uff0b\u4e88\u7fd2\u306e\u300c\u30d0\u30e9\u30f3\u30b9\u578b\u300d\",\n\n        description:\n          \"\u3053\u308c\u307e\u3067\u306e\u5b66\u7fd2\u3092\u78ba\u8a8d\u3057\u306a\u304c\u3089\u3001\u65b0\u5b66\u5e74\u306e\u5185\u5bb9\u306b\u3082\u5c11\u3057\u89e6\u308c\u3066\u304a\u304f\u306e\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002\u5fa9\u7fd2\u3068\u4e88\u7fd2\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u3001\u5b89\u5fc3\u3057\u3066\u65b0\u5b66\u671f\u3092\u8fce\u3048\u3089\u308c\u308b\u6e96\u5099\u3092\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002\",\n\n        recommend:\n          \"\u5fa9\u7fd2 \uff0b \u65b0\u5b66\u5e74\u306e\u4e88\u7fd2\"\n\n      };\n\n    } else {\n\n      result = {\n\n        badge: \"PREVIEW\",\n\n        title:\n          \"\u4e00\u6b69\u5148\u3078\u9032\u3080\u300c\u4e88\u7fd2\u30bf\u30a4\u30d7\u300d\",\n\n        description:\n          \"\u4eca\u307e\u3067\u306e\u5b66\u7fd2\u306b\u6bd4\u8f03\u7684\u4f59\u88d5\u304c\u3042\u308b\u306a\u3089\u3001\u65b0\u5b66\u5e74\u306e\u5185\u5bb9\u3092\u5148\u53d6\u308a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u300c\u521d\u3081\u3066\u805e\u304f\u300d\u3092\u300c\u5c11\u3057\u77e5\u3063\u3066\u3044\u308b\u300d\u306b\u5909\u3048\u308b\u3053\u3068\u3067\u3001\u65b0\u5b66\u671f\u306e\u6388\u696d\u306b\u3082\u4f59\u88d5\u3092\u6301\u3063\u3066\u81e8\u3081\u307e\u3059\u3002\",\n\n        recommend:\n          \"\u65b0\u5b66\u5e74\u306e\u4e88\u7fd2\"\n\n      };\n\n    }\n\n\n    resultBadge.textContent =\n      result.badge;\n\n\n    resultTitle.textContent =\n      result.title;\n\n\n    resultDescription.textContent =\n      result.description;\n\n\n    resultRecommend.textContent =\n      result.recommend;\n\n\n    \/*\n      \u7d50\u679c\u307e\u3067\u30b9\u30af\u30ed\u30fc\u30eb\n    *\/\n\n    setTimeout(function () {\n\n      resultArea.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"center\"\n      });\n\n    }, 100);\n\n  }\n\n\n  \/* ---------------------------------------------\n     RETRY\n  --------------------------------------------- *\/\n\n  retryButton.addEventListener(\n    \"click\",\n    function () {\n\n      currentQuestion = 0;\n\n      totalScore = 0;\n\n\n      resultArea.style.display =\n        \"none\";\n\n\n      questionArea.style.display =\n        \"block\";\n\n\n      showQuestion(0);\n\n    }\n  );\n\n\n  \/* ---------------------------------------------\n     INITIALIZE\n  --------------------------------------------- *\/\n\n  showQuestion(0);\n\n});\n\n<\/script>\n\n\n\n<section class=\"spring2027-learning\" id=\"spring2027-learning\">\n\n  <div class=\"spring2027-learning-inner\">\n\n    <!-- HEADER -->\n    <div class=\"spring2027-section-heading spring2027-learning-heading\">\n\n      <p class=\"spring2027-section-kicker\">\n        WHAT WE CAN DO\n      <\/p>\n\n      <h2>\n        \u6625\u671f\u8b1b\u7fd2\u3067\u3001<br>\n        <span>\u3067\u304d\u308b\u3053\u3068\u3002<\/span>\n      <\/h2>\n\n      <p class=\"spring2027-section-lead\">\n        \u5fa9\u7fd2\u3082\u3001\u4e88\u7fd2\u3082\u3001\u30c6\u30b9\u30c8\u5bfe\u7b56\u3082\u3002<br>\n        \u4eca\u306e\u81ea\u5206\u306b\u5fc5\u8981\u306a\u5b66\u7fd2\u304b\u3089\u59cb\u3081\u307e\u3059\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <!-- LEARNING CARDS -->\n    <div class=\"spring2027-learning-grid\">\n\n\n      <!-- REVIEW -->\n      <article\n        class=\"spring2027-learning-card\"\n        data-learning-card\n      >\n\n        <button\n          type=\"button\"\n          class=\"spring2027-learning-card-trigger\"\n          aria-expanded=\"false\"\n        >\n\n          <span class=\"spring2027-learning-card-number\">\n            01\n          <\/span>\n\n          <span class=\"spring2027-learning-card-icon\">\n            \u21ba\n          <\/span>\n\n          <span class=\"spring2027-learning-card-label\">\n            REVIEW\n          <\/span>\n\n          <span class=\"spring2027-learning-card-title\">\n            \u65e2\u7fd2\u7bc4\u56f2\u306e<br>\n            \u7dcf\u5fa9\u7fd2\n          <\/span>\n\n          <span class=\"spring2027-learning-card-arrow\">\n            +\n          <\/span>\n\n        <\/button>\n\n\n        <div class=\"spring2027-learning-card-content\">\n\n          <p>\n            \u4eca\u307e\u3067\u5b66\u7fd2\u3057\u305f\u5185\u5bb9\u3092\u632f\u308a\u8fd4\u308a\u3001\n            \u82e6\u624b\u306a\u5358\u5143\u3084\u5fd8\u308c\u3066\u3044\u308b\u5185\u5bb9\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002\n          <\/p>\n\n          <ul>\n            <li>\u82e6\u624b\u5358\u5143\u306e\u78ba\u8a8d<\/li>\n            <li>\u5b66\u6821\u6559\u6750\u3092\u4f7f\u3063\u305f\u5fa9\u7fd2<\/li>\n            <li>\u57fa\u790e\u554f\u984c\u306e\u89e3\u304d\u76f4\u3057<\/li>\n          <\/ul>\n\n          <div class=\"spring2027-learning-card-point\">\n            <span>POINT<\/span>\n            \u300c\u308f\u304b\u3089\u306a\u3044\u300d\u3092\u65b0\u5b66\u5e74\u306b\u6301\u3061\u8d8a\u3055\u306a\u3044\u3002\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n      <!-- PREVIEW -->\n      <article\n        class=\"spring2027-learning-card\"\n        data-learning-card\n      >\n\n        <button\n          type=\"button\"\n          class=\"spring2027-learning-card-trigger\"\n          aria-expanded=\"false\"\n        >\n\n          <span class=\"spring2027-learning-card-number\">\n            02\n          <\/span>\n\n          <span class=\"spring2027-learning-card-icon\">\n            &#x2197;\n          <\/span>\n\n          <span class=\"spring2027-learning-card-label\">\n            PREVIEW\n          <\/span>\n\n          <span class=\"spring2027-learning-card-title\">\n            \u65b0\u5b66\u5e74\u306e<br>\n            \u4e88\u7fd2\n          <\/span>\n\n          <span class=\"spring2027-learning-card-arrow\">\n            +\n          <\/span>\n\n        <\/button>\n\n\n        <div class=\"spring2027-learning-card-content\">\n\n          <p>\n            4\u6708\u304b\u3089\u5b66\u6821\u3067\u5b66\u3076\u5185\u5bb9\u306b\u5148\u306b\u89e6\u308c\u3001\n            \u300c\u521d\u3081\u3066\u805e\u304f\u300d\u3092\u300c\u5c11\u3057\u77e5\u3063\u3066\u3044\u308b\u300d\u306b\u5909\u3048\u307e\u3059\u3002\n          <\/p>\n\n          <ul>\n            <li>\u65b0\u5b66\u5e74\u306e\u6559\u79d1\u66f8<\/li>\n            <li>\u65b0\u5358\u5143\u306e\u57fa\u672c<\/li>\n            <li>\u5b66\u6821\u6388\u696d\u306e\u5148\u53d6\u308a<\/li>\n          <\/ul>\n\n          <div class=\"spring2027-learning-card-point\">\n            <span>POINT<\/span>\n            \u65b0\u5b66\u671f\u306e\u6388\u696d\u306b\u3001\u5c11\u3057\u4f59\u88d5\u3092\u3064\u304f\u308b\u3002\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n      <!-- TEST -->\n      <article\n        class=\"spring2027-learning-card\"\n        data-learning-card\n      >\n\n        <button\n          type=\"button\"\n          class=\"spring2027-learning-card-trigger\"\n          aria-expanded=\"false\"\n        >\n\n          <span class=\"spring2027-learning-card-number\">\n            03\n          <\/span>\n\n          <span class=\"spring2027-learning-card-icon\">\n            \u2713\n          <\/span>\n\n          <span class=\"spring2027-learning-card-label\">\n            TEST\n          <\/span>\n\n          <span class=\"spring2027-learning-card-title\">\n            \u30c6\u30b9\u30c8\u306b<br>\n            \u5411\u3051\u305f\u5b66\u7fd2\n          <\/span>\n\n          <span class=\"spring2027-learning-card-arrow\">\n            +\n          <\/span>\n\n        <\/button>\n\n\n        <div class=\"spring2027-learning-card-content\">\n\n          <p>\n            \u3053\u308c\u307e\u3067\u306e\u5b66\u7fd2\u5185\u5bb9\u3092\u78ba\u8a8d\u3057\u306a\u304c\u3089\u3001\n            \u6b21\u306e\u30c6\u30b9\u30c8\u306b\u5411\u3051\u305f\u6e96\u5099\u3082\u9032\u3081\u307e\u3059\u3002\n          <\/p>\n\n          <ul>\n            <li>\u65e2\u7fd2\u7bc4\u56f2\u306e\u78ba\u8a8d<\/li>\n            <li>\u9593\u9055\u3044\u3084\u3059\u3044\u554f\u984c\u306e\u78ba\u8a8d<\/li>\n            <li>\u6b21\u56de\u30c6\u30b9\u30c8\u3078\u306e\u6e96\u5099<\/li>\n          <\/ul>\n\n          <div class=\"spring2027-learning-card-point\">\n            <span>POINT<\/span>\n            \u300c\u30c6\u30b9\u30c8\u524d\u3060\u3051\u300d\u306b\u306a\u3089\u306a\u3044\u5b66\u7fd2\u3092\u3002\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n\n      <!-- HIGH SCHOOL -->\n      <article\n        class=\"spring2027-learning-card spring2027-learning-card-special\"\n        data-learning-card\n      >\n\n        <button\n          type=\"button\"\n          class=\"spring2027-learning-card-trigger\"\n          aria-expanded=\"false\"\n        >\n\n          <span class=\"spring2027-learning-card-number\">\n            04\n          <\/span>\n\n          <span class=\"spring2027-learning-card-icon\">\n            \u2192\n          <\/span>\n\n          <span class=\"spring2027-learning-card-label\">\n            HIGH SCHOOL\n          <\/span>\n\n          <span class=\"spring2027-learning-card-title\">\n            \u9ad8\u6821\u6570\u5b66\u306e<br>\n            \u4e88\u7fd2\n          <\/span>\n\n          <span class=\"spring2027-learning-card-arrow\">\n            +\n          <\/span>\n\n        <\/button>\n\n\n        <div class=\"spring2027-learning-card-content\">\n\n          <p>\n            \u65b0\u9ad8\u68211\u5e74\u751f\u306f\u3001\n            \u9ad8\u68211\u5e74\u751f\u306e\u6570\u5b66\u3092\u5148\u53d6\u308a\u3067\u304d\u307e\u3059\u3002\n          <\/p>\n\n          <ul>\n            <li>\u4e57\u6cd5\u306e\u516c\u5f0f<\/li>\n            <li>\u516c\u5f0f\u3092\u5229\u7528\u3057\u305f\u8a08\u7b97<\/li>\n            <li>4\uff5e5\u6708\u9803\u306e\u5b66\u7fd2\u5185\u5bb9<\/li>\n            <li>\u9ad8\u6821\u304b\u3089\u306e\u8ab2\u984c\u30b5\u30dd\u30fc\u30c8<\/li>\n          <\/ul>\n\n          <div class=\"spring2027-learning-card-point\">\n            <span>POINT<\/span>\n            \u9ad8\u6821\u751f\u6d3b\u306e\u30b9\u30bf\u30fc\u30c8\u3092\u3001\u5c11\u3057\u3060\u3051\u5148\u53d6\u308a\u3002\n          <\/div>\n\n        <\/div>\n\n      <\/article>\n\n    <\/div>\n\n\n    <!-- MESSAGE -->\n    <div class=\"spring2027-learning-message\">\n\n      <div class=\"spring2027-learning-message-line\"><\/div>\n\n      <p>\n        \u3069\u308c\u304b\u4e00\u3064\u3060\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<br>\n        <strong>\n          \u300c\u5fa9\u7fd2\uff0b\u4e88\u7fd2\u300d\u306e\u3088\u3046\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002\n        <\/strong>\n      <\/p>\n\n      <div class=\"spring2027-learning-message-line\"><\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   STEP 4\n   LEARNING CARDS\n========================================================= *\/\n\n.spring2027-learning {\n\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-cream: #faf9f5;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n  --spring-muted: #69736d;\n\n  position: relative;\n\n  width: 100%;\n\n  overflow: hidden;\n\n  padding:\n    110px 0\n    120px;\n\n  background: #ffffff;\n\n  color: var(--spring-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n  box-sizing: border-box;\n}\n\n.spring2027-learning *,\n.spring2027-learning *::before,\n.spring2027-learning *::after {\n  box-sizing: border-box;\n}\n\n\n\/* ---------------------------------------------------------\n   INNER\n--------------------------------------------------------- *\/\n\n.spring2027-learning-inner {\n\n  width:\n    min(1080px, calc(100% - 48px));\n\n  margin: 0 auto;\n}\n\n\n\/* ---------------------------------------------------------\n   HEADING\n--------------------------------------------------------- *\/\n\n.spring2027-learning-heading {\n\n  max-width: 700px;\n\n  margin:\n    0 auto 65px;\n\n  text-align: center;\n}\n\n\n.spring2027-learning-heading h2 span {\n\n  color:\n    var(--spring-green-dark);\n}\n\n\n\/* ---------------------------------------------------------\n   GRID\n--------------------------------------------------------- *\/\n\n.spring2027-learning-grid {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(2, 1fr);\n\n  gap: 18px;\n\n  max-width: 920px;\n\n  margin: 0 auto;\n}\n\n\n\/* ---------------------------------------------------------\n   CARD\n--------------------------------------------------------- *\/\n\n.spring2027-learning-card {\n\n  position: relative;\n\n  overflow: hidden;\n\n  border:\n    1px solid\n    #e2e8e3;\n\n  border-radius: 24px;\n\n  background:\n    #ffffff;\n\n  transition:\n    border-color .25s ease,\n    box-shadow .25s ease;\n}\n\n\n.spring2027-learning-card.is-open {\n\n  border-color:\n    rgba(95,128,108,.38);\n\n  box-shadow:\n    0 16px 40px rgba(50,75,58,.08);\n}\n\n\n\/* SPECIAL *\/\n\n.spring2027-learning-card-special {\n\n  background:\n    linear-gradient(\n      145deg,\n      #f5f8f5 0%,\n      #edf3ee 100%\n    );\n\n  border-color:\n    rgba(95,128,108,.16);\n}\n\n\n\/* ---------------------------------------------------------\n   TRIGGER\n--------------------------------------------------------- *\/\n\n.spring2027-learning-card-trigger {\n\n  position: relative;\n\n  width: 100%;\n\n  min-height: 240px;\n\n  padding:\n    35px 38px;\n\n  border: none;\n\n  background: transparent;\n\n  color: inherit;\n\n  font-family: inherit;\n\n  text-align: left;\n\n  cursor: pointer;\n\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: flex-start;\n\n  justify-content: flex-end;\n\n}\n\n\n\/* NUMBER *\/\n\n.spring2027-learning-card-number {\n\n  position: absolute;\n\n  top: 25px;\n  left: 28px;\n\n  color:\n    #b5c3b9;\n\n  font-size: 10px;\n\n  font-weight: 800;\n\n  letter-spacing: .12em;\n}\n\n\n\/* ICON *\/\n\n.spring2027-learning-card-icon {\n\n  position: absolute;\n\n  top: 27px;\n  right: 28px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 46px;\n  height: 46px;\n\n  border-radius: 50%;\n\n  background:\n    var(--spring-green-light);\n\n  color:\n    var(--spring-green-dark);\n\n  font-size: 20px;\n\n  font-weight: 400;\n\n  transition:\n    transform .3s ease,\n    background .3s ease;\n}\n\n\n.spring2027-learning-card.is-open\n.spring2027-learning-card-icon {\n\n  transform:\n    rotate(45deg);\n\n  background:\n    var(--spring-green);\n\n  color:\n    #ffffff;\n}\n\n\n\/* LABEL *\/\n\n.spring2027-learning-card-label {\n\n  margin-bottom: 10px;\n\n  color:\n    var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n}\n\n\n\/* TITLE *\/\n\n.spring2027-learning-card-title {\n\n  color:\n    var(--spring-text);\n\n  font-size:\n    clamp(24px, 3vw, 32px);\n\n  line-height: 1.35;\n\n  font-weight: 800;\n\n  letter-spacing: -.03em;\n}\n\n\n\/* ARROW *\/\n\n.spring2027-learning-card-arrow {\n\n  position: absolute;\n\n  right: 38px;\n  bottom: 35px;\n\n  color:\n    var(--spring-muted);\n\n  font-size: 24px;\n\n  font-weight: 300;\n\n  transition:\n    transform .25s ease;\n}\n\n\n.spring2027-learning-card.is-open\n.spring2027-learning-card-arrow {\n\n  transform:\n    rotate(45deg);\n\n}\n\n\n\/* ---------------------------------------------------------\n   CONTENT\n--------------------------------------------------------- *\/\n\n.spring2027-learning-card-content {\n\n  max-height: 0;\n\n  overflow: hidden;\n\n  padding:\n    0 38px;\n\n  opacity: 0;\n\n  transition:\n    max-height .45s ease,\n    padding .45s ease,\n    opacity .3s ease;\n}\n\n\n.spring2027-learning-card.is-open\n.spring2027-learning-card-content {\n\n  max-height: 500px;\n\n  padding:\n    0 38px 35px;\n\n  opacity: 1;\n}\n\n\n.spring2027-learning-card-content > p {\n\n  margin:\n    0 0 22px;\n\n  color:\n    var(--spring-muted);\n\n  font-size: 13px;\n\n  line-height: 1.9;\n}\n\n\n.spring2027-learning-card-content ul {\n\n  display: grid;\n\n  gap: 8px;\n\n  margin: 0;\n\n  padding: 0;\n\n  list-style: none;\n}\n\n\n.spring2027-learning-card-content li {\n\n  position: relative;\n\n  padding-left: 20px;\n\n  color:\n    var(--spring-text);\n\n  font-size: 12px;\n\n  line-height: 1.6;\n}\n\n\n.spring2027-learning-card-content li::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n  top: .55em;\n\n  width: 7px;\n  height: 7px;\n\n  border-radius: 50%;\n\n  background:\n    var(--spring-green);\n}\n\n\n\/* POINT *\/\n\n.spring2027-learning-card-point {\n\n  margin-top: 25px;\n\n  padding:\n    15px 17px;\n\n  border-radius: 13px;\n\n  background:\n    rgba(95,128,108,.07);\n\n  color:\n    var(--spring-green-dark);\n\n  font-size: 12px;\n\n  line-height: 1.6;\n\n  font-weight: 700;\n}\n\n\n.spring2027-learning-card-point span {\n\n  display: block;\n\n  margin-bottom: 5px;\n\n  color:\n    var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n}\n\n\n\/* ---------------------------------------------------------\n   MESSAGE\n--------------------------------------------------------- *\/\n\n.spring2027-learning-message {\n\n  display: grid;\n\n  grid-template-columns:\n    1fr auto 1fr;\n\n  align-items: center;\n\n  gap: 25px;\n\n  max-width: 800px;\n\n  margin:\n    70px auto 0;\n}\n\n\n.spring2027-learning-message-line {\n\n  height: 1px;\n\n  background:\n    #dfe6e1;\n}\n\n\n.spring2027-learning-message p {\n\n  margin: 0;\n\n  color:\n    var(--spring-muted);\n\n  text-align: center;\n\n  font-size: 13px;\n\n  line-height: 1.8;\n\n  white-space: nowrap;\n}\n\n\n.spring2027-learning-message strong {\n\n  color:\n    var(--spring-text);\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 700px) {\n\n  .spring2027-learning {\n\n    padding:\n      75px 0\n      80px;\n  }\n\n\n  .spring2027-learning-inner {\n\n    width:\n      min(100% - 32px, 520px);\n  }\n\n\n  .spring2027-learning-heading {\n\n    margin-bottom: 42px;\n  }\n\n\n  .spring2027-learning-heading h2 {\n\n    font-size: 32px;\n  }\n\n\n  .spring2027-learning-grid {\n\n    grid-template-columns:\n      1fr;\n\n    gap: 12px;\n  }\n\n\n  .spring2027-learning-card {\n\n    border-radius: 20px;\n  }\n\n\n  .spring2027-learning-card-trigger {\n\n    min-height: 190px;\n\n    padding:\n      30px 25px;\n  }\n\n\n  .spring2027-learning-card-number {\n\n    top: 20px;\n    left: 22px;\n  }\n\n\n  .spring2027-learning-card-icon {\n\n    top: 20px;\n    right: 20px;\n\n    width: 40px;\n    height: 40px;\n\n    font-size: 18px;\n  }\n\n\n  .spring2027-learning-card-title {\n\n    font-size: 25px;\n  }\n\n\n  .spring2027-learning-card-arrow {\n\n    right: 25px;\n    bottom: 27px;\n\n    font-size: 20px;\n  }\n\n\n  .spring2027-learning-card.is-open\n  .spring2027-learning-card-content {\n\n    padding:\n      0 25px 28px;\n  }\n\n\n  .spring2027-learning-card-content {\n\n    padding:\n      0 25px;\n  }\n\n\n  .spring2027-learning-card-content > p {\n\n    font-size: 12px;\n\n    line-height: 1.85;\n  }\n\n\n  .spring2027-learning-card-content li {\n\n    font-size: 11px;\n  }\n\n\n  .spring2027-learning-message {\n\n    display: flex;\n\n    flex-direction: column;\n\n    gap: 15px;\n\n    margin-top: 45px;\n  }\n\n\n  .spring2027-learning-message-line {\n\n    width: 45px;\n  }\n\n\n  .spring2027-learning-message p {\n\n    white-space: normal;\n\n    font-size: 12px;\n  }\n\n}\n\n\n\/* ---------------------------------------------------------\n   REDUCED MOTION\n--------------------------------------------------------- *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .spring2027-learning-card,\n  .spring2027-learning-card-icon,\n  .spring2027-learning-card-arrow,\n  .spring2027-learning-card-content {\n\n    transition: none;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\ndocument.addEventListener(\n  \"DOMContentLoaded\",\n  function () {\n\n    const root =\n      document.querySelector(\n        \".spring2027-learning\"\n      );\n\n    if (!root) return;\n\n\n    const cards =\n      root.querySelectorAll(\n        \"[data-learning-card]\"\n      );\n\n\n    cards.forEach(function (card) {\n\n      const trigger =\n        card.querySelector(\n          \".spring2027-learning-card-trigger\"\n        );\n\n\n      trigger.addEventListener(\n        \"click\",\n        function () {\n\n          const isOpen =\n            card.classList.contains(\n              \"is-open\"\n            );\n\n\n          \/*\n            \u4ed6\u306e\u30ab\u30fc\u30c9\u3092\u9589\u3058\u308b\n          *\/\n\n          cards.forEach(function (otherCard) {\n\n            otherCard.classList.remove(\n              \"is-open\"\n            );\n\n            const otherTrigger =\n              otherCard.querySelector(\n                \".spring2027-learning-card-trigger\"\n              );\n\n            otherTrigger.setAttribute(\n              \"aria-expanded\",\n              \"false\"\n            );\n\n          });\n\n\n          \/*\n            \u62bc\u3057\u305f\u30ab\u30fc\u30c9\u304c\u9589\u3058\u3066\u3044\u305f\u5834\u5408\u3060\u3051\u958b\u304f\n          *\/\n\n          if (!isOpen) {\n\n            card.classList.add(\n              \"is-open\"\n            );\n\n            trigger.setAttribute(\n              \"aria-expanded\",\n              \"true\"\n            );\n\n          }\n\n        }\n      );\n\n    });\n\n  }\n);\n\n<\/script>\n\n\n\n<section class=\"spring2027-choice\" id=\"spring2027-choice\"> <div class=\"spring2027-choice-inner\"> <!-- HEADER --> <div class=\"spring2027-section-heading spring2027-choice-heading\"> <p class=\"spring2027-section-kicker\"> WHICH ONE DO YOU NEED? <\/p> <h2> \u6625\u4f11\u307f\u306e\u5b66\u7fd2\u3001<br> <span>\u3069\u3061\u3089\u3092\u9078\u3073\u307e\u3059\u304b\uff1f<\/span> <\/h2> <p class=\"spring2027-section-lead\"> \u300c\u5fa9\u7fd2\u300d\u3068\u300c\u4e88\u7fd2\u300d\u3002<br> \u3069\u3061\u3089\u306b\u3082\u3001\u65b0\u5b66\u671f\u3092\u5909\u3048\u308b\u7406\u7531\u304c\u3042\u308a\u307e\u3059\u3002 <\/p> <\/div> <!-- TAB --> <div class=\"spring2027-choice-tabs\" role=\"tablist\"> <button type=\"button\" class=\"spring2027-choice-tab is-active\" data-choice=\"review\" role=\"tab\" aria-selected=\"true\" > <span>01<\/span> \u5fa9\u7fd2\u3057\u305f\u3044 <\/button> <button type=\"button\" class=\"spring2027-choice-tab\" data-choice=\"preview\" role=\"tab\" aria-selected=\"false\" > <span>02<\/span> \u4e88\u7fd2\u3057\u305f\u3044 <\/button> <\/div> <!-- CONTENT --> <div class=\"spring2027-choice-panels\"> <!-- REVIEW PANEL --> <article class=\"spring2027-choice-panel is-active\" data-choice-panel=\"review\" > <div class=\"spring2027-choice-panel-visual\"> <span class=\"spring2027-choice-big-number\"> 01 <\/span> <p class=\"spring2027-choice-english\"> LOOK BACK <\/p> <h3> \u300c\u308f\u304b\u3089\u306a\u3044\u300d\u3092\u3001<br> \u6b21\u306e\u5b66\u5e74\u306b\u6301\u3061\u8d8a\u3055\u306a\u3044\u3002 <\/h3> <\/div> <div class=\"spring2027-choice-panel-body\"> <div class=\"spring2027-choice-question\"> <span>QUESTION<\/span> <p> \u3053\u3093\u306a\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u304b\uff1f <\/p> <\/div> <ul class=\"spring2027-choice-checklist\"> <li> <span>\u2713<\/span> \u30c6\u30b9\u30c8\u3067\u540c\u3058\u3088\u3046\u306a\u554f\u984c\u3092\u4f55\u5ea6\u3082\u9593\u9055\u3048\u308b <\/li> <li> <span>\u2713<\/span> \u524d\u306b\u7fd2\u3063\u305f\u5185\u5bb9\u3092\u5fd8\u308c\u3066\u3044\u308b <\/li> <li> <span>\u2713<\/span> \u82e6\u624b\u306a\u5358\u5143\u3092\u305d\u306e\u307e\u307e\u306b\u3057\u3066\u3044\u308b <\/li> <li> <span>\u2713<\/span> \u65b0\u3057\u3044\u5b66\u5e74\u306e\u52c9\u5f37\u306b\u3064\u3044\u3066\u3044\u3051\u308b\u304b\u4e0d\u5b89 <\/li> <\/ul> <div class=\"spring2027-choice-explanation\"> <p> \u65b0\u3057\u3044\u5b66\u5e74\u306e\u5b66\u7fd2\u306f\u3001 \u4eca\u307e\u3067\u5b66\u3093\u3060\u5185\u5bb9\u3092\u571f\u53f0\u306b\u3057\u3066\u9032\u3093\u3067\u3044\u304d\u307e\u3059\u3002 <\/p> <p> \u3060\u304b\u3089\u3053\u305d\u3001\u6625\u4f11\u307f\u306f <strong>\u300c\u5206\u304b\u3089\u306a\u3044\u3068\u3053\u308d\u3092\u78ba\u8a8d\u3059\u308b\u6642\u9593\u300d<\/strong> \u3068\u3057\u3066\u3082\u5927\u5207\u3067\u3059\u3002 <\/p> <\/div> <div class=\"spring2027-choice-conclusion\"> <span>\u3064\u307e\u308a\u2026<\/span> <strong> \u6625\u4f11\u307f\u306f\u300c\u5b66\u3073\u76f4\u3059\u300d\u30c1\u30e3\u30f3\u30b9\u3002 <\/strong> <\/div> <\/div> <\/article> <!-- PREVIEW PANEL --> <article class=\"spring2027-choice-panel\" data-choice-panel=\"preview\" > <div class=\"spring2027-choice-panel-visual\"> <span class=\"spring2027-choice-big-number\"> 02 <\/span> <p class=\"spring2027-choice-english\"> LOOK AHEAD <\/p> <h3> \u300c\u521d\u3081\u3066\u300d\u3092\u3001<br> \u300c\u77e5\u3063\u3066\u3044\u308b\u300d\u306b\u5909\u3048\u308b\u3002 <\/h3> <\/div> <div class=\"spring2027-choice-panel-body\"> <div class=\"spring2027-choice-question\"> <span>QUESTION<\/span> <p> \u3053\u3093\u306a\u3053\u3068\u3092\u601d\u3063\u305f\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u304b\uff1f <\/p> <\/div> <ul class=\"spring2027-choice-checklist\"> <li> <span>\u2713<\/span> \u65b0\u5b66\u671f\u306e\u6388\u696d\u3092\u5c11\u3057\u697d\u306b\u3057\u305f\u3044 <\/li> <li> <span>\u2713<\/span> \u30c6\u30b9\u30c8\u5bfe\u7b56\u306e\u6642\u9593\u3092\u78ba\u4fdd\u3057\u305f\u3044 <\/li> <li> <span>\u2713<\/span> \u65b0\u3057\u3044\u5185\u5bb9\u3092\u65e9\u3081\u306b\u77e5\u3063\u3066\u304a\u304d\u305f\u3044 <\/li> <li> <span>\u2713<\/span> \u300c\u6388\u696d\u3067\u521d\u3081\u3066\u805e\u304f\u300d\u3092\u6e1b\u3089\u3057\u305f\u3044 <\/li> <\/ul> <div class=\"spring2027-choice-explanation\"> <p> \u5148\u306b\u5b66\u7fd2\u3057\u305f\u3053\u3068\u304c\u3042\u308b\u3068\u3001 \u5b66\u6821\u306e\u6388\u696d\u3067\u5148\u751f\u306e\u8aac\u660e\u3092\u805e\u3044\u305f\u3068\u304d\u306b \u5185\u5bb9\u3092\u7406\u89e3\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002 <\/p> <p> \u3082\u3061\u308d\u3093\u3001\u3059\u3079\u3066\u3092\u5b8c\u74a7\u306b\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002 <strong>\u300c\u5c11\u3057\u77e5\u3063\u3066\u3044\u308b\u300d\u3060\u3051\u3067\u3082\u5927\u304d\u306a\u4e00\u6b69<\/strong> \u3067\u3059\u3002 <\/p> <\/div> <div class=\"spring2027-choice-conclusion\"> <span>\u3064\u307e\u308a\u2026<\/span> <strong> \u6625\u4f11\u307f\u306f\u300c\u4e00\u6b69\u5148\u3078\u9032\u3080\u300d\u30c1\u30e3\u30f3\u30b9\u3002 <\/strong> <\/div> <\/div> <\/article> <\/div> <!-- BOTTOM --> <div class=\"spring2027-choice-bottom\"> <div class=\"spring2027-choice-bottom-icon\"> + <\/div> <p> \u3082\u3061\u308d\u3093\u3001<strong>\u300c\u5fa9\u7fd2\u3057\u3066\u304b\u3089\u4e88\u7fd2\u3059\u308b\u300d<\/strong>\u3068\u3044\u3046 \u7d44\u307f\u5408\u308f\u305b\u3082\u3067\u304d\u307e\u3059\u3002 <\/p> <\/div> <\/div> <\/section> <style> \/* ========================================================= STEP 5 REVIEW \/ PREVIEW CHOICE ========================================================= *\/ .spring2027-choice { --spring-green: #5f806c; --spring-green-dark: #3f5f4d; --spring-green-light: #edf3ee; --spring-cream: #faf9f5; --spring-yellow: #e8c96a; --spring-text: #27332c; --spring-muted: #69736d; position: relative; width: 100%; overflow: hidden; padding: 115px 0 125px; background: #f8faf8; color: var(--spring-text); font-family: -apple-system, BlinkMacSystemFont, \"Noto Sans JP\", \"Yu Gothic\", \"Hiragino Kaku Gothic ProN\", sans-serif; box-sizing: border-box; } .spring2027-choice *, .spring2027-choice *::before, .spring2027-choice *::after { box-sizing: border-box; } \/* --------------------------------------------------------- INNER --------------------------------------------------------- *\/ .spring2027-choice-inner { width: min(1050px, calc(100% - 48px)); margin: 0 auto; } \/* --------------------------------------------------------- HEADER --------------------------------------------------------- *\/ .spring2027-choice-heading { max-width: 720px; margin: 0 auto 55px; text-align: center; } .spring2027-choice-heading h2 span { color: var(--spring-green-dark); } \/* --------------------------------------------------------- TABS --------------------------------------------------------- *\/ .spring2027-choice-tabs { display: flex; justify-content: center; gap: 8px; max-width: 500px; margin: 0 auto 35px; padding: 6px; border-radius: 999px; background: #e9efea; } .spring2027-choice-tab { flex: 1; min-height: 52px; border: none; border-radius: 999px; background: transparent; color: var(--spring-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease; } .spring2027-choice-tab span { margin-right: 8px; font-size: 9px; opacity: .65; letter-spacing: .08em; } .spring2027-choice-tab.is-active { background: #ffffff; color: var(--spring-green-dark); box-shadow: 0 5px 15px rgba(40,60,45,.08); } \/* --------------------------------------------------------- PANELS --------------------------------------------------------- *\/ .spring2027-choice-panels { position: relative; max-width: 950px; margin: 0 auto; } .spring2027-choice-panel { display: none; grid-template-columns: 38% 62%; min-height: 520px; overflow: hidden; border: 1px solid #e0e7e1; border-radius: 28px; background: #ffffff; box-shadow: 0 20px 55px rgba(40,60,45,.07); } .spring2027-choice-panel.is-active { display: grid; animation: springChoiceFade .35s ease; } @keyframes springChoiceFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } \/* --------------------------------------------------------- LEFT VISUAL --------------------------------------------------------- *\/ .spring2027-choice-panel-visual { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 50px; background: linear-gradient( 150deg, #eaf1eb 0%, #f5f8f5 100% ); overflow: hidden; } .spring2027-choice-panel-visual::before { content: \"\"; position: absolute; width: 230px; height: 230px; right: -100px; top: -70px; border-radius: 50%; border: 1px solid rgba(95,128,108,.12); } .spring2027-choice-panel-visual::after { content: \"\"; position: absolute; width: 160px; height: 160px; left: -80px; bottom: -50px; border-radius: 50%; border: 1px solid rgba(95,128,108,.10); } .spring2027-choice-big-number { position: absolute; top: 30px; right: 38px; color: rgba(95,128,108,.14); font-size: 70px; line-height: 1; font-weight: 800; letter-spacing: -.05em; } .spring2027-choice-english { position: relative; margin: 0 0 15px; color: var(--spring-green); font-size: 9px; font-weight: 800; letter-spacing: .22em; } .spring2027-choice-panel-visual h3 { position: relative; margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.5; font-weight: 800; letter-spacing: -.035em; } \/* --------------------------------------------------------- BODY --------------------------------------------------------- *\/ .spring2027-choice-panel-body { padding: 48px 50px; } .spring2027-choice-question { margin-bottom: 25px; } .spring2027-choice-question span { display: block; margin-bottom: 7px; color: var(--spring-green); font-size: 8px; font-weight: 800; letter-spacing: .18em; } .spring2027-choice-question p { margin: 0; font-size: 15px; font-weight: 700; } \/* --------------------------------------------------------- CHECKLIST --------------------------------------------------------- *\/ .spring2027-choice-checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .spring2027-choice-checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #f7f9f7; color: var(--spring-muted); font-size: 12px; line-height: 1.6; } .spring2027-choice-checklist li span { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--spring-green-light); color: var(--spring-green-dark); font-size: 10px; font-weight: 800; } \/* --------------------------------------------------------- EXPLANATION --------------------------------------------------------- *\/ .spring2027-choice-explanation { margin-top: 25px; padding-top: 22px; border-top: 1px solid #e5eae6; } .spring2027-choice-explanation p { margin: 0 0 12px; color: var(--spring-muted); font-size: 12px; line-height: 1.9; } .spring2027-choice-explanation p:last-child { margin-bottom: 0; } .spring2027-choice-explanation strong { color: var(--spring-text); font-weight: 800; } \/* --------------------------------------------------------- CONCLUSION --------------------------------------------------------- *\/ .spring2027-choice-conclusion { display: flex; align-items: center; gap: 12px; margin-top: 25px; padding: 16px 18px; border-radius: 13px; background: var(--spring-green-light); } .spring2027-choice-conclusion span { flex: 0 0 auto; color: var(--spring-green); font-size: 9px; font-weight: 800; letter-spacing: .1em; } .spring2027-choice-conclusion strong { color: var(--spring-green-dark); font-size: 13px; font-weight: 800; } \/* --------------------------------------------------------- BOTTOM --------------------------------------------------------- *\/ .spring2027-choice-bottom { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 50px auto 0; text-align: center; } .spring2027-choice-bottom-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--spring-yellow); color: #404537; font-size: 17px; } .spring2027-choice-bottom p { margin: 0; color: var(--spring-muted); font-size: 13px; line-height: 1.7; } .spring2027-choice-bottom strong { color: var(--spring-text); } \/* ========================================================= MOBILE ========================================================= *\/ @media (max-width: 700px) { .spring2027-choice { padding: 75px 0 80px; } .spring2027-choice-inner { width: min(100% - 32px, 520px); } .spring2027-choice-heading { margin-bottom: 38px; } .spring2027-choice-heading h2 { font-size: 32px; } .spring2027-choice-tabs { margin-bottom: 18px; } .spring2027-choice-tab { min-height: 48px; font-size: 12px; } .spring2027-choice-panel { grid-template-columns: 1fr; min-height: auto; border-radius: 21px; } .spring2027-choice-panel-visual { min-height: 260px; padding: 35px 27px; } .spring2027-choice-big-number { top: 22px; right: 25px; font-size: 55px; } .spring2027-choice-panel-visual h3 { font-size: 27px; } .spring2027-choice-panel-body { padding: 30px 24px 32px; } .spring2027-choice-question p { font-size: 14px; } .spring2027-choice-checklist { gap: 8px; } .spring2027-choice-checklist li { padding: 10px 11px; font-size: 11px; } .spring2027-choice-explanation { margin-top: 20px; padding-top: 18px; } .spring2027-choice-explanation p { font-size: 11px; line-height: 1.85; } .spring2027-choice-conclusion { align-items: flex-start; gap: 8px; margin-top: 20px; padding: 14px; } .spring2027-choice-conclusion strong { font-size: 12px; } .spring2027-choice-bottom { flex-direction: column; gap: 9px; margin-top: 38px; } .spring2027-choice-bottom p { font-size: 11px; } } \/* --------------------------------------------------------- REDUCED MOTION --------------------------------------------------------- *\/ @media (prefers-reduced-motion: reduce) { .spring2027-choice-panel.is-active { animation: none; } .spring2027-choice-tab { transition: none; } } <\/style> <script> document.addEventListener( \"DOMContentLoaded\", function () { const root = document.querySelector( \".spring2027-choice\" ); if (!root) return; const tabs = root.querySelectorAll( \".spring2027-choice-tab\" ); const panels = root.querySelectorAll( \".spring2027-choice-panel\" ); tabs.forEach(function (tab) { tab.addEventListener( \"click\", function () { const target = tab.dataset.choice; \/* \u30bf\u30d6\u306e\u72b6\u614b\u3092\u30ea\u30bb\u30c3\u30c8 *\/ tabs.forEach(function (item) { item.classList.remove( \"is-active\" ); item.setAttribute( \"aria-selected\", \"false\" ); }); panels.forEach(function (panel) { panel.classList.remove( \"is-active\" ); }); \/* \u9078\u629e\u3055\u308c\u305f\u30bf\u30d6\u3092\u8868\u793a *\/ tab.classList.add( \"is-active\" ); tab.setAttribute( \"aria-selected\", \"true\" ); const targetPanel = root.querySelector( '[data-choice-panel=\"' + target + '\"]' ); if (targetPanel) { targetPanel.classList.add( \"is-active\" ); } } ); }); } ); <\/script>\n\n\n\n<section class=\"spring2027-highschool\" id=\"spring2027-highschool\">\n\n  <div class=\"spring2027-highschool-inner\">\n\n    <div class=\"spring2027-highschool-heading\">\n\n      <div class=\"spring2027-highschool-badge\">\n        NEW HIGH SCHOOL STUDENT\n      <\/div>\n\n      <p class=\"spring2027-highschool-kicker\">\n        FOR FUTURE HIGH SCHOOL STUDENTS\n      <\/p>\n\n      <h2>\n        \u9ad8\u6821\u751f\u6d3b\u306e\u30b9\u30bf\u30fc\u30c8\u3092\u3001<br>\n        <span>\u5c11\u3057\u3060\u3051\u5148\u53d6\u308a\u3002<\/span>\n      <\/h2>\n\n      <p class=\"spring2027-highschool-lead\">\n        \u65b0\u9ad8\u68211\u5e74\u751f\u306f\u3001\u6625\u671f\u8b1b\u7fd2\u3067<br class=\"spring2027-sp-only\">\n        \u300c\u9ad8\u6821\u6570\u5b66\u300d\u3092\u59cb\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"spring2027-highschool-main\">\n\n      <div class=\"spring2027-highschool-copy\">\n\n        <p class=\"spring2027-highschool-number\">\n          01\n        <\/p>\n\n        <p class=\"spring2027-highschool-label\">\n          HIGH SCHOOL MATHEMATICS\n        <\/p>\n\n        <h3>\n          \u300c\u9ad8\u6821\u306e\u6570\u5b66\u3063\u3066<br>\n          \u3069\u3093\u306a\u611f\u3058\uff1f\u300d\n        <\/h3>\n\n        <p class=\"spring2027-highschool-text\">\n          \u4e2d\u5b66\u6821\u307e\u3067\u306e\u6570\u5b66\u3068\u306f\u5c11\u3057\u9055\u3046\u3001\n          \u9ad8\u6821\u6570\u5b66\u306e\u5b66\u7fd2\u306b\u6625\u4f11\u307f\u304b\u3089\u89e6\u308c\u3066\u307f\u307e\u3059\u3002\n        <\/p>\n\n        <p class=\"spring2027-highschool-text\">\n          4\u6708\u30fb5\u6708\u9803\u306b\u5b66\u6821\u3067\u5b66\u3076\u5185\u5bb9\u3092\u5148\u53d6\u308a\u3057\u3001\n          \u65b0\u5b66\u671f\u306e\u6388\u696d\u3092\u300c\u521d\u3081\u3066\u805e\u304f\u6388\u696d\u300d\u306b\u3057\u306a\u3044\u3053\u3068\u3092\u76ee\u6307\u3057\u307e\u3059\u3002\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"spring2027-highschool-subject\">\n\n        <div class=\"spring2027-highschool-subject-top\">\n          <span>TOPIC<\/span>\n          <strong>\u9ad8\u68211\u5e74 \u6570\u5b66<\/strong>\n        <\/div>\n\n\n        <div class=\"spring2027-highschool-topic\">\n\n          <div class=\"spring2027-highschool-topic-icon\">\n            \u00d7\n          <\/div>\n\n          <div>\n            <span>\n              MAIN TOPIC\n            <\/span>\n\n            <strong>\n              \u4e57\u6cd5\u306e\u516c\u5f0f\n            <\/strong>\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"spring2027-highschool-topic-list\">\n\n          <div>\n            <span>01<\/span>\n            \u4e57\u6cd5\u306e\u516c\u5f0f\u3092\u77e5\u308b\n          <\/div>\n\n          <div>\n            <span>02<\/span>\n            \u516c\u5f0f\u3092\u4f7f\u3063\u305f\u8a08\u7b97\n          <\/div>\n\n          <div>\n            <span>03<\/span>\n            \u4e57\u6cd5\u306e\u516c\u5f0f\u306e\u5229\u7528\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"spring2027-highschool-reason\">\n\n      <p class=\"spring2027-highschool-reason-kicker\">\n        WHY START EARLY?\n      <\/p>\n\n      <h3>\n        \u300c\u5c11\u3057\u77e5\u3063\u3066\u3044\u308b\u300d\u304c\u3001<br>\n        \u65b0\u5b66\u671f\u306e\u4f59\u88d5\u306b\u306a\u308b\u3002\n      <\/h3>\n\n      <p>\n        \u5b66\u6821\u306e\u6388\u696d\u3067\u521d\u3081\u3066\u805e\u304f\u5185\u5bb9\u3088\u308a\u3082\u3001\n        \u4e00\u5ea6\u89e6\u308c\u305f\u3053\u3068\u306e\u3042\u308b\u5185\u5bb9\u306e\u307b\u3046\u304c\n        \u5148\u751f\u306e\u8aac\u660e\u3084\u677f\u66f8\u304c\u982d\u306b\u5165\u308a\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002\n      <\/p>\n\n      <p>\n        \u3059\u3079\u3066\u3092\u5b8c\u74a7\u306b\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n        <strong>\u300c\u898b\u305f\u3053\u3068\u304c\u3042\u308b\u300d\u300c\u805e\u3044\u305f\u3053\u3068\u304c\u3042\u308b\u300d<\/strong>\n        \u3068\u3044\u3046\u72b6\u614b\u3092\u4f5c\u3063\u3066\u304a\u304f\u3060\u3051\u3067\u3082\u3001\n        \u9ad8\u6821\u751f\u6d3b\u306e\u30b9\u30bf\u30fc\u30c8\u3092\u652f\u3048\u308b\u6e96\u5099\u306b\u306a\u308a\u307e\u3059\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"spring2027-highschool-support\">\n\n      <div class=\"spring2027-highschool-support-icon\">\n        +\n      <\/div>\n\n      <div>\n\n        <p class=\"spring2027-highschool-support-label\">\n          ANOTHER SUPPORT\n        <\/p>\n\n        <h3>\n          \u9ad8\u6821\u304b\u3089\u306e\u8ab2\u984c\u3082\u30b5\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002\n        <\/h3>\n\n        <p>\n          \u9ad8\u6821\u5408\u683c\u5f8c\u3001\u9ad8\u6821\u304b\u3089\u8ab2\u984c\u304c\u51fa\u3055\u308c\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\n          \u5206\u304b\u3089\u306a\u3044\u554f\u984c\u304c\u3042\u308c\u3070\u3001\u6559\u5ba4\u3067\u4e00\u7dd2\u306b\u78ba\u8a8d\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"spring2027-highschool-bottom\">\n\n      <span>NEW START<\/span>\n\n      <p>\n        \u9ad8\u6821\u751f\u6d3b\u3092\u8fce\u3048\u308b\u524d\u306b\u3001<strong>\u300c\u6700\u521d\u306e\u4e00\u6b69\u300d<\/strong>\u3092\u3002\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n.spring2027-highschool {\n\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n  --spring-muted: #69736d;\n\n  position: relative;\n\n  width: 100%;\n\n  overflow: hidden;\n\n  padding: 115px 0 125px;\n\n  background:\n    linear-gradient(\n      145deg,\n      #eef4ef 0%,\n      #f8faf8 55%,\n      #edf3ee 100%\n    );\n\n  color: var(--spring-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n  box-sizing: border-box;\n}\n\n.spring2027-highschool *,\n.spring2027-highschool *::before,\n.spring2027-highschool *::after {\n  box-sizing: border-box;\n}\n\n\n\/* ---------------------------------------------------------\n   INNER\n--------------------------------------------------------- *\/\n\n.spring2027-highschool-inner {\n\n  width:\n    min(1050px, calc(100% - 48px));\n\n  margin: 0 auto;\n}\n\n\n\/* ---------------------------------------------------------\n   HEADER\n--------------------------------------------------------- *\/\n\n.spring2027-highschool-heading {\n\n  max-width: 780px;\n\n  margin: 0 auto 65px;\n\n  text-align: center;\n}\n\n\n.spring2027-highschool-badge {\n\n  display: inline-flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  margin-bottom: 22px;\n\n  padding: 8px 15px;\n\n  border-radius: 999px;\n\n  background: var(--spring-green-dark);\n\n  color: #ffffff;\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .16em;\n}\n\n\n.spring2027-highschool-kicker {\n\n  margin: 0 0 15px;\n\n  color: var(--spring-green);\n\n  font-size: 10px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n}\n\n\n.spring2027-highschool-heading h2 {\n\n  margin: 0;\n\n  font-size: clamp(34px, 5vw, 58px);\n\n  line-height: 1.3;\n\n  letter-spacing: -.04em;\n\n  font-weight: 800;\n}\n\n\n.spring2027-highschool-heading h2 span {\n\n  color: var(--spring-green-dark);\n}\n\n\n.spring2027-highschool-lead {\n\n  margin: 24px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 15px;\n\n  line-height: 1.9;\n}\n\n\n\/* ---------------------------------------------------------\n   MAIN\n--------------------------------------------------------- *\/\n\n.spring2027-highschool-main {\n\n  display: grid;\n\n  grid-template-columns: 1fr 1fr;\n\n  gap: 20px;\n\n  max-width: 950px;\n\n  margin: 0 auto;\n}\n\n\n\/* ---------------------------------------------------------\n   COPY\n--------------------------------------------------------- *\/\n\n.spring2027-highschool-copy {\n\n  position: relative;\n\n  min-height: 430px;\n\n  padding: 50px 48px;\n\n  overflow: hidden;\n\n  border-radius: 26px;\n\n  background: #ffffff;\n\n  border: 1px solid rgba(95,128,108,.12);\n\n  box-shadow:\n    0 18px 45px rgba(40,60,45,.06);\n}\n\n\n.spring2027-highschool-number {\n\n  position: absolute;\n\n  top: 25px;\n\n  right: 30px;\n\n  margin: 0;\n\n  color: rgba(95,128,108,.13);\n\n  font-size: 70px;\n\n  line-height: 1;\n\n  font-weight: 800;\n\n  letter-spacing: -.05em;\n}\n\n\n.spring2027-highschool-label {\n\n  margin: 0 0 18px;\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n}\n\n\n.spring2027-highschool-copy h3 {\n\n  margin: 0;\n\n  font-size: clamp(27px, 3.5vw, 38px);\n\n  line-height: 1.45;\n\n  font-weight: 800;\n\n  letter-spacing: -.035em;\n}\n\n\n.spring2027-highschool-text {\n\n  margin: 25px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 13px;\n\n  line-height: 2;\n}\n\n\n\/* ---------------------------------------------------------\n   SUBJECT\n--------------------------------------------------------- *\/\n\n.spring2027-highschool-subject {\n\n  min-height: 430px;\n\n  padding: 38px;\n\n  border-radius: 26px;\n\n  background:\n    var(--spring-green-dark);\n\n  color: #ffffff;\n\n  box-shadow:\n    0 18px 45px rgba(40,60,45,.10);\n}\n\n\n.spring2027-highschool-subject-top {\n\n  display: flex;\n\n  justify-content: space-between;\n\n  align-items: center;\n\n  padding-bottom: 20px;\n\n  border-bottom: 1px solid rgba(255,255,255,.18);\n}\n\n\n.spring2027-highschool-subject-top span {\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n  opacity: .65;\n}\n\n\n.spring2027-highschool-subject-top strong {\n\n  font-size: 13px;\n\n  font-weight: 700;\n}\n\n\n\/* TOPIC *\/\n\n.spring2027-highschool-topic {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 20px;\n\n  margin-top: 42px;\n}\n\n\n.spring2027-highschool-topic-icon {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 70px;\n\n  height: 70px;\n\n  flex: 0 0 auto;\n\n  border-radius: 20px;\n\n  background: rgba(255,255,255,.12);\n\n  color: var(--spring-yellow);\n\n  font-size: 32px;\n\n  font-weight: 300;\n}\n\n\n.spring2027-highschool-topic span {\n\n  display: block;\n\n  margin-bottom: 8px;\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n  opacity: .6;\n}\n\n\n.spring2027-highschool-topic strong {\n\n  display: block;\n\n  font-size: 25px;\n\n  font-weight: 800;\n}\n\n\n\/* LIST *\/\n\n.spring2027-highschool-topic-list {\n\n  display: grid;\n\n  gap: 11px;\n\n  margin-top: 42px;\n}\n\n\n.spring2027-highschool-topic-list div {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 13px;\n\n  padding: 12px 0;\n\n  border-top: 1px solid rgba(255,255,255,.12);\n\n  color: rgba(255,255,255,.88);\n\n  font-size: 12px;\n}\n\n\n.spring2027-highschool-topic-list span {\n\n  color: var(--spring-yellow);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .08em;\n}\n\n\n\/* ---------------------------------------------------------\n   REASON\n--------------------------------------------------------- *\/\n\n.spring2027-highschool-reason {\n\n  max-width: 760px;\n\n  margin: 85px auto 0;\n\n  text-align: center;\n}\n\n\n.spring2027-highschool-reason-kicker {\n\n  margin: 0 0 15px;\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n}\n\n\n.spring2027-highschool-reason h3 {\n\n  margin: 0;\n\n  font-size: clamp(27px, 4vw, 40px);\n\n  line-height: 1.45;\n\n  font-weight: 800;\n\n  letter-spacing: -.035em;\n}\n\n\n.spring2027-highschool-reason > p {\n\n  max-width: 680px;\n\n  margin: 22px auto 0;\n\n  color: var(--spring-muted);\n\n  font-size: 13px;\n\n  line-height: 2;\n}\n\n\n.spring2027-highschool-reason > p + p {\n\n  margin-top: 12px;\n}\n\n\n.spring2027-highschool-reason strong {\n\n  color: var(--spring-text);\n\n  font-weight: 800;\n}\n\n\n\/* ---------------------------------------------------------\n   SUPPORT\n--------------------------------------------------------- *\/\n\n.spring2027-highschool-support {\n\n  display: grid;\n\n  grid-template-columns: 70px 1fr;\n\n  align-items: center;\n\n  gap: 25px;\n\n  max-width: 760px;\n\n  margin: 65px auto 0;\n\n  padding: 30px 35px;\n\n  border-radius: 20px;\n\n  background: #ffffff;\n\n  border: 1px solid rgba(95,128,108,.12);\n}\n\n\n.spring2027-highschool-support-icon {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 60px;\n\n  height: 60px;\n\n  border-radius: 50%;\n\n  background: var(--spring-yellow);\n\n  color: #424839;\n\n  font-size: 25px;\n\n  font-weight: 300;\n}\n\n\n.spring2027-highschool-support-label {\n\n  margin: 0 0 6px;\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .17em;\n}\n\n\n.spring2027-highschool-support h3 {\n\n  margin: 0;\n\n  font-size: 17px;\n\n  font-weight: 800;\n}\n\n\n.spring2027-highschool-support p:last-child {\n\n  margin: 9px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 12px;\n\n  line-height: 1.8;\n}\n\n\n\/* ---------------------------------------------------------\n   BOTTOM\n--------------------------------------------------------- *\/\n\n.spring2027-highschool-bottom {\n\n  display: flex;\n\n  justify-content: center;\n\n  align-items: center;\n\n  gap: 12px;\n\n  margin-top: 65px;\n\n  text-align: center;\n}\n\n\n.spring2027-highschool-bottom span {\n\n  padding: 6px 10px;\n\n  border-radius: 999px;\n\n  background: var(--spring-yellow);\n\n  color: #404537;\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .12em;\n}\n\n\n.spring2027-highschool-bottom p {\n\n  margin: 0;\n\n  color: var(--spring-muted);\n\n  font-size: 13px;\n}\n\n\n.spring2027-highschool-bottom strong {\n\n  color: var(--spring-text);\n}\n\n\n\/* ---------------------------------------------------------\n   MOBILE\n--------------------------------------------------------- *\/\n\n@media (max-width: 700px) {\n\n  .spring2027-highschool {\n\n    padding: 75px 0 80px;\n  }\n\n\n  .spring2027-highschool-inner {\n\n    width:\n      min(100% - 32px, 520px);\n  }\n\n\n  .spring2027-highschool-heading {\n\n    margin-bottom: 42px;\n  }\n\n\n  .spring2027-highschool-badge {\n\n    margin-bottom: 17px;\n\n    font-size: 7px;\n  }\n\n\n  .spring2027-highschool-heading h2 {\n\n    font-size: 32px;\n  }\n\n\n  .spring2027-highschool-lead {\n\n    font-size: 13px;\n  }\n\n\n  .spring2027-highschool-main {\n\n    grid-template-columns: 1fr;\n\n    gap: 12px;\n  }\n\n\n  .spring2027-highschool-copy {\n\n    min-height: auto;\n\n    padding: 35px 25px;\n\n    border-radius: 21px;\n  }\n\n\n  .spring2027-highschool-number {\n\n    top: 18px;\n\n    right: 20px;\n\n    font-size: 55px;\n  }\n\n\n  .spring2027-highschool-label {\n\n    font-size: 8px;\n  }\n\n\n  .spring2027-highschool-copy h3 {\n\n    font-size: 28px;\n  }\n\n\n  .spring2027-highschool-text {\n\n    margin-top: 20px;\n\n    font-size: 12px;\n\n    line-height: 1.9;\n  }\n\n\n  .spring2027-highschool-subject {\n\n    min-height: auto;\n\n    padding: 30px 25px;\n\n    border-radius: 21px;\n  }\n\n\n  .spring2027-highschool-topic {\n\n    margin-top: 30px;\n  }\n\n\n  .spring2027-highschool-topic-icon {\n\n    width: 58px;\n\n    height: 58px;\n\n    border-radius: 16px;\n\n    font-size: 27px;\n  }\n\n\n  .spring2027-highschool-topic strong {\n\n    font-size: 22px;\n  }\n\n\n  .spring2027-highschool-topic-list {\n\n    margin-top: 30px;\n  }\n\n\n  .spring2027-highschool-reason {\n\n    margin-top: 60px;\n  }\n\n\n  .spring2027-highschool-reason h3 {\n\n    font-size: 27px;\n  }\n\n\n  .spring2027-highschool-reason > p {\n\n    font-size: 12px;\n\n    line-height: 1.9;\n  }\n\n\n  .spring2027-highschool-support {\n\n    grid-template-columns: 1fr;\n\n    gap: 15px;\n\n    margin-top: 45px;\n\n    padding: 25px 22px;\n\n    text-align: center;\n  }\n\n\n  .spring2027-highschool-support-icon {\n\n    margin: 0 auto;\n\n    width: 52px;\n\n    height: 52px;\n  }\n\n\n  .spring2027-highschool-support h3 {\n\n    font-size: 15px;\n  }\n\n\n  .spring2027-highschool-support p:last-child {\n\n    font-size: 11px;\n  }\n\n\n  .spring2027-highschool-bottom {\n\n    flex-direction: column;\n\n    gap: 8px;\n\n    margin-top: 45px;\n  }\n\n\n  .spring2027-highschool-bottom p {\n\n    font-size: 12px;\n  }\n\n}\n\n\n@media (prefers-reduced-motion: reduce) {\n\n  .spring2027-highschool * {\n\n    scroll-behavior: auto;\n  }\n\n}\n\n<\/style>\n\n\n\n<section class=\"spring2027-detail\" id=\"spring2027-detail\">\n\n  <div class=\"spring2027-detail-inner\">\n\n    <!-- =========================\n         HEADING\n    ========================== -->\n\n    <div class=\"spring2027-detail-heading\">\n\n      <p class=\"spring2027-section-kicker\">\n        COURSE INFORMATION\n      <\/p>\n\n      <h2>\n        \u6625\u671f\u8b1b\u7fd2\u306e<br>\n        <span>\u8a73\u7d30\u306f\u3053\u3061\u3089\u3002<\/span>\n      <\/h2>\n\n      <p class=\"spring2027-section-lead\">\n        \u65e5\u7a0b\u30fb\u6642\u9593\u30fb\u8cbb\u7528\u306a\u3069\u3001<br>\n        \u304a\u7533\u3057\u8fbc\u307f\u524d\u306b\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <!-- =========================\n         IMPORTANT INFORMATION\n    ========================== -->\n\n    <div class=\"spring2027-detail-important\">\n\n      <div class=\"spring2027-detail-important-item\">\n\n        <span class=\"spring2027-detail-important-label\">\n          DATE\n        <\/span>\n\n        <strong>\n          3\/22\uff5e4\/2\n        <\/strong>\n\n        <small>\n          \u516810\u65e5\u9593\n        <\/small>\n\n      <\/div>\n\n\n      <div class=\"spring2027-detail-important-divider\"><\/div>\n\n\n      <div class=\"spring2027-detail-important-item\">\n\n        <span class=\"spring2027-detail-important-label\">\n          PRICE\n        <\/span>\n\n        <strong>\n          2,000<small>\u5186<\/small>\n        <\/strong>\n\n        <span>\n          \uff0f 1\u56de\u30fb1\u65e5\n        <\/span>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =========================\n         01 SCHEDULE\n    ========================== -->\n\n    <div class=\"spring2027-detail-block\">\n\n      <div class=\"spring2027-detail-block-heading\">\n\n        <span class=\"spring2027-detail-block-number\">\n          01\n        <\/span>\n\n        <div>\n\n          <p>\n            SCHEDULE\n          <\/p>\n\n          <h3>\n            \u65e5\u7a0b\u30fb\u6642\u9593\n          <\/h3>\n\n        <\/div>\n\n      <\/div>\n\n\n      <details class=\"spring2027-detail-schedule\">\n\n        <summary class=\"spring2027-detail-schedule-trigger\">\n\n          <span class=\"spring2027-detail-schedule-date\">\n            2027\n          <\/span>\n\n          <span class=\"spring2027-detail-schedule-title\">\n            \u6625\u671f\u8b1b\u7fd2 \u5b9f\u65bd\u671f\u9593\n          <\/span>\n\n          <span class=\"spring2027-detail-schedule-arrow\">\n            +\n          <\/span>\n\n        <\/summary>\n\n\n        <div class=\"spring2027-detail-schedule-content\">\n\n          <div class=\"spring2027-detail-schedule-dates\">\n\n            <div class=\"spring2027-detail-date-card\">\n\n              <span>\n                PERIOD 01\n              <\/span>\n\n              <strong>\n                3\u670822\u65e5\uff5e26\u65e5\n              <\/strong>\n\n              <p>\n                \u6708\u66dc\u65e5\uff5e\u91d1\u66dc\u65e5\n              <\/p>\n\n            <\/div>\n\n\n            <div class=\"spring2027-detail-date-card\">\n\n              <span>\n                PERIOD 02\n              <\/span>\n\n              <strong>\n                3\u670829\u65e5\uff5e4\u67082\u65e5\n              <\/strong>\n\n              <p>\n                \u6708\u66dc\u65e5\uff5e\u91d1\u66dc\u65e5\n              <\/p>\n\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"spring2027-detail-time\">\n\n            <span>\n              TIME\n            <\/span>\n\n            <strong>\n              \u5348\u5f8c4\u6642 \uff5e \u5348\u5f8c9\u6642\n            <\/strong>\n\n            <p>\n              \u6700\u59273\u6642\u9593\u307e\u3067\u53d7\u8b1b\u3067\u304d\u307e\u3059\u3002\n            <\/p>\n\n          <\/div>\n\n\n          <p class=\"spring2027-detail-note\">\n            \u203b \u6625\u671f\u8b1b\u7fd2\u671f\u9593\u4e2d\u306f\u3001\u901a\u5e38\u6388\u696d\u3067\u306f\u306a\u304f\u6625\u671f\u8b1b\u7fd2\u3068\u3057\u3066\u53d7\u8b1b\u3057\u3066\u3044\u305f\u3060\u304d\u307e\u3059\u3002\n          <\/p>\n\n        <\/div>\n\n      <\/details>\n\n    <\/div>\n\n\n    <!-- =========================\n         02 BASIC INFORMATION\n    ========================== -->\n\n    <div class=\"spring2027-detail-block\">\n\n      <div class=\"spring2027-detail-block-heading\">\n\n        <span class=\"spring2027-detail-block-number\">\n          02\n        <\/span>\n\n        <div>\n\n          <p>\n            BASIC INFORMATION\n          <\/p>\n\n          <h3>\n            \u53c2\u52a0\u306b\u3064\u3044\u3066\n          <\/h3>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"spring2027-detail-grid\">\n\n\n        <div class=\"spring2027-detail-card\">\n\n          <span class=\"spring2027-detail-card-icon\">\n            \uffe5\n          <\/span>\n\n          <div>\n\n            <span class=\"spring2027-detail-card-label\">\n              PRICE\n            <\/span>\n\n            <strong>\n              2,000\u5186\n            <\/strong>\n\n            <p>\n              1\u56de\u30fb1\u65e5\u3042\u305f\u308a\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"spring2027-detail-card\">\n\n          <span class=\"spring2027-detail-card-icon\">\n            \u25ce\n          <\/span>\n\n          <div>\n\n            <span class=\"spring2027-detail-card-label\">\n              CAPACITY\n            <\/span>\n\n            <strong>\n              \u6700\u592716\u5e2d\n            <\/strong>\n\n            <p>\n              \u5404\u65e5\u5148\u7740\u9806\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"spring2027-detail-card\">\n\n          <span class=\"spring2027-detail-card-icon\">\n            \u4eba\n          <\/span>\n\n          <div>\n\n            <span class=\"spring2027-detail-card-label\">\n              TARGET\n            <\/span>\n\n            <strong>\n              \u5c0f\u5b66\u751f\uff5e\u4e2d\u5b663\u5e74\u751f\n            <\/strong>\n\n            <p>\n              \u65b0\u9ad8\u68211\u5e74\u751f\u3082\u53c2\u52a0\u3067\u304d\u307e\u3059\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"spring2027-detail-card\">\n\n          <span class=\"spring2027-detail-card-icon\">\n            \u25a1\n          <\/span>\n\n          <div>\n\n            <span class=\"spring2027-detail-card-label\">\n              MATERIALS\n            <\/span>\n\n            <strong>\n              \u5b66\u6821\u6559\u6750\u306a\u3069\n            <\/strong>\n\n            <p>\n              \u4e88\u7fd2\u6559\u6750\u306f\u6559\u5ba4\u3067\u6e96\u5099\u3057\u307e\u3059\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =========================\n         03 WHAT TO BRING\n    ========================== -->\n\n    <div class=\"spring2027-detail-block\">\n\n      <div class=\"spring2027-detail-block-heading\">\n\n        <span class=\"spring2027-detail-block-number\">\n          03\n        <\/span>\n\n        <div>\n\n          <p>\n            WHAT TO BRING\n          <\/p>\n\n          <h3>\n            \u6301\u3061\u7269\u306b\u3064\u3044\u3066\n          <\/h3>\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"spring2027-detail-bring\">\n\n        <div class=\"spring2027-detail-bring-item\">\n\n          <div class=\"spring2027-detail-bring-mark\">\n            R\n          <\/div>\n\n          <div>\n\n            <strong>\n              \u5fa9\u7fd2\u3092\u5e0c\u671b\u3059\u308b\u5834\u5408\n            <\/strong>\n\n            <p>\n              \u5b66\u6821\u3067\u914d\u5e03\u3055\u308c\u3066\u3044\u308b\u554f\u984c\u96c6\u306a\u3069\u3092\u304a\u6301\u3061\u304f\u3060\u3055\u3044\u3002\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"spring2027-detail-bring-item\">\n\n          <div class=\"spring2027-detail-bring-mark\">\n            P\n          <\/div>\n\n          <div>\n\n            <strong>\n              \u4e88\u7fd2\u3092\u5e0c\u671b\u3059\u308b\u5834\u5408\n            <\/strong>\n\n            <p>\n              \u6559\u5ba4\u3067\u6559\u79d1\u66f8\u30fb\u554f\u984c\u96c6\u306a\u3069\u3092\u6e96\u5099\u3057\u307e\u3059\u3002\n            <\/p>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =========================\n         NOTICE\n    ========================== -->\n\n    <div class=\"spring2027-detail-caution\">\n\n      <span>\n        NOTICE\n      <\/span>\n\n      <p>\n        \u53c2\u52a0\u72b6\u6cc1\u306b\u3088\u308a\u3001\u5b9a\u54e1\u306e\u90fd\u5408\u3067\u304a\u7533\u3057\u8fbc\u307f\u3092\n        \u304a\u65ad\u308a\u3059\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u3042\u3089\u304b\u3058\u3081\u3054\u4e86\u627f\u304f\u3060\u3055\u3044\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <!-- =========================\n         PAYMENT\n    ========================== -->\n\n    <div class=\"spring2027-detail-payment\">\n\n      <div class=\"spring2027-detail-payment-icon\">\n        \uffe5\n      <\/div>\n\n      <div>\n\n        <span>\n          PAYMENT\n        <\/span>\n\n        <h3>\n          \u53c2\u52a0\u8cbb\u306b\u3064\u3044\u3066\n        <\/h3>\n\n        <p>\n          \u6625\u671f\u8b1b\u7fd2\u306e\u53c2\u52a0\u8cbb\u306f\u3001\n          <strong>5\u6708\u5206\u306e\u6388\u696d\u6599\u8acb\u6c42\u6642\u306b\u5408\u7b97<\/strong>\n          \u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3059\u3002\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n.spring2027-detail {\n\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n  --spring-muted: #69736d;\n\n  position: relative;\n\n  width: 100%;\n\n  padding: 115px 0 125px;\n\n  background: #ffffff;\n\n  color: var(--spring-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n  box-sizing: border-box;\n}\n\n\n.spring2027-detail *,\n.spring2027-detail *::before,\n.spring2027-detail *::after {\n\n  box-sizing: border-box;\n\n}\n\n\n.spring2027-detail-inner {\n\n  width:\n    min(1050px, calc(100% - 48px));\n\n  margin: 0 auto;\n\n}\n\n\n.spring2027-detail-heading {\n\n  max-width: 700px;\n\n  margin: 0 auto 65px;\n\n  text-align: center;\n\n}\n\n\n.spring2027-section-kicker {\n\n  margin: 0 0 15px;\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n\n}\n\n\n.spring2027-detail-heading h2 {\n\n  margin: 0;\n\n  font-size: clamp(34px, 5vw, 55px);\n\n  line-height: 1.3;\n\n  letter-spacing: -.04em;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-detail-heading h2 span {\n\n  color: var(--spring-green-dark);\n\n}\n\n\n.spring2027-section-lead {\n\n  margin: 24px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 14px;\n\n  line-height: 1.9;\n\n}\n\n\n\/* IMPORTANT *\/\n\n.spring2027-detail-important {\n\n  display: grid;\n\n  grid-template-columns: 1fr auto 1fr;\n\n  align-items: center;\n\n  max-width: 850px;\n\n  margin: 0 auto 70px;\n\n  padding: 38px 45px;\n\n  border-radius: 24px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #edf4ee 0%,\n      #f7faf7 100%\n    );\n\n  border: 1px solid rgba(95,128,108,.13);\n\n}\n\n\n.spring2027-detail-important-item {\n\n  text-align: center;\n\n}\n\n\n.spring2027-detail-important-label {\n\n  display: block;\n\n  margin-bottom: 9px;\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n\n}\n\n\n.spring2027-detail-important-item strong {\n\n  display: block;\n\n  color: var(--spring-green-dark);\n\n  font-size: 30px;\n\n  line-height: 1.2;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-detail-important-item strong small {\n\n  font-size: 15px;\n\n}\n\n\n.spring2027-detail-important-item > small,\n.spring2027-detail-important-item > span {\n\n  display: block;\n\n  margin-top: 7px;\n\n  color: var(--spring-muted);\n\n  font-size: 11px;\n\n}\n\n\n.spring2027-detail-important-divider {\n\n  width: 1px;\n\n  height: 70px;\n\n  background: #d6e0d8;\n\n}\n\n\n\/* BLOCK *\/\n\n.spring2027-detail-block {\n\n  max-width: 950px;\n\n  margin: 0 auto 70px;\n\n}\n\n\n.spring2027-detail-block-heading {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 18px;\n\n  margin-bottom: 25px;\n\n}\n\n\n.spring2027-detail-block-number {\n\n  color: #b5c3b9;\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  letter-spacing: .08em;\n\n}\n\n\n.spring2027-detail-block-heading p {\n\n  margin: 0 0 4px;\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n}\n\n\n.spring2027-detail-block-heading h3 {\n\n  margin: 0;\n\n  font-size: 24px;\n\n  font-weight: 800;\n\n  letter-spacing: -.03em;\n\n}\n\n\n\/* SCHEDULE *\/\n\n.spring2027-detail-schedule {\n\n  overflow: hidden;\n\n  border: 1px solid #e1e8e2;\n\n  border-radius: 20px;\n\n  background: #ffffff;\n\n}\n\n\n.spring2027-detail-schedule summary {\n\n  list-style: none;\n\n}\n\n\n.spring2027-detail-schedule summary::-webkit-details-marker {\n\n  display: none;\n\n}\n\n\n.spring2027-detail-schedule-trigger {\n\n  display: grid;\n\n  grid-template-columns: 100px 1fr 40px;\n\n  align-items: center;\n\n  width: 100%;\n\n  padding: 27px 30px;\n\n  cursor: pointer;\n\n  user-select: none;\n\n}\n\n\n.spring2027-detail-schedule-date {\n\n  color: var(--spring-green);\n\n  font-size: 14px;\n\n  font-weight: 800;\n\n  letter-spacing: .05em;\n\n}\n\n\n.spring2027-detail-schedule-title {\n\n  font-size: 15px;\n\n  font-weight: 700;\n\n}\n\n\n.spring2027-detail-schedule-arrow {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 34px;\n\n  height: 34px;\n\n  border-radius: 50%;\n\n  background: var(--spring-green-light);\n\n  color: var(--spring-green-dark);\n\n  font-size: 20px;\n\n  transition:\n    transform .3s ease,\n    background .3s ease,\n    color .3s ease;\n\n}\n\n\n.spring2027-detail-schedule[open]\n.spring2027-detail-schedule-arrow {\n\n  transform: rotate(45deg);\n\n  background: var(--spring-green);\n\n  color: #ffffff;\n\n}\n\n\n.spring2027-detail-schedule-content {\n\n  padding: 5px 30px 30px;\n\n}\n\n\n.spring2027-detail-schedule-dates {\n\n  display: grid;\n\n  grid-template-columns: 1fr 1fr;\n\n  gap: 12px;\n\n}\n\n\n.spring2027-detail-date-card {\n\n  padding: 22px;\n\n  border-radius: 15px;\n\n  background: #f7f9f7;\n\n}\n\n\n.spring2027-detail-date-card span,\n.spring2027-detail-time span {\n\n  display: block;\n\n  margin-bottom: 8px;\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n\n}\n\n\n.spring2027-detail-date-card strong {\n\n  display: block;\n\n  font-size: 20px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-detail-date-card p {\n\n  margin: 5px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 11px;\n\n}\n\n\n.spring2027-detail-time {\n\n  margin-top: 12px;\n\n  padding: 22px;\n\n  border-radius: 15px;\n\n  background: var(--spring-green-light);\n\n}\n\n\n.spring2027-detail-time strong {\n\n  display: block;\n\n  color: var(--spring-green-dark);\n\n  font-size: 21px;\n\n}\n\n\n.spring2027-detail-time p {\n\n  margin: 6px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 11px;\n\n}\n\n\n.spring2027-detail-note {\n\n  margin: 18px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 10px;\n\n  line-height: 1.7;\n\n}\n\n\n\/* BASIC *\/\n\n.spring2027-detail-grid {\n\n  display: grid;\n\n  grid-template-columns: repeat(2, 1fr);\n\n  gap: 12px;\n\n}\n\n\n.spring2027-detail-card {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 18px;\n\n  min-height: 125px;\n\n  padding: 25px;\n\n  border: 1px solid #e2e8e3;\n\n  border-radius: 18px;\n\n  background: #ffffff;\n\n}\n\n\n.spring2027-detail-card-icon {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 48px;\n\n  height: 48px;\n\n  flex: 0 0 auto;\n\n  border-radius: 14px;\n\n  background: var(--spring-green-light);\n\n  color: var(--spring-green-dark);\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  text-align: center;\n\n}\n\n\n.spring2027-detail-card-label {\n\n  display: block;\n\n  margin-bottom: 5px;\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n\n}\n\n\n.spring2027-detail-card strong {\n\n  display: block;\n\n  font-size: 16px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-detail-card p {\n\n  margin: 5px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 10px;\n\n  line-height: 1.6;\n\n}\n\n\n\/* BRING *\/\n\n.spring2027-detail-bring {\n\n  display: grid;\n\n  grid-template-columns: 1fr 1fr;\n\n  gap: 12px;\n\n}\n\n\n.spring2027-detail-bring-item {\n\n  display: flex;\n\n  gap: 18px;\n\n  padding: 25px;\n\n  border-radius: 18px;\n\n  background: #f7f9f7;\n\n}\n\n\n.spring2027-detail-bring-mark {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 40px;\n\n  height: 40px;\n\n  flex: 0 0 auto;\n\n  border-radius: 12px;\n\n  background: #ffffff;\n\n  color: var(--spring-green);\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-detail-bring-item strong {\n\n  display: block;\n\n  margin: 2px 0 7px;\n\n  font-size: 13px;\n\n}\n\n\n.spring2027-detail-bring-item p {\n\n  margin: 0;\n\n  color: var(--spring-muted);\n\n  font-size: 11px;\n\n  line-height: 1.8;\n\n}\n\n\n\/* NOTICE *\/\n\n.spring2027-detail-caution {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 18px;\n\n  max-width: 950px;\n\n  margin: 0 auto 35px;\n\n  padding: 20px 25px;\n\n  border-left: 3px solid var(--spring-yellow);\n\n  background: #faf9f3;\n\n}\n\n\n.spring2027-detail-caution span {\n\n  flex: 0 0 auto;\n\n  color: #9a8641;\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n\n}\n\n\n.spring2027-detail-caution p {\n\n  margin: 0;\n\n  color: var(--spring-muted);\n\n  font-size: 11px;\n\n  line-height: 1.7;\n\n}\n\n\n\/* PAYMENT *\/\n\n.spring2027-detail-payment {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 22px;\n\n  max-width: 950px;\n\n  margin: 0 auto;\n\n  padding: 30px;\n\n  border-radius: 20px;\n\n  background: var(--spring-green-dark);\n\n  color: #ffffff;\n\n}\n\n\n.spring2027-detail-payment-icon {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 55px;\n\n  height: 55px;\n\n  flex: 0 0 auto;\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,.12);\n\n  color: var(--spring-yellow);\n\n  font-size: 20px;\n\n}\n\n\n.spring2027-detail-payment span {\n\n  display: block;\n\n  margin-bottom: 5px;\n\n  color: rgba(255,255,255,.6);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .17em;\n\n}\n\n\n.spring2027-detail-payment h3 {\n\n  margin: 0;\n\n  font-size: 16px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-detail-payment p {\n\n  margin: 7px 0 0;\n\n  color: rgba(255,255,255,.78);\n\n  font-size: 11px;\n\n  line-height: 1.7;\n\n}\n\n\n.spring2027-detail-payment strong {\n\n  color: #ffffff;\n\n}\n\n\n\/* MOBILE *\/\n\n@media (max-width: 700px) {\n\n  .spring2027-detail {\n\n    padding: 75px 0 80px;\n\n  }\n\n\n  .spring2027-detail-inner {\n\n    width:\n      min(100% - 32px, 520px);\n\n  }\n\n\n  .spring2027-detail-heading {\n\n    margin-bottom: 42px;\n\n  }\n\n\n  .spring2027-detail-heading h2 {\n\n    font-size: 32px;\n\n  }\n\n\n  .spring2027-detail-important {\n\n    grid-template-columns: 1fr;\n\n    gap: 22px;\n\n    margin-bottom: 50px;\n\n    padding: 28px 20px;\n\n    border-radius: 20px;\n\n  }\n\n\n  .spring2027-detail-important-divider {\n\n    width: 50px;\n\n    height: 1px;\n\n    margin: 0 auto;\n\n  }\n\n\n  .spring2027-detail-important-item strong {\n\n    font-size: 28px;\n\n  }\n\n\n  .spring2027-detail-block {\n\n    margin-bottom: 50px;\n\n  }\n\n\n  .spring2027-detail-block-heading {\n\n    gap: 13px;\n\n    margin-bottom: 18px;\n\n  }\n\n\n  .spring2027-detail-block-heading h3 {\n\n    font-size: 21px;\n\n  }\n\n\n  .spring2027-detail-schedule-trigger {\n\n    grid-template-columns: 65px 1fr 35px;\n\n    padding: 22px 18px;\n\n  }\n\n\n  .spring2027-detail-schedule-title {\n\n    font-size: 13px;\n\n  }\n\n\n  .spring2027-detail-schedule-content {\n\n    padding: 5px 18px 20px;\n\n  }\n\n\n  .spring2027-detail-schedule-dates {\n\n    grid-template-columns: 1fr;\n\n  }\n\n\n  .spring2027-detail-date-card,\n  .spring2027-detail-time {\n\n    padding: 18px;\n\n  }\n\n\n  .spring2027-detail-date-card strong,\n  .spring2027-detail-time strong {\n\n    font-size: 18px;\n\n  }\n\n\n  .spring2027-detail-grid {\n\n    grid-template-columns: 1fr;\n\n  }\n\n\n  .spring2027-detail-card {\n\n    min-height: 105px;\n\n    padding: 20px;\n\n  }\n\n\n  .spring2027-detail-card strong {\n\n    font-size: 15px;\n\n  }\n\n\n  .spring2027-detail-bring {\n\n    grid-template-columns: 1fr;\n\n  }\n\n\n  .spring2027-detail-bring-item {\n\n    padding: 20px;\n\n  }\n\n\n  .spring2027-detail-caution {\n\n    align-items: flex-start;\n\n    flex-direction: column;\n\n    gap: 8px;\n\n    padding: 18px;\n\n  }\n\n\n  .spring2027-detail-payment {\n\n    align-items: flex-start;\n\n    padding: 23px 20px;\n\n    gap: 15px;\n\n  }\n\n\n  .spring2027-detail-payment-icon {\n\n    width: 45px;\n\n    height: 45px;\n\n  }\n\n\n  .spring2027-detail-payment h3 {\n\n    font-size: 14px;\n\n  }\n\n\n  .spring2027-detail-payment p {\n\n    font-size: 10px;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<section class=\"spring2027-learning\" id=\"spring2027-learning\">\n\n  <div class=\"spring2027-learning-inner\">\n\n    <!-- =========================\n         HEADING\n    ========================== -->\n\n    <div class=\"spring2027-learning-heading\">\n\n      <p class=\"spring2027-learning-kicker\">\n        WHAT WILL YOU LEARN?\n      <\/p>\n\n      <h2>\n        \u6625\u4f11\u307f\u306e\u6642\u9593\u3092\u3001<br>\n        <span>\u3069\u3046\u4f7f\u3046\uff1f<\/span>\n      <\/h2>\n\n      <p>\n        \u6625\u671f\u8b1b\u7fd2\u3067\u306f\u3001\u4e00\u4eba\u3072\u3068\u308a\u306e\u76ee\u7684\u306b\u5408\u308f\u305b\u3066<br>\n        \u300c\u5fa9\u7fd2\u300d\u300c\u4e88\u7fd2\u300d\u300c\u30c6\u30b9\u30c8\u5bfe\u7b56\u300d\u304b\u3089\u5b66\u7fd2\u5185\u5bb9\u3092\u8003\u3048\u307e\u3059\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <!-- =========================\n         INTRO\n    ========================== -->\n\n    <div class=\"spring2027-learning-intro\">\n\n      <div class=\"spring2027-learning-intro-number\">\n        01\n      <\/div>\n\n      <div>\n\n        <span>\n          SPRING = RESET & START\n        <\/span>\n\n        <h3>\n          \u6625\u4f11\u307f\u306f\u3001<br>\n          \u300c\u30ea\u30bb\u30c3\u30c8\u300d\u3068\u300c\u30b9\u30bf\u30fc\u30c8\u300d\u306e\u6642\u9593\u3002\n        <\/h3>\n\n        <p>\n          \u3053\u308c\u307e\u3067\u306e\u5b66\u7fd2\u3092\u632f\u308a\u8fd4\u308b\u3053\u3068\u3082\u3001\n          \u65b0\u3057\u3044\u5b66\u5e74\u306e\u5b66\u7fd2\u3092\u5148\u53d6\u308a\u3059\u308b\u3053\u3068\u3082\u3001\n          \u6625\u4f11\u307f\u3060\u304b\u3089\u3053\u305d\u3067\u304d\u308b\u3053\u3068\u3067\u3059\u3002\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =========================\n         LEARNING OPTIONS\n    ========================== -->\n\n    <div class=\"spring2027-learning-options\">\n\n\n      <!-- 01 REVIEW -->\n\n      <details class=\"spring2027-learning-item\">\n\n        <summary>\n\n          <div class=\"spring2027-learning-item-number\">\n            01\n          <\/div>\n\n          <div class=\"spring2027-learning-item-main\">\n\n            <span>\n              REVIEW\n            <\/span>\n\n            <h3>\n              \u307e\u305a\u306f\u3001\u5fa9\u7fd2\u3002\n            <\/h3>\n\n            <p>\n              \u300c\u5206\u304b\u3063\u305f\u3064\u3082\u308a\u300d\u3092\u300c\u3067\u304d\u308b\u300d\u306b\u5909\u3048\u308b\u3002\n            <\/p>\n\n          <\/div>\n\n          <div class=\"spring2027-learning-item-arrow\">\n            +\n          <\/div>\n\n        <\/summary>\n\n\n        <div class=\"spring2027-learning-item-content\">\n\n          <div class=\"spring2027-learning-item-copy\">\n\n            <h4>\n              \u6b21\u306e\u5b66\u5e74\u3078\u9032\u3080\u524d\u306b\u3001<br>\n              \u4eca\u307e\u3067\u306e\u5b66\u7fd2\u3092\u6574\u7406\u3059\u308b\u3002\n            <\/h4>\n\n            <p>\n              \u65b0\u3057\u3044\u5b66\u5e74\u306e\u5b66\u7fd2\u306f\u3001\u3053\u308c\u307e\u3067\u306b\u5b66\u3093\u3060\u5185\u5bb9\u3092\u571f\u53f0\u3068\u3057\u3066\u9032\u3093\u3067\u3044\u304d\u307e\u3059\u3002\n              \u82e6\u624b\u306a\u3068\u3053\u308d\u3084\u3001\u5fd8\u308c\u3066\u3057\u307e\u3063\u305f\u3068\u3053\u308d\u3092\u6625\u4f11\u307f\u306e\u3046\u3061\u306b\u78ba\u8a8d\u3057\u3066\u304a\u304f\u3053\u3068\u3067\u3001\n              \u65b0\u5b66\u671f\u304b\u3089\u306e\u5b66\u7fd2\u3092\u30b9\u30e0\u30fc\u30ba\u306b\u30b9\u30bf\u30fc\u30c8\u3067\u304d\u307e\u3059\u3002\n            <\/p>\n\n          <\/div>\n\n          <div class=\"spring2027-learning-point\">\n\n            <span>\n              POINT\n            <\/span>\n\n            <strong>\n              \u82e6\u624b\u3092<br>\n              \u6301\u3061\u8d8a\u3055\u306a\u3044\u3002\n            <\/strong>\n\n          <\/div>\n\n        <\/div>\n\n      <\/details>\n\n\n      <!-- 02 PREVIEW -->\n\n      <details class=\"spring2027-learning-item\">\n\n        <summary>\n\n          <div class=\"spring2027-learning-item-number\">\n            02\n          <\/div>\n\n          <div class=\"spring2027-learning-item-main\">\n\n            <span>\n              PREVIEW\n            <\/span>\n\n            <h3>\n              \u4e00\u6b69\u5148\u3078\u3001\u4e88\u7fd2\u3002\n            <\/h3>\n\n            <p>\n              \u65b0\u5b66\u5e74\u306e\u6388\u696d\u3092\u3001\u5c11\u3057\u3060\u3051\u5148\u306b\u77e5\u3063\u3066\u304a\u304f\u3002\n            <\/p>\n\n          <\/div>\n\n          <div class=\"spring2027-learning-item-arrow\">\n            +\n          <\/div>\n\n        <\/summary>\n\n\n        <div class=\"spring2027-learning-item-content\">\n\n          <div class=\"spring2027-learning-item-copy\">\n\n            <h4>\n              \u300c\u521d\u3081\u3066\u898b\u308b\u300d\u3092\u3001<br>\n              \u300c\u898b\u305f\u3053\u3068\u304c\u3042\u308b\u300d\u306b\u3002\n            <\/h4>\n\n            <p>\n              \u65b0\u5b66\u671f\u306e\u6388\u696d\u3067\u521d\u3081\u3066\u5b66\u3076\u3088\u308a\u3082\u3001\n              \u3042\u3089\u304b\u3058\u3081\u5185\u5bb9\u306b\u89e6\u308c\u3066\u304a\u304f\u3053\u3068\u3067\u3001\u6388\u696d\u4e2d\u306b\u5148\u751f\u306e\u8aac\u660e\u3092\u805e\u304f\u4f59\u88d5\u304c\u751f\u307e\u308c\u307e\u3059\u3002\n              \u6625\u4f11\u307f\u306e\u3046\u3061\u306b1\u5358\u5143\u30012\u5358\u5143\u3068\u5148\u3078\u9032\u3081\u3066\u304a\u304f\u3053\u3068\u3092\u76ee\u6307\u3057\u307e\u3059\u3002\n            <\/p>\n\n          <\/div>\n\n          <div class=\"spring2027-learning-point\">\n\n            <span>\n              POINT\n            <\/span>\n\n            <strong>\n              \u65b0\u5b66\u671f\u3092<br>\n              \u5c11\u3057\u697d\u306b\u3002\n            <\/strong>\n\n          <\/div>\n\n        <\/div>\n\n      <\/details>\n\n\n      <!-- 03 TEST -->\n\n      <details class=\"spring2027-learning-item\">\n\n        <summary>\n\n          <div class=\"spring2027-learning-item-number\">\n            03\n          <\/div>\n\n          <div class=\"spring2027-learning-item-main\">\n\n            <span>\n              TEST PREPARATION\n            <\/span>\n\n            <h3>\n              \u30c6\u30b9\u30c8\u5bfe\u7b56\u3078\u3002\n            <\/h3>\n\n            <p>\n              1\u5b66\u671f\u306e\u30c6\u30b9\u30c8\u306b\u5411\u3051\u305f\u6e96\u5099\u3092\u59cb\u3081\u308b\u3002\n            <\/p>\n\n          <\/div>\n\n          <div class=\"spring2027-learning-item-arrow\">\n            +\n          <\/div>\n\n        <\/summary>\n\n\n        <div class=\"spring2027-learning-item-content\">\n\n          <div class=\"spring2027-learning-item-copy\">\n\n            <h4>\n              \u30c6\u30b9\u30c8\u524d\u306b\u614c\u3066\u306a\u3044\u305f\u3081\u306b\u3001<br>\n              \u65e9\u3081\u306b\u6e96\u5099\u3059\u308b\u3002\n            <\/h4>\n\n            <p>\n              \u30c6\u30b9\u30c8\u5bfe\u7b56\u3092\u5341\u5206\u306b\u884c\u3046\u305f\u3081\u306b\u306f\u3001\n              \u30c6\u30b9\u30c8\u7bc4\u56f2\u306e\u5b66\u7fd2\u3092\u65e9\u3081\u306b\u7d42\u3048\u3066\u304a\u304f\u3053\u3068\u304c\u5927\u5207\u3067\u3059\u3002\n              \u6625\u4f11\u307f\u304b\u3089\u65b0\u5b66\u5e74\u306e\u5b66\u7fd2\u3092\u9032\u3081\u3066\u304a\u304f\u3053\u3068\u3067\u3001\n              1\u5b66\u671f\u306e\u30c6\u30b9\u30c8\u524d\u306b\u5fa9\u7fd2\u3084\u6f14\u7fd2\u3078\u6642\u9593\u3092\u4f7f\u3044\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002\n            <\/p>\n\n          <\/div>\n\n          <div class=\"spring2027-learning-point\">\n\n            <span>\n              POINT\n            <\/span>\n\n            <strong>\n              \u30c6\u30b9\u30c8\u524d\u306e<br>\n              \u6642\u9593\u3092\u3064\u304f\u308b\u3002\n            <\/strong>\n\n          <\/div>\n\n        <\/div>\n\n      <\/details>\n\n\n      <!-- 04 HIGH SCHOOL -->\n\n      <details class=\"spring2027-learning-item spring2027-learning-item-special\">\n\n        <summary>\n\n          <div class=\"spring2027-learning-item-number\">\n            04\n          <\/div>\n\n          <div class=\"spring2027-learning-item-main\">\n\n            <span>\n              FOR NEW HIGH SCHOOL STUDENTS\n            <\/span>\n\n            <h3>\n              \u65b0\u9ad8\u68211\u5e74\u751f\u3082\u3002\n            <\/h3>\n\n            <p>\n              \u9ad8\u6821\u6570\u5b66\u3092\u3001\u4e00\u8db3\u5148\u306b\u30b9\u30bf\u30fc\u30c8\u3002\n            <\/p>\n\n          <\/div>\n\n          <div class=\"spring2027-learning-item-arrow\">\n            +\n          <\/div>\n\n        <\/summary>\n\n\n        <div class=\"spring2027-learning-item-content\">\n\n          <div class=\"spring2027-learning-item-copy\">\n\n            <h4>\n              \u9ad8\u6821\u306e\u300c\u6700\u521d\u300d\u3092\u3001<br>\n              \u6625\u4f11\u307f\u306b\u5c11\u3057\u3060\u3051\u3002\n            <\/h4>\n\n            <p>\n              \u65b0\u9ad8\u68211\u5e74\u751f\u306f\u3001\u9ad8\u68211\u5e74\u751f\u306e\u6570\u5b66\u3092\u5148\u53d6\u308a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\n              4\u6708\u30fb5\u6708\u9803\u306b\u5b66\u6821\u3067\u5b66\u7fd2\u3059\u308b\u5185\u5bb9\u3092\u4e2d\u5fc3\u306b\u3001\n              \u9ad8\u6821\u3067\u65b0\u3057\u304f\u5b66\u3076\u300c\u4e57\u6cd5\u306e\u516c\u5f0f\u300d\u3084\u3001\n              \u305d\u306e\u5229\u7528\u3092\u4f7f\u3063\u305f\u8a08\u7b97\u306a\u3069\u306b\u53d6\u308a\u7d44\u307f\u307e\u3059\u3002\n            <\/p>\n\n            <p>\n              \u307e\u305f\u3001\u9ad8\u6821\u304b\u3089\u51fa\u3055\u308c\u305f\u8ab2\u984c\u306b\u3064\u3044\u3066\u3082\u3001\n              \u6559\u5ba4\u3067\u5b66\u7fd2\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002\n            <\/p>\n\n          <\/div>\n\n          <div class=\"spring2027-learning-point\">\n\n            <span>\n              HIGH SCHOOL\n            <\/span>\n\n            <strong>\n              \u9ad8\u6821\u751f\u6d3b\u3092<br>\n              \u4f59\u88d5\u3092\u3082\u3063\u3066\u3002\n            <\/strong>\n\n          <\/div>\n\n        <\/div>\n\n      <\/details>\n\n    <\/div>\n\n\n    <!-- =========================\n         TYPE CHECK\n    ========================== -->\n\n    <div class=\"spring2027-learning-type\">\n\n      <div class=\"spring2027-learning-type-heading\">\n\n        <span>\n          YOUR SPRING\n        <\/span>\n\n        <h3>\n          \u3042\u306a\u305f\u306f\u3001\u3069\u306e\u30bf\u30a4\u30d7\uff1f\n        <\/h3>\n\n      <\/div>\n\n\n      <div class=\"spring2027-learning-type-grid\">\n\n        <div>\n          <span>TYPE A<\/span>\n          <strong>\u82e6\u624b\u3092\u306a\u304f\u3057\u305f\u3044<\/strong>\n          <p>\u2192 \u5fa9\u7fd2\u304c\u304a\u3059\u3059\u3081<\/p>\n        <\/div>\n\n        <div>\n          <span>TYPE B<\/span>\n          <strong>\u65b0\u5b66\u5e74\u3092\u5148\u53d6\u308a\u3057\u305f\u3044<\/strong>\n          <p>\u2192 \u4e88\u7fd2\u304c\u304a\u3059\u3059\u3081<\/p>\n        <\/div>\n\n        <div>\n          <span>TYPE C<\/span>\n          <strong>\u30c6\u30b9\u30c8\u3067\u4f59\u88d5\u3092\u3064\u304f\u308a\u305f\u3044<\/strong>\n          <p>\u2192 \u4e88\u7fd2\uff0b\u30c6\u30b9\u30c8\u5bfe\u7b56<\/p>\n        <\/div>\n\n        <div>\n          <span>TYPE D<\/span>\n          <strong>\u9ad8\u6821\u306e\u52c9\u5f37\u3092\u59cb\u3081\u305f\u3044<\/strong>\n          <p>\u2192 \u9ad8\u6821\u6570\u5b66\u306e\u4e88\u7fd2<\/p>\n        <\/div>\n\n      <\/div>\n\n\n      <p class=\"spring2027-learning-type-footer\">\n        \u3082\u3061\u308d\u3093\u3001\u9014\u4e2d\u3067\u5b66\u7fd2\u5185\u5bb9\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   SPRING 2027\n   LEARNING SECTION\n========================================================= *\/\n\n.spring2027-learning {\n\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n  --spring-muted: #69736d;\n\n  width: 100%;\n\n  padding: 120px 0;\n\n  background:\n    linear-gradient(\n      180deg,\n      #f7faf7 0%,\n      #ffffff 100%\n    );\n\n  color: var(--spring-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n}\n\n\n.spring2027-learning *,\n.spring2027-learning *::before,\n.spring2027-learning *::after {\n\n  box-sizing: border-box;\n\n}\n\n\n.spring2027-learning-inner {\n\n  width:\n    min(1050px, calc(100% - 48px));\n\n  margin: 0 auto;\n\n}\n\n\n\/* HEADING *\/\n\n.spring2027-learning-heading {\n\n  max-width: 720px;\n\n  margin: 0 auto 70px;\n\n  text-align: center;\n\n}\n\n\n.spring2027-learning-kicker {\n\n  margin: 0 0 15px;\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n\n}\n\n\n.spring2027-learning-heading h2 {\n\n  margin: 0;\n\n  font-size: clamp(36px, 5vw, 58px);\n\n  line-height: 1.3;\n\n  letter-spacing: -.05em;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-learning-heading h2 span {\n\n  color: var(--spring-green-dark);\n\n}\n\n\n.spring2027-learning-heading > p {\n\n  margin: 25px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 14px;\n\n  line-height: 1.9;\n\n}\n\n\n\/* INTRO *\/\n\n.spring2027-learning-intro {\n\n  display: grid;\n\n  grid-template-columns: 90px 1fr;\n\n  gap: 30px;\n\n  max-width: 850px;\n\n  margin: 0 auto 60px;\n\n  padding: 38px 45px;\n\n  border-radius: 24px;\n\n  background: #ffffff;\n\n  border: 1px solid #e2e9e3;\n\n}\n\n\n.spring2027-learning-intro-number {\n\n  color: #b9c8bc;\n\n  font-size: 42px;\n\n  font-weight: 800;\n\n  line-height: 1;\n\n}\n\n\n.spring2027-learning-intro span {\n\n  display: block;\n\n  margin-bottom: 10px;\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .16em;\n\n}\n\n\n.spring2027-learning-intro h3 {\n\n  margin: 0;\n\n  font-size: 22px;\n\n  line-height: 1.5;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-learning-intro p {\n\n  max-width: 600px;\n\n  margin: 14px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 12px;\n\n  line-height: 1.9;\n\n}\n\n\n\/* OPTIONS *\/\n\n.spring2027-learning-options {\n\n  max-width: 950px;\n\n  margin: 0 auto;\n\n}\n\n\n.spring2027-learning-item {\n\n  overflow: hidden;\n\n  margin-bottom: 12px;\n\n  border: 1px solid #dfe7e1;\n\n  border-radius: 20px;\n\n  background: #ffffff;\n\n  transition:\n    border-color .25s ease,\n    box-shadow .25s ease;\n\n}\n\n\n.spring2027-learning-item:hover {\n\n  border-color: #c7d7cb;\n\n  box-shadow:\n    0 12px 30px rgba(45,70,52,.06);\n\n}\n\n\n.spring2027-learning-item summary {\n\n  display: grid;\n\n  grid-template-columns: 70px 1fr 45px;\n\n  align-items: center;\n\n  gap: 20px;\n\n  padding: 27px 30px;\n\n  cursor: pointer;\n\n  list-style: none;\n\n}\n\n\n.spring2027-learning-item summary::-webkit-details-marker {\n\n  display: none;\n\n}\n\n\n.spring2027-learning-item-number {\n\n  color: #b7c5ba;\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  letter-spacing: .08em;\n\n}\n\n\n.spring2027-learning-item-main > span {\n\n  display: block;\n\n  margin-bottom: 5px;\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n\n}\n\n\n.spring2027-learning-item-main h3 {\n\n  margin: 0;\n\n  font-size: 21px;\n\n  line-height: 1.4;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-learning-item-main p {\n\n  margin: 5px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 11px;\n\n}\n\n\n.spring2027-learning-item-arrow {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 36px;\n\n  height: 36px;\n\n  border-radius: 50%;\n\n  background: var(--spring-green-light);\n\n  color: var(--spring-green-dark);\n\n  font-size: 20px;\n\n  transition:\n    transform .3s ease,\n    background .3s ease,\n    color .3s ease;\n\n}\n\n\n.spring2027-learning-item[open]\n.spring2027-learning-item-arrow {\n\n  transform: rotate(45deg);\n\n  background: var(--spring-green);\n\n  color: #ffffff;\n\n}\n\n\n\/* CONTENT *\/\n\n.spring2027-learning-item-content {\n\n  display: grid;\n\n  grid-template-columns: 1fr 180px;\n\n  gap: 35px;\n\n  margin: 0 30px 30px;\n\n  padding: 30px;\n\n  border-radius: 17px;\n\n  background: #f7f9f7;\n\n}\n\n\n.spring2027-learning-item-copy h4 {\n\n  margin: 0 0 15px;\n\n  font-size: 18px;\n\n  line-height: 1.6;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-learning-item-copy p {\n\n  margin: 0 0 13px;\n\n  color: var(--spring-muted);\n\n  font-size: 12px;\n\n  line-height: 2;\n\n}\n\n\n.spring2027-learning-item-copy p:last-child {\n\n  margin-bottom: 0;\n\n}\n\n\n.spring2027-learning-point {\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: center;\n\n  align-items: center;\n\n  min-height: 150px;\n\n  border-radius: 16px;\n\n  background: var(--spring-green);\n\n  color: #ffffff;\n\n  text-align: center;\n\n}\n\n\n.spring2027-learning-point span {\n\n  margin-bottom: 12px;\n\n  color: rgba(255,255,255,.65);\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n}\n\n\n.spring2027-learning-point strong {\n\n  font-size: 19px;\n\n  line-height: 1.5;\n\n}\n\n\n\/* SPECIAL *\/\n\n.spring2027-learning-item-special {\n\n  border-color: #d9d2a9;\n\n}\n\n\n.spring2027-learning-item-special\n.spring2027-learning-item-main > span {\n\n  color: #9a8641;\n\n}\n\n\n\/* TYPE *\/\n\n.spring2027-learning-type {\n\n  max-width: 950px;\n\n  margin: 70px auto 0;\n\n  padding: 42px;\n\n  border-radius: 25px;\n\n  background: var(--spring-green-dark);\n\n  color: #ffffff;\n\n}\n\n\n.spring2027-learning-type-heading {\n\n  margin-bottom: 30px;\n\n}\n\n\n.spring2027-learning-type-heading span {\n\n  display: block;\n\n  margin-bottom: 8px;\n\n  color: rgba(255,255,255,.55);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n}\n\n\n.spring2027-learning-type-heading h3 {\n\n  margin: 0;\n\n  font-size: 25px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-learning-type-grid {\n\n  display: grid;\n\n  grid-template-columns: repeat(4, 1fr);\n\n  gap: 10px;\n\n}\n\n\n.spring2027-learning-type-grid > div {\n\n  padding: 20px;\n\n  border-radius: 15px;\n\n  background: rgba(255,255,255,.08);\n\n}\n\n\n.spring2027-learning-type-grid span {\n\n  display: block;\n\n  margin-bottom: 8px;\n\n  color: var(--spring-yellow);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .12em;\n\n}\n\n\n.spring2027-learning-type-grid strong {\n\n  display: block;\n\n  font-size: 13px;\n\n  line-height: 1.6;\n\n}\n\n\n.spring2027-learning-type-grid p {\n\n  margin: 8px 0 0;\n\n  color: rgba(255,255,255,.62);\n\n  font-size: 10px;\n\n  line-height: 1.6;\n\n}\n\n\n.spring2027-learning-type-footer {\n\n  margin: 25px 0 0;\n\n  color: rgba(255,255,255,.6);\n\n  font-size: 10px;\n\n  text-align: center;\n\n}\n\n\n\/* MOBILE *\/\n\n@media (max-width: 700px) {\n\n  .spring2027-learning {\n\n    padding: 80px 0;\n\n  }\n\n\n  .spring2027-learning-inner {\n\n    width:\n      min(100% - 32px, 520px);\n\n  }\n\n\n  .spring2027-learning-heading {\n\n    margin-bottom: 45px;\n\n  }\n\n\n  .spring2027-learning-heading h2 {\n\n    font-size: 34px;\n\n  }\n\n\n  .spring2027-learning-heading > p {\n\n    font-size: 12px;\n\n  }\n\n\n  .spring2027-learning-intro {\n\n    grid-template-columns: 55px 1fr;\n\n    gap: 15px;\n\n    padding: 25px 20px;\n\n    margin-bottom: 40px;\n\n  }\n\n\n  .spring2027-learning-intro-number {\n\n    font-size: 30px;\n\n  }\n\n\n  .spring2027-learning-intro h3 {\n\n    font-size: 18px;\n\n  }\n\n\n  .spring2027-learning-intro p {\n\n    font-size: 11px;\n\n  }\n\n\n  .spring2027-learning-item summary {\n\n    grid-template-columns: 40px 1fr 35px;\n\n    gap: 12px;\n\n    padding: 22px 17px;\n\n  }\n\n\n  .spring2027-learning-item-main h3 {\n\n    font-size: 17px;\n\n  }\n\n\n  .spring2027-learning-item-main p {\n\n    font-size: 10px;\n\n    line-height: 1.6;\n\n  }\n\n\n  .spring2027-learning-item-content {\n\n    grid-template-columns: 1fr;\n\n    gap: 20px;\n\n    margin: 0 17px 17px;\n\n    padding: 20px;\n\n  }\n\n\n  .spring2027-learning-item-copy h4 {\n\n    font-size: 16px;\n\n  }\n\n\n  .spring2027-learning-item-copy p {\n\n    font-size: 11px;\n\n  }\n\n\n  .spring2027-learning-point {\n\n    min-height: 100px;\n\n  }\n\n\n  .spring2027-learning-point strong {\n\n    font-size: 17px;\n\n  }\n\n\n  .spring2027-learning-type {\n\n    margin-top: 45px;\n\n    padding: 27px 20px;\n\n    border-radius: 20px;\n\n  }\n\n\n  .spring2027-learning-type-heading h3 {\n\n    font-size: 21px;\n\n  }\n\n\n  .spring2027-learning-type-grid {\n\n    grid-template-columns: 1fr 1fr;\n\n  }\n\n\n  .spring2027-learning-type-grid > div {\n\n    padding: 15px;\n\n  }\n\n\n  .spring2027-learning-type-grid strong {\n\n    font-size: 11px;\n\n  }\n\n\n}\n<\/style>\n\n\n\n<section class=\"spring2027-change\" id=\"spring2027-change\">\n\n  <div class=\"spring2027-change-inner\">\n\n    <div class=\"spring2027-change-heading\">\n\n      <p class=\"spring2027-change-kicker\">\n        AFTER SPRING COURSE\n      <\/p>\n\n      <h2>\n        \u6625\u4f11\u307f\u306e\u6570\u65e5\u9593\u304c\u3001<br>\n        <span>\u65b0\u5b66\u671f\u306e\u81ea\u4fe1\u306b\u306a\u308b\u3002<\/span>\n      <\/h2>\n\n      <p>\n        \u6625\u671f\u8b1b\u7fd2\u3067\u76ee\u6307\u3059\u306e\u306f\u3001<br>\n        \u305f\u3060\u300c\u52c9\u5f37\u3057\u305f\u300d\u3068\u3044\u3046\u7d4c\u9a13\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <!-- CHANGE 01 -->\n\n    <div class=\"spring2027-change-item\">\n\n      <div class=\"spring2027-change-image\">\n\n        <img decoding=\"async\"\n          src=\"\u3053\u3053\u306b\u753b\u50cfURL\u3092\u5165\u308c\u3066\u304f\u3060\u3055\u3044\"\n          alt=\"\u6625\u671f\u8b1b\u7fd2\u3067\u5fa9\u7fd2\u3059\u308b\u751f\u5f92\"\n        >\n\n        <span class=\"spring2027-change-image-number\">\n          01\n        <\/span>\n\n      <\/div>\n\n\n      <div class=\"spring2027-change-content\">\n\n        <span class=\"spring2027-change-label\">\n          REVIEW\n        <\/span>\n\n        <h3>\n          \u300c\u5206\u304b\u3089\u306a\u3044\u300d\u3092<br>\n          \u65b0\u5b66\u671f\u306b\u6301\u3061\u8d8a\u3055\u306a\u3044\u3002\n        <\/h3>\n\n        <p>\n          \u524d\u306e\u5b66\u5e74\u3067\u3064\u307e\u305a\u3044\u305f\u3068\u3053\u308d\u3001\n          \u5fd8\u308c\u3066\u3057\u307e\u3063\u305f\u3068\u3053\u308d\u3092\u3082\u3046\u4e00\u5ea6\u78ba\u8a8d\u3002\n          \u65b0\u3057\u3044\u5b66\u5e74\u306e\u5b66\u7fd2\u3092\u59cb\u3081\u308b\u524d\u306b\u3001\n          \u81ea\u5206\u306e\u571f\u53f0\u3092\u6574\u3048\u3066\u304a\u304d\u307e\u3059\u3002\n        <\/p>\n\n        <div class=\"spring2027-change-point\">\n\n          <span>CHANGE<\/span>\n\n          <strong>\n            \u82e6\u624b\u3060\u3063\u305f\u554f\u984c\u306b<br>\n            \u3082\u3046\u4e00\u5ea6\u5411\u304d\u5408\u3048\u308b\u3002\n          <\/strong>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- CHANGE 02 -->\n\n    <div class=\"spring2027-change-item spring2027-change-item-reverse\">\n\n      <div class=\"spring2027-change-image\">\n\n        <img decoding=\"async\"\n          src=\"\u3053\u3053\u306b\u753b\u50cfURL\u3092\u5165\u308c\u3066\u304f\u3060\u3055\u3044\"\n          alt=\"\u6625\u671f\u8b1b\u7fd2\u3067\u4e88\u7fd2\u3059\u308b\u751f\u5f92\"\n        >\n\n        <span class=\"spring2027-change-image-number\">\n          02\n        <\/span>\n\n      <\/div>\n\n\n      <div class=\"spring2027-change-content\">\n\n        <span class=\"spring2027-change-label\">\n          PREVIEW\n        <\/span>\n\n        <h3>\n          \u300c\u521d\u3081\u3066\u300d\u3092\u3001<br>\n          \u300c\u898b\u305f\u3053\u3068\u304c\u3042\u308b\u300d\u306b\u3002\n        <\/h3>\n\n        <p>\n          \u65b0\u5b66\u5e74\u3067\u5b66\u3076\u5185\u5bb9\u3092\u3001\n          \u6625\u4f11\u307f\u306e\u3046\u3061\u306b\u5c11\u3057\u3060\u3051\u5148\u53d6\u308a\u3002\n          \u5b66\u6821\u306e\u6388\u696d\u3067\u521d\u3081\u3066\u805e\u304f\u306e\u3067\u306f\u306a\u304f\u3001\n          \u4e00\u5ea6\u89e6\u308c\u305f\u3053\u3068\u306e\u3042\u308b\u5185\u5bb9\u3068\u3057\u3066\n          \u6388\u696d\u3092\u8fce\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\n        <\/p>\n\n        <div class=\"spring2027-change-point\">\n\n          <span>CHANGE<\/span>\n\n          <strong>\n            \u65b0\u5b66\u671f\u306e\u6388\u696d\u306b<br>\n            \u5c11\u3057\u4f59\u88d5\u304c\u751f\u307e\u308c\u308b\u3002\n          <\/strong>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- CHANGE 03 -->\n\n    <div class=\"spring2027-change-item\">\n\n      <div class=\"spring2027-change-image\">\n\n        <img decoding=\"async\"\n          src=\"\u3053\u3053\u306b\u753b\u50cfURL\u3092\u5165\u308c\u3066\u304f\u3060\u3055\u3044\"\n          alt=\"\u65b0\u5b66\u671f\u306b\u5411\u3051\u3066\u5b66\u7fd2\u3059\u308b\u751f\u5f92\"\n        >\n\n        <span class=\"spring2027-change-image-number\">\n          03\n        <\/span>\n\n      <\/div>\n\n\n      <div class=\"spring2027-change-content\">\n\n        <span class=\"spring2027-change-label\">\n          CONFIDENCE\n        <\/span>\n\n        <h3>\n          \u300c\u3061\u3087\u3063\u3068\u3067\u304d\u308b\u300d\u304c\u3001<br>\n          \u65b0\u5b66\u671f\u306e\u4f59\u88d5\u306b\u306a\u308b\u3002\n        <\/h3>\n\n        <p>\n          \u3059\u3079\u3066\u3092\u5b8c\u74a7\u306b\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n          \u300c\u3053\u3053\u306f\u5206\u304b\u308b\u300d\n          \u300c\u3053\u306e\u554f\u984c\u306a\u3089\u89e3\u3051\u308b\u300d\n          \u305d\u3093\u306a\u5c0f\u3055\u306a\u624b\u5fdc\u3048\u3092\u7a4d\u307f\u91cd\u306d\u308b\u3053\u3068\u3067\u3001\n          \u65b0\u5b66\u671f\u3092\u524d\u5411\u304d\u306b\u30b9\u30bf\u30fc\u30c8\u3067\u304d\u307e\u3059\u3002\n        <\/p>\n\n        <div class=\"spring2027-change-point\">\n\n          <span>CHANGE<\/span>\n\n          <strong>\n            \u65b0\u3057\u3044\u5b66\u5e74\u3092<br>\n            \u524d\u5411\u304d\u306b\u59cb\u3081\u3089\u308c\u308b\u3002\n          <\/strong>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- FINAL MESSAGE -->\n\n    <div class=\"spring2027-change-final\">\n\n      <div class=\"spring2027-change-final-mark\">\n        +\n      <\/div>\n\n      <div>\n\n        <span>\n          SPRING COURSE 2027\n        <\/span>\n\n        <h3>\n          \u6625\u4f11\u307f\u306f\u3001<br>\n          \u300c\u6b21\u306e\u81ea\u5206\u300d\u3092\u3064\u304f\u308b\u6642\u9593\u3002\n        <\/h3>\n\n        <p>\n          \u5fa9\u7fd2\u3067\u3082\u3001\u4e88\u7fd2\u3067\u3082\u5927\u4e08\u592b\u3002<br>\n          \u4eca\u306e\u81ea\u5206\u306b\u5fc5\u8981\u306a\u5b66\u7fd2\u304b\u3089\u59cb\u3081\u307e\u3057\u3087\u3046\u3002\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   SPRING 2027\n   CHANGE SECTION\n========================================================= *\/\n\n.spring2027-change {\n\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n  --spring-muted: #69736d;\n\n  width: 100%;\n\n  padding: 125px 0;\n\n  background: #ffffff;\n\n  color: var(--spring-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n}\n\n\n.spring2027-change *,\n.spring2027-change *::before,\n.spring2027-change *::after {\n\n  box-sizing: border-box;\n\n}\n\n\n.spring2027-change-inner {\n\n  width:\n    min(1050px, calc(100% - 48px));\n\n  margin: 0 auto;\n\n}\n\n\n\/* HEADING *\/\n\n.spring2027-change-heading {\n\n  max-width: 720px;\n\n  margin: 0 auto 85px;\n\n  text-align: center;\n\n}\n\n\n.spring2027-change-kicker {\n\n  margin: 0 0 15px;\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n\n}\n\n\n.spring2027-change-heading h2 {\n\n  margin: 0;\n\n  font-size: clamp(36px, 5vw, 58px);\n\n  line-height: 1.3;\n\n  letter-spacing: -.05em;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-change-heading h2 span {\n\n  color: var(--spring-green-dark);\n\n}\n\n\n.spring2027-change-heading > p {\n\n  margin: 25px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 14px;\n\n  line-height: 1.9;\n\n}\n\n\n\/* ITEM *\/\n\n.spring2027-change-item {\n\n  display: grid;\n\n  grid-template-columns: 1fr 1fr;\n\n  align-items: center;\n\n  gap: 75px;\n\n  max-width: 1000px;\n\n  margin: 0 auto 110px;\n\n}\n\n\n.spring2027-change-item-reverse {\n\n  direction: rtl;\n\n}\n\n\n.spring2027-change-item-reverse\n.spring2027-change-content {\n\n  direction: ltr;\n\n}\n\n\n\/* IMAGE *\/\n\n.spring2027-change-image {\n\n  position: relative;\n\n  overflow: hidden;\n\n  aspect-ratio: 4 \/ 3;\n\n  border-radius: 28px;\n\n  background: #edf3ee;\n\n}\n\n\n.spring2027-change-image img {\n\n  display: block;\n\n  width: 100%;\n\n  height: 100%;\n\n  object-fit: cover;\n\n}\n\n\n.spring2027-change-image-number {\n\n  position: absolute;\n\n  top: 18px;\n\n  left: 18px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 48px;\n\n  height: 48px;\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,.92);\n\n  color: var(--spring-green-dark);\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n}\n\n\n\/* CONTENT *\/\n\n.spring2027-change-content {\n\n  padding: 10px 0;\n\n}\n\n\n.spring2027-change-label {\n\n  display: block;\n\n  margin-bottom: 12px;\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n}\n\n\n.spring2027-change-content h3 {\n\n  margin: 0;\n\n  font-size: clamp(27px, 3vw, 38px);\n\n  line-height: 1.4;\n\n  letter-spacing: -.045em;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-change-content > p {\n\n  margin: 22px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 13px;\n\n  line-height: 2;\n\n}\n\n\n\/* POINT *\/\n\n.spring2027-change-point {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 18px;\n\n  margin-top: 28px;\n\n  padding: 17px 20px;\n\n  border-radius: 15px;\n\n  background: var(--spring-green-light);\n\n}\n\n\n.spring2027-change-point span {\n\n  flex: 0 0 auto;\n\n  color: var(--spring-green);\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n\n}\n\n\n.spring2027-change-point strong {\n\n  color: var(--spring-green-dark);\n\n  font-size: 12px;\n\n  line-height: 1.6;\n\n}\n\n\n\/* FINAL *\/\n\n.spring2027-change-final {\n\n  display: grid;\n\n  grid-template-columns: 75px 1fr;\n\n  align-items: center;\n\n  gap: 25px;\n\n  max-width: 850px;\n\n  margin: 20px auto 0;\n\n  padding: 42px 50px;\n\n  border-radius: 25px;\n\n  background: var(--spring-green-dark);\n\n  color: #ffffff;\n\n}\n\n\n.spring2027-change-final-mark {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 58px;\n\n  height: 58px;\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,.1);\n\n  color: var(--spring-yellow);\n\n  font-size: 28px;\n\n  font-weight: 300;\n\n}\n\n\n.spring2027-change-final span {\n\n  display: block;\n\n  margin-bottom: 8px;\n\n  color: rgba(255,255,255,.55);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n}\n\n\n.spring2027-change-final h3 {\n\n  margin: 0;\n\n  font-size: 25px;\n\n  line-height: 1.5;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-change-final p {\n\n  margin: 10px 0 0;\n\n  color: rgba(255,255,255,.7);\n\n  font-size: 11px;\n\n  line-height: 1.8;\n\n}\n\n\n\/* MOBILE *\/\n\n@media (max-width: 700px) {\n\n  .spring2027-change {\n\n    padding: 80px 0;\n\n  }\n\n\n  .spring2027-change-inner {\n\n    width:\n      min(100% - 32px, 520px);\n\n  }\n\n\n  .spring2027-change-heading {\n\n    margin-bottom: 55px;\n\n  }\n\n\n  .spring2027-change-heading h2 {\n\n    font-size: 33px;\n\n  }\n\n\n  .spring2027-change-heading > p {\n\n    font-size: 12px;\n\n  }\n\n\n  .spring2027-change-item,\n  .spring2027-change-item-reverse {\n\n    display: flex;\n\n    flex-direction: column;\n\n    gap: 28px;\n\n    margin-bottom: 70px;\n\n    direction: ltr;\n\n  }\n\n\n  .spring2027-change-image {\n\n    width: 100%;\n\n    border-radius: 20px;\n\n  }\n\n\n  .spring2027-change-content {\n\n    width: 100%;\n\n  }\n\n\n  .spring2027-change-content h3 {\n\n    font-size: 27px;\n\n  }\n\n\n  .spring2027-change-content > p {\n\n    font-size: 11px;\n\n  }\n\n\n  .spring2027-change-point {\n\n    margin-top: 20px;\n\n    padding: 15px;\n\n  }\n\n\n  .spring2027-change-final {\n\n    grid-template-columns: 50px 1fr;\n\n    gap: 15px;\n\n    padding: 27px 20px;\n\n    border-radius: 20px;\n\n  }\n\n\n  .spring2027-change-final-mark {\n\n    width: 45px;\n\n    height: 45px;\n\n    font-size: 22px;\n\n  }\n\n\n  .spring2027-change-final h3 {\n\n    font-size: 20px;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const section = document.querySelector(\"#spring2027-days\");\n\n  if (!section) return;\n\n\n  const buttons = section.querySelectorAll(\n    \".spring2027-days-button\"\n  );\n\n  const result = section.querySelector(\n    \"#spring2027-days-result\"\n  );\n\n  const number = section.querySelector(\n    \"#spring2027-days-result-number\"\n  );\n\n  const label = section.querySelector(\n    \"#spring2027-days-result-label\"\n  );\n\n  const title = section.querySelector(\n    \"#spring2027-days-result-title\"\n  );\n\n  const description = section.querySelector(\n    \"#spring2027-days-result-description\"\n  );\n\n\n  const messages = {\n\n    3: {\n\n      label: \"STARTER\",\n\n      title: \"\u307e\u305a\u306f\u3001\u82e6\u624b\u3092\u6574\u7406\u3059\u308b\u3002\",\n\n      description:\n        \"\u3053\u308c\u307e\u3067\u306e\u5b66\u7fd2\u3092\u632f\u308a\u8fd4\u308a\u3001\u82e6\u624b\u306a\u5358\u5143\u3084\u5fd8\u308c\u3066\u3057\u307e\u3063\u305f\u5185\u5bb9\u3092\u4e2d\u5fc3\u306b\u5fa9\u7fd2\u3059\u308b\u306e\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002\"\n\n    },\n\n\n    5: {\n\n      label: \"BALANCE\",\n\n      title: \"\u5fa9\u7fd2\uff0b\u4e88\u7fd2\u3092\u30d0\u30e9\u30f3\u30b9\u3088\u304f\u3002\",\n\n      description:\n        \"\u3053\u308c\u307e\u3067\u306e\u5b66\u7fd2\u3092\u78ba\u8a8d\u3057\u306a\u304c\u3089\u3001\u65b0\u5b66\u5e74\u306e\u5185\u5bb9\u306b\u3082\u5c11\u3057\u305a\u3064\u89e6\u308c\u3066\u3044\u304f\u30b9\u30bf\u30a4\u30eb\u3002\u6625\u4f11\u307f\u306e\u5b66\u7fd2\u3068\u3057\u3066\u53d6\u308a\u7d44\u307f\u3084\u3059\u3044\u65e5\u6570\u3067\u3059\u3002\"\n\n    },\n\n\n    7: {\n\n      label: \"CHALLENGE\",\n\n      title: \"\u65b0\u5b66\u5e74\u3092\u4e00\u6b69\u5148\u53d6\u308a\u3002\",\n\n      description:\n        \"\u5fa9\u7fd2\u306b\u52a0\u3048\u3066\u65b0\u5b66\u5e74\u306e\u5b66\u7fd2\u3092\u3057\u3063\u304b\u308a\u9032\u3081\u305f\u3044\u4eba\u5411\u3051\u30021\u5b66\u671f\u306e\u30c6\u30b9\u30c8\u306b\u5411\u3051\u305f\u6e96\u5099\u3082\u610f\u8b58\u3067\u304d\u307e\u3059\u3002\"\n\n    },\n\n\n    10: {\n\n      label: \"FULL SPRING\",\n\n      title: \"\u6625\u4f11\u307f\u3092\u6700\u5927\u9650\u3001\u5b66\u7fd2\u306b\u6d3b\u7528\u3002\",\n\n      description:\n        \"\u5fa9\u7fd2\u304b\u3089\u4e88\u7fd2\u307e\u3067\u3001\u6642\u9593\u3092\u304b\u3051\u3066\u3058\u3063\u304f\u308a\u53d6\u308a\u7d44\u3081\u307e\u3059\u3002\u65b0\u5b66\u5e74\u306e\u30b9\u30bf\u30fc\u30c8\u306b\u5411\u3051\u3066\u3001\u3067\u304d\u308b\u3053\u3068\u3092\u5897\u3084\u3057\u3066\u304a\u304d\u305f\u3044\u4eba\u306b\u304a\u3059\u3059\u3081\u3067\u3059\u3002\"\n\n    }\n\n  };\n\n\n  function updateResult(days) {\n\n    const data = messages[days];\n\n    if (!data) return;\n\n\n    result.classList.add(\"is-changing\");\n\n\n    setTimeout(function () {\n\n      number.textContent = days;\n\n      label.textContent = data.label;\n\n      title.textContent = data.title;\n\n      description.textContent = data.description;\n\n      result.classList.remove(\"is-changing\");\n\n    }, 180);\n\n  }\n\n\n  buttons.forEach(function (button) {\n\n    button.addEventListener(\"click\", function () {\n\n      buttons.forEach(function (item) {\n\n        item.classList.remove(\"is-active\");\n\n      });\n\n\n      button.classList.add(\"is-active\");\n\n\n      const days =\n        Number(button.getAttribute(\"data-days\"));\n\n\n      updateResult(days);\n\n    });\n\n  });\n\n\n  \/* \u521d\u671f\u72b6\u614b *\/\n\n  const firstButton = buttons[0];\n\n  if (firstButton) {\n\n    firstButton.classList.add(\"is-active\");\n\n  }\n\n});\n<\/script>\n\n<section class=\"spring2027-days\" id=\"spring2027-days\">\n\n  <div class=\"spring2027-days-inner\">\n\n    <div class=\"spring2027-days-heading\">\n\n      <p class=\"spring2027-days-kicker\">\n        HOW MANY DAYS?\n      <\/p>\n\n      <h2>\n        \u4f55\u65e5\u304f\u3089\u3044\u3001<br>\n        <span>\u53c2\u52a0\u3059\u308c\u3070\u3044\u3044\uff1f<\/span>\n      <\/h2>\n\n      <p>\n        \u53c2\u52a0\u65e5\u6570\u306b\u6c7a\u307e\u308a\u306f\u3042\u308a\u307e\u305b\u3093\u3002<br>\n        \u6625\u4f11\u307f\u306e\u4e88\u5b9a\u3084\u5b66\u7fd2\u76ee\u6a19\u306b\u5408\u308f\u305b\u3066\u9078\u3079\u307e\u3059\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <!-- =========================\n         CALENDAR\n    ========================== -->\n\n    <div class=\"spring2027-days-calendar\">\n\n      <div class=\"spring2027-days-calendar-head\">\n\n        <span>\n          MARCH\n        <\/span>\n\n        <strong>\n          2027\n        <\/strong>\n\n      <\/div>\n\n\n      <div class=\"spring2027-days-calendar-days\">\n\n        <div class=\"spring2027-day\">\n          <span>22<\/span>\n          <small>MON<\/small>\n        <\/div>\n\n        <div class=\"spring2027-day\">\n          <span>23<\/span>\n          <small>TUE<\/small>\n        <\/div>\n\n        <div class=\"spring2027-day\">\n          <span>24<\/span>\n          <small>WED<\/small>\n        <\/div>\n\n        <div class=\"spring2027-day\">\n          <span>25<\/span>\n          <small>THU<\/small>\n        <\/div>\n\n        <div class=\"spring2027-day\">\n          <span>26<\/span>\n          <small>FRI<\/small>\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"spring2027-days-calendar-break\">\n\n        <span>\n          BREAK\n        <\/span>\n\n        <strong>\n          3\/27\u30fb28\n        <\/strong>\n\n      <\/div>\n\n\n      <div class=\"spring2027-days-calendar-head spring2027-days-calendar-april\">\n\n        <span>\n          MARCH \u2192 APRIL\n        <\/span>\n\n        <strong>\n          2027\n        <\/strong>\n\n      <\/div>\n\n\n      <div class=\"spring2027-days-calendar-days\">\n\n        <div class=\"spring2027-day\">\n          <span>29<\/span>\n          <small>MON<\/small>\n        <\/div>\n\n        <div class=\"spring2027-day\">\n          <span>30<\/span>\n          <small>TUE<\/small>\n        <\/div>\n\n        <div class=\"spring2027-day\">\n          <span>31<\/span>\n          <small>WED<\/small>\n        <\/div>\n\n        <div class=\"spring2027-day spring2027-day-april\">\n          <span>1<\/span>\n          <small>THU<\/small>\n        <\/div>\n\n        <div class=\"spring2027-day spring2027-day-april\">\n          <span>2<\/span>\n          <small>FRI<\/small>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =========================\n         DAY SELECTOR\n    ========================== -->\n\n    <div class=\"spring2027-days-selector\">\n\n      <div class=\"spring2027-days-selector-title\">\n\n        <span>\n          SELECT YOUR DAYS\n        <\/span>\n\n        <h3>\n          \u53c2\u52a0\u65e5\u6570\u3092\u9078\u3093\u3067\u307f\u3066\u304f\u3060\u3055\u3044\n        <\/h3>\n\n      <\/div>\n\n\n      <div class=\"spring2027-days-buttons\">\n\n        <button\n          type=\"button\"\n          class=\"spring2027-days-button\"\n          data-days=\"3\"\n        >\n          <strong>3<\/strong>\n          <span>\u65e5<\/span>\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"spring2027-days-button\"\n          data-days=\"5\"\n        >\n          <strong>5<\/strong>\n          <span>\u65e5<\/span>\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"spring2027-days-button\"\n          data-days=\"7\"\n        >\n          <strong>7<\/strong>\n          <span>\u65e5<\/span>\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"spring2027-days-button\"\n          data-days=\"10\"\n        >\n          <strong>10<\/strong>\n          <span>\u65e5<\/span>\n        <\/button>\n\n      <\/div>\n\n\n      <!-- RESULT -->\n\n      <div\n        class=\"spring2027-days-result\"\n        id=\"spring2027-days-result\"\n      >\n\n        <div class=\"spring2027-days-result-number\">\n\n          <strong id=\"spring2027-days-result-number\">\n            3\n          <\/strong>\n\n          <span>\n            DAYS\n          <\/span>\n\n        <\/div>\n\n\n        <div class=\"spring2027-days-result-text\">\n\n          <span id=\"spring2027-days-result-label\">\n            STARTER\n          <\/span>\n\n          <h4 id=\"spring2027-days-result-title\">\n            \u307e\u305a\u306f\u3001\u82e6\u624b\u3092\u6574\u7406\u3059\u308b\u3002\n          <\/h4>\n\n          <p id=\"spring2027-days-result-description\">\n            \u3053\u308c\u307e\u3067\u306e\u5b66\u7fd2\u3092\u632f\u308a\u8fd4\u308a\u3001\n            \u82e6\u624b\u306a\u5358\u5143\u3084\u5fd8\u308c\u3066\u3057\u307e\u3063\u305f\u5185\u5bb9\u3092\u4e2d\u5fc3\u306b\n            \u5fa9\u7fd2\u3059\u308b\u306e\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =========================\n         NOTE\n    ========================== -->\n\n    <div class=\"spring2027-days-note\">\n\n      <span>\n        IMPORTANT\n      <\/span>\n\n      <p>\n        \u53c2\u52a0\u65e5\u6570\u3084\u5b66\u7fd2\u5185\u5bb9\u306f\u4e00\u4eba\u3072\u3068\u308a\u7570\u306a\u308a\u307e\u3059\u3002\n        \u300c\u4f55\u65e5\u53c2\u52a0\u3059\u308b\u304b\u300d\u3088\u308a\u3082\u3001\n        \u300c\u4f55\u3092\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u304b\u300d\u3092\u5927\u5207\u306b\u3057\u3066\u3044\u307e\u3059\u3002\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   SPRING 2027\n   DAYS SECTION\n========================================================= *\/\n\n.spring2027-days {\n\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n  --spring-muted: #69736d;\n\n  width: 100%;\n\n  padding: 120px 0;\n\n  background:\n    linear-gradient(\n      180deg,\n      #f6f9f6 0%,\n      #ffffff 100%\n    );\n\n  color: var(--spring-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n}\n\n\n.spring2027-days *,\n.spring2027-days *::before,\n.spring2027-days *::after {\n\n  box-sizing: border-box;\n\n}\n\n\n.spring2027-days-inner {\n\n  width:\n    min(950px, calc(100% - 48px));\n\n  margin: 0 auto;\n\n}\n\n\n\/* HEADING *\/\n\n.spring2027-days-heading {\n\n  max-width: 700px;\n\n  margin: 0 auto 70px;\n\n  text-align: center;\n\n}\n\n\n.spring2027-days-kicker {\n\n  margin: 0 0 15px;\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n\n}\n\n\n.spring2027-days-heading h2 {\n\n  margin: 0;\n\n  font-size: clamp(36px, 5vw, 58px);\n\n  line-height: 1.3;\n\n  letter-spacing: -.05em;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-days-heading h2 span {\n\n  color: var(--spring-green-dark);\n\n}\n\n\n.spring2027-days-heading p {\n\n  margin: 25px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 14px;\n\n  line-height: 1.9;\n\n}\n\n\n\/* CALENDAR *\/\n\n.spring2027-days-calendar {\n\n  max-width: 850px;\n\n  margin: 0 auto 65px;\n\n  padding: 32px;\n\n  border-radius: 25px;\n\n  background: #ffffff;\n\n  border: 1px solid #e1e8e2;\n\n  box-shadow:\n    0 15px 45px rgba(45,70,52,.05);\n\n}\n\n\n.spring2027-days-calendar-head {\n\n  display: flex;\n\n  align-items: baseline;\n\n  justify-content: space-between;\n\n  margin-bottom: 17px;\n\n  padding-bottom: 12px;\n\n  border-bottom: 1px solid #e6ece7;\n\n}\n\n\n.spring2027-days-calendar-head span {\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n}\n\n\n.spring2027-days-calendar-head strong {\n\n  color: #a8b5ab;\n\n  font-size: 11px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-days-calendar-days {\n\n  display: grid;\n\n  grid-template-columns: repeat(5, 1fr);\n\n  gap: 9px;\n\n}\n\n\n.spring2027-day {\n\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: center;\n\n  justify-content: center;\n\n  min-height: 85px;\n\n  border-radius: 15px;\n\n  background: var(--spring-green-light);\n\n}\n\n\n.spring2027-day span {\n\n  color: var(--spring-green-dark);\n\n  font-size: 27px;\n\n  line-height: 1;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-day small {\n\n  margin-top: 7px;\n\n  color: var(--spring-green);\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .12em;\n\n}\n\n\n.spring2027-day-april {\n\n  background: #f6f2df;\n\n}\n\n\n.spring2027-day-april span {\n\n  color: #8d7940;\n\n}\n\n\n.spring2027-day-april small {\n\n  color: #9a8641;\n\n}\n\n\n\/* BREAK *\/\n\n.spring2027-days-calendar-break {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 15px;\n\n  margin: 14px 0;\n\n  padding: 10px;\n\n  border-radius: 10px;\n\n  background: #f7f7f5;\n\n}\n\n\n.spring2027-days-calendar-break span {\n\n  color: #aaa;\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n\n}\n\n\n.spring2027-days-calendar-break strong {\n\n  color: #888;\n\n  font-size: 10px;\n\n}\n\n\n\/* APRIL *\/\n\n.spring2027-days-calendar-april {\n\n  margin-top: 5px;\n\n}\n\n\n\/* SELECTOR *\/\n\n.spring2027-days-selector {\n\n  max-width: 850px;\n\n  margin: 0 auto;\n\n}\n\n\n.spring2027-days-selector-title {\n\n  margin-bottom: 25px;\n\n  text-align: center;\n\n}\n\n\n.spring2027-days-selector-title span {\n\n  display: block;\n\n  margin-bottom: 7px;\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n}\n\n\n.spring2027-days-selector-title h3 {\n\n  margin: 0;\n\n  font-size: 22px;\n\n  font-weight: 800;\n\n}\n\n\n\/* BUTTONS *\/\n\n.spring2027-days-buttons {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(4, 1fr);\n\n  gap: 10px;\n\n}\n\n\n.spring2027-days-button {\n\n  appearance: none;\n\n  border: 1px solid #dce5de;\n\n  border-radius: 18px;\n\n  padding: 22px 10px;\n\n  background: #ffffff;\n\n  color: var(--spring-text);\n\n  cursor: pointer;\n\n  font-family: inherit;\n\n  transition:\n    transform .2s ease,\n    border-color .2s ease,\n    background .2s ease,\n    box-shadow .2s ease;\n\n}\n\n\n.spring2027-days-button:hover {\n\n  transform: translateY(-3px);\n\n  border-color: #b9cdbd;\n\n  box-shadow:\n    0 10px 25px rgba(45,70,52,.08);\n\n}\n\n\n.spring2027-days-button strong {\n\n  font-size: 34px;\n\n  line-height: 1;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-days-button > span {\n\n  margin-left: 4px;\n\n  color: var(--spring-muted);\n\n  font-size: 11px;\n\n}\n\n\n.spring2027-days-button.is-active {\n\n  border-color: var(--spring-green);\n\n  background: var(--spring-green);\n\n  color: #ffffff;\n\n  box-shadow:\n    0 10px 25px rgba(63,95,77,.18);\n\n}\n\n\n.spring2027-days-button.is-active > span {\n\n  color: rgba(255,255,255,.7);\n\n}\n\n\n\/* RESULT *\/\n\n.spring2027-days-result {\n\n  display: grid;\n\n  grid-template-columns: 145px 1fr;\n\n  align-items: center;\n\n  gap: 35px;\n\n  min-height: 200px;\n\n  margin-top: 18px;\n\n  padding: 35px;\n\n  border-radius: 22px;\n\n  background: var(--spring-green-dark);\n\n  color: #ffffff;\n\n  transition:\n    opacity .2s ease,\n    transform .2s ease;\n\n}\n\n\n.spring2027-days-result.is-changing {\n\n  opacity: .35;\n\n  transform: translateY(5px);\n\n}\n\n\n.spring2027-days-result-number {\n\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 115px;\n\n  height: 115px;\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,.08);\n\n}\n\n\n.spring2027-days-result-number strong {\n\n  font-size: 45px;\n\n  line-height: 1;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-days-result-number span {\n\n  margin-top: 5px;\n\n  color: rgba(255,255,255,.5);\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n\n}\n\n\n.spring2027-days-result-text > span {\n\n  display: block;\n\n  margin-bottom: 7px;\n\n  color: var(--spring-yellow);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .17em;\n\n}\n\n\n.spring2027-days-result-text h4 {\n\n  margin: 0;\n\n  font-size: 22px;\n\n  line-height: 1.5;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-days-result-text p {\n\n  max-width: 580px;\n\n  margin: 10px 0 0;\n\n  color: rgba(255,255,255,.68);\n\n  font-size: 11px;\n\n  line-height: 1.9;\n\n}\n\n\n\/* NOTE *\/\n\n.spring2027-days-note {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 18px;\n\n  max-width: 850px;\n\n  margin: 25px auto 0;\n\n  padding: 18px 22px;\n\n  border-left: 3px solid var(--spring-yellow);\n\n  background: #faf9f3;\n\n}\n\n\n.spring2027-days-note span {\n\n  flex: 0 0 auto;\n\n  color: #9a8641;\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n\n}\n\n\n.spring2027-days-note p {\n\n  margin: 0;\n\n  color: var(--spring-muted);\n\n  font-size: 10px;\n\n  line-height: 1.7;\n\n}\n\n\n\/* MOBILE *\/\n\n@media (max-width: 700px) {\n\n  .spring2027-days {\n\n    padding: 80px 0;\n\n  }\n\n\n  .spring2027-days-inner {\n\n    width:\n      min(100% - 32px, 520px);\n\n  }\n\n\n  .spring2027-days-heading {\n\n    margin-bottom: 45px;\n\n  }\n\n\n  .spring2027-days-heading h2 {\n\n    font-size: 34px;\n\n  }\n\n\n  .spring2027-days-heading p {\n\n    font-size: 12px;\n\n  }\n\n\n  .spring2027-days-calendar {\n\n    padding: 20px;\n\n    border-radius: 20px;\n\n    margin-bottom: 45px;\n\n  }\n\n\n  .spring2027-days-calendar-days {\n\n    gap: 5px;\n\n  }\n\n\n  .spring2027-day {\n\n    min-height: 65px;\n\n    border-radius: 10px;\n\n  }\n\n\n  .spring2027-day span {\n\n    font-size: 21px;\n\n  }\n\n\n  .spring2027-day small {\n\n    font-size: 6px;\n\n  }\n\n\n  .spring2027-days-buttons {\n\n    grid-template-columns:\n      repeat(4, 1fr);\n\n    gap: 6px;\n\n  }\n\n\n  .spring2027-days-button {\n\n    padding: 16px 5px;\n\n    border-radius: 13px;\n\n  }\n\n\n  .spring2027-days-button strong {\n\n    font-size: 27px;\n\n  }\n\n\n  .spring2027-days-button > span {\n\n    font-size: 9px;\n\n  }\n\n\n  .spring2027-days-result {\n\n    grid-template-columns: 1fr;\n\n    gap: 20px;\n\n    min-height: auto;\n\n    padding: 27px 20px;\n\n    text-align: center;\n\n  }\n\n\n  .spring2027-days-result-number {\n\n    width: 90px;\n\n    height: 90px;\n\n    margin: 0 auto;\n\n  }\n\n\n  .spring2027-days-result-number strong {\n\n    font-size: 35px;\n\n  }\n\n\n  .spring2027-days-result-text h4 {\n\n    font-size: 18px;\n\n  }\n\n\n  .spring2027-days-result-text p {\n\n    font-size: 10px;\n\n  }\n\n\n  .spring2027-days-note {\n\n    align-items: flex-start;\n\n    flex-direction: column;\n\n    gap: 7px;\n\n    padding: 17px;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<section class=\"spring2027-info\" id=\"spring2027-info\">\n\n  <div class=\"spring2027-info-inner\">\n\n    <div class=\"spring2027-info-heading\">\n\n      <p class=\"spring2027-info-kicker\">\n        COURSE INFORMATION\n      <\/p>\n\n      <h2>\n        \u304a\u7533\u3057\u8fbc\u307f\u524d\u306b\u3001<br>\n        <span>\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/span>\n      <\/h2>\n\n      <p>\n        \u6625\u671f\u8b1b\u7fd2\u306e\u57fa\u672c\u60c5\u5831\u3092\u307e\u3068\u3081\u307e\u3057\u305f\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <!-- IMPORTANT INFO -->\n\n    <div class=\"spring2027-info-important\">\n\n      <div class=\"spring2027-info-important-item\">\n\n        <span>\n          DATE\n        <\/span>\n\n        <strong>\n          3\/22\n          <small>MON<\/small>\n          \u2192\n          4\/2\n          <small>FRI<\/small>\n        <\/strong>\n\n        <p>\n          \u516810\u65e5\u9593\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"spring2027-info-important-item\">\n\n        <span>\n          TIME\n        <\/span>\n\n        <strong>\n          16:00\n          <small>\u301c<\/small>\n          21:00\n        <\/strong>\n\n        <p>\n          \u6700\u59273\u6642\u9593\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"spring2027-info-important-item spring2027-info-price\">\n\n        <span>\n          PRICE\n        <\/span>\n\n        <strong>\n          \u00a52,000\n        <\/strong>\n\n        <p>\n          1\u56de\u30fb1\u65e5\u3042\u305f\u308a\n        <\/p>\n\n      <\/div>\n\n\n      <div class=\"spring2027-info-important-item\">\n\n        <span>\n          CAPACITY\n        <\/span>\n\n        <strong>\n          16\n          <small>SEATS<\/small>\n        <\/strong>\n\n        <p>\n          \u5404\u65e5\u5148\u7740\u9806\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- DETAILS GRID -->\n\n    <div class=\"spring2027-info-grid\">\n\n\n      <!-- TARGET -->\n\n      <div class=\"spring2027-info-card\">\n\n        <div class=\"spring2027-info-card-icon\">\n          01\n        <\/div>\n\n        <div>\n\n          <span>\n            TARGET\n          <\/span>\n\n          <h3>\n            \u5bfe\u8c61\n          <\/h3>\n\n          <p>\n            \u5c0f\u5b66\u751f<br>\n            \u4e2d\u5b661\u301c3\u5e74\u751f\n          <\/p>\n\n          <small>\n            \u203b\u53c2\u52a0\u72b6\u6cc1\u306b\u3088\u308a\u304a\u65ad\u308a\u3059\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\n          <\/small>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- CONTENT -->\n\n      <div class=\"spring2027-info-card\">\n\n        <div class=\"spring2027-info-card-icon\">\n          02\n        <\/div>\n\n        <div>\n\n          <span>\n            CONTENT\n          <\/span>\n\n          <h3>\n            \u5b66\u7fd2\u5185\u5bb9\n          <\/h3>\n\n          <p>\n            \u65e2\u7fd2\u7bc4\u56f2\u306e\u7dcf\u5fa9\u7fd2<br>\n            \u6b21\u5b66\u5e74\u306e\u4e88\u7fd2<br>\n            \u30c6\u30b9\u30c8\u5bfe\u7b56<br>\n            \u9ad8\u6821\u6570\u5b66\u306e\u4e88\u7fd2\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- BELONGINGS -->\n\n      <div class=\"spring2027-info-card\">\n\n        <div class=\"spring2027-info-card-icon\">\n          03\n        <\/div>\n\n        <div>\n\n          <span>\n            WHAT TO BRING\n          <\/span>\n\n          <h3>\n            \u6301\u3061\u7269\n          <\/h3>\n\n          <p>\n            \u5fa9\u7fd2\u5e0c\u671b\u8005<br>\n            \u2192 \u5b66\u6821\u914d\u5e03\u306e\u554f\u984c\u96c6\n          <\/p>\n\n          <p>\n            \u4e88\u7fd2\u5e0c\u671b\u8005<br>\n            \u2192 \u6559\u5ba4\u3067\u6559\u6750\u3092\u6e96\u5099\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- PAYMENT -->\n\n      <div class=\"spring2027-info-card\">\n\n        <div class=\"spring2027-info-card-icon\">\n          04\n        <\/div>\n\n        <div>\n\n          <span>\n            PAYMENT\n          <\/span>\n\n          <h3>\n            \u304a\u652f\u6255\u3044\n          <\/h3>\n\n          <p>\n            \u53c2\u52a0\u8cbb\u306f\u3001\n            <strong>5\u6708\u5206\u306e\u6388\u696d\u6599\u8acb\u6c42\u6642<\/strong>\n            \u306b\u5408\u7b97\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3059\u3002\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- DEADLINE -->\n\n    <div class=\"spring2027-info-deadline\">\n\n      <div class=\"spring2027-info-deadline-icon\">\n        !\n      <\/div>\n\n      <div>\n\n        <span>\n          APPLICATION DEADLINE\n        <\/span>\n\n        <h3>\n          \u304a\u7533\u3057\u8fbc\u307f\u7de0\u5207\n        <\/h3>\n\n        <div class=\"spring2027-info-deadline-date\">\n\n          <strong>\n            3\u670813\u65e5\n          <\/strong>\n\n          <small>\n            \u571f\u66dc\u65e5\n          <\/small>\n\n        <\/div>\n\n        <p>\n          \u7528\u7d19\u63d0\u51fa\u30fb\u96fb\u8a71\u9023\u7d61\uff1a3\u670813\u65e5(\u571f)<br>\n          Web\u30da\u30fc\u30b8\u30fb\u516c\u5f0fLINE\uff1a3\u670813\u65e5(\u571f) 23:59\u307e\u3067\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- CAUTION -->\n\n    <div class=\"spring2027-info-caution\">\n\n      <span>\n        PLEASE NOTE\n      <\/span>\n\n      <p>\n        \u6625\u671f\u8b1b\u7fd2\u671f\u9593\u4e2d\u3001\u901a\u5e38\u6388\u696d\u66dc\u65e5\u3078\u306e\u53c2\u52a0\u306f\u3067\u304d\u307e\u305b\u3093\u3002<br>\n        \u901a\u5e38\u6388\u696d\u306e\u66dc\u65e5\u3068\u91cd\u306a\u3089\u306a\u3044\u65e5\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   SPRING 2027\n   INFORMATION SECTION\n========================================================= *\/\n\n.spring2027-info {\n\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n  --spring-muted: #69736d;\n\n  width: 100%;\n\n  padding: 120px 0;\n\n  background: #ffffff;\n\n  color: var(--spring-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n}\n\n\n.spring2027-info *,\n.spring2027-info *::before,\n.spring2027-info *::after {\n\n  box-sizing: border-box;\n\n}\n\n\n.spring2027-info-inner {\n\n  width:\n    min(1000px, calc(100% - 48px));\n\n  margin: 0 auto;\n\n}\n\n\n\/* HEADING *\/\n\n.spring2027-info-heading {\n\n  max-width: 700px;\n\n  margin: 0 auto 65px;\n\n  text-align: center;\n\n}\n\n\n.spring2027-info-kicker {\n\n  margin: 0 0 15px;\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n\n}\n\n\n.spring2027-info-heading h2 {\n\n  margin: 0;\n\n  font-size: clamp(36px, 5vw, 55px);\n\n  line-height: 1.3;\n\n  letter-spacing: -.05em;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-info-heading h2 span {\n\n  color: var(--spring-green-dark);\n\n}\n\n\n.spring2027-info-heading p {\n\n  margin: 22px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 13px;\n\n}\n\n\n\/* IMPORTANT *\/\n\n.spring2027-info-important {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(4, 1fr);\n\n  gap: 10px;\n\n  margin-bottom: 18px;\n\n}\n\n\n.spring2027-info-important-item {\n\n  padding: 27px 20px;\n\n  border-radius: 18px;\n\n  background: var(--spring-green-light);\n\n  text-align: center;\n\n}\n\n\n.spring2027-info-important-item > span {\n\n  display: block;\n\n  margin-bottom: 13px;\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .17em;\n\n}\n\n\n.spring2027-info-important-item strong {\n\n  display: block;\n\n  color: var(--spring-green-dark);\n\n  font-size: 24px;\n\n  line-height: 1.3;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-info-important-item strong small {\n\n  font-size: 8px;\n\n  font-weight: 700;\n\n}\n\n\n.spring2027-info-important-item p {\n\n  margin: 9px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 9px;\n\n}\n\n\n.spring2027-info-price {\n\n  background: var(--spring-green-dark);\n\n  color: #ffffff;\n\n}\n\n\n.spring2027-info-price > span {\n\n  color: rgba(255,255,255,.55);\n\n}\n\n\n.spring2027-info-price strong {\n\n  color: var(--spring-yellow);\n\n  font-size: 35px;\n\n}\n\n\n.spring2027-info-price p {\n\n  color: rgba(255,255,255,.6);\n\n}\n\n\n\/* GRID *\/\n\n.spring2027-info-grid {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(2, 1fr);\n\n  gap: 12px;\n\n}\n\n\n.spring2027-info-card {\n\n  display: grid;\n\n  grid-template-columns: 48px 1fr;\n\n  gap: 20px;\n\n  padding: 28px;\n\n  border: 1px solid #e2e8e3;\n\n  border-radius: 18px;\n\n  background: #ffffff;\n\n}\n\n\n.spring2027-info-card-icon {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 42px;\n\n  height: 42px;\n\n  border-radius: 12px;\n\n  background: var(--spring-green-light);\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-info-card > div > span {\n\n  display: block;\n\n  margin-bottom: 4px;\n\n  color: var(--spring-green);\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .16em;\n\n}\n\n\n.spring2027-info-card h3 {\n\n  margin: 0 0 12px;\n\n  font-size: 18px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-info-card p {\n\n  margin: 0 0 10px;\n\n  color: var(--spring-muted);\n\n  font-size: 11px;\n\n  line-height: 1.9;\n\n}\n\n\n.spring2027-info-card p:last-of-type {\n\n  margin-bottom: 0;\n\n}\n\n\n.spring2027-info-card small {\n\n  display: block;\n\n  margin-top: 10px;\n\n  color: #9ba49d;\n\n  font-size: 9px;\n\n  line-height: 1.6;\n\n}\n\n\n\/* DEADLINE *\/\n\n.spring2027-info-deadline {\n\n  display: grid;\n\n  grid-template-columns: 65px 1fr;\n\n  gap: 25px;\n\n  align-items: center;\n\n  margin-top: 35px;\n\n  padding: 35px 40px;\n\n  border-radius: 22px;\n\n  background: #faf8ed;\n\n  border: 1px solid #eee8cd;\n\n}\n\n\n.spring2027-info-deadline-icon {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 55px;\n\n  height: 55px;\n\n  border-radius: 50%;\n\n  background: var(--spring-yellow);\n\n  color: #ffffff;\n\n  font-size: 26px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-info-deadline span {\n\n  display: block;\n\n  margin-bottom: 5px;\n\n  color: #9a8641;\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .17em;\n\n}\n\n\n.spring2027-info-deadline h3 {\n\n  margin: 0;\n\n  font-size: 18px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-info-deadline-date {\n\n  display: flex;\n\n  align-items: baseline;\n\n  gap: 8px;\n\n  margin-top: 7px;\n\n}\n\n\n.spring2027-info-deadline-date strong {\n\n  color: #7e6d35;\n\n  font-size: 28px;\n\n}\n\n\n.spring2027-info-deadline-date small {\n\n  color: #9a8641;\n\n  font-size: 10px;\n\n}\n\n\n.spring2027-info-deadline p {\n\n  margin: 5px 0 0;\n\n  color: #8f8972;\n\n  font-size: 10px;\n\n  line-height: 1.8;\n\n}\n\n\n\/* CAUTION *\/\n\n.spring2027-info-caution {\n\n  margin-top: 15px;\n\n  padding: 17px 22px;\n\n  border-left: 3px solid #c8c8c3;\n\n  background: #f7f7f5;\n\n}\n\n\n.spring2027-info-caution span {\n\n  display: block;\n\n  margin-bottom: 5px;\n\n  color: #8b8d88;\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n\n}\n\n\n.spring2027-info-caution p {\n\n  margin: 0;\n\n  color: #777b76;\n\n  font-size: 10px;\n\n  line-height: 1.8;\n\n}\n\n\n\/* MOBILE *\/\n\n@media (max-width: 700px) {\n\n  .spring2027-info {\n\n    padding: 80px 0;\n\n  }\n\n\n  .spring2027-info-inner {\n\n    width:\n      min(100% - 32px, 520px);\n\n  }\n\n\n  .spring2027-info-heading {\n\n    margin-bottom: 45px;\n\n  }\n\n\n  .spring2027-info-heading h2 {\n\n    font-size: 34px;\n\n  }\n\n\n  .spring2027-info-important {\n\n    grid-template-columns:\n      repeat(2, 1fr);\n\n  }\n\n\n  .spring2027-info-important-item {\n\n    padding: 22px 10px;\n\n  }\n\n\n  .spring2027-info-important-item strong {\n\n    font-size: 19px;\n\n  }\n\n\n  .spring2027-info-price strong {\n\n    font-size: 29px;\n\n  }\n\n\n  .spring2027-info-grid {\n\n    grid-template-columns: 1fr;\n\n  }\n\n\n  .spring2027-info-card {\n\n    padding: 22px;\n\n  }\n\n\n  .spring2027-info-deadline {\n\n    grid-template-columns: 48px 1fr;\n\n    gap: 15px;\n\n    padding: 25px 20px;\n\n  }\n\n\n  .spring2027-info-deadline-icon {\n\n    width: 43px;\n\n    height: 43px;\n\n    font-size: 21px;\n\n  }\n\n\n  .spring2027-info-deadline-date strong {\n\n    font-size: 24px;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<section class=\"spring2027-apply\" id=\"spring2027-apply\">\n\n  <div class=\"spring2027-apply-inner\">\n\n    <div class=\"spring2027-apply-heading\">\n\n      <p class=\"spring2027-apply-kicker\">\n        HOW TO APPLY\n      <\/p>\n\n      <h2>\n        \u53c2\u52a0\u3057\u305f\u3044\u3068\u601d\u3063\u305f\u3089\u3001<br>\n        <span>\u3053\u306e3\u3064\u306e\u65b9\u6cd5\u304b\u3089\u3002<\/span>\n      <\/h2>\n\n      <p>\n        \u3054\u90fd\u5408\u306e\u3088\u3044\u65b9\u6cd5\u3067\u304a\u7533\u3057\u8fbc\u307f\u304f\u3060\u3055\u3044\u3002\n      <\/p>\n\n    <\/div>\n\n\n    <!-- =========================\n         APPLY METHODS\n    ========================== -->\n\n    <div class=\"spring2027-apply-methods\">\n\n\n      <!-- PAPER -->\n\n      <div class=\"spring2027-apply-card\">\n\n        <div class=\"spring2027-apply-card-top\">\n\n          <span class=\"spring2027-apply-number\">\n            02\n          <\/span>\n\n          <span class=\"spring2027-apply-label\">\n            PAPER\n          <\/span>\n\n        <\/div>\n\n        <h3>\n          \u7528\u7d19\u3067\u7533\u3057\u8fbc\u3080\n        <\/h3>\n\n        <p>\n          \u30d7\u30e9\u30a4\u30ba2\u6708\u53f7\u306b\u540c\u5c01\u3057\u3066\u3044\u308b\n          \u300c\u6625\u671f\u8b1b\u7fd2\u306e\u304a\u77e5\u3089\u305b\u300d\u306b\u5fc5\u8981\u4e8b\u9805\u3092\u3054\u8a18\u5165\u306e\u3046\u3048\u3001\n          \u6559\u5ba4\u3078\u3054\u63d0\u51fa\u304f\u3060\u3055\u3044\u3002\n        <\/p>\n\n        <div class=\"spring2027-apply-card-bottom\">\n          3\u670813\u65e5(\u571f)\u307e\u3067\n        <\/div>\n\n      <\/div>\n\n\n      <!-- WEB -->\n\n      <div class=\"spring2027-apply-card spring2027-apply-card-main\">\n\n        <div class=\"spring2027-apply-card-top\">\n\n          <span class=\"spring2027-apply-number\">\n            01\n          <\/span>\n\n          <span class=\"spring2027-apply-label\">\n            WEB\n          <\/span>\n\n        <\/div>\n\n        <h3>\n          Web\u304b\u3089\u7533\u3057\u8fbc\u3080\n        <\/h3>\n\n        <p>\n          \u4e0b\u306e\u30dc\u30bf\u30f3\u304b\u3089\n          \u300c\u6625\u671f\u8b1b\u7fd2\u53c2\u52a0\u7533\u8fbc\u30d5\u30a9\u30fc\u30e0\u300d\u3078\u9032\u307f\u3001\n          \u5fc5\u8981\u4e8b\u9805\u3092\u3054\u5165\u529b\u304f\u3060\u3055\u3044\u3002\n        <\/p>\n\n        <a href=\"https:\/\/forms.gle\/K7TMQZCf7cSRLfH79\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"spring2027-apply-button\">\n          Web\u7533\u8fbc\u30d5\u30a9\u30fc\u30e0\u3078\n          <span>\u2192<\/span>\n        <\/a>\n\n        <div class=\"spring2027-apply-card-bottom\">\n          3\u670813\u65e5(\u571f) 23:59\u307e\u3067\n        <\/div>\n\n      <\/div>\n\n\n      <!-- LINE -->\n\n      <div class=\"spring2027-apply-card\">\n\n        <div class=\"spring2027-apply-card-top\">\n\n          <span class=\"spring2027-apply-number\">\n            03\n          <\/span>\n\n          <span class=\"spring2027-apply-label\">\n            LINE\n          <\/span>\n\n        <\/div>\n\n        <h3>\n          LINE\u3067\u7533\u3057\u8fbc\u3080\n        <\/h3>\n\n        <p>\n          \u300c\u6625\u671f\u8b1b\u7fd2\u306e\u304a\u77e5\u3089\u305b\u300d\u306e\u7528\u7d19\u3092\u64ae\u5f71\u3057\u3001\n          \u5f53\u6559\u5ba4\u306e\u516c\u5f0fLINE\u3078\u753b\u50cf\u3092\u9001\u4fe1\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n          \u6587\u5b57\u5165\u529b\u306b\u3088\u308b\u304a\u7533\u3057\u8fbc\u307f\u3082\u53ef\u80fd\u3067\u3059\u3002\n        <\/p>\n\n        <div class=\"spring2027-apply-card-bottom\">\n          3\u670813\u65e5(\u571f) 23:59\u307e\u3067\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =========================\n         DEADLINE REMINDER\n    ========================== -->\n\n    <div class=\"spring2027-apply-reminder\">\n\n      <div class=\"spring2027-apply-reminder-mark\">\n        !\n      <\/div>\n\n      <div>\n\n        <span>\n          DEADLINE\n        <\/span>\n\n        <strong>\n          \u304a\u7533\u3057\u8fbc\u307f\u7de0\u5207\u306f3\u670813\u65e5(\u571f)\n        <\/strong>\n\n        <p>\n          Web\u30fb\u516c\u5f0fLINE\u304b\u3089\u306e\u304a\u7533\u3057\u8fbc\u307f\u306f\n          3\u670813\u65e5(\u571f) 23:59\u307e\u3067\u3067\u3059\u3002\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =========================\n         CONTACT\n    ========================== -->\n\n    <div class=\"spring2027-apply-contact\">\n\n      <div>\n\n        <span>\n          HAVE A QUESTION?\n        <\/span>\n\n        <h3>\n          \u300c\u4f55\u65e5\u53c2\u52a0\u3059\u308c\u3070\u3044\u3044\uff1f\u300d<br>\n          \u300c\u3069\u3093\u306a\u52c9\u5f37\u3092\u3059\u308c\u3070\u3044\u3044\uff1f\u300d\n        <\/h3>\n\n        <p>\n          \u9032\u7d1a\u30fb\u65b0\u5b66\u671f\u3092\u8fce\u3048\u308b\u306b\u3042\u305f\u3063\u3066\u306e\n          \u3054\u76f8\u8ac7\u3084\u3054\u8cea\u554f\u3082\u3001\u304a\u6c17\u8efd\u306b\u3054\u9023\u7d61\u304f\u3060\u3055\u3044\u3002\n        <\/p>\n\n      <\/div>\n\n\n      <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSe3DBt-UxubdiqkpCufl0AQUt1r6VWEkaXD5insrc27iw4-Zw\/viewform\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"spring2027-apply-contact-button\">\n        \u5b66\u7fd2\u76f8\u8ac7\u306f\u3053\u3061\u3089\n        <span>\u2192<\/span>\n      <\/a>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   SPRING 2027\n   APPLY SECTION\n========================================================= *\/\n\n.spring2027-apply {\n\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n  --spring-muted: #69736d;\n\n  width: 100%;\n\n  padding: 120px 0 100px;\n\n  background:\n    linear-gradient(\n      180deg,\n      #f7faf7 0%,\n      #edf3ee 100%\n    );\n\n  color: var(--spring-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n}\n\n\n.spring2027-apply *,\n.spring2027-apply *::before,\n.spring2027-apply *::after {\n\n  box-sizing: border-box;\n\n}\n\n\n.spring2027-apply-inner {\n\n  width:\n    min(1050px, calc(100% - 48px));\n\n  margin: 0 auto;\n\n}\n\n\n\/* HEADING *\/\n\n.spring2027-apply-heading {\n\n  max-width: 720px;\n\n  margin: 0 auto 65px;\n\n  text-align: center;\n\n}\n\n\n.spring2027-apply-kicker {\n\n  margin: 0 0 15px;\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n\n}\n\n\n.spring2027-apply-heading h2 {\n\n  margin: 0;\n\n  font-size: clamp(36px, 5vw, 56px);\n\n  line-height: 1.3;\n\n  letter-spacing: -.05em;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-apply-heading h2 span {\n\n  color: var(--spring-green-dark);\n\n}\n\n\n.spring2027-apply-heading p {\n\n  margin: 22px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 13px;\n\n}\n\n\n\/* METHODS *\/\n\n.spring2027-apply-methods {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(3, 1fr);\n\n  gap: 14px;\n\n}\n\n\n.spring2027-apply-card {\n\n  display: flex;\n\n  flex-direction: column;\n\n  min-height: 330px;\n\n  padding: 30px;\n\n  border: 1px solid #dce5df;\n\n  border-radius: 23px;\n\n  background: #ffffff;\n\n}\n\n\n.spring2027-apply-card-main {\n\n  position: relative;\n\n  border:\n    2px solid var(--spring-green);\n\n  box-shadow:\n    0 15px 35px rgba(63,95,77,.12);\n\n}\n\n\n.spring2027-apply-card-main::before {\n\n  content: \"\u304a\u3059\u3059\u3081\";\n\n  position: absolute;\n\n  top: -12px;\n\n  right: 20px;\n\n  padding: 6px 12px;\n\n  border-radius: 20px;\n\n  background: var(--spring-green);\n\n  color: #ffffff;\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .08em;\n\n}\n\n\n.spring2027-apply-card-top {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  margin-bottom: 25px;\n\n}\n\n\n.spring2027-apply-number {\n\n  color: #b9c7bc;\n\n  font-size: 13px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-apply-label {\n\n  color: var(--spring-green);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n}\n\n\n.spring2027-apply-card h3 {\n\n  margin: 0;\n\n  font-size: 22px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-apply-card p {\n\n  margin: 18px 0 0;\n\n  color: var(--spring-muted);\n\n  font-size: 11px;\n\n  line-height: 1.9;\n\n}\n\n\n\/* CARD BOTTOM *\/\n\n.spring2027-apply-card-bottom {\n\n  margin-top: auto;\n\n  padding-top: 20px;\n\n  color: var(--spring-green);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n}\n\n\n\/* WEB BUTTON *\/\n\n.spring2027-apply-button {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  margin-top: 22px;\n\n  padding: 14px 17px;\n\n  border-radius: 12px;\n\n  background: var(--spring-green);\n\n  color: #ffffff !important;\n\n  text-decoration: none !important;\n\n  font-size: 11px;\n\n  font-weight: 800;\n\n  transition:\n    transform .2s ease,\n    background .2s ease;\n\n}\n\n\n.spring2027-apply-button:hover {\n\n  transform: translateY(-2px);\n\n  background: var(--spring-green-dark);\n\n}\n\n\n.spring2027-apply-button span {\n\n  font-size: 17px;\n\n}\n\n\n\/* REMINDER *\/\n\n.spring2027-apply-reminder {\n\n  display: grid;\n\n  grid-template-columns: 52px 1fr;\n\n  align-items: center;\n\n  gap: 18px;\n\n  max-width: 850px;\n\n  margin: 30px auto 0;\n\n  padding: 23px 28px;\n\n  border-radius: 17px;\n\n  background: #faf8ed;\n\n  border: 1px solid #eee8cd;\n\n}\n\n\n.spring2027-apply-reminder-mark {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 45px;\n\n  height: 45px;\n\n  border-radius: 50%;\n\n  background: var(--spring-yellow);\n\n  color: #ffffff;\n\n  font-size: 21px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-apply-reminder span {\n\n  display: block;\n\n  margin-bottom: 4px;\n\n  color: #9a8641;\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .17em;\n\n}\n\n\n.spring2027-apply-reminder strong {\n\n  display: block;\n\n  color: #756631;\n\n  font-size: 15px;\n\n}\n\n\n.spring2027-apply-reminder p {\n\n  margin: 5px 0 0;\n\n  color: #8f8972;\n\n  font-size: 10px;\n\n}\n\n\n\/* CONTACT *\/\n\n.spring2027-apply-contact {\n\n  display: grid;\n\n  grid-template-columns: 1fr auto;\n\n  align-items: center;\n\n  gap: 40px;\n\n  max-width: 850px;\n\n  margin: 45px auto 0;\n\n  padding: 40px 45px;\n\n  border-radius: 25px;\n\n  background: var(--spring-green-dark);\n\n  color: #ffffff;\n\n}\n\n\n.spring2027-apply-contact > div > span {\n\n  display: block;\n\n  margin-bottom: 8px;\n\n  color: rgba(255,255,255,.5);\n\n  font-size: 8px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n}\n\n\n.spring2027-apply-contact h3 {\n\n  margin: 0;\n\n  font-size: 21px;\n\n  line-height: 1.6;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-apply-contact p {\n\n  margin: 10px 0 0;\n\n  color: rgba(255,255,255,.68);\n\n  font-size: 10px;\n\n  line-height: 1.8;\n\n}\n\n\n.spring2027-apply-contact-button {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  gap: 25px;\n\n  min-width: 170px;\n\n  padding: 15px 18px;\n\n  border-radius: 12px;\n\n  background: #ffffff;\n\n  color: var(--spring-green-dark) !important;\n\n  text-decoration: none !important;\n\n  font-size: 10px;\n\n  font-weight: 800;\n\n  transition:\n    transform .2s ease;\n\n}\n\n\n.spring2027-apply-contact-button:hover {\n\n  transform: translateY(-2px);\n\n}\n\n\n.spring2027-apply-contact-button span {\n\n  font-size: 16px;\n\n}\n\n\n\/* MOBILE *\/\n\n@media (max-width: 700px) {\n\n  .spring2027-apply {\n\n    padding: 80px 0;\n\n  }\n\n\n  .spring2027-apply-inner {\n\n    width:\n      min(100% - 32px, 520px);\n\n  }\n\n\n  .spring2027-apply-heading {\n\n    margin-bottom: 45px;\n\n  }\n\n\n  .spring2027-apply-heading h2 {\n\n    font-size: 34px;\n\n  }\n\n\n  .spring2027-apply-methods {\n\n    grid-template-columns: 1fr;\n\n  }\n\n\n  .spring2027-apply-card {\n\n    min-height: auto;\n\n    padding: 25px;\n\n  }\n\n\n  .spring2027-apply-card-main {\n\n    order: -1;\n\n  }\n\n\n  .spring2027-apply-card-bottom {\n\n    margin-top: 25px;\n\n  }\n\n\n  .spring2027-apply-reminder {\n\n    grid-template-columns: 43px 1fr;\n\n    gap: 13px;\n\n    padding: 20px;\n\n  }\n\n\n  .spring2027-apply-reminder-mark {\n\n    width: 40px;\n\n    height: 40px;\n\n  }\n\n\n  .spring2027-apply-reminder strong {\n\n    font-size: 13px;\n\n  }\n\n\n  .spring2027-apply-contact {\n\n    grid-template-columns: 1fr;\n\n    gap: 25px;\n\n    padding: 28px 22px;\n\n    border-radius: 20px;\n\n  }\n\n\n  .spring2027-apply-contact-button {\n\n    width: 100%;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const section = document.querySelector(\"#spring2027-final\");\n\n  if (!section) return;\n\n\n  const observer = new IntersectionObserver(\n\n    function (entries) {\n\n      entries.forEach(function (entry) {\n\n        if (entry.isIntersecting) {\n\n          section.classList.add(\"is-visible\");\n\n          observer.unobserve(section);\n\n        }\n\n      });\n\n    },\n\n    {\n      threshold: 0.2\n    }\n\n  );\n\n\n  observer.observe(section);\n\n});\n<\/script>\n\n<section class=\"spring2027-final\" id=\"spring2027-final\">\n\n  <div class=\"spring2027-final-bg\"><\/div>\n\n  <div class=\"spring2027-final-inner\">\n\n    <div class=\"spring2027-final-content\">\n\n      <p class=\"spring2027-final-kicker\">\n        SPRING COURSE 2027\n      <\/p>\n\n      <div class=\"spring2027-final-season\">\n\n        <span>SPRING<\/span>\n\n        <div class=\"spring2027-final-arrow\">\n          \u2193\n        <\/div>\n\n        <span>NEW TERM<\/span>\n\n      <\/div>\n\n\n      <h2>\n        \u6625\u4f11\u307f\u3092\u3001<br>\n        <span>\u6b21\u306e\u4e00\u6b69\u306b\u3002<\/span>\n      <\/h2>\n\n\n      <p class=\"spring2027-final-lead\">\n        \u5fa9\u7fd2\u3059\u308b\u3002<br>\n        \u4e88\u7fd2\u3059\u308b\u3002<br>\n        \u65b0\u3057\u3044\u5b66\u5e74\u3078\u306e\u6e96\u5099\u3092\u3059\u308b\u3002\n      <\/p>\n\n\n      <p class=\"spring2027-final-message\">\n        \u5927\u5207\u306a\u306e\u306f\u3001\u305f\u304f\u3055\u3093\u52c9\u5f37\u3059\u308b\u3053\u3068\u3060\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<br>\n        \u300c\u65b0\u5b66\u671f\u304c\u5c11\u3057\u697d\u3057\u307f\u306b\u306a\u308b\u300d<br>\n        \u305d\u3093\u306a\u6625\u4f11\u307f\u3092\u4e00\u7dd2\u306b\u3064\u304f\u308a\u307e\u3057\u3087\u3046\u3002\n      <\/p>\n\n\n      <div class=\"spring2027-final-buttons\">\n\n        <a href=\"https:\/\/forms.gle\/K7TMQZCf7cSRLfH79\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"spring2027-final-button spring2027-final-button-main\">\n          <span>\n            \u6625\u671f\u8b1b\u7fd2\u306b\u7533\u3057\u8fbc\u3080\n          <\/span>\n\n          <strong>\n            \u2192\n          <\/strong>\n        <\/a>\n\n\n        <a href=\"#spring2027-apply\" class=\"spring2027-final-button spring2027-final-button-sub\">\n          <span>\n            \u7533\u8fbc\u65b9\u6cd5\u3092\u3082\u3046\u4e00\u5ea6\u898b\u308b\n          <\/span>\n\n          <strong>\n            \u2191\n          <\/strong>\n        <\/a>\n\n      <\/div>\n\n\n      <div class=\"spring2027-final-deadline\">\n\n        <span>\n          APPLICATION DEADLINE\n        <\/span>\n\n        <strong>\n          2027.3.13 SAT\n        <\/strong>\n\n        <small>\n          Web\u30fb\u516c\u5f0fLINE\u306f23:59\u307e\u3067\n        <\/small>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   SPRING 2027\n   FINAL CTA\n========================================================= *\/\n\n.spring2027-final {\n\n  --spring-green: #5f806c;\n  --spring-green-dark: #3f5f4d;\n  --spring-green-light: #edf3ee;\n  --spring-yellow: #e8c96a;\n  --spring-text: #27332c;\n\n  position: relative;\n\n  overflow: hidden;\n\n  width: 100%;\n\n  padding: 140px 0 130px;\n\n  background: var(--spring-green-dark);\n\n  color: #ffffff;\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n}\n\n\n.spring2027-final *,\n.spring2027-final *::before,\n.spring2027-final *::after {\n\n  box-sizing: border-box;\n\n}\n\n\n\/* BACKGROUND *\/\n\n.spring2027-final-bg {\n\n  position: absolute;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n\n    radial-gradient(\n      circle at 15% 20%,\n      rgba(255,255,255,.07) 0,\n      rgba(255,255,255,0) 28%\n    ),\n\n    radial-gradient(\n      circle at 85% 75%,\n      rgba(232,201,106,.08) 0,\n      rgba(232,201,106,0) 25%\n    );\n\n}\n\n\n\/* DECORATIVE CIRCLE *\/\n\n.spring2027-final::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  width: 420px;\n\n  height: 420px;\n\n  top: -210px;\n\n  right: -130px;\n\n  border-radius: 50%;\n\n  border: 1px solid rgba(255,255,255,.08);\n\n}\n\n\n.spring2027-final::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  width: 600px;\n\n  height: 600px;\n\n  bottom: -400px;\n\n  left: -250px;\n\n  border-radius: 50%;\n\n  border: 1px solid rgba(255,255,255,.05);\n\n}\n\n\n\/* INNER *\/\n\n.spring2027-final-inner {\n\n  position: relative;\n\n  z-index: 2;\n\n  width:\n    min(850px, calc(100% - 48px));\n\n  margin: 0 auto;\n\n}\n\n\n\/* CONTENT *\/\n\n.spring2027-final-content {\n\n  text-align: center;\n\n}\n\n\n\/* KICKER *\/\n\n.spring2027-final-kicker {\n\n  margin: 0 0 30px;\n\n  color: rgba(255,255,255,.5);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .25em;\n\n}\n\n\n\/* SEASON *\/\n\n.spring2027-final-season {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 18px;\n\n  margin-bottom: 28px;\n\n}\n\n\n.spring2027-final-season > span {\n\n  color: rgba(255,255,255,.7);\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n\n}\n\n\n.spring2027-final-arrow {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  width: 30px;\n\n  height: 30px;\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,.08);\n\n  color: var(--spring-yellow);\n\n  font-size: 15px;\n\n}\n\n\n\/* TITLE *\/\n\n.spring2027-final h2 {\n\n  margin: 0;\n\n  font-size: clamp(50px, 8vw, 90px);\n\n  line-height: 1.15;\n\n  letter-spacing: -.07em;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-final h2 span {\n\n  color: var(--spring-yellow);\n\n}\n\n\n\/* LEAD *\/\n\n.spring2027-final-lead {\n\n  margin: 38px 0 0;\n\n  color: rgba(255,255,255,.85);\n\n  font-size: 18px;\n\n  line-height: 2;\n\n  font-weight: 700;\n\n}\n\n\n\/* MESSAGE *\/\n\n.spring2027-final-message {\n\n  max-width: 650px;\n\n  margin: 32px auto 0;\n\n  color: rgba(255,255,255,.58);\n\n  font-size: 11px;\n\n  line-height: 2;\n\n}\n\n\n\/* BUTTONS *\/\n\n.spring2027-final-buttons {\n\n  display: flex;\n\n  justify-content: center;\n\n  gap: 12px;\n\n  margin-top: 45px;\n\n}\n\n\n.spring2027-final-button {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  gap: 30px;\n\n  min-width: 235px;\n\n  padding: 18px 21px;\n\n  border-radius: 14px;\n\n  text-decoration: none !important;\n\n  font-size: 11px;\n\n  font-weight: 800;\n\n  transition:\n    transform .25s ease,\n    box-shadow .25s ease;\n\n}\n\n\n.spring2027-final-button:hover {\n\n  transform: translateY(-4px);\n\n}\n\n\n.spring2027-final-button strong {\n\n  font-size: 18px;\n\n  font-weight: 400;\n\n}\n\n\n\/* MAIN *\/\n\n.spring2027-final-button-main {\n\n  background: #ffffff;\n\n  color: var(--spring-green-dark) !important;\n\n  box-shadow:\n    0 12px 30px rgba(0,0,0,.15);\n\n}\n\n\n.spring2027-final-button-main:hover {\n\n  box-shadow:\n    0 18px 35px rgba(0,0,0,.22);\n\n}\n\n\n\/* SUB *\/\n\n.spring2027-final-button-sub {\n\n  border: 1px solid rgba(255,255,255,.18);\n\n  background: rgba(255,255,255,.06);\n\n  color: #ffffff !important;\n\n}\n\n\n\/* DEADLINE *\/\n\n.spring2027-final-deadline {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 12px;\n\n  margin-top: 35px;\n\n}\n\n\n.spring2027-final-deadline span {\n\n  color: rgba(255,255,255,.4);\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n\n}\n\n\n.spring2027-final-deadline strong {\n\n  color: var(--spring-yellow);\n\n  font-size: 13px;\n\n  letter-spacing: .05em;\n\n}\n\n\n.spring2027-final-deadline small {\n\n  color: rgba(255,255,255,.4);\n\n  font-size: 8px;\n\n}\n\n\n\/* INITIAL ANIMATION *\/\n\n.spring2027-final-content > * {\n\n  opacity: 0;\n\n  transform: translateY(25px);\n\n  transition:\n    opacity .8s ease,\n    transform .8s ease;\n\n}\n\n\n.spring2027-final.is-visible\n.spring2027-final-content > * {\n\n  opacity: 1;\n\n  transform: translateY(0);\n\n}\n\n\n.spring2027-final.is-visible\n.spring2027-final-content > *:nth-child(2) {\n\n  transition-delay: .08s;\n\n}\n\n\n.spring2027-final.is-visible\n.spring2027-final-content > *:nth-child(3) {\n\n  transition-delay: .16s;\n\n}\n\n\n.spring2027-final.is-visible\n.spring2027-final-content > *:nth-child(4) {\n\n  transition-delay: .24s;\n\n}\n\n\n.spring2027-final.is-visible\n.spring2027-final-content > *:nth-child(5) {\n\n  transition-delay: .32s;\n\n}\n\n\n.spring2027-final.is-visible\n.spring2027-final-content > *:nth-child(6) {\n\n  transition-delay: .40s;\n\n}\n\n\n.spring2027-final.is-visible\n.spring2027-final-content > *:nth-child(7) {\n\n  transition-delay: .48s;\n\n}\n\n\n\/* MOBILE *\/\n\n@media (max-width: 700px) {\n\n  .spring2027-final {\n\n    padding: 95px 0 85px;\n\n  }\n\n\n  .spring2027-final-inner {\n\n    width:\n      min(100% - 32px, 520px);\n\n  }\n\n\n  .spring2027-final h2 {\n\n    font-size: 47px;\n\n  }\n\n\n  .spring2027-final-lead {\n\n    font-size: 15px;\n\n  }\n\n\n  .spring2027-final-message {\n\n    font-size: 10px;\n\n  }\n\n\n  .spring2027-final-buttons {\n\n    flex-direction: column;\n\n    margin-top: 35px;\n\n  }\n\n\n  .spring2027-final-button {\n\n    width: 100%;\n\n    min-width: 0;\n\n  }\n\n\n  .spring2027-final-deadline {\n\n    flex-wrap: wrap;\n\n    gap: 6px 10px;\n\n  }\n\n\n  .spring2027-final-deadline small {\n\n    width: 100%;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const cta = document.querySelector(\"#spring2027-fixed-cta\");\n\n  const finalSection = document.querySelector(\"#spring2027-final\");\n\n  if (!cta) return;\n\n\n  let isFinalVisible = false;\n\n\n  \/*\n   * \u4e00\u5b9a\u91cf\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u3089CTA\u3092\u8868\u793a\n   *\/\n\n  function checkScroll() {\n\n    const scrollY = window.scrollY;\n\n    const windowHeight = window.innerHeight;\n\n\n    \/*\n     * \u6700\u5f8c\u306eCTA\u30bb\u30af\u30b7\u30e7\u30f3\u304c\n     * \u753b\u9762\u5185\u306b\u5165\u3063\u3066\u3044\u308b\u304b\u78ba\u8a8d\n     *\/\n\n    if (finalSection) {\n\n      const rect =\n        finalSection.getBoundingClientRect();\n\n      isFinalVisible =\n        rect.top < windowHeight &&\n        rect.bottom > 0;\n\n    }\n\n\n    \/*\n     * \u30da\u30fc\u30b8\u4e0a\u90e8\u3067\u306f\u975e\u8868\u793a\n     * \u6700\u7d42CTA\u3067\u306f\u975e\u8868\u793a\n     *\/\n\n    if (\n      scrollY > 500 &&\n      !isFinalVisible\n    ) {\n\n      cta.classList.add(\"is-visible\");\n\n    } else {\n\n      cta.classList.remove(\"is-visible\");\n\n    }\n\n  }\n\n\n  window.addEventListener(\n    \"scroll\",\n    checkScroll,\n    {\n      passive: true\n    }\n  );\n\n\n  checkScroll();\n\n});\n<\/script>\n\n<div class=\"spring2027-fixed-cta\" id=\"spring2027-fixed-cta\">\n\n  <div class=\"spring2027-fixed-cta-inner\">\n\n    <div class=\"spring2027-fixed-cta-text\">\n\n      <span>\n        SPRING COURSE 2027\n      <\/span>\n\n      <strong>\n        \u6625\u671f\u8b1b\u7fd2\u306b\u53c2\u52a0\u3059\u308b\n      <\/strong>\n\n    <\/div>\n\n\n    <a href=\"https:\/\/forms.gle\/K7TMQZCf7cSRLfH79\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"spring2027-fixed-cta-button\">\n      \u7533\u3057\u8fbc\u3080\n      <span>\u2192<\/span>\n    <\/a>\n\n  <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   SPRING 2027\n   FIXED CTA\n========================================================= *\/\n\n.spring2027-fixed-cta {\n\n  --spring-green: #3f5f4d;\n  --spring-yellow: #e8c96a;\n\n  position: fixed;\n\n  z-index: 9999;\n\n  left: 0;\n\n  right: 0;\n\n  bottom: 0;\n\n  width: 100%;\n\n  padding:\n    10px 15px\n    calc(10px + env(safe-area-inset-bottom));\n\n  background:\n    rgba(255,255,255,.94);\n\n  border-top:\n    1px solid rgba(63,95,77,.12);\n\n  box-shadow:\n    0 -8px 30px rgba(35,55,43,.10);\n\n  backdrop-filter:\n    blur(10px);\n\n  -webkit-backdrop-filter:\n    blur(10px);\n\n  transform:\n    translateY(110%);\n\n  opacity: 0;\n\n  pointer-events: none;\n\n  transition:\n    transform .35s ease,\n    opacity .35s ease;\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Noto Sans JP\",\n    \"Yu Gothic\",\n    \"Hiragino Kaku Gothic ProN\",\n    sans-serif;\n\n}\n\n\n.spring2027-fixed-cta.is-visible {\n\n  transform:\n    translateY(0);\n\n  opacity: 1;\n\n  pointer-events: auto;\n\n}\n\n\n.spring2027-fixed-cta-inner {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 25px;\n\n  width:\n    min(900px, 100%);\n\n  margin: 0 auto;\n\n}\n\n\n.spring2027-fixed-cta-text {\n\n  display: flex;\n\n  flex-direction: column;\n\n}\n\n\n.spring2027-fixed-cta-text span {\n\n  color: #8a958d;\n\n  font-size: 7px;\n\n  font-weight: 800;\n\n  letter-spacing: .15em;\n\n}\n\n\n.spring2027-fixed-cta-text strong {\n\n  margin-top: 2px;\n\n  color: var(--spring-green);\n\n  font-size: 13px;\n\n  font-weight: 800;\n\n}\n\n\n.spring2027-fixed-cta-button {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 20px;\n\n  min-width: 190px;\n\n  padding: 13px 18px;\n\n  border-radius: 12px;\n\n  background: var(--spring-green);\n\n  color: #ffffff !important;\n\n  text-decoration: none !important;\n\n  font-size: 10px;\n\n  font-weight: 800;\n\n  transition:\n    transform .2s ease,\n    background .2s ease;\n\n}\n\n\n.spring2027-fixed-cta-button:hover {\n\n  transform: translateY(-2px);\n\n  background: #304b3b;\n\n}\n\n\n.spring2027-fixed-cta-button span {\n\n  color: var(--spring-yellow);\n\n  font-size: 16px;\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 700px) {\n\n  .spring2027-fixed-cta {\n\n    padding:\n      8px 12px\n      calc(8px + env(safe-area-inset-bottom));\n\n  }\n\n\n  .spring2027-fixed-cta-inner {\n\n    gap: 10px;\n\n    justify-content:\n      space-between;\n\n  }\n\n\n  .spring2027-fixed-cta-text span {\n\n    font-size: 6px;\n\n  }\n\n\n  .spring2027-fixed-cta-text strong {\n\n    font-size: 11px;\n\n  }\n\n\n  .spring2027-fixed-cta-button {\n\n    flex: 0 0 auto;\n\n    min-width: 125px;\n\n    padding: 12px 14px;\n\n  }\n\n}\n\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>SPRING LEARNING GUIDE 2027 \u65b0\u3057\u3044\u5b66\u5e74\u304c\u3001\u306f\u3058\u307e\u308b\u3002 \u3053\u306e\u6625\u3001 \u65b0\u3057\u3044\u5b66\u5e74\u3092 \u5c11\u3057\u5148\u53d6\u308a\u3057\u3088\u3046\u3002 \u5fa9\u7fd2\u3059\u308b\u3002\u4e88\u7fd2\u3059\u308b\u3002 \u305d\u3057\u3066\u3001\u65b0\u3057\u3044\u5b66\u5e74\u3078\u3002 \u6625\u671f\u8b1b\u7fd2\u306b\u3064\u3044\u3066\u898b\u308b \u2193 SPRING 2027  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","vkExUnit_sitemap":"","vkExUnit_EyeCatch_disable":"","_veu_custom_css":"","veu_display_promotion_alert":"","_exclude_from_list_pages":"","vkexunit_cta_each_option":"","vkExUnit_childPageIndex":"","vkExUnit_pageList_ancestor":"","vkExUnit_contact_enable":"","_lightning_design_setting":{"layout":"col-one-no-subsection"},"footnotes":""},"class_list":["post-2153","page","type-page","status-publish","hentry"],"acf":[],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/pages\/2153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/comments?post=2153"}],"version-history":[{"count":20,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/pages\/2153\/revisions"}],"predecessor-version":[{"id":4342,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/pages\/2153\/revisions\/4342"}],"wp:attachment":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/media?parent=2153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}