@charset "UTF-8";
/*
Theme Name: freecs 2.0
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;/* 全体の背景 */
	--base:   #f8f7ed;/* 全体の背景 */
	--radius: 8px;
	--shadow: 0px 4px 8px 0px rgb(0 0 0 / 50%);

	--color-green: #7EBA19;
	--color-orange: #E29C21;
	--color-blue: #1185D4;
}

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

.heading-bdb:after {
	content: " ";
	display: block;
	width: 100%;
	height: 4px;
	height: 2px;
	margin: 16px 0 0;
	border-bottom: none;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--color-green) 33%, var(--color-orange) 33%, var(--color-orange) 66%, var(--color-blue) 66%);
	border: none;
}

hr.short {
	height: 2px;
	background: linear-gradient(90deg, var(--color-green) 33%, var(--color-orange) 33%, var(--color-orange) 66%, var(--color-blue) 66%);
}

/* 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: 17px;
}
/* required属性でバリデーションした際に画面外のエラーメッセージが表示されない問題を回避 */
/* html:has(main input[required]) {
	scroll-behavior:auto;
} */
@media screen and (max-width: 559px) {
	html {
		font-size: 16px;
	}
}
body {
	background-color: var(--base);
	background-color: #fff;
	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.6;
  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;
}
pre {
	background-color: #333;
	color: #fff;
	font-size: .8rem;
}
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;
	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:user-invalid, /* Chrome119,Safai16.5 */
textarea:user-invalid,
select:user-invalid {
	border-color: #c20c33;
	background-color: #ffe9ed;
	/* :invalidは、ページ読み込み時に適用されるため、require属性を指定した入力フィールドがデフォルトでエラーになる（よって使わない）*/
	/* :user-invalidは、ユーザーの入力後に適用される。ただし非対応ブラウザあり。*/
}
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;
}
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,
main h2,
main h3,
main h4,
main h5,
main p,
main ul,
main ol,
main dl {
	line-height: calc(1em + 16px); /* pxで調整することでフォントサイズを大きくしても適切な余白がとれる（font-size:2remでline-height1.9とかだと余白が広すぎる） */
}
main h1,.h1 ,
main h2,.h2 ,
main h3,.h3 ,
main h4,.h4,
main h5,.h5 {
	font-weight: bold;
}
main h1,.h1 {
	font-size: 2.074rem;/* Ratio:1.2 */
}
main h2,.h2 {
	font-size: 1.728rem;/* Ratio:1.2 */
	margin-top: 108px;/* Ratio:1.5 */
}
main h3,.h3 {
	font-size: 1.2rem;/* Ratio:1.2 */
	margin-top: 72px;/* Ratio:1.5 */
}
main h4,.h4,
main h5,.h5 {
	font-size: 1.0rem;/* Ratio:1.2 */
	margin-top: 48px;/* Ratio:1.5 */
}
main p:not(li > p):not(dd > p):not(table > p),
main ul:not(li > ul):not(dd > ul):not(table > ul),
main ol:not(li > ol):not(dd > ol):not(table > ol),
main dl:not(li > dl):not(dd > dl):not(table > dl),
main table:not(figure > table),
main pre,
main details,
main figure,
main section,
main aside,
main fieldset {
	margin-top: 32px;
}
.entry-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-color: var(--blue);
	-webkit-mask-image: url(images/icon/external-link-alt-solid.svg);
	mask-image: url(images/icon/external-link-alt-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;
	width: .8em;
	height: .8em;
	margin-left: 4px;
	margin-right: 8px;
}
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(12px + 0.6em); /* emで調整することで大きめのフォントサイズを変えてもいい感じになる */
}
main dt {
	font-weight: bold;
	margin-top: 0;
}
main dt ~ dt { /* 同じ階層にある2つ目以降のdt（:not(:first-child)とか使うと優先度が複雑になるのであまり使いたくない）*/
	margin-top: 16px;
}
main figure {
	display: inline-block; /* 幅の狭い画像のfigcaptionをセンタリングするため */
}
main figure figcaption {
	margin-top: 8px;
	font-size: 0.8rem;
	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 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); */ /* 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;
	display: 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;
}
.home main {
	/* margin-top: -100px; */ /* ヒーロイメージを上方にズラしてヘッダの背景にする */
}
#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: 0 auto;
}
#right-content {
	position: relative;
	order: 1;
	width: 256px;
	margin: 0 auto;
}
#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 {
	position: sticky;
	top: 0;
	width: 100%; /* for position:fixed */
	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; */
	/* background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); */
	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;
	height: 100px;
}
/* #header.scrolled #header-inner{
	height: 80px;
} */
@media screen and (max-width: 1342px) {
	#header-inner{
		gap: 24px;
	}
}
@media screen and (max-width: 559px) {
	#header-inner{
		gap: 16px;
	}
}

#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-title a:hover {
	opacity: .5;
}
#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: var(--main); */
	background-color: var(--sub);
	/* background-color: #ffffff; */
	font-size: 0.9rem;
	/* color: rgb(255 255 255 / 0.8); */
}
#footer .footer-nav {
	gap: 32px;
}
#footer .footer-nav nav ul{
	line-height: 2.0;
}
#footer .footer-nav a {
	color: rgb(255 255 255 / 0.8);
	color: var(--text);
}
#footer h2 {
	margin-bottom: 8px;
	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;
	}
}


/* グローバルナビ
-------------------------------------------------------------- */
#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;
	font-weight: 600;
	-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: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 > .menu-item-has-children > a {/* サブメニューがある場合はデフォルトカーソル */
	cursor: default;
}
#gloval-nav > ul > .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 > .menu-item-has-children:hover::after {
	transform: rotate(-180deg);
	transform-origin: center bottom;
}
#gloval-nav > ul > li > .sub-menu {/* サブメニュー枠・クローズ時 */
	display: block;
	position: absolute;
	top: calc(100% + 24px);
	left: calc(50% - 0px);
	width: auto;
	padding: 24px 32px;
	white-space: nowrap;
	font-size: 0.8rem;
	font-weight: bold;
	/* line-height: 1.6; */
	opacity: 0;
	visibility: hidden; /* フォーカスを当てない */
	translate: -50% -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 > ul > li:hover > .sub-menu,
#gloval-nav > ul > li:focus-within > .sub-menu {/* サブメニュー枠・アクティブ時 */
	opacity: 1;
	visibility: visible;
	translate: -50% 0%;
	transition: .5s;
	pointer-events: all;
	z-index: 3;/* ハンバーガメニューより上位に配置 */
}
/* サブメニューのアイテム */
#gloval-nav .sub-menu li a {
	position: relative;
	display: block;
	padding: 4px 0;
}
#gloval-nav .sub-menu li a[href]:hover { /* href属性が設定されたaタグのみに適用 */
	text-decoration: underline;
}
/* 孫メニューのアイテム */
#gloval-nav > ul > .menu-item-has-grandchildren > .sub-menu{
	display: flex;
	gap: 32px;
}
/* 孫メニューの見出し */
#gloval-nav > ul > .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（ハンバーガメニュー）
-------------------------------------------------------------- */
/* ハンバーガアイコン */
.menu-trigger {
	position: relative;
	display: block;
	width: 32px;
	width: 24px;
	height: 64px;
	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: 90%;
		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: 100%;
		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: 90%;
	height: 1px;
	height: 0;
	border-radius: 4px;
	background-color: var(--text);
	box-shadow: 0 0 0 0.8px var(--text);
	backdrop-filter: drop-shadow(4px 4px 10px rgb(0 0 0 / .5));/* 縁取りをぼかして綺麗にする */
	transition: 0.3s;
}
.icon-bar span:nth-of-type(1) {
	top: 16px;
	box-shadow: 0 0 0 0.8px #7EBA19;
}
.icon-bar span:nth-of-type(2) {
	/* top: 0px; */
	box-shadow: 0 0 0 0.8px #E29C21;
}
.icon-bar span:nth-of-type(3) {
	top: -16px;
	box-shadow: 0 0 0 0.8px #1185D4;
}
.icon-bar.active span:nth-of-type(1),
.icon-bar.active span:nth-of-type(3) {
	top: 0;
	width: 24px;
	box-shadow: 0 0 0 0.5px var(--text);
	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: -2px;/* グリップ分の高さ調整 */
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: inline-block;
	width: 16px;
	height: 16px;
	box-shadow: 0 0 0px 1.5px var(--text);
	backdrop-filter: drop-shadow(4px 4px 10px rgb(0 0 0 / .5));/* 縁取りをぼかして綺麗にする */
	rotate: -45deg;
	border-radius: 50%;
	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: 24px;
	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;
	gap: 8px;
	flex-direction: column;
	/* align-items: flex-start; */ /* これがないと内包するliのwidthが100%になっちゃう。なんで？ */
	font-size: 1.6rem;
	font-weight: bold;
	/* 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: "Oxanium", sans-serif;
	font-weight: normal;
	font-size: 3.2rem;
	line-height: 1;
	margin: 0;
}
@media screen and (max-width: 1342px) {
	.heading-with-en p {
		font-size: 4.8rem;
	}
}
@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: "Oxanium", sans-serif;
	font-weight: normal;
	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;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.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%;
	}
}
/* 固定アイコン：共通 */
.fixed-icon a:after { /* フォントアイコン */
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	transition: 0.2s;
	background-color: var(--base);
	background-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
/* 固定アイコン：トップに戻る */
#totop{
	display: none; /* デフォルト（未スクロール時）は非表示 */
}
#totop a:after {
	-webkit-mask-image: url(images/icon/angle-down-solid.svg);
	mask-image: url(images/icon/angle-down-solid.svg);
	transform: translate(0%, 0%) rotate(180deg);
}
/* 固定アイコン：CTAボタン */
#tocta a:after {
	-webkit-mask-image: url(images/icon/calendar-check-regular.svg);
	mask-image: url(images/icon/calendar-check-regular.svg);
	/* -webkit-mask-image: url(images/icon/envelope-regular.svg);
	mask-image: url(images/icon/envelope-regular.svg); */
}
/* 固定アイコン：投稿の編集 */
#edit-post a:after {
	-webkit-mask-image: url(images/icon/pen-to-square-solid.svg);
	mask-image: url(images/icon/pen-to-square-solid.svg);
}

/* 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;
}

/* Top（トップページ）
-------------------------------------------------------------- */
.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-section{
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

/* ヒーロイメージ */
.hero {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 128px 0 128px;
}
.hero,
.hero a {
	color: #fff;
	/* text-shadow: 2px 2px 5px rgb(0 0 0 / .6); */
	/* word-break: normal; */
}
.hero img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.hero.blackscreen::before { /* for filter */
	content: "";
	display: block;
	position: absolute;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / .5);
}
/* テキスト */
.hero .msg-small,
.hero .msg-large {
	color: #fff;
}
.hero .msg-small {
	margin-top: 0;
	font-size: 1.6rem;
}
.hero .msg-large {
	/* margin-top: 16px; */
	font-size: 4.8vw;
	font-weight: bold;
	line-height: 1;
	letter-spacing: -2px;
	opacity: 0.8;
}
/* .hero .msg-large span{
	display: block;
} */

/* トップページ最上部のメインビジュアル */
.hero.main-visual{
	width: 100%;
	height: 100vh;
	height: 50vh;
	/* padding: 128px 0 48px;
	align-items: flex-end; */
	/* border: solid 1px green; */
	background-color: rgb(0 0 0 / .5);
	/* aspect-ratio: 2/1; */
}
@media screen and (max-width: 559px) {
	.hero.main-visual {
		height: auto;
		aspect-ratio: auto;
		aspect-ratio: 4/3;
		aspect-ratio: 1/1;
	}
}

.hero-video{
	background-color: #fff
}
.hero-video video{
	display: block;
	width: 1280px;
	height: auto;
	margin: auto;
	/* padding-top: 6%; */
}

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

/* ページ概要（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;
	font-size: 0.85rem;
}
.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; */
	display: inline-flex; /* flexの場合.cards-itemが内包するa::beforeのクリックエリアにかぶるため */
	flex-wrap: wrap;
	gap: 0 8px;
	font-size: .8rem;
	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; */
	/* line-height: inherit; */
}
.toc-list{
	margin-top: 16px;
}
.toc-list li {
	position: relative;
	list-style: none;
	margin-left: 0;
	line-height: 1.6;
	font-size: 0.85rem;
}
.toc-list li.current{
	font-weight: bold;
}
.toc-list li.toc-item-h3 {/* 目次テキスト（h3） */
	font-size: 0.75rem;
}
.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） */
	background: transparent;
	border: solid 1px var(--subtext);
}

/* メインコンテンツの目次 */
#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{
	font-weight: bold;
}
#toc-widget .toc-list li a.current::before { /* ウィジェットのリストマーク（current） */
	transform: scale(1.6);
	background: var(--main);
	border: solid 0px transparent;
}
@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);
}
/* radioとcheckboxを囲むspanをブロック化 */
.wpcf7-radio .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item {
	display: block;
}
/* バリデート時に最上部に表示されるスクリーンリーダ用のエラーメッセージを非表示化 */
.wpcf7 .screen-reader-response {
	display: none;
}
/* バリデートメッセージ */
.wpcf7-not-valid-tip:not(:empty),/* バリデート時のエラーメッセージ（必須項目に入力してください、など）*/
.wpcf7-response-output {/* 送信ボタン直下のメッセージ（送信しました、エラー、など） */
	display: block;
	margin-top: 8px;
	font-size: 0.9rem;
	color: var(--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{
	display: none;/* ロード時は非表示 */
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 10;
	width: 640px;
	max-width: 100%;
	padding: 8px;
	/* background-color: rgb(255 255 255 / .9); */
}
.fixed-banner .btn{
	box-shadow: var(--shadow);
	/* border-radius: 4px; */
	/* 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;
}

/*　グラデーションボーダーボタン
-------------------------------------------------------------- */
.btn.gradient {
	color: var(--text);
	background-color: transparent;
	border: 2px solid transparent;
	border-image: linear-gradient(45deg,#7EBA19,#E29C21,#1185D4) 1;
  animation: changeBorderGradient 1s linear infinite paused; /* infinite paused を使うとChromeで線が細くなることがあるので注意！ */
  /* box-shadow: 0 0px 8px 0px rgb(0 0 0 / 0.5) */
}
@keyframes changeBorderGradient {
  1% {  border-image: linear-gradient(45deg, #7EBA19, #E29C21, #1185D4) 1;}
  10% { border-image: linear-gradient(135deg, #7EBA19, #E29C21, #1185D4) 1;}
  50% { border-image: linear-gradient(225deg, #7EBA19, #E29C21, #1185D4) 1;}
  60% { border-image: linear-gradient(315deg, #7EBA19, #E29C21, #1185D4) 1;}
  100% {border-image: linear-gradient(45deg, #7EBA19, #E29C21, #1185D4) 1;}
}
/* ホバー時にアニメーションを開始 */
.btn.gradient:hover {
  animation-play-state: running;
}
.btn.gradient::before {
	/* background: linear-gradient(#7EBA19,#E29C21,#1185D4); */
	background: var(--text)
}
/* .btn.gradient.white {
	color: #fff;
}
.btn.gradient.white::before {
	background: #fff;
} */

/* 光彩がボタンのボーダー上をぐるぐる回るエフェクト */
.btn.gradient::after {
	content: '';
	display: block;
	width: auto;
	height: auto;
	position: absolute;
	inset: -4px;
	pointer-events: none;
	opacity: 0; /* 初期状態では非表示 */
	border: 4px solid transparent;/* アニメーション時に線が細くなることがるためボタンのボーダーよりも太めに設定 */
	border-image: linear-gradient(45deg,white 0%,transparent 50%) 1;
  animation: sparkleBorder 1.0s linear infinite paused; /* 初期状態を paused に設定 */
}
.btn.gradient:hover::after {
  opacity: .8; /* ホバー時に表示 */
  animation-play-state: running; /* ホバー時にアニメーションを開始 */
}
@keyframes sparkleBorder {
  0% {  border-image: linear-gradient(45deg,white 0%,transparent 50%) 1;}
  25% { border-image: linear-gradient(135deg,white 0%,transparent 50%) 1;}
  50% { border-image: linear-gradient(225deg,white 0%,transparent 50%) 1;}
  75% { border-image: linear-gradient(315deg,white 0%,transparent 50%) 1;}
  100% {border-image: linear-gradient(45deg,white 0%,transparent 50%) 1;}
}

/* オブジェクトがボタンのボーダー上をぐるぐる回るエフェクト */
.btn.gradient2::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(#7EBA19,#E29C21,#1185D4);
	background: radial-gradient(at center top,#ddd 0%, #333 100%);
	background: conic-gradient(from 0deg,#7EBA19 0% 33%,#E29C21 33% 66%,#1185D4 66% 100%); /* 円を三等分 */
	background: #fff;
  position: absolute;
  top: 0;
  left: 0;
	transform: translate(-50%, -50%);/* 要素自身のサイズの半分だけ位置を戻すことでボーダー上に配置する */
  opacity: 0; /* 初期状態では非表示 */
  pointer-events: none; /* クリックイベントを透過 */
	filter: blur(4px);
}
.btn.gradient2:hover::after {
  opacity: 1; /* ホバー時に表示 */
  animation: rotateAroundBorder 2s linear infinite;
}
@keyframes rotateAroundBorder {
  0% {top: 0;left: 0;}
  15% {top: 0;left: 100%;}
  50% {top: 100%;left: 100%;}
  85% {top: 100%;left: 0%;}
  100% {top: 0%;left: 0%;}
}

/* マスクを使ったバージョン（テスト中） */
.btn.gradient3 {
  position: relative;
  display: inline-block;
  padding: 1em 2em;
  color: #fff;
  background: #111;
  border: 2px solid transparent;
  z-index: 0;
  overflow: hidden;
}
.btn.gradient3::after {
  content: '';
  position: absolute;
  top: -5px; left: -5px; right: -5px; bottom: -5px;
  background: conic-gradient(#7EBA19, #E29C21, #1185D4, #7EBA19);
  z-index: -1;
  animation: rotateBorder 4s linear infinite;
  border-radius: 8px; /* お好みで */
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  padding: 20px;
  box-sizing: border-box;
	transform: translate(-50%, -50%);/* 要素自身のサイズの半分だけ位置を戻すことでボーダー上に配置する */
}

@keyframes rotateBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* グラデーション見出し */
.emphasis_design32 {
  background: linear-gradient(to right, #00a1e5, #00ffbc);
  background: -webkit-linear-gradient(to right, #00a1e5, #00ffbc);
	background: linear-gradient(#7EBA19,#E29C21,#1185D4);
	background: linear-gradient(to right, #7EBA19,#E29C21,#1185D4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	text-align: center;
}

/* マーカー囲み見出し */

.heading-marker {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #fff100;
}

.heading-marker:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}