@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =====================================================================
 * このファイルに入っているもの
 *   A. フッター追従CTAボタン「今すぐLINEで応募する」
 *   B. 閲覧同意ポップアップ
 *
 * どちらも「ほぼ全ページで使う」ため、このファイルに置いている。
 * ページ限定のCSS（モデル個別・モデルアーカイブなど）は
 * functions.php の hanaya_conditional_css_map() が別ファイルで
 * 読み込む仕組みになっている。
 * ================================================================== */


/* =====================================================================
 * A. フッター追従CTAボタン「今すぐLINEで応募する」
 * =====================================================================
 *
 * 設計方針
 *   - CSS変数を使わない。JavaScriptを使わない。常時表示
 *   - @keyframes は最後尾。末尾が切れても位置とデザインは崩れない
 *
 * ★ 上下位置の調整ルール（重要）
 *   CTAの高さは52px。PAGE TOPを常にCTAの1段上に置くため、
 *   3つの数値をセットで変更してください。
 *
 *     CTAの bottom  │ PAGE TOPの bottom │ フッターの padding-bottom
 *     ──────────────┼───────────────────┼──────────────────────────
 *       24px（現在）│       92px        │         96px
 *        40px       │      108px        │        112px
 *        60px       │      128px        │        132px
 *       100px       │      168px        │        172px
 *
 *   計算式  PAGE TOP = CTAのbottom + 52 + 16
 *           フッター = CTAのbottom + 52 + 20
 *
 * ★ 100px → 24px に変更した経緯
 *   もともと100pxだったのは、会話の初期にSPで表示が確認できず、
 *   切り分けのために持ち上げた値がそのまま残っていたもので、
 *   意図した設計ではなかった。
 *   また、reCAPTCHAのバッジ（右下・bottom 14px・高さ60px）と
 *   干渉していたが、functions.php の hanaya_dequeue_recaptcha() で
 *   フォームのあるページ以外では読み込まないようにしたため、
 *   バッジを避ける必要がなくなった。
 * ================================================================== */


/* ---------------------------------------------------------------------
 * A-1. PAGE TOPボタンをCTAの1段上へ（SP）
 * ------------------------------------------------------------------- */
html body .p-fixBtnWrap{
	bottom: 92px !important;   /* 【調整】CTAのbottom + 68px */
}


/* ---------------------------------------------------------------------
 * A-2. 位置決め枠：スマホ（既定）＝ 中央下・横幅ワイド
 *      枠自体はクリックを透過させ、ボタンだけ押せるようにする
 * ------------------------------------------------------------------- */
.c-entryFix{
	position: fixed;
	bottom: 24px;            /* 【調整】画面下端からの距離（SP） */
	left: 0;
	right: 0;
	padding-left: 40px;      /* 【調整】左右の余白（SP） */
	padding-right: 40px;
	z-index: 100;
	line-height: 1;
	pointer-events: none;
}


/* ---------------------------------------------------------------------
 * A-3. ボタン本体
 *      右側の padding 44px は、右端の矢印に文字が重ならないための確保分
 * ------------------------------------------------------------------- */
.c-entryFix__btn{
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;                          /* 【調整】アイコンと文字の間隔 */
	width: 100%;
	height: 52px;                      /* 【調整】ボタンの高さ */
	padding: 0 44px 0 14px;
	border-radius: 10px;               /* 【調整】角丸 */
	background-color: #f98282;         /* グラデーション非対応時の下地 */
	background-image: linear-gradient(to right, #fd6c6c, #f98282, #fb9d6b, #fb9d6b, #f98282, #fd6c6c);
	background-size: 200% 100%;
	background-position: 0% center;
	background-repeat: repeat;         /* ループを滑らかに保つため repeat 必須 */
	box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
	color: #fff !important;
	font-size: 16px;                   /* 【調整】文字サイズ（SP） */
	font-weight: 500;
	letter-spacing: .5px;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	pointer-events: auto;
	animation: ef-flow 4s linear infinite, ef-bounce 2s infinite 2s;
}

.c-entryFix__btn:hover{
	opacity: .6;
	color: #fff !important;
	text-decoration: none !important;
}

.c-entryFix__btn:focus-visible{
	outline: 3px solid #fff;
	outline-offset: 2px;
}


/* ---------------------------------------------------------------------
 * A-4. 行頭のLINEアイコン
 *      SWELLは .icon-line:before に color:#00c300（LINEグリーン）を
 *      指定しているため、白へ上書きする
 * ------------------------------------------------------------------- */
.c-entryFix__icon{
	flex: 0 0 auto;
	font-size: 20px;                   /* 【調整】アイコンサイズ */
	line-height: 1;
}

.c-entryFix__icon::before{
	color: #fff !important;
}

.c-entryFix__label{
	flex: 0 1 auto;
}


/* ---------------------------------------------------------------------
 * A-5. 右端の矢印（白丸＋シェブロン）
 * ------------------------------------------------------------------- */
.c-entryFix__btn::before,
.c-entryFix__btn::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 20px;
	height: 20px;
	transform: translate(0, -50%);
}

.c-entryFix__btn::before{
	background: #fff;
	border-radius: 50%;
}

.c-entryFix__btn::after{
	right: 17px;
	width: 8px;
	height: 8px;
	border: solid 3px #fd6c6c;
	border-left: none;
	border-bottom: none;
	transform: translate(0, -50%) rotate(45deg);
}


/* ---------------------------------------------------------------------
 * A-6. スマホの開閉メニューを開いている間は退避
 * ------------------------------------------------------------------- */
html[data-spmenu="opened"] .c-entryFix{
	display: none;
}


/* ---------------------------------------------------------------------
 * A-7. SPのみ：フッター下部に余白を追加
 *      全幅のCTAバーが著作権表記などを覆うのを防ぐ
 * ------------------------------------------------------------------- */
@media (max-width: 959px){
	.l-footer__foot{
		padding-bottom: 96px;   /* 【調整】CTAのbottom + 72px */
	}
}


/* ---------------------------------------------------------------------
 * A-8. 狭い端末（389px以下）＝ 文字量が増えたぶん余白と文字を縮める
 * ------------------------------------------------------------------- */
@media (max-width: 389px){
	.c-entryFix{
		padding-left: 24px;
		padding-right: 24px;
	}
	.c-entryFix__btn{
		font-size: 15px;
		padding-right: 40px;
	}
	.c-entryFix__icon{
		font-size: 18px;
	}
}


/* ---------------------------------------------------------------------
 * A-9. PC（960px以上）＝ 右下・固定幅
 * ------------------------------------------------------------------- */
@media (min-width: 960px){
	html body .p-fixBtnWrap{
		bottom: 98px !important;   /* 30 + 52 + 16 */
	}
	.c-entryFix{
		bottom: 30px;        /* 【調整】画面下端からの距離（PC） */
		left: auto;
		right: 100px;        /* 【調整】右端からの距離（PC） */
		width: 320px;        /* 【調整】ボタン幅（PC）。文字が増えたため300→320 */
		padding-left: 0;
		padding-right: 0;
	}
	.c-entryFix__btn{
		font-size: 18px;     /* 【調整】文字サイズ（PC） */
	}
	.c-entryFix__icon{
		font-size: 22px;
	}
}


/* ---------------------------------------------------------------------
 * A-10. アニメーション控えめ設定への配慮
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	.c-entryFix__btn{
		animation: none;
		background-position: 25% center;
	}
}


/* =====================================================================
 * B. 閲覧同意ポップアップ
 * ---------------------------------------------------------------------
 * ポップアップ本体はJavaScript（swell_child/js/gate.js）が実行時に
 * 生成するため、HTMLソースには存在しない。このCSSは生成後の見た目を
 * 定義するだけで、本文の表示状態には一切影響しない
 * （本文を display:none にしたり隠したりはしない）。
 *
 * 表示するページの判定は functions.php の hanaya_gate_is_target()。
 * LPは既定で非表示で、編集画面のチェックボックスで個別に指定する。
 *
 * 色や角丸を変える場合は【調整】の行を編集する。
 * ================================================================== */

/* --- 背景のオーバーレイ --- */
.c-gate {
	position: fixed;
	inset: 0;
	z-index: 10000;              /* 【調整】追従CTA(100)やSWELLのモーダル(1000)より上 */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .8);
	animation: c-gate-in .25s ease;
}

/* --- 白いカード --- */
.c-gate__panel {
	box-sizing: border-box;
	width: 100%;
	max-width: 374px;            /* 【調整】カードの最大幅 */
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 32px 24px;
	background: #fff;
	border-radius: 20px;         /* 【調整】角丸 */
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
	text-align: center;
}

/* --- 見出し --- */
.c-gate__title {
	margin: 0;
	font-size: 18px;             /* 【調整】 */
	font-weight: 700;
	line-height: 1.5;
}

/* --- 説明文 --- */
.c-gate__lead {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
}

/* --- 確認項目 --- */
.c-gate__list {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.c-gate__list li {
	position: relative;
	margin-top: 8px;
	padding-left: 1.5em;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}
.c-gate__list li::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
	color: #ff758e;              /* 【調整】チェックの色 */
}

/* --- 同意ボタン --- */
.c-gate__agree {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 24px;
	padding: 16px 0;
	border: none;
	border-radius: 30px;
	background: #ff758e;         /* 【調整】ボタンの色 */
	color: #fff;
	font-size: 17px;             /* 【調整】 */
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}
.c-gate__agree:hover {
	opacity: .8;
}
.c-gate__agree:focus-visible {
	outline: 3px solid #333;
	outline-offset: 2px;
}

/* --- 同意しない --- */
.c-gate__leave {
	display: inline-block;
	margin-top: 16px;
	color: #888;
	font-size: 13px;
	text-decoration: underline;
}
.c-gate__leave:hover {
	color: #555;
}
.c-gate__leave:focus-visible {
	outline: 2px solid #333;
	outline-offset: 2px;
}

/* --- 表示中は背景をスクロールさせない（JSがクラスを付与） --- */
html.is-gateOpen,
html.is-gateOpen body {
	overflow: hidden;
}

/* --- アニメーション控えめ設定への配慮 --- */
@media (prefers-reduced-motion: reduce) {
	.c-gate {
		animation: none;
	}
}


/* =====================================================================
 * ここから下はアニメーション定義のみ。必ず最後尾に置く
 * ================================================================== */
@keyframes ef-flow{
	to{ background-position: 200% center; }
}

@keyframes ef-bounce{
	0%, 20%, 50%, 80%, 100%{ transform: translateY(0); }
	40%{ transform: translateY(-10px); }
	60%{ transform: translateY(-5px); }
}

@keyframes c-gate-in{
	from{ opacity: 0; }
	to{ opacity: 1; }
}