@charset "UTF-8";
/*
Theme Name: LIM12
Author: WATANABE Takeshi

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

# margin&padding
8px / 16px / 32px / 64px / 128px / 256px */

/* Custom Properties
-------------------------------------------------------------- */
:root {
	--main:   #32363e;/* メインカラー */
	--sub:    #f8f7ed;/* サブカラー */
	--text:   #222222;/* 本文テキスト */
	--subtext:#666666;/* 補足テキスト・ターシャリボタン */
	--blue:   #3375cc;/* テキストリンク・バッジ */
	--red:    #ff6666;/* バッジ */
	--orange: #ff8a00;/* バッジ・CTAボタン */
	--border: #dddddd;/* 罫線 */
	--gray:   #f8f7ed;/* 要素の背景 */
	--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
}
:target {
	scroll-margin-top: 100px;/* ページ内リンクのスクロール停止位置（TOCはプラグインの設定画面から制御） */
}
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;
	scroll-behavior: smooth;
	font-size: 18px;
}
@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も含めた全体に適用する必要がある */
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict; /* 禁則処理を厳格に適用 */
	-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 rgb(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 {
	font: inherit;
	transition: 0.2s;
	line-height: 1;
	background-color: #fff;
	scroll-margin-top: 140px;/* htmlのバリデーションエラーで入力箇所に自動スクロールした際の停止位置を調整 */
}
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,
button {
	display: block;
	padding: 16px 16px;
	border-radius: 4px;
	border: solid 1px var(--text);
	-webkit-appearance: none; /* for macOS Mojave 10.14 */
	appearance: none;
}
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;
}
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="submit"]:disabled {
	opacity: 0.5;
	cursor: default;
}
/* なぜかrequired付きの要素にも適用される（バグ？）
input:invalid,
textarea:invalid,
select:invalid {
	background-color: #f9dbdb;
}*/
input[readonly],
input[readonly]:focus,
textarea[readonly],
textarea[readonly]:focus {
	background-color: #eee;
	cursor: default;
	transform: none;
}
/* ドリルダウン */
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 h2,.h2 {
		margin-top: 54px;
	}
	main h3,.h3 {
		margin-top: 36px;
	}
	main h4,.h4,
	main h5,.h5 {
		margin-top: 24px;
	}
} */

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;
	margin-bottom: -1px;
	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{
	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 {
	margin-top: 8px;
	font-size: 0.8rem;
	text-align: center;
}
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 {
	margin-bottom: 16px;
	text-align: center;
	font-weight: bold;
}
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);
}
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);
}
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 { /* シングルページは3カラム（256+64+640+64+256） */
	display: flex;
	/* gap: 48px; */
}
#main-content {
	position: relative;
	width: 640px;
	margin: 0 auto;
}
#left-content {
	position: relative;
	order: -1;
	width: 256px;
	margin-top: -170px;
}
#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 */
}

.post-template-single-product #content { /* シングルページは2カラム */
	justify-content: space-between;
}
.post-template-single-product #main-content {
	margin: 0;
}
.post-template-single-product #right-content {
	width: calc(640px - 48px);
	/* border: solid 1px green; */
}

@media screen and (max-width: 1342px) {
	.single #content {
		flex-direction: column; /* シングルカラム化 */
	}
	#main-content {
		width: 100%;
		max-width: 640px;
	}
	#left-content {
		width: 100%;
		max-width: 640px;
		order: 1;
		margin-top: 32px;
	}
	#right-content {
		width: 100%;
		max-width: 640px;
		order: 2;
	}
	#right-content .sticky {
		top: 0; /* reset */
	}
}

/* Header
-------------------------------------------------------------- */
#header {
	/* padding: 24px 0 32px; */
	z-index: 10;
	transition: 0.5s; /* for animation */
	font-size: 1em;
	/* background-color: #fff; */
}
#header.scrolled{
	/* padding-top: 24px; */
	/* top: -8px; */
	transition: 0.5s; /* for animation */
	background-color: transparent;
	/* box-shadow: 0 15px 15px -10px rgb(0 0 0 / 0.2); */
	/* border: solid 1px red; */
}
#header:hover {
	background-color: #fff;
}

/* #header.scrolled:hover{
	box-shadow: none;
	box-shadow: 0 15px 15px -10px rgb(0 0 0 / 0.2);
} */

/* スクロール時にフェイドアウトする要素の設定
#header .scroll-fade,
#header.scrolled:hover .scroll-fade {
	transition: 0.5s;
	opacity: 1;
	transform: translateY(0%);
}
#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(rgb(0 0 0 / 0.3), rgb(0 0 0 / 0));
} */

#header-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	gap: 48px;
	height: 100px;
}
/* #header.scrolled #header-inner{
	height: 80px;
} */
@media screen and (max-width: 1342px) {
	#header-inner{
		gap: 24px;
		gap: 32px;
	}
}

#header-title {
	flex: 0 0 auto; /* メニュー数が増えてもタイトル幅は固定 */
	max-width: 208px; /* 240px - 32px */
	margin-right: auto; /* タイトル以外は右寄せ */
}
#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 rgb(255 255 255 / .2)); */ /* for SVG */
}
#header-description {
	text-align: center;
	font-size: 0.8rem;
	color: var(--text);
	color: rgb(0 0 0 / 0.5);
}
/* @media screen and (max-width: 1342px) {
	#header {
		height: 80px;
		padding: 0 24px;
	}
} */
@media screen and (max-width: 559px) {
	#header {
		gap: 16px; /* iPhoneSEだとやや窮屈 */
		gap: 24px;
	}
	#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: rgb(255 255 255 / 0.8);
}
/* #footer .footer-nav {
	display: flex;
	color: rgb(255 255 255 / 0.4);
} */
#footer .footer-nav a {
	color: rgb(255 255 255 / 0.8);
}
#footer h2 {
	/* margin-top: 32px; */
	font-size: 0.9em;
	color: var(--subtext);
}
/* #footer a:hover {
	opacity: 0.7;
	text-decoration: underline;
} */
#footer #footer-logo svg {
	display: block;
	width: auto;
	height: 16px;
	margin: 0;
	padding: 0;
	fill: #fff;
}
#footer #copyright {
	padding: 0 0 1em;
	text-align: center;
	font-size: 0.8rem;
}
/* 子カテゴリ
#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;
	}
}
@media screen and (max-width: 559px) {
	#footer .footer-nav {
		gap: 32px 16px;
	}
}


/* グローバルナビ
-------------------------------------------------------------- */
#gloval-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	gap: 32px;
	/* margin-right: auto; */ /* 左寄せ */
	/* margin-left: auto; */ /* 右寄せ */
	/* text-transform: uppercase; */ /* 大文字 */
}
#gloval-nav > ul {
	display: flex;
  flex-wrap: wrap;
	align-items: center;
	gap: 0 32px;
	list-style: none;
	font-size: 1.0rem;
	font-weight: bold;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
}
/* メインメニュー＆ドロップダウンメニューのアイテム */
#gloval-nav > ul li{
	position: relative;
	margin: 0;
}
#gloval-nav > ul li a {
	display: inline-block;
	color: var(--text);
	text-shadow: 0px 0px 8px rgb(255 255 255 / .5);
	text-decoration: none;
}
#gloval-nav > ul li a:hover {
	opacity: .7;
}
/* メインメニューのアイテム */
#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 .menu-item-has-children > a {/* サブメニューがある場合はデフォルトカーソル */
	cursor: default;
}
#gloval-nav .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 .menu-item-has-children:hover::after {
	transform: rotate(-180deg);
	transform-origin: center bottom;
}
#gloval-nav .sub-menu {/* サブメニュー枠・クローズ時 */
	display: block;
	position: absolute;
	top: calc(100% + 24px);
	left: calc(50% - 120px);
	width: 240px;
	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: rgb(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 black;
}
#gloval-nav li:hover .sub-menu,
#gloval-nav li:focus-within .sub-menu {/* サブメニュー枠・アクティブ時 */
	opacity: 1;
	visibility: visible;
	transform: translate(0%, 0);
	transition: .5s;
	pointer-events: all;
	z-index: 3;/* ハンバーガメニューより上位に配置 */
}
/* サブメニューのアイテム */
#gloval-nav .sub-menu li{
	text-align: right;
	text-align: left;
}
#gloval-nav .sub-menu li a {
	position: relative;
	display: block;
	padding: 4px 0;
}
/* メガメニュー */
#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（ハンバーガメニュー）
-------------------------------------------------------------- */
/* ハンバーガアイコン */
.menu-trigger {
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: none;
}
.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;
	z-index: -1;/* フォーカス枠が見えなくなるのを回避 */
}
@media (any-hover: hover) {
	.menu-trigger:hover::before {
		width: 64px;
		height: 64px;
		background-color: var(--sub);
		background-color: var(--gray);
	}
}
.menu-trigger.active::before {
	width: 64px;
	height: 64px;
	background-color: var(--sub);
	background-color: var(--gray);
}
@media (any-hover: hover) {
	.menu-trigger::after { /* アイコン下部のテキスト */
		content: "MENU";
		content: attr(data-text);
		display: block;
		position: absolute;
		top: 160%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		white-space: nowrap;
		font-size: 11px;
		font-weight: 500;
		color: var(--main);
		transition: 0.2s;
		opacity: 0;
	}
	.menu-trigger:hover::after {
		top: 140%;
		opacity: 1;
	}
	.menu-trigger.active::after {
		opacity: 0;
		/* content: "CLOSE";
		animation: fadein 2s ease 0s 1 normal; */
	}
}

/* バーアイコン */
.icon-bar span {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	width: 90%;
	height: 1px;
	height: 0;
	border-radius: 4px;
	background-color: var(--text);
	box-shadow: 0 0 0 .5px var(--text);
	transition: 0.3s;
}
.icon-bar span:nth-of-type(1) {
	top: 16px;
}
/* .icon-bar span:nth-of-type(2) {
	top: 0px;
} */
.icon-bar span:nth-of-type(3) {
	top: -16px;
}
@media (any-hover: hover) {
	/* .icon-bar:hover span:nth-of-type(1),
	.icon-bar:hover span:nth-of-type(2),
	.icon-bar:hover span:nth-of-type(3) {
		width: 100%;
	} */
}
.icon-bar.active span:nth-of-type(1),
.icon-bar.active span:nth-of-type(3) {
	top: 0;
	/* bottom: 0;
	left: 0;
	right: 0; */
	/* margin: auto; */
	/* width: 28px; */
	/* height: 2px; */
	/* border-radius: 4px; */
	/* background-color: var(--text); */
	/* box-shadow: none; */
	rotate: 135deg;
}
.icon-bar.active span:nth-of-type(2) {
	width: 0;
}
.icon-bar.active span:nth-of-type(3) {
	rotate: 45deg;
	rotate: -135deg;
}

/* 虫眼鏡アイコン */
.icon-search span{ /* 虫眼鏡のレンズ */
	position: absolute;
	top: -4px;/* グリップ分の高さ調整 */
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: inline-block;
	width: 18px;
	height: 18px;
	box-shadow: 0 0 0 1px var(--text);
	rotate: -45deg;
	border-radius: 100%;
	background-color: transparent;
	transition: 0.3s;
}
.icon-search.active span { /* アクティブ時はレンズをフェイドアウト */
	top: 0;
	box-shadow: none;
}
.icon-search span::before,
.icon-search span::after{ /* 虫眼鏡のグリップ */
	content: "";
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	bottom: -8px;
	margin: auto;
	width: 2px;
	height: 8px;
	background-color: var(--text);
	border-radius: 2px;
	transition: 0.3s;
}
.icon-search.active span::before,
.icon-search.active span::after{ /* アクティブ時はクローズアイコンに変化 */
	top: 0;
	bottom: 0;
	width: 0px;
	height: 28px;
	border-radius: 4px;
	box-shadow: 0 0 0 .5px var(--text);
}
.icon-search.active span::after{
	rotate: 90deg;
}

/* メニュー UI */
.toggle-menu-items {/* クローズ時 */
	position: absolute;
	top: 100px; /* = header height */
	left: 0;
	display: block; /* display:flex、flex-direction:column-reverseを解除 */
	width: 100%;
	background-color: #fff;
	background-color: var(--main);
	color: #fff;
	/* CloseEffect */
	height: 0;
	overflow: auto;
	visibility: hidden; /* フォーカスを当てない */
	opacity: 0;
	transition: 0.5s;
}
.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-items .main-menu,
.toggle-menu-items .sub-menu {
	display: flex;
	gap: 16px;
	flex-direction: column;
	/* align-items: flex-start; */ /* これがないと内包するliのwidthが100%になっちゃう。なんで？ */
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1;
	/* border: solid 1px red; */
}
.toggle-menu-items .sub-menu {
	margin: 16px 0 0 0;
	font-size: 1.0rem;
}
.toggle-menu-items .sub-menu li {
	display: flex;
	gap: 8px;
}
.toggle-menu-items .sub-menu li::before {
	content: "-";
	font-weight: normal;
}
.toggle-menu-items a {
	display: inline-block;
	color: var(--text);
	color: #fff;
}
/* フォーカス時の枠線が見切れるので位置調整 */
/* .toggle-menu-items a:focus {
	outline-offset: -2px;
} */
.toggle-menu-items .main-menu li.current-menu-item a::after,
.toggle-menu-items .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-items .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-items li:hover .sub-menu,
	.toggle-menu-items 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-items .menu-item-has-children > a {
		position: relative
	}
	.toggle-menu-items .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-items .menu-item-has-children:hover > a::after {
		transform: rotate(-180deg);
	}
}
*/

/* .btnをオーバライド（モバイルではボタンを拡大） */
.toggle-menu-items .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-weight: bold;
	font-feature-settings: "palt"; /*自動カーニング*/
}

.heading-with-en {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 16px;
	text-align: center;
	font-weight: bold;
}
.heading-with-en h1,
.heading-with-en h2 {
	font-size: 1rem;
	margin: 0;
}
.heading-with-en p {
	font-family: "AlteHaasGrotesk", "Helvetica Neue", HelveticaNeue;
	letter-spacing: -1px;/* for AlteHaasGrotesk */
	font-size: 3.2rem;
	line-height: 1;
	margin: 0;
}
@media screen and (max-width: 559px) {
	.heading-with-en p {
		font-size: 2.8rem;
	}
}

.heading-with-en-inline {
	display: flex;
	flex-direction: row-reverse;
	align-items: baseline;
	justify-content: flex-end;
	gap: 8px;
	font-weight: bold;
}
.heading-with-en-inline h1,
.heading-with-en-inline h2 {
	font-size: 1rem;
	margin: 0;
}
.heading-with-en-inline p {
	font-family: "AlteHaasGrotesk", "Helvetica Neue", HelveticaNeue;
	letter-spacing: -1px;/* for AlteHaasGrotesk */
	font-size: 3.2rem;
	line-height: 1;
	margin: 0;
}

/* 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: 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);
	list-style: none;
	/* 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 {
	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);
	position: relative;
	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-post .prev,
.prev-next-post .next {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.prev-next-post .prev::before,
.prev-next-post .next::after {
	display: block;
	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-post .prev::before {
	transform: rotate(-180deg);
}

/* 次の記事 / 前の記事（旧）
-------------------------------------------------------------- */
.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 {
	font-size: 0.9rem;
	font-weight: bold;
}
.toc-list{
	margin-top: 16px;
}
.toc-list li {
	position: relative;
	list-style: none;
	margin-left: 0;
	line-height: 1.5;
	font-size: 0.8rem;
}
.toc-list li.current{
	font-weight: bold;
}
/* .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 li a.current{
	color: var(--text);
	font-weight: bold;
}
#toc-widget .toc-list li a::before { /* ウィジェットのリストマーク（h2&h3） */
	background: var(--sub);
	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: 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;
	opacity: .3;
	aspect-ratio: 2/1;
}
.swiper-carousel .swiper-slide-active {
	opacity: 1;
}
.swiper-carousel .swiper-slide .image{
	position: absolute;
	top: 0;
}
.swiper-carousel .swiper-slide .image img{
	aspect-ratio: 2/1;
	object-fit: cover;
	object-position: 50% 50%;
}
.swiper-carousel .swiper-slide .image img:hover{
	opacity: .7;
	transition: .2s;
}
.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);
	pointer-events: none;
}
.swiper-carousel .swiper-slide a{
	color: #fff;
	text-shadow: 2px 2px 5px rgba(0,0,0,.3);
	text-decoration: none;
}
.swiper-carousel .swiper-slide-active a:hover::before{
	background-color: rgb(255 255 255 / 0.5);
	transition: .2s;
}
.swiper-carousel  .swiper-slide:not(.swiper-slide-active) a{
	pointer-events: none; /* 非アクティブなスライドのエフェクトはOFF */
}
.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;
}


/* プラグイン - 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: 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
-------------------------------------------------------------- */
/* フォーカス時 */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="password"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="search"]:focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 input[type="month"]:focus,
.wpcf7 input[type="week"]:focus,
.wpcf7 input[type="time"]:focus,
.wpcf7 input[type="datetime-local"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	box-shadow: var(--shadow);
	transform: translate(0, -4px);
}
/* 自動生成されるpの余白をリセット */
/* .wpcf7 p {
	margin: 0;
}
.wpcf7 dl dt {
	margin-top: 32px;
}
.wpcf7 dl dd {
	margin-top: 8px;
} */
/* radioとcheckboxを囲むspanをブロック化 */
.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;
}


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

/* スクロールスナップ
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: rgb(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 rgb(0 0 0 / .5));
}
.mockup .iphone{
	width: 30%;
	position: absolute;
	right: 0;
	bottom: -24px;
	filter: drop-shadow(0px 5px 5px rgb(0 0 0 / .5));
}

/*　CTAボタン - モバイル固定
-------------------------------------------------------------- */
.fixed-banner{
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 1;
	width: 640px;
	max-width: 100%;
	padding: 8px;
}
.fixed-banner .btn{
	border-radius: 4px;
	box-shadow: var(--shadow);
	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;
}