/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 11 2023 | 00:09:02 */
/*スライドショーの左側に空く隙間対策のベース変更*/
body.home{
    min-width:initial;
  }
  
  /*背景を全幅にする*/
  .full-width{
    margin: 0 calc(50% - 50vw);
    width: 100hw;
  }
  
  .side-margin{
    margin:0 60px;
  }
  
  /*固定したいところ*/
  .sticky-area{
    position: sticky;
    top:0;
    overflow:hidden;/*これがないとページ下部にスライドショーがはみ出る*/
  }
  
  /*背景色つけたいところ*/
  .bgcolor{
    position:sticky;
    background-color:#fff;
    outline: 3px solid #fff;/*これがないとページ下部に隙間がでるケースがある*/
  }
  
  /*ページ下部*/
  .es-separate-container #primary{
    padding-bottom:0;
  }
  
  /*右側に隙間が空く要素につける*/
  /*body.home .entry-content > .width-adjust,
  body.home .entry-content > .wp-block-uagb-columns{
    max-width:100vw!important;
    width:100vw!important;
  }*/
  
  .slideShow {
    height: 100vh;
    display: flex;
    position: sticky;
    top: 0;
  }
  
  /*フッター上部に隙間が空く問題対処*/
  body.home .entry-content>:last-child,
  body.home .entry-summary>:last-child,
  body.home .page-content>:last-child {
    margin-bottom:-1px;
  }
  /*横スクロールが発生してしまう問題対処*/
  body.home{
    overflow-x:hidden!important;
  }
  
  /*スクロールボタン*/
  #content-top{
    position:relative;
    margin: 0 calc(50% - 50vw);
    width: 100hw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .scroll-button a{
    font-size: 20px;
    font-weight:bold;
    color: #fff;
    z-index:30;
    display: inline-block;
    position: absolute;
    top:-220px;/*.content-topに対して*/
    right:3%;
    padding: 10px 10px 110px;
    overflow: hidden;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    writing-mode: vertical-lr;
    }
  .scroll-button .scroll-text{
      font-style:italic!important;
      margin-left: 5px;
  }
  
  .scroll-button a::before {
    content: '';
    position: absolute;
    bottom: 110px;
    left: 5%;
    width: 2px;
    height: 110px;
    background: rgba(255, 255, 255, .4);
  }
  .scroll-button a::after {
    content: '';
    position: absolute;
    bottom: 110px;
    left: 5%;
    width: 2px;
    height: 110px;
    background: #fff;
    animation: scroll 2.5s cubic-bezier(1, 0, 0, 1) infinite;
  }
  
  @keyframes scroll {
    0% {
      transform: scale(1, 0);
      transform-origin: 0 0;
    }
    50% {
      transform: scale(1, 1);
      transform-origin: 0 0;
    }
    50.1% {
      transform: scale(1, 1);
      transform-origin: 0 100%;
    }
    100% {
      transform: scale(1, 0);
      transform-origin: 0 100%;
    }
  }
  
  /*トップイメージ*/
  .sticky-area .bgI {
      position   : absolute;  
      top        : 0;
      left       : 0;
      bottom     : 0;
      right      : 0;
      background-repeat: no-repeat;
      background-size: cover;
    }
  
  /*トップイメージに半透明で上乗せ*/
  .sticky-area .cover{
      background-color: rgba(0,0,0,0.3);
      animation : bgColor-animation 24s 0s infinite;
      z-index:20;
  }
  
  /*上乗せ半透明のアニメーション*/
  @keyframes bgColor-animation {
    0% {background-color: rgb(0, 0, 0, 0.1);} /*100％の色に合わせる*/
   10% {background-color: rgba(50, 110, 150, 0.3);}
   70% {background-color: rgba(0, 0, 0, 0.3);}
  100% {background-color:  rgba(0, 0, 0, 0.3);}
  }
  
  /*トップイメージの画像*/
  .img-1{
      background-image: url("/app/uploads/sites/317/2023/10/top_image_01_1.jpg");/*1つ目の画像*/
      animation : slide-animation1 24s 0s infinite;
      z-index: 10;
      background-position: 0px 0px;/*スタートの位置を変更*/
  }
  .img-2{
      background-image: url("/app/uploads/sites/317/2023/10/top_image_02.jpg");/*2つ目の画像*/
      animation : slide-animation2 24s 0s infinite;
      z-index: 10;
      background-position: 0px -100px;/*スタートの位置を変更*/
    }
  .img-3{
      background-image: url("/app/uploads/sites/317/2023/10/top_image_03.jpg");/*3つ目の画像*/
      animation : slide-animation3 24s 0s infinite;
      z-index: 10;
      background-position: 0px -100px;/*スタートの位置を変更*/
  }
  /*トップイメージに表示する文言*/
  .sticky-area .bgMessage {
      font-weight:bold;
      color: #fff;
      position : absolute;  
      top:45%;
      left:50%;
      transform:translate(-50%,-50%);
      z-index:30;
      text-align:center;
      font-size:200%;
	  width: 80%;
    }
  .sticky-area .m1 {
      animation : slide-text-anima1 24s 0s infinite;
  }
  .sticky-area .m2 {
      animation : slide-text-anima2 24s 0s infinite;
  }
  .sticky-area .m3 {
      animation : slide-text-anima3 24s 0s infinite;
  }

.m2 img{
  width: 15%;
}
.m3 img{
  width: 50%;
}
  
  
  /*--------------------------------------------------------------------------------スライドショー*/
  @keyframes slide-animation1 {
        0% {opacity: 0; transform: translate(0px, 0px) scale(1.5) ;}
      10% {opacity: 1;}
      30% {opacity: 1;}
      40% {opacity: 0;}
      100% {opacity: 0; transform: translate(0px, 0px) scale(1) ;}
  }
   
  @keyframes slide-animation2{
        0% {opacity: 0; transform: translate(0px,0px) scale(1) ;}
      30% {opacity: 0;}
      40% {opacity: 1;}
      60% {opacity: 1;}
      70% {opacity: 0;}
      100% {opacity: 0; transform: translate(0px, 0px) scale(1.5) ;}
  }
  
  @keyframes slide-animation3{
      0% {opacity: 0; transform: translate(0px,0px) scale(1.5) ;}
      60% {opacity: 0;}
      70% {opacity: 1;}
        90% {opacity: 1;}
      100% {opacity: 0;  transform:translate(0px, 0px) scale(1) ;}
  }
  @keyframes slide-text-anima1{
      0% {opacity: 0; z-index:0;}
      10% {opacity: 1; z-index:100;}
      30% {opacity: 1; z-index:100;}
      40% {opacity: 0; z-index:0;}
      100% {opacity: 0; z-index:0;}
  }
  @keyframes slide-text-anima2{
      0% {opacity: 0; z-index:0;}
      30% {opacity: 0; z-index:0;}
      40% {opacity: 1; z-index:100;}
      60% {opacity: 1; z-index:100;}
      70% {opacity: 0; z-index:0;}
      100% {opacity: 0; z-index:0;}
  }
  @keyframes slide-text-anima3{
      0% {opacity: 0; z-index:0;}
      70% {opacity: 0; z-index:0;}
      85% {opacity: 1; z-index:100;}
        90% {opacity: 1; z-index:100;}
      100% {opacity: 0; z-index:0;}
  }
  
  /*--------------------------------------------------------------------------------タブレット*/
  @media screen and (max-width: 1024px) {
  .side-margin{
    margin:0 50px;
  }
  }
  
  /*--------------------------------------------------------------------------------SP*/
  @media screen and (max-width: 599px) {
   .img-1{
      background-position: -400px 0px;
    }
  .img-2{
      background-position: -200px 0px;
    }
  .img-3{
      background-position: 0px 0px;
    }
  .sticky-area .bgMessage {
      font-size:130%;
    }
  
  @keyframes slide-animation1 {
        0% {opacity: 0; transform: translate(0px, 0px) scale(1) ;}
      10% {opacity: 1;}
      30% {opacity: 1;}
      40% {opacity: 0;}
      100% {opacity: 0; transform: translate(0px, 0px) scale(1.2) ;}
  }
   
  @keyframes slide-animation2{
        0% {opacity: 0; transform: translate(0px, 0px) scale(1) ;}
      30% {opacity: 0;}
      40% {opacity: 1;}
      60% {opacity: 1;}
      70% {opacity: 0;}
      100% {opacity: 0; transform: translate(0px, 0px) scale(1.3) ;}
  }
  
  @keyframes slide-animation3{
      0% {opacity: 0; transform: translate(0px,0px) scale(1.5) ;}
      60% {opacity: 0;}
      70% {opacity: 1;}
        90% {opacity: 1;}
      100% {opacity: 0; transform: translate(0px, 0px) scale(1) ;}
  }
  @keyframes slide-animation4{
      0% {opacity: 0;}
      70% {opacity: 0;}
      85% {opacity: 1;}
        90% {opacity: 1;}
      100% {opacity: 0;}
  }
  
  .scroll-button a {
    font-size:14px;
    top: -155px;
    right:15px;
  }
  .scroll-button a::before {
    bottom: 113px;
    left: 5%;
    height: 78px;
  }
   
  .scroll-button a::after {
    bottom: 113px;
    left: 5%;
    height: 78px;
  }
    
  .side-margin{
   margin: 0 10px;  
  }

.m2 img{
  width:30%;
}
.m3 img{
  width:100%;
}    
    
  }
/*カスタム
-------------------------------------------------- */
.m3-txt1 {
  margin-left:50px; 
  font-size:30px;
}
.m3-txt2 {
  font-size:25px;
}

@media (max-width: 481px){
  .m2-txt1 {
    font-size:20px;
  }
  .m3-txt1 {
    margin-left:30px; 
    font-size:20px;
  }
  .m3-txt2 {
    font-size:16px;
  }
}