main .ttlbox01{
  background: #fff url("../img/massage/m_h1_bg.png") no-repeat center bottom / cover;
  height: 569px;
  position: relative;
  z-index: 11;
  overflow: hidden;
}
main .ttlbox01:before,
main .ttlbox01:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
main .ttlbox01:before{
  right: 0;
  background-color: #fff;
  opacity: 1;
  -webkit-transition: opacity .6s ease-in .5s;
  transition: opacity .6s ease-in .5s;
}
main .ttlbox01.active:before{
  opacity: 0;
}
main .ttlbox01:after{
  right: 100%;
  -webkit-transition: right .3s cubic-bezier(0, 0.75, 0.36, 1) .1s, left .6s cubic-bezier(0.15, 0.89, 0.15, 1) .6s;
  transition: right .3s cubic-bezier(0, 0.75, 0.36, 1) .1s, left .6s cubic-bezier(0.15, 0.89, 0.15, 1) .6s;
  background-color: #d4e3c6;
}
main .ttlbox01.active:after{
  right: 0;
  left: 100%;
}
main .ttlbox01 h1{
  display: inline-block;
  position: absolute;
  top: 57%;
  right: 50%;
  -webkit-transform: translate(50%,-50%);
  -ms-transform: translate(50%,-50%);
  transform: translate(50%,-50%);
  -webkit-transition: top .7s cubic-bezier(0.15, 0.8, 0.15, 1) 1.3s, opacity .7s cubic-bezier(0.15, 0.8, 0.15, 1) 1.3s;
  transition: top .7s cubic-bezier(0.15, 0.8, 0.15, 1) 1.3s, opacity .7s cubic-bezier(0.15, 0.8, 0.15, 1) 1.3s;
  opacity: 0;
}
main .ttlbox01.active h1{
  opacity: 1;
  top: 54%;
}

/*.tab_box
-------------------------------- */
.tab_box{
  background-color: #52790f;
}
.tab_button{
  width: 960px;
  margin: 0 auto;
  height: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.tab_button li{
  color: #fff;
  width: 234px;
  border: solid 1px #fff;
  padding: 23px;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}
.tab_button .open{
  color: #52790f;
  background-color: #d4e3c6;
  border: solid 1px #d4e3c6;
  pointer-events: none;
}
.tab_button .coming_soon{
  pointer-events: none;
  opacity: .5;
}
.tab_button li:hover{
  color: #52790f;
  background-color: rgba(255,255,255,0.7);
  border: solid 1px rgba(255,255,255,0.6);
}
.tab_button li:before,
.tab_button li:after{
  content: '';
  position: absolute;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.tab_button .open:before,
.tab_button .open:after,
.tab_button .coming_soon:before,
.tab_button .coming_soon:after{
  content: none;
}
.tab_button li:before{
  width: 60px;
  height: 1px;
  top: 32px;
  right: 20px;
  background-color: #fff;
}
.tab_button li:hover:before{
  right: -30px;
  width: 30px;
}
.tab_button li:after{
  width: 8px;
  height: 8px;
  top: 28px;
  right: 21px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.tab_button li:hover:after{
  right: -29px;
}
.tab_button span{
  display: inline-block;
  padding-left: 40px;
  font-size: 12px;
  font-weight: normal;
}
@media screen and (max-width: 767px){
  .tab_button{
    width: auto;
    padding: 0 3%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .tab_button li{
    width: 30%;
    padding: 0;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 80px;
    padding-bottom: 20px;
  }
  .tab_button li:before{
    top: 52px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  .tab_button li:after{
    top: 48px;
    right: calc(50% - 25px);
    -webkit-transform: translateX(50%) rotate(45deg);
    -ms-transform: translateX(50%) rotate(45deg);
    transform: translateX(50%) rotate(45deg);
  }
  .tab_button .coming_soon{
    padding-bottom: 0;
  }
  .tab_button span{
    padding: 6px 0;
  }
}
/*box_message
--------------------------------------------------------- */
.box_message{
  max-width: 1200px;
  margin: 120px auto 0;
  position: relative;
  z-index: 10;
}
.box_message > li{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.box_message > li > div{
  position: relative;
}
.box_message > li .photo_box,
.box_message > li .bg_gray01 picture{
  max-width: 660px;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  display: block;
  position: relative;
  display: block;
}
.box_message > li:nth-of-type(4n+1) .bg_gray01 picture:after,
.box_message > li .photo_box:after{
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  background-color: #d4e3c6;
}
.box_message > li:nth-of-type(4n+1) .bg_gray01 picture:after,
.box_message > li:nth-of-type(odd) .photo_box:after{
  left: 0;
  right: 100%;
  -webkit-transition: right .3s cubic-bezier(0, 0.75, 0.36, 1), left .6s cubic-bezier(0.15, 0.89, 0.15, 1) .5s;
  transition: right .3s cubic-bezier(0, 0.75, 0.36, 1), left .6s cubic-bezier(0.15, 0.89, 0.15, 1) .5s;
}
.box_message > li:nth-of-type(4n+1).active .bg_gray01 picture:after,
.box_message > li:nth-of-type(odd).active .photo_box:after{
  left: 100%;
  right: 0;
}
.box_message > li:nth-of-type(even) .photo_box:after{
  left: 100%;
  right: 0;
  -webkit-transition: left .3s cubic-bezier(0, 0.75, 0.36, 1), right .6s cubic-bezier(0.15, 0.89, 0.15, 1) .5s;
  transition: left .3s cubic-bezier(0, 0.75, 0.36, 1), right .6s cubic-bezier(0.15, 0.89, 0.15, 1) .5s;
}
.box_message > li:nth-of-type(even).active .photo_box:after{
  left: 0;
  right: 100%;
  }
.box_message > li picture{
  opacity: 0;
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
  -webkit-transition: transform .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s, -webkit-box-shadow .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s;
  transition: transform .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s, -webkit-box-shadow .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s;
  -webkit-transition: -webkit-box-shadow .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s, -webkit-transform .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s;
  transition: -webkit-box-shadow .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s, -webkit-transform .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s;
  transition: box-shadow .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s, transform .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s;
  transition: box-shadow .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s, transform .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s, -webkit-box-shadow .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s, -webkit-transform .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s;
  transition: box-shadow .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s, transform .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s, -webkit-box-shadow .8s cubic-bezier(0.15, 0.8, 0.15, 1) 1.1s;
}
.box_message > li.active picture{
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  -webkit-box-shadow: 0px 20px 40px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 20px 40px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.box_message > li img,
.box_message > li source{
  opacity: 0;
  -webkit-transition: opacity .4s ease-in .5s;
  transition: opacity .4s ease-in .5s;
}
.box_message > li.active img,
.box_message > li.active source{
  opacity: 1;
}

.box_message > li .bg_gray01.photo_box{-webkit-box-shadow: none;box-shadow: none;}

.box_message > li .caption{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  max-width: 460px;
  min-height: 408px;
}
.box_message > li dl{
  opacity: 0;
  -webkit-transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) .5s;
  transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) .5s;
  position: relative;
}
.box_message > li.active dl{
  opacity: 1;
}
.box_message > li .caption dt{
  font-weight: normal;
}
.box_message > li .caption em{
  font-weight: bold;
  font-size: 26px;
  font-family: Meiryo, sans-serif;
  letter-spacing: 2px;
}
.box_message > li .caption dd{
  font-size: 14px;
  line-height: 2;
  margin-top: 30px;
}
.box_message > li .name{
  position: absolute;
  line-height: 0.6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transition: all .8s cubic-bezier(0.15, 0.8, 0.15, 1);
  transition: all .8s cubic-bezier(0.15, 0.8, 0.15, 1);
  opacity: 0;
}
.box_message > li.active .name{
  opacity: 1;
}
.box_message > li .name span{
  font-family: 'Roboto', sans-serif;
  font-size: 64px;
  font-weight: 900;
  display: inline-block;
  letter-spacing: 1px
}
.box_message > li .name span:first-letter{
  font-size: 86px;
}
.box_message > li .name span + span{
  padding-left: 20px;
}
.box_message > li .name span:nth-of-type(1){
  width: 400px;
  color: #f1f1f1;
}
.box_message > li .name span:nth-of-type(1):first-letter{color: #d8d8d8;}
.box_message > li .name span:nth-of-type(2){color: #eef8e5;}
.box_message > li .name span:nth-of-type(2):first-letter{color: #d4e3c6;}

.box_message > li + li{
  margin-top: 180px;
}
/*.box_message > (4n+1)
-------------------------------- */
.box_message > li:nth-of-type(4n+1) .bg_gray01:before{
  content: '';
  position: absolute;
  right: 70px;
  top: 100px;
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
  opacity: 0;
  -webkit-transition: all 1s cubic-bezier(0.15, 0.8, 0.15, 1) 1.6s;
  transition: all 1s cubic-bezier(0.15, 0.8, 0.15, 1) 1.6s;
}
.box_message > li:nth-of-type(4n+1).active .bg_gray01:before{
  opacity: 1;
  top: 80px;
}
.box_message > li:nth-of-type(4n+1) .bg_gray01:after{
  content: none;
}
.box_message > li:nth-of-type(4n+1) .caption{
  padding-left: 50px;
}
.box_message > li:nth-of-type(4n+1) .name{
  top: 130px;
  right: -200px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.box_message > li:nth-of-type(4n+1).active .name{
  top: 80px;
}
/*.box_message > (4n+2)
-------------------------------- */
.box_message > li:nth-of-type(4n+2){
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.box_message > li:nth-of-type(4n+2) .caption{padding-right: 50px;}
.box_message > li:nth-of-type(4n+2) .name{
  top: 20px;
  left: -100px;
}
.box_message > li:nth-of-type(4n+2).active .name{
  top: -30px;
}
/*.box_message > (4n+3)
-------------------------------- */
.box_message > li:nth-of-type(4n+3){
  position: relative;
}
.box_message > li:nth-of-type(4n+3):before,
.box_message > li:nth-of-type(4n+3):after{
  content: '';
  position: absolute;
  top: -100px;
  height: 0;
  -webkit-transition: height .6s cubic-bezier(0, 0.75, 0.36, 1);
  transition: height .6s cubic-bezier(0, 0.75, 0.36, 1);
  background-color: #f1f1f1;
}
.box_message > li:nth-of-type(4n+3).active:before,
.box_message > li:nth-of-type(4n+3).active:after{
  height: 588px;
}
.box_message > li:nth-of-type(4n+3):before{
  right: 0;
  width: 720px;
}
.box_message > li:nth-of-type(4n+3):after{
  left: 100%;
  width: calc((100vw - 1140px)/2);
}
.box_message > li:nth-of-type(4n+3) .caption{padding-left: 50px;}
.box_message > li:nth-of-type(4n+3) .name{
  top: 0px;
  left: 50px;
}
.box_message > li:nth-of-type(4n+3).active .name{
  top: -50px;
}
.box_message > li:nth-of-type(4n+3) .name span:nth-of-type(1),
.box_message > li:nth-of-type(4n+3) .name span:nth-of-type(2){color: #fff;}
/*.box_message > (4n+4)
-------------------------------- */
.box_message > li:nth-of-type(4n+4){
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.box_message > li:nth-of-type(4n+4) .caption{padding-right: 50px;}
.box_message > li:nth-of-type(4n+4) .name{
  top: 130px;
  right: -100px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.box_message > li:nth-of-type(4n+4).active .name{
  top: 80px;
}



@media screen and (max-width: 767px){
  main .ttlbox01{
      background: #fff url("../img/massage/m_h1_bg_sp.png") no-repeat center bottom / cover;
      height: 580px;
  }
  main .ttlbox01.fade h1{
    bottom: 0;
    -webkit-transition: bottom .7s cubic-bezier(0.15, 0.8, 0.15, 1) 1.3s, opacity .7s cubic-bezier(0.15, 0.8, 0.15, 1) 1.3s;
    transition: bottom .7s cubic-bezier(0.15, 0.8, 0.15, 1) 1.3s, opacity .7s cubic-bezier(0.15, 0.8, 0.15, 1) 1.3s;
  }
  main .ttlbox01.fade.active h1{
    top: auto;
    bottom: 46px;
    padding: 0 8%;
    width: 100%;
    -webkit-transform: translate(50%,0);
    -ms-transform: translate(50%,0);
    transform: translate(50%,0)
  }
  .box_message {
    padding: 150px 3% 0;
    margin-top: 0;
    overflow: hidden;
  }
  .box_message > li + li{
    margin-top: 150px;
  }
  .box_message > li,
  .box_message > li:nth-of-type(4n+2),
  .box_message > li:nth-of-type(4n+4){
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .box_message > li .photo_box,
  .box_message > li .bg_gray01 picture{
    width: 100%;
    height: auto;
  }
  .box_message > li picture{
    top: 0;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  .box_message > li.active picture{
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    z-index: 0;
  }
  .box_message > li .caption{
    min-height: 0;
    max-width: 100%;
  }
  .box_message > li dl{
    top: 0;
  }
  .box_message > li .caption dl{
    padding: 30px 20px;
  }
  .box_message > li .caption em{
    font-size: 22px;
    font-size: "Hiragino Kaku Gothic Pro", "游ゴシック", "MS PGothic", "ＭＳ Ｐゴシック", メイリオ, sans-serif;
  }
  .box_message > li .caption dd{
    font-size: 16px;
    margin-top: 10px;
  }
  .box_message > li .name span{
    font-size: 40px;
  }
  .box_message > li .name span:first-letter{
    font-size: 54px;
  }
  .box_message > li:nth-of-type(4n+1) .caption,
  .box_message > li:nth-of-type(4n+2) .caption,
  .box_message > li:nth-of-type(4n+4) .caption,
  .box_message > li:nth-of-type(4n+4) .caption{
    padding: 0;
  }
  .box_message > li:nth-of-type(4n+1).fade .name,
  .box_message > li:nth-of-type(4n+2).fade .name,
  .box_message > li:nth-of-type(4n+3).fade .name,
  .box_message > li:nth-of-type(4n+4).fade .name{
    top: calc(-58vw + 90px);
  }
  .box_message > li:nth-of-type(4n+1).fade.active .name,
  .box_message > li:nth-of-type(4n+2).fade.active .name,
  .box_message > li:nth-of-type(4n+3).fade.active .name,
  .box_message > li:nth-of-type(4n+4).fade.active .name{
    right: auto;
    left: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    top: calc(-58vw - 90px);
  }
  .box_message > li{
    background-color: transparent;
    -webkit-transition: background-color .3s ease .5s;
    transition: background-color .3s ease .5s;
  }
  .box_message > li.fade.active{
    background-color: #f1f1f1;
  }
  .box_message > li.fade.active:nth-of-type(2n){
    background-color: #f1f8e5;
  }
  .box_message > li.fade .name{
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
  }
  .box_message > li:nth-of-type(2n).fade .name{
    right: 0;
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .box_message > li.fade.active .name{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .box_message > li:nth-of-type(2n).fade.active .name{
    right: 0;
  }
  .box_message > li:nth-of-type(4n+3) .caption{
    padding-left: 0;
  }
  .box_message > li:nth-of-type(4n+1) .bg_gray01:before,
  .box_message > li:nth-of-type(4n+3):before,
  .box_message > li:nth-of-type(4n+3):after{
    content: none;
  }
  .box_message > li:nth-of-type(4n+1) .bg_gray01:after{
    top: 0;
    bottom: 0;
  }
  .box_message > li:nth-of-type(4n+3) .name span:nth-of-type(1){
    color: #f1f1f1;
  }
  .box_message > li:nth-of-type(4n+3) .name span:nth-of-type(2){
    color: #eef8e5;
  }
  .box_message > li .name span:nth-of-type(1){
    width: auto;
  }
}