@charset "UTF-8";

@font-face {
	font-family: 'KOBURIW1';
	src: url('../font/KOBURIW1.otf') format('opentype');
}
@font-face {
	font-family: 'FINALOLD';
	src: url('../font/FINALOLD.TTF') format('truetype');
}
@font-face {
	font-family: 'BOOKOSI';
	src: url('../font/BOOKOSI.TTF') format('truetype');
}

/* ============================
   基本設定
   ============================ */
* {
	box-sizing: border-box;
}

html {
	font-size: 16px;
}

body {
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', sans-serif;
	color: #333;
	line-height: 1.6;
	background-color: #f5f5f5;
}

a {
	color: #1a5f3f;
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: #2d8a5f;
}

img {
	max-width: 100%;
	height: auto;
}

/* ============================
   ヘッダー
   ============================ */
#head_wrap {
	background: linear-gradient(135deg, #1a5f3f 0%, #2d8a5f 100%);
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

#head_wrap .inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 15px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#head_wrap.fixed {
	/* fixed クラス付与前後でデザインを変えない */
}

#mobile-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

#mobile-head h1 {
	font-size: 1.3rem;
	font-weight: bold;
}

#mobile-head h1 a {
	color: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
}

#mobile-head h1 .site-logo {
	height: 32px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
}

#nav-toggle {
	display: none;
	cursor: pointer;
}

#nav-toggle div {
	width: 30px;
	height: 30px;
	position: relative;
}

#nav-toggle div span {
	display: block;
	width: 100%;
	height: 3px;
	background: #fff;
	position: absolute;
	left: 0;
	transition: 0.3s;
}

#nav-toggle div span:nth-child(1) { top: 5px; }
#nav-toggle div span:nth-child(2) { top: 13px; }
#nav-toggle div span:nth-child(3) { top: 21px; }

#global-nav {
	flex-shrink: 0;
}

#global-nav ul {
	display: flex;
	list-style: none;
	gap: 20px;
	align-items: center;
}

#global-nav ul li a {
	color: #fff;
	font-size: 0.9rem;
	padding: 5px 10px;
	border-radius: 4px;
	transition: background 0.3s;
}

#global-nav ul li a:hover {
	background: rgba(255,255,255,0.2);
}

#global-nav ul li a .material-symbols-outlined {
	vertical-align: middle;
	font-size: 1.2rem;
}

/* ============================
   コンテンツエリア
   ============================ */
#content {
	padding-top: 80px;
	min-height: calc(100vh - 200px);
}

#main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

/* ============================
   ページタイトル
   ============================ */
.page-title {
	font-size: 1.8rem;
	font-weight: bold;
	color: #1a5f3f;
	text-align: center;
	margin: 30px 0 40px;
	padding-bottom: 15px;
	border-bottom: 3px solid #1a5f3f;
}

/* ============================
   アコーディオン（当日・過去一覧）
   ============================ */
.yosou-list-section {
	margin-bottom: 40px;
}

.accordion-wrap {
	max-width: 1000px;
	margin: 0 auto;
}

.accordion-section {
	background: #fff;
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: box-shadow 0.3s;
}

.accordion-section:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.accordion-section.is-open {
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.accordion-header {
	width: 100%;
	padding: 18px 24px;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background 0.3s;
}

.accordion-header:hover {
	background: linear-gradient(135deg, #f0f7f4 0%, #e8f5ee 100%);
}

.accordion-section.is-open .accordion-header {
	background: linear-gradient(135deg, #1a5f3f 0%, #2d8a5f 100%);
	color: #fff;
}

.accordion-section.is-open .accordion-header .keibajyo-name,
.accordion-section.is-open .accordion-header .keibajyo-en {
	color: #fff;
}

.accordion-header .keibajyo-name {
	font-size: 1.2rem;
	font-weight: bold;
	color: #1a5f3f;
}

.accordion-header .keibajyo-en {
	font-size: 0.85rem;
	color: #888;
	margin-left: 10px;
}

.accordion-icon {
	margin-left: auto;
	transition: transform 0.3s;
}

.accordion-section.is-open .accordion-icon {
	transform: rotate(180deg);
}

.accordion-icon .material-symbols-outlined {
	font-size: 1.8rem;
}

.accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-in-out;
}

.accordion-section.is-open .accordion-body {
	max-height: 5000px;
}

/* ============================
   レースリスト
   ============================ */
.race-list {
	list-style: none;
	padding: 10px 20px;
}

.race-item {
	border-bottom: 1px solid #eee;
	padding: 15px 0;
}

.race-item:last-child {
	border-bottom: none;
}

.race-item-header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.race-no {
	background: #1a5f3f;
	color: #fff;
	font-weight: bold;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 0.85rem;
	min-width: 40px;
	text-align: center;
}

.race-time {
	font-weight: bold;
	color: #c5283d;
	font-size: 1rem;
}

.race-name {
	flex: 1;
	font-size: 0.95rem;
	color: #333;
}

.race-status {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.status-badge {
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: bold;
	white-space: nowrap;
}

.status-badge.yosou {
	background: #1a5f3f;
	color: #fff;
}

.status-badge.yosou:hover {
	background: #2d8a5f;
}

.status-badge.kekka {
	background: #c5283d;
	color: #fff;
}

.status-badge.wait {
	background: #ccc;
	color: #666;
}

.race-item-body {
	margin-top: 10px;
	padding: 10px;
	background: #f8f9fa;
	border-radius: 6px;
}

.race-detail-link {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.race-detail-link .race-item-header {
	width: 100%;
}

.bamei-highlight {
	font-weight: bold;
	color: #c5283d;
	font-size: 1rem;
	padding: 2px 8px;
	background: #fff3f5;
	border-radius: 4px;
}

.bamei-normal {
	color: #555;
	font-size: 0.9rem;
	padding: 2px 6px;
}

/* ============================
   結果アイコン
   ============================ */
.result-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	vertical-align: middle;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.icon-red { background: #e53935; }
.icon-black { background: #212121; }
.icon-white { background: #ffffff; border-color: #ccc; }
.icon-yellow { background: #fdd835; }
.icon-green { background: #43a047; }
.icon-blue { background: #1e88e5; }
.icon-orange { background: #fb8c00; }
.icon-brown { background: #8d6e63; }
.icon-cyan { background: #00bcd4; }
.icon-pink { background: #f06292; }
.icon-purple { background: #8e24aa; }

/* ============================
   アイコン凡例
   ============================ */
.icon-legend {
	max-width: 1000px;
	margin: 40px auto;
	padding: 25px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.icon-legend-title {
	font-size: 1.1rem;
	font-weight: bold;
	color: #1a5f3f;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid #e8f5ee;
}

.icon-legend-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

.icon-legend-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	color: #444;
}

.icon-legend-list .result-icon {
	width: 20px;
	height: 20px;
}

/* ============================
   予想詳細ページ
   ============================ */
.article-detail {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px 20px 40px;
}

.article-h1 {
	font-size: 1.5rem;
	font-weight: bold;
	color: #1a5f3f;
	margin: 10px 0 25px;
	line-height: 1.4;
}

.article-detail-content {
	background: #fff;
	border-radius: 8px;
	padding: 25px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.race-info {
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 6px;
	font-size: 0.95rem;
	line-height: 1.8;
}

.race-title {
	font-size: 1.2rem;
	font-weight: bold;
	color: #1a5f3f;
	margin: 20px 0;
	padding-bottom: 10px;
	border-bottom: 2px solid #e8f5ee;
}

/* ============================
   結果バッジ（金銀銅）
   ============================ */
.medal-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	position: absolute;
	top: -10px;
	right: 10px;
	z-index: 10;
}

.medal-icon::after {
	content: '';
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.medal-gold::after {
	background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
}

.medal-silver::after {
	background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
}

.medal-bronze::after {
	background: linear-gradient(135deg, #cd7f32 0%, #a0522d 100%);
}

/* ============================
   馬カード（枠番カラー）
   ============================ */
.yosou-horses {
	display: grid;
	gap: 15px;
	margin: 20px 0;
}

.horse-card {
	background: #fff;
	border-radius: 8px;
	padding: 15px;
	border-left: 5px solid #ccc;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
	transition: transform 0.2s, box-shadow 0.2s;
	position: relative;
}

.horse-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.horse-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.horse-rank {
	font-weight: bold;
	color: #1a5f3f;
	font-size: 1.25rem;
	line-height: 1;
	min-width: 1.5em;
	text-align: center;
}

.horse-wakuban {
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: bold;
	color: #fff;
}

.horse-umaban {
	font-weight: bold;
	color: #555;
}

.horse-bamei {
	font-size: 1.1rem;
	font-weight: bold;
}

.horse-bamei a {
	color: #1a5f3f;
}

.horse-info {
	list-style: none;
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: #666;
}

.horse-info li {
	padding: 2px 0;
}

.horse-info li i.fa-solid {
	color: #666;
	margin-right: 3px;
	font-size: 0.85em;
}

.horse-info .chaku-top3 {
	color: #c5283d;
	font-weight: bold;
}

/* 枠番カラー */
.wakuban-1 { border-left-color: #e8e8e8; }
.wakuban-1 .horse-wakuban { background: #fff; color: #333; border: 1px solid #888; }
.wakuban-2 { border-left-color: #212121; }
.wakuban-2 .horse-wakuban { background: #212121; }
.wakuban-3 { border-left-color: #e53935; }
.wakuban-3 .horse-wakuban { background: #e53935; }
.wakuban-4 { border-left-color: #1e88e5; }
.wakuban-4 .horse-wakuban { background: #1e88e5; }
.wakuban-5 { border-left-color: #fdd835; }
.wakuban-5 .horse-wakuban { background: #fdd835; color: #333; }
.wakuban-6 { border-left-color: #43a047; }
.wakuban-6 .horse-wakuban { background: #43a047; }
.wakuban-7 { border-left-color: #fb8c00; }
.wakuban-7 .horse-wakuban { background: #fb8c00; }
.wakuban-8 { border-left-color: #f06292; }
.wakuban-8 .horse-wakuban { background: #f06292; }
.wakuban-99 { border-left-color: #999; }
.wakuban-99 .horse-wakuban { background: #999; }

/* ============================
   アプリ誘導
   ============================ */
.app-guide {
	margin: 25px 0;
	padding: 20px;
	background: linear-gradient(135deg, #e8f5ee 0%, #f0f7f4 100%);
	border-radius: 8px;
	text-align: center;
}

.app-guide p {
	margin: 5px 0;
	color: #1a5f3f;
	font-size: 0.95rem;
}

/* ============================
   公開日時
   ============================ */
.open-time {
	margin-top: 25px;
	padding-top: 15px;
	border-top: 1px solid #eee;
	font-size: 0.85rem;
	color: #888;
	text-align: right;
}

/* ============================
   データなし
   ============================ */
.no-data {
	text-align: center;
	padding: 60px 20px;
	color: #888;
	font-size: 1rem;
}

/* ============================
   フッター
   ============================ */
footer {
	background: #1a5f3f;
	color: #fff;
	padding: 30px 20px;
	margin-top: 40px;
}

/* フッター 支援バナー（寄付・欲しい物リスト） */
.support-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto 25px;
	padding: 14px 18px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px;
}

.support-banner-label-wrap {
	width: 100%;
	text-align: center;
}

.support-banner-label {
	font-size: 0.7rem;
	font-weight: bold;
	color: #1a5f3f;
	background: linear-gradient(135deg, #ffe259 0%, #ffa751 100%);
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.support-banner-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 6px 12px;
	border-radius: 6px;
	white-space: nowrap;
	transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.support-banner-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	opacity: 0.92;
}

.support-banner-btn i {
	font-size: 0.95rem;
}

.support-banner-kofi {
	background: #fff;
	color: #13c3ff;
	border: 1px solid #13c3ff;
}

.support-banner-kofi:hover {
	color: #13c3ff;
}

.support-banner-amazon {
	background: #ff9900;
	color: #fff;
	border: 1px solid #e68a00;
}

.support-banner-amazon:hover {
	color: #fff;
}

/* フッター アプリストアバナー */
.app-store-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto 25px;
	padding: 14px 18px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px;
}

.app-store-banner-label-wrap {
	width: 100%;
	text-align: center;
}

.app-store-banner-label {
	font-size: 0.7rem;
	font-weight: bold;
	color: #1a5f3f;
	background: linear-gradient(135deg, #ffe259 0%, #ffa751 100%);
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.app-store-banner-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 6px 12px;
	border-radius: 6px;
	white-space: nowrap;
	transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.app-store-banner-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	opacity: 0.92;
}

.app-store-banner-btn i {
	font-size: 0.95rem;
}

.app-store-banner-ios {
	background: #000;
	color: #fff;
	border: 1px solid #555;
}

.app-store-banner-ios:hover {
	color: #fff;
}

.app-store-banner-android {
	background: #fff;
	color: #01875f;
	border: 1px solid #01875f;
}

.app-store-banner-android:hover {
	color: #01875f;
}

.foot-nav {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 20px;
}

.foot-section {
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 10px;
	padding: 14px 18px;
}

.foot-section-title {
	font-size: 0.8rem;
	font-weight: bold;
	color: rgba(255,255,255,0.65);
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255,255,255,0.10);
	letter-spacing: 0.04em;
}

.foot-section-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.foot-section-links a {
	color: #fff;
	font-size: 0.85rem;
	padding: 5px 10px;
	border-radius: 4px;
	transition: background 0.3s;
	white-space: nowrap;
}

.foot-section-links a:hover {
	background: rgba(255,255,255,0.2);
}

.foot-small-links {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.foot-small-links a {
	color: rgba(255,255,255,0.55);
	font-size: 0.78rem;
	padding: 3px 6px;
	border-radius: 4px;
	transition: color 0.3s, background 0.3s;
}

.foot-small-links a:hover {
	color: #fff;
	background: rgba(255,255,255,0.1);
}

#copy {
	display: block;
	text-align: center;
	font-size: 0.8rem;
	opacity: 0.8;
}

/* ============================
   ページトップ
   ============================ */
#page_top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	background: #1a5f3f;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	transition: background 0.3s;
	z-index: 100;
}

#page_top:hover {
	background: #2d8a5f;
}

#page_top a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

#page_top a::before {
	content: '↑';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 1.5rem;
	font-weight: bold;
}

/* ============================
   ローダー
   ============================ */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s;
}

#loader.loaded {
	opacity: 0;
	pointer-events: none;
}

.ml9 {
	text-align: center;
}

.ml9 .text-wrapper {
	display: inline-block;
}

.ml9 .letter {
	display: inline-block;
}

/* ============================
   パンくず
   ============================ */
.breadcrumb {
	max-width: 1200px;
	margin: 0 auto;
	padding: 15px 20px;
	font-size: 0.85rem;
}

.breadcrumb ul {
	list-style: none;
	display: flex;
	gap: 8px;
}

.breadcrumb ul li::after {
	content: '>';
	margin-left: 8px;
	color: #999;
}

.breadcrumb ul li:last-child::after {
	content: '';
}

.breadcrumb ul li a {
	color: #1a5f3f;
}

/* ============================
   戻るリンク
   ============================ */
.back-link-wrap {
	margin-top: 30px;
	margin-bottom: 20px;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #1a5f3f;
	font-size: 0.9rem;
	text-decoration: none;
	padding: 6px 14px;
	border: 1px solid #1a5f3f;
	border-radius: 20px;
	transition: background-color 0.2s, color 0.2s;
}

.back-link:hover {
	background-color: #1a5f3f;
	color: #fff;
}

.back-link .back-link-arrow {
	font-size: 0.8rem;
}

/* ============================
   404ページ
   ============================ */
.error-page {
	text-align: center;
	padding: 60px 20px;
}

.error-page h1 {
	font-size: 2rem;
	color: #c5283d;
	margin-bottom: 20px;
}

/* ============================
   ページネーション
   ============================ */
.pagination {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin: 30px 0;
}

.pagination a,
.pagination .current {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 0.9rem;
}

.pagination a {
	background: #fff;
	color: #1a5f3f;
	border: 1px solid #ddd;
	transition: background 0.3s;
}

.pagination a:hover {
	background: #e8f5ee;
}

.pagination .current {
	background: #1a5f3f;
	color: #fff;
	border: 1px solid #1a5f3f;
}

/* ============================
   カレンダー（メニュー）
   ============================ */
.calendar-menu-item {
	position: relative;
}

.calendar-toggle {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	transition: background 0.3s;
	white-space: nowrap;
}

.calendar-toggle:hover {
	background: rgba(255,255,255,0.2);
}

.calendar-toggle .material-symbols-outlined {
	font-size: 1.2rem;
	vertical-align: middle;
}

/* 閉じるボタン（PCでは非表示） */
.calendar-close {
	display: none;
}

.calendar-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	width: 330px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	padding: 15px;
	z-index: 1001;
	display: none;
}

.calendar-dropdown.open {
	display: block;
}

/* PCではパネルラッパーは素通し */
.calendar-panel {
	position: static;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.calendar-nav {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: #1a5f3f;
	padding: 5px 12px;
	border-radius: 4px;
	transition: background 0.2s;
}

.calendar-nav:hover {
	background: #e8f5ee;
}

.calendar-month-year {
	font-size: 1.1rem;
	font-weight: bold;
	color: #1a5f3f;
}

.calendar-table {
	width: 100%;
	border-collapse: collapse;
}

.calendar-table th {
	font-size: 0.8rem;
	color: #999;
	padding: 10px 0;
	text-align: center;
	font-weight: normal;
}

.calendar-table th.sun { color: #e53935; }
.calendar-table th.mon { color: #333; }
.calendar-table th.tue { color: #333; }
.calendar-table th.wed { color: #333; }
.calendar-table th.thu { color: #333; }
.calendar-table th.fri { color: #333; }
.calendar-table th.sat { color: #1e88e5; }

.calendar-day {
	height: 40px;
	text-align: center;
	padding: 5px 0;
	cursor: default;
	border-radius: 4px;
	transition: background 0.2s;
	font-size: 0.85rem;
}

.calendar-day.other-month {
	color: #ccc;
	cursor: default;
}

.calendar-day.has-data {
	background: #e8f5ee;
	font-weight: bold;
	cursor: pointer;
	color: #1a5f3f;
}

.calendar-day.has-data:hover {
	background: #d0f0e0;
}

.calendar-day.today {
	border: 1px solid #1a5f3f;
	color: #1a5f3f;
}

.calendar-day.disabled {
	color: #ccc;
	cursor: not-allowed;
}

/* OKAMOTODO portfolio landing page */
body { background: #fbfaf7; color: #26302d; font-family: 'KOBURIW1', 'Hiragino Kaku Gothic ProN', sans-serif; }
#head_wrap { background: rgba(251,250,247,.94); box-shadow: 0 1px 0 #e7e4dc; color: #26302d; backdrop-filter: blur(12px); }
#head_wrap .inner { max-width: 1180px; padding: 18px 28px; }
#mobile-head h1 { font-size: 1rem; letter-spacing: .12em; }
#mobile-head h1 a, #global-nav ul li a { color: #26302d; }
#mobile-head h1 a:hover, #global-nav ul li a:hover { color: #b45537; background: none; }
.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 9px; border: 1px solid #26302d; border-radius: 50%; font-family: Georgia, serif; font-size: 1.1rem; }
.site-brand-logo { display: block; width: 178px; height: auto; }
#global-nav ul { gap: 8px; }
#global-nav ul li a { padding: 8px 12px; font-size: .72rem; letter-spacing: .12em; }
#global-nav ul li a.nav-contact { border: 1px solid #26302d; border-radius: 999px; }
#content { padding-top: 68px; }
#main { max-width: none; padding: 0; }
.portfolio-page { overflow: hidden; }
.portfolio-hero, .portfolio-section { max-width: 1180px; margin: 0 auto; padding: 110px 28px; }
.portfolio-hero { min-height: 620px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 8%; }
.hero-copy { max-width: 560px; animation: portfolio-rise .7s ease both; }
.eyebrow, .card-label { color: #b45537; font-size: .7rem; font-weight: bold; letter-spacing: .2em; margin: 0 0 18px; }
.hero-copy h1 { color: #26302d; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: normal; line-height: 1.15; letter-spacing: 0; white-space: nowrap; margin: 0 0 28px; }
.hero-copy h1 em { color: #b45537; font-style: normal; }
.hero-lead { max-width: 430px; color: #65716c; font-size: 1rem; line-height: 2; }
.portfolio-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 24px; padding: 14px 18px; border: 1px solid #26302d; color: #26302d; font-size: .82rem; font-weight: bold; letter-spacing: .08em; }
.portfolio-button:hover { background: #26302d; color: #fff; }
.portfolio-button span { color: #b45537; font-size: 1.1rem; }
.hero-visual { width: 100%; aspect-ratio: 4 / 5; max-height: 490px; }
.image-placeholder { position: relative; display: grid; place-items: center; border: 1px solid #d4d1c8; background: linear-gradient(135deg, #f0eee7, #fff); color: #a8a49a; font-size: .7rem; letter-spacing: .18em; }
.image-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.partner-placeholder img { width: 100%; height: 100%; object-fit: contain; }
.portfolio-section { border-top: 1px solid #e3e0d8; display: grid; grid-template-columns: .7fr 1.3fr; gap: 8%; }
.work-section { align-items: start; }
.section-heading h2 { color: #26302d; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: normal; line-height: 1.2; margin: 0; }
.profile-copy, .section-intro { color: #65716c; font-size: 1rem; line-height: 2; max-width: 600px; }
.pale-section { max-width: none; padding-left: max(28px, calc((100% - 1124px) / 2)); padding-right: max(28px, calc((100% - 1124px) / 2)); background: #f1f3ee; }
.work-grid, .partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.work-card { background: #fff; border: 1px solid #e5e3dd; min-width: 0; }
.card-placeholder { position: relative; aspect-ratio: 16 / 10; border: 0; border-bottom: 1px solid #e5e3dd; overflow: hidden; }
.image-hover-label { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; background: rgba(38,48,45,.78); color: #fff; font-size: .85rem; letter-spacing: .08em; opacity: 0; transition: opacity .25s ease; }
.card-placeholder:hover .image-hover-label { opacity: 1; }
.work-card-body { padding: 16px; }
.card-label { margin-bottom: 8px; font-size: .54rem; letter-spacing: .14em; }
.work-card h3 { display: inline-block; color: #26302d; font-size: 1.1rem; font-weight: normal; line-height: 1.4; margin: 0 0 10px; padding-bottom: 4px; border-bottom: 1px solid #d4d1c8; }
.work-card-body > p:not(.card-label) { display: -webkit-box; min-height: calc(1.8em * 3); margin-bottom: 0; overflow: hidden; color: #65716c; font-size: .9rem; line-height: 1.8; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.text-link { color: #b45537; font-size: .8rem; font-weight: bold; letter-spacing: .06em; }
.text-link span { margin-left: 8px; }
.site-link-banner { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 11px 13px; border: 1px solid #26302d; background: #fff; color: #26302d; font-size: .78rem; font-weight: bold; letter-spacing: .08em; }
.site-link-banner:hover { background: #26302d; color: #fff; }
.site-link-banner b { color: #b45537; font-size: 1rem; font-weight: normal; }
.app-store-links { display: grid; gap: 8px; margin-top: 18px; }
.app-store-link { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 7px 10px; color: #fff; border: 1px solid transparent; }
.app-store-link:hover { color: #fff; transform: translateY(-1px); }
.app-store-link i { width: 20px; text-align: center; font-size: 1.35rem; }
.app-store-link span { display: flex; flex-direction: column; flex: 1; font-family: Arial, sans-serif; font-size: .9rem; font-weight: bold; line-height: 1.05; letter-spacing: 0; }
.app-store-link small { font-size: .48rem; font-weight: normal; letter-spacing: .02em; }
.app-store-link b { font-size: .85rem; font-weight: normal; }
.app-store-link-ios { background: #111; }
.app-store-link-android { background: #3f6d51; }
.portfolio-section:has(.partner-grid) { display: block; }
.portfolio-section:has(.partner-grid) .section-heading { display: inline-block; margin-right: 8%; vertical-align: top; }
.portfolio-section:has(.partner-grid) .section-intro { display: inline-block; vertical-align: top; margin: 10px 0 48px; }
.partner-grid { grid-template-columns: repeat(3, 1fr); }
.partner-card { display: grid; align-content: start; gap: 12px; padding: 18px; border: 1px solid #dfdcd4; color: #26302d; background: #fff; }
.partner-card:hover { border-color: #b45537; }
.partner-placeholder { aspect-ratio: 3 / 1; width: 100%; }
.partner-card strong { font-size: .95rem; }
.partner-card > span:last-child { color: #b45537; font-size: .75rem; }
.contact-section { max-width: none; padding-left: max(28px, calc((100% - 1124px) / 2)); padding-right: max(28px, calc((100% - 1124px) / 2)); background: #e6eee9; }
.portfolio-section.contact-section { display: block; }
.contact-layout { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8%; }
.contact-section .section-heading p:last-child { color: #65716c; line-height: 1.9; max-width: 430px; margin-top: 28px; }
.auth-form { display: grid; align-content: start; gap: 10px; max-width: 500px; }
.auth-form label { font-size: .8rem; font-weight: bold; }
.auth-form input[type=email] { width: 100%; padding: 16px; border: 1px solid #bdc9c1; background: #fff; color: #26302d; font: inherit; }
.agree-check { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-weight: normal !important; }
.agree-check input { accent-color: #b45537; }
.auth-form .portfolio-button { width: max-content; background: transparent; cursor: pointer; font: inherit; }
.auth-form small { color: #65716c; font-size: .72rem; }
.portfolio-footer { display: flex; align-items: center; gap: 34px; max-width: 1180px; margin: 0 auto; padding: 38px 28px; color: #65716c; background: #fbfaf7; }
.portfolio-footer strong { display: block; color: #26302d; letter-spacing: .12em; }
.portfolio-footer div span { font-size: .7rem; }
.portfolio-footer nav { display: flex; gap: 18px; margin-left: auto; font-size: .75rem; }
.portfolio-footer nav a { color: #65716c; }
.portfolio-footer #copy { margin-left: 18px; font-size: .7rem; }
@keyframes portfolio-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 画像透過ツール */
.tool-page { max-width: 980px; margin: 0 auto; padding: 92px 28px 120px; }
.tool-heading { max-width: 620px; margin-bottom: 42px; }
.tool-heading h1 { color: #26302d; font-family: Georgia, serif; font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: normal; line-height: 1.2; margin: 0 0 18px; }
.tool-heading p:last-child { color: #65716c; line-height: 1.9; }
@media screen and (min-width: 768px) {
	.tool-heading { max-width: none; }
	.tool-heading h1 { white-space: nowrap; }
}
.touka-tool { padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.touka-upload-area { margin-bottom: 20px; }
.touka-upload { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid #26302d; color: #26302d; cursor: pointer; }
.touka-upload:hover { background: #26302d; color: #fff; }
.touka-upload-icon { font-size: 1.35rem; line-height: 1; }
.touka-upload small { color: #65716c; font-size: .7rem; }
.touka-upload:hover small { color: #dce8e1; }
.touka-upload-area input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0, 0, 0, 0); }
.touka-controls { margin-bottom: 24px; padding: 20px; background: #f1f3ee; }
.touka-control-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; align-items: center; }
.touka-color-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.touka-label { display: block; width: 100%; color: #65716c; font-size: .75rem; }
.touka-color-preview { display: inline-block; width: 28px; height: 28px; border: 1px solid #a8a49a; background: #fff; }
.touka-color-info code { color: #26302d; font-size: .8rem; }
.touka-threshold input { display: block; width: 100%; margin-top: 10px; accent-color: #b45537; }
.touka-help { margin: 18px 0 0; color: #65716c; font-size: .78rem; }
.touka-canvas-wrap { display: grid; place-items: center; min-height: 260px; padding: 20px; border: 1px solid #d4d1c8; background-color: #f8f7f3; background-image: linear-gradient(45deg, #e9e7df 25%, transparent 25%), linear-gradient(-45deg, #e9e7df 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9e7df 75%), linear-gradient(-45deg, transparent 75%, #e9e7df 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}
#canvas { display: block; max-width: 100%; height: auto; cursor: crosshair; }
.touka-empty { color: #a8a49a; font-size: .8rem; letter-spacing: .08em; text-align: center; }
.touka-actions { display: flex; justify-content: flex-end; }
.touka-download { border-color: #b45537; background: #b45537; color: #fff; }
.touka-download:hover { border-color: #26302d; background: #26302d; }
.svg-tool { padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.svg-preview-wrap { margin-top: 24px; }
.svg-preview { display: grid; place-items: center; min-height: 260px; padding: 20px; border: 1px solid #d4d1c8; background-color: #f8f7f3; background-image: linear-gradient(45deg, #e9e7df 25%, transparent 25%), linear-gradient(-45deg, #e9e7df 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9e7df 75%), linear-gradient(-45deg, transparent 75%, #e9e7df 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
.svg-preview svg { display: block; max-width: 100%; max-height: 560px; height: auto; }
.svg-file-info { margin-top: 10px; color: #65716c; font-size: .75rem; text-align: right; }
.svg-result { margin-top: 32px; }
.svg-result-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.svg-result-heading .eyebrow { margin-bottom: 8px; }
.svg-result-heading h2 { color: #26302d; font-family: Georgia, serif; font-size: 1.5rem; font-weight: normal; margin: 0; }
.svg-copy-button { padding: 9px 13px; border: 1px solid #26302d; background: #fff; color: #26302d; cursor: pointer; font: inherit; font-size: .75rem; }
.svg-copy-button:hover { background: #26302d; color: #fff; }
.svg-source { display: block; width: 100%; min-height: 180px; padding: 14px; border: 1px solid #d4d1c8; resize: vertical; color: #52605a; background: #f8f7f3; font-family: monospace; font-size: .75rem; line-height: 1.6; }
.svg-actions { display: flex; justify-content: flex-end; }
.svg-guide { margin-top: 72px; }
.icons-tool { padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.icons-file-info { margin: 0 0 22px; color: #65716c; font-size: .78rem; }
.icons-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.icon-output-card { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid #e3e0d8; background: #fbfaf7; }
.icon-output-preview { display: grid; place-items: center; min-height: 130px; padding: 12px; background-color: #f8f7f3; background-image: linear-gradient(45deg, #e9e7df 25%, transparent 25%), linear-gradient(-45deg, #e9e7df 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9e7df 75%), linear-gradient(-45deg, transparent 75%, #e9e7df 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.icon-output-preview canvas { display: block; max-width: 100%; max-height: 130px; width: auto; height: auto; }
.icon-output-card strong { color: #26302d; font-family: monospace; font-size: .78rem; overflow-wrap: anywhere; }
.icon-output-card small { color: #65716c; font-size: .68rem; }
.icon-output-card .svg-copy-button { width: 100%; padding: 8px 6px; font-size: .68rem; }
.icons-actions { display: flex; justify-content: flex-end; margin-top: 24px; }
.resize-tool { padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.resize-file-info { margin: 0 0 22px; color: #65716c; font-size: .78rem; }
.resize-controls { display: grid; grid-template-columns: 1fr 1fr auto 1fr; gap: 16px; align-items: end; margin-bottom: 24px; padding: 20px; background: #f1f3ee; }
.resize-field, .resize-quality-field { display: grid; gap: 7px; }
.resize-field label, .resize-quality-field label { color: #65716c; font-size: .75rem; }
.resize-field input, .resize-field select { width: 100%; padding: 10px; border: 1px solid #bdc9c1; background: #fff; color: #26302d; font: inherit; }
.resize-lock { display: flex; align-items: center; gap: 7px; padding-bottom: 11px; color: #26302d; font-size: .75rem; white-space: nowrap; }
.resize-quality-field { grid-column: 1 / -1; }
.resize-quality-field input { width: 100%; accent-color: #b45537; }
.resize-preview-wrap { display: grid; place-items: center; min-height: 260px; padding: 20px; border: 1px solid #d4d1c8; background-color: #f8f7f3; background-image: linear-gradient(45deg, #e9e7df 25%, transparent 25%), linear-gradient(-45deg, #e9e7df 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9e7df 75%), linear-gradient(-45deg, transparent 75%, #e9e7df 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
#resize-canvas { display: block; max-width: 100%; max-height: 560px; width: auto; height: auto; }
.resize-result { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.resize-result p { margin: 0; color: #65716c; font-size: .78rem; }
.convert-tool { padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.convert-file-info { margin: 0 0 22px; color: #65716c; font-size: .78rem; }
.convert-controls { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: end; margin-bottom: 24px; padding: 20px; background: #f1f3ee; }
.convert-field, .convert-quality-field { display: grid; gap: 7px; }
.convert-field label, .convert-quality-field label { color: #65716c; font-size: .75rem; }
.convert-field select { width: 100%; padding: 10px; border: 1px solid #bdc9c1; background: #fff; color: #26302d; font: inherit; }
.convert-quality-field input { width: 100%; accent-color: #b45537; }
.convert-preview-wrap { display: grid; place-items: center; min-height: 260px; padding: 20px; border: 1px solid #d4d1c8; background-color: #f8f7f3; background-image: linear-gradient(45deg, #e9e7df 25%, transparent 25%), linear-gradient(-45deg, #e9e7df 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9e7df 75%), linear-gradient(-45deg, transparent 75%, #e9e7df 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
#convert-canvas { display: block; max-width: 100%; max-height: 560px; width: auto; height: auto; }
.convert-result { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.convert-result p { margin: 0; color: #65716c; font-size: .78rem; }
.color-tool { padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.color-file-info { margin: 0 0 22px; color: #65716c; font-size: .78rem; }
.color-workspace { display: grid; grid-template-columns: 1.4fr .6fr; gap: 24px; align-items: start; }
.color-canvas-wrap { display: grid; place-items: center; min-height: 260px; padding: 20px; border: 1px solid #d4d1c8; background-color: #f8f7f3; background-image: linear-gradient(45deg, #e9e7df 25%, transparent 25%), linear-gradient(-45deg, #e9e7df 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9e7df 75%), linear-gradient(-45deg, transparent 75%, #e9e7df 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
#color-canvas { display: block; max-width: 100%; max-height: 560px; width: auto; height: auto; cursor: crosshair; }
.color-result { padding: 20px; border: 1px solid #e3e0d8; background: #f1f3ee; }
.color-swatch { width: 100%; aspect-ratio: 1 / .55; border: 1px solid #d4d1c8; background: #fff; }
.color-result-label { margin: 12px 0 14px; color: #65716c; font-size: .75rem; }
.color-values { display: grid; gap: 8px; }
.color-value { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 9px; border: 1px solid #d4d1c8; background: #fff; color: #26302d; cursor: pointer; text-align: left; }
.color-value:hover { border-color: #b45537; }
.color-value span, .color-value b { font-size: .62rem; }
.color-value code { font-size: .72rem; }
.qr-tool { display: grid; grid-template-columns: 1fr .8fr; gap: 28px; padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.qr-form { display: grid; align-content: start; gap: 10px; }
.qr-form > label { color: #26302d; font-size: .8rem; font-weight: bold; }
.qr-form textarea { width: 100%; padding: 14px; border: 1px solid #bdc9c1; resize: vertical; color: #26302d; background: #fff; font: inherit; }
.qr-options { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 8px; color: #65716c; font-size: .72rem; }
.qr-options select, .qr-options input[type="color"] { min-width: 0; height: 34px; border: 1px solid #bdc9c1; background: #fff; }
.qr-options input[type="color"] { width: 48px; padding: 2px; }
.qr-generate { width: max-content; }
.qr-result { display: grid; align-content: start; gap: 12px; }
.qr-preview { display: grid; place-items: center; min-height: 260px; padding: 16px; border: 1px solid #d4d1c8; background: #f8f7f3; }
.qr-preview svg { display: block; width: min(100%, 280px); height: auto; }
.qr-result p { margin: 0; color: #65716c; font-size: .75rem; }
.qr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.favicon-tool, .crop-tool, .meta-tool, .dummy-tool, .json-tool { padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.favicon-info, .icons-file-info, .json-status { color: #65716c; font-size: .78rem; }
.favicon-preview-grid { display: flex; align-items: end; gap: 22px; margin: 28px 0; padding: 24px; background: #f1f3ee; }
.favicon-preview-item { display: grid; gap: 8px; justify-items: center; color: #65716c; font-size: .7rem; }
.favicon-preview-item canvas { max-width: 90px; max-height: 90px; image-rendering: auto; }
.favicon-browser { border: 1px solid #d4d1c8; background: #f8f7f3; }
.favicon-tab { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #d4d1c8; background: #fff; color: #65716c; font-size: .75rem; }
.favicon-tab-icon { width: 16px; height: 16px; border-radius: 3px; background: #e3e0d8 center / contain no-repeat; }
.favicon-address { margin: 18px; padding: 10px 14px; border: 1px solid #d4d1c8; border-radius: 999px; color: #a8a49a; font-size: .72rem; }
.crop-options { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: #65716c; font-size: .78rem; }
.crop-options select { padding: 10px; border: 1px solid #bdc9c1; background: #fff; font: inherit; }
.crop-preview-wrap, .dummy-preview { display: grid; place-items: center; min-height: 260px; padding: 20px; border: 1px solid #d4d1c8; background: #f8f7f3; }
#crop-canvas { display: block; max-width: 100%; max-height: 560px; width: auto; height: auto; }
.crop-actions { display: flex; justify-content: flex-end; }
.meta-tool, .dummy-tool { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.meta-form, .dummy-form { display: grid; align-content: start; gap: 9px; }
.meta-form label, .dummy-form label { color: #26302d; font-size: .78rem; font-weight: bold; }
.meta-form input, .meta-form textarea, .dummy-form input[type="text"], .dummy-form input[type="number"] { width: 100%; padding: 11px; border: 1px solid #bdc9c1; background: #fff; color: #26302d; font: inherit; }
.meta-output-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.meta-output h2 { color: #26302d; font-family: Georgia, serif; font-size: 1.35rem; font-weight: normal; margin: 0; }
.meta-output .svg-source { min-height: 270px; }
.dummy-form > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dummy-form input[type="color"] { width: 100%; height: 38px; border: 1px solid #bdc9c1; }
.dummy-form .portfolio-button { width: max-content; }
.dummy-preview { display: block; overflow: auto; }
#dummy-canvas { display: block; max-width: 100%; height: auto; margin: auto; }
.dummy-preview p { margin: 8px 0 0; color: #65716c; font-size: .72rem; }
.json-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.json-editor { display: block; width: 100%; min-height: 360px; padding: 16px; border: 1px solid #d4d1c8; resize: vertical; color: #26302d; background: #f8f7f3; font-family: monospace; font-size: .85rem; line-height: 1.6; }
.json-status.is-ok { color: #3f6d51; }
.json-status.is-error { color: #b45537; }
.css-tool { padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.css-options { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 22px; padding: 16px; background: #f1f3ee; }
.css-options label { display: flex; align-items: center; gap: 8px; color: #65716c; font-size: .75rem; }
.css-options select { padding: 8px; border: 1px solid #bdc9c1; background: #fff; color: #26302d; font: inherit; }
.css-check input { accent-color: #b45537; }
.css-editors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.css-editors label { display: grid; gap: 8px; color: #26302d; font-size: .78rem; font-weight: bold; }
.css-editor { width: 100%; min-height: 360px; padding: 14px; border: 1px solid #d4d1c8; resize: vertical; color: #26302d; background: #f8f7f3; font-family: monospace; font-size: .8rem; line-height: 1.6; }
.css-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.css-status { margin: 12px 0 0; color: #65716c; font-size: .75rem; }
.javascript-tool { padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.javascript-options { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 22px; padding: 16px; background: #f1f3ee; }
.javascript-options label { display: flex; align-items: center; gap: 8px; color: #65716c; font-size: .75rem; }
.javascript-options select { padding: 8px; border: 1px solid #bdc9c1; background: #fff; color: #26302d; font: inherit; }
.javascript-check input { accent-color: #b45537; }
.javascript-editors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.javascript-editors label { display: grid; gap: 8px; color: #26302d; font-size: .78rem; font-weight: bold; }
.javascript-editor { width: 100%; min-height: 360px; padding: 14px; border: 1px solid #d4d1c8; resize: vertical; color: #26302d; background: #f8f7f3; font-family: monospace; font-size: .8rem; line-height: 1.6; }
.javascript-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.javascript-status { margin: 12px 0 0; color: #65716c; font-size: .75rem; }
.utility-tool { padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.utility-controls, .password-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; padding: 16px; background: #f1f3ee; }
.utility-controls label, .password-options label { display: flex; align-items: center; gap: 8px; color: #65716c; font-size: .78rem; }
.utility-controls select, .utility-form-grid input, .password-options input[type="number"] { padding: 9px; border: 1px solid #bdc9c1; background: #fff; color: #26302d; font: inherit; }
.utility-editors, .utility-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.utility-editors label, .utility-form-grid label, .utility-tool > label { display: grid; gap: 8px; color: #26302d; font-size: .78rem; font-weight: bold; }
.utility-tool textarea { display: block; width: 100%; min-height: 210px; padding: 14px; border: 1px solid #d4d1c8; resize: vertical; color: #26302d; background: #f8f7f3; font-family: monospace; font-size: .8rem; line-height: 1.6; }
.utility-status { margin: 14px 0 0; color: #65716c; font-size: .78rem; }
.file-input { display: inline-flex !important; align-items: center; width: max-content; margin-bottom: 16px; padding: 12px 18px; border: 1px solid #26302d; color: #26302d !important; cursor: pointer; font-weight: normal !important; }
.file-input:hover { background: #26302d; color: #fff !important; }.file-input input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pdf-utility .svg-copy-button { margin-top: 20px; }.palette-tool { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }.palette-tool label { display: grid; gap: 8px; color: #65716c; font-size: .78rem; }.palette-tool input { width: 80px; height: 48px; padding: 2px; border: 1px solid #bdc9c1; }.palette-tool output { color: #26302d; font-family: monospace; font-size: 1.05rem; }.palette-swatches { display: flex; grid-column: 1 / -1; gap: 9px; }.palette-swatches button { width: 42px; height: 42px; border: 1px solid #d4d1c8; cursor: pointer; }
.sample-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.sample-card { padding: 20px; border: 1px solid #e3e0d8; background: #fff; }.sample-card h2, .javascript-sample h2 { margin: 0 0 16px; color: #26302d; font-family: Georgia, serif; font-size: 1rem; font-weight: normal; }.sample-card > div { display: flex; flex-wrap: wrap; gap: 10px; }
.css-button { min-width: 72px; min-height: 38px; padding: 8px 12px; border: 2px solid var(--sample-color); background: var(--sample-color); color: #fff; cursor: pointer; font: inherit; font-size: .72rem; }.css-button:hover { filter: brightness(.88); }.css-button-outline { background: #fff; color: var(--sample-color); }.css-button-shadow { box-shadow: 4px 4px 0 #26302d; }.css-button-lift:hover { transform: translateY(-4px); }.css-button-underline { background: #fff; color: var(--sample-color); border-width: 0 0 3px; }.css-button-glow:hover { box-shadow: 0 0 0 5px color-mix(in srgb, var(--sample-color) 25%, white); }.css-button-split { background: linear-gradient(90deg, var(--sample-color) 50%, #26302d 50%); }.css-button-slide:hover { background: #26302d; border-color: #26302d; }.css-button-pulse { animation: css-pulse 1.7s infinite; }.css-button-corner { border-radius: 8px 0 8px 0; }.css-button-stripe { background: repeating-linear-gradient(135deg, var(--sample-color) 0 7px, #fff 7px 10px); color: #26302d; }.css-button-ring:hover { outline: 3px solid var(--sample-color); outline-offset: 3px; }.css-button-shine { background: linear-gradient(120deg, var(--sample-color) 65%, #fff 65%); }.css-button-skew { transform: skew(-8deg); }.css-button-double { border-style: double; border-width: 5px; }.css-button-slice { clip-path: polygon(10% 0,100% 0,90% 100%,0 100%); }.css-button-border { background: #fff; color: var(--sample-color); border-style: dashed; }.css-button-raise { box-shadow: 0 5px 0 #26302d; }.css-button-inset { box-shadow: inset 0 0 0 4px rgba(255,255,255,.35); }.css-button-arrow::after { content: ' →'; }
.css-animation { display: grid; place-items: center; width: 54px; height: 54px; border: 0; background: var(--sample-color); color: #fff; cursor: pointer; font-family: Georgia, serif; font-size: 1.2rem; animation-duration: 1.6s; animation-delay: var(--delay); animation-iteration-count: infinite; }.css-animation-fade { animation-name: css-fade; }.css-animation-rise { animation-name: css-rise; }.css-animation-drop { animation-name: css-drop; }.css-animation-slide-left { animation-name: css-left; }.css-animation-slide-right { animation-name: css-right; }.css-animation-zoom { animation-name: css-zoom; }.css-animation-pop { animation-name: css-pop; }.css-animation-flip { animation-name: css-flip; }.css-animation-swing { animation-name: css-swing; }.css-animation-wobble { animation-name: css-wobble; }.css-animation-float { animation-name: css-float; }.css-animation-shake { animation-name: css-shake; }.css-animation-blink { animation-name: css-blink; }.css-animation-breathe { animation-name: css-breathe; }.css-animation-roll { animation-name: css-roll; }.css-animation-bounce { animation-name: css-bounce; }.css-animation-reveal { animation-name: css-reveal; }.css-animation-tilt { animation-name: css-tilt; }.css-animation-ripple { animation-name: css-ripple; }.css-animation-expand { animation-name: css-expand; }
.javascript-sample-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }.javascript-sample { min-width: 0; padding: 20px; border: 1px solid #e3e0d8; background: #fff; }.javascript-sample > div { display: flex; justify-content: space-between; align-items: start; gap: 12px; }.javascript-sample pre { margin: 0; padding: 14px; overflow-wrap: anywhere; white-space: pre-wrap; background: #f1f3ee; color: #26302d; font-size: .75rem; line-height: 1.6; }
@keyframes css-pulse { 50% { transform: scale(1.06); } } @keyframes css-fade { 50% { opacity: .2; } } @keyframes css-rise { 50% { transform: translateY(-10px); } } @keyframes css-drop { 50% { transform: translateY(10px); } } @keyframes css-left { 50% { transform: translateX(-10px); } } @keyframes css-right { 50% { transform: translateX(10px); } } @keyframes css-zoom { 50% { transform: scale(.7); } } @keyframes css-pop { 50% { transform: scale(1.2); } } @keyframes css-flip { 50% { transform: rotateY(180deg); } } @keyframes css-swing { 50% { transform: rotate(12deg); } } @keyframes css-wobble { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } @keyframes css-float { 50% { transform: translateY(-8px); } } @keyframes css-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @keyframes css-blink { 50% { opacity: 0; } } @keyframes css-breathe { 50% { transform: scale(.88); opacity: .6; } } @keyframes css-roll { 50% { transform: rotate(180deg); } } @keyframes css-bounce { 50% { transform: translateY(-14px); } } @keyframes css-reveal { 50% { clip-path: inset(0 45% 0 0); } } @keyframes css-tilt { 50% { transform: rotate(-12deg); } } @keyframes css-ripple { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--sample-color) 15%, transparent); } } @keyframes css-expand { 50% { transform: scaleX(1.35); } }
.font-tool { padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.font-info { color: #65716c; font-size: .78rem; }
.font-preview-area { display: grid; gap: 9px; margin-top: 24px; padding: 20px; background: #f1f3ee; }
.font-preview-area label { color: #26302d; font-size: .78rem; font-weight: bold; }
.font-preview-area input { padding: 11px; border: 1px solid #bdc9c1; background: #fff; font: inherit; }
.font-preview-text { margin: 0; color: #26302d; font-size: 2.2rem; overflow-wrap: anywhere; }
.font-result { margin-top: 28px; }
.font-result-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.font-result-heading h2 { color: #26302d; font-family: Georgia, serif; font-size: 1.35rem; font-weight: normal; margin: 0; }
.font-result .portfolio-button { margin-top: 14px; }
.ogp-tool { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; padding: 28px; border: 1px solid #e3e0d8; background: #fff; box-shadow: 0 10px 35px rgba(38,48,45,.06); }
.ogp-form { display: grid; align-content: start; gap: 10px; }
.ogp-form > label { color: #26302d; font-size: .8rem; font-weight: bold; }
.ogp-form input[type="text"], .ogp-form textarea { width: 100%; padding: 12px; border: 1px solid #bdc9c1; color: #26302d; background: #fff; font: inherit; }
.ogp-form textarea { resize: vertical; }
.ogp-form-row { display: flex; gap: 18px; margin: 6px 0; }
.ogp-form-row label { display: flex; align-items: center; gap: 8px; color: #65716c; font-size: .75rem; }
.ogp-form-row input[type="color"] { width: 42px; height: 30px; padding: 2px; border: 1px solid #bdc9c1; }
.ogp-logo-check { display: flex; align-items: center; gap: 7px; color: #65716c; font-size: .75rem; }
.ogp-generate { width: max-content; }
.ogp-preview-wrap { min-width: 0; }
.ogp-preview-wrap canvas { display: block; width: 100%; height: auto; }
.ogp-preview-wrap p { margin: 8px 0 0; color: #65716c; font-size: .72rem; text-align: right; }
.touka-guide { margin-top: 72px; }
.tool-guide { max-width: 980px; margin: 0 auto; padding: 0 28px 92px; }.tool-guide .touka-guide-heading { margin-bottom: 30px; }
.touka-guide-heading { margin-bottom: 30px; }
.touka-guide-heading h2 { color: #26302d; font-family: Georgia, serif; font-size: 2.4rem; font-weight: normal; margin: 0; }
.touka-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.touka-guide-card { padding: 22px; border-top: 2px solid #b45537; background: #fff; }
.touka-step { display: block; color: #b45537; font-family: Georgia, serif; font-size: 1.2rem; margin-bottom: 16px; }
.touka-guide-card h3 { color: #26302d; font-size: 1rem; margin: 0 0 10px; }
.touka-guide-card p, .touka-notes p, .touka-notes li { color: #65716c; font-size: .85rem; line-height: 1.9; }
.touka-notes { margin-top: 16px; padding: 26px; border: 1px solid #e3e0d8; background: #f1f3ee; }
.touka-notes h3 { color: #26302d; font-size: 1.1rem; margin: 0 0 10px; }
.touka-notes p { margin: 0 0 12px; }
.touka-notes ul { margin: 0; padding-left: 1.2em; }

/* OCR app guide */
.ocr-page { color: #26302d; background: #f5f6f1; }
.ocr-hero { max-width: 1180px; margin: 0 auto; padding: 110px 40px 86px; background: linear-gradient(120deg, #f5f6f1 58%, #e0efe7 58%); }
.ocr-hero-layout { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.ocr-hero .page-title { margin: 0; color: #26302d; font-family: Georgia, serif; font-size: clamp(2.8rem, 6vw, 5.8rem); font-weight: normal; line-height: 1.08; }
.ocr-hero .page-title em { color: #1a6b4b; font-style: normal; }
.ocr-lead { max-width: 650px; margin: 28px 0 0; color: #65716c; font-size: 1.05rem; line-height: 2; }
.ocr-download-link { display: inline-flex; gap: 20px; margin-top: 24px; padding: 13px 17px; color: #fff; background: #1a6b4b; font-size: .85rem; font-weight: bold; text-decoration: none; }
.ocr-download-link:hover { background: #125239; }.ocr-download-link span { font-size: 1.05rem; }
.ocr-app-icon { width: clamp(150px, 20vw, 240px); flex: 0 0 auto; border-radius: 22%; box-shadow: 0 18px 45px rgba(26,107,75,.2); }
.ocr-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; color: #1a6b4b; font-size: .78rem; font-weight: bold; }
.ocr-hero-meta span { padding: 7px 12px; border: 1px solid #bcd7c7; background: rgba(255,255,255,.7); }
.ocr-toc { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1180px; margin: 0 auto; padding: 0 40px; transform: translateY(-1px); }
.ocr-toc a { padding: 22px 24px; color: #26302d; background: #fff; border-right: 1px solid #e3e0d8; text-decoration: none; }
.ocr-toc a:first-child { border-left: 4px solid #1a6b4b; }
.ocr-toc a:hover { background: #e8f2eb; }
.ocr-toc strong, .ocr-toc span { display: block; }
.ocr-toc span { margin-top: 5px; color: #65716c; font-size: .78rem; }
.ocr-content { max-width: 1180px; margin: 0 auto; }
.ocr-section { padding: 94px 40px; }
.ocr-section-tint { background: #e9f1ec; }
.ocr-section .section-heading { margin-bottom: 36px; }
.ocr-section h2 { color: #26302d; font-family: Georgia, serif; font-size: clamp(2rem, 3.5vw, 3.4rem); font-weight: normal; line-height: 1.18; }
.ocr-section .section-intro { max-width: 650px; color: #65716c; }
.ocr-feature-grid, .ocr-steps, .ocr-api-list, .ocr-faq-list { display: grid; gap: 16px; }
.ocr-feature-grid { grid-template-columns: repeat(3, 1fr); }
.ocr-feature-card { padding: 28px; border-top: 3px solid #b45537; background: #fff; }
.ocr-download-prompt { margin: 26px 0 0; color: #65716c; font-size: .9rem; }.ocr-download-prompt a { color: #1a6b4b; font-weight: bold; }
.ocr-number, .ocr-step > span, .ocr-api-title > span { color: #b45537; font-family: Georgia, serif; font-weight: bold; letter-spacing: .08em; }
.ocr-feature-card h3, .ocr-step h3, .ocr-api-card h3, .ocr-faq-list h3 { margin: 12px 0 8px; color: #26302d; font-size: 1.1rem; }
.ocr-feature-card p, .ocr-step p, .ocr-api-card p, .ocr-faq-list p, .ocr-note p, .ocr-security-note p { margin: 0; color: #65716c; font-size: .88rem; line-height: 1.9; }
.ocr-steps { grid-template-columns: repeat(2, 1fr); }
.ocr-step { padding: 26px; border-left: 2px solid #1a6b4b; background: #fff; }
.ocr-note, .ocr-security-note { margin-top: 24px; padding: 22px 26px; background: #fff8ed; border-left: 4px solid #b45537; }
.ocr-note strong, .ocr-security-note strong { display: block; margin-bottom: 5px; color: #8d452e; }
.ocr-engine-table { border-top: 2px solid #26302d; background: #fff; }
.ocr-engine-row { display: grid; grid-template-columns: 1.15fr 1fr 1.2fr; gap: 20px; padding: 18px 20px; border-bottom: 1px solid #dfe5df; font-size: .88rem; }
.ocr-engine-row span { color: #65716c; }
.ocr-engine-head { color: #65716c; font-size: .72rem; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; }
.ocr-tag { display: inline-block; margin-left: 8px; padding: 2px 7px; color: #fff; font-size: .65rem; font-style: normal; }
.ocr-tag.free { background: #1a6b4b; }.ocr-tag.paid { background: #b45537; }
.ocr-small-note { margin: 18px 0 0; color: #65716c; font-size: .78rem; }
.ocr-api-list { grid-template-columns: repeat(3, 1fr); }
.ocr-api-card { padding: 28px; background: #fff; border-top: 4px solid #175cd3; }
.ocr-api-azure { border-color: #0078d4; }.ocr-api-clova { border-color: #16704a; }
.ocr-api-title { display: flex; align-items: baseline; gap: 12px; }.ocr-api-title h3 { margin: 0; }
.ocr-api-card ol { min-height: 182px; margin: 20px 0; padding-left: 1.4rem; color: #65716c; font-size: .82rem; line-height: 1.7; }
.ocr-api-card li { margin: 6px 0; }
.ocr-code-note { margin: 16px 0; padding: 12px; background: #eef4ff; border: 1px solid #c8dcff; font-size: .78rem; }.ocr-api-azure .ocr-code-note { background: #eef8ff; border-color: #b9e1ff; }.ocr-api-clova .ocr-code-note { background: #e8f7ef; border-color: #bde6cd; }
.ocr-code-note strong { display: block; margin-bottom: 5px; color: #26302d; }.ocr-code-note code { display: block; overflow-wrap: anywhere; color: #243447; font-family: monospace; font-size: .75rem; }
.ocr-api-card > a { color: #175cd3; font-size: .82rem; font-weight: bold; }.ocr-api-clova > a { color: #16704a; }
.ocr-faq-list { grid-template-columns: repeat(2, 1fr); }.ocr-faq-list > div { padding: 22px; background: #fff; border-top: 2px solid #e0ebe0; }.ocr-faq-list h3 { margin-top: 0; }

/* ============================
   固定ページ（プライバシーポリシー / 利用規約）
   ============================ */
.static-page-section {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px 80px;
}

.static-page-content {
	background: #fff;
	border-radius: 8px;
	padding: 40px 48px;
	box-shadow: 0 1px 6px rgba(0,0,0,0.06);
	line-height: 1.9;
	font-size: 0.95rem;
	color: #444;
}

.static-page-content h2 {
	font-size: 1.2rem;
	color: #1a5f3f;
	margin: 2em 0 0.8em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid #e0ebe0;
}

.static-page-content h2:first-of-type {
	margin-top: 1.4em;
}

.static-page-content p {
	margin: 0.8em 0;
}

.static-page-content ul {
	margin: 0.8em 0 0.8em 1.2em;
	padding: 0;
	list-style: disc;
}

.static-page-content ul li {
	margin: 0.3em 0;
}

.static-page-date {
	text-align: right;
	color: #999;
	font-size: 0.9rem;
	margin-top: 2.5em !important;
}

/* ============================
   ホームページ インフォメーション
   ============================ */
.home-info-section {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 20px;
}

.home-info-section:last-child {
	padding-bottom: 80px;
}

.home-info-title {
	font-size: 1.2rem;
	color: #1a5f3f;
	margin: 0 0 0.8em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid #e0ebe0;
}

.home-info-links {
	margin: 0.8em 0 0 1.2em;
	padding: 0;
	list-style: disc;
}

.home-info-links li {
	margin: 0.3em 0;
}

/* ============================
   レースナビゲーション（同日・同場）
   ============================ */
.race-navigation {
	margin: 1.5em 0 0.5em;
	text-align: center;
}

.race-nav-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.race-nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 36px;
	padding: 0 10px;
	border-radius: 4px;
	background: #f0f7f0;
	color: #1a5f3f;
	font-size: 0.9rem;
	font-weight: bold;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.race-nav-link:hover {
	background: #1a5f3f;
	color: #fff;
}

.race-nav-link.current {
	background: #1a5f3f;
	color: #fff;
	cursor: default;
	pointer-events: none;
}

.race-nav-link.disabled {
	background: #e0e0e0;
	color: #999;
	cursor: default;
	pointer-events: none;
}

/* ============================
   日付ナビゲーション（前日/翌日）
   ============================ */
.day-navigation {
	margin: 1.8em 0 0;
}

.day-nav-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.day-nav-link {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 0.2s;
}

.day-nav-prev {
	color: #1a5f3f;
}

.day-nav-prev:hover {
	background: #e8f5e8;
}

.day-nav-next {
	color: #1a5f3f;
}

.day-nav-next:hover {
	background: #e8f5e8;
}

.day-nav-link.disabled {
	visibility: hidden;
}

/* ============================
   格言セクション
   ============================ */
.kakugen-section {
	margin: 2em 0 1em;
}

.kakugen-inner {
	max-width: 600px;
	margin: 0 auto;
	text-align: left;
	padding: 16px 24px;
	background: linear-gradient(135deg, #fdfcf0 0%, #f7f3e0 100%);
	border-left: 4px solid #c0a842;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.kakugen-text {
	margin: 0;
	font-size: 0.95rem;
	color: #5a4a2f;
	line-height: 1.8;
	letter-spacing: 0.05em;
	font-family: 'Hiragino Mincho ProN', '游明朝', 'YuMincho', serif;
}

/* ▲の信頼度コンテンツ */
.confidence-section {
	margin: 1em 0 1.5em;
}

.confidence-inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
	padding: 14px 20px;
	background: linear-gradient(135deg, #f0f6ff 0%, #e8f0fb 100%);
	border-left: 4px solid #3b6fd4;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.confidence-text {
	margin: 0;
	font-size: 0.92rem;
	color: #2f3d5a;
	line-height: 1.8;
	letter-spacing: 0.03em;
}

/* ============================
   FAQページ
   ============================ */
.faq-page-content {
	padding: 30px 28px;
	background: #f7f8f9;
	border-radius: 8px;
}

.faq-page-content > p {
	margin: 0.8em 0 1.8em;
	line-height: 1.8;
}

.faq-category-title {
	font-size: 1.25rem;
	font-weight: bold;
	color: #1a5f3f;
	margin: 2em 0 1em;
	padding-left: 12px;
	border-left: 4px solid #1a5f3f;
}

.faq-wrap {
	margin-bottom: 1.2em;
}

.faq-section-item {
	max-width: 100%;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.faq-section-item .accordion-header {
	padding: 18px 24px;
}

.faq-section-item.is-open .accordion-header {
	color: #fff;
}

.faq-question {
	font-size: 1rem;
	font-weight: bold;
	color: #1a5f3f;
	line-height: 1.6;
	flex: 1;
	padding-right: 16px;
}

.faq-section-item.is-open .faq-question {
	color: #fff;
}

.faq-answer {
	padding: 24px 28px;
	line-height: 1.9;
	font-size: 0.95rem;
	color: #444;
	border-top: 1px solid #e8e8e8;
	background: #fcfdfc;
}

.faq-answer p {
	margin: 0.5em 0;
}

.faq-answer ul {
	margin: 0.8em 0;
	padding-left: 1.2em;
}

.faq-answer li {
	margin: 0.4em 0;
}

.faq-answer a {
	color: #1a5f3f;
	text-decoration: underline;
}

.faq-note {
	margin-top: 2em;
	padding: 14px 18px;
	background: #f7f7f7;
	border-radius: 4px;
	font-size: 0.85rem;
	color: #666;
	line-height: 1.7;
}

/* ============================
   的中実績ページ（各印の単勝率・複勝率）
   ============================ */
.hitrate-content {
	line-height: 1.9;
}

.hitrate-content h2 {
	font-size: 1.2rem;
	color: #1a5f3f;
	margin: 2em 0 0.8em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid #e0ebe0;
}

.hitrate-table-wrap {
	overflow-x: auto;
	margin: 1.2em 0;
}

.hitrate-table {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #e0ebe0;
	border-radius: 8px;
	overflow: hidden;
}

.hitrate-table th {
	background: #1a5f3f;
	color: #fff;
	font-size: 0.95rem;
	font-weight: bold;
	padding: 12px 16px;
	text-align: center;
	border-bottom: 2px solid #2d8a5f;
}

.hitrate-table td {
	padding: 14px 16px;
	text-align: center;
	font-size: 1rem;
	border-bottom: 1px solid #eee;
}

.hitrate-table tbody tr:last-child td {
	border-bottom: none;
}

.hitrate-table tbody tr:nth-child(even) {
	background: #f8faf9;
}

.hitrate-mark {
	font-size: 1.4rem !important;
	font-weight: bold;
	color: #1a5f3f;
}

.hitrate-num {
	color: #333;
}

.hitrate-note {
	font-size: 0.85rem;
	color: #888;
	margin-top: 0.8em;
	text-align: center;
}

.hitrate-gamble-warning {
	margin-top: 2em;
	padding: 14px 18px;
	background: #fff8f0;
	border-left: 4px solid #e0a040;
	border-radius: 4px;
	font-size: 0.88rem;
	color: #5a4a2f;
	line-height: 1.7;
}

/* ============================
   お問い合わせフォーム
   ============================ */
.static-page-content form input.text,
.static-page-content form textarea,
.static-page-content form select {
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 0.95rem;
	box-sizing: border-box;
	background: #fff;
}
.static-page-content form input.text:focus,
.static-page-content form textarea:focus,
.static-page-content form select:focus {
	border-color: #1a5f3f;
	outline: none;
	box-shadow: 0 0 0 3px rgba(26,95,63,0.12);
}
/* 入力エラー時の枠 */
.static-page-content form input.err,
.static-page-content form textarea.err,
.static-page-content form select.err {
	border-color: #c5283d;
	background: #fff5f6;
}
/* エラーメッセージ */
.static-page-content .formError {
	color: #c5283d;
	font-size: 0.85rem;
	margin-top: 5px;
	line-height: 1.5;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}
.static-page-content .formErrorMsg {
	background: #c5283d;
	color: #fff;
	display: inline-block;
	padding: 6px 0 6px 12px;
	border-radius: 4px 0 0 4px;
	font-size: 0.85rem;
	max-width: 100%;
	line-height: 1.5;
}
.static-page-content .formErrorMsg .errMsg {
	display: inline-block;
	color: #fff;
	white-space: normal;
	word-break: break-word;
	line-height: 1.5;
}
.static-page-content .formErrorClose {
	display: inline-block;
	margin-left: 0;
	padding: 6px 10px;
	cursor: pointer;
	font-weight: bold;
	line-height: 1.5;
	vertical-align: middle;
	flex-shrink: 0;
	white-space: nowrap;
	color: #fff;
	background: #c5283d;
	border-radius: 0 4px 4px 0;
}
.static-page-content .formErrorArrow {
	display: none;
}
/* 同意ボックス */
.agree-box {
	background: #f7f9f8;
	border: 1px solid #e0ebe0;
	border-radius: 8px;
	padding: 16px 18px;
	margin: 1.2em 0 0.5em !important;
}
.agree-label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: bold;
	color: #1a5f3f;
}
.agree-label input[type="checkbox"] {
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.agree-note {
	display: block;
	margin-top: 6px;
	font-size: 0.82rem;
	color: #888;
}
.agree-error {
	color: #c5283d;
	font-size: 0.88rem;
	margin: 0.3em 0 0.5em !important;
	font-weight: bold;
}
.agree-submit-area {
	text-align: center;
	margin: 1em 0 0 !important;
}
.static-page-content .submit-btn {
	background: #1a5f3f;
	color: #fff;
	border: none;
	padding: 12px 32px;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s, opacity 0.3s;
}
.static-page-content .submit-btn:hover {
	background: #2d8a5f;
}
.static-page-content .submit-btn:disabled {
	background: #b5c4bd;
	color: #f0f5f2;
	cursor: not-allowed;
}
.static-page-content .submit-btn:disabled:hover {
	background: #b5c4bd;
}

/* 問い合わせページ */
.contact-page { max-width: 1020px; }
.contact-page .page-title { margin-bottom: 34px; }
.contact-card { padding: 44px 52px; }
.contact-card > p:first-child { max-width: 700px; margin: 0 0 30px; color: #65716c; font-size: .9rem; }
.contact-form { display: grid; gap: 0 24px; }
.contact-form > p { margin: 0 0 20px; }
.contact-form > p > label, .contact-form > p > label:first-child { display: block; margin-bottom: 8px; color: #26302d; font-size: .78rem; font-weight: bold; }
.contact-form input.text, .contact-form textarea.text, .contact-form select.text { width: 100% !important; min-height: 46px; padding: 12px 14px; border: 1px solid #bdc9c1; border-radius: 0; color: #26302d; background: #fff; font: inherit; }
.contact-form textarea.text { min-height: 140px; resize: vertical; }
.contact-form input[type=file] { width: 100%; padding: 11px 0; border: 0; color: #65716c; font-size: .8rem; }
.contact-form input.text:focus, .contact-form textarea.text:focus, .contact-form select.text:focus { border-color: #1a6b4b; box-shadow: 0 0 0 3px rgba(26,107,75,.12); }
.contact-auth-form > p:first-of-type { max-width: 560px; }
.contact-auth-form > p:first-of-type label { margin-bottom: 8px; }
.contact-auth-form > p:first-of-type input { font-size: 1rem; }
.contact-policy-title { margin-top: 34px !important; }
.contact-detail-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-detail-form > p:nth-of-type(1), .contact-detail-form > p:nth-of-type(9), .contact-detail-form > p:nth-of-type(10), .contact-detail-form > p:nth-of-type(11), .contact-detail-form > p:nth-of-type(12), .contact-detail-form > p:nth-of-type(13), .contact-detail-form > p:last-of-type { grid-column: 1 / -1; }
.contact-detail-form > p:nth-of-type(8) { grid-column: 1 / -1; }
.contact-result { max-width: 720px; margin: 0 auto; }
.contact-result p:last-child { margin-top: 32px; }
.contact-result p:last-child a { display: inline-flex; padding: 12px 18px; border: 1px solid #26302d; color: #26302d; font-size: .82rem; font-weight: bold; text-decoration: none; }
.contact-result p:last-child a:hover { color: #fff; background: #26302d; }
.contact-form .submit-btn { width: max-content; margin-top: 4px; padding: 14px 18px; border: 1px solid #26302d; border-radius: 0; color: #26302d; background: transparent; font: inherit; font-size: .82rem; letter-spacing: .08em; }
.contact-form .submit-btn:hover { color: #fff; background: #26302d; }
.contact-form .submit-btn span { color: #b45537; font-size: 1.1rem; }
.contact-form .submit-btn:hover span { color: #fff; }

/* ============================
   404エラーページ
   ============================ */
.error-nav {
	margin: 1.5em 0 0;
	padding: 1em 1.2em;
	background: #f8f8f8;
	border-radius: 8px;
}
.error-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.error-nav li {
	margin: 0.4em 0;
}
.error-nav li a {
	display: inline-block;
	padding: 0.3em 0.5em;
	color: #1a5f3f;
	font-weight: bold;
}
.error-nav li a:hover {
	color: #2d8a5f;
	text-decoration: underline;
}