/*
Theme Name: 坂本織物（児島唐琴 真田紐）
Description: 旧サイト sanadahimo.info（静的HTML）の見た目を再現したクラシックテーマ。左に画像ナビ、右に本文。
Version: 1.0.0
Requires at least: 7.0
Requires PHP: 8.0
Text Domain: sanadahimo
Update URI: false
（WordPress.org に同じ名前のテーマができても「更新」で置き換わらないようにする。自社製なので外から更新しない）
*/

/* ---- 旧 styles.css をそのまま踏襲 ---- */
/* 旧サイトは書体を指定しておらず、ブラウザ標準の書体（Windowsではメイリオ等）で表示していたので、ここでも指定しない */
body {
	margin: 8px;
	background: #fff;
}
img { border: 0; }
#con {
	width: 880px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 40px;  /* 本文と下部の案内帯の間をあける */
}
/* 左メニューと本文の回り込みをここで閉じる（案内帯・フッターが本文に重ならないように） */
#con::after { content: ""; display: block; clear: both; }
#con #maincon {
	float: right;
	width: 640px;
	color: #333;
	font-size: 95%;
	line-height: 125%;
	text-align: justify;
}
#con #maincon .hmba {
	padding-bottom: 30px;
}
#con #maincon h2 {
	font-size: 120%;
	font-weight: normal;
	color: #000;
	padding-bottom: 3px;
	padding-left: 10px;
	margin-bottom: 10px;
	border-bottom: 1px dashed #000;
	clear: both;
}
#con #maincon .senten {
	padding: 0 20px 20px 20px;
	margin: 0;
}
#con #subcon {
	width: 220px;
	float: left;
}
#con #subcon .logo {
	text-align: center;
}
#con #subcon ul {
	margin: 0;
	padding: 20px 0;
}
#con #subcon ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#con #subcon h2 {
	font-size: 100%;
	font-weight: normal;
	color: #595757;
	margin: 0;
	padding-bottom: 5px;
}
#con #subcon h3 {
	font-size: 85%;
	font-weight: normal;
	color: #595757;
	margin: 0;
	padding: 0;
}
/* フッター（構成案 v1.0：ロゴ／会社名・住所・電話／サイトマップ／©） */
#footer {
	clear: both;
	color: #666;
	font-size: 12px;
	line-height: 1.8;
	width: 880px;
	margin: 0 auto;
	padding: 24px 0 12px;
	background: #f6f5f2;
}
#footer a { color: #555; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 0 24px; }
.footer-logo img { display: block; margin-bottom: 6px; }
.footer-company p { margin: 0; }
.footer-sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); gap: 2px 28px; }
.footer-sitemap a { text-decoration: none; }
.footer-sitemap a:hover { text-decoration: underline; }
.footer-copy { margin: 18px 0 0; text-align: center; color: #999; }

/* 下部の案内帯（全ページ共通・フッターの上） */
.cta-band {
	clear: both;
	width: 880px;
	margin: 0 auto;
	padding: 28px 0 32px;
	border-top: 1px dashed #bbb;
	text-align: center;
	color: #333;
}
.cta-band__title { margin: 0 0 6px; font-size: 18px; font-weight: bold; color: #262626; }
.cta-band__text { margin: 0; font-size: 12px; line-height: 1.8; color: #555; }
.cta-band__buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.cta-btn { display: inline-block; padding: 10px 20px; border: 1px solid #262626; background: #fff; color: #262626; font-size: 13px; font-weight: bold; text-decoration: none; }
.cta-btn--primary { background: #262626; color: #fff; }
.cta-btn:hover { opacity: .8; }
.photoleft {
	float: left;
	padding-right: 10px;
	padding-bottom: 10px;
}
.photoright {
	float: right;
	padding-bottom: 10px;
	padding-left: 10px;
}
.cl { clear: both; }

/* 画像がないナビ項目（メニューで追加したページ等）は文字で旧ナビ風に表示 */
#subcon .navi-text {
	display: block;
	height: 54px;
	line-height: 54px;
	text-align: center;
	color: #262626;
	text-decoration: none;
	letter-spacing: .1em;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	border-bottom: 1px dotted #262626;
}
#subcon .navi-text:hover,
#subcon .current .navi-text { background: #ffd24d; }

/* パンくず（ブログのパンくずと同じ見た目） */
.crumbs ol { list-style: none; margin: 0 0 16px; padding: 0; font-size: 12px; line-height: 1.85; color: #777; display: flex; flex-wrap: wrap; text-align: left; }
.crumbs li + li::before { content: "＞"; margin: 0 .4em; }
.crumbs a { color: #777; }

/* ---- 旧サイトで各ページの <head> に書いていたCSS（body に page-スラッグ のクラスを付けて当てる） ---- */
/* 会社概要（company.html） */
.page-company #con #maincon table tr td {
	border-bottom: 1px dotted #999;
	padding: 10px 5px 10px 10px;
}
/* お問い合わせ（contact.html） */
.page-contact #formWrap {
	width: 640px;
	margin: 0 auto;
	color: #555;
	line-height: 120%;
	font-size: 90%;
}
.page-contact table.formTable {
	width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
}
.page-contact table.formTable td,
.page-contact table.formTable th {
	border: 1px solid #ccc;
	padding: 10px;
}
.page-contact table.formTable th {
	width: 30%;
	font-weight: normal;
	background: #efefef;
	text-align: left;
}

/* WordPressの画像・埋め込み */
#maincon img { max-width: 100%; height: auto; }
#maincon iframe { max-width: 100%; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

.mobile-title { display: none; }
.nav-toggle {
	display: none;
	background: none;
	border: 1px solid #999;
	border-radius: 4px;
	padding: 6px 12px;
	font-size: 14px;
	color: #333;
	cursor: pointer;
}

/* ---- スマホ・タブレット（旧サイトは固定幅880pxのみだった） ---- */
@media (max-width: 899px) {
	body { margin: 0; }
	#con, #footer, .cta-band { width: auto; }
	.cta-band { margin: 0 16px; }
	.footer-inner { flex-direction: column; padding: 0 16px; }
	#con { padding: 0 16px 32px; }
	#con #subcon, #con #maincon { float: none; width: auto; }
	#con #subcon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid #ddd; }
	#con #subcon .logo { display: none; }
	.mobile-title { display: block; margin: 12px 0; color: #333; text-decoration: none; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 17px; letter-spacing: .08em; }
	#con #subcon ul { width: 100%; padding: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	#con #subcon ul li img { width: 100%; height: auto; }
	#con #subcon .side-shop, #con #subcon h2, #con #subcon h3 { display: none; }
	.nav-toggle { display: block; }
	#con #subcon ul { display: none; }
	#con #subcon.is-open ul { display: grid; }
	#con #maincon { padding-top: 16px; }
	.photoleft, .photoright { float: none; display: block; margin: 0 auto; padding: 0 0 10px; }
	.page-contact #formWrap { width: auto; }
	.page-contact table.formTable input, .page-contact table.formTable textarea { max-width: 100%; box-sizing: border-box; }
}