@charset "utf-8";
/************共通スタイル************/ :root {
	--panel: #ffffff;
	--brand: #00a86b;
	--accent: #ff3b30;
	--line: #e5e7eb;
}
* {
	box-sizing: border-box
}
html, body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", sans-serif;
	background-color: #FEFEFE;
 color: #1d1d1f;
}
html, body {
	height: 100%;
	display: flex;
	flex-direction: column;
	/*background-image: url("/tpl/img/body.png");*/
	background-attachment: fixed;
}
body > footer {
	margin-top: auto;
}
a {
	color: inherit;
	text-decoration: none
}
img {
	max-width: 100%;
	display: block;
	height: auto
}
/* wrapper 可視化 */
.wrapper_wrapper_ {
	position: relative;
	z-index: 0;
	opacity: 1;
	pointer-events: auto;
	transition: none;
	margin-top: 0;
	padding-bottom: 150px;
	font-size: 0.95rem;
}
.container {
	position: relative;
}
main.topcontainer {
    padding-top: 365px !important;
}
main.container {
	padding-top: 100px;
}
/************HEADER************/
.topbar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 3000;
	background: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .42));
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 8px 24px rgba(16, 24, 40, .06);
	transition: transform .35s ease, background .25s ease, box-shadow .25s ease;
}
.topbar .container {
	width: clamp(320px, 82vw, 1024px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 15px 15px;
}
.topbar::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, rgba(0, 168, 107, .8), rgba(0, 168, 107, .15));
}
/* ロゴ */
.topbar .logo a img {
	width: 200px;
	height: auto;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .14));
	transition: transform .2s ease;
}
.topbar .logo a:hover img {
	transform: translateY(-1px);
}
/* ====== 検索欄 with アイコン ====== */
.topbar form {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	width: 100%;
}
.topbar .search-group {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
}
.topbar .search-group .icon {
	position: absolute;
	left: 12px;
	font-size: 16px;
	color: #9ca3af;
	pointer-events: none;
	transition: color .2s ease;
	display: block !important;
}
.topbar .search-group input[type="text"] {
	width: 100%;
	padding: 11px 14px 11px 36px; /* 左に余白を多めにしてアイコン位置確保 */
	border-radius: 9999px;
	border: 1px solid rgba(0, 0, 0, .08);
	background: #FFF!important;
	/*background: rgba(255, 255, 255, .9);*/
	font-size: 14px;
	transition: all .2s ease;
}
.topbar .search-group input[type="text"]:focus {
	border-color: rgba(0, 168, 107, .4);
	box-shadow: 0 0 0 3px rgba(0, 168, 107, .18);
	background: #fff;
	outline: none;
}
.topbar .search-group input[type="text"]:focus + .icon {
	color: var(--brand);
}
.topbar input[type="submit"] {
	border: 1px solid var(--brand);
	background: linear-gradient(180deg, var(--brand), #06b17a);
	color: #fff;
	font-weight: 700;
	border-radius: 9999px;
	padding: 10px 16px;
	box-shadow: 0 6px 18px rgba(0, 168, 107, .22);
	cursor: pointer;
	transition: all .2s ease;
}
.topbar input[type="submit"]:hover {
	transform: translateY(-1px);
	filter: saturate(110%);
}
/* ====== リンク群（アイコン付き） ====== */
.topbar .links {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	font-size: 13px;
	font-weight: 600;
	color: #444;
}
.topbar .links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #4b5563;
	text-decoration: none;
	position: relative;
	transition: color .2s ease, transform .12s ease;
}
.topbar .links a .icon {
	font-size: 17px;
	line-height: 1;
	transition: transform .2s ease, opacity .2s ease;
}
.topbar .links a:hover {
	color: var(--brand);
	transform: translateY(-1px);
}
.topbar .links a:hover .icon {
	transform: translateY(-1px) scale(1.08);
	opacity: .9;
}
.topbar .links a:not(:last-child)::after {
	content: "·";
	color: #cbd5e1;
	margin-left: 10px;
}
/* スクロールで縮小 */
.topbar.is-compact {
	background: rgba(255, 255, 255, .58);
	box-shadow: 0 6px 18px rgba(16, 24, 40, .05);
}
.topbar.is-compact .container {
	padding: 6px 10px;
}
.topbar.is-compact .logo a img {
	width: 112px;
}
/* モバイル */
/* ======== SP（スマホ）レイアウト最適化 ======== */
@media(max-width:720px) {
	/* グリッド → 縦並びに変更 */
	.topbar .container {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 10px 10px;
		text-align: center;
	}
	/* ロゴを中央に */
	.topbar .logo {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.topbar .logo a img {
		width: 120px;
	}
	/* 検索フォームを中央寄せ＆少し小さめに */
	.topbar form {
		justify-content: center;
	}
	.topbar .search-group {
		width: 90%;
		margin: 0 auto;
	}
	.topbar .search-group .icon {
		left: 12px;
		font-size: 16px;
	}
	.topbar input[type="submit"] {
		padding: 10px 16px;
		font-size: 14px;
	}
	/* リンク（マイページ・カゴ）を中央寄せ */
	.topbar .links {
		justify-content: center;
		gap: 18px;
		font-size: 13px;
	}
	.topbar .links a {
		font-size: 13px;
	}
	.topbar .links a .icon {
		font-size: 18px;
	}
	/* 下部の余白をやや広めに */
	main.container {
		padding-top: 165px;
	}
}
@media(max-width:720px) {
	.topbar {
		/*background: rgba(255, 255, 255, .85);
		border-bottom: 1px solid rgba(0, 0, 0, .05);
		backdrop-filter: blur(20px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, .08);*/
	}
}
/* ダークモード */

/* is-compact のときはロゴと検索のみ表示 */
.topbar.is-compact .links, .topbar.is-compact nav, .topbar.is-compact .links a, .topbar.is-compact .icon, .topbar.is-compact .label {
	display: none !important;
}
.topbar.is-compact .logo {
	display: flex !important;
}
.topbar.is-compact form {
	display: flex !important;
}
/************FOOTER************/
footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	background: rgba(255 255 255 / 0.5);
	border-top: 1px solid var(--line);
	padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
	backdrop-filter: saturate(150%) blur(10px);
}
/* ===== PC ===== */
.footer-forms-toggle {
	display: flex;
	justify-content: center;
	gap: 20px;
}
.nav-btn, .open-btn {
	background: #fff;
	color: var(--brand);
	border: 1px solid var(--brand);
	border-radius: 8px;
	padding: 3px 16px;
	cursor: pointer;
	transition: all .2s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	    font-size: 15px;
}
.nav-btn:hover, .open-btn:hover {
	background: #f3fdf8;
	transform: translateY(-2px);
}
.open-btn.active {
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px #9fe4ca;
}
/* ===== SP: アイコン1行ナビ ===== */
@media (max-width: 640px) {
	.footer-forms-toggle {
		justify-content: space-around;
		gap: 6px;
		margin-bottom: 4px;
	}
	.nav-btn, .open-btn {
		flex: 1;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: none;
		border: none;
		color: #111;
		font-size: 10px;
		padding: 4px 0;
		
	}
	.nav-btn:hover, .open-btn:hover {
		transform: none;
		background: none;
	}
	.nav-btn .icon, .open-btn .icon {
		font-size: 20px;
		display: block;
		margin-bottom: 2px;
	}
	.nav-btn .label, .open-btn .label {
		display: block;
	}
	.footer-links a:not(:last-child)::after {
		margin-left: 8px;
	}
	.footer-brand {
		gap: 6px;
		margin-top: 4px;
	}
	.footer-brand img {
		width: 62px;
	}
	.footer-brand span {
		font-size: 9.8px;
	}
}
/* ===== スライドフォーム ===== */
.slide-form {
	width: clamp(320px, 95vw, 900px);
	margin: 0 auto;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all .35s ease;
}
.slide-form.show {
	max-height: 500px;
	opacity: 1;
	margin-top: 8px;
}
.slide-form form {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 14px 16px;
	text-align: left;
}
.slide-form h3 {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--brand);
}
.fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.fields input, .fields select {
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 8px;
	font-size: 13px;
}
.fields select {display:none;}
.fields button {
	grid-column: 1/-1;
	background: var(--brand);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px;
	font-weight: 600;
	cursor: pointer;
}
.fields button:hover {
	opacity: .9;
}
@media (max-width:520px) {
	.fields {
		grid-template-columns: 1fr;
	}
}
footer .container {
	text-align: center;
}
footer .container img {
	width: 75px;
	display: inline-block;
}
footer .container span {
	font-size: 10px;
}
/* ========== Footer: おしゃれ版 ========== */
footer .container.footer-elegant {
	background: transparent; /* 既存の白背景を打ち消し */

	padding: 4px 8px 8px; /* 上下の余白を圧縮 */
	line-height: 1.2;
	text-align: center;
}
/* リンク行：中央寄せ・自動折返し・ドット区切り */
.footer-links {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-width: min(92vw, 980px);
	background: rgba(255, 255, 255, .65);
	/*backdrop-filter: blur(6px) saturate(120%);*/
	border-radius: 15px;
	gap: 6px 12px;
	padding: 4px 8px; /* ピルの上下を薄く */
}
/* 個々のリンク */
.footer-links a {
	color: #4b5563!important; /* muted系 */
	font-weight: 600;
	text-decoration: none;
	padding: 6px 2px;
	transition: color .2s ease, transform .12s ease;
	font-size: 12px; /* やや小さく */
	padding: 4px 0; /* 上下パディング縮小 */
}
.footer-links a:hover {
	color: var(--brand);
	transform: translateY(-1px);
}
/* キーボード操作のアクセシビリティ */
.footer-links a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 168, 107, .25);
	border-radius: 6px;
}
/* 区切りドット（最後以外） */
.footer-links a:not(:last-child)::after {
	content: "·";
	color: #cbd5e1;
	margin-left: 8px;
}
/* ロゴ行：小さめロゴ＋細いコピーライト */
.footer-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 6px;
}
.footer-brand img {
	width: 68px;
	height: auto;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .12));
}
.footer-brand span {
	font-size: 10px;
	color: #6b7280;
	letter-spacing: .02em;
}
/* SP最適化：リンクの余白とサイズ調整 */
@media (max-width: 640px) {
	.footer-links {
		max-width: 95vw;
		gap: 6px 10px;
		padding: 4px 8px;
	}
	.footer-links a {
		font-size: 11.5px;
		padding: 3px 0;
	}
	.footer-links a:not(:last-child)::after {
		margin-left: 10px;
	}
	.footer-brand img {
		width: 70px;
	}
	.footer-brand span {
		font-size: 10.5px;
	}
}
/* ダークモード配慮（任意） */


/***********フローティングボタン設定************/
.compact-fab {
	position: fixed;
	right: 7%;
	top: 50%;
	display: none; /* 通常は非表示。is-compact時に表示 */
	flex-direction: column;
	gap: 14px;
	z-index: 9999;
}
/* ヘッダーが compact 状態のときだけ表示 */
body.header-compact .compact-fab {
	display: flex;
}
/* ===== 丸ボタンのデザイン ===== */
.icon-btn {
	width: 110px;
	height: 110px;
	background: rgba(96, 171, 114, 0.6);
	border-radius: 50%;
	box-shadow:
		0 4px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	align-items: center;
	justify-content: center;
	transition: all .25s ease;
	cursor: pointer;
	backdrop-filter: blur(10px);
	color: #FFF;
	text-align: center;
}
/* ホバー時の立体感と浮遊感 */
.icon-btn:hover {
	transform: translateY(-4px) scale(1.07);
	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	background: #62ae76;
}
/* アイコン画像 */
.icon-btn img {
	/* width: 60%;*/
	height: 45%;
	object-fit: contain;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
	transition: transform .25s ease;
	display: block;
	margin: auto;
	margin-top: 18px;
}
/* ホバー時に少しズーム */
.icon-btn:hover img {
	transform: scale(1.1);
}
/* ===== スマホ調整 ===== */
@media (max-width: 640px) {
	.compact-fab {
		right: 12px;
		top: 50%;
		gap: 10px;
	}
	.icon-btn {
		width: 90px;
		height: 90px;
	}
}
/************デバイス切り替え************/
.change_mode_ {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 14px;
	padding: 10px;
}
.change_mode_ span {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 10px 80px;
	border-radius: 20px;
	background: #f5f5f5;
	color: #333;
	font-weight: 500;
	transition: all .25s ease;
	border: 3px solid #FFF;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, .06);
}
.change_mode_ span:hover {
	background: var(--brand, #00a86b);
	color: #fff;
	transform: translateY(-1px);
}
.change_mode_ span::before {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	line-height: 1;
	font-size: 18px;
}
/* アイコン */
.mode_sp_::before {
	content: "📱　";
}
.mode_pc_::before {
	content: "💻　";
}
/* 初期は非表示にしてJSで切り替え */
.change_mode_ span {
	display: none;
}

/*戻る　進む*/
  #return {
        position: fixed;
    /* right: 24px; */
            bottom: 100px;;
    right: 80%;
    transform: translateX(-50%) translateY(-50%);

    z-index: 9999;
    font-family: "Noto Sans JP", sans-serif;
			

  display: flex;
  flex-direction: column; /* ←縦方向に並べる */
  gap: 12px;
  align-items: flex-start; /* 左寄せ。中央にしたい場合は center */
  margin: 1rem 0;


			
			
  }
  #return button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    min-width: 110px;
    padding: 0 18px;
    border: 1px solid #3d8e5c;
    border-radius: 200px;
    background: rgba(96, 171, 114, 0.6);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background .2s, transform .1s, box-shadow .2s;
  }
  #return button:hover {
    background: #4aa26d;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  }
  #return button:active { transform: translateY(0); }
  #return button img { width: 18px; height: 18px; }
  @media (max-width: 520px){
    #return { left: 41px;
        bottom: 165px;
        gap: 8px;}
    #return button { height: 40px; min-width: 100px; font-size: 13px; }
  }

#return .nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px; /* 必要に応じて調整 */
  padding: 0.6rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

#return .nav-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

#return .nav-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
}

footer search {display:none;}