@charset "UTF-8";

.mar-b-32{
  margin-bottom: min( 100vw / 750 * 32 , 32px);
}

.f-box,.f-box-none,.f-box-culum{display: flex;}
.f-box li,.f-box-none li,.f-box-culum{padding:2%;}

@media screen and (min-width: 600px) {
  .sp_only {
    display: none !important;
  }
}
@media screen and (max-width: 600px) {
  .pc_only {
    display: none !important;
  }
  .f-box{flex-direction: column;}
  }



/*============================
#fv
============================*/
main section#fv.fv {
  margin-bottom: 0;
    border-top: 3px solid rgba(0,116,64,1);
}
main section#fv.fv h1 {
}
main section#fv.fv h1 figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
main section#fv.fv h1 figure img.pc {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
main section#fv.fv h1 figure img.sp {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*============================
#cta
============================*/
main section#cta.cta {
  background:linear-gradient(rgba(0,116,64,0.86), rgba(0,116,64,0.86)), url(../img/cta_back.jpg) center center/cover no-repeat;
  padding: min( 100vw / 750 * 40 , 40px);
}
main section#cta.cta div.container {
  background:#fff;
  border-radius: min( 100vw / 750 * 16 , 16px);  
  padding: min( 100vw / 750 * 40 , 40px);
  text-align:center;
    position: relative;
}
main section#cta.cta div.container h2 {
  font-size: min(100vw / 375 * 20 , 20px * 2 - 8px );
  letter-spacing:0.1em;
  font-weight:bold;
  color:var(--tex-sub); 
  margin-bottom: min( 100vw / 750 * 36 , 36px);
  background:none;
  padding:0;
}
main section#cta.cta div.container h2 big{
  font-size: min(100vw / 375 * 27 , 27px * 2 - 8px );
  color: #E30000;
  
}
main section#cta.cta div.container p.cta__body {
  font-size: min(100vw / 375 * 18 , 18px * 2 - 8px );  
  line-height: calc(1em / 18 * 30);
  font-weight: bold;
  color:var(--tex-sub); 
  margin-bottom: min( 100vw / 750 * 16 , 16px);
}
main section#cta.cta div.container p.cta__body span.dot {
  position: relative;  
  color: #E30000;
}
main section#cta.cta div.container p.cta__body span.dot:before{
  content:"";
  width: calc(1em / 18 * 3);
  height: calc(1em / 18 * 3);
  border-radius:100vw;
  background-color: var(--bac-main);
  position:absolute;
  left:50%;
  top:0px;
  transform:translate(-50%, 0%);
  
}
main section#cta.cta div.container a.cta__btn {
  display:block;
  border-radius:100vw;
  background-color: var(--bac-btn);
  font-size: min(100vw / 375 * 17 , 17px * 2 - 8px );
  font-weight:bold;
  color:#fff;  
  padding: min( 100vw / 750 * 24 , 24px);
  max-width:20em;
  margin: auto;
  position:relative;
}
main section#cta.cta div.container a.cta__btn:after{
  content:"";
  width: min( 100vw / 750 * 16 , 16px);
  height: min( 100vw / 750 * 16 , 16px);
  border-top: min( 100vw / 750 * 4 , 4px) solid #fff;
  border-right: min( 100vw / 750 * 4 , 4px) solid #fff;
  position:absolute;
  right: min( 100vw / 750 * 40 , 40px);
  top:50%;
  transform:translateY(-50%) rotate(45deg);
}
.pekopeko {
  animation: pekopeko 2s infinite;
  box-shadow: 0px 5px 0px #b45700;
}
@keyframes pekopeko {
  0% {
      box-shadow:0px 5px 0px #b45700;
      transform:translateY(0px);
  }
  10% {
      box-shadow:0px 0 0px #b45700;
      transform:translateY(5px);
  }
  20% {
      box-shadow: 0px 5px 0px #b45700;
      transform:translateY(0px);
  }
  30% {
      box-shadow: 0px 0 0px #b45700;
      transform:translateY(5px);
  }
  40% {
      box-shadow: 0px 5px 0px #b45700;
      transform:translateY(0px);
  }
}

.pr-pct img{
    position: absolute;
    right: 10px;
    bottom: 0;
    height: 420px;
}
.pr-pct-sp img{
    position: absolute;
    height: 150px;
    right: 0px;
    top: -25px;
}
@media screen and (max-width: 1025px) {
.pr-pct img{
    height: 21vh;
}
}
@media screen and (max-width: 640px) {
main section#cta.cta div.container,
main section#cta.cta div.container h2 {
  text-align:left;
}
}
/*============================
#headline
============================*/
h2 {
  text-align:center;
  font-size: min(100vw / 375 * 28 , 28px * 2 - 8px );
  line-height: calc(1em / 28 * 33.6);
  padding: min( 100vw / 750 * 20 , 20px) min( 100vw / 750 * 40 , 40px);
  margin-bottom: min( 100vw / 750 * 48 , 48px);
  font-weight:bold;
}

body.red h2{
  background-color: #f7a8a8;
}
body.green h2{
  background-color: #d4e9b4;
}


/*============================
#lead
============================*/
main section#lead.lead {
}
main section#lead.lead div.container {
  max-width: min( 100vw / 750 * 1240 , 1240px);
}
main section#lead.lead div.container div.lead__badges {
  display: grid;
  grid-template-columns: 1fr;
  gap: min( 100vw / 750 * 24 , 24px);
  max-width: min( 100vw - ( 100vw / 750 * 40) , 800px );
  margin:auto;
}
main section#lead.lead div.container div.lead__badges figure {
}
main section#lead.lead div.container div.lead__badges figure img {
  margin: auto;
}
main section#lead.lead h3{
  margin: min( 100vw / 750 * 48 , 48px) auto;
  text-align:center;
  font-weight:bold;
  font-size: min(100vw / 375 * 20 , 20px * 2 - 16px );
  line-height: 1.5;
}

@media screen and (max-width:834px){
  main section#lead.lead h3{
    font-size: min(100vw / 375 * ( 18 + 16 ) / 2 , 18px);    
  }
}



main section#lead.lead div.container div.lead__body {
}
main section#lead.lead div.container div.lead__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}


main section#lead.lead div.container div.lead__grid figure {
  height:100%;
}
@media screen and (max-width:834px){
  main section#lead.lead div.container div.lead__grid figure {
      height: min( 100vw / 750 * 320 , 320px);
  }
}

main section#lead.lead div.container div.lead__grid figure img {
  height:100%;
}
main section#lead.lead div.container div.lead__grid div.lead__body {
  padding: min( 100vw / 750 * 80 , 80px);
}
main section#lead.lead div.container div.lead__grid div.lead__body strong {
}

@media screen and (max-width:834px){
  main section#lead.lead div.container div.lead__grid {
    grid-template-columns: 1fr;
  }    
  main section#lead.lead div.container div.lead__grid figure {
    order:1;
  }
  main section#lead.lead div.container div.lead__grid div.lead__body {
    order:2;
    padding: min( 100vw / 750 * 40 , 40px);
  }
  main section#lead.lead div.container div.lead__grid figure img {
    height:100%;
    width:100%;
  }
}


/*============================
#reason1
============================*/
main section#reason1.reason1.reason {
}
main section.reason h3 {
  background-color:#8CD5FA;
  background: repeating-linear-gradient( -45deg, #dfebe9, #dfebe9 10px, #d9e8e5 0, #d9e8e5 20px );
  background-size: auto auto;
  margin-top: min( 100vw / 750 * 80 , 80px);
  font-size: min(100vw / 375 * 23 , 23px * 2 - 8px );
  line-height: calc(1em / 23 * 30.8);
  letter-spacing: 0.05em;
  font-weight:bold; 
  filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.16));
  margin-bottom: min( 100vw / 750 * 64 , 64px);
  font-family: "Noto Serif JP", serif;
  color:var(--bac-main);
}

body.red main section.reason h3 {
  background-color:#FFA6A6;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #FF9391 20px, #FF9391 30px );
}
body.green main section.reason h3 {
  background-color:#9CD9AB;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #81D49A 20px, #81D49A 30px );
}

main section.reason h3 .container{
  position:relative;
  padding: 24px 40px 24px 146px;

  padding-left: calc(100vw / 750 * 148);
  padding-top: calc(100vw / 750 * 24);
  padding-bottom: calc(100vw / 750 * 24);
  padding-right: calc(100vw / 750 * 40);

}
main section.reason h3 div.reason__number {
  background:url(https://katekyo.wam.onl/lp/junior-high-school-exam/assets/img/reason_number-green.svg) center center/100% 100% no-repeat;
  width: calc(100vw / 750 * 146);
  height: calc(100vw / 750 * 148);
  display:block;
  transform: translate( calc( 100vw / 750 * -16), calc( 100vw / 750 * -16) );
  position:absolute;
  left:0px;
  top:0px;
}
body.red main section.reason h3 div.reason__number {
  background:url(https://katekyo.wam.onl/lp/junior-high-school-exam/assets/img/reason_number-red.svg) center center/100% 100% no-repeat;
}
body.green main section.reason h3 div.reason__number {
  background:url(https://katekyo.wam.onl/lp/junior-high-school-exam/assets/img/reason_number-green.svg) center center/100% 100% no-repeat;
}


main section.reason h3 div.reason__number span.number__ttl {
  font-size: calc(100vw / 750 * 38);
  font-family: "Noto Serif JP", serif;
  text-align:center;
  width:100%;
  font-weight:bold;
  color:#FFFF00;
  line-height:1;
  padding-top: calc(100vw / 750 * 16);
}
main section.reason h3 div.reason__number span.number__num {
  font-family: "Noto Serif JP", serif;
  font-weight:bold;
  color:#FFFF00;  
  text-align:center;
  width:100%;
  line-height:1;
  font-size: calc(100vw / 750 * 64);
}

@media not screen and (max-width:750px){
  main section.reason h3 .container{
    padding: 24px 40px 24px 146px;
  }
  main section.reason h3 div.reason__number {
    width: 146px;
    height: 148px;
    transform: translate( -16px, -16px );
  }
  main section.reason h3 div.reason__number span.number__ttl {
    font-size: 38px;
    padding-top: 16px;
  }
  main section.reason h3 div.reason__number span.number__num {
    font-size: 50px;
  }    
}


main section.reason div.container {
  max-width: min( 100vw - ( 100vw / 750 * 40) , 1240px );
}
main section.reason div.container h4 {
  text-align:center;
  font-size: min(100vw / 375 * 19 , 19px * 2 - 8px );
  line-height: calc(1em / 19 * 28);
  font-weight:bold;
  margin-top: min( 100vw / 750 * 80 , 80px);
  font-family: "Noto Serif JP", serif;
}
main section.reason div.container h4:after{
  content:"";
  width: min( 100vw / 750 * 154 , 154px);
  height: min( 100vw / 750 * 8 , 8px);
  background-color: var(--bac-main);
  display:block;
  margin: min( 100vw / 750 * 32 , 32px) auto min( 100vw / 750 * 48 , 48px) auto;
}

body.red main section.reason div.container h4:after{
  background-color: var(--bac-accent2);
}
body.green main section.reason div.container h4:after{
  background-color: var(--bac-accent3);
}

main section.reason div.container div.reason__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min( 100vw / 750 * 80 , 80px);
}

@media screen and (max-width:834px){
  main section.reason div.container div.reason__grid {
    grid-template-columns: 1fr;    
  }
}

main section.reason div.container div.reason__grid figure {
  height:100%;
}
main section.reason div.container div.reason__grid figure img {
  box-shadow: min( 100vw / 750 * 12 , 12px) min( 100vw / 750 * 12 , 12px) 0px #dfebe9;
  height:100%;
  max-height: min( 100vw / 750 * 320 , 320px);
  width:100%;
}
body.red main section.reason div.container div.reason__grid figure img {
  box-shadow: min( 100vw / 750 * 12 , 12px) min( 100vw / 750 * 12 , 12px) 0px #e5e5e5;
}
body.green main section.reason div.container div.reason__grid figure img {
  box-shadow: min( 100vw / 750 * 12 , 12px) min( 100vw / 750 * 12 , 12px) 0px #e5e5e5;
}


main section.reason div.container div.reason__grid figure.noshadow img {
  object-fit: contain;
  box-shadow: none;
}
main section.reason div.container .reason__body {
  max-width: min( 100vw / 750 * 800 , 800px);
  margin: auto;
}
main section#reason1.reason1.reason div.container div.reason__grid p.reason__body strong {
}

/*============================
#reason2
============================*/
main section#reason2.reason2.reason {
}
main section#reason2.reason2.reason h3 {
}
main section#reason2.reason2.reason h3 div.reason__number {
}
main section#reason2.reason2.reason h3 div.reason__number span.number__ttl {
}
main section#reason2.reason2.reason h3 div.reason__number span.number__num {
}
main section#reason2.reason2.reason div.container {
}
main section#reason2.reason2.reason div.container h4 {
}
main section#reason2.reason2.reason div.container div.reason__body {
}
main section#reason2.reason2.reason div.container div.reason__body strong {
}

/*============================
#reason3
============================*/
main section#reason3.reason3.reason {
}
main section#reason3.reason3.reason h3 {
}
main section#reason3.reason3.reason h3 div.reason__number {
}
main section#reason3.reason3.reason h3 div.reason__number span.number__ttl {
}
main section#reason3.reason3.reason h3 div.reason__number span.number__num {
}
main section#reason3.reason3.reason div.container {
}
main section#reason3.reason3.reason div.container h4 {
}
main section#reason3.reason3.reason div.container div.reason__body {
}
main section#reason3.reason3.reason div.container div.reason__body strong {
}

/*============================
#reason4
============================*/
main section#reason4.reason4.reason {
}
main section#reason4.reason4.reason h3 {
}
main section#reason4.reason4.reason h3 div.reason__number {
}
main section#reason4.reason4.reason h3 div.reason__number span.number__ttl {
}
main section#reason4.reason4.reason h3 div.reason__number span.number__num {
}
main section#reason4.reason4.reason div.container {
}
main section#reason4.reason4.reason div.container h4 {
}
main section#reason4.reason4.reason div.container div.reason__grid {
}
main section#reason4.reason4.reason div.container div.reason__grid figure {
}
main section#reason4.reason4.reason div.container div.reason__grid figure img {
}
main section#reason4.reason4.reason div.container div.reason__grid p.reason__body {
}
main section#reason4.reason4.reason div.container div.reason__grid p.reason__body strong {
}

/*============================
#reason5
============================*/
main section#reason5.reason5.reason {
}
main section#reason5.reason5.reason h3 {
}
main section#reason5.reason5.reason h3 div.reason__number {
}
main section#reason5.reason5.reason h3 div.reason__number span.number__ttl {
}
main section#reason5.reason5.reason h3 div.reason__number span.number__num {
}
main section#reason5.reason5.reason div.container {
}
main section#reason5.reason5.reason div.container h4 {
}
main section#reason5.reason5.reason div.container div.reason__grid {
}
main section#reason5.reason5.reason div.container div.reason__grid figure {
}
main section#reason5.reason5.reason div.container div.reason__grid figure img {
}
main section#reason5.reason5.reason div.container div.reason__grid p.reason__body {
}
main section#reason5.reason5.reason div.container div.reason__grid p.reason__body strong {
}
main section#reason5.reason5.reason div.container h5 {
  font-weight: bold;
  text-align:center;
  color: var(--bac-accent);
  max-width: min( 100vw / 750 * 200 , 200px);
  border-bottom: min( 100vw / 750 * 4 , 4px) solid; 
  padding-bottom: min( 100vw / 750 * 8 , 8px);
  margin: auto;
  margin-top: min( 100vw / 750 * 48 , 48px);
  margin-bottom: min( 100vw / 750 * 32 , 32px);
}
body.red main section#reason5.reason5.reason div.container h5 {
  color: var(--bac-accent2);
}
body.green main section#reason5.reason5.reason div.container h5 {
  color: var(--bac-accent3);
}

main section#reason5.reason5.reason div.container .reason__body figure {
  margin: auto;
  max-width: 400px;
  margin: auto;
}
main section#reason5.reason5.reason div.container figure img {
  margin:auto;
}

/*============================
#reason6
============================*/
main section#reason6.reason6.reason {
}
main section#reason6.reason6.reason h3 {
}
main section#reason6.reason6.reason h3 div.reason__number {
}
main section#reason6.reason6.reason h3 div.reason__number span.number__ttl {
}
main section#reason6.reason6.reason h3 div.reason__number span.number__num {
}
main section#reason6.reason6.reason div.container {
}
main section#reason6.reason6.reason div.container h4 {
}
main section#reason6.reason6.reason div.container div.reason__grid {
  grid-template-columns: auto 1fr;
}
@media screen and (max-width:834px){
  main section#reason6.reason6.reason div.container div.reason__grid {
    grid-template-columns: 1fr;
  }    
}

main section#reason6.reason6.reason div.container div.reason__grid figure {
  max-width:  400px;
  margin: auto;
}
main section#reason6.reason6.reason div.container figure img {
  box-shadow: none;
  height:auto;
  max-height:none;
  margin: auto;
}
main section#reason6.reason6.reason div.container div.reason__grid p.reason__body {
}
main section#reason6.reason6.reason div.container div.reason__grid p.reason__body strong {
}

/*============================
#reason7
============================*/
main section#reason7.reason7.reason {
}
main section#reason7.reason7.reason h3 {
}
main section#reason7.reason7.reason h3 div.reason__number {
}
main section#reason7.reason7.reason h3 div.reason__number span.number__ttl {
}
main section#reason7.reason7.reason h3 div.reason__number span.number__num {
}
main section#reason7.reason7.reason div.container {
}
main section#reason7.reason7.reason div.container h4 {
}
main section#reason7.reason7.reason div.container div.reason__grid {
}
main section#reason7.reason7.reason div.container div.reason__grid figure {
}
main section#reason7.reason7.reason div.container div.reason__grid figure img {
}
main section#reason7.reason7.reason div.container div.reason__grid p.reason__body {
}
main section#reason7.reason7.reason div.container p.reason__body {
}
main section#reason7.reason7.reason div.container p.reason__body strong {
}
main ul.check {
  display: grid;
  gap: min( 100vw / 750 * 16 , 16px);
  grid-template-columns: 1fr 1fr;
  margin-top: min( 100vw / 750 * 40 , 40px);
  font-size: min(100vw / 375 * 12 , 14px);
  
}
main ul.check li{
  background: url(../img/icon_check.svg) left min( 100vw / 750 * 16 , 16px) top 50%/ min( 100vw / 750 * 28 , 28px) auto no-repeat;
  background-color: var(--bac-accent);
  color: #fff;
  text-align: center;
  font-weight:bold;
  padding: min( 100vw / 750 * 16 , 16px);

  
}
body.red main ul.check li{
  background-color: var(--bac-accent2);
}
body.green main ul.check li{
  background-color: var(--bac-accent3);
}

main section#reason7.reason7.reason div.container p {
}

/*============================
#reason8
============================*/
main section#reason8.reason8.reason {
}
main section#reason8.reason8.reason h3 {
}
main section#reason8.reason8.reason h3 div.reason__number {
}
main section#reason8.reason8.reason h3 div.reason__number span.number__ttl {
}
main section#reason8.reason8.reason h3 div.reason__number span.number__num {
}
main section#reason8.reason8.reason div.container {
}
main section#reason8.reason8.reason div.container h4 {
}
main section#reason8.reason8.reason div.container div.reason__grid {
}
main section#reason8.reason8.reason div.container div.reason__grid figure {
}
main section#reason8.reason8.reason div.container div.reason__grid figure img {
}
main section#reason8.reason8.reason div.container div.reason__grid p.reason__body {
}
main section#reason8.reason8.reason div.container div.reason__grid p.reason__body strong {
}
main section#reason8.reason8.reason div.container div.reason__grid ul {
  list-style: inside;
}
main section#reason8.reason8.reason div.container div.reason__grid ul li {
}
main section#reason8.reason8.reason div.container div.reason__grid p {
}

/*============================
#reason9
============================*/
main section#reason9.reason9.reason {
}
main section#reason9.reason9.reason h3 {
}
main section#reason9.reason9.reason h3 div.reason__number {
}
main section#reason9.reason9.reason h3 div.reason__number span.number__ttl {
}
main section#reason9.reason9.reason h3 div.reason__number span.number__num {
}
main section#reason9.reason9.reason div.container {
}
main section#reason9.reason9.reason div.container h4 {
}
main section#reason9.reason9.reason div.container div.reason__grid {
}
main section#reason9.reason9.reason div.container div.reason__grid figure {
}
main section#reason9.reason9.reason div.container div.reason__grid figure img {
}
main section#reason9.reason9.reason div.container div.reason__grid p.reason__body {
}
main section#reason9.reason9.reason div.container div.reason__grid p.reason__body strong {
}

/*============================
#reason10
============================*/
main section#reason10.reason10.reason {
}
main section#reason10.reason10.reason h3 {
}
main section#reason10.reason10.reason h3 div.reason__number {
}
main section#reason10.reason10.reason h3 div.reason__number span.number__ttl {
}
main section#reason10.reason10.reason h3 div.reason__number span.number__num {
}
main section#reason10.reason10.reason div.container {
}
main section#reason10.reason10.reason div.container h4 {
}
main section#reason10.reason10.reason div.container div.reason__grid {
}
main section#reason10.reason10.reason div.container div.reason__grid figure {
}
main section#reason10.reason10.reason div.container div.reason__grid figure img {
}
main section#reason10.reason10.reason div.container div.reason__grid p.reason__body {
}
main section#reason10.reason10.reason div.container div.reason__grid p.reason__body strong {
}

/*============================
#message
============================*/
main section#message.message {
  margin-top: min( 100vw / 750 * 48 , 48px);
}
main section#message.message div.container {
  background-color: #e2f8ff;
  padding: min( 100vw / 750 * 40 , 40px);
  border: min( 100vw / 750 * 8 , 8px) solid var(--bac-accent);
}
body.red main section#message.message div.container {
  border: min( 100vw / 750 * 8 , 8px) solid var(--bac-accent2);
  background-color: #fffae8;
}
body.green main section#message.message div.container {
  border: min( 100vw / 750 * 8 , 8px) solid var(--bac-accent3);
  background-color: #fffae8;
}

main section#message.message div.container .message__balloons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: min( 100vw / 750 * 16 , 16px);
  margin-bottom: min( 100vw / 750 * 56 , 56px);
  max-width: min( 100vw / 750 * 800 , 800px);
  margin-right:auto;
  margin-left: auto;
}
@media screen and (max-width:834px){
  main section#message.message div.container .message__balloons {
    grid-template-columns: 1fr;
  } 
}
main section#message.message div.container p.message__balloon {
  background-color: var(--bac-accent);
  color: #ffffff;
  text-align:center;
  padding: min( 100vw / 750 * 16 , 16px);
  border-radius: min( 100vw / 750 * 16 , 16px);
  font-size: min(100vw / 375 * 19 , 19px * 2 - 17px );
  line-height: calc(1em / 19 * 21.8);
  font-weight:bold;
  display: grid;
  align-items: center;
  position:relative;    
}
body.red main section#message.message div.container p.message__balloon {
  background-color: var(--bac-accent2);
}
body.green main section#message.message div.container p.message__balloon {
  background-color: var(--bac-accent3);
}


@media screen and (max-width:834px){
  main section#message.message div.container p.message__balloon {
    margin-bottom: min( 100vw / 750 * 24 , 24px);
    margin-left: min( 100vw / 750 * 80 , 80px);
    margin-right:0;
  }    
  main section#message.message div.container p.message__balloon:nth-of-type(2n+1) {
    margin-right: min( 100vw / 750 * 80 , 80px);
    margin-left:0;
  }
}

main section#message.message div.container p.message__balloon:after{
  content:"";
  position:absolute;
  bottom:0px;
  left:50%;
  transform:translate(-50%, 100%);
  border-top: min( 100vw / 750 * 20 , 20px) solid var(--bac-accent);
  border-right: min( 100vw / 750 * 24 , 24px) solid transparent;
  border-left: min( 100vw / 750 * 24 , 24px) solid transparent;
}
body.red main section#message.message div.container p.message__balloon:after{
  border-top: min( 100vw / 750 * 20 , 20px) solid var(--bac-accent2);
}
body.green main section#message.message div.container p.message__balloon:after{
  border-top: min( 100vw / 750 * 20 , 20px) solid var(--bac-accent3);
}

main section#message.message div.container p.message__body {
  max-width: min( 100vw / 750 * 800 , 800px);
  margin: auto;
}
main section#message.message div.container p.message__body strong {
}

/*============================
#money-back
============================*/
main section#money-back.money-back {
  background:#B07C1F;
  margin-top: min( 100vw / 750 * 40 , 40px);
  padding-top: min( 100vw / 750 * 40 , 40px);
  padding-bottom: min( 100vw / 750 * 40 , 40px);
}
main section#money-back.money-back div.container {
  background:#fff;
  position:relative;
  padding: min( 100vw / 750 * 56 , 56px) min( 100vw / 750 * 32 , 32px);
}
main section#money-back.money-back div.container:before{
  content:"";
  position:absolute;
  left:0px;
  top:0px;
  border-top:min( 100vw / 750 * 34 , 34px) solid #B07C1F;
  border-left:min( 100vw / 750 * 34 , 34px) solid #B07C1F;
  border-right:min( 100vw / 750 * 34 , 34px) solid transparent;
  border-bottom:min( 100vw / 750 * 34 , 34px) solid transparent;
  z-index: 1;  
  display: block;
}
main section#money-back.money-back div.container:after{
  content:"";
  position:absolute;
  left:auto;
  right:0px;
  top:auto;
  bottom: 0px;
  border-bottom:min( 100vw / 750 * 34 , 34px) solid #B07C1F;
  border-right:min( 100vw / 750 * 34 , 34px) solid #B07C1F;
  border-left:min( 100vw / 750 * 34 , 34px) solid transparent;
  border-top:min( 100vw / 750 * 34 , 34px) solid transparent;
  z-index: 1;  
  display: block;
}
main section#money-back.money-back div.container h2 {
  background:transparent;
  color: #B07C1F;
  font-size: min(100vw / 375 * 24 , 24px * 2 - 8px );
  
}
main section#money-back.money-back div.container .money-back__body {
  max-width: min( 100vw / 750 * 800 , 800px);
  margin:auto;
}
main section#money-back.money-back div.container .money-back__body strong {
}
main section#money-back.money-back div.container .money-back__body a {
  color:#0011FF;
  text-decoration: underline;
}

/*============================
#counseling
============================*/
main section#counseling.counseling {
  margin-bottom: min( 100vw / 750 * 48 , 48px);
}
main section#counseling.counseling div.container {
}
main section#counseling.counseling div.container h2 {
}
main section#counseling.counseling div.container p.counseling__body {
  max-width: min( 100vw / 750 * 800 , 800px);
  margin:auto;
}
main section#counseling.counseling div.container p.counseling__body strong {
}

/*============================
#closing
============================*/
main section#closing.closing {
  background:#a8daf7;
  padding-bottom: min( 100vw / 750 * 48 , 48px);
}
body.red main section#closing.closing {
  background:#f3e5b4;  
}
body.green main section#closing.closing {
  background:#f3e5b4;  
}
main section#closing.closing figure {
  height: min( 100vw / 750 * 418 , 418px);
}
main section#closing.closing figure img {
  height:100%;
  width:100%;
  object-position: top center;
}
main section#closing.closing div.container {
  background-color: #fff;
  padding: min( 100vw / 750 * 20 , 40px);
  border-radius: min( 100vw / 750 * 16 , 16px);
  margin-top: max( 100vw / 750 * -92 , -92px);
  z-index:1;
  position:relative;
  margin-bottom: min( 100vw / 750 * 34 , 34px);
}
main section#closing.closing .container h2{
  background: none;
  color:#E30000;
}
main section#closing.closing .container h2 small{
  color:var(--tex-main);
      font-size: clamp(1.8rem, 4vw, 3rem) !important;
  line-height: calc(1em / 20 * );
  
}
main section#closing.closing .container h3{
  font-size: min(100vw / 375 * 20 , 20px * 2 - 16px );
  line-height: 1.2;
  text-align:center;
  font-weight:bold;
  
}
main section#closing.closing div.container p.closing__body {
}
main section#closing.closing div.container ul.check {
  margin-bottom: min( 100vw / 750 * 24 , 24px);
}
@media screen and (max-width:834px){
  main section#closing.closing div.container ul.check {
    grid-template-columns: 1fr;
  }    
}
main section#closing.closing div.container ul.check li {
  text-align:left;
  padding: min( 100vw / 750 * 16 , 16px) min( 100vw / 750 * 16 , 16px) min( 100vw / 750 * 16 , 16px) min( 100vw / 750 * 54 , 54px);
}
main section#closing.closing div.closing__cta {
}
main section#closing.closing div.closing__cta h3 {
  text-align:center;
  font-size: min(100vw / 375 * 18 , 18px * 2 - 8px );
  margin-bottom: min( 100vw / 750 * 26 , 26px);
  font-weight:bold;
}
main section#closing.closing div.closing__cta a {
  max-width: min( 100vw / 750 * 800 , 800px);
  display:block;
  margin:auto;
  margin-bottom: min( 100vw / 750 * 24 , 24px);
  max-width: min( 100vw - ( 100vw / 750 * 40) , 1080px );
}
main section#closing.closing div.closing__cta a figure {
  height: auto;

}
main section#closing.closing div.closing__cta a figure img {
  object-fit: contain;
}
main section#closing.closing div.closing__cta p {
  text-align:center;
  font-weight:bold;
  font-size: min(100vw / 375 * 16 , 16px * 2 - 8px );
  line-height: calc(1em / 16 * 24);
  
}

/*============================
#covid
============================*/
main section#covid.covid {
  font-size: min(100vw / 375 * 16 , 16px * 2 - 8px );
  line-height: calc(1em / 16 * 28.8);
  text-align:center;
  color:#FF5599;
  font-weight:bold;
  margin-top: min( 100vw / 750 * 40 , 40px);
  margin-bottom: min( 100vw / 750 * 40 , 40px);
  
}
main section#covid.covid div.container {
  border:min( 100vw / 750 * 6 , 6px) solid ;
  border-radius: min( 100vw / 750 * 16 , 16px);
  padding: min( 100vw / 750 * 40 , 40px);
}
main section#covid.covid div.container figure {
  margin-bottom: min( 100vw / 750 * 24 , 24px);
}
main section#covid.covid div.container figure img {
  margin: auto;
  width: min( 100vw / 750 * 100 , 100px);
}
main section#covid.covid div.container p.covid__body {
}

/*============================
#online
============================*/
main section#online.online {
  margin-bottom: min( 100vw / 750 * 48 , 48px);
}
main section#online.online div.container {
}
main section#online.online div.container a {
}
main section#online.online div.container a figure.pc {
}
main section#online.online div.container a figure.pc img {
  margin: auto;
}
main section#online.online div.container a figure.sp {
}
main section#online.online div.container a figure.sp img {
}
main div {
}

/*============================
#notes
============================*/
main #notes.notes {
  font-size: min(100vw / 375 * 12 , 12px * 2 - 8px );
  line-height: calc(1em / 12 * 18);

      width: 100%;
    max-width: min( 100vw - ( 100vw / 750 * 40) , 1080px );
    margin: auto;
}
main #notes.notes div.container {
}
main #notes.notes div.container p.notes__body {
}
footer {
  text-align: center;
  background-color: var(--bac-main);
  padding: min( 100vw / 750 * 40 , 40px);
}
footer figure.footer__logo {
  max-width: min( 100vw / 750 * 300 , 300px);
  margin: auto;;
}
footer figure.footer__logo img {
}
footer div.footer__copy {
  color: #fff;
  margin-top: min( 100vw / 750 * 24 , 24px);
  
}

/*============================
#floating
============================*/
section#floating.floating {
  position: sticky;
  width:100%;
  bottom:0px;
  left:0px;
  backdrop-filter: blur(12px);
  background:rgba(255,255,255,0.5);
  z-index:1000;
  height: min( 100vw / 750 * 122 , 122px);
  padding-top: min( 100vw / 750 * 24 , 24px);
  padding-bottom: min( 100vw / 750 * 24 , 24px);
}
section#floating.floating div.container {
  display: grid;
  gap: min( 100vw / 750 * 24 , 24px);
  align-items: center;
  grid-template-columns: 1fr 1fr;
}
section#floating.floating div.container figure.floating__tel {
}
section#floating.floating div.container figure.floating__tel img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
}
section#floating.floating div.container a.floating__button {
  height:100%;
  max-width: 400px;
}
section#floating.floating div.container a.floating__button figure {
  height:100%;
}
section#floating.floating div.container a.floating__button figure img {
  height:100%;
  width:auto;
  margin: 0 0 0 auto;
  object-fit: contain;
}

/*============================
合格者の声
============================*/
 .w-1000{
    width:95%;
    margin:0 auto;
    padding:0;
}
.w-1000{max-width:1000px;}
#voice-junior-highschool{
padding: 6vh 0 0;
}
.voice-junior-highschool-box{
    background: #F4FAFF;
    padding: 2rem;
    margin: 0 2%;
    border: 1px solid #eee;
}
.voice-junior-highschool-box-ttl{
    color: #2D98DA;
    font-size: clamp(1rem, 1vw, 1rem) !important;
    font-weight: 500;
    line-height: 1.4;
    margin: 1vh 0 1vh !important;
    background: transparent !important;
    filter: none !important;
}
.voice-junior-highschool-box{
      position: relative;
}
.voice-junior-highschool-box::before{
  content: "";
  width: 62px;
  height: 64px;
  background: url(../img/voice-jh-exam/ic_medal.png) no-repeat;
  background-size: contain;
  position: absolute;
    top: 100px;
    right: 20px;
}
.voice-junior-highschool-box img{
      width: 100%;
      height: 150px;
      object-fit: cover;
}
.voice-junior-highschool-name{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.voice-junior-highschool-name li{
    font-size: clamp(.9rem, .9vw, .9rem);
    text-align: center;
}

/*---------------------------------------------------------
無料受験相談で雰囲気を感じ取ってください！
---------------------------------------------------------*/
.conference-area{
    width: 90%;
    margin: 0 auto;
    padding: 5vh 0;
}
.conference-box{
width: 48%;
}
.conference-ttl{
border-top: 3px solid #007DBB;
    border-bottom: 3px solid #007DBB;
    padding: 2vh 0;
    font-size: clamp(18px, 3vw, 30px);
    text-align: center;
    font-weight: 700;
    color: #007DBB;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.conference-area {
    width: 90%;
    margin: 0 auto;
}

.conference-box {
    width: 100%;
}
}

/*---------------------------------------------------------
main電話番号
---------------------------------------------------------*/
#main-telnumber{
    padding: 5vh 0;
}

/*---------------------------------------------------------
動画
---------------------------------------------------------*/
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
    margin: 0 1% 0 0;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

/*---------------------------------------------------------
アコーディオン
---------------------------------------------------------*/
.follow-box-area{
margin: 6vh auto 0;
width: 90%;
max-width: 1200px;
}
.follow-box-area-checklist{
    margin: 0 0 2vh;
}
.follow-box-area-checklist > li{
    position: relative;
    font-weight: 700;
    font-size: clamp(1.6rem, 2vw, 2rem);
    text-indent: -1em;
  padding-left: 1em;
      margin: 0 0 1vh;
}
.follow-box-area-checklist > li::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f14a';
  color: var(--bac-accent);
  margin: 0 5px 0 0;
}
.details {
	border-top: 2px solid #8CD5FA;
	border-left: 2px solid #8CD5FA;
	border-right: 2px solid #8CD5FA;
	&:last-of-type {
		border-bottom: 2px solid #8CD5FA;
	} 
}
.details-summary {
	position: relative;
	display: block;
	padding: 2vh 2vw;
	color: #fff;
	font-size: clamp(1.6rem, 5vw, 2.5rem);
	font-weight: bold;
	text-align: center;
	background-color: var(--bac-accent);
	&:hover {
		cursor: pointer;
		opacity: 0.8;
	}
	.btn {
		position: absolute;
        top: 37%;
        left: 10%;
        width: 18px;
        height: 18px;
        transform-origin: center center;
        transition-duration: 0.2s;

        &:before,
        &:after {
            content: "";
            background-color: #fff;
            border-radius: 10px;
            width: 18px;
            height: 4px;
            position: absolute;
            top: 7px;
            left: 0;
            transform-origin: center center;
        }
        &:before {
            width: 4px;
            height: 18px;
            top: 0;
            left: 7px;
        }
    }
	&.is-active {
		.btn {
			-webkit-transform: rotate(-180deg);
			transform: rotate(-180deg);
			&:before {
            	content: none;
        	}	
		}
    }
}

.details-summary::-webkit-details-marker {
	display: none;
}

.details-content {
	padding: 20px;
	p {
		margin: 0 0 20px;
		color: #000;
		font-size: 18px;
		text-align: left;
		&:last-of-type {
			margin: 0 0 0;
		}
	}
}