@charset "utf-8";

/* *****************************
 * SiteCommerce : root
 * **************************** */

:root {
	--col-r1: 255, 0, 0;
	--col-r2: 255, 0, 95;
	--col-r3: 255, 0, 239;
	--col-rb: 127, 0, 255;
	--col-b1: 0, 47, 255;
	--col-b2: 0, 111, 255;
	--col-b3: 0, 191, 255;
	--col-bg: 0, 255, 255;
	--col-g1: 0, 255, 111;
	--col-g2: 63, 255, 0;
	--col-g3: 207, 255, 0;
	--col-gr: 255, 159, 0;
	--col-white: 255, 255, 255;
	--col-palewhite: 251, 251, 253;
	--col-bluewhite: 227, 237, 247;
	--col-whitegray: 223, 223, 223;
	--col-lightgray: 191, 191, 191;
	--col-gray: 127, 127, 127;
	--col-darkgray: 63, 63, 63;
	--col-black: 0, 0, 0;
	--col-transparent: transparent;
	--col-primary: var(--col-b2);
	--col-secondary: var(--col-gray);
	--col-success: 109, 217, 0;
	--col-danger: var(--col-r1);
	--col-warning: var(--col-gr);
	--col-info: var(--col-bg);
	--ft-col: var(--col-black);
	--bd-col: var(--col-whitegray);
	--bg-col: var(--col-white);
	--bgb-col: var(--col-white);
	--bg-grad: linear-gradient(var(--bg-col), var(--bgb-col));
	--width: auto;
	
	--alpha: 0.3;

}

/* *****************************
 * SiteCommerce 基本スタイル
 * **************************** */
* {
	/* 意図しない横幅が出ないように画面幅で強制改行を有効にする */
	/* word-break: break-all; */
	/* 単語単位改行 */
	word-break: break-word;
	/* 内側に線を引く */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	/*font-weight: 300;*/
	/*font-size: 1rem;*/
	line-height: var(--lh);
	margin: 0rem;
}
:root {
	--fm-gothic: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", sans-serif;
	--fm-mintyo: "游明朝", "YuMincho", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	--fs-100: 10pt;
	--fs-105: 10.5pt;
	--fs-110: 11pt;
	--fs-120: 12pt;
	--fs-130: 13pt;
	--fs-140: 14pt;
	--fs-160: 16pt;
	--fs-200: 20pt;
	--fs-240: 24pt;
	--fs-default: var(--fs-105);
	--fs:var(--fs-default);
}
html {
	--fs:var(--fs-default);
	font-family: var(--fm-gothic);
	font-size: var(--fs);
	font-style: normal;
	line-height: var(--lh);
	font-weight: 300;
}
@media screen and (max-width: 680px) {
	/* 768pxまでの幅の場合に適応される */
	html {
		--fs-default: var(--fs-120);
		--fs:var(--fs-default);
		font-size: var(--fs);
	}
}
body {
	margin: 0px;
	padding: 0px;
	/* フレックス方式にして、mainを自由高さにする */
	/*
	display: flex;
  	flex-direction: column;
	*/
}
img, video {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	border: none;
	/* imgのpaddingでもmarginでもない余白を消す */
	vertical-align: bottom;
}
@media screen and (max-width: 680px), screen and (orientation: portrait) {
	/* 680pxまでの幅、若しくは縦画面の時に適応される */
	video {
		width: auto;
		height: 60vh;
		overflow: hidden;
	}
}
/*
@media screen and (orientation: portrait) {
	video {
		width: auto;
		height: 60vh;
		overflow:hidden;
	}
}
*/

/* ****************************** *
 * 全体校正
 * ****************************** */

.wlimit-1280 {
	--wlimit: 1240px;
}

@media screen and (min-width: 1280px) {
/* 1280pxを超えるビュー */
	.wlimit-1280 > * {
		padding-left:calc((100% - var(--wlimit)) / 2) !important;
		padding-right:calc((100% - var(--wlimit)) / 2) !important;
	}
}

form, div, article, section, aside, header, footer, main, nav, iframe {
	margin: 0rem;
	padding: 0rem;
	display: block;
	/* 単語単位改行
    word-break:break-word;
	*/
	/*max-width: 100%;*/
}
ul {
	list-style-type: none;
}
small {
	font-size: smaller;
}
a {
	text-decoration: none;
	/* タグ区切り毎に改行
	word-break: keep-all;
	*/
}
a:hover {
	text-decoration: underline;
}
/* *****************************
 * Zインデックス
 * **************************** */
.z-down-1 {
	z-index: -1;
}
.z-down-2 {
	z-index: -2;
}
.z-down-3 {
	z-index: -3;
}
.z-0 {
	z-index: 0;
}
.z-up-1 {
	z-index: 1;
}
.z-up-2 {
	z-index: 2;
}
.z-up-3 {
	z-index: 3;
}
/* *****************************
 * 行高さ
 * **************************** */ 
:root {
	--lh-normal: normal;
	--lh-0: 1.0em;
	--lh-1: 1.15em;
	--lh-2: 1.2em;
	--lh-3: 1.3em;
	--lh-4: 1.5em;
	--lh-5: 1.75em;
	--lh-6: 2.0em;
	--lh: var(--lh-3);
	--lh-button: var(--lh-0);
}
.lh {
	line-height: var(--lh);
}
.lh-normal {
	--lh: var(--lh-normal);
}
.lh-0 {
	--lh: var(--lh-0);
}
.lh-1 {
	--lh: var(--lh-1);
}
.lh-2 {
	--lh: var(--lh-2);
}
.lh-3 {
	--lh: var(--lh-3);
}
.lh-4 {
	--lh: var(--lh-4);
}
.lh-5 {
	--lh: var(--lh-5);
}
.lh-6 {
	--lh: var(--lh-6);
}
/* lh指定タグ配下のタグも合わせる */
.lh > * {
	line-height: var(--lh);
}
/* *****************************
 * 行幅
 * **************************** */ :root {
	--ls-0: 0em;
	--ls-1: 0.15em;
	--ls-2: 0.2em;
	--ls-3: 0.3em;
	--ls-4: 0.5em;
	--ls-5: 0.75em;
	--ls-6: 1.0em;
	--ls: var(--ls-1);
}
.ls {
	letter-spacing: var(--ls);
}
.ls-0 {
	--ls: var(--ls-0);
}
.ls-1 {
	--ls: var(--ls-1);
}
.ls-2 {
	--ls: var(--ls-2);
}
.ls-3 {
	--ls: var(--ls-3);
}
.ls-4 {
	--ls: var(--ls-4);
}
.ls-5 {
	--ls: var(--ls-5);
}
.ls-6 {
	--ls: var(--ls-6);
}
/* *****************************
 * 行頭インデント
 * **************************** */
.int-on p {
	text-indent: 1em;
}
.int-off p {
	text-indent: 0em;
}
/* *****************************
 * 改行方法
 * **************************** */
.br-none {
	word-break: keep-all !important;
}
.br-word {
	word-break: normal !important;
}
.br-all {
	word-break: break-all !important;
}
/* *****************************
 * フォームコンテンツ：標準スタイル
 * **************************** */
/* iOS等OS標準スタイルの解除 */
input[type=button], input[type=submit], input[type=reset], button {
	appearance: none;
	-webkit-appearance: none;
}
/* フォームコンテンツの標準スタイル */
input, textarea, select, label, button, .btn {
	--lh: var(--lh-normal);
	
	/* 上右下左 */
	margin: var(--m-1);
	padding: var(--p-1);
	max-width: 100%;
	font-family: var(--fm-gothic);
	font-size: var(--fs);
	font-style: normal;
	line-height: var(--lh);
	/* 内側に線を引く */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
input, textarea, select, button {
	border: 1px solid;
	border-color: rgb(var(--col-lightgray));
	--radius: var(--radius-3);
	border-radius: var(--radius);
	-moz-border-radius: var(--radius);
	-webkit-border-radius: var(--radius);
	-o-border-radius: var(--radius);
	-ms-border-radius: var(--radius);
}
textarea {
	--lh: var(--lh-3);
	width: 100%;
}
select {
	vertical-align: middle;
}
input[type=button], input[type=submit], input[type=reset], input[type=file], button, .btn {
	--ft-col: var(--col-white);
	padding: var(--p-3) var(--p-3) var(--p-3) var(--p-3);
	line-height: var(--lh-button);
	vertical-align: middle;
	cursor: pointer;
	border: none;
	color: rgb(var(--ft-col));
	background-color: rgb(var(--bg-col));
}
/*
input[type=submit], input[type=button], input[type=reset], button, btn {	
	border:none;
	color:rgb(var(--col-white));
}
*/
input[type=submit] {
	--bg-col: var(--col-b2);
}
input[type=reset], input[type=button], button {
	--bg-col: var(--col-gray);
}
input[type=file] {
	--bg-col: var(--col-whitegray);
	--bd-col: var(--col-lightgray);
	border: 1px solid;
	border-color: rgb(var(--bd-col));
}
/* *****************************
 * チェックボックススタイル
 * **************************** */
input[type=checkbox], input[type=radio] {
	display: none;
}
input[type=checkbox] + label
, input[type=radio] + label {
	margin: 0.2em;
	padding: 0.5em;
	display: inline-block;
	position: relative;
	padding-left: 2em;
	line-height: 1.2em;
	word-break: auto-phrase;
	cursor: pointer;
	--radius: var(--radius-3);
	border-radius: var(--radius);
	background-color: rgb(var(--col-whitegray));
}
input[type=checkbox] + label::before
, input[type=radio] + label::before {
	/* チェックボックスの枠を描画 */
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0.5em;
	width: 1em;
	height: 1em;
	border: 1px solid #999;
	background: rgb(var(--col-white));
	transform: translate(0, -50%);
}
input[type=checkbox]:checked + label
, input[type=radio]:checked + label {
	background: #31A9EE;
	color: #ffffff;
}
input[type=checkbox]:checked + label::after
, input[type=radio]:checked + label::after {
	/* チェックを描画 */
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0.9em;
	width: 0.2em;
	height: 0.6em;
	transform: translate(0, -50%) rotate(40deg);
	border-bottom: 3px solid #31A9EE;
	border-right: 3px solid #31A9EE;
}
/* *****************************
 * ラジオボタン スタイル
 * **************************** */
input[type=radio] + label::before {
	border-radius: var(--radius-circle);
	-moz-border-radius: var(--radius-circle);
	-webkit-border-radius: var(--radius-circle);
	-o-border-radius: var(--radius-circle);
	-ms-border-radius: var(--radius-circle);
}
input[type=radio]:checked + label::after {
	top: 50%;
	left: 0.75em;
	width: 0.45em;
	height: 0.45em;
	transform: translate(0, -50%);
	border-radius: var(--radius-circle);
	-moz-border-radius: var(--radius-circle);
	-webkit-border-radius: var(--radius-circle);
	-o-border-radius: var(--radius-circle);
	-ms-border-radius: var(--radius-circle);
	background-color: #31A9EE;
}

input[type=checkbox].hide + label
, input[type=radio].hide + label {
	display: none;
}

/* *****************************
 * フォームコンテンツ：ホバースタイル
 * **************************** */
input:not([type=submit]):not([type=reset]):not([type=button]):focus, textarea:focus, select:focus, input + label:focus {
	/* テキスト入力系にフォーカスした際の背景色 */
	border: 1px solid #66f;
	opacity: 100%;
}
input:not([type=submit]):not([type=reset]):not([type=button]):hover, textarea:hover, select:hover, input + label:hover {
	/* テキスト入力系にホバリングした際の背景色 */
	opacity: 70%;
	background-color: rgb(var(--col-g3));
}
input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, button:hover {
	/* ボタン系にホバリングした際の背景色 */
	opacity: 70%;
}
/* *****************************
 * フォームコンテンツ：その他スタイル
 * **************************** */
/* 読み取り専用 */
input[readonly], textarea[readonly] {
	background-color: rgb(var(--col-whitegray));
}
/* プレースホルダの説明文用スタイル */
input::placeholder {
	color: rgb(var(--col-gray));
	font-weight: normal;
}
/* *****************************
 * クラス：ボタン
 * **************************** */
.btn {
	display: inline-block;
	overflow: hidden;
	/*font-size:1.15rem;*/
	--radius: var(--radius-3);
	border-radius: var(--radius);
	-moz-border-radius: var(--radius);
	-webkit-border-radius: var(--radius);
	-o-border-radius: var(--radius);
	-ms-border-radius: var(--radius);
}
.btn-primary {
	--ft-col: var(--col-white) !important;
	--bg-col: var(--col-primary) !important;
}
.btn-secondary {
	--ft-col: var(--col-white) !important;
	--bg-col: var(--col-secondary) !important;
}
.btn-success {
	--ft-col: var(--col-white) !important;
	--bg-col: var(--col-success) !important;
}
.btn-danger {
	--ft-col: var(--col-white) !important;
	--bg-col: var(--col-danger) !important;
}
.btn-warning {
	--ft-col: var(--col-white) !important;
	--bg-col: var(--col-warning) !important;
}
.btn-info {
	--ft-col: var(--col-white) !important;
	--bg-col: var(--col-info) !important;
}
.btn-normal, input.btn-normal {
	--ft-col: var(--col-gray) !important;
	--bg-col: var(--col-white) !important;
	--bd-col: var(--col-lightgray);
	border: 1px solid rgb(var(--bd-col));
}
.btn-gray, input.btn-gray {
	--ft-col: var(--col-black) !important;
	--bg-col: var(--col-whitegray) !important;
	--bd-col: var(--col-lightgray);
	border: 1px solid rgb(var(--bd-col));
}
.btn-small {
	padding: var(--p-2) var(--p-2) var(--p-2) var(--p-2) !important;
}
.btn:hover {
	color: rgb(var(--ft-col));
	text-decoration: none;
	opacity: 70%;
}
.btn-plane {
	--ft-col: var(--col-black);
	--bg-col: var(--col-transparent);
	--radius: var(--radius-0);
	--bd-col: var(--col-white);
	border-bottom: 1px solid rgba(var(--bd-col), 0);
	/* ホバーに入るとき */
	transition: border-color 0.2s linear;
}
.btn-plane:hover {
	--bd-col: var(--col-black);
	border-bottom: 1px solid rgba(var(--bd-col), 1);
	/* ホバーから出るとき */
	transition: border-color 0.5s linear;
}
.btn-modern {
	position: relative;
	padding: 1rem 1.5rem;
	--ft-col: var(--col-black);
	--bg-col: var(--col-transparent);
	--bd-col: var(--col-black);
	--radius: var(--radius-0);
	border: 1px solid rgb(var(--bd-col));
}
.btn-modern:hover {
	--ft-col: var(--col-white);
	transition: color 0.3s ease-out;
}
.btn-modern:before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	--bg-col: var(--col-black);
	background-color: rgb(var(--col-black));
	transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
	z-index: -1;
	opacity: 0;
}
.btn-modern:hover:before {
	top: 0;
	height: 100%;
	opacity: 1;
	transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}

/* ********************************** *
 * ネスト階層表現(マージン法）
 * ********************************** */

.nest0 {
}

.nest1 {
	margin-left: 1em;
}

.nest2 {
	margin-left: 2em;
}

.nest3 {
	margin-left: 3em;
}

.nest4 {
	margin-left: 4em;
}

/* ********************************** *
 * ネスト階層表現(テキストインデント法）
 * ********************************** */

.idnt0 {
}

.idnt1 {
	text-indent: 1em;
}

.idnt2 {
	text-indent: 2em;
}

.idnt3 {
	text-indent: 3em;
}

.idnt4 {
	text-indent: 4em;
}

/* *****************************
 * 重ね合わせ
 * **************************** */
.z-0 {
	z-index: 0;
}
.z-1 {
	z-index: 1;
}
.z-2 {
	z-index: 2;
}
.z-top {
	z-index: 99;
}
/* *****************************
 * Hn/文字サイズ
 * **************************** */
h1, h2, h3, h4, h5, h6, ul, dl {
	padding: 1rem;
	/*line-height: 1.2em;*/
}
p {
	padding: 0.25rem 1rem;
	/*line-height: 1.2em;*/
}
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}
h1 {
	font-size: 2.5rem;
}
h2 {
	font-size: 2rem;
}
h3 {
	font-size: 1.75rem;
}
h4 {
	font-size: 1.5rem;
}
h5 {
	font-size: 1.25rem;
}
h6 {
	font-size: 1rem;
}
.fm-gothic {
	font-family: var(--fm-gothic);
}
.fm-mintyo {
	font-family: var(--fm-mintyo);
}
.fs-1 {
	font-size: 5rem;
}
.fs-2 {
	font-size: 4.5rem;
}
.fs-3 {
	font-size: 4rem;
}
.fs-4 {
	font-size: 3.5rem;
}
.fs-5 {
	font-size: 3rem;
}
.fs-6 {
	font-size: 2.5rem;
}
.fs-7 {
	font-size: 2rem;
}
.fs-8 {
	font-size: 1.5rem;
}
.fs-9 {
	font-size: 1.25rem;
}
.fs-10 {
	font-size: 1rem;
}
.fs-11 {
	font-size: 0.75rem;
}
.fs-12 {
	font-size: 0.5rem;
}
.fs-normal {
	font-size: 1rem;
}
.fs-small {
	/*
	--fs: calc(var(--fs-default) * 0.85);
	font-size: var(--fs);
	*/
	--fs:0.85rem;
	font-size: var(--fs);
	/*font-size: 0.85rem*/;
}
.fs-smaller {
	font-size: 0.7rem;
}
.fs-smallest {
	font-size: 0.5rem;
}
.fs-large {
	font-size: 1.2rem;
}
.fs-larger {
	font-size: 1.4rem;
}
.fs-largest {
	font-size: 1.8rem;
}
.fw-1 {
	font-weight: 100;
}
.fw-2 {
	font-weight: 300;
}
.fw-3 {
	font-weight: 400;
}
.fw-4 {
	font-weight: 500;
}
.fw-5 {
	font-weight: 700;
}
.fw-6 {
	font-weight: 900;
}
.fw-bold {
	font-weight: bold;
}

/* *****************************
 * 文字方向
 * **************************** */
.fo-vertical {
	writing-mode: vertical-rl;
}
.fo-horizontal {
	writing-mode: horizontal-tb;
}
/* *****************************
 * ルビを振る
 * **************************** */
[data-ruby] {
	position: relative;
	font-size: inherit;
	font-weight: inherit;
}
[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -1rem;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 0.5rem;
	opacity: 70%;
}
/* *****************************
 * アスペクト比
 * **************************** */
.aspect43 {
	aspect-ratio: 4/3;
	height: auto;
}
.aspect44 {
	aspect-ratio: 1;
	height: auto;
}
.aspect53 {
	aspect-ratio: 5/3;
	height: auto;
}
.aspect54 {
	aspect-ratio: 5/4;
	height: auto;
}
.aspect169 {
	aspect-ratio: 16/9;
	height: auto;
}
.aspect219 {
	aspect-ratio: 21/9;
	height: auto;
}
.aspect216 {
	aspect-ratio: 21/6;
	height: auto;
}
.aspect213 {
	aspect-ratio: 21/3;
	height: auto;
}
.aspect35 {
	aspect-ratio: 3/5;
	height: auto;
}
.aspect34 {
	aspect-ratio: 3/4;
	height: auto;
}

@media screen and (max-width: 680px) {
	/* 680pxまでの幅の場合に適応される */
	.aspect-sm-916 {
		aspect-ratio: 9/16;
		height: auto;
	}
	.aspect-sm-34 {
		aspect-ratio: 3/4;
		height: auto;
	}
	.aspect-sm-35 {
		aspect-ratio: 3/5;
		height: auto;
	}
}

/* *****************************
 * トランスフォーム
 * **************************** */

.scale-1 {
	transform: scale(0.9, 0.9);
}
.scale-2 {
	transform: scale(0.8, 0.8);
}
.scale-3 {
	transform: scale(0.7, 0.7);
}

.scale-x-1 {
	transform: scale(0.9, 1);
}
.scale-x-2 {
	transform: scale(0.8, 1);
}
.scale-x-3 {
	transform: scale(0.7, 1);
}
.scale-x-1 {
	transform: scale(1, 0.9);
}
.scale-y-2 {
	transform: scale(1, 0.8);
}
.scale-y-3 {
	transform: scale(1, 0.7);
}

@media screen and (max-width: 680px) {
	/* 680pxまでの幅の場合に適応される */

	.scale-sm-1 {
		transform: scale(0.9, 0.9);
	}
	.scale-sm-2 {
		transform: scale(0.8, 0.8);
	}
	.scale-sm-3 {
		transform: scale(0.7, 0.7);
	}
	
	.scale-smrb-1 {
		transform-origin: bottom right;
		transform: scale(0.9, 0.9);
	}
	.scale-smrb-2 {
		transform-origin: bottom right;
		transform: scale(0.8, 0.8);
	}
	.scale-smrb-3 {
		transform-origin: bottom right;
		transform: scale(0.7, 0.7);
	}
}
/* *****************************
 * 先頭文字装飾
 * **************************** */
.first-1:first-letter {
	font-size: 3.5rem;
}
.first-2:first-letter {
	font-size: 3rem;
}
.first-3:first-letter {
	font-size: 2.5rem;
}
.first-reverse:first-letter {
	padding: 0rem 0.4rem;
	color: rgba(var(--bg-col), 1);
	background-color: rgba(var(--ft-col), 1);
}
.first-circle:first-letter {
	border-radius: var(--radius-circle);
	-moz-border-radius: var(--radius-circle);
	-webkit-border-radius: var(--radius-circle);
	-o-border-radius: var(--radius-circle);
	-ms-border-radius: var(--radius-circle);
}
/* *****************************
 * asideスタイル
 * **************************** */
/* asideのul,liは行単位 */
aside ul, aside li {
	padding: 0rem;
	display: block;
}
aside a {
	/* word-break:break-all; */
	/*display:block;*/
}
/* *****************************
 * ナビスタイル
 * **************************** */
nav {
	display: block;
	/*
	border-top:1px solid white;
	border-bottom:1px solid lightgray;
	*/
	/*
	line-height: 3rem;
	height: 3rem;
	*/
}
nav div, nav ul, nav li, nav a {
	margin: 0em;
	padding: 0em;
	display: inline-block;
	vertical-align: middle;
	line-height: 1rem;
	/*white-space: nowrap;*/
}
/* nav liの不要な左右余幅は抑制しにくいので、内側aタグ余幅をなくす */
nav li a.btn {
	margin-left: 0;
	margin-right: 0;
	/* display: table-cell;*/
}
/* nav直下のulはflexにする */
nav > ul {
	display: flex;
}
/*
header nav > ul li {
	display: block;
}
*/
/*
nav > ul li {
	position: relative;
}
*/
nav ul ul {
	display: block;
	/*position:absolute;*/
	text-align: left;
}
nav ul {
	list-style-type: none;
}
/*
nav ul ul {
	visibility:hidden;
}
*/
/* 子階層li */
nav li li {
	/* 改行なし、blockタイプ */
	display: block;
	overflow: hidden;
	white-space: nowrap;
	/* ドロップダウン型 */
	height: 0;
	visibility: hidden;
	transition: height .5s, visibility .5s;
}
/* 子階層li：親liがホバリング時は表示 */
nav li:hover li {
	height: 3rem;
	visibility: visible;
	/*
   overflow:hidden; 
	*/
}
/*
header nav li:hover ul {
	visibility:visible;
}
*/
nav li:last-child {
	border-right: none;
}
/*
nav > ul > li > ul {
	visibility:hidden;
}

nav > ul > li:hover > ul {
	visibility: visible;
}
*/
nav li a {
	display: block;
	/*
	overflow:hidden;
	word-break:keep-all;
	
	font-weight:bold;
	text-decoration: none;
	letter-spacing: 0.16em;
	*/
}
nav .toggle {
	display: none;
}
.brand-sm {
	display: none;
}
@media screen and (max-width: 680px) {
	/* 680pxまでの幅の場合に適応される */
	nav {
		/* 左揃え */
		text-align: left;
	}
	nav .collapse {
		/*display: initial;*/
		visibility: hidden;
		transform: scaleY(0);
		transition: transform .5s;
	}
	nav .toggle {
		display: inherit;
	}
	/* li装飾を全て解除 */
	nav li {
		/*
		visibility:visible !important;
		text-align:left !important;
		display:block !important;
		height:auto !important; 
		width:100% !important;
		position:relative;
		background-color:rgb(var(--bg-col));
		border-bottom:1px solid rgb(var(--bd-col));
		*/
		visibility: visible !important;
		text-align: left !important;
		display: initial !important;
		height: auto !important; /* 高さ制限を解除 */
		/* width: 100% !important; */
		position: relative;
		/* background-color: rgb(var(--bg-col)); */
		/* border-bottom: 1px solid rgb(var(--bd-col)); */
	}
}
/* 子メニューはインデント */
nav li li {
	text-indent: 1rem;
}
.brand-sm {
	display: inherit;
}
}
/* *****************************
 * クラス：汎用
 * **************************** */
.container {
	display: block;
	text-align: center;
}

/* *****************************
 * クラス：表示法
 * **************************** */ 
:root {
	--flex-dir-col: column;
	--flex-dir-row: row;
	--flex-dir-row-rev: row-reverse;
	--flex-dir: var(--flex-dir-row);
}
.show {
	display: inherit;
	visibility: visible !important;
	transform: scaleY(1) !important;
	/*animation: scShow 0.15s ease-in;*/
}
.hide {
	display: none;
}
/* hide showが重なっていたら */
.hide.show {
	display: inherit !important;
}
.fade {
	/*display:none;*/
	visibility: hidden;
	/*background-color: rgba(0,0,0, .3);*/
	transition: opacity .15s linear;
}

/* *****************************
 * 汎用：アコーディオン
 * **************************** */ 

details > summary {
	/* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */
	display: block;
	cursor: pointer;
	text-indent: 1.2em;
}

details > summary::-webkit-details-marker {
	/* Safariで表示されるデフォルトの三角形アイコンを消します */
	display: none;
}

details > *:nth-child(1)::before {
	content: '';
	position: absolute;
    width: 7px;
    height: 7px;
    margin-left: -0.9em;
  	margin-top: 0.3em;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
	transform: rotate(45deg);
    transition: transform .3s;
}
details[open] > *:nth-child(1)::before {
 transform: rotate(225deg);
}

/* *****************************
 * クラス：アコーディオン
 * **************************** */ 

.accordion > *:nth-child(n+2) {
	max-height: 100%;
	transition: max-height .3s ease, opacity .5s; 
}
.accordion.hidding > *:nth-child(n+2) {
	overflow: hidden;
	opacity: 0;
	max-height:0rem !important;
}

.accordion > *:nth-child(1) {
	padding-left: 1em;
}

.accordion > *:nth-child(1)::before {
	content: '';
	position: absolute;
    width: 7px;
    height: 7px;
    margin-left: -0.7em;
  	margin-top: 0.4em;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
	transform: rotate(45deg);
    transition: transform .3s;
}
.accordion.hidding > *:nth-child(1)::before {
 transform: rotate(225deg);
}

/*
.clear {
	display:inherit !important;
	clear:both !important;
}
*/
.clear:before, .clear:after {
	content: "";
	display: block;
	clear: both;
}
/*
.clear:after 
{ 
	clear:both;
}
*/
.block {
	display: block;
}
.sticky {
	position:sticky;
	top: 0;
}

/* *****************************
 * フレックス
 * **************************** */
.flex {
	display: flex;
	flex-wrap: wrap;
	flex-direction: var(--flex-dir);
}
.flex-start {
	align-items: flex-start;
}
.flex-col {
	--flex-dir: var(--flex-dir-col);
}
.flex-row {
	--flex-dir: var(--flex-dir-row);
}
.flex-row-rev {
	--flex-dir: var(--flex-dir-row-rev);
}
.flex-sm-col {}
.flex-nowrap {
	flex-wrap: nowrap;
}
.flex-wrap {
	width: 100%;
}
.flex-noshrink > * {
	flex-shrink: 0;
}
/* 横フレックスの直下のタグを自動配置 */
.flex-row.flex-1 > * {
	flex: 1;
	text-align: center;
}
.flex-0 {
	flex: inherit !important;
}
.flex-1 {
	flex: 1;
}
.flex-2 {
	flex: 2;
}
.inblock {
	display: inline-block;
}
.inflex {
	display: inline-flex;
}

@media screen and (max-width: 680px) {
	/* 680pxまでの幅の場合に適応される */
	.flex-sm-col {
		--flex-dir: var(--flex-dir-col) !important;
	}
	.flex-sm-col > * {
		width: 100% !important;
	}
	.sticky {
		position:inherit;
		top:inherit;
	}
}

/* *****************************
 * 表記方法
 * **************************** */

/* ドラフト：公開前の状態などを示す */
.draft {
	background-color: rgba(var(--col-whitegray), 0.5);
}
.draft::before {
	content: '*';
	color:#f66;
}

/* キャンセル */
.canceled {
	/*
	color: #666666;
	background-color: #EEEEEE;
	*/
	background-color: rgba(var(--col-whitegray), 1);
	color: rgb(var(--col-gray));
}

.muted {
	color: rgba(var(--ft-col), 0.5) !important;
}

.muted-all > * {
	color: rgba(var(--ft-col), 0.5) !important;
}

.error {
	color: rgb(var(--col-danger));
	font-weight: bold;
	/*color:rgb(var(--col-black));*/
}
/* 警告 */
.warning
, .warn{
	background-color: rgba(var(--col-warning), 0.2);
	color: rgb(var(--col-black));
}
.info {
	background-color: rgba(var(--col-info), 0.2);
	color: rgb(var(--col-black));
}

/* 無効 */
.disable
, .disabled {
	pointer-events: none;
	opacity: 60%;
}

/*
.disable::after
, .disabled::after {
	background: #000;
	opacity: 50%;	
}

label.disable
, label.disabled {
	
}
*/



input[type=checkbox].disable + label::before
, input[type=checkbox].disabled + label::before {
	background: rgb(var(--col-whitegray));
}

input[type=checkbox].disable + label
, input[type=checkbox].disabled + label
, input[type=radio].disable + label
, input[type=radio].disabled + label {
	pointer-events: none;
	filter: brightness(70%);
}

/*
input[type=radio].disable + label::before
, input[type=radio].disabled + label::before {
	background: rgb(var(--col-whitegray));
}
*/

/* *****************************
 * レイヤー表示
 * **************************** */
.top {
	position: absolute;
	display: block;
	top: 0;
}
.bottom {
	position: absolute;
	display: block;
	bottom: 0;
}
.left {
	position: absolute;
	display: block;
	left: 0;
}
.right {
	position: absolute;
	display: block;
	right: 0;
}
.center {
	position: absolute;
	display: block;
	left: 50%;
	transform: translateX(-50%);
}

.centerhv {
	position: absolute;
	display: block;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* *****************************
 * スクロール
 * **************************** */ 
.scroll-y {
	overflow-y: scroll;
}

/* *****************************
 * 透明度
 * **************************** */ 
:root {
	--opa-0: 0;
	--opa-1: 10%;
	--opa-2: 20%;
	--opa-3: 30%;
	--opa-4: 40%;
	--opa-5: 50%;
	--opa-6: 60%;
	--opa-7: 70%;
	--opa-8: 80%;
	--opa-9: 90%;
	--opa-10: 100%;
	--opa: var(--opa-10);
}
.opa-0 {
	--opa: var(--opa-0);
	opacity: var(--opa);
}
.opa-1 {
	--opa: var(--opa-1);
	opacity: var(--opa);
}
.opa-2 {
	--opa: var(--opa-2);
	opacity: var(--opa);
}
.opa-3 {
	--opa: var(--opa-3);
	opacity: var(--opa);
}
.opa-4 {
	--opa: var(--opa-4);
	opacity: var(--opa);
}
.opa-5 {
	--opa: var(--opa-5);
	opacity: var(--opa);
}
.opa-6 {
	--opa: var(--opa-6);
	opacity: var(--opa);
}
.opa-7 {
	--opa: var(--opa-7);
	opacity: var(--opa);
}
.opa-8 {
	--opa: var(--opa-8);
	opacity: var(--opa);
}
.opa-9 {
	--opa: var(--opa-9);
	opacity: var(--opa);
}
.opa-10 {
	--opa: var(--opa-10);
	opacity: var(--opa);
}
/* *****************************
 * モーダル
 * **************************** */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1060;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	outline: 0;
}
.modal.fade {
	background-color: rgba(0,0,0, .5);
}
.modal.fade .dialog {
	transform: translate(-50%, calc(-100% - 1rem));
	/* transform: translate(-50%, -100%); */
}
.modal.show .dialog {
	transform: translate(-50%, 0);
}
.dialog {
	position: relative;
	height: min-content;
	width: max-content;
	max-width: 100%;
	left: 50%;
	top: 1rem;
	overflow: hidden;
	margin-left: 2px;
	margin-right: 2px;
	background-color: rgb(var(--bg-col));
	border-radius: var(--radius-3);
	-moz-border-radius: var(--radius-3);
	-webkit-border-radius: var(--radius-3);
	-o-border-radius: var(--radius-3);
	-ms-border-radius: var(--radius-3);
	border: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
	box-shadow: 0 0 8px rgba(var(--col-black), 0.2);
	transition: all .3s ease-out;
}

/* *****************************
 * 印刷メディア用
 * **************************** */
@media print {
	/* 印刷しないクラス */
	.noprint {
		display: none;
	}
}
/* *****************************
 * クラス：境界線
 * **************************** */ 
:root {
	/* ボーダー太さ */
	--bd-w-0: 0px;
	--bd-w-1: 1px;
	--bd-w-2: 0.2rem;
	--bd-w-3: 0.4rem;
	--bd-w-4: 0.6rem;
	--bd-w-5: 0.8rem;
	--bd-w: var(--bd-w-1);
	--bd-s-solid: solid;
	--bd-s-dot: dotted;
	--bd-s: var(--bd-s-solid);
}
.border {
	border: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
.border-0 {
	--bd-w: var(--bd-w-1);
}
.border-1 {
	--bd-w: var(--bd-w-1);
}
.border-2 {
	--bd-w: var(--bd-w-2);
}
.border-3 {
	--bd-w: var(--bd-w-3);
}
.border-4 {
	--bd-w: var(--bd-w-4);
}
.border-5 {
	--bd-w: var(--bd-w-5);
}
.border-dot {
	--bd-s: var(--bd-s-dot);
}
.border-y {
	border-top: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
	border-bottom: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
.border-t {
	border-top: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
.border-b {
	border-bottom: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
.border-x {
	border-left: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
	border-right: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
.border-l {
	border-left: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
.border-r {
	border-right: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
.border-child > * {
	border: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
.lineborder > * {
	border-bottom: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
.lineborder > *:last-of-type {
	border: none;
}
.underline {
	--bd-s: var(--bd-s-solid);
	border-bottom: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
.undermarker {
	/*
	--bd-s:var(--bd-s-solid);
	--bd-w:var(--bd-w-3);
	border-bottom:var(--bd-w) var(--bd-s) rgb(var(--bd-col));
	*/
	background: linear-gradient(transparent 70%, rgb(var(--bg-col)) 70%);
}
.underdot {
	--bd-s: var(--bd-s-dot);
	border-bottom: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
.underpoint {
	position: relative;
}
.underpoint:before {
	content: "";
	position: absolute;
	width: 0.5rem;
	height: 0.5rem;
	bottom: 0.2rem;
	left: 50%;
	transform: translate(-50%, 0);
	--bd-s: var(--bd-s-solid);
	--radius: var(--radius-3);
	border: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
	border-radius: var(--radius);
	-moz-border-radius: var(--radius);
	-webkit-border-radius: var(--radius);
	-o-border-radius: var(--radius);
	-ms-border-radius: var(--radius);
}
.underpoint.disable:before {
	background-color: rgb(var(--bd-col));
}
.overline {
	--bd-s: var(--bd-s-solid);
	border-top: var(--bd-w) var(--bd-s) rgb(var(--bd-col));
}
/* *****************************
 * クラス：角丸
 * **************************** */ :root {
	/* 角丸 */
	--radius-0: 0rem;
	--radius-1: 0.1rem;
	--radius-2: 0.3rem;
	--radius-3: 0.5rem;
	--radius-4: 1rem;
	--radius-5: 2rem;
	--radius-circle: 50%;
	--radius: var(--radius-1);
}
.round {
	overflow: hidden;
	border-radius: var(--radius);
	-moz-border-radius: var(--radius);
	-webkit-border-radius: var(--radius);
	-o-border-radius: var(--radius);
	-ms-border-radius: var(--radius);
}
.round-1 {
	--radius: var(--radius-1);
}
.round-2 {
	--radius: var(--radius-2);
}
.round-3 {
	--radius: var(--radius-3);
}
.round-4 {
	--radius: var(--radius-4);
}
.round-5 {
	--radius: var(--radius-5);
}
.circle {
	overflow: hidden;
	border-radius: var(--radius-circle);
	-moz-border-radius: var(--radius-circle);
	-webkit-border-radius: var(--radius-circle);
	-o-border-radius: var(--radius-circle);
	-ms-border-radius: var(--radius-circle);
}
/* *****************************
 * クラス：余白
 * **************************** */ 
:root {
	--m-0: 0rem;
	--m-1: 0.2rem;
	--m-2: 0.5rem;
	--m-3: 1rem;
	--m-4: 2rem;
	--m-5: 3rem;
	--m-6: 4rem;
	--p-0: 0rem;
	--p-1: 0.2rem;
	--p-2: 0.5rem;
	--p-3: 1rem;
	--p-4: 2rem;
	--p-5: 3rem;
	--p-6: 4rem;
	--mt: var(--m-0);
	--mb: var(--m-0);
	--ml: var(--m-0);
	--mr: var(--m-0);
	--pt: var(--p-0);
	--pb: var(--p-0);
	--pl: var(--p-0);
	--pr: var(--p-0);

	--gap-0: 0rem;
	--gap-1: 0.2rem;
	--gap-2: 0.5rem;
	--gap-3: 1rem;
	--gap-4: 2rem;
	--gap-5: 3rem;
	--gap-6: 4rem;
	
	--gap: var(--gap-0);
}
.m-auto {
	margin: auto !important;
}
.m-0 {
	margin: 0rem !important;
}
.m-1 {
	margin: 0.2rem !important;
}
.m-2 {
	margin: 0.5rem !important;
}
.m-3 {
	margin: 1rem !important;
}
.mt-1 {
	margin-top: 0.2rem !important;
}
.mt-2 {
	margin-top: 0.5rem !important;
}
.mt-3 {
	margin-top: 1rem !important;
}
.mt-4 {
	margin-top: 2rem !important;
}
.mt-5 {
	margin-top: 3rem !important;
}
.mt-6 {
	margin-top: 4rem !important;
}
.mb-1 {
	margin-bottom: 0.2rem !important;
}
.mb-2 {
	margin-bottom: 0.5rem !important;
}
.mb-3 {
	margin-bottom: 1rem !important;
}
.mb-4 {
	margin-bottom: 2rem !important;
}
.mb-5 {
	margin-bottom: 3rem !important;
}
.mb-6 {
	margin-bottom: 4rem !important;
}
.my-auto {
	margin-top: auto !important;
	margin-bottom: auto !important;
}
.my-0 {
	margin-top: 0rem !important;
	margin-bottom: 0rem !important;
}
.my-1 {
	margin-top: 0.2rem !important;
	margin-bottom: 0.2rem !important;
}
.my-2 {
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}
.my-3 {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}
.my-4 {
	margin-top: 2rem !important;
	margin-bottom: 2rem !important;
}
.my-5 {
	margin-top: 3rem !important;
	margin-bottom: 3rem !important;
}
.my-6 {
	margin-top: 4rem !important;
	margin-bottom: 4rem !important;
}
.ml-auto {
	margin-left: auto !important;
}
.ml-0 {
	margin-left: 0rem !important;
}
.ml-1 {
	margin-left: 0.2rem !important;
}
.ml-2 {
	margin-left: 0.5rem !important;
}
.ml-3 {
	margin-left: 1rem !important;
}
.ml-4 {
	margin-left: 2rem !important;
}
.ml-5 {
	margin-left: 3rem !important;
}
.ml-6 {
	margin-left: 4rem !important;
}
.mr-auto {
	margin-right: auto !important;
}
.mr-0 {
	margin-right: 0rem !important;
}
.mr-1 {
	margin-right: 0.2rem !important;
}
.mr-2 {
	margin-right: 0.5rem !important;
}
.mr-3 {
	margin-right: 1rem !important;
}
.mr-4 {
	margin-right: 2rem !important;
}
.mr-5 {
	margin-right: 3rem !important;
}
.mr-6 {
	margin-right: 4rem !important;
}
.mx-auto {
	margin-left: auto !important;
	margin-right: auto !important;
}
.mx-0 {
	margin-left: 0rem !important;
	margin-right: 0rem !important;
}
.mx-1 {
	margin-left: 0.2rem !important;
	margin-right: 0.2rem !important;
}
.mx-2 {
	margin-left: 0.5rem !important;
	margin-right: 0.5rem !important;
}
.mx-3 {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}
.mx-4 {
	margin-left: 2rem !important;
	margin-right: 2rem !important;
}
.mx-5 {
	margin-left: 3rem !important;
	margin-right: 3rem !important;
}
.mx-6 {
	margin-left: 4rem !important;
	margin-right: 4rem !important;
}
.mx-auto {
	margin-left: auto !important;
	margin-right: auto !important;
}
.p-auto {
	padding: auto !important;
}
.p-0 {
	padding: 0rem !important;
}
.p-1 {
	padding: 0.2rem !important;
}
.p-2 {
	padding: 0.5rem !important;
}
.p-3 {
	padding: 1rem !important;
}
.py-auto {
	padding-top: auto !important;
	padding-bottom: auto !important;
}
.py-0 {
	padding-top: 0rem !important;
	padding-bottom: 0rem !important;
}
.py-1 {
	padding-top: 0.2rem !important;
	padding-bottom: 0.2rem !important;
}
.py-2 {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}
.py-3 {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}
.py-4 {
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
}
.py-5 {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}
.py-6 {
	padding-top: 4rem !important;
	padding-bottom: 4rem !important;
}
.pt-0 {
	padding-top: 0rem !important;
}
.pt-1 {
	padding-top: 0.2rem !important;
}
.pt-2 {
	padding-top: 0.5rem !important;
}
.pt-3 {
	padding-top: 1rem !important;
}
.pt-4 {
	padding-top: 2rem !important;
}
.pt-5 {
	padding-top: 3rem !important;
}
.pt-6 {
	padding-top: 4rem !important;
}
.pb-0 {
	padding-bottom: 0rem !important;
}
.pb-1 {
	padding-bottom: 0.2rem !important;
}
.pb-2 {
	padding-bottom: 0.5rem !important;
}
.pb-3 {
	padding-bottom: 1rem !important;
}
.pb-4 {
	padding-bottom: 2rem !important;
}
.pb-5 {
	padding-bottom: 3rem !important;
}
.pb-6 {
	padding-bottom: 4rem !important;
}
.px-auto {
	padding-left: auto !important;
	padding-right: auto !important;
}
.px-0 {
	padding-left: 0rem !important;
	padding-right: 0rem !important;
}
.px-1 {
	padding-left: 0.2rem !important;
	padding-right: 0.2rem !important;
}
.px-2 {
	padding-left: 0.5rem !important;
	padding-right: 0.5rem !important;
}
.px-3 {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}
.px-4 {
	padding-left: 2rem !important;
	padding-right: 2rem !important;
}
.px-5 {
	padding-left: 3rem !important;
	padding-right: 3rem !important;
}
.px-6 {
	padding-left: 4rem !important;
	padding-right: 4rem !important;
}
.pl-0 {
	padding-left: 0rem !important;
}
.pl-1 {
	padding-left: 0.2rem !important;
}
.pl-2 {
	padding-left: 0.5rem !important;
}
.pl-3 {
	padding-left: 1rem !important;
}
.pl-4 {
	padding-left: 2rem !important;
}
.pl-5 {
	padding-left: 3rem !important;
}
.pl-6 {
	padding-left: 4rem !important;
}
.pr-0 {
	padding-right: 0rem !important;
}
.pr-1 {
	padding-right: 0.2rem !important;
}
.pr-2 {
	padding-right: 0.5rem !important;
}
.pr-3 {
	padding-right: 1rem !important;
}
.pr-4 {
	padding-right: 2rem !important;
}
.pr-5 {
	padding-right: 3rem !important;
}
.pr-6 {
	padding-right: 4rem !important;
}

.gap {
	gap: var(--gap);
}
.gap-0 {
	--gap: var(--gap-0);
}
.gap-1 {
	--gap: var(--gap-1);
}
.gap-2 {
	--gap: var(--gap-2);
}
.gap-2 {
	--gap: var(--gap-3);
}

/* *****************************
 * クラス：幅・高さ
 * **************************** */
:root {
	--h-0: 0rem;
	--h-1rem: 1rem;
	--h-2rem: 2rem;
	--h-3rem: 3rem;
	--h-4rem: 4rem;
	--h-5rem: 5rem;
	--h-6rem: 6rem;
	--h-8rem: 8rem;
	--h-14: 14rem;
	--h-16: 16rem;
	--h-18: 18rem;
	--h-20: 20rem;
	--h-24: 24rem;
	--h-36: 36rem;
	--h-48: 48rem;

	--h-5: 50%;
	--h-7: 80%;
	--h-8: 80%;

	--h-5vh: 50vh;
	--h-7vh: 80vh;
	--h-8vh: 80vh;

	--h-auto: auto;
	--h-fill: -webkit-fill-available;
	--h-max: 100%;
	--h-full: max-content;
	--h: var(--h-1rem);
	--w: var(--h-auto);
}
.h {
	height: var(--h);
}
.h-0 {
	--h: var(--h-0);
}
.h-5 {
	--h: var(--h-5);
}
.h-7 {
	--h: var(--h-8);
}
.h-8 {
	--h: var(--h-8);
}
.h-5vh {
	--h: var(--h-5vh);
}
.h-7vh {
	--h: var(--h-7vh);
}
.h-8vh {
	--h: var(--h-8vh);
}
.h-1rem {
	--h: var(--h-1rem);
}
.h-2rem {
	--h: var(--h-2rem);
}
.h-3rem {
	--h: var(--h-3rem);
}
.h-4rem {
	--h: var(--h-4rem);
}
.h-5rem {
	--h: var(--h-5rem);
}
.h-6rem {
	--h: var(--h-6rem);
}
.h-8rem {
	--h: var(--h-8rem);
}
.h-14 {
	--h: var(--h-14);
}
.h-16 {
	--h: var(--h-16);
}
.h-18 {
	--h: var(--h-18);
}
.h-20 {
	--h: var(--h-20);
}
.h-24 {
	--h: var(--h-24);
}
.h-36 {
	--h: var(--h-36);
}
.h-48 {
	--h: var(--h-48);
}
.h-auto {
	--h: var(--h-auto);
}
.h-fill {
	--h: var(--h-fill);
}
.h-full {
	--h: var(--h-full);
}
.h-max {
	--h: var(--h-max);
}
.h > ul {
	height: var(--h);
}
.maxvh {
	max-height: 100vh;
}

.w {
	width: var(--w);
}
.w-0 {
	--w: var(--h-0);
}
.w-5 {
	--w: var(--h-5);
}
.w-8 {
	--w: var(--h-8);
}

.w-auto {
	--w: var(--h-auto);
}
.w-fill {
	--w: var(--h-fill);
}
.w-full {
	--w: var(--h-full);
}
.w-max {
	--w: var(--h-max);
	max-width:var(--w);
}
.maxvw {
	max-width: 100vw;
}

/* *****************************
 * クラス：座標
 * **************************** */
.pos {
	position: inherit;
}
.pos-rel {
	position: relative;
}
.pos-abs {
	position: absolute;
}
.pos-fix {
	position: fixed;
}
.pos-abs-bottom {
	position: absolute;
	bottom: 0px;
}
.pos-abs-top {
	position: absolute;
	top: 0px;
}
/* *****************************
 * クラス：ボックス
 * **************************** */
.nowrap {
	white-space: nowrap;
}
.noover {
	overflow: hidden;
}
.noover-x {
	/* 幅のみhiddenにすると、縦方向にスクロールバーがでてしまうので */
	overflow-x: clip;
}
.autoscroll {
	overflow-y: auto;
}

.box {
	width: var(--width);
	max-width: var(--width);
	/*position: relative;*/
}
.box-auto {
	--width: auto;
}
.box-left {
	float: left;
}
.box-right {
	float: right;
}
.box-child > * {
	width: var(--width);
	max-width: var(--width);
	/*position: relative;*/
}
@media screen and (max-width: 680px) {
	/* 680pxまでの幅の場合に適応される */
	.box {
		width: auto;
		padding-left: 0rem;
		padding-right: 0rem;
	}
}
.box-1 {
	--width: 10%;
}
.box-2 {
	--width: 20%;
}
.box-3 {
	--width: 30%;
}
.box-4 {
	--width: 40%;
}
.box-5 {
	--width: 50%;
}
.box-6 {
	--width: 60%;
}
.box-7 {
	--width: 70%;
}
.box-8 {
	--width: 80%;
}
.box-9 {
	--width: 90%;
}
.box-10 {
	--width: 100%;
}
/* *****************************
 * クラス：インラインボックス
 * **************************** */ 
:root {
	/* 幅 */
	--col-1: 2rem;
	--col-2: 4rem;
	--col-3: 6rem;
	--col-4: 8rem;
	--col-5: 10rem;
	--col-6: 12rem;
	--col-14: 14rem;
	--col-16: 16rem;
	--col-18: 18rem;
	--col-20: 20rem;
	--col-24: 24rem;
	--col-36: 36rem;
	--col-48: 48rem;
	--col-auto: auto;
	--col-max: 100%;
	--col: var(--col-4);
}
.col {
	width: var(--col);
	/*max-width: 100%;*/
	/*position: relative;*/
}
.col-1 {
	--col: var(--col-1);
}
.col-2 {
	--col: var(--col-2);
}
.col-3 {
	--col: var(--col-3);
}
.col-4 {
	--col: var(--col-4);
}
.col-5 {
	--col: var(--col-5);
}
.col-6 {
	--col: var(--col-6);
}
.col-14 {
	--col: var(--col-14);
}
.col-16 {
	--col: var(--col-16);
}
.col-18 {
	--col: var(--col-18);
}
.col-20 {
	--col: var(--col-20);
}
.col-24 {
	--col: var(--col-24);
}
.col-36 {
	--col: var(--col-36);
}
.col-48 {
	--col: var(--col-48);
}
.col-auto {
	--col: var(--col-auto);
}
.col-max {
	--col: var(--col-max);
}
.square {
	height: var(--col);
	min-height: var(--col);
	max-height: var(--col);
}
.square-half {
	height: calc(var(--col) / 2);
	min-height: calc(var(--col) / 2);
	max-height: calc(var(--col) / 2);
}
.square-43 {
	height: calc(var(--col) * 3 / 4);
	min-height: calc(var(--col) * 3 / 4);
	max-height: calc(var(--col) * 3 / 4);
}
/* *****************************
 * クラス：整列
 * **************************** */
.align-left {
	text-align: left !important;
	justify-content: left !important;
}
.align-right {
	text-align: right !important;
	justify-content: right !important;
}
.align-center {
	text-align: center !important;
	justify-content: center !important;
}
.align-top {
	vertical-align: top !important;
	align-items: flex-start;
}
.align-bottom {
	vertical-align: bottom !important;
	align-items: flex-end;
}
.align-vcenter {
	align-items: center !important;
	vertical-align: middle !important;
}

/* *****************************
 * クラス：ホバリング
 * **************************** */

.hover-dark:hover {
	position: relative;
	text-decoration: none;
}
.hover-dark:hover::after {
	content: '';
	background-color: rgb(var(--col-black));
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 10%;
	left: 0;
	bottom: 0;
}
/* imgeタグにhover-darkを入れた場合の補正 */
img.hover-dark:hover {
	opacity: 80%;
}
a:has(>.hover-dark):hover {
	opacity: 100%;
}
a:has(>.hover-dark):hover::before {
	content: '';
	background-color: rgb(var(--col-black));
	position: absolute;
	width: 100%;
	height: 100%;
}
.hover-light:hover {
	text-decoration: none;
	opacity: 80%;
}
.hover-lighter:hover {
	text-decoration: none;
	opacity: 60%;
}
.hover-graylighter:hover {
	text-decoration: none;
	background-color: rgb(var(--col-whitegray));
	opacity: 60%;
}
.hover-zoom {
	transition: all 0.3s ease-out;
}
.hover-zoom:hover {
	/*transform: scale(1.2, 1.2) translate3d(0, 0, 0);*/
	transform: scale(1.1);
	z-index: 1;
}
.hover-underline:hover {
	text-decoration: underline;
}

/* *****************************
 * クラス：カルーセル
 * **************************** */
.carousel {
	anchor-name: --carousel;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-snap-stop: always;
    gap: 0.5rem;
}

/* スクロールバーを非表示 */
.carousel::-webkit-scrollbar {
	display: none;
}


.carousel > * {
	scroll-snap-align: center;
	align-items: center;
	flex-shrink: 0;
}

.carousel::scroll-button(left) {
	left:1rem;
	top:50%;
	/*position-area: inline-start center;*/
	content: '\21E6';
}

.carousel::scroll-button(right) {
	
	/*position-area: inline-end center;*/
	right:1rem;
	top:50%;
	content: '\21E8';
}
.carousel::scroll-button(*) {
	position: absolute;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: none;
    background-color: rgba(var(--bd-col), 0.8);
	color:#fff;
	cursor: pointer;
}
.carousel::scroll-button(*):hover {
    background-color: rgba(var(--bd-col), 0.9);
}
.carousel {
	scroll-marker-group: after;
}

.carousel::scroll-marker-group {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 16px;
	height:24px;
}

.carousel > *::scroll-marker {
	content: ' ';
	display:block;
	border: 1px solid rgb(var(--bd-col));
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
}

.carousel > *::scroll-marker:target-current {
	background-color: rgb(var(--bd-col));
}


/* *****************************
 * クラス：トグル
 * **************************** */
.toggle {
	border: none;
	background-color: transparent;
	width: 2rem;
	height: 2rem;
	position: relative;
	vertical-align: middle;
}
.toggle-icon, .toggle-icon:before, .toggle-icon:after {
	content: '';
	display: block;
	height: 3px;
	width: 100%;
	margin: 0em;
	padding: 0em;
	border-radius: 3px;
	background: rgba(var(--ft-col), 1);
	/*transition: 0.5s;*/
	position: absolute;
}
/* 三本線の一番上の棒の位置調整 */
.toggle-icon:before {
	bottom: 0.6rem;
}
/* 三本線の一番下の棒の位置調整 */
.toggle-icon:after {
	top: 0.6rem;
}
/* *****************************
 * クラス：シート
 * **************************** */
.sheet {
	--col: var(--col-6);
}
.sheet-3 {
	--col: var(--col-3);
}
.sheet small {
	display: inline-block;
}
.sheet dl,
dl.sheet {
	padding:0.5rem;
	display: flex;
	flex-wrap: wrap;
	flex-direction: var(--flex-dir);
}
.sheet dt {
	display: block;
	width: var(--col);
	font-weight: 500;
	text-align: right;
	/*
	margin-left: 0.5rem;
	*/
	margin-right: 0.5rem;
	max-width: 100%;
}
.sheet dd {
	display: block;
	flex: 1;
	max-width: 100%;
}

table.sheet {
	margin:0.5rem;
	border-collapse:collapse
}

table.sheet tr {
	border-bottom: var(--bd-w) solid rgb(var(--bd-col));
}

table.sheet td {
	padding: 0.5rem;
}

/* オーダー様な右固定のシート */
/*
.sheet .order dt {
	flex:1;
	--col:var(--col-auto);
	text-align:right;
	margin-right:1.5rem;
}

.sheet .order dd {
	flex:inherit;
	text-align: right;
}
.sheet dd:last-of-type {
    margin-left: auto;
}
*/
@media screen and (max-width: 680px), screen and (orientation: portrait) {
	.sheet dl {
		flex-direction: column;
	}
	.sheet dt {
		text-align: left;
		width: 100%;
	}
}
/* *****************************
 * クラス：Grid
 * **************************** */
.grid {
	display: grid;
}

.grid-3r {
	grid-template-columns: repeat(3, 1fr); /* 3列に分割 */
}

.grid-4r {
	grid-template-columns: repeat(4, 1fr); /* 3列に分割 */
}

.grid-5r {
	grid-template-columns: repeat(5, 1fr); /* 3列に分割 */
}
.grid-6r {
	grid-template-columns: repeat(6, 1fr); /* 3列に分割 */
}

.grid-6 {
	grid-template-columns: repeat(auto-fill, minmax(var(--col-6), 1fr)); /* 3列に分割 */
}

.grid.center {
	justify-items: center;
    align-items: center;
}

.grid.center {
	justify-items: center;
    align-items: center;
}

.grid .area-1 {
	grid-area: 1/1;
}

/*
.grid thead {
	font-weight: bold;
}
.grid tbody {}
.grid th {
	font-weight: bold;
}
.grid tr, .grid td {
	background-color: rgb(var(--bg-col));
	color: rgb(var(--ft-col));
}
.grid tr.selected {
	--bg-col: var(--col-whitegray);
}
.grid tr.hovered {
	--bg-col: var(--col-b2);
	--ft-col: var(--col-white);
}
.grid td.selected {
	--bg-col: var(--col-r2);
	--ft-col: var(--col-white);
}
.grid td.hovered {
	--bg-col: var(--col-b2);
	--ft-col: var(--col-white);
}
*/

/* *****************************
 * クラス：レター
 * **************************** */
.letter {
	overflow: hidden;
	border: var(--bd-w) solid;
	border-color: rgb(var(--col-whitegray));
	color: rgb(var(--ft-col));
	box-shadow: 0 0 8px rgba(var(--col-black), 0.2);
}
/* レターヘッダ */
.letter h3 {
	background-color: rgb(var(--bg-col));
}
.letter p {
	color: rgb(var(--ft-col));
}
.letter a {
	color: rgb(var(--ft-col));
}
.letter a:hover {
	text-decoration: none;
	opacity: 70%;
}
/* レターが重なっているようにする効果 */
.letter-s {
	overflow: inherit;
	background-color: rgb(var(--bg-col));
}
.letter-s:before, .letter-s:after {
	content: "";
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: -1;
}
.letter-s:before {
	background: #fafafa;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
	left: 0px;
	top: 8px;
	transform: rotate(4deg);
}
.letter-s:after {
	background: #f6f6f6;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	left: 0px;
	top: 4px;
	transform: rotate(2deg);
}
/* *****************************
 * クラス：カード
 * **************************** */
.card {
	overflow: hidden;
	border: var(--bd-w) solid;
	border-color: rgb(var(--bd-col));
	color: rgb(var(--ft-col));
	border-radius: var(--radius-3);
	-moz-border-radius: var(--radius-3);
	-webkit-border-radius: var(--radius-3);
	-o-border-radius: var(--radius-3);
	-ms-border-radius: var(--radius-3);
}
.card-warn {
	--bg-col: 255, 238, 238;
	--bd-col: 255, 170, 170;
	background-color: rgb(var(--bg-col));
}
/* カードヘッダ */
.card h3 {
	background-color: rgb(var(--bg-col));
}
.card p {
	color: rgb(var(--ft-col));
}
.card a {
	color: rgb(var(--ft-col));
}
.card a:hover {
	text-decoration: none;
	opacity: 70%;
}
/* *****************************
 * クラス：コンテンツ配置
 * **************************** */
.fit {
	position: absolute;
	width: auto;
	min-width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
	/*
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    */
	transform: translate(-50%, -50%);
}
.fit-in {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

/* 枠に合わせて全体表示 */
.fit-content {
	object-fit: contain;
}

/* アイコン表示など：実画像にサイズを合わせる */
.icon {
	object-fit: contain;
	width: fit-content;
}
.fit-cover {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.cover {
	object-fit: cover;
	object-position: 50% 50%;
	width: 100%;
	height: 100%;
	/*
    position: absolute;
    left: 50%;
    top: 50%;
	transform: translate(-50%, -50%);
	*/
}
.cover-center {
	object-fit: cover;
}
/* *****************************
 * ブロック装飾
 * **************************** */ 
:root {
	--cor-0: 0rem;
	--cor-1: -0.6rem;
	--cor-2: -1.2rem;
	--cor-3: -2rem;
	--cor-left: var(--cor-0);
	--cor-right: inherit;
	--cor-col: var(--col-primary);
}
.cor-circle {
	position: relative;
	margin-left: 1.5rem;
}
.cor-circle::before {
	position: absolute;
	display: block;
	vertical-align: middle;
	content: '';
	width: 1.2rem;
	height: 1.2rem;
	left: -0.8rem;
	top: 50%;
	transform: translate(0%, -70%);
	background: rgb(var(--cor-col));
	border-radius: 50%;
}
.cor-circle::after {
	position: absolute;
	display: block;
	vertical-align: middle;
	content: '';
	width: 0.8rem;
	height: 0.8rem;
	left: 0rem;
	top: 50%;
	/* transform: translate(0%, -10%); */
	background: rgba(var(--cor-col), 0.5);
	border-radius: 50%;
}
.cor-pre {
	--cor-left: var(--cor-0);
	--cor-right: inherit;
}
.cor-pre1 {
	--cor-left: var(--cor-1);
	--cor-right: inherit;
}
.cor-pre2 {
	--cor-left: var(--cor-2);
	--cor-right: inherit;
}
.cor-pre3 {
	--cor-left: var(--cor-3);
	--cor-right: inherit;
}
.cor-post0 {
	--cor-left: inherit;
	--cor-right: var(--cor-0);
}
.cor-post1 {
	--cor-left: inherit;
	--cor-right: var(--cor-1);
}
.cor-post2 {
	--cor-left: inherit;
	--cor-right: var(--cor-2);
}
.cor-post3 {
	--cor-left: inherit;
	--cor-right: var(--cor-3);
}
.cor-col-primary {
	--cor-col: var(--col-primary);
}
.cor-col-secondary {
	--cor-col: var(--col-secondary);
}
.cor-col-success {
	--cor-col: var(--col-success);
}
.cor-col-danger {
	--cor-col: var(--col-danger);
}
.cor-col-warning {
	--cor-col: var(--col-warning);
}
.cor-col-info {
	--cor-col: var(--col-info);
}
/* *****************************
 * クラス：装飾リスト
 * **************************** */
.lst-bubble {}
.lst-bubble li {
	position: relative;
	margin-left: 1.5rem;
	padding-bottom: 1rem;
}
.lst-bubble li:before {
	position: absolute;
	display: block;
	vertical-align: middle;
	content: '';
	width: 1rem;
	height: 1rem;
	left: -1.5rem;
	top: 0.25rem;
	background: rgb(var(--bd-col));
	border-radius: 50%;
}
/* *****************************
 * クラス：テーブル<dl>
 * **************************** */
dl.table {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	padding: 0em;
	border: 1px solid #ccc;
	border-bottom: none;
	--col: var(--col-5);
}
dl.table dt {
	background: #f5f5f5;
	padding: 5px;
	width: var(--col);
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
dl.table dd {
	background: #fff;
	padding: 5px;
	width: calc(100% - var(--col));
	border-bottom: 1px solid #ccc;
}
/* *****************************
 * クラス：吹き出し
 * **************************** */
.balloon {
	position: relative;
	margin: 0;
	padding: 0.25rem;
	min-width: 10rem;
	max-width: 100%;
	overflow: visible !important;
}
.balloon:before {
	content: "";
	position: absolute;
}
.balloon-t:before {
	top: -2rem;
	left: 50%;
	margin: 0;
	margin-left: -1rem;
	border: 1rem solid transparent;
	border-bottom: 1rem solid rgb(var(--bg-col));
}
.balloon-b:before {
	top: 100%;
	left: 50%;
	margin: 0;
	margin-left: -1rem;
	border: 1rem solid transparent;
	border-top: 1rem solid rgb(var(--bg-col));
}
.balloon-l:before {
	top: 50%;
	left: -2rem;
	margin: 0;
	margin-top: -1rem;
	border: 1rem solid transparent;
	border-right: 1rem solid rgb(var(--bg-col));
}
.balloon-r:before {
	top: 50%;
	left: 100%;
	margin: 0;
	margin-top: -1rem;
	border: 1rem solid transparent;
	border-left: 15px solid rgb(var(--bg-col));
}
.balloon-sm-t:before {}
@media screen and (max-width: 680px) {
	/* 680pxまでの幅の場合に適応される */
	.balloon-sm-t:before {
		top: -2rem;
		left: 50%;
		margin: 0;
		margin-left: -1rem;
		border: 1rem solid transparent;
		border-bottom: 1rem solid rgb(var(--bg-col));
	}
}
/* *****************************
 * クラス：装飾ルビ
 * **************************** */
*:has(>.ruby) {
	position: relative;
}
.ruby {
	position: absolute;
	font-size: 10pt;
	line-height: 10pt;
}
.ruby-t {
	top: 0rem;
	left: 50%;
	transform: translateX(-50%);
}
.ruby-b {
	left: 1rem;
	bottom: 0rem;
}
.ruby-r {
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
}
.ruby-c {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
/* 次行でルビ打ち */
p.ruby {
	position: inherit;
	display: inline-block;
	padding-top: 0.5rem;
}
/* *****************************
 * 装飾クラス：矢印
 * **************************** */
.arrow-bottom {
	position: relative;
}
.arrow-bottom:before {
	content: '\00ab';
	position: absolute;
	bottom: 0em;
	left: 50%;
	transform: rotate(-90deg) scaleY(2.5) translateX(-50%);
	opacity: 50%;
}

/* *****************************
 * クラス：変形
 * **************************** */
.skew-8r {
	transform: skew(-8deg, -8deg) scale(0.8) translate(8%, 16%);
}