/*
 * Global Hand Modern - Theme Styles
 *
 * 和モダン / B2B向け高級感 / 余白重視
 * 命名はBEM寄り (block__element--modifier)
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--color-tokoname-red: #9A3F2D;
	--color-washi: #F6F1E8;
	--color-sumi: #1F1C18;
	--color-kiln-gray: #6D6A62;
	--color-indigo-black: #1F3440;
	--color-brass: #B08A45;
	--color-charcoal: #151515;
	--color-white: #FFFFFF;

	--color-tokoname-red-dark: #7E3222;
	--color-line: rgba(109, 106, 98, 0.3);
	--color-text-on-dark: rgba(246, 241, 232, 0.85);

	--font-serif-jp: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
	--font-sans-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', -apple-system, sans-serif;
	--font-serif-en: 'Cormorant Garamond', Georgia, serif;

	--container-width: 1120px;
	--container-narrow: 760px;
	--section-space: 96px;
	--section-space-sp: 56px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--color-washi);
	color: var(--color-sumi);
	font-family: var(--font-sans-jp);
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.03em;
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-serif-jp);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
	margin: 0 0 0.6em;
}

p {
	margin: 0 0 1.5em;
}

a {
	color: var(--color-tokoname-red);
	text-decoration: none;
	transition: color 0.25s ease, opacity 0.25s ease;
}

a:hover,
a:focus {
	color: var(--color-tokoname-red-dark);
}

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

ul,
ol {
	padding-left: 1.4em;
}

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

th,
td {
	border: 1px solid var(--color-line);
	padding: 0.75em 1em;
	text-align: left;
	vertical-align: top;
}

th {
	background-color: rgba(176, 138, 69, 0.08);
	font-weight: 500;
	white-space: nowrap;
}

blockquote {
	margin: 1.5em 0;
	padding: 1em 1.5em;
	border-left: 3px solid var(--color-brass);
	background-color: rgba(255, 255, 255, 0.6);
	color: var(--color-kiln-gray);
}

hr {
	border: 0;
	border-top: 1px solid var(--color-line);
	margin: 2.5em 0;
}

:focus-visible {
	outline: 2px solid var(--color-brass);
	outline-offset: 2px;
}

/* Screen reader text */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 1000;
	background: var(--color-sumi);
	color: var(--color-washi);
	padding: 0.5em 1em;
}

.skip-link:focus {
	top: 8px;
	width: auto;
	height: auto;
	clip: auto;
	color: var(--color-washi);
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.l-container {
	max-width: var(--container-width);
	margin-right: auto;
	margin-left: auto;
	padding-right: 24px;
	padding-left: 24px;
}

.l-container--narrow {
	max-width: var(--container-narrow);
}

.l-section {
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
}

/* ==========================================================================
   4. Components: buttons
   ========================================================================== */

.c-button {
	display: inline-block;
	padding: 0.9em 2.2em;
	font-family: var(--font-sans-jp);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-align: center;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.c-button--primary {
	background-color: var(--color-tokoname-red);
	border-color: var(--color-tokoname-red);
	color: var(--color-washi);
}

.c-button--primary:hover,
.c-button--primary:focus {
	background-color: var(--color-tokoname-red-dark);
	border-color: var(--color-tokoname-red-dark);
	color: var(--color-washi);
}

.c-button--outline {
	background-color: transparent;
	border-color: var(--color-kiln-gray);
	color: var(--color-sumi);
}

.c-button--outline:hover,
.c-button--outline:focus {
	border-color: var(--color-sumi);
	color: var(--color-sumi);
	background-color: rgba(255, 255, 255, 0.6);
}

.c-button--outline-light {
	background-color: transparent;
	border-color: rgba(246, 241, 232, 0.6);
	color: var(--color-washi);
}

.c-button--outline-light:hover,
.c-button--outline-light:focus {
	border-color: var(--color-washi);
	background-color: rgba(246, 241, 232, 0.12);
	color: var(--color-washi);
}

.c-button--brass {
	background-color: transparent;
	border-color: var(--color-brass);
	color: var(--color-brass);
}

.c-button--brass:hover,
.c-button--brass:focus {
	background-color: var(--color-brass);
	color: var(--color-charcoal);
}

/* ==========================================================================
   5. Components: section heading / card / CTA
   ========================================================================== */

.c-section-heading {
	text-align: center;
	margin-bottom: 48px;
}

.c-section-heading--left {
	text-align: left;
}

.c-section-heading__en {
	display: block;
	font-family: var(--font-serif-en);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.35em;
	color: var(--color-brass);
	margin-bottom: 10px;
	text-transform: uppercase;
}

.c-section-heading__title {
	font-size: 2rem;
	margin: 0;
}

.c-section-heading--light .c-section-heading__title {
	color: var(--color-washi);
}

.c-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-line);
	padding: 32px 28px;
}

/* CTA component */
.cta-b2b {
	text-align: center;
}

.cta-b2b--light .cta-b2b__inner {
	background-color: var(--color-white);
	border: 1px solid var(--color-brass);
	padding: 56px 40px;
}

.cta-b2b--dark {
	background-color: var(--color-sumi);
}

.cta-b2b--dark .cta-b2b__inner {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 80px 24px;
}

.cta-b2b__en {
	display: block;
	font-family: var(--font-serif-en);
	font-size: 0.8125rem;
	letter-spacing: 0.35em;
	color: var(--color-brass);
	margin-bottom: 12px;
	text-transform: uppercase;
}

.cta-b2b__title {
	font-family: var(--font-serif-jp);
	font-size: 1.625rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin: 0 0 0.75em;
}

.cta-b2b--dark .cta-b2b__title {
	color: var(--color-washi);
}

.cta-b2b__text {
	color: var(--color-kiln-gray);
	max-width: 640px;
	margin: 0 auto 2em;
}

.cta-b2b--dark .cta-b2b__text {
	color: var(--color-text-on-dark);
}

.cta-b2b__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(246, 241, 232, 0.95);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 76px;
}

.site-branding__link {
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1.3;
	color: var(--color-sumi);
}

.site-branding__mark {
	width: 44px;
	height: auto;
	flex-shrink: 0;
}

.site-branding__text {
	display: flex;
	flex-direction: column;
}

.site-branding__link:hover,
.site-branding__link:focus {
	color: var(--color-sumi);
	opacity: 0.75;
}

.site-branding__name {
	font-family: var(--font-serif-jp);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.site-branding__en {
	font-family: var(--font-serif-en);
	font-size: 0.6875rem;
	color: var(--color-kiln-gray);
	letter-spacing: 0.3em;
	margin-top: 2px;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	display: inline-block;
	font-size: 0.9375rem;
	color: var(--color-sumi);
	padding: 6px 0;
	position: relative;
}

.site-nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-brass);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}

.site-nav__list a:hover::after,
.site-nav__list a:focus::after,
.site-nav__list .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Sub menu (PC) */
.site-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background-color: var(--color-white);
	border: 1px solid var(--color-line);
}

.site-nav__list li {
	position: relative;
}

.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	display: block;
}

.site-nav__list .sub-menu a {
	display: block;
	padding: 8px 20px;
}

.site-nav__list .sub-menu a::after {
	display: none;
}

/* Hamburger (hidden on PC) */
.site-header__toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.site-header__toggle-bar,
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 24px;
	height: 2px;
	margin-left: -12px;
	background-color: var(--color-sumi);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.site-header__toggle-bar {
	top: 50%;
	margin-top: -1px;
}

.site-header__toggle-bar::before {
	top: -8px;
}

.site-header__toggle-bar::after {
	top: 8px;
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bar {
	background-color: transparent;
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bar::before {
	transform: translateY(8px) rotate(45deg);
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bar::after {
	transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   7. Front page
   ========================================================================== */

/* Hero */
.front-hero {
	position: relative;
	background-color: var(--color-charcoal);
	background-size: cover;
	background-position: center;
	color: var(--color-washi);
}

.front-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(21, 21, 21, 0.92) 30%, rgba(21, 21, 21, 0.55) 70%, rgba(21, 21, 21, 0.35) 100%);
}

.front-hero__inner {
	position: relative;
	padding-top: 140px;
	padding-bottom: 140px;
	max-width: var(--container-width);
}

.front-hero__en {
	font-family: var(--font-serif-en);
	font-size: 0.875rem;
	letter-spacing: 0.4em;
	color: var(--color-brass);
	margin-bottom: 20px;
	text-transform: uppercase;
}

.front-hero__title {
	font-size: 3rem;
	font-weight: 600;
	color: var(--color-washi);
	margin-bottom: 0.7em;
}

.front-hero__text {
	max-width: 560px;
	color: var(--color-text-on-dark);
	margin-bottom: 2.5em;
}

.front-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* ヒーロー下端のお知らせバー */
.front-hero--has-news .front-hero__inner {
	padding-bottom: 110px;
}

.front-hero__news {
	position: relative;
	background-color: rgba(21, 21, 21, 0.88);
	border-top: 1px solid rgba(176, 138, 69, 0.45);
}

.front-hero__news-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 60px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.front-hero__news-label {
	flex-shrink: 0;
	font-family: var(--font-serif-en);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.25em;
	color: var(--color-charcoal);
	background-color: var(--color-brass);
	padding: 5px 7px 5px 10px;
}

.front-hero__news-link {
	display: flex;
	align-items: baseline;
	gap: 18px;
	flex: 1;
	min-width: 0;
	color: var(--color-washi);
}

.front-hero__news-link:hover,
.front-hero__news-link:focus {
	color: var(--color-washi);
}

.front-hero__news-date {
	flex-shrink: 0;
	font-family: var(--font-serif-en);
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	color: var(--color-brass);
}

.front-hero__news-title {
	min-width: 0;
	font-size: 0.9375rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
	transition: text-decoration-color 0.25s ease;
}

.front-hero__news-link:hover .front-hero__news-title,
.front-hero__news-link:focus-visible .front-hero__news-title {
	text-decoration-color: var(--color-brass);
}

.front-hero__news-more {
	flex-shrink: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: rgba(246, 241, 232, 0.7);
}

.front-hero__news-more:hover,
.front-hero__news-more:focus {
	color: var(--color-brass);
}

/* About */
.front-about__lead {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 56px;
}

.front-about__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.front-about__item-title {
	font-size: 1.125rem;
	margin-bottom: 0.5em;
}

.front-about__item-text {
	font-size: 0.9375rem;
	color: var(--color-kiln-gray);
	margin: 0;
}

.front-about__more {
	text-align: center;
	margin-top: 48px;
}

/* Tokoname Value */
.front-value {
	position: relative;
	background-color: var(--color-indigo-black);
	background-size: cover;
	background-position: center;
	color: var(--color-text-on-dark);
}

/* パララックス: 背景を固定しスクロールで奥行きを出す */
.front-value--parallax {
	background-attachment: fixed;
}

/* タッチ端末・SPでは background-attachment: fixed が乱れるため通常表示に戻す */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
	.front-value--parallax {
		background-attachment: scroll;
	}
}

/* 視差効果を減らす設定のユーザーにも通常表示 */
@media (prefers-reduced-motion: reduce) {
	.front-value--parallax {
		background-attachment: scroll;
	}
}

/* 背景画像あり: 文字側(右)を濃く、左は写真を見せるグラデーション */
.front-value__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(260deg, rgba(31, 52, 64, 0.94) 30%, rgba(31, 52, 64, 0.6) 65%, rgba(31, 52, 64, 0.25) 100%);
}

.front-value__inner {
	position: relative;
	display: flex;
	justify-content: flex-end;
}

.front-value__body {
	max-width: 620px;
}

.front-value__text {
	margin-bottom: 1.75em;
}

.front-value__features {
	list-style: none;
	padding: 0;
	margin: 0 0 2.5em;
}

.front-value__features li {
	position: relative;
	padding: 0.5em 0 0.5em 1.5em;
	border-bottom: 1px solid rgba(246, 241, 232, 0.15);
}

.front-value__features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.15em;
	width: 10px;
	height: 1px;
	background-color: var(--color-brass);
}

/* Strengths */
.front-strengths__lead {
	text-align: center;
	max-width: 720px;
	margin: -24px auto 48px;
	color: var(--color-kiln-gray);
}

.front-strengths__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.front-strengths__item {
	background-color: var(--color-white);
	border-top: 2px solid var(--color-tokoname-red);
	padding: 28px 22px;
}

.front-strengths__item-title {
	font-size: 1.0625rem;
	margin-bottom: 0.5em;
}

.front-strengths__item-text {
	font-size: 0.875rem;
	color: var(--color-kiln-gray);
	margin: 0;
}

/* Catalog CTA section: spacing handled by l-section */
.front-catalog {
	padding-top: 0;
}

/* News */
.front-news__list {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	border-top: 1px solid var(--color-line);
}

.front-news__item {
	border-bottom: 1px solid var(--color-line);
}

.front-news__link {
	display: flex;
	align-items: baseline;
	gap: 28px;
	padding: 18px 8px;
	color: var(--color-sumi);
	transition: background-color 0.25s ease;
}

.front-news__link:hover,
.front-news__link:focus {
	background-color: rgba(255, 255, 255, 0.7);
	color: var(--color-tokoname-red);
}

.front-news__date {
	font-family: var(--font-serif-en);
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
	color: var(--color-brass);
	white-space: nowrap;
}

.front-news__cat {
	font-size: 0.75rem;
	color: var(--color-kiln-gray);
	border: 1px solid var(--color-line);
	padding: 2px 10px;
	white-space: nowrap;
	align-self: center;
}

.front-news__title {
	font-size: 0.9375rem;
}

.front-news__more {
	text-align: center;
}

/* ==========================================================================
   8. Pages / posts
   ========================================================================== */

.entry__header {
	background-color: var(--color-sumi);
	padding: 72px 0;
	margin-bottom: 56px;
}

.entry__title {
	color: var(--color-washi);
	font-size: 2rem;
	margin: 0;
}

.entry-meta {
	margin-top: 12px;
	color: var(--color-text-on-dark);
	font-size: 0.875rem;
}

.entry__thumbnail {
	margin-bottom: 40px;
	text-align: center;
}

.entry__content {
	padding-bottom: var(--section-space);
}

.entry__content h2 {
	font-size: 1.5rem;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--color-brass);
	margin-top: 2em;
}

.entry__content h3 {
	font-size: 1.25rem;
	padding-left: 0.75em;
	border-left: 3px solid var(--color-tokoname-red);
	margin-top: 1.8em;
}

.entry__pagination {
	margin: 2em 0;
}

.entry__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding-top: 8px;
	padding-bottom: var(--section-space);
}

.entry__nav-prev {
	text-align: left;
}

.entry__nav-next {
	text-align: right;
}

.entry__nav-prev a,
.entry__nav-next a {
	font-size: 0.875rem;
	color: var(--color-kiln-gray);
}

.entry__nav-prev a:hover,
.entry__nav-prev a:focus,
.entry__nav-next a:hover,
.entry__nav-next a:focus {
	color: var(--color-tokoname-red);
}

/* 本文内の画像・figure(はみ出し防止) */
.entry__content figure,
.entry__content .wp-block-image {
	max-width: 100%;
	margin: 2em 0;
}

.entry__content img {
	display: block;
	max-width: 100%;
	height: auto;
}

.entry__content figcaption,
.entry__content .wp-element-caption {
	font-size: 0.8125rem;
	color: var(--color-kiln-gray);
	text-align: center;
	margin-top: 0.6em;
}

/* Gutenberg alignment */
.entry__content .alignwide {
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
}

.entry__content .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.entry__content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.entry__content .wp-block-button__link {
	background-color: var(--color-tokoname-red);
	color: var(--color-washi);
	border-radius: 0;
}

/* Archive / post list */
.archive-header {
	margin-bottom: 48px;
	text-align: center;
}

.archive-header__title {
	font-size: 1.75rem;
}

.archive-header__description {
	color: var(--color-kiln-gray);
}

.post-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.post-list__title {
	font-size: 1.125rem;
	margin-bottom: 0.4em;
}

.post-list__title a {
	color: var(--color-sumi);
}

.post-list__title a:hover,
.post-list__title a:focus {
	color: var(--color-tokoname-red);
}

.post-list__meta {
	font-size: 0.8125rem;
	color: var(--color-kiln-gray);
	margin-bottom: 0.75em;
}

.post-list__excerpt {
	font-size: 0.9375rem;
	color: var(--color-kiln-gray);
}

.post-list__excerpt p {
	margin: 0;
}

.pagination {
	margin-top: 48px;
	text-align: center;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid var(--color-line);
	color: var(--color-sumi);
}

.pagination .page-numbers.current {
	background-color: var(--color-sumi);
	border-color: var(--color-sumi);
	color: var(--color-washi);
}

/* Search form */
.search-form {
	display: flex;
	gap: 8px;
	max-width: 480px;
}

.search-form .search-field {
	flex: 1;
	padding: 0.7em 1em;
	border: 1px solid var(--color-line);
	background-color: var(--color-white);
	font-family: var(--font-sans-jp);
	font-size: 1rem;
}

.search-form .search-submit {
	padding: 0.7em 1.5em;
	background-color: var(--color-sumi);
	color: var(--color-washi);
	border: 0;
	cursor: pointer;
	font-family: var(--font-sans-jp);
}

/* 404 */
.error-404 {
	text-align: center;
}

.error-404__code {
	display: block;
	font-family: var(--font-serif-en);
	font-size: 5rem;
	line-height: 1;
	color: var(--color-brass);
	margin-bottom: 0.2em;
}

.error-404__title {
	font-size: 1.5rem;
}

.error-404__text {
	max-width: 560px;
	margin: 0 auto 2em;
	color: var(--color-kiln-gray);
}

.error-404__buttons {
	margin-bottom: 3em;
}

.error-404__search {
	display: flex;
	justify-content: center;
}

/* ==========================================================================
   8.5 Tokoname page (常滑焼について)
   ========================================================================== */

.tokoname-hero {
	position: relative;
	background-color: var(--color-sumi);
	background-size: cover;
	background-position: center;
}

.tokoname-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(21, 21, 21, 0.55);
}

.tokoname-hero__inner {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 40px;
	min-height: 420px;
	padding-top: 72px;
	padding-bottom: 64px;
}

.tokoname-hero__title {
	order: 2;
	writing-mode: vertical-rl;
	font-size: 2.75rem;
	letter-spacing: 0.3em;
	color: var(--color-washi);
	margin: 0;
	border-right: 1px solid var(--color-brass);
	padding-right: 28px;
	align-self: flex-start;
}

.tokoname-hero__body {
	order: 1;
	align-self: flex-end;
	max-width: 560px;
}

.tokoname-hero__en {
	font-family: var(--font-serif-en);
	font-size: 0.875rem;
	letter-spacing: 0.4em;
	color: var(--color-brass);
	margin-bottom: 14px;
	text-transform: uppercase;
}

.tokoname-hero__lead {
	color: var(--color-text-on-dark);
	margin: 0;
}

/* 透かし漢字: セクションの主題を一字で示す構造装置 */
.tokoname-kanji {
	position: absolute;
	top: -0.08em;
	right: -12px;
	z-index: 0;
	font-family: var(--font-serif-jp);
	font-size: clamp(140px, 20vw, 240px);
	font-weight: 600;
	line-height: 1;
	color: rgba(176, 138, 69, 0.1);
	pointer-events: none;
	user-select: none;
}

.tokoname-kanji--red {
	color: rgba(154, 63, 45, 0.07);
}

.tokoname-kanji--bottom {
	top: auto;
	bottom: -0.12em;
}

.tokoname-origin,
.tokoname-history,
.tokoname-process,
.tokoname-features {
	position: relative;
	overflow: hidden;
}

.tokoname-origin > .l-container,
.tokoname-history > .l-container,
.tokoname-process > .l-container,
.tokoname-features > .l-container {
	position: relative;
}

/* 縦組み英字眉付き見出し */
.c-vhead {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 40px;
}

.c-vhead__en {
	writing-mode: vertical-rl;
	font-family: var(--font-serif-en);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.35em;
	color: var(--color-brass);
	text-transform: uppercase;
	padding-top: 6px;
}

.c-vhead__title {
	font-size: 2rem;
	margin: 0;
}

.c-vhead--light .c-vhead__title {
	color: var(--color-washi);
}

/* 産地背景 */
.tokoname-origin__text {
	max-width: var(--container-narrow);
}

.tokoname-origin__text p {
	margin-bottom: 1.5em;
}

/* 数字は箱に入れず、大きな数字+小さなラベルで直接見せる */
.tokoname-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 24px 56px;
	margin-top: 40px;
	border-top: 1px solid var(--color-line);
	padding-top: 32px;
}

.tokoname-stat__num {
	font-family: var(--font-serif-en);
	font-size: 3rem;
	line-height: 1;
	color: var(--color-tokoname-red);
}

.tokoname-stat__label {
	font-size: 0.8125rem;
	color: var(--color-kiln-gray);
	margin-left: 10px;
}

/* 常滑と急須の歩み(年表) */
.tokoname-history {
	background-color: var(--color-white);
}

.tokoname-history--has-image {
	background-size: cover;
	background-position: center;
}

.tokoname-history__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.tokoname-history__list::before {
	content: '';
	position: absolute;
	left: 150px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background-color: var(--color-line);
}

.tokoname-history__item {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 60px;
	padding: 24px 0;
	position: relative;
}

.tokoname-history__item::before {
	content: '';
	position: absolute;
	left: 146px;
	top: 34px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--color-brass);
}

.tokoname-history__era {
	font-family: var(--font-serif-jp);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-tokoname-red);
	text-align: right;
	padding-top: 2px;
	line-height: 1.6;
}

.tokoname-history__title {
	font-size: 1.125rem;
	margin-bottom: 0.4em;
}

.tokoname-history__text {
	font-size: 0.9375rem;
	color: var(--color-kiln-gray);
	margin: 0;
}

/* 鉄斎の言葉(引用) */
.tokoname-quote {
	background-color: var(--color-sumi);
	padding: 72px 0;
}

.tokoname-quote--has-image {
	position: relative;
	background-size: cover;
	background-position: center;
}

.tokoname-quote--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(21, 21, 21, 0.45);
}

.tokoname-quote--has-image .l-container {
	position: relative;
}

.tokoname-quote__inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
	text-align: center;
}

.tokoname-quote__text {
	font-family: var(--font-serif-jp);
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--color-washi);
	border: 0;
	background: none;
	margin: 0 0 1em;
	padding: 0;
	position: relative;
}

.tokoname-quote__text::after {
	content: '';
	display: block;
	width: 48px;
	height: 1px;
	background-color: var(--color-brass);
	margin: 0.8em auto 0;
}

.tokoname-quote__caption {
	font-size: 0.875rem;
	line-height: 2;
	color: var(--color-text-on-dark);
	text-align: left;
}

/* 手づくりの製造工程(横一列の6ステップ+展開パネル) */
.tokoname-process {
	background-color: var(--color-white);
}

.tokoname-process__steps {
	position: relative;
	display: flex;
	justify-content: space-between;
	max-width: var(--container-narrow);
	margin: 0 auto;
}

.tokoname-process__steps::before {
	content: '';
	position: absolute;
	left: 8%;
	right: 8%;
	top: 26px;
	border-top: 1px solid rgba(176, 138, 69, 0.5);
}

.tokoname-process__step {
	position: relative;
	width: 16%;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: center;
	font-family: var(--font-sans-jp);
}

.tokoname-process__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--color-brass);
	border-radius: 50%;
	background-color: var(--color-white);
	color: var(--color-brass);
	font-family: var(--font-serif-en);
	font-size: 1rem;
	letter-spacing: 0.1em;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.tokoname-process__label {
	display: block;
	margin-top: 10px;
	font-size: 0.875rem;
	color: var(--color-sumi);
	transition: color 0.25s ease;
}

.tokoname-process__step:hover .tokoname-process__circle,
.tokoname-process__step:focus-visible .tokoname-process__circle {
	border-color: var(--color-tokoname-red);
	color: var(--color-tokoname-red);
}

.tokoname-process__step[aria-expanded='true'] .tokoname-process__circle {
	background-color: var(--color-tokoname-red);
	border-color: var(--color-tokoname-red);
	color: var(--color-washi);
}

.tokoname-process__step[aria-expanded='true'] .tokoname-process__label {
	color: var(--color-tokoname-red);
}

.tokoname-process__panels {
	max-width: var(--container-narrow);
	margin: 32px auto 0;
}

.tokoname-process__panel {
	background-color: var(--color-washi);
	border-left: 2px solid var(--color-tokoname-red);
	padding: 24px 28px;
	margin-bottom: 8px;
}

.tokoname-process__panel-title {
	font-size: 1.0625rem;
	margin-bottom: 0.4em;
}

.tokoname-process__panel-num {
	font-family: var(--font-serif-en);
	font-size: 0.9375rem;
	letter-spacing: 0.15em;
	color: var(--color-brass);
	margin-right: 10px;
}

.tokoname-process__panel-text {
	font-size: 0.9375rem;
	color: var(--color-kiln-gray);
	margin: 0;
}

.tokoname-process__note {
	max-width: var(--container-narrow);
	margin: 24px auto 0;
	font-size: 0.8125rem;
	color: var(--color-kiln-gray);
	text-align: center;
}

/* 常滑焼の特徴(朱泥パネル+罫線リスト) */
.tokoname-shudei {
	display: flex;
	background-color: var(--color-white);
	border: 1px solid var(--color-line);
}

.tokoname-shudei__panel {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background-color: var(--color-tokoname-red);
	color: var(--color-washi);
	padding: 48px 24px;
}

.tokoname-shudei__title {
	writing-mode: vertical-rl;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	color: var(--color-washi);
	margin: 0;
}

.tokoname-shudei__en {
	font-family: var(--font-serif-en);
	font-size: 0.75rem;
	letter-spacing: 0.35em;
	color: rgba(246, 241, 232, 0.7);
}

.tokoname-features__list {
	flex: 1;
	margin: 0;
	padding: 16px 40px;
}

.tokoname-features__row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 24px;
	padding: 24px 8px;
	border-bottom: 1px solid var(--color-line);
}

.tokoname-features__row:last-child {
	border-bottom: 0;
}

.tokoname-features__title {
	font-family: var(--font-serif-jp);
	font-size: 1.0625rem;
	font-weight: 600;
	position: relative;
	padding-left: 20px;
}

.tokoname-features__title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 12px;
	height: 1px;
	background-color: var(--color-brass);
}

.tokoname-features__text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--color-kiln-gray);
}

/* 工芸品としての価値 */
.tokoname-craft {
	background-color: var(--color-indigo-black);
	color: var(--color-text-on-dark);
}

.tokoname-craft__body {
	max-width: var(--container-narrow);
}

.tokoname-craft__text {
	margin-bottom: 2em;
}

.tokoname-craft__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tokoname-craft__list li {
	position: relative;
	padding: 0.6em 0 0.6em 1.5em;
	border-bottom: 1px solid rgba(246, 241, 232, 0.15);
}

.tokoname-craft__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.25em;
	width: 10px;
	height: 1px;
	background-color: var(--color-brass);
}

.tokoname-extra {
	padding-top: 0;
}

.tokoname-extra .entry__content {
	padding-bottom: 0;
}

/* スクロールリビール(JSが body に has-reveal を付与した場合のみ有効) */
@media (prefers-reduced-motion: no-preference) {

	.has-reveal [data-reveal] {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.has-reveal [data-reveal].is-visible {
		opacity: 1;
		transform: none;
	}

	/* 年表は項目が順に現れる */
	.has-reveal [data-reveal] .tokoname-history__item {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.55s ease, transform 0.55s ease;
	}

	.has-reveal [data-reveal].is-visible .tokoname-history__item {
		opacity: 1;
		transform: none;
	}

	.has-reveal [data-reveal].is-visible .tokoname-history__item:nth-child(2) {
		transition-delay: 0.15s;
	}

	.has-reveal [data-reveal].is-visible .tokoname-history__item:nth-child(3) {
		transition-delay: 0.3s;
	}

	.has-reveal [data-reveal].is-visible .tokoname-history__item:nth-child(4) {
		transition-delay: 0.45s;
	}

	.has-reveal [data-reveal].is-visible .tokoname-history__item:nth-child(5) {
		transition-delay: 0.6s;
	}
}

/* ==========================================================================
   8.6 Company page (会社案内)
   ========================================================================== */

.c-page-hero {
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-line);
	text-align: center;
	padding: 88px 0 64px;
}

.c-page-hero__en {
	font-family: var(--font-serif-en);
	font-size: 0.875rem;
	letter-spacing: 0.4em;
	color: var(--color-brass);
	margin-bottom: 14px;
	text-transform: uppercase;
}

.c-page-hero__title {
	font-size: 2.25rem;
	margin-bottom: 0.5em;
}

.c-page-hero__title::after {
	content: '';
	display: block;
	width: 48px;
	height: 1px;
	background-color: var(--color-brass);
	margin: 0.6em auto 0;
}

.c-page-hero__lead {
	color: var(--color-kiln-gray);
	margin: 0;
}

/* 企業概要 */
.company-profile__table {
	width: 100%;
	border-collapse: collapse;
}

.company-profile__table th,
.company-profile__table td {
	border: 0;
	border-bottom: 1px solid var(--color-line);
	background: transparent;
	padding: 1.1em 0.5em;
	vertical-align: top;
	text-align: left;
}

.company-profile__table th {
	width: 200px;
	font-weight: 500;
	color: var(--color-kiln-gray);
	white-space: nowrap;
}

/* 私たちの強み */
.company-strengths {
	background-color: var(--color-white);
}

.company-strengths__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.company-strengths__item {
	background-color: var(--color-washi);
}

.company-strengths__num {
	display: block;
	font-family: var(--font-serif-en);
	font-size: 1.125rem;
	letter-spacing: 0.2em;
	color: var(--color-brass);
	margin-bottom: 12px;
}

.company-strengths__title {
	font-size: 1.125rem;
	margin-bottom: 0.5em;
}

.company-strengths__text {
	font-size: 0.9375rem;
	color: var(--color-kiln-gray);
	margin: 0;
}

/* 取扱領域 */
.company-domains__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.company-domains__item {
	background-color: var(--color-white);
	border-top: 2px solid var(--color-brass);
	padding: 26px 22px;
}

.company-domains__title {
	font-size: 1.0625rem;
	margin-bottom: 0.5em;
}

.company-domains__text {
	font-size: 0.875rem;
	color: var(--color-kiln-gray);
	margin: 0;
}

.company-domains__note {
	text-align: center;
	font-size: 0.8125rem;
	color: var(--color-kiln-gray);
	margin: 28px 0 0;
}

/* 代表メッセージ */
.company-message {
	background-color: var(--color-indigo-black);
	color: var(--color-text-on-dark);
}

.company-message__catch {
	font-family: var(--font-serif-jp);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--color-washi);
	margin-bottom: 1.2em;
}

.company-message__text p {
	margin-bottom: 1.5em;
}

.company-message__sign {
	text-align: right;
	margin: 2em 0 0;
	color: var(--color-washi);
}

.company-message__sign-role {
	font-size: 0.8125rem;
	color: var(--color-text-on-dark);
	margin-right: 12px;
}

.company-message__sign-name {
	font-family: var(--font-serif-jp);
	font-size: 1.25rem;
	letter-spacing: 0.15em;
}

.company-extra {
	padding-top: 0;
}

.company-extra .entry__content {
	padding-bottom: 0;
}

/* ==========================================================================
   8.7 Catalog guide page (カタログ案内)
   ========================================================================== */

.guide-about__subtitle {
	font-size: 1.0625rem;
	margin-top: 2em;
}

.guide-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0 0 2.5em;
	padding: 0;
}

.guide-categories__item {
	border: 1px solid var(--color-brass);
	color: var(--color-sumi);
	background-color: var(--color-white);
	font-size: 0.875rem;
	padding: 0.45em 1.2em;
}

.guide-about__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
}

/* ご利用の流れ */
.guide-flow {
	background-color: var(--color-white);
}

.guide-flow__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--container-narrow);
	margin-left: auto;
	margin-right: auto;
}

.guide-flow__steps::before {
	content: '';
	position: absolute;
	left: 12%;
	right: 12%;
	top: 26px;
	border-top: 1px solid rgba(176, 138, 69, 0.5);
}

.guide-flow__steps--three {
	grid-template-columns: repeat(3, 1fr);
}

.guide-flow__step {
	position: relative;
	text-align: center;
}

.guide-flow__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--color-brass);
	border-radius: 50%;
	background-color: var(--color-white);
	color: var(--color-brass);
	font-family: var(--font-serif-en);
	font-size: 1rem;
	letter-spacing: 0.1em;
}

.guide-flow__title {
	font-size: 1rem;
	margin: 12px 0 0.4em;
}

.guide-flow__text {
	font-size: 0.8125rem;
	color: var(--color-kiln-gray);
	margin: 0;
}

.guide-flow__note {
	max-width: var(--container-narrow);
	margin: 36px auto 0;
	font-size: 0.8125rem;
	color: var(--color-kiln-gray);
	text-align: center;
}

.guide-about__types {
	list-style: none;
	margin: 1.5em 0 2em;
	padding: 0;
}

.guide-about__types li {
	position: relative;
	padding: 0.5em 0 0.5em 1.5em;
	border-bottom: 1px solid var(--color-line);
	font-size: 0.9375rem;
	color: var(--color-kiln-gray);
}

.guide-about__types li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.15em;
	width: 10px;
	height: 1px;
	background-color: var(--color-brass);
}

.guide-about__types strong {
	color: var(--color-sumi);
	font-weight: 500;
}

/* メルマガ購読セクション */
.guide-mailmag {
	background-color: var(--color-white);
}

.guide-mailmag__lead {
	text-align: center;
	color: var(--color-kiln-gray);
	max-width: 640px;
	margin: -16px auto 8px;
}

.guide-mailmag .ghmm-form {
	margin-left: auto;
	margin-right: auto;
}

.guide-extra {
	padding-top: 0;
}

.guide-extra .entry__content {
	padding-bottom: 0;
}

/* ==========================================================================
   8.8 Partner login page (取引先ログイン)
   ========================================================================== */

.login-section {
	display: flex;
	align-items: center;
}

.login-card {
	max-width: 480px;
	margin: 0 auto;
	background-color: var(--color-white);
	border: 1px solid var(--color-brass);
	padding: 56px 48px 44px;
	text-align: center;
}

.login-card__brand {
	font-family: var(--font-serif-en);
	font-size: 1rem;
	letter-spacing: 0.3em;
	color: var(--color-sumi);
	margin-bottom: 28px;
}

.login-card__brand::after {
	content: '';
	display: block;
	width: 32px;
	height: 1px;
	background-color: var(--color-brass);
	margin: 14px auto 0;
}

.login-card__en {
	font-family: var(--font-serif-en);
	font-size: 0.75rem;
	letter-spacing: 0.35em;
	color: var(--color-brass);
	margin-bottom: 8px;
	text-transform: uppercase;
}

.login-card__title {
	font-size: 1.5rem;
	margin-bottom: 0.8em;
}

.login-card__text {
	font-size: 0.875rem;
	color: var(--color-kiln-gray);
	text-align: left;
	margin-bottom: 1.5em;
}

.login-card__error {
	background-color: rgba(154, 63, 45, 0.08);
	border-left: 2px solid var(--color-tokoname-red);
	color: var(--color-tokoname-red);
	font-size: 0.8125rem;
	text-align: left;
	padding: 0.9em 1.2em;
	margin-bottom: 1.5em;
}

.login-card__success {
	background-color: rgba(176, 138, 69, 0.1);
	border-left: 2px solid var(--color-brass);
	color: var(--color-sumi);
	font-size: 0.8125rem;
	text-align: left;
	padding: 0.9em 1.2em;
	margin-bottom: 1.5em;
}

/* wp_login_form() の出力を整える */
.login-card__form {
	text-align: left;
}

.login-card__form p {
	margin-bottom: 1.2em;
}

.login-card__form label {
	display: block;
	font-size: 0.8125rem;
	color: var(--color-sumi);
	margin-bottom: 6px;
}

.login-card__form input[type='text'],
.login-card__form input[type='password'] {
	width: 100%;
	padding: 0.8em 1em;
	border: 1px solid var(--color-line);
	background-color: var(--color-washi);
	font-family: var(--font-sans-jp);
	font-size: 1rem;
	transition: border-color 0.25s ease;
}

.login-card__form input[type='text']:focus,
.login-card__form input[type='password']:focus {
	outline: none;
	border-color: var(--color-brass);
	background-color: var(--color-white);
}

.login-card__form .login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--color-kiln-gray);
	margin: 0;
}

.login-card__form .login-remember input {
	accent-color: var(--color-tokoname-red);
}

.login-card__form .login-submit {
	margin: 1.6em 0 0;
}

.login-card__form input[type='submit'] {
	width: 100%;
	padding: 1em;
	background-color: var(--color-tokoname-red);
	border: 1px solid var(--color-tokoname-red);
	color: var(--color-washi);
	font-family: var(--font-sans-jp);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.login-card__form input[type='submit']:hover,
.login-card__form input[type='submit']:focus {
	background-color: var(--color-tokoname-red-dark);
}

.login-card__links {
	list-style: none;
	margin: 2em 0 0;
	padding: 1.5em 0 0;
	border-top: 1px solid var(--color-line);
	display: grid;
	gap: 10px;
}

.login-card__links a {
	font-size: 0.8125rem;
	color: var(--color-kiln-gray);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.login-card__links a:hover,
.login-card__links a:focus {
	color: var(--color-tokoname-red);
}

.login-card__actions {
	display: grid;
	gap: 12px;
	margin-top: 1.5em;
}

/* ==========================================================================
   8.9 Contact page (お問い合わせ)
   ========================================================================== */

.contact-layout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 56px;
	align-items: start;
}

.contact-form-area__title {
	font-size: 1.375rem;
	padding-bottom: 0.5em;
	border-bottom: 1px solid var(--color-brass);
	margin-bottom: 0.8em;
}

.contact-form-area__lead {
	font-size: 0.875rem;
	color: var(--color-kiln-gray);
	margin-bottom: 1.6em;
}

.contact-form-area__fallback {
	background-color: var(--color-white);
	border: 1px solid var(--color-line);
	padding: 32px 28px;
	color: var(--color-kiln-gray);
}

.contact-form-area__admin-note {
	font-size: 0.8125rem;
	border-top: 1px dashed var(--color-line);
	padding-top: 1em;
	margin-bottom: 0;
}

/* フォーム部品をテーマの意匠に揃える(Contact Form 7 等) */
.contact-form-area input[type='text'],
.contact-form-area input[type='email'],
.contact-form-area input[type='tel'],
.contact-form-area input[type='url'],
.contact-form-area select,
.contact-form-area textarea {
	width: 100%;
	padding: 0.8em 1em;
	border: 1px solid var(--color-line);
	background-color: var(--color-white);
	font-family: var(--font-sans-jp);
	font-size: 1rem;
	transition: border-color 0.25s ease;
}

.contact-form-area input:focus,
.contact-form-area select:focus,
.contact-form-area textarea:focus {
	outline: none;
	border-color: var(--color-brass);
}

.contact-form-area label {
	display: block;
	font-size: 0.875rem;
	margin-bottom: 6px;
}

.contact-form-area p {
	margin-bottom: 1.3em;
}

.contact-form-area input[type='submit'],
.contact-form-area button[type='submit'] {
	display: inline-block;
	min-width: 240px;
	padding: 1em 2.2em;
	background-color: var(--color-tokoname-red);
	border: 1px solid var(--color-tokoname-red);
	color: var(--color-washi);
	font-family: var(--font-sans-jp);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.contact-form-area input[type='submit']:hover,
.contact-form-area input[type='submit']:focus,
.contact-form-area button[type='submit']:hover,
.contact-form-area button[type='submit']:focus {
	background-color: var(--color-tokoname-red-dark);
}

/* WPForms(スタイルなしモード)をテーマの意匠に揃える */
.contact-form-area .wpforms-field {
	margin-bottom: 1.3em;
}

.contact-form-area .wpforms-field-label {
	display: block;
	font-size: 0.875rem;
	margin-bottom: 6px;
}

/* 必須バッジ */
.contact-form-area .wpforms-required-label {
	display: inline-block;
	background-color: var(--color-tokoname-red);
	color: var(--color-washi);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	padding: 4px 8px;
	margin-left: 8px;
	vertical-align: 2px;
}

.contact-form-area .wpforms-field-description {
	font-size: 0.75rem;
	color: var(--color-kiln-gray);
	margin-top: 4px;
}

.contact-form-area textarea {
	min-height: 180px;
	resize: vertical;
}

.contact-form-area .wpforms-field ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-form-area .wpforms-field ul li {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.contact-form-area .wpforms-field ul li label {
	display: inline;
	margin: 0;
}

.contact-form-area input[type='checkbox'],
.contact-form-area input[type='radio'] {
	accent-color: var(--color-tokoname-red);
}

.contact-form-area em.wpforms-error,
.contact-form-area label.wpforms-error {
	display: block;
	color: var(--color-tokoname-red);
	font-size: 0.8125rem;
	font-style: normal;
	margin-top: 6px;
}

.contact-form-area .wpforms-submit-container {
	margin-top: 1.6em;
}

.contact-form-area .wpforms-confirmation-container-full {
	background-color: var(--color-white);
	border: 1px solid var(--color-brass);
	border-left-width: 3px;
	padding: 28px 24px;
}

.contact-form-area .wpforms-confirmation-container-full p:last-child {
	margin-bottom: 0;
}

/* 連絡先サイドパネル */
.contact-info {
	display: grid;
	gap: 20px;
}

.contact-info__card {
	background-color: var(--color-white);
	border: 1px solid var(--color-line);
	border-top: 2px solid var(--color-brass);
	padding: 26px 24px;
	text-align: center;
}

.contact-info__title {
	font-size: 0.9375rem;
	font-family: var(--font-sans-jp);
	font-weight: 500;
	color: var(--color-kiln-gray);
	margin-bottom: 0.8em;
}

.contact-info__tel {
	display: block;
	font-family: var(--font-serif-en);
	font-size: 1.875rem;
	letter-spacing: 0.05em;
	color: var(--color-sumi);
	line-height: 1.3;
}

.contact-info__tel:hover,
.contact-info__tel:focus {
	color: var(--color-tokoname-red);
}

.contact-info__mail {
	display: block;
	font-size: 1.0625rem;
	color: var(--color-tokoname-red);
	word-break: break-all;
}

.contact-info__note {
	font-size: 0.75rem;
	color: var(--color-kiln-gray);
	margin: 0.6em 0 0;
}

.contact-info__card--flow {
	text-align: left;
}

.contact-info__card--flow .contact-info__title {
	text-align: center;
}

.contact-info__flow {
	list-style: none;
	counter-reset: ghm-flow;
	margin: 0;
	padding: 0;
}

.contact-info__flow li {
	counter-increment: ghm-flow;
	position: relative;
	font-size: 0.875rem;
	padding: 0.6em 0 0.6em 2.2em;
	border-bottom: 1px solid rgba(109, 106, 98, 0.15);
}

.contact-info__flow li:last-child {
	border-bottom: 0;
}

.contact-info__flow li::before {
	content: counter(ghm-flow, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.7em;
	font-family: var(--font-serif-en);
	font-size: 0.8125rem;
	color: var(--color-brass);
	letter-spacing: 0.1em;
}

/* ==========================================================================
   8.10 Newsletter form (Newsletterプラグイン)
   ========================================================================== */

.tnp-subscription {
	max-width: 560px;
	background-color: var(--color-white);
	border: 1px solid var(--color-brass);
	padding: 32px 28px;
	margin: 2em 0;
}

.tnp-subscription .tnp-field {
	margin-bottom: 1.2em;
}

.tnp-subscription label {
	display: block;
	font-size: 0.875rem;
	margin-bottom: 6px;
}

.tnp-subscription input[type='email'],
.tnp-subscription input[type='text'] {
	width: 100%;
	padding: 0.8em 1em;
	border: 1px solid var(--color-line);
	background-color: var(--color-washi);
	font-family: var(--font-sans-jp);
	font-size: 1rem;
	transition: border-color 0.25s ease;
}

.tnp-subscription input[type='email']:focus,
.tnp-subscription input[type='text']:focus {
	outline: none;
	border-color: var(--color-brass);
	background-color: var(--color-white);
}

.tnp-subscription .tnp-field-button {
	margin-bottom: 0;
}

.tnp-subscription .tnp-submit {
	width: 100%;
	padding: 1em;
	background-color: var(--color-tokoname-red);
	border: 1px solid var(--color-tokoname-red);
	color: var(--color-washi);
	font-family: var(--font-sans-jp);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.tnp-subscription .tnp-submit:hover,
.tnp-subscription .tnp-submit:focus {
	background-color: var(--color-tokoname-red-dark);
}

/* 登録完了・確認ページのメッセージ */
.tnp-message {
	background-color: var(--color-white);
	border: 1px solid var(--color-brass);
	border-left-width: 3px;
	padding: 24px 28px;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.site-footer {
	background-color: var(--color-charcoal);
	color: var(--color-text-on-dark);
	padding: 64px 0 40px;
	text-align: center;
}

.site-footer__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 32px;
}

.site-footer__mark {
	width: 56px;
	height: auto;
	flex-shrink: 0;
}

.site-footer__brand-text {
	text-align: left;
}

.site-footer__brand-name {
	display: block;
	font-family: var(--font-serif-jp);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--color-washi);
}

.site-footer__brand-en {
	display: block;
	font-family: var(--font-serif-en);
	font-size: 0.75rem;
	color: rgba(246, 241, 232, 0.6);
	letter-spacing: 0.3em;
	margin-top: 6px;
}

.site-footer__nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}

.site-footer__nav-list a {
	color: var(--color-text-on-dark);
	font-size: 0.875rem;
}

.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus {
	color: var(--color-brass);
}

.site-footer__copyright {
	font-size: 0.75rem;
	color: rgba(246, 241, 232, 0.5);
	border-top: 1px solid rgba(246, 241, 232, 0.15);
	padding-top: 24px;
	margin: 0;
}

/* ==========================================================================
   10. Responsive (768px以下でSP最適化)
   ========================================================================== */

@media (max-width: 768px) {

	body {
		font-size: 15px;
	}

	.l-section {
		padding-top: var(--section-space-sp);
		padding-bottom: var(--section-space-sp);
	}

	.l-container {
		padding-right: 20px;
		padding-left: 20px;
	}

	/* Header: hamburger nav */
	.site-header__toggle {
		display: block;
	}

	/* 社名を1行に収める(390px幅で「ド」だけ折り返していた) */
	.site-header__inner {
		gap: 12px;
	}

	.site-branding__link {
		gap: 10px;
	}

	.site-branding__mark {
		width: 38px;
	}

	.site-branding__name {
		font-size: 1rem;
		letter-spacing: 0.06em;
		white-space: nowrap;
	}

	.site-branding__en {
		font-size: 0.625rem;
		letter-spacing: 0.2em;
		white-space: nowrap;
	}

	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color-washi);
		border-bottom: 1px solid var(--color-line);
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 0;
	}

	.site-nav__list a {
		display: block;
		padding: 14px 24px;
	}

	.site-nav__list a::after {
		display: none;
	}

	.site-nav__list .sub-menu {
		display: block;
		position: static;
		border: 0;
		background: transparent;
		padding: 0 0 0 16px;
	}

	/* Hero */
	.front-hero__inner {
		padding-top: 88px;
		padding-bottom: 88px;
	}

	.front-hero__title {
		font-size: 2rem;
	}

	.front-hero__buttons .c-button {
		width: 100%;
	}

	.front-hero--has-news .front-hero__inner {
		padding-bottom: 64px;
	}

	/* SP: 1行目 [NEWS]…[一覧→] / 2行目以降 日付+タイトル(2行まで) */
	.front-hero__news-inner {
		flex-wrap: wrap;
		gap: 8px 12px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.front-hero__news-link {
		order: 3;
		flex-basis: 100%;
		flex-direction: column;
		gap: 2px;
	}

	.front-hero__news-date {
		font-size: 0.8125rem;
	}

	.front-hero__news-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
		line-height: 1.6;
	}

	.front-hero__news-more {
		margin-left: auto;
	}

	/* Grids stack */
	.front-about__grid,
	.front-strengths__grid,
	.post-list {
		grid-template-columns: 1fr;
	}

	.front-strengths__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.c-section-heading__title {
		font-size: 1.5rem;
	}

	.cta-b2b--light .cta-b2b__inner {
		padding: 40px 24px;
	}

	.cta-b2b--dark .cta-b2b__inner {
		padding: 56px 20px;
	}

	.cta-b2b__buttons .c-button {
		width: 100%;
	}

	.entry__header {
		padding: 48px 0;
		margin-bottom: 40px;
	}

	.entry__title {
		font-size: 1.5rem;
	}

	.entry__nav {
		grid-template-columns: 1fr;
	}

	.entry__nav-back {
		order: -1;
	}

	.entry__nav-back .c-button {
		width: 100%;
	}

	.entry__nav-prev,
	.entry__nav-next {
		text-align: center;
	}

	.front-news__link {
		flex-direction: column;
		gap: 4px;
		padding: 14px 4px;
	}

	/* Tokoname page */
	.tokoname-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
		gap: 24px;
		padding-top: 56px;
		padding-bottom: 56px;
	}

	/* SPでは縦書きをやめて読みやすさ優先 */
	.tokoname-hero__title {
		order: 1;
		writing-mode: horizontal-tb;
		font-size: 1.75rem;
		letter-spacing: 0.15em;
		border-right: 0;
		border-left: 2px solid var(--color-brass);
		padding: 0 0 0 16px;
	}

	.tokoname-hero__body {
		order: 2;
	}

	.c-vhead {
		flex-direction: column;
		gap: 8px;
		margin-bottom: 28px;
	}

	.c-vhead__en {
		writing-mode: horizontal-tb;
		padding-top: 0;
	}

	.c-vhead__title {
		font-size: 1.5rem;
	}

	.tokoname-stats {
		gap: 16px 28px;
		margin-top: 28px;
		padding-top: 24px;
	}

	.tokoname-stat__num {
		font-size: 2rem;
	}

	.tokoname-process__steps {
		flex-wrap: wrap;
		gap: 20px 0;
	}

	.tokoname-process__steps::before {
		display: none;
	}

	.tokoname-process__step {
		width: 33.33%;
	}

	.tokoname-shudei {
		flex-direction: column;
	}

	.tokoname-shudei__panel {
		flex-basis: auto;
		flex-direction: row;
		gap: 14px;
		padding: 20px;
	}

	.tokoname-shudei__title {
		writing-mode: horizontal-tb;
		font-size: 1.25rem;
	}

	.tokoname-features__list {
		padding: 4px 20px;
	}

	/* Company page */
	.c-page-hero {
		padding: 56px 0 44px;
	}

	.c-page-hero__title {
		font-size: 1.625rem;
	}

	.company-profile__table th,
	.company-profile__table td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
	}

	.company-profile__table th {
		padding-top: 1em;
		font-size: 0.8125rem;
	}

	.company-profile__table td {
		padding: 0.2em 0 1em;
		border-bottom: 1px solid var(--color-line);
	}

	.company-strengths__grid,
	.company-domains__grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.company-message__catch {
		font-size: 1.25rem;
	}

	/* Catalog guide page */
	.guide-flow__steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 16px;
	}

	.guide-flow__steps::before {
		display: none;
	}

	.guide-about__buttons .c-button {
		width: 100%;
	}

	/* Login page */
	.login-card {
		padding: 36px 24px 32px;
	}

	/* Contact page */
	.contact-layout__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.contact-form-area input[type='submit'],
	.contact-form-area button[type='submit'] {
		width: 100%;
	}

	.tokoname-features__row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 16px 0;
	}

	/* 年表: 背景画像上でも読みやすいよう薄い生成りを重ねる */
	.tokoname-history--has-image {
		position: relative;
	}

	.tokoname-history--has-image::before {
		content: '';
		position: absolute;
		inset: 0;
		background-color: rgba(246, 241, 232, 0.6);
	}

	.tokoname-history--has-image .l-container {
		position: relative;
	}

	/* 年表: 左レール型に */
	.tokoname-history__list::before {
		left: 4px;
	}

	.tokoname-history__item {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 18px 0 18px 24px;
	}

	.tokoname-history__item::before {
		left: 0;
		top: 26px;
	}

	.tokoname-history__era {
		text-align: left;
		padding-top: 0;
	}

	.tokoname-quote {
		padding: 48px 0;
	}

	.tokoname-quote__text {
		font-size: 1.25rem;
	}

	.tokoname-process__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* ==========================================================================
   11. Small phones (360px以下)
   ========================================================================== */

@media (max-width: 360px) {

	.site-branding__name {
		font-size: 0.875rem;
		letter-spacing: 0.02em;
	}

	.site-branding__en {
		letter-spacing: 0.12em;
	}
}