@charset "UTF-8";

@font-face {
	font-family: 'agecheaker_icf';
	src:
		url('fonts/agecheaker_icf.ttf?2wmx0p') format('truetype'),
		url('fonts/agecheaker_icf.woff?2wmx0p') format('woff'),
		url('fonts/agecheaker_icf.svg?2wmx0p#agecheaker_icf') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icf-"], [class*=" icf-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'agecheaker_icf' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	/*line-height: 1;*/
	line-height: 150%;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icf-list:before {
	content: "\f2bd";
}

.icf-add:before {
	content: "\e973";
}

.icf-edit:before {
	content: "\e975";
}

.icf-remove:before {
	content: "\e974";
}

.icf-close:before {
	content: "\e209";
}

.icf-trash:before {
	content: "\f1f8";
}



.icf-config:before {
	content: "\e992";
}

.icf-return:before {
	content: "\e902";
}

.icf-inport:before {
	content: "\e960";
}
.icf-export:before {
	content: "\e961";
}


/***********************************

 Master Frame

 ***********************************/

body{
	background-color: #FFE694;
	color:#333333;
}


*:focus {
	outline: none;
}

a {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	/*cursor:pointer;*/
}


/***********************************

 Input From*

 ***********************************/
.inputFld{
	display:block;
	overflow:hidden;
	border-radius: 10px 40px/40px 5px;
	border: 1px solid #333333;
	background-color:#ffffff;
	box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.25) inset;
}

input[type="text"],
input[type="date"],
input[type="number"],
select{
	width:100%;
	font-size:2.0rem;
	line-height:125%;
	padding:0.5em;
	outline: 0;
	color:#333333;
	border:none;
	background-color:unset;
	
	/*
	background-color:#FFFFFF;
	box-shadow:2px 2px 2px 2px rgba(0,0,0,0.4) inset;
	*/

}

input:disabled,
select:disabled{
	color:#cccccc;
	pointer-events:none;
	border-color:#cccccc;
}

button{
	background:unset;
	border:none;
	cursor:pointer;
}

input,
button,
label{
	-webkit-tap-highlight-color: transparent;
}

input:focus,
button:focus{
	outline: 0;
}



/***********************************

 Main Page

 ***********************************/
#wrapper{
	/*width:100vw;
	min-height:100vh;
	min-height: -webkit-fill-available;*/
}

main{
	display:block;
	overflow:hidden;
	width:min(100vw,640px);
	height:100vh;
	margin:0 auto;
	min-height: -webkit-fill-available;
	position:relative;
}

main > section{
	display:block;
	overflow:hidden;
	position:relative;
	padding:4vw 4vw 0;
}



/* for PC --------------------*/
@media screen and (min-width:767px) {

	main > section{
		padding:15px 0 0;
	}

}



/******************************

 結果パネル

 ******************************/

#results{
	display:block;
	overflow:hidden;
	padding:6vw 4vw;

	font-size:2.0rem;
	font-weight:600;
	line-height:155%;
	text-align:center;

	color: #FFFFFF;
	border: 8px double #FFE694;
	border-radius: 10px 50px/50px 10px;
	background-color: #e39e28;
	position:relative;
}

#results::before{
	content:"";
	display:inline-block;
	overflow:hidden;
	width:clamp(45px,15vw,62px);
	height:clamp(42px,14vw,58px);
	position:absolute;
	bottom:5px;
	right:8px;

	background-repeat:no-repeat;
	background-position:0 0;
	background-size:contain;
	background-blend-mode:soft-light;
}

.zodoff #results::before{
	display:none;
}

#results.f_0::before{
	background-image: url('../images/f09.svg');
}
#results.f_1::before{
	background-image: url('../images/f10.svg');
}
#results.f_2::before{
	background-image: url('../images/f11.svg');
}
#results.f_3::before{
	background-image: url('../images/f12.svg');
}
#results.f_4::before{
	background-image: url('../images/f01.svg');
}
#results.f_5::before{
	background-image: url('../images/f02.svg');
}
#results.f_6::before{
	background-image: url('../images/f03.svg');
}
#results.f_7::before{
	background-image: url('../images/f04.svg');
}
#results.f_8::before{
	background-image: url('../images/f05.svg');
}
#results.f_9::before{
	background-image: url('../images/f06.svg');
}
#results.f_10::before{
	background-image: url('../images/f07.svg');
}
#results.f_11::before{
	background-image: url('../images/f08.svg');
}


#results p{
	opacity:0.0;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

#results.shown p{
	opacity:1.0;
}

/*#results p + p{
	margin-top:0.25em;
}*/

#results span{
	font-size:2.8rem;
	line-height:155%;
}

#results span > strong{
	display:inline-block;
	font-size:3.4rem;
	font-weight:900;
	line-height:155%;
	margin: 0 0.25em
}




/* for PC --------------------*/
@media screen and (min-width:767px) {

	#results{
		padding:20px 15px;
	}

}



/******************************

 日付入力

 ******************************/
#dataInput{
	margin-top:4vw;
}


/* for PC --------------------*/
@media screen and (min-width:767px) {

	#dataInput{
		margin-top:15px;
	}

}


/******************************

 Name List

 ******************************/
#listFrame{
	height:auto;
	min-height:86vw;
	overflow:hidden;
	margin-top:4vw;
}


#listSwitcher{
	display:block;
	position:relative;
	text-align:center;
}



#listSwitcher > label{
	display: inline-block;
	overflow: hidden;
	margin:0 1em;
	position:relative;
	border: 1px solid #333333;
	border-radius: 40px 5px / 0 40px;
	cursor:pointer;
}

#listSwitcher > label > input{
	display:none;
}

#listSwitcher > label > input + span{
	display: block;
	overflow: hidden;
	padding:0.25em 2em 0.25em 2em;
	background-color: #ffffff;
	position:relative;
	box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.25) inset;
}

#listSwitcher > label > input:checked + span{
	box-shadow:unset;
	background-color:#6060cc;
	color:#ffffff;
	padding:calc(0.25em + 2px) calc(2em - 2px) calc(0.25em - 2px) calc(2em + 2px);
}



#listFrame > .inputFld{
	display:block;
	overflow:hidden;
	position:relative;
}

#listInner{
	display:block;
	overflow-y:auto;
}

ul#nameList{
	display:block;
	overflow-y:auto;
	padding:2vw 0;
}

ul#nameList > li{
	display:block;
	position:relative;
	clear:both;
	border-bottom:1px dashed #9e9e9e
}

ul#nameList > li+li{
	/**/
}

ul#nameList > li > label{
	display:block;
	overflow:hidden;
	padding:0.25em 4vw;

	font-size:1.6rem;
	line-height:155%;
	cursor:pointer;
}

ul#nameList >li > label > input{
	display: none;
}
ul#nameList >li > label > span{
	display:inline-block;
	overflow:hidden;
}

ul#nameList >li > label > span[class ^='lDate']{
	float:right;
}

ul#nameList > li > label input:checked + span,
ul#nameList > li > label input:checked + span + span,
ul#nameList > li > label input:checked + span + span + span{
	color:#6060cc;
	font-weight:700;
}


.gList ul#nameList > li.pList,
.pList ul#nameList > li.gList{
	display:none;
}

.ad span.lDate_ja,
.ja span.lDate_ac{
	display:none!important;
}



/* for PC --------------------*/
@media screen and (min-width:767px) {

	#listFrame{
		height:auto;
		margin-top:15px;
	}

	ul#nameList{
		padding:0.5em 0;
	}

	ul#nameList > li > label{
		padding:0.25em 2em;
	}

}


/***********************************

 ナビゲーション

 ***********************************/
nav{
	display:block;
	/*overflow:hidden;*/
	width:100%;
	/*height:17vw;*/
	text-align:center;
	white-space:nowrap;

	position:fixed;
	bottom:4vw;
	left:0;
}

nav > *{
	vertical-align:middle;
	position:relative;
}



button[name$='Btn']{
	display:inline-block;
	position: relative;
	width:2em;
	height:auto;
	aspect-ratio:1/1;

	font-size:2.8rem;
	line-height:100%;
	text-align:center;

	background:unset;
	border: 2px solid #000000;
	border-radius:50%;
	position:relative;
	cursor:pointer;
}

button[name$='Btn']+button{
	margin-left:0.5em;
}

button[name$='Btn'] > span {
	position: relative;
}

button[name$='Btn']::before {
	content: "";
	display: block;
	width: 108%;
	height: 110%;

	position: absolute;
	top: -4px;
	left: -3px;

	border-radius:inherit;
	background-image: -webkit-repeating-linear-gradient(
		135deg,
		#9e9e9e,
		#9e9e9e 1px,
		transparent 2px,
		transparent 5px
	);
	background-image: repeating-linear-gradient(
		-45deg,
		#9e9e9e,
		#9e9e9e 1px,
		transparent 2px,
		transparent 5px
	);
	background-size: 7px 7px;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

button[name$='Btn']:active{
	border-color:#6060cc;
	color:#6060cc;
}



/* for PC --------------------*/
@media screen and (min-width:767px) {

	nav{
		bottom: 25px;
	}

}



/*-------------------------

 Edit Page

 -------------------------*/
#editPop{
	display:none;
	overflow:hidden;
	width: 100vw;
	height:100vh;
	background-color: rgba(0,0,0,0.75);

	position:fixed;
	top:0;
	left:0;
}



#popInner{
	display:block;
	overflow:hidden;
	width:min(92vw,480px);
	height:auto;

	-webkit-border-radius: 10px;
	border-radius: 10px;

	background-color:#e5e5e5;

	-webkit-box-shadow: 8px 8px 8px rgba(0,0,0,0.25);
	box-shadow: 8px 8px 8px rgba(0,0,0,0.25);

	position:absolute;
	top:60%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);

	/*opacity:0.0;*/
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}


#popInner.show{
	opacity:1.0;
	top:50%;
}

#popInner h2{
	display:block;
	overflow:hidden;
	padding:0.5em 0;
	font-size:1.8rem;
	font-weight:600;
	line-height:125%;
	text-align:center;
	background-color:#cccccc;
}

.modeApepnd #popInner h2 > span::before{
	content:"新規登録";
}

.modeEdit #popInner h2 > span::before{
	content:"情報編集";
}

.modeApepnd button[name='removeBtn'],
.modeApepnd button[name='updateBtn']{
	display:none;
}
.modeEdit button[name='addlistBtn']{
	display:none;
}


#popInner dl{
	display:block;
	overflow:hidden;
	padding:4vw 4vw;
}

#popInner dl > dt,
#popInner dl > dd{
	display:block;
	overflow:hidden;
	clear:both;
}

#popInner dl > dd{
	margin-top:2vw;
}
#popInner dl > dd + dt{
	margin-top:4vw;
}


#popInner dl > dt span.inputFld > select{
	width:10em;
}
#dateInput span.inputFld{
	display:inline-block;
}


#dateInput{
	/**/
}

#dateInput > span:first-child{
	display:block;
	margin-bottom:2vw;
}

#dateInput > span:nth-child(2){
	width:50%;
}
#dateInput > span:nth-child(n+3){
	width:23%;
}


#popNav{
	display:block;
	overflow:hidden;
	text-align:center;
	margin:4vw 0;
}



/* for PC --------------------*/
@media screen and (min-width:767px) {

	#popInner dl{
		padding:1em 2em;
	}

	#popInner dl > dd{
		margin-top:0.5em;
	}
	#popInner dl > dd + dt{
		margin-top:0.5em;
	}


	#dateInput > span:first-child{
		margin-bottom:0.75em;
	}

	#popNav{
		margin:1em 0 2em;
	}

}




/*-------------------------

 Edit Page

 -------------------------*/
#setUp{
	display:none;
	overflow:hidden;
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	/*background-color:rgba(255,255,255,0.9);*/
	background-color:#FFE694;
}

.config #setUp{
	display:block;
}


#setUpInner{
	display:block;
	overflow:hidden;
	padding:8vw 6vw;
	text-align:center;
}

#setUpInner h2{
	display:block;
	overflow:hidden;
	font-size:1.8rem;
	font-weight: 700;
}

#setUpInner dl{
	display:block;
	overflow:hidden;
	font-size:1.6rem;
	line-height:155%;
	text-align:left;
	margin:4vw auto 6vw;
	border-bottom:1px dotted #333333;
}


#setUpInner dl > dt,
#setUpInner dl > dd{
	display:block;
	overflow:hidden;
	padding:0.75em 0;
	float:left;
	border-top:1px dotted #333333;
}

#setUpInner dl > dt{
	width: 5em;
	clear:both;
}

#setUpInner dl > dd{
	width:calc(100% - 5em);
}




#setUpInner label{
	display:inline-block;
	overflow:hidden;
	cursor:pointer;
}

#setUpInner label + label{
	margin-left:1em;
}

#setUpInner input[type='radio'],
#setUpInner input[type='checkbox']{
	display:none;
}

#setUpInner input + [class^="icf-"]:before{
	content: "\ea53";
	font-size:2.0rem;
	margin-right:0.25em;
	color:#9e9e9e;
	vertical-align:middle;
	background-color:#e5e5e5;
}

#setUpInner input:checked + [class^="icf-"]:before{
	content: "\ea52";
	color:#6060cc;
}

#setUpInner label#fileImport{
	display:block;
}

#fileImport input{
	display:none;
}

/*#fileImport input + span{
	display:inline-block;
	padding:0.25em 1em;
	font-size:1.6rem;
	line-height:125%;
	background-color:#cccccc;
	border:1px solid #333333;
}
*/

#setUpInner button[name$='Data'],
#fileImport input + span{
	display:inline-block;
	width:100%;
	padding:0.25em 1em;
	font-size:1.6rem;
	line-height:125%;
	text-align:center;
	background-color:#cccccc;
	border:2px solid #9e9e9e;
	border-radius:5px;
}

/* for PC --------------------*/
@media screen and (min-width:767px) {


}