@charset "utf-8";

/*
 * modern_theme.css — サイト全体モダンテーマ
 *
 * 1. CSS変数
 * 2. 共通レイアウト（header / menu / footer / menubar）
 * 3. トップページ（body.home）
 * 4. 社歌エリア（.song-area）
 * 5. サブページ共通（背景・main・page-hero・見出し）
 * 6. ギャラリー（body.gallery-page）
 * 7. 各ページ固有（article / shopping / contact / company）
 * 8. ユーティリティ（画像拡大・基板エフェクト）
 * 9. レスポンシブ
 */

/* サイト全体テーマ — オレンジ差し色グラデーション */

:root {
	--color-csr: #2d9a8a;
	--color-gallery: #f5b040;
	--color-body-text: #e0e4ec;
	--color-body-text-muted: #d0d6e2;
	--gradient-accent-line: linear-gradient(
		90deg,
		transparent 0%,
		rgba(223, 112, 3, 0.4) 15%,
		#f09030 35%,
		#df7003 50%,
		#f09030 65%,
		rgba(223, 112, 3, 0.4) 85%,
		transparent 100%
	);
	--gradient-footer-main: linear-gradient(155deg, #3d3d4c 0%, #40404F 30%, #453a32 65%, #3a3028 100%);
	--gradient-menu-light: linear-gradient(180deg, #ffffff 0%, #faf8f5 55%, #f3f0eb 100%);
	--pagetop-reserve: 92px; /* 上に戻るボタン（60px + 右20px + 余白12px） */
}

/* ヘッダー — フッターと同系配色 */
header {
	position: relative;
	background:
		radial-gradient(ellipse 100% 70% at 50% 110%, rgba(223, 112, 3, 0.35) 0%, transparent 58%),
		var(--gradient-footer-main) !important;
}

header::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-accent-line);
	z-index: 2;
	pointer-events: none;
}

/* トップページ — ロゴと重なるためアクセントラインを非表示 */
.home header::after {
	content: none;
}

/* トップページ — はみ出すロゴがメニューより前面に来るよう */
.home header {
	z-index: 2;
}

body.home header #logo {
	container-type: inline-size;
	aspect-ratio: 1;
	overflow: visible;
}

body.home header #logo a {
	display: block;
	position: absolute;
	inset: 0;
	cursor: pointer;
}

body.home header #logo a img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

body.home header #logo .logo-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	font-size: 24cqw;
	font-weight: 700;
	line-height: 1;
	color: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	-webkit-text-stroke: 1.8cqw #fff;
	paint-order: stroke fill;
	text-shadow: none;
	user-select: none;
}

body.home header #logo .logo-nav--next {
	left: auto;
	right: 0;
	transform: translate(calc(50% + 10px), -50%);
}

@media (hover: hover) {
	body.home header #logo a:hover .logo-nav {
		opacity: 1;
		pointer-events: auto;
	}

	body.home header #logo a:hover .logo-nav--next {
		transform: translate(calc(50% + 12px), -50%);
	}

	body.home header #logo .logo-nav:hover {
		opacity: 1;
	}
}

/* サブメニュー — 全ページ共通ライト配色・下端のみグラデーションで本編と分界 */
#header-menu {
	position: relative;
	background: var(--gradient-menu-light);
	border-bottom: none;
	padding-bottom: 10px;
}

#header-menu::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 12px;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 0%, #16181f 100%);
}

/* 上部メニュー — CSR・Gallery・お問い合わせ（6項目レイアウト） */
#header-menu ul li:nth-of-type(4) a {
	border-bottom-color: var(--color-csr);
	color: var(--color-csr);
}

#header-menu ul li:nth-of-type(5) a {
	border-bottom-color: var(--color-gallery);
	color: var(--color-gallery);
}

#header-menu ul li:nth-of-type(6) a {
	border-bottom-color: #50a53a;
	color: #50a53a;
}

/* 上部メニュー — スマホ（3列×2行・アイコン上） */
@media screen and (max-width: 600px) {
	#header-menu ul {
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 4px;
		font-size: 0.65em;
	}

	#header-menu ul li {
		flex: 0 0 33.333%;
		max-width: 33.333%;
		margin-right: 0;
		min-width: 0;
	}

	#header-menu ul li a {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 10px 2px 12px;
		line-height: 1.2;
		white-space: nowrap;
	}

	#header-menu i {
		font-size: 1.5em;
		order: -1;
	}
}

/* フッターメニュー — ダークベースにオレンジの差し色 */
#footermenu {
	position: relative;
	padding: 6px calc(12px + var(--pagetop-reserve)) 6px 12px !important;
	background:
		radial-gradient(ellipse 100% 70% at 50% -30%, rgba(223, 112, 3, 0.4) 0%, transparent 58%),
		var(--gradient-footer-main);
	color: #b0b0bc;
	border-top: none;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

#footermenu::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-accent-line);
}

#footermenu a {
	color: #a8a8b8;
	transition: color 0.25s ease;
}

#footermenu a:hover {
	color: #f09030;
}

/* フッターメニュー — アイコン化 */
#footermenu .socialEffect_box {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0;
}

#footermenu .socialEffect_box li {
	margin: 0;
	padding: 4px 8px;
}

#footermenu .socialEffect_link {
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 1.1rem;
	margin: 0;
}

#footermenu .footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

#footermenu .footer-nav li {
	flex: 1 1 0;
	min-width: 52px;
	max-width: 104px;
	margin: 0;
	padding: 0;
}

#footermenu .footer-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 2px;
	text-decoration: none;
	border-radius: 6px;
	transition: background 0.2s ease, color 0.25s ease;
}

#footermenu .footer-nav i {
	font-size: 1.5em;
	line-height: 1;
}

#footermenu .footer-nav span {
	font-size: 0.6em;
	line-height: 1.15;
}

#footermenu .footer-nav li:nth-of-type(1) a { color: #c8c8d4; }
#footermenu .footer-nav li:nth-of-type(2) a { color: #df7003; }
#footermenu .footer-nav li:nth-of-type(3) a { color: #e85496; }
#footermenu .footer-nav li:nth-of-type(4) a { color: #248bda; }
#footermenu .footer-nav li:nth-of-type(7) a { color: #50a53a; }
#footermenu .footer-nav li.footer-nav-item--csr a { color: var(--color-csr); }
#footermenu .footer-nav li.footer-nav-item--gallery a { color: var(--color-gallery); }

#footermenu .footer-nav a:hover {
	background: rgba(223, 112, 3, 0.1);
	color: #f09030;
	opacity: 1;
}

/* トップページ — SNSをナビアイコンの左に横並び */
body.home #footermenu {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 6px calc(10px + var(--pagetop-reserve)) 6px 10px !important;
	gap: 10px;
}

body.home #footermenu .socialEffect_box {
	width: auto;
	flex-shrink: 0;
	justify-content: flex-start;
	flex-wrap: nowrap;
	margin: 0;
}

body.home #footermenu .footer-nav {
	flex: 1;
	width: auto;
	min-width: 0;
	justify-content: flex-end;
	flex-wrap: nowrap;
	margin: 0;
}

@media screen and (max-width: 600px) {
	body.home #footermenu {
		flex-wrap: wrap;
		justify-content: center;
	}

	body.home #footermenu .socialEffect_box,
	body.home #footermenu .footer-nav {
		margin: 0;
		justify-content: center;
		flex-wrap: wrap;
	}

	body.home #footermenu .footer-nav {
		width: 100%;
	}
}

/* コピーライトフッター */
footer {
	position: relative;
	background:
		radial-gradient(ellipse 90% 80% at 50% 110%, rgba(223, 112, 3, 0.22) 0%, transparent 55%),
		linear-gradient(180deg, #32323c 0%, #2a2520 45%, #1f1a16 100%);
	color: #9090a0;
	border-top: 1px solid rgba(223, 112, 3, 0.15);
}

footer a {
	color: #a8a8b8;
	transition: color 0.25s ease;
}

footer a:hover {
	color: #f09030;
}

/* ケバブメニュー — フッター同系デザイン */
#menubar {
	background:
		radial-gradient(ellipse 100% 70% at 50% -30%, rgba(223, 112, 3, 0.4) 0%, transparent 58%),
		var(--gradient-footer-main);
	color: #b0b0bc;
	box-shadow: 0 0 32px rgba(0, 0, 0, 0.45);
	border-right: 1px solid rgba(223, 112, 3, 0.12);
}

#menubar::before {
	content: "";
	position: absolute;
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-accent-line);
	z-index: 1;
	pointer-events: none;
}

#menubar a {
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: color 0.25s ease, background 0.2s ease;
}

#menubar a:hover {
	color: #fff;
	background: rgba(223, 112, 3, 0.25);
}

#menubar_hdr {
	background:
		radial-gradient(ellipse 100% 80% at 50% 110%, rgba(223, 112, 3, 0.35) 0%, transparent 58%),
		var(--gradient-footer-main);
	color: #fff;
	border-bottom: 1px solid rgba(223, 112, 3, 0.15);
}

#menubar_hdr::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-accent-line);
	pointer-events: none;
}

#menubar_hdr:hover {
	filter: brightness(1.08);
}

/* トップ以外 — ケバブメニューの高さをヘッダーロゴに合わせる */
body:not(.home) header {
	min-height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
}

body:not(.home) #menubar_hdr {
	transform: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 45px;
	width: 56px;
	padding: 0;
	border-bottom: none;
}

body:not(.home) #menubar_hdr::after {
	content: none;
}

body:not(.home) #menubar_hdr.ham::after {
	content: "";
}

body:not(.home) #menubar_hdr div {
	width: 22px;
	height: 16px;
	margin: 0;
}

body:not(.home) #menubar_hdr span {
	border-top-width: 2px;
}

body:not(.home) #menubar_hdr.ham span:nth-of-type(1),
body:not(.home) #menubar_hdr.ham span:nth-of-type(3) {
	width: 28px;
}

body:not(.home) #menubar_hdr.ham span:nth-of-type(1) {
	transform: rotate(45deg) translate(4px, 9px);
}

body:not(.home) #menubar_hdr.ham span:nth-of-type(3) {
	transform: rotate(-45deg) translate(4px, -9px);
}

body:not(.home) #menubar {
	padding-top: 45px;
}

@media screen and (min-width: 900px) {
	body:not(.home) header {
		min-height: 75px;
	}

	body:not(.home) #menubar_hdr {
		height: 75px;
		width: 80px;
	}

	body:not(.home) #menubar_hdr div {
		width: 30px;
		height: 30px;
	}

	body:not(.home) #menubar_hdr span {
		border-top-width: 3px;
	}

	body:not(.home) #menubar_hdr.ham span:nth-of-type(1),
	body:not(.home) #menubar_hdr.ham span:nth-of-type(3) {
		width: 40px;
	}

	body:not(.home) #menubar_hdr.ham span:nth-of-type(1) {
		transform: rotate(45deg) translate(6px, 13px);
	}

	body:not(.home) #menubar_hdr.ham span:nth-of-type(3) {
		transform: rotate(-45deg) translate(6px, -13px);
	}

	body:not(.home) #menubar {
		padding-top: 75px;
	}
}

/* トップページ — ダークテーマ */
body.home {
	background: #16181f;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
	background-size: 32px 32px;
	color: var(--color-body-text);
	min-height: 100vh;
}

body.home #container {
	background: transparent;
}

body.home main,
body.home main > section {
	background: transparent;
	color: var(--color-body-text);
}

/* main 背景基板エフェクト（js/main_particles.js） */
main.main-particles-enabled {
	position: relative;
	isolation: isolate;
}

main.main-particles-enabled .main-particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	opacity: 1;
	mix-blend-mode: screen;
}

main.main-particles-enabled > *:not(.main-particles) {
	position: relative;
	z-index: 1;
}

body.home main h2 {
	color: #eeeeee;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	letter-spacing: 0.05em;
}

body.home main h2 i {
	margin-right: 0.3em;
	color: #df7003;
}

body.home main h2 span {
	color: #df7003;
}

body.home .bg1 {
	background: transparent !important;
	color: var(--color-body-text);
}

body.home main p,
body.home table {
	color: var(--color-body-text-muted);
}

body.home main a {
	color: #f09030;
}

body.home main a:hover {
	color: #f5c070;
	opacity: 1;
}

body.home hr {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.home .ta1 {
	border-top-color: rgba(255, 255, 255, 0.1);
	margin-bottom: 10px;
}

body.home .ta1 caption {
	background: rgba(223, 112, 3, 0.12);
	border-color: rgba(223, 112, 3, 0.45);
	color: #f09030;
	margin-bottom: 6px;
}

body.home .ta1 tr {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.home .list,
body.home .list-square {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* お品書き — 角丸 */
body.home .list {
	border-radius: 12px;
	overflow: visible;
}

body.home .list figure {
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}

body.home .list figure img {
	display: block;
	width: 100%;
}

body.home .list h4,
body.home .list-square h4 {
	color: #f4f5f7;
}

body.home .list h4 i {
	color: #df7003;
}

body.home .list p,
body.home .list-square p {
	color: var(--color-body-text-muted);
}

body.home .list .icon,
body.home .list-square .icon {
	background: #a83838;
	color: #f8f8f8;
	font-weight: 700;
	font-size: 0.66em;
	letter-spacing: 0.03em;
	line-height: 1.25;
	border: 2px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	text-shadow: none;
	width: 60px;
	height: 60px;
	left: -10px;
	top: -10px;
	z-index: 2;
	transform: none;
	transition:
		background 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

body.home .list:hover .icon,
body.home .list-square:hover .icon {
	font-size: 0.66em;
	width: 60px;
	height: 60px;
	left: -10px;
	top: -10px;
	transform: none;
	background: #963232;
	border-color: rgba(255, 255, 255, 0.65);
	box-shadow:
		0 0 0 1px rgba(223, 112, 3, 0.4),
		0 6px 16px rgba(0, 0, 0, 0.24);
}

/* 具現堂なら可能です — 摺りガラスカード */
body.home main > section.bg1:has(.list-square) .list-container {
	align-items: stretch;
	row-gap: 22px;
}

body.home .list-square {
	border-radius: 14px;
	overflow: visible;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition:
		transform 0.28s ease,
		box-shadow 0.28s ease,
		border-color 0.28s ease;
}

body.home .list-square:hover {
	transform: translateY(-4px);
	border-color: rgba(223, 112, 3, 0.35);
	box-shadow:
		0 12px 32px rgba(0, 0, 0, 0.32),
		0 0 0 1px rgba(223, 112, 3, 0.12);
}

body.home .list-square figure {
	margin: 0;
	display: block;
	overflow: hidden;
	line-height: 0;
	border-radius: 14px;
}

body.home .list-square figure a {
	display: block;
}

body.home .list-square figure img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.45s ease;
}

body.home .list-square:hover figure img {
	transform: scale(1.03);
}

body.home .list-square .text {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background: rgba(22, 24, 31, 0.38);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0 0 14px 14px;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
	padding: 10px 14px 12px;
}

body.home .list-square h4 {
	font-size: 0.8em;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.45;
	margin: 0;
}

body.home .list-square p {
	display: none;
	margin: 0;
	font-size: 0.8em;
	line-height: 1.6;
}

@media screen and (min-width: 900px) {
	body.home .list-square p {
		display: block;
		margin-top: 6px;
		opacity: 0.92;
	}

	body.home .list-square .text {
		padding: 12px 18px 14px;
	}
}

@media screen and (max-width: 899px) {
	body.home .list-square .text {
		padding: 8px 12px 10px;
	}
}

/* トップページ — 更新情報（スクロール） */
body.home .updates-feed {
	max-width: none;
	margin: 0 auto 20px;
	max-height: 800px;
	overflow-y: auto;
	padding: 12px 12px 12px 8px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
	scrollbar-width: thin;
	scrollbar-color: rgba(223, 112, 3, 0.55) rgba(255, 255, 255, 0.05);
}

body.home .updates-feed::-webkit-scrollbar {
	width: 8px;
}

body.home .updates-feed::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 4px;
}

body.home .updates-feed::-webkit-scrollbar-thumb {
	background: rgba(223, 112, 3, 0.5);
	border-radius: 4px;
}

body.home .updates-feed .kobutsu-plate {
	margin-bottom: 0;
}

/* トップページ — お知らせ（スクロール・モダンリスト） */
body.home .news-feed {
	max-width: 880px;
	margin: 0 auto;
	max-height: 350px;
	overflow-y: auto;
	padding: 4px 8px 4px 4px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
	scrollbar-width: thin;
	scrollbar-color: rgba(223, 112, 3, 0.55) rgba(255, 255, 255, 0.05);
}

body.home .news-feed::-webkit-scrollbar {
	width: 8px;
}

body.home .news-feed::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 4px;
}

body.home .news-feed::-webkit-scrollbar-thumb {
	background: rgba(223, 112, 3, 0.5);
	border-radius: 4px;
}

body.home .news-feed .news-item {
	display: block;
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	transition: background 0.2s ease;
}

body.home .news-feed .news-item:last-child {
	border-bottom: none;
}

body.home .news-feed .news-item:hover {
	background: rgba(223, 112, 3, 0.06);
}

body.home .news-feed .news-item dt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	width: auto;
	padding: 0 0 8px;
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #9098a8;
}

body.home .news-feed .news-item dt span {
	display: inline-block;
	width: auto;
	min-width: 6.5em;
	padding: 3px 10px;
	margin: 0;
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	border-radius: 999px;
	position: static;
	align-self: auto;
}

body.home .news-feed .news-item dt span.icon-bg1 {
	background: rgba(223, 112, 3, 0.85);
	color: #fff;
}

body.home .news-feed .news-item dd {
	width: 100%;
	padding: 0;
	margin: 0;
	font-size: 0.95em;
	line-height: 1.75;
	color: var(--color-body-text-muted);
}

body.home main > section.bg1:first-of-type {
	padding-bottom: 16px;
}

body.home main > section.bg1:first-of-type .list-container {
	align-items: flex-start;
	row-gap: 24px;
}

body.home main > section.bg1:first-of-type .list-container .list {
	justify-content: flex-start;
	margin-bottom: 0;
}

body.home main > section:has(.news-feed) {
	padding-top: 20px;
	padding-bottom: 16px;
}

body.home main > section:has(.news-feed) + section {
	padding-top: 20px;
}

/* 社歌エリア — フッター同系デザイン（2026nenga 等） */
.song-area {
	position: relative;
	max-width: 640px;
	margin: 0 auto 30px;
	padding: 24px 28px 20px;
	background: #40404F;
	border-top: 3px solid #df7003;
	color: #b0b0bc;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.song-area .ta1 {
	border-top: none;
	margin-bottom: 0;
}

.song-area .ta1 caption {
	margin: 0 0 12px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: #e8e8ec;
	font-size: 1.15em;
	text-align: left;
}

.song-area table {
	color: #b0b0bc;
}

.song-area a {
	color: #a8a8b8;
	transition: color 0.25s ease;
}

.song-area a:hover {
	color: #f09030;
	opacity: 1;
}

.song-area .m_player {
	background: transparent;
	border: none;
	padding: 12px 0 0;
	color: #b0b0bc;
}

.song-area .m_player ol {
	width: 100%;
	max-width: 100%;
	background: #363648;
	border-top: 1px solid #4a4a5c;
	color: #a8a8b8;
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
}

.song-area .m_player ol li {
	position: relative;
	border-bottom: 1px solid #4a4a5c;
	padding: 12px 4px 12px 24px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.25s ease;
}

.song-area .m_player ol li:hover {
	background: #454558;
}

.song-area .m_player ol li a {
	display: block;
	color: #a8a8b8;
	font-size: 0.85em;
	text-decoration: none;
}

.song-area .m_player ol li a:hover {
	color: #f09030;
}

.song-area .m_player ol li.playing {
	background: #524430;
	color: #f09030;
	text-shadow: none;
}

.song-area .m_player ol li.playing a {
	color: #f09030;
}

.song-area .m_player ol li.playing::before {
	content: "♬";
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	color: #f09030;
	font-size: 13px;
	text-shadow: none;
}


/* ---------------------------------------------------------------------------
   サブページ共通
--------------------------------------------------------------------------- */
body.gallery-page,
body.csr-page,
body.company-page,
body.contact-page,
body.others-page,
body.article-page,
body.shopping-page {
	background: #16181f;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
	background-size: 32px 32px;
	min-height: 100vh;
	color: var(--color-body-text);
}

body.article-page main,
body.shopping-page main,
body.contact-page main,
body.others-page main,
body.csr-page main,
body.company-page main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 72px;
}

body.gallery-page .gallery-main p,
body.article-page main p,
body.shopping-page main p,
body.contact-page main p,
body.others-page main p {
	color: var(--color-body-text-muted);
}

body.gallery-page .gallery-main h2,
body.article-page main h2,
body.shopping-page main h2,
body.contact-page main h2,
body.others-page main h2,
body.csr-page main h2,
body.company-page main h2 {
	margin: 40px 0 12px;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	color: #eeeeee;
	letter-spacing: 0.05em;
}

body.gallery-page .gallery-main h2 i,
body.article-page main h2 i,
body.shopping-page main h2 i,
body.contact-page main h2 i,
body.others-page main h2 i,
body.csr-page main h2 i,
body.company-page main h2 i {
	margin-right: 0.3em;
	color: #df7003;
}

body.gallery-page .gallery-main h2 span,
body.article-page main h2 span,
body.shopping-page main h2 span,
body.contact-page main h2 span,
body.others-page main h2 span,
body.csr-page main h2 span,
body.company-page main h2 span {
	color: #df7003;
}

.page-hero {
	text-align: center;
}

.page-hero::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 20px auto 24px;
	background: linear-gradient(90deg, #df7003, #f0a030);
	border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   ギャラリー
--------------------------------------------------------------------------- */
.gallery-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 80px;
}

.gallery-intro {
	text-align: center;
	color: var(--color-body-text-muted);
	margin: 0 auto 28px;
	font-size: 0.95em;
	max-width: 640px;
}

/* タブ */
.gallery-tabs {
	display: flex;
	width: fit-content;
	margin: 0 auto 32px;
	gap: 8px;
	padding: 6px;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(12px);
}

.gallery-tabs button {
	border: none;
	background: transparent;
	color: var(--color-body-text-muted);
	padding: 12px 24px;
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.gallery-tabs button:hover {
	color: #eeeeee;
}

.gallery-tabs button.is-active {
	background: linear-gradient(135deg, #f09030, #df7003);
	color: #fff;
	box-shadow: 0 4px 20px rgba(223, 112, 3, 0.35);
}

/* パネル */
.gallery-panel {
	display: none;
	animation: galleryFadeIn 0.4s ease;
}

.gallery-panel.is-active {
	display: block;
}

@keyframes galleryFadeIn {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

/* 写真グリッド */
.ggd-gallery > ul#lightgallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ggd-gallery > ul#lightgallery > li {
	float: none;
	width: auto;
	margin: 0;
	transition: transform 0.3s ease;
}

.ggd-gallery > ul#lightgallery > li:hover {
	transform: translateY(-6px);
}

.ggd-gallery > ul > li a {
	float: none;
	display: block;
	border: none;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	background: #4a4a5c;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	transition: box-shadow 0.3s ease;
}

.ggd-gallery > ul > li a::after {
	display: none;
}

.ggd-gallery > ul > li:hover a {
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
}

.ggd-gallery > ul > li a > img {
	display: block;
	width: 100%;
	transition: transform 0.4s ease;
	aspect-ratio: 1;
	object-fit: cover;
	transform: scale(1);
}

.ggd-gallery > ul > li:hover a > img {
	transform: scale(1.04);
}

.gallery-thumb__title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 18px 6px 7px;
	background: linear-gradient(transparent, rgba(32, 32, 42, 0.92));
	color: #f0f0f4;
	font-size: 0.68rem;
	line-height: 1.35;
	text-align: center;
	pointer-events: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ggd-gallery > ul > li.is-video a::before {
	content: "▶";
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	background: rgba(223, 112, 3, 0.9);
	color: #fff;
	border-radius: 50%;
	font-size: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.ggd-gallery > ul > li a:hover > img {
	transform: scale(1.04);
}

/* 動画セクション */
.gallery-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 28px;
}

.gallery-video-card {
	background: linear-gradient(145deg, #4e4e62, #4a4a5c);
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-video-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.gallery-video-card__embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #2a2a36;
}

.gallery-video-card__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.gallery-video-card__body {
	padding: 20px 24px;
}

.gallery-video-card__body h3 {
	margin: 0 0 8px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	font-size: 1.05em;
	color: #eeeeee;
	font-weight: 600;
}

.gallery-video-card__body p {
	margin: 0;
	font-size: 0.85em;
	color: var(--color-body-text-muted);
	line-height: 1.6;
}

/* 音楽プレイヤー — フッター同系デザイン */
.gallery-music {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	background: #40404F;
	border-radius: 4px;
	border: none;
	border-top: 3px solid #df7003;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.gallery-music__header {
	padding: 24px 28px 16px;
	border-bottom: 1px solid rgba(223, 112, 3, 0.15);
	background: transparent;
}

.gallery-music__header h3 {
	margin: 0 0 8px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: #eeeeee;
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.gallery-music__header p {
	margin: 0;
	font-size: 0.85em;
	color: var(--color-body-text-muted);
}

.gallery-music__now {
	padding: 16px 28px;
	background: #454558;
	border-bottom: 1px solid #4a4a5c;
	font-size: 0.9em;
	color: #f09030;
	min-height: 1.4em;
}

.gallery-music__controls {
	padding: 16px 28px;
}

.gallery-music__controls audio {
	width: 100%;
	height: 40px;
	border-radius: 8px;
}

.gallery-music__volume {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 28px 16px;
	font-size: 0.85em;
	color: var(--color-body-text-muted);
}

.gallery-music__volume button {
	border: 1px solid rgba(223, 112, 3, 0.25);
	background: rgba(0, 0, 0, 0.15);
	color: var(--color-body-text-muted);
	padding: 6px 16px;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.85em;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gallery-music__volume button:hover,
.gallery-music__volume button.is-active {
	background: rgba(223, 112, 3, 0.2);
	border-color: rgba(223, 112, 3, 0.45);
	color: #f09030;
}

.gallery-music__playlist {
	list-style: none;
	margin: 0;
	padding: 8px 12px 20px;
	max-height: 360px;
	overflow-y: auto;
	background: #363648;
}

.gallery-music__playlist li {
	margin: 4px 0;
}

.gallery-music__playlist button {
	width: 100%;
	text-align: left;
	border: none;
	background: transparent;
	color: var(--color-body-text-muted);
	padding: 14px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.85em;
	line-height: 1.5;
	transition: background 0.2s ease, color 0.25s ease, padding-left 0.2s ease;
	display: flex;
	align-items: center;
	gap: 12px;
}

.gallery-music__playlist button::before {
	content: "♪";
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background: #4a4a5c;
	border-radius: 50%;
	font-size: 12px;
	color: var(--color-body-text-muted);
	transition: background 0.2s ease, color 0.2s ease;
}

.gallery-music__playlist button:hover {
	background: #454558;
	color: #f09030;
	padding-left: 20px;
}

.gallery-music__playlist button.is-playing {
	background: #524430;
	color: #f09030;
}

.gallery-music__playlist button.is-playing::before {
	content: "♬";
	background: #df7003;
	color: #fff;
}

/* lightGallery ダーク調整 */
.lg-backdrop {
	background-color: rgba(20, 20, 28, 0.92);
}

.lg-sub-html {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

/* 製品やお仕事ページ（article） */
body.article-page main > article {
	padding: 0;
}

body.article-page .article-zoom-figure {
	max-width: 880px;
	margin: 0 auto 20px;
}

body.article-page .article-zoom-figure p.c {
	margin: 0;
}

body.article-page main p.c img {
	display: block;
	max-width: 880px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 14px;
	cursor: zoom-in;
}

body.article-page .article-zoom-hint {
	margin: 10px 0 0 !important;
	text-align: center;
	font-size: 0.78rem;
	color: rgba(224, 228, 236, 0.55);
	letter-spacing: 0.06em;
}

body.article-page .article-zoom-hint i {
	margin-right: 0.35em;
	font-size: 0.9em;
	color: rgba(223, 112, 3, 0.75);
}

body.article-page main p.c img.img-click-zoom-target:hover {
	opacity: 0.92;
}

/* 画像クリック拡大（js/image_click_zoom.js） */
body.img-click-zoom-open {
	overflow: hidden;
}

.img-click-zoom {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background: rgba(10, 12, 18, 0.88);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: zoom-out;
	animation: img-click-zoom-in 0.22s ease;
}

.img-click-zoom__wrap {
	flex: 1;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(223, 112, 3, 0.55) rgba(255, 255, 255, 0.06);
	cursor: grab;
}

.img-click-zoom__wrap.is-dragging,
.img-click-zoom__wrap:active {
	cursor: grabbing;
}

.img-click-zoom__img {
	display: block;
	max-width: none;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.img-click-zoom__hint {
	margin: 0;
	padding: 10px 16px 14px;
	text-align: center;
	font-size: 0.78rem;
	color: rgba(224, 228, 236, 0.75);
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

@keyframes img-click-zoom-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.img-click-zoom {
		animation: none;
	}
}

body.article-page .ta1 {
	max-width: 880px;
	border-top-color: rgba(255, 255, 255, 0.1);
}

body.article-page .ta1 caption {
	background: rgba(223, 112, 3, 0.12);
	border-color: rgba(223, 112, 3, 0.45);
	color: #f09030;
}

body.article-page .ta1 tr {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.article-page .ta1 th {
	background: rgba(0, 0, 0, 0.25);
	color: #f09030;
	font-weight: 600;
}

body.article-page .ta1 td {
	background: rgba(255, 255, 255, 0.03);
	color: var(--color-body-text);
}

/* お買い物ページ（shopping） */
body.shopping-page main > section {
	padding: 0;
}

body.shopping-page .store-visual {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 16px 20px;
	max-width: 680px;
	margin: 0 auto 20px;
}

body.shopping-page .store-visual .store-image {
	display: block;
	max-width: 400px;
	width: 100%;
	height: auto;
	margin: 0;
	flex: 0 1 400px;
	border-radius: 80px;
}

body.shopping-page .store-visual .kobutsu-plate {
	margin: 0;
	flex: 0 0 auto;
}

@media screen and (max-width: 699px) {
	body.shopping-page .store-visual {
		flex-direction: column;
		align-items: center;
	}

	body.shopping-page .store-visual .store-image {
		flex: 0 1 auto;
	}
}

body.shopping-page .page-hero--sub {
	margin-top: 48px;
}

body.shopping-page .list2 {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

body.shopping-page .list2 h4 {
	color: #f4f5f7;
}

body.shopping-page .list2 p {
	color: var(--color-body-text-muted);
}

body.shopping-page .btn a {
	background: linear-gradient(135deg, #f09030, #df7003);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.95em;
	letter-spacing: 0.06em;
	box-shadow: 0 4px 16px rgba(223, 112, 3, 0.3);
	transition: filter 0.25s ease, box-shadow 0.25s ease;
}

body.shopping-page .btn a:hover {
	filter: brightness(1.08);
	transform: none;
	box-shadow: 0 6px 22px rgba(223, 112, 3, 0.4);
	opacity: 1;
}

body.shopping-page .btn i {
	margin-left: 12px;
	opacity: 0.85;
	transform: none;
}

/* お問い合わせフォームページ（contact / others） */
body.contact-page #form-tbl,
body.others-page #form-tbl {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}

body.contact-page main > section,
body.others-page main > section {
	padding: 0;
}

body.csr-page main > section {
	padding: 0;
}

body.contact-page main a,
body.others-page main a {
	color: #f09030;
}

body.contact-page main a:hover,
body.others-page main a:hover {
	color: #f5c070;
	opacity: 1;
}

body.contact-page #form,
body.others-page #form {
	width: 100%;
	max-width: 100%;
}

body.contact-page #form th,
body.contact-page #form td,
body.others-page #form th,
body.others-page #form td {
	border-color: rgba(255, 255, 255, 0.1);
}

body.contact-page #form th,
body.others-page #form th {
	background: rgba(0, 0, 0, 0.25);
	color: #f09030;
	font-weight: 600;
}

body.contact-page #form td,
body.others-page #form td {
	background: rgba(255, 255, 255, 0.03);
	color: var(--color-body-text);
}

body.contact-page #form input[type="text"],
body.contact-page #form textarea,
body.others-page #form input[type="text"],
body.others-page #form textarea {
	background: #2a2a36;
	color: #e8eaed;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	padding: 8px 10px;
	font-family: inherit;
}

body.contact-page #form input[type="text"]:focus,
body.contact-page #form textarea:focus,
body.others-page #form input[type="text"]:focus,
body.others-page #form textarea:focus {
	outline: none;
	border-color: rgba(223, 112, 3, 0.55);
	box-shadow: 0 0 0 2px rgba(223, 112, 3, 0.15);
}

body.contact-page #form input[type="checkbox"],
body.contact-page #form input[type="radio"],
body.others-page #form input[type="checkbox"],
body.others-page #form input[type="radio"] {
	accent-color: #df7003;
}

body.contact-page p.f_btn input[type="submit"],
body.others-page p.f_btn input[type="submit"] {
	background: linear-gradient(135deg, #f09030, #df7003);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
}

body.contact-page p.f_btn input[type="reset"],
body.others-page p.f_btn input[type="reset"] {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-body-text-muted);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	cursor: pointer;
}

body.contact-page p.f_btn input[type="submit"]:hover,
body.others-page p.f_btn input[type="submit"]:hover {
	filter: brightness(1.08);
}

body.contact-page p.f_btn input[type="reset"]:hover,
body.others-page p.f_btn input[type="reset"]:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #e8eaed;
}

/* 会社概要ページ */
body.company-page main h3 {
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	border-radius: 0;
}

body.company-page main p {
	margin-left: 0;
	margin-right: 0;
}

.company-fact dt small {
	display: block;
	margin-top: 2px;
	font-size: 0.85em;
	font-weight: 400;
	color: #6a7080;
}

.company-tagline {
	display: inline-block;
	margin: 10px auto 0;
	padding: 10px 18px;
	font-size: clamp(1.05rem, 2.2vw, 1.15rem);
	line-height: 1.7;
	color: #f0b050;
	font-weight: 500;
	letter-spacing: 0.03em;
	border: 1px solid rgba(240, 160, 48, 0.35);
	border-radius: 8px;
}

body.company-page section {
	padding: 0;
}

.company-facts {
	max-width: 880px;
	margin: 0 auto 28px;
}

.company-facts__grid {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.company-fact {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 0;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.company-fact:hover {
	background: rgba(223, 112, 3, 0.08);
	border-color: rgba(223, 112, 3, 0.28);
}

.company-fact dt {
	margin: 0;
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.22);
	color: #f09030;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.company-fact dd {
	margin: 0;
	padding: 14px 18px;
	font-size: 0.92em;
	line-height: 1.65;
	color: #d8dce4;
}

.company-fact dd a {
	color: #f09030;
	text-decoration: none;
}

.company-fact dd a:hover {
	text-decoration: underline;
}

.company-sdgs {
	max-width: 880px;
	margin: 24px auto 28px;
	padding: 32px 40px 24px;
	background: linear-gradient(135deg, rgba(223, 112, 3, 0.1) 0%, rgba(240, 160, 48, 0.05) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
}

body.company-page .company-sdgs__title {
	margin: 8px 16px 16px;
	font-size: 1.05em;
	font-weight: 700;
	color: #f4f5f7;
	letter-spacing: 0.06em;
}

.company-sdgs__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	margin: 0 16px;
	padding: 8px 0;
}

.company-sdgs__logo {
	flex-shrink: 0;
	margin: 0;
	padding: 12px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 10px;
}

.company-sdgs__logo img {
	display: block;
	width: 200px;
	height: auto;
}

body.company-page .company-sdgs__text {
	flex: 1;
	min-width: 240px;
	margin: 8px 0;
	font-size: 1em;
	line-height: 1.85;
	color: var(--color-body-text-muted);
}

body.company-page .company-sdgs__note {
	margin: 16px 16px 4px;
	font-size: 0.82em;
	color: #b8bcc8;
	line-height: 1.6;
	text-align: center;
}

.company-message {
	max-width: 880px;
	margin: 24px auto 28px;
	padding: 32px 40px 24px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 14px;
	border-top: 3px solid #f0a030;
}

body.company-page .company-message__title {
	margin: 8px 16px 18px;
	font-size: 1.1em;
	font-weight: 700;
	color: #f4f5f7;
	letter-spacing: 0.08em;
}

body.company-page .company-quote {
	margin: 8px 16px 20px;
	padding: 20px 22px;
	background: rgba(240, 160, 48, 0.08);
	border-left: 4px solid #f0a030;
	border-radius: 0 10px 10px 0;
	font-size: 1em;
	line-height: 1.85;
	color: #e8eaed;
	font-style: normal;
}

body.company-page .company-message__body {
	margin: 4px 16px 0;
}

body.company-page .company-message__body p {
	margin: 0 0 1em;
	font-size: 1em;
	line-height: 1.9;
	color: var(--color-body-text-muted);
}

body.company-page .company-message__body p:last-child {
	margin-bottom: 0;
}

.company-message__body strong {
	color: #f09030;
	font-weight: 600;
}

@media screen and (max-width: 600px) {
	.gallery-tabs {
		flex-wrap: wrap;
		justify-content: center;
		border-radius: 16px;
	}

	.gallery-tabs button {
		padding: 10px 18px;
		font-size: 0.85em;
	}

	.ggd-gallery > ul#lightgallery {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 12px;
	}

	body.company-page main,
	body.contact-page main,
	body.others-page main,
	body.article-page main,
	body.shopping-page main {
		padding: 0 14px 56px;
	}

	body.contact-page #form tr:first-child th,
	body.others-page #form tr:first-child th {
		border-top-color: rgba(255, 255, 255, 0.1);
	}

	.company-fact {
		grid-template-columns: 1fr;
	}

	.company-fact dt {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		padding: 10px 14px;
	}

	.company-fact dd {
		padding: 12px 14px;
	}

	.company-sdgs,
	.company-message {
		margin: 20px auto 24px;
		padding: 24px 24px 20px;
	}

	.company-sdgs__logo img {
		width: 160px;
		margin: 0 auto;
	}

	.company-sdgs__inner {
		justify-content: center;
		text-align: center;
	}

	body.shopping-page .list2 {
		flex-direction: column;
		align-items: center;
		padding: 16px;
	}

	body.shopping-page .list2 figure {
		width: auto;
		max-width: 100%;
		margin: 0 0 16px;
		align-self: center;
		text-align: center;
	}

	body.shopping-page .list2 figure a,
	body.shopping-page .list2 figure img {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		height: auto;
	}

	body.shopping-page .list2 .text {
		width: 100%;
	}
}