/* Simplified shim: import top.css for the static site styles.
	The original theme stylesheet contained many /wp-content references
	and has been replaced by `top.css` for the static build.
*/
@charset "UTF-8";

/* top.css の内容を統合しました（元は top.css） */
/* --- begin top.css content --- */
/*
 * Complete theme stylesheet copied from style.css
 * Paths to images adjusted for local preview: /wp-content/themes/studio33/images/ -> images/
 */
.aligncenter {
	display: block;
 	margin-left: auto;
 	margin-right: auto;
}
.alignleft { float: left; }
.alignright { float: right; }

/* Make all custom CSS changes in a child theme. Any custom
changes you make here will not be overidden when you upgrade the theme.
-----------------------------------------------------------*/

/*Undo browser defaults
------------------------------------------------------------ */
:link,:visited { text-decoration: none; }

/*h1, h2, h3, h4, h5, h6, pre, code, p { font-size: 1em; }*/
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; }
a img, :link img, :visited img { border: none; }
address { font-style: normal; }

/*Body & Links
------------------------------------------------------------ */
body {
		font: 64% 'Helvetica Neue',Helvetica,Arial,sans-serif;
	color: #cca980;
	line-height: 2.2em;
	background:#6b4522 url(images/bg05.gif);
		margin:0;
}

/*.entry a:link, .entry a:visited { font-weight: bold; }*/



/*Basic Structure
------------------------------------------------------------ */
.wrapper{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

/* Ensure wrapper has slightly more room to accommodate main-area + sidebar */
@media (min-width: 1200px) {
	.wrapper { max-width: 1200px; }
}
/* *******************
	Header - clean overrides
	Ensures logo (left), nav (center), top_sha (right) align cleanly
	********************/
/* place these overrides after base rules to stabilize layout */
#follow {
	background: url(images/header_bg.png) center top no-repeat;
	background-size: cover;

	min-height: 140px;
	padding-top: 18px;
}

/* Simplified header structure */
#header .wrapper {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 8px 15px 12px;
}

#logo { flex: 0 0 auto; }
#nav { 
	flex: 1 1 auto; 
	display: flex; 
	justify-content: flex-end; 
	align-items: baseline; /* align text baseline */
	gap: 10px;
	align-self: flex-end; 
	margin-bottom: 15px; 
	margin-right: 15px;
}
#nav a {
	display: block;
	padding: 7px 9px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	font-size: 1.1em;
	border-right: 1px solid rgba(66,45,24,0.6);
}
#nav a:last-child { border-right: none; }
#nav a.current { background: rgba(255,255,255,0.1); }

/* Prevent layout shift when nav links receive focus/click by reserving space and disabling outline shift */
#nav a { line-height: 2.2em; display: inline-flex; align-items: center; }
#nav a:focus { outline: 2px solid rgba(255,255,255,0.2); outline-offset: 2px; }
#nav a.current { font-weight: bold; }
.top_sha { flex: 0 0 130px; display:block; }

/* Decorative script title shown behind the header content */
#follow::before{
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 6px;
	width: 720px;
	height: 64px;
	background: url(images/head_title_001.png) center center no-repeat;
	background-size: contain;
	opacity: 0.95;
	pointer-events: none;
	z-index: 0;
}

/* Ensure header content is above decorative element */
#follow > .wrapper { position: relative; z-index: 2; }

/* Navigation: horizontal centered menu */
#nav { display: flex; gap: 18px; align-items: center; margin: 0; padding: 0; list-style: none; }
#nav li { display: inline-block; border-right: 1px solid rgba(66,45,24,0.6); }
#nav li:last-child { border-right: none; }
#nav a { display: block; padding: 10px 14px; color: #fff; text-decoration: none; white-space: nowrap; }

/* on small screens stack header content */
@media (max-width: 900px) {
	#follow > .wrapper { flex-direction: column; align-items: center; padding-top: 12px; }
	#navi01 { order: 2; width: 100%; }
	#nav { justify-content: center; flex-wrap: wrap; }
	.top_sha { order: 3; margin-top: 8px; }
	#follow::before { opacity: 0.6; width: 90%; background-size: contain; top: 4px; }

/* Strong override for legacy float rules in style.css - appended to ensure priority */
#facility_outer {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 18px !important;
	align-items: flex-start !important;
}
#facility_outer .facility_photo01,
#facility_outer .facility_photo02,
#facility_outer .facility_photo03 {
	float: none !important;
	width: auto !important;
	height: auto !important;
	border: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	flex: 1 1 calc(33.333% - 12px) !important;
	max-width: calc(33.333% - 12px) !important;
}
}

#content{
	/* float removed; width handled by flex */
	padding: 0 0 30px 0;
}

/* Main area: center content and sidebar with flexbox to avoid left bias */
.main-area {
	display: flex;
	align-items: flex-start;
	justify-content: center; /* center the entire block */
	gap: 24px; /* reduced space to help fit sidebar */
}
#content, #content_subp { flex: 1 1 820px; max-width: 820px; }
#sidebar { flex: 0 0 240px; }
#content {
	box-sizing: border-box;
	overflow: hidden; /* establish new block formatting context to avoid float overlap */
}
#content_subp{
	max-width: 960px; /* allow shrink below 960 when container is narrow */
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 30px 0;
}
.content-background { border-top: 2px solid #422d18; }
#sidebar {
	float: right;
	padding-bottom: 60px;
	width: 240px;
}

/* --- Added: Strong layout safeguards to keep sidebar from dropping --- */
/* Ensure main-area is wide enough and prevents wrapping */
.main-area { flex-wrap: nowrap; align-items: flex-start; }

/* If the container becomes narrower than the combined min widths, allow content to shrink but keep sidebar visible */
#content, #content_subp { min-width: 200px; }
#sidebar { min-width: 200px; flex: 0 0 240px; }

/* Remove legacy float on sidebar entirely and rely on flex layout */
#sidebar { float: none !important; margin-left: 0 !important; }

/* If viewport is too narrow, stack vertically at a reasonable breakpoint */
@media (max-width: 900px) {
	.main-area { flex-direction: column; gap: 18px; }
	#content, #content_subp { max-width: 100%; width: 100%; }
	#sidebar { width: 100%; flex: 0 0 auto; }
}

/* Also prevent inline images or wide tables from forcing overflow that pushes sidebar */
#content img, #content table, #content_subp img, #content_subp table { max-width: 100%; height: auto; box-sizing: border-box; }

/* In case legacy floats still exist inside content, establish BFC so floats don't affect layout */
#content { overflow: visible; }


/* Contact form styles - appended */
.contact-form{max-width:720px;margin:0 0 24px}
.contact-form .form-row{margin-bottom:12px}
.contact-form label{display:block;font-weight:700;margin-bottom:6px;color:#f3e6d9}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{width:100%;padding:8px;border:1px solid #ccc;border-radius:3px;background:#fff;color:#222}
.contact-form textarea{min-height:140px}
.contact-form button{background:#1266c6;color:#fff;border:none;padding:10px 16px;border-radius:3px;cursor:pointer}
.contact-form button:hover{background:#0e52a1}
.contact-form #contactStatus{margin-top:10px;color:#f3e6d9}

/* Additional safety for very wide nav or header pushing layout: ensure wrapper has enough space */
.wrapper { box-sizing: border-box; }

/* End added rules */

/* Center top banner images on Course and Facility pages */
.wrapper > div > img[src$="topimg_feerate.jpg"],
.wrapper > div > img[src$="topimg_facilites.jpg"] {
	display: block;
	margin: 0 auto 18px auto;
	max-width: 100%;
	height: auto;
}

/* Mobile navigation styles */
.mobile-nav-toggle{ display:block !important; background:transparent; border:1px solid rgba(255,255,255,0.12); color:#fff; padding:8px 10px; border-radius:4px; font-size:16px; cursor:pointer; position:fixed; top:12px; right:12px; z-index:10001; pointer-events:auto }
.mobile-nav-toggle:focus{ outline:2px solid rgba(255,255,255,0.18); }
/* Keep hamburger inside viewport on devices with notches or safe areas */
@supports (right: max(0px)) {
	.mobile-nav-toggle { right: max(12px, env(safe-area-inset-right)); left: auto; }
}

@media (max-width: 900px) {
	/* Avoid horizontal scrolling that could push fixed elements off-screen */
	html, body { overflow-x: hidden; }
	/* Hide horizontal nav and show toggle */
	#nav { display: none !important; }
	.mobile-nav-toggle { display: inline-block !important; }
	/* Mobile menu when opened (body.mobile-nav-open) */
	body.mobile-nav-open #nav {
		display: flex !important;
		position: fixed;
		top: 56px; /* approximate header height on mobile */
		left: 0; right: 0;
		background: rgba(43,30,20,0.98);
		flex-direction: column;
		padding: 8px 10px;
		gap: 0;
		z-index: 9999;
		box-shadow: 0 6px 18px rgba(0,0,0,0.4);
	}
	body.mobile-nav-open #nav a{ padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
	/* Ensure header wrapper doesn't overlap menu toggle */
	#header .wrapper { align-items: center; padding-right: 56px; }

	/* Place language switch and SHA image next to the logo */
	/* Use grid so logo (left) + header-right (right) stay on one row */
	#header .wrapper { display: grid !important; grid-template-columns: auto 1fr !important; align-items: center !important; gap: 6px !important; position: relative !important; padding-right: 56px !important; }
	#logo { order: 0 !important; margin: 0 6px 0 0 !important; justify-self: start !important; }
	#header-right { order: 0 !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; z-index: 2 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; min-width: 0 !important; }
	#header-right .top_sha img { width: 72px !important; height: auto !important; }
	#lang-switch { display: flex !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; }
	#lang-switch a { font-size: 0.9em !important; padding: 2px 6px !important; }
}

/* Make the open mobile nav respect safe areas on modern browsers */
@supports (padding: max(0px)) {
	@media (max-width: 900px) {
		body.mobile-nav-open #nav {
			left: max(0px, env(safe-area-inset-left));
			right: max(0px, env(safe-area-inset-right));
			padding-right: calc(10px + env(safe-area-inset-right));
			padding-left: calc(10px + env(safe-area-inset-left));
		}
	}
}

/* Extra-tight layout for very narrow phones */
@media (max-width: 480px) {
	#header .wrapper { gap: 4px !important; grid-template-columns: auto 1fr !important; }
	/* shrink logo to free space */
	#logo img { width: 72px !important; height: auto !important; }
	/* header-right stays in second grid column */
	#header-right { position: static !important; left: auto !important; right: auto !important; top: auto !important; }
	/* shrink SHA badge */
	#header-right .top_sha img { width: 64px !important; }
	/* hide language text, show only flags for space */
	#lang-switch a { font-size: 0 !important; padding: 2px 4px !important; }
	#lang-switch a img { width: 18px !important; height: 12px !important; display: inline-block !important; }
}
@media (max-width: 360px) {
	#header-right .top_sha img { width: 52px !important; }
	#lang-switch a { font-size: 0 !important; padding: 2px 3px !important; }
	#lang-switch a img { width: 16px !important; height: 10px !important; }
}

/* Overlay and hamburger animations */
.mobile-nav-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity 220ms ease; pointer-events: none; z-index: 9998 }
.mobile-nav-overlay.visible{ opacity: 1; pointer-events: auto }
.mobile-nav-toggle svg{ vertical-align: middle; fill: currentColor }
.mobile-nav-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:8px }
@media (max-width:900px){
	body.mobile-nav-open #nav{ transform: translateY(0); transition: transform 300ms cubic-bezier(.2,.8,.2,1); }
	#nav{ transform: translateY(-10px); transition: transform 180ms ease; }
}

#to_top {
	clear: both;
	width: 100%;
	max-width: 960px;
	margin:60px auto 0 auto;
	text-align:right;
	height:23px;
}

#footer {
	padding-top: 5px;
	border-top: 1px solid #ddd;
}
.clear:after, li.comment:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
div.skip-content { display: none; }

/*Header
------------------------------------------------------------ */
#header {
	width: 100%;
	margin: 0;
}


#follow {
	width: 100%;
	margin: 0;
	position: relative;
	/* decorative background strip */
	background: url(images/header_bg.png) center top no-repeat;
	background-size: cover;
	min-height: 160px;
	padding-top: 22px; /* allow decorative area at top */
}
#follow dl {
	float: right;
	font-size: 1.3em;
}
#follow dl dt, #follow dl dd { float: left; }
#follow dt {
	font-weight: bold;
	color: #ad9b83;
}
#follow dd { margin-left: 20px; }
#follow dd a {
	display: block;
	color: #cfc4b6;
}
#follow dd a.rss { padding-left: 20px; background: url(images/feed-icon.png) no-repeat 0 .2em; }
#follow dd a.email { padding-left: 22px; background: url(images/email-icon.png) no-repeat 0 .35em; }
#follow dd a.twitter { padding-left: 19px; background: url(images/twitter-icon.png) no-repeat 0 .15em; }
h1#title, div#title {
	float: left;
	padding: 30px 0;
	font-size: 3em;
	font-weight: bold;
	line-height: 50px;
}
h1#title a:link, h1#title a:visited, div#title a:link, div#title a:visited { color: #e9e5e0; }
h1#title a:hover, div#title a:hover { text-decoration: none; }

.top_sha {
	float:right;
}

/*Modernize header layout to avoid overlap between navigation and right-side image */
#follow > .wrapper {
	display: flex;
	/* align content toward the bottom so decorative background at top doesn't overlap */
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-top: 18px; /* tuned to balance decorative text and nav */
}

/* decorative script title positioned behind content - adjusted to avoid overlap */
#follow::before{
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	/* move up so it doesn't cover the nav */
	top: -24px;
	width: 520px; /* shrink width to fit */
	height: 48px;
	background: url(images/head_title_001.png) center center no-repeat;
	background-size: contain;
	opacity: 0.6; /* less prominent */
	pointer-events: none;
	z-index: 0;
}

/* ensure header inner content sits above decorative text */
#follow > .wrapper { position: relative; z-index: 6; display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 18px 12px 12px; }
#logo { flex: 0 0 auto; }
#navi01 { flex: 1 1 auto; min-width: 0; display:flex; justify-content:flex-end; align-items:center; align-self: flex-end; margin-bottom: 12px; margin-right: 15px; }
.top_sha { flex: 0 0 130px; float: none; }
#nav, #navi01, #logo, .top_sha { position: relative; z-index: 7; }

/* menu font size increased */
#nav a { padding: 8px 10px !important; font-size: 1.1em; }

/* Make the top navigation a horizontal flex list so it flows and doesn't overlap */
#nav { display: flex; align-items: center; gap: 8px; margin-top: 8px; overflow: hidden; }
#nav li { float: none; }

/* style language list items inserted at the start of the nav */
#nav li.lang { margin-right: 8px; border-right: none !important; }
#nav li.lang a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px !important; background: rgba(255,255,255,0.06); border-radius: 3px; }
#nav li.lang img { width: 16px; height: 11px; }

/* Strong header override block */
.top_sha { flex: 0 0 130px; display:block; }
#nav a { white-space: nowrap; padding: 0 12px; }
@media (max-width: 800px) {
	#follow > .wrapper { flex-direction: column; align-items: stretch; height: auto; padding: 8px 0; }
	.top_sha { margin-top: 8px; }
	#nav { flex-wrap: wrap; justify-content: flex-start; }
}

/* ======= Strong header reset (override conflicting rules) ======= */
/* Appended to the end so it wins over earlier conflicting styles */
/* --- end top.css content --- */

/* Minimal fallback styles to ensure pages render if top.css is missing */
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #6b4522; color: #cca980; }

/* Additional styles can be added below */

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft { float: left; }
.alignright { float: right; }

/* Make all custom CSS changes in a child theme. Any custom
changes you make here will not be overidden when you upgrade the theme.
-----------------------------------------------------------*/

/*Undo browser defaults
------------------------------------------------------------ */
:link,:visited { text-decoration: none; }

/*h1, h2, h3, h4, h5, h6, pre, code, p { font-size: 1em; }*/
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; }
a img, :link img, :visited img { border: none; }
address { font-style: normal; }

/*Body & Links
------------------------------------------------------------ */
body {
	background: url(images/line_end.png) no-repeat;
	color: #cca980;
	line-height: 2.2em;
	min-width: 960px;
	background:#6b4522 url(images/bg05.gif);
		margin:0;
}
/*.entry a:link, .entry a:visited { font-weight: bold; }*/
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft { float: left; }
.alignright { float: right; }

/* Make all custom CSS changes in a child theme. Any custom
changes you make here will not be overidden when you upgrade the theme.
-----------------------------------------------------------*/

/*Undo browser defaults
------------------------------------------------------------ */
:link,:visited { text-decoration: none; }

/*h1, h2, h3, h4, h5, h6, pre, code, p { font-size: 1em; }*/
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; }
a img, :link img, :visited img { border: none; }
address { font-style: normal; }

/*Body & Links
------------------------------------------------------------ */
body {
		font: 64% 'Helvetica Neue',Helvetica,Arial,sans-serif;
	color: #cca980;
	line-height: 2.2em;
	min-width: 960px;
	background:#6b4522 url(images/bg05.gif);
		margin:0;
}

/*.entry a:link, .entry a:visited { font-weight: bold; }*/



/*Basic Structure
------------------------------------------------------------ */
.wrapper{
	width: 960px;
	margin: 0 auto;
	text-align: left;
}
#content{
	float: left;
	width: 648px;
	padding: 0 0 30px 0;
}
#content_subp{
	width: 960px;
		padding: 0 0 30px 0;
}
.content-background { border-top: 2px solid #422d18; }
#sidebar {
	float: right;
	padding-bottom: 60px;
	width: 266px;
}

#to_top {
		clear: both;
		width: 960px;
		margin:60px auto 0 auto;
		text-align:right;
		height:23px;
}

#footer {
	padding-top: 5px;
	border-top: 1px solid #ddd;
}
.clear:after, li.comment:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
div.skip-content { display: none; }

/*Header
------------------------------------------------------------ */
#header {
	width: 100%;
		margin: 0;
}


#follow {
		width: 1050px;
	margin: 0 auto;
		height: 133px;
	padding: 3px 0;
	background: url(images/header_bg.png);
}
#follow dl {
	float: right;
	font-size: 1.3em;
}
#follow dl dt, #follow dl dd { float: left; }
#follow dt {
	font-weight: bold;
	color: #ad9b83;
}
#follow dd { margin-left: 20px; }
#follow dd a {
	display: block;
	color: #cfc4b6;
}
#follow dd a.rss { padding-left: 20px; background: url(images/feed-icon.png) no-repeat 0 .2em; }
#follow dd a.email { padding-left: 22px; background: url(images/email-icon.png) no-repeat 0 .35em; }
#follow dd a.twitter { padding-left: 19px; background: url(images/twitter-icon.png) no-repeat 0 .15em; }
h1#title, div#title {
	float: left;
	padding: 30px 0;
	font-size: 3em;
	font-weight: bold;
	line-height: 50px;
}
h1#title a:link, h1#title a:visited, div#title a:link, div#title a:visited { color: #e9e5e0; }
h1#title a:hover, div#title a:hover { text-decoration: none; }

.top_sha {
	float:right;
}

/*Description
---------------------------------------*/
#description {
	margin: 35px 0 0 40px;
	float: left;
	color: #796957;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 50px;
}

/*Logo
---------------------------------------*/

#logo {
	   float: left;
	   width: 75px;
	   padding-top: 10px;
}


#navi01 a:hover {
       text-decoration: none;
       color: #FFF;
}

#nav {
      width: 100%;
      font-size: 1.3em;
      font-weight: bold;
}
#nav a {
	display: block;
	color: #FFF;
	text-decoration: none;
	padding: 0px 10px;
}
#nav li {
        list-style:none;
	float: left;
	border-right: 1px solid #422d18;
}
#nav:first-child { border-left: 1px solid #422d18; }
#nav, #nav ul {
	float: left;
	line-height:45px;
	padding: 0;
	margin: 10px 0 0 0;
	width: 100%;
}

/* Make nav lists regular flow (do not hide off-screen). For a simple static site
   we prefer horizontal/stacking lists instead of flyout menus positioned off-screen. */
#nav ul {
	position: static;
	left: auto;
	height: auto;
	width: auto;
	display: block;
	font-weight: normal;
	line-height: 20px;
	border: 0;
	border-top: 1px solid #b69071;
}
#nav li li {
	width: 149px;
	border-bottom: 1px solid #b69071;
	border-left: 1px solid #b69071;
	border-right: 1px solid #b69071;
	background: #b69071;
}
#nav li li li { border-left: none; }
#nav li li a {
	padding: 4px 10px;
	width: 130px;
}
#nav li ul ul { margin: -29px 0 0 150px; }
#nav li li:hover { color: #ff8401; }
#nav li ul li:hover a, #nav li ul li li:hover a, #nav li ul li li li:hover a, #nav li ul li li li:hover a { color: #ff8401; }
#nav li:hover a, #nav li.sfhover a { color: #ff8401; }
#nav li:hover li a, #nav li li:hover li a, #nav li li li:hover li a, #nav li li li li:hover li a { color: #ff8401; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul { left: auto; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul { left:auto; }
#nav li:hover, #nav li.sfhover {
	color: #ff8401;
}
#nav .current_page_parent, #nav .current_page_ancestor, #nav .current-cat-parent {
	color: #ff8401;
}
#nav .current-cat, #nav .current_page_item {
	color: #ff8401;
}

/*Notice
------------------------------------------------------------ */
div.notice {
	padding: 5px 0;
	font-size: 1.6em;
}

/* Ensure no top border shows above the main menu (override legacy rules) */
#nav ul { border-top: none !important; }
div.notice strong { color: #2f2922; }
div.notice div {
	margin: 10px 0;
	padding: 20px;
	background: #f0ebe6 url(images/notice-background.gif) repeat-x top left;
}
div.notice div h2 {
	font-size: 1.3em;
	margin-bottom: 10px;
}

/*Page/Post Styling
------------------------------------------------------------ */
.post { margin:0 10px 30px 10px; }
/*Post Header
---------------------------------------*/
.post-header {
	margin: 0 0 15px 0;
	padding-top: 20px;
}
.post-header p {
	font-size: 150%;
	line-height: 22px;
        padding: 10px;
}

.post-header h2 {
	line-height: 1.1em;
        margin-bottom: 10px;
}
div.post-header div.date {
	float: left;
	width: 114px;
	color: #beaa99;
	font-size: 1.5em;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0 0 0 17px;
	background: url(images/icon-calendar.png) no-repeat 0 .3em;
}
.date span { color: #e0c9b5; }
.author {
	margin: 3px 0 0 131px;
	color: #c0b2a5;
	font-size: 1.2em;
}
/*Post Body
---------------------------------------*/
.entry {
	font-size: 1.4em;
}
/*.entry p { margin-bottom: 10px; }
.entry h2, .entry h3, .entry h4 {
	font-size: 1.3em;
	padding: 15px 0 5px 0;
}*/

.entry h4, .entry h5, .entry h6 {
	padding-top: 10px;
	font-size: .9em;
}

h2#subptitle02 {
        margin:20px 0 10px 0;
}

pre {
	margin: 10px 0;
	padding: 1em 10px;
	overflow: auto;
	background-color: #e9ebd9;
	color: #000;
}
code {
	padding: 2px 3px;
	font: 1.1em Consolas, "Courier New", sans-serif;
	background-color: #e9ebd9;
	color: #000;
}
pre code { font-size: 1.3em; }
blockquote {
	display: block;
	margin: 20px 0 20px 20px;
	padding: 0 0 0 20px;
	border-left: 3px solid #cbcac8;
	color: #666;
	font-style: italic;
	line-height: 1.5em;
}
/*.entry ul, .c-body ul { margin: 0 0 10px 10px; }*/

.entry ol, .c-body ol {
	list-style-type: decimal;
	list-style-position: inside;
	margin: 5px 0 5px 10px;
}
.entry ol li ol li, .c-body ol li ol li { list-style-type: lower-roman; }
.entry ol li, .c-body ol li { margin: 5px 0; }
.navigation {
	padding: 10px 0;
	font-size: 1.3em;
}
.index { padding: 0; }

#topmain_deco {
background: url(images/line_end.png) no-repeat;
height: 168px;
width: 648px;
margin-top:20px;
}

/*Post Footer
---------------------------------------*/
.post-footer { margin-left: 131px; }

/* === Header layout safeguard (force flex layout, override legacy floats) === */
/* Added to ensure header elements align correctly after consolidating top.css */
#follow {
	width: 100% !important;
	margin: 0 !important;
	position: relative !important;
	background: url(images/header_bg.png) center top no-repeat !important;
	background-size: cover !important;
	min-height: 140px !important;
	padding-top: 18px !important;
	box-sizing: border-box !important;
}
#follow > .wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 20px !important;
	padding: 8px 15px 12px !important;
	max-width: 1100px !important;
	margin: 0 auto !important;
}
#logo { flex: 0 0 auto !important; float: none !important; }
#navi01, #nav { flex: 1 1 auto !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; margin-bottom: 0 !important; }
.top_sha { flex: 0 0 130px !important; display: block !important; float: none !important; }
#nav { gap: 12px !important; }
/* Ensure legacy float rules do not reflow header children */
#follow dl, #follow dt, #follow dd, h1#title, div#title { float: none !important; }
@media (max-width: 900px) {
	#follow > .wrapper { flex-direction: column !important; align-items: stretch !important; }
	#nav { justify-content: center !important; flex-wrap: wrap !important; }
}

/* Additional strict fixes for header layout (applied last) */
#header { width: 100% !important; }
#header, #follow { display: block !important; }
#follow { display: block !important; }
#follow > .wrapper { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; }
#logo { order: 1 !important; flex: 0 0 auto !important; margin: 0 !important; }
#nav { order: 2 !important; flex: 1 1 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; }
.top_sha, #header-right { order: 3 !important; flex: 0 0 auto !important; display: block !important; }
#nav ul { display: flex !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
#nav ul { justify-content: center !important; }

/* Decorative header image placed absolutely so it doesn't affect layout flow */
.header-decor { position: absolute; left: 50%; transform: translateX(-50%); top: 40px; pointer-events: none; z-index: 0; max-width: 700px; }
#follow > .wrapper { position: relative; }
#logo, #nav, #header-right, .top_sha { position: relative; z-index: 2; }
#nav li { display: inline-flex !important; float: none !important; }
#nav a { display: inline-flex !important; align-items: center !important; padding: 8px 12px !important; }

/* Hide legacy floating helpers that may push layout */
#follow dl, #follow dd, #follow dt { display: block !important; float: none !important; }

/* If header still overflows on English pages, reduce nav font on narrower widths */
@media (max-width: 1100px) {
	body.lang-en #nav a { font-size: 0.95em !important; padding: 6px 8px !important; }
}

/* === Additional tweaks: spacing, max-width and decorative position === */
#follow > .wrapper {
	padding-left: 28px !important;
	padding-right: 28px !important;
	padding-top: 28px !important; /* ensure space at top so nothing is cut off */
}

/* Limit nav width so it stays centered and doesn't collide with logo */
#nav {
	max-width: none !important; /* allow full width so items are not clipped */
	margin-left: 0 !important;
	margin-right: 0 !important;
	flex-wrap: wrap !important; /* allow items to wrap onto next line if needed */
}

/* add spacing between logo and nav */
#logo { margin-right: 20px; }

/* Move decorative title slightly up so it doesn't overlap nav area */
.header-decor { top: 18px !important; max-width: 640px !important; transform: translateX(calc(-50% - 12px)) !important; }

/* Ensure header items remain aligned and visible */
#header-right { display: flex !important; align-items: center !important; gap: 12px !important; }

/* Stack language switch and SHA badge vertically to give nav more room */
#header-right { flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; gap: 8px !important; }
#header-right .top_sha { order: 2 !important; }
#header-right #lang-switch { order: 1 !important; }

/* On smaller screens, revert to row to preserve space */
@media (max-width: 800px) {
	#header-right { flex-direction: row !important; align-items: center !important; gap: 8px !important; }
}

/* Small screens: reduce nav width and allow wrapping */
@media (max-width: 900px) {
	#follow > .wrapper { padding-left: 12px !important; padding-right: 12px !important; }
	#nav { max-width: 100% !important; justify-content: center !important; }
	#logo { margin-right: 12px !important; }
}

/* Extra: increase follow min-height so tall decorative doesn't get clipped */
#follow { min-height: 200px; overflow: visible; padding-top: 18px; }

/* Make sure nav items can wrap and remain visible */
#nav ul { flex-wrap: wrap !important; }
#nav li { white-space: nowrap !important; }
#nav a { font-size: 1.1em; }

/* === Balanced single-row main menu (desktop) === */
@media (min-width: 901px) {
	#nav { display: flex !important; justify-content: space-evenly !important; align-items: center !important; }
	#nav ul { display: flex !important; gap: 12px !important; width: 100% !important; justify-content: space-evenly !important; padding: 0 !important; margin: 0 !important; }
	#nav li { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; }
	#nav a { display: inline-block !important; width: 100% !important; text-align: center !important; padding: 12px 6px !important; }
}

/* On narrower screens, center and allow wrap */
@media (max-width: 900px) {
	#nav { justify-content: center !important; }
	#nav ul { justify-content: center !important; gap: 8px !important; }
	#nav li { flex: 0 1 auto !important; }
	#nav a { width: auto !important; }
}

/* === English pages: slightly smaller main menu to avoid overflow === */
body.lang-en #nav a {
	font-size: 0.88em !important;
	padding: 10px 6px !important;
}
@media (max-width: 900px) {
	body.lang-en #nav a { font-size: 0.95em !important; padding: 8px 6px !important; }
}



/* Language switch styles */
#lang-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92em; color: #fff; }
#lang-switch a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(255,255,255,0.06); border-radius: 4px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.06); }
#lang-switch a img { display: inline-block; vertical-align: middle; }
#lang-switch a:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); }

/* On small screens keep only the flag icon to save space */
@media (max-width: 800px) {
	#lang-switch a { padding: 6px; }
	#lang-switch a { font-size: 0.0em; } /* hide text by shrinking font (keeps icons visible) */
	#lang-switch a img { width: 18px; height: 12px; }
}




.comments a {
	display: block;
	padding: 0 0 0 17px;
	color: #b79f87;
	font-size: 1.2em;
	background: url(images/icon-comments.png) no-repeat 0 .4em;
}
.comments a:hover {
	color: #453729;
	text-decoration: none;
}
.comments span {
	font-size: 1.3em;
	font-style: italic;
}
/*Single
---------------------------------------*/
.tags {
	float: left;
	width: 104px;
}
.tags span {
	display: block;
	font-size: 1.5em;
	font-weight: bold;
	text-transform: uppercase;
	color: #beaa99;
	padding: 0 0 10px 28px;
	background: url(images/icon-tags.png) no-repeat 0 .3em;
}
.tags p {
	font-size: 1.2em;
	line-height: 1.4em;
	color: #beaa99;
}
.tags a { color: #beaa99; }
.post-header h1 {
	padding-bottom:4px;
        border-bottom: 1px dashed #cca980;
        color: #FFF;
	}
.meta {
	border-bottom: 1px dashed #cca980;
	margin-top: 10px;
	padding-top: 5px;
	font-size: 1.2em;
	text-align: right;
}
/*Comments
------------------------------------------------------------ */
/*Top
---------------------------------------*/
.comment-number {
	display: block;
	padding: 30px 0 5px 0;
	font-weight: bold;
}
.comment-number span {
	font-size: 1.3em;
	color: #423c37;
}
.none { border-bottom: 1px solid #efeae4; }
a#leavecomment {
	font-size: 1.6em;
	padding-left: 2px;
}
/*Body
---------------------------------------*/
li.comment {
	padding-top: 20px;
	border-top: 1px dashed #cca980;
}
li.comment.depth-2 { margin-bottom: 10px; }
#comments ul.children {
	margin: 10px 0 0 131px;
	clear: both;
}
div.c-grav {
	float: left;
	width: 40px;
	margin: 0;
	text-align: right;
}
div.c-grav img {
	padding: 4px;
	border: 1px solid #e6e1db;
	border-right-color: #d6d1cc;
	border-bottom-color: #d6d1cc;
	background: #fff;
}
div.c-body {
	margin-left: 131px;
	width: 497px;
	font-size: 1.3em;
}
ul.children div.c-body {
	margin-left: 70px;
	width: 427px;
}
div.c-body p { margin-bottom: 10px; }
div.c-head {
	margin: 0 0 10px 0;
	font-weight: bold;
}
.c-permalink a:link, .c-permalink a:visited {
	color: #55504b;
	font-size: .7em;
}
div.reply { padding-bottom: 10px; }
div.reply a:link, div.reply a:visited { color: #beaa99; }
/*Form
---------------------------------------*/
form#commentform { margin: 0 0 20px 131px; }
#respond { font-size: 1.3em; }
h4#postcomment {
	margin: 20px 0;
	padding: 5px 0 0 0;
	color: #423c37;
	border-top: 1px solid #efeae4;
}
form#commentform label.comment-field {
	display: block;
	margin: 15px 0 3px 0;
	color: #756a60;
	font-size: 1.2em;
}
input.text-input, form#commentform textarea {
	padding: 7px;
	font-family: inherit;
	font-size: 1.1em;
	border: 1px solid #e6e1db;
	width: 477px;
}
input#author, input#email, input#url { width: 300px; }
form#commentform input#submit {
	padding: 5px;
	width: 150px;
}
form#commentform p.guidelines {
	margin: 10px 0;
	color: #555;
}
p.subscribe-to-comments, p.comments-rss { margin: 0 0 10px 0; }
p.comments-rss a {
	font-size: 1.1em;
	padding: 0 0 0 19px;
	background: url(images/feed-icon.png) no-repeat 0 .1em;
}
fieldset { border: none; }
/*Note
---------------------------------------*/
p.note {
	font-style: italic;
	font-size: 1.3em;
}
/*Pingbacks/Trackbacks
---------------------------------------*/
h3.pinghead {
	font-size: 1.3em;
	color: #444444;
}
ol.pinglist {
	list-style-type: decimal;
	list-style-position: inside;
	margin: 0 0 10px 10px;
	font-size: 1.3em;
}
/*Pages
---------------------------------------*/
#content .entry.page {
	margin: 0;
	width: 628px;
}
h1.pagetitle, h2.pagetitle {
	margin: 0 0 10px 0;
	padding-top: 5px;
}
/*Archives List
---------------------------------------*/
.entries ul { font-size: 1.3em; margin:10px 20px 20px 20px; border-bottom: 1px dashed #cca980; list-style:none;}
.entries ul li {
	line-height: 2.5em;
        padding-bottom: 5px;
}
.entries p {
         padding-left: 120px;
         padding-bottom: 3px;
         height: 110px;
}

.entries span {
	margin-right: 20px;
	color: #FFF;
}
/*Sidebar
------------------------------------------------------------ */
#sidebox { font-size: 1.2em; }
#sidebox p {
	margin-bottom: 15px;
	line-height: 1.6em;
}
#sidebox img {
	padding: 14px;
	border: 1px solid #e6e1dc;
	background: #f0ebe6;
}

#weatherbox {
	text-align: center;
	background: #fff;
	border: 1px solid #e6e1dc;
	border-radius: 8px;
	padding: 14px 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

#weatherbox .weather-info { display: grid; gap: 8px; }
#weatherbox .weather-location {
	font-weight: 600;
	color: #3f2a15;
}
#weatherbox .weather-current { display: flex; gap: 8px; align-items: baseline; justify-content: center; }
#weatherbox .temperature { font-size: 1.8em; font-weight: 700; color: #241913; }
#weatherbox .condition { font-size: .95em; color: #666; }

#weatherbox .weather-details { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; justify-items: center; }
#weatherbox .weather-details > div { font-size: .95em; color: #333; background: #f7f4f1; border-radius: 4px; padding: 6px 8px; width: 100%; text-align: center; }

#weatherbox .weather-link { margin-top: 6px; }
#weatherbox .weather-link a { display: inline-block; padding: 6px 10px; border: 1px solid #CCA980; border-radius: 999px; color: #3f2a15; text-decoration: none; background: #fff; }
#weatherbox .weather-link a:hover { background: #CCA980; color: #fff; border-color: #CCA980; }

#weatherbox a {
        color: #CCA980;
}

#weatherbox a:hover {
        color: #fd9002;
}

h2.widgettitle-top {
	margin: 20px 0 10px 0;
	padding-bottom: 3px;
}

h2.widgettitle {
	margin: 30px 0 10px 0;
	padding-bottom: 3px;
}

.widget_ul {
        font-size: 1.2em;
        margin:0 5px 20px 5px;
        line-height: 1.4em;
}

.widget_ul li {
	background: url(images/point01.png) no-repeat scroll 0 3px transparent !important;
       margin-top: 10px !important;       
       padding-left: 15px !important;
       padding-bottom: 3px !important;
       border-bottom: 1px dashed #2a180e;
       list-style:none;
}

.widget_ul a {
       color:#FFF;
}

.widget_ul a:hover {
       color: #fd7402;
       text-decoration: none;
}


/*ul li.widget ul { font-size: 1.2em; }
ul li.widget ul li ul {
	margin-left: 15px;
	font-size: 1em;
}
ul li.widget ul li { padding: 1px 0; }
ul li.widget ul li ul li { padding: 1px 0 0 0; }*/

span.date {
color:#fd7402;
margin-left:10px;
}

/* ==== Header desktop enforcement (fix vertical stacking seen in screenshot) ==== */
@media (min-width: 901px) {
	/* Force header wrapper to keep a single row layout */
	#follow > .wrapper { flex-wrap: nowrap !important; align-items: center !important; }

	/* Keep logo, nav, and header-right in one line and prevent nav links from stacking */
	#logo { flex: 0 0 auto !important; margin-right: 20px !important; }
	#nav { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; white-space: nowrap !important; }
	#nav, #nav ul { width: auto !important; margin: 0 !important; padding: 0 !important; }
	#nav li { display: inline-flex !important; float: none !important; }
	#nav a { display: inline-block !important; white-space: nowrap !important; padding: 10px 12px !important; }

	/* Ensure header-right (language/SHA) stays at the end and doesn't force nav into column */
	#header-right, .top_sha { flex: 0 0 auto !important; margin-left: 16px !important; }

	/* If nav is long, allow it to shrink before wrapping to a new line */
	#nav { min-width: 0 !important; }
}

/* Extra: small tweak to avoid nav being too tall which can push items into column */
#nav a { line-height: 1.6 !important; }

/* ==== Additional selectors for pages using #header > .wrapper (index.html) ==== */
@media (min-width: 901px) {
	/* Mirror the #follow rules for #header when the markup differs */
	#header > .wrapper { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; padding: 8px 15px 12px !important; }

	#header #logo { flex: 0 0 auto !important; margin-right: 20px !important; }
	#header #nav { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; white-space: nowrap !important; }
	#header #nav ul { display: flex !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
	#header #nav li { display: inline-flex !important; float: none !important; }
	#header #nav a { display: inline-block !important; white-space: nowrap !important; padding: 10px 12px !important; }

	#header #header-right, #header .top_sha { flex: 0 0 auto !important; margin-left: 16px !important; }
	#header #nav { min-width: 0 !important; }
}

/* Final safety overrides: ensure nav is visible and not clipped */
#header #nav, #nav { overflow: visible !important; visibility: visible !important; height: auto !important; }
#header #nav ul, #nav ul { float: none !important; }

/* ===== Keep main menu in a single row on desktop ===== */
@media (min-width: 901px) {
	/* Allow header to be wider than legacy 960px so nav fits */
	#header > .wrapper { width: min(1200px, 100%) !important; max-width: 1200px !important; }

	/* Prevent wrapping while allowing items to shrink via spacing */
	#header #nav { flex-wrap: nowrap !important; }
	#header #nav li { flex: 0 0 auto !important; }
	#header #nav a { padding: 8px 9px !important; font-size: 1.0em !important; }
}

/* Condense header further when viewport is narrow desktop */
@media (min-width: 901px) and (max-width: 1100px) {
	#header #nav a { padding: 6px 7px !important; font-size: 0.92em !important; letter-spacing: 0 !important; }
	/* Make SHA badge a bit smaller to free horizontal space */
	#header-right .top_sha img { width: 110px !important; height: auto !important; }
	/* Save space by hiding text labels in language switch (flags only) */
	#lang-switch a { font-size: 0 !important; padding: 6px !important; }
	#lang-switch a img { width: 18px; height: 12px; }
}

/* ===== Mobile site styles (global) ===== */
@media (max-width: 900px) {
	/* Remove legacy minimum width and fixed wrappers */
	html, body { min-width: 0 !important; width: 100% !important; }
	.wrapper { width: 100% !important; max-width: 100% !important; padding-left: 12px; padding-right: 12px; box-sizing: border-box; }

	/* Header: stack vertically; hide decorative title; ensure spacing */
	#header > .wrapper { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding-top: 8px !important; }
	.header-decor { display: none !important; }
	#logo { align-self: center !important; }
	#header-right { order: 3 !important; display: flex !important; justify-content: center !important; gap: 8px !important; }
	#header-right .top_sha img { width: 110px !important; height: auto !important; }
	#lang-switch a { padding: 6px !important; font-size: 0 !important; }
	#lang-switch a img { width: 18px; height: 12px; }

	/* Main layout: stack content and sidebar */
	.main-area { flex-direction: column !important; gap: 16px !important; }
	#content, #sidebar { width: 100% !important; max-width: 100% !important; float: none !important; }

	/* Images scale to container */
	img { max-width: 100%; height: auto; }

	/* Tables, banners */
	#topmain_deco, .content-background { width: 100% !important; }

	/* Footer columns stacked */
	.footer-row { display: flex; flex-direction: column; gap: 12px; }
	.footer-column { width: 100% !important; height: auto !important; margin-right: 0 !important; }

	/* Nav handled by existing mobile menu rules (#nav hidden + overlay menu) */
}

/* Keep hamburger menu active on mobile (default behavior) */

/* Hamburger visibility control: hidden by default, show on mobile */
.mobile-nav-toggle { display: none !important; }
@media (max-width: 900px) {
	.mobile-nav-toggle { display: inline-flex !important; }
	/* Reserve space on the right so it doesn't overlap header content */
	#header .wrapper { padding-right: 56px !important; }
	/* Improve visibility */
	.mobile-nav-toggle { background: rgba(0,0,0,0.38) !important; border-color: rgba(255,255,255,0.7) !important; color:#fff !important; z-index: 20000 !important; }
	/* Strong visibility/position overrides */
	body .mobile-nav-toggle {
		position: fixed !important;
		top: 12px !important;
		right: 12px !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
}

/* === Final mobile nav visibility override (wins over all previous) === */
@media (max-width: 900px) {
	/* Hide main nav by default on mobile */
	#header #nav, #nav { display: none !important; }
	/* When toggled open, show as column menu */
	body.mobile-nav-open #header #nav,
	body.mobile-nav-open #nav { display: flex !important; }
}

/*Adbox
---------------------------------------*/
#adbox {
	margin: 20px 0;
	padding: 3px;
	border: 1px solid #e6e1dc;
	background: #f0ebe6;
}
#adbox img { border: 1px solid #e6e1dc; }

/*Footer
------------------------------------------------------------ */
#footer {
	padding: 20px 0 23px 0;
	border-top: 2px solid #3b2815;
	background: url(images/footer_bg01.gif) repeat-x top;
}


/*Footer Columns
---------------------------------------*/
.footer-column {
	float: left;
	margin:0 30px 20px 0;
	padding-bottom: 15px;
	color: #cca980;
        background: #3e2a16;
        height:275px;
}

.footer-column a {
color: #CCA980; text-decoration: underline; }

.footer-column a:hover { text-decoration: underline; }


#footer-about.footer-column { width: 337px; }
#footer-flickr.footer-column { width: 280px; }
#footer-search.footer-column {
	margin: 0;
	float: right;
	width: 280px;
}
.footer-column h2 {
        margin: 0;
}
.footer-column p {
        padding:0 30px;
	margin:0;
	font-size: 1.2em;
	line-height: 1.5em;
        background: #3e2a16;
}

dl.condition dt {
  clear: left;
  float: left;
  margin: 0 1em 0.8em 1.6em;
  width: 8em;
  border-bottom: solid 1px #4f3821;
  font-size:120%;
  text-align: right;
}

dl.condition dd {
  margin:0 1.6em 0.8em 5em;
  font-size:120%;
  border-bottom: solid 1px #4f3821;
}

#sitemap {
        margin:0 30px 60px 30px;
        font-size: 1.2em;
}

#sitemap a {
text-decoration: none;
}

#sitemap a:hover {
text-decoration: underline;
}

#sitemap li {
	background: url(images/arrow01.png) no-repeat scroll 0 7px transparent !important;
       padding-left: 15px !important;
       list-style:none;
}


/*Flickr
---------------------------------------*/
.flickr_badge_image {
	float: left;
	margin: 0 0 0 10px;
	padding: 0;
	line-height: 0;
}
#flickr_badge_image1.flickr_badge_image, #flickr_badge_image2.flickr_badge_image, #flickr_badge_image3.flickr_badge_image { margin: 15px 0 10px 10px; }
#flickr_badge_image1.flickr_badge_image, #flickr_badge_image4.flickr_badge_image { margin-left: 0; }
.flickr_badge_image img {
	margin: 0;
	padding: 5px;
	border: 1px solid #ccc;
	background: #f7f7f7;
	line-height: 0;
}
#footer h2.widgettitle { margin-top: 0; }
/*Search
---------------------------------------*/
#search_form input.search {
	margin: 15px 0 0 0;
	padding: 5px 2px;
	width: 180px;
	border: 1px solid #ded8d5;
	background: #f3f3f3;
	color: #555;
}
#search_form input.search:focus { background: #fff; }
#search_form input#searchsubmit { margin: 0 0 0 5px; }
/*Copyright
---------------------------------------*/
#copyright {
	display: block;
	clear: both;
	padding-top: 1px;
	font-size: 1.2em;
        margin-top: 15px;
	border-top:  1px solid #3e2a16;
}
#copyright a:link, #copyright a:visited {
	border-bottom: 1px dotted;
	text-decoration: none;
}
#copyright a:hover {
	border-bottom: 1px solid;
	text-decoration: none;
}
/*Miscellaneous
---------------------------------------*/
img.border {
	padding: 14px;
	border: 1px solid #e6e1dc;
	background: #f0ebe6;
}
.entry .alignright { margin: 0 0 10px 15px; }
.entry .alignleft { margin: 0 15px 10px 0; }

a:focus{
overflow:hidden;
outline:none;
}



/*Facility
---------------------------------------*/

#facility_outer {
        margin: 0 0 20px 85px;
}

.facility_comment{
        margin: 10px 90px 10px 10px;
}

h2.facility_title{
        margin: 60px 0 0 0;
}

.facility_photo01 {
        float: left;
        width: 250px;
        height: 167px;
        border: #FFF 2px solid;
        margin:15px 0 0 1px;
}

.facility_photo02 {
        float: right;
        width: 250px;
        height: 167px;
        border: #FFF 2px solid;
        margin:15px 0 0 15px;
}

.facility_photo03 {
        float: right;
        width: 250px;
        height: 167px;
        border: #FFF 2px solid;
        margin:15px 81px 0 15px;
}


/* Facility responsive fixes (JP/EN) */
@media (max-width: 900px) {
	/* Remove desktop left offset and flex/float quirks */
	#facility_outer { margin: 0 !important; display: block !important; }
	/* Titles and texts should take full width and not sit beside photos */
	#facility_outer h2.facility_title { width: 100% !important; margin: 20px 0 8px 0 !important; clear: both !important; }
	#facility_outer p { width: 100% !important; margin: 8px 0 !important; clear: both !important; }
	/* Make photos full width of container; drop floats and fixed heights */
	#facility_outer .facility_photo01,
	#facility_outer .facility_photo02,
	#facility_outer .facility_photo03 {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 8px 0 !important;
		display: block !important;
		height: auto !important;
			box-sizing: border-box !important;
		flex: none !important;
	}
	#facility_outer .facility_photo01 img,
	#facility_outer .facility_photo02 img,
	#facility_outer .facility_photo03 img {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}
}

/* (no additional 600px rules needed; 100% width already applied at 900px) */

/* Facility desktop fixes (JP/EN) */
@media (min-width: 901px) {
	/* Use flex layout with gaps to keep exactly 3 columns for photos */
		#facility_outer { margin: 0 0 24px 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: flex-start !important; }
	/* Titles and paragraphs occupy full row */
	#facility_outer h2.facility_title { flex: 0 0 100% !important; margin: 28px 0 12px 0 !important; clear: both !important; }
	#facility_outer p { flex: 0 0 100% !important; margin: 10px 0 !important; clear: both !important; }
	/* Photos: 3 columns with gap accounted; remove floats/heights/margins */
	#facility_outer .facility_photo01,
	#facility_outer .facility_photo02,
	#facility_outer .facility_photo03 {
		float: none !important;
		display: block !important;
		flex: 0 0 calc((100% - 28px) / 3) !important; /* cushion to avoid wrap */
		margin: 0 !important;
		height: auto !important;
		box-sizing: border-box !important;
	}
	#facility_outer .facility_photo01 img,
	#facility_outer .facility_photo02 img,
	#facility_outer .facility_photo03 img {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}
}


/*About us
---------------------------------------*/

#about_contant {
	float: none;
	width: auto;
	margin: 30px 10px 10px;
}
#about_contant p {
      margin: 10px 0;
}
#about_imgphoto {
				 width: 320px;
				 max-width: 40%;
				 float: right;
				 margin: 30px 10px 10px 20px;
}
#about_imgphoto img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
	#about_imgphoto { float: none; max-width: 100%; width: 100%; margin: 16px 0; }
	#about_contant { margin: 16px 0; }
}


/*Fee rate
---------------------------------------*/

/* Enlarge typography for Fee Rate pages only */
.page-feerate #content, .page-feerate #content_subp {
	font-size: 110%;
	line-height: 1.9em;
}
.page-feerate table.visiterfee {
	font-size: 105%;
}
.page-feerate .fee_table01 td,
.page-feerate #premarks,
.page-feerate #rental,
.page-feerate #remarks {
	font-size: 105%;
}
@media (max-width: 900px){
	.page-feerate #content, .page-feerate #content_subp { font-size: 115%; }
}


table.visiterfee {
         float:left;
         width:480px;
border-collapse: collapse;
font-size: 96%;
margin:20px 0;
}

table.visiterfee th,
table.visiterfee td {
/*width: 20%;*/ /* ใ‚ปใƒซใฎๅน…๏ผˆใ‚ปใƒซใฎๅน…ใ‚’ๅ‡็ญ‰ใซใ™ใ‚‹ๅ ดๅˆ๏ผ‰ */
padding: 6px 8px;
}

table.visiterfee thead th {
border-bottom: 1px #422616 solid;
}

table.visiterfee tfoot td {
border-top: 1px #422616 solid;
}


#table_left01 {
		 float:left;
		 width:480px;
		 /* reduce left margin so left+right fit within 820px content */
		 margin: 20px 10px 20px 10px;
}

#table_left02 {
         float:left;
         width:480px;
         margin: 30px 0 30px 50px;
}

#table_left02 span{
         color:#ffb21e;
}

#table_left02 p {
         margin-bottom: 20px;
}

#table_left01 span{
         font-size: 12px;
         color:#ffb21e;
}

#table_left01 p{
         margin: 20px 5px;
}

#table_right01 {
		 width:320px;
		 float: right;
		 /* reduce right margin to fit alongside left column */
		 margin: 20px 10px 20px 0;
}

#table_right02 {
         width:320px;
         float: right;
         margin: 30px 40px 30px 0;
}

#rental {
         margin: 15px 0 30px 0;
         padding: 0 5px;
}

#rental span{
         font-size: 12px;
         color:#ffb21e;
}

#remarks {
         color:#2a180e;
         font-weight: bold;
}

#premarks {
         margin: 5px 0 15px 0;
         padding: 0 5px;
         font-size: 12px;
}

#premarks span{
         font-size: 12px;
         color:#ffb21e;
}

.fee_table01 {
         width:480px;
         margin: 0;
}

.fee_table01 h3{
         color:#2a180e;
         margin-top: 10px;
         font-size: 1em;
}


.fee_table01 td {
        border-bottom:#422616 1px solid;
        padding:5px;
}

#shuttle_coments{
        margin: 20px 0;
        text-align:center;
}

/* Responsive adjustments for Fee Rate */
@media (max-width: 900px){
	#table_left01, #table_right01, #table_left02, #table_right02 { float: none; width: 100%; margin: 12px 0; }
	table.visiterfee, .fee_table01 { width: 100%; }
	table.visiterfee th, table.visiterfee td { padding: 8px; }
}

/* Ensure Fee Rate two columns align side-by-side on desktop without float issues */
@media (min-width: 901px){
	#table_left01, #table_right01 { float: none !important; display: inline-block; vertical-align: top; }
	/* keep total <= 820px including margins and ~4px inline-block whitespace */
	#table_left01 { width: 480px; margin: 20px 4px 20px 0; }
	#table_right01 { width: 320px; margin: 20px 0 20px 0; }
}


/*News and Event
---------------------------------------*/

.newsevent_box {
        margin: 0 10px;
}


/*Contact
---------------------------------------*/
#subp_contact{
        float:left;
        width:500px;
        margin: 30px 0px 60px 20px;
}

#subp_contact2{
        float:left;
        width:920px;
        margin: 30px 20px 10px 20px;
}

#typeform {
         float: right;
         margin: 25px 20px 10px 10px;
         padding: 0 5px;
         width:390px;
}

.tarea {
width:360px;
height:120px;
}

#contact_outer {
        margin: 25px 15px 20px 15px;
}

#contact_info{
       float:right;
       width:230px;
       margin: 0;
}

#accesslist {
       margin:20px 0 0 20px;
	line-height: 1.5em;
}

#accesslist li {
	background: url(images/point.png) no-repeat scroll 0 3px transparent !important;
    list-style: none outside none;
    margin-top: 10px !important;
    padding-bottom: 5px !important;
    padding-left: 18px !important;      
}

#accesslist a {
    text-decoration: underline;
    color: #fd7402;
}

#accesslist a:hover {
    text-decoration:none;
    color: #fd7402;
}


.name01 {
	font-size:20px;
        padding-bottom:10px;
        color:#ed7007;
}

#googlemap {
         float:left;
         width:650px;
	 height:350px;
         border:#b48f64 3px solid;
         margin: 0 0 50px 0;
}


.attention {
        color: #FD7402;
        font-size:12px;
}

p.submit {
        margin-top:20px;
        text-align: center;
}

#map01{
        width:450px;
        float: left;
        margin: 25px 5px 30px 15px;
}

#map02{
        width:450px;
        float: right;
        margin: 25px 15px 30px 10px;
}

.printmap {
        background: url("images/print_markf.png") no-repeat scroll 0 0 transparent;
        height:27px;
        padding:3px 0 0 35px;
}

.printmap a {
        color: #fd9002; text-decoration: underline;
}

.printmap a:hover {
        color: #fd9002; text-decoration: none;
}

/* form tab */

.tabNav ul {
    position: relative;
    z-index: 10;
}

.tabNav li {
    float:left;
    display:block;
    margin-right: 10px;
    padding: 5px 10px;
    background:#241913;
}

.tabNav a {
	color: #CCA980; text-decoration:none;
}

.tabNav a:hover {
	color: #fd7402; text-decoration:none;
}



div#tab1 {
    clear:both;
    border:1px solid #241913;
    padding:0 10px 20px;
    margin-bottom: 20px;
}

div#tab2 {
    clear:both;
    border:1px solid #241913;
    padding:0 10px 20px;
    margin-bottom: 20px;
}

p.tabname {
    color:#fd9002;
    font-weight:bold;
    padding :15px 0 5px;
    border-bottom:1px solid #241913;
    margin:0 0 15px;
}

/*Course over
---------------------------------------*/

#fl_course {
        text-align: center;
        margin:30px 0;
}

/* Scorecard thumbnails */
.scorecard-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 8px 0 16px;
	align-items: center;
}
.scorecard-list li { display: block; }
.scorecard-list img { display: block; border: 1px solid #ddd; border-radius: 4px; height: auto; }

@media (max-width: 900px) {
	.scorecard-list { justify-content: center; }
}

/*Gallery
---------------------------------------*/
.galleryview{ background:#3f2a15; padding:2px; margin-bottom:20px; }

/* Modern responsive gallery grid */
.gallery-grid { 
	display: grid; 
	grid-template-columns: repeat( auto-fill, minmax(180px, 1fr) );
	gap: 12px; 
}
.gallery-grid a.gallery-link { 
	position: relative; 
	display: block; 
	overflow: hidden; 
	border-radius: 8px; 
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
	background: #fff;
}
.gallery-grid a.gallery-link::after{
	content: '';
	position: absolute; inset: 0; 
	background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.15));
	opacity: 0; transition: opacity .25s ease;
}
.gallery-grid a.gallery-link img { 
	display: block; width: 100%; height: 100%; object-fit: cover; 
	transition: transform .25s ease;
	aspect-ratio: 4 / 3; /* reasonable default for consistent tiles */
}
.gallery-grid a.gallery-link:hover img { transform: scale(1.04); }
.gallery-grid a.gallery-link:hover::after{ opacity: 1; }

/* Make the short-row visually separated but consistent */
.gallery-grid.short-row { margin-top: 16px; }

@media (max-width: 900px){
	.gallery-grid { grid-template-columns: repeat( auto-fill, minmax(140px, 1fr) ); gap: 10px; }
}

/* Simple Modal Styles (used by modal.js) */
#simple-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.65); z-index: 30000; }
#simple-modal.open { display: flex; }
#simple-modal .modal-inner { position: relative; max-width: 92vw; max-height: 88vh; }
#simple-modal .modal-content { background: transparent; }
/* fixed top-right close button */
#simple-modal .modal-close { position: fixed; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0,0,0,.75); color: #fff; font-size: 20px; line-height: 40px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
#simple-modal .modal-close:hover, #simple-modal .modal-close:focus { background: rgba(0,0,0,.9); outline: none; }

/*other
---------------------------------------*/
.line {
         width:960px;
         height:31px;
		 background: url(images/line01.png) ;
         margin: 0 0 30px 0; 
}