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

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 896px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.EN {font-family: 'Raleway', sans-serif;}
.mincho {font-family: 'Noto Serif JP', serif;}

.bgWH {background-color: #FFF;}
.bgBR {background-color: #D88D00;}
.bgBE {background-color: #FBF3E5;}
.bgGR {background-color: #4A8308;}
.bgGRY {background-color: #EEEEEE;}
.txtWH {color: #FFF;}
.txtBR {color: #D88D00;}
.txtGR {color: #4A8308;}
.txtPI {color: #F09DB4;}
.bBR {border-color: #BF9D63;}
.bDBL {border-color: #2F3B49;}

.clone-nav {position: fixed;top: 0;left: 0;z-index: 2; width: 100%; transition: .3s; transform: translateY(-100%);}
.is-show {transform: translateY(0);}
.clone-nav {text-align: center; width: 100%; background: #FFF;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratio1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratio2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratio3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratio4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

/* main {min-height: 2000px;} */
#header {position: relative; width: 100%; padding: 28px 0; background-image: url(../img/cmn/header-bg.png); background-position: center center; background-repeat: no-repeat; background-size: cover;}
#header .logo{max-width: 256px;}
#header h1 {padding: 10px;}
.logo {width: 536px;}
#header .logo a {padding: 33px 30px; background: #FFF; display: block;}
.menu:hover > a {background: #E1F4C4;}
.child_menu > li > a:hover {background: #FFF;}
.child_menu {width: 100%; left: 0; color: #222; background: #E1F4C4;}
.menu:hover .child_menu {visibility: visible;}
.child_menu a:hover {color: #222; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
#hanburger {display: none;}
.menu_button {width: 55px; height: 55px; position: fixed; top: 0; right: 0; background: #25B19E; z-index: 15;}
#hanburger:checked ~ .menu_button {top: 0;}
#hanburger:checked ~ .span2 {display: none;}
#hanburger:checked ~ .span1 {width: 34px; transform: rotate(45deg); top: 27px; right: 11px;}
#hanburger:checked ~ .span3 {width: 34px; transform: rotate(-45deg); top: 27px; right: 11px;}
.global_menu {visibility: hidden; width: 100%; height: 100%; position: fixed; top: 0; left: 0; color: #222; overflow-y: scroll; text-align: center; background: #FFF;}
#hanburger:checked ~ .global_menu {visibility: visible;}
.global_menu a {display: block; width: 100%; padding: 10px 15px; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.global_menu a:hover {background: #B9E278;}
.menu {font-size: 20px; line-height: 40px; font-weight: bold; white-space: nowrap; display: inline-block;}
.menu .pd {display: none;}
.menu:last-child {margin-right: 0px;}
.child_menu > li > a {padding: 10px 20px; text-align: left;}
#hanburger,.spOnly {display: none;}
@media screen and (min-width: 896px) {
  .menu_button {display: none;}
  .global_menu {position: inherit; padding: 0; color: #fff; visibility: visible; overflow-y: visible; height: auto; width: auto;}
  .menu:hover > a {background: #B9E278;}
  .child_menu {width: 100%; position: absolute; top: 0; left: 0; padding: 10px; color: #222; background: #B9E278; visibility: hidden; opacity: 0; transition: .5s top, .5s opacity; z-index: 10;}
  .menu:hover .child_menu {visibility: visible; top: 109px; opacity: 1;}
  .child_menu > li {display: inline-block;}
  .child_menu > li > ul > li a {padding: 10px; position: relative; padding: 10px;}
}
@media screen and (max-width: 896px) {
  #header .spOnly {display: block;}
  span.span1,span.span2,span.span3 {width: 29px; height: 1px; background-color: #FFF; position: absolute; right: 13px; transition: .3s; z-index: 100; position: fixed;}
  .span1 {top: 17px;}
  .span2 {top: 27px;}
  .span3 {top: 37px;}
  .menu {display: block;}
  .menu > a {padding: 10px 15px; text-align: left; border-bottom: 1px solid #CCC;}
  .menu > a span {margin-right: 10px; width: 30px!important;}
  .menu > a span img {width: 100%;}
  .global_menu {z-index: 10;}
  .global_menu a {border-top-left-radius: 0; border-top-right-radius: 0;}
  .child_menu > li > a,.child_menu > li > ul > li a {padding: 10px 15px; color: #222; text-align: left; border-bottom: 1px dotted #999;}
  .child_menu > li > ul > li a {padding: 15px 20px 15px 35px; position: relative;}
  .child_menu > li > ul > li:last-child a {border-bottom: 1px solid #CCC;}
  .child_menu > li > ul > li a::before {border-top: solid 1px #222; content: ''; left: 20px; position: absolute; top: 50%; width: 10px;}
  .menu .pd {display: inline-block; width: 100%; position: absolute; top: 0; left: 0; height: 100%;}
  .menu_wrap {display: none;}
  #hanburger:checked ~ * .menu_wrap {display: block; opacity: 1; min-height: 100vh; background: rgba(255,255,255,.8); /*position: fixed;*/ top: 0; z-index: 5;}
  #hanburger:checked ~ * .menu {max-height: inherit; overflow-y: visible; padding: 0; margin-left: 0; position: relative;}
  #hanburger:checked ~ * .child_menu {max-height: 0; overflow-y: hidden; visibility: hidden; text-align: left;}
  .menu .child_menu {border-top: 1px solid #DDD; position: relative; opacity: 1; top: 0; margin-left: auto; left: auto; width: auto;}
  .child_menu li {display: block;}
  .menu > label:hover {cursor: pointer; cursor: hand;}
  .menu input[type="checkbox"]:checked ~ .child_menu {max-height: inherit!important; overflow-y: visible; visibility: visible!important;}
  /*
  .angletoggle:before {content: "\f107";}
  #nav input[type="checkbox"]:checked ~ * .angletoggle:before {content: "\f106";}
  */
}

footer {background-color: #222;}
footer .container{padding: 20px 0;}
footer .gap{gap: 10px;}
footer .txt14{background-color: #F09DB4; padding: 8px 0;}
footer #fnavi ul {letter-spacing: -.4em; margin: 0 0 5px;}
footer #fnavi ul > li {margin: 0 20px 10px; letter-spacing: normal; display: inline-block; position:relative;}
footer #fnavi ul > li a:hover {text-decoration: underline;}
footer #fnavi ul > li::after {content: ""; display: inline-block; width: 1px; height: 20px; background-color: #999999; position: absolute; top: 0; right: -20px;}
footer #fnavi ul > li:first-child {margin: 0 20px 10px 0;}
footer #fnavi ul > li:last-child {margin: 0 0 10px 20px;}
footer #fnavi ul > li:last-child::after {background-color: #FFF; width: 0; right: 0;}
.footCopy {text-align: right;}
.footCopy small {font-size: 14px;}
#ftNavi {display: none;}
@media screen and (max-width: 950px) {
  footer .logo {width: 300px;}
}
@media screen and (max-width: 896px) {
	footer {margin-bottom: 50px; padding: 40px 0;}
  footer #fnavi {width: 100%;}
	#ftNavi {display: block; background: #4A8308; letter-spacing: -.4em; position: fixed; z-index: 5; bottom: 0; border-top: 1px solid #FFF; width: 100%;}
	#ftNavi ul {text-align: center; font-size: 10px; font-weight: bold;}
	#ftNavi li {letter-spacing: normal; display: inline-block; width: 25%;}
	#ftNavi li a {display: block; padding: 5px 0; color: #FFF; border-left: 1px solid #5CA20B; border-right: 1px solid #3C6C04;}
	#ftNavi li:first-child a {border-left: none;}
	#ftNavi li:last-child a {border-right: none;}
	#ftNavi li span {width: 24px; margin: 0 auto 5px; display: block;}
}
@media screen and (max-width: 530px) {
  footer #fnavi ul > li,footer #fnavi ul > li:last-child {margin: 0 10px 10px 10px;}
  footer #fnavi ul > li:first-child {margin: 0 0 10px 0; display: block;}
  footer #fnavi ul > li::after {right: -10px;}
  footer #fnavi ul > li:first-child::after {background-color: #FFF; width: 0; right: 0;}
}

.w1300 {width: 100%; max-width: 1332px; padding-left: 0; padding-right: 0;}
.w1500 {width: 100%; max-width: 1520px; padding-left: 0; padding-right: 0;}
.containerl {width: 100%; max-width: 1240px; padding-left: 0; padding-right: 0;}
.container {width: 100%; max-width: 1142px; padding-left: 0; padding-right: 0;}
.containers {width: calc(100% - 40px); max-width: 888px; padding-left: 0; padding-right: 0;}
.mlr,.containerl,.container,.containers {margin-left: auto; margin-right: auto;}
.mlr5 {margin-left: 5px; margin-right: 5px;}
.mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 20px; margin-right: 20px;}
.col1 {width: calc(16.6666% - 40px);}
.col2,.box3 {width: calc(33.3333% - 40px);}
.col3 {width: calc(50% - 40px);}
.col4 {width: calc(66.6666% - 40px);}
.col5 {width: calc(83.3333% - 40px);}
.col6 {width: calc(100% - 40px);}
.box4 {width: calc(25% - 30px); margin-left: 15px; margin-right: 15px;}
.w300 {max-width: 300px; width: 100%;}
.w100 {width: 100%;}
.w50 {width: 50%;}
.w50-5 {width: calc(50% - 5px);}
.w46 {width: calc(46% - 50px);}
.w54 {width: calc(54% - 50px);}
.w33 {width: calc(33% - 10px);}
.mr20{margin-right: 20px;}
@media screen and (max-width: 896px) {
  .containers {width: calc(100% - 30px);}
  .mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 15px; margin-right: 15px;}
  .mlr5 {margin-left: 0; margin-right: 0;}
  .col1 {width: calc(16.6666% - 30px);}
  .col2,.box3 {width: calc(33.3333% - 30px);}
  .col3 {width: calc(50% - 30px);}
  .col4 {width: calc(66.6666% - 30px);}
  .col5 {width: calc(83.3333% - 30px);}
  .col6 {width: calc(100% - 30px);}
  .w46 {width: calc(46% - 30px);}
  .w54 {width: calc(54% - 30px);}
  .w33 {width: calc(50% - 10px);}
  .w50-5{width: 100%;}

}
@media screen and (max-width: 568px) {
  .col1 {width: calc(33.3333% - 30px);}
  .col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {width: calc(100% - 30px);}
  .box4 {width: calc(50% - 7.5px); margin-left: 0; margin-right: 0;}
}

ul.dot {list-style: disc; margin-left: 1.5em;}
ul.num {list-style: decimal; margin-left: 1.5em;}

table {width: 100%;}
table tr:nth-child(odd) {background-color: #FFF;}
table tr:nth-child(even) {background-color: #EEEEEE;}
table th,table td {padding: 10px 20px; line-height: 1.7; text-align: center; border: 1px solid #CCCCCC;}
table.tblGR th {width: 25%; background: #4A8308; color: #FFF;}
table.tblGR2 th {width: 280px; background: #4A8308; color: #FFF;}
table.tblGR2 td {text-align: left; width: calc(100% - 250px);}
@media screen and (max-width: 568px) {
  table.tblGR th,table.tblGR td {padding: 10px 5px;}
  table.tblGR2 th,table.tblGR2 td {width: 100%; display: block;}
  table.tblGR2 td {border-top: none;}
}



/* ==================================
c- : 全ページ共通
i- : indexページ固有
p- : 特定のページ固有
utility : 接頭辞なし
================================== */




/* -------------------------------------------------- */
/*  共通項目 (c-)         */
/* -------------------------------------------------- */
.i-mv{overflow: hidden;}

.c-linkPinkBg{max-width: 356px; width: 100%; background-color: white; border-top: 1px solid #F09DB4; border-right: 1px solid #F09DB4; border-bottom: 5px solid #F09DB4; border-left: 5px solid #F09DB4; display: flex; align-items: center; justify-content: center; height: fit-content; padding: 26px; position: relative; transition: ease .3s;}
.c-linkPinkBg::before{content: ""; clip-path: polygon(0 0, 100% 50%, 0 100%); position: absolute; top: 50%; right: 15px; transform: translateY(-50%); background-color: #F09DB4; height: 14px; width: 12px; }
.c-linkPinkBg:hover{background-color: #F09DB4; color: white; border-top: 1px solid #efefef; border-right: 1px solid #efefef; border-bottom: 5px solid #efefef; border-left: 5px solid #efefef;}
.c-linkPinkBg:hover::before{background-color: white;}

.c-boxShdw{box-shadow: 3px 3px 6px rgba(0,0,0,.16);}
.c-enTitle{position: relative;}
.c-enTitle img{position: absolute;}
.c-uLine,.c-uLine-s{position: relative; width: fit-content; z-index: 0; line-height: 1.5; padding: 0!important;} 
.c-uLine::before{content: ""; bottom: 2px; position: absolute; height: 13px; width: 100%; background-color: #FFFDC3; z-index: -1; border-radius: 100px;}
.c-uLine-s::before{content: ""; bottom: 4px; position: absolute; height: 6px; width: 100%; background-color: #FFFDC3; z-index: -1; border-radius: 100px;}
/* -------------------------------------------------- */
/*  メインビジュアル (i-mv)         */
/* -------------------------------------------------- */
.i-mv{background-image: url(../img/top/01-01.png); padding-top: 175px; padding-bottom: 160px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.i-mv_logo{position: absolute;  max-width: 590px; left: 114px; top: 54px; width: 50%;}
.i-mv_mainImg{margin-left: calc(50% - 50vw); width: calc(50vw + 552px); overflow: hidden;}


/* -------------------------------------------------- */
/*  ESプロフェッショナルスクール (i-esSchool)         */
/* -------------------------------------------------- */
.i-esSchool{position: relative;}
.i-esSchool::before{position: absolute; content: "SKILL UP!!"; }
.i-esSchool__title{background-color: #222; color: white; margin-bottom: 20px; padding: 8px 40px;}
.i-esSchool__subtitle .txt50{position: relative;}
.i-esSchool__subtitle .txt50::before{width: 300px; height: 120px; top: -85px; left: -100px; background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; content: ""; background-image: url(../img/top/02-01.svg);}
.i-esSchool__info {border-top: 1px solid #707070; padding-bottom: 24px;}
.i-esSchool__info__ttl {margin-bottom: 15px; max-width: 176px; width: 100%; background-color: #222222; padding: 5px 24px; position: relative;}
.i-esSchool__info__ttl::before {  content: ""; position: absolute; top: 0; right: -30px; width: 30px; height: 100%; background: inherit; /* 親要素と同じ背景色を継承 */ transform: skewX(-45deg); /* skewで斜めに */ transform-origin: top right;}
.i-esSchool__info__cnt {position: relative; padding-left: 24px;}
.i-esSchool__info__cnt.--m {width: calc(100% - 340px);}
.i-esSchool__info__cnt.alCent {gap: 0 20px;}
.i-esSchool__info__cnt__img img {position: absolute; top: 50%; transform: translateY(-50%); z-index: 0;}
.i-esSchool__info__cnt__img.--l img {max-width: 263px; z-index: 0;}
.i-esSchool__info__cnt__img.--m img {max-width: 188px; z-index: -1; }
.i-esSchool__info__cnt__img.--sqr img {max-width: 288px; right: 20px; top: 20px; transform: unset;}
.i-esSchool__info .child {width: calc(50% - 90px); margin-right: 45px; margin-left: 45px;}
/* .i-esSchool__info .child {width: calc(50%);} */
.i-esSchool__info .child_ttl {margin-bottom: 10px;}
.i-esSchool__info .child_txt {margin-bottom: 10px;}

.i-esSchool__lessonList {display: flex; margin-bottom: 20px; gap: 4px 20px;}
.i-esSchool__lessonList li {width: fit-content;}

/* -------------------------------------------------- */
/*  スキルアップ講習 (i-skillUp)                      */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/*  トータルスタイリストの生産性 (i-productivity)     */
/* -------------------------------------------------- */
.i-productivity__subtitle{position: relative; width: fit-content; margin-right: auto; margin-left: auto;}
.i-productivity__subtitle::after,.i-productivity__subtitle::before{position: absolute; content: ""; background-image: url(../img/top/04-09.svg); height: 59px; width: 59px; background-position: center; background-repeat: no-repeat; background-size: contain; top: 50%;}
.i-productivity__subtitle::before{left: -60px; transform: translateY(-50%);}
.i-productivity__subtitle::after{right: -60px; transform: translateY(-50%) rotate(45deg);}
.i-productivity__card__graph {margin-bottom: 24px;}
.i-productivity__card__inner {padding: 0 20px;}
.i-productivity__cardHeading {background-color: #222; padding: 14px;}
.i-productivity__cardSales {display: flex; justify-content: space-between; align-items: baseline; padding: 0 14px;}
.i-productivity__cardSales strong {display: flex;}
.i-productivity__graph {padding: 0; position: relative;}
.i-productivity__graph__img--exp {position: absolute; right: -14px; top: 3px;}
.i-productivity__graph__img--exp--right {position: absolute; right: -40px; top: -3px;}
.i-productivity__monthlySale {background-color: #F09DB4; padding: 6px 16px; border-radius: 6px; margin-bottom: 12px;}
.i-productivity__monthlySale p {border-bottom: 1px solid white; margin-bottom: 3px;}
.i-productivity__staffInfo {display: flex; padding-bottom: 30px;}
.i-productivity__staffInfo__img {max-width: 150px;}
.i-productivity__staffInfo__txt {width: calc(100% - 157px); display: flex; flex-direction: column; justify-content: flex-start;}
.i-productivity__staffRole--exp {background-color: #F09DB4;}
.i-productivity__staffStore {margin-bottom: 6px;}
.i-productivity__introResult {padding: 10px 30px; border-radius: 6px;}
.i-productivity__introTitle {position: relative; margin-bottom: 10px;}
.i-productivity__introTitle span {width: fit-content; padding: 0 15px; margin-right: auto; margin-left: auto; position: relative; background-color: white;}
.i-productivity__introTitle::before {position: absolute; content: ""; width: 100%; background-color: #F09DB4; height: 1px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.i-productivity__introList li {padding-left: 30px; position: relative; width: fit-content;}
.i-productivity__introList li:nth-child(2n-1){width: calc(570px);}
.i-productivity__introList li::before{position: absolute; height: 20px; content: ""; top: 26px; left: 0; width: 18px; height: 21px; background-color: #222; clip-path: polygon(0 0, 100% 50%, 0 100%);}
.i-productivity__introList li span {padding: 0 10px;}

/* -------------------------------------------------- */
/*  スターターキット (i-starterKit)                   */
/* -------------------------------------------------- */
/* .i-starterKit {border-radius: 6px;} */
.i-starterKit__inner {border-radius: 6px; border-top: 15px solid #F09DB4; padding: 20px 30px; position: relative;}
.i-starterKit__inner::before {content: ""; position: absolute; width: 338px; height: 121px; background-image: url(../img/top/05-01.svg); transform: translateY(-65%); top: 0; left: -40px; background-repeat: no-repeat; background-position: center; background-size: contain;}
.i-starterKit__itemHeading__wrap{padding: 6px 10px;}
.i-starterKit__item--A .i-starterKit__itemHeading__wrap {background-color: #838383;}
.i-starterKit__item--B .i-starterKit__itemHeading__wrap {background-color: #505050;}
.i-starterKit__item--C .i-starterKit__itemHeading__wrap {background-color: #222222;}
.i-starterKit__item--A .i-starterKit__itemHeading {margin-right: 120px;}

.i-starterKit__title {position: relative;}
.i-starterKit__title::before {position: absolute;}
.i-starterKit__price {background-color: white; border-radius: 6px; padding: 5px 6px;}
.i-starterKit__price .triangle{position: relative; margin-right: 35px;}
.i-starterKit__price .triangle::before{position: absolute; content: ""; background-color: #222; clip-path: polygon(0 0, 100% 50%, 0 100%); height: 27px; width: 17px; top: 50%; right: -26px; transform: translateY(-50%);}
.i-starterKit__price .triangle--small{position: relative; margin-right: 20px;}
.i-starterKit__price .triangle--small::before{position: absolute; content: ""; background-color: #222; clip-path: polygon(0 0, 100% 50%, 0 100%); height: 20px; width: 13px; top: 50%; right: -16px; transform: translateY(-50%);}
.i-starterKit__item--A .i-starterKit__image {width: 336px; padding-top: 6px;}
.i-starterKit__item--A .i-starterKit__list {width: calc(100% - 356px);}
.i-starterKit__txt {background-color: #838383; color: white; padding: 7px 7px; border-radius: 4px; width: 96px; position: relative; line-height: 1.5;}
.i-starterKit__txt + .cross{position: relative;width: 26px; height: 26px;}
.i-starterKit__txt + .cross::before,.i-starterKit__txt + .cross::after {position: absolute; content: ""; background-color: #707070; height: 2px; width: 26px; top: 50%; left: 50%;}
.i-starterKit__txt + .cross::before{transform: translate(-50%,-50%);}
.i-starterKit__txt + .cross::after{transform: translate(-50%,-50%) rotate(90deg);}
.i-starterKit__desc {width: calc(100% - 154px);}

/* -------------------------------------------------- */
/*  受講料金 (i-schoolPrice)                           */
/* -------------------------------------------------- */
.i-schoolPrice__content {border-top: 16px solid #F09DB4; border-radius: 6px; padding: 30px 0; position: relative;}
.i-schoolPrice__content::before {content: ""; position: absolute; width: 130px; height: 103px; background-image: url(../img/top/06-01.svg); transform: translateY(-65%); top: 0; left: -20px; background-repeat: no-repeat; background-position: center; background-size: contain;}

.i-schoolPrice__courseName {margin-right: auto; margin-left: auto;}
.i-schoolPrice__amount {background-color: #F09DB4; width: fit-content; margin-right: auto; margin-left: auto; padding: 15px 40px; line-height: 1.2; border-bottom-right-radius: 30px; border-top-left-radius: 30px;}

/* -------------------------------------------------- */
/*  講習風景 (i-lessonScene)                           */
/* -------------------------------------------------- */
.i-lessonScene {position: relative; background: linear-gradient(to left,#EF9FB5,#F6C4C0); padding: 60px 0;}
.i-lessonScene__title .container{display: flex;}
.i-lessonScene__title .container .col6{z-index: 0; position: relative;}
.i-lessonScene__title .container .col6::before{position: absolute; content: ""; background-color: #222; z-index: -1; height: calc(100% + 20px); width: calc(100% + 60px); right: 30%; top: 50%; transform: translateY(-50%);}
.i-lessonScene__images {position: relative; z-index: 0; min-height: 375px;}
.i-lessonScene__image {position: absolute;}
.i-lessonScene__image::before {position: absolute; content: ""; border: 3px solid #fff; height: 100%; width: calc(100%);}
.i-lessonScene__image.--l {width: 56%; max-width: 567px; left: 0; z-index: 1; height: 100%; object-fit: contain;}
.i-lessonScene__image.--m {width: 45%; max-width: 503px; left: 587px; bottom: 0px; z-index: 1;}
.i-lessonScene__image.--s {width: 40%; max-width: 464px; top: -120px; right: 0; z-index: 0;}
.i-lessonScene__image.--l::before {top: 20px; right: 20px;}
.i-lessonScene__image.--m::before { top: 20px; right: 20px;}
.i-lessonScene__image.--s::before { top: 20px; right: 20px;}

/* -------------------------------------------------- */
/*  追加講座 (i-cta)                     */
/* -------------------------------------------------- */
.i-cta {background-image: url(../img/top/08-01.png); background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 90px 0;}


/* -------------------------------------------------- */
/*  追加講座 (i-additionalCourses)                     */
/* -------------------------------------------------- */
.i-additionalCourses__card {padding: 70px 20px 34px; position: relative; background-color: #FFEAEC;}
.i-additionalCourses__card .mHeight{min-height: 320px; display: flex; justify-content: space-between; flex-direction: column;}
.i-additionalCourses__dayBadge img {position: absolute; width: calc(100% - 66px); top: 0; left: 50%; transform: translate(-50%,-50%);}
.i-additionalCourses__courseName {min-height: 80px; margin-bottom: 6px; line-height: 1.2;}
.i-additionalCourses__content {width: calc(100% - 60px); margin-right: auto; margin-left: auto;}
.i-additionalCourses__contentTitle {background-color: #222;width: 100%; padding: 7px ;}
.i-additionalCourses__list { gap: 3px 15px;}
.i-additionalCourses__list li {width: fit-content;}

/* -------------------------------------------------- */
/*  オーナーメッセージ (i-ownerMessage)               */
/* -------------------------------------------------- */
.i-ownerMessage {background-image: url(../img/top/10-06.png); background-position: center center; background-size: cover; background-repeat: no-repeat; overflow-x: hidden; overflow-y: visible;  position: relative;}
.i-ownerMessage__inner {padding: 100px 0; width: calc(50% + 50px);}
.i-ownerMessage__textBlock p{line-height: 2.2;}
.i-ownerMessage__textBlock {position: relative; z-index: 0; padding: 55px 20px;}
.i-ownerMessage__textBlock::before {position: absolute; content: ""; background-color: white; top: 0; right: 0; width: 100vw; height: 100%; z-index: -1; box-shadow: 3px 3px 6px rgba(0, 0, 0, .16);}
.i-ownerMessage__images { width: calc(50% - 50px); padding: 90px 0; z-index: 0; position: relative;}
.i-ownerMessage__imageItem{ margin-bottom: 15px;}
/* .i-ownerMessage__imageItem img {position: absolute;} */
.i-ownerMessage__imageItem--01 {display: flex; justify-content: flex-end; margin-bottom: 15px;}
.i-ownerMessage__imageItem--04 {display: flex; justify-content: flex-start;}
.i-ownerMessage__imageItem--01 img {margin-left: -20px;}
.i-ownerMessage__imageItem--02 img {margin-left: -20px;}
.i-ownerMessage__imageItem--03 img {margin-left: 40px;}
.i-ownerMessage__imageItem--04 img {margin-left: -20px;}
.i-ownerMessage__title {position: relative; z-index: 1;}
.i-ownerMessage__title img {position: absolute; left: 0; top: 0; transform: translateY(-70%); z-index: 2;}



@media screen and (max-width: 896px) {
  .i-mv{padding-top: 100px; padding-bottom: 60px;}
  .i-mv_logo{left: 20px; max-width: 200px;}
  .i-esSchool__info__cnt{padding-left: 0;}
  .i-esSchool__info__cnt__img.--l img{max-width: 128px;}
  .i-esSchool__info__cnt__img.--m img{max-width: 120px;}
  .i-esSchool__info__cnt__img.--sqr img{max-width: 200px;}
  .i-esSchool__info__cnt.--m{width: calc(100% - 240px);}
  .i-productivity__cardSales{justify-content: flex-start; gap: 0 10px;}
  .i-productivity__introList li::before{height: 16px; width: 14px; top: 12px;}
  .i-starterKit__inner::before{width: 180px; height: 78px; left: -5px;}
  .i-starterKit__item--B,.i-starterKit__item--C{margin-bottom: 30px;}
  .i-schoolPrice__content::before{width: 74px; height: 50px; left: -10px;}
  .i-lessonScene__image.--s{top: -76px;}
  .i-lessonScene__image.--m{left: unset; right: 0; bottom: 0; top: unset;}
  .i-lessonScene__image.--m{left: unset; right: 0; bottom: 0; top: unset;}
  .i-lessonScene__images{min-height: 300px;}

  .i-additionalCourses__dayBadge img{width: calc(100% - 190px);}

  footer{margin-bottom: 0; padding: 40px 0 0;}


}

@media screen and (max-width: 578px) {
  .c-uLine::before,.c-uLine-s::before{display: none;} 
  .w33{width: 100%;}
  .i-mv{}
  .i-mv_logo{top: 22px;}
  .i-esSchool__info__cnt{gap: 20px 10px; padding-right: 15px; padding-left: 15px; }
  .i-esSchool__info__cnt.--img{padding-bottom: 40px;}
  .i-esSchool__info.--img{padding-bottom: 60px;}
  .i-esSchool__info__cnt__img.--l img,.i-esSchool__info__cnt__img.--m img{max-width: 75px; top:106%;}
  .i-esSchool__info__cnt.alCent{gap: 20px 10px;}
  .i-esSchool__info .child{width: calc(100%);}
  .i-esSchool__info__cnt__img.--l img, .i-esSchool__info__cnt__img.--m img{max-width: 96px; top: 75%; }
  .i-esSchool__info__cnt .c-uLine{}
  .i-esSchool__info__cnt.--m{width: 100%;}
  
  .i-starterKit__inner{padding: 10px 15px;}
  .i-starterKit__item .i-starterKit__itemHeading__wrap{justify-content: center;}
  .i-starterKit__price{width: 100%; justify-content: center;}
  .i-starterKit__item .flexNw{flex-wrap: wrap;}
  .i-starterKit__item--B, .i-starterKit__item--C{margin-bottom: 20px;}
  .i-starterKit__item--A .i-starterKit__image{width: 100%;}
  .i-starterKit__item--A .i-starterKit__list{width: 100%;}
  .i-starterKit__itemHeading{margin-bottom: 10px;}
  .i-starterKit__itemHeading br{display: none;}
  .i-starterKit__item--A .i-starterKit__itemHeading{ margin-right: 0;}
  .i-lessonScene__images{min-height: 400px;}
  .i-lessonScene__image.--l{width: 80%; height: auto; top: 40px;}
  .i-lessonScene__image.--m{width: 80%; top: 210px;}
  .i-lessonScene__image.--s{width: 60%;}
  .i-additionalCourses__card{margin-bottom: 40px; padding: 54px 15px 24px;}
  .i-additionalCourses__card .mHeight{min-height: unset;}
  .i-ownerMessage__inner{width: calc(80% + 50px); padding: 80px 0 30px;}
  .i-ownerMessage__images{padding: 0 0 40px; width: calc(90%); margin-left: auto;}
  .i-esSchool__info__cnt__img.--sqr img{display: none;}
  .i-productivity__subtitle::after, .i-productivity__subtitle::before{display: none;}
  .i-productivity__graph__img--exp--right{right: -19px; top: -28px;}






}













/* ================== form ================== */

.contact-header h2{width: fit-content; min-width: 496px; border-bottom: 1px solid #F09DB4; padding-bottom: 10px;}
.contact-header ul{display: flex; align-items: center;}
.contact-header ul li{position: relative; font-size: 16px;}
.contact-header ul li a{text-decoration: underline;}
.contact-header ul li:not(:first-child):before{position: absolute; content: ""; height: 8px; width: 8px; background-image: url(../img/cmn/ico-arrow.svg); background-position: center; background-repeat: no-repeat; background-size: contain; top: 50%; transform: translateY(-50%); left: -14px;}
.contact-header ul li:not(:last-child){margin-right: 24px;}
@media screen and (max-width: 896px) {
  .contact-header h2{width: 100%; min-width: unset; border-bottom: 1px solid #F09DB4; padding-bottom: 10px;}
}

.c-form .title{width: calc(100% - 72px); position: relative; z-index: 0;} 
.c-form dt::before{position: absolute; content: ""; width: 240px; background-color: #222222; height: 1px; bottom: -21px; z-index: 1;} 
.c-form dd::before{position: absolute; content: ""; width: 100%; background-color: #F09DB4; height: 1px; bottom: -21px; right: 0; z-index: 0;} 
.c-form_item { padding: 20px 0; }
/* .c-form_item dd{position: relative;} */

.c-form_item .error{width: 100%;}

/* .c-form_item:not(:nth-last-child(2)) { border-bsottom: 1px solid #F09DB4; } */

.c-form_item .annotation { width: 66.6666%; margin-left: auto; display: block; }

.c-form_item .mlU { margin-left: unset; width: 100% !important; }
.c-submit .flex{gap: 20px;}
.c-submit .btn input,.c-submit .btn button,.c-submit .btn a{min-width: 200px; cursor: pointer; background-color: #F09DB4; color: white; font-size: 18px; font-weight: 700; padding: 10px 30px; border-radius: 8px;}
.c-submit.--confirm .--back button{background-color: #7d7d7d; color: #fff;}

.c-form.--confirm dd,.c-form_item.--confirm dl{align-items: center;}
.c-form_item.--address dt{width: 116px;}
.c-form_item.--address dd{width: calc(100% - 146px);}
.c-form_item.--address dd {flex-direction: column;}
.c-form_item.--address dd .flex {width: 100%; gap: 30px; flex-wrap: nowrap;}
.c-form_item.--address dd span {white-space: nowrap; align-items: center; font-size: 16px;}
.c-form_item.--address dd input{margin-left: 10px;}
.c-form_item.--address dd .w33 input{width: 60%;}
.c-form_item.--address dd .w66 input{width: 100%;}
.c-form_item.--address dd .w100{width: 100%;}
.c-form_item.--address dd .w66{width: calc(66.6666% - 15px);}
.c-form_item.--address dd .w33{width: calc(333.3333 - 15px);}
.c-form_item.--address dd .w100,.c-form_item.--address dd .w33,.c-form_item.--address dd .w66 {}
.c-form_item.--address dd .w100,.c-form_item.--address dd .w33,.c-form_item.--address dd .w66 {}
.c-form_item.--address dd .w100 span,.c-form_item.--address dd .w33 span,.c-form_item.--address dd .w66 span {display: flex;}

.c-form_item .w100 > span { width: 100%; }

#privacy-check {display: inline; -webkit-appearance: auto; appearance: auto;}


/* .c-form_item .w100 .wpcf7-radio { display: flex; flex-direction: column; } */

.c-form_item .w100 .wpcf7-radio .wpcf7-list-item:not(:last-child) { margin-bottom: 15px; }

.c-form_item .w100 .wpcf7-radio .wpcf7-list-item-label { width: 100%; }

.c-form_item .w50 { justify-content: space-between; }

.c-form_item .w50 > span { width: calc(50% - 10px); }

.c-form_item .w50.select > div { width: calc(75% - 10px); }

.c-form_item .w15 { font-weight: 700; }

.c-form_item .w15 > span { width: calc(15%); justify-content: flex-start; margin-right: 10px; }

.c-form_item .tel span { width: calc(24% - 16.6666px); position: relative; }

.c-form_item .tel span:not(:last-child) { margin-right: 25px; }

.c-form_item .tel span:not(:last-child)::before { content: ''; font-size: 14px; right: -14.5px; position: absolute; top: 50%; transform: translateY(-50%); background-color: #222222; width: 5px; height: 1px; }

.c-form_item .select > span, .c-form_item .select > div { position: relative; }

.c-form_item .select > span::before, .c-form_item .select > div::before { position: absolute; top: 50%; transform: translateY(-50%); right: 15px; position: absolute; content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 7.5px 0 7.5px; border-color: #222222 transparent transparent transparent; z-index: 1; }

.c-form_item .firstTriNo > div:first-child::before { display: none; }

.c-form_item .free_text { margin-top: 10px; width: 61.8%; }

.c-form_item .wpcf7-radio { display: flex; align-items: center;}

.c-form_item .wpcf7-radio .wpcf7-list-item { display: flex; align-items: center; justify-content: flex-start; cursor: pointer; }

.c-form_item .wpcf7-radio .wpcf7-list-item-label { font-size: 16px; font-weight: 400; position: relative; display: flex; align-items: center; width: 60px; margin-right: 30px; padding-left: 36px; }

.c-form_item .wpcf7-radio .wpcf7-list-item-label::before { background-color: white; border: 1px solid #666; width: 26px; height: 26px; left: 0px; }

.c-form_item .wpcf7-radio .wpcf7-list-item-label::after { width: 14px; height: 14px; left: 6px; }

.c-form_item .wpcf7-radio .wpcf7-list-item-label::before, .c-form_item .wpcf7-radio .wpcf7-list-item-label::after { content: ''; border-radius: 13px; /*position:absolute; top: 2px;*/ position: absolute; top: 50%; transform: translateY(-50%); display: block; }

.c-form_item .wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label::after { background-color: #000; }

.c-form_item input.wpcf7-text, .c-form_item .wpcf7-textarea, .c-form_item .wpcf7-select, .c-form_item .wpcf7-free-text { font-size: 16px; border-radius: 5px; padding: 7px 15px; border: 1px solid #CCC; background-color: white;}

.c-form_item .wpcf7-select { width: 100%; height: 40px; }

.c-form_btn { margin-top: 40px; margin-right: auto; margin-left: auto; width: 350px; box-shadow: #000 2px 2px 3px; height: 70px; background-color: #E6181A; border-radius: 5px; position: relative; border: 2px solid white; display: flex; align-items: center; justify-content: center; }

.c-form_btn input { border-radius: 5px; cursor: pointer; width: 100%; font-weight: 700; font-size: 30px; color: white !important; background-color: #E6181A; }

.c-form_btn .ajax-loader { position: absolute; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; }

.c-form_btn .wpcf7-spinner { position: absolute; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; }

.c-form_btn.navy { background-color: #043265; }

.c-form_btn.navy input { background-color: #043265; }

.c-form_btn.ReqLink { background-color: #043265; }

.c-form_btn.ReqLink a { height: 100%; width: 100%; color: white; font-weight: 700; font-size: 30px; display: flex; align-items: center; justify-content: center; }

.c-form dl { width: 100%; position: relative; display: flex; justify-content: space-between; }

.c-form dl dt, .c-form dl dd { display: flex; align-items: flex-start; }

.c-form dl dt { height: 40px; display: flex; align-items: center; width: calc(33.3333% - 40px); justify-content: space-between; }

/* .c-form dl dt p { width: calc(100% - 7px); text-align: justify; } */

.c-form dl dd { width: 66.6666%; }

.c-form dl.checkbox { flex-direction: column; /* checkbox カスタマイズ */ }

.c-form dl.checkbox dt { justify-content: flex-start; width: 100%; }

.c-form dl.checkbox dt p { margin-right: 30px; width: fit-content; width: -moz-fit-content; }

.c-form dl.checkbox dd { margin-top: 10px; width: 100%; }

.c-form dl.checkbox .wpcf7-form-control { display: flex; align-items: center; flex-wrap: wrap; }

.c-form dl.checkbox .wpcf7-list-item { margin-top: 10px; width: fit-content; width: -moz-fit-content; }

.c-form dl.checkbox .wpcf7-list-item label { display: flex; align-items: center; width: fit-content; width: -moz-fit-content; }

.c-form dl.checkbox .wpcf7-list-item.has-free-text { display: flex; }

.c-form dl.checkbox .wpcf7-list-item.has-free-text .wpcf7-list-item-label { width: max-content; }

.c-form dl.checkbox span.wpcf7-list-item-label { padding-left: 36px; position: relative; margin-right: 30px; font-size: 16px; font-weight: 700; }

.c-form dl.checkbox span.wpcf7-list-item-label::before { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 26px; height: 26px; border: 1px solid #666666; border-radius: 5px; }

.c-form dl.checkbox input[type="checkbox"] { /* checked の 挙動 */ }

.c-form dl.checkbox input[type="checkbox"]:checked + span.wpcf7-list-item-label { color: #E6181A; }

.c-form dl.checkbox input[type="checkbox"]:checked + span.wpcf7-list-item-label::after { content: ""; display: block; position: absolute; top: -5px; left: 9px; width: 13px; height: 24px; transform: rotate(40deg); border-bottom: 4px solid #E6181A; border-right: 4px solid #E6181A; }

.c-form dl.radio .w50 { display: flex; align-items: center; }

.c-form dl.column { flex-direction: column; }

.c-form dl.column dt { width: fit-content; width: -moz-fit-content; justify-content: flex-start; }

.c-form dl.column dt p { width: max-content; }

.c-form dl.column dt .must { margin-left: 30px; }

.c-form dl.column dd { margin-top: 10px; }

.c-form dl.column dd span { width: 100%; }

.c-form dl.column dd span textarea { padding: 15px; height: 200px; }

.c-form dl.column.textarea dd { width: 100%; }

.c-form dl.column.text dd { width: calc(15% + 20px); min-width: 142px; align-items: center; }

.c-form dl.column.radio dd .wpcf7-radio { width: fit-content; width: -moz-fit-content; }

.c-form dl.column.radio .w100 { width: 100%; }

.c-form dl.column.radio .w100 .wpcf7-list-item-label { width: unset; }

.c-form dl.column.radio .wpcf7-list-item-label { width: max-content; }

.c-form .branch { flex-direction: column; }

.c-form .branch > div { width: 80%; }

.c-form .branch > div.wpcf7cf-hidden { display: none; }

.c-form .branch > div:not(:first-child) { width: 100% !important; }

.c-form .branch > div span.wpcf7-checkbox { margin-top: 20px; display: flex; flex-wrap: wrap; }

.c-form .branch > div span.wpcf7-checkbox .wpcf7-list-item { margin-bottom: 10px; }

.c-form .branch > div span.wpcf7-checkbox span.wpcf7-list-item-label { padding-left: 36px; position: relative; margin-right: 30px; font-size: 16px; font-weight: 700; }

.c-form .branch > div span.wpcf7-checkbox span.wpcf7-list-item-label::before { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 26px; height: 26px; border: 1px solid #666666; border-radius: 5px; }

.c-form .branch > div span.wpcf7-checkbox input[type="checkbox"] { /* checked の 挙動 */ }

.c-form .branch > div span.wpcf7-checkbox input[type="checkbox"]:checked + span.wpcf7-list-item-label { color: #E6181A; }

.c-form .branch > div span.wpcf7-checkbox input[type="checkbox"]:checked + span.wpcf7-list-item-label::after { content: ""; display: block; position: absolute; top: -10px; left: 9px; width: 13px; height: 24px; transform: rotate(40deg); border-bottom: 4px solid #E6181A; border-right: 4px solid #E6181A; }

.c-form .must { background-color: #CC0000; letter-spacing: 2px; color: white; font-weight: 700; font-size: 12px; padding: 1px 12px; border-radius: 3px; display: flex; align-items: center; }

@media screen and (max-width: 896px) {
  .c-form_item.--address dd{width: 100%;}
  .c-form_item .wpcf7-select,.c-form_item .w50{width: 100%;}
  .c-form_item.--address dd .flex{flex-direction: column;}
  .c-form_item.--address dd .w100, .c-form_item.--address dd .w33, .c-form_item.--address dd .w66{width: 100%;}
  .c-form_item.--address dd .w33 input,.c-form_item.--address dd .w50 input,.c-form_item.--address dd .w100 input{width: 100%;}
  .c-form_item .w50 > span{width: 100%;}
  .c-form dd::before{position: absolute; content: ""; width: 100%; background-color: #F09DB4; height: 1px; bottom: -16px; right: 0; z-index: 0;} 
  .c-form dt::before{position: absolute; content: ""; width: 90px; background-color: #222222; height: 1px; bottom: -16px; z-index: 1;} 

}

@media screen and (max-width: 568px) { .c-form_item { padding: 20px 0 10px; }
  .c-form_item input::placeholder { font-size: 14px; }
  .c-form_item:not(:last-child) { border-bottom: 1px solid #ccc; }
  .c-form_item .annotation { width: fit-content; width: -moz-fit-content; margin-top: 5px; }
  .c-form_item .w50 { justify-content: space-between; }
  /* .c-form_item .w50 > span { width: calc(50% - 10px); } */
  .c-form_item .w50.select > div { width: calc(100% - 0px); }
  .c-form_item .tel > span { width: calc(33.3333% - 5px); }
  .c-form_item .select > span { width: 100%; }
  .c-form_item .free_text { width: 100%; }
  .c-form dl { flex-direction: column; margin-bottom: 5px; }
  .c-form dl dt { width: 100%; justify-content: flex-start; margin-bottom: 8px; }
  .c-form dl dt p { margin-right: 10px; }
  .c-form dl dd { width: 100%; }
  .c-form dl.checkbox span.wpcf7-list-item-label { padding-left: 28px; margin-right: 30px; font-size: 14px; }
  .c-form dl.checkbox span.wpcf7-list-item-label::before { width: 20px; height: 20px; }
  .c-form dl.checkbox input[type="checkbox"] { /* checked の 挙動 */ }
  .c-form dl.checkbox input[type="checkbox"]:checked + span.wpcf7-list-item-label::after { top: -4px; left: 6px; width: 12px; height: 20px; border-bottom: 4px solid #E6181A; border-right: 4px solid #E6181A; }
  .c-form dl.column dd { margin-top: 0px; }
  .c-form_btn { margin-top: 20px; width: 100%; height: 50px; }
  .c-form_btn input, .c-form_btn a { font-size: 18px !important; } 
}



.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease; 
  /* ↑フェードと移動に0.8秒かける */
}

.fade-in.is-active {
  opacity: 1;
  transform: translateY(0);
}