/* PC表示（769px以上） */
.sp_only {
  display: none;
}
.pc_only {
  display: block; /* もしくは flex, inline-block など、元の要素の表示形式に合わせてください */
}

/* SP表示（768px以下） */
@media screen and (max-width: 768px) {
  .sp_only {
    display: block; /* もしくは flex, inline-block など */
  }
  .pc_only {
    display: none;
  }
}

/* --- 全画面FVセクション --- */
.fv-section {
    width: 100%;
    height: 100vh; /* 画面の高さいっぱいに表示 */
    /* 背景画像の設定 */
    background-image: url('../image/fv.png'); 
    background-size: cover; /* 画面全体を覆うように拡大縮小 */
    background-position: center top; /* 中央上部を基準に配置 */
    background-repeat: no-repeat;
    position: relative; /* 子要素の絶対配置の基準にする */
    overflow: hidden; /* はみ出しを隠す */
}

.fv-inner {
    max-width: 1200px; /* コンテンツの最大幅（適宜調整） */
    height: 100%;
    margin: 0 auto; /* 中央寄せ */
    position: relative; /* ボタン配置の基準 */
}

.fv-section_sp {
    max-width: 100%;
   aspect-ratio: 12 / 21;   /* 画像の比率を指定（例：横16:縦9） */
    /* 背景画像の設定 */
    background-image: url('../image/sp_fv.png'); 
    background-size: contain; /* 画面全体を覆うように拡大縮小 */
    background-position: center top; /* 中央上部を基準に配置 */
    background-repeat: no-repeat;
    position: relative; /* 子要素の絶対配置の基準にする */
    overflow: hidden; /* はみ出しを隠す */
}

.fv-inner {
    max-width: 100%; /* コンテンツの最大幅（適宜調整） */
    height: 100%;
    margin: 0 auto; /* 中央寄せ */
    position: relative; /* ボタン配置の基準 */
}


/* --- CTAボタンの配置（画像ボタンの場合） --- */
.cta-container {
    position: absolute;
    /* 元画像と同じ位置にくるように調整（要微調整） */
    left: 15%; /* 左からの位置 */
    bottom: 25%; /* 下からの位置 */
    z-index: 10; /* 画像より前面に表示 */
}

.cta-button-link {
    display: block;
    text-decoration: none; /* リンクの下線を消す */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション */
}

.cta-button-img {
    display: block;
    width: 420px; /* ボタン画像の横幅（元画像のサイズに合わせる） */
    height: auto; /* 高さは自動調整 */
    border: none;
    cursor: pointer;
}

/* --- ホバーエフェクト（マウスを乗せた時の動き） --- */
.cta-button-link:hover {
    transform: translateY(-5px); /* 少し上に浮かす */
    filter: brightness(1.05); /* 少し明るくする */
}

.cta-button-link:active {
    transform: translateY(1px); /* クリックした時に少し沈ませる */
}

/* --- 画像セクション --- */
.image-section {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.image-wrapper {
    width: 100%;
    /* 画像下の微細な隙間を防ぐための設定 */
    line-height: 0; 
}

.full-width-img {
    display: block; /* 余白除去 */
    width: 100vw;   /* 画面幅いっぱいに指定 */
    height: auto;   /* 比率を維持して高さを自動調整 */
    object-fit: cover; /* 画像が崩れる場合は調整 */
}

.headline{
    max-width: 1440px;
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin: auto;
    padding: 20px 0;
}

.logo{
    max-width: 260px;   
    padding-left: 20px;
}
.logo img{
    width: 100%;
}
.headcta{
    max-width: 360px;   
    padding-right: 20px;
}
.headcta img{
        width: 100%;
}
.fv{
    max-width: 1440px;
    width: 90%;
    margin: auto;
}
@media screen and (min-width: 769px) {
.sp-only {display: none;}
}
@media screen and (max-width: 768px) {
  .pc-only {display: none;}
  .fv{width: 100%;
    margin: auto;}
}

/* レイアウトのベース */
.kv-wrap{
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  line-height: 0; /* 画像の下にできる隙間対策 */
}
.kv-bg{
  width: 100%;
  height: auto;
  display: block;
}

/* ボタンの配置（中央下あたり） */
.kv-btn{
  position: absolute;
  left: 50%;
  bottom: 13%;        /* 好みで微調整 */
  transform: translateX(-50%);
  display: inline-block;
}
.kv-btn img{
  display: inline-block; /* ← 中央寄せのためにブロック化 */
  max-width: 640px;
  width: 100%; /* ← レスポンシブ対応 */
  animation: zoomInOut 1s ease-in-out infinite; /* ← 追加！ */
  transform-origin: center center; /* 拡大の基準を中央に */
}

/* スマホ向け位置・サイズ調整 */
@media (max-width: 768px){
  .kv-btn{
    bottom: 5%;
  }
  .kv-btn img{
    width: min(80vw, 420px);
  }
}


.cta_back {
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
  background: url("../image/cta_back.webp");
  background-size: cover; /* ← これ重要！ 画像を縦横比維持で全体にフィット */
  padding: 24px 0; /* ← 上下に余白をつくる */
  text-align: center; /* ← ボタン中央寄せ */
}

.cta_back2 {
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
  background: url("../image/cta_back2.webp") top center;
  background-size: cover; /* ← これ重要！ 画像を縦横比維持で全体にフィット */
  background-repeat: no-repeat;
  padding: 24px 0 200px; /* ← 上下に余白をつくる */
  text-align: center; /* ← ボタン中央寄せ */
}

.cta_back4 {
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
  background: url("../image/cta_back4.webp") top center;
  background-size: cover; /* ← これ重要！ 画像を縦横比維持で全体にフィット */
  background-repeat: no-repeat;
  padding: 24px 0 200px; /* ← 上下に余白をつくる */
  text-align: center; /* ← ボタン中央寄せ */
}


@media screen and (max-width: 768px) {
.cta_back2 { 
  width: 100%;
  margin: -1px auto;
  background: url("../image/cta_back2_sp.webp") top center;
  background-size: contain; /* ← これ重要！ 画像を縦横比維持で全体にフィット */
  background-repeat: no-repeat;
  padding: 0px 20px 80px; /* ← 上下に余白をつくる */
  text-align: center; /* ← ボタン中央寄せ */}


.cta_back4 { 
  width: 100%;
  margin: -1px auto;
  background: url("../image/cta_back4_sp.webp") top center;
  background-size: contain; /* ← これ重要！ 画像を縦横比維持で全体にフィット */
  background-repeat: no-repeat;
  padding: 0px 20px 0px; /* ← 上下に余白をつくる */
  text-align: center; /* ← ボタン中央寄せ */
min-height: 100px; /* ← 画像の高さに合わせて調整してみてください */}
}

.cta_back3 {
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
  padding: 24px 0; /* ← 上下に余白をつくる */
  text-align: center; /* ← ボタン中央寄せ */
}




.cta {
  display: inline-block; /* ← 中央寄せのためにブロック化 */
  max-width: 640px;
  width: 100%; /* ← レスポンシブ対応 */
  animation: zoomInOut 1s ease-in-out infinite; /* ← 追加！ */
  transform-origin: center center; /* 拡大の基準を中央に */
}




@media screen and (max-width: 768px) {
  .cta {
  display: inline-block; /* ← 中央寄せのためにブロック化 */
  width: 90%; /* ← レスポンシブ対応 */
  animation: zoomInOut 1s ease-in-out infinite; /* ← 追加！ */
  transform-origin: center center; /* 拡大の基準を中央に */
}
}

.cta img {
  width: 100%; /* ← ボタン画像を親幅に合わせる */
  height: auto;
  display: block;
}

/* ズームイン・アウトのアニメーション */
@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05); /* ← 拡大（5%） */
  }
  100% {
    transform: scale(1);
  }
}

.container{
    max-width: 1440px;
    width: 90%;
    margin: auto;
}

@media screen and (max-width: 768px) {
 .container {width: 100%;
    margin: auto;}
}


/* スライダー全体 */
.slider-wrapper {
        max-width: 1440px;
        width: 90%;
    margin: auto;
  display: flex; /* スライドのグループを横並び */
  overflow: hidden; /* はみ出たスライドを隠す */
}
/* スライド3枚のグループ */
.slider {
  animation: scroll-left 35s infinite linear .5s both;
  display: flex; /* スライド3枚を横並び */
}
/* スライド */
.slide {
  width: calc(100vw / 10); /* 3はスライドの枚数 */
}
/* スライドの画像 */
.slide img {
  display: block;
  width: 100%;
  margin: 30px 20px;
  padding: 0 20px;
}
/* CSSアニメーション */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* --- 画像の上にボタンを配置するセクション --- */
.problem-section-v2 {
    width: 100%;
    /* 100vwの画像の下に隙間ができないようにする */
    line-height: 0;
    position: relative; /* 画面全体の基準 */
}

.problem-inner-v2 {
    width: 100%;
    position: relative; /* ボタン配置の基準にする */
    overflow: hidden; /* はみ出しを隠す */
}

/* 100vwで表示する画像 */
.problem-bg-img-v2 {
    display: block;
    width: 100vw;   /* 画面幅いっぱいに指定 */
    height: auto;   /* 比率を維持して高さを自動調整 */
}

/* --- CTAボタンの配置（画像ボタンの場合） --- */
.cta-container-v2 {
    position: absolute;
    /* 水平中央配置を維持 */
    left: 50%;
    transform: translateX(-50%); /* translateXは、後ほど常時アニメーションで上書きします */
    /* ボタンの位置合わせ */
    /* bottom値を増やし（例: 22%）、ボタンを上にずらして青いパネルに食い込ませる（要微調整） */
    bottom: 3%; 
    z-index: 10; /* 画像より前面に表示 */
}


.cta-container-v2_1 {
    position: absolute;
    /* 水平中央配置を維持 */
    left: 50%;
    transform: translateX(-50%); /* translateXは、後ほど常時アニメーションで上書きします */
    /* ボタンの位置合わせ */
    /* bottom値を増やし（例: 22%）、ボタンを上にずらして青いパネルに食い込ませる（要微調整） */
    bottom: 2%; 
    z-index: 10; /* 画像より前面に表示 */
}

.cta-container-v3 {
    position: absolute;
    /* 水平中央配置を維持 */
    left: 50%;
    transform: translateX(-50%); /* translateXは、後ほど常時アニメーションで上書きします */
    /* ボタンの位置合わせ */
    /* bottom値を増やし（例: 22%）、ボタンを上にずらして青いパネルに食い込ませる（要微調整） */
    bottom: 16%; 
    z-index: 10; /* 画像より前面に表示 */
}

.cta-button-link-v2 {
    display: block;
    text-decoration: none; /* リンクの下線を消す */
    
    /* ボタンの大きさ調整 */
    /* 元の画像サイズから少し大きくする（例: 1.2倍） */
    transform: scale(1.2); 
    
    transition: opacity 0.3s ease; /* ホバー時のアニメーション（opacityのみに変更） */
}

/* --- ホバーアニメーション（色を薄くする） --- */
.cta-button-link-v2:hover {
    /* 不透明度を下げることで、色を薄く見せる */
    opacity: 0.7; 
}

.cta-button-img-v2 {
    display: block;
    /* ボタン画像の初期横幅。scale(1.2)がかかるため、少し小さめに指定 */
    width: 40vw; 
    /* 横幅の制限（元画像のサイズを目安にする） */
    max-width: 420px; 
    min-width: 300px;
    height: auto; /* 高さは自動調整 */
    border: none;
    cursor: pointer;
}

/* --- 常時ふわふわ動くアニメーション --- */
/* アニメーションの定義 */
@keyframes fluffy-float-v2 {
    0% {
        /* 中央配置の translateX(-50%) と、上向きのずらしを組み合わせる */
        transform: translateX(-50%) translateY(0px);
    }
    50% {
        /* 10pxほどゆっくり上に浮かせる */
        transform: translateX(-50%) translateY(-10px);
    }
    100% {
        /* 元の位置に戻す */
        transform: translateX(-50%) translateY(0px);
    }
}

/* アニメーションをボタンコンテナに適用 */
.cta-container-v2 {
    /* アニメーション名, 時間(3s), 緩急(ease-in-out), 回数(infinite) */
    animation: fluffy-float-v2 3s ease-in-out infinite;
}
/* ベースリセット */
body { margin: 0; font-family: sans-serif; }

/* セクション全体（背景画像設定） */
.faq-section {
  padding: 80px 20px;
  background-image: url('../image/faq_back.png');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

/* ヘッダー */
.faq-header { text-align: center; margin-bottom: 50px; }
.faq-logo-small { display: block; margin: 0 auto 10px; height: 30px; }
.faq-logo-large { display: block; margin: 0 auto; height: 50px; }

/* リストコンテナ */
.faq-container { max-width: 800px; margin: 0 auto; }

/* 質問エリアのスタイル */
.faq-item {
  background-color: #f0f7ff; /* 質問部分の薄い背景色 */
  border: 1px solid #3b6c9b; /* 青い枠線 */
  margin-bottom: 15px;
  border-radius: 4px;
  overflow: hidden;
}

.faq-question {
  padding: 20px 40px 20px 20px;
  cursor: pointer;
  font-weight: bold;
  color: #333;
  list-style: none; /* デフォルトの三角を消す */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* カスタム矢印 */
.faq-question::after {
  content: '';
  position: absolute;
  right: 20px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #3b6c9b;
  border-bottom: 2px solid #3b6c9b;
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.faq-item[open] .faq-question::after {
  transform: rotate(-135deg);
}

/* 開閉アニメーション用（Gridトリック） */
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  background-color: #fff;
}

.faq-item[open] .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
  padding: 0 20px;
}

.faq-item[open] .faq-answer-inner {
  padding: 20px;
  border-top: 1px solid #3b6c9b;
}
@media screen and (max-width: 768px) {
    .faq-answer {
     font-size: 1.4rem;
    line-height: 2.4rem;
    }
}

.footer{
    max-width: 1440px;
    width: 90%;
    background-color: #fff;
    margin: auto;
    padding: 20px 0 0;
    line-height: 2.2em;
}

.footlogo{
  margin:20px auto;
  width: 300px;
}

.footlogo img{
  width: 100%;
}


.container{
    color: #333;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .footer{width: 100%;}
    .container{
    font-size: 0.6em;
}
.footlogo{
  margin:20px auto;
  width: 200px;
}

.footlogo img{
  width: 100%;
}

}