.pc_only {
  display: block;
}
.sp_only {
  display: none;
}
@media screen and (max-width: 768px){
.sp_only {
  display: block;
}
.pc_only {
  display: none;
}

}
.lp_sarari_family {
  width: 100%;
  margin: 0 auto 60px;
  max-width: 820px;
  font-family: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",YuMincho;
  font-weight: 300;

}
.kv{
  position: relative;
}
.kv_ttl {
  position: absolute;
  width: 56%;
  height: 100%;
  top: 0;
  left: 3.8%;
}
.kv_ttl_01{
  position: absolute;
  top: 20%;
    opacity: 0;
}
.kv_ttl_02{
  position: absolute;
  top: 45%;
  width: 33%;
    opacity: 0;
}
.kv_ttl_03{
  position: absolute;
  top: 63%;
  width: 80%;
    opacity: 0;
}
.kv_ttl_01.show{
  animation-name: title01;
    animation-duration: 1.0s;
    animation-timing-function: ease-out;
    animation-delay: 0.0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
.kv_ttl_02.show{
  animation-name: title01;
    animation-duration: 1.0s;
    animation-timing-function: ease-out;
    animation-delay: 0.5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
.kv_ttl_03.show{
  animation-name: title01;
    animation-duration: 1.0s;
    animation-timing-function: ease-out;
    animation-delay: 1.0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
@keyframes title01 {
0% {
    clip-path: inset(0 100% 0% 0%);
    opacity: 1;
}
100% {
    clip-path: inset(0);
    opacity: 1;
}
}

.lead{
  margin: 40px auto 100px;
}
.main_lead{
  margin: 40px auto;
  text-align: center;
  font-size: 2.1rem;
}
.main_lead p{
  line-height: 2;
}
.lead_img{
  opacity: 0;
  transform: translateY(40px);
}
.lead_img.fadein.scrollin{
  opacity: 1;
  transition: .8s .4s ease;
  transform: none;
}
.sub_lead{
  width: 92%;
  text-align: center;
  font-size: 1.5rem;
  margin: 40px auto;
}
.sub_lead p{
  line-height: 2;
  margin: 20px auto;
}
.lead_img{
  width: 80%;
  margin: 20px auto;
  text-align: center;
}

.lp_sarari_family .section{
  display: flex;
}
.main_img{
  width: 440px;
}
.main_img_block{
  width: 440px;
}
.section_02 .main_img_block{
  order: 2;
}
.main_txt_block{
  width: 380px;
  padding-left: 45px;
}
.section_02 .main_txt_block{
  padding-right: 45px;
  padding-left: 0;
}


.main_ttl_img{
  position: relative;
  margin: 0 auto 30px;
  padding-bottom: 5px;
}
.section_01 .main_ttl_img.scrollin:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    border-bottom: solid 2px #00acb1;
    animation: border_anim 0.5s linear forwards;
    animation-delay: 1.0s;
}
.section_02 .main_ttl_img.scrollin:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -5px;
    width: 0;
    border-bottom: solid 2px #00acb1;
    animation: border_anim 0.5s linear forwards;
    animation-delay: 1.0s;
}
@keyframes border_anim {
  0%{
/*     width: 0%;*/
  }
  100%{
    width: 100%;
  }
}

.channel_ttl_img.scrollin:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    border-bottom: solid 2px #00acb1;
    animation: border_anim_center 0.5s linear forwards;
    animation-delay: 1.0s;
}
@keyframes border_anim_center {
  0%{
    transform: scaleX(0);
/*     width: 0%;*/
  }
  100%{
    transform: scaleX(1);
    width: 100%;
  }
}

.list_name{
font-size: 1.7rem;
    margin: 20px auto 5px;
  
  }
.item_list{
  margin-bottom: 15px;
}
.item_list a{
  display: flex;
  margin-bottom: 10px;
}
.link_btn{
  color: #FFF;
  background: #00acb1;
  display: inline-block;
  height: 20px;
  padding: 0 5px;
  margin-left: 20px;
}

.channel_link{
  padding: 100px 60px;
    background: #f7f7f7;
    text-align: center;
}
.channel_ttl_img{
  position: relative;
  margin: 0 auto 30px;
  text-align: center;
  width: 50%;
  padding-bottom: 10px;
}
.channel_txt{
  margin: 20px auto;
  font-size: 1.6rem;
}
.channel_txt p{
  line-height: 1.75;
}
.channel_lead_ttl{
  text-align: center;
    font-size: 2.4rem;
    margin: 10px auto;
}
.channel_lead_copy{
  font-size: 1.6rem;
    line-height: 1.75;
    margin-bottom: 30px;
}
.channel_btn.channel_btn01{
  margin: 0 auto 20px;
    text-align: center;
    background: #999999;
    color: #fff;
    padding: 10px 20px;
    font-size: 1.8rem;
    align-items: center;
    justify-items: center;
    width: 300px;
}
.channel_btn span{
  font-size: 1.4rem;
}
.channel_btn.channel_btn02{
  margin: 0 auto;
    text-align: center;
    background: #00acb1;
    color: #fff;
    padding: 10px 20px;
    font-size: 1.8rem;
    align-items: center;
    justify-items: center;
    width: 300px;
}

.channel_btn a{
  display: block;
  width: 100%;
  height: 100%;
  color: #FFF;
}



.background_color{
    position: absolute;
    width: 440px;
    z-index: -1;
}
.background_color{
    background-color: #eafaf9;
}


.scrollin .style_img{
    opacity: 0;
    animation-delay: 1s;
}
.scrollin .background_color{
    opacity: 0;
    animation-delay: 1s;
}
.section_01 .scrollin .main_img {
    animation: moveanimation01 ease-out 1s both;
}
@keyframes moveanimation01{
    0% {
    opacity: 0;
}
40% {
    transform: translate(0, 0);
    opacity: 1;
}
100% {
    transform: translate(-5px, -5px);
    opacity: 1;
}
}

.section_01 .scrollin .background_color{
    animation: moveanimationback01 ease-out 1s both;
}
@keyframes moveanimationback01 {
    0% {
        opacity: 0;
        }
        40% {
            transform: translate(0, 0);
            opacity: 1;
            }
    
    100% {
        transform: translate(5px, 5px);
        opacity: 1;
    }
}

.section_02 .scrollin .main_img {
    animation: moveanimation02 ease-out 1s both;
}
@keyframes moveanimation02{
    0% {
    opacity: 0;
}
40% {
    transform: translate(0, 0);
    opacity: 1;
}
100% {
    transform: translate(5px, -5px);
    opacity: 1;
}
}

.section_02 .scrollin .background_color{
    animation: moveanimationback02 ease-out 1s both;
}
@keyframes moveanimationback02 {
    0% {
        opacity: 0;
        }
        40% {
            transform: translate(0, 0);
            opacity: 1;
            }
    
    100% {
        transform: translate(-5px, 5px);
        opacity: 1;
    }
}


@media screen and (max-width: 768px){
  .lp_sarari_family {
  margin: 0 auto 20px;

}

.kv_ttl {
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.kv_ttl_01 {
    top: 4%;
}
.kv_ttl_02 {
    top: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.kv_ttl_03 {
    text-align: center;
    position: absolute;
    top: 25%;
    left: 50%;
    width: 90%;
    opacity: 0;
    transform: translate(-50%, -50%);
}
.main_lead{
  font-size: 1.8rem;
}
.lp_sarari_family .section {
    display: block;
}
.main_img_block {
        width: 100%;
        margin-bottom: 30px;
        margin: 0 auto 30px;
    }
.main_img{
  width: 100%;
}    
    .main_txt_block {
    width: 100%;
    margin: 0 auto;
    padding-left: 0;
}
.link_btn {
    margin-left: 10px;
}
.item_list a {
    margin-bottom: 10px;
}
.channel_link {
    padding: 60px 30px;
    background: #f7f7f7;
}
.channel_ttl_img {
    width: 80%;
}

.sub_lead {
    text-align: left;
}
.lead_img {
    width: 100%;
}
.background_color {
    width: 90%;
}
.channel_lead_ttl {
    font-size: 1.8rem;
}
.channel_txt {
    font-size: 1.4rem;
}
.channel_lead_copy {
    font-size: 1.4rem;
}
.sub_lead {
    font-size: 1.4rem;
}
.channel_link{
    text-align: left;
}
}