@charset "utf-8";

img{
    max-width: 90%;
    margin:0 auto;
    text-align : center
}
h1{
    max-width: 100%;
    margin: 0 0;
    text-align : center
}
h2{
    max-width: 80%;
    margin: 50px auto;
}
.center{
    margin:0 auto;
    text-align : center
}
section{
    max-width: 70%;
    margin:0 auto;
}

.fade-in-left {
  opacity: 0; /* 初期状態では透明 */
  transform: translateX(-100px); /* 左にオフセット */
  animation: fadeInLeft 1.5s ease-out forwards; /* アニメーションを適用 */
  color: white;
  margin: 0 auto;
  padding: 0 auto;
  border-radius: 8px;
  font-size: 1.5rem;
  text-align: center;
}
.block{
  margin: 50px auto;
  max-width: 80%;
}

/* アニメーションの定義 */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadein {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

/* 矢印 */
.cp_arrows {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp_arrows .cp_arrow {/*矢印を配置するベースの設定*/
  position: absolute;
  width: 100px;
  height: 10px;
  opacity: 0;/*スタートは透明*/
  transform: scale(0.3);/*スタートは30%に縮小*/
  animation: arrow-move07 3s ease-out infinite;
}
.cp_arrows .cp_arrow:first-child {/*1秒ずらしてアニメーション*/
  animation: arrow-move07 3s ease-out 1s infinite;
}
.cp_arrows .cp_arrow:nth-child(2) {/*2秒ずらしてアニメーション*/
  animation: arrow-move07 3s ease-out 2s infinite;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {/*矢印全体の設定*/
  position: absolute;
  content: '';
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 100%;
  background: rgb(48, 255, 2);
  border-radius: 2px;
}
.cp_arrows .cp_arrow:before {/*矢印左の線の位置と傾斜*/
  left: 1px;
  transform: skewY(30deg);
}
.cp_arrows .cp_arrow:after {/*矢印左の線の位置と傾斜*/
  right: 1px;
  transform: skewY(-30deg);
}
@keyframes arrow-move07 {
   25% { opacity: 0.6;}
   43% { transform: translateY(1em); opacity: 0.8;}
   62% { transform: translateY(2em); opacity: 1;}
  100% { transform: translateY(3em) scale(0.5); opacity: 0;}
}
/* ここまで */

/* #yazirushi{
max-width: 50%;
} */

.woman,.man{
    display: flex;
    justify-content: center;
    margin: 10% 10px;
}
/* ここからスワイパーー */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
}



/* フローティングバナー */
.fixed_banner {
  position: fixed; /* 追従させる為にfixedの値を記述します */
  z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
  bottom: 0%; /* 上から150pxのところにバナーを配置します */
  right: 3px; /* 右から40pxのところにバナーを配置します */
  }
  
  .fixed_banner_pc {
  width: 300px; /* バナーの横幅を指定してあげます */
  }
  
  .floating-banner:hover {
  opacity: .8; /* マウスが重なった時に少し透過させます */
  }
  
  .fixed_banner_sp {
  display: none; /* PCではスマホ用のバナーは非表示にします */
  }
  
  
  @media screen and (max-width: 480px) { /* メディアクエリを使ってスマホ用のブレイクポイントを指定 */
  
    .fixed_banner_pc{
      display: none;
    }


  .fixed_banner_sp {
  display: inline-block; /* 消していたスマホ用のバナーを表示させます */
  width: 100vw; /* スマホの画面幅いっぱいにバナーを表示させます */
  }
  
  }
/* ここまで */

footer{
    width: 100%;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    }