@charset "UTF-8";
/*
Theme Name: LIM13.3
Author: WATANABE Takeshi

# breakpoint
@media screen and (max-width: 1247px) {-md 1248px未満 tablet}
@media screen and (max-width: 559px) {-sm 560px未満 smartphone}
*/

/* Custom Properties
-------------------------------------------------------------- */
:root {
	--main:   #32363e;/* メインカラー */
	--sub:    #f8f7ed;/* サブカラー */
	--text:   #222222;/* 本文テキスト */
	--subtext:#777777;/* 補足テキスト・ターシャリボタン（#背景に色味があるとコントラスト十分でない） */
	--subtext:#666666;/* 補足テキスト・ターシャリボタン */
	--blue:   #2F6BBA;/* テキストリンク・バッジ */
	--green:  #57B157;/* バッジ */
	--red:    #ff6666;/* バッジ */
	--orange: #ff8a00;/* バッジ・CTAボタン */
	--radius: 8px;
	--shadow: 0px 4px 8px rgb(0 0 0 / 10%);
		/* 白背景の場合 */
	--base:   #fefefe;/* 全体の背景 */
	--box:   #f0f0f0;/* ボックスの背景 */
	--border: rgb(0 0 0 / 0.1);/* 罫線 */
	--border: rgb(230 230 230 / 1);/* 罫線 */
	/* グレー背景の場合 */
	--base:   #F0EEE9;/* 全体の背景（PANTONE 11-4201 TCX Cloud Dancer） */
	--box:   rgb(0 0 0 / 0.05);/* ボックスの背景 */
	--box:   rgb(255 255 255 / 0.7);/* ボックスの背景 */
	--border: rgba(0, 0, 0, 0.2);/* 罫線 */
	--border: rgb(204 204 204 / 1);/* 罫線 */

	/* 欧文見出し用フォント */
	--heading-font: "Courier New", Courier, monospace;
	--heading-font: "EB Garamond", serif;
	--heading-font: "Cormorant Garamond", serif;
  --heading-font: "Averia Serif Libre", sans-serif;
	--heading-font: "Helvetica Neue", sans-serif;
	--heading-font: "Noto Sans JP", sans-serif;
	--heading-font: "Lato", sans-serif;
	--heading-font: "Avenir", sans-serif;
	--heading-font: "Outfit", sans-serif;
	--heading-font: "Montserrat", sans-serif;
	--heading-font: "Cal Sans", sans-serif;
	--heading-font: "Geologica", sans-serif;
	--heading-font: "Lexend", sans-serif;
	--heading-font: "AlteHaasGrotesk", sans-serif;
}

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

/* Reset & Default Style
-------------------------------------------------------------- */
*,*::before,*::after{
	box-sizing: border-box; /* paddingとborderを幅と高さに含める */
}
:target {
	scroll-margin-top: 128px;/* ページ内リンクのスクロール停止位置（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;
}
/* required属性でバリデーションした際に画面外の要素に対するエラーメッセージが表示されない問題を回避 */
/* 検索ページ（input[type="search"]）を対象外にするため個別に指定する */
html:has(main input[type="text"][required]),
html:has(main input[type="email"][required]),
html:has(main input[type="tel"][required]),
html:has(main input[type="url"][required]),
html:has(main input[type="password"][required]),
html:has(main input[type="number"][required]),
html:has(main input[type="text"][required]),
html:has(main input[type="date"][required]),
html:has(main input[type="month"][required]),
html:has(main input[type="week"][required]),
html:has(main input[type="time"][required]),
html:has(main input[type="datetime-local"][required]){
	scroll-behavior:auto;
}
@media screen and (max-width: 559px) {
	html {
		font-size: 16px;
	}
}
body {
	background-color: var(--base);
	color: var(--text);
	/* font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Segoe UI","BIZ UDPGothic","Noto Sans CJK JP","Noto Sans JP",Meiryo,sans-serif; */
	/* font-family:"Helvetica Neue",Arial,"Noto Sans CJK JP","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Segoe UI",sans-serif; */
	font-family:"Helvetica Neue",Arial,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 */
	/* font-feature-settings: "palt"; */
	/* letter-spacing: .05em; */ /* 和文は読みやすくなるが英文が開き過ぎるため全体に適用するのは控える */
	/* grid pattern
	background-image:linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
	background-size: 32px 32px;
	*/
}
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 {
	tab-size: 2;
	-moz-tab-size: 2;
	/* font-family: monospace;
	display: inline-block;
	background-color: var(--box);
	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: 128px;/* 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: inline-block; /* 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: 8px;
}
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;
}
textarea {
	width: 560px;
	min-height: 80px;
	field-sizing: content;
	overflow: auto;
	line-height: 1.6;
  font-size: .9rem;
}
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: 8px;
} */
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,.heading1 {
	font-size: 2.074rem;/* Ratio:1.2 */
	font-weight: bold;
}
main h2,.heading2 {
	font-size: 1.728rem;/* Ratio:1.2 */
	font-weight: bold;
	margin-top: 96px;/* 32*3 */
}
main h3,.heading3 {
	font-size: 1.2rem;/* Ratio:1.2 */
	font-weight: bold;
	margin-top: 64px;/* 32*2 */
}
main h4,.heading4,
main h5,.heading5 {
	font-size: 1.0rem;/* Ratio:1.2 */
	font-weight: bold;
	margin-top: 48px;/* 32*1.5 */
}
main p,
main ul,
main ol,
main dl,
main table:not(figure > table),
main pre,
main details,
main figure,
main section,
main aside,
main fieldset {
	margin-top: 32px;
}
main :is(li,dd,td) > :is(p,ul,ol,dl) {
	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 dd {
	margin-top: 8px; dtとddは隣接していたほうが読みやすい気がする（2026/06/27）
} */
/* 幅の狭い画像のfigcaptionをセンタリングするために入れたが、埋め込みiframeなどが縮小されて不便なので一旦解除（2025/07/13） */
/* main figure {
	display: inline-block;
} */
main figure figcaption {
	margin-top: 8px;
	margin-top: 16px;
	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; /* ブロック要素にするとリンク付き画像のクリックエリアが横幅いっぱいに広がるので注意 */
}
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 {
	font-weight: bold;
}
main table tfoot {
	font-weight: bold;
	border-top: double 3px var(--border);
}
main table tr {
	border-bottom: solid 1px var(--border);
}
main table th {
	text-align: left;
	/* font-weight: bold; */
}
main table th,
main table td {
	vertical-align: middle;
	padding: 16px;
}
/* animation時にborderが消える */
/* main table tbody th {
	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;
	border-radius: var(--radius);
	background-color: #333;
	color: #fff;
	font-size: .8rem;
	overflow: scroll;
}
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 {
	border-top: solid 1px var(--border);
	border-bottom: solid 1px var(--border);
	padding-bottom: 0px;
}
main details + details {
	margin-top: 0;
	border-top: none;
}
main details[open] {
	padding-bottom: 32px;
}
main details summary {
	position: relative;
	display: block; /* デフォルトアイコンを非表示（Safari以外） */
	padding: 16px 56px 16px 0;
	color: var(--text);
	text-decoration-color: transparent;
	overflow: hidden; /* Safariで回転時にアウトラインが広がるバグを回避 */
	transition: 0.4s;
}
main details[open] summary{
	margin-bottom: 16px;
	text-decoration: underline;
  text-decoration-color: #fff07d;
  text-decoration-thickness: 8px;
  text-underline-offset: -4px;
}
main details summary::-webkit-details-marker {
	display: none; /* Safariのデフォルトアイコン▶を非表示 */
}
main details summary:hover {
	cursor: pointer;
}
main details summary + :is(p, ul, ol, dl) { /* サマリ直後の要素 */
	margin-top: 0; /* 上余白があると開閉アニメーションがガタつく */
}
/* アコーディオンのアニメーション */
main details::details-content { /* Safari18未満は非対応 https://caniuse.com/?search=details-content */
	transition:
		height 0.8s linear(0, 0.0114, 0.0427, 0.0898, 0.149, 0.2169, 0.2906, 0.3673, 0.445, 0.5216, 0.5958, 0.6663, 0.7321, 0.7926, 0.8474, 0.8962, 0.9389, 0.9758, 1.0069, 1.0325, 1.053, 1.0689, 1.0805, 1.0884, 1.093, 1.0947, 1.0941, 1.0915, 1.0873, 1.0819, 1.0756, 1.0687, 1.0614, 1.0541, 1.0468, 1.0397, 1.0329, 1.0266, 1.0208, 1.0155, 1.0107, 1.0066, 1.003, 0.9999, 0.9974, 0.9953, 0.9937, 0.9926, 0.9917, 0.9913, 0.991, 0.9911, 0.9913, 0.9916, 0.9921, 0.9927, 0.9934, 0.994, 0.9947, 0.9954, 0.9961, 0.9968, 0.9974, 0.9979, 0.9984, 0.9989, 0.9993, 0.9997, 1, 1.0002, 1.0004, 1.0006, 1.0007, 1.0008, 1.0008, 1.0008, 1.0008, 1.0008, 1.0008, 1.0008, 1.0007, 1.0006, 1.0006, 1.0005, 1.0004, 1.0004, 1.0003, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1, 1, 1, 1, 0.9999, 0.9999, 0.9999, 0.9999, 1), /* Spring bouncy */
		opacity 0.4s,
		content-visibility 0.4s allow-discrete; /* autoやnoneでアニメーションできるようにするやつ */
	height: 0;
	opacity: 0;
	overflow: clip;
}
main details[open]::details-content {
	opacity: 1;
}
/* Chrome・Edge */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0→autoのアニメーションを可能にするための指定 */
  }
  details[open]::details-content {
    height: auto;
  }
}
/* Safari */
@supports not (interpolate-size: allow-keywords) {
  main details[open]::details-content {
    height: 250px; /* height:0 → auto のアニメーションに非対応のため、固定値にする */
    overflow-y: scroll;
    height: auto; /* スクロールしないと見られないのでSafariでのアニメーションは諦めた */
    overflow-y: visible;
  }
}
/* 三角アイコン */
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/chevron-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(--box);
}
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: flex;
  flex-direction: column;
	min-height: 100vh;
}
main {
	position: relative;
	flex: 1 0 auto;
}
main > article{
	padding-bottom: 128px;
}
.home main {
	/* margin-top: -128px; */ /* ヒーロイメージを上方にズラしてヘッダの背景にする */
}
#content {
	position: relative;
	margin: 64px auto 0;
}
.single #content { /* シングルページは3カラム */
	display: flex;
	gap: 48px;
}
#main-content,
#left-content,
#right-content {
	position: relative;
	width: 640px; /* 32*20 */
	max-width: 100%;
	margin: 0 auto;
	/* background-color: rgb(0 0 0 / .1); */
}
#main-content {
	flex: 0 0 auto; /* 伸びない＆縮まない */
}
#main-content > *:first-child { /* 記事内の最初の要素 */
	margin-top: 0;
}
#left-content,
#right-content {
	flex: 1; /* 均等に分割 */
}
#left-content {
	order: -1;
}
#right-content {
	order: 1;
}
#left-content .sticky,
#right-content .sticky {
	top: 128px; /* = #header-inner's height + 32px */
	top: 160px; /* = #header-inner's height + 64px */
}
#right-content .sticky {
	display: none; /* 一時的に削除 */
}

.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);
}

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

/* header（ヘッダー）
-------------------------------------------------------------- */
#global-header {
	position: sticky;
	/* position: fixed; */
	top: 0;
	width: 100%; /* for position:fixed */
	height: 100px;
	z-index: 10;
	transition: 0.5s; /* for animation */
	font-size: 1em;
	background-color: #fff;
	/* スクロールしたら背景色を表示 */
  background-color: rgb(255 255 255 / 0); /* 初期状態 */
  animation: scroll-to-show-background linear forwards; /* アニメーションの設定 */
  animation-timeline: scroll(); /* スクロールに合わせて動かす設定 */
  animation-range: 50vh 100vh; /* アニメーションが開始・終了するスクロール範囲を指定（0〜300pxの間で変化させ、その後は維持する）*/
}
@keyframes scroll-to-show-background {
  to {
    background-color: rgb(255 255 255 / 0.9);
		backdrop-filter: blur(4px);
  }
}
#global-header .sns-icons { /* Override class.css */
	gap: 0;
	margin: 0;
	z-index: 3;
}

#header-inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	height: 96px;
}
@media screen and (max-width: 1247px) {
	#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: 1247px) {
	#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: 1247px) {
	#notification-bar{
		display: none;
	}
}
/* Footer（フッター）
-------------------------------------------------------------- */
#global-footer {
	background-color: #ffffff;
	background-color: var(--main);
	font-size: 0.9rem;
	color: rgb(255 255 255 / 0.8);
}
#global-footer .footer-nav {
	gap: 32px;
	position: relative;
}
#global-footer .footer-nav nav ul,
#global-footer .footer-nav ul.menu /* ウィジェットメニュー */ ,
#global-footer .footer-nav .textwidget li{
	line-height: 2.0;
}
#global-footer .footer-nav a {
	color: rgb(255 255 255 / 0.8);
}
#global-footer .footer-nav .screen-reader-text { /* ドロップダウンメニューに出力されるスクリーンリーダー用テキスト */
	text-indent: -999px;
	position: absolute;
	top: 0;
	left: 0;
}
#global-footer h2 {
	margin-bottom: 16px;
	/* font-size: 0.9em; */
	font-weight: bold;
	/* color: var(--subtext); */
}
/* #global-footer a:hover {
	opacity: 0.7;
	text-decoration: underline;
} */
#global-footer #global-footer-logo svg {
	display: block;
	width: auto;
	height: 16px;
	margin: 0;
	padding: 0;
	fill: #fff;
}
#global-footer #copyright {
	padding: 0 0 1em;
	text-align: center;
	font-size: 0.8rem;
}
/* 子カテゴリ
#global-footer nav ul.children{
	margin-left: 16px;
	font-size: 0.95rem;
}*/
#global-footer nav ul.children li::before {
	content: "−";
	opacity: 0.5;
	margin-right: 8px;
}
@media screen and (max-width: 1247px) {
	#global-footer {
		font-size: 1rem;
	}
	/* #global-footer nav ul li a {
		display: inline-block;
	} */
}


/* グローバルナビ
-------------------------------------------------------------- */
#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: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;
	transition: all .3s linear(0, 0.0001, 0.0004, 0.0009, 0.0016, 0.0025, 0.0036, 0.0049, 0.0064, 0.0082, 0.0101, 0.0123, 0.0146, 0.0172, 0.02, 0.023, 0.0263, 0.0298, 0.0335, 0.0375, 0.0417, 0.0462, 0.051, 0.056, 0.0614, 0.067, 0.0729, 0.0792, 0.0858, 0.0927, 0.1, 0.1077, 0.1158, 0.1244, 0.1334, 0.1429, 0.153, 0.1637, 0.175, 0.1871, 0.2, 0.2138, 0.2287, 0.2449, 0.2625, 0.2821, 0.304, 0.3294, 0.36, 0.4005, 0.5, 0.5995, 0.64, 0.6706, 0.696, 0.7179, 0.7375, 0.7551, 0.7713, 0.7862, 0.8, 0.8129, 0.825, 0.8363, 0.847, 0.8571, 0.8666, 0.8756, 0.8842, 0.8923, 0.9, 0.9073, 0.9142, 0.9208, 0.9271, 0.933, 0.9386, 0.944, 0.949, 0.9538, 0.9583, 0.9625, 0.9665, 0.9702, 0.9737, 0.977, 0.98, 0.9828, 0.9854, 0.9877, 0.9899, 0.9918, 0.9936, 0.9951, 0.9964, 0.9975, 0.9984, 0.9991, 0.9996, 0.9999, 1); /* InOutCirc */
}
#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 .3s linear(0, 0.0001, 0.0004, 0.0009, 0.0016, 0.0025, 0.0036, 0.0049, 0.0064, 0.0082, 0.0101, 0.0123, 0.0146, 0.0172, 0.02, 0.023, 0.0263, 0.0298, 0.0335, 0.0375, 0.0417, 0.0462, 0.051, 0.056, 0.0614, 0.067, 0.0729, 0.0792, 0.0858, 0.0927, 0.1, 0.1077, 0.1158, 0.1244, 0.1334, 0.1429, 0.153, 0.1637, 0.175, 0.1871, 0.2, 0.2138, 0.2287, 0.2449, 0.2625, 0.2821, 0.304, 0.3294, 0.36, 0.4005, 0.5, 0.5995, 0.64, 0.6706, 0.696, 0.7179, 0.7375, 0.7551, 0.7713, 0.7862, 0.8, 0.8129, 0.825, 0.8363, 0.847, 0.8571, 0.8666, 0.8756, 0.8842, 0.8923, 0.9, 0.9073, 0.9142, 0.9208, 0.9271, 0.933, 0.9386, 0.944, 0.949, 0.9538, 0.9583, 0.9625, 0.9665, 0.9702, 0.9737, 0.977, 0.98, 0.9828, 0.9854, 0.9877, 0.9899, 0.9918, 0.9936, 0.9951, 0.9964, 0.9975, 0.9984, 0.9991, 0.9996, 0.9999, 1); /* InOutCirc */
	background-color: var(--box);
	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%;
	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: 1247px) {
	#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(--box);
	}
}
.menu-trigger.active::before {
	width: 64px;
	height: 64px;
	background-color: var(--sub);
	background-color: var(--box);
}
@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;
}
/* .icon-bar span:nth-of-type(2) {
	top: 0px;
} */
.icon-bar span:nth-of-type(3) {
	top: -16px;
}
.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 {
	position: relative;
	border: none;
  background: none;
}
.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: all .2s ease;
}
.menu-trigger.active + .toggle-menu-items {/* アクティブ時 */
	padding: 32px 0;
	z-index: -1;/* グロナビのドロップダウンメニューより下層に配置 */
	/* OpenEffect */
	height: calc(100vh - 100px); /* 100vh - header height */
	visibility: visible;
	opacity: 1;
	transition: height .8s linear(0, 0.0008, 0.003, 0.0068, 0.0121, 0.0189, 0.0272, 0.0371, 0.0484, 0.0613, 0.0756, 0.0915, 0.1089, 0.1278, 0.1482, 0.1702, 0.1936, 0.2186, 0.245, 0.273, 0.3025, 0.3335, 0.366, 0.4001, 0.4356, 0.4727, 0.5112, 0.5513, 0.5929, 0.636, 0.6806, 0.7268, 0.7744, 0.8236, 0.8742, 0.9264, 0.9801, 0.9828, 0.957, 0.9328, 0.91, 0.8888, 0.869, 0.8508, 0.8341, 0.8189, 0.8052, 0.7931, 0.7824, 0.7733, 0.7656, 0.7595, 0.7549, 0.7518, 0.7502, 0.7502, 0.7516, 0.7546, 0.759, 0.765, 0.7725, 0.7815, 0.792, 0.8041, 0.8176, 0.8327, 0.8492, 0.8673, 0.8869, 0.908, 0.9306, 0.9548, 0.9804, 0.9963, 0.9837, 0.9727, 0.9631, 0.9551, 0.9485, 0.9435, 0.94, 0.938, 0.9375, 0.9386, 0.9411, 0.9452, 0.9507, 0.9578, 0.9664, 0.9765, 0.9881, 0.9994, 0.9934, 0.9889, 0.986, 0.9845, 0.9846, 0.9862, 0.9893, 0.9939, 1); /* OutBounce */
}
/* 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: 1247px) {
	.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: 32px;
	text-align: center;
}

/* SNSアイコン
-------------------------------------------------------------- */
@media screen and (max-width: 1247px) {
	.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 16px;
		border: solid 1px red;
	}
	.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;
	/* 左揃え */
	/* flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: flex-end; */
	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: var(--heading-font);
	font-weight: 600;
	font-size: 3.2rem;
	line-height: 1;
	margin: 0;
}
@media screen and (max-width: 1247px) {
	.heading-with-en p {
		font-size: 3.2rem;
	}
}
@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: var(--heading-font);
	font-size: 3.2rem;
	line-height: 1;
	margin: 0;
}


/*　固定フッタ
-------------------------------------------------------------- */
.fixed-footer{
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
	z-index: 99;
	width: 100%;
	padding: 16px;
	background-color: rgb(255 255 255 / 1);
	box-shadow: var(--shadow);
	/* スクロールしたら表示 */
  opacity: 0; /* 初期状態は非表示（透明） */
  animation: fade-in linear forwards; /* アニメーションの設定 */
  animation-timeline: scroll(); /* スクロールに合わせて動かす設定 */
  animation-range: 960px 1080px; /* アニメーションが開始・終了するスクロール範囲を指定（0〜300pxの間で変化させ、その後は維持する）*/
}
@keyframes fade-in {
  to {
    opacity: 1;
  }
}
@media screen and (max-width: 559px) {
	.fixed-footer{
		flex-direction: column;
		gap: 8px;
		padding: 16px;
	}
	.fixed-footer div{
		scale: .9;
	}
}

/* 固定アイコン（画面右下）
-------------------------------------------------------------- */
#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/chevron-down-solid.svg);
	mask-image: url(images/icon/chevron-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;
	border: solid 1px green;
}
.search-trigger.active::after{ /* クローズアイコン（縦） */
	width: 24px;
	height: 2px;
	margin-left: -11px;
	border: solid 1px red;
}
.search-trigger + #search-contents {/* 検索ウィンドウ・クローズ時 */
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: var(--box);
	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;
}
/* .hero,
.hero a {
	text-shadow: 2px 2px 5px rgb(0 0 0 / .6);
	word-break: normal;
} */
.hero img,
.hero video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	object-fit: cover;
	object-position: center top;
}
/* テキスト */
.hero .text-large,
.hero .text-small{
	margin-top: 0;
	color: #fff;
	opacity: 0.8;/* フェイドインした後に半透明化 */
	/* mix-blend-mode: difference; */
}
.hero .text-large {
	font-size: clamp(24px,7vw,110px); /* 文字列に合わせて調節する */
}
.hero .text-small {
	font-size: clamp(14px,2vw,1em); /* 文字列に合わせて調節する */
	margin-left: 0.5vw;
}
.hero .text-large span,
.hero .text-small span{
	display: block;
}
.hero .text-en{
	font-family: var(--heading-font);
}

/* トップページ最上部のメインビジュアル */
.hero.main-visual{
	width: 100%;
	height: 100vh;
	margin-top: -100px; /* ヘッダの高さ分を上方にズラす */
	padding: 128px 0 48px;
	align-items: flex-end;
	/* 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;
	}
}

/* archive（アーカイブ・カテゴリページ）
-------------------------------------------------------------- */
.tag-description{
	font-size: .9rem;
	text-align: center;
	/* text-align: left;
	margin-left: 4px; */
}

/* Single / Page / Search / 404（シングル・固定ページ）
-------------------------------------------------------------- */
#content-header {
	position: relative;
	margin-top: 64px;
	/*
	padding: 64px 0;
	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;
	*/
}
#content-footer {
	margin-top: 0;
}

/* ページ概要（タイトル直下のメタ情報・アーカイブページでも使用）*/
.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;
}

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

/* 次の記事 / 前の記事（新）
-------------------------------------------------------------- */
.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(--box);
	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: 1247px) {
	.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 {
	display: inline-block;
	display: flex;
	font-size: 0.8rem;
	/* opacity: 0.5; */
	/* タイトルエリアに重ねる場合
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2; */
}
.breadcrumbs,
.breadcrumbs a {
	color: var(--text);
	color: var(--subtext);
}
.breadcrumbs > span:not(:first-child)::before,
.breadcrumbs-single-date::before {
	content: ">";
	display: inline-block;
	padding: 0 8px;
}
/* 現在表示中の投稿は非表示（スクリーンリーダーには読まれる） */
/* .breadcrumbs .post-post.current-item {
	visibility: hidden;
} */


/* 目次（ Table of Contents / TOC）
-------------------------------------------------------------- */
#main-content .toc-wrapper {
	margin-top: 32px;
	font-size: 0.9em;
}
#main-content .toc-wrapper .toc-inner {
	padding: 32px 8px;
	border-top: solid 1px var(--text);
	border-bottom: solid 1px var(--text);
	transition: all .4s;
}
/* デスクトップの場合はスクロールに連動して右カラムに移動 */
@media screen and (min-width: 1248px) {
	#main-content .toc-trigger {
		translate: 0 0;
		/* border: solid 1px red; */
	}
	#main-content .toc-trigger.is-active {
		translate: 0 100px; /* 右カラムから最初の見出しにジャンプした際、スクロール後に目次が移動して消えたように見えるのを回避 */
		translate: 0 0;
	}
	#main-content .toc-wrapper {
		top: 0; /* must for animation */
		white-space: nowrap; /* 右カラム→メインカラム遷移時のガタツキ防止 */
		translate: 0 0;
		/* アニメーション設定（右カラム → メインカラム） */
		transition: all 0.5s, width 0s;
		transition: all 2.5s, width 0s;
		transition: all 2.5s;
		transition: all .5s;
	}
	/* 見出しの文字数が多いと、目次が右カラムに移動した際に高さが変わるため、メインカラムの目次からジャンプした際に位置が若干ずれる */
	#main-content .toc-wrapper.is-active {
		position:sticky;
		z-index: 1;
		translate: 688px 0;
		width: 224px;
		white-space: normal;

		/* アニメーション設定（メインカラム → 右カラム） */
		transition: width 0s 1.5s; /* 1.5秒後（ジャンプが完了した後）に一瞬（0秒）で切り替える */
		animation: fadeOutIn 1s 1.5s forwards; /* 1.5秒後に1秒かけてアニメーションする */
		top: 0;
		opacity: 0;
	}
	@keyframes fadeOutIn {
		from { opacity: 0; top: 0px; }
		to { opacity: 1; top: 132px; }
	}
	#main-content .toc-wrapper.is-active .toc-inner {
		max-height: calc(100vh - 100px - 64px); /* 画面高 - header - padding */
		overflow: auto; /* 目次が画面の高さを超えたときに見えなくなるのを回避するのに必須 */
		/* padding-right: 0px; */
		/* アニメーション */
		/* translate: 0 132px;
		transition: all 1.0s;
		transition: all .5s; */
	}


	/* メインカラムに戻すときにis-inactiveを与えてガタツキをなくそうと試みたが、沼にハマりそうなのでいったん忘れる */
	#main-content .toc-wrapper.is-inactive {
		border: solid 1px red;
		white-space: nowrap;
		translate: 0 0;
		/* 右カラム → メインカラムに戻すときのアニメーション */
		transition:
			white-space 0s 0s, /* 1.5秒後（ジャンプが完了した後）に一瞬（0秒）で切り替える */
			width 0s 1s, /* 1.5秒後（ジャンプが完了した後）に一瞬（0秒）で切り替える */
			translate 2s 2s; /* 1.5秒後（ジャンプが完了した後）に一瞬（0秒）で切り替える */
		animation: fadeOutIn2 1s 1.5s forwards; /* 1.5秒後に1秒かけてアニメーションする */
	}
	@keyframes fadeOutIn2 {
		from { opacity: 0;  }
		to { opacity: 1;  }
	}
	#main-content .toc-wrapper.is-inactive .toc-inner {
		border-top: solid 1px red;
		border-bottom: solid 1px red;
	}
	/* #main-content .toc-wrapper .toc-inner {
		transition: all 1.0s;
		transition: all 0.5s;
	} */
}

/* 目次リスト */
.toc-list {
	margin-top: 16px;
}
.toc-list li {
	position: relative;
	list-style: none;
	margin-left: 0;
	margin: 8px 0 0;
	line-height: 1.6;
	font-size: 0.8rem;
}
.toc-list li.toc-item-h3 {/* 目次テキスト（h3） */
	font-size: 0.7rem;
}
.toc-list li a {
	position: relative;
  display: inline-block;
	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);
	top: calc(.5em + 2px);
	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);
}
.toc-list li a.current{
	font-weight: bold;
}
.toc-list li a.current::before { /* ウィジェットのリストマーク（current） */
	transform: scale(1.6);
	background: var(--main);
	border: solid 0px transparent;
}

/* プラグイン - 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; */
	outline: 2px dashed red;
	animation: blink-red 1s infinite;
}
span.proofreading::before {
	position: absolute;
	top: -3.2em;
	left: -4px;
	content: attr(title);
	white-space: nowrap;
	padding: 4px 12px;
	background: #fff;
	background-color: yellow;
	border-radius: 4px;
	font-size: 0.8rem;
	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-not-valid-tip:not(:empty),/* バリデート時のエラーメッセージ（必須項目に入力してください、など）*/
.wpcf7-response-output {/* 送信ボタン直下のメッセージ（送信しました、エラー、など） */
	display: block;
	margin-top: 8px;
	font-size: 0.9rem;
	color: var(--red);
}
/* 非表示化 */
.wpcf7 .screen-reader-response, /* バリデート時に最上部に表示されるスクリーンリーダ用のエラーメッセージ */
.wpcf7 .hidden-fields-container /* 隠しフィールド */ {
	display: none;
}
/* 送信中の連続クリックによる多重送信防止 */
.wpcf7 form.submitting input[type="submit"] {
  pointer-events: none;
  opacity: 0.5;
}
/* 送信中にスピナーを表示 */
.wpcf7 form.submitting {
	position: relative;
}
.wpcf7 form.submitting::after {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin: 24px 0 0 12px;
	border: 4px solid rgb(0 0 0 / 0.1);
	border-top: 4px solid #3498db; /* ここが回転する色になります */
	animation: spin 1s linear infinite;
	z-index: 999;
}
@keyframes spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Cloudflare Turnstile */
/* .wpcf7-turnstile iframe {
	border: solid 1px var(--text);
  border-radius: 4px;
}
.wpcf7-turnstile {
	border: solid 1px var(--text);
} */



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

/* スクロールスナップ
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%;
	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));
}

/*　アカウント情報メニュー
-------------------------------------------------------------- */
#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;
}