@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800&display=swap');

/* -------------------------------------------- */
/* reset & base                                 */
/* -------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}
a{text-decoration:none;}
table {border-spacing: 0;}
fieldset,img {border: 0;}
:where(*, *::before, *::after) { box-sizing: border-box; }
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
ol,ul {list-style: none;margin:0;padding:0;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;margin:0;padding:0;}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}

/* -------------------------------------------- */
/* root tokens                                  */
/* -------------------------------------------- */
:root {
  --fcolor1: #3FAD5A;
  --fcolor2: #267EA3;
  --fcolor3: #875FCC;
  --fcolor4: #08986e;
  --fcourse: #ff5555;
  --fteacher: #dd8e00;
  --faccess: #ee5d00;
  --bcolor11: #3FAD5A11;
  --bcolor12: #267EA311;
  --bcolor13: #875FCC11;
  --bcolor21: #3FAD5A20;
  --bcolor22: #267EA320;
  --bcolor23: #875FCC20;
  --ffamily: "Roboto", sans-serif;
  --vh: 1dvh;
}

/* -------------------------------------------- */
/* html/body                                    */
/* -------------------------------------------- */
html{
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  font-size: 80%;
}
@media screen and (min-width: 900px){
  html{ font-size: 62.5%; }
}
html,body{
  position:relative;
  height:100%;
  min-height:100%;
}
body{
  color: #000000cc;
  background: #f8f8f4;
  font-size: 1.55rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-optical-sizing: auto;
  line-height: 1.8;
  position: relative;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* -------------------------------------------- */
/* links & media                                */
/* -------------------------------------------- */
a{ color:#333; text-decoration:none; }
@media (hover: hover) and (pointer: fine){
  a:hover{ opacity: .8; transition: opacity .2s; }
}
a:focus-visible{
  outline: 2px solid var(--fcolor3);
  outline-offset: 2px;
  border-radius: .25rem;
}

img{ max-width:100%; height:auto; vertical-align:bottom; display:block; }

/* -------------------------------------------- */
/* device helpers                               */
/* -------------------------------------------- */
.sp{ display:block; }
.pc{ display:none; }
@media screen and (min-width: 900px){
  .sp{ display:none!important; }
  .pc{ display:block; }
}

/* -------------------------------------------- */
/* header / menu                                */
/* -------------------------------------------- */
#mainheader{
  clear: both;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 90px;
  z-index: 100;
/*  background: linear-gradient(to bottom, 
      rgba(255,255,255,.7) 0%,
      rgba(255,255,255,0) 100%
    );*/
}

#logo{
  color: #015f45;
  font-size: 2.4rem;
  font-weight: 700;
  position: absolute;
  top: 0;
  left: 0;
  padding: 2rem;
  z-index: 100;
}
@media screen and (min-width: 900px){
  #logo{
    padding: 3rem;
  }
}
#logo a{
  color: #015f45;
  text-shadow:
    -1.5px -1.5px 0 #fff,
     1.5px -1.5px 0 #fff,
    -1.5px  1.5px 0 #fff,
     1.5px  1.5px 0 #fff,
     0 1.5px 0 #fff,
     1.5px 0 0 #fff,
    -1.5px 0 0 #fff,
     0 -1.5px 0 #fff;
}
#logo img{
  width: 5rem;
  display: inline-block;
  margin-right: 1.2rem;
}
#mainheader nav{
  display: none;
  text-align: center;
}
@media screen and (min-width: 900px){
  #mainheader nav{
    display: block;
    text-align: right;
    position: absolute;
    top: 2rem;
    right: 0;
  }
}
#mainheader.on nav{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, .9);
  padding: 10rem 5svw 3rem;
}
#mainheader nav ul{
  display: block;
  vertical-align: top;
}
@media screen and (min-width: 900px){
  #mainheader nav ul{
    display: inline-block;
    vertical-align: top;
  }
}
#mainheader nav li{
  margin: 1rem .5rem;
  vertical-align: middle;
  text-align: center;
}
@media screen and (min-width: 900px){
  #mainheader nav li{
    display: inline-block;
    margin: 0;
  }
}
#mainheader nav li a{
  font-size: 1.85rem;
  font-weight: 800;
  padding: 1.5rem; 
  display: inline-block;
  padding: 1rem 1.5rem 0;
  text-shadow:
    -1.5px -1.5px 0 #fff,
     1.5px -1.5px 0 #fff,
    -1.5px  1.5px 0 #fff,
     1.5px  1.5px 0 #fff,
     0 1.5px 0 #fff,
     1.5px 0 0 #fff,
    -1.5px 0 0 #fff,
     0 -1.5px 0 #fff;
}
@media screen and (min-width: 900px){
  #mainheader nav li a{
    font-size: 1.5rem;
  }
}
#mainheader nav li a small{
  display: block;
  opacity: .4;
  text-shadow: none;
}
.nav-course a{color: var(--fcourse);}
.nav-access a{color: var(--faccess);}
.nav-teacher a{color: var(--fteacher);}
.nav-qa a{color: var(--fcolor2);}
.nav-blog a{color: var(--fcolor3);}
.nav-contact{
  color: #fff;
  background: var(--fcolor1);
  font-size: 1.85rem;
  padding: 2rem;
  line-height: 1.3;
  display: inline-block;
  margin-left: 2rem;
  border-top: 1px solid #fff;
  border-radius: 5rem;
  position: relative;
}
.nav-contact::before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2rem;
  height: 2rem;
  background: url(../img/ico-reserve.svg) center center no-repeat;
  background-size: contain;
  margin-right: 2rem;
}
.nav-contact::after{
  content: "";
  border:.5rem solid transparent;
  border-left-color: #fff;
  margin-left: 2rem;
  display: inline-block;
}
@media screen and (min-width: 900px){
  .nav-contact{
    font-size: 1.5rem;
    padding: 1rem 2rem 1rem 5rem;
    border: 1px solid #fff;
    border-right: none;
    border-radius: 5rem 0 0 5rem;
  }
  .nav-contact::before{
    position: absolute;
    left: 1.5rem;
    top: 2rem;
    margin-right: 0;
  }
  .nav-contact::after{
    position: absolute;
    right: .4rem;
    bottom: 2.5rem;
    margin-left: 0;
  }
}

#mainheader nav .sp{ text-align: center; float: none; }
#mainheader nav .sns{ float: none; clear: both; }
#mainheadernav .sns a{
  display: inline-block;
  width: auto;
  margin: 1rem .5rem;
  background: none;
  border-radius: 0;
}
#mainheadernav .sns a img{ width: 3rem; height: auto; }
#mainheader .sp{ float: right; margin-top: .5rem; }
@media screen and (min-width: 900px){
  #mainheader .sp{ display: none!important; }
}
#glmenu{
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  display: inline-block;
  vertical-align: middle;
}
@media screen and (min-width: 900px){
  #glmenu{ display: none; }
}
#glmenu img{
  width: 4rem;
  height: 4rem;
  background: url(../img/ico-menu.svg) center center no-repeat;
  background-size: contain;
}
.on #glmenu img{
  background: url(../img/ico-close.svg) center center no-repeat;
  background-size: contain;
}

/* -------------------------------------------- */
/* layout common                                */
/* -------------------------------------------- */
#container {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
main{
  text-align: center;
  overflow: hidden;
}

/* footer */
footer{
  background: var(--fcolor4);
  text-align: center;
  margin-top: auto;
  padding-bottom: 10rem;
}
@media screen and (min-width: 900px){
  footer{
    padding: 0;
  }
}
footer a{ color: #fff; }
footer .wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 0 0;
  grid-gap: 2rem;
  width: min(90svw, 85rem);
  margin: 0 auto;
}
@media screen and (min-width: 900px){
  footer .wrap{ flex-direction: row; }
}
#footL, #footR{ 
  text-align: left;
  vertical-align: top;
}
#footL h2{
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 2rem 0;
}
.logo-footer{
  width: 5.8rem;
  display: inline-block;
  margin-right: 1.2rem;
  float: left;
}
#footL p{
  color: #fff;
  font-size: 1.3rem;
}

#footR iframe{
  width: 90svw;
  height: 20rem;
  border: none;
  border-radius: 2rem;
}
#copy{
  color: #fff;
  font-size:1.1rem;
  margin-top: 1rem;
}
@media screen and (min-width: 900px){
  #footR iframe{
    width: 40rem;
  }
  #copy{
    text-align: right;
    margin-right: 2rem;
  }
}


.btn{
  display: block;
  text-align: center;
  height: 6rem;
  margin: 2rem 0;
}
.btn a{
  color: #fff;
  display: inline-block;
  vertical-align: -webkit-baseline-middle;
  padding-top: .2rem;
  transition: .35s;
  margin: 0 1rem;
}
.btn a span{
  background: var(--fcolor1);
  margin: 1.5rem auto 0;
  padding: 1.4rem 1.5rem 1.4rem 4rem;
  border-radius: 3rem;
  box-shadow: 0 .8rem 0 #00000022;
  transition: .35s;
}
.btn a span::after{
  content:"";
  display: inline-block;
  border: .5rem solid transparent;
  border-left-color: #fff;
  margin-left: 25px;
}
.btn a:hover{
  padding-top: .8rem;
  transition: .35s;
  opacity:1;
}
.btn a:hover span{
  box-shadow: 0 .2rem 0 #00000022;
  transition: .35s;
}


.flbnr{
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100svw;
  height: 7rem;
  line-height: 7rem;
  opacity: .95;
}
.flbnr span{
  color: #fff;
  width: 100%;
  font-size: 1.8rem;
  background: var(--fcolor1);
  text-align: center;
  border-top: 1px solid #00000022;
  letter-spacing: .1rem;
  display: block;
}
.flbnr span::before{
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 2.2rem;
  margin-right: 1rem;
  background: url(../img/ico-reserve.svg) center center no-repeat;
  background-size: contain;
}
@media screen and (min-width: 900px){
  .flbnr{
    width: auto;
    right: -1px;
    height: 25rem;
    top: calc(50% - 120px);
    bottom: auto;
    padding-top: .2rem;
    transition: .35s;
    opacity: 1;
  }
  .flbnr span{
    width: auto;
    background: var(--fcolor1);
    writing-mode: tb-rl;
    padding: 2.5rem 0;
    line-height: 3.6;
    border: 1px solid #00000022;
    border-radius: 1.5rem 0 0 1.5rem;
    box-shadow: 0 .8rem 0 #00000022;
    transition: .35s;
  }
  .flbnr:hover{
    padding-top: .8rem;
    transition: .35s;
    opacity:1;
  }
  .flbnr:hover span{
    color: #ffff55;
    box-shadow: 0 .2rem 0 #00000022;
    transition: .35s;
  }
  .flbnr span::before{
    margin-right: auto;
    margin-bottom: 1rem;
  }
  .flbnr span::after{
    content: "";
    border:.5rem solid transparent;
    border-left-color: #fff;
    position: absolute;
    right: .3rem;
    bottom: 10rem;
  }
}


.dotanime{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 0;
}
.dotanime .bubble{
  position: absolute;
  left: 50%; top: 50%;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(1px);
  background: linear-gradient(135deg,
    rgba(255,0,0,0.1), rgba(255,0,255,0.1));
  transform: translate(
    calc(-50% + var(--x) + var(--dx)),
    calc(-50% + var(--y) + var(--dy))
  );
  animation:
    bobX var(--dur-x, 10s) ease-in-out infinite,
    bobY var(--dur-y, 12s) ease-in-out infinite;
  will-change: transform;
}
.dotanime .content{
  position: relative;
  z-index: 1;
}
@property --dx { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --dy { syntax:'<length>'; inherits:false; initial-value:0px; }

@keyframes bobX{
  0%   { --dx: calc(var(--ax, 10px) * -1); }
  50%  { --dx: calc(var(--ax, 10px)); }
  100% { --dx: calc(var(--ax, 10px) * -1); }
}
@keyframes bobY{
  0%   { --dy: calc(var(--ay, 8px)); }
  50%  { --dy: calc(var(--ay, 8px) * -1); }
  100% { --dy: calc(var(--ay, 8px)); }
}

.balloon{
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 4rem;
}
.balloon span{
  position: relative;
  font-size: 5rem;
  font-weight: 800;
  line-height: 2;
  display: inline-block;
  margin-bottom: -3.5rem;
  color: var(--fcolor1);
  text-shadow:
    0 .5rem 0 rgba(0,0,0,.1);
}
@media screen and (min-width: 900px){
  .balloon span{
    font-size: 8rem;
  }
}

.balloon span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom, 
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 20%,
      rgba(255,255,255,0) 70%
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  -webkit-text-stroke: 2px #000;
  mix-blend-mode: screen;
  filter: blur(2px);
}

.jumpeng{
  position: relative;
}
.jumpeng::before,
.jumpeng::after{
  content: "";
  background-position:center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 7rem;
  height: 7rem;
  position: absolute;
}
.jumpeng::before{
  animation: bounce 2s infinite;
  transform: rotate(-4deg);
}
.jumpeng::after{
  animation: bounce2 2s infinite;
  transform: rotate(4deg);
  animation-delay: .4s;
}

.anchor{
  padding: 3rem 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
.anchor a{
  padding: 1rem 1rem 2rem;
}
.anchor a h3{
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.3;
}
.anchor a.elm h3{ color: var(--fcolor1);}
.anchor a.elm2 h3{ color: var(--fcolor4);}
.anchor a.upper h3{ color: var(--fcolor2);}
.anchor a.hs h3{ color: var(--fcolor3);}

.anchor a p{
  color: #000000cc;
  font-size: 1.5rem;
  line-height: 1.4;
  width: 75svw;
  text-align: left;
  margin-top: 1rem;
}
.anchor a img{
  width: 15rem;
  height: 12rem;
  border-radius: 2rem;
  border: 4px solid #fff;
  display: block;
  margin-bottom: 1rem;
}
@media screen and (min-width: 900px){
  .anchor a h3{
    font-size: 2rem;
  }
  .anchor a{
    padding: 2rem;
  }
  .anchor a p{
    font-size: 1.3rem;
    width: 22rem;
  }
  .anchor a img{
    width: 17rem;
  }
}
.anchor a.elm img{ border-color: var(--fcolor1);}
.anchor a.elm2 img{ border-color: var(--fcolor4);}
.anchor a.upper img{ border-color: var(--fcolor2);}
.anchor a.hs img{ border-color: var(--fcolor3);}
.anchor a:last-child p{
  margin-top: 0;
}
.anchor a:last-child img{
  margin-bottom: 0;
}


.flwrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
@media screen and (min-width: 900px){
  .flwrap{
    flex-direction: row;
    align-items: flex-start;
  }
}

#top-fv{
  height: min(60rem, 100svh);
  background: url(../img/AdobeStock_810803299_Preview.jpeg) left 30% center no-repeat;
  background-size: cover;
}
#top-fv .tpcatch{
  color: #dd7922;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .2rem;
  padding: 1rem;
  margin: 30rem 4svw 0;
  text-align: left;
  text-shadow:
    -1.5px -1.5px 0 #fff,
     1.5px -1.5px 0 #fff,
    -1.5px  1.5px 0 #fff,
     1.5px  1.5px 0 #fff,
     0 1.5px 0 #fff,
     1.5px 0 0 #fff,
    -1.5px 0 0 #fff,
     0 -1.5px 0 #fff;
}
#top-fv .tpcatch span{
  color: #dd5522;
  font-size: 4.2rem;
  display: inline-block;
}
#top-fv .tpcatch strong{
  color: var(--fcolor1);
  font-weight: 800;
  display: inline-block;
}
#top-fv .tpcatch span:nth-child(1){
  color: #dd5522;
  animation: bounce 2s infinite;
  transform: rotate(-4deg);
}
#top-fv .tpcatch span:nth-child(2){
  color: #dd5522;
  animation: bounce2 2s infinite;
  animation-delay: .4s;
  transform: rotate(2deg);
}
#top-fv .tpcatch strong span:nth-child(1),
#top-fv .tpcatch strong span:nth-child(2){
  color: var(--fcolor4);
  animation: none;
}
#top-fv .tpcatch span:last-child{
  color: #dd5522;
}
@media screen and (min-width: 900px){
  #top-fv{
    height: min(65rem, 100svh);
    background: url(../img/AdobeStock_810803299_Preview.jpeg) center center no-repeat;
    background-size: cover;
  }
  #top-fv .tpcatch{
    font-size: 3.8rem;
    margin: 20rem auto auto 10rem;
  }
  #top-fv .tpcatch span{
    font-size: 5rem;
  }
}

@keyframes bounce {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%) rotate(-5deg); }
  10%  { transform: scale(0.98, 0.98) translate(0%, 2%) rotate(-5deg); }
  20%  { transform: scale(1.02, 0.96) translate(0%, 4%) rotate(-5deg); }
  30%  { transform: scale(0.96, 1.02) translate(0%, -4%) rotate(-5deg); }
  40%  { transform: scale(1.02, 0.98) translate(0%, 2%) rotate(-5deg); }
  50% { transform: scale(1.0, 1.0) translate(0%, 0%) rotate(-5deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%) rotate(-5deg); }
}
@keyframes bounce2 {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%) rotate(3deg); }
  10%  { transform: scale(0.98, 0.98) translate(0%, 2%) rotate(3deg); }
  20%  { transform: scale(1.02, 0.96) translate(0%, 4%) rotate(3deg); }
  30%  { transform: scale(0.96, 1.02) translate(0%, -4%) rotate(3deg); }
  40%  { transform: scale(1.02, 0.98) translate(0%, 2%) rotate(3deg); }
  50% { transform: scale(1.0, 1.0) translate(0%, 0%) rotate(3deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%) rotate(3deg); }
}

#greeting{
  background: #e1e6e0;
}
@media screen and (min-width: 900px){
  #greeting{
    background: linear-gradient(to right,  #e5e3e2 50%,#d1d1ca 51%);
  }
}
.cp-catch{
  color: #fff;
  background: var(--fcolor1);
  padding: 4rem 0;
  text-shadow: #00000011 1px 7px 0px;
  --mask:radial-gradient(33.54px at 50% 45px,#000 99%,#0000 101%) calc(50% - 30px) 0/60px 51% repeat-x,radial-gradient(33.54px at 50% -30px,#0000 99%,#000 101%) 50% 15px/60px calc(51% - 15px) repeat-x,radial-gradient(33.54px at 50% calc(100% - 45px),#000 99%,#0000 101%) calc(50% - 30px) 100%/60px 51% repeat-x,radial-gradient(33.54px at 50% calc(100% + 30px),#0000 99%,#000 101%) 50% calc(100% - 15px)/60px calc(51% - 15px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  margin-top: -3rem;/**/
}
.cp-catch::before{
  background-image: url(../img/il-e.svg),url(../img/il-m.svg);
  background-position: top left, bottom right;
  background-size: auto 8rem, auto 4rem;
  width: 16rem;
  height:10rem;
  top: 3rem;
  right: calc(50% + 30rem);
}
.cp-catch::after{
  background-image: url(../img/il-n.svg),url(../img/il-d.svg);
  background-position:  bottom right, top left;
  background-size: auto 8rem, auto 4rem;
  width: 16rem;
  height:10rem;
  top: 4rem;
  left: calc(50% + 30rem);
}
.cp-catch h2{
  color: #ff7;
  font-size: 3rem;
  font-weight: 700;
}
.cp-catch h2 strong{
  font-size: 3.3rem;
  font-weight: 700;
  margin: 0 .3rem;
}
@media screen and (min-width: 900px){
  .cp-catch h2{
    font-size: 3.3rem;
  }
  .cp-catch h2 strong{
    font-size: 3.5rem;
  }
}
.cp-catch p{
  font-size: 1.7rem;
}
#greeting .wrap{
  background: url(../img/bg-teacher1_sp.webp) right bottom no-repeat;
  background-size: 100% auto;
  height: auto;
  padding-bottom: 30rem;
}
.tpccomment{
  display: block;
  width: 90svw;
  margin: 5rem 5svw auto auto;
  text-align: left;
}
@media screen and (min-width: 900px){
  #greeting .wrap{
    background: url(../img/bg-teacher1.webp) right 20% bottom no-repeat;
    background-size: auto 100%;
    height: auto;
    padding-bottom: 10rem;
  }
  .tpccomment{
      width: min(60%, 51rem);
      margin: 5rem 8svw auto auto;
  }
}
@media screen and (min-width: 1200px){
  #greeting .wrap{
    background: url(../img/bg-teacher1.webp) right 60% bottom no-repeat;
    background-size: auto 100%;
    height: auto;
    padding-bottom: 10rem;
  }
  .tpccomment{
    width: min(50%, 51rem);
    margin: 5rem 10svw auto auto;
  }
}
@media screen and (min-width: 1400px){
  .tpccomment{
    margin: 5rem auto auto 50svw;
  }
}
.tpccomment .balloon{
  font-size: 1.5rem;
  color: var(--fcolor4);
  text-align: center;
}
.tpccomment .balloon span{
  font-size: 4rem;
}
.tpccomment p{
  margin-bottom: 1rem;
  font-feature-settings: "palt";
  text-shadow:
    -1px -1px 0 #e5e3e2,
     1px -1px 0 #e5e3e2,
    -1px  1px 0 #e5e3e2,
     1px  1px 0 #e5e3e2,
     0 1px 0 #e5e3e2,
     1px 0 0 #e5e3e2,
    -1px 0 0 #e5e3e2,
     0 -1px 0 #e5e3e2;
}
.tpccomment p strong{
  font-weight: 500;
  background: #ffff9966;
/*  background: linear-gradient(transparent 30%, #ffff99aa 30%);*/
  text-shadow: none;
}
.tpccomment .btn a:first-child span{
  background: var(--fteacher);
}
.tpccomment .btn a:last-child span{
  background: var(--faccess);
}


#top-course{
  background: #f8f8f4;
  overflow: visible;
  position: relative;
}
#top-course .balloon{
  color: var(--fcourse);
  padding-top: 5rem;
}
#top-course .balloon span{
  color: #ff8080;
}
#top-course .jumpeng::before{
  display: block;
  background-image: url(../img/il-a.svg),url(../img/il-b.svg);
  background-position: top left, bottom right;
  background-size: auto 5rem, auto 2.5rem;
  width: 7rem;
  height: 11rem;
  top: 6rem;
  right: calc(50% + 12rem);
}
#top-course .jumpeng::after{
  display: block;
  background-image: url(../img/il-c.svg),url(../img/il-d.svg);
  background-position: top right, bottom left;
  background-size: auto 5rem, auto 3rem;
  width: 7rem;
  height: 12rem;
  top: 6rem;
  left: calc(50% + 12rem);
}
@media screen and (min-width: 900px){
  #top-course .jumpeng::before{
    background-size: auto 7rem, auto 4rem;
    width: 15rem;
    height:12rem;
    top: 6rem;
    right: calc(50% + 24rem);
  }
  #top-course .jumpeng::after{
    background-size: auto 7rem, auto 4rem;
    width: 12rem;
    height:12rem;
    top: 6rem;
    left: calc(50% + 24rem);
  }
}
#top-course .anchor a img{
  width: 75svw;
  height: auto;
  margin: 1rem auto;
}
@media screen and (min-width: 900px){
  #top-course .anchor a img{
    width: 22rem;
    height: auto;
  }
}
#top-course .anchor a h3{
  font-size: 2.5rem;
}
#top-course .anchor a:last-child{
  margin-top: -3rem;
}
#top-course .anchor a:last-child p{
  margin-top: 1rem;
}
#top-course .anchor a:last-child img{
  margin-bottom: 0;
}


#access{
  background: #f8ead8;
  background-image: radial-gradient(circle, #ff901d33 2px, transparent 2px);
  background-position: 0 0;
  background-size: 2rem 2rem;
  width: min(90rem,90svw);
  margin: 5rem auto 10rem;
  border-radius: 2rem;
  padding: 2rem;
}
#access.jumpeng::before{
  background-image: url(../img/il-e.svg),url(../img/il-h.svg);
  background-position: top left, bottom right;
  background-size: auto 6rem, auto 4rem;
  width: 6rem;
  height: 15rem;
  top: -2rem;
  left: 0rem;
}
#access.jumpeng::after,
#access .jumpeng::after{
  background-image: url(../img/il-d.svg),url(../img/il-o.svg);
  background-position: top right, bottom left;
  background-size: auto 5rem, auto 3rem;
  width: 6rem;
  height: 22rem;
  bottom: -1rem;
  right: -1rem;
}
@media screen and (min-width: 900px){
  #access.jumpeng::before{
    background-size: auto 8rem, auto 4rem;
    width: 6rem;
    height:19rem;
    top: -3rem;
    left: -2rem;
  }
  #access.jumpeng::after,
  #access .jumpeng::after{
    background-image: url(../img/il-d.svg),url(../img/il-o.svg);
    background-position: top right, bottom left;
    background-size: auto 8rem, auto 4rem;
    width: 10rem;
    height:25rem;
    bottom: -2rem;
    right: -3rem;
  }
}
#access .wrap{
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: center;
  align-items: stretch;
}
.access-text{
  color: var(--faccess);
  padding: 2rem 0 0;
}
.access-text h3{
  font-size: 3rem;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 2rem;
}
.access-text .address{
  font-size: 1.4rem;
  line-height: 1.4;
}
.access-text .btn a span{
  background: var(--faccess);
}
.access-photo{
  width: 100%;
  height: 65svw;
  background: url(../img/ph-classroom1.webp) center center no-repeat;
  background-size: cover;
  border-radius: 2rem;
}
@media screen and (min-width: 900px){
  #access .wrap{
    flex-direction: row;
  }
  .access-text{
    width: 60%;
    padding: 2rem 0 4rem;
  }
  .access-photo{
    width: 40%;
    height: auto;
  }
}
#access iframe{
  width: 100%;
  height: 35rem;
  vertical-align: bottom;
  border: none;
  border-radius: 2rem;
  margin-top: 2rem;
}
#access .balloon{
  color: var(--faccess);
}
#access .balloon.sp{
  margin-bottom: 3rem;
  line-height: 1.6;
}
@media screen and (max-width: 899px){
  #access .balloon{
    line-height: 1;
    margin: 0 auto;
  }
}
#access .balloon span{
  color: #ff901d;
}
#p-access #access{
  width: 100%;
  margin: 0 auto;
}
#p-access #access .wrap{
  width: min(95rem,90svw);
  margin: 5rem auto;
}
@media screen and (min-width: 900px){
  #p-access #access .wrap{
    padding: 0 3rem;
  }
}
#p-access #access iframe{
  width: min(90rem,90svw);
  margin: 0 auto 5rem;
}
.access-text dl{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
}
.access-text dt{
  color: #fff;
  background: var(--faccess);
  width: 10rem;
  border-radius: 2rem;
  text-align: center;
}
.access-text dd{
  text-align: left;
}
.access-text dd small{
  font-size: 1.2rem;
}
.access-text dd a{
  color: var(--faccess);
  background: #fff;
  border-radius: 3rem;
  display: inline-block;
  padding: 0 1rem;
  border: 1px solid var(--faccess);
}
.access-text dd a::before{
  content: "▶";
  display: inline;
  vertical-align: middle;
  font-size: .8rem;
  margin-right: .5rem;
}
@media screen and (min-width: 900px){
  .access-photoblock{
    width: 40%;
  }
}



.pg-main{
  aspect-ratio: 1/1;
  background: #fff no-repeat center/contain;
  border:1px solid #e5e5e5;
  border-radius:1rem;
  transition: opacity .2s ease;
  margin-bottom: 1rem;
}

.pg-thumbs{
  display:flex;
  gap:1rem;
  padding:0;
  margin:0;
  list-style:none;
}
.pg-thumb{
  width: 8.9rem;
  height: 8.9rem;
  border:1px solid #fff;
  border-radius:1rem;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  cursor:pointer;
}
.pg-thumb.is-active{
  box-shadow:0 0 0 2px var(--faccess) inset;
}
@media screen and (min-width: 900px){
.pg-thumb{
  width: 8rem;
  height: 8rem;
}
}



#p-teacher .phead .balloon{
  color:var(--fteacher);;
    padding-top: 5rem;
}
#p-teacher .phead .balloon span {
    color: var(--fteacher);;
}

.teacher-profile{
  background: #f8f0e0;
  text-align: center;
  padding: 4rem 0;
}
.teacher-profile .flwrap{
  align-items: center;
  background: #fff;
  width: min(70rem, 90svw);
  margin: 0 auto;
  padding: 3rem;
  border-radius: 2rem;
}
.profile{
  width: 40rem;
}
.profile .post{
  color: #fff;
  background: var(--fteacher);
  padding: 0 2rem;
  display: inline-block;
  border-radius: 4rem;
}
.profile h2{
  color: var(--fteacher);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 1rem;
  border-bottom: 4px dotted #fde7c0;
}
.profile h2 small{
  font-size: 1.3rem;
  display: block;
}
.profile dl{
  margin-top: 2rem;
}
.profile dt{
  color: #fff;
  background: var(--fteacher);
  width: 10rem;
  border-radius: 2rem;
  text-align: center;
  margin: 0 auto 1rem;
}
.profile dd{
}
.profile dd small{
  font-size: 1.2rem;
}

.teacher-story{
  background: #f8f0e0;
  padding: 2rem 0 15rem;
}
.teacher-story .flwrap{
  width: min(90rem, 90svw);
  margin: 0 auto 4rem;
}
.teacher-story .txt{
  max-width: min(60rem,95svw);
  width: 100%;
  background: #fff;
  padding: 3rem;
  border-radius: 2rem;
  margin: 0 auto;
  outline: 2rem solid #fde7c0;
}
.teacher-story .txt h3{
  color: var(--fteacher);
  font-size: 1.7rem;
  font-weight: 700;
  text-align: left;
  margin: 1.5rem 0 .5rem;
}
.teacher-story .txt p{
  font-size: 1.4rem;
  text-align: left;
  margin-bottom: 1rem;
}
.teacher-story .txt .break::before{
  content:"・・・・・";
  color: #fde7c0;
  font-size: 3rem;
  text-align: center;
  display: block;
  margin-top: -1rem;
  letter-spacing: -.5rem;
}
.ph-teacher{
  width: 30rem;
  height: auto;
  border-radius: 2rem;

}

.tocta{
  background: var(--fcolor1);
  background-image: radial-gradient(circle, #ffffff22 2px, transparent 2px);
  background-position: 0 0;
  background-size: 24px 24px;
  overflow: hidden;
  padding: 3rem 0;
}
#flow h2{
  color: #fff;
}
#flow .flwrap{
  gap: 4rem;
  margin: 2rem auto 5rem;
}
#flow .flwrap div{
  color: #fff;
  background: var(--fcolor1);
  width: 28rem;
  border: 3px solid #fff;
  border-radius: 2rem;
  padding: 1rem 0;
  position: relative;
  text-shadow: #00000055 0 0 .5rem;
}
#flow .flwrap div .step {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  background: #fff;
  color: var(--fcolor1);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 2;
  text-align: center;
  text-shadow: none;
  position: absolute;
  top: -.8rem;
  left: -.8rem;  
}
#flow .flwrap div::after{
  content:"";
  display: inline-block;
  border: 1.1rem solid transparent;
  border-top-color: #fff;
  position: absolute;
  bottom: -4rem;
  right: calc(50% - 1.2rem);
}
@media screen and (min-width: 900px){
  #flow .flwrap div{
    width: 25rem;
    padding: 2rem 0;
  }
  #flow .flwrap div::after{
    border-top-color: transparent;
    border-left-color: #fff;
    top: 9rem;
    bottom: auto;
    right: -3.8rem;
  }
}
#flow .flwrap div:last-child::after{
  display: none;
}
#flow .flwrap img{
  width: 4rem;
  height: 4rem;
  float: left;
  margin: 0 1rem 0 3rem;
}
#flow .flwrap h3{
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5;
  text-align: left;
  border-bottom: 3px solid #fff;
}
@media screen and (min-width: 900px){
  #flow .flwrap img{
    float: none;
    margin: 0 auto;
  }
  #flow .flwrap h3{
    text-align: center;
  }
}
#flow .flwrap p{
  display: block;
  text-align: left;
  padding: 1rem 2rem 0;
}
.tocta header{
  color: #fff;
}
.tocta h2{
  color: #ffff55;
  font-size: 3.5rem;
  font-weight: 700;
  text-shadow: #00000022 1px 5px 0px;
  margin-bottom: 1rem;
}
.tocta .catch{
  font-size: 1.7rem;
  text-shadow: #00000033 1px 3px 1px;
}
.tocta strong{
  font-size: 1.8rem;
  margin-right: .2rem;
}
.ctabox{
  font-size: 1.6rem;
  background: #fff;
  width: min(90svw,85rem);
  padding: 3rem;
  height: auto;
  margin: 2rem auto;
  border-radius: 2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
}
@media screen and (min-width: 900px){
  .ctabox{
    height: 24rem;
  }
}
.ctabox div{
  display: block;
  text-align: center;
}
.ctabox h3{
  font-size: 2.5rem;
  font-weight: 700;
}
.ctabox p{
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: .5rem;
}
.ctabox a{
  color: #fff;
  font-size: 2rem;
  display: inline-block;
  vertical-align: -webkit-baseline-middle;
  padding-top: .2rem;
  transition: .35s;
  margin: 0 1rem;
}
.ctabox a span{
  display: block;
  background: var(--fcolor4);
  border-radius: 3rem;
  box-shadow: 0 .8rem 0 #00000022;
  transition: .35s;
}


.totel h3,
.totel p{
  color: var(--fcolor4);
}
.totel a span{
  font-size: 2rem;
  padding: 1.5rem 2rem 1.5rem 3rem;
}
.totel a span::before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2.7rem;
  height: 2.7rem;
  margin: 0 1rem .5rem 0;
  background: url(../img/ico-tel.svg) center center no-repeat;
  background-size: contain;
}
.toform h3,
.toform p{
  color: var(--faccess);
}
.toform a span{
  background: var(--faccess);
  padding: 1.5rem 2rem 1.5rem 3rem;
}
.toform a span::after{
  content:"";
  display: inline-block;
  border: .5rem solid transparent;
  border-left-color: #fff;
  margin-left: 25px;
}
.toform a:hover{
  padding-top: .8rem;
  transition: .35s;
  opacity:1;
}
.toform a:hover span{
  box-shadow: 0 .2rem 0 #00000022;
  transition: .35s;
}
.toform a span::before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2.7rem;
  height: 2.7rem;
  margin: 0 2rem .5rem 0;
  background: url(../img/ico-reserve.svg) center center no-repeat;
  background-size: contain;
}
@media screen and (min-width: 900px){
  .ctabox a{
    font-size: 2.3rem;
  }
  .totel a span{
    font-size: 2.6rem;
    padding: 2rem 3rem 2rem 4rem;
  }
  .toform a span{
    padding: 2rem 2.5rem 2rem 4rem;
  }
}
@media screen and (min-width: 900px){
  .tocta .totel{
    pointer-events: none;
  }
}

#top-qa{
  background: var(--bcolor12);
  padding: 0 0 5rem;
}
#top-qa .balloon{
  color: var(--fcolor2);
}
#top-qa .balloon span{
  color: #57b4da;
}
#top-qa .btn span{
  background: var(--fcolor2);
}
#top-voice .voice-block .ico-face{
  width: 4rem;
  height: 4rem;
  margin-right: 1rem;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
}
#top-voice .voice-block h3{
  font-weight: 700;
}
#top-voice .voice-block h4{
  font-size: 1.8rem;
}
#top-voice .voice-block p{
  font-size: 1.4rem;
  text-align: left;
}

#blog{
  padding: 5rem 0;
  background: #f1eef1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
@media screen and (min-width: 900px){
  #blog{
    flex-direction: row;
    align-items: flex-start;
  }
  #blog.top_blog{
    flex-direction: column;
    align-items: center;
  }
}
#blog .balloon,
#p-blog .balloon{
  color: var(--fcolor3);
}
#blog .balloon span,
#p-blog .balloon span{
  color: #ae8de7;
}
#blog .flwrap{
  width: 90svw;
  margin: 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
}
@media screen and (min-width: 900px){
  #blog .flwrap{
    width: min(80rem, 90svw);
    justify-content: flex-start;
  }
  #blog.top_blog .flwrap{
    width: min(110rem, 90svw);
  }
}
#blog .blog-block{
  background: #fff;
  display: block;
  padding: 1rem;
  width: calc(50% - 1.5rem);
  border-radius: 2rem;
  position: relative;
}
@media screen and (min-width: 900px){
  #blog .blog-block{
    padding: 1.5rem 1.5rem 1rem;
    width: 25rem;
  }
  #blog.top_blog .blog-block:nth-child(4){
    display: none;
  }
}
@media screen and (min-width: 1160px){
  #blog.top_blog .blog-block:nth-child(4){
    display: block;
  }
}
#blog .blog-block img{
  width: 100%;
  height: 16rem;
  background-position: top -2rem center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 1.5rem;
  margin-bottom: .5rem;
}
#blog .blog-block h4{
  color: #000000aa;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
#blog .date{
  font-size: 1.2rem;
  text-align: left;
  display: inline-block;
  font-weight: 700;
  opacity: .5;
}
#blog .blog-cat{
  font-size: 1.3rem;
  color: #fff;
  border-radius: 2rem;
  padding: 0 1rem;
  display: inline-block;
}
#blog .blog-block .blog-cat{
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
}
@media screen and (min-width: 900px){
  #blog .blog-block .blog-cat{
    top: 2.2rem;
    left: 2.2rem;
  }
}
.cat-news{background: #888;}
.cat-event{background: var(--faccess);}
.cat-days{background: var(--fcolor1);}
.cat-column{background: var(--fcolor2);}

.cat-item{
  width: 100%;
  border-radius: 3rem;
  margin-bottom: 1rem;
}
.cat-item a{
  color: #fff;
}
.current-cat{
  opacity: .5;
}

#blog .jumpeng::before,
#blog .jumpeng::after{
  display: none;
}
@media screen and (min-width: 900px){
  #blog .jumpeng::before{
    display: block;
    background-image: url(../img/il-p.svg),url(../img/il-b.svg);
    background-position: top right, bottom left;
    background-size: auto 8rem, auto 4rem;
    width: 20rem;
    height:20rem;
    top: -7rem;
    left: -4rem;
    z-index: 0;
  }
  #blog .jumpeng::after{
    display: block;
    background-image: url(../img/il-y.svg),url(../img/il-o.svg);
    background-position: top left, bottom right;
    background-size: auto 8rem, auto 4rem;
    width: 20rem;
    height:20rem;
    top: -7rem;
    right: -4rem;
    z-index: 0;
  }
}
#blog .btn a span{
  background: var(--fcolor3);
}
@media screen and (min-width: 900px){
  #blog .flwrap a:hover{
    opacity: 1;
    outline: 3px solid var(--fcolor3);
  }
  #blog .flwrap a:hover h4{
    color: var(--fcolor3);
  }
}

#blog article{
  background: #fff;
  padding: 3rem;
  border-radius: 2rem;
}
#blog article header .blog-cat{
  float: left;
}
#blog article header .date{
  float: right;
}
#blog article header h1{
  font-size: 2.4rem;
  font-weight: 800;
  text-align: left;
  clear: both;
  padding: 1rem 0 5rem;
}
.blog_archive_ttl{
  font-size: 2rem;
  background: #f1eef1;
  font-weight: 700;
  padding-top: 3rem;
}
#blog article{
  width: 90svw;
  margin: 0 auto;
}
#blog .maintext{
  text-align: left;
}
#blog .maintext h3{
  color: var(--fcolor3);
  background: var(--bcolor23);
  font-size: 2rem;
  font-weight: 700;
  margin: 3rem 0 1rem;
  padding: .3rem;
  border-radius: .5rem;
}
#blog .maintext h4{
  color: var(--fcolor3);
  font-size: 1.8rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
}
#blog .maintext strong,
#blog .maintext b{
  font-weight: 700;
}
#blog .maintext img{
  width: min(60rem,80svw);
  margin: 2rem 0;
}
@media screen and (min-width: 900px){
  #blog article{
    width: min(80rem, 90svw);
    margin: 0;
  }
}

#blog aside{
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 10rem;
}
#blog .side_block{
  width: 15rem;
  background: #fff;
  border-radius: 2rem;
  outline: .2rem solid var(--bcolor23);
  text-align: center;
  overflow: hidden;
}
#blog .side_block h3{
  color: var(--fcolor3);
  font-weight: 800;
  padding: 1rem 0 0;
}
#blog .cat-list{
  padding: 1rem 1.5rem 1.5rem;
}
.archive-list{
  text-align: left;
  width: 11rem;
  margin: 1rem auto 1.5rem;
}
.archive-list a::before{
  content: "";
  border: .4rem solid transparent;
  border-left-color: #333;
  display: inline-block;
  vertical-align: middle;
}

@media screen and (min-width: 900px){
  #blog aside{
    flex-direction: column;
  }
}

#paging{
  margin: 5rem auto;
}
#paging span.current,
#paging a{
  color: var(--fcolor3);
  background: #fff;
  display: inline-block;
  width: auto;
  height: 5rem;
  line-height: 5rem;
  border-radius: 1rem;
  font-size: 2rem;
  font-weight: 700;
  padding: 0 1.5rem;
  margin-right: 1rem;
}
#paging a{
  color: #fff;
  background: var(--fcolor3);
}
#paging a:hover{
  color: var(--fcolor3);
  background: #fff;
}
@media screen and (min-width: 900px){
  #paging{
    margin: 5rem auto 15rem;
  }
}


#p-contact .balloon{
  color: var(--fcolor1);
}

.curve_top{
  margin-top: -7svh;
  margin-bottom: -1px;
}
.curve_top svg{
  vertical-align: bottom;
}
.curve_bottom svg{
  vertical-align: top;
}




.phead{
  margin-top: 6rem;
  margin-bottom: 8rem;
}
@media screen and (min-width: 900px){
  .phead{
    margin-top: 4rem;
    margin-bottom: 0;
  }
}

#p-course .phead .balloon{
  color: var(--fcourse);
  padding-top: 5rem;
}
#p-course .phead .balloon span{
  color: #ff8080;
}


#p-qa .phead .balloon{
  color: var(--fcolor2);
  padding-top: 5rem;
}
#p-qa .phead .balloon span{
  color: #57b4da;
}

.csclass{
  overflow: hidden;
  padding: 0 0 3rem;
}
h2.csttl{
  width: 100%;
  padding: 1.5rem 0;
  margin: 0 auto 3rem ;
}
h2.csttl span{
  font-size: 3rem;
  font-weight: 800;
  text-shadow:
    -1.5px -1.5px 0 #fff,
     1.5px -1.5px 0 #fff,
    -1.5px  1.5px 0 #fff,
     1.5px  1.5px 0 #fff,
     0 1.5px 0 #fff,
     1.5px 0 0 #fff,
    -1.5px 0 0 #fff,
     0 -1.5px 0 #fff;
  position: relative;
}
@media screen and (min-width: 900px){
  h2.csttl span{
    font-size: 3.7rem;
  }
}
.csblock{
  background: #fff;
  width: 90svw;
  margin: 0 auto 5rem;
  padding: 2rem;
  border-radius: 2rem;
  border: 1px solid;
  position:relative;
}
.csphoto{
  width: 44rem;
  border-radius: 1rem;
}
.csname{
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.4;
  margin: 2rem 0;
  text-align: left;
}
.csname svg{
  display: none;
}
.cscatch{
  font-size: 1.8rem;
  font-weight: 700;
  text-align: left;
}
.cscaption{
  text-align: left;
}
.csblock .wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.csblock .wrap.csheader{
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
.csdetail{
  width: 100%;
  border-radius: 2rem;
}
.csdetail th{
  font-weight: 700;
  text-align: center;
  padding: .5rem 1rem;
  border-bottom: .1rem solid;
}
.csdetail td{
  text-align: left;
  padding: .5rem 1rem;
  border-bottom: .1rem solid;
}
.csdetail tr:last-child th,
.csdetail tr:last-child td{
  border: none;
}
.csdetail small{
  font-size: 1.1rem;
  position: relative;
  margin-left: .5rem;
  opacity: .8;
}
.csdetail small span{
  display: none;
}
.csdetail small:hover span{
  display: block;
  font-size: 1.1rem;
  line-height: 1.3;
  min-width: 30rem;
  max-width: 40rem;
  background: #ffffffcc;
  border: 1px solid #00000033;
  padding: 1rem;
  position: absolute;
}
.cscaution{
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: left;
}
@media screen and (min-width: 900px){
  .csblock{
    width: 90rem;
    padding: 2rem 4rem;
  }
  .csblock .wrap{
    flex-direction: row;
    clear: both;
    gap: 3rem;
  }
  .csblock .wrap.csheader{
    flex-direction: row;
    justify-content: flex-start;
  }
  .csname svg{
    display: inline-block;
    margin: 0 1rem -.6rem 0;
    opacity: .9;
  }
  .csphoto{
    width: 20rem;
  }
  .cscaption{
    max-width: 47rem;
  }
  .csdetail{
    width: min(40rem, 45%);
  }
}

#elm{
  background: var(--bcolor11);
}
#elm.dotanime .bubble{
  background: linear-gradient(135deg, rgb(0 255 0 / 10%), rgb(0 150 255 / 10%))
}
#elm .csttl{
  background: var(--bcolor21);
}
#elm .csblock{
  border-color: var(--bcolor21);
}
#elm .csdetail{
  background: var(--bcolor11);
}
#elm .csdetail th,
#elm .csdetail td{
  border-bottom-color: var(--bcolor21);
}
#elm .csdetail th{
  background: var(--bcolor11);
}
#elm .csttl span,
#elm .csname,
#elm .csdetail th{
  color: var(--fcolor1);
}
#upper{
  background: var(--bcolor12);
}
#upper.dotanime .bubble{
  background: linear-gradient(135deg, rgb(0 100 255 / 5%), rgb(0 220 255 / 10%))
}
#upper .csttl{
  background: var(--bcolor22);
}
#upper .csblock{
  border-color: var(--bcolor22);
}
#upper .csdetail{
  background: var(--bcolor12);
}
#upper .csdetail th,
#upper .csdetail td{
  border-bottom-color: var(--bcolor22);
}
#upper .csdetail th{
  background: var(--bcolor12);
}
#upper .csttl span,
#upper .csname,
#upper .csdetail th{
  color: var(--fcolor2);
}
#hs{
  background: var(--bcolor13);
}
#hs.dotanime .bubble{
  background: linear-gradient(135deg, rgb(255 100 230 / 5%), rgb(100 0 230 / 7%))
}
#hs h2.csttl{
  background: var(--bcolor23);
}
#hs .csblock{
  border-color: var(--bcolor23);
}
#hs .csdetail{
  background: var(--bcolor13);
}
#hs .csdetail th,
#hs .csdetail td{
  border-bottom-color: var(--bcolor23);
}
#hs .csdetail th{
  background: var(--bcolor13);
}
#hs .csttl span,
#hs .csname,
#hs .csdetail th{
  color: var(--fcolor3);
}


.csttl .jumpeng::before{
  background-position: center left;
  background-size: auto 4rem;
  width: 10rem;
  height: 7rem;
  top: 1rem;
  left: -9rem;
}
.csttl .jumpeng::after{
  background-position: center right;
  background-size: auto 4rem;
  width: 10rem;
  height: 7rem;
  bottom: 0;
  right: -8rem;
}
@media screen and (min-width: 900px){
  .csttl .jumpeng::before{
    background-size: auto 6rem;
    top: -1rem;
    left: -15rem;
  }
  .csttl .jumpeng::after{
    background-size: auto 6rem;
    bottom: 0;
    right: -15rem;
  }
}

#elm .csttl .jumpeng::before{background-image: url(../img/il-a.svg);}
#elm .csttl .jumpeng::after {background-image: url(../img/il-t.svg);}

#elm2.csttl .jumpeng::before{background-image: url(../img/il-g.svg);}
#elm2.csttl .jumpeng::after {background-image: url(../img/il-m.svg);}

#upper .csttl .jumpeng::before{background-image: url(../img/il-e.svg);}
#upper .csttl .jumpeng::after {background-image: url(../img/il-f.svg);}

#hs .csttl .jumpeng::before{background-image: url(../img/il-c.svg);}
#hs .csttl .jumpeng::after {background-image: url(../img/il-z.svg);}



#p-access .phead .balloon{
  color: var(--faccess);
    padding-top: 5rem;
}
#p-access .phead .balloon span {
    color: #ff901d;
}






#p-qa .qawrap {
  background: #e9f0ef;
  overflow: hidden;
  padding-bottom: 10rem;
}

.qalist {
  width: 90svw;
  max-width: 100rem;
  margin: 3rem auto;
  text-align: left;
}

.qalist h2 {
  font-size: 2.2rem;
  font-weight: 500;
  margin: 5rem 0 2rem;
}

.qalist div {
  text-align: left;
  background: #fff;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--bcolor22);
  border-radius: 2rem;
  cursor: pointer;
}

.qalist div .bl-q,
.qalist div .bl-a {
  padding: 0 2rem 0 4rem;
  position: relative;
}

.qalist div .bl-q {
  color: var(--fcolor2);
  font-weight: 700;
  margin-top: 0;
}

.qalist div .bl-a {
  display: none;
  padding-top: 1rem;
  padding-right: 1rem;
  background: var(--bcolor22);
  border-radius: 1rem;
  padding-bottom: .5rem;
}

.qalist div.on .bl-a {
  display: block;
  margin-top: 1rem;
}

.qalist div .bl-a b{
  font-weight: 500;
  color: #ac2f1a;
}

.qalist div .bl-a p {
  font-size: 1.5rem;
}

.qalist div .bl-q::before,
.qalist div .bl-a::before {
  position: absolute;
  left: 1rem;
  top: 0;
  font-weight: 700;
  padding: 0 .7rem;
  line-height: 1.6;
  border-radius: 100%;
}

.qalist div .bl-q::before {
  content: "Q";
  color: #fff;
  background: var(--fcolor2);
  border-radius: 100%;
}

.qalist div .bl-a::before {
  content: "A";
  color: var(--fcolor2);
  background: #fff;
  margin-top: 1rem;
}

.qalist div .bl-q::after {
  content: "▽";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--fcolor2);
}
.qalist div:hover .bl-q::after {
  content: "▼";
}

.qalist div.on .bl-q::after {
  content: "△";
}

.qalist div .bl-q:hover::after {
  color: var(--fcolor2);
}



/* -------------------------------------------- */
/* inquiry (forms)                              */
/* -------------------------------------------- */
#inquiry{
  background: #ebf3ea;
}
#inquiry dl{
  width: 90vw;
  margin: 0 auto 2rem;
}
#inquiry dt{ text-align: left; }
#inquiry dt small{ color: #e33; }
@media screen and (min-width: 900px){
  #inquiry dl{
    display: flex;
    padding: 1rem 0;
    width: 80rem;
    margin: 0 auto;
  }
  #inquiry dt{
    width: 16rem;
    text-align: right;
    padding-top: 8px;
    word-break: keep-all;
  }
  #inquiry dd{
    padding-left: 1.5rem;
    text-align: left;
  }
}
.caution{
  max-width: 60rem;
  text-align: left;
  font-size: 1.25rem;
}
.caution a{ text-decoration: underline; }

/* テキスト系 */
#inquiry input[type='text'],
#inquiry input[type='tel'],
#inquiry input[type='email'],
#inquiry input[type='date'],
#inquiry input[type='number'],
#inquiry input[type='password'],
#inquiry select,
#inquiry textarea{
  background: #fff;
  width: 45rem;
  max-width: 100%;
  border: 2px solid rgb(0 73 134 / 30%);
  border-radius: 1rem;
  padding: 1rem;
  font-size: 1.8rem;
  -webkit-appearance: none;
  appearance: none;
}

/* date ピッカー */
input[type="date"]{ position: relative; }
input[type="date"]::-webkit-inner-spin-button{ -webkit-appearance: none; }
input[type="date"]::-webkit-clear-button{ -webkit-appearance: none; }
input[type=date]::-webkit-calendar-picker-indicator{
  position: absolute; width: 100%; height: 100%;
  top:0; left: -2rem; opacity: 0;
}

/* ラジオ/チェックはネイティブ + accent-color で一旦リセット */
input[type="checkbox"],
input[type="radio"]{
  /* デフォルト表示のまま */
  accent-color: rgb(0 73 134 / 70%);
}

/* CF7 周り */
.wpcf7-list-item{ display: inline-block; padding: .4rem 1rem .4rem 0; }
.wpcf7-radio label{ margin-right: 2rem; }

#inquiry input[type='submit']{
  color: #fff;
  background: #004986;
  font-size: 2rem;
  font-weight: bold;
  border: none;
  display: block;
  width: 70vw;
  max-width: 250px;
  height: 60px;
  line-height: 60px;
  position: relative;
  text-align: center;
  padding: 0 25px;
  margin: 4rem auto;
  border-radius: 35px;
  -webkit-appearance: none;
  appearance: none;
}
#inquiry input[type='submit']::after{
  content:"";
  display: inline-block;
  border: .5rem solid transparent;
  border-left-color: #fff;
  margin-left: 25px;
}
.screen-reader-response,
.wpcf7-response-output{
  background: none;
  color: #e33;
}
.screen-reader-response ul{ display: none; }
.wpcf7-not-valid-tip{
  color: #e33;
  display: block;
}

@media screen and (min-width: 900px){
  #inquiry input[type='submit']:hover,
  form.swpm-form-builder input[type='submit']:hover{
    cursor: pointer;
  }
  #inquiry a.atel{ pointer-events: none; }
}

/* -------------------------------------------- */
/* 404                                          */
/* -------------------------------------------- */
#not-found section{
  display: block;
  width: 90vw;
  max-width: 700px;
  margin: 3rem auto;
}
#not-found h3{
  font-size: 1.8rem;
  margin: 0 auto 2rem;
}

/* -------------------------------------------- */
/* motion reduce                                */
/* -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}