@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPMincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');

:root {
	--font-main: "Klee One", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
	--font-sub: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--color-bg: #ffffff;
	--color-text: #0c0c0c;
	--color-text-hover: #3c3c3c;
	--color-white: #ffffff;
	--color-gray: #888888;
	--color-accent: #E1CCA4;
	--color-btn: #625950;
	--color-border: #888888;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio {
	font-family: var(--font-main);
	line-height: 1em;
}

.grecaptcha-badge {
	display: none !important;
}

* {
	transition: all 0.3s linear;
}

body {
	background-color: #FFFFFF;
}

a {
	color: var(--color-text);
	text-decoration: none;
}

a:link {
	color: var(--color-text);
}

a:visited {
	color: var(--color-text);
}

a:hover {
	color: var(--color-text);
	text-decoration: none;
}

a:active {
	color: var(--color-text);
}

p {
	color: var(--color-text);
}

.single p a {
	font-style: italic;
	border-bottom: 1px dotted var(--color-text);
	padding-bottom: 2px;
}


.mb10 {
	margin-bottom: 10px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mb40 {
	margin-bottom: 40px !important;
}

.mb50 {
	margin-bottom: 50px !important;
}

.mb70 {
	margin-bottom: 70px !important;
}


.mb100 {
	margin-bottom: 100px !important;
}

.mt50 {
	margin-top: 50px !important;
}

.mt100 {
	margin-top: 100px !important;
}

.mt150 {
	margin-top: 150px !important;
}

.mt130 {
	margin-top: 130px !important;
}

.mt120 {
	margin-top: 120px !important;
}

.mt110 {
	margin-top: 110px !important;
}

.pb10 {
	padding-bottom: 10px;
}

.pb20 {
	padding-bottom: 20px;
}

.pb30 {
	padding-bottom: 30px;
}

.pb40 {
	padding-bottom: 40px;
}

.pb50 {
	padding-bottom: 50px;
}

.pb100 {
	padding-bottom: 100px;
}

.pb150 {
	padding-bottom: 150px;
}

.pt50 {
	padding-top: 50px;
}

.pt100 {
	padding-top: 100px;
}

.view_sp {
	display: none !important;
}

.view_wide {
	display: block !important;
}

.view_wide_inline {
	display: inline-block !important;
}

@media screen and (max-width:960px) {
	.view_sp {
		display: block !important;
	}

	.view_wide {
		display: none !important;
	}

	.view_wide_inline {
		display: none !important;
	}
}

a,
button {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}

button {
	font-size: 11px;
	line-height: 1.7em;
	letter-spacing: 2px;
	font-family: var(--font-main);
}

header {
	z-index: 4000;
	width: 80px;
	height: 100%;
	position: fixed;
	right: 0px;
	border: 0px;
	top: 0px;
	background-color: #fff;
	box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.2);
}

header .sns {
	position: relative;
	top: 80px;
	width: 100%;
}

header .sns a img {
	width: 100%;
	padding: 37%;
}

section.sections {
	padding-right: 60px;
}
/* PC(961px〜)では右の固定メニューバー(header)が幅80pxなのに対し右避けが60pxしかなく、
   常に20pxコンテンツ(写真の右端)に覆い被さっていた。HOMEのORDER/STORE写真が
   「微妙に縦長」に見え、中央揃えの文字も見えている領域の中心から10px右にずれていた原因
   （久米さん指摘 2026-07-21）。ヘッダー幅と同じ80pxに揃えて、写真・文字・可視領域の
   中心を一致させる。モバイルはヘッダー60px＝右避け60pxで一致済みのため変更しない。 */
@media screen and (min-width:961px) {
	/* ※元のルールが section.sections（詳細度0,1,1）のため、こちらも同じセレクタにしないと負ける */
	section.sections {
		padding-right: 80px;
	}
}

.description a {
	text-decoration: none;
	text-decoration: none;
	color: var(--color-text) !important;
	border-bottom: 1px solid var(--color-text);
}

.description a:hover {
	color: var(--color-text) !important;
	border-bottom: 2px solid var(--color-text);
}

.description a:active {
	color: #494848 !important;
}

.title-area {
	text-align: center;
	margin-bottom: 60px;
}

.title-area .title {
	font-weight: 100;
	letter-spacing: 3px;
	font-size: 13px;
	position: relative;
	z-index: 5;
}

.title-area p.caption {
	margin-top: 20px;
	letter-spacing: 2px;
	font-size: 10px;
}

.title-area p {
	font-size: 11px;
}

/* 全サブページの上部余白を統一（タイトル上端: モバイル96px/PC82px＝基準+padding50px、タイトル→本文56px）。PC/モバイル両方に適用（久米さん依頼 2026-07-20、PCも統一） */
.subpage-title-area {
	margin-top: 0;
	padding-top: 50px;
	margin-bottom: 56px;
	margin-left: 20px;
}
/* .contents(有るページ)のpadding-top:100pxによる100pxのズレをタイトルに限って相殺。単一記事(.subpage-title-area無し)には非適用 */
.contents .subpage-title-area {
	margin-top: -100px;
}

.subpage-title-area .title {
	font-family: var(--font-main);
	font-weight: 100;
	letter-spacing: 2px;
	font-size: 14px;
	position: relative;
	z-index: 5;
	margin-bottom: 11px;
}

.subpage-title-area .caption {
	font-family: var(--font-sub);
	font-weight: normal;
	letter-spacing: 3px;
	font-size: 11px;
	position: relative;
	z-index: 5;
	color: #000;
}




.logo a {
	border: 0px;
}

.globalmenu {
	display: inline-block;
	position: absolute;
	top: 0px;
	right: 20px;

	transition: all 0.3s ease-in
}

.globalmenu video.bkmv {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: -1;
}




.profile-page header .logo a {
	color: var(--color-white) !important;
}

.profile-page .submenu li a {
	color: var(--color-white) !important;
}








.sections.mt130 {
	margin-top: 110px !important;
}

.sections.mt100 {
	margin-top: 110px !important;
}



h1.logo {
	display: block;
	font-size: 16px;
	letter-spacing: 20px;
	writing-mode: vertical-rl;
	margin: 110px auto 100px;
	position: relative;
	top: 50px;
	z-index: 980;
	height: 370px;
}

h1.logo span {
	font-size: 8px;
	letter-spacing: 7px;
	font-size: 11px;
	font-family: var(--font-sub);
	margin-top: 40px;
}

.toplogo {
	width: 100%;
	text-align: center;
	margin-top: 250px;
	margin-bottom: 200px;
}

.toplogo span {
	font-size: 8px;
	letter-spacing: 7px;
	font-size: 11px;
	font-family: var(--font-sub);
	margin-top: 40px;
}

section.toplogo img {
	width: 90px;
}

.globalmenu {
	overflow: auto;
	width: 100%;
	position: fixed;
	z-index: 990;
	right: 0px;
	height: 100%;
	top: 0px;
}

.globalmenu ul {
	padding: 0px;
	display: block;
	position: absolute;
	top: 17%;
	bottom: 0px;
	left: 10%;
	right: 0px;
}

.globalmenu li {

	margin-bottom: 20px;
	font-size: 30px;
	letter-spacing: 2px;
	list-style: none;
	font-weight: 100;
	border: 0px;
	text-decoration: none;
	font-family: var(--font-sub);
}

.globalmenu li a {
	font-size: 40px;
	letter-spacing: 2px;
	text-decoration: none;
	font-weight: bold;
	font-family: var(--font-sub);
	color: var(--color-text);
}

.globalmenu li a:hover {
	color: var(--color-text-hover) !important;
}

.globalmenu li span {
	font-size: 16px;
	font-family: var(--font-sub);
	margin-left: 20px;
	display: inline-block;
	top: -8px;
	position: relative;
}

.minilogo {
	width: 50px;
	margin-top: 60px;
}

.right-menu {
	position: absolute;
	right: 0px;
	bottom: 0px;
	padding: 0px;
	text-align: center;
	font-size: 11px;
	z-index: 9999;
}

.right-menu .btn_menu {
	background-image: url(../images/menu-logo.png);
	background-size: 37px 51px;
	background-repeat: no-repeat;
	background-position: center;
	height: 51px;
	width: 37px;
	rotate: 0deg;
	transition: all 0.3s linear;
}

.right-menu .btn_menu.open {
	rotate: 240deg;
}

.globalmenu.close {
	opacity: 0.0;
	visibility: hidden
}

.globalmenu.open {
	opacity: 1.0;
	visibility: initial;
	background-color: rgba(200, 200, 200, 0.8);
}



.submenu {
	width: 400px;
	margin-bottom: 100px;
}

.submenu ul {
	margin-left: 30px;
}

.submenu li.first {
	margin-right: 30px;
}

.submenu li {
	line-height: 0px;
	display: inline-block;
	font-size: 11px;
	width: 150px;
	margin-bottom: 20px;
}

.submenu li.end {
	margin-right: 0px;
}

.submenu li a {
	font-size: 11px;
	letter-spacing: 2px;
	font-weight: 400;
	border: 0px;
	text-decoration: none;
	font-weight: 400;
	letter-spacing: 2px;


}

.submenu li a:hover {
	color: var(--color-gray) !important;
	border: 0px !important;
	border: 0px !important;


}



@media screen and (max-width:960px) {
	h1.logo {
		display: block;
		font-size: 14px;
		letter-spacing: 14px;
		writing-mode: vertical-rl;
		margin: 100px auto 0px;
		position: relative;
		top: 50px;
	}

	.toplogo {
		height: 600px;
		margin-top: 180px;
	}

	h1.logo span {
		font-size: 8px;
		letter-spacing: 3px;
		font-size: 11px;
		font-family: var(--font-sub);
		margin-top: 20px;
	}

	section.toplogo img {
		width: 50px;
	}

	.globalmenu li a {
		font-size: 22px;
		letter-spacing: 2px;
	}

	.globalmenu li span {
		font-size: 11px;
		display: block;
		top: 0px;
		letter-spacing: 1px;
		margin-left: 0px;
		margin-top: 7px;
	}

	.globalmenu ul {
		top: 12%;
	}

	.globalmenu li {
		font-size: 26px;
	}



}

.during,
.before {
	position: absolute;
	top: 30px;
	left: 30px;
	font-size: 11px;
	letter-spacing: 2px;
}

.before .date_icon {
	background-color: #FF8989;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	display: inline-block;
	margin-right: 10px;
}


.during .date_icon {
	background-color: #D6FF89;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	display: inline-block;
	margin-right: 10px;
}



.pageclass_sub .header-section.categorylist .head-images {
	height: 500px;
	width: 100%;
	margin: 0 auto 100px;
}

.pageclass_sub .header-section.categorylist img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

@media screen and (max-width:960px) {
	.pageclass_sub h1.logo {
		display: block;
		font-size: 12px;
		letter-spacing: 12px;
		text-align: left;
		margin-top: 100px;

	}

	.pageclass_sub h1.logo img {
		width: 170px;
		height: auto;
	}

}

@media screen and (min-width:1280px) {

	.pageclass_sub .header-section.categorylist .head-images {
		height: 700px !important;
	}

	.head-images video {
		height: 700px !important;
	}
}


footer {
	text-align: center;
	position: relative;
	z-index: 5;
}

.footvideo {
	margin: 0px;
	width: 100%;
	height: 100%;
	position: relative;
	line-height: 0;
}

.footvideo img {
	width: 100%;
}

.footvideo video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	line-height: 0;
}

.intro {
	width: 220px;
	margin: 0 auto 200px;
}

h3.intro-head {
	font-size: 11px;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 40px;
	line-height: 1.6em;
	/* H3既定の700はKlee One（400のみロード）だと疑似ボールドでにじむため、実在する600を指定 */
	font-weight: 600;
}

p.intro-text {
	-ms-writing-mode: tb-rl;
	/* IE用 */
	writing-mode: vertical-rl;
	/* 一般的なブラウザ */
	font-size: 12px;
	font-family: "Yu Mincho", serif;
	width: 188px;
	height: 440px;
	line-height: 1.8em;
	letter-spacing: 3px;
	margin-bottom: 100px;
}

.intro a {
	display: inline-block;
	text-align: center;
	width: 100%;
	letter-spacing: 3px;
	font-size: 9px;
}



.flexslider,
ul.slides,
.flexslider .slides li,
.flexslider .slides img {
	width: 100%;
	height: 100%;
}

.flexslider {
	background: transparent !important;
}

/* section width and centering */
.section.map {
	margin: 0 auto;
	width: 800px;
}

.section.event {
	margin: 0 auto;
	width: 800px;
}

.section.slider {
	margin-left: 0px;
	margin-right: 0px;
	height: 720px;
}

.section.about {
	width: 600px;
	margin: 0 auto;
}





.member .title {
	margin: 0 auto 70px;
	text-align: center;
}

.section .title h2,
.section .title h3 {
	margin-bottom: 0px;
	letter-spacing: 2px;
	font-weight: 100;
	font-size: 16px;
	color: var(--color-text);
	line-height: 1.6em;
}

.sub_caption {
	font-size: 11px;
	margin-bottom: 17px;
}

.section .title .caption {
	font-size: 10px;
}

.section .description {
	font-size: 13px;
	line-height: 2.0em;
	margin-bottom: 40px;
}

.section .description img {
	width: 100%;
}

.section .more-button {
	text-align: center;
	margin-bottom: 100px;
}

.section .more-button img {
	width: 198px;
}

.section.about .title {
	margin-bottom: 30px;
}

.section.about .title h2,
.section.about .title h3 {
	margin-bottom: -8px;
	letter-spacing: 2px;
	font-weight: 100;
	line-height: 1.6em;
}

.section.about .title .caption {
	font-size: 10px;
}

.section.about .description {
	font-size: 13px;
	line-height: 2.0em;
	margin-bottom: 40px;
}

.section.about .description img {
	width: 100%;
}

.section.about .more-button {
	text-align: center;
}

.section.about .more-button img {
	width: 198px;
}


.section.attention {
	width: 600px;
	margin: 0 auto;
}

.section.attention .title {
	margin-bottom: 30px;
}

.section.attention .title h2,
.section.about .title h3 {
	margin-bottom: -8px;
	letter-spacing: 2px;
	font-weight: 100;
	line-height: 1.6em;
}

.section.attention .title .caption {
	font-size: 10px;
}

.section.attention .description {
	font-size: 13px;
	line-height: 2.0em;
	margin-bottom: 40px;
}

.section.attention .description img {
	width: 100%;
}

.section.attention .more-button {
	text-align: center;
}

.section.attention .more-button img {
	width: 198px;
}

@media screen and (max-width:960px) {
	.section.about .title {
		margin-left: 0px;
	}


	.section.attention {
		margin-left: 30px;
		margin-right: 30px;
		width: auto;
	}

	.section .title {
		margin-left: 0px;
	}

	.footer-menu {
		margin: 0 auto 100px;
	}





}


.section.map .title {
	margin-bottom: 30px;
}

.section.map .title h2,
.section.map .title h3 {
	margin-bottom: -8px;
	letter-spacing: 2px;
	font-weight: 100;
	line-height: 1.6em;
}

.section.map .title .caption {
	font-size: 10px;
}

.section.map iframe {
	width: 100%;
}



.section.event .title {
	margin-bottom: 30px;
}

.section.event .title h2,
.section.event .title h3 {
	margin-bottom: -8px;
	letter-spacing: 2px;
	font-weight: 100;
	line-height: 1.6em;
}

.section.event .title .caption {
	font-size: 10px;
}

.section.event .description {
	font-size: 13px;
	line-height: 2.0em;
	margin-bottom: 40px;
}

.section.event .event-title {
	text-align: center;
	margin-bottom: 50px;
}

.section.event .event-title img {
	width: 292px;
}

.section.event h2.event-title span,
.section.event h3.event-title span {
	font-size: 20px;
	text-align: left;
	letter-spacing: 1px;
	line-height: 1.6em;
}

.section.event h2.event-title,
.section.event h3.event-title {
	font-size: 29px;
	font-weight: 100;
	line-height: 1.6em;
}

.section.event .description {
	font-size: 13px;
}

.section.event .description img {
	width: 100%;
	margin-bottom: 20px;
}

.section.event .more-button {
	text-align: center;
}

.section.event .more-button img {
	width: 198px;
}

@media screen and (max-width:960px) {

	.section.event h2.event-title span,
	.section.event h3.event-title span {
		font-size: 15px;
	}

	.section.event h2.event-title,
	.section.event h3.event-title {
		font-size: 22px;
		line-height: 1.6em;
	}

	.section.event .description iframe {
		width: 100%;
	}

	.footvideo video {
		width: 100%;
		height: 600px;
		object-fit: cover;
		line-height: 0;
	}

}




/* footer */
footer {
	text-align: center;
	background-color: #F7F7F7;
}

footer .footermenu ul {
	padding: 0px;
}

footer .footermenu li {
	line-height: 100px;
	display: inline-block;

	padding: 0px 20px;
}

footer .footermenu li a {
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--color-text);
}

footer .placefiller {
	margin: 0px;
	letter-spacing: 1px;
	font-size: 12px;
}


footer .sns-icon {
	overflow: auto;
	width: 300px;
	margin: 0 auto 50px;
}

footer .sns-icon a img {
	width: 40px;
	height: auto;
	margin-bottom: 30px;
}

footer .sns-icon .item {

	font-size: 11px;
	letter-spacing: 1px;
	color: var(--color-text) !important;
	font-weight: 100;
	border: 0px;
	display: inline-block;
	text-align: center;
	width: 90px;
	margin-bottom: 20px;
	font-style: italic;
}

footer .sns-icon .item a {
	text-decoration: none;
}

footer .logo-v {
	width: 80px;
}

footer .copyright {
	font-family: var(--font-sub);
	color: var(--color-gray);
	font-size: 11px;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 0px;
	padding-bottom: 20px;
}

.item {
	font-size: 10px;
	color: var(--color-white);
	letter-spacing: 2px;
	position: absolute;
	z-index: 99;
	bottom: 10px;
	width: 100%;
	text-align: center;
	height: 30px;
	margin: 0px;
	padding: 0px;
}


@media screen and (max-width:960px) {










	.footer-menu li {
		display: inline-block;
		padding-right: 20px;
		padding-left: 20px;
		width: 40%;
		margin-bottom: 16px;
	}
}



.menu-area.close {
	transition: all 0.3s linear;
	height: 0px;
	padding: 0px;
	padding-top: 5px;
	overflow: hidden;
}

.right-menu.switch {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 4000;
	height: 60px;
}

p.menu-caption {
	font-size: 10px;
	letter-spacing: 2px;
	font-family: var(--font-sub);
	font-weight: bold;
	margin-top: 10px;
	text-align: center;
	display: inline-block;
	width: 100%;
}

button {
	display: block;
	background: none;
	border: none;
	padding: 0;
	width: 26px;
	color: var(--color-text);
	letter-spacing: 0.1em;
	cursor: pointer;
	top: 10px;
	left: 10px;
	z-index: 1001;
	text-align: center;
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

button span.bar {
	display: block;
	height: 2px;
	background-color: var(--color-white);
	margin: 17px 0;
	transition: all 0.3s;
	transform-origin: 0 0;
	width: 26px;
	box-shadow: 2px 2px 4px #333;
}

button.active .bar1 {
	transform: rotate(40deg);
	margin-left: 1px;
}

button .close {
	letter-spacing: 0.08em;
	display: none;
	font-size: 10px;
}

button .menu {
	display: inline;
	font-size: 10px;
	margin-left: 0px;
	padding: 0px;
	margin: 0px;
	line-height: 0px;
	letter-spacing: 0px;
}

button.active span.bar {
	width: 29px;
}

button.active .bar1 {
	transform: rotate(40deg);
	margin-left: 2px;
}

button.active .bar2 {
	opacity: 0;
}

button.active .bar3 {
	transform: rotate(-40deg);
	margin-left: 2px;
}

button.active .menu {
	display: none;
}

button.active .close {
	display: inline;
	font-size: 10px;
	margin-left: 0px;
	padding: 0px;
	margin: 0px;
	line-height: 0px;
	letter-spacing: 0px;
}

.contact_block p {
	font-size: 11px;
}


ul.about-list {
	padding-left: 0px;
}

ul.about-list li {
	font-size: 13px;
	list-style: none;
	margin-bottom: 50px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-accent);
}

ul.about-list .text {
	margin-left: 100px;
}

ul.about-list span {
	float: left;
	margin-right: 30px;
}

ul.doc-list {
	padding-left: 0px;
}

ul.doc-list li {
	font-size: 13px;
	list-style: none;
	margin-bottom: 10px;
}

ul.doc-list li span.cap {
	font-size: 11px;
	background-color: var(--color-text);
	color: var(--color-white);
	line-height: 1.8em;
	padding: 3px 8px;
	margin-left: 10px;
	list-style: none;
	margin-bottom: 10px;
	display: inline-block;
}

.btnlink {
	text-align: center;
	margin-bottom: 100px;
}

.contact-page {
	width: 500px;
	margin-left: 20px;
}

.contact-page label {
	font-size: 12px;
	margin-bottom: 10px;
	line-height: 2em;
}

input,
select,
optgroup,
textarea {
	border: 1px solid var(--color-text);
	width: 100%;
	padding: 3px;
	line-height: 3em;
	padding-left: 15px;
	padding-right: 15px;
}


.contact_block {
	margin-bottom: 40px;
}

.contact_block p {
	margin-bottom: 10px;
}

input[type=radio],
input[type=checkbox] {
	width: auto;
}

/*
input[type=radio], input[type=checkbox] {
  display: none;
}

.radio, .checkbox {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 20px 8px 0;
  padding: 12px 12px 12px 42px;
  vertical-align: middle;
  cursor: pointer;
	font-size: 12px;
}

.checkbox a {
  text-decoration: none;
  text-decoration: none;
  color: #256ebb!important;
  border-bottom: 1px solid #256ebb;
  font-weight: bold;
}

.radio:hover, .checkbox:hover {
}
.radio:hover:after, .checkbox:hover:after {
  border-color: #E1CCA4;
}
.radio:after, .checkbox:after {
  -webkit-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-accent);
  content: '';
}

.radio:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  background-color: var(--color-accent);
  content: '';
  opacity: 0;
}
input[type=radio]:checked + .radio:before {
  opacity: 1;
}

.checkbox:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 21px;
  display: block;
  margin-top: -7px;
  width: 5px;
  height: 9px;
  border-right: 3px solid var(--color-accent);
  border-bottom: 3px solid var(--color-accent);
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox:before {
  opacity: 1;
}
*/
input[type="submit"] {
	background-color: var(--color-btn);
	color: var(--color-white);
	margin-bottom: 20px;
	font-size: 12px;
	width: 250px;
}

.contact_message {
	font-size: 11px;
	margin-bottom: 50px;
}

.section.contact .description {
	font-size: 13px;
	line-height: 2.0em;
	margin-bottom: 40px;
}

@media screen and (max-width:960px) {
	.section.contact {
		width: auto;
		margin: 0 auto;
		margin-left: 30px;
		margin-right: 30px;
	}

	.contact-page {
		width: auto;
		margin-left: 20px;
		margin-right: 20px;
	}

	header {
		z-index: 4000;
		width: 60px;
		height: 100%;
		position: fixed;
		right: 0px;
		border: 0px;
		top: 0px;
		background-color: #fff;
		box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.2);
	}


	.right-menu .btn_menu {
		background-image: url(../images/menu-logo.png);
		background-size: 27px 41px;
		background-repeat: no-repeat;
		background-position: center;
		height: 41px;
		width: 27px;
		rotate: 0deg;
		transition: all 0.3s linear;
	}

	.right-menu.switch {
		position: fixed;
		top: 30px;
		right: 10px;
		z-index: 4000;
	}

}




/* layout_entry
--------------------*/


.works_wrapper {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto;
}

.works_wrapper::after {
	content: "";
	display: block;
	width: 50%;
}

.works_entry {
	width: 50%;
	margin: 10px;
	text-align: center;
	margin: 0 auto 0px;
	position: relative;
	height: auto;
}

.works_entry img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 2 / 3;
}

.infoblock {
	margin-bottom: 50px;
}

.infoblock .workscategory {
	margin-bottom: 10px;
}

.workscategory {
	border: 1px solid var(--color-gray);
	display: inline-block;
	padding: 4px 10px;
	line-height: 14px !important;
}

.worksurl {
	letter-spacing: 3px;
	font-size: 10px !important;
	line-height: 18px !important;
}



.title_section .category {
	margin-bottom: 10px;
	font-size: 10px;
	background-color: transparent;
	display: inline-block;
	padding: 1px 0px;
	color: var(--color-text);
	letter-spacing: 1px;
	margin-right: 5px;
	font-weight: 100;
}

.title_section .category.gray {
	background-color: #989898;
}

.title_section .category.blue,
.title_section .category.news {
	background-color: #8cb9bb;
}

.title_section .category.red,
.title_section .category.musubine {
	background-color: #E18483;
}

.title_section .category.yellow,
.title_section .category.kyobatethinking {
	background-color: #cec183;
}

.title_section .category.green,
.title_section .category.hatenomidori {
	background-color: #20B2AA;
}

.title_section .category.green,
.title_section .category.jikkenntenpo {
	background-color: #00bb98;
}

.title_section .category.green,
.title_section .category.hitdukuri {
	background-color: #33AA98;
}

.title_section .category a {
	color: var(--color-text);
	text-decoration: none;
}

.title_section .date {
	font-size: 10px;
	color: #ffffff;
	letter-spacing: 2px;
	text-align: left;
	font-weight: bold;
	font-family: var(--font-sub);
	text-shadow: 1px 1px 3px #2c2c2c;
}

.title_section h2 {
    font-size: 12px;
    font-weight: bold;
    font-family: var(--font-sub);
    letter-spacing: 1px;
    margin-bottom: 9px;
    text-align: left;
    line-height: 1.6em;
    text-shadow: 1px 1px 3px #666666;
}

.title_section h2 a {
	color: #ffffff;
	font-family: var(--font-sub);
}

.title_section {
	position: absolute;
	top: 20px;
	left: 20px;
	padding-right: 20px;
}

.title_section .category .line {
	border-bottom: 1px solid var(--color-gray);
	width: 40px;
	height: 1px;
	display: inline-block;
	margin-right: 30px;
	top: -3px;
	position: relative;
	margin-left: 30px;
}


.title_section .more_link {}

.top_more_link {
	padding: 8px 0px;
	margin: 0 auto;
	display: block;
	text-align: center;
	font-size: 12px;
	letter-spacing: 1px;
	margin-bottom: 100px;
}



@media screen and (min-width:0px) and (max-width:960px) {

	.title_section h2 a {
		color: #ffffff;
		font-family: var(--font-sub);
		letter-spacing: 1px;
		font-size: 12px;
	}
	.title_section {
		position: absolute;
		top: 10px;
		left: 10px;
		padding-right: 20px;
	}
	section.member,
	section.blog {
		width: auto;
	}

	.layout_entry_wrapper {
		width: auto;

	}

	.layout_entry img {
		object-fit: cover;
	}

	.layout_entry {
		width: auto;
		margin: 10px 20px 60px 20px;
	}



	.title_section .category .line {
		border-bottom: 1px solid var(--color-gray);
		width: 40px;
		height: 1px;
		display: inline-block;
		margin-right: 15px;
		margin-left: 15px;
		top: -3px;
		position: relative;
	}

	.top_more_link {
		padding: 0px 20px;
		width: 100%;
		margin: 0px;
		display: block;
		text-align: center;
		font-size: 12px;
		letter-spacing: 1px;
		margin-bottom: 100px;
	}

	.top_more_link img {
		width: 100%;
	}
}



.top_news ul {
	width: 600px;
	margin: 0 auto;
	padding-left: 0px;
}

.top_news {
	padding-top: 14px;
	padding-bottom: 14px;
	margin-bottom: 100px;
}

.top_news ul li {
	list-style: none;
	position: relative;
}

.top_news ul li .date {
	color: var(--color-text);
	margin-right: 30px;
	letter-spacing: 1px;
	font-size: 11px;
}

.top_news ul li .text {
	color: var(--color-text);
	letter-spacing: 1px;
	font-size: 11px;
	width: 400px;
	display: inline-block;
	text-align: center;
}

.top_news ul li a {
	color: var(--color-text);
	font-size: 11px;
	letter-spacing: 1px;
}





.news {
	width: 500px;
	margin: 70px auto 120px;
	position: relative;
}

.news ul li span.date {
	font-size: 11px;
	letter-spacing: 1px;
	margin-right: 50px;
}

.news .more_link {
	font-size: 10px;
	font-weight: 100;
	position: absolute;
	right: 0px;
	letter-spacing: 1px;
}

.news h3 {
	color: var(--color-text);
	font-size: 14px;
	margin-bottom: 80px;
	font-weight: 100;
	margin-left: 0px;
	letter-spacing: 8px;
	text-align: center;
	line-height: 1.6em;
}

.news ul {
	margin-bottom: 20px;
	margin-left: 0px;
	padding-left: 0px;
}

.news ul li {
	list-style: none;
	font-size: 12px;
	margin-bottom: 17px;
	position: relative;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-text);
	padding-bottom: 6px;
	margin-bottom: 50px;
	line-height: 3.0em;
}

.news ul li span {
	font-size: 13px;
	letter-spacing: 1px;
}

.news ul li span.category-name {
	margin-right: 0px;
	width: 80px;
	display: inline-block;
}

.news ul li .line {
	border-bottom: 1px solid var(--color-gray);
	width: 40px;
	height: 1px;
	display: inline-block;
	margin-left: 30px;
	margin-right: 30px;
	top: -3px;
	position: relative;
}

.news ul li .blank {
	width: 100px;
	display: inline-block;
	position: absolute;
	right: 0px;
	text-align: right;
	font-size: 10px;
	top: 13px;
}

.news ul li a {
	font-size: 12px;
	color: var(--color-text);
}

@media (max-width: 960px) {
	.news {
		width: auto;
		height: auto;
		margin: 70px auto;
		padding: 0px 20px;
		z-index: 0;
		overflow: hidden;
	}

	.news ul li span.date {
		font-size: 10px;
		letter-spacing: 1px;
		margin-right: 50px;
		display: block;
	}

	.news h3 {
		font-size: 16px;
		margin-left: 0px;
		line-height: 1.6em;
	}

	.news ul li {
		margin-bottom: 30px;
	}

	.news ul li .line {
		border-bottom: 1px solid var(--color-gray);
		width: 40px;
		height: 1px;
		display: inline-block;
		margin-left: 10px;
		margin-right: 10px;
		top: 2px;
		position: relative;
	}

	.news ul li a {
		font-size: 11px;
	}

	.news ul li span.category-name {
		width: 0px;
	}

	.news ul li span {
		margin-bottom: 5px;
		font-size: 11px;
	}


	.news ul li .blank {
		top: 28px;
	}


	.top_news ul {
		width: 280px;
		margin: 0 auto;
		padding-left: 0px;
	}

	.top_news {
		padding-top: 14px;
		padding-bottom: 14px;
		margin-bottom: 100px;
	}

	.top_news ul li {
		list-style: none;
	}

	.top_news ul li .date {
		color: var(--color-text);
		margin-right: 10px;
		letter-spacing: 0px;
		font-size: 9px;
		display: block;
		text-align: left;
		margin-bottom: 9px;
	}

	.top_news ul li .text {
		color: var(--color-text);
		letter-spacing: 1px;
		font-size: 11px;
		width: auto;
		display: inline-block;
		text-align: left;
		font-size: 12px !important;
		letter-spacing: 2px;
		margin-bottom: 10px;
	}

	.top_news ul li a {
		color: var(--color-text);
		font-size: 10px;
		letter-spacing: 0px;
		position: static;
		display: block;
		width: 100%;
		text-align: right;
	}




}

.pagination-single .nav-previous.alignleft {
	width: 30%;
	display: inline-block;
	margin-right: 2%;
	text-align: center;
	font-size: 10px;
}

.pagination-single .aligncenter {
	text-align: center;
	width: 34%;
	display: inline-block;
	font-size: 10px;
}

.pagination-single .nav-next.alignright {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 30%;
	display: inline-block;
	font-size: 10px;
	text-align: center;
}



.metaslider {
	position: relative;
	z-index: 0;
	max-width: initial !important;
}

.flexslider {
	border: 0px solid #fff !important;
}


.bg {
	width: 100%;
	height: 400px;
	overflow: hidden;
	margin-bottom: 100px;
}

.bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.header-section.categorylist .head-images,
.header-section.about .head-images,
.header-section.contact .head-images,
.header-section.gardenflow .head-images,
.header-section.single .head-images {
	height: 100%;
	width: 800px;
	margin: 0 auto 50px;
}

.header-section.categorylist img,
.header-section.about img,
.header-section.contact img,
.header-section.gardenflow img,
.header-section.single img {
	object-fit: cover;
	height: 330px;
	width: 100%;
}

.contents {
	padding-top: 100px;
}

.contents .single {
	width: 700px;
	margin: 0 auto 50px;
}

.contents .single img {
	margin-bottom: 20px;
	width: 100%;
	height: auto;
}

.contents .single h3,
.contents .single .category_text {
	margin-bottom: 60px;
	font-size: 14px;
	letter-spacing: 2px;
	text-align: left;
	color: #494848;
	line-height: 1.8em;
}

.contents .single .caption a {
	padding: 5px 10px;
	background-color: var(--color-text);
	font-size: 10px;
	color: #fff;
	font-weight: bold;
}

.contents .single .text {
	line-height: 1.8em;
	font-size: 12px;
	font-family: var(--font-main);
	color: var(--color-text);
	font-weight: normal;
}

.single p,
.single {
	line-height: 2.6em;
	font-size: 12px;
	font-family: var(--font-sub);
	color: var(--color-text);
	letter-spacing: 1.5px;
	font-weight: normal;
}

.contents .single .text iframe {
	width: 100%;
}

.contents .single .text p {
	line-height: 2.6em;
	font-size: 12px;
	font-family: var(--font-sub);
	color: var(--color-text);
	letter-spacing: 1px;
	font-weight: normal;
}


.category-list {
	margin-bottom: 50px;
	text-align: center;
}

.category-list span {
	border: 1px solid var(--color-gray);
	padding: 5px 15px;
	font-size: 12px;
	margin: 0px 5px;
}

.single .date {
	letter-spacing: 2px;
	margin-bottom: 0px;
	line-height: 1.0em;
	font-size: 10px;
}

.single p.location {
	letter-spacing: 3px;
	line-height: 1.0em;
	font-size: 10px;
}

.single p.location img {
	width: 7px;
	height: auto;
	object-fit: cover;
	margin-right: 5px;
	margin-top: 17px;
}

.pagination-single.clearfix {
	overflow: auto;
	width: 500px;
	margin: 50px auto 50px;
	line-height: 1.5em;
	font-size: 13px;
	position: relative;
}

.pagination-single:after,
.pagination-single:before {
	clear: both;
	display: block;
}

.pagination-single a {
	font-family: var(--font-main);
	color: var(--color-text);
	font-size: 20px;
	text-decoration: none;
	font-weight: 100;
	font-size: 11px;
	letter-spacing: 1px;
	padding: 10px 0px;
	display: inline-block;
}

.nav-next.alignright {
	float: right;
}

@media (max-width: 960px) {

	.header-section.categorylist .head-images,
	.header-section.about .head-images,
	.header-section.contact .head-images,
	.header-section.gardenflow .head-images,
	.header-section.single .head-images {
		width: auto;
	}


	.contents .single {
		width: auto;
		padding: 0px 20px;
	}

	.contents .single iframe {
		width: 100%;
	}

	.contents .single img {
		margin-bottom: 20px;
		width: 100%;
		height: auto;
	}

	.pagination-single.clearfix {
		width: auto;
	}
}

.page .frame {
	overflow: hidden;
	position: relative;
	top: 0px;
	height: 500px;
}


.page .blog {
	margin-top: 100px;
}

.page .works .layout_entry {
	width: 380px;
	height: 330px;
}

.page .works .layout_entry img {
	width: 400px;
	height: 200px;
	object-fit: cover;
	margin-bottom: 40px;
}


.contact-area {
	width: 490px;
	margin: 0 auto;
}

.contact-area label {
	display: block;
	font-size: 12px;
	line-height: 2.0em;
	color: var(--color-text);
}

.contact-area p {
	font-size: 12px;
	line-height: 2.0em;
}

@media (max-width: 600px) {

	.contact-area {
		width: auto;
		margin-left: 30px;
		margin-right: 30px;
	}
}

.pageclass_sub .mt100 {
	margin-top: 100px !important;
}

.pageclass_sub .mt130 {
	margin-top: 110px !important;
}

.pageclass_sub .mt100 {
	margin-top: 110px !important;
}

.caption2 {
	font-size: 12px;
	margin-top: -19px;
}

.title img {
	width: 130px;
}

.section.about2 {
	margin-bottom: 100px !important;
	width: 600px;
	margin: 0 auto;
}

ul.category-menu {
	width: 610px;
	margin: 0 auto 100px;
	padding: 0px;
}

.category-menu li {
	display: inline-block;
	width: 200px;
	text-align: center;
}

.category-menu li a {
	font-size: 10px;
	letter-spacing: 1px;
	color: var(--color-text) !important;
	font-weight: 100;
	border: 0px;
	text-decoration: none;
}

.section .category-title {
	margin-bottom: 20px;
	letter-spacing: 2px;
	font-size: 10px;
	color: var(--color-text);
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width:960px) {
	ul.category-menu {
		width: auto;
	}

	.category-menu li {
		width: 100%;
	}

	.section.about,
	.section.about2,
	.section.event,
	.section.map {
		margin-left: 0px;
		margin-right: 0px;
		width: auto;
	}




	.layout_entry_wrapper {
		display: block;
		width: 100%;
	}

	.layout_entry img {
		width: 100%;
		object-fit: cover;
	}



}

.sns-message {
	margin-left: 30px;
	margin-right: 30px;
}

.wpcf7-list-item {
	display: block;
}

.slider video {
	width: 100%;
	object-fit: cover;
	height: 100%;
}





.top_artpiece ul li {
	width: 300px;
}

.top_artpiece ul {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 960px;
	padding: 0px;
}

.top_artpiece ul li {
	width: 300px;
	list-style: none;
	margin: 0px 10px;
	margin-bottom: 50px;
}

.top_artpiece ul li img {
	width: 300px;
	height: 300px;
	object-fit: cover;
	margin-bottom: 20px;
}

.top_artpiece ul li p {
	text-align: center;
	font-size: 11px;
	letter-spacing: 2px;
}


@media screen and (max-width:960px) {

	.top_artpiece ul {
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 auto;
		width: 340px;
		padding: 0px;
	}

	.top_artpiece ul li {
		width: 150px;
		list-style: none;
		margin: 0px 10px;
		margin-bottom: 50px;
	}

	.top_artpiece ul li img {
		width: 150px;
		height: 150px;
		object-fit: cover;
		margin-bottom: 20px;
	}

}





















.top_blog ul li {
	width: 300px;
}

.top_blog ul {
	display: flex;
	flex-flow: column;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 auto;
	width: 960px;
	padding: 0px;
}

.top_blog ul li {
	width: 300px;
	list-style: none;
	margin: 0px 10px;
	margin-bottom: 50px;
}

.top_blog ul li img {
	width: 100%;
	height: 270px;
	object-fit: cover;
	margin-bottom: 20px;
}

.top_blog ul li p.date {
	text-align: center;
	font-size: 10px;
	letter-spacing: 2px;
}

.top_blog ul li p {
	text-align: center;
	font-size: 11px;
	letter-spacing: 2px;
}


@media screen and (max-width:960px) {

	.top_blog ul {
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 auto;
		width: 340px;
		padding: 0px;
	}

	.top_blog ul li {
		width: 150px;
		list-style: none;
		margin: 0px 10px;
		margin-bottom: 50px;
	}

	.top_blog ul li img {
		width: 150px;
		height: auto;
		object-fit: cover;
		margin-bottom: 20px;
	}

}




.exhibition_box {
	display: flex;
	flex-flow: column;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: wrap;
	width: 95%;
	padding: 0px;
	margin-bottom: 50px;
	margin-left: 10px;
}

.exhibition_box::after {
	content: "";
	display: block;
	width: 50%;
}

.exhibition_box .title-area {
	text-align: left !important;
	margin-bottom: 100px;
	font-size: 11px;
	margin-left: 0px;
}

ul.exhibition_box li.box1 {
	list-style: none;
	vertical-align: top;
	margin-bottom: 20px;
	width: 98% !important;
	margin: 0px;
	position: relative;
	margin-bottom: 0px !important;
}


ul.exhibition_box li {
	list-style: none;
	vertical-align: top;
	width: 48%;
	margin: 0px;
	margin-bottom: 0px;
	position: relative;
}

ul.exhibition_box li .texthead {
	font-size: 12px;
    letter-spacing: 1px;
    display: block;
    width: 280px;
    position: absolute;
    top: 20px;
    left: 20px;
    color: #ffffff;
    text-shadow: 1px 1px 3px #484848;
	line-height: 1.6em;
	font-family: var(--font-sub);
	font-weight: bold;
}

ul.exhibition_box li .text1 {
	font-size: 12px;
	letter-spacing: 2px;
	display: block;
	width: 280px;
}

ul.exhibition_box li .text2 {
	font-size: 10px;
	letter-spacing: 1px;
	margin-right: 30px;
	display: inline-block;
	width: 60px;
}

ul.exhibition_box li .text3 {
	font-size: 10px;
	letter-spacing: 1px;
	margin-right: 30px;
	display: inline-block;
	width: 200px;
	margin-bottom: 20px;
}

ul.exhibition_box li img.entry-image {
	width: 100%;
	height: 620px !important;
	object-fit: cover;
	margin-bottom: 20px;
}

ul.exhibition_box li.box1 img.entry-image {
	height: 270px;
}

ul.exhibition_box li .date {
	font-size: 10px;
	letter-spacing: 1px;
	display: inline-block;
	width: auto;
	position: relative;
	left: 0px;
}

ul.exhibition_box li .location {
	font-size: 10px;
	letter-spacing: 3px;
	display: inline-block;
	width: auto;
	position: absolute;
	right: 0px;
}

ul.exhibition_box li .location img {
	width: 7px;
	height: auto;
	object-fit: cover;
	margin-right: 5px;
	margin-top: -1px;
}

ul.exhibition_box li .blank {
	font-size: 10px;
	letter-spacing: 1px;
	display: block;
	text-align: right;
	padding-bottom: 10px;
}

.exhibition_box .btnlink {
	width: 100%;
	text-align: center;
	margin-bottom: 50px;
}

@media screen and (max-width:960px) {

	.exhibition_box {
		width: auto;
		padding: 0px 30px 0px 0px;
		margin-bottom: 50px;
	}

	ul.exhibition_box li {
		list-style: none;
		position: relative;
		width: 100%;
		height: auto;
	}

	ul.exhibition_box li img.entry-image {
		width: 100%;
		height: auto !important;
		object-fit: cover;
		margin-bottom: 20px;
		aspect-ratio: 16/14;
	}

	ul.exhibition_box li.box1 img.entry-image {
		aspect-ratio: 1 / 1;
	}

	ul.exhibition_box li.box2 img.entry-image {
		aspect-ratio: 1 / 1;
	}

	ul.exhibition_box li.box3 img.entry-image {
		aspect-ratio: 1 / 1;
	}
	ul.exhibition_box li .texthead{
		width: auto;
	}

}


.top_onlinestore {
	margin: 0 auto;
	background-color: #ffffff;
	padding-top: 100px;
	padding-bottom: 100px;
	position: relative;
	z-index: 3;
}

.top_onlinestore .title-area {
	text-align: center;
	margin-bottom: 50px;
	font-size: 11px;
	margin-left: 0px;
}

ul.onlinestore_box {

	width: 500px;
	margin: 0 auto;
	padding-left: 0px;
}

ul.onlinestore_box li {
	list-style: none;
	vertical-align: top;
	margin-bottom: 20px;
	width: auto;
	margin: 0px;
	position: relative;
	border-bottom: 1px dashed #555555;
	line-height: 3em;
}

ul.onlinestore_box li .text1 {
	font-size: 11px;
	letter-spacing: 2px;
	display: inline-block;
	text-align: left;
	width: 49%;
}

ul.onlinestore_box li .url {
	font-size: 10px;
	letter-spacing: 2px;
	display: inline-block;
	text-align: right;
	width: 49%;
}


.btnlink a {
	border: 1px solid #888888;
	padding: 10px 100px;
	display: inline-block;
	font-size: 11px;
	letter-spacing: 2px;
}

.head-images {
	margin: 0px 50px 100px;
}

.head-images video {
	height: 500px;
	width: 100%;
	object-fit: cover;
}





.text .sns-icon {
	overflow: auto;
	width: 300px;
	margin: 0 auto 50px;
}

.text .sns-icon a img {
	width: 40px;
	height: auto;
	margin-bottom: 30px;
}

.text .sns-icon .item {

	font-size: 11px;
	letter-spacing: 1px;
	color: #494848 !important;
	font-weight: 100;
	border: 0px;
	display: inline-block;
	text-align: center;
	width: 90px;
	margin-bottom: 20px;
	font-style: italic;
}

.text .sns-icon .item a {
	text-decoration: none;
}


p.onlinelink {
	width: 100%;
	border: 1px solid #aeaeae;
	padding: 20px 0px;
	text-align: center;
	background-color: #fff;
}


.blogphoto {
	width: auto;
	margin: 0px 20px 50px;
}

.blogphoto img {
	width: 100%;
}

.radio .more_link {
	border-bottom: 1px solid #888;
	display: inline-block;
	font-style: italic;
}

.radio ul li p.date {
	text-align: left;
	font-size: 10px;
	letter-spacing: 2px;
	margin-bottom: 5px;
}

.radio ul li p {
	text-align: left;
	font-size: 11px;
	letter-spacing: 2px;
	margin-bottom: 8px;
}


.flex-control-paging li a {
	width: 3px !important;
	height: 3px !important;
}

.flexslider.view_wide {
	width: 100% !important;
	right: 0px !important;
	height: auto !important;
	background: transparent !important;
	text-align: right;
}

.metaslider.metaslider-flex {
	width: 90% !important;
	display: inline-block;
}

.top_image_banner {
	margin-bottom: 100px;
}

.profilevideo {
	position: absolute;
	width: 100%;

	z-index: -1;
	top: 0px;
}

.profilevideo video {
	width: 100%;
}

.profile_triangle {
	height: 110px;
	width: 100%;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	background-color: var(--color-bg);
	position: relative;
	z-index: 2;
}

.profile-box {
	padding-top: 90px;
}

.profile-box .title-area {
	text-align: center;
	margin-left: 0px;
}

.flexwrap {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	width: 620px;
	margin: 0 auto;
}

.flexwrap::after {
	content: "";
	display: block;
	width: 50%;
}

.flexcon {
	width: 50%;
	margin: 10px;
	text-align: center;
	margin: 0 auto 0px;
	padding-bottom: 60px;
	position: relative;
	height: auto;
}

.contents {

	background-color: var(--color-bg);
}

.flexcon img {
	width: 100%;
}

.flexcon .profile-text {
	font-size: 11px;
	line-height: 2.4em;
	text-align: left;
	margin-left: 30px;
	letter-spacing: 1px;
}

.flexcon .sns-linl {
	text-align: left;
	margin-left: 30px;
}

.flexcon .sns-linl a {
	padding-bottom: 2px;
	border-bottom: 1px solid var(--color-gray);
	font-size: 11px;
	line-height: 1.8em;
	text-align: left;
	letter-spacing: 1px;
	margin-right: 20px;
}

@media screen and (max-width:960px) {

	.flexwrap {
		width: 100%;
	}

	.flexcon {
		width: 100%;
	}

	.flexcon {
		width: 100%;
		padding: 0px 30px;
		margin-bottom: 30px;
	}

	.flexcon .profile-text {
		margin-left: 0px;
	}

	.flexcon .sns-linl {
		margin-left: 0px;
	}

	.metaslider.metaslider-flex {
		width: 100% !important;
		display: inline-block;
		padding: 0px 20px;
	}


	.top_image_banner {
		margin-bottom: 100px;
	}

	ul.onlinestore_box {
		width: 100%;
		margin: 0 auto;
		padding: 0px 20px;
	}


	.profilevideo video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.profilevideo {
		position: absolute;
		z-index: -1;
		top: 0px;
		height: 100%;
	}

}



.footer-logo img {
	width: 140px;
	margin-top: 30px;
}

.footer-flex {
	display: flex;
	flex-flow: row;
	padding-right: 70px;
	margin-right: 80px;
	background-color: #F7F7F7;
	padding-top: 100px;
	padding-bottom: 100px;
}

.footer-flex-item {
	flex: 1 1 auto;
	flex-shrink: 0;
}

.footer-flex-item ul {
	margin-left: 0px;
	padding-left: 0px;
}

.footer-flex-item h3 {
	text-align: left;
	font-size: 13px;
	font-weight: bold;
	font-family: var(--font-sub);
	margin-bottom: 40px;
	letter-spacing: 1px;
	font-size: 16px;
}

.footer-flex-item h4 {
	text-align: left;
	font-size: 13px;
	font-weight: bold;
	font-family: var(--font-sub);
	margin-bottom: 20px;
	letter-spacing: 1px;
	font-size: 16px;
}

.footer-flex-item li {
	list-style: none;
	text-align: left;
	font-size: 13px;
	font-weight: bold;
	font-family: var(--font-sub);
	margin-bottom: 15px;
	letter-spacing: 1px;
}

.footer-flex-item li:last-child {
	margin-bottom: 40px;
}

.footer-flex-item li a {
	text-align: left;
	font-size: 13px;
	font-weight: bold;
	font-family: var(--font-sub);
}

.footer-flex-item li a span {
	text-align: left;
	font-size: 9px;
	font-weight: 100;
	font-family: var(--font-sub);
	margin-left: 20px;
	position: relative;
	top: -2px;
	color: #888888;
}

.footer-flex-item.item1 {
	width: 33%;
	margin-left: 20px;
}

.footer-flex-item.item1 li {}

.footer-flex-item.item2 {
	width: 33%;
	margin-left: 20px;
	border-left: 1px solid #888888;
	padding-left: 7%;
	padding-top: 40px;
}

.footer-flex-item.item2 li {}

.footer-flex-item.item3 {
	width: 23%;
	margin-left: 20px;
	padding-top: 40px;
}

.footer-flex-item.item3 li {}

.footer-flex-item.item3 li a {
	font-size: 12px !important;
}

.footer-flex-item.item4 {
	width: 500px;
	margin-top: 40px;
}

.footer-flex-item.item4 li {}

.footer-flex-item .detail {
	margin: 0;
	border: none;
	border-radius: 6px;
	padding: 12px 0;
	width: 100%;
	font-size: 16px;
	text-align: center;
}

.footer-banner img {
	width: 100%;
}

@media screen and (max-width:1280px) {
	.footer-flex-item.item1 {
		width: 16%;
		margin-left: 20px;
	}

	.footer-flex-item.item2 {
		width: 22%;
	}

	.footer-flex-item.item2 {
		width: 22%;
		padding-left: 5%;
	}

	.footer-flex-item.item3 {
		width: 7%;
	}

	.footer-logo img {
		width: 120px;
		margin-top: 50px;
	}

}

@media screen and (max-width:960px) {
	.footer-flex-item.item1 {
		width: 16%;
		margin-left: 0px;
		text-align: left;
	}

	.footer-flex-item.item2 {
		width: 22%;
		padding-left: 0px;
		margin-left: 30px;
		border-left: 0px solid #888888;
	}

	.footer-flex-item.item3 {
		width: 23%;
		margin-left: 30px;
		padding-top: 40px;
	}

	.footer-flex-item h3 {
		text-align: center;
		line-height: 1.6em;
	}

	.footer-logo img {
		width: 80px;
		margin-top: 50px;
		margin-left: 30px;
	}

	.footer-flex {
		display: block;
		width: 100%;
		padding-right: 60px;
	}

	.footer-flex-item {
		width: 100% !important;
		margin-bottom: 50px;
	}

	.footer-flex-item h3 {
		text-align: left;
		line-height: 1.6em;
	}

}


.footerbg {
	padding-right: 60px;
}

.footerbg img {
	width: 100%;
	object-fit: cover;
	height: auto;
}

@media screen and (max-width:960px) {
	.footerbg img {
		width: 100%;
		object-fit: cover;
		height: 250px;
	}
}



.sublogotitle {
	text-align: center;
	margin-bottom: 50px;
}

.sublogotitle img {
	width: 50px;
	height: auto;
	margin-bottom: 30px;
}

/* ロゴマーク下のラベル（ABOUTの「自己紹介として」）。11pxは小さすぎたため拡大（久米さん指摘 2026-07-20）。
   PC 14px（ページタイトルと同格で読みやすく、繊細さは維持）／モバイル 13px。
   ※このpが表示テキストを持つのはABOUTページのみ（FRAMESは空） */
.sublogotitle p {
	font-size: 14px;
	letter-spacing: 3px;
}

@media screen and (max-width:960px) {
	.sublogotitle p {
		font-size: 13px;
	}
}

.subheadimage {}

.buttonset {
	width: 500px;
	margin: 0 auto;
	text-align: center;
	height: 23px;
	margin-bottom: 100px;
}

span.inner {
	width: 5%;
	display: inline-block;
}

a.framebutton {
	border: 1px solid #888888;
	padding: 10px 50px;
	display: inline;
}

a.framebutton img {
	width: 11px;
	position: relative;
	top: -2px;
	margin-right: 10px;
}

.subheadimage video {
	width: 500px;
	height: auto;
	margin-bottom: 50px;
	object-fit: cover;
	display: block;
	margin: 0 auto 50px;
}

.middlebg {
	margin-bottom: 100px;
	height: 330px;
	overflow: hidden;
}

.middlebg img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 13;
	object-fit: cover;
}

.frame-wrap {
	width: 800px;
	margin: 0 auto;
	margin-bottom: 100px;
}

.frame-wrap .frame-h {
	font-size: 18px;
	font-family: var(--font-main);
	font-weight: 100;
	letter-spacing: 2px;
	margin-top: 50px;
	margin-bottom: 40px;
	line-height: 1.8em;
}

.frame-wrap .frame-p {
	font-size: 12px;
	font-family: var(--font-sub);
	margin-bottom: 20px;
	line-height: 2.4em;
	letter-spacing: 1px;
	font-weight: normal;
}

.frame-wrap .frame-p .frame-cap {
	font-size: 11px;
	display: inline-block;
	font-weight: bold;
	padding-bottom: 10px;
	font-family: var(--font-sub);
	color: #5e5e5e;
}

.subpage-creator {
	width: 600px;
	margin: 0 auto 100px;
}

.subpage-creator img {
	width: 100%;
}

.creatortitle {
	font-size: 15px;
	letter-spacing: 3px;
	font-family: var(--font-main);
	margin-bottom: 60px;
	text-align: center;
}

@media screen and (max-width:960px) {
	a.framebutton {
		font-size: 10px;
	}

	.subpage-creator {
		width: auto;
	}

	.buttonset {
		width: auto;
	}

	.subheadimage video {
		width: 100%;
	}

	a.framebutton {
		padding: 10px 7%;
	}

	.frame-wrap {
		width: auto;
	}

	.subpage-temlate {
		padding: 0px 20px;
		padding-right: 20px;
	}

}


.case-2popup {
	display: flex;
	margin-bottom: 100px;
}

.case-2popup .unit {
	width: 50%;
}

.case-2popup a {
	display: inline-block;
}

.case-2popup .unit img {
	width: 100%;
	object-fit: cover;
	height: 100%;
}

.case-2popup a p {
	text-align: center;
	margin: 30px 0px;
	letter-spacing: 1.5px;
	font-size: 10px;
	line-height: 1.6em;
}

.case-3popup {
	display: flex;
	margin-bottom: 50px;
}

.case-3popup a {
	display: inline-block;
}

.case-3popup .unit {
	width: 33%;
}

.case-3popup .unit img {
	width: 100%;
	object-fit: cover;
	height: 100%;
}

.case-3popup a p {
	text-align: center;
	margin: 30px 0px;
	letter-spacing: 3px;
	font-size: 11px;
}

section.button-area {
	text-align: right;
	padding-right: 50px;
	margin-bottom: 150px;
}

section.button-area .btn {
	border: 1px solid #777777;
	padding: 14px 80px;
	letter-spacing: 3px;
	font-size: 10px;
	color: #777777;
}

.frame-2popup {
	display: flex;
	margin-bottom: 100px;
	margin-bottom: 2%;
}

.frame-2popup .unit {
	width: 49%;
}

.frame-2popup .unit.left {
	margin-right: 1%;
}

.frame-2popup .unit.right {
	margin-left: 1%;
}

.frame-2popup .unit img {
	width: 100%;
	object-fit: cover;
	height: 100%;
	aspect-ratio: 1 / 1;
}

.frame-1popup {
	margin-bottom: 2%;
}

.frame-1popup .unit img {
	width: 100%;
	object-fit: cover;
	height: 100%;
	aspect-ratio: 4 / 2;
}

.contact-page .text h3 {
	font-size: 18px;
	font-family: var(--font-main);
	font-weight: 100;
	letter-spacing: 2px;
	margin-bottom: 30px;
	line-height: 1.8em;
}

.contact-page .text,
.contact-page p {
	font-size: 12px;
	font-family: var(--font-sub);
	line-height: 2.4em;
	letter-spacing: 1.6px;
	font-weight: normal;
}

@media screen and (max-width:960px) {
	section.button-area {
		padding-right: 0px;
		text-align: center;
	}
}



.tag-filter-toggle {
	text-align: left;
	margin: 20px 0 10px;
}

.tag-filter-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border: 1px solid #ccc;
	background: #fff;
	color: #5d5d5d;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease;
	width: 34px;
	height: 34px;
	border-radius: 34px;
	left: 20px;
	position: relative;
	top: -20px;
}

.tag-filter-toggle-btn:hover {
	background: #f5f5f5;
}

.tag-filter-toggle-btn .animated-arrow-wrapper {
	display: inline-flex;
	transition: transform 0.3s ease;
}

.tag-filter-toggle-btn.is-open .animated-arrow-wrapper {
	transform: rotate(90deg);
}

@keyframes animateAttention {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(3px);
	}
}

.animated-arrow-wrapper .arrow {
	display: inline-block;
	animation: animateAttention 1.5s infinite ease-in-out;
}

.tag-filter-toggle-btn.is-open .animated-arrow-wrapper .arrow {
	animation: none;
}

.tag-list-wrapper {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.4s ease, opacity 0.4s ease, transform 0.4s ease, margin 0.4s ease;
	transform: translateY(-10px);
	margin-top: 0;
	margin-bottom: 0;
}

.tag-list-wrapper.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: translateY(0);
	margin-top: 10px;
	margin-bottom: 30px;
}

.tag-list-inner {
	overflow: hidden;
}

.case-tags-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}

@media (max-width: 768px) {
	.case-tags-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.case-tags-grid li a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 5px;
	border: 1px solid #ccc;
	text-decoration: none;
	font-size: 10px;
	letter-spacing: 0.05em;
	background: #fff;
	color: #333;
	transition: all 0.3s ease;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
	letter-spacing: 0px;
	font-weight: bold;
}

.case-tags-grid li a:hover {
	background: #f5f5f5;
	border-color: #999;
}

.case-tags-grid li a.is-active {
	background: #999;
	color: #fff;
	border-color: #999;
}

/* 縦の短い画面（PC表示）で右バーの縦ロゴとアイコンが収まるようにする調整（2026-07-18追加） */
@media screen and (min-width: 961px) and (max-height: 980px) {
h1.logo {
margin: 70px auto 40px;
top: 30px;
height: auto;
}

header .sns {
top: 20px;
}
}

@media screen and (min-width: 961px) and (max-height: 810px) {
h1.logo {
font-size: 14px;
letter-spacing: 14px;
margin: 60px auto 25px;
top: 30px;
}

h1.logo span {
margin-top: 25px;
}

header .sns {
top: 5px;
}

header .sns a img {
padding: 31%;
}
}


/* フルオーダー説明ページ（2026-07-18追加） */
.fullorder-page {
width: 92%;
max-width: 860px;
margin: 0 auto;
padding-bottom: 40px;
}

.fullorder-page .fo-lead {
font-size: 15px;
letter-spacing: 2px;
line-height: 2.6em;
font-weight: 100;
text-align: center;
margin: 60px 0 60px;
}

.fullorder-page .fo-text {
font-size: 12px;
letter-spacing: 1px;
line-height: 2.4em;
font-weight: 100;
text-align: center;
margin-bottom: 40px;
}

.fullorder-page .fo-gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 80px 0 20px;
}

.fullorder-page .fo-gallery img {
width: calc((100% - 20px) / 3);
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}

.fullorder-page .fo-gallery-cap {
font-size: 11px;
letter-spacing: 1px;
text-align: center;
color: var(--color-gray);
margin-bottom: 40px;
}

.fullorder-page .fo-morelink {
text-align: center;
margin-bottom: 60px;
}

.fullorder-page .fo-morelink a,
.fullorder-page .fo-cta a {
display: inline-block;
font-size: 12px;
letter-spacing: 2px;
border: 1px solid var(--color-text);
padding: 14px 40px;
}

.fullorder-page .fo-morelink a:hover,
.fullorder-page .fo-cta a:hover {
background-color: var(--color-text);
color: var(--color-white) !important;
}

.fullorder-page .fo-h {
font-size: 14px;
font-weight: 100;
letter-spacing: 3px;
text-align: center;
margin: 60px 0 40px;
}

.fullorder-page .fo-flow {
list-style: none;
padding: 0;
max-width: 560px;
margin: 0 auto;
}

.fullorder-page .fo-flow li {
position: relative;
padding: 0 0 36px 58px;
}

.fullorder-page .fo-flow li:not(:last-child):before {
content: "";
position: absolute;
left: 19px;
top: 44px;
bottom: 0px;
width: 1px;
background-color: var(--color-border);
}

.fullorder-page .fo-step {
position: absolute;
left: 0;
top: 0;
width: 38px;
height: 38px;
border: 1px solid var(--color-text);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-family: var(--font-sub);
}

.fullorder-page .fo-flow h3 {
font-size: 13px;
font-weight: 100;
letter-spacing: 2px;
margin: 8px 0 10px;
}

.fullorder-page .fo-flow p {
font-size: 12px;
letter-spacing: 1px;
line-height: 2.2em;
font-weight: 100;
}

.fullorder-page .fo-cta {
text-align: center;
margin: 60px 0 120px;
}

@media screen and (max-width:960px) {
.fullorder-page .fo-gallery img {
width: calc((100% - 10px) / 2);
}

.fullorder-page .fo-lead {
font-size: 13px;
margin-top: 50px;
}

.fullorder-page .fo-text br {
display: none;
}

.fullorder-page .fo-text {
text-align: left;
}
}


/* 店舗紹介ページ（2026-07-18追加・基本レイアウトは .fullorder-page を共用） */
.shop-page .shop-hero {
margin: 70px 0 40px;
}

.shop-page .shop-hero img {
width: 100%;
display: block;
}

.shop-page .fo-text a {
font-style: italic;
border-bottom: 1px dotted var(--color-text);
padding-bottom: 2px;
}

.shop-page .shop-map {
margin: 40px auto 0;
}

.shop-page .shop-map iframe {
width: 100%;
height: 380px;
border: 0;
display: block;
filter: grayscale(1);
}

.shop-page .shop-soudan {
max-width: 560px;
margin: 0 auto 20px;
border: 1px solid var(--color-border);
padding: 26px 30px 22px;
text-align: center;
}

.shop-page .shop-soudan-label {
font-size: 11px;
letter-spacing: 2px;
color: var(--color-gray);
margin-bottom: 10px;
}

.shop-page .shop-soudan-title {
font-size: 13px;
letter-spacing: 1px;
font-weight: 100;
line-height: 1.8em;
}


/* HOME お知らせ一覧（2026-07-18追加） */
.home-news {
max-width: 640px;
margin: 0 auto;
padding: 0 20px;
}

.home-news ul {
list-style: none;
padding: 0;
margin: 0;
}

.home-news li {
border-bottom: 1px solid #e5e5e5;
}

.home-news li:first-child {
border-top: 1px solid #e5e5e5;
}

.home-news li a {
display: block;
padding: 22px 6px;
font-weight: 100;
}

.home-news-date {
font-family: var(--font-sub);
font-size: 11px;
letter-spacing: 2px;
color: var(--color-gray);
display: block;
margin-bottom: 6px;
}

.home-news-title {
font-size: 13px;
letter-spacing: 1px;
line-height: 1.8em;
display: block;
}


/* HOME お知らせのボタンは中央に・区切り線との間隔を確保（2026-07-18追加） */
#NEWS .button-area {
text-align: center;
padding-right: 0px;
margin-top: 60px;
}


/* FRAMESページ ラインナップ（2026-07-18追加） */
.fl-lead {
font-size: 13px;
letter-spacing: 2px;
line-height: 2.6em;
font-weight: 100;
text-align: center;
margin: 60px 0 10px;
}

.fl-cta {
text-align: center;
margin: 40px 0 20px;
}

.fl-cta a {
display: inline-block;
font-size: 12px;
letter-spacing: 2px;
border: 1px solid var(--color-text);
padding: 14px 40px;
margin: 0 10px 14px;
font-weight: 100;
}

.fl-cta a:hover {
background-color: var(--color-text);
color: var(--color-white) !important;
}

.fl-fullorder {
text-align: center;
margin: 80px 0 40px;
}

.fl-fullorder-text {
font-size: 12px;
letter-spacing: 1px;
line-height: 2.2em;
font-weight: 100;
}

@media screen and (max-width:960px) {
.fl-lead {
font-size: 12px;
letter-spacing: 1px;
}

.fl-lead br {
display: none;
}
}

/* HOME 額装の事例のボタンも中央に（2026-07-18追加） */
#CASE .button-area {
text-align: center;
padding-right: 0px;
}

/* HOME オーダーの種類・実店舗セクションの下に余白（2026-07-18追加） */
#ORDER,
#STORE {
padding-bottom: 120px;
}

/* HOME クリックできる画像のホバー（2026-07-18追加、2026-07-20修正：画像は薄くなるだけ、下のキャプション文字がふわっと少し大きくなる） */
.case-2popup a[href] img,
.frame-2popup a[href] img {
transition: filter 0.4s ease;
}

body.gentle-lazy-enabled .case-2popup a[href]:hover img,
body.gentle-lazy-enabled .frame-2popup a[href]:hover img,
.frame-2popup a[href]:hover img,
.case-2popup a[href]:hover img {
filter: opacity(0.7);
}

.case-2popup a[href] p,
.frame-2popup a[href] p {
transition: transform 0.4s ease;
}

.case-2popup a[href]:hover p,
.frame-2popup a[href]:hover p {
transform: scale(1.08);
}

/* FRAMES 木とデザインの一覧インデックス（2026-07-18追加） */
.fl-index {
max-width: 720px;
margin: 0 auto 110px;
}

.fl-index-label {
font-size: 15px;
letter-spacing: 2px;
font-weight: 100;
text-align: center;
margin: 44px 0 18px;
}

.fl-index-grid {
display: flex;
gap: 14px;
justify-content: center;
}

.fl-index-grid a {
display: block;
width: calc((100% - 28px) / 3);
font-weight: 100;
}

body .fl-index .fl-index-grid img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: filter 0.4s ease;
}

body.gentle-lazy-enabled .fl-index .fl-index-grid a:hover img,
.fl-index .fl-index-grid a:hover img {
filter: opacity(0.7);
}

.fl-index-grid span {
display: block;
font-size: 13px;
letter-spacing: 1px;
text-align: center;
margin-top: 10px;
}

@media screen and (max-width:960px) {
.fl-index {
width: 92%;
}

.fl-index-grid {
gap: 8px;
}

.fl-index-grid a {
width: calc((100% - 16px) / 3);
}

.fl-index-grid span {
font-size: 10px;
letter-spacing: 0.5px;
}
/* インデックスの「木の種類」「デザイン」：モバイルは13px（PCは15px。久米さん指摘 2026-07-20 で12px→拡大） */
.fl-index-label {
font-size: 13px;
}
}

/* ページトップへ戻るボタン（2026-07-18追加） */
.pagetop {
position: fixed;
right: 0;
bottom: 22px;
width: 80px;
z-index: 4001;
text-align: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: filter 0.4s ease;
}

body:has(.globalmenu.open) .pagetop {
opacity: 0 !important;
pointer-events: none !important;
}

.pagetop.show {
opacity: 1;
pointer-events: auto;
}

.pagetop-arrow {
display: block;
width: 8px;
height: 8px;
border-top: 1px solid var(--color-text);
border-left: 1px solid var(--color-text);
transform: rotate(45deg);
margin: 0 auto 6px;
}

.pagetop-text {
display: block;
font-family: var(--font-sub);
font-size: 9px;
letter-spacing: 2px;
color: var(--color-text);
}

.pagetop:hover {
opacity: 0.5;
}

@media screen and (max-width:960px) {
.pagetop {
right: 74px;
bottom: 14px;
width: 44px;
padding: 12px 0 10px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--color-border);
border-radius: 50%;
}
}

/* Q&Aページ（2026-07-19追加） */
.faq-page {
width: 92%;
max-width: 760px;
margin: 0 auto;
padding-bottom: 40px;
}

.faq-lead {
font-size: 13px;
letter-spacing: 2px;
line-height: 2.4em;
font-weight: 100;
text-align: center;
margin: 60px 0 70px;
}

.faq-toc {
list-style: none;
padding: 0;
max-width: 640px;
margin: 0 auto 110px;
border-top: 1px solid #e5e5e5;
}

.faq-toc li {
border-bottom: 1px solid #e5e5e5;
}

.faq-toc li a {
display: block;
padding: 20px 6px;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.8em;
font-weight: 100;
}

.faq-toc li a:hover {
color: var(--color-gray) !important;
}

.faq-toc-q {
font-family: var(--font-sub);
font-size: 11px;
letter-spacing: 1px;
color: var(--color-gray);
margin-right: 14px;
}

.faq-item {
max-width: 640px;
margin: 0 auto 90px;
}

.faq-q {
font-size: 14px;
font-weight: 100;
letter-spacing: 2px;
line-height: 2em;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border);
}

.faq-q span {
font-family: var(--font-sub);
font-size: 13px;
color: var(--color-gray);
margin-right: 14px;
}

.faq-a {
font-size: 12px;
letter-spacing: 1px;
line-height: 2.4em;
font-weight: 100;
}

.faq-a p {
margin-bottom: 22px;
}

.faq-a a {
border-bottom: 1px solid var(--color-border);
}

.faq-a img {
max-width: 100%;
height: auto;
display: block;
margin: 30px auto;
}

.faq-contact {
text-align: center;
margin: 110px 0 40px;
}

.faq-contact-text {
font-size: 12px;
letter-spacing: 1px;
line-height: 2.2em;
font-weight: 100;
margin-bottom: 10px;
}

@media screen and (max-width:960px) {
.faq-lead br {
display: none;
}
}

/* モバイル微調整（2026-07-19追加） */
@media screen and (max-width:960px) {
.fl-cta a {
padding: 13px 18px;
letter-spacing: 1px;
margin: 0 4px 12px;
}

.fullorder-page .fo-h {
font-size: 13px;
letter-spacing: 2px;
}
}

/* 店舗ページの住所・営業時間の改行はモバイルでも維持（2026-07-19追加） */
@media screen and (max-width:960px) {
.shop-page .fo-text br {
display: inline;
}
}

/* ==== スマホ表示・可読性の修正（2026-07-20追加） ==== */

/* 英数字の可読性：Helvetica Neue（Apple端末では極細で描画される）をやめ、
   Windowsと同じArial基準に統一。日本語の見た目は変わらない */
:root {
	--font-sub: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* Q&A一覧：回答本文の行間（WP自動生成のpはクラスが無く、
   リセットの line-height:1em が直接当たるため個別指定が必要） */
.faq-a p,
.faq-a li {
	line-height: 2.4em;
}

/* Q&A：折り返し行の左端を「Q」の後の文字はじまりに揃える */
.faq-q {
	display: flex;
	align-items: baseline;
}

.faq-q span {
	flex: none;
}

.faq-toc li a {
	display: flex;
	align-items: baseline;
}

.faq-toc-q {
	flex: none;
}

/* 本文中のテキストリンクに下線（リンクだと分かるように） */
.fullorder-page .fo-text a {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 1px;
}

/* スマホ専用の改行 */
.br-sp {
	display: none;
}

@media screen and (max-width:960px) {
	.br-sp {
		display: inline;
	}

	/* 右バー：ロゴを実寸化し、SNSアイコン4つを上へ
	   （Safariの下部バーにBASEアイコンが隠れる問題の対策） */
	h1.logo {
		top: 30px;
		height: auto;
		margin: 90px auto 0;
	}

	header .sns {
		top: 90px;
	}

	/* スライドメニュー：HOMEが画面下（Safariバー裏）に見切れるため
	   開始位置と間隔を詰めて10項目を画面内に収める（フォントサイズは維持） */
	.globalmenu ul {
		top: 10%;
	}

	.globalmenu li {
		margin-bottom: 14px;
	}

	.globalmenu li.mb50 {
		margin-bottom: 30px !important;
	}

	header .sns a img {
		padding: 30%;
	}

	/* 帯写真（ABOUTページ）：スマホでは拡大されすぎるため
	   高さを抑え、パララックスの拡大分（125%）も無効にする */
	.middlebg {
		height: 200px;
	}

	.middlebg img.parallax-img {
		/* テンプレート内のインラインstyle（125%指定）より優先させるため !important */
		height: 100% !important;
		transform: none !important;
	}

	/* 超横長パノラマ（middlebg.jpg）はさらに低い帯にして切り取りを減らす */
	.middlebg:has(img[src*="middlebg"]),
	.middlebg:has(img[data-src*="middlebg"]) {
		height: 100px;
	}
}

/* ==== PC（≥961px）の文字サイズ引き上げ（2026-07-20追加・可読性向上） ====
   スマホ（≤960px）は別メディアクエリのため影響なし。行間はem指定で自動追従しレイアウト不変。
   テーマ側に .frame-wrap .frame-p 等の詳細度の高い指定があるため !important で上書き */
@media screen and (min-width:961px){
	.frame-p,
	.fo-text,
	.faq-a,
	.faq-toc li a,
	.faq-contact-text { font-size: 14px !important; }

	/* HOME縦書き導入文：14px化。line-heightを元の21.6px（1.8em×12px）に固定して
	   列幅を保ち、height:auto で内容に追従させ折り返しゼロ＝改行位置を元通りに維持
	   （固定height だと端末のフォント差で折り返す危険があるため auto が堅牢） */
	.intro-text {
		font-size: 14px !important;
		height: auto !important;
		/* 行間（縦書きの列間隔）を少しゆったりに 21.6→24px。
		   列が広がるぶん width:fit-content＋margin auto で中央を維持（cx968） */
		line-height: 24px !important;
		width: fit-content !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* HOME導入部の小見出し「久米装枠舎のはじまり」と「Read more」を少しだけ拡大 */
	.intro-head { font-size: 13px !important; }
	.intro > a { font-size: 11px !important; }

	.fl-lead,
	.faq-lead { font-size: 15px !important; }

	.fo-lead { font-size: 16px !important; }

	.frame-h { font-size: 20px !important; }
	.fo-h { font-size: 18px !important; }
	.faq-q { font-size: 16px !important; }
	.creatortitle { font-size: 17px !important; }
	.home-news-title { font-size: 14px !important; }

	.btn { font-size: 12px !important; }
	.fl-cta a,
	.fo-cta a { font-size: 13px !important; }

	.caption { font-size: 11px !important; }
	.home-news-date,
	.fo-gallery-cap { font-size: 12px !important; }

	/* HOMEの写真下キャプション（作家名・ライン名・実店舗/ストア名）を少しだけ拡大 */
	.case-2popup a p { font-size: 12px !important; }

	/* HOMEのセクション小タイトル（額装の事例・オーダーの種類・実店舗とオンラインストア・お知らせ）を少しだけ拡大。
	   .title-area は subpage-title-area とは別クラスなので他ページの見出しには影響しない */
	.title-area .title { font-size: 16px !important; }

	/* HOMEトップの縦ロゴ「久米装枠舎／Kume Frame」を少しだけ拡大。
	   H3既定700はKlee One（400/600のみ）だと疑似ボールドでにじむため実在の600を指定。
	   height:auto で内容に追従、text-align/margin auto で横中央は自動維持 */
	.logo.top { font-size: 18px !important; height: auto !important; font-weight: 600 !important; }
	.logo.top span { font-size: 12px !important; }
}


/* ==== フッター PARTNER/OWNER の余白バランス（2026-07-20追加） ====
   OWNER'S WEBSITE 見出しの上に余白（padding-top）を足してグループを明確に区切り、
   見出し→リンクの間隔（margin-bottom）を PARTNER WEBSITE と同じ40pxに揃える */
.footer-flex-item.item3 h4 {
	/* padding-top は「ただ、そこ」の下端を左カラムの ONLINE STORE の下端に揃えるため31px
	   （22pxだと9px上にずれる。目視＋実測で下端一致を確認） */
	padding-top: 31px;
	margin-bottom: 40px;
}


/* ==== HOME「オーダーの種類」「実店舗とオンラインストア」の写真を1:1に（2026-07-20追加） ====
   .case-2popup共通の height:100%（flexで縦長になる）を、この2セクションだけ aspect-ratio 1/1 で正方形に。
   CASE「額装の事例」は対象外なのでID指定で限定 */
#ORDER .case-2popup .unit img,
#STORE .case-2popup .unit img {
	aspect-ratio: 1 / 1;
	height: auto;
}


/* ==== HOME ボタン「これまでのお知らせをみる」等のホバー（2026-07-20追加） ====
   FRAMES/フルオーダーの .fl-cta/.fo-cta と同じ「背景を反転・文字を白に」パターンに揃える */
.btn:hover {
background-color: var(--color-text);
color: #ffffff !important;
transition: background-color 0.3s ease, color 0.3s ease;
}

.btn {
transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==== CASEページ（額装の事例一覧）：セクション間の余白とホバー（2026-07-20追加） ====
   works_entry同士がmargin-bottom:0pxで隙間なく接していたため、
   別々の展示だと分かるよう適度な余白を追加 */
.works_entry {
overflow: hidden;
}

/* 2×2グリッド内は余白なし（PC/スマホ共通・.works_entryの本来のmargin-bottom:0）。
   グリッドと下の工房写真(footerbg)の間だけ90px空ける。CASEページ限定（久米さん指摘 2026-07-20） */
body.category-case .section.works {
padding-bottom: 90px;
}

.works_entry a img {
/* body.gentle-lazy-enabled .gentle-lazy-media の transition:opacity（詳細度が高い）に
   transformが上書きされて効かず、瞬時に変化していたため !important で確実に指定。
   読込時のフェードイン（opacity）はそのまま残す */
transition: opacity 0.6s ease-in-out, transform 0.9s ease !important;
}

.works_entry .title_section {
transition: transform 0.9s ease;
transform-origin: top left;
}

.works_entry:hover a img {
transform: scale(1.04);
}

.works_entry:hover .title_section {
transform: scale(1.06);
}

/* NEWSページ：CASEと同じホバー（写真と文字がふわっと拡大）。久米さん依頼 2026-07-20。
   構造はCASEとほぼ同じで、li.box* がコンテナ、img.entry-image が写真、p.texthead が写真に重なる白文字。
   .exhibition_box はNEWSページのみで使用（他ページに影響なし）。

   ★クリップ枠は li ではなく「画像と同じ大きさの a」に置くこと（久米さん指摘 2026-07-20の不具合修正）。
   画像には margin-bottom:20px（項目間の余白）があり li は画像より20px下まであるため、
   li に overflow:hidden を掛けると拡大した画像がその余白にはみ出し、
   「写真が大きくなって下の余白が狭くなる」不具合になる。
   そこで a を画像ぴったりのブロックにして overflow:hidden を掛け、
   20pxの余白は img の margin から li の padding-bottom に移して見た目の間隔は元のまま維持する
   （20px は PC・モバイル共通）。 */
.exhibition_box li {
padding-bottom: 20px;
}

.exhibition_box li a {
display: block;
overflow: hidden;
}

.exhibition_box li a img {
display: block;
margin-bottom: 0 !important;
/* CASEと同様、gentle-lazyの transition:opacity に上書きされないよう !important で両方指定 */
transition: opacity 0.6s ease-in-out, transform 0.9s ease !important;
}

.exhibition_box li .texthead {
transition: transform 0.9s ease;
transform-origin: top left;
}

.exhibition_box li:hover a img {
transform: scale(1.04);
}

.exhibition_box li:hover .texthead {
transform: scale(1.06);
}


/* ================================================================
   HOME（モバイルのみ）：余白の階層を整理して無駄な間延びを解消
   久米さん指摘 2026-07-20「全体に余白が多すぎる。ゆったり見せるのは上質だが、
   無駄に多すぎると見る側の体験が気持ちよくない」

   【設計】特大160px（冒頭ロゴ下・1回だけ）／大120px（セクションの境目）／
           中60px（セクション内のブロック間）／小40px以下（既存を維持）

   - .toplogo は height:600px 固定に対し中身が約412pxで、箱の中に約158pxの
     「死んだ余白」が出ていた → height:auto で解消。H1.logo が
     position:relative; top:30px で視覚的に30px下がるため、その分を
     padding-bottom:30px で受けて余白計算を正しくする。
   - ロゴ下だけはブランドの第一印象なので160pxと一段大きく残す。
   - #ORDER/#STORE の末尾は 100+120=220px で最も目立っていた →
     60+60=120px にしてセクション境の120pxと一致させる。

   ※対象セレクタはいずれもHOMEページでのみ使用（他8ページで使用ゼロを確認済み）。
   ※PC（961px以上）は一切変更しない。
   ================================================================ */
@media screen and (max-width:960px) {
	/* ★height:auto は Safari(iPhone) で縦書きロゴの行の長さが不定になり
	   「久米装枠舎 Kume Frame」が複数列に折り返す不具合を起こした（久米さん指摘 2026-07-20）。
	   Chromeでは再現しないブラウザ差。レイアウトの仕組みは一切変えず、
	   高さは元の600px（定高さ）のまま margin-bottom だけ 200→0 にする。
	   ロゴ文字の視覚的な下端は箱の上から442pxなので、箱の残り158pxが
	   そのまま「ロゴ下の余白」になり、狙いの約160pxが得られる。 */
	.toplogo {
		height: 600px;
		margin-bottom: 0;
	}

	.intro {
		margin-bottom: 120px;
	}

	section.button-area {
		margin-bottom: 120px;
	}

	.case-2popup {
		margin-bottom: 60px;
	}

	/* 縦書き本文「最初に手がけた額縁は…」→「Read more」が開きすぎていた（実測107px）ので
	   セクション内ブロック間の基準60pxに合わせる。margin-bottomは縦書きの行長に影響しないので安全。
	   （久米さん指摘 2026-07-20） */
	/* ※既存が p.intro-text（詳細度が高い）なので、こちらも p を付けないと効かない */
	p.intro-text {
		margin-bottom: 60px;
	}

	/* CASEのキャプション「Kota Ogasawara / コハラタケル」とボタンが詰まりすぎていた件。
	   原因：CASEはキャプションが .case-2popup の箱から46px下にはみ出すため、
	   箱に付けた margin-bottom:60px では実質2pxしか空かなかった。
	   ORDER/STOREはキャプションが箱の30px内側にあり末尾150pxで問題ないので、
	   .case-2popup 側は触らず CASEのボタンにだけ上余白を足す。（久米さん指摘 2026-07-20） */
	/* ※margin-top だと直前の .case-2popup の margin-bottom と相殺されて増えないため padding-top を使う */
	#CASE .button-area {
		padding-top: 60px;
	}

	#ORDER,
	#STORE {
		padding-bottom: 60px;
	}
}


/* ABOUT：額をつくる人の人物写真2枚（久米岬建築設計事務所／SOLIWOOD）を4:5の縦長に（久米さん依頼 2026-07-28）。
   .subpage-creator でスコープしているため、FRAMES等の他の .frame-2popup（1:1）には影響しない。 */
.subpage-creator .frame-2popup .unit img {
	height: auto;
	aspect-ratio: 4 / 5;
}

/* ABOUT：額をつくる人の人物写真下のキャプション（久米岬建築設計事務所／SOLIWOOD PRODUCTS）。
   .unit 内で text-align:center ＝ 写真（width:100%）の中心に揃う（久米さん依頼 2026-07-21） */
.subpage-creator .creator-name {
	text-align: center;
	font-size: 12px;
	letter-spacing: 2px;
	margin-top: 14px;
	margin-bottom: 0;
}

/* ================================================================
   PC：右の固定サイドバー（menuマーク／縦ロゴ／SNSアイコン）の縦位置を
   ウィンドウ高さに追従させる（久米さん指摘 2026-08-01
   「1680×1050でmenuと久米装枠舎が近すぎる。ウィンドウ高さを狭くした場合も
     バランスが良いようにしてほしい」）

   【変更前の問題】3ブロックが全て「上端からの固定px積み上げ」で置かれていたため、
   余った高さがすべて下に落ちて不均衡になっていた（実測値・上/中/下の余白）。
     1680×976  →  19px / 0px / 195px（上が詰まり下が余る＝ご指摘の状態）
     1680×1200 →  19px / 0px / 405px（縦ロゴとアイコンが密着）
     1680×650  →  下に64pxはみ出し、一番下のオンラインストアのアイコンが見切れ

   【対応後】
     1680×976  →  79px / 60px / 80px（上下ほぼ対称）
     1680×650  →  15px /  6px / 20px（見切れ解消）

   ※menuボタンは position:fixed で通常フローの外にあり flex では並べられない。
     その占有分（上端20px＋ボタン51px＋caption約20px＝約91px）を
     header の padding-top で先に確保し、残りを space-evenly で均等配置している。
   ※h1.logo の margin／top と header .sns の top を 0 に戻しているのは、
     旧実装の固定オフセットが残っていると flex の計算と二重にかかるため。
   ※SNSアイコンの縦幅は padding が % 指定（＝幅基準）で、box-sizing:border-box と
     相まって「高さが常に約80pxで固定され、画面が低くても縮まない」構造だった。
     これが低いウィンドウでの見切れの原因。縦方向だけ clamp() で高さに追従させて解消。
     ウィンドウ高さ1000px以上では従来と同じ約30pxを保つので、通常のPC表示での
     アイコンの見え方は変わらない。
   ※モバイル（〜960px）のルールには一切触れていない。
   ================================================================ */
@media screen and (min-width: 961px) {
	header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		box-sizing: border-box;
		padding-top: 110px;
		padding-bottom: 20px;
	}

	header h1.logo {
		margin: 0;
		top: 0;
		height: auto;
	}

	header .sns {
		top: 0;
	}

	header .sns a img {
		padding: clamp(6px, calc(5.2vh - 22px), 30px) 37%;
	}
}

/* 縦820px以下：上下の固定余白もわずかに詰めて、
   低いウィンドウでアイコン4つ分の逃げ場を確保する */
@media screen and (min-width: 961px) and (max-height: 820px) {
	header {
		padding-top: 100px;
		padding-bottom: 14px;
	}
}


/* ================================================================
   Safari／iPad で縦書きが意図しない位置で折り返す不具合の修正
   （久米さん指摘 2026-08-01：Chromeでは大丈夫だがSafariでウィンドウ高さを
     縮めるとトップページ最上部が崩れる／iPad横向きで導入文の折り返しが変わる）

   【原因】縦書き（writing-mode: vertical-rl）では「高さ＝1行の長さ」になる。
   対象の3要素はいずれも height:auto が指定されており、Chrome は内容に合わせて
   伸ばすだけで折り返さないが、Safari は行の長さを確定できずウィンドウ高さで
   折り返してしまう、というブラウザ差だった。
     ・.logo.top      … height:auto !important（PC全体に適用されている）
     ・header h1.logo … max-height:980px 内の height:auto
     ・.intro-text    … height:auto !important
   ※2026-07-20 にモバイルで同じ現象が報告されており（.toplogo を height:600px の
     まま据え置いた件）、そのPC版が今回顕在化したもの。

   【対処】高さの指定には一切触れず、自動折り返しだけを禁止する。
   .intro-text は <br> による明示的な改行が8か所入っており、nowrap でも <br> は
   効くため、「折り返しゼロ＝改行位置を元通りに維持」という元の狙いとも一致する。
   Chrome での描画は変化なし（適用前後で3要素の寸法が完全一致することを実測確認済み）。
   ================================================================ */
@media screen and (min-width: 961px) {
	.logo.top,
	header h1.logo,
	.intro-text {
		white-space: nowrap;
	}
}


/* HOME写真下のキャプションを 12px → 14px に（久米さん指摘 2026-08-01「少し小さい気がする」）。
   対象は .case-2popup 内の6要素：
     定番の額（規格・サイズ仕立て）／ひとつずつ考える額（フルオーダー）／
     実店舗のご紹介／オンラインストア／Kota Ogasawara／コハラタケル
   このうち前4つは各ページへ誘導するナビゲーションを兼ねており、
   太さ100（極細）で線が細いぶん 12px では読み取りづらかった。
   太さ100はブランドの世界観なので変更しない。
   14px でも6項目すべて1行に収まることを実測確認済み（列幅557px）。 */
@media screen and (min-width: 961px) {
	.case-2popup a p {
		font-size: 14px !important;
	}
}

/* ==== CASE / NEWS / Q&A の記事ページ 文字サイズ（2026-08-03追加・記事ページの文字サイズ引き上げ） ====
   2026-07-20のPC文字サイズ引き上げ（.frame-p / .fo-text / .faq-a 等を14px化）のとき、
   個別記事の .single 系だけが対象から漏れており、他ページが14pxになった中で
   記事本文だけ12pxで取り残されていた。久米さんの指摘（読みにくい）を受けて他ページに揃える。
   ・本文 12px → 14px（.frame-p 等と同じ）
   ・記事タイトル 14px → 18px（.frame-h の20pxより控えめ。本文との階層をつける）
   日付(.date)・場所(.location)の10px表記は :not() で除外。
   行間は em 指定のため自動追従し、レイアウトは変わらない。
   スマホ（≤960px）は現状維持。 */
@media screen and (min-width:961px) {

	.contents .single,
	.contents .single p:not(.location):not(.date),
	.contents .single .text,
	.contents .single .text p {
		font-size: 14px !important;
	}

	.contents .single h3,
	.contents .single .category_text {
		font-size: 18px !important;
	}

}