body.page_mebae-lp {
  color: #141515;
}
/*--------------------------------------------------------------
# ヘッダー
--------------------------------------------------------------*/
.page_mebae-lp header {
  background: transparent;
}
.lp_nav {
  display: none;
}
.hamburger {
  & summary {
    background: #FF7237;
    &::before,&::after {
      background: #FF7237;
    }
  }
  .sp_nav_list {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100vw;
    height: 100svh;
    padding: 5rem 0.5em;
    background: #FFFFEE;
    transition: all 0.6s;
    position: absolute;
    top: 0;
    right: 0;

    & li {
      transition: .4s all;
      & a {
        display: flex;
        color: var(--fc-base);
        text-decoration :none;
        justify-content: center;
        align-items: center;
        padding: .7em;
        &::after {
          display: block;
          content: "";
          width: 1em;
          height: 1em;
          margin-left: 1em;
          background-color: #FF7237;
          mask: url(/assets/img/common/icon_arrow.svg) no-repeat center / contain;
          -webkit-mask: url(/assets/img/common/icon_arrow.svg) no-repeat center / contain;
        }
      }
      .btn_wrap {
        max-width: 23rem;
        margin: 0 auto;
        .btn {
          color: #FFF;
          min-width: auto;
          background: #FF7237;
          border-color: #FF7237;
        }
      }
    }
  }
}

@media (min-width:768px) {
  .lp_nav{
    display: block;
    .nav_list {
      display: flex;
      gap: 0 2em;
      & a {
        color: #FFF;
      }
    }
  }
}

header.is-scrolled {
  background: rgba(255,255,255,0.6);
  .lp_nav li a {
    color: #141515;
  }
}
/*--------------------------------------------------------------
# 共通
--------------------------------------------------------------*/
.lp_section_title {
  font-size: clamp( 2rem, calc( 1.1428571428571429px + 2.380952380952381vw ), 4rem );
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 2em;
  &::before {
    display: block;
    content: attr(data-title);
    color: #FF7237;
    font-size: clamp( 1.4rem, calc( 1.3142857142857142rem + 0.2380952380952381vw ), 1.6rem );
    text-align: center;
    margin-bottom: 1em;
  }
  &::after {
    display: block;
    content: "";
    width: min(100%,50rem);
    aspect-ratio: 500 / 30;
    margin: 2rem auto 0;
    background: url(/assets/img/mebae-lp/section_title_border.png) no-repeat center / contain;
  }
}
.block_title {
  margin-bottom: 1em;
}
iframe {
  max-width: 100%;
}
@media (min-width:768px) {
  section {
    padding: 10rem 0;
  }
}
/*--------------------------------------------------------------
# メインビジュアル
--------------------------------------------------------------*/
main {
  padding-top: 0;
  background: #FFFFEE;
}
#lp_mv {
  position: relative;
  & img {
    width: 100%;
    max-height: 70rem;
    object-fit: cover;
    object-position: center;
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem;
    @media (min-width:768px) {
      max-height: 119rem;
      object-position: bottom;
      border-bottom-left-radius: 10rem;
      border-bottom-right-radius: 10rem;
    }
  }
  .catchcopy {
    display: flex;
    flex-direction: column;
    font-size: clamp( 2.4rem, calc( 1.476923076923077rem + 2.564102564102564vw ), 6.4rem );
    font-weight: 700;
    align-items: baseline;
    position: absolute;
    top: 8rem;
    left: 1em;
    @media (min-width:768px) {
      top: auto;
      bottom: 2em;
    }

    .line {
      display: inline-block;
      line-height: 1.3;
      margin-bottom: 0.3em;
      padding: 0 0.3em;
      background: #FFF;
    }
  }
  .cv_btn {
    display: flex;
    container-type: inline-size;
    width: min(30vw, 18rem);
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #FF7237;
    border-radius: 50%;
    transition: 0.4s all ease;
    position: absolute;
    bottom: 4svh;
    right: 1.5rem;
    z-index: 999;
    @media (min-width:992px) {
      bottom: 5rem;
      right: 3%;
    }
    &::after {
      display: block;
      content: "";
      width: 90%;
      height: 90%;
      border: 0.5rem dotted #FFF;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    & a {
      display: inline-block;
      color: #FFF;
      font-size: 11cqw;
      font-weight: 700;
      line-height: 1.5;
      position: relative;
      z-index: +1;
    }
    &:hover {
      transform: scale(1.2);
    }
  }
}
/*--------------------------------------------------------------
# イントロ
--------------------------------------------------------------*/
#lp_intro {
  padding-bottom: 15rem;
  background: url(/assets/img/mebae-lp/intro_bg_line.png) repeat-x center bottom 13%/ auto 3rem;
  @media (min-width:768px) {
    background-size: auto auto;
  }
}
#lp_intro .intro_title {
  color: #FF7237;
  font-size: clamp( 2.2rem, calc( 1.0857142857142858rem + 3.0952380952380953vw ), 4.8rem );
  text-align: center;
  line-height: 1.5;
  margin-bottom: 3rem;
}
#lp_intro .text {
  font-size: clamp( 1.6rem, calc( 1.3857142857142858rem + 0.5952380952380952vw ), 2.1rem );
  font-weight: 700;
  max-width: 46em;
  margin: 0 auto;
}
/*--------------------------------------------------------------
# ポイント
--------------------------------------------------------------*/
.point {
  padding: 3rem 0;
}
.point .block_title {
  font-size: clamp( 1.8rem, calc( 1.5428571428571429rem + 0.7142857142857143vw ), 2.4rem );
  .wrap {
    background: linear-gradient(transparent 60%, #F4E33A 60%);
  }
} 
.point .img_wrap {
  @media (min-width:768px) {
    width: 50vw;
    margin-left: calc(50% - 50vw);
  }
  & img {
    width: 100%;
    border-radius: 3rem;
  }
}
.point .text {
  font-family: var(--ff-kaku);
}
.point .reverse .img_wrap {
  @media (min-width:768px) {
    margin: 0 calc(50% - 50vw) 0 0;
  }
}
@media (min-width:768px) {
  .point .content_block {
    align-items: center;
  }
  .point .text_wrap {
    width: 46%;
  }
}
/*--------------------------------------------------------------
# 通園サポート
--------------------------------------------------------------*/
#support {
  margin-top: 4rem;
  background: #FFF7A6;
}
#support .text {
  font-size: clamp( 1.6rem, calc( 1.3857142857142858rem + 0.5952380952380952vw ), 2.1rem );
  font-weight: 700;
  @media (min-width:768px) {
    text-align: center;
    max-width: 29em;
    margin: 0 auto;
  }
}
#support .support_list {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(14rem,1fr));
  justify-content: center;
  max-width: 85rem;
  margin: 5rem auto 0;
  gap: 5rem 4%;
  @media (min-width:768px) {
    grid-template-columns: repeat(auto-fit,minmax(20rem,1fr));
  }
  & li {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
    @media (min-width:768px) {
      font-size: clamp( 1.6rem, calc( 0.7111111111111111rem + 1.1574074074074074vw ), 2.1rem );
    }
    & p {
      font-size: inherit;
    }
  }
}
/*--------------------------------------------------------------
# 課外教室ラインナップ
--------------------------------------------------------------*/
#line_up {
  padding-bottom: 15rem;
  background: url(/assets/img/mebae-lp/lineup_bg_line.png) repeat-x center bottom 8%/ auto;
  @media (min-width:768px) {
    padding-bottom: 20rem;
    background-position: center bottom 12%;
  }
}
#line_up .container {
  width: min(95%,1600px);
}
#line_up .lesson_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem 4%;
  @media (min-width:768px) {
    gap: 5rem 3rem;
  }
  & li {
    font-size: 1.6rem;
    font-size: clamp( 1.6rem, calc( 1.3857142857142858rem + 0.5952380952380952vw ), 2.1rem );
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    width: 48%;
    @media (min-width:768px) {
      font-size: clamp( 1.6rem, calc( 0.7111111111111111rem + 1.1574074074074074vw ), 2.1rem );
      width: calc((100% - 12rem) / 5);
    }
    & img {
      width: 100%;
      vertical-align: middle;
      margin-bottom: 1.3rem;
    }
    & p {
      font-size: inherit;
    }
  }
}
/*--------------------------------------------------------------
# 説明会
--------------------------------------------------------------*/
.session {
  padding: 10rem 0 5rem;
  background: url(/assets/img/mebae-lp/session_bg.jpg) no-repeat center / cover;
}
.session .session_title {
  color: transparent;
  height: clamp(5.5rem,10vw,12rem);
  margin: 0 calc(50% - 50vw) 4rem;
  background: url(/assets/img/mebae-lp/session_title.png) no-repeat center / auto 100%;
}
.session .text {
  font-size: clamp( 1.6rem, calc( 1.3857142857142858rem + 0.5952380952380952vw ), 2.1rem );
  font-weight: 700;
  @media (min-width:768px) {
    text-align: center;
    max-width: 43em;
    margin: 0 auto;
  }
}
.session .content_block {
  max-width: 80rem;
  margin: 6rem auto;
  padding: 3rem;
  background: #FFF;
  border-radius: 3rem;
}
.session dl {
  align-items: baseline;
  padding-bottom: 0;
  @media (min-width:768px) {
    gap: 0 2em;
  }
  & dt {
    color: #FFF;
    font-size: var(--fs-block-title);
    width: fit-content;
    padding: 0 1em;
    background: #FF7237;
    border-radius: 999rem;
  }
  &:not(:last-child) dd {
    font-size: var(--fs-block-title);
    font-weight: 700;
  }
  &:last-child {
    display: block;
    @media (min-width:768px) {
      display: flex;
    }
    & dd {
      font-family: var(--ff-kaku);
      margin: 0.5em 0 0 0.5em;
      @media (min-width:768px) {
        margin: 0;
      }
    }
  }
}
.session .btn_wrap {
  text-align: center;
  .btn {
    font-size: clamp( 1.6rem, calc( 1.3857142857142858rem + 0.5952380952380952vw ), 2.1rem );
    padding: 1em 3em 1em 1.5em;
    background: #FF7237;
    border-color: #FF7237;
    &::after {
      width: 1.5rem;
      height: 1.5rem;
      background: transparent;
      --webkit-mask: none;
      mask: none;
      border-bottom: 0.3rem solid currentColor;
      border-right: 0.3rem solid currentColor;
      rotate: -45deg;
      right: 1.5em;
      transform-origin: top;
    }
    &:hover {
      color: #FF7237;
      background: #FFF;
    }
  }
} 
/*--------------------------------------------------------------
# 教育
--------------------------------------------------------------*/
#education {
  background: #FFF7A6;
  .container {
    width: min(95%,1200px);
  }
}
#education iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 315;
  margin: 6rem auto;
}
#education .text {
  font-family: var(--ff-kaku);
  max-width: 80rem;
  margin: 0 auto;
}
/*--------------------------------------------------------------
# 費用表
--------------------------------------------------------------*/
#expense table {
  width: min(100%,80rem);
  margin: 0 auto 6rem;
  background: #FFF;
  & caption {
    color: #FFF;
    font-size: var(--fs-block-title);
    font-weight: 700;
    text-align: center;
    width: 26.3rem;
    margin: 0 auto 3rem;
    background: #FF7237;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.3);
  }
  & td {
    font-family: var(--ff-kaku);
    padding: 1.5em 0.5em;
    @media (min-width:768px) {
      padding: 1.5em 1em;
    }
  }
  & td:nth-child(1) {
    color: #FFF;
    text-align: center;
    width: 25%;
  }
  & tr:nth-child(odd) {
    & td:nth-child(1) {
      background: rgba(255,114,55,0.8);
    }
    & td:nth-child(2) {
      background: rgba(255,114,55,0.05);
    }
  }
  & tr:nth-child(even) {
    & td:nth-child(1) {
      background: rgba(255,114,55,0.6);
    }
    & td:nth-child(2) {
      background: #FFF;
    }
  }
  & td.total {
    background: #FF7237 !important;
  }
}

/*--------------------------------------------------------------
# よくある質問
--------------------------------------------------------------*/
#faq {
  background: #FFF7A6;
}
#faq details {
  list-style: none;
  margin-bottom: 3rem;
  padding: 1.6rem;
  background: #FFF;
  border: 0.1rem solid #D9D9D9;
  border-radius: 0.8rem;
  & summary {
    display: flex;
    font-size: var(--fs-block-title);
    font-weight: 700;
    line-height: 1.5;
    justify-content: space-between;
    align-items: center;
    gap: 0 1em;
    cursor: pointer;
    &::after {
      display: block;
      content: "";
      width: 1rem;
      aspect-ratio: 1 / 1;
      flex-shrink: 0;
      border-bottom: 0.3rem solid;
      border-right: 0.3rem solid;
      rotate: 45deg;
      transition: 0.4s all ease;
    }
  }
  .answer_wrap p {
    font-family: var(--ff-kaku);
    padding-top: 1em;
  }
  &[open] summary::after {
    rotate: -135deg;
  }
}
/*--------------------------------------------------------------
# アクセス
--------------------------------------------------------------*/
#access .content_block {
  margin: 0 calc(50% - 50vw);
}
#access iframe {
  height: min(100vw,67.5rem);
}
#access .text {
  font-size: clamp( 1.6rem, calc( 1.3857142857142858rem + 0.5952380952380952vw ), 2.1rem );
  font-weight: 700;
  text-align: center;
  margin-top: 1em;
  padding: 0 1em;
}
/*--------------------------------------------------------------
# フッター
--------------------------------------------------------------*/
footer {
  text-align: center;
  padding: 6rem 0 2rem;
  background: #FFF7A6;
}
address {
  font-style: normal;
  margin-bottom: 5rem;
}