:root {
  --black: #222222;
  --white: #fff;
  --gray: #DDDFDD
}

.inter {
  font-family: "Inter", sans-serif
}

.fxb {
  font-weight: 800
}

.fbb {
  font-weight: 900
}

.mc {
  margin-left: auto;
  margin-right: auto
}

.stroke_wrap {
  position: relative;
  z-index: 0
}

.stroke {
  position: absolute;
  color: var(--white);
  text-stroke: 4px var(--black);
  -webkit-text-stroke: 4px var(--black);
  inset: 0;
  z-index: -1;
  line-height: 1
}

.container {
  max-width: 1280px;
  width: calc(1280 / 1440 * 100%);
  margin: 0 auto
}

.breadcrumb {
  padding: 12px 0
}

.breadcrumb_list a {
  color: #fff
}

.l-header.fixed-header {
  display: block !important;
  background-color: var(--white)
}

.white_filter {
  background-color: #E4E4E4;
  position: relative;
  z-index: 0
}

.white_filter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  z-index: -1;
  opacity: 0.8
}

.l-main {
  background-color: #D9D9D9
}

.first_bg {
  background-image: url(../img/jhm-schoollife/first_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ttl_sec {
  padding-top: calc(130 / 1440 * 100vw);
  padding-bottom: calc(50 / 1440 * 100vw);
  position: relative;
  z-index: 0
}

@media screen and (min-width:1440px) {
  .ttl_sec {
    padding-top: 130px;
    padding-bottom: 50px
  }
}

.ttl_sec .page_ttl {
  position: relative;
  z-index: 0
}
.ttl_sec .page_ttl::before {
  content: "";
  position: absolute;
  top: -7rem;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 810px;
  width: 100%;
  height: calc(410 / 1367 * 100vw);
  background-image: url(../img/jhm-schoollife/first_bg_deco.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  margin: auto;
}

@media screen and (min-width:1367px) {
  .ttl_sec .page_ttl::before {
    height: 410px;
  }
}

.ttl_sec .page_ttl .ja {
  max-width: 750px;
  margin: auto;
}

.ttl_sec .page_ttl .en {
  font-size: 130px;
  color: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 100%;
  text-align: center;
  opacity: 0.8
}

.btn_sec {
  position: relative;
  z-index: 1;
  padding-bottom: 7rem;
}
.btn_sec .btn_list {
  display: flex;
  flex-wrap: wrap;
}
.btn_sec .btn_list .btn_item {
  flex: 0 0 47.5%;
  margin-right: 5%;
}
.btn_sec .btn_list .btn_item:nth-child(2n) {
  margin-right: 0;
}
.btn_sec .btn_list .btn_item:nth-child(n+3) {
  margin-top: 2%;
}
.btn_sec .container {
  max-width: 1000px;
}

.oneday_sec {
  padding-top: calc(42 / 1440 * 100vw);
  padding-bottom: calc(90 / 1440 * 100vw);
  position: relative;
  z-index: 0;
  background-image: url(../img/jhm-schoollife/oneday_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (min-width:1440px) {
  .oneday_sec {
    padding-top: 42px;
    padding-bottom: 90px
  }
}

.oneday_sec .oneday_img {
  width: 100%
}

.event_sec {
  padding-top: calc(80 / 1440 * 100vw);
  padding-bottom: calc(80 / 1440 * 100vw);
  background-image: url(../img/jhm-schoollife/event_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (min-width:1440px) {
  .event_sec {
    padding-top: 80px;
    padding-bottom: 80px
  }
}

.event_sec .sub_ttl {
  width: calc(586 / 1280 * 100%);
  margin: 0 auto
}
.event_sec .sec_ttl {
  width: calc(772 / 1280 * 100%);
  margin: 0 auto
}

.event_sec .event_list {
  margin-top: calc(45 / 1440 * 100vw);
  display: flex;
  flex-wrap: wrap
}

@media screen and (min-width:1440px) {
  .event_sec .event_list {
    margin-top: 45px
  }
}

.event_sec .event_list .list_item {
  position: relative;
  width: 100%
}

.event_sec .event_list .list_item:not(:first-child) {
  margin-top: calc(48 / 1440 * 100vw)
}

@media screen and (min-width:1440px) {
  .event_sec .event_list .list_item:not(:first-child) {
    margin-top: 48px
  }
}

.event_sec .event_list .list_item.month04,
.event_sec .event_list .list_item.month03 {
  padding-left: calc(184 / 1440 * 100vw)
}

@media screen and (min-width:1440px) {

  .event_sec .event_list .list_item.month04,
  .event_sec .event_list .list_item.month03 {
    padding-left: 184px
  }
}
.event_sec .event_list .list_item.month04 {
  position: relative;
  z-index: 0;
}
.event_sec .event_list .list_item.month04::before {
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 291px;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
}
.event_sec .event_list .list_item.month09 {
  padding: 0;
  /* background-color: transparent */
}

.event_sec .event_list .month {
  position: absolute;
  z-index: 1;
  top: calc(60 / 1440 * 100vw);
  left: calc(70 / 1440 * 100vw);
  color: var(--white);
  font-size: calc(26 / 1440 * 100vw);
  font-weight: bold;
  width: fit-content
}
.event_sec .event_list .list_item.month04 .month {
  top: 38%;
  margin: auto;
}

@media screen and (min-width:1440px) {
  .event_sec .event_list .month {
    top: 60px;
    left: 60px
  }
}

@media screen and (min-width:1440px) {
  .event_sec .event_list .month {
    font-size: 26px
  }
}

.event_sec .event_list .month .num {
  font-size: calc(50 / 1440 * 100vw);
  font-weight: 800;
  font-family: "Inter", sans-serif
}

@media screen and (min-width:1440px) {
  .event_sec .event_list .month .num {
    font-size: 50px
  }
}

.event_sec .event_list .month::before {
  content: "";
  display: block;
  width: calc(120 / 1440 * 100vw);
  aspect-ratio: 0.9022556391;
  background-image: url(../img/jhm-schoollife/event_month_deco.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

@media screen and (min-width:1440px) {
  .event_sec .event_list .month::before {
    width: 120px
  }
}

.event_sec .event_list .detail_list {
  display: flex;
  gap: 24px
}

.event_sec .event_list .detail_list .detail_item {
  flex: 1
}


@media (max-width:480px) {
  .ttl_sec {
    padding-top: 45px;
    padding-bottom: 40px;
  }

  .ttl_sec .page_ttl .ja {
    font-size: 27px
  }

  .ttl_sec .page_ttl .en {
    font-size: calc(50 / 375 * 100vw)
  }

  .event_sec {
    padding-bottom: 0
  }

  .event_sec .container {
    width: 100%;
    padding-bottom: 7rem;
  }

  .event_sec .sec_ttl {
    width: 90%
  }

  .event_sec .event_list .list_item {
    background-color: rgba(255, 255, 255, 0.8);
    padding-top: calc(70 / 375 * 100vw)
  }

  .event_sec .event_list .list_item:not(:first-child) {
    margin-top: 0
  }

  .event_sec .event_list .list_item.month04,
  .event_sec .event_list .list_item.month03 {
    padding-left: 0px
  }

  .event_sec .event_list .list_item.month09 {
    margin-top: 32px
  }

  .event_sec .event_list .month {
    font-size: calc(18 / 375 * 100vw);
    left: calc(180 / 1440 * 100vw)
  }

  .event_sec .event_list .month .num {
    font-size: calc(34 / 375 * 100vw)
  }

  .event_sec .event_list .month::before {
    width: calc(80 / 375 * 100vw);
  }

  .event_sec .event_list .detail_list {
    flex-direction: column
  }

  .event_sec .event_list .detail_list .detail_item {
    width: 100%
  }

}


/* 20260204 */
.event_sec .event_list .list_item.month08,
.event_sec .event_list .list_item.month09_second,
.event_sec .event_list .list_item.month10,
.event_sec .event_list .list_item.month11,
.event_sec .event_list .list_item.month02,
.event_sec .event_list .list_item.month03
 {
  position: relative;
  padding-left: calc(184 / 1440 * 100vw);
  padding-right: calc(60 / 1440 * 100vw);
  align-items: center;
  z-index: 0;
}
.event_sec .event_list .list_item.month08::before,
.event_sec .event_list .list_item.month09_second::before,
.event_sec .event_list .list_item.month10::before,
.event_sec .event_list .list_item.month11::before,
.event_sec .event_list .list_item.month02::before,
.event_sec .event_list .list_item.month03::before {
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 240px;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
}
.event_sec .event_list .list_item.month02::before {
  height: 392px;
}
.event_sec .event_list .list_item.month03::before {
  height: 240px;
}
@media screen and (min-width:1440px) {
  .event_sec .event_list .list_item.month08,
  .event_sec .event_list .list_item.month09_second,
  .event_sec .event_list .list_item.month10,
  .event_sec .event_list .list_item.month11,
  .event_sec .event_list .list_item.month02,
  .event_sec .event_list .list_item.month03 {
    padding-left: 184px;
    padding-right: 60px;
  }
}
.event_sec .event_list .list_item.month08 .month,
.event_sec .event_list .list_item.month09_second .month,
.event_sec .event_list .list_item.month10 .month,
.event_sec .event_list .list_item.month11 .month,
.event_sec .event_list .list_item.month02 .month,
.event_sec .event_list .list_item.month03 .month {
  top: 34%;
}
.event_sec .event_list .list_item.month08 .detail_info,
.event_sec .event_list .list_item.month09_second .detail_info,
.event_sec .event_list .list_item.month10 .detail_info,
.event_sec .event_list .list_item.month11 .detail_info,
.event_sec .event_list .list_item.month02 .detail_info,
.event_sec .event_list .list_item.month03 .detail_info {
  display: flex;
  align-items: center;
}
.event_sec .event_list .list_item.month02 .detail_info {
  max-height: 225px;
}
.event_sec .event_list .list_item.month08 .detail_info .left,
.event_sec .event_list .list_item.month11 .detail_info .left {
  flex: 0 0 50%;
}
.event_sec .event_list .list_item.month03 .detail_info .left {
  flex: 0 0 45%;
}
.event_sec .event_list .list_item.month02 .detail_info .left {
  flex: 0 0 55%;
}
.event_sec .event_list .list_item.month09_second .detail_info .left,
.event_sec .event_list .list_item.month10 .detail_info .left {
  flex: 0 0 43%;
}
.event_sec .event_list .list_item.month08 .detail_info .left h3 {
  max-width: 484px;
}
.event_sec .event_list .list_item.month09_second .detail_info .left h3,
.event_sec .event_list .list_item.month10 .detail_info .left h3 {
  max-width: 395px;
}
.event_sec .event_list .list_item.month11 .detail_info .left h3 {
  max-width: 557px;
  margin-top: -5rem;
}
.event_sec .event_list .list_item.month02 .detail_info .left h3 {
  max-width: calc(511 / 1440 * 100vw);
}
.event_sec .event_list .list_item.month02 .detail_info.second .left h3 {
  max-width: calc(360 / 1440 * 100vw);
  margin-top: -8rem;
}
.event_sec .event_list .list_item.month03 .detail_info .left h3 {
  max-width: calc(263 / 1440 * 100vw);
}
.event_sec .event_list .list_item.month08 .detail_info .left p,
.event_sec .event_list .list_item.month09_second .detail_info .left p,
.event_sec .event_list .list_item.month10 .detail_info .left p,
.event_sec .event_list .list_item.month11 .detail_info .left p,
.event_sec .event_list .list_item.month02 .detail_info .left p,
.event_sec .event_list .list_item.month03 .detail_info .left p {
  font-weight: bold;
  text-shadow: 0 0 8px #ffffff;
  margin-bottom: 0;
  padding-left: 3rem;
}
.event_sec .event_list .list_item.month11 .detail_info .left p,
.event_sec .event_list .list_item.month02 .detail_info .left p {
  margin-top: -3rem;
}
.event_sec .event_list .list_item.month08 .detail_info .right,
.event_sec .event_list .list_item.month09_second .detail_info .right,
.event_sec .event_list .list_item.month10 .detail_info .right,
.event_sec .event_list .list_item.month11 .detail_info .right,
.event_sec .event_list .list_item.month02 .detail_info .right,
.event_sec .event_list .list_item.month03 .detail_info .right {
  flex: auto;
}
.event_sec .event_list .list_item.month08 .detail_info .right .img,
.event_sec .event_list .list_item.month09_second .detail_info .right .img,
.event_sec .event_list .list_item.month10 .detail_info .right .img,
.event_sec .event_list .list_item.month11 .detail_info .right .img,
.event_sec .event_list .list_item.month02 .detail_info .right .img,
.event_sec .event_list .list_item.month03 .detail_info .right .img {
  width: 100%;
  height: 100%;
  position: relative;
}
.event_sec .event_list .list_item.month08 .detail_info .right .img img,
.event_sec .event_list .list_item.month09_second .detail_info .right .img img,
.event_sec .event_list .list_item.month10 .detail_info .right .img img,
.event_sec .event_list .list_item.month11 .detail_info .right .img img,
.event_sec .event_list .list_item.month02 .detail_info .right .img img,
.event_sec .event_list .list_item.month03 .detail_info .right .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event_sec .event_list .list_item.month09 .month {
  top: auto;
  bottom: 13%;
}


.makeup_sec {
  padding-top: calc(60 / 1440 * 100vw);
  padding-bottom: calc(130 / 1440 * 100vw);
  background-image: url(../img/jhm-schoollife/makeup_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.makeup_sec .container .wrapper .mds_box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.makeup_sec .container .wrapper .mds_box .mds_txt {
  position: relative;
  max-width: calc(230 / 1280 * 100%);
  margin-bottom: 0;
  right: -7%;
}
.makeup_sec .container .wrapper .mds_box .mds {
  max-width: calc(550 / 1280 * 100%);
  margin: 0 auto;
}
.makeup_sec .container .wrapper .mds_box .mds_icon {
  max-width: calc(340 / 1280 * 100%);
  margin-bottom: 0;
  margin-left: -5%;
}
.makeup_sec .container .wrapper .mds_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.makeup_sec .container .wrapper .block {
  display: flex;
}
.makeup_sec .container .wrapper .block .left {
  position: relative;
  flex: 0 0 46%;
  margin-right: 4%;
}
.makeup_sec .container .wrapper .block .left .second_img {
  max-width: 409px;
  width: 92%;
  margin: 5% 0;
}
.makeup_sec .container .wrapper .block .left .txt {
  font-weight: bold;
  max-width: 360px;
  margin-bottom: 0;
}
.makeup_sec .container .wrapper .block .left .point_img {
  position: absolute;
  right: 0;
  bottom: -10%;
  max-width: calc(195 / 1280 * 100%);
}
.makeup_sec .container .wrapper .block .right {
  flex: auto;
}
.makeup_sec .container .wrapper .block .right .content:first-child .mds {
  max-width: 333px;
}
.makeup_sec .container .wrapper .block .right .content .f16 {
  font-weight: bold;
}

.hair_sec {
  background-color: #00B9EF;
}
.hair_sec .container {
  position: relative;
  padding-top: calc(60 / 1440 * 100vw);
  padding-bottom: calc(130 / 1440 * 100vw);
  max-width: 1440px;
  width: 100%;
  margin: auto;
  z-index: 0;
}
.hair_sec .container .point_bg_txt {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  max-width: calc(697 / 1280 * 100%);
}
.hair_sec .container .point_bg_txt2 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
}
.hair_sec .sec_ttl {
  max-width: 1297px;
}
.hair_sec .container .wrapper {
  margin-top: calc(48 / 1440 * 100vw);
}
@media screen and (min-width:1440px) {
  .hair_sec .container .wrapper {
    margin-top: 48px;
  }
}
.hair_sec .container .wrapper .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hair_sec .container .wrapper .content .left {
  margin-right: 2%;
}
.hair_sec .container .wrapper .content:nth-child(even) {
  flex-direction: row-reverse;
}
.hair_sec .container .wrapper .content:nth-child(even) .left {
  margin-right: 0;
  margin-left: 2%;
}


@media screen and (max-width:1024px) {
  .ttl_sec .page_ttl::before {
    height: calc(490 / 1367 * 100vw);
  }
  .makeup_sec .container .wrapper .block .left .point_img {
    max-width: 90px;
  } 
}

@media screen and (max-width:768px) {
  .ttl_sec .page_ttl::before {
    max-width: 550px;
    top: 0;
    height: calc(370 / 1367 * 100vw);
  }
  .ttl_sec .page_ttl .ja {
    max-width: 400px;
  }
  .event_sec .event_list .list_item.month04::before {
    height: 219px;
  }
  .event_sec .event_list .list_item.month08::before, .event_sec .event_list .list_item.month09_second::before, .event_sec .event_list .list_item.month10::before, .event_sec .event_list .list_item.month11::before, .event_sec .event_list .list_item.month02::before, .event_sec .event_list .list_item.month03::before {
    height: 170px;
  }
  .event_sec .event_list .list_item.month08 .detail_info .left p, .event_sec .event_list .list_item.month09_second .detail_info .left p, .event_sec .event_list .list_item.month10 .detail_info .left p, .event_sec .event_list .list_item.month11 .detail_info .left p, .event_sec .event_list .list_item.month02 .detail_info .left p, .event_sec .event_list .list_item.month03 .detail_info .left p {
    padding-left: 2rem;
    font-size: 12px;
  }
  .event_sec .event_list .list_item.month11 .detail_info .left p, .event_sec .event_list .list_item.month02 .detail_info .left p {
    margin-top: -2rem;
  }
  .event_sec .event_list .list_item.month02::before {
    height: 240px;   
  }
  .makeup_sec .container .wrapper .block .right .content .f16 {
    font-size: 14px;
  }
  .makeup_sec .container .wrapper .block .left .point_img {
    display: none;
  }
  .ttl_sec .page_ttl::before {
    height: calc(520 / 1367 * 100vw);
  }
}

@media screen and (max-width:480px) {
  .btn_sec .btn_list .btn_item {
    flex: 0 0 49%;
    margin-right: 2%;
  }
  .event_sec .sub_ttl {
    width: 300px;
  }
  .event_sec .event_list .list_item.month04 .month,.event_sec .event_list .list_item.month08 .month, .event_sec .event_list .list_item.month09_second .month, .event_sec .event_list .list_item.month10 .month, .event_sec .event_list .list_item.month11 .month, .event_sec .event_list .list_item.month02 .month, .event_sec .event_list .list_item.month03 .month {
    top: 0%;
  }
  .event_sec .event_list .list_item::before {
    display: none;
  }
  .event_sec .event_list .list_item.month08 .detail_info, .event_sec .event_list .list_item.month09_second .detail_info, .event_sec .event_list .list_item.month10 .detail_info, .event_sec .event_list .list_item.month11 .detail_info, .event_sec .event_list .list_item.month02 .detail_info, .event_sec .event_list .list_item.month03 .detail_info {
    display: block;
  }
  .event_sec .event_list .list_item:not(:first-child) {
    margin-top: 8rem;
  }
  .event_sec .event_list .list_item.month08, .event_sec .event_list .list_item.month09_second, .event_sec .event_list .list_item.month10, .event_sec .event_list .list_item.month11, .event_sec .event_list .list_item.month02, .event_sec .event_list .list_item.month03 {
    padding-left: 15px;
    padding-right: 15px;
  }
  .event_sec .event_list .list_item.month09 {
    padding-top: calc(70 / 375 * 100vw);
  }
  .event_sec .event_list .list_item.month09 .month {
    top: 0;
    bottom: auto;
  }
  .event_sec .event_list .list_item.month09_second .detail_info .left h3, .event_sec .event_list .list_item.month10 .detail_info .left h3 {
    max-width: 260px;
    margin: auto;
  }
  .event_sec .event_list .list_item.month11 {
    padding-top: 10rem;
  }
  .event_sec .event_list .list_item.month08 .detail_info .left p, .event_sec .event_list .list_item.month09_second .detail_info .left p, .event_sec .event_list .list_item.month10 .detail_info .left p, .event_sec .event_list .list_item.month11 .detail_info .left p, .event_sec .event_list .list_item.month02 .detail_info .left p, .event_sec .event_list .list_item.month03 .detail_info .left p {
    display: flex;
    justify-content: center;
    font-size: 14px;
    padding-left: 0;
  }
  .event_sec .event_list .list_item.month02 .detail_info {
    max-height: none;
  }
  .event_sec .event_list .list_item.month02 .detail_info.second .left h3 {
    margin-top: 0;
  }
  .event_sec .event_list .list_item.month02 .detail_info .left h3 {
    max-width: 300px;
    margin: auto;
  }
  .event_sec .event_list .list_item.month02 .detail_info .left p {
    margin-top: 0rem;
    font-size: 13px;
  }
  .event_sec .event_list .list_item.month02 .detail_info.second .left h3 {
    max-width: 260px;
  }
  .event_sec .event_list .list_item.month02 .detail_info.second .left p {
    margin-top: -1rem;
  }
  .event_sec .event_list .list_item.month03 .detail_info .left h3 {
    max-width: 220px;
    margin: auto;
  }

  .makeup_sec .container .wrapper .mds_box {
    display: block;
  }
  .makeup_sec .container .wrapper .mds_box .mds_txt {
    max-width: 120px;
    right: auto;
  }
  .makeup_sec .container .wrapper .mds_box .mds {
    max-width: 250px;
    margin: 0 auto;
    margin-top: -1rem;
  }
  .makeup_sec .container .wrapper .mds_box .mds_icon {
    display: none;
  }
  .makeup_sec .container .wrapper .block {
    display: block;
    margin-top: 4rem;
  }
  .makeup_sec .container .wrapper .block .left .second_img {
    max-width: 292px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  .makeup_sec .container .wrapper .block .left {
    margin-right: 0;
    margin-bottom: 10%;
  }
  .makeup_sec .container .wrapper .block .right .content:first-child {
    margin-bottom: 10%;
  }
  .makeup_sec .container .wrapper .block .right .content:first-child .mds {
    max-width: 223px;
    margin: auto;
    margin-bottom: 1.5rem;
  }

  .hair_sec .sec_ttl {
    max-width: 300px;
    margin: auto;
  }
  .hair_sec .container .wrapper {
    width: 92%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 3rem;
  }
  .hair_sec .container .wrapper .content {
    display: block;
  }
  .hair_sec .container .wrapper .content:nth-child(n+2) {
    margin-top: 10%;
  }
  .hair_sec .container .wrapper .content .left {
    margin-right: 0;
    margin-bottom: 5%;
  }
}