@charset "utf-8";
#eyecatch {
  background-image: url('../images/pc-top-image3.png');
  background-color: #f0ebea;
  background-size: cover;
  background-position: 40% 50%;
  background-repeat: no-repeat;
  height: 400px;
  padding: 100px 0;
  color: #fff;
  text-align: center;
  position: relative;
  margin-bottom: 30px;
}
#eyecatch .badge {
  background-image: url('../../../img/header/top-banner-20250415.png');
  background-size: contain;
  background-repeat: no-repeat;
  height: 100px;
  position: absolute;
  bottom: -30px;
  left: 13%;
  width: 20vw;
}
.btn_cta {
  align-items: end;
  background-color: #1db46b;
  box-shadow: 0 0.625vw 0 #63d18e;
}

@media (max-width: 768px) {
  #eyecatch {
    background-image: url('../images/sp-top-image-3.webp');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    height: 45vh;
    position: relative;
  }
  #eyecatch .badge {
    background-image: url('../../../img/header/top-banner-20250415.png');
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 13vh;
    left: 50%;
    transform: translateX(-50%);
  }
  .catchcopy {
    color: #D93657;
    font-weight: 500;
    font-size: 4vw;
    text-align: center;
    line-height: 1.6;
    margin: 0.5em auto 0.1em;
  }
  .btn_cta {
    border-radius: 8vw;
    box-shadow: 0 1.042vw 0 #63d18e;
  }
}

/* マンガセクションのスタイル */
.manga-wrapper {
  width: 100%;
  max-width: 800px; /* PCで大きくなりすぎないように制限（お好みで調整可） */
  margin: 30px auto; /* 上下の余白30px、左右中央寄せ */
  padding: 0 15px; /* スマホで端が詰まりすぎないように余白 */
  box-sizing: border-box;
  text-align: center;
}

.manga-wrapper img {
  width: 100%; /* 横幅いっぱいに表示 */
  height: auto; /* 高さは自動調整 */
  border-radius: 10px; /* 角を少し丸くして柔らかい印象に（不要なら削除） */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* うっすら影をつけて立体感を出す */
}

/* スマホ用の微調整 */
@media (max-width: 768px) {
  .manga-wrapper {
    padding: 0; /* スマホでは画面幅いっぱいにするため余白なし */
    margin: 20px auto;
  }
  .manga-wrapper img {
    border-radius: 0; /* スマホでは角丸なし */
  }
}

/* 矢印のデザイン */
.manga-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 15px 0 15px; /* 三角形のサイズ */
  border-color: #5dc33a transparent transparent transparent; /* マンガの枠色に合わせる */
  margin: 25px auto 20px; /* 画像に食い込ませて、下に余白を作る */
  position: relative;
  animation: bounce 1.5s infinite; /* 動きをつける */
}

/* ぷよぷよ動くアニメーション */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* 画像リンクのホバーエフェクト */
.img-link-hover {
  display: block; /* リンクを行全体に広げず、画像の形に合わせる */
  transition: opacity 0.3s; /* 0.3秒かけてふわっと変化 */
}

.img-link-hover:hover {
  opacity: 0.8; /* マウスを乗せると少し透明になる */
  cursor: pointer; /* マウスカーソルを指の形にする */
}

/* ▼▼▼ CTAボタン：文字とアイコンの位置調整 ▼▼▼ */

/* 1. ボタン本体（基準点を作る） */
.btn_cta {
  position: relative;      /* アイコンを配置する「基準」にします */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  
  /* --- 文字の位置調整 --- */
  padding-top: 25px; 
  padding-bottom: 1px;    /* 下の余白（増やすと文字が上に） */
  padding-left: 0px;
  padding-right: 0px;
}

/* 2. 飛行機アイコン（位置を自由に動かす） */
.btn_cta::after {
  /* もともとの設定をリセットして、絶対配置に変えます */
  position: absolute !important;
  margin: 0 !important;    /* 既存の余白を打ち消し */
  
  /* --- アイコンの位置調整（ここをいじってください）--- */
  
  /* 上下の位置：ど真ん中 */
  top: 50% !important;
  transform: translateY(-50%) !important;
  
  /* 左右の位置：右端から何px離すか */
  right: 20px !important;  
  
  /* ※もしアイコンのサイズを変えたい場合は以下を調整 */
  /* width: 2.5em !important; */
  /* height: 2.5em !important; */
}

/* 3. スマホでの見え方調整 */
@media (max-width: 768px) {
  .btn_cta {
    padding-bottom: 12px; /* スマホでの文字の高さ調整 */
  }
  
  .btn_cta::after {
    /* スマホではアイコンを少し内側/外側にしたい場合ここを調整 */
    right: 15px !important; 
  }
}