@charset "UTF-8";
/* CSS Document 新規スタイルを集約 */

/* padding top and bottom */
.ptb05{ padding-top: .5em; padding-bottom: .5em;}
.ptb1{ padding-top: 1em; padding-bottom: 1em;}
.ptb2{ padding-top: 2em; padding-bottom: 2em;}
.ptb3{ padding-top: 3em; padding-bottom: 3em;}
.ptb4{ padding-top: 4em; padding-bottom: 4em;}
.ptb5{ padding-top: 5em; padding-bottom: 5em;}
.ptb6{ padding-top: 6em; padding-bottom: 6em;}
.ptb7{ padding-top: 7em; padding-bottom: 7em;}
.ptb8{ padding-top: 8em; padding-bottom: 8em;}
.ptb9{ padding-top: 9em; padding-bottom: 9em;}
/* padding left and right */
.plr05{ padding-left: .5em; padding-right: .5em;}
.plr1{ padding-left: 1em; padding-right: 1em;}
.plr2{ padding-left: 2em; padding-right: 2em;}
.plr3{ padding-left: 3em; padding-right: 3em;}
.plr4{ padding-left: 4em; padding-right: 4em;}
.plr5{ padding-left: 5em; padding-right: 5em;}
.plr6{ padding-left: 6em; padding-right: 6em;}
.plr7{ padding-left: 7em; padding-right: 7em;}
.plr8{ padding-left: 8em; padding-right: 8em;}
.plr9{ padding-left: 9em; padding-right: 9em;}
/* mt */
.mt05{ margin-top: .5em;}
.mt1{ margin-top: 1em;}
.mt2{ margin-top: 2em;}
.mt3{ margin-top: 3em;}
.mt4{ margin-top: 4em;}
.mt5{ margin-top: 5em;}
.mt6{ margin-top: 6em;}
.mt7{ margin-top: 7em;}
.mt8{ margin-top: 8em;}
.mt9{ margin-top: 9em;}
/* mb */
.mb05{ margin-bottom: .5em;}
.mb1{ margin-bottom: 1em;}
.mb2{ margin-bottom: 2em;}
.mb3{ margin-bottom: 3em;}
.mb4{ margin-bottom: 4em;}
.mb5{ margin-bottom: 5em;}
.mb6{ margin-bottom: 6em;}
.mb7{ margin-bottom: 7em;}
.mb8{ margin-bottom: 8em;}
.mb9{ margin-bottom: 9em;}

/* font-size */
.fz1{font-size:1em;}
.fz11{font-size:1.1em;}
.fz12{font-size:1.2em;}
.fz13{font-size:1.3em;}
.fz14{font-size:1.4em;}
.fz15{font-size:1.5em;}
.fz16{font-size:1.6em;}
.fz17{font-size:1.7em;}
.fz18{font-size:1.8em;}
.fz19{font-size:1.9em;}
.fz20{font-size:2em;}

/* font =============================== */
.center{ text-align: center;}
.left{ text-align: left;}
.left-center{ text-align: left;}
.center-left{ text-align: center;}
.small{font-size: .9em;}
.small2{font-size: .8em;}
.small3{font-size: .7em;}
.red{ color: var(--color-red) !important; }
.red2{ color: var(--color-red2); }
.blue{ color: var(--color-blue); }

.black{ color: var(--c-black);}
.gold{ color: var(--c-gold); }
.grey{ color: var(--c-grey-d); }
.grey-l{ color: var(--c-grey-l); }
.grey-bg{ color: var(--c-grey-bg); }

.block{display: block;}
.num , .geo { font-family: "Geologica", sans-serif;}
.script { font-family: "Caveat", cursive;}


/* STUDIO LIST
========================================== */
/* .top_studio_sec{
  display: none !important;
} */
.top_st_list{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5px;
  background-color: #aaa;
}
.top_st_list_box{
  position: relative;
}

.top_st_list_box_inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  aspect-ratio: 5 / 3;
  padding: .5em .6em;
}
.top_st_list_box_inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 2;
  opacity: .5;
  mix-blend-mode: multiply;
  transition: opacity .5s;
}
.top_st_list_box:hover .top_st_list_box_inner::before{
  opacity: .8;
}
.top_st_list_img{ 
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.top_st_list_img img{ 
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top_st_list_name{
  position: absolute;
  z-index: 3;
  margin: auto;
  width: fit-content;
  height: fit-content;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #fff;

  padding-bottom: .2em;

  inset: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.top_st_list_name .en{
  display: block;
  font-family: "Oswald","YakuHanJP",'NotoSansCJKjp',sans-serif; 
  font-size: 1.6em;
  line-height: 1.2;
}
.top_st_list_name .ja{
  display: block;
  font-size: 1.35em;
  font-weight: 600;
}
.top_st_list_name .newOpen {
  width: 100%;
  font-family: 'Oswald';
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  margin-top: .1em;
  color: #ff3333;
}

.top_st_list_booking_link{
  position: absolute;
  z-index: 3;
  right: .9em;
  bottom: 1em;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  width: fit-content;
  font-family: "Oswald", sans-serif;
  font-size: 1em;
  font-weight: 500;
  color: #fff;
  transition: transform .3s;
}
.top_st_list_booking_link .txt {
  line-height: 1;
}
.top_st_list_booking_link ._circle {
  position: relative;
  display: block;
  width: 1.1em;
  height: 1.1em;
  font-size: 1em;
  border: 1px solid;
  border-radius: 50%;
  transition: right .3s ;
  /* background-color: #fff; */
}
.top_st_list_booking_link ._circle::before {
  position: absolute;
  right: 0.15em;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
  content: "";
  display: block;
  width: 32%;
  height: 32%;
  /* border-color: #333; */
  border-top: 1.6px solid ;
  border-right: 1.6px solid ;
  transform: rotateZ(45deg);
}

/* .top_st_list_booking_link:hover{
  transform: translateX( .3em );
} */
._calender{
  display: block;
  background-image: url(/imgs/chart/icon_chart_cal.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1.6em;
  height: 1.6em;
  filter: var(--filter-w);
  transition: font-size .3s;
}
._calender_btn{
  display: block;
  background-image: url(/imgs/chart/icon_chart_cal.svg);
  background-size: 55%;
  background-position: center .45em;
  background-repeat: no-repeat;
  width: 2.3em;
  height: 2.3em;
  filter: var(--filter-w);
  border: 1px solid #000;
  border-radius: 50%;
  transition: background-color .3s;
}
.txt + ._calender {
  width: 1.3em;
}
._center.top_st_list_booking_link {
  left: 0;
  padding: 0 0 0 .4em;
}
._calender:hover{
  font-size: 1.2em;
}
._calender_btn:hover{
  filter: none;
  border: 1px solid #fff;
  background-color: #fff;
}

._calender2{
  display: block;
  background-image: url(/imgs/chart/icon_chart_cal.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1.6em;
  height: 1.6em;
  filter: var(--filter-w);
  transition: margin .3s , opacity .5s;
}
._calender2::after{
  position: absolute;
  content: "予約";
  top: 100%;
  font-size: .8em;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  color: #000;
  opacity: 0;
  transition: opacity .3s;
}
._calender2:hover {
  opacity: .8;
}
/* ._calender2:hover {
  margin-bottom: .85em;
}
._calender2:hover::after {
  opacity: 1;
} */

@media (min-width : 769px){
  /* .top_st_list_box {
    font-size: .95em;
  } */
  .top_st_list{
    grid-template-columns: repeat(8, 1fr);
  }
  .top_st_list_box_inner {
    padding: .4em .5em;
  }
  .top_st_list_name {
    font-size: .8em;
  }
  .top_st_list_booking_link {
    font-size: .8em;
  }
}/*  */



/* TOP EVENT 
==========================================*/
.top_event_li{
  padding: .5em 0;
}
.top_event_img_box{
  position: relative;
  width: calc(100% + 3em);
  margin-left: -1.5em;
}
.top_event_img_ttl{
  position: absolute;
  left: .75em;
  bottom: .75em;
  height: 44%;
  z-index: 1;
}
.top_event_img{
  transition: transform .5s ;
}
.top_event_txt_box{
  padding: 1em 0;
}
.top_event_ttl{
  font-size: 1.3em;
  padding: .4em 0;
}
.top_event_ttl .sub{
  display: inline-block;
  font-size: 0.9em;
  margin-right: 0.4em;
}
.top_event_desc{
  font-size: 1.1em;
  padding: .4em 0;
}
.arrow_link{
  position: relative;
  display: block;
  width: fit-content;
  font-family: "Roboto",sans-serif;
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  color: #999;
  padding: 0 2.4em 0.4em 0;
  margin: 1em 0 1em auto;
  min-width: 8em;
  transition: color .5s , transform .3s;
}
.border_arrow,
.border_arrow::before{
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 1px;
  color: #999;
  background-color: currentColor;
}
.border_arrow_edge,
.border_arrow_edge::before{
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 20%;
  height: 1px;
  background-color: currentColor;
  transform: rotateZ(26deg);
  transform-origin: right bottom;
  max-width: 20px;
}
.border_arrow::before{
  content: "";
  color: #333;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .2s;
}
.border_arrow_edge::before{
  content: "";
  color: #333;
  background-color: currentColor;
  width: 100%;
  transform: rotateZ(0) scaleX(0);
  transition: transform .3s;
  /* transition-delay: 0; */
}

.top_event_li:hover .top_event_img{
  transform: scale(105%);
}
.top_event_li:hover .arrow_link{
  color: #333;
  transform: translateX(5px);
}
.top_event_li:hover .border_arrow::before{
  transform: scaleX(100%);
}
.top_event_li:hover .border_arrow_edge::before{
  transform: scaleX(100%);
}

/* NEW TOP EVENT 2024 */
.top_event_btn{
  width: fit-content;
  font-family: "Roboto", sans-serif;
  font-size: 1.1em;
  font-weight: 600;
  margin: 1em auto;
  text-align: center;
  border: 1px black solid;
  padding: 1.3em 1.5em 1.2em;
}

.top_event_btn span{
display: block;
}

.top_event_btn:hover{
  opacity: .5;
  transform: scale(105%);
  transition: transform .3s ;
}

@media (min-width:769px){
  .top_event_ul{
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: auto;
  }
  .top_event_desc {
    font-size: .92em;
  }
  .top_event_img_box{
    width: 100%;
    margin-left: inherit;
  }
  .top_event_li{
    width: 47%;
  }
  .top_event_txt_box{
    display: flex;
    flex-direction: column;
    height: 48%;
  }
  .arrow_link {
    margin-top: auto;
  }
}/*  */



/* top_school_sec
========================================== */
.top_school_sec {
  background-color: #e3e3e3;
  padding: 3em 0;
}
.top_school_list_box {
  position: relative;
  /* border-radius: .5em;
  overflow: hidden; */
  transition: filter .5s;
}
.top_school_list_box + .top_school_list_box{
  margin-top: 2em;
}
.top_school_img_wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 2.4 / 1;
}

.top_school_img_wrap::before{
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 1;
  transition: opacity .3s;
}
.top_school_img_wrap::after{
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: .5;
  transition: opacity .3s;
}
._school .top_school_detail_label {
  color: #ce0711;
}
._school .top_school_img_wrap::before{
  background-color: #ce0711;
  mix-blend-mode: multiply;
}
._school .top_school_img_wrap::after{
  background-color: #790006;
  mix-blend-mode: normal;
  opacity: .4;
}
._voat .top_school_detail_label {
  color: #0080c3;
}
._voat .top_school_img_wrap::before{
  background-color: #0c77b0;
  mix-blend-mode: multiply;
}
._voat .top_school_img_wrap::after{
  background-color: #005480;
  mix-blend-mode: normal;
}

.top_school_list_box:hover{
  filter: drop-shadow(0 0 .5em #c0c0c0);
}
.top_school_list_box:hover .top_school_img_wrap::before,
.top_school_list_box:hover .top_school_img_wrap::after{
  opacity: .8;
}

.top_school_list_img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top_school_list_logo_wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
  width: fit-content;
  height: fit-content;
  color: #fff;
  text-align: center;
}
.top_school_list_logo {
  display: block;
  width: 9em;
  margin: auto;
  /* filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(200%) drop-shadow(0 0 2em black); */
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(200%);
}
._school .top_school_list_logo {
  width: 7.8em;
}
.top_school_list_logo_wrap p:first-of-type{
  font-size: .95em;
  font-weight: bold;
  margin-bottom: 0.85em;
}
.top_school_list_logo + p{
  font-size: 1.2em;
  margin-top: .6em;
  font-weight: 600;
}


.top_school_detail_wrap{
  background-color: #fff;
  padding: 1.2em 1.2em;
}
.top_school_detail_label{
  font-size: .95em;
  font-weight: 600;
  color: #444;
}
/* .top_school_detail_label::before{
  content: "(";
  margin-right: 0.1em;
}
.top_school_detail_label::after{
  content: ")"; 
  margin-left: 0.1em; 
} */
.top_school_detail_ttl{
  font-size: 1.7em;
  margin: .15em 0 .25em;
}
.top_school_detail_txt {
  font-size: .95em;
}
@media (min-width:769px){
  .top_school_sec {
    padding: 3em 0;
    margin: 0 auto 1em;
  }
  .top_school_list{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 3em;
    max-width: 72em;
    margin: 0 auto 1em;
  }
  .top_school_list_logo_wrap {
    font-size: 1.1em;
  }
  /* .top_school_img_wrap {
    aspect-ratio: 2.6 / 1;
  } */
  .top_school_list_box + .top_school_list_box {
    margin-top: 0;
  }
}/*  */




/* OTHER WORKS LIST
========================================== */
.work_list{
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
}
.work_list_box{
  width: calc((100% - 1px) / 2);
}
.work_list_box a{
  display: block;
  position: relative;
}
.work_list_img_wrap{
  position: relative;
  background-color: #000;
  aspect-ratio: 3 / 2;
}
.work_list_img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.noah_school .work_list_img{
  opacity: .6;
}
.work_list_img_logo{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  width: 80%;
  height: auto;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(103%) contrast(103%);
}

.work_list_txt {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  font-size: 10px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.9);
  color: #fff;
  /* overflow-y: scroll; */
  /* visibility: visible; */
  transform: translateY(0);
  /* opacity: 1; */
  transition: transform .4s, opacity .4s;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: .85em;
  font-weight: 500;
  text-align: center;
  padding: .5em;

  visibility: none;
  opacity: 0;
}
.work_list_box:hover .work_list_txt {
  opacity: 1;
  visibility: visible;
}

@media (min-width:769px){
  /* .work_list_flex{
    display: flex;
  } */
  .otr_wks .work_list_box{
    width: calc( (100% - 5px) / 6 );
  }
  .work_list_box{
    width: calc( (100% - 6px) / 7 );
  }
}/*  */