@charset "utf-8";

/* .inner */
@media screen and (max-width:768px){
  .inner{
    width:90%;
  }
}


/* header */
header .inner .head_logo,
header nav > ul > li a,
header nav > ul > .sub span{
  color:#000;
}


/* #btnmenu */
#btnmenu:not(.close) span,
#btnmenu span:before,
#btnmenu span:after{
  background:#000;
}


/* h1 */
h1{
  height:100vh;
  background:url(../images/top/mv.webp)no-repeat center top;
  background-size:cover;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
h1 img{
  width:min(37vw,620px);
}

@media screen and (max-width:768px){
  h1{
    background:url(../images/top/mv_s.webp)no-repeat center top;
    background-size:cover;
  }
  h1 img{
    width:71%;
  }
}


/* #mv_bottom */
#mv_bottom{
  background-color:#f0f3f6;
}
#mv_bottom dt{
  line-height:4;
  letter-spacing:0.2em;
  text-indent:0.2em;
  cursor:pointer;
}
#mv_bottom dd{
  padding: 0 0 20px;
  line-height:2;
  text-align:left;
  display:none;
}
#mv_bottom dd.close{
  display:block;
}
#mv_bottom dd p{
  margin-top:1em;
}



/* #concept */
#concept{
}
#concept .cont_wrapper{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
#concept .cont_wrapper .sec{
  width:min(50%,600px);
  padding-top:min(15%,150px);
}
#concept .cont_wrapper .sec p{
  margin-top:9%;
  text-align:left;
}
#concept .cont_wrapper .sec .more{
  margin-top:min(15%,150px);
}
#concept .cont_wrapper .sec .more span:first-child{
  margin-right:0.8em;
}
#concept .cont_wrapper .fig{
  width:min(46%,600px);
}

@media screen and (max-width:1300px){
  #concept .cont_wrapper{
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  #concept .cont_wrapper .sec{
    padding-top:0;
  }
  #concept .cont_wrapper .sec p .only_pc{
    display:none !important;
  }
}

@media screen and (max-width:768px){
  #concept .cont_wrapper{
    display: block;
  }
  #concept .cont_wrapper .sec{
    width:auto;
  }
  #concept .cont_wrapper .sec p{
    line-height:2.1;
    margin-top:5%;
  }
  #concept .cont_wrapper .fig{
    width:auto;
    margin-top:9%;
  }
  #concept .cont_wrapper .more{
    display:block;
  }
}


/* #news */
#news{
}
#news .news_list{
  max-width:1080px;
  margin-top:min(7%,70px);
}
#news .news_list:after{
  content:'';
  display:block;
  clear:left;
}
#news .news_list li{
  width:min(23%,290px);
  aspect-ratio:145 / 195;
  float:left;
  overflow:hidden;
}
#news .news_list li:first-child{
  width:min(45%,560px);
}
#news .news_list li:nth-child(n+2){
  margin-left:4%;
}
#news .news_list li:nth-child(n+4){
  margin-top:1.5%;
}
#news .news_list li figure img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit: cover; 
}
#news .news_list li dl{
  line-height:1.5;
  margin-top:3%;
  text-align:left;
}
#news .news_list li dl .date{
  display:block;
  font-size:13px;
  letter-spacing:0.1em;
}
#news .news_list li dl .tit{
  margin-top:1.5%;
  font-size:min(1.6vw,14px);
  font-weight:500;
  display: -webkit-box;
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height:3em;
}
#news .news_list li:first-child dl .tit{
  font-size:min(2.1vw,21px);
}
#news .news_list li:first-child dl dd{
  margin-top:1.5%;
  font-size:min(1.6vw,16px);
  display: -webkit-box;
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height:3em;
}
#news .news_list li:nth-child(n+2) dl dd{
  display:none;
}

@media screen and (max-width:1024px){
  #news .news_list li{
    aspect-ratio:145 / 210;
  }
}

@media screen and (max-width:768px){
  #news .news_list{
    margin-top:0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #news .news_list:after{
    content:none;
  }
  #news .news_list li{
    width:48%;
    aspect-ratio:auto;
    float:none;
    overflow:visible;
    margin-top:9%;
  }
  #news .news_list li:first-child{
    width:auto;
  }
  #news .news_list li:nth-child(n+2){
    margin-left:0;
  }
  #news .news_list li:nth-child(n+4){
    margin-top:9%;
  }
  #news .news_list li dl .date{
    font-size:2.4vw;
  }
  #news .news_list li dl .tit{
    font-size:3.2vw;
  }
  #news .news_list li:first-child dl .tit{
    font-size:3.6vw;
  }
  #news .news_list li:first-child dl dd{
    font-size:3.2vw;
  }
}


/* #salon */
#salon{
}
#salon .salon_list{
  margin-top:max(-5%,-50px);
}
#salon .salon_list > li{
  margin-top:min(12%,120px);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
#salon .salon_list > li:nth-child(odd){
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
#salon .salon_list > li section{
  width:min(22%,290px);
  text-align:left;
}
#salon .salon_list > li section h3{
  line-height:1.5;
  font-size:min(2.6vw,26px);
  white-space:nowrap;
}
#salon .salon_list > li section h3 .en{
  display:block;
  letter-spacing:0.05em;
}
#salon .salon_list > li section h3 .en span{
  display:block;
}
#salon .salon_list > li section h3 .jp{
  display:block;
  margin-top:5%;
}
#salon .salon_list > li section .links{
  margin-top:25%;
}
#salon .salon_list > li section .links li{
  margin-bottom:9%;
}
#salon .salon_list > li section .links li a{
  letter-spacing:0.2em;
  text-indent:0.2em;
}
#salon .salon_list > li section .links li .info{
  display:inline-block;
  padding-left:0.5em;
}
#salon .salon_list > li section .links li .info:after{
  content:'';
  display:inline-block;
  vertical-align:0.1em;
  margin-left:1em;
  width:0.5em;
  height:0.5em;
  border-top:1px solid;
  border-right:1px solid;
  transform:rotate(45deg);
}
#salon .salon_list > li section .links li .reserve{
  display:block;
  width:min(100%,250px);
  line-height:4;
  text-align:center;
}
#salon .salon_list > li figure{
  width:min(70%,920px);
}

@media screen and (max-width:768px){
  #salon .salon_list > li{
    display: block;
    position:relative;
    aspect-ratio:1387 / 753;
  }
  #salon .salon_list > li section{
    width:100%;
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-30%);
  }
  #salon .salon_list > li section h3{
    line-height:1.5;
    font-size:min(2.6vw,26px);
    text-shadow:0 0 5px #000,0 0 5px #000;
    white-space:nowrap;
    color:#fff;
  }
  #salon .salon_list > li section h3 .en{
    font-size:4.1vw;
    letter-spacing:0.05em;
    text-indent:0.05em;
  }
  #salon .salon_list > li section h3 .en span{
    display:inline;
    margin-right:0.5em;
  }
  #salon .salon_list > li section h3 .jp{
    font-size:3.8vw;
    margin-top:1%;
  }
  #salon .salon_list > li section .links{
    margin-top:1.5%;
  }
  #salon .salon_list > li section .links li{
    margin-bottom:0;
  }
  #salon .salon_list > li section .links li .info{
    display:inline-block;
    padding-left:0;
    font-size:2.6vw;
    color:#fff;
    text-shadow:0 0 5px #000,0 0 5px #000;
  }
  #salon .salon_list > li section .links li .info:after{
    margin-left:0.5em;
  }
  #salon .salon_list > li section .links li .reserve{
    width:35%;
    line-height:2.4;
    margin:1.5% auto 0;
    font-size:2.6vw;
    color:#889199;
    background-color:#fff;
  }
  #salon .salon_list > li figure{
    width:auto;
  }
}