/*
共通要素
*/
html {
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
  /* font-family: 'Pacifico', cursive; */
  /* font-family: 'Lilita One', sans-serif; */
  /* font-family: 'DotGothic16', sans-serif; */
  /* font-family: 'Kaisei Decol', serif; */
  /* font-family: 'RocknRoll One', sans-serif; */
  /* font-family: 'Stick', sans-serif; */
  /* font-family: 'Yusei Magic', sans-serif; */
  /* font-family: 'Potta One', cursive; */
}

.fa:after, .fa:before, .far:after, .far:before, .fas:after, .fas:before,.fa-solid:before {
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
}

i{
  font-style: normal;
}

body {
  font-size: 20px;
}

.mw {
  padding: 0px 40px;
  max-width: 1200px;
  margin: 0px auto;
}

p {
  color: #5c5c5c;
}

ul {
  padding-left: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.main_wrapper {
  padding: 50px 200px;
}

.br {
  display: inline-block;
}

.title {
  text-align: center;
  margin: 20px 0px;
  color: #5c5c5c;
  border-bottom: 3px #00aa63 solid;
  padding-bottom: 15px;
}

.title p {
  font-size: 15px;
}

/* リンクボタン */

.btn.over {
  padding: 40px 0 0px;
}

.btn {
  text-align: center;
  margin: 0px auto;
  padding: 40px 0 40px;
}

.btn a {
  padding: 32px 20px;
  width: 40%;
  color: #fff;
  display: block;
  border-radius: 0px 30px;
  font-size: 32px;
  margin: 0 auto;
  background-color: #f4a360;
  font-weight: 500;
  text-decoration: none; /* 下線を消す */
  
  /* --- アニメーションの追加 --- */
  transition: all 0.3s ease; /* 0.3秒かけて滑らかに変化させる */
  backface-visibility: hidden; /* 拡大時の文字のガタつき防止 */
}

/* かざした時（ホバー時）の動き */
.btn a:hover {
  background-color: #ff7c10; /* 少し濃いオレンジ（お好みの色に！） */
  transform: scale(1.05);    /* 1.05倍に大きくする */
  box-shadow: 0 10px 25px rgba(244, 163, 96, 0.4); /* ふわっと浮いたような影 */
}

/* クリックした瞬間（アクティブ時）の動き */
.btn a:active {
  transform: scale(0.98);    /* 押した感じを出すために少しだけ小さくする */
}

.btn.link a {
  background-color: #00d084;
}

.btn a:hover {
  color: #f2f2f2;
}

.image_box img {
  width: 80%;
}

/* Swiper全体の高さなどは親で制御 */
.swiper {
  width: 100%;
  height: auto; /* 高さを固定にするならここでもOK */
  padding-bottom: 50px; /* ページネーション用の余白 */
}

/* 
 * 修正ポイント：
 * .swiper--wrapper（ハイフン2つ）になっていたのを修正
 * JSの計算を邪魔しないように、ここではwidthを指定しない
 */
.swiper-wrapper {
  box-sizing: border-box;
}

.swiper-slide {
  /* 修正：width: 100% を削除（JSに任せる） */
  height: auto; 
  text-align: center;
border-radius: 80px 0;
    border: 12px double #fff;
  box-sizing: border-box; /* 修正：これがないとborderの分だけズレます */
  
  /* 修正：line-heightの代わりにflexで中央配置 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px; /* 上下のパディングを調整 */
  color: #ffffff;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 20px 10px !important;
}

/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
  background-color: rgb(255, 255, 255)!important;
  height: 30px!important;
  width: 30px!important;
}

/* すべてのスライドの基本状態（アクティブでない時） */
.swiper-slide {
  opacity: 0.6;
  transform: scale(0.9)!important;
  transition: opacity 0.4s ease, transform 0.4s ease !important; 
  will-change: opacity, transform; /* ブラウザにアニメーションを通知 */
}

/* アクティブなスライド（真ん中に来た時） */
.swiper-slide-active {
  transform: scale(1)!important;  /* サイズを100%（元のサイズ）に */
  opacity: 1;            /* 不透明度を100%に */
}

/* line-heightをリセット（スライド内の文字用） */
.top_about_slide_profile p {
  line-height: 1.6;
  margin: 5px 0;
}

/* 背景色の設定（ここは変更なし） */
.swiper-slide{ background-color: #f3a26041; }

/* デフォルトアイコンを消す */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* 左側のボタン */
.swiper-button-prev {
  background-image: url("img/arrow-left.png"); /* 画像パス */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 60px;  /* 画像のサイズに合わせる */
  height: 60px;
}

/* 右側のボタン */
.swiper-button-next {
  background-image: url("img/arrow-right.png"); /* 画像パス */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 60px;
  height: 60px;
}

/* アニメーション前の状態 */
.inv-poyon {
  opacity: 0;
  transform: scale(0); /* 最初は大きさ0 */
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}

/* 画面に入った時の状態 */
.inv-poyon.is-inview {
  opacity: 1;
  transform: scale(1); /* 元の大きさに戻る（この時ポヨーンとする） */
}

/* スライダー全体の枠を安定させる */
.magican-slider {
    width: 100%;
    margin: 40px auto;
    padding-bottom: 50px;
    overflow: hidden; /* はみ出し防止 */
}

.magican-slider .swiper-slide {
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform: scale(0.85); /* 0.8だと小さすぎたので少し調整 */
    opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    overflow: hidden;
    background: #5c5c5c; /* 画像の隙間から背景が見えないように */
}

/* アクティブなスライド */
.magican-slider .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
    z-index: 2;
}

/* 画像：ここが重要！widthを100%にしてSwiperの幅に従わせる */
.magican-slider .swiper-slide img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}

/* ページネーションの色が消えてる場合があるので念のため */
.magican-slider .swiper-pagination-bullet-active {
    background: #f4a360 !important; /* あなたのテーマカラー */
}

@media screen and (max-width: 767px) {
  body {
    font-size: 24px;
  }

  .mw {
    padding: 0px 20px;
  }

  .btn a {
    width: 80%;
  }

    .magican-slider .swiper-slide img {
        height: 380px;
    }
}