/* Webフォント */
/* @import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700'); */
/* @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;700'); */
/* @import url('https://fonts.googleapis.com/css2?family=DM+Mono'); */
/* @import url('awesome.css'); */

/* Webフォント - ローカル */
@import url('cdn/rounded/rounded.css');
@import url('cdn/webfonts/dosis.css');
@import url('cdn/webfonts/dmmono.css');
@import url('cdn/awesome/awesome.css');

*, ::after, ::before {
	box-sizing: border-box;
}
body {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	margin: 28px 0;
	font-size: 14px;
	color: #333;
	line-height: 1.25;
	background: linear-gradient(150deg, #ddb05c, #e6dc83, #e6dc83, #c3b51b);
	background-attachment: fixed;
}
kbd {
	font-family: 'DM Mono', 'M PLUS Rounded 1c', monospace;
	padding: 2px 10px;
	font-size: 12px;
	color: #62717a;
	line-height: 1.75;
	white-space: nowrap;
	background-color: #f0f0f0;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
kbd span {
	color: #4244a9;
}
.noneselect {
	user-select: none;
	-webkit-user-select: none;
}

/* 情報パネル */
.info {
	padding: 16px;
	color: #8a6d3b;
	background-color: #fcf8e3;
	border: 1px solid #faebcc;
	border-radius: 4px 4px 0 0;
}
.info strong {
	display: block;
	margin-bottom: 6px;
}
.panel {
	/* margin-top: 12px; */
	margin: 14px 8px 0;
}
.panel strong {
	font-size: 16px;
}
.panel strong small {
	color: #8a6d3b;
	font-weight: normal;
}
.panel span {
	font-size: 15px;
	color: #41464b;
}
.panel label {
	display: inline-block;
	color: #a94442;
}
.panel small {
	color: #62717a;
}
.margin4 {
	margin-left: -8px!important;
	margin-right: -8px!important;
}
.text-center {
	text-align: center;
}
.moonAge {
	position: relative;
	width: 45px;
	height: 45px;
	margin-left: auto;
	margin-right: auto;
}
canvas {
	position: absolute;
	top: 0px;
	left: 0px;
	/* border: 1px red dotted; */
}
#moon0, #moon1, #moon2 {
	width: 45px;
	height: 45px;
}
#moon2 {
	transition: all .2s linear;
}
#moon10, #moon11, #moon12 {
	width: 60px;
	height: 60px;
}


/* セレクトボックス */
.dropdown {
	display: inline-block;
	position: relative;
	margin: 2px;
	width: 120px;
	background: #f2f2f2;
	border: 1px solid;
	/* border-color: white #f7f7f7 #f5f5f5; */
	border-color: #eee #ddd #ccc;
	border-radius: 4px;
	background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.dropdown:before, .dropdown:after {
	content: '';
	position: absolute;
	top: 10px;
	right: 10px;
	border: 4px dashed;
	border-color: #888 transparent;
	pointer-events: none;
}
.dropdown:before {
	border-bottom-style: solid;
	border-top: none;
}
.dropdown:after {
	margin-top: 8px;
	border-top-style: solid;
	border-bottom: none;
}
.dropdown > select {
	position: relative;
	width: 100%;
	/* margin: 0; */
	padding: 6px 28px 6px 10px;
	height: 32px;
	font-size: 14px;
	color: #62717a;
	text-shadow: 0 1px white;
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	background: rgba(0, 0, 0, 0)!important; /* doesn't work with Opera */
}
.dropdown > select:focus {
	width: 100%;
	color: #394349;
	outline: 2px solid #49aff2;
	outline: 2px solid -webkit-focus-ring-color;
	outline-offset: -2px;
	border-radius: 3px;
}
.dropdown > select > option {
	margin: 3px;
	padding: 6px 8px;
	background: #f2f2f2;
	border-radius: 4px;
}

/* シャドウ */
.shadow01 {
	position: relative;
	overflow: hidden;
	/* margin-bottom: calc(12px + 16px); */
	padding: 0 32px;
	/* width: calc(100% - 246px); */
}
.shadow01:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 48px;
	bottom: -48px;
	left: 0;
	border-radius: 10%;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.4), 0 0 48px -16px rgba(0, 0, 0, 0.2);
}
.shadow02 {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* カレンダー */
.margin {
	margin-bottom: calc(8px + 16px);
}
.calendar01 {
	display: inline-block;
	/* overflow: hidden; */
	margin: 2px;
	padding: 16px;
	width: 272px;
	font-family: Dosis, sans-serif;
	font-size: 14px;
	color: #fff;
	line-height: 1;
	vertical-align: top;
	background-color: #29323f;
	border-radius: 4px;
	cursor: default;
}
.calendar01 h2 {
	margin: 4px 0 16px;
	font-weight: 500;
	text-align: center;
	color: #fcee6d;
}
.calendar01 > div {
	display: flex;
	flex-direction: row;
	text-align: center;
}
.calendar01 > div > label {
	position: relative;
	width: calc(100% / 7);
	/* height: 29px; */
}
.calendar01 .weekday {
	padding: 0 0 7px;
	color: #999;
}
.calendar01 .weekday > label {
	height: initial;
}
.calendar01 .blue {
	color: #aaaaff;
}
.calendar01 .red {
	color: #eea0a0;
}
.calendar01 .invalid {
	color: #555;
}
.calendar01 .invalid.red {
	color: #885555;
}
.calendar01 .invalid.blue {
	color: #6060aa;
}
.calendar01 .invalid > .holiday {
	color: #885555;
	cursor: pointer;
}
.calendar01 .invalid > .debug {
	color: #999;
}
.calendar01 > div > label > span {
	display: inline-block;
	width: 29px;
	/* height: 29px; */
	line-height: 29px;
	border-radius: 50%;
	/* border: 2px solid #29323f; */
	border: 2px solid transparent;
	transition: all .2s, color 0s;
}
.calendar01 .holiday {
	color: #eea0a0;
	cursor: pointer;
}
.calendar01 .holiday:hover {
	border-color: #fcee6d;
}
.calendar01 .holiday:hover > .today {
	border-radius: 50%;
}
.calendar01 .holiday:hover > .reserve {
	border-radius: 50%;
}
.calendar01 .holiday:hover + .tooltip {
	visibility: visible;
	opacity: 1;
}
.calendar01 .birthday:hover + .bottomtip {
	visibility: visible;
	opacity: 1;
}
.calendar01 > div > label > span > span {
	display: inline-block;
	width: 25px;
	height: 25px;
	line-height: 25px;
	border: 2px solid #29323f;
	border-radius: 50%;
	cursor: pointer;
	/* transition: all .2s linear; */
}
.calendar01 .today {
	border-color: #4fd84f;
	border-radius: 25%;
}
.calendar01 .birthday {
	border-color: #b391b2;
}
.calendar01 .today.birthday {
	border-color: #fcee6d;
}
.calendar01 .closed {
	border-color: #d2ac8e;
	border-radius: 50%;
}
.calendar01 .reserve {
	border-color: #8e9bd2;
	border-radius: 25%;
}
.calendar01 .tooltip {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	line-height: 1.25;
	margin-left: -80px;
	width: 160px;
	bottom: calc(100% + 4px);
	left: 50%;
	/* z-index: 1; */
	text-align: center;
	transition: all .2s linear;
}
.calendar01 .tooltip > .text {
	display: inline-block;
	padding: 7px;
	font-size: 13px;
	font-style: normal;
	color: #555;
	background-color: #fcee6d;
	border-radius: 2px;
}
.calendar01 .tooltip > .text:after {
	position: absolute;
	content: " ";
	margin-left: -4px;
	top: 100%;
	left: 50%;
	border-width: 4px;
	border-style: solid;
	border-color: #fcee6d transparent transparent transparent;
}
.calendar01 .bottomtip {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	line-height: 1.25;
	margin-left: -125px;
	width: 250px;
	top: calc(33px + 2px);
	left: 50%;
	z-index: 20;
	transition: all .2s linear;
}
.calendar01 .bottomtip > .text {
	display: inline-block;
	padding: 7px;
	font-size: 13px;
	font-style: normal;
	text-align: initial;
	color: #555;
	background-color: #fcbd7d;
	border-radius: 2px;
}
.calendar01 .bottomtip > .text:after {
	position: absolute;
	content: " ";
	margin-left: -4px;
	bottom: 100%;
	left: 50%;
	border-width: 4px;
	border-style: solid;
	border-color: transparent transparent #fcbd7d transparent;
}
.calendar01 .notclosed {
	cursor: pointer;
}
.calendar01 .notclosed:hover {
	border-color: #fcee6d;
}

/* Bootstrap対策 */
.calendar01 h2 {
	/* font-family: Dosis, sans-serif; */
	/* font-size: 21px; */
	/* line-height: 1; */
}
.calendar01 > div > label {
	/* margin-bottom: 0; */
	/* font-weight: normal; */
	/* height: 33px; */
}
.calendar01 > div > label > span {
	width: 33px;
	/* height: 33px; */
}
.calendar01 > div > label > span > span {
	width: 29px;
	height: 29px;
}

/* 年間表示 */
.flex {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-top: -2px;
	margin-left: -2px;
	margin-right: -2px;
}
.center {
	margin-left: auto;
	margin-right: auto;
}
#header {
	width: 100%;
}
#header h2 {
	margin: 0;
}

/* 名前入力 */
.calendar01 > div > label > input { /* 入力欄 */
	opacity: 0;
	position: absolute;
	margin-top: 36px;
	left: -16px;
	width: 272px;
	height: 2px;
	font-size: 14px;
	padding: 0 16px;
	border: 0;
	outline: none;
	transition: .2s;
}
.nameform::placeholder { /* プレースホルダー */
	color: #ccc;
}
/* label の順番（子）ごとに input の位置を変更 */
.calendar01 > div > label:nth-of-type(2) > input { left: calc(-100% - 16px); }
.calendar01 > div > label:nth-of-type(3) > input { left: calc(-200% - 16px); }
.calendar01 > div > label:nth-of-type(4) > input { left: calc(-300% - 16px); }
.calendar01 > div > label:nth-of-type(5) > input { left: calc(-400% - 16px); }
.calendar01 > div > label:nth-of-type(6) > input { left: calc(-500% - 16px); }
.calendar01 > div > label:nth-of-type(7) > input { left: calc(-600% - 16px); }
.calendar01 > div > label > input:focus { /* 入力欄のフォーカス */
	opacity: 1;
	height: 30px;
	z-index: 10;
}
.calendar01 > div > label > input:focus + span { /* 入力欄のフォーカス（兄弟） */
	margin-bottom: 33px;
}
.calendar01 > div > label > span > span:hover { /* 日のホバー枠 */
	border-color: #fcbd7d!important;
}
.calendar01 > div > label > input:focus + span > span { /* 日のフォーカス枠 */
	border-color: #fcbd7d;
	background:rgba(252, 189, 125, 0.25);
}
.calendar01 > div > label > em { /* 入力なし表示 */
	opacity: 0;
	position: absolute;
	top: 26px;
	left: 50%;
	margin-left: -1.5px;
	width: 3px;
	height: 3px;
	background-color: #ffd0cc;
	border-radius: 50%;
	z-index: 10;
}
.calendar01 > div > label > input:valid ~ em { /* 入力あり表示 */
	opacity: 1;
}
.calendar01 > div > label > input:focus ~ em { /* 入力欄の吹き出し表示 */
	opacity: 1;
	top: 29px;
	margin-left: -4px;
	width: 0;
	height: 0;
	background-color: initial;
	border: 4px solid transparent;
	border-bottom-color: #fff;
}

/* トグルスイッチ */
.toggle {
	position: relative;
	width: 90px;
	height: 20px;
	background: linear-gradient(0deg, #333, #000);
	outline: none;
	border-radius: 10px;
	cursor: pointer;
	-webkit-appearance: none;
	/* box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0,1); */
	box-shadow: 0 0 0 1px #353535, 0 0 0 2px #3e3e3e, inset 0 0 4px rgba(0, 0, 0, 1);
}
.toggle:checked {
	/* background: linear-gradient(0deg, #e67e22, #f39c12); */
	background: linear-gradient(0deg, #70a1ff, #1e90ff);
}
.toggle:before {
	font-family:  Dosis, "Font Awesome 6 Pro", sans-serif;
	font-weight: 400;
	font-size: 10px;
	color: #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	content: '\f013 \00a0 debug';
	position: absolute;
	top: 0;
	left: 0;
	width: 70px;
	height: 20px;
	background: linear-gradient(0deg, #000, #6b6b6b);
	border-radius: 10px;
	box-shadow: 0 0 0 1px #232323;
	transform: scale(.98,.96);
	transition: .2s;
}
.toggle:checked:before {
	left: 20px;
}
.toggle:after{
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	left: 62px;
	width: 4px;
	height: 4px;
	background: linear-gradient(0deg, #6b6b6b, #000);
	border-radius: 50%;
	transition: .2s;
}
.toggle:checked:after {
	left: 82px;
}
.annual:before {
	font-size: 11px;
	/* font-weight: bold; */
	font-weight: 900;
	color: #fcee6d;
	content: '\f073 \00a0 Annual';
}


/* Webストレージ情報 */
.saving {
	background: rgb(179 145 178 / 55%);
}
pre {
	font-family: 'DM Mono', 'M PLUS Rounded 1c', monospace;
	margin: 0;
	white-space: pre-wrap;
	tab-size: 4;
}
pre span {
	font-size: 13px;
	color: #4244a9;
}
textarea {
	font-family: 'DM Mono', 'M PLUS Rounded 1c', monospace;
	padding: 8px 16px;
	width: calc(100% - 30px);
	font-size: 13px;
	line-height: 1.5;
	background-color: #fffff6;
	border: 1px solid #cc9;
	border-radius: 4px 0 0 4px;
	resize: none;
}
.item {
	align-items: initial;
}
.margin2 {
	margin-top: 6px;
}
.storage {
	width: 50%;
	margin-bottom: 2px;
}
.detail {
	margin: 2px 2px 4px;
	padding: 5px 10px;
	font-size: 12px;
	color: #62717a;
	/* line-height: 1.5; */
	background-color: #f0f0f0;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgb(0 0 0 / 40%);
}
.button {
	font-family: Dosis, sans-serif;
	margin: 0 2px;
	padding: 4px 8px;
	width: 75px;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	background-color: #555;
	border-style: solid;
	border-width: 0 1px 4px 1px;
	border-color: #4d4d4d;
	border-radius: 3px;
	cursor: pointer;
}
.button:hover {
	margin-top: 1px;
	background-color: #505050;
	border-bottom-width: 3px;
}
.button:active {
	margin-top: 2px;
	border-bottom-width: 2px;
}
.button:focus {
	outline: 0;
	box-shadow: 0 0 0 3px rgb(111 111 111 / 50%);
}
.save {
	margin: 0;
	width: initial;
	font-size: 12px;
	color: #fff!important;
	background-color: #ff851b!important;
	border-color: #e67818!important;
	border-radius: 0 4px 4px 0;
}
.save:hover {
	background-color: #f27e19!important;
}
.save:focus, textarea:focus {
	outline: 0;
	box-shadow: 0 0 0 3px rgb(255 151 61 / 50%)!important;
}
.fa-fix {
	text-align: center;
	width: 12px;
}
.margin3 {
	margin-top: 4px;
	margin-left: 0;
	margin-right: 0;
}
#sample {
	color: #222;
	background-color: #f0f0f0;
	border-color: #d8d8d8;
}
#sample:hover {
	background-color: #e4e4e4;
}
#sample:focus {
	box-shadow: 0 0 0 3px rgb(204 204 204 / 50%);
}


/* プレースホルダー */
.place {
	position: relative;
	background-color: #fffff6;
	border-radius: 4px;
}
.place > textarea {
	position: relative;
	z-index: 2;
	appearance: none;
	background: none;
}
.place > span {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	position: absolute;
	top: 10px;
	left: 16px;
	font-size: 13px;
	color: #999;
	transform-origin: 0 0;
	transition: all 0.25s ease;
	user-select: none;
}
.place > textarea:focus + span {
	color: #f40;
}
.place > textarea:focus + span, textarea:not(:placeholder-shown) + span {
	z-index: 3;
	padding: 0 2px;
	font-weight: bold;
	line-height: 1;
	transform: translate(-6px, -16px) scale(0.9);
	/* background-image: linear-gradient(transparent 5px, rgba(255,255,246,.8) 1px, rgba(255,255,246,.8) 8px, transparent 1px); */
	text-shadow: -1px -1px 1px #f7f8fa, /* 左上 */
	1px -1px 1px #f7f8fa, /* 右上 */
	1px 1px 1px #f7f8fa, /* 右下 */
	-1px 1px 1px #f7f8fa, /* 左下 */
	-1px 0 1px #f7f8fa, /* 上 */
	1px 0 1px #f7f8fa, /* 下 */
	0 -1px 1px #f7f8fa, /* 左 */
	0 1px 1px #f7f8fa; /* 右 */
}


/* アラート */
.layer {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgb(41 50 63 / 50%);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: 100;
}
.alert {
	position: relative;
	top: 50%;
	left: 50%;
	padding: 16px;
	width: 375px;
	color: #555;
	background-color: #f1ddeb;
	border-radius: 4px;
	box-shadow: 0 8px 16px rgb(250 235 204 / 40%);
	transform: translateY(-50%) translateX(-50%);
}
.alert > .flex {
	margin-top: 16px;
	justify-content: center;
}
.alert > .flex > button {
	width: calc(50% - 4px);
}

#action {
	color: #fff!important;
	/* 青 */
	background-color: #158cba!important;
	border-color: #137ea7!important;
	/* 緑 */
	background-color: #28b62c!important;
	border-color: #24a428!important;
}
#action:hover {
	/* 青 */
	background-color: #1485b0!important;
	/* 緑 */
	background-color: #25ac2a!important;
}
#action:focus {
	/* 青 */
	box-shadow: 0 0 0 3px rgb(56 157 196 / 50%)!important;
	/* 緑 */
	box-shadow: 0 0 0 3px rgb(72 193 76 / 50%)!important;
}


/* スマホ用表示 */
@media (max-width: 767px) {
	.shadow01 {
		padding: 0 8px;
	}
	.margin {
		margin-bottom: calc(12px + 16px);
	}
	.margin4 {
		justify-content: center;
	}
	.calendar01 {
		/* display: block; */
		overflow: hidden;
		margin-top: 0px;
		margin-bottom: 0px;
		/* padding: 4px 16px; */
		padding: 0 16px 32px;
		width: 100%;
		border-radius: 0;
	}
	.calendar01:first-of-type {
		padding-top: 22px;
		border-radius: 4px 4px 0 0;
	}
	.calendar01:last-of-type {
		border-radius: 0 0 4px 4px;
	}
	.calendar01 > div > label > input {
		width: calc(700% + 32px);
	}
	#calendar {
		width: calc(100% + 4px)!important;
	}
	#header h2 {
		margin: 16px 0;
	}
	.storage {
		width: 100%;
	}
	textarea {
		width: 100%;
		border-radius: 4px 4px 0 0;
	}
	.save {
		width: 100%;
		border-radius: 0 0 4px 4px;
	}
}
/* タブレット用表示 */
@media (max-width: 991px) {
	.dropdown {
		width: calc(50% - 4px);
	}
}