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

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

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

# layout
224px + 64px + 640px + 64px + 224px = 1248px
(left+margin+main+margin+rignt)
*/

/* 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; /* Google fonts */
	--heading-font: "Montserrat", sans-serif; /* Google fonts */
	--heading-font: "Cal Sans", sans-serif; /* Google fonts */
	--heading-font: "Geologica", sans-serif; /* Google fonts */
	--heading-font: "Lexend", sans-serif; /* Google fonts */
	--heading-font: "AlteHaasGrotesk", sans-serif; /* font */
}

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

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

/* Reset & Default Style
-------------------------------------------------------------- */
*,*::before,*::after{
	box-sizing: border-box
}
:target {
	scroll-margin-top: 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 */
	/* animation: fadein 1s ease 0s 1 normal; */
	/* 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;
}
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 {
	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;
}
.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をセンタリングするため → 埋め込みiframeが縮小されて不便なので一旦解除（2025/07/13） */
}
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;
}
main table tbody th {
	/* 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;
	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);
	/* font-size: .85rem; */
	/* transition: 0.4s;
	 */
	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);
	/* font-size: 1rem; */
	overflow: hidden; /* Safariで回転時にアウトラインが広がるバグを回避 */
	transition: 0.4s;
}
main details[open] summary{
	margin-bottom: 32px;
}
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.4s,
		opacity 0.4s,
		content-visibility 0.4s allow-discrete; /* autoやnoneでアニメーションできるようにするやつ */
	height: 0;
	opacity: 0;
	overflow: clip;
}
main details[open]::details-content {
	opacity: 1;
}
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0→autoのアニメーションを可能にするための指定 */
  }
  details[open]::details-content {
    height: auto;
  }
}
/* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
@supports not (interpolate-size: allow-keywords) {
  main details[open]::details-content {
    height: 150px;
    overflow-y: scroll;
  }
}
/* 三角アイコン */
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(--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;
	height: 100vh;
  display: flex;
  flex-direction: column;
	min-height: 100vh;
}
main {
	position: relative;
	flex: 1 0 auto;
}
.home main {
	margin-top: -128px; /* ヒーロイメージを上方にズラしてヘッダの背景にする */
}
#content {
	position: relative;
	margin: 64px auto;
}
.single #content { /* シングルページは3カラム */
	display: flex;
}
#main-content {
	position: relative;
	width: 640px; /* 32*20 */
	margin: 0 auto;
}
#left-content,
#right-content {
	position: relative;
	width: 256px; /* 32*8 */
	width: 224px; /* 32*7 */
}
#left-content {
	order: -1;
}
#right-content {
	order: 1;
}
#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: 1247px) {
	.single #content {
		flex-direction: column; /* シングルカラム化 */
	}
	#main-content {
		width: 100%;
		max-width: 640px;
	}
	#left-content {
		width: 100%;
		max-width: 640px;
		order: 1;
		margin: 64px auto 0;
	}
	#right-content {
		width: 100%;
		max-width: 640px;
		order: 2;
		margin: 0 auto;
	}
	#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-color: rgb(255 255 255 / 0.5);
	/* background-color: var(--base); */
	backdrop-filter: blur(4px);
	/* 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: -128px 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: 124px;
}
/* #header.scrolled #header-inner{
	height: 80px;
} */
@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（フッター）
-------------------------------------------------------------- */
#footer {
	background-color: #ffffff;
	background-color: var(--main);
	font-size: 0.9rem;
	color: rgb(255 255 255 / 0.8);
}
#footer .footer-nav {
	gap: 32px;
	position: relative;
}
#footer .footer-nav nav ul,
#footer .footer-nav ul.menu /* ウィジェットメニュー */ ,
#footer .footer-nav .textwidget li{
	line-height: 2.0;
}
#footer .footer-nav a {
	color: rgb(255 255 255 / 0.8);
}
#footer .footer-nav .screen-reader-text { /* ドロップダウンメニューに出力されるスクリーンリーダー用テキスト */
	text-indent: -999px;
	position: absolute;
	top: 0;
	left: 0;
}
#footer h2 {
	margin-bottom: 16px;
	/* font-size: 0.9em; */
	font-weight: bold;
	/* 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: 16px;
	font-size: 0.95rem;
}*/
#footer nav ul.children li::before {
	content: "−";
	opacity: 0.5;
	margin-right: 8px;
}
@media screen and (max-width: 1247px) {
	#footer {
		font-size: 1rem;
	}
	/* #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;
}
#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(--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%;
	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: 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 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: 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-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;
	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 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 .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-ja{
	font-weight: bold;
} */
.hero .text-en{
	font-family: var(--heading-font);
}

/* トップページ最上部のメインビジュアル */
.hero.main-visual{
	width: 100%;
	height: 100vh;
	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（シングル・固定ページ）
-------------------------------------------------------------- */
.post-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;
	*/
}
.post-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;
	/* 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,
.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);
	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）
-------------------------------------------------------------- */

/* 目次（メイン＆サイド共通） */
.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;
	margin: 8px 0 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;
	font-size: 0.7rem;
}
.toc-list li a {
	position: relative;
  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);
	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);
}

/* メインコンテンツの目次 */
#main-content .toc-wrapper {
	/* display: none; */
	margin-top: 32px;
	padding: 32px;
	background-color: var(--box);
	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: 1247px) {
	#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-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));
}

/*　CTAボタン - モバイル固定
-------------------------------------------------------------- */
.fixed-banner{
	display: none;/* ロード時は非表示 */
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 10;
	width: auto;
	max-width: 100%;
	white-space: nowrap;
	/* 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;
}