@charset "utf-8";


body {
	/***	フォント関連設定	***/
	font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "A-OTF 新ゴ Pro", A-OTF Shin Go Pro, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 112.5%;	/* 18px */
	font-size: 125%;	/* 20px */
	line-height: 1.7;

	/***	背景＆文字色設定	***/
	background: url(../images/bg.jpg) center center / 100% auto fixed;
	color: #222;
	
	font-feature-settings: "palt";
	text-align: justify;
}

@media (max-aspect-ratio: 3000/2001) {
	body {
		background: url(../images/bg.jpg) center center / auto 100% fixed;
	}
  }

h1 {	
}

h2 {
	margin: 2.5em auto;
	text-align: center;
}

a {cursor: pointer;}

img {
	display: block;	/*	ブロック要素としてふるまう：中揃えで表示	*/
	margin: 0 auto;
	max-width: 100%;
}

strong {
	font-weight: bold;
}

#wrapper {
	margin: 0 auto;
	width: 480px;
}

footer {
	margin: 0 auto;
	padding: 1em 0;
	background: #50a7d0;
	color: #fff;
	text-align: center;
	font-size: 75%;
}

footer a {
	color: #fff;
	text-decoration: underline;
}

footer a:hover {
	color: #fff;
}

address {
	font-style: normal;
}



/***	テキスト装飾設定	***/

.large {
	font-size: 120%;
}

.xlarge {
	font-size: 144%;
}

.xxlarge {
	font-size: 172.8%;
}

.small {
	font-size: 82.5%;
}

.xsmall {
	font-size: 62.5%;
}

.xxsmall {
	font-size: 56.25%;
}

.u {
	text-decoration: underline;
}

.red {
	color: red;
}

.highlight {
	background-color: #fff266;
}

.redhigh {
	color: red;
	background-color: #fff266;
}


/***	画像右寄せ設定	***/

.pic_right {
	float: right;
	margin: 10px -15px 10px 10px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}


/***	PC・スマホ改行設定	***/

.pconly {
	display: block;
}

.sponly {
	display: none;
}



/*
 *		class-name
 */

.class-name {
}

.wrap_class-name {
	margin: 0 auto;
	width:820px;
	max-width: 96%;
}

.con_class-name {
}

.con_class-name p {
}


/*
 *		cta
 */

.cta01 {	/***	高さ指定不要：ボタン高さ＋2em	***/
	padding: 1em 0;
	background: #ffffeb;
}

.cta01 a img {
	width: calc( 450 / 480 * 100% );	/***	幅480pxの時、ボタン幅450px	***/
}

.cta02 {	/***	高さ指定タイプ	***/
	padding-top: calc( 101 / 480 * 100% ) ;
	background: url(../images/bg_cta02.png) center center / 100% 100% no-repeat;
	aspect-ratio: 480 / 267;
}

.cta02 a img {
	width: calc( 450 / 480 * 100% );	/***	幅480pxの時、ボタン幅450px	***/
}

.btn {
	display: block;

	animation-name: btn-animation;
	animation-iteration-count: infinite;
	animation-duration: 2s;
}

.btn:hover {
	animation-duration: 0.8s;
}



/*
 *		pc_objects
 */

.pc_logo {
	position: fixed;
	top: 1em;
	left: 1em;
}

.pc_contents {
	position: fixed;
	top: 0;
	left: 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc( ( 100% - 480px ) / 2 - 1em );
	height: 100vh;
}

.pc_contents ul {
	list-style: none;
	line-height: 2.5;
	font-size: 1.2em;
	font-weight: bold;
}

.pc_contents ul a {
	color: #222;
	transition: all 0.3s 0s ease;
}
.pc_contents ul a:hover {
	color: #C00;
}


/*
 *		pc_objright
 */

 .pc_objright {
	position: fixed;
	top: 0;
	right: 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc( ( 100% - 480px ) / 2 - 1em );
	height: 100vh;
}


.pc_cta {
	display: block;
	width: fit-content;
}

.pc_cta .btn img {
}

.pc_cta .btn {
	animation: none;
}

.pc_cta .btn:hover {
	opacity: 0.66;
}



/***	常時表示ボタン設定	***/

 .flbtn {
	position: fixed;
	bottom: 0.5em;
	right: 0.5em;
	z-index: 9999;
}

.flbtn a {
	display: block;
	width: 240px;
	height: calc( 240 / 450 * 142px );
	background: url(../images/button.png) no-repeat;
	background-size: 100%;
	text-indent: -9999px;

	animation-name: btn-animation;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	animation-delay: 0.6s;

	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

@keyframes btn-animation {
	0% {
		transform: translateY(0.75em);
	}

	50% {
		transform: translateY(-0.25em);
	}

	100% {
		transform: translateY(0.75em);
	}
}


@media screen and (max-width: 1200px) {	/***	幅1200px以下に適用	***/

	/* .pc_contents {
		width: 40vw;
		height: 40vw;
	} */
	

}


@media screen and (max-width: 979px) {	/***	幅979px以下に適用	***/


	footer {
		position: relative;
	}

	.xlarge {
		font-size: 125%;
	}

	.xxlarge {
		font-size: 150%;
	}

	/***	PC・スマホ改行設定	***/

	.pconly {
		display: none;
	}

	.sponly {
		display: block;
	}

	.flbtn {
		display: none;
	}


	.pc_objects,
	.pc_objright {
		display: none;
	}


}


@media screen and (max-width: 479px) {

	footer {
		font-size: 66%;
	}

	
}


@media screen and (max-width: 599px) {	/***	幅599px以下に適用：スマホ	***/}

/*
 *		特商法
 */

.page_laws #wrapper {
	margin: 0 auto 2em;
	padding: 3em;
	width: 800px;
	max-width: 100%;
	background: #fff;
	font-size: 75%;
}

.page_laws #wrapper h2 {
	margin: 0 auto;
	font-size: 2em;
	text-align: center;
}

.page_laws #wrapper h3 {
	margin-top: 2em;
	font-size: 1.25em;
}

.page_laws #wrapper h4 {
	margin-top: 2em;
}

.page_laws table {
	margin: 1.5em auto;
	width: 720px;
	max-width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
	background: #ccc;
}

.page_laws th {
	padding: 0.5em;
	width: 28%;
	border-top: 1px solid #fff;
	background-color: #EBEBEB;
}

.page_laws td {
	padding: 0.5em;
	font-size: 0.8em;
	background-color: #FFFFFF;
}

@media screen and (max-width: 599px) {/*特商法*/

	.page_laws #wrapper {
		padding: 0;
	}

	.page_laws table {
		margin-top: 0;
		width: 98vw;
	}

	.page_laws th,
	.page_laws td {
		display: block;
		width: 100%;
	}
}

/* 画像のにじみ・左ズレ防止 */
main img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;           /* 常に中央寄せ */
}

/* セミナー日程セクション */
#part3 {
  padding: 24px 0 8px;      /* 上の青帯との間を詰める/整える */
}

/* CTA（緑ボタン）共通 */
.cta {
  text-align: center;
  margin: 20px auto 36px;   /* 上少し、下はやや広め */
}

.cta img {
  max-width: 560px;         /* デスクトップ上限 */
  width: min(90vw, 560px);  /* モバイルは画面幅に合わせる */
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
  transition: transform .15s ease;
}
.cta img:hover { transform: translateY(-1px) scale(1.02); }

/* CTAのベース設定 */
.cta {
  position: relative;
  text-align: center;
  margin: 60px auto;
  max-width: 750px;
}

/* 画像の中にボタンを重ねる */
.cta-inner {
  position: relative;
  display: inline-block;
}

.cta-inner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ボタン配置 */
.cta-button {
  position: absolute;
  left: 50%;
  bottom: 20px; /* 画像下からの距離、調整OK */
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
}

.cta-button img {
  width: 100%;
  height: auto;
}

/* CTAボタンの基本配置 */
.cta {
  text-align: center;
  margin: 40px 0; /* 上下の余白 */
}

.cta img {
  width: 100%;
  max-width: 700px;
  height: auto;
}

/* ==== Part4（FAQセクション）上にボタンを重ねる（位置微調整版） ==== */
.part4-with-cta {
  position: relative;
  text-align: center;
  margin-bottom: 100px;
}

.part4-wrap {
  position: relative;
  display: inline-block;
}

.part4-image {
  width: 100%;
  height: auto;
  display: block;
}

/* 画像の途中あたり（下寄り）に重ねる */
.cta-on-part4 {
  position: absolute;
  left: 50%;
  top: 2%; /* ← この値で上下を微調整！ */
  transform: translateX(-50%);
  width: 90%;
  max-width: 700px;
}

.cta-on-part4 img {
  width: 100%;
  height: auto;
}

/* ==== FVとCTAの間の余白を詰める ==== */
#cta1 {
  margin-top: -20px; /* ← ここで距離を調整（-40px でもOK） */
}

#cta1 img {
  display: block;
  margin: 0 auto;
}

#fv,
#cta1 {
  margin-bottom: 0;
  padding-bottom: 0;
}

#cta1 {
  margin-top: -40px; /* ← 数値をマイナスにして、FVに近づける */
}

#cta1 {
  margin-bottom: -20px; /* ↓ CTAと次のセクションの間を縮める */
}

#part2 {
  margin-top: 0;
  padding-top: 0;
}


.btn {
  animation: none !important;
  transition: none !important;
}






/* ===== CTA内のボタンを中央に固定 ===== */
.cta-inner {
  position: relative;
}


/* ==== CTA（青背景）と part4（次セクション）の隙間を詰める ==== */
#cta2 {
  margin-bottom: -40px; /* 下の余白を詰める */
  padding-bottom: 0;
}

.part4-with-cta {
  margin-top: -49px; /* CTAとの間をさらに詰める */
}


/* 背景の CTA 画像だけ transform を無効化（ボタンは除外） */
#cta1 .cta-inner > img,
#cta2 .cta-inner > img {
  transform: none !important;
}


/* ボタンは中央配置の transform だけ許可する */
#cta1 .cta-button, #cta2 .cta-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) !important;
  bottom: 24px;
  z-index: 2;
}


/* 固定フロートボタン自体も出さない（デスクトップで効くことがあります） */
.flbtn { display: none !important; }



/* 1) 汎用ボタンのバウンスだけ止める（影響を最小化） */
.btn, .pc_cta .btn, .flbtn a {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* 2) CTAの土台（青い画像）だけ静止。クリックは通すため pointer-events:none */
.cta-inner { position: relative; }
.cta-inner > img {
  display: block;
  width: 100%;
  height: auto;
  transform: none !important;
  pointer-events: none;   /* ← これで画像がリンクを邪魔しない */
}

/* 3) ボタンは中央・最前面・クリック可（ここには transform を許可） */
.cta-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);   /* 中央寄せ */
  bottom: 24px;                  /* 位置は好みで */
  z-index: 10;
  pointer-events: auto;
}
.cta-button img {
  display: block;
  width: min(90%, 600px);
  height: auto;
}

/* ボタンを中央・最前面に固定（親） */
.cta-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);   /* 中央寄せは親でやる */
  bottom: 24px;                  /* 位置は好みで調整 */
  z-index: 10;
  pointer-events: auto;
}

/* 子のimgだけ縦ゆれ。親の中央寄せtransformを壊さない！ */
.cta-button img {
  display: block;
  width: min(90vw, 600px);
  height: auto;
  animation: /*cta-bob*/ 2s ease-in-out infinite;
  will-change: transform;
}

@keyframes cta-bob {
  0%   { transform: translateY(6px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(6px); }
}

/* 動きを抑えたい環境配慮（端末が省モーション希望なら止める） */
@media (prefers-reduced-motion: reduce) {
  .cta-button img { animation: none; }
}




/* ボタンのふわふわアニメーション調整版 */
.cta-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px; /* ボタンの上下位置：数字を増やすと下に下がる */
  z-index: 10;
  pointer-events: auto;
}

.cta-button img {
  display: block;
  width: min(80vw, 420px); /* ← 大きさを調整（420pxくらいでバランス良） */
  height: auto;
  animation: cta-bob 2.4s ease-in-out infinite;
  will-change: transform;
}

@keyframes cta-bob {
  0%   { transform: translateY(5px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(5px); }
}




/* ── すべてのCTAボタン画像に同じアニメを適用 ── */
.cta-button img,
.cta-on-part4 img {
  display: block;
  width: min(80vw, 420px);   /* サイズは共通で整える */
  height: auto;
  animation: cta-bob 2.4s ease-in-out infinite;
  will-change: transform;
}

/* 位置（中央寄せ）は両方に適用 */
.cta-button,
.cta-on-part4 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);  /* 中央に固定 */
  z-index: 10;
}

/* 各ボタンの上下位置だけ個別に微調整 */
.cta-button { bottom: 20px; }     /* CTA画像の中に重ねるボタン */
.cta-on-part4 { top: 23%; }       /* part4の中に重ねるボタン（必要なら数値調整） */

/* ふわふわ */
@keyframes cta-bob {
  0%   { transform: translate(-50%, 5px); }
  50%  { transform: translate(-50%, -2px); }
  100% { transform: translate(-50%, 5px); }
}




/* すべてのボタン画像を対象に “縦だけ” ふわふわ */
img[src$="images/kitada-button.png"] {
  display: block;
  width: min(80vw, 420px);   /* 大きすぎたらここで調整：例 420→380 など */
  height: auto;
  animation: /*cta-bobY*/ 2.6s ease-in-out infinite;
  will-change: transform;
}

/* ボタンの親（a）を中央に。ここは “横だけ” の位置決め */
.cta-button,
.cta-on-part4 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);   /* 横の中央寄せは親が担当 */
  z-index: 10;
}

/* 個別の上下位置（必要なら微調整OK） */
.cta-button  { bottom: 20px; }  /* CTA画像の中に重ねたボタン */
.cta-on-part4{ top: 23%;   }    /* part4上の重ねボタン */

/* ふわふわ：縦だけ動かす（横は触らない） */
@keyframes cta-bobY {
  0%   { transform: translateY(4px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(4px); }
}



/* 背景CTA画像（kitada-cta.png）だけにホバー効果を残す */
.cta-inner > img:hover {
  transform: translateY(-1px) scale(1.02);
}

/* ボタン画像（FV下・真ん中・フッター前）だけに“ふわふわ”を適用 */
.cta-button img,
.cta-on-part4 img {
  animation: cta-bobY 2.6s ease-in-out infinite !important;
  will-change: transform;
}

/* ボタン画像にはホバー拡大を当てない（transformの取り合いを防ぐ） */
.cta-button img:hover,
.cta-on-part4 img:hover {
  transform: none !important;
}

/* ふわふわ（縦だけ動かす。横位置は親で中央寄せ） */
@keyframes cta-bobY {
  0%   { transform: translateY(4px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(4px); }
}




/* 背景CTA画像（kitada-cta.png）だけホバー拡大を残す */
.cta-inner > img:hover {
  transform: translateY(-1px) scale(1.02);
}


/* ふわふわ（X: -50% で中央維持、Yだけ上下に揺らす） */
@keyframes cta-float {
  0%   { transform: translate(-50%, 4px); }
  50%  { transform: translate(-50%, -2px); }
  100% { transform: translate(-50%, 4px); }
}


/* CTA内部でもふわふわを有効にする（親transformの影響をリセット） */
.cta-inner, .cta {
  transform: none !important;  /* 子のアニメを殺さないようリセット */
}

/* 全ボタンに共通のふわふわ効果 */
.cta-button, .cta-on-part4 {
  animation: cta-float 2.4s ease-in-out infinite;
  will-change: transform;
}

@keyframes cta-float {
  0%   { transform: translate(-50%, 4px); }
  50%  { transform: translate(-50%, -2px); }
  100% { transform: translate(-50%, 4px); }
}



/* 親が相対位置であることを保証（念のため） */
.part4-with-cta .part4-wrap { position: relative !important; }

/* 2番目のボタン（part4に重ねるやつ）を中央に“固定” */
.part4-with-cta .cta-on-part4 {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;  /* ← 横センターを死守 */
  top: 23%;                                /* ← 必要なら上下は微調整 */
  z-index: 10;
  margin: 0 !important;
  right: auto !important;
  animation: none !important;              /* a側のアニメは無効化（衝突防止） */
}

/* 動きは子の img にだけ当てる（aのtransformと喧嘩させない） */
.part4-with-cta .cta-on-part4 img {
  display: block;
  width: min(80vw, 420px);
  height: auto;
  animation: omame-bob 2.6s ease-in-out infinite;
  will-change: transform;
}

/* ふわふわ（縦だけ動かす） */
@keyframes omame-bob {
  0%   { transform: translateY(4px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(4px); }
}






/* ── FV下とフッター前のCTAボタンにも同じふわふわを適用 ── */
#cta1  .cta-button img,
#cta1b .cta-button img,
#cta2  .cta-button img {
  display: block;
  width: min(80vw, 420px);
  height: auto;
  animation: omame-bob 2.6s ease-in-out infinite !important;
  will-change: transform;
}




/* ===== FV下(#cta1)とフッター前(#cta2)の右寄り＆無動作 修正パッチ ===== */

/* アンカーは「中身のサイズで縮む」＝中央合わせが見た目どおりに */
#cta1  .cta-button,
#cta2  .cta-button {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: auto !important;
  bottom: 24px !important;

  display: inline-block !important;
  width: auto !important;          /* ← ここが肝：90%などの固定幅を無効化 */
  margin: 0 !important;
  right: auto !important;
  z-index: 10;
}

/* ボタン画像は「自分で中央寄せ・サイズ指定・ふわふわ」 */
#cta1  .cta-button img,
#cta2  .cta-button img {
  display: block;
  margin: 0 auto;                   /* ← 画像自体もど真ん中に */
  width: min(80vw, 420px);
  height: auto;

  /* 上で止めている可能性に勝つための保険 */
  animation: omame-bob 2.6s ease-in-out infinite !important;
  will-change: transform;
}

/* ふわふわ（縦だけ）※既にあれば重複OK */
@keyframes omame-bob {
  0%   { transform: translateY(4px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(4px); }
}

/* もし上のほうで止める指定が残っていても、画像のアニメだけは生かす */
#cta1  * { animation: initial !important; transition: initial !important; }
#cta2  * { animation: initial !important; transition: initial !important; }



#cta1 .cta-button, #cta2 .cta-button {
  left: 50%;
  transform: translateX(-50%);
}



/* ==== 中央ズレ修正：part3〜4間のボタン用 ==== */

/* aタグ（親）は中央位置だけ保持、translateXは外す */
.part4-with-cta .cta-on-part4 {
  position: absolute !important;
  left: 50% !important;
  transform: none !important;   /* ← これで二重センタリングを解除 */
  top: 23%;                     /* ← ボタンの縦位置、必要に応じて調整 */
  z-index: 10;
  margin: 0 auto !important;
  right: auto !important;
}

/* 子のimgはブロック＋margin:0 autoでど真ん中へ */
.part4-with-cta .cta-on-part4 img {
  display: block;
  margin: 0 auto;
  width: min(80vw, 420px);
  height: auto;
  animation: omame-bob 2.6s ease-in-out infinite !important;
  will-change: transform;
}


/* ===== part4内のボタン（右寄り修正＆ふわふわ維持） ===== */
.part4-with-cta .cta-on-part4 {
  position: absolute !important;
  left: 50% !important;
  transform: none !important;   /* ← translateX(-50%) を削除！ */
  top: 23%;                     /* ← 高さは調整OK（今の23%でも可） */
  z-index: 10;
  margin: 0 auto !important;
  right: auto !important;
}

/* 中のボタン画像だけ中央寄せ＆アニメ継続 */
.part4-with-cta .cta-on-part4 img {
  display: block;
  margin: 0 auto;  /* ← これで中央ど真ん中 */
  width: min(80vw, 420px);
  height: auto;
  animation: omame-bob 2.6s ease-in-out infinite !important;
  will-change: transform;
}

/* 念のためふわふわキーフレームを生かす */
@keyframes omame-bob {
  0%   { transform: translateY(4px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(4px); }
}



/* ======== CTAボタン位置と動きの最終安定版 ======== */

/* すべてのCTAボタンを中央に固定（FV下・part3〜4間・フッター前すべて） */
.cta-button,
.cta-on-part4 {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;  /* ← 横方向だけ中央 */
  z-index: 10;
  margin: 0 auto !important;
  right: auto !important;
  width: auto !important;  /* 固定幅を解除して自然なセンターを取る */
}

/* それぞれの上下位置を個別調整 */
#cta1 .cta-button { bottom: 20px !important; }   /* FV下 */
.part4-with-cta .cta-on-part4 { top: 23% !important; } /* part4の中 */
#cta2 .cta-button { bottom: 20px !important; }   /* フッター前 */

/* 画像は中央寄せ＆ふわふわ */
.cta-button img,
.cta-on-part4 img {
  display: block;
  margin: 0 auto;
  width: min(80vw, 420px);
  height: auto;
  animation: omame-bob 2.6s ease-in-out infinite !important;
  will-change: transform;
}

/* 背景CTA画像だけは静止（transform競合防止） */
.cta-inner > img {
  transform: none !important;
  pointer-events: none !important;
}

/* ふわふわ（縦だけ動かす） */
@keyframes omame-bob {
  0%   { transform: translateY(4px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(4px); }
}



/* ===== part4のボタンが右寄り＆小さい問題の最終修正 ===== */
.part4-with-cta {
  position: relative !important;
  text-align: center !important; /* ← 親で中央基準に */
  width: 100% !important;        /* ← 幅を全体に広げる */
}

.part4-with-cta .part4-wrap {
  display: block !important;     /* inline-blockを解除して中央基準に */
  width: 100% !important;
  position: relative !important;
}

.part4-with-cta .cta-on-part4 {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important; /* ← 横中央を確実に維持 */
  top: 23% !important;                    /* ← 上下位置はこのままでOK */
  z-index: 10;
  width: auto !important;                 /* ← ここ重要！ボタン幅を自然に戻す */
  margin: 0 auto !important;
}

.part4-with-cta .cta-on-part4 img {
  display: block;
  margin: 0 auto;
  width: min(90vw, 420px) !important;     /* ← ちょっと広め＆画面中央で安定 */
  height: auto;
  animation: omame-bob 2.6s ease-in-out infinite !important;
  will-change: transform;
}



/* ===== part4のボタンが小さいままの最終修正 ===== */

/* 親をフル幅化して、ボタン幅の基準を画面全体に */
.part4-with-cta,
.part4-with-cta .part4-wrap {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  position: relative !important;
}

/* ボタン（a）を中央＆自然サイズに */
.part4-with-cta .cta-on-part4 {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 23% !important; /* 上下位置はこのままでOK */
  z-index: 10;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
}

/* ボタン画像を「画面幅基準」で再指定 */
.part4-with-cta .cta-on-part4 img {
  display: block;
  margin: 0 auto;
  width: clamp(300px, 80vw, 450px) !important; /* ← 300〜450pxの範囲で自動調整 */
  height: auto;
  animation: omame-bob 2.6s ease-in-out infinite !important;
  will-change: transform;
}



/* ===== part4ボタンが小さいまま問題の完全修正版 ===== */

/* part4内ボタン（.cta-on-part4 img）だけ強制的にサイズ指定を上書き */
.part4-with-cta .cta-on-part4 img {
  display: block !important;
  margin: 0 auto !important;
  width: clamp(320px, 88vw, 460px) !important; /* ← ここで大きさを強制確保 */
  max-width: none !important; /* ← どんな上書きも無視させる */
  height: auto !important;
  animation: omame-bob 2.6s ease-in-out infinite !important;
  will-change: transform;
}



/* ===== ホバー時のボタンふわっと反応 ===== */

/* 全CTAボタン（FV下・真ん中・フッター前すべて対象） */
.cta-button img:hover,
.cta-on-part4 img:hover {
  transform: translateY(-6px) scale(1.03);   /* ← 少し上に＆1.03倍に拡大 */
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: brightness(1.15);                  /* ← 少し明るく */
}

/* ホバーを外した時のなめらかな戻り */
.cta-button img,
.cta-on-part4 img {
  transition: transform 0.25s ease, filter 0.25s ease;
}



/* ==== スマホ最適化（幅599px以下） ==== */
@media screen and (max-width: 599px) {

  /* 全体の余白調整 */
  body {
    font-size: 90%; /* テキスト少し小さくして収まりよく */
  }

  #wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* CTAセクションのマージン調整 */
  .cta {
    margin: 32px auto;
  }

  /* CTAボタンを押しやすく、はみ出さないように */
  .cta-button img,
  .cta-on-part4 img {
    width: 92vw !important; /* 画面幅の9割、自然に広がる */
    max-width: none !important;
  }

  /* FV画像やCTA画像の影を軽くして軽量化 */
  .cta img {
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.12));
  }

  /* ボタンのふわふわはやや小さく（モバイルで滑らかに） */
  @keyframes omame-bob {
    0%   { transform: translateY(3px); }
    50%  { transform: translateY(-1.5px); }
    100% { transform: translateY(3px); }
  }

}

#part4 {
  margin-top: -50px;
}


/* ===== part4：画像の上に地図を重ね、ボタンは前面 ===== */
#part4 { position: relative; z-index: 2; }
#part4 .part4-wrap { position: relative; width: 100%; }
.part4-image { display: block; width: 100%; height: auto; }



/* ボタン（現状どおり23%・前面） */
#part4 .cta-on-part4{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 23%;
  z-index: 10;
}
#part4 .cta-on-part4 img{ width: clamp(320px, 88vw, 460px); height:auto; }

/* スマホ微調整（必要なら） */
/* === スマホ時の地図を小さく整える === */
@media (max-width: 599px) {
  .map-overlay {
    top: 61%; /* ← 少しだけ下げて見やすく */
    width: 80vw; /* ← 横幅をさらに少し狭く */
    height: clamp(140px,38vw, 220px); /* ← 高さをもう少し低く */
  }

  .map-overlay iframe {
    height: calc(100% + 36px);
    transform: translateY(-36px);
  }
}

/* === part4：地図（小さめ固定 & 少し下げる） === */
#part4 { position: relative; z-index: 2; }
#part4 .part4-wrap { position: relative; }

.map-overlay{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 63.8%;        /* ← 63.5〜64%で微調整 */
  width: 410px;
  height: 268px;     /* ← 高さ少し低めで下に見せる */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  z-index: 5;
}
.map-overlay iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ボタンは前面キープ（そのままでOK） */
#part4 .cta-on-part4{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 23%;
  z-index: 10;
}


/* ==== CTA2 最終版 ==== */
#cta2 {
  margin: 0 !important;
  padding: 24px 0 36px !important; /* ← 下に余白を確保してフッターと離す */
  display: flow-root; /* ← マージン折りたたみ防止 */
}


/* === CTA2 の余白を完全にリセット & 自前でコントロール === */
#cta2.cta {                    /* 共通の .cta 余白を無効化 */
  margin: 0 !important;
}

#cta2 {
  margin: 0 !important;        /* 念のため二重で無効化 */
  padding: 16px 0 20px !important; /* 内側で上下を少しだけ確保 */
  display: flow-root;          /* マージンの折りたたみ防止 */
}

/* CTA2 内部の画像はブロックにして余白の誤差を消す */
#cta2 img {
  display: block;
}

/* 最後のCTAが .cta の共通 margin を拾っていた場合の保険 */
.cta:last-of-type {
  margin-bottom: 0 !important;
}

/* フッター側の余白を控えめに（必要なら数値微調整） */
footer {
  margin-top: 0 !important;
  padding-top: 8px;            /* 16px → 8px くらいがちょうどよい */
}


/* === CTA2：上下の余白をさらに詰める（最終パッチ） === */
#cta2.cta,
#cta2 {
  margin: 0 !important;               /* 共通 .cta のマージンを完全無効化 */
  padding: 4px 0 4px !important;      /* ← ここを 0〜8px の範囲で微調整OK */
  display: flow-root;                  /* マージン折りたたみ防止 */
}

#cta2 img { display: block; }

/* 直前のセクション側に残ってる“下マージン”を消す */
.part4-with-cta,
.part4-wrap,
#part4 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* フッター側も控えめに（必要なら 0〜8px で微調整） */
footer {
  margin-top: 0 !important;
  padding-top: 4px !important;
}

/* それでも1〜2pxだけ白が残る時の最終手当て（微小オフセット） */
#cta2 { margin-bottom: -2px !important; }  /* 0〜-4pxで調整 */


/* === フッター直前の余白を完全にゼロにする === */
#cta2 {
  margin-bottom: -8px !important; /* ← まずここを -4〜-12px の間で調整 */
  padding-bottom: 0 !important;
}

footer {
  margin-top: 0 !important;  /* 上方向のマージンを打ち消す */
  padding-top: 0 !important; /* さらに内部の余白もゼロに */
}


/* === CTA2とフッターの隙間ゼロ・確定版 === */
#cta2 { 
  margin-bottom: 0 !important;     /* 下マージンを確定 */
  padding-bottom: 0 !important;
  overflow: hidden;                 /* ← ここが肝：margin-collapsingを止める */
}

/* .cta のマージン上書き（#cta2が .cta を持つ場合に効かせる） */
#cta2.cta { 
  margin-bottom: 0 !important;
}

/* フッター側も押し上げない */
footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* --- CTA2とフッターの間を物理的にゼロにする最終釘 --- */
#cta2 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;          /* 行ボックスの隙間を殺す */
  font-size: 0;            /* 余計なインライン隙間も殺す */
  display: flow-root;      /* marginの合体を止める */
  overflow: hidden;        /* サブピクセルの白スジ対策 */
}

#cta2 img {                /* 画像まわりの誤差を完全排除 */
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;     /* 影が“隙間”に見えるのを防ぐ */
  filter: none !important;         /* drop-shadowの滲みも止める */
}

.cta:last-of-type {        /* 万一 .cta の共通margin が残っていても潰す */
  margin-bottom: 0 !important;
}

footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* それでも1pxだけ見える機種がある場合の“隠し縫い” */
#cta2 { margin-bottom: -1px !important; }   /* -1〜-2pxで微調整OK */


/* === CTA2とフッターの隙間を物理的にゼロにする（フッター色はそのまま） === */
#cta2 {
  margin-bottom: -4px !important;  /* ← -3〜-5pxで微調整OK */
  padding-bottom: 0 !important;
  overflow: hidden;                /* margin折りたたみとサブピクセル誤差を止める */
}

#cta2 img {
  display: block !important;
  margin: 0 auto !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;         /* ドロップシャドウのにじみ防止 */
}


/* ▶ CTAボタンの“ふわふわ”速度を一括で速くする */
#cta1 .cta-button img,
#cta1b .cta-button img,
#cta2 .cta-button img,
.part4-with-cta .cta-on-part4 img,
.cta-button img,
.cta-on-part4 img {
  animation-duration: 1.6s !important;  /* ← 体感早め。1.8s〜1.2sで調整OK */
}

/* モバイルはもう少しキビキビにしたい場合（任意） */
@media (max-width: 599px) {
  #cta1 .cta-button img,
  #cta1b .cta-button img,
  #cta2 .cta-button img,
  .part4-with-cta .cta-on-part4 img,
  .cta-button img,
  .cta-on-part4 img {
    animation-duration: 1.4s !important;
  }
}