@charset "utf-8";
/*
Theme Name: 聖セシリア小学校
Description: 
Author: Sonicgrow×COSMICGEAR
Version: 1.0
*/

/*-root*/
:root{
  --fnt-base: source-han-sans-japanese, sans-serif;
  --fnt-sic:"sicrusk", var(--fnt-base);
  --fnt-ftr:"futura-pt", var(--fnt-base);
  --fnt-yu_goth: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  --fnt-din:"din-2014", var(--fnt-base);
  --fc-base:#1A1A1A;/*80,80,80*/
  --fc-blk:#1a1a1a;/*26,26,26*/
  
  --clr-wht:#FDFDFD;/*253,253,253*/
  --clr-red:#EA5532;/*234,85,50*/
  --clr-wblue:#59C4F1;/*89,196,241*/
  --clr-blue:#1455A0;/*20,85,160*/
  --clr-org:#FFBE50;/*255,190,80*/
  --clr-grn:#35B595;
  --clr-pink:#FF9DC8;
  --clr-ppl:#857CB9;
  
  --head3:min(36px,calc(100vw/16.25));/*24-36*/
  --head3_min:min(30px,calc(100vw/18.5714));/*21-30*/
  --fs_mid:min(24px,calc(100vw/18.5714));/*21-24*/
  
  --wall-blk:#1a1a1a;/*26,26,26*/
  --wall-gry:#EEEEEE;/*238,238,238*/
  --wall-pale-gry:#F9F9F9;/*249,249,249*/
  --wall-ylw:#FFDC50;/*255,220,80*/
  --wall-l-ylw:#FFEC50;/*255,236,80*/
  --wall-d-ylw:#FFE373;/*255,277,115*/
  
  --bdr-gry:#707070;
  
  --easing: cubic-bezier(0.45,0.05,0.55,0.95);
  --transit: .3s var(--easing);
}
/*base=====*/
body{
  font-family: var(--fnt-base);
  font-size: min(3.6vw,16px);
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  color: var(--fc-base);
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-weight: 400;
  opacity: 0;
  transition:opacity var(--transit);
  background-color: var(--wall-gry);
}
html.wf-active body,
body.is-load{
  opacity: 1;
}
.fnt-sic{
  font-family: var(--fnt-sic);
}
.fnt-ftr{
  font-family: var(--fnt-ftr);
}
.fnt-din{
  font-family: var(--fnt-din);
}
.fl{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.fl.jc_c{
  justify-content: center;
}
.fl_c{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.fl_c.ai_c{
  -ms-align-items: center;
  align-items: center;
}
figure{
  margin-bottom: 0!important;
}
.pos-pic{
  pointer-events: none;
  position: absolute;
}
/*container
========================================================*/

#container{
  width: 100%;
  min-height: 100dvh;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
}
a.cvr{
  position: absolute;
  inset:0;
  z-index: 1;
}
a.udl_red{
  text-decoration: underline;
  color: var(--clr-red);
  text-underline-offset: 2px;
}
a.udl{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.clr_blue{
  color: var(--clr-blue);
}
.inner{
  width: min(1300px,100%);
  padding-left: min(50px,4vw);
  padding-right: min(50px,4vw);
  margin-left: auto;
  margin-right: auto;
}
.in-text
,.lead-text{
  line-height: calc(30/16);
  font-kerning: none;
}
.in-text{
  letter-spacing: .07em;
  text-indent: .07em;
}
.lead-text{
  letter-spacing: .1em;
  text-indent: .1em;
}
.l-cnt{
  text-align: center;
}
.jag-icon{
  width: min(135px,18vw);
  aspect-ratio:1;
  display: grid;
  place-content:center;
  place-items:center;
  gap:min(8px,1.5vw);
  grid-template-columns: 70%;
  font-size: min(16px,2.5vw);
}
.jag-icon::before{
  content: "";
  position: absolute;
  inset:0;
  background-image: url("images/icon/jag.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  animation: 25s linear infinite rotation;
}
.jag-icon .arrow{
  width: min(22px,4vw);
}
@keyframes rotation {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(-360deg)
  }
}
/*header
=====================================*/
#header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding-top: min(60px,5vw);
  padding-left: min(50px,4vw);
  padding-right: min(50px,4vw);
  color: var(--fc-blk);
  transition:padding var(--transit);
  pointer-events: none;
}
#header a{
  pointer-events: auto;
}
#header.is-scl{
  padding-top: min(20px,2.5vw);
}
.head-parent_nav{
  width: min(1200px, 100%);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: flex-end;
  -ms-align-items: center;
  align-items: center;
  color: var(--clr-wht);
  font-size: min(12px,3.2vw);
  translate:0 max(-10px,-1.5vw);
  gap:.85em;
  pointer-events: auto;
  padding-right: min(20px, 5vw);
  
}
.head-parent_nav > p{
  padding-left: 1.5em;
}
.head-parent_nav > p::before{
  content: "";
  width: 1em;
  background-image: url("images/icon/user.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio:1/1.2;
  position: absolute;
  left: 0;
  top: 50%;
  translate:0 -50%;
}
.head-parent_nav > a{
  padding-left: .85em;
  border-left: 1px solid currentColor;
}
.head-wrap{
  width: min(1200px,100%);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  height: min(80px,12.85vw);
  border-radius: 100vmax;
  overflow: hidden;
  background-color: var(--clr-wht);
  -ms-align-items: center;
  align-items: center;
  transition:background var(--transit);
}
.head-nav{
  display: grid;
  height: 100%;
  grid-template-columns: auto 1fr auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: min(20px,3vw);
  transition:opacity var(--transit),visibility var(--transit);
}
.head-nav svg{
  fill:currentColor;
}
.head-logo{
  display: grid;
  grid-template-columns: min(285px,100%);
  padding-left: min(20px,3vw);
  padding-right: min(20px,3vw);
  place-content:center;
}
.head-nav_item{
  display: grid;
  place-content:center;
}
.head-nav_item a{
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  gap:5px;
  padding-left: min(30px,4vw);
  padding-right: min(30px,4vw);
}
.head-nav_item > a .icon{
  height: min(32px,8vw);
  width: 100%;
}
.head-nav_item > a .icon > svg{
  object-fit: contain;
  height: 100%;
  object-position: center;
}
.head-nav_item > a .txt{
  font-size: min(15px,3.4vw);
  letter-spacing: .05em;
  text-indent: .05em;
/*  white-space: nowrap;*/
}
.head-nav_lf{
  display: grid;
/*  grid-template-columns: auto auto;*/
  grid-template-columns:min(150px, 14vw) auto;
}
.head-nav_lf .head-nav_item{
  border-right: 1px solid currentColor;
}
.head-nav_item.event a{
  padding-left: min(15px, 2vw);
  padding-right: min(15px, 2vw);
}
.head-nav_item.document{
  border-left: 1px solid currentColor;
}

#header.nav-open .head-nav{
  opacity: 0;
  visibility: hidden;
}
#header.nav-open .head-wrap{
  background-color: transparent;
}
/*hum
=====================================*/
#hum-button{
  width: min(170px,12vw);
  height: 100%;
  background: var(--wall-blk);
  display: grid;
  place-content:center;
  place-items:center;
  z-index: 100;
  cursor: pointer;
  color: var(--clr-wht);
  padding-right: min(20px,5vw);
  transition:background var(--transit),width var(--transit),padding var(--transit);
  border: 1px solid var(--wall-blk);
  transform-origin: right center;
  pointer-events: auto;
  cursor: pointer;
}
#hum-button > div{
  width: min(37px,5vw);
  display: grid;
  place-content:center;
  grid-template-columns: 100%;
  gap:6px;
  
}
#hum-button .txt{
  white-space: nowrap;
  font-family: var(--fnt-din);
  font-size: min(14px,3.2vw);
  color: currentColor;
  text-align: center;
}
#hum-button button{
  width: 100%;
  aspect-ratio:1/0.691;
  position: relative;
}
#hum-button button::before
,#hum-button button::after{
  content: "";
  width: 100%;
  height: calc((100% / 3) - 1px);
  position: absolute;
  left: 0;
  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transition: all var(--transit);
  transform-origin: center;
}
#hum-button button::before{
  top: -.5px
}
#hum-button button::after{
  bottom: -.5px;
}
/*open*/
#hum-button.open{
  width: min(190px,15vw);
  border-radius: 100vmax;
  padding-right: 0;
  background-color: var(--clr-wht);
  color: var(--wall-blk);
}
#hum-button.open button::before
,#hum-button.open button::after{
  top: 50%;
  left: 50%;
  bottom: auto;
  height: auto;
  border-bottom-color: transparent;
  translate:-50% -50%;
}
#hum-button.open button::before{
  transform: rotate(35deg);
}
#hum-button.open button::after{
  transform: rotate(-35deg);
}

/*l-nav +++++++++++*/
#l-nav{
  position: fixed;
  width: 100vw;
  height: 100dvh;
  top: 0;
  left: 0;
  background-color: var(--wall-pale-gry);
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transition: all var(--transit);
  overflow-y: scroll;
  color: var(--fc-blk);
}
#l-nav.is-view{
  opacity: 1;
  visibility: visible;
}
.l-nav_inner{
  min-height: 100%;
  padding-bottom: min(50px,10vw);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto;
  gap:min(50px,10vw);
}
.l-nav__menu{
  display: grid;
  grid-template-columns: repeat(5,auto);
  align-content: center;
  gap:min(20px,3vw) min(20px,3vw);
}
.l-nav__menu > li{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap:min(20px,5vw);
  font-size: min(17px,4vw);
}
.l-nav__item{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap:min(20px,4vw);
}
.l-nav__menu > li > a
,.l-nav__item p.label{
  font-size: min(22px,4.6vw);
}

.l-child-nav ul {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap:10px;
  line-height: calc(23/17);
}
.l-child-nav ul > li > a{
  display: block;
  padding-left: 1.25em;
}
.l-child-nav ul > li > a::before{
  content: "";
  width: 1em;
  aspect-ratio:1;
  background-image: url("images/icon/arrow_ccl.svg");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: .15em;
}
.l-nav__button{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:min(30px,5vw) min(50px,10vw);
}

.l-nav__inquiry{
  display: grid;
  grid-template-columns: auto 1fr auto;
  -ms-align-items: center;
  align-items: center;
  color: var(--clr-blue);
  gap:min(30px,5vw) min(50px,5vw);
}
.l-nav__inquiry .l-logo-area svg{
  width: min(336px,45vw);
}
.l-nav__inquiry .l-dial-area{
  display: grid;
  justify-content: center;
  grid-template-columns: auto;
  font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);/*20-28*/
  font-weight: 500;
  gap:10px min(50px,5vw);
}
.l-dial-area dl{
  display: grid;
  grid-template-columns: auto 1fr;
  white-space: nowrap;
}
.l-dial-area dl.tel{
  font-size: 1.4em;
}
.rect-doc-button{
  display: grid;
  grid-template-columns: min(354px,25vw);
}
.rect-doc-button a{
  border: 1px solid currentColor;
  display: grid;
  grid-template-columns: 1fr min(40px,12vw);
  place-content:center;
  place-items:center;
  --arw-wall:var(--clr-blue);
  --trg-wall: var(--clr-wht);
  padding: 10px min(20px, 4vw);
  height: min(85px,14vw);
  background-color: var(--clr-wht);
}
.rect-doc-button a .txt{
  font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);/*16-20*/
  white-space: nowrap;
  display: grid;
  grid-template-columns: min(35px,8vw) auto;
  place-items:center;
  place-content:center;
  gap:min(20px,4vw);
  letter-spacing: .1em;
  font-weight: 500;
}
.rect-doc-button a .txt svg{
  fill:currentColor;
}
.rect-doc-button .arw{
  translate:0 0;
  transition:translate var(--transit);
}
@media(hover){
  .rect-doc-button:hover .arw{
    translate:10% 0;
  }
}
/*main
=====================================*/
main{
  flex: 1;
}
.index-wrapper{

}

/*button settings*/
.button-wrap{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
}
.round-button{
  width: min(200px,100%);
  border-radius: 100vmax;
  --arw-wall:var(--clr-blue);
  --trg-wall:var(--clr-wht);
  --btn-wall:var(--clr-wht);
  --hvr-clr:var(--clr-wht);
  --hvr-wall:var(--fc-blk);
  --btn-txt:currentColor;
  overflow: hidden;
  font-weight: 500;
  font-size: min(15px,3.6vw);
}
.round-button.blk{
  --btn-wall:var(--fc-blk);
  --hvr-clr:var(--fc-blk);
  --hvr-wall:var(--clr-wht);
  --btn-txt:var(--clr-wht);
}
.round-button.w-mid{
  width: min(286px,100%);
}
.round-button.w-auto{
  width: auto;
}
.round-button > a
,.round-button > p{
  display: grid;
  place-content:center;
  width: 100%;
  min-height: min(50px,12vw);
  background-color: var(--btn-wall);
  color: var(--btn-txt);
  padding: 6px;
  transition:background .1s var(--easing);
  padding: 5px;
}
.round-button.arw.w-auto a{
  padding-left: 2em;
  padding-right: 3em;
}
/*arrow*/
.round-button.arw > a span.txt{
  padding-right: min(20px,4vw);
  text-align: center;
  line-height: calc(18/15);
}
.round-button.arw > a span.txt.fs-min{
  font-size: min(14px,3.6vw);
}

.round-button.arw span.arw{
  position: absolute;
  right: 6px;
  top: 50%;
  translate:0 -50%;
  height: min(50px,80%);
  aspect-ratio:1;
  transition:translate var(--transit);
}
.round-button.l-blk{
  border: 1px solid currentColor;
}
.round-button.w-wid{
  width: auto;
  font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);/*20-30*/
  --btn-wall:var(--clr-wht);
  --hvr-wall:var(--clr-wht);
  --btn-txt:var(--fc-blk);
  --hvr-clr:var(--fc-blk);
  --hvr-arw:var(--clr-blue);
  --trg-wall: var(--clr-wht);
  --hvr-trg:var(--clr-wht);
}
.round-button.w-wid a{
  min-height: min(120px,16vw);
  padding: 10px min(50px, 6vw) 10px min(20px, 4vw);
}
.round-button.w-wid span.arw{
  right: min(20px,4vw);
  height: min(50px, 60%);
}
.round-button.button-sche .txt
,.round-button.button-doc .txt{
  padding-left: 2em;
  letter-spacing: .1em;
  text-indent: .1em;
}
.round-button.button-sche .txt::before
,.round-button.button-doc .txt::before{
  content: "";
  height: 1.333em;
  aspect-ratio:1;
  position: absolute;
  left: 0;
  top: 50%;
  translate:0 -50%;
  background-position: right center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
.round-button.button-sche .txt::before{
  background-image: url("images/icon/schedule.svg");
}
.round-button.button-doc .txt::before{
  background-image: url("images/icon/document.svg");
}
.round-button.ylw{
  --btn-wall:var(--clr-wht);
  --btn-txt:var(--fc-blk);
  --hvr-wall:var(--wall-l-ylw);
  --hvr-clr:var(--fc-blk);
  --arw-wall:var(--wall-ylw);
  --trg-wall:var(--clr-red);
  --hvr-arw:var(--clr-red);
  --hvr-trg:var(--clr-wht);
}
.round-button.wblue{
  --btn-wall:var(--clr-wht);
  --btn-txt:var(--fc-blk);
  --hvr-wall:var(--clr-wblue);
  --hvr-clr:var(--fc-blk);
  --arw-wall:var(--clr-wblue);
  --trg-wall:var(--wall-l-ylw);
  --hvr-arw:var(--clr-wht);
  --hvr-trg:var(--wall-l-ylw);
}
.round-button.w-org{
  --btn-wall:var(--clr-wht);
  --btn-txt:var(--fc-blk);
  --hvr-wall:var(--wall-l-ylw);
  --hvr-clr:var(--fc-blk);
  --arw-wall:var(--clr-red);
  --trg-wall:var(--wall-l-ylw);
  --hvr-arw:var(--clr-wht);
  --hvr-trg:var(--clr-red);
}
.round-button.org{
  --btn-wall:var(--wall-l-ylw);
  --btn-txt:var(--fc-blk);
  --hvr-wall:var(--clr-red);
  --hvr-clr:var(--fc-blk);
  --arw-wall:var(--clr-red);
  --trg-wall:var(--clr-wht);
  --hvr-arw:var(--wall-l-ylw);
  --hvr-trg:var(--clr-red);
}
.round-button.w-red
,.round-button.w-wblue
,.round-button.w-ylw
,.round-button.w-grn
,.round-button.w-pink
,.round-button.w-ppl{
  --btn-txt:var(--fc-blk);
  --hvr-clr:var(--clr-wht);
  --btn-wall:var(--clr-wht);
  --trg-wall:var(--clr-wht);
  --hvr-arw:var(--clr-wht);
}
.round-button.w-red{
  --arw-wall:var(--clr-red);
  --hvr-wall:var(--clr-red);
  --hvr-trg:var(--clr-red);
}
.round-button.w-wblue{
  --arw-wall:var(--clr-wblue);
  --hvr-wall:var(--clr-wblue);
  --hvr-trg:var(--clr-wblue);
}
.round-button.w-ylw{
  --arw-wall:var(--clr-org);
  --hvr-wall:var(--clr-org);
  --hvr-trg:var(--clr-org);
}
.round-button.w-grn{
  --arw-wall:var(--clr-grn);
  --hvr-wall:var(--clr-grn);
  --hvr-trg:var(--clr-grn);
}
.round-button.w-pink{
  --arw-wall:var(--clr-pink);
  --hvr-wall:var(--clr-pink);
  --hvr-trg:var(--clr-pink);
}
.round-button.w-ppl{
  --arw-wall:var(--clr-ppl);
  --hvr-wall:var(--clr-ppl);
  --hvr-trg:var(--clr-ppl);
}
@media(hover){
  .round-button > a:hover{
    color: var(--hvr-clr);
    background-color: var(--hvr-wall);
  }
  .round-button.w-wid:hover span.arw{
    translate:10% -50%;
  }
  .round-button.arw:hover{
    --arw-wall:var(--hvr-arw);
    --trg-wall:var(--hvr-trg);
  }
}
/*#hero
============================*/
#hero.index-hero{
  background-color: var(--clr-wblue);
  background-image: url("images/wall/round-org.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100%;
}
.index-hero_inner{
  display: grid;
  place-content:center;
  grid-template-columns: min(700px,100%);
}
.jag-scl-icon{
  position: absolute;
  right: 0;
  bottom: 0;
  translate:0 -55%;
  grid-template-columns: 5em;
  padding-top: .5em;
}


/*#index content
================================================================*/
.index-sec-title {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  color: var(--clr-wht);
  font-weight: 500;
  gap:10px;
}
.index-sec-title .en{
  width: 100%;
  font-size: min(30px,7vw);
  height: 1em;
}
.index-sec-title .en img{
  object-fit: contain;
  object-position: center;
  height: 100%;
}
.wave-wall{
  background-repeat: repeat-x;
  background-size: auto min(50px,8vw);
  background-position: center bottom;
  margin-top: -1px;
  background-image: var(--wave-wall);
}
.index-info-blc{
  background-color: var(--clr-red);
  --wave-wall: url("images/wall/wave-ylw.svg");
  --sp-wave:url("images/wall/wave-ylw_sp.svg");
  padding-top: min(20px,5vw);
  padding-bottom: min(290px,25vw);
}
/*news*/
.index-news-archive{
  margin-top: min(30px,5vw);
}
.news-tab-switch{
  display: grid;
  grid-template-columns: repeat(8,1fr);
  gap:5px;
}
.news-tab-switch li{
  border-radius: min(15px,3.8vw) min(15px,3.8vw) 0 0;
  background-color: var(--clr-wht);
  padding: 5px;
  text-align: center;
  min-height: min(52px,12vw);
  display: grid;
  place-content:center;
  cursor: pointer;
  line-height: calc(18/16);
  letter-spacing: .05em;
  text-indent: .05em;
  font-size: min(15px,3.6vw);
}
.news-tab-switch li.is-blank{
  pointer-events: none;
}
.news-tab-switch li.is-blank p{
  opacity: .35;
}
.news-tab-switch li.active{
  background-color: var(--clr-wblue);
  color: var(--clr-wht);
}
.news-tab-switch li p{
  word-break: keep-all;
  font-weight: 500;
}
.news-tab-switch li.tab_news-parent p{
  padding-left: 1.55em;
  word-break: normal;
}
.news-tab-switch li.tab_news-parent .lock{
  fill:currentColor;
  position: absolute;
  width: 1.25em;
  left: 0;
  top: 50%;
  translate:0 -50%;
}

.news-tab-container{
  background-color: var(--wall-l-ylw);
  border-radius: 0 0 min(15px,3.8vw) min(15px,3.8vw);
  padding: min(50px,6vw) min(60px,4vw);
}
.news-tab-panel .button-wrap{
  margin-top: min(30px,5vw);
}
.acv-news-list{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:min(40px,4vw);
}
.acv-post-item{
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap:min(17px,4vw) min(20px,4vw);
}
.acv-post-item.stick .thumb-area::after{
  content: "";
  background-image: url("images/icon/pin.svg");
  height: min(30px,7.5vw);
  aspect-ratio:1/1.1811;
  position: absolute;
  right: 0;
  top: 0;
  translate:25% -55%;
}
.acv-post-item .thumb-area .thumb{
  aspect-ratio:1/0.6875;
  border-radius: min(15px,2vw);
  overflow: hidden;
  isolation: isolate;
}
.acv-post-item .thumb-area .thumb img{
  object-fit: cover;
  height: 100%;
  object-position: center;
}
.acv-post-item .thumb-area .thumb .tag-new-post{
  position: absolute;
  top:1em;
  left: 1em;
  font-family: var(--fnt-ftr);
  font-weight: 600;
  font-size: min(14px,3.2vw);
  pointer-events: none;
  z-index: 1;
  color: var(--clr-wht);
}
.acv-post-item .thumb-area .thumb .tag-new-post::before{
  content: "";
  width: 5em;
  aspect-ratio:1;
  background: var(--clr-red);
  position: absolute;
  top: calc(50% - .5em);
  left: calc(50% - .25em);
  translate:-50% -50%;
  z-index: -1;
  border-radius: 100vmax;
}
.acv-post-item .post-data .tag{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  -ms-align-items: center;
  align-items: center;
  gap:.25em;
}
.post-data .tag .date{
  font-size: min(13px,3vw);
  font-family: var(--fnt-ftr);
  font-weight: 500;
}
.post-data .tag .category{
  font-size: min(10px,2.5vw);
  gap:.5em;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
.post-data .tag .category span{
  background-color: var(--wall-blk);
  color: var(--clr-wht);
  border-radius: 100vmax;
  padding: .5em 1em;
}
.acv-post-item .post-title{
  font-size: min(14px,3.2vw);
  line-height: calc(18/14);
  margin-top: .85em;
}

/*index link*/
.index-link-list{
  display: grid;
  grid-template-columns: repeat(4,min(175px,calc(100%/4)));
  justify-content: center;
  color: var(--clr-wht);
  text-align: center;
  margin-top: min(50px,12vw);
  gap:min(15px,3.8vw) 0;
}
.index-link-list li{
  font-size: min(12px,3.2vw);
  line-height: calc(18/12);
  
  justify-items: center;
  gap:.5em;
}
.index-link-list li{
  display: grid;
  grid-template-rows: 1fr auto;
  border-left: 1px solid currentColor;
}
.index-link-list li:last-child{
  border-right: 1px solid currentColor;
}
.index-link-list li .txt{
  display: grid;
  place-content:center;
}
.index-link-list li .arw{
  transition:translate var(--transit);
}
.index-link-list li svg{
  width: min(15px,4vw);
}
@media(hover){
  .index-link-list li:hover .arw{
    translate:0 50%;
  }
}
/*index about*/
.box-index-about{
  margin-top: min(150px,18vw);
  color: var(--clr-wht);
  z-index: 1;
}
.pic-about_top{
  width: min(100px,10vw);
  left: 0;
  top: 0;
  translate:100% -50%;
}

.index-sec-detail{
  display: grid;
  grid-template-columns: min(680px,100%);
  place-content:center;
  place-items:center;
  gap:min(50px,10vw);
  margin-top: min(40px,8vw);
}
.index-sec-detail .sub-title{
  width: 100%;
  height: min(42px,7vw);
}
.index-sec-detail .sub-title img{
  object-fit: contain;
  height: 100%;
  object-position: center;
}
.index-sec-detail .lead-text{
  text-align: center;
}

.contents-link-set{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:min(30px,5vw);
}
.contents-link-set .round-button{
  width: auto;
}

.index-sclife-detail .contents-link-set{
  width: min(430px,100%);
  grid-template-columns: repeat(2, 1fr);
}
/*index education +++++++++++++++++++++++*/
.pic-ed-top{
  right: 0;
  top: 0;
  width: min(540px,60vw);
  translate:58% -80%;
}
.pic-ed-lf{
  top: 0;
  left: 0;
  translate:-15% -105%;
  width: min(410px,50vw);
  z-index: 1;
  
}
.pic-ed-lf2{
  width: min(300px,33vw);
  left: 0;
  top: 0;
  translate:-20% 0;
}
.pic-ed-rt{
  right: 0;
  top: 0;
  width:min(200px,20vw);
  translate:10% -40%;
}
.index-edu-blc{
  background-color: var(--wall-ylw);
  padding-top: min(180px,20vw);
  padding-bottom: min(290px,30vw);
  --wave-wall: url("images/wall/wave-wblue.svg");
  --sp-wave:url("images/wall/wave-wblue_sp.svg");
  color: var(--clr-wht);
}
/*index schoolLife +++++++++++++++++++++++*/
.index-sclife-blc{
  background-color: var(--clr-wblue);
  --wave-wall: url("images/wall/wave-blue.svg");
  --sp-wave:url("images/wall/wave-blue_sp.svg");
  padding-top: min(180px, 20vw);
  padding-bottom: min(290px,18vw);
  color: var(--clr-wht);
}
.pic-sclife_top{
  top: max(-180px, -15vw);
  right: 0;
  width: min(300px,60vw);
  translate:0 -85%;
}
.pic-sclife_lf{
  width: min(230px,20vw);
  top: 0;
  left: min(50px,4vw);
  translate:0 -50%;
}
.pic-sclife_rt{
  width: min(100px,15vw);
  right:  min(50px,4vw);
  bottom: 0;
  translate:-25% 0;
}
/*index project +++++++++++++++++++++++*/
.index-project-blc{
  background-color: var(--clr-blue);
  padding-top: min(180px, 20vw);
  padding-bottom: min(150px,10vw);
  margin-top: -1px;  
}
.box-index-project{
  display: grid;
  gap:min(30px,7vw);
  grid-template-columns: min(850px,100%);
  place-items:center;
  place-content:center;
}
.index-sec-title.project{
  z-index: 1;
}
.index-sec-title.project .en{
  height: 2.8286em;
}
.index-project-detail{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,min(200px,calc(100vw/3.5)));
  gap: min(30px, 5vw);
  justify-content: center;
  background-color: var(--clr-wht);
  border-radius: 100vmax;
  padding: min(45px,7vw) min(50px,4vw);
}
.index-project-detail .round-button{
  width: auto;
}
.index-project-detail::after{
  content: "";
  position: absolute;
  background-image: url("images/index/parent_flag.svg");
  aspect-ratio:1/1.1278;
  width: min(290px,38vw);
  top: 0;
  left: 0;
  translate:-18% -70%;
  pointer-events: none;
}
.jag-top-icon{
  position: absolute;
  left: min(50px,4vw);
  bottom: 0;
  translate:0 50%;
  cursor: pointer;
  grid-template-columns: 3em;
  padding-bottom: .5em;
}
.jag-top-icon .arrow{
  scale:1 -1;
}
.box-index-project .pic-pjc{
  right: min(150px,8vw);
  bottom: max(-150px, -10vw);;
  width: min(222px,33vw);
  translate:0 14%;
  z-index: 1;
}
/*footer
=====================================*/
footer{
  background-color: var(--wall-pale-gry);
  padding-top: min(80px,12vw);
  padding-bottom: min(80px,12vw);
}
.foot-wrap{
  display: grid;
  grid-template-columns: 100%;
  gap:min(50px,12vw);
}
.foot-about-wrap{
  display: grid;
  grid-template-columns: min(336px,28%) auto auto;
  color: var(--clr-blue);
  gap: min(20px,3vw);
  grid-template-rows: auto 1fr auto;
}
.foot-about-wrap svg{
  fill:currentColor;
}
.foot-about-wrap .rect-doc-button{
  grid-area: 1/3;
}
.foot__dial{
  grid-area: 1/1;
  grid-column: span 2;
/*  padding-bottom: min(50px,5vw);*/
  font-family: var(--fnt-ftr);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: min(28px,4.5vw);
  gap:10px min(40px,10vw);
  font-weight: 500;
  -ms-align-items: center;
  align-items: center;
}
.foot__logo svg{
  width: min(100%,52vw);
}
.foot__dial p{
  white-space: nowrap;
}
.foot__dial .tel{
  font-size: min(40px,6.5vw);
}
.foot__address{
  grid-area: 3/1;
  line-height: calc(18/13);
}
.foot-button-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:min(20px,5vw) min(50px,10vw);
}
.foot__nav{
  display: grid;
  justify-content: flex-end;
  grid-row: 2/span 2;
  grid-column: span 2;
  grid-template-rows: 1fr auto;
}
.foot-other-link > li{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  gap:10px min(40px,3vw);
}
.foot-other-link > li:nth-child(n+2){
  margin-top: min(17px,3.6vw);
}
.foot-other-link a{
  font-size: min(15px,3.6vw);
  display: grid;
  grid-template-columns: .8em auto;
  -ms-align-items: center;
  align-items: center;
  gap:5px;
}
footer p.copy{
  font-size: min(13px,3vw);
   line-height: calc(18/13);
}