/*--------------------------
	common.css
--------------------------*/
/* INIT */
@charset "utf-8";
@import url(ress.css);

/* WEB FONT //////////////////////////////////////////////////////// */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/* VARIABLEs //////////////////////////////////////////////////////// */
:root{
	--White:#FFF;
	--Gray-F9F9F9:#F9F9F9;
	--Gray-DDD:#DDD;
	--Gray-CCC:#CCC;
	--Gray-AAA:#AAA;
	--Gray-999:#999;
	--Gray-666:#666;
	--Black:#222;
	--Blue:#0E9FED;
	--Blue-hover:#A0D6F2;
	--Green:#22AC38;
	--Orange:#F29900;
	--LinkBlue:#0019F5;
	--Pink:#F12584;
	--Yellow:#EEC200;

	--BGversatile:#F1F0EC;

	--BoxShadow:0 0.2vw 0.4vw rgba(0, 0, 0, 0.2);
	--Radius:0.8vw;
}
@media screen and (max-width: 959px){
	/*== SP Style sheet ================================================*//*
	┏━━┓┏━━┓
	┃┏━┛┃　━ ┃
	┃┗━┓┃┏━┛
	┏━┛┃┃┃
	┗━━┛┗┛
	- - - - - - FONT-SIZE / SP - - - - - -*/
	:root{}
}/*== SP Style sheet END ================================================*/
@media screen and (min-width: 960px){
	/*== PC Style sheet =================================================*//*
		┏━━┓　┏━━━┓
		┃　━ ┃ ┃┏━┓┃
		┃┏━┛　┃┃ 　 ━
		┃┃	　┃┗━┛┃
		┗┛	　┗━━━┛
	- - - - - - FONT-SIZE / PC - - - - - -*/
	.mobile{display:none;}
	:root{
		--fontSIZE-Normal:1.04vw;
	}
}/*== PC Style sheet END ================================================*/


/*== Common Style sheet ================================================*/
body{
	
	font-size:var(--fontSIZE-Normal);
	font-family:"Noto Sans JP",
				"Helvetica Neue",
				Arial,
				"Hiragino Kaku Gothic ProN",
				"Hiragino Sans",
				Meiryo,
				sans-serif;
	text-align:center;
	/*letter-spacing:0.2vw;*/
	color:var(--Black);
	background:var(--White);
}

/* LINK FONT-COLOR */
a:link, a:visited, a:active{color:var(--LinkBlue);text-decoration:none;}
a:hover{color:var(--LinkBlue);}

/* HEADINGs
h1{}
h2{}
h3{}
h4{}
h5{}
h6{}
*/
ul, ol{list-style:none;margin:0;padding:0;}

/* HEADER //////////////////////////////////////////////////////// */
header{
	width:92vw;
	margin-left:4vw;
	box-shadow:var(--BoxShadow);
	border-radius:0 0 0.8vw 0.8vw;
}
header::after{content:"";display:block;clear:both;}

header > h1{float:left;margin-left:1.6vw;}
header > h1:hover{opacity:0.6;}
header > h1 > a > *{display:inline-block;}
header > h1 > a > img{width:3.2vw;vertical-align:-0.6vw;}
header > h1 > a > p{
	height:2.4vw;
	font-size:0.8vw;
	background-image:linear-gradient(to right, #0E9FEC 0%, #22AC38 100%);
	background-clip:text;
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
}
header > h1 > a:link > p,
header > h1 > a:visited > p,
header > h1 > a:active > p
{color:var(--LinkBlue);text-decoration:none;letter-spacing:0.2vw;}
header > h1 > a:active > a:hover{color:var(--LinkBlue);}

header > nav{float:right;height:2.4vw;margin-top:1.1vw;margin-right:1.6vw;}
header > nav > *{display:inline-block;}
header > nav .menuBtn{margin-right:2.4vw;color:var(--Black);}
header > nav .menuBtn svg{width:1.2vw;height:1.2vw;vertical-align:-0.19vw;margin-right:0.4vw;}
header > nav .menuBtn:hover{color:#999;}
header > nav .menuBtn:hover svg{fill:#999;}
header > nav .userMenu > a{margin-left:1.2vw;}
header > nav .userMenu > a:hover{fill:#999;}
header > nav .userMenu svg{width:1.2vw;height:1.2vw;vertical-align:-0.2vw;cursor:pointer;}

header > nav .loginBtn{display:none;}

/* 非ログイン状態 */
header.notLogin > nav .menuBtn,
header.notLogin > nav .userName,
header.notLogin > nav .userMenu
{display:none;}

header.notLogin > nav{margin-top:0.7vw;}
header.notLogin > nav .loginBtn{display:block;padding:0.4vw 2.4vw;box-shadow:var(--BoxShadow);border-radius:2em;}
header.notLogin > nav .loginBtn > span:first-child{padding-right:0.4vw;color:var(--Blue);font-weight:bold;}
header.notLogin > nav .loginBtn > span:last-child{font-size:80%;}
header.notLogin > nav .loginBtn:hover > span{opacity:0.6;}

/* FOOTER //////////////////////////////////////////////////////// */
footer{
	width:92vw;
	height:3.2vw;
	line-height:2.4vw;
	margin-top:3.2vw;
	margin-left:4vw;
	box-shadow:0 0vw 0.4vw rgba(0, 0, 0, 0.2);
	border-radius:0.8vw 0.8vw 0 0;
}
footer > span{
	line-height:3.2vw;
	letter-spacing:0.2vw;
	background-image:linear-gradient(to right, #0E9FEC 0%, #22AC38 100%);
	background-clip:text;
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
}

/* MODAL //////////////////////////////////////////////////////// */
.modal{position:relative;padding:4.8vw;text-align:left;box-shadow:var(--BoxShadow);border-radius:0 0 0 0.8vw;}
.modal::after{content:"";display:block;clear:both;}
.modal > h2{margin-bottom:2.4vw;color:var(--Blue);text-align:center;}
.modal input[type="text"], .modal input[type="email"], .modal input[type="password"]{border:0.01vw solid var(--Black);border-radius:0.4vw;}
.modal label{display:block;}
.modal label + label{margin-top:1.6vw;}
.modal label > input[type="text"], .modal input[type="email"], .modal label > input[type="password"]{margin-top:0.4vw;}
.modal input[type="text"], .modal input[type="email"], .modal input[type="password"]{padding:0.4vw;}
.modal input[type=text]::placeholder, .modal input[type="email"]::placeholder{color:#AAA;}
.modal button.confirm{float:right;margin-top:1.6vw;padding:0.8em 1.6em;color:var(--White);background:var(--Blue);border-radius:0.4vw;}

.modal div.actionBtnArea{position:absolute;top:2.4vw;right:2.4vw;}
.modal div.actionBtnArea svg{width:2.4vw;height:2.4vw;cursor:pointer;}
.modal div.actionBtnArea svg.closeBtn{fill:var(--Gray-AAA);}
.modal div.actionBtnArea svg:hover{opacity:0.6;}

/* ログイン MODAL */
.loginModal{z-index:9999;position:fixed;top:0;right:-40vw;padding-bottom:7.2vw;background:var(--White);transition:all 0.4s;}
.loginModal.active{top:0;right:0;transition:all 0.4s;}
.loginModal input[type="email"], .loginModal input[type="password"]{width:18em;}
.loginModal > label:nth-child(4) input[type="checkbox"]{vertical-align:-0.3em;}
.loginModal > label:nth-child(4) span{padding-left:0.4vw;font-size:80%;}
.loginModal .toRegister{position:absolute;bottom:2.4vw;left:50%;transform: translate(-50%, -50%);}
.loginModal .toRegister:hover{text-decoration:underline;opacity:0.6;}

/* アカウント MODAL */
.accountModal{z-index:9998;position:fixed;top:0;right:-40vw;padding-top:5.2vw;background:var(--White);transition:all 0.4s;}
.accountModal.active{top:0;right:0;transition:all 0.4s;}
.accountModal svg{width:2vw;height:2vw;}

.accountModal .showView{display:block;}
.accountModal .editView{display:none;}
.accountModal.edit .showView{display:none;}
.accountModal.edit .editView{display:block;}

.accountModal label svg{margin-right:0.4em;vertical-align:-0.5em;}
.accountModal div.editView > div:nth-child(2){display:flex;align-items:center;gap:2.4vw;margin-top:0.8vw;height:3.2em;line-height:3.2em;}
.accountModal div.editView > div:nth-child(2) > label:nth-child(1) > svg:nth-child(3){fill:var(--Blue);cursor:pointer;}
.accountModal div.editView > div:nth-child(2) > label:nth-child(1) > svg:nth-child(3):hover{opacity:0.6;}
.accountModal div.editView > div:nth-child(2) > label:nth-child(2){margin:0;}
.accountModal div.editView > div:nth-child(2) > label:nth-child(2) > *{float:left;}
.accountModal div.editView > div:nth-child(2) > label:nth-child(2) > label{position:relative;width:6.4em;height:2.4em;line-height:2.4em;}
.accountModal div.editView > div:nth-child(2) > label:nth-child(2) > label > select{
	width:6.4em;
	padding:0 0 0 1em;
	border:0.01vw solid var(--Black);
	border-radius:0.4vw;
	height:2.4em;
	line-height:2.4em;
	vertical-align:0.6em;
}
.accountModal div.editView > div:nth-child(2) > label:nth-child(2) > label > svg{position:absolute;width:1.2em;height:1.2em;top:0.6em;right:0.2em;pointer-events:none;}
.accountModal div:nth-child(3) > svg:nth-child(1),
.accountModal div.editView > div:nth-child(2) > label:nth-child(2) > svg:nth-child(1)
{width:1.24vw;margin:0;fill:var(--Blue);}
.accountModal div:nth-child(3) > svg:nth-child(2),
.accountModal div.editView > div:nth-child(2) > label:nth-child(2) > svg:nth-child(2)
{width:1.24vw;fill:var(--Pink);}

.accountModal div.editView > label:nth-child(1) input,
.accountModal div.editView > label:nth-child(3) input,
.accountModal div.editView > label:nth-child(4) input
{width:20em;}
.accountModal div.editView > label:nth-child(3){margin-top:1.2vw;}
.accountModal div.editView > label:nth-child(4){margin-top:0.8vw;}
.accountModal div.editView > label:nth-child(5) input,
.accountModal div.editView > label:nth-child(6) input
{width:8em;}
.accountModal div.editView > label:nth-child(6){margin-top:0.8vw;}
.accountModal div.editView > label:nth-child(1) svg{vertical-align:-0.4em;}
.accountModal div.editView > label:nth-child(3) svg{vertical-align:-0.5em;}
.accountModal div.editView > label:nth-child(4) svg{vertical-align:-0.2em;}

.accountModal button.confirm{display:none;position:absolute;right:4.8vw;bottom:4.8em;}
.accountModal div.actionBtnArea > svg.editBtn{width:2vw;height:2vw;margin-right:0.4vw;vertical-align:0.2vw;fill:var(--Blue);}

/* 表示モード */
.accountModal .showView svg{vertical-align:-0.5em;margin-right:1em;}
.accountModal .showView p{display:inline-block;font-size:120%;}
.accountModal .showView > div{height:2.4em;line-height:2.4em;}
.accountModal .showView > div + div{margin-top:0.8vw;}

/* 編集モード */
.accountModal.edit div.actionBtnArea > svg.editBtn{fill:var(--Gray-AAA);}
.accountModal.edit button.confirm{display:block;}

/* ALERT : CONFIRM DIALOG */
.dialogModal{
	position:fixed;
	top:50%;left:50%;
	transform: translate(-50%, -50%);
	padding:4vw;
	text-align:center;
	letter-spacing:0.1vw;
	background:var(--White);
	box-shadow:var(--BoxShadow);
	border:none;
	border-radius:var(--Radius);

	
}
.dialogModal::backdrop{background: rgba(0, 0, 0, 0.5);}
.dialogModal .btnWrap{margin-top:3.2vw;}
.dialogModal .btnWrap > button{padding:0.8vw 3.2vw;color:var(--White);letter-spacing:0.2vw;box-shadow:var(--BoxShadow);border-radius:0.4vw;}
.dialogModal button.primaryBtn{background:var(--Blue);}
.dialogModal button.secondaryBtn{margin-left:2.4vw;background:var(--Gray-AAA);}

.dialogModal.alertDlg{z-index:8998;}
.dialogModal.alertDlg button.secondaryBtn{display:none;}
.dialogModal.confirmDlg{z-index:89997;}
.dialogModal.alertDlg, .dialogModal.confirmDlg{width:40vw;}
.dialogModal.alertDlg p, .dialogModal.confirmDlg p{text-align:left;}

/* BACK to TOP */
#backToTop{
	z-index:9900;
	position:fixed;
	bottom:-16em;
	right:0;
	padding:0.8vw 1.6vw;
	background:var(--Gray-AAA);
	color:var(--White);
	text-decoration:none;
	border-radius:0.4vw 0 0 0.4vw;
	transition:all 0.4s;
}
#backToTop > span{display:block;}
#backToTop:hover{background:var(--Gray-666);/*color:var(--Gray-AAA);*/transition:all 0.2s;}
.arrowFigure{
	width:1.2em;
	height:1.2em;
	margin:0.6em 0 0 0.4em;
	border:0.1em solid;
	border-color:var(--White) var(--White) transparent transparent;
	transform: rotate(-45deg);
}

/* CONTENTs //////////////////////////////////////////////////////// */
/* CONTENTs TITLE */
.contTtl{padding:1.6vw 0;}
.contTtl span{
	font-size:120%;
	font-weight:normal;
	letter-spacing:0.4vw;
	background-image:linear-gradient(to right, #0E9FEC 0%, #22AC38 100%);
	background-clip:text;
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
}
.contTtl svg{width:2vw;height:2vw;margin-right:0.8vw;vertical-align:-0.2vw;fill:var(--Blue);}

/* BREADCRUMB */
.breadcrumb{margin-top:0.4vw;margin-left:6.8vw;text-align:left;}
.breadcrumb svg{width:1.2em;height:1.2em;margin-right:0.2vw;vertical-align:-0.2vw;fill:var(--Blue);}
.breadcrumb span{color:var(--Green);}

/* REMARKsOver BTN */
.variableView{overflow-y:hidden;transition:all 0.4s;}
button.remarksOverBtn{position:absolute;right:0.2vw;bottom:0;padding:0.2vw 0.4vw;font-size:70%;border-radius:0.4vw;}
button.remarksOverBtn.toOpen{display:none;color:var(--Orange);background:var(--White);}
button.remarksOverBtn.toClose{display:none;color:var(--White);background:#AAA;}
button.remarksOverBtn.toClose svg{width:1.2em;height:1.2em;margin-right:0.2vw;vertical-align:-0.16vw;fill:var(--White);}
/* 特記事項 OPEN */
.remarksOver button.remarksOverBtn.toOpen{display:block;}
.remarksOver button.remarksOverBtn.toClose{display:none;}
/* 特記事項 OPEN */
.remarksOpen .variableView{overflow-y:scroll;transition:all 0.24s;}
.remarksOpen button.toOpen{display:none;}
.remarksOpen button.toClose{display:block;}

/* FUNCTION BUTTON */
button.funcBtn{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:0.2vw;
	padding:0.6vw 1.2vw;
	text-align:center;
	background:var(--White);
	box-shadow:var(--BoxShadow);
	border-radius:0.8vw;
}
button.funcBtn > *{display:block;}
button.funcBtn svg{width:1.6vw;height:1.6vw;}
button.funcBtn span{font-size:80%;}
button.funcBtn span::first-letter{letter-spacing:0.2vw}
button.funcBtn:hover{box-shadow:0 0.2vw 0.2vw rgba(0, 0, 0, 0.1);}
button.funcBtn:hover svg, button.funcBtn:hover span{opacity:0.6;}

/* TOGGLE */
label.toggleSwitch:has(input[type="checkbox"]){
	display:inline-flex;
	--font-size:1.04vw;	/* 基本サイズ */
	font-size:var(--font-size);
	line-height:calc(var(--font-size) + 4px);
	align-items:center;
}
label.toggleSwitch>input[type="checkbox"]{
	box-sizing:border-box;
	position:relative;
	font-size:1.4em;
	width:2em;
	height:1em;
	padding:0;
	appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	-moz-appearance: none;
	background:var(--Gray-AAA);
	border-radius:0.5em;
	-webkit-tap-highlight-color: transparent;
}
label.toggleSwitch>input[type="checkbox"]:checked{
	background:#005FB8;
}
label.toggleSwitch>input[type="checkbox"]::before{
	box-sizing:border-box;
	content:"";
	position:absolute;
	left:0.1em;
	top:0.1em;
	bottom:0.1em;
	width:0.8em;
	/*background:var(--White);*/
	background:var(--Gray-666);
	border-radius:0.4em;
	transform:translate(125%,0%);
	transition:all 0.2s ease-in-out;
	margin:0;
}
label.toggleSwitch>input[type="checkbox"]:checked::before{
	background:var(--White);
	transform:translate(0%,0%);
	transition:all 0.2s ease-in-out;
}

/*  */