/*
Theme Name:hello-child
Template:hello-elementor
Version:1.0
*/
ul.youyaku{list-style-type: none;font-size:15px;border:5px solid #666666;padding:10px;border-radius:5px;margin:10px 0;}
ul.youyaku:before{content:"このNEWSのここがポイント！";font-size:25px;font-weight:bold;}
ul.youyaku li{margin:0px 0px;}
ul.youyaku li:before{content:"★";margin-right:5px;}


.staff_post_comment_area{
display: flex;
flex-direction: row;
width:100%;
margin:10px 0px;
}
.staff_post_comment_area:nth-child(even){flex-direction:row-reverse;}
.message_staff_icon{width:20%;text-align:center;}
.message_staff_icon img{width:100px;border-radius:100%;}
.hukidashi_dot{width:15px;height:15px;background-color:#eeeeee;margin:10px 2px; border-radius:100%;}
.hukidashi_dot:nth-child(even){margin-top:20px;width:10px;height:10px;}
.message_staff{width:60%;background-color:#eeeeee;padding:5% 2%;margin:1% 5%;border-radius:20px;}
.staff_post_comment_area:nth-child(even) .message_staff{background-color:#0980FF;color:#ffffff;}
.staff_post_comment_area:nth-child(even) .hukidashi_dot{background-color:#0980FF;}
.staff_post_comment_sec{
  .comment_box{
    &:nth-child(even){
      .comment_text{
        color: #ffffff;
      }
    }
    .responsive-img{
      border-radius:100%;
    }
    .comment_text{
      font-size: 20px;
      font-weight: 900;
    }
  }
}

/************************
area spot loop item images
*************************/
.area_kyabakura:nth-of-type(1) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/ca_1.jpg) no-repeat;
background-size: contain;
}
.area_kyabakura:nth-of-type(2) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/ca_2.jpg) no-repeat;
background-size: contain;
}
.area_kyabakura:nth-of-type(3) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/ca_3.jpg) no-repeat;
background-size: contain;
}
.area_huzoku:nth-of-type(1) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/hu_1.jpg) no-repeat;
background-size: contain;
}
.area_huzoku:nth-of-type(2) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/hu_2.jpg) no-repeat;
background-size: contain;
}
.area_huzoku:nth-of-type(3) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/hu_3.jpg) no-repeat;
background-size: contain;
}
.area_nanpa .area-spot-loop-img{
background:url(https://iphone-deaikei.com/wp-content/uploads/na_club.jpg) no-repeat;
background-size: contain;
}
div[title*="ドンキ"],div[title*="ドン・キ"]{
background:url(https://iphone-deaikei.com/wp-content/uploads/na_don.jpg) no-repeat !important;
background-size: contain !important;
}
div[title*="ラウンドワン"]{
background:url(https://iphone-deaikei.com/wp-content/uploads/unnamed.jpg) no-repeat !important;
background-size: contain !important;
}

div[title*="ピカソ"]{
background:url(https://iphone-deaikei.com/wp-content/uploads/na_pi.jpg) no-repeat !important;
background-size: contain !important;
}

.area_restaurant:nth-of-type(1) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/re_1.jpg) no-repeat;
background-size: contain;
}
.area_restaurant:nth-of-type(2) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/re_2.jpg) no-repeat;
background-size: contain;
}
.area_restaurant:nth-of-type(3) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/re_3.jpg) no-repeat;
background-size: contain;
}
.area_hotel:nth-of-type(1) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/hotel_1.jpg) no-repeat;
background-size: contain;
}
.area_hotel:nth-of-type(2) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/hotel_2.jpg) no-repeat;
background-size: contain;
}
.area_hotel:nth-of-type(3) .area-spot-loop-img{background:url(https://iphone-deaikei.com/wp-content/uploads/hotel_3.jpg) no-repeat;
background-size: contain;
}


/*animation 無限ループ*/
.infinate{animation-iteration-count:infinite !important;}

/*グラデテキスト*/
.gradient_text_pink{
  h1,h2,h3,h4,h5,div,span{
    background: linear-gradient(90deg, rgba(149,0,255,1) 0%, rgba(255,23,90,1) 48%, rgba(255,121,162,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color:inherit !important;
  }
}

.gradient_text_yellow {
  h1,h2,h3,h4,h5,div,span{
    background: linear-gradient(144deg, rgba(255,123,28,1) 4%, rgba(255,236,0,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color:inherit !important;
  }
}
/************
LOOPに矢印リンク
**************/
/*※アイコンに設置*/
.arrow-link .elementor-icon:hover {
    animation: arrow-right 0.5s ease-in-out;
}
/*記事LOOPに設置*/
.arrow-before{
  position: relative;
}
.arrow-before:after{
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  color:#000000;
  z-index:2;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  font-weight:bold;
}
.arrow-before:hover:after{
animation: arrow-right 0.5s ease-in-out;
}

@keyframes arrow-right {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 0;
    transform: translate3d(10px, 0, 0);
  }
  50.1% {
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/***********
スライドボタン
***********/
/* ボタン */
.slide-btn{
  a{
    position: relative;
    overflow: hidden;
    transition: ease 0.2s;
    z-index: 1;
    &:before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
      transform: scale(0, 1) ;
      transform-origin: right top;
      background-color: rgba(0, 0, 0, 0.2);
    }
    &:hover::before {
      transform-origin: left top;
      transform: scale(1, 1);
    }
    .elementor-button-text{
      z-index: 99;
    }
    .elementor-button-icon{
      z-index: 99;
    }
  }
  &.two-row-txt-button{
    .elementor-button-icon{
      font-size: 50px;
    }
  }
  &.secound-color{
    a:before{
      background-color: rgba(255, 255, 255, 1);
    }
  }
}


/* アニメーションの定義 */
@keyframes floatFade {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  25% {
    transform: translateY(-10px);
    opacity: 1;
  }
  50% {
    transform: translateY(-15px);
    opacity: 1;
  }
  75% {
    transform: translateY(-10px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}


/**********************
マーカー
& style_js記述
**********************/
.marker {
  background:linear-gradient(transparent 50%, rgba(239, 246, 255, 1) 50%); /* マーカーを引く */
  display: inline;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition:background-size 1.5s;
  &.on{
    background-size: 100% 100%;
  }
}