@charset "UTF-8";
/*---------------------------------------------------------
---------------------------------------------------------*/

/*---------------------------------------------------------
ALL
---------------------------------------------------------*/
body{
    font-family: 'ZenMaruGothic', sans-serif;
}
.cb {
    clear: both;
}
.top-ttl{
    font-size: clamp(3rem, 4vw, 4.5rem);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}
.top-ttl02{
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}
.semi-ttl{
    font-size: clamp(2rem, 2.5vw, 3rem);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}
.third-ttl{
    font-size: clamp(1.8rem, 2.25vw, 2.75rem);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}
.fourth-ttl{
    font-size: clamp(1.6rem, 2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

[class*="fuchi-w04"] {
  --x: 0 0 var(--text-outline--width, 4px) var(--text-outline--color, #fff);
  --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x) /* 6 */;
  text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y) /* 6 * 6 = 36 */;
}

.underline-y{
    background: linear-gradient(transparent 60%, #ff6 60%);
}
.fc-pink{
	color:#ff526e;
}
.fc-lyellow{
	color:#ffff00;
}
.fc-lgreen{
	color:#00a73c;
}
.fc-white{
	color:#fff;
}
.bg-koushi{
    width: 100%;
    background-size: 16px 16px;
    background-position: 50% 50%;
    background-image: repeating-linear-gradient(90deg, rgba(122,201,67, 0.2), rgba(122,201,67, 0.2) 1px, transparent 1px, transparent 16px), repeating-linear-gradient(0deg, rgba(122,201,67, 0.2), rgba(122,201,67, 0.2) 1px, #fff 1px, #fff 16px);
}
.photo {
	padding: 8px;
	box-shadow: 2px 5px 10px -2px rgba(0, 0, 0, 0.2);
	background: #fff;
}
.photo-kaiten5{
    transform: rotate(-2deg);
}

/*--btn--*/
.btn{
	display: block;
    padding: 1rem 1rem;
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
      position: relative;
}
.icn-btn-right{
    position: absolute;
    right: 15px;
    top: 50%;
    line-height: 1;
    margin-top: -0.5em;
}
.fa-chevron-right:before {
    content: "\f054";
}

.fa-chevron-left-search:before {
    content: "\f002";
}
.btn-cta{
	font-family: 'Noto Sans Japanese', sans-serif;
	border-radius: 1vh;
	background: -moz-linear-gradient(50% 100% 90deg, #fe7100 0%, #ffc756 100%);
  background: -webkit-linear-gradient(90deg, #fe7100 0%, #ffc756 100%);
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0, #fe7100), color-stop(1, #ffc756));
  background: -o-linear-gradient(90deg, #fe7100 0%, #ffc756 100%);
  background: -ms-linear-gradient(90deg, #fe7100 0%, #ffc756 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#B30F1A', endColorstr='#ED1D2D' ,GradientType=0)";
  background: linear-gradient(0deg, #fe7100 0%, #ffc756 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ED1D2D',endColorstr='#B30F1A' , GradientType=0);
      border-bottom: 5px solid #83091b;
      font-size: clamp(2rem, 2.75vw, 3.25rem);
    font-weight: 700;
    color: #fff;
    border: 2px solid #ffc756;
    text-shadow: 0 0 6px rgb(0, 0, 0, 0.2);
  
}
.btn-cta:hover{
    color: #fe7100;
    border: 2px solid #fe7100;
    background:#fff;
}
.cta-txt-mini{
    display: block;
    font-size: clamp(1.5rem, 2vw, 2.5rem);
    font-weight: 700;
    color: #000;
    text-shadow: 0 0 6px rgb(0, 0, 0, 0);
}
.btn-other{
    font-family: 'Noto Sans Japanese', sans-serif;
    border:2px solid #007440;
    font-size: 1.6rem;
    font-weight: 700;
    border-radius: 100vh;
    background:#fff;
    color:#007440;
}
.btn-other:hover{
    background:#007440;
    color:#fff;
}
/*---------------------------------------------------------
header
---------------------------------------------------------*/
header{
    background: #007440;
    padding: 1vh 0;
}
.head-leed-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F7F7F7;
}
.head-leed-list{
    display: flex;
    justify-content: flex-end;
}
.head-leed-list li{
    position: relative;
    padding-left: 20px;
    padding-right: 1rem;
}
.head-leed-list li::before {
  content: '\f138';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 0;
  color: #007440;
}
.head-leed-list li a:hover{
  color: #EE4D47
}
.header{
    width: 100%;
    max-width: 400px;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
header{
    padding: 1.5vh 0;
}
.header{
    max-width: 300px;
}
}

/*---------------------------------------------------------
FV
---------------------------------------------------------*/
.fv-main{
    width: 100%;
    max-width:1920px;
    height: 0;
    padding-top: 39%;
    position: relative;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    margin: 0 auto;
}
/*--webp対応ブラウザの場合--*/
.webp .fv-main{ 
background: url(./img/fv-main-bg-pc.webp);
 }
/*--webp非対応ブラウザの場合--*/
.no-webp .fv-main{ 
background: url(./img/fv-main-bg-pc.png); 
}
/*
.fv-main::before {
  content: "";
  display: block;
  padding-top: 39%;
}
*/
.fv-main-contents{
position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.fv-main-innner-contents{
position: absolute;
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.fv-ttl-wakayama {
  position: relative;
  width: fit-content;
  padding: 1rem;
  border: 2px solid #00a73c;
  border-radius: 4px;
  margin: 1rem 0 1rem;
  background: #fff;
}
.fv-ttl-wakayama::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 20%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  background-color: #ffffff; /* 背景色と同じ色を指定 */
  rotate: 135deg;
  translate: -50%;
}
.fv-ttl-wakayama::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 20%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 2px solid;
  border-color: #00a73c #00a73c transparent transparent;
  rotate: 135deg;
  translate: -50%;
}
.fv-ttl-wakayama > p{
    line-height: 1.2;
    font-size: clamp(1.3rem, 2vw, 2.25rem);
    color: #00a73c;
    font-weight: 700;
}

.h1-ttl{
	font-size: clamp(2.4rem, 4vw, 6rem);
    font-weight: 700;
    background: #00a73c;
    color: #fff;
    padding: .25vh 1vh;
}
.h1-ttl-mini{
	font-size: clamp(1.6rem, 2.5vw, 3rem);
    font-weight: 700;
    line-height: 1.2
}
.h2-ttl{
	font-size: clamp(1.6rem, 2.5vw, 3rem);
    font-weight: 700;
    margin: 2vh 0 1vh;
}
.top-fv-list-box{
	border: 2px solid #ff526e;
    border-radius: 1vh;
    padding: .75vh .75vw;
    width: 70%;
}
.top-fv-list-box li{
	position: relative;
    padding-left: 35px;
    /* margin: 0 0 1rem; */
    font-size: clamp(1.3rem, 2vw, 3rem);
    font-weight: 700;
    line-height: 1.5;
}
.top-fv-list-box li:before{
    position: absolute;
    left: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f118';
    color: #ff526e;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 1400px) {
/* 1400pxまでの幅の場合に適応される */
.fv-main-innner-contents{
    left: 8%;
}
}
@media screen and (max-width: 1300px) {
/* 1300pxまでの幅の場合に適応される */
.fv-main {
    padding-top: 45%;
}
}
@media screen and (min-width:641px) and ( max-width:820px) {
/*　画面サイズが768pxから820pxまではここを読み込む　*/
.h2-ttl {
    margin: 1vh 0 .5vh;
}
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.fv-main{
    max-width:750px;
    padding-top: 90%;
}
/*--webp対応ブラウザの場合--*/
.webp .fv-main{ 
background: url(./img/fv-main-bg-sp.webp);
 }
/*--webp非対応ブラウザの場合--*/
.no-webp .fv-main{ 
background: url(./img/fv-main-bg-sp.png); 
}
.fv-main::before {
  padding-top: 90%; /* 比率を指定 */
}
.fv-main-innner-contents {
    left: 2%;
}
.top-fv-list-box li {
    padding-left: 20px;
}
.h2-ttl {
    margin: 3vh 0 1vh;
}
}

/*---------------------------------------------------------
出席扱い制度
---------------------------------------------------------*/
.attendance-system{
    padding:6vh 0;
    background:#fff9de;
}

.attendance-system-bg-pct{
    position: relative;
    background-repeat: no-repeat !important;
    background-position: 5% 2% !important;
    background-size: 40% !important;
    margin: 0 auto;
}
/*--webp対応ブラウザの場合--*/
.webp .attendance-system-bg-pct{ 
background:#fff9de url(./img/attendance-system-bg.webp);
 }
/*--webp非対応ブラウザの場合--*/
.no-webp .attendance-system-bg-pct{ 
background:#fff9de url(./img/attendance-system-bg.png); 
}

.bg-koushi{
    width: 100%;
    background-size: 16px 16px;
    background-position: 50% 50%;
    background-image: repeating-linear-gradient(90deg, rgba(122,201,67, 0.2), rgba(122,201,67, 0.2) 1px, transparent 1px, transparent 16px), repeating-linear-gradient(0deg, rgba(122,201,67, 0.2), rgba(122,201,67, 0.2) 1px, #fff 1px, #fff 16px);
}
.attendance-system-box{
    margin: 2ch 0 0;
    padding: 2vh 1vw;
    background: #fff;
    border: 2px solid #00a73c;
    border-radius: 1vh;
}
.attendance-system-box > li{
    font-size: clamp(1.6rem, 2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.6;
    position: relative;
    padding-left: 25px;
    margin:0 0 1vh;
}
.attendance-system-box > li:before{
position: absolute;
    left: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f14a';
    color: #00a73c;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arrow-down-sv {
    font-size: clamp(8rem, 8vw, 10rem);
}

/* メリット */
.lavel-ttl{
    display: inline-block;
    position: absolute;
    top: -30px;
    left: -10px;
    margin-bottom: 1rem;
    margin-right: 10px;
    padding: .75rem;
    border-left: 10px solid #00a73c;
    background-color: #ccedd8;
    color: #333;
    font-weight: 700;
    font-size: clamp(1.5rem, 2vw, 2rem);
    transform: rotate(-5deg);
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}
.lavel-ttl::before{
    position: absolute;
    right: 1px;
    bottom: 10px;
    width: 40%;
    height: 50%;
    transform: rotate(5deg);
    z-index: -1;
    content: '';
    filter: blur(4px);
}
.merit-box{
    position: relative;
    margin: 60px 0 10px;
}
.merit-box-contents{
    border: 3px solid #00a73c;
    border-radius: 1.5vh;
    padding: 3vh 3vw;
    background: #fff;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
/*--webp対応ブラウザの場合--*/
.webp .attendance-system-bg-pct{ 
background:#fff9de;
 }
/*--webp非対応ブラウザの場合--*/
.no-webp .attendance-system-bg-pct{ 
background:#fff9de; 
}
.merit-box {
    margin: 40px 0 10px;
}
.lavel-ttl {
    left: 10px;
}
}

/*---------------------------------------------------------
3つのポイント
---------------------------------------------------------*/
.point-area{
    background-color: #e4f4d9;
    background-image: radial-gradient(#7ac943 10%, transparent 10%), radial-gradient(#7ac943 10%, transparent 10%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
  padding:6vh 0;
}
.point-box,.learn-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.point-box > li,.learn-box > li{
    width: calc(30% - 0px / 3);
}
.point-box-contents{
	background: #fff;
    padding: 2vh 1.5vw;
    border-radius: 1vh;
    box-shadow: 2px 5px 10px -2px rgba(0, 0, 0, 0.2);
    margin: 2.5vh 0 0;
}
.point-box-pct{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.point-box-contents-ttl{
    font-size: clamp(1.3rem, 1.6vw, 1.9rem);
    text-align: center;
    font-weight: 700;
        line-height: 1.4;
}

.point-number{
    font-size: clamp(2.5em, 3vw, 3.5rem);
    font-weight: 700;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.point-box,.learn-box{
    flex-direction: column;
}
.point-box > li,.learn-box > li{
    width: 100%;
}
.point-box-contents {
    padding: 4vh 4vw;
}
.point-box-pct {
    height: 100%;
}
.point-box-contents-ttl{
    font-size:2rem;
}

.point-number{
    font-size:3rem;
}
}

/*---------------------------------------------------------
WAM小中等部で学べること
---------------------------------------------------------*/
.learn-area{
    padding:6vh 0;
}
.learn-box-contents{
border: 2px solid #00a73c;
    border-radius: 1vh;
    margin: 2.5vh 0 0;
}
.learn-box-contents-ttl{
    font-size: clamp(2rem, 2.5vw, 3rem);
    text-align: center;
    font-weight: 700;
    line-height: 1.4;
    padding: 1vh 0;
    background:#00a73c;
    display: flex;
    align-items: center;
    justify-content: center;
}
.learn-box-contents-innner{
    padding:1vh 2vw 2vh;
}

/* 1日のスケジュール表 */
.schedule-area{
    padding:0 0 6vh;
}
.schedule-box{
    border: 2px solid #00a73c;
padding: 4vh 2vw;
    border-radius: 1vh;
}
.flex-schedule {
    list-style: none;
    margin: 0 auto 0 0;
    box-sizing: border-box;
    width: 100%;
    border-radius: 1vh;
}

.flex-schedule li {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;

}

.flex-schedule .area {
  padding: 10px;
  display: block;
  width: 100%;
  border-left: 6px solid #00a73c;
}

.flex-schedule li .time {
  display: inline-flex;
  justify-content: flex-end;
  flex-basis: 5rem;
  max-width: 5rem;
  margin-right: 1rem;
  margin-top: 25px;
  font-weight: 700;
    font-size: clamp(1.6rem, 2vw, 1.8rem);
}

.flex-schedule .sch_box {
  position: relative;
  min-height: 1rem;
  padding: 1rem;
  border-radius: 1vh;
  margin-left: 10px;
}
.waku-yellow{
    background:rgba(248,211,41,0.1);
    border: 2px solid #f8d329;
}
.waku-lgreen{
    background:rgba(78,237,207,0.1);
    border: 2px solid #4eedcf;
}
.waku-pink{
    background:rgba(222,76,164,0.1);
    border: 2px solid #de4ca4;
}
.waku-gray{
    background:rgba(227,227,227,0.1);
    border: 2px solid #e3e3e3;
}
.waku-blue{
    background:rgba(78,165,233,0.1);
    border: 2px solid #4ea5e9;
}
.waku-lgreen{
    background:rgba(178,239,88,0.1);
    border: 2px solid #b2ef58;
}
.waku-purple{
    background:rgba(111,122,205,0.1);
    border: 2px solid #6f7acd;
}

.flex-schedule .sch_box::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 20px;
  background: #00a73c;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

.flex-schedule .sch_title {
  font-weight: 700;
}

.flex-schedule .sch_tx {
    font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  font-weight: normal;
}

/* 対象学年 */
.target-area{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.target-pctbox{
    width: 15%;
}
.target-contents{
    width: 66%;
    padding: 2%;
}
.target-ttl{
    font-size: clamp(1.6rem, 2vw, 2.5rem);
    font-weight:700;
    text-align:center;
}
.target-list-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.target-list-box > li{
    width: calc(27% - 0px / 3);
    padding: 1vh;
    text-align: center;
    margin-bottom: 1%;
    font-weight: 700;
    color: #fff;
    border-radius: 1vh;
    font-size: clamp(1.4rem, 2vw, 2.5rem);
}
.ttl-elementary{
    color: #89c711;
}
.list-elementary > li{
    background: #89c711;
}
.ttl-junior{
    color: #00a73c;
}
.list-junior > li{
    background: #00a73c;
}

/* 料金体系 */
.price-area{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.price-box{
    background: #ff526e;
    padding: 1.5vh 1.5vw;
    color: #fff;
    width: 44%;
    border-radius: 1vh;
    margin: 2%;
}
.price-box-plus{
    width: 6%;
    text-align: center;
}
.fs-price{
    font-size: clamp(3rem, 4vw, 4rem);
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.price-area {
    display: flex;
    flex-direction: column;
}
.price-box,.price-box-plus{
    width: 100%;
}
}

/*---------------------------------------------------------
CTA
---------------------------------------------------------*/
.cta-area{
    padding:6vh 0;
}
.cta-area{
    width: 100%;
    position: relative;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    margin: 0 auto;
    border-top: 5px solid #ff7300;
    border-bottom: 5px solid #ff7300;
}
/*--webp対応ブラウザの場合--*/
.webp .cta-area{ 
background: url(./img/cta-bg-pc.webp);
 }
/*--webp非対応ブラウザの場合--*/
.no-webp .cta-area{ 
background: url(./img/cta-bg-pc.png); 
}

/* TEL */
.tel-btn {
    font-family: "din-2014", sans-serif;
    font-size: clamp(4rem, 5vw, 6rem);
    text-decoration: none;
    color: #000;
    display: flex;
    font-weight: 700;
    letter-spacing: .15rem;
    line-height: 1;
}
.tel-btn:before {
    content: "";
    display: inline-block;
    width: 70px;
    background: url(./assets/img/free-dial-logo.svg) no-repeat;
    background-size: contain;
    margin-right: 8px;
    background-position: center;
}
.tel-box{
    background: #fff;
    padding: 1rem;
    border: 2px solid #333;
    border-radius: 1.5vh;
}
.fc-telgreen{
	color:#007240;
}
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
font-weight: 600;
}
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
/*--webp対応ブラウザの場合--*/
.webp .cta-area{ 
background: url(./img/cta-bg-sp.webp);
 }
/*--webp非対応ブラウザの場合--*/
.no-webp .cta-area{ 
background: url(./img/cta-bg-sp.png); 
}
.tel-btn:before {
    width: 60px;
    height: 40px;
    margin-right: 8px;
}
}
/*---------------------------------------------------------
経験豊富なスタッフが
様々なお悩みに寄り添います！
---------------------------------------------------------*/
.support-area{
    padding:6vh 0;
    background: #c1e88e;
}
.note-line{
    line-height: 2.3;
    background-image: linear-gradient(180deg, #fff 1px, transparent 1px);
    background-size: 100% 2.3em;
    background-position: bottom 1px center;
}
.worries-area{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 2vh 0 0;
}
.worries-area > li{
    width: calc(30% - 0px / 3);
    margin: 2vh 0 0;
}
.worries-area > li > div > h3{
    background: #ff526e;
    display: inline-block;
    padding: 0 2.5vw;
    color: #fff;
    font-size: clamp(1.4rem, 1.6vw, 1.6rem);
    font-weight: 700;
    border-radius: 1vh 1vh 0 0;
}
.worries-number{
    font-size: clamp(1.6rem, 2vw, 2.5rem);
    margin-left: .5vw;
}
.worries-box{
    background: #fff;
    padding: 2vh 1vw;
    border-radius: 1vh;
    box-shadow: 2px 5px 10px -2px rgba(0, 0, 0, 0.2);
    margin: 0 0 0;
}
.worries-contents{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
        margin: 0 0 2vh;
}
.fukidashi-box > p{
    line-height: 1.4;
    font-size: 1.6rem;
}
.fukidashi-box{
   position:relative;
    background:#fff;
    padding:.5vh .5vw;
    border:2px solid #FF526E;
    border-radius:1vh;
    -webkit-border-radius:1vh;
    -moz-border-radius:1vh;
}
.fukidashi-box:after,.fukidashi-box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    left:100%;
    top:50%;
}
.fukidashi-box:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-top: -10px;
    border-left-color:#FFFFFF;
}
.fukidashi-box:before{
    border-color: rgba(255, 82, 110, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:11px;
    border-right-width:11px;
    margin-top: -10px;
    margin-left: 2px;
    border-left-color:#FF526E;
}
.worries-txt{
    width: 70%;
}
.worries-pct{
    width: 30%;
}
.support-box{
    margin: 6vh 0 0;
    background: #fff;
    padding: 2vh 2vw;
    border-radius: 1vh;
    border: 3px solid #ff526e;
}
.support-box > h3{
    background: #ff526e;
    padding: .5vh 1vw;
    color: #fff;
    margin: 0 0 3vh;
    border-radius: 1vh;
}
.support-pct{
    width: 30%;
    float: right;
    margin-left: 1vw;
    text-align: right;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.worries-area > li {
    width: 100%;
}
.worries-box{
padding: 3vh 3vw;
}
}

/*---------------------------------------------------------
入会の流れ
---------------------------------------------------------*/
.flow-area{
    padding:6vh 0;
    background:#fffff2;
}

.flow-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2vh 0 4vh;
}

.flow-box-list {
  padding-left: 0;
}

.flow-box-list > li {
  list-style-type: none;
  display: flex;
      justify-content: space-around;
}

.flow-box-list > li:not(:last-child) {
  margin: 0 0 50px;
}

.flow-box-list > li .flow-box-icon {
  width: 70px;
  box-sizing: border-box;
  padding: 20px 10px 10px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  background: #00a73c;
  border-radius: 5px 5px 0 0;
  position: relative;
  line-height: 125%;
  margin: 0;
}
.flow-box-list > li .flow-box-icon::after {
  content: ' ';
  width: 0;
  height: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 20px solid #00a73c;
  position: absolute;
  bottom: -20px;
  left: 0;
}

.flow-box-list > li dl {
  padding: 0 0 0 2vw;
  width: calc(100% - 90px);
}

.flow-box-list > li dl dt {
  margin: 0 0 1vh;
  position: relative;
}
.flow-box-list > li dl dd {
  margin: 0;
}
.sectTit {
  justify-content: center;
    align-items: center;
  font-weight: 700;
  line-height: 1.3;
  display: flex;
    font-size: clamp(1.6rem, 2.5vw, 3rem);
}
.sectTit:before,
.sectTit:after {
  content: "";
  background: #ff526e;
  height: 3px;
    width: 60px;
}
 
.sectTit:before {
    margin-right: 5px;
  transform: rotate(55deg);
}
 
.sectTit:after {
    margin-left: 5px;
  transform: rotate(-55deg);
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.sectTit:before,
.sectTit:after {
    width: 40px;
}
}
/*---------------------------------------------------------
よくある質問
---------------------------------------------------------*/
.faq-area{
    padding:6vh 0;
}
/* アコーディオン */
.accordion__item {
    cursor: pointer;
}

/* アコーディオンのタイトル */
.accordion__title{
    position: relative;
    cursor: pointer;
    border-top: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding-right: 25px;
    line-height: 1.2;
    background: #fff;
    color: #000;
    font-weight: 700;
}
.accordion__title-last{
    border-bottom: 1px solid #ccc;
}

.q-number {
    height: 100%;
    min-height: 60px;
    background: #fff;
    color: #00a73c;
}
.q-number, .a-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 60px;
    margin-right: 10px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: clamp(3rem, 3vw, 3rem);
    font-weight: 600;
}

/* (+)アイコン */
.accordion__title::before,
.accordion__title::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-color: #00a73c;
    width: 16px;
    height: 4px;
    transition: all 0.3s;
}

.accordion__title::after {
  transform: rotate(90deg);
}
.ans-ttl {
    color: #13a075;
    display: inline-block;
    font-weight: 700;
}

/* アコーディオンのコンテンツ */
.accordion__content {
    display: none;
    cursor: pointer;
    border-top: 1px solid #ccc;
}
.faq-contents {
    display: flex;
    align-items: center;
    font-size: clamp(1.3rem, 1.6vw, 1.6rem);
    background: #fff;
}
.a-number {
    height: 100%;
    min-height: 60px;
    background: #fff;
    color: #ff526e;
}

.accordion__content.is-open {
  display: block;
}
.faq-contents-txt {
    padding: 1rem 1rem 1rem 0;
}

/* アコーディオン展開時の(-)アイコン */
.accordion__item.is-active .accordion__title::before {
  transform: rotate(180deg);
}

.accordion__item.is-active .accordion__title::after {
  transform: rotate(180deg);
  opacity: 0;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.q-number, .a-number {
    max-width: 50px;
}
}
/*---------------------------------------------------------
学院概要/HMGROUPサービス一覧
---------------------------------------------------------*/
.outline-area{
    padding:6vh 0;
}
.group-area{
    padding:0 0 6vh;
}

.hmgroup-box{
    padding: 3vh 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.hmgroup-box li{
width: calc(33.3333% - 60px / 3);
    padding: 1%;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.hmgroup-box li {
    width: calc(50% - 20px / 2);
}
}
/*---------------------------------------------------------
フッター
---------------------------------------------------------*/
footer{
    background:#007440;
    padding:1vh 0 70px;
}
footer,footer > a{
    color:#fff;
}
.footer-img{
    width: 100%;
    max-width: 340px;
}
.footer-list{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1vh 0 1vh;
}
.footer-list > li{
    padding: 0 3vw;
    border-right: 1px solid #fff;
}
.footer-list > li:last-child{
    border-right: transparent;
}
.footer-list > li > a{
    color:#fff;
}
.copy{
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    color:#fff;
}

/* fixarea */
#fotter-fix-area{
    position: fixed;
    display: flex;
    justify-content: center;
    background:rgba(255,255,255,0.7);
    bottom: 0;
    margin: 0 auto;
    width: 100%;
    z-index: 999;
    box-shadow: 5px 10px 20px rgb(0 0 0 / 45%);
}
#fotter-fix-area ul{
display: flex;
    flex-wrap: nowrap;
    justify-content: center;
            width: 100%;
    max-width: 1000px;
}
#fotter-fix-area ul li{
width: 31%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1rem 0.5rem;
    height: 55px;
}
#fotter-fix-area .fotter-fix-area-icon{

}
#fotter-fix-area .mail-siryo p,
#fotter-fix-area .line-siryo p,
#fotter-fix-area .online-mendan p,
#fotter-fix-area .contact-tel p,
.fotter-fix-area-icon i{
font-size: clamp(1.1rem, 2.5vw, 2rem);
font-weight: 700;
}
.fotter-fix-area-icon i{
margin-right: 0.5vw;
}
#fotter-fix-area .mail-siryo a,
#fotter-fix-area .line-siryo a,
#fotter-fix-area .online-mendan a,
#fotter-fix-area .contact-tel a{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.fotter-fix-area-txt{
font-size: clamp(1.3rem, 2.5vw, 2rem)!important;
text-shadow: 0 0 6px rgb(0, 0, 0, 0.2);
}
#fotter-fix-area .mail-siryo{
    background: #ed1d2d;
    color: #fff;
    border-right: 2px solid #fff;
}
#fotter-fix-area .mail-siryo > a{
    color: #000;
}
#fotter-fix-area .line-siryo{
background: #00B900;
    color: #fff;
}
#fotter-fix-area .online-mendan{
background: -moz-linear-gradient(50% 100% 90deg, #fe7100 0%, #ffc756 100%);
  background: -webkit-linear-gradient(90deg, #fe7100 0%, #ffc756 100%);
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0, #fe7100), color-stop(1, #ffc756));
  background: -o-linear-gradient(90deg, #fe7100 0%, #ffc756 100%);
  background: -ms-linear-gradient(90deg, #fe7100 0%, #ffc756 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#B30F1A', endColorstr='#ED1D2D' ,GradientType=0)";
  background: linear-gradient(0deg, #fe7100 0%, #ffc756 100%);
     color: #fff;
    border-right: 2px solid #fff;
}
#fotter-fix-area .contact-tel-number{
background: #fff;
    display: flex;
    flex-direction: column;
    color:#000;
}
#fotter-fix-area .contact-tel{
background: #007440;
color: #fff;
}
#fotter-fix-area .tel-number-txt{
    font-family: 'poppins';
    font-size: clamp(1.4rem, 2vw, 2.5rem);
    line-height: 1.1;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.footer-img{
    max-width: 300px;
}
#fotter-fix-area ul li {
    flex-direction: column;
    padding: 1rem 0.5rem;
    justify-content: flex-start;
}
#fotter-fix-area .mail-siryo p,
#fotter-fix-area .line-siryo p,
#fotter-fix-area .online-mendan p,
#fotter-fix-area .contact-tel p{
line-height: 1.2;
}
.fotter-fix-area-icon i{
margin-right: 0;
font-size: 2.25rem;
    margin-bottom: 5px;
}
}

/*---------------------------------------------------------
対象教室
---------------------------------------------------------*/
.search-class-area{
    margin: 3vh 0;
}
.search-class-ttl{
    background: #007440;
    color:#fff;
    padding:1.5vh 0;
}
.search-class-box{
    border: 1px solid #D0CFCD;
    border-width: 1px 1px 0px 1px; /* 上 右 下 左 */
}
.search-class-box th,.search-class-box td{
    padding:1vh 1vw;
    border: 1px solid #D0CFCD;
    border-width: 0px 1px 1px 0px; /* 上 右 下 左 */
}
.search-class-box th{
    background: #F6FAE9;
}
.search-class-box th:last-child,
.search-class-box td:last-child
{
        border-right: transparent;
}
.search-class-box td{
}
.class-name{
    font-size: clamp(1.6rem, 1.8vw, 1.8rem);
    font-weight:700;
    color:#007440;
}
.class-name:after {
    font-family: "Font Awesome 5 Free";
    content: "\f2d2";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    margin-left: 5px;
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.search-class-box{
    border: 1px solid #D0CFCD;
}
.search-class-box td {
    display: flex;
    border: transparent;
    padding: .5rem;
}
.box-line{
    border: 1px solid #D0CFCD !important;
    border-width: 0px 0px 1px 0px !important; /* 上 右 下 左 */
}
}