@charset "UTF-8";
*, *::before, *::after {
    box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
  font-size: 10px;
}
img {
  max-width: 100%;
}
body{
  margin: 0;
  font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  font-size: 1.4rem;
  position: relative;
}

.containar{
  min-width:320px;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  height:100vh;
}
.wrp_flex{
  display:flex;
  flex-wrap:wrap;
}
.fixed{
  position:fixed;
}
@media screen and (min-width: 1025px) {
  a img{
    opacity:1;
    transition: .5s;
  }
  a:hover img{
    opacity:0.75;
  }
}


/*--------------------------------------------------------*/
.main_visiual{
  background-color:#c5da7f;
  text-align:center;  
}

.main_visiual .inner{
  position:relative;
}
@media screen and (min-width: 1025px) {
  body.index .main_visiual::before{
    content: '';
    display: block;
    position: relative;
    top: 0;
    left: 0;  
  }
  body.index .main_visiual .inner::before{
    position:absolute;
    content:'';
    left:0;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent #c5da7f transparent;
  }
  .main_visiual{
    width:46.875%;
    position:fixed;
  }
/**/
    .main_visiual::before{
      background: url(../img/mv.webp) no-repeat center top / cover;
      height: 68.14814vh;
    }
    .main_visiual .inner{
      background-color:#c5da7f;
      text-align: center;
      height:calc(100vh - 68.14814vh);
    }
    .main_visiual .inner::before{
      top:-8.4vw;
      border-width: 0px 23.3vw 8.4375vw 23.3vw;
    }
    .main_visiual h1{
      padding-top:22.851852%;
    }
    .main_visiual h1 img{
      position:absolute;
      top:-4vw;;
      left:7.7814%;
      right:7.7814%;
      width: max(calc(100% - 15.5629%), 50vh, 420px);
      min-width: min(calc(100% - 15.3332%), 50vh, 420px);
    }
    .main_visiual .logo{
      width: 100%;
      position: absolute;
      bottom:10px;
    }
    .main_visiual .logo img{
      width: 23%;
      max-width: 210px;
      min-width: 150px;
    }
}
@media screen and (max-width: 1024px) {
  body.index .main_visiual::before{
    content: '';
    display: block;
    position: relative;
    top: 0;
    left: 0;  
  }
  body.index .main_visiual .inner::before{
    position:absolute;
    content:'';
    left:0;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent #c5da7f transparent;
  }
  .main_visiual{
    width:100%;
    height:100svh;
    text-align: center;
  }
  .main_visiual::before{
    background: url(../img/mv.webp) no-repeat center top / cover;
    height: 61.5vh;
  }
  .main_visiual .inner{
    background-color:#c5da7f;
    padding: 0 5%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
  }
  .main_visiual .inner::before{
    top: -20.4vw;
    border-width: 0px 50vw 20.4375vw 50vw;
  }
  .main_visiual h1{
    padding:0 0 2.6666%;
    width:100%;
  }
  body.index .main_visiual h1 img{
    top:-10%;
  }
  body.case .main_visiual h1{
    padding:0 0 4%;
  }
  .main_visiual .logo img{
    max-width: 200px;
    width: 40%;
    min-width: 100px;
  }
}
@media (orientation: landscape) and (max-width: 767px){
  .main_visiual{
    width:100%;
    height:200svh;
    text-align: center;
  }
  .main_visiual::before{
    background: url(../img/mv.webp) no-repeat center center / cover;
    height: 100vh;
  }
  .main_visiual .inner{
    background-color:#c5da7f;
    padding: 0 5%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    height: 100svh;
  }
  .main_visiual .inner::before{
    top: -6.3vw;
    border-width: 0px 50vw 6.4vw 50vw;
  }
}
/*--------------------------------------------------------*/
.main_contents{
  text-align:center;  
}
.main_contents .block a{
  display:block;
}

@media screen and (min-width: 1025px) {
  .main_contents{
    width:calc(34.375% - 5px);/*pc*/
  }
  .main_contents{
    z-index: 1;
    height: 100%;
    overflow-y: scroll;
    padding: 1.565% 2.5%;
    position: relative;
    margin-left: 46.875%;
    margin-right: 5px;
  }
  .main_contents::-webkit-scrollbar {
    width: 10px;
  }
  .main_contents::-webkit-scrollbar-track {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .main_contents::-webkit-scrollbar-thumb {
    background-color: #c5da7f;
    border-radius: 10px;
    border-right: 0px solid transparent;
    border-left: 0px solid transparent;
    background-clip: padding-box;
  }
    .main_contents .block{
      margin-top:100px;
      margin-bottom:40px;
    }
    .main_contents .block.case01{
      margin-top:60px;
    }
    .btn_detail__index{
      margin-top: 2.83%;
      display: block;
      width:100%;
      background:url(../img/btn_detail.png) no-repeat center top / contain;
      padding-top: max(7.720588235%, 44px);
      transition: .5s;
    }
    a:hover .btn_detail__index{
      background:url(../img/btn_detail_o.png) no-repeat center top / contain;
    }
}
@media screen and (max-width: 1024px) {
  .main_contents{
    width:100%;
    padding:13% 4% 12%;
  }
  .main_contents .comment{
    text-align:center;
    margin-bottom: 9%;
  }
  .main_contents .block{
    margin-top: max(10%, 75px);
    margin-bottom:max(6.6666%,50px);
    padding:0 5%;
  }
  .main_contents .block.case01{
    margin-top:20px;
  }
  .main_contents .block a{
    text-align:center;
  }
  .main_contents .ttl_case{
    margin-bottom:30px;
  }
  .btn_detail__index{
    margin-top: 1.83%;
    display: block;
    width:100%;
    background:url(../img/btn_detail.png) no-repeat center top / contain;
    padding-top:max(7.720588235% , 30px);
  }
}
/*--------------------------------------------------------*/

@media screen and (min-width: 1025px) {
  .cv_area{
    background: url(../img/border_v.png) left top repeat-y;
    background-size: 1px;
    width: 18.75%;
    height: 100vh;
  }
  .cv_area .list_cv_area{
    align-items: center;
  }
  .cv_area .cv_stylebook,
  .cv_area .cv_reserve{
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    margin-left:1px;
  }
  .cv_area .cv_reserve{
    background: url(../img/border_h.png) left top repeat-x;
    background-size: 8px;
  }
  .cv_area .list_cv_area a{
    height: 50vh;
    padding: 12.5%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #c5da7f;
    text-align: center;
    width: 100%;
    transition: .5s;
  }
  .cv_area .cv_reserve a{
    margin-top:1px;
  }
  .cv_area .list_cv_area a:hover{
    background-color: #b4cc6a;
  }

  .cv_area .cv_reserve a picture{
    width:100%;
  }
  .cv_area .list_cv_area img{
    width:min(22vw,27vh,300px);
  }
  .cv_area .list_cv_area img.img__cv_area{}
  .cv_area .list_cv_area img.btn__cv_area{
    margin-top:6%;
  }
}
@media screen and (max-width: 1024px) {
   .cv_area{
    width:100%;
    min-width:320px;
    bottom:0;
    right:0;
    background-color:#ffffff;
  }
  .cv_stylebook{
    width:50%;
    background-color:#c5da7f;
  }
  .cv_reserve{
    width:50%;
    background-color:#f7e9a9;
  }
  .list_cv_area a{
    text-align: center;
    display: block;
    width: 100%;
  }
  img.img__cv_area,
  .border_cv{
    display:none;
  }
}



/*----------------------------------------------------------------
page::detail
----------------------------------------------------------------*/

@media screen and (min-width: 1025px) {
  body.case .main_visiual::before{
    content: '';
    display: block;
    position: relative;
    top: 0;
    left: 0;  
  }
  body.case .main_visiual .inner::before{
    position:absolute;
    content:'';
    left:0;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent #c5da7f transparent;
  }
}

/*----------------------------------------------------------------
page::detail
----------------------------------------------------------------*/



.intro{
  margin-bottom: min(11.46vw, 43px);
}
.intro h1{
  text-align:left;
  font-weight:bold;
  margin-bottom:max(2%,0.5em);
  line-height:1.5em;
}
.intro h1 span{
  display:block;
  margin-bottom:max(4%,15px);
}
.intro p{
  text-align:left;
  margin-bottom:1em;
  line-height:1.5em;
}

.wrp_nav{
  display:flex;
  flex-wrap:wrap;
}
.wrp_nav a{
 text-decoration:underline; 
}
.wrp_nav .pre,
.wrp_nav .home,
.wrp_nav .next{
  width:33.33%;
  text-align:center;
  font-size: max(4vw,15px);
  color:#666666;
  font-weight:bold;
}
.photo_case{
  border-radius: 10px;
  overflow: hidden;
  margin:0 4.5%;
}
  .wrp_nav .pre,
  .wrp_nav .home,
  .wrp_nav .next{
    width:33.33%;
    text-align:center;
    color:#666666;
    font-weight:bold;
  }

@media screen and (min-width: 1025px) {
  body.case .main_contents .logo{
  text-align:center;
  margin-bottom:80px;
}
  body.case .main_contents{
    padding: 3% 2%;
  }
  .intro{
    padding: 0 3% 0 4%;
  }
  .intro h1 span{
    width: 38%;
    min-width:150px;
  }
  .intro h1{
    font-size:min(1.40625vw,27px);
    line-height: 1.5em;
  }

.intro p{
  font-size:min(1.041vw,20px);
}
  .drawing{
    margin-bottom:112px;
    margin-bottom: min(20%, 112px);
  }
  .photos{
    margin-bottom: min(7%, 40px);
  }
  .photos h2{
    margin-bottom: min(7%, 40px);
  }
  .photo_case{
    margin-bottom:min(11.5%,64px);
    max-width: 470px;
    margin-left: auto;
    margin-right: auto;
  }
  .info_case{
    margin-bottom: min(14.5%, 84px);
  }
  body.case .comment{
    margin-bottom:100px;
  }
  body.case .txt_comment{
    font-size:min(1.40625vw,27px);
    line-height: 1.5em;
    font-weight: bold;
  }
  .wrp_nav{
    margin-bottom: min(14.5%, 84px);
  }
  .wrp_nav .pre,
  .wrp_nav .home,
  .wrp_nav .next{
    font-size: 15px;
  }
}
@media screen and (max-width: 1024px) {
  body.case .main_contents .logo{
text-align: center;
    max-width: 115px;
    margin: 0 auto 80px;
}
  body.case .main_visiual{
    height:auto;
  }
  body.case .main_visiual .inner{
    height:auto;
  }
  body.case .main_visiual .logo{
    display:none;
  }

  .intro h1 span{
    width: 38%;
    min-width:110px;
    margin-bottom: max(4%, 10px);
  }
  .inner_contents{
    margin-top:11.46vw;    
  }
  .intro{
    margin-bottom:14.46%;
     padding: 0 4%;
  }

  body.case .main_contents{
    padding: 8.5% 6%;
  }
  .intro h1{
    font-size:max(4vw,18px);
  }
  .intro p{
    font-size:max(2.9vw,14px);
    margin-bottom: 1.8em;
  }
  .drawing{
    margin-bottom: 16.5%;
  }
  .photos{
            margin-bottom: 16.3333%;
  }
  .photos h2{
    margin-bottom:5.3333vw;
  }
  .photo_case{
    margin-bottom:8.5333vw;
  }
  .info_case{
    margin-bottom:11.2vw;
  }
  body.case .comment{
    margin-bottom:13.3333vw;
  }
  body.case .txt_comment{
    font-size:max(4vw,18px);
    line-height: 1.5em;
    font-weight: bold;
  }
  .wrp_nav{
    margin-bottom:11.2vw;
  }
  .wrp_nav .pre,
  .wrp_nav .home,
  .wrp_nav .next{
    font-size: 15px;
  }
}

@media screen and (max-width: 768px) {

  .wrp_nav .pre,
  .wrp_nav .home,
  .wrp_nav .next{
    font-size: max(4vw,15px);
  }
}