@charset "UTF-8";
/*メディアクエリ*/
/*
//Tablet表示のVW変換関数
$tbBreakPoint: 1000;
@function pxTbToVw($pxValue) {
	@return (($pxValue / $tbBreakPoint) * 100) + vw;
}
*/
* {
  word-break: break-all;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 0;
  min-width: 0;
}

_:lang(x)::-ms-backdrop, .selector {
  font-family: "Segoe UI", Meiryo, sans-serif;
}

html, body, input, textarea, select {
  font-size: 26px;
  color: #1a1a1a;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1;
}
@media screen and (max-width: 750px) {
  html, body, input, textarea, select {
    font-size: 3.4666666667vw;
  }
}

body {
  margin: 0;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

p {
  margin: 0;
}

img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;
}

a {
  color: #1a1a1a;
  text-decoration: none;
}
a:hover, a:active, a:focus {
  color: #4d4d4d;
}
a:hover img {
  opacity: 0.8;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

sup {
  font-size: 0.5em;
  vertical-align: top;
}

/* ------------------------------
   セクション共通
   背景はセクション要素に指定（=全幅）。中身は .container で 750px 固定。
------------------------------ */
.section {
  width: 100%;
  position: relative;
  /* 背景画像を使う場合の推奨設定 */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  /* 上下の余白（PC想定）。必要に応じて調整 */
  padding: 40px 0;
}

/* コンテンツは中央に750px固定で収める */
.section .container {
  width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------
   スマホ対応（任意）
   指定が無ければPC前提でOKですが、SPで横スクロールを避けるための最低限。
------------------------------ */
@media (max-width: 750px) {
  .section .container {
    width: 100vw;       /* 画面幅にフィット */
    padding-left: 0;    /* 余白が必要ならここで調整 */
    padding-right: 0;
  }
  .section {
    padding: 24px 0;    /* SPの上下余白をやや小さめに */
  }
}

/********************************
	flexbox 基本class
	wrapやjustify-contentの指定は個別のcss classで追記する
********************************/
*.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 751px) {
  .wrapper .sp_only {
    display: none !important;
  }
}
@media screen and (max-width: 750px) {
  .wrapper {
    width: 100%;
    max-width: 100%;
    min-width: unset;
    overflow: hidden;
  }
  .wrapper .pc_only {
    display: none !important;
  }
}

/**-----------------------------
  header
-----------------------------**/
.site-header{
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 80px;
  background-color: rgba(66,126,185,0.8);
  z-index: 1000;
}

/* 750pxの内側コンテナを中央配置 */
.header-inner{
  width: 750px;
  height: 100%;
  margin: 0 auto;
  /* padding: 0 40px; ← 右端ピッタリにしたいので外す */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左詰め。右は margin-left:auto で寄せる */
}

header .head_logo{ width: 217px; }
header h1 { margin: 0; }

/* ← ココを position から置き換え */
header .header_image{
  margin-left: auto;  /* 750pxボックスの右端へ */
}
header .header_image img{
  display: block;
  height: 56px;       /* お好みで調整 */
  max-width: 100%;
}

/* SP（必要なら） */
@media screen and (max-width: 750px){
  .site-header{
    height: 10.6666666667vw;  /* 80px → 10.6666666667vw */
  }
  .header-inner{
    width: 100%;
    padding: 0 5.3333333333vw; /* SPは余白ありに戻す */
  }
  header .head_logo{ width: 28.9333333333vw; }
  header .header_image img{ height: 7.4666666667vw; }
}

.banner-wrap{
  position: relative;
  width: 100%;
}

.banner-solid{
  background-color: #ff5353;
  height: 60px;
  margin-top: 80px;
}

/* テキストは中央に重ねる */
.banner-text{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 88%;
  white-space: nowrap;
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  font-weight: bold;
  color: #f9ff00;
  text-align: center;
  text-shadow: 1px 1px 3px #000;
  pointer-events: none;
}

@media screen and (max-width: 750px){
  .banner-solid{
    height: 8vw; /* 60px → 8vw */
    margin-top: 10.66666vw;
  }
  
}

/* ------------------------------
sec01 FV
------------------------------ */
#sec01 {
    position: relative;
    --bg-w: 750px; /* ← 背景の横幅（変数） */
    --bg-h: 775px; /* ← 背景の高さ（変数） */
    height: var(--bg-h);
    background: url(/image/sec01_bg.png) center top / cover no-repeat;
    background-size: var(--bg-w) var(--bg-h);
    background-color: #d3f1ff;
}

#sec01 .img1 {
  position: absolute;
  top: 10px;                         /* 背景の top と同じ */
  left: calc(50% - (var(--bg-w) / 2) + 20px); /* 画面中央 - 背景幅/2 = 背景の左端 */
  transform: none;                /* 中央寄せは不要 */
  width: 390px;
  z-index: 10;
}

@media screen and (max-width: 750px) {
  #sec01 {
    background-size: 100vw auto;  /* SPは背景を画面幅にフィット */
    --bg-w: 100vw;                /* ← 変数も同じ幅に更新 */
  }

  #sec01 .img1 {
    top: 1.333vw;            /* 10px → 1.333vw */
    left: calc(50% - (var(--bg-w) / 2 - 2vw)); /* ここは同じロジックでOK */
    transform: none;
    width: 52vw;                  /* 既存サイズ指定を踏襲 */
  }
}

/* #sec01 .on-bg-center{
  position: absolute;
  top: calc(var(--bg-h) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
} */

/* img2：背景幅を超えない / 背景の下から10pxに配置 */
#sec01 .img2{
  position: absolute;
  bottom: 10px; /* ← 下から10px */
  left: 50%;
  z-index: 10;

  /* ボタンの想定幅（PC）。必要なら数値調整してOK */
  --img2-w: 700px;
  width: min(var(--img2-w), var(--bg-w)); /* 背景幅を超えないように上限ガード */

  /* 中央寄せは維持（アニメと両立させるため keyframes にも同梱）*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* ぽよぽよアニメは従来どおり（translateX を含めて上書き防止） */
#sec01 .img2.poyopoyo{ 
  animation: poyopoyo 2s ease-out infinite;
  transform-origin:center; will-change:transform;
}
@keyframes poyopoyo{
  0%,40%,60%,80% { transform: translate(-50%, -50%) scale(1); }
  50%,70%        { transform: translate(-50%, -50%) scale(0.95); }
}
@keyframes poyopoyo{
  0%, 40%, 60%, 80%   { transform: translateX(-50%) scale(1); }
  50%, 70%            { transform: translateX(-50%) scale(0.95); }
}

/* SP：背景を 100vw にしつつ、高さも比率で合わせる。
   ボタン幅は相対指定に変更（背景幅を超えない） */
@media (max-width: 750px){
  #sec01{
    --bg-w: 100vw;
    --bg-h: calc(100vw * 775 / 750); /* 元画像 750x775 の比率で高さ算出 */
    background-size: var(--bg-w) var(--bg-h);
    height: var(--bg-h);
  }
  #sec01 .img2{
    --img2-w: 88vw;                 /* 例：SPのボタン幅 */
    width: min(var(--img2-w), var(--bg-w));
    bottom: 10px;                   /* 下から10pxは同じ */
    left: 50%;
  }
}

/* ------------------------------
sec02
------------------------------ */

/* これだけで背景色は画面いっぱい（全幅） */
#sec02{
  display: flex;
  flex-direction: column;
  align-items: center; /* 子要素を全部中央へ */
  background-color: #d3f1ff; /* 全幅の単色背景 */
}

#sec02 p{ margin: 0; }
#sec02 img{ display:block; max-width:100%; height:auto; }
#sec02 .img2{ margin-top: 20px; }
#sec02 .img3{ margin-top: 20px; }

#sec02 .btn.poyopoyo{ 
  animation: poyopoyoScale 2s ease-out infinite;
  transform-origin:center;
  will-change:transform;
}
@keyframes poyopoyoScale{
  0%, 40%, 60%, 80% { transform: scale(1); }
  50%, 70%          { transform: scale(0.95); }
}

/* ------------------------------
sec03
------------------------------ */
#sec03{ padding: 0; }
#sec03 .sec03_title{ background-color: #53a3ff; }

/* タイトル行：横並びで中央配置＆高さ60px */
#sec03 .sec03_title{
  display: flex;
  justify-content: center;  /* 横中央 */
  align-items: center;      /* 縦中央 */
  height: 60px;
  gap: 12px;                /* 画像とテキストの間隔（お好みで） */
}

/* 画像は高さ60px以内に収める */
#sec03 .sec03_title img{
  max-height: 60px;
  height: 100%;
  width: auto;
  display: block;
}

/* テキストは白、60px内に収める */
#sec03 .sec03_title p{
  margin: 0;
  color: #fff;
  line-height: 1.2;         /* 収まりやすい行高 */
  white-space: nowrap;      /* 折り返さない（必要なら外してOK） */
  max-height: 60px;
  font-weight: 700;         /* お好みで太字 */
  /* 必要ならサイズ調整：例）font-size: clamp(14px, 2.2vw, 24px); */
}

/* セクション全体の幅制御（任意） */
#sec03 .sec03_case{
  width: min(100%, 750px);
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

/* 各ケースカード：重ね合わせ用に relative */
#sec03 .case_box{
  position: relative;
  display: inline-block; /* 画像の実寸に合わせやすい */
}

/* 余計な余白を消す */
#sec03 .case_box p{ margin: 0; }

/* ベース画像（*_img） */
#sec03 .case_box [class$="_img"] img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* 金額ラベル（*_money）を “画像の中心から少し右上” に配置 */
#sec03 .case_box [class$="_money"]{
  --offset-x: 0%; /* 右方向のオフセット（％） */
  --offset-y: 8%;  /* 上方向のオフセット（％） */
  position: absolute;
  /* 親（case_box）の中央を基準に、右上へオフセット */
  left: calc(63% + var(--offset-x));
  top:  calc(45% - var(--offset-y));
  transform: translate(-50%, -50%) scale(1.3);
  z-index: 2;
  pointer-events: none; /* クリックの邪魔をしない */
}

/* ラベルは scale の“ぽよぽよ”だけ適用（位置がズレない） */
#sec03 .case_box [class$="_money"] img{
  display: block;
  max-width: 100%;
  height: auto;
  animation: poyopoyoScale 2s ease-out infinite;
  transform-origin: center;
  will-change: transform;
}

/* ボタン：中央寄せ + 同じ“ぽよぽよ”を適用（translate なし） */
#sec03 .btn{
  display: flex;
  justify-content: center;
  margin-top: -10px; /* お好みで */
  margin-bottom: 20px;
}
#sec03 .btn.poyopoyo img{
  display: block;
  max-width: 100%;
  height: auto;
  animation: poyopoyoScale 2s ease-out infinite;
  transform-origin: center;
  will-change: transform;
}

/* scale だけのアニメ（位置は触らない） */
@keyframes poyopoyoScale{
  0%, 40%, 60%, 80% { transform: scale(1); }
  50%, 70%          { transform: scale(0.95); }
}

/* 必要ならケースごとに微調整（例） */
#sec03 .case1_money{ --offset-x: 10%; --offset-y: 8%; }
#sec03 .case2_money{ --offset-x: 12%; --offset-y: 9%; }
#sec03 .case3_money{ --offset-x: 9%;  --offset-y: 7%; }


/* ------------------------------
sec04
------------------------------ */
#sec04{ padding: 0; background-color: #d5fff5; }
#sec04 .sec04_title{ background-color: #53a3ff; }

/* タイトル行：横並びで中央配置＆高さ60px */
#sec04 .sec04_title{
  display: flex;
  justify-content: center;  /* 横中央 */
  align-items: center;      /* 縦中央 */
  height: 60px;
  gap: 12px;                /* 画像とテキストの間隔（お好みで） */
}

/* 画像は高さ60px以内に収める */
#sec04 .sec04_title img{
  max-height: 60px;
  height: 100%;
  width: auto;
  display: block;
}

/* テキストは白、60px内に収める */
#sec04 .sec04_title p{
  margin: 0;
  color: #fff;
  line-height: 1.2;         /* 収まりやすい行高 */
  white-space: nowrap;      /* 折り返さない（必要なら外してOK） */
  max-height: 60px;
  font-weight: 700;         /* お好みで太字 */
  /* 必要ならサイズ調整：例）font-size: clamp(14px, 2.2vw, 24px); */
}

/* 受給までの流れ：全部センター配置 */
#sec04 .sec04_flow{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 横中央 */
  align-items: center;       /* 縦中央 */
  flex-wrap: wrap;           /* 画面が狭いとき折り返し */
  gap: 12px 20px;            /* 余白（上下, 左右）お好みで */
  margin-top: 12px;
}

#sec04 .sec04_flow > p{
  margin: 0;
  display: flex;             /* 中身のimgも中央に */
  justify-content: center;
  align-items: center;
}

#sec04 .sec04_flow img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* ボタンは最終行で中央に（全幅使って改行） */
#sec04 .sec04_flow .btn{
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 20px;
}

/* ぽよぽよ（位置ズレ防止でscaleのみ） */
#sec04 .sec04_flow .btn.poyopoyo img{
  animation: poyopoyoScale 2s ease-out infinite;
  transform-origin: center;
  will-change: transform;
}
@keyframes poyopoyoScale{
  0%,40%,60%,80% { transform: scale(1); }
  50%,70%        { transform: scale(0.95); }
}

/* ------------------------------
sec05
------------------------------ */
#sec05{ padding: 0px 0px 20px; background-color: #ffd7b2; }
#sec05 .sec05_title{ background-color: #ff9a31; }
#sec05 .sage{ margin-top: 20px; }

/* タイトル行：横並びで中央配置＆高さ60px */
#sec05 .sec05_title{
  display: flex;
  justify-content: center;  /* 横中央 */
  align-items: center;      /* 縦中央 */
  height: 60px;
  gap: 12px;                /* 画像とテキストの間隔（お好みで） */
}

/* 画像は高さ60px以内に収める */
#sec05 .sec05_title img{
  max-height: 60px;
  height: 100%;
  width: auto;
  display: block;
}

/* テキストは白、60px内に収める */
#sec05 .sec05_title p{
  margin: 0;
  color: #fff;
  line-height: 1.2;         /* 収まりやすい行高 */
  white-space: nowrap;      /* 折り返さない（必要なら外してOK） */
  max-height: 60px;
  font-weight: 700;         /* お好みで太字 */
  /* 必要ならサイズ調整：例）font-size: clamp(14px, 2.2vw, 24px); */
}

#sec05 .nexttext{
    text-align: right;
    font-family: "Roboto", Sans-serif;
    font-size: 32px;
    font-weight: 600;
    word-spacing: 0px;
    text-shadow: 0px 0px 10px #FA7B00;
    color: #FFFFFF;
}

/* スライダー本体を中央寄せ（幅MAX 750px） */
.slider{
  width: min(100%, 750px);
  margin: 0 auto;        /* ← これで中央寄せ */
  padding: 0;            /* ULの左余白をリセット */
  list-style: none;      /* 行頭の点を消す */
}

/* 中の画像の基本 */
.slider li{ margin: 0; }
.slider img{
  display: block;
  width: 100%;
  height: auto;
}



/* ぽよぽよ（位置ズレしない scale のみ） */
#sec05 .btn.poyopoyo img{
  animation: poyopoyoScale 2s ease-out infinite;
  transform-origin: center;
  will-change: transform;
}
@keyframes poyopoyoScale{
  0%,40%,60%,80% { transform: scale(1); }
  50%,70%        { transform: scale(0.95); }
}

/* アクセシビリティ：動きを減らしたい設定の人は停止 */
@media (prefers-reduced-motion: reduce){
  #sec05 .slide-track{ animation: none; transform: none; }
  #sec05 .btn.poyopoyo img{ animation: none; }
}








/* ------------------------------
sec06
------------------------------ */

#sec06{ padding:  0 0 20px; background-color: #bfffdb; }
#sec06 .sec06_title{ background-color: #0baa87; }

/* タイトル行：横並びで中央配置＆高さ60px */
#sec06 .sec06_title{
  display: flex;
  justify-content: center;  /* 横中央 */
  align-items: center;      /* 縦中央 */
  height: 60px;
  gap: 12px;                /* 画像とテキストの間隔（お好みで） */
}

/* 画像は高さ60px以内に収める */
#sec06 .sec06_title img{
  max-height: 60px;
  height: 100%;
  width: auto;
  display: block;
}

/* テキストは白、60px内に収める */
#sec06 .sec06_title p{
  margin: 0;
  color: #fff;
  line-height: 1.2;         /* 収まりやすい行高 */
  white-space: nowrap;      /* 折り返さない（必要なら外してOK） */
  max-height: 60px;
  font-weight: 700;         /* お好みで太字 */
  /* 必要ならサイズ調整：例）font-size: clamp(14px, 2.2vw, 24px); */
}

/* sec06：中身を750pxで中央寄せ */
/* #sec06 > .sec05_title, */
#sec06 > div .sec06_qa{
  width: min(100%, 750px);
  margin: 0 auto;        /* ← これで「750pxの箱」を中央に */
}

/* タイトル行（sec03/05と同じ感じで中央） */
#sec06 .sec06_title{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;          /* 必要なら */
  gap: 12px;
}
#sec06 .sec06_title p{
  margin: 0;
  color: #fff;           /* タイトル文字色（お好みで） */
  white-space: nowrap;
}

/* Q&A画像を縦並びで中央に */
#sec06 .q_a{
  margin: 12px 0;
  display: flex;
  justify-content: center;
}
#sec06 .q_a img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* ボタンは中央＋ぽよぽよ（scaleのみで位置ズレ防止） */
#sec06 .btn{
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

#sec06 .btn.poyopoyo img{
  animation: poyopoyoScale 2s ease-out infinite;
  transform-origin: center;
  will-change: transform;
}
@keyframes poyopoyoScale{
  0%,40%,60%,80% { transform: scale(1); }
  50%,70%        { transform: scale(0.95); }
}


/* ------------------------------
footer
------------------------------ */

/* 背景は全幅 */
.site-footer{
  background: rgba(66,126,185,0.8);
  color: #fff;
}

/* 中身だけ750pxで中央配置・2列 */
.footer-inner{
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 左：ロゴ */
.footer-logo img{
  display: block;
  height: 40px;        /* お好みで */
  width: auto;
}

/* 右：リンク */
.footer-nav ul{
  display: flex;
  gap: clamp(12px, 3vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav a{
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.footer-nav a:hover{ text-decoration: underline; }

/* SPは縦積み中央 */
@media (max-width: 750px){
  .footer-inner{
    padding: 16px 5.3333333333vw;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .footer-logo img{ height: 32px; }
  .footer-nav ul{ flex-wrap: wrap; justify-content: center; }
}