@charset "UTF-8";
.lightpink{
  color: #e7baa9;
}
.pink{
  color: #d78c6f;
}
.txt_stay{
  letter-spacing: 8px;
  margin-right: -10px;
}
.box00{
  align-items: center;
  background: #d78c6f;
}
.box00 .img{
  width: 52.75%;
}
.box00 .img .big{
  width: 64.64%;
  height: 514px;
}
.box00 .img .smallbox{
  width: 35.36%;
}
.box00 .img .small{
  height: 257px;
}
.box00 .txt{
  width: 47.25%;
}
.box00 .txt .txtinner{
  width: 94%;
  max-width: 470px;
  margin-left: auto;
  padding-right: 6%;
}
.box00 .txt .ribon{
  background: url(../images/common/bg_ribon_w.png) no-repeat;
  background-size: 100% 100%;
  padding: 7px 0 12px;
  margin: 0 10% 25px;
}
.box00 .txt .line_stay{
  max-width: 230px;
  margin: 23px auto 40px;
}
.box00 .txt .sec{
  line-height: 1.9;
  margin-top: 20px;
}


/* box01 */
.box01{
  align-items: center;
  padding-top: 30px;
}
.box01 .img{
  width: 52.75%;
}
.box01 .img img{
  height: 642px;
  object-position: right;
}
.box01 .txt{
  width: 47.25%;
  order: 2;
}
.box01 .txt .txtinner{
  width: 94%;
  max-width: 470px;
}

.box01 .txt .line_stay{
  max-width: 230px;
  margin: 10px 0 15px;
}
.box01 .txt .sec{
  line-height: 1.9;
  margin: 10px 0 30px;
}
.box01 .img_box{
  display: flex;
  justify-content: space-between;

}
.box01 .img_box > div{
  width: 49%;
  height: auto;
}

/* box02 */
.box02{
  align-items: center;
}
.box02 .img{
  width: 50%;
}
.box02 .img img{
  height: 580px;
}
.box02 .txt{
  width: 50%;
}
.box02 .txt .txtinner{
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  padding-right: 6%;
}
.box02 .txt .line_stay{
  max-width: 230px;
  margin: 10px 0 15px;
}
.box02 .txt .sec{
  line-height: 1.9;
  margin-top: 10px;
}
.box02 .txt .twin_box{
  background: #d78c6f;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  padding: 4.25%;
  margin-top: 30px;
}
.box02 .txt .twin_box:hover{
  opacity: .7;
}

.box02 .txt .twin_box .image{
  width: 55%;
}
.box02 .txt .twin_box .image img{
  height: 160px;
}
.box02 .txt .twin_box .text{
  width: 45%;
  text-align: center;
}
.box02 .txt .twin_box .text .lightpink{
  line-height: 1.3;
  margin-bottom: 5px;
}
.box02 .txt .twin_box .text .title{
  margin: 5px 0 7px;
}
.box02 .txt .twin_box .text .link .icon_arrow{
  width: 10px;
  vertical-align: middle;
}
.box02 .txt .twin_box .text .link a{
  vertical-align: middle;
}

/* box03 */
.box03{
  padding: 20px 0;
}
.box03 .title{
  align-items: center;
}
.box03 .title .ja{
  margin-top: 10px;
  margin-left: 20px;
}

.box03 .line_stay{
  max-width: 230px;
  margin: 20px auto 15px;
}
.box03 .sec{
  line-height: 1.9;
  margin-top: 25px;
}
.box03 .imgs{
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.box03 .imgs > div{
  width: 33%;
  max-width: 340px;
}

/* box04 */
.box04 .btn{
  margin: 40px 0 0;
}

/* box05 */
.box05{
  padding: 20px 0 65px;
}
.box05 .title{
  align-items: center;
}
.box05 .title .ja{
  margin-top: 10px;
  margin-left: 20px;
}

.box05 .line_stay{
  max-width: 230px;
  margin: 20px auto 15px;
}
.box05 .sec{
  line-height: 1.9;
  margin-top: 5px;
}
.box05 .list{
  margin-top: 25px;
}
.box05 .list li{
  width: 50%;
}
.box05 .list li .txt{
  padding-top: 30px;
  max-width: 510px;
  position: relative;
}

.box05 .list li:first-child .txt{
  margin: 0 2% 0 auto;
}
.box05 .list li:last-child .txt{
  margin: 0 auto 0 2%;
}
.box05 .list li .txt .comment{
  width: 170px;
  position: absolute;
  top: -60px;
  left: 0;
}
.box05 .btn{
  margin-top: 30px;
}
.box02 .btn.sp,
.business .box01 .btn.sp{
  display: none;
}

/* business */
.business .lightpink{
  color: #95a995;
}
.business .pink{
  color: #4e704f;
}
.business .box00{
  background: #4e704f;
}
.business .box00 .img .big{
  object-position: left;
}
.business .box01 .txt .sec{
  margin: 10px 0 20px;
}
.business .box01 .btn{
  margin: 20px 0 40px;
}
.business .box02 .btn{
  margin: 40px 0 0;
}
.business .box03{
  padding: 20px 0 35px;
}
.business .box04 .txt .sec {
margin-bottom: 20px;
}
.business .box05{
  padding-bottom: 5px;
}
.business .box05 .list li{
  width: 49%;
  max-width: 505px;
}
.business .box05 .list li .txt{
  padding-top: 15px;
}
.business .box05 .list li .txt .fs22{
  margin-top: 10px;
}
.business .box05 .imgs{
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}
.business .box05 .imgs li{
  width: 23%;
  max-width: 236px;
}
.business .box05 .imgs li p{
  margin-top: 10px;
}
.business .box05 .btn {
  margin-top: 40px;
}

@media screen and (max-width: 1700px){
  .box01 .img{
    width: 60%;
  }
  .box01 .txt{
    width: 40%;
  }
}
@media screen and (max-width: 1700px){
  .box01 .img{
    width: 50%;
    margin-right: 2%;
  }
  .box01 .img img{
    object-position: center;
  }
  .box01 .txt{
    width: 48%;
  }
  .box01 .txt .txtinner{
    width: 100%;
  }
}
@media screen and (max-width: 1050px){
  .box00 .img{
    display: block;
  }
  .box00 .img .big{
    width: 100%;
    height: 320px;
  }
  .box00 .img .smallbox{
    display: flex;
    width: 100%;
  }
  .box00 .img .smallbox > div{
    width: 50%;
  }
  .box00 .img .smallbox img{
    height: 194px;
  }
  .box00 .txt .ribon {
    margin: 0 10% 15px;
  }
  .box00 .txt .line_stay {
    margin: 20px auto;
  }
  .box02 .txt .txtinner {
    padding: 0 3%;
  }

}
@media screen and (max-width: 768px){
  /* box00 */
  .box00{
    padding: 25px 3%;
  }
  .box00 .txt,
  .box00 .txt .txtinner,
  .box01 .txt,
  .box02 .txt{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
  }
  .box00 .img,
  .box01 .img,
  .box02 .img{
    width: 100%;
    margin-top: 20px;
  }
  .box00 .img .big {
    width: 100%;
    height: 445px;
    object-position: bottom;
  }
  .box00 .img .smallbox img {
    height: auto;
  }

  /* box01 */
  .box01,
  .box02,
  .box03{
    padding: 15px 3% 25px;
  }
  .box01 .img img,
  .box02 .img img{
    height: auto;
  }
  .box01 .txt,
  .box02 .txt,
  .box03 .txt{
    text-align: center;
  }
  .box01 .txt .fs22,
  .box01 .txt .sec,
  .box02 .txt .fs22,
  .box02 .txt .sec,
  .box03 .txt .fs22,
  .box03 .txt .sec{
    text-align: left;
  }
  .box01 .txt .line_stay,
  .box02 .txt .line_stay,
  .box03 .line_stay {
    margin: 10px auto 15px;
  }
  .box01 .txt .sec,
  .business .box01 .txt .sec{
    margin-bottom: 0;
  }
  .box03 .title .ja{
    margin: 0;
  }
  .box02 .txt .txtinner{
    padding: 0;
  }

  .box02 .btn.sp{
    display: block;
    margin-top: 20px;
  }
  .box03 .imgs > div {
    width: 50%;
  }
  .box05{
    padding: 15px 3% 25px;
  }
  .box05 .list li {
    width: 100%;
    margin-bottom: 20px;
  }
  .box05 .list li .txt {
    margin: 0;
    max-width: none;
  }
  .box05 .btn {
    margin-top: 20px;
  }

  /* business */
  .business .box01 .btn.sp{
    display: block;
    margin: 20px 0 0;
  }
  .business .box03 {
    padding: 15px 3% 25px;
  }
  .business .box05{
    padding: 15px 3% 5px;
  }
  .business .box05 .list li{
    width: 100%;
    max-width: none;
  }
  .business .box05 .imgs {
    margin-top: 25px;
  }
  .business .box05 .imgs{
    flex-wrap: wrap;
  }
  .business .box05 .imgs li{
    width: 49%;
    max-width: none;
    margin-bottom: 15px;
  }
  .business .box05 .btn {
    margin-top: 10px;
  }
}
@media screen and (max-width: 500px){
  .box00 .img .big{
    height: auto;
  }
  .box02 .txt .twin_box .text{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .box02 .txt .twin_box .text .title {
    font-size: 5.87vw;
  }
}