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

/* SERVICE
============================================= */
/* w320:10px */
.service{
  font-size: 2.85714285vw;
}
.service .bottom{padding: 8vw 0 1vw;}

.srv_box {
  width: 100%;
  position: relative; 
  box-sizing: border-box;
  margin-bottom: 1px;

  -webkit-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  box-sizing: border-box;
  transition: filter .5s , transform .5s;
  background-position: center;
  background-size: cover;
  opacity: 1;
  z-index: 1;
}
.srv_box::after{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  top: 0;
  left: 0;
  opacity: .55;
  z-index: -1;
  transition: opacity .5s;
}
.srv_box:nth-child(1) {background: url(/images/service/p_srv_rec.jpg) center/ cover;}
.srv_box:nth-child(2) {background: url(https://www.studionoah.jp/images/211026back.jpg) center/ cover;}
.srv_box:nth-child(3) {background: url(/images/service/p_srv_tune.jpg) center/ cover;}
.srv_box:nth-child(4) {background: url(/images/service/p_srv_salon.jpg) center/ cover;}
.srv_box:nth-child(5) {background: url(/images/service/p_srv_duo.jpg) center/ cover;}
.srv_box.selftime {
  background-image: url(https://www.studionoah.jp/studiomap/images/2207_nakano_booth5_1.jpg);
}

.srv_box:hover{
  -webkit-filter: grayscale(0%);
  filter: none;
}
.srv_box:hover::after{
  opacity: .3;
}

.srv_box a{
  width: 100%;
  height: 100%;
  display: block;
  padding: 2.2em 2em 2em; 
}
.srv-in p{ color: #fff;}
.srv_logo_wrap{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 1.5em 0;
}
.srv_logo{ 
  width: 7em; 
  margin-right: 1.5em;
}
.srv_logo img{ 
  width: 100%;
}
.srv_ttl{ 
  font-family: 'Playfair Display','Noto Serif SC', serif; 
  font-weight: 700; 
  font-size: 2.5em;
  line-height: 1.5;
}
.srv_ttl span{ 
  font-size: .6em;
  display: block; 
  color: #fff;
  font-weight: bold;
}
.srv_txt{ 
  font-size: clamp(12px,1.2em,20px); 
  line-height: 1.5;
  text-align: left;
}

.srv_icn{ display: flex; flex-wrap: wrap; margin: 8vw auto 0; width: 90%;}
.otsrv-ic {background: url(../images/common/p_ser_ic_bk.png) no-repeat;}
.srv_icn div{ width: 100%; margin-bottom:3%; box-sizing: border-box; text-align: center; position:relative;}
.srv_icn div a{display:block; padding:1em .5em 1em 45px;}
.srv_icn div i{ display:block; width:30px; height:30px; position:absolute; top:50%; bottom:50%; transform: translate(0,-50%);  left:1em;}
.srv_icn .concool {background-position:50% 0; background-size:30px auto; display: block;}
.srv_icn .college {background-position:50% -30px; background-size:30px auto; display: block;}
.srv_icn .hotel {background-position:50% -60px; background-size:30px auto; display: block;}
.srv_icn .recruit {background-position:50% -90px; background-size:30px auto; display: block;}
.srv_icn div:nth-child(1){ border:1px solid #8bc53f;}
.srv_icn div:nth-child(1) p,.srv_icn div:nth-child(1) p span{color:#8bc53f;}
.srv_icn div:nth-child(2){ border:1px solid #f05a24;}
.srv_icn div:nth-child(2) p,.srv_icn div:nth-child(2) p span{color:#f05a24;}
.srv_icn div:nth-child(3){ border:1px solid #4bc6c6;}
.srv_icn div:nth-child(3) p{color:#4bc6c6;}
.srv_icn div:nth-child(4){ border:1px solid #a57c52;}
.srv_icn div:nth-child(4) p{color:#a57c52;}
.srv_icn p{ font-size:4.2vw; font-weight:bold; line-height:1.3; display: block; text-align: center;}
.srv_icn p span{display: inline; padding-left:.5em;}

.srv_icn2{display: flex; flex-wrap: wrap; justify-content: space-between;margin: 10vw auto 0; width: 90%;}
.srv_icn2 div{ width:47%; margin-bottom:2em; box-sizing: border-box; text-align: center; position:relative;}
.srv_icn2 div a{display:block;}
.srv_icn2 img[src$=".svg"]{width:50%;display:block;margin:0 auto .75em;}
.srv_icn2 p{ font-size:3.5vw; line-height:1.3; display: block; text-align: center;}
.srv_icn2 p span{display: block;}

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

  /* SERVICE
  ========================================================================== */
  .service{ 
    /* margin-top: 40px; */
    font-size: 10px;
  }
  .service .bottom{ padding: 40px 0 40px;}
  .srv{ 
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: auto;
  }
  .srv_box{ 
    width: 33%;
    margin: 0.5px;
  }
  .srv_box a{ 
    padding: 3em 3.5em 3em;
  }
  .srv_box .srv-in{
    transition: transform .5s;
  }
  .srv_box:hover .srv-in{
    transform: translateY(-4px);
  }
  .srv_logo_wrap{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: 1em;
    margin-bottom: 2em;
  }
  .srv_logo {
    width: 8.2em;
    margin: 0 1.5em 0 0;
  }
  .srv_ttl{
    font-size: 2.6em;
    /* text-align: center; */
  }
  .srv_ttl span {
    font-size: 0.53em;
  }
  .srv_txt{ 
    font-size: 13px;
  }

  .srv_icn{display: -webkit-flex; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin: 2em auto 0; width: 100%;}
  .srv_icn div{ width: 24%; margin-bottom:0;}
  .srv_icn div a{display:block; padding:1em .5em 1em 55px;}
  .srv_icn div i{ display:block; width:50px; height:50px; left:.8em;}
  .srv_icn .concool {background-position:50% 0; background-size:50px auto; display: block;}
  .srv_icn .college {background-position:50% -50px; background-size:50px auto; display: block;}
  .srv_icn .hotel {background-position:50% -100px; background-size:50px auto; display: block;}
  .srv_icn .recruit {background-position:50% -150px; background-size:50px auto; display: block;}

  .srv_icn p{ font-size:20px; font-weight:bold; line-height:1.3; display: block; text-align: center;}
  .srv_icn div:nth-child(3) p,.srv_icn div:nth-child(4) p{padding-top:.5em;}
  .srv_icn p span{display: block; padding-left:0;}

  .srv_icn2{margin: 60px auto 0; width: 84%;}
  .srv_icn2 div{ width:16%;margin-bottom:1em;}
  .srv_icn2 img[src$=".svg"]{width:95px!important;margin:0 auto 1em;}
  .srv_icn2 p{ font-size:16px;padding:0;}
  .srv_icn2 p span{display: block;}
    
}/*769end*/



/* 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: 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 );
  }
}/*  */