@charset "UTF-8";
*:focus {
  outline: none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
}

html {
  /* line-height: 1.8; */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
}

img {
  line-height: 0;
  max-width: 100%;
}

ol, ul {
  list-style: none !important;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after {
  content: "";
  content: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a {
  text-decoration: none;
  color: #333;
  -webkit-tap-highlight-color: transparent;
  transition: all ease 0.3s;
}

a:hover {
  text-decoration: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

input[type=button], input[type=submit] {
  -webkit-appearance: none;
}

label {
  -webkit-tap-highlight-color: transparent;
}

body {
  color: #323232;
  font-family: "Noto Sans JP", serif, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  line-height: 1.8;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  /*-webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;*/
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: normal;
}

.sp, .tb {
  display: none;
}

/*
  ここまでcommon
--------------------------------------------- */
.pc {
  display: none;
}

.sp {
  display: inherit;
}

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

.palt {
  font-feature-settings: "palt" 1;
}

a:hover {
  opacity: 0.8;
}

.mb0 {
  margin-bottom: 0 !important;
}

/* /////////////////// ここから /////////////////// */
picture {
  display: block;
  max-width: 100%;
  line-height: 0;
  font-size: 0;
}

p {
  font-weight: 500;
  line-height: 1.75;
  font-size: calc(32vw / 7.68);
}

.ivo {
  visibility: hidden;
}

header {
  width: calc(215vw / 7.68);
  height: calc(120vw / 7.68);
  position: absolute;
  top: 1%;
  left: 2%;
  z-index: 9;
}
.hero {
  position: relative;
  width: 100%;
  height: calc(1334vw / 7.68);
}

/* 1. スライド画像 */
.kv-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の比率を崩さずに全体を覆う */
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1; /* スライド画像は最背面 */
}

.kv-slider img.active {
  opacity: 1;
}

/* 2. 手前に載せる固定コンテンツの共通設定 */
.kv-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* スライド（z-index: 1）より大きい数値を指定して手前に出す */
  pointer-events: none; /* 下にあるスライドなどの邪魔をしない（必要に応じて） */
  
  /* 中央配置にするためのフレックスボックス設定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.kv-link{
  width: calc(488vw / 7.68);
  position: absolute;
  transform: translateX(-50%);
  bottom: calc(-190vw / 7.68);
  display: block;
  left: 50%;
  z-index: 11;
}
.kv-wave{
  width: 100%;
  position: absolute;
  bottom:0;
  left: 0;
  z-index: 8;
}
.sec01{
  background: #e4f3ff;
  position: relative;
  padding-bottom:calc(90vw / 7.68);
}
.sec01 .intro{
  background: url(../images/sec01-intro-bg_sp.webp) center bottom / 100% auto no-repeat,
  linear-gradient(0deg, #e4f3ff 40%, #ffffff 40% 100%);
  padding: calc(310vw / 7.68) calc(48vw / 7.68) 0;
}
.sec01 .intro p{
  padding-top: calc(106vw / 7.68);
  line-height: 1.75;
  font-size: calc(32vw / 7.68);
  text-align: center;
}
.sec01 .movie{
  margin: calc(315vw / 7.68) auto 0;
  padding-bottom: calc(188vw / 7.68);
}
.video-wrapper {
  /* 動画を置きたい場所のサイズを確保 */
  width: calc(498vw / 7.68);
  height: calc(498vw / 7.68);
  margin: 50px auto; 
  position: relative;
}

.video-container {
  width: calc(498vw / 7.68);
  height: calc(498vw / 7.68);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: circle(calc(236vw / 7.68) at center);
  /* 背景を広げるための設定 */
  background: rgba(0, 0, 0, 0);
  transition: clip-path 0.7s ease-in-out, background 0.7s ease-in-out;
}

.video-container video {
  width: calc(498vw / 7.68);
  height: calc(498vw / 7.68);
  object-fit: cover;
}

/* --- 全画面（モーダル）状態 --- */
.video-container.is-expanded {
  position: fixed;
  top: 0 !important;   /* JSで上書きするが念のため */
  left: 0 !important;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.75);
  clip-path: circle(150% at center);
  cursor: default;
}

.video-container.is-expanded video {
  width: 100vw;
  height: auto;
  max-height: 100vh;
  object-fit: contain;
}

.close-btn {
position: absolute;
  top: 22px;
  right: 17px;
  width: 54px;
  height: 54px;
  background: url(../images/icon-close.svg) no-repeat center;
    background-size: auto;
  background-size: 34px 34px;
  border:none;
  display: none;
}

.is-expanded .close-btn { display: block; }

/* 再生マークを作るためのベース */
.video-container {
  position: relative; /* 擬似要素の基準 */
  /* ...既存のスタイル... */
}

/* 再生マーク（三角形）のデザイン */
.video-container::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%; /* 三角形の重心を考慮して少しだけ右に */
  transform: translate(-50%, -50%);
  
  /* 正三角形の作り方 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(60vw / 7.68) 0 calc(60vw / 7.68) calc(100vw / 7.68); /* 上・右・下・左 */
  border-color: transparent transparent transparent #ffffff; /* 左だけ白 */
  
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.3)); /* 見えやすくするための影 */
  transition: all 0.3s ease;
  z-index: 5;
  pointer-events: none; /* マークがクリックの邪魔をしないように */
}
.movie-text{
  position: absolute;
  bottom: 0%;
  right: 0%;
  background: #2a62ae;
  width: calc(110vw / 7.68);
  height: calc(110vw / 7.68);
  font-size: calc(25vw / 7.68);
  text-align: center;
  border-radius: 50%;
  font-weight: 700;
  color:#fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 11;
}

/* ホバー時に少し大きく、明るくする演出 */
.video-container:hover::after {
  transform: translate(-50%, -50%) scale(1.1);
  filter: drop-shadow(0 0 15px rgba(0,0,0,0.5));
}

/* 拡大中（モーダル表示時）は再生マークを消す */
.video-container.is-expanded::after {
  opacity: 0;
  visibility: hidden;
}

.sec01 .tokuten{
  width: calc(668vw / 7.68);
  margin: auto;
      padding-top: calc(150vw / 7.68);
}
.sec01 .tokuten p{
  text-align: center;
  margin-bottom: 2em;
}
.notes{
  font-size: clamp(12px,calc(24vw / 7.68),24px);
}
.sec01 .tokuten p.sec01_notes {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(60vw / 7.68);
  margin-top: 1.5em;
  text-align: left;
}
.ic_plus {
  width: calc(48vw / 7.68);
  margin-top: calc(-18vw / 7.68);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
  display: block;
}
.tokuten02 {
  margin-top: calc(-18vw / 12.8);
}
.tokuten03 {
  margin-top: calc(-19vw / 12.8);
}

.sec01_btn {
  width: calc(600vw / 7.68);
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.sec01 .taiken{
  max-width: 668px;
  margin: auto;
}
.sec02{
      background:url(../images/sec02-bg.webp) center top;
      background-size: calc(32vw / 7.68);
      padding-bottom: calc(120vw / 7.68);
}
.sec02 .intro{
    background: url("../images/sec02-intro-bg.webp") bottom center / 100% calc(92vw / 7.68) no-repeat,
  linear-gradient(
    to top, 
    transparent 0, 
    transparent calc(91vw / 7.68), 
    #e4f3ff calc(91vw / 7.68), 
    #e4f3ff 100%
  );
}
.sec02 .intro h2{
    margin-bottom:calc(20vw / 7.68);
}

.sec02 .intro .flex{
  display: flex;
  justify-content: space-between;
  width: calc(668vw / 7.68);
  margin: auto;
}
.sec02 .intro .flex img{
    width: calc(320vw / 7.68);
    height: calc(320vw / 7.68);
}
.sec02 .taiken{
  padding-top: calc(170vw / 7.68);
  padding-bottom: calc(90vw / 7.68);
}
	.sec02 .taiken .linkbtn,.sec06 .taiken .linkbtn{
		width:calc(600vw/7.68);
		margin: 1em auto 0;
	}
	.sec02 .taiken .notes,.sec06 .taiken .notes{
		text-align: center;
	}

.sec02 .taiken h2,.sec06 .taiken h2{
  margin-bottom: calc(20vw / 7.68);
  z-index: 2;
}
.sec02 .taiken .box01,.sec02 .taiken .box02,.sec06 .taiken .box01,.sec06 .taiken .box02{
  position: relative;
}
.sec02 .taiken .box01 a,.sec02 .taiken .box02 a,.sec06 .taiken .box01 a,.sec06 .taiken .box02 a{
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 64%;
  width: 80%;
}
.sec02 .tanki h2,.sec06 .tanki h2{
  margin-bottom: calc(40vw / 7.68);
}
.sec02 .tanki .box,.sec06 .tanki .box{
  position: relative;
  width: calc(668vw / 7.68);
  margin: auto;
}
.sec02 .tanki .box a,.sec06 .tanki .box a{
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 68%;
  width: 90%;
}
.sec03{
  background:#fff7cd;
  padding-top:calc(150vw / 7.68);
  padding-bottom:calc(50vw / 7.68);
}
.sec03 .intro h2{
  width: calc(668vw / 7.68);
  margin: 0 auto calc(50vw / 7.68);
}
.sec03 .intro p{
  text-align: center;
  font-weight: 600;
  margin-bottom: 2em;
}
/* スライド上書き */
.splide__pagination {
  bottom: -2em!important;
}
.splide__pagination__page {
  width: 14px!important;
  height: 14px!important;
  margin: 4px!important;
  background:#fff!important;
  opacity: 1!important;
  border-radius: 50%!important;
  border:#3b73ff 2px solid!important;
}
.splide__pagination__page.is-active{
  background:#3b73ff!important;
transform: unset!important;}
.splide__slide{
  opacity: 0.7!important;
}
.splide__slide.is-active{
    opacity: 1!important;
}
  .splide__arrow {
  background: none!important;
  }
.splide__arrow.allyear-arrow{
  height: calc(60vw / 7.68);
  width: calc(60vw / 7.68);
  opacity: 1;
}
.splide__arrow.allyear-arrow svg {
  display: none;
}

.splide__arrow--prev.allyear1-prev{
left: calc(30vw / 7.68);
}
.splide__arrow--next.allyear1-next{
right: calc(30vw / 7.68);
}
.slidewrap{
  margin-bottom: calc(100vw / 7.68);
}
.sec03-slide01{
  background: url(../images/sec03-school01_sp.webp) no-repeat center top /100% auto;
}
.sec03-slide02{
  background: url(../images/sec03-school02_sp.webp) no-repeat center top  /100% auto;
}
.sec03-slide03{
  background: url(../images/sec03-school03_sp.webp) no-repeat center top  /100% auto;
}
.sec03-slide04{
  background: url(../images/sec03-school04_sp.webp) no-repeat center top  /100% auto;
}
.splide__arrow--prev.allyear2-prev{
  left:0;
  width: calc(90vw / 7.68);
  height: calc(180vw / 7.68);
  background:url(../images/arr-prev.webp) left center /contain no-repeat!important;
  border-radius: unset !important;
}
.splide__arrow--next.allyear2-next{
  width: calc(90vw / 7.68);
  height: calc(180vw / 7.68);
  right: 0;
  background:url(../images/arr-next.webp) left center /contain no-repeat!important;
  border-radius: unset !important;
}
.sec03 .splide__track--nav > .splide__list > .splide__slide,
.splide__track--nav > .splide__list > .splide__slide.sec03-slide{
  border: none!important;
}
.sec03 .splide__track--nav > .splide__list > .splide__slide.is-active,
.splide__track--nav > .splide__list > .splide__slide.sec03-slide.is-active{
  border: none;

}
.sec03-slide{
  width: calc(668vw / 7.68) !important;
  padding: 0 calc(70vw / 7.68) calc(70vw / 7.68);
  color: #fff;
  height: calc(905vw / 7.68);
  position: relative;
}

.sec03-slide h3{
  font-size: calc(50vw / 7.68);
  padding-top: calc(400vw / 7.68);
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.2em;
}
.sec03-slide .text{
  font-size: calc(31vw / 7.68);
  line-height: 1.75;
  margin-bottom: 1.5em;
}
.sec03-slide-btn{
  bottom: calc(44vw / 7.68);
  text-align: center;
  position: absolute;
  width: 90%;
  transform: translateX(-50%);
  left: 50%;
}

.sec03-slide-btn a{
  color: #fff;
  font-size: calc(24vw / 7.68);
  line-height: calc(68vw / 7.68);
  width: 100%;
  height: 100%;
  display: block;
}
.sec03 .notes{
  width: calc(668vw / 7.68);
  margin: 0 auto 2.5em;
}
.sec03 .mix {
  width: calc(668vw / 7.68);
  margin: auto;
  background:url(../images/sec02-bg.webp) center top #fff;
  background-size: calc(32vw / 7.68);
  border-radius: calc(32vw / 7.68);

  box-shadow: calc(15vw / 7.68) calc(15vw / 7.68) 0 0 #fabe00;
  padding: calc(20vw / 7.68) 0 calc(50vw / 7.68);
  position: relative;
}
.sec03 .mix p{
  padding: 1em calc(78vw / 7.68) 1.5em;
}
.sec03 .mix .img-wrap{
  margin-bottom: calc(40vw / 7.68);
}
.sec03 .mix .linkbtn{
  margin:auto;
  width: 90%;
  display: block;
}
.sec03 .baby {
  width: calc(668vw / 7.68);
  margin: calc(110vw / 7.68) auto 0;
}
.sec03 .baby a{
  margin-bottom: 0.5em;
  display: block;
}
.sec04{
  padding-bottom: calc(130vw / 7.68);
}
.sec04 .intro{
  background: url(../images/sec04-intro-bg_sp.webp) center top /100% auto no-repeat;
  height: calc(1080vw / 7.68);
  padding-top: calc(140vw / 7.68);
}
.sec04 .intro h2{
  margin-bottom: calc(150vw / 7.68);
}
.sec04 .intro p{
  font-size: calc(32vw / 7.68);
  text-align: center;
  font-weight: 900;
  color: #fff;
}
.sec04 .point01,.sec04 .point02,.sec04 .point03,.sec04 .point04{
    width: calc(668vw / 7.68);
  margin: 0 auto 0;
  text-align: center;
  padding : calc(90vw / 7.68) 0 calc(30vw / 7.68);
}
.sec04 .point01 h2,.sec04 .point02 h2,.sec04 .point03 h2,.sec04 .point04 h2{
  margin-bottom: 2.5em;
}
.accordion {
  display: none; 
}
.show-more.on-click img{
  transform: rotate(180deg);
}
.sec04 button,.sec05 button{
  background: url(../images/sec04-detail-btn_sp.webp) center center / 100% auto no-repeat;
  width: 90%;
  height: calc(90vw / 7.68);
  margin: auto;
  border: none;
  position: relative;
}
.sec04 button img,.sec05 button img{
  position: absolute;
  right: 5%;
  width: 5.4%;
  top: 42%;
}
.show-more.on-click img{
  top: 37%;
}
.sec04 h3{
  padding: 1em 0;
}
.sec04 .img-wrap{
 margin: 1.5em 0;
}
.sec04 .lead{
  color: #2a62ae;
  margin-bottom: 2em;
  font-weight: 700;
}
.sec04 .text-wrap{
  text-align: left;
  font-feature-settings: "palt";
}
.sec04 .text-wrap .strong{
  color: #2a62ae;
  border-bottom: 1px #2a62ae solid;
  font-weight: 900;
}
.sec04 hr{
  border-top: 2px dotted #2a62ae;
  border-bottom: none;
  margin: 3em auto 1.5em;
}
.pink{
  color: #fd609a;
}
.sec05{
  padding-bottom: calc(130vw / 7.68);
}
.sec05 .intro .flex{
  width: calc(668vw / 7.68);
  margin: auto;
}
.sec05 .intro{
  padding-bottom: calc(130vw / 7.68);
}
.sec05 .flex p{
  padding: 0 0 2em;
}
.sec05 h2{
  height: calc(300vw / 7.68);
  position: relative;
  text-align: center;
}
.sec05 .col1 h2{
  background: url(../images/sec05-col01-ttl_sp.webp) center top /100% no-repeat;
}
.sec05 .col2 h2{
  background: url(../images/sec05-col02-ttl_sp.webp) center top /100% no-repeat;
}
.sec05 button{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 58%;
  width: 80%;
}
.sec05 .accordion{
  width: calc(668vw / 7.68);
  padding-top: calc(90vw / 7.68);
  margin: auto;
}
.sec05 .col2 .img-wrap{
  margin: 1em 0;
}
.sec06 .taiken{
  padding-top: 0;
  padding-bottom: calc(90vw / 7.68);
}
.sec07{
  background: url(../images/sec07-bg_sp.webp) center top /100% auto no-repeat;
  padding-top: calc(680vw / 7.68);
  position: relative;
  height: calc(1705vw / 7.68);
}
.sec07 .inner-bg{
  mix-blend-mode: multiply;
  background:#0092d8;
  border-radius: calc(30vw / 7.68);
  width: calc(668vw / 7.68);
  margin: auto;
  position: absolute;
  top:calc(680vw / 7.68);
  left: calc(50vw / 7.68);
  height: calc(1015vw / 7.68);
}
.sec07 .inner{
  color: #fff;
  font-weight: 900;
  mix-blend-mode: normal;
  position: absolute;
  top:calc(680vw / 7.68);
  left: calc(50vw / 7.68);
  z-index: 2;
  height: calc(1015vw / 7.68);
  width: calc(668vw / 7.68);
  padding: calc(60vw / 7.68);
}
.sec07 .inner h2{
  font-size: calc(40vw / 7.68);
  text-align: center;
  margin-bottom: 1.5em;
}
.sec07 .inner p{
  mix-blend-mode: normal;
}

footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.foot_inner {
  line-height: 0;
  font-size: 0;
  width: 100%;
  padding: 4.6875vw 0 38.4114583333vw;
}
footer a {
  display: block;
  width: calc(338vw / 7.68);
  margin-left: auto;
  margin-right: auto;
}
.fixbtns {
  position: fixed;
  background: rgba(228, 227, 226, 0.89);
  inset: auto 0 0 0;
  opacity: 0;
  transform: translate(0, 110%);
  transition: opacity 100ms linear 0ms, transform 250ms ease-in 0ms;
  z-index: 100;
  padding: 2vw 0;
}
.fixbtns:not(.is-shown) {
  pointer-events: none;
}
.fixbtns.is-shown {
  opacity: 1;
  transform: translate(0, 0%);
}
.fixbtns_buttons {
  display: grid;
  justify-content: center;
  align-items: center;
}
.fixbtns_buttons.clm2 {
  grid-template-columns: repeat(auto-fit, 42.96875vw);
  -moz-column-gap: 2.6041666667vw;
       column-gap: 2.6041666667vw;
}
.fixbtns_buttons.clm3 {
  grid-template-columns: repeat(auto-fit, 82.7%);
  -moz-column-gap: 1.3020833333vw;
       column-gap: 1.3020833333vw;
}
.fixbtns_button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid;
  letter-spacing: -0.02em;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  border-radius: calc(20vw / 7.68);
  height: 10.15625vw;
  font-size: calc(28vw / 7.68);
  line-height: 1.2;
  position: relative;
}
.fixbtns_button > i {
  width: 1em;
  height: 1em;
  margin-left: 0.4em;
  position: absolute;
  right: 0.25em;
}
.fixbtns_button > i > img {
  display: block;
}
.fixbtns_button.col1 {
  background: #fff;
  color: #00a1ff;
}
.fixbtns_button.col2 {
  background: #00a1ff;
  border-color: #00a1ff;
  color: #fff;
}
.fixbtns_button.col3 {
  background: #ff930d;
  border-color: #ff930d;
  color: #fff;
}
.fixbtns_note {
  padding-top: 2.6041666667vw;
  font-weight: 300;
  text-align: center;
}
.fixbtns_note {
  line-height: 1.5;
  font-size: calc(24vw / 7.68);
  width: 90%;
  margin: auto;
  text-align: left;
}
.fixbtns_note > p {
  line-height: inherit;
  font: inherit;
}
.fixbtns_note > p:first-of-type {
  margin-top: -0.225em;
}
.fixbtns_note > p:last-of-type {
  margin-bottom: -0.225em;
}
.fixbtns_ttl{
  text-align: center;
  font-weight: 900;
  margin-bottom: 0.25em;
}