:root {
	--mobile-max-width: 600px;
	--page-header-bgColor: bisque;
	--font-size-ss: 0.6rem;
	--font-size-s: 0.8rem; /*1.1rem;*/
	--font-size-m: 1rem; /*1.5rem;*/
	--font-size-l: 1.2rem; /*2rem;*/
	--font-size-ll: 1.5rem;
	--common-title-bgColor: gold;
	--table-th-bgColor: darkslategrey;
	--table-th-color: white;
	--table-border-color: lightgray;
	--button-bg-color: #eeeeee;
	--button-border-color: lightgray;
	--maintenance-hover-color: #6699FF;
	--maintenance-background-color: #f5f5f5;

	/*----- 延長せんせいから流用 -----*/
	--attach-icon: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210.555%22%20height%3D%2219.88%22%20viewBox%3D%220%200%2010.555%2019.88%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_21%22%20data-name%3D%22%E3%83%91%E3%82%B9%2021%22%20d%3D%22M356.108-123.909a5.284%2C5.284%2C0%2C0%2C1-5.277-5.278v-10.8a3.806%2C3.806%2C0%2C0%2C1%2C3.8-3.8%2C3.807%2C3.807%2C0%2C0%2C1%2C3.8%2C3.8v9.766a2.286%2C2.286%2C0%2C0%2C1-2.284%2C2.283%2C2.285%2C2.285%2C0%2C0%2C1-2.283-2.283v-8.835h1.5v8.835a.784.784%2C0%2C0%2C0%2C.783.783.784.784%2C0%2C0%2C0%2C.784-.783v-9.766a2.305%2C2.305%2C0%2C0%2C0-2.3-2.3%2C2.3%2C2.3%2C0%2C0%2C0-2.3%2C2.3v10.8a3.782%2C3.782%2C0%2C0%2C0%2C3.777%2C3.778%2C3.783%2C3.783%2C0%2C0%2C0%2C3.778-3.778v-9.869h1.5v9.869A5.284%2C5.284%2C0%2C0%2C1%2C356.108-123.909Z%22%20transform%3D%22translate(-350.831%20143.789)%22%20fill%3D%22%2316202e%22%2F%3E%3C%2Fsvg%3E');

	/* Google Font Icon(変数名の命名規則：iconName_size_color_fileType)*/
	--download_24dp_5F6368_svg: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNUY2MzY4Ij48cGF0aCBkPSJNNDgwLTMyMCAyODAtNTIwbDU2LTU4IDEwNCAxMDR2LTMyNmg4MHYzMjZsMTA0LTEwNCA1NiA1OC0yMDAgMjAwWk0yNDAtMTYwcS0zMyAwLTU2LjUtMjMuNVQxNjAtMjQwdi0xMjBoODB2MTIwaDQ4MHYtMTIwaDgwdjEyMHEwIDMzLTIzLjUgNTYuNVQ3MjAtMTYwSDI0MFoiLz48L3N2Zz4=);

	/*----- ヘッダ用 -----*/
	--header-height: 3rem; /*4rem;*/
	--header-bg-color: #FFEB2E;
	--header-text-color: #555555;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

html {
	/* font-size: 62.5%; */
	box-sizing: border-box;
}

body {	
	margin: 0;
	padding: 0;
	color: #16202E;
}

button, select, input {
	color: #333333;	/* iPad safariで色が変わるため指定 */
}

a:visited{
	color: #0000EE; /* 訪問済でも色を変えない(非訪問時と同じ色を指定) */
}

#hgs-base-div {
	width: 100%;
	height: 100%;
	/* max-width: var(--base-max-width);
	margin: 0 auto; 中央に配置 */
}

#hgs-header-div {
	/* position: relative; */
	position: sticky; /* stickyでも子要素のposition:absoluteが正しく動作する */
	top: 0;
	width: 100%;
	height: var(--header-height);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--header-bg-color);
	color: var(--header-text-color);
	font-size: var(--font-size-l);
	z-index: 100;
}

#hgs-body-div {
	display: flex;
	flex-direction: column;
	height: calc(100% - var(--header-height));
}

.pCommon-mobile-baseDiv {
	max-width: var(--mobile-max-width);
	margin: 0 auto; /* 中央に配置 */
}

.pCommon-applyTtitleDiv {
	text-align: center;
	font-size: var(--font-size-l);
	font-weight: bold;
/*	background-color: var(--page-header-bgColor); */
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.pCommon-fixedTitle-div {
	display: flex;
	position: sticky;
	top: 0;
	text-align: center;
	font-size: var(--font-size-l);
	font-weight: bold;
	padding-top: 1rem;
	padding-bottom: 1rem;
/*	background-color: var(--common-title-bgColor); */
	background-color: white;
}

.pCommon-explain-div {
	padding: 1rem;
	font-size: var(--font-size-m);
}

.pCommon_titleDiv {
	background-color: #F1F1F1;
	font-size: var(--font-size-l);
	padding: 0.4rem;
	font-weight: bold;
	text-align: center;
}

.pCommon-input-div {
	padding: 0.6rem;
}
.pCommon-inputHZ-div { /* 水平方向 */
	padding: 0.6rem;
	display: flex;
}

.cCommon-label,
.pCommon-input-div label,
.pCommon-inputHZ-div label {
	font-size: var(--font-size-m);
}

.pCommon-input,
.pCommon-select,
.pCommon-textarea,
.pCommon-input-div input,
.pCommon-input-div select,
.pCommon-inputHZ-div input,
.pCommon-inputHZ-div select {
	vertical-align: middle;
	min-height: 2.2rem;
	border-radius: 5px;
	border: 1px solid lightgray;
	background-color: white;
	font-size: var(--font-size-m);
}

.pCommon-input-div input,
.pCommon-input-div select {
	width: 100%;
}
.pCommon-inputHZ-div input,
.pCommon-inputHZ-div select {
	flex: auto;
	margin-left: 1rem;
}

.pCommon-input-div input:focus,
.pCommon-input-div select:focus,
.pCommon-inputHZ-div input:focus,
.pCommon-inputHZ-div select:focus {
	box-shadow: 0 0 7px #3498db;
	border: 1px solid #3498db;
}

.pCommon-required-sign {
	font-size: var(--font-size-s);
	color: red;
}

.pCommon-button {
	border-radius: 5px;
	border: solid 1px lightgrey;
	font-size: var(--font-size-m);
	background-color: #eeeeee;
	min-height: 2.2rem; /*3.5rem;*/
	padding-left: 1rem;
	padding-right: 1rem;
}

.pCommon-submit-div {
	padding: 2rem;
	text-align: center;
}
.pCommon-submit-div button{
	border-radius: 5px;
	border: 1px solid lightgray;
	font-size: var(--font-size-l);
	background-color: #eeeeee;
	padding: 0.5rem 2rem 0.5rem 2rem;
}

.pCommon-errorDiv {
	background-color: pink;
	color: red;
}

.pCommon-table {
	border: none;
	border-collapse:collapse;
	text-align: center;
}

.pCommon-table thead tr th{
	background-color: var(--table-th-bgColor);
	color: var(--table-th-color);
	border-right: solid 1px var(--table-border-color);
	border-bottom: solid 1px var(--table-border-color);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.pCommon-table tbody tr td{
	border-right: solid 1px var(--table-border-color);
	border-bottom: solid 1px var(--table-border-color);
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.pCommon-table thead tr:nth-child(1) th{
	border-top: solid 1px var(--table-border-color);
}

.pCommon-table thead tr th:nth-child(1){
	background-color: var(--table-th-bgColor);
	color: var(--table-th-color);
	border-left: solid 1px var(--table-border-color);
}

.pCommon-table tbody tr td:nth-child(1){
	border-left: solid 1px var(--table-border-color);
}

/****************************
 *  名前選択
 ****************************/
.pCommon_childCheckBaseDiv {
	display: flex;
	flex-wrap: wrap;
	padding-top: 0.5rem 
}
.pCommon_childCheckDiv {
	min-width: 50%;
	max-width: 100%;
	padding: 0 0.5rem 0.5rem 0.5rem;
	font-size: var(--font-size-l);
	display: flex;
	align-items: center;
}
.pCommon_childCheckDiv input{
	width: var(--font-size-l);
	height: var(--font-size-l);
}

.multiChildRadio:checked + label {
	/* 複数児童がいる場合はクラスにmultiChildRadioを追加し、チェックした児童名の背景色を変更します */
	background-color: aqua;
}

/****************************
 * 兄弟全員スイッチボタン
 ****************************/
.pCommon_allChildrenBoxBaseDiv {
	padding: 0.5rem;
	display: flex;
	justify-content: center;
}

.switchArea {
	line-height    : 36px;                /* 1行の高さ          */
	letter-spacing : 0;                   /* 文字間             */
	text-align     : center;              /* 文字位置は中央     */
	font-size      : 15px;                /* 文字サイズ         */
	position       : relative;            /* 親要素が基点       */
	width          : 150px;               /* ボタンの横幅       */
  /*  background     : #fff; */               /* デフォルト背景色   */
}

 /* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
	display        : none;            /* チェックボックス非表示 */
}

 /* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
	display        : block;               /* ボックス要素に変更 */
	box-sizing     : border-box;          /* 枠線を含んだサイズ */
	height         : 36px;                /* ボタンの高さ       */
	border         : 2px solid #999999;   /* 未選択タブのの枠線 */
	border-radius  : 18px;                /* 角丸               */
	background     : #fff;              /* デフォルト背景色   */
}

 /* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked +label {
	border-color   : #007fff;             /* 選択タブの枠線     */
}

 /* === 表示する文字（標準） ================================ */
.switchArea label span:after{
	content        : "利用しない";         /* 表示する文字       */
	padding        : 0 0 0 21px;          /* 表示する位置       */
	color          : #999999;           /* 文字色             */
}

 /* === 表示する文字（ONのとき） ============================ */
.switchArea  input[type="checkbox"]:checked + label span:after{
	content        : "利用する";           /* 表示する文字       */
	padding        : 0 21px 0 0;          /* 表示する位置       */
	color          : #007fff;           /* 文字色             */
}

 /* === 丸部分のSTYLE（標準） =============================== */
.switchArea #swImg {
	position       : absolute;            /* 親要素からの相対位置*/
	width          : 28px;                /* 丸の横幅           */
	height         : 28px;                /* 丸の高さ           */
	background     : #999999;           /* カーソルタブの背景 */
	top            : 4px;                 /* 親要素からの位置   */
	left           : 4px;                 /* 親要素からの位置   */
	border-radius  : 14px;                /* 角丸               */
	transition     : .2s;                 /* 滑らか変化         */
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ #swImg {
/*  transform      : translateX(136px);*/    /* 丸も右へ移動       */
	transform      : translateX(114px);    /* 丸も右へ移動       */
	background     : #007fff;            /* カーソルタブの背景 */
}

#allChildrenBox label span:after{
	content        : "兄弟全員";           /* 表示する文字       */
	padding        : 0 0 0 21px;          /* 表示する位置       */
	color          : #999999;           /* 文字色             */
}

#allChildrenBox  input[type="checkbox"]:checked + label span:after{
	content        : "兄弟全員";          /* 表示する文字       */
	padding        : 0 21px 0 0;         /* 表示する位置       */
	color          : #007fff;          /* 文字色             */
}