@charset "UTF-8";
/* =======================================================================
   ゆーかり - メインスタイルシート
   統合版: main.css + subs.css
   ======================================================================= */

/* =======================================================================
   1. リセット・基本設定
   ======================================================================= */

* {
	margin: 0;
	color: #857f6b;
	font-family: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
	width: 100%;
	min-width: 320px;
	background-image: url('../images2/bk.png');
	background-repeat: repeat;
	background-color: #fcfaed;
	line-height: 1.25em;
}

/* =======================================================================
   2. 基本要素
   ======================================================================= */

/* キーワード強調スタイル */
.kw {
	font-weight: bold;
}

.kw-teal {
	color: #569CA6;
	font-weight: bold;
}

.kw-pink {
	color: #d584c4;
	font-weight: bold;
}

img, iframe {
	height: auto;
}

h1 {
	text-align: center;
}

h2 {
	text-align: center;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

em {
	font-style: normal;
	color: #f2822c;
	font-weight: 600;
}

ul {
	padding: 0;
	padding-left: 1.5em;
}

ul li {
	list-style-type: disclosure-closed;
	margin-bottom: 5px;
}

br.sp {
	display: none;
}

/* =======================================================================
   3. レイアウト
   ======================================================================= */

div#container {
	max-width: 100%;
}

div#headline {
	text-align: center;
	font-size: 1em;
	margin: 1.5em auto 1.75em;
	line-height: 1.75em;
}

div#headline .headline-sep {
	margin: 0 1em;
	color: #ccc;
}

/* ヘッダーライン */
div#hline,
div#hline2 {
	position: absolute;
	padding: 5px 1px;
	font-size: 100%;
	font-weight: normal;
	line-height: 1.5;
	width: 100%;
	color: #896f5c;
	background-color: #ede4cc;
	text-align: center;
	letter-spacing: 1px;
	top: 0;
	left: 0;
	right: 0;
	white-space: nowrap;
}

div#hline2 {
	display: none;
	overflow: hidden;
	padding: 8px 0;
	line-height: 1;
}

div#hline2 .marquee-content {
	display: inline-block;
	white-space: nowrap;
	animation: marquee 20s linear infinite;
	padding-left: 100%;
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

div#hline em,
div#hline2 em {
	font-weight: 600;
}

div#hline em.blue,
div#hline2 em.blue,
div#headline em.blue {
	color: #569CA6;
}

div#hline em.pink,
div#hline2 em.pink,
div#headline em.pink {
	color: #d584c4;
}

div#hline em.green,
div#hline2 em.green,
div#headline em.green {
	color: #35995a;
}

/* =======================================================================
   4. ヘッダー
   ======================================================================= */

header {
	width: 100%;
	min-width: 320px;
	height: 830px;
	background-image: url('../images2/main-head-bk2.png');
	background-repeat: no-repeat;
	background-position: center -40px;
	background-size: auto 910px;
	margin: 30px 0 0;
}

head {
	background-image: url('../images2/main-head-bg.png');
}

/* ロゴ関連 */
#top-logo {
	margin-top: 45px;
	margin-right: 0px;
	width: 100%;
	max-width: 300px;
}

#top-logo-sp {
	display: none;
	width: 100%;
}

/* スマホ用固定フッター（PC非表示） */
#sp-fixed-footer {
	display: none;
}

#top-title-logo,
#top-title-logo-sp {
	max-width: 730px;
	width: 100%;
	margin: 20px auto 20px;
}

#top-title-logo-sp {
	display: none;
}

#main-image {
	max-width: 790px;
	width: 100%;
}

#sagakko-message {
	max-width: 400px;
}

/* =======================================================================
   5. ナビゲーション
   ======================================================================= */

div#container nav {
	margin-top: -614px;
}

div#container footer nav {
	margin-top: 0px;
}

nav ul {
	text-align: center;
	width: 880px;
	margin: 90px auto 20px;
	border: 0px solid #ddd;
	padding: 0;
}

nav ul li {
	text-align: center;
	display: inline-block;
	list-style-type: none;
	background-color: #e8e3d0;
	border: 1px solid rgba(0, 0, 0, 5%);
	border-radius: 7px;
	width: 18%;
	margin: 0 5px;
	padding: 0;
	position: relative;
}

nav ul li a {
	font-size: 16px;
	display: block;
	font-weight: 600;
	color: #726c5b;
	text-decoration: none;
	margin: 7px 0;
}

/* ナビラベルのPC/SP切り替え */
.nav-sp {
	display: none;
}

nav ul li.on {
	background-color: #ffc94d;
}

/* メインナビゲーションの小鳥 */
div#container > nav ul li.on::after {
	content: '';
	position: absolute;
	top: -27px;
	right: -8px;
	width: 45px;
	height: 45px;
	background-image: url('../images2/bird.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 10;
	transition: transform 0.3s ease;
	transform: scaleX(1);
	animation: bird-hop 3s ease-in-out 1;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}

/* 小鳥ぴよぴよアニメーション（1回だけ） */
@keyframes bird-hop {
	0%, 20%, 40%, 60%, 80%, 100% {
		transform: scaleX(1) translateY(0);
	}
	25% {
		transform: scaleX(1) translateY(-4px) rotate(-3deg);
	}
	35% {
		transform: scaleX(1) translateY(-3px) rotate(2deg);
	}
	45% {
		transform: scaleX(1) translateY(-4px) rotate(-2deg);
	}
}

div#container > nav ul li.on.bird-flip::after {
	transform: scaleX(-1);
}

nav ul li.on a {
	font-weight: 600;
	color: #fff;
}

nav ul li:hover {
	background-color: #ddd9c9;
}

nav ul li:hover a {
	color: #fff;
	text-decoration: none;
}

nav ul li.on:hover {
	background-color: #ffc94d;
}

/* =======================================================================
   6. メインコンテンツ（共通）
   ======================================================================= */

main#main {
	position: relative;
	border: none;
	border-radius: 10px;
	width: 100%;
	max-width: 835px;
	min-width: 320px;
	min-height: 1000px;
	margin: 0 auto 150px;
	padding: 30px 50px 80px;
	background: rgba(255, 255, 255, 0.8);
	margin-top: 20px;
	box-shadow: none;
	opacity: 1;
}

main#main h2 {
	font-size: 1.2rem;
	text-align: center;
	margin-top: 10px;
}

main#main h2 img {
	width: 100%;
	max-width: 400px;
	max-height: 151px;
}

main#main h3 {
	color: #8f897b;
	font-size: 1.3rem;
	text-align: center;
	margin: 1em auto 1em;
	border-bottom: none;
	padding-bottom: 5px;
	font-weight: 600;
}

main#main h4 {
	color: #8b8b8b;
	font-size: 1.0rem;
	text-align: center;
	margin: 1.5em auto 0.5em;
	font-weight: normal;
}

main#main p {
	font-size: 16px;
	text-align: center;
	margin-bottom: 1.5em;
	line-height: 1.6;
}

/* キャラクター配置 */
main#main div.kids {
	position: absolute;
}

main#main div.kids img {
	width: 90px;
}

/* 男の子 - main#main左側 */
main#main div.kids#b1 {
	position: absolute;
	left: -73px;
	top: 280px;
}

main#main div.kids#b1 img {
	width: 90px;
}

/* 女の子 - main#main右側 */
main#main div.kids#g2 {
	position: absolute;
	right: -66px;
	top: 470px;
}

main#main div.kids#g2 img {
	width: 83px;
}

/* 先頭に戻るボタン - footerから上に飛び出す */
#gotop {
	position: absolute;
	top: -135px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	text-align: center;
}

#gotop.show {
	opacity: 0.8;
	pointer-events: auto;
}

#gotop:hover {
	opacity: 1;
}

#gotop a {
	display: block;
}

#gotop a img {
	width: auto;
	height: auto;
	max-width: 175px;
}

/* =======================================================================
   7. 装飾要素
   ======================================================================= */

#green1,
#green2 {
	margin: 70px 0 60px -25px;
	position: relative;
	width: 108%;
}

#green2 {
	margin: 30px auto 40px -25px;
}

div.green-bar {
	background-image: url("../images/_green-bar.png");
	background-size: 860px 17px;
	height: 17px;
	max-width: 860px;
}

/* =======================================================================
   8. テーブル（共通）
   ======================================================================= */

table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

table th,
table td {
	font-size: 13px;
	padding: 8px;
	text-align: center;
	background: rgba(253, 241, 219, 0.6);
	border: 1px solid #e3d8c9;
}

table th {
	background-color: #f0e4d1;
}

table td.empt {
	background: #fff !important;
}

/* =======================================================================
   9. ニュース・お知らせ（トップ用）
   ======================================================================= */

div#top-news {
	border: 0px solid red;
	margin: 20px auto 45px;
	min-height: 50px;
}

div#top-news ul {
	padding: 0;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}

div#top-news ul li {
	list-style-type: none;
	border-top: 1px dashed #999;
	padding: 5px 0;
	margin: 0;
}

div#top-news ul li:last-child {
	border-bottom: 1px dashed #999;
}

div#top-news ul li span.date {
	display: block;
	width: 15%;
	margin-right: 1.5em;
	text-align: right;
	float: left;
	white-space: nowrap;
}

div#top-news ul li span.msg {
	display: block;
	float: left;
	max-width: 70%;
}

div#top-news ul li a {
	color: #fc5c76;
	text-decoration: none;
	border-bottom: 1px solid red;
	font-weight: 600;
}

div#top-news ul li * {
	font-size: 16px;
}

/* =======================================================================
   10. 問い合わせ
   ======================================================================= */

/* =======================================================================
   11. フッター
   ======================================================================= */

footer {
	position: relative;
	margin-top: 200px;
	padding: 20px;
	text-align: center;
	background: #ede3cc;
}

footer ul {
	margin: 1em auto;
	text-align: center;
}

footer ul li {
	display: inline-block;
	margin: 1em 0;
	padding: 0 1em;
	border-right: 1px solid #333;
}

footer ul li:last-child {
	border-right: 0;
}

footer ul li a {
	text-decoration: none;
}

/* フッターナビゲーション（nav要素対応） */
footer nav ul {
	margin: 1em auto;
	text-align: center;
	width: auto;
	border: none;
	padding: 0;
	background-color: #ede3cc;
}

footer nav ul li {
	display: inline-block;
	margin: 1em 0;
	padding: 0 1em;
	border: none;
	border-right: 1px solid #333;
	background-color: transparent;
	border-radius: 0;
	width: auto;
}

footer nav ul li:last-child {
	border-right: 0;
}

footer nav ul li a {
	text-decoration: none;
	font-size: inherit;
	font-weight: normal;
	color: inherit;
	margin: 0;
	display: inline;
}

footer nav ul li.on,
footer nav ul li:hover {
	background-color: transparent;
}

footer nav ul li.on a,
footer nav ul li:hover a {
	color: inherit;
}

/* =======================================================================
   12. モーダル・ポップアップ（Featherlight）
   ======================================================================= */

.featherlight iframe {
	width: 100%;
	height: 80vh;
	min-width: 600px;
	max-height: 800px;
	border: none;
}

.featherlight-content {
	padding: 0;
}

.featherlight .featherlight-content {
	font-family: inherit !important;
	padding: 30px 30px 0;
	width: 90vw !important;
	max-width: 900px !important;
}

div.featherlight-content div.topn * {
	font-size: 14px;
}

div.featherlight-content div.topn h5 {
	font-size: 15px;
	margin-bottom: 1em;
}

/* =======================================================================
   13. 流れ・スケジュール（#nagare）
   ======================================================================= */

#nagare {
	font-family: Arial, sans-serif;
	line-height: 1.6;
}

#nagare table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

#nagare th,
#nagare td {
	border: 1px solid #e3d8c9;
	padding: 8px;
	text-align: center;
	background: #fff0da;
}

#nagare th {
	background-color: #f0e4d1;
}

#nagare td:nth-child(2) {
	background: rgba(255, 242, 223, 0.5);
}

#nagare div.pin {
	font-weight: 600;
	background-color: #f8e0d6;
	display: inline-block;
	padding: 4px 8px;
}

#nagare ul.note {
	font-size: 0.9em;
	margin-top: 10px;
	padding-left: 2px;
}

#nagare ul.note li {
	list-style: none;
	position: relative;
	padding-left: 1.2em;
	padding-right: 1em;
	text-align: justify;
	line-height: 1.25em;
}

#nagare ul.note li::before {
	position: absolute;
	content: "※";
	top: 0;
	left: 0;
}

#nagare div.box {
	width: 45%;
	float: left;
	margin-right: 1em;
}

#nagare td.eh {
	background: #f6efcc;
}

/* スケジュールテーブル */
.schedule-table {
	border: 1px solid #ddd;
	border-collapse: collapse;
	width: 100%;
}

.schedule-table th,
.schedule-table td {
	border: 1px solid #ddd;
	padding: 5px;
	text-align: left;
}

.schedule-table .center {
	text-align: center;
}

/* =======================================================================
   14. ニュース詳細・ポップアップ
   ======================================================================= */

div.topn {
	display: none;
	width: 500px;
}

div.topn h5 {
	color: #f2822c;
	font-size: 1.2em;
}

div.topn p {
	line-height: 1.75em;
	text-align: justify;
}

/* =======================================================================
   15. マップ
   ======================================================================= */

#map {
	height: 500px;
	border: 3px solid #c7bfab;
	margin: 20px auto;
	border-radius: 10px;
}

/* =======================================================================
   16. ページ固有スタイル - トップページ（index）
   ======================================================================= */

body[data-page="index"] main#main h3 {
	color: #9b947b;
	font-size: 1.3rem;
	text-align: center;
	margin: 1em auto 1em;
	border-bottom: none;
	font-weight: 600;
	line-height: 1.5;
}

body[data-page="index"] main#main p.note {
	font-size: 0.8em;
	color: #999;
	margin-top: -1em;
	margin-bottom: 2em;
}

body[data-page="index"] main#main p.top-image {
	text-align: center;
	margin: 0 auto 2em;
}

body[data-page="index"] main#main p.top-image img {
	width: 100%;
	max-width: 95%;
	height: auto;
}

body[data-page="index"] main#main p.ryouiki-image {
	text-align: center;
	margin: 2em auto;
}

body[data-page="index"] main#main p.ryouiki-image img {
	width: 100%;
	max-width: 500px;
	height: auto;
}

/* トップページ写真コンテナ */
.photo-container {
	position: relative;
	max-width: 610px;
	margin: 2em auto;
	text-align: center;
}

.photo-container > img {
	width: 100%;
	max-width: 610px;
	height: auto;
	display: block;
	margin: 0 auto;
	border: 1px solid #c7bfab;
}

/* ニュース・お知らせセクション */
#news {
	margin: 3em auto 2em;
	text-align: center;
}

#news h3 {
	font-size: 1.2rem;
	color: #9b947b;
	margin: 0 auto 1.5em;
	font-weight: 600;
}

/* ニュースリスト */
.news-empty {
	color: #aaa;
	text-align: center;
}

ul.news-list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 600px;
	text-align: left;
}

ul.news-list li {
	padding: 1em 0;
	border-bottom: 1px dashed #ccc;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em 1em;
}

ul.news-list li:first-child {
	border-top: 1px dashed #ccc;
}

.news-date {
	font-size: 0.85em;
	color: #999;
	white-space: nowrap;
}

.news-title {
	flex: 1;
	font-size: 0.95em;
	color: #9b947b;
}

.news-link {
	font-size: 0.85em;
	color: #feb415;
	text-decoration: none;
	white-space: nowrap;
}

.news-link:hover {
	text-decoration: underline;
}

/* ニュース詳細（モーダル内） */
.news-detail {
	display: none;
	text-align: left;
	padding: 1em;
}

.news-detail h4 {
	font-size: 1.1em;
	color: #9b947b;
	margin-bottom: 1em;
	border-bottom: 2px solid #feb415;
	padding-bottom: 0.5em;
}

.news-detail p {
	font-size: 0.95em;
	line-height: 1.7;
	margin-bottom: 1em;
}

.news-detail dl {
	margin: 1em 0;
}

.news-detail dt {
	font-weight: 600;
	color: #9b947b;
	float: left;
	width: 4em;
	clear: left;
}

.news-detail dd {
	margin-left: 4.5em;
	margin-bottom: 0.5em;
}

.news-detail .news-note {
	font-size: 0.85em;
	color: #999;
}

/* お問い合わせセクション */
#contact {
	margin: 3em auto 2em;
	text-align: center;
}

#contact h3 {
	margin: 2em auto 1em;
}

#contact h3 img {
	max-width: 300px;
	width: 100%;
}

div#toiawase img {
	max-width: 170px;
	width: 100%;
	transition: opacity 0.3s ease;
}

div#toiawase img:hover {
	opacity: 0.8;
}

#contact .contact-desc {
	font-size: 0.9em;
	color: #9b947b;
	margin-top: 1.5em;
	line-height: 1.6;
}

#contact .contact-note {
	font-size: 0.85em;
	color: #999;
	margin-top: 1em;
}

/* =======================================================================
   17. ページ固有スタイル - サブページ共通（access, program等）
   ======================================================================= */

/* access.html, program.html - 左揃えスタイル */
body[data-page="access"] main#main p,
body[data-page="program"] main#main h3,
body[data-page="program"] main#main h4,
body[data-page="program"] main#main p {
	text-align: left !important;
}

/* accessページのh3 - 情報リストに合わせて左寄せ */
body[data-page="access"] main#main h3 {
	text-align: left;
	font-size: 16px;
	border-bottom: 1px dashed #aaa;
	padding-bottom: 0.3em;
}

/* 情報リスト（施設情報・営業時間等） */
dl.info-list {
	margin: 0.5em auto 2.5em;
	padding: 0;
}

dl.info-list dt {
	display: inline-block;
	width: 11em;
	color: #836f5c;
	font-weight: 400;
	font-size: 14px;
	vertical-align: top;
	margin-top: 0.5em;
}

dl.info-list dt:first-child {
	margin-top: 0;
}

dl.info-list dd {
	display: inline-block;
	width: calc(100% - 11.5em);
	margin: 0.5em 0 0 0;
	padding: 0;
	font-size: 15px;
	vertical-align: top;
}

dl.info-list dt:first-child + dd {
	margin-top: 0;
}

dl.info-list dd a {
	color: #569CA6;
	color: #4caf51;
	font-weight: 600;
}

dl.info-list dd a:hover {
	text-decoration: underline;
}

dl.info-list dd .note {
	/*
	display: block;
	*/
	margin-top: 0.2em;
	font-size: 13px;
	color: #888;
}

/* =======================================================================
   18. aboutページ - 3つの目標
   ======================================================================= */

.goal-list {
	margin: 2em auto;
}

.goal-item {
	position: relative;
	text-align: center;
	padding: 2em 1em 2.5em;
	margin-bottom: 1em;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 140px auto;
}

.goal-item.goal-1 {
	background-image: url('../images2/num1.png');
}

.goal-item.goal-2 {
	background-image: url('../images2/num2.png');
}

.goal-item.goal-3 {
	background-image: url('../images2/num3.png');
}

main#main .goal-item h4 {
	font-size: 1.2rem;
	font-weight: 500;
	text-align: left;
	margin-bottom: 0.8em;
	border-bottom: 1px solid #ccc;
	padding-bottom: 0.5em;
	display: inline-block;
}

main#main .goal-item.goal-1 h4 {
	color: #7eb8c9;
}

main#main .goal-item.goal-2 h4 {
	color: #8eb89d;
}

main#main .goal-item.goal-3 h4 {
	color: #e8b87d;
}

.goal-item p {
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 0.5em;
	color: #9b947b;
}

.goal-item p:last-child {
	margin-bottom: 0;
}

/* 5領域画像スタイル */
main#main p.ryouiki-image {
	text-align: center !important;
	margin: 2em auto;
}

main#main p.ryouiki-image img {
	width: 100%;
	max-width: 500px;
	height: auto;
}

/* =======================================================================
   18. ページ固有スタイル - 支援プログラムページ
   ======================================================================= */

/* 活動プログラム導入セクション */
main#main section.program-intro {
	margin-top: 3em;
	padding: 1.5em;
	background-color: rgba(242, 130, 44, 0.08);
	border-radius: 8px;
	text-align: center !important;
}

main#main section.program-intro h3 {
	font-size: 1.2em;
	color: #9b947b;
	margin-bottom: 1em !important;
	margin-top: 0 !important;
	text-align: center !important;
}

main#main section.program-intro p {
	line-height: 1.8;
	font-size: 0.95em;
	text-align: center !important;
	margin-bottom: 0 !important;
}

/* 活動プログラム詳細セクション */
section.program-detail {
	position: relative;
	margin-top: 3em;
	padding-top: 2em;
	padding-bottom: 2em;
	border-top: 1px dashed #ccc;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 280px auto;
}

section.program-detail p,
section.program-detail ul {
	max-width: 450px;
}

section.program-detail.program-1 {
	background-image: url('../images2/actv1.png');
}

section.program-detail.program-2 {
	background-image: url('../images2/actv2.png');
}

section.program-detail.program-3 {
	background-image: url('../images2/actv3.png');
}

section.program-detail.program-4 {
	background-image: url('../images2/actv4.png');
}

section.program-detail.program-5 {
	background-image: url('../images2/actv5.png');
}

/* 活動プログラム挿絵（スマホ用に残す） */
.program-image {
	display: none;
}

.program-image img {
	max-width: 150px;
	height: auto;
}

/* 領域タグ */
.program-tags {
	margin-bottom: 1em;
}

.program-tags .tag {
	display: inline-block;
	font-size: 0.75em;
	padding: 0.3em 0.7em;
	margin-right: 0.4em;
	margin-bottom: 0.3em;
	border-radius: 3px;
	color: #666;
}

/* 5領域別カラー（イラスト対応） */
.program-tags .tag.tag-ningen {
	background-color: #f5e08a;
}

.program-tags .tag.tag-undou {
	background-color: #f0c87a;
}

.program-tags .tag.tag-kenkou {
	background-color: #b8d4e3;
}

.program-tags .tag.tag-gengo {
	background-color: #c8dda0;
}

.program-tags .tag.tag-ninchi {
	background-color: #ddd8b8;
}

/* 5領域見出しカラー */
main#main h4.ryouiki-ningen {
	color: #c9a820;
	font-weight: 600;
}

main#main h4.ryouiki-undou {
	color: #d49030;
	font-weight: 600;
}

main#main h4.ryouiki-kenkou {
	color: #6a9ab0;
	font-weight: 600;
}

main#main h4.ryouiki-gengo {
	color: #7a9a50;
	font-weight: 600;
}

main#main h4.ryouiki-ninchi {
	color: #a0986a;
	font-weight: 600;
}

section.program-detail h3 {
	font-size: 1.3em;
	margin-bottom: 0.8em;
	color: #9b947b;
}

section.program-detail .program-lead {
	font-size: 1.05em;
	line-height: 1.7;
	margin-bottom: 1.5em;
	color: #9b947b;
}

section.program-detail h4 {
	font-size: 1em;
	font-weight: 600;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	color: #9b947b;
	padding-left: 0.5em;
	border-left: 3px solid #f2822c;
}

section.program-detail ul {
	margin-bottom: 1em;
}


section.program-detail p {
	line-height: 1.7;
}

/* =======================================================================
   19. ユーティリティ
   ======================================================================= */

.sp-hide {
	font-size: 12px;
	display: block;
	right: -5px !important;
}

/* =======================================================================
   20. ご利用案内ページ（guide）固有スタイル
   ======================================================================= */

/* スムーズスクロール */
html {
	scroll-behavior: smooth;
}

/* ページ内ナビゲーション */
ul.page-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em 1.5em;
	list-style: none;
	padding: 1.5em 2em;
	margin: 2em auto 2em;
	background: rgba(249, 249, 249, 0.55);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: 40px;
	position: sticky;
	top: 0;
	z-index: 100;
}

ul.page-nav li {
	margin: 0;
	list-style-type: none;
}

ul.page-nav li a {
	display: block;
	padding: 0.6em 1.2em;
	font-size: 14px;
	color: #836f5c;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 20px;
	text-decoration: none;
	transition: all 0.2s;
}

ul.page-nav li a:hover,
ul.page-nav li a.active {
	background: #feb415;
	color: #fff;
	border-color: #feb415;
}

/* スクロール時のオフセット調整 */
h3[id] {
	scroll-margin-top: 100px;
}

/* フローリスト（ご利用開始までの流れ） */
ol.flow-list {
	list-style: none;
	padding: 1.5em 2em 1em;
	margin: 1em auto 2em;
	max-width: 450px;
	counter-reset: flow-counter;
	border: 1px solid #ccc;
	border-radius: 8px;
	background: #fafafa;
}

ol.flow-list li {
	position: relative;
	padding: 0.8em 0 0.8em 2.5em;
	margin-bottom: 0.5em;
	counter-increment: flow-counter;
}

ol.flow-list li::before {
	content: counter(flow-counter);
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 1.8em;
	height: 1.8em;
	background: #f2822c;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 1.8em;
	font-size: 14px;
	font-weight: bold;
}

ol.flow-list li:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 0.8em;
	top: 2.8em;
	width: 0;
	height: calc(100% - 1em);
	border-left: 2px dashed #ccc;
}

ol.flow-list .flow-title {
	display: block;
	font-weight: bold;
	color: #836f5c;
	font-size: 15px;
}

ol.flow-list .flow-desc {
	display: block;
	font-size: 14px;
	color: #666;
	margin-top: 0.2em;
}

/* guideページのセクション区切り */
body[data-page="guide"] main#main h3 {
	border-top: 1px dashed #c6c4ba;
	padding-top: 1.5em;
	margin-top: 2em;
}

/* h2直後のh3は区切り線なし */
body[data-page="guide"] main#main h2 + h3 {
	border-top: none;
	padding-top: 0;
	margin-top: 1em;
}

/* guideページのテーブルスタイル */
body[data-page="guide"] #main table {
	width: 100%;
	max-width: 500px;
	margin: 0.5em auto 2.5em;
	border-collapse: collapse;
	background: none;
}

body[data-page="guide"] #main h3 + p + table {
	margin-top: 0.5em;
}

body[data-page="guide"] #main p:has(strong) {
	margin-bottom: 3em;
}

body[data-page="guide"] #main p:has(strong) + table {
	margin-top: -2em;
}

body[data-page="guide"] #main table td {
	padding: 8px 12px;
	font-size: 15px;
	line-height: 1.4;
	border: 1px solid #ddd;
	background: #f9f9f9;
	text-align: left;
}

body[data-page="guide"] #main table td:first-child {
	background: #f0f0f0;
	font-weight: normal;
	width: 40%;
}

/* ダウンロードリスト */
ul.download-list {
	list-style: none;
	padding: 0;
	margin: 1em auto 2em;
	max-width: 450px;
}

ul.download-list li {
	margin: 0;
	padding: 0.7em 1em;
	border-bottom: 1px solid #ccc;
}

ul.download-list li:first-child {
	border-top: 1px solid #ccc;
}

ul.download-list li a {
	display: block;
	color: #569CA6;
	text-decoration: none;
	padding-left: 1.5em;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23569CA6"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4zm-1 13l-4-4h3V9h2v4h3l-4 4z"/></svg>') no-repeat left center;
	background-size: 1.2em;
}

ul.download-list li a:hover {
	text-decoration: underline;
}