@charset "UTF-8";

@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;}

/* SECTION ============================== */
.sec_bloc{
  padding: 2em 0;
}
._top0{ padding-top: 0 !important;}
._bottom0{ padding-bottom: 0 !important;}
._top_w{ padding-top: 4em;}
._bottom_w{ padding-bottom: 4em;}

.c_wide{
  max-width: 1200px;
  margin: 0 auto;
}
.c_wide_narrow{
  max-width: 960px;
  margin: 0 auto;
}
.c_inner{
  padding: 0 var(--inn-w);
}

/* SECTION ============================== */
.sec_bloc{
  padding: 2em 0;
}
._top0{ padding-top: 0 !important;}
._bottom0{ padding-bottom: 0 !important;}
._top_w{ padding-top: 4em;}
._bottom_w{ padding-bottom: 4em;}

.c_wide{
  max-width: 1200px;
  margin: 0 auto;
}
.c_wide_narrow{
  max-width: 960px;
  margin: 0 auto;
}
.c_inner{
  padding: 0 var(--inn-w);
}

@media print, screen and (min-width : 769px){
  /* SECTION ============================== */
  .sec_bloc{
    padding: 3em 0;
  }
  ._top_w{ padding-top: 6em;}
  ._bottom_w{ padding-bottom: 6em;}
  .c_inner_pc{
    padding-left: var(--inn-w);
    padding-right: var(--inn-w);
  }
}/* min-width : 769px */

/* SECTION TITLE ========== */
.sec_ttl{
  font-size: 11vw;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 .5em;
}
.sec_ttl .en{
  display: block;
  font-size: 1em;
  font-weight: 900;
  line-height: 1.2;
  padding: 0;
  margin: 0;
}
.sec_ttl .ja{
  display: block;
  font-size: .36em;
  font-weight: 500;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  color: #333;
}
.sec_ttl .ls{
  padding-top: .4em;
}
.sec_ttl .small{
  font-size: .85em;
}
.sec_ttl .small2{
  font-size: .75em;
}
.sec_ttl .small2 + .ja{
  font-size: .32em;
}
@media (min-width : 769px){
  .sec_ttl{
    font-size: 45px;
  }

}/*  */



/* OTHER STUDIO, OTHER WORKS, NOAH SCHOOL
========================================================================== */
.in-list{
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  /* padding: .3em 0; */
  margin: 0 auto;
}
.in-list li{ 
  padding: 2vw 0; 
  width: 47.5%; 
  box-sizing: border-box;
}
.in-list img{ width: 100%;}
.in-list p{font-size: 3vw; line-height: 1.4;}
.in-list .in-ttl {
  text-align: center;
  padding: .7em 0 .3em;
  font-weight: bold;
  font-size: 3.2vw;
}
.in-list .in-ttl span{ display: block;}
.in-list li .in-txt{
  padding: .3em 0;
}

.otr_sc .in-list li{ 
  width: 31%; 
  box-sizing: border-box; 
  /* padding: .5em 0; */
}

.other_img_box{
  position: relative;
}
.other_img_box_logo{
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  width: 55%;
  height: fit-content;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(103%) contrast(103%);
}

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

  /* OTHER STUDIO
  ========================================================================== */
  .in-list{
    gap: 1.5%;
  }
  .in-list li {
    /* width: 23.6%; */
    flex: 1;
    padding: 0;
  }
  /* .in-list p{font-size: 15px;} */
  .in-list img {
    margin: 0 auto;
  }
  .in-list .in-ttl {
    /* text-align: left; */
    font-size: 12px;
  }
  /* .in-list .in-ttl span {
    display: inline;
  } */
  .in-list .in-txt {
    font-size: 10px;
    letter-spacing: -.01em;
  }

}

/* 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: 1;
  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: left;
  padding: .5em;

  visibility: none;
  opacity: 0;
}
.work_list_txt br {
  display: none;
}
.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 );
  }
}/*  */