@charset "UTF-8";
/*! Copyright (c) 2026 株式会社メディウィル（Mediwill Inc.） All rights reserved. 弊社が制作・運用するサイト専用。無断複製・再配布・他サイトへの転用を禁じます。 / Proprietary — no redistribution or reuse without written permission. https://www.mediwill.co.jp/ */
/*--------------------------------------------------------------
★浮きメニュー（追尾予約ボタン）オプション — このサイト専用のCSS（spiral）
親テーマ（eyeclinic-base v2.3.37〜）は「読み込み口・body クラス ec-hasReserveFloat・ページトップの退避」だけを持ち、
見た目と動きはこのファイルで決める。クライアントの要望に合わせて自由に書き換えてよい。
  部品一式: inc/option-float.php（読み込み）／site-parts/common/reserve-float.php（項目と文言）／
            assets/css/option-float.css（このファイル）／assets/js/option-float.js（出し消しと動かすタイミング）
読み込み順: 親 style.css → 子 site.css → このファイル
--------------------------------------------------------------*/

/*--------------------------------------------------------------
##このサイトの設定（まずここを変える）
--------------------------------------------------------------*/
:root {
	/* 大きさ: 1=標準（高さ SP 48px／タブレット 56px／PC 66px）。1.5 なら1.5倍（高さ SP 72px／タブレット 84px／PC 99px）。
	   高さ・文字・余白・最低幅・白い丸・アイコンがまとめて変わる。
	   このサイトは 1.5: デモサイトを確認したクライアントの要望「PC・スマホとも1.5倍程度」（2026-09-29・v1.1.7） */
	--float-scale: 1.5;
	/* 色（面／文字／白い丸のアイコン）: 黄 #f4c442×濃グレー（文字の対比6.43）。
	   クライアント決定（2026-09-30・案1）。サイトの色（青系3種）はスクロール中にどこかの背景と同化するため、
	   青の反対側の色にした。経緯: v1.1.7 黄 → v1.1.8 濃い青×白（仮）→ v1.1.9 黄に確定 */
	--c-float: #f4c442;
	--c-float-text: #3f3f3f;
	--c-float-icon: #3f3f3f;
	/* マウスオーバーの色: サブカラーの濃い青×白（白文字の対比6.07・半透明なし）。黒にするなら3つとも #2b2b2b／#fff／#2b2b2b */
	--c-float-hover: var(--c-sub);
	--c-float-hover-text: #fff;
	--c-float-hover-icon: var(--c-sub);
	/* LINE項目の色（公式の緑・変えない） */
	--c-line: #06c755;
}

/* PCだけ・スマホだけ大きさを変える例（使うときはコメントを外す）
@media screen and (min-width: 1024px){
	:root {
		--float-scale: 1.3;
	}
}
*/

/* 色の選択肢（4つ・2026-09-24決定）。上の設定の値を差し替える
   黄×濃グレー          : --c-float:#f4c442／-text:#3f3f3f／-icon:#3f3f3f        マウスオーバー 黒×白（#2b2b2b／#fff／#2b2b2b） ←このサイト（マウスオーバーは濃い青）
   主色×白              : --c-float:var(--c-main)／-text:#fff／-icon:var(--c-sub) マウスオーバー 黒×白
   アクセント色×濃グレー: --c-float:var(--c-point)／-text:var(--c-text)／-icon:var(--c-text) マウスオーバー 主色×白
   黒×白                : --c-float:#2b2b2b／-text:#fff／-icon:#2b2b2b            マウスオーバー 主色×白
   決まり: 文字は面に対して 4.5:1 以上、白い丸のアイコンは白に対して 4.5:1 以上、マウスオーバーの白文字は 3:1 以上を計算で確認する
   （黄・クリームなど淡い面は白文字が読めないので濃グレー。淡い主色のサイトはマウスオーバーを黒にする） */

/*--------------------------------------------------------------
##浮きボタン本体（形・大きさ・出し消し・マウスオーバー・動き）
形: 画面右下の浮きボタン（SP・PC共通）。主役（WEB予約）は文言つきのピルで、左端に白い丸を食み出させてアイコンを載せる。
  項目が増えたら電話・LINE を丸で上に積む（主役が一番下＝親指に近い）。
出し消し（option-float.js）: 読み込み後に下からふわっと出る。PCはヘッダーの WEB予約 ボタンが画面から消えてから出る。
  フッターの予約帯が見えている間は消える。ページトップボタンは親の theme.js が浮きボタンの上に退避させる。
動き: config 'float_motion'（inc/option-float.php が body クラスにする）
  'draw'（既定）=10秒ごとに線が引かれる／'lively'=跳ねて輪が広がる／'jelly'=白い丸がぷるんと動き続ける／'stretch'=伸び上がり続ける
--------------------------------------------------------------*/
.float-reserve{
	position: fixed;
	right: 15px;
	bottom: calc(15px + env(safe-area-inset-bottom));
	z-index: 999; /* ページトップ(1000)のすぐ下 */
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.float-reserve.is-shown{
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.float-reserve_group{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: calc(8px * var(--float-scale));
}

.float-reserve_item{
	font-family: var(--font-base);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* 主役: 文言つきのピル＋左に食み出す白い丸 */
.float-reserve_item--primary{
	position: relative;
	height: calc(48px * var(--float-scale));
	padding: 0 calc(26px * var(--float-scale)) 0 calc(48px * var(--float-scale));
	border-radius: 999px;
	background: var(--c-float);
	color: var(--c-float-text);
	font-size: calc(15px * var(--float-scale));
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* リンク共通の「マウスを乗せると70%の半透明」（親 style.css の a:hover{opacity:0.7; transition:all}）は、浮きメニューには使わない。
   半透明だと後ろの色と混ざって色が変わり、白い丸も透けて見えるため（2026-09-29 ユーザー指摘）。
   触る端末で押したあとに残ることがあるので、下の (hover: hover) の外に書く */
.float-reserve_item:hover{
	opacity: 1;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* マウスオーバー（参考: fukushi-greencoop.or.jp の左下ボタン）: 面と文字を追尾専用色の hover 系に切り替える。
   マウスのある端末だけ（hover: hover。触る端末で押した色が残らないように）。キーボードのフォーカスも同じ見た目。
   電話・LINE の丸は色を変えず、少し暗くするだけ */
@media (hover: hover){
	.float-reserve_item--primary:hover{
		background: var(--c-float-hover);
		color: var(--c-float-hover-text);
	}

	.float-reserve_item--primary:hover .float-reserve_icon{
		color: var(--c-float-hover-icon);
	}

	.float-reserve_item--tel:hover,
	.float-reserve_item--line:hover{
		filter: brightness(0.92);
	}
}

.float-reserve_item--primary:focus-visible{
	background: var(--c-float-hover);
	color: var(--c-float-hover-text);
}

.float-reserve_item--primary:focus-visible .float-reserve_icon{
	color: var(--c-float-hover-icon);
}

/* 1項目（WEB予約だけ）のときは文言が短くても小さく見えないよう最低幅を持つ（v2.3.35）。文言が長ければ自然に広がる */
.float-reserve_group--n1 .float-reserve_item--primary{
	min-width: calc(176px * var(--float-scale));
}

.float-reserve_item--primary .float-reserve_icon{
	position: absolute;
	left: calc(-8px * var(--float-scale));
	top: 50%;
	width: calc(40px * var(--float-scale));
	height: calc(40px * var(--float-scale));
	margin-top: calc(-20px * var(--float-scale));
	border-radius: 50%;
	background: #fff;
	color: var(--c-float-icon);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.25s ease;
}

/* 副: 電話・LINE は丸。文言は読み上げ用に残し、見た目は隠す */
.float-reserve_item--tel,
.float-reserve_item--line{
	position: relative;
	width: calc(44px * var(--float-scale));
	height: calc(44px * var(--float-scale));
	border-radius: 50%;
	background: #fff;
	color: var(--c-text);
}

.float-reserve_item--line{
	background: var(--c-line);
	color: #fff;
}

.float-reserve_item--tel .float-reserve_icon,
.float-reserve_item--line .float-reserve_icon{
	display: flex;
	align-items: center;
	justify-content: center;
}

.float-reserve_item--tel .float-reserve_label,
.float-reserve_item--line .float-reserve_label{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* アイコンは共通アイコン（inc/icons.php・##共通アイコン）。浮きボタンでは文字色そのまま（主役=--c-float-icon／電話=--c-text／LINE=白） */
.float-reserve{
	--c-icon: currentColor;
}

.float-reserve .ec-icon{
	display: block;
	width: calc(24px * var(--float-scale));
	height: calc(24px * var(--float-scale));
	vertical-align: 0;
}

.float-reserve .ec-icon--fill{
	width: calc(22px * var(--float-scale));
	height: calc(22px * var(--float-scale));
}

@media (prefers-reduced-motion: reduce){
	.float-reserve{
		transition: none;
	}
}

/* 浮きボタンの分だけ本文下部を空ける（ページトップの退避位置は theme.js が実測で決める） */
body.ec-hasReserveFloat{
	padding-bottom: calc(48px * var(--float-scale) + 32px); /* 標準の大きさで80px */
}

/* 大きさは3段階: SP（〜767px）=基本 48px／タブレット（768〜1023px）=56px／PC（1024px〜）=66px。
   どの寸法にも --float-scale を掛けてあるので、冒頭の設定の数値1つで全体の大きさが変わる。
   参考にした事例（右下の浮きボタン）がPCで一回り大きいのに合わせる（v2.3.33） */
@media screen and (min-width: 768px){
	.float-reserve{
		right: 24px;
		bottom: 24px;
	}

	.float-reserve_item--primary{
		height: calc(56px * var(--float-scale));
		padding: 0 calc(32px * var(--float-scale)) 0 calc(58px * var(--float-scale));
		font-size: calc(16px * var(--float-scale));
	}

	.float-reserve_group--n1 .float-reserve_item--primary{
		min-width: calc(208px * var(--float-scale));
	}

	.float-reserve_item--primary .float-reserve_icon{
		left: calc(-10px * var(--float-scale));
		width: calc(46px * var(--float-scale));
		height: calc(46px * var(--float-scale));
		margin-top: calc(-23px * var(--float-scale));
	}

	.float-reserve_item--tel,
	.float-reserve_item--line{
		width: calc(48px * var(--float-scale));
		height: calc(48px * var(--float-scale));
	}

	.float-reserve .ec-icon{
		width: calc(26px * var(--float-scale));
		height: calc(26px * var(--float-scale));
	}
}

@media screen and (min-width: 1024px){
	.float-reserve{
		right: 32px;
		bottom: 32px;
	}

	.float-reserve_item--primary{
		height: calc(66px * var(--float-scale));
		padding: 0 calc(40px * var(--float-scale)) 0 calc(66px * var(--float-scale));
		font-size: calc(19px * var(--float-scale));
		letter-spacing: 0.06em;
	}

	.float-reserve_group--n1 .float-reserve_item--primary{
		min-width: calc(240px * var(--float-scale));
	}

	.float-reserve_item--primary .float-reserve_icon{
		left: calc(-12px * var(--float-scale));
		width: calc(54px * var(--float-scale));
		height: calc(54px * var(--float-scale));
		margin-top: calc(-27px * var(--float-scale));
	}

	.float-reserve_item--tel,
	.float-reserve_item--line{
		width: calc(54px * var(--float-scale));
		height: calc(54px * var(--float-scale));
	}

	.float-reserve .ec-icon{
		width: calc(30px * var(--float-scale));
		height: calc(30px * var(--float-scale));
	}

	.float-reserve .ec-icon--fill{
		width: calc(26px * var(--float-scale));
		height: calc(26px * var(--float-scale));
	}
}

/* ダイナミック版（config float_motion => 'lively' → body.ec-floatLively・v2.3.34）:
   出現時に弾み、線を引くたびに小さく跳ねて白い丸から輪が広がる。既定（'draw'）は線だけ */
@keyframes ec-float-appear{
	0%{ transform: translateY(24px); opacity: 0; }
	55%{ transform: translateY(-8px); opacity: 1; }
	75%{ transform: translateY(0); }
	88%{ transform: translateY(-3px); }
	100%{ transform: translateY(0); opacity: 1; }
}

@keyframes ec-float-hop{
	0%, 100%{ transform: translateY(0); }
	20%{ transform: translateY(-9px); }
	40%{ transform: translateY(0); }
	55%{ transform: translateY(-4px); }
	70%{ transform: translateY(0); }
}

@keyframes ec-float-ripple{
	0%{ transform: scale(1); opacity: 0.7; }
	100%{ transform: scale(2.4); opacity: 0; }
}

body.ec-floatLively .float-reserve.is-shown{
	animation: ec-float-appear 0.7s ease-out both;
}

body.ec-floatLively .float-reserve.is-draw .float-reserve_item--primary{
	animation: ec-float-hop 0.9s ease-out;
}

body.ec-floatLively .float-reserve.is-draw .float-reserve_item--primary .float-reserve_icon::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	border: 2px solid var(--c-float-icon);
	animation: ec-float-ripple 1.2s ease-out both;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
	body.ec-floatLively .float-reserve.is-shown,
	body.ec-floatLively .float-reserve.is-draw .float-reserve_item--primary,
	body.ec-floatLively .float-reserve.is-draw .float-reserve_item--primary .float-reserve_icon::after{
		animation: none;
	}
}

/* 動き続ける版（config float_motion => 'jelly' か 'stretch' → body.ec-floatLoop ＋ ec-floatJelly／ec-floatStretch・v2.3.36）:
   浮きボタンの白い丸だけが 3.6秒に1回動いて戻る（参考: fukushi-greencoop.or.jp の「？」）。
   'jelly'=ぷるん（先に横につぶれてから上に伸びる、ゼリーのような戻り。見本の別案I・op採用=ユーザー選択）
   'stretch'=伸び上がり（ぐいっと上に伸びて戻る。見本H）。原点はどちらも丸の下端。
   CSSだけで回し続け、浮きボタンには10秒ごとの線引きを付けない（option-float.js は body.ec-floatLoop を見る）。
   ヘッダー・フッター・メニュー内は従来どおり線引き。サイト全体を動かし続けると煩わしいので、浮きボタン以外には使わない。
   reduced-motion では動かさない */
@keyframes ec-float-jelly{
	0%, 30%, 100%{ transform: scale(1, 1); }
	6%{ transform: scale(1.18, 0.86); }
	12%{ transform: scale(0.9, 1.12); }
	18%{ transform: scale(1.06, 0.95); }
	24%{ transform: scale(0.98, 1.02); }
}

@keyframes ec-float-stretch{
	0%, 34%, 100%{ transform: scale(1, 1); }
	10%{ transform: scale(0.9, 1.2); }
	19%{ transform: scale(1.07, 0.93); }
	27%{ transform: scale(0.98, 1.03); }
}

body.ec-floatLoop .float-reserve.is-shown .float-reserve_item--primary .float-reserve_icon{
	transform-origin: 50% 100%;
	animation: ec-float-jelly 3.6s ease-in-out 0.6s infinite;
}

body.ec-floatStretch .float-reserve.is-shown .float-reserve_item--primary .float-reserve_icon{
	animation-name: ec-float-stretch;
}

@media (prefers-reduced-motion: reduce){
	body.ec-floatLoop .float-reserve.is-shown .float-reserve_item--primary .float-reserve_icon,
	body.ec-floatStretch .float-reserve.is-shown .float-reserve_item--primary .float-reserve_icon{
		animation: none;
	}
}

/* 浮きボタンより上にSPのドロワー（メニュー）を出す: .header-sp を重ね順の入れ物にして、
   中のドロワー・×ボタン・暗幕ごと浮きボタン(999)とページトップ(1000)の上に置く。
   SPヘッダー固定（親の既定）のサイトは親が position: fixed を指定しているので、ここでは重ね順だけを足す。
   固定をやめたサイト（config header_fixed => false）だけ position: relative を足す
   （このファイルは親CSSより後に読まれるため、無条件に relative を書くと固定が外れてしまう） */
@media screen and (max-width: 1023px){
	body.ec-hasReserveFloat .header-sp{
		z-index: 1001;
	}

	body.ec-hasReserveFloat:not(.ec-hasFixedHeader) .header-sp{
		position: relative;
	}
}

/*--------------------------------------------------------------
##予約ボタンのアイコンの動き（線が引かれる）
浮きボタン・ヘッダー・フッター・メニュー内の予約ボタンに共通。option-float.js が「その画面で予約の入口に
なっているボタン1つだけ」に .is-draw を付ける。止めるときは config 'reserve_motion' => false
--------------------------------------------------------------*/
/* 動きC: 線が引かれる（option-float.js が .is-draw を付けている約1.7秒だけ） */
.is-draw .ec-icon--stroke *{
	animation: ec-icon-draw 1.6s ease-out both;
}

@keyframes ec-icon-draw{
	from{ stroke-dashoffset: 100; }
	to{ stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce){
	.is-draw .ec-icon--stroke *{
		animation: none;
	}
}