@charset "UTF-8";
/*
Theme Name: JC NS4.2
Author: WATANABE Takeshi

# Breakpoint
@media screen and (max-width: 1342px) {-md 1343px未満 tablet}
@media screen and (max-width: 559px) {-sm 560px未満 smartphone}

# Space size
1 = 8px
2 = 16px
3 = 32px
4 = 64px
5 = 128px
6 = 256px
*/

:root {
	--main:   hsla(222, 10%, 22%, 1); /* メインカラー（#32363e） */
	--main:   #3C76C7;
	--main:   #3172b9;
	--sub:    hsla(222, 22%, 82%, 1); /* サブカラー（メインカラーより明度Lが高め） */
	--sub:    #f1f8fd; /* サブカラー（メインカラーより明度Lが高め） */
	--blue:   #3375cc;/* テキストリンク */
	--green:  #57B157;/* バッジ */
	--red:    #ff6666;/* バッジ */
	--orange: #ff8a00;/* バッジ・ボタン */
	--text:   #222222;/* 本文テキスト */
	--subtext:#666666;/* 補足テキスト・ターシャリボタン */
	--border: #dddddd;/* 罫線（#cccだと濃い） */
	--gray:   #f3f3f3;/* 要素の背景 */
	--base:   #fefefe;/* 全体の背景 */
	--radius: 8px;
	--shadow: 0px 4px 8px 0px rgb(0 0 0 / 50%);
}

/* Webfont
-------------------------------------------------------------- */
/* @font-face {
	font-family: "AlteHaasGrotesk";
	src: url("font/AlteHaasGroteskBold.woff") format("woff");
	font-display: swap;
} */

/* Override class.css
-------------------------------------------------------------- */
header .sns-icons {
	gap: 0;
	margin: 0;
	z-index: 3;
}

/* Reset & Default Style
-------------------------------------------------------------- */
*,*::before,*::after{
	box-sizing: border-box
}
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
html {
	overflow-y: scroll;
	font-size: 18px;
	scroll-behavior: smooth;
}
html:has(#mailform) {
	scroll-behavior: auto;
}
@media screen and (max-width: 559px) {
	html {
		font-size: 16px;
	}
}
body {
	background-color: var(--base);
	color: var(--text);
	font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Segoe UI","BIZ UDPGothic","Noto Sans CJK JP","Noto Sans JP",Meiryo,sans-serif;
	font-weight: normal;
	line-height: 1.9; /* flexで囲んだ場合に自動的にpでマークアップされないため、divも含めた全体に適用する必要がある */
	line-break: strict; /*for iOS 禁則処理（撥音、拗音、促音、ハイフン、長音、閉じ括弧なども行頭に来ない規則）*/
	-webkit-text-size-adjust: 100%; /* ランドスケープ時に文字サイズを変えない */
	-ms-text-size-adjust: 100%; /* ランドスケープ時に文字サイズを変えない */
	/* font-weight: 500; for Noto Sans */
	/* -webkit-font-smoothing: antialiased; for Noto Sans */
	/* animation: fadein 1s ease 0s 1 normal; */
	/* font-feature-settings: "palt"; */
	/* letter-spacing: .05em; */ /* 和文は読みやすくなるが英文が開き過ぎるため全体に適用するのは控える */
}
a {
	vertical-align: baseline;
	text-decoration: none;
	background: transparent;
	transition: 0.5s;
	color: var(--blue); /* セレクタを main a などにすると記事内にボタンなどのa要素があったときにコントロールしにくい */
}
a:hover,
a:active {
	text-decoration: underline;
}
article,
aside,
canvas,
details,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}
audio,
canvas,
video {
	display: inline-block;
}
audio:not([controls]) {
	display: none;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
ins:before,
del:before {
	content: attr(data-text);
	display: block;
	text-decoration: none;
	font-weight: bold;
}
mark {
	color: inherit;
	background: linear-gradient(transparent 50%, #ffff8d 50%);
	background: linear-gradient(transparent 60%, #fff07d 40%);
}
abbr[title],
dfn[title] {
	border-bottom: solid 1px rgba(0, 0, 0, 0.1);
	cursor: help;
}
hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
pre,
kbd,
samp,
tt {
	font-family: monospace;
	display: block;
}
code {
	font-family: monospace;
	display: inline-block;
	background-color: var(--gray);
	padding: 0 4px;
	border-radius: 4px;
}
img,
object {
	max-width: 100%; /*fluid image*/
	height: auto;
	vertical-align: bottom; /* 下余白の回避 */
	line-height: 1; /* 下余白の回避 */
}
embed,
iframe,
object,
video {
	max-width: 100%; /* Make sure videos and embeds fit their containers */
}
strong,
em,
b {
	font-weight: bold;
}
p:empty {
	display: none;/* 自動生成される空のpタグ */
}
ul {
	list-style: none;
}
input,
button,
textarea,
select {
	max-width: 100%;
	font: inherit;
	transition: 0.2s;
	line-height: 1;
	scroll-margin-top: 140px;/* htmlのバリデーションエラーで入力箇所に自動スクロールした際の停止位置を調整 */
	/* border: solid 1px var(--text); */
	/* background-color: #fff; */
	/* outline: none; */
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
	display: block;
	/* width: 90%; 郵便番号入力欄がバグる */
	/* max-width: 320px; */
	padding: 16px;
	border-radius: 4px;
	border: solid 1px var(--text);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
/* input[type="number"] {
	max-width: 100px;
} */
input[type="file"] {
	font-size: 0.85em;
	line-height: 1;
}
input[type="radio"],
input[type="checkbox"] {
	display: inline-block;
	margin-right: 0.4rem;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: 0.3s ease-out; /*変化を緩やかに*/
	cursor: pointer;
	/* appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none; */
}
input[type="search"] {
	width: 100%;
	max-width: initial;
	background-color: #fff;
	background-image: url(images/icon/search.svg);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: left 16px center;
	padding-left: 48px;
	/* box-shadow: var(--shadow); */
}
input[type="search"]::-webkit-search-decoration {
	display: none;
}
textarea {
	/* max-width: 560px; */
	height: 80px;
	overflow: auto;
	line-height: 1.6;
}
select {
	width: initial; /* 内容に合わせる */
	/* max-width: 100%; */
	padding-right: 48px;
	vertical-align: middle;
	text-indent: 0.01px;
	text-overflow: "";
	color: var(--text);/* for iOS*/
	background-image: url(images/icon/sort-down-solid.svg);
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: right 20px center;
	cursor: pointer;
}
select option {
	background-color: #fff;
}
select option[selected] {
	background-color: #eee;
}
select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #828c9a;
}
/* インタラクション */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
	box-shadow: var(--shadow);
	transform: translate(0, -4px);
}
input[type="submit"]:disabled {
	opacity: 0.5;
	cursor: default;
}
input[readonly],
input[readonly]:focus,
textarea[readonly],
textarea[readonly]:focus {
	background-color: #eee;
	cursor: default;
	transform: none;
}

/* ページ内リンクのスクロール停止位置（TOCはプラグインの設定画面から制御） */
:target {
	scroll-margin-top: 100px;
}

/* ドリルダウン */
select.drilldown{
	padding: 16px;
	background-color: transparent;
	font-size: .9rem;
}
select.drilldown .drilldown-title{
	padding: 0;
	margin-top: 0;
	font-size: .75rem;
}
/* select.drilldown option{
	margin-top: 4px;
} */
select.drilldown option:hover{
	background-color: #ddd;
}

/* Default style inside main tag
-------------------------------------------------------------- */
main h1,.h1 {
	font-size: 2.074rem;/* Ratio:1.2 */
	line-height: 1.3;
	font-weight: bold;
}
main h2,.h2 {
	font-size: 1.728rem;/* Ratio:1.2 */
	line-height: 1.4;
	font-weight: bold;
	margin-top: 108px;/* Ratio:1.5 */
}
main h3,.h3 {
	font-size: 1.2rem;/* Ratio:1.2 */
	line-height: 1.5;
	font-weight: bold;
	margin-top: 72px;/* Ratio:1.5 */
}
main h4,.h4,
main h5,.h5 {
	font-size: 1.0rem;/* Ratio:1.2 */
	line-height: 1.6;
	font-weight: bold;
	margin-top: 48px;/* Ratio:1.5 */
}

@media screen and (max-width: 559px) {
	main h1,.h1 {
		font-size: 1.6rem;
	}
	main h2,.h2 {
		font-size: 1.4rem;
	}
}
main p,
main ul,
main ol,
main dl,
main table,
main pre,
main details,
main blockquote,
main figure,
main section,
main aside,
main fieldset {
	margin-top: 32px;
}

/* 見出し直後は余白半分 → やや狭く感じたので無効化（2023/10/26） */
/* main h2 + p, main h3 + p, main h4 + p, main h5 + p,
main h2 + ul, main h3 + ul, main h4 + ul, main h5 + ul,
main h2 + ol, main h3 + ol, main h4 + ol, main h5 + ol,
main h2 + dl, main h3 + dl, main h4 + dl, main h5 + dl,
main h2 + table, main h3 + table, main h4 + table, main h5 + table,
main h2 + pre, main h3 + pre, main h4 + pre, main h5 + pre,
main h2 + details, main h3 + details, main h4 + details, main h5 + details,
main h2 + figure, main h3 + figure, main h4 + figure, main h5 + figure{
	margin-top: 16px;
} */
main ul ul,
main ul ol,
main ul dl,
main ul figure,
main ol ul,
main ol ol,
main ol dl,
main ol figure,
main dl ul,
main dl ol,
main dl dl,
main dl figure,
main figure blockquote,
main table *:first-child,
main blockquote *:first-child,
main #main-content > *:first-child /* 記事内の最初の要素 */ {
	margin-top: 0;
}
/* 外部リンクにアイコンを自動付与 */
main p a[target="_blank"]:after,
main li a[target="_blank"]:after,
main dd a[target="_blank"]:after{
	content: "";
	display: inline-block;
	background-image: url(images/icon/external-link-alt-solid.svg);
	background-size: 100%;
	width: 12px;
	height: 12px;
	margin-left: 4px;
	margin-right: 8px;
	opacity: 0.4;
}
main p a:has(img)[target="_blank"]:after,
main li a:has(img)[target="_blank"]:after,
main dd a:has(img)[target="_blank"]:after{
	content: none; /* 画像リンクの場合は外部リンクアイコンなし */
}
main strong {
	background: linear-gradient(transparent 50%, #ffff8d 50%);
	background: linear-gradient(transparent 60%, #fff07d 40%);
}
main ul li {
	list-style-type: disc;
}
main li {
	margin-left: calc(16px * 1.5);/* ul liと指定すると .archive-line li などのクラスに影響があるためこうしてる */
}
main dt {
	margin-top: 16px;
	font-weight: bold;
}
main dt:first-child {
	margin-top: 0px;
}
main figure {
	display: inline-block; /* 幅の狭い画像のfigcaptionをセンタリングするため */
}
main figure figcaption {
	font-size: 0.8rem;
	margin-top: 8px;
	text-align: center;
}
main figure figcaption:first-child { /* 上配置のキャプション */
	margin-top: 0;
	margin-bottom: 8px;
	text-align: left;
}
main figure figcaption ul{
	margin-top: 0;
}
main figure table + figcaption {
	margin-top: 16px;
	margin-left: 16px;
	margin-right: 16px;
	text-align: left;
}
main small {
	color: var(--subtext);
	font-size: 0.8rem;
}
main img,
main iframe{
	display: inline-block;/* リンク時のクリックエリアが広がるのでblockはNG */
}
main iframe[src*="youtube.com/embed/"] , /* You Tube埋め込み */
main iframe[src*="google.com/maps/"] { /* GoogleMap埋め込み */
	width: 100%;
}

/*
main p img,
main p iframe,
main li img,
main li iframe,
main dd img,
main dd iframe,
main figure img,
main figure iframe{
	margin-top: 16px;
	margin-bottom: 16px;
}
main p img:first-child,
main p iframe:first-child,
main li img:first-child,
main li iframe:first-child,
main dd img:first-child,
main dd iframe:first-child,
main figure img:first-child,
main figure iframe:first-child{
	margin-top: 0px;
}
main p img:last-child,
main p iframe:last-child,
main li img:last-child,
main li iframe:last-child,
main dd img:last-child,
main dd iframe:last-child{
	margin-bottom: 0px;
} */
main table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border-top: solid 2px var(--text);
	font-size: 0.9rem;
}
main table caption {
	text-align: center;
	margin-bottom: 8px;
}
main table thead {
	text-align: left;
}
main table tr {
	border-bottom: solid 1px var(--border);
}
main table th {
	font-weight: bold;
}
main table th,
main table td {
	line-height: 1.6;
	vertical-align: middle;
	padding: 16px;
}
main table tbody th {
	text-align: left;
	min-width: 100px;
	/* background-color: var(--base); */ /* animation時にborderが消える */
}
main table td img,
main table td p,
main table td ul,
main table td ol,
main table th dl {
	display: block;
	margin: 0 auto;
	border: none;
}
main table img,
main table p {
	margin: 0;
	box-shadow: none;
}
main hr {
	display: block;
	height: 1px;
	border: 0;
	background-color: var(--border);
	margin: 64px auto;
}
main pre {
	padding: 32px;
	background-color: var(--gray);
	border-radius: var(--radius);
	font-size: .8rem;
}
main time {
	display: inline-block;
	display: block;
}
main blockquote,
main q {
	quotes: none;
	padding-top: 8px;
	font-size: 0.9rem;
}
main blockquote,
main blockquote + figcaption {
	margin-left: 4px;
	padding-left: 32px;
	border-left: solid 2px var(--text);
	/* border-left: solid 1px var(--text); */
}
main blockquote + figcaption {
	margin-top: 0;
	padding-top: 16px;
	padding-bottom: 8px;
	text-align: left;
}
main blockquote::before {
	display: inline-block;
	content: "";
	width: 24px;
	height: 24px;
	margin-bottom: 8px;
	background-color: var(--text);
	background-repeat: no-repeat;
	-webkit-mask-image: url(images/icon/quote-left-solid.svg);
	mask-image: url(images/icon/quote-left-solid.svg);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
main details {
	padding: 0px 0px 0px;
	vertical-align: middle;
	border-top: solid 1px var(--border);
	border-bottom: solid 1px var(--border);
	transition: 0.8s;
	font-size: 0.9rem;
	color: transparent;
}
main details + details {
	margin-top: 0;
	border-top: none;
}
main details[open] {
	padding-bottom: 32px;/* 後続のdatailタグとの区別を明確にするため長めに確保 */
	color: var(--text);
}
main details summary {
	position: relative;
	display: block; /* デフォルトアイコンを非表示（Safari以外） */
	padding: 16px 48px 16px 0;
	color: var(--text);
	overflow: hidden; /* Safariで回転時にアウトラインが広がるバグを回避 */
}
main details summary + * { /* 見出し直後の要素 */
	margin-top: 16px;
}
main details summary::-webkit-details-marker {
	display: none; /* Safariのデフォルトアイコン▶を非表示 */
}
main details summary:hover {
	cursor: pointer;
}
main details summary::after {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translate(0%, -50%) rotate(0deg);
	display: block;
	content: "";
	width: 32px;
	height: 32px;
	background-color: transparent;
	background-image: url(images/icon/angle-down-solid.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-size: 50%;
	border-radius: 100%;
	transition: transform 0.2s;
	transition: 0.2s;
}
main details summary:hover::after {
	background-color: var(--gray);
}
main details[open] summary::after {
	transform: translate(0%, -50%) rotate(180deg); /* 回転させるとSafari14でフォーカスした際に不自然なアウトラインができる */
}
main fieldset{
	padding: 0 16px 16px;
	border: solid 1px var(--border);
	border-radius: 4px;
}
main legend{
	padding: 0 8px;
	font-weight: bold;
}

/* Container
-------------------------------------------------------------- */
#page {
	position: relative;
	/* display: grid;
	grid-template-rows: auto 1fr auto; */
	/* grid-template-columns: 100%; */ /* 親要素の幅を超えるpreがあるときのレイアウト崩れを回避？ */
	min-height: 100vh;
}
#content {
	position: relative;
	margin-top: 32px;
	margin-bottom: 64px;
	margin: 32px auto 64px;
}
.single #content,
.page #content { /* シングルページは2カラム */
	display: flex;
	/* gap: 48px; */
}
#main-content {
	position: relative;
	width: 640px;
	margin: 0 auto;
}
#left-content {
	position: relative;
	order: -1;
	width: 256px;
}
#right-content {
	position: relative;
	order: 1;
	width: 256px;
}
#left-content .sticky,
#right-content .sticky {
	top: 132px; /* =header-background-has-color (header+gap) */
	top: 100px; /* =header */
}
@media screen and (max-width: 1342px) {
	.single #content,
	.page #content {
		flex-direction: column; /* シングルカラム化 */
	}
	#main-content {
		width: 100%;
		max-width: 640px;
	}
	#left-content {
		width: 100%;
		max-width: 640px;
		order: 1;
	}
	#right-content {
		width: 100%;
		max-width: 640px;
		order: 2;
	}
	#right-content .sticky {
		top: 0; /* reset */
	}
}

/* 商品ページ用レイアウト */
.product-layout { /* シングルページは2カラム */
	justify-content: space-between;
}
.product-layout #main-content {
	margin: auto;
	width: 1280px;
}
.product-layout #right-content {
	width: calc(640px - 64px);
}
.product-layout #main-content .contents1 {
	/* border: solid 1px red; */
}
.product-layout #main-content .contents2 {
	position: sticky;
	top: 100px;
	/* border: solid 1px blue; */
}
.product-layout #main-content .contents2 h2 {
	display: none;
}
.product-layout #main-content .contents2 dl {
	margin-top: 0;
}
.product-layout #main-content .contents3 {
	/* border: solid 1px green; */
}
@media screen and (max-width: 1342px) {
	.product-layout #main-content {
		width: auto;
		gap: 0;
	}
	.product-layout #main-content .contents2 {
		position: relative;
		top: auto;
	}
	.product-layout #main-content .contents2 h2 {
		display: block;
		margin-bottom: 32px;
	}
}
/* Header
-------------------------------------------------------------- */
#header {
	z-index: 10;
	transition: 0.5s; /* for animation */
	font-size: 1em;
	background-color: rgba(255, 255, 255, 1);
}
#header.scrolled{
	transition: 0.5s; /* for animation */
	box-shadow: 0 15px 15px -10px rgba(0,0,0,0.2);
	/* background-color: transparent; */
	/* border: solid 1px red; */
}
#header:hover {
	background-color: rgba(255, 255, 255, 1);
	opacity: 1;
}
#header.scrolled:hover{
	box-shadow: none;
}
#header .scroll-fade,
#header.scrolled:hover .scroll-fade {
	transition: 0.5s; /* for animation */
	opacity: 1;
	transform: translateY(0%);
	/* display: none; */
}
#header.scrolled .scroll-fade {
	opacity: 0;
	transform: translateY(-100%);
}

/* トップページではヘッダをフェイドイン */
/* .home #header {
	opacity: 0;
	animation: fadein-blur forwards 1s ease-out 1s 1 normal;
	margin: -100px 0 0;
} */

/* トップページ＋未スクロールの場合 */
/* .home #header:not(.scrolled) {
  text-shadow: 0px 0px 5px rgb(0 0 0 / 40%);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
} */

#header-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	/* gap: 48px; */
	/* gap: 64px; */
	height: 100px;
}

#header-title {
	flex: 0 0 auto; /* メニュー数が増えてもタイトル幅は固定 */
	max-width: 208px; /* 240px - 32px */
}
#header-title img,
#header-title svg {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	transition: 1s;
	fill: var(--text);
	/* filter: drop-shadow(2px 2px 2px rgba(255,255,255,.2)); */ /* for SVG */
}
#header-description {
	text-align: center;
	font-size: 0.8rem;
	color: var(--text);
	color: rgba(0, 0, 0, 0.5);
}
/* @media screen and (max-width: 1342px) {
	#header {
		height: 80px;
		padding: 0 24px;
	}
} */
@media screen and (max-width: 559px) {
	#header-inner{
		gap: 16px; /* iPhoneSEだとやや窮屈 */
	}
	#header-title {
		flex: 1 1 auto; /* スマホ閲覧時はタイトルが縮む */
	}
}

/* 最上部のお知らせバー
-------------------------------------------------------------- */
#notification-bar{
	padding: 8px 0;
	color: #fff;
	background-color: var(--main);
	font-size: .75rem;
	order: -1;
}
@media screen and (max-width: 1342px) {
	#notification-bar{
		display: none;
	}
}
/* Footer
-------------------------------------------------------------- */
#footer {
	background-color: #ffffff;
	background-color: var(--main);
	font-size: 0.9rem;
	color: #ffffff;
}
#footer .footer-nav {
	gap: 32px;
}
#footer .footer-nav a {
	color: rgba(255, 255, 255, 0.8);
	color: rgba(255, 255, 255, 1.0);
}
#footer h2 {
	margin-bottom: 8px;
	font-size: 0.9em;
	color: rgba(255, 255, 255, 0.5);
}
/* #footer a:hover {
	opacity: 0.7;
	color: rgba(255,255,255,.8);
	text-decoration: underline;
} */
#footer #footer-logo svg {
	display: block;
	width: auto;
	height: 16px;
	margin: 0;
	padding: 0;
	fill: rgba(255, 255, 255, 1);
}
#footer #copyright {
	padding: 0 0 1em;
	text-align: center;
	font-size: 0.8rem;
	/* opacity: 0.8; */
}
/* 子カテゴリ
#footer nav ul.children{
	margin-left: 0.8em;
	font-size: 0.95rem;
}*/
#footer nav ul.children li::before {
	content: "−";
	opacity: 0.5;
	margin-right: 0.4em;
}
@media screen and (max-width: 1342px) {
	#footer {
		font-size: 1rem;
	}
	#footer nav ul li a {
		display: inline-block;
		margin: 5px 0;
	}
}


/* グローバルナビ
-------------------------------------------------------------- */
#gloval-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	gap: 32px;
	/* margin-right: auto; */ /* 左寄せ */
	margin-left: auto; /* 右寄せ */
	/* text-transform: uppercase; */ /* 大文字 */
}
#gloval-nav a {
	display: inline-block;
	text-decoration: none;
	color: var(--text);
}
#gloval-nav a[href=""],
#gloval-nav a[href="#"] {/* リンクなしのサブメニューはデフォルトカーソル */
	cursor: default;
}
#gloval-nav > ul {
	display: flex;
  flex-wrap: wrap;
	align-items: center;
	gap: 0 24px;
	font-weight: bold;
	font-size: .85rem;
	-webkit-font-smoothing: antialiased;
}
/* メインメニュー＆ドロップダウンメニューのアイテム */
#gloval-nav > ul li{
	position: relative;
	list-style: none;
	margin: 0;
}
/* メインメニューのアイテム */
#gloval-nav > ul > li:not(.menu-item-has-children)::before  { /* アンダーバー（サブメニューを持つアイテムは除く） */
	content: "　";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: -2px;
	width: 0%;
	height: 2px;
	background: var(--text);
	border-radius: 1px;
	transition: .5s;
}
#gloval-nav > ul > li.current-menu-item::before, /* カレント＆ホバー時 */
#gloval-nav > ul > li:not(.current-menu-item):hover::before {
	width: calc(100% - 4px); /* アンダーバーの長さをテキスト幅より短くすることでスッキリ見える気がする */
	height: 2px;
}
#gloval-nav > ul > li > a:before { /* クリックエリア拡張（マウスオフしてドロップダウンが消えるのを防ぐ） */
	content: "";
	position: absolute;
	top: -8px;
	right: -16px;
	bottom: -16px;
	left: -16px;
	/* border: solid 1px blue; */
}
#gloval-nav > ul > li:hover > a:before { /* マウスホバー時はクリックエリアをさらに拡張 */
	bottom: -32px;
}
#gloval-nav > ul > li.menu-item-has-children::after {/* 下向きキャレットアイコン */
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	width: calc(6px * 1.618);
	height: 6px;
	background-color: var(--text);
	transition: .5s;
}
#gloval-nav > ul > li.menu-item-has-children:hover::after {
	transform: rotate(-180deg);
	transform-origin: center bottom;
}
#gloval-nav > ul > li > ul.sub-menu {/* サブメニュー枠・クローズ時 */
	display: block;
	position: absolute;
	top: calc(100% + 24px);
	left: calc(50% - 120px);
	width: auto;
	padding: 24px 32px;
	/* z-index: 2; 多分不要 */
	font-size: 0.8rem;
	line-height: 1.6;
	opacity: 0;
	visibility: hidden; /* フォーカスを当てない */
	transform: translate(0%, -10%);
	transition: .2s;
	pointer-events: none;/* マウスイベントをキャンセル */
	transition: all 0.1s ease-in;
	background-color: var(--gray);
	background-color: rgba(255, 255, 255, 1.0);
	/* backdrop-filter: blur(4px) saturate(100%);
	-webkit-backdrop-filter: blur(8px) saturate(100%);
	box-shadow: var(--shadow);
	border-radius: var(--radius); */
	border: solid 1px var(--main);
}
#gloval-nav > ul > li:hover > ul.sub-menu,
#gloval-nav > ul > li:focus-within > ul.sub-menu {/* サブメニュー枠・アクティブ時 */
	opacity: 1;
	visibility: visible;
	transform: translate(0%, 0);
	transition: .5s;
	pointer-events: all;
	z-index: 3;/* ハンバーガメニューより上位に配置 */
}
/* サブメニューのアイテム */
#gloval-nav > ul > li > ul.sub-menu li{
	white-space: nowrap;
}
#gloval-nav > ul > li > ul.sub-menu li a {
	position: relative;
	display: block;
	padding: 4px 0;
}
#gloval-nav > ul > li > ul.sub-menu li a[href]:hover {
	color: var(--main);
	text-decoration: underline;
}
/* 孫メニューのアイテム */
#gloval-nav .menu-item-has-grandchildren > ul.sub-menu{
	display: flex;
	gap: 64px;
}
/* 孫メニューの見出し */
#gloval-nav .menu-item-has-grandchildren > ul.sub-menu > li > a{
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: solid 1px var(--main);
}

/* メガメニュー */
#gloval-nav .mega-menu{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	top: 38px;
	width: 900px;
	margin: auto;
	max-height: 100vh;
	font-size: 0.8rem;
}
#gloval-nav .mega-menu .mega-menu-item a{
	display: grid;
    gap: 16px;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 4px 0px;
}
#gloval-nav .mega-menu .mega-menu-item a img{
	width: 40px;
}

/* モバイルは非表示） */
@media screen and (max-width: 1342px) {
	#gloval-nav {
		display: none;
	}
}

/* Toggle Menu（ハンバーガメニュー）
-------------------------------------------------------------- */
/* ハンバーガアイコン */
#toggle-menu {
	display: none;
}
@media screen and (max-width: 1342px) {
	#toggle-menu {
		display: block;
	}
}
#toggle-menu .menu-trigger {
	position: relative;
	display: block;
	width: 40px;
	height: 32px;
	background: none;
	border: none;
	/* background-color: rgba(0,0,0,.1); */
}
#toggle-menu .menu-trigger::before { /* アイコン背景のサークル */
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 0px;
	height: 0px;
	border-radius: 50%;
	background: none;
	border: none;
	transition: .5s;
}
@media (any-hover: hover) {
	#toggle-menu .menu-trigger:hover::before {
		width: 64px;
		height: 64px;
		background-color: var(--sub);
		background-color: var(--gray);
	}
}
#toggle-menu .menu-trigger.active::before {
	width: 64px;
	height: 64px;
	background-color: var(--sub);
	background-color: var(--gray);
}
@media (any-hover: hover) {
	#toggle-menu .menu-trigger::after { /* アイコン下部のテキスト */
		content: "MENU";
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		font-size: 11px;
		font-weight: 500;
		color: var(--main);
		transition: 0.5s;
		opacity: 0;
	}
	#toggle-menu .menu-trigger:hover::after {
		bottom: -16px;
		opacity: 1;
	}
	#toggle-menu .menu-trigger.active::after {
		opacity: 0;
		/* content: "CLOSE";
		animation: fadein 2s ease 0s 1 normal; */
	}
}
/* アイコンバー＆サーチバー */
#toggle-menu .menu-trigger span {
	display: inline-block;
	position: absolute;
	height: 2px;
	border-radius: 4px;
	background-color: var(--text);
	transition: 0.5s;
}
#toggle-menu .menu-trigger span:nth-of-type(1) {
	top: calc(50% - 8px);
	left: 0;
	width: 50%;
}
#toggle-menu .menu-trigger span:nth-of-type(2) {
	top: calc(50% - 0px);
	left: 0;
	width: 40%;
}
#toggle-menu .menu-trigger span:nth-of-type(3) {
	top: calc(50% + 8px);
	left: 0;
	width: 30%;
}
#toggle-menu .menu-trigger span:nth-of-type(4){ /* 虫眼鏡アイコン（レンズ） */
	top: calc(50% - 6px);
	right: 2px;
	width: 14px;
	height: 14px;
	background-color: transparent;
	box-shadow: 0 0 0 1.8px var(--text);
	border-radius: 100%;
	transform: rotate(45deg);
}
#toggle-menu .menu-trigger span:nth-of-type(4)::after{ /* 虫眼鏡アイコン（グリップ） */
	content: "";
	position: absolute;
	left: calc(50% - 1px);
	bottom: -6px;
	width: 2px;
	height: 6px;
	background-color: var(--text);
	border-radius: 2px;
	transition: .5s;
}
@media (any-hover: hover) {
	#toggle-menu .menu-trigger:hover span:nth-of-type(1),
	#toggle-menu .menu-trigger:hover span:nth-of-type(2),
	#toggle-menu .menu-trigger:hover span:nth-of-type(3) {
		width: 100%;
		transform: scale(.75);
	}
	#toggle-menu .menu-trigger:hover span:nth-of-type(4) {
		top: calc(50% - 30px);
		right: calc(50% - 30px);
		width: 60px;
		height: 60px;
		box-shadow: 0 0 0 1.8px transparent;
	}
	#toggle-menu .menu-trigger:hover span:nth-of-type(4)::after {
		opacity: 0;
	}
}
#toggle-menu .menu-trigger.active span:nth-of-type(1) {
	width: 100%;
	transform: translateY(7px) rotate(-45deg) scale(.75);
}
#toggle-menu .menu-trigger.active span:nth-of-type(2) {
	width: 0%;
	left: 50%;
}
#toggle-menu .menu-trigger.active span:nth-of-type(3) {
	width: 100%;
	transform: translateY(-9px) rotate(45deg) scale(.75);
}
#toggle-menu .menu-trigger.active span:nth-of-type(4){
	top: calc(50% - 30px);
	right: calc(50% - 30px);
	width: 60px;
	height: 60px;
	box-shadow: 0 0 0 1.8px transparent;
}
#toggle-menu .menu-trigger.active span:nth-of-type(4)::after{
	opacity: 0;
	background-color: transparent;
}

.search-trigger.active::before,
.search-trigger.active::after{ /* クローズアイコン（共通） */
	background-color: var(--text);
	box-shadow: 0 0 0 0 var(--text);
	border-radius: 2px;
	top: calc(50% - 1px);
	left: calc(50% - 1px);
}
.search-trigger.active::before{ /* クローズアイコン（横） */
	width: 2px;
	height: 24px;
	margin-top: -11px;
}
.search-trigger.active::after{ /* クローズアイコン（縦） */
	width: 24px;
	height: 2px;
	margin-left: -11px;
}

/* アイコンバー */
/*
#toggle-menu .menu-trigger span {
	display: inline-block;
	position: absolute;
	right: 0;
	height: 2px;
	border-radius: 4px;
	background-color: var(--text);
	transition: 0.5s;
}
#toggle-menu .menu-trigger span:nth-of-type(1) {
	width: 100%;
	top: calc(50% - 8px);
}
#toggle-menu .menu-trigger span:nth-of-type(2) {
	width: 80%;
	top: calc(50% - 0px);
}
#toggle-menu .menu-trigger span:nth-of-type(3) {
	width: 60%;
	top: calc(50% + 8px);
}
#toggle-menu .menu-trigger:hover span:nth-of-type(1),
#toggle-menu .menu-trigger:hover span:nth-of-type(2),
#toggle-menu .menu-trigger:hover span:nth-of-type(3) {
	width: 100%;
	transform: scale(.75);
}
#toggle-menu .menu-trigger.active span:nth-of-type(1) {
	width: 100%;
	transform: translateY(7px) rotate(-45deg) scale(.75);
}
#toggle-menu .menu-trigger.active span:nth-of-type(2) {
	width: 0%;
	right: 50%;
}
#toggle-menu .menu-trigger.active span:nth-of-type(3) {
	width: 100%;
	transform: translateY(-9px) rotate(45deg) scale(.75);
}
*/

/* メニュー UI */
#toggle-menu #toggle-menu-items {/* クローズ時 */
	position: absolute;
	top: 100px; /* = header height */
	left: 0;
	display: block; /* display:flex、flex-direction:column-reverseを解除 */
	width: 100%;
	background-color: rgba(255, 255, 255, 1);
	background-color: var(--main);
	color: #fff;
	/* CloseEffect */
	height: 0;
	overflow: auto;
	visibility: hidden; /* フォーカスを当てない */
	opacity: 0;
	transition: 0.5s;
}
#toggle-menu .menu-trigger.active + #toggle-menu-items {/* アクティブ時 */
	padding: 32px 0;
	z-index: -1;/* グロナビのドロップダウンメニューより下層に配置 */
	/* OpenEffect */
	height: calc(100vh - 100px); /* 100vh - header height */
	visibility: visible;
	opacity: 1;
}
/* Toggle Menu内のメインメニュー */
#toggle-menu .main-menu,
#toggle-menu .sub-menu {
	display: flex;
	gap: 16px;
	gap: 8px;
	flex-direction: column;
	/* align-items: flex-start; */ /* これがないと内包するliのwidthが100%になっちゃう。なんで？ */
	font-size: 1.6rem;
	font-size: .8rem;
	font-weight: bold;
	line-height: 1.6;
	/* border: solid 1px red; */
}
#toggle-menu .sub-menu {
	margin: 16px 0 0 0;
	font-size: 1.0rem;
}
#toggle-menu .sub-menu li {
	display: flex;
	gap: 8px;
}
#toggle-menu .sub-menu li::before {
	content: "-";
	font-weight: normal;
}
#toggle-menu a {
	display: inline-block;
	color: var(--text);
	color: #fff;
}
/* フォーカス時の枠線が見切れるので位置調整 */
/* #toggle-menu a:focus {
	outline-offset: -2px;
} */
#toggle-menu .main-menu li.current-menu-item a::after,
#toggle-menu .main-menu li.current-cat a::after { /* カレントメニューのアイコン */
	border: solid 1px red;
	top: 0;
	left: 0;
	transform: translateX(-100%) translateY(10%) rotate(90deg) scale(0.8, 0.5);
}
/* 折りたたみサブメニュー */
/*
@media screen and (max-width: 1342px) {
	#toggle-menu .sub-menu {
		display: flex;
		gap: 16px;
		flex-direction: column;
		align-items: flex-start;
		line-height: 1;
		height: 0;
		opacity: 0;
		overflow: auto;
		visibility: hidden;
		transform: translate(0%, 0%);
		transition: .2s;
		pointer-events: none;
		transition: all 0.1s ease-in;
		font-size: 0.9rem;
		font-weight: bold;
	}
	#toggle-menu li:hover .sub-menu,
	#toggle-menu li:focus-within .sub-menu {
		height: auto;
		margin: 16px 0 0 16px;
		opacity: 1;
		overflow: visible;
		visibility: visible;
		transform: translate(0%, 16px);
		transform: translate(0%, 0);
		transition: .5s;
		pointer-events: all;
	}
	#toggle-menu .menu-item-has-children > a {
		position: relative
	}
	#toggle-menu .menu-item-has-children > a::after {
		content: "";
		position: absolute;
		right: -32px;
		bottom: 8px;
		clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
		width: calc(8px * 1.618);
		height: 8px;
		background-color: var(--text);
		background-color: white;
		transition: .5s;
	}
	#toggle-menu .menu-item-has-children:hover > a::after {
		transform: rotate(-180deg);
	}
}
*/

/* .btnをオーバライド（モバイルではボタンを拡大） */
#toggle-menu .btn {
	display: block;
	padding: 16px 24px;
	width: 414px; /* iPhone8Plus */
	max-width: 100%;
	margin-top: 24px;
	text-align: center;
}

/* SNSアイコン
-------------------------------------------------------------- */
@media screen and (max-width: 1342px) {
	.menu-items-icon {
		display: flex;
		flex-direction: row; /* iconは横並び*/
		/* justify-content: center; */
		/* font-size: 1.2rem; */
	}
	.menu-items-icon li {
		width: auto;
		border: none;
	}
	.menu-items-icon li:not(:first-child) {
		margin: 0 0 0 1em;
	}
	.menu-items-icon li a {
		border: none;
		color: var(--text);
	}
}

/* Heading（見出し）
-------------------------------------------------------------- */
.heading-single {
	/* font-size: 2.4rem; */
	padding: 48px 16px;
	border-top: solid 1px var(--main);
	border-bottom: solid 1px var(--main);
	font-weight: bold;
	font-feature-settings: "palt"; /*自動カーニング*/
}
/* .heading-single::before{
	content: attr(data-text);
	display: block;
	margin-left: -4px;
	font-size: 3.2rem;
} */
.heading-page {
  padding: 64px 0 32px;
	text-align: center;
	font-weight: bold;
	padding: 48px 16px;
	border-top: solid 1px var(--main);
	border-bottom: solid 1px var(--main);
	/* font-size: 2.4rem; */
	/* font-feature-settings: "palt"; */ /*自動カーニング*/
}
.heading-archive {
	padding: 48px 16px;
	border-top: solid 1px var(--main);
	border-bottom: solid 1px var(--main);
	/* font-feature-settings: "palt"; */ /*自動カーニング*/
}
.heading-archive h1 {
	font-weight: bold;
	/* font-feature-settings: "palt"; */ /*自動カーニング*/
}
@media screen and (max-width: 559px) {
	.heading-single {
		padding: 32px 0px;
	}
	.heading-archive {
		padding: 32px 0px;
	}
	/* .heading-archive .image {
		display: none;
	} */
}
.heading-sub {
	/* font-size: 0.9rem; */
	font-weight: bold;
	font-feature-settings: "palt"; /*自動カーニング*/
	/* text-align: center; */
}
/* .heading-sub::before {
	content: attr(data-text);
	display: block;
	font-family: "Helvetica Neue", HelveticaNeue;
	font-size: 2.4rem;
} */
.heading-sub.inline::before {
	display: inline-block;
	margin-right: 8px;
}
/* @media screen and (max-width: 559px) {
	.heading-sub {
		text-align: left;
	}
} */

/* fixed-icon（固定アイコン）
-------------------------------------------------------------- */
#fixed-icon-wrap{
	position: fixed;
	bottom: 16px;
	right: 16px;
	display: flex;
	flex-direction: column; /*子要素の配置方向：上から下*/
	gap: 8px;
	z-index: 2;
}
@media screen and (max-width: 559px) {
	#fixed-icon-wrap{
		bottom: 8px;
		right: 8px;
	}
}
.fixed-icon{
	position: relative;
	z-index: 1;
}
.fixed-icon a,
.fixed-icon button{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	background-color: var(--main);
	border: 0;
	box-shadow: var(--shadow);
	transition: .2s;
}
.fixed-icon a:hover,
.fixed-icon button:hover{
	background-color: var(--main);
	opacity: .8;
}
@media (any-hover: hover) { /* for PC */
	.fixed-icon::before { /* ホバーテキスト */
		position: absolute;
		top: 70%;
		right: 60px;
		transform: translateY(-50%);
		content: attr(title);
		white-space: nowrap;
		font-size: .7rem;
		font-weight: bold;
		color: var(--text);
		opacity: 0;
		transition: .2s;
		z-index: -1;
		pointer-events: none;
	}
	.fixed-icon:hover::before {
		opacity: 1;
		right: 60px;
		top: 50%;
	}
}

/* Totop（トップに戻る）
-------------------------------------------------------------- */
#totop{
	display: none;
}
#totop a:before { /* フォントアイコン */
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	transition: 0.2s;
	background-color: var(--base);
	background-repeat: no-repeat;
	-webkit-mask-image: url(images/icon/angle-down-solid.svg);
	mask-image: url(images/icon/angle-down-solid.svg);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transform: translate(0%, 0%) rotate(180deg);
}

/* ToCTA（CTAボタンへ移動）
-------------------------------------------------------------- */
#tocta a:before { /* フォントアイコン */
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	transition: 0.2s;
	background-color: var(--base);
	background-repeat: no-repeat;
	/* -webkit-mask-image: url(images/icon/envelope-regular.svg);
	mask-image: url(images/icon/envelope-regular.svg); */
	-webkit-mask-image: url(images/icon/calendar-check-regular.svg);
	mask-image: url(images/icon/calendar-check-regular.svg);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Search Icon（検索アイコン）
-------------------------------------------------------------- */
.search-trigger{ /* ボタン */
	transform: rotate(-45deg);
	transition: 0.5s;
}
.search-trigger.active{ /* ボタン（アクティブ時） */
	transform: rotate(45deg);
}
.search-trigger::before,
.search-trigger::after{ /* 虫眼鏡アイコン（共通） */
	content: "";
	display: block;
	position: absolute;
	transition: 0.5s;
}
.search-trigger::before{ /* 虫眼鏡アイコン（レンズ） */
	top: calc(50% - 8px);
	left: calc(50% - 8px);
	width: 16px;
	height: 16px;
	box-shadow: 0 0 0 2px #fff;
	border-radius: 100%;
}
.search-trigger::after{ /* 虫眼鏡アイコン（グリップ） */
	top: calc(50% + 8px);
	left: calc(50% - 1px);
	width: 2px;
	height: 8px;
	background-color: #fff;
	border-radius: 2px;
}
.search-trigger.active::before,
.search-trigger.active::after{ /* クローズアイコン（共通） */
	background-color: #fff;
	box-shadow: 0 0 0 0 #fff;
	border-radius: 2px;
	top: calc(50% - 1px);
	left: calc(50% - 1px);
}
.search-trigger.active::before{ /* クローズアイコン（横） */
	width: 2px;
	height: 24px;
	margin-top: -11px;
}
.search-trigger.active::after{ /* クローズアイコン（縦） */
	width: 24px;
	height: 2px;
	margin-left: -11px;
}
.search-trigger + #search-contents {/* 検索ウィンドウ・クローズ時 */
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: var(--gray);
	width: 100vw;
	height: 0;
	overflow: auto;
	visibility: hidden; /* フォーカスを当てない */
	opacity: 0;
	transition: .5s;
	z-index: -1;
}
.search-trigger.active + #search-contents {/* 検索ウィンドウ・アクティブ時 */
	height: 190px;
	padding-top: 24px;
	visibility: visible;
	opacity: 1;
}

/* Toppage（トップページ）
-------------------------------------------------------------- */
.home .hero{
	aspect-ratio: 2/1;
}
.home-section{
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 128px;
	padding-bottom: 128px;
	/* border: solid 2px red; */
}
@media screen and (max-width: 559px) {
	.home .hero{
		aspect-ratio: auto;
	}
	.home-section{
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

/* Single / Page / Search / 404（シングル・固定ページ）
-------------------------------------------------------------- */
.post-header {
	padding: 0px;
	/* padding: 0 0 32px; */
	/* padding: 64px 0 32px; */
	/* border-bottom: solid 1px var(--border); */
	/* background-color: var(--main);
	background-size: cover;
	background-position: center center;
	color: #fff;
	text-align: center; */
	/*
	background-image:none // styleで指定
	background-attachment: fixed;
	margin: 0 0 4em;
	*/
}

/* ページ概要（PCは右側、モバイルは記事直後）*/
.post-footer {
	position: sticky;
	top: 100px;
	margin-top: 0;
	border-radius: var(--radius);
	/* visibility: hidden;
	opacity: 0;
	overflow: auto;
	transition: .2s;
	transition: .5s;
	transform: translateY(20px); */
}
/* スクロール時に表示するアニメーション
.post-footer.scrolled {
	visibility: visible;
	opacity: 1;
	transform: translateY(0%);
} */
.post-footer.sticky {
	max-height: calc(100vh - 100px - 32px); /* 100vh - header - margin-bottom */
}
@media screen and (max-width: 1342px) {
	.post-footer.sticky {
		max-height: initial; /* reset */
	}
}
.post-footer:empty {
	display: none;/* 目次が出力されない場合は非表示 */
}
.post-footer dt {
	margin: 0;
	font-size: 0.75rem;
	font-weight: normal;
	color: var(--subtext);
}
.post-footer dt:not(:first-child) {
	margin-top: 16px;
	margin-top: 24px;
}
.post-footer dd {
	margin-top: 4px;
	line-height: 1.5;
	font-size: 0.85rem;
	/* border: solid 1px blue; */
}
.post-footer li {
	list-style: none;
	margin: 0;
}
.post-footer a {
	text-decoration: none;
	color: var(--text);
}
.post-footer a:hover {
	text-decoration: underline;
}

/* ページ概要（タイトル直下のメタ情報・アーカイブページでも使用）*/
.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	/* line-height: 1.6; */
	font-size: .75rem;
	color: var(--subtext);
	z-index: 2; /* カードアイテム内に配置した際のテキストリンクを有効化 */
}
.post-meta > li:not(:last-child)::after {
	content: "/";
	opacity: .5;
}
/* .post-meta ul {
	display: flex;
	gap: 8px;
} */
.post-meta li {
	display: flex;
	gap: 8px;
	margin: 0;
}
.post-meta a {
	color: var(--subtext);
	text-decoration: none;
}
.post-meta a:hover {
	text-decoration: underline;
}
.post-meta-date {
	font-weight: 500;
}
.post-meta-tags a::before {
	content: "#";
	letter-spacing: 4px;
}

/* 次の記事 / 前の記事
-------------------------------------------------------------- */
.prev-next {
	display: flex;
	margin: 0 0 32px;
	border-top: solid 1px var(--border);
	border-bottom: solid 1px var(--border);
}
.prev-next > .prev,
.prev-next > .next {
	flex: 1 1 50%;
	transition: 0.5s;
}
.prev-next > .next {
	border-left: solid 1px var(--border);
}
.prev-next > .prev a,
.prev-next > .next a {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 32px;
	color: var(--text);
}
.prev-next > .next a {
	justify-content: flex-end; /* 右寄せ */
}
.prev-next .prev-next-text {
	flex-grow: 1;
	line-height: 1.6;
}
.prev-next > .prev:hover,
.prev-next > .next:hover {
	background-color: var(--gray);
	transition: 0.5s;
}
.prev-next a:hover {
	text-decoration: none;
}
.prev-next img {
	display: block;
	width: 100px;
	border-radius: 100px;
}
.prev-next > .prev a::before,
.prev-next > .next a::after {
	content: "";
	width: 16px;
	height: 16px;
	transition: 0.2s;
	background-color: var(--text);
	background-repeat: no-repeat;
	-webkit-mask-image: url(images/icon/caret-right-solid.svg);
	mask-image: url(images/icon/caret-right-solid.svg);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.prev-next > .prev a::before {
	transform: rotate(-180deg);
}
.prev-next > .next a::after {
	transform: rotate(0deg);
}
.prev-next > .prev:hover a::before {
	transform: rotate(-180deg) translateX(100%);
}
.prev-next > .next:hover a::after {
	transform: rotate(0deg) translateX(100%);
}
@media screen and (max-width: 1342px) {
	.prev-next {
		flex-direction: column;
	}
	.prev-next > .next {
		border-top: solid 1px var(--border);
		border-left: none;
	}
	.prev-next > .prev a,
	.prev-next > .next a {
		padding-left: 0;
		padding-right: 0;
	}
	.prev-next > .prev a::before,
	.prev-next > .next a::after {
		display: none;
		content: "";
		width: 16px;
		height: 16px;
		transition: 0.2s;
		background-color: var(--text);
		background-repeat: no-repeat;
		-webkit-mask-image: url(images/icon/caret-right-solid.svg);
		mask-image: url(images/icon/caret-right-solid.svg);
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
}

/* コメント
-------------------------------------------------------------- */
h3#reply-title {
	margin-top: 0;
}

/* プラグイン - Breadcrumbs（パンくずリスト）
-------------------------------------------------------------- */
.breadcrumbs,
.breadcrumbs-single-date {
	display: inline-block;
	font-size: 0.8rem;
	opacity: 0.5;
	/* タイトルエリアに重ねる場合
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2; */
}
.breadcrumbs,
.breadcrumbs a {
	color: var(--text);
}
/* @media screen and (max-width: 559px) {
	.breadcrumbs,
	.breadcrumbs-single-date {
		display: none;
	}
} */
.breadcrumbs > span:not(:first-child)::before,
.breadcrumbs-single-date::before {
	content: ">";
	display: inline-block;
	padding: 0 8px;
}

/* 目次（ Table of Contents / TOC）
-------------------------------------------------------------- */

/* 目次（メイン＆サイド共通） */
.toc-title {
	position: relative;
	margin: 0;
	font-size: 0.8rem;
	font-weight: bold;
}
.toc-list {
	margin-top: 0;
}
.toc-list li {
	position: relative;
	margin-left: 0;
	list-style: none;
	line-height: 1.5;
	font-size: 0.85rem;
}
/* .toc-list li:not(:first-child) {
	margin-top: 8px;
} */
.toc-list li.toc-item-h3 {/* 目次テキスト（h3） */
	font-size: 0.7rem;
}
.toc-list li a {
  display: inline-block;
	margin: 4px 0;
	padding-left: 22px;
	text-decoration: none;
	color: var(--text);
}
.toc-list li a:hover {
	text-decoration: underline;
}
.toc-list li a::before { /* リストマーク（h2&h3） */
	content: "";
	position: absolute;
	top: calc(.5em + 4px);
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 100px;
	background: var(--subtext);
	transition: .5s;
}
.toc-list li.toc-item-h3 a::before { /* リストマーク（h3） */
	transform: scale(0.6);
}
/* メインコンテンツの目次 */
#main-content .toc-wrapper {
	display: none;
	margin-top: 32px;
	padding: 32px;
	background-color: var(--gray);
	border-radius: var(--radius);
	font-size: 0.9em;
}
/* サイドバーの目次 */
#toc-widget .toc-list {
	max-height: calc(100vh - 160px);
	overflow: auto;
	/* border: solid red 1px; */
}
#toc-widget .toc-list li a.current{
	color: var(--text);
	font-weight: bold;
}
#toc-widget .toc-list li a::before { /* ウィジェットのリストマーク（h2&h3） */
	background: var(--border);
}
#toc-widget .toc-list li a.current::before { /* ウィジェットのリストマーク（current） */
	background: var(--main);
	transform: scale(1.4);
}
@media screen and (max-width: 1342px) {
	#main-content .toc-wrapper {
		display: block; /* モバイルでは投稿内の最初のh2直前に目次を表示 */
	}
	#toc-widget {
		display: none; /* モバイルではウィジェットの目次を非表示 */
	}
}

/* プラグイン - swiper.js
-------------------------------------------------------------- */
/* スライダ（共通） */
.swiper-wrapper{
	margin: 0;
}
.swiper-slide {
	margin: 0;
	list-style-type: none;
}

/* ページネーション（共通） */
.swiper-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	height: 48px;
	bottom: 0!important;
}
.swiper-pagination-bullet {
	transition: background-color cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
	scale: 1.2;
}
.swiper-pagination-bullet-active {
	background-color: #aa8f7b;
	background-color: #fff;
}
.swiper-pagination-bullet:after {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: opacity linear 0.4s;
	content: "";
}
.swiper-pagination-bullet-active:after {
	animation: pulseMotion 1.4s linear infinite;
}
/* ポインタ */
@keyframes pulseMotion {
	0% {
		transform: translate(-50%, -50%) scale(1, 1);
		background-color: rgb(255 255 255 / 0.4);
	}
	100% {
		transform: translate(-50%, -50%) scale(6.5, 6.5);
		background-color: rgb(170 143 123 / 0);
	}
}
.swiper .swiper-button-prev,
.swiper .swiper-button-next{
	color: white;
	text-shadow: 0px 0px 4px rgb(0 0 0 / 0.2);
}

/* カルーセル */
.swiper-carousel {
	width: 100%;
	height: auto;
}
.swiper-carousel .swiper-slide {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	max-width: 960px;
	/* aspect-ratio: 2/1; */
	aspect-ratio: 2560/1440;
}
.swiper-carousel .swiper-slide-active {
	opacity: 1;
}
/* .swiper-carousel .swiper-slide-prev,
.swiper-carousel .swiper-slide-next {
	opacity: .3;
} */
/* .swiper-carousel .swiper-slide .image{
	position: absolute;
	top: 0;
} */
.swiper-carousel .swiper-slide .image img{
	/* height: 389.53px; */
	/* aspect-ratio: 2560/1440;
	width: 686px;
	*/
	/* aspect-ratio: 2/1;
	aspect-ratio: 2560/1140;
	object-fit: cover;
	object-position: 50% 50%; */
}
.swiper-carousel .swiper-slide .text{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 2;
	padding: 24px 32px;
	background-color: rgb(0 0 0 / 0.4);
	color: #fff;
	text-shadow: 2px 2px 5px rgb(0 0 0 / 0.3);
}
.swiper-carousel .swiper-slide a{
	display: block;
	color: #fff;
	text-shadow: 2px 2px 5px rgba(0,0,0,.3);
	text-decoration: none;
}
.swiper-carousel .swiper-slide a:hover{
	transition: .2s;
	opacity: .5;
}
.swiper-carousel .swiper-slide-active a:hover::before{
	background-color: rgb(255 255 255 / 0.5);
	transition: .2s;
}
/* 非アクティブなスライドのエフェクトはOFF */
/* .swiper-carousel  .swiper-slide:not(.swiper-slide-active) a{
	pointer-events: none;
} */
.swiper-carousel .swiper-button-prev,
.swiper-carousel .swiper-button-next{
	translate: 0 -24px;/* .swiper-paginationの高さ分を上方向にズラす */
}
.swiper-carousel .swiper-pagination{
	position: relative; /* スライドの外側に配置 */
	bottom: auto; /* Reset */
}

/* クロスフェード */
.swiper-crossfade .swiper-slide .image img {
	display: block;
	width: 100vw; /* object-fitは%指定不可 */
	height: 41.4vw; /* Silver Ratio */
	max-height: 500px;
	min-height: 400px;
	object-fit: cover;
	object-position: 50% 50%;
	font-family: "object-fit:cover;object-position: 50% 50%;"; /* for IE */
}
.swiper-crossfade .swiper-slide .text {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 2;
	background-color: rgb(0 0 0 / 0.4);
	color: #fff;
	text-shadow: 2px 2px 5px rgb(0 0 0 / 0.3);
}
.swiper-crossfade .swiper-slide .text a{
	color: #fff;
	text-shadow: 2px 2px 5px rgba(0,0,0,.3);
	text-decoration: none;
}
.swiper-crossfade .swiper-slide-prev .image,
.swiper-crossfade .swiper-slide-next .image {
	transition: 1s;
	filter: saturate(20%) brightness(50%);
}
.swiper-crossfade .swiper-slide-active .image {
	transition: 1s;
	filter: none;
}
.swiper-crossfade .swiper-pagination-bullet-active {
	background: #fff;
}


/* サムネイルギャラリー */
.swiper-gellery-thumbs ul.swiper-wrapper li,
.swiper-tab-menu ul.swiper-wrapper li{
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0; /* アイテムの個数と間隔はJSで指定 */
	padding: 0 0 8px;
	list-style: none;
	cursor: pointer;
	text-align: center;
	line-height: 1.6;
	color: var(--subtext);
	font-size: .8rem;
	border-bottom: solid 2px var(--border);
}
.swiper-gellery-thumbs ul.swiper-wrapper li:hover,
.swiper-gellery-thumbs ul.swiper-wrapper li.swiper-slide-thumb-active,
.swiper-tab-menu ul.swiper-wrapper li:hover,
.swiper-tab-menu ul.swiper-wrapper li.swiper-slide-thumb-active{
	color: var(--main);
	border-bottom: solid 2px var(--main);
}
.swiper-tab-menu ul.swiper-wrapper li.swiper-slide-thumb-active{
	font-weight: bold;
}
.swiper-gellery .swiper-slide img,
.swiper-gellery-thumbs .swiper-slide img{
	border: 1px solid var(--border);
}

/* プラグイン - reCAPTCHA
-------------------------------------------------------------- */
.grecaptcha-badge {
	visibility: hidden;
}

/* プラグイン - search-word-highlight
-------------------------------------------------------------- */
span.highlight {
	background: linear-gradient(transparent 50%, #ffff8d 50%);
}

/* プラグイン - WP ULike
-------------------------------------------------------------- */
.wpulike {
	margin-top: 64px!important;
}

/* プラグイン - proofreading-preview
-------------------------------------------------------------- */
span.proofreading {
	position: relative;
	background-color: yellow;
	background-color: rgb(0, 195, 255);
	background: linear-gradient(transparent 70%, rgb(0, 195, 255, 0.5) 30%);
	/* outline: 1px solid red; */
	/* animation: blink-red 1s infinite; */
}
span.proofreading::before {
	position: absolute;
	top: -2em;
	left: 0;
	content: attr(title);
	white-space: nowrap;
	padding: 0 0.5em;
	background: #fff;
	background-color: rgba(255, 255, 255, 0.9);
	background-color: yellow;
	font-size: 0.9rem;
	opacity: 0;
	display: none;
}
span.proofreading:hover::before {
	display: block;
	opacity: 1;
}

/* プラグイン - Smash Balloon Social Photo Feed（旧 Instagram Feed）
-------------------------------------------------------------- */
.sb_instagram_header,
.sbi_follow_btn {
	display: none !important;
}
#sbi_load {
	margin-top: 8px;
}

/* プラグイン - Contact Form 7
-------------------------------------------------------------- */
/* radioとcheckboxをブロック化 */
.wpcf7-radio .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item {
	display: block;
}
/* バリデート時に表示されるスクリーンリーダ用のエラーメッセージを非表示化 */
.wpcf7 .screen-reader-response {
	display: none;
}
/* レスポンステキスト（送信しました、エラー、など）*/
.wpcf7-response-output,
.wpcf7-not-valid-tip:not(:empty) {
	display: block;
	margin-top: 8px;
	font-size: 0.9rem;
	color: red;
}
/* 住所の自動入力ボタン */
.wpcf7 .postal-search{
	padding: 16px;
	font-size: .8rem;
}


/* テスト中
-------------------------------------------------------------- */

/* スクロールスナップ
https://watanabetakeshi.com/?p=29072&preview=true */
.snap-container {
	overflow: auto;
	scroll-snap-type: y mandatory;
	height: 50vh;
}
.snap-area {
	scroll-snap-align: start;
	height: 50vh;
	background-color: red;
}
.snap-area:nth-child(even) {
	background-color: rgba(0, 0, 0, 0.05);
}

.snap-container-x {
	overflow: auto;
	scroll-snap-type: x;
	display: flex;
}
.snap-container-x .snap-area {
	scroll-snap-align: start;
	width: 50vw;
	flex: none;
}

/* カルーセル
https://watanabetakeshi.com/?p=29825&preview=true */
ul.simple-carousel {
	display: flex;
	list-style: none;
	max-width: 100%;
	/* margin-block: 2rem;
	margin-inline: auto; */
	overflow: auto;
	scroll-snap-type: x mandatory;
}

ul.simple-carousel li {
	display: grid;
	place-items: center;
	color: white;
	font-size: 3rem;

	aspect-ratio: 2/1;
	width: 100%;
	flex-shrink: 0;
	scroll-snap-align: start;
	margin: 0;
}

ul.simple-carousel li:nth-child(odd) {
	background-color: salmon;
}

ul.simple-carousel li:nth-child(even) {
	background-color: rebeccapurple;
}

/* 制作実績のデバイスモックアップ */
.mockup{
	position:relative;
	margin-bottom: 64px;
}
.mockup .ipad{
	width: 90%;
	filter: drop-shadow(0px 5px 5px rgba(0,0,0,.5));
}
.mockup .iphone{
	width: 30%;
	position: absolute;
	right: 0;
	bottom: -24px;
	filter: drop-shadow(0px 5px 5px rgba(0,0,0,.5));
}

/*　CTAボタン - モバイル固定
-------------------------------------------------------------- */
@media screen and (max-width: 1342px) {
	.fixed-banner{
		display: none;/* ロード時は非表示 */
		position: fixed;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: 10;
		/* width: 640px; */
		width: auto;
		white-space: nowrap;
		max-width: 100%;
		padding: 8px;
		/* padding: 16px; */
		/* background-color: rgb(255 255 255 / .9); */
		/* box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5); */
	}
	.fixed-banner .btn{
		/* border-radius: 4px; */
		box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
		/* font-size: .9rem; */
	}
	.fixed-banner .btn:hover{
		background-color: white;
	}
}

/*　アカウント情報メニュー
-------------------------------------------------------------- */
#account-nav{
	padding: 8px 0;
	text-align: right;
	color: #fff;
	background-color: var(--main);
	font-size: .8rem;
	order: -1;
}

#account-nav .account-nav-items{
	display: flex;
	justify-content: space-between;
}
#account-nav a{
	color: white;
}

/*　商品一覧
-------------------------------------------------------------- */
.spec{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}
.spec li{
	margin: 0;
	padding: 4px 12px;
	font-size: 0.7em;
	border-radius: 40px;
	list-style-type: none;
	border: 1px solid var(--border);
}
.home .spec li,
.single-post .spec li{
	border: 1px solid #999;
}

/*　商品一覧の絞り込みフィルタ
-------------------------------------------------------------- */
details.item-filter summary {
	margin-bottom: 0;
}
details.item-filter .item-wrap{
	margin: 16px 0 0;
	/* padding-left: 16px; */
	/* overflow: auto; */
	/* white-space: nowrap; */
}
details.item-filter .item-wrap .flex{
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

@media screen and (max-width: 559px) {
	details.item-filter.bordered {
		padding-left: 16px;
		padding-right: 16px;
	}
	details.item-filter .item-wrap{
		margin-right: -16px;
		border-right: solid 16px white;
	}
	details.item-filter .item-wrap .flex{
		gap: 4px 12px;
	}
	details.item-filter .item-wrap .filter-title{
		width: 100%; /* 項目名で改行する */
	}
	details.item-filter .item-wrap .btn.mini{
		padding: 4px 8px;
		font-size: 0.7rem;
	}
}

/*　テストページ用
-------------------------------------------------------------- */
.test-old{
	display: none;
}

/*　ご利用ガイド
-------------------------------------------------------------- */

/* .guide.grid  {
	grid-template-columns: repeat(2, 1fr);
} */
/* .guide.grid > div:nth-child(1) {
	grid-row: span 2 / span 2;
} */
/* .guide.grid > div:nth-child(2) {
	grid-column-start: 1;
	grid-row-start: 2;
}
.guide.grid > div:nth-child(3) {
	grid-column-start: 2;
	grid-row-start: 1;
}
.guide.grid > div:nth-child(4) {
	grid-column-start: 2;
	grid-row-start: 2;
} */
/* @media screen and (max-width: 559px) {
	.guide.grid  {
		display: block;
	}
} */


/*　選択したラジオボタンによってテキストを切り替える（フォームの入稿データ作成）
-------------------------------------------------------------- */
.radio-linked-text1,
.radio-linked-text2{
	display: none;
}
.radio1:has(input:checked) ~ .radio-linked-text1,
.radio2:has(input:checked) ~ .radio-linked-text2{
	display: block;
}