@charset "utf-8";

/*ボタン
---------------------------------------------------------------------------*/
/* ボタン共通部分
-------------------------------------------------------*/
#contents .button a,
#contents .btn_type_01 a,
#contents .btn_type_02 a {
	display: block;
	margin: 0 auto;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

#contents p.btn_about_service a,
#contents p.btn_user_guide a {
	color: initial;
}

#contents .button a:hover,
#contents .btn_type_01 a:hover,
#contents .btn_type_02 a:hover {
	color: #fff;
	text-decoration: none;
}

#contents p.btn_about_service a:hover,
#contents p.btn_user_guide a:hover {
	color: initial;
}

/* 高さが共通のボタン ********************/
#contents .btn_type_01 a {
	height: 80px;
	line-height: 80px;
}

/* お問い合わせ 
-------------------------------------------------------*/
#contents .btn_type_01 a {
	width: 430px;
	margin-top: 40px;
	border: solid 3px #325c66;
	border-radius: 10px;
	background: url(../images/icon_arrow_02.png) no-repeat center right 17px;
	background-size: 10px 16px;
	color: #325c66;
}

#contents .btn_type_01 a:hover {
	background: #325c66 url(../images/icon_arrow_02_on.png) no-repeat center right 17px;
	background-size: 10px 16px;
}

#contents .inquiry .btn_type_01 a {
	margin-top: 25px;
}

/* バナー
-------------------------------------------------------*/
#contents .ban_block{
	max-width: 500px;
    margin: 0 auto;
}

/* ラベルメニュー （行事予定/時間割/給食献立/連絡事項）
---------------------------------------------------------------------------*/
#contents .li_label {
	display: flex;
	width: 90%;
	margin: 0 auto;
}

#contents .li_label li {
	padding: 0.5em;
	color: #444;
	font-size: 3rem;
	font-weight: bold;
	width: 25%;
	box-sizing: border-box;
	margin: 5px 10px;
	border-left-style: solid;
	border-left-width: 15px;
}

#contents .li_label .gyouji {
	background: #f6f0ba;
	border-left-color: #ffaf58;
}

#contents .li_label .jikan {
	background: #e0d2f9;
	border-left-color: #7b4fca;
}

#contents .li_label .kyusyoku {
	background: #e5f3d5;
	border-left-color: #8bc34a;
}

#contents .li_label .renraku {
	background: #f8d3df;
	border-left-color: #f2719d;
}

/* ご利用方法
---------------------------------------------------------------------------*/
#contents section .li_register {
	letter-spacing: -0.4em;
}

#contents section .li_register li {
	display: inline-block;
	width: 30%;
	vertical-align: top;
}

#contents section .li_register li+li {
	margin-left: 3.31%;
}

#contents section .li_register dt {
	width: 41.66%;
	height: auto;
	margin-left: 27.66%;
}

#contents section .li_register dd {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 10px;
	padding-top: 350px;
	background: url(../images/register_img_01.png) no-repeat 0 0;
	background-size: 100% auto;
	letter-spacing: normal;
}

#contents section .li_register li:nth-child(2) dd,
.confirm #contents section .li_register li:nth-child(1) dd {
	background: url(../images/register_img_02.png) no-repeat 0 0;
	background-size: 100% auto;
}

#contents section .li_register li:nth-child(3) dd,
.confirm #contents section .li_register li:nth-child(2) dd {
	background: url(../images/register_img_03.png) no-repeat 0 0;
	background-size: 100% auto;
}

.confirm #contents section .li_register li:nth-child(3) dd {
	background: url(../images/register_img_04.png) no-repeat 0 0;
	background-size: 100% auto;
}

#contents section .li_register dd span {
	display: block;
	position: absolute;
	top: 10%;
	left: 0;
	width: 100%;
	font-size: 2.2rem;
	text-align: center;
	padding: 0 8px;
}

.confirm #contents section .li_register li:nth-child(3) dd span {
	position: absolute;
	top: 6%;
	left: 0;
	line-height: 1.29;
}

#contents section .li_register .btn_login {
	color: #0086be;
}

/*画面幅830px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:769px) and (max-width:830px) {


	/* ご利用方法
	-------------------------------------------------------*/
	#contents section .li_register dd span {
		font-size: 2rem;
	}

}

/* よくある質問
---------------------------------------------------------------------------*/
#contents dl.list_faq {
	max-width: 1024px;
	margin: 20px auto 0 auto;
	padding: 0 30px 24px 30px;
	border-bottom: solid 2px #eee;
}

#contents h2+dl.list_faq {
	padding-top: 24px;
	border-top: solid 2px #eee;
}

#contents dl.list_faq dt {
	padding: 0 0 0 50px;
	background: url(../images/icon_Q.png) no-repeat 0 top;
	font-size: 2.2rem;
	font-weight: bold;
}

#contents dl.list_faq dd {
	margin-top: 15px;
	padding: 6px 0 8px 50px;
	background: url(../images/icon_A.png) no-repeat 0 top;
	word-break: break-all;
}

#contents dl.list_faq dd p+p {
	margin-top: 1em;
}

#contents dl.list_faq dd a {
	color: #0086be;
}

/* テキストリンク
---------------------------------------------------------------------------*/
#contents .text_link_01 {
	margin-top: 20px;
	text-align: right;
}

#contents #faq .text_link_01, #contents #case .text_link_01 {
	max-width: 1024px;
	margin: 20px auto 0 auto;
}

#contents .text_link_01 a {
	padding-right: 22px;
	background: url(../images/icon_arrow_01.png) no-repeat right center;
	background-size: 10px 16px;
	color: #0086be;
}

/* 線
---------------------------------------------------------------------------*/
#contents .contents_separator {
	margin: 2px;
	border-color: #325c66AA;
	border-style: solid;
	border-width: 1.5px 0 0 0;
}

/*画面幅768px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:768px) {

	/*ボタン
	---------------------------------------------------------------------------*/
	/* ボタン共通部分
	-------------------------------------------------------*/
	#contents .btn_type_01 a {
		font-size: 1.4rem;
	}

	/* 高さが共通のボタン ********************/
	#contents .btn_type_01 a {
		height: 60px;
		line-height: 60px;
	}

	/* ご利用手順ガイド
	-------------------------------------------------------*/
	#contents .btn_user_guide a {
		width: 89.34%;
		margin-top: 40px;
	}

	/* お問い合わせ 
	-------------------------------------------------------*/
	#contents .btn_type_01 a {
		width: 89.34%;
		margin-top: 40px;
		border: solid 2px #325c66;
		border-radius: 10px;
		background: url(../images/icon_arrow_02.png) no-repeat center right 20px;
		background-size: 8px 13px;
		color: #325c66;
	}

	#contents .inquiry .btn_type_01 a {
		width: 100%;
		margin-top: 20px;
	}

	/* バナー
	-------------------------------------------------------*/
	#contents .ban_block {
		max-width: 90%;
	}

	/* ラベルメニュー （行事予定/時間割/給食献立/連絡事項）
	-------------------------------------------------------*/
	#contents .li_label {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;
		width: 100%;
	}

	#contents .li_label li {
		width: 46%;
		box-sizing: border-box;
		margin: 5px 5px;
		font-size: 2rem;
	}

	/* ご利用方法
	-------------------------------------------------------*/
	#contents section .li_register {
		letter-spacing: noral;
	}

	#contents section .li_register li {
		display: block;
		width: 100%;
	}

	#contents section .li_register li+li {
		margin: 5.88% 0 0 0;
	}

	#contents section .li_register dt {
		width: 23.13%;
		margin: 0 auto;
	}

	#contents section .li_register dd {
		margin-top: 1.79%;
		padding-top: 38.95%;
		background: url(../images/register_img_01_s.png) no-repeat 0 0;
		background-size: 100% auto;
	}

	#contents section .li_register li:nth-child(2) dd,
	.confirm #contents section .li_register li:nth-child(1) dd {
		padding-top: 35.82%;
		background: url(../images/register_img_02_s.png) no-repeat 0 0;
		background-size: 100% auto;
	}

	#contents section .li_register li:nth-child(3) dd,
	.confirm #contents section .li_register li:nth-child(2) dd {
		padding-top: 35.82%;
		background: url(../images/register_img_03_s.png) no-repeat 0 0;
		background-size: 100% auto;
	}

	.confirm #contents section .li_register li:nth-child(3) dd {
		padding-top: 35.82%;
		background: url(../images/register_img_04_s.png) no-repeat 0 0;
		background-size: 100% auto;
	}

	#contents section .li_register dd span {
		width: 60%;
		top: 28%;
		left: 3%;
		font-size: 1.6rem;
		text-align: left;
	}

	#contents section .li_register li:nth-child(2) dd span,
	.confirm #contents section .li_register li:nth-child(1) dd span {
		top: 28%;
		left: 40%;
		text-align: left;
	}

	#contents section .li_register li:nth-child(3) dd span,
	.confirm #contents section .li_register li:nth-child(2) dd span {
		top: 28%;
		left: 3%;
		text-align: left;
	}

	.confirm #contents section .li_register li:nth-child(3) dd span {
		top: 34.16%;
		left: 42.08%;
		text-align: left;
	}

	/* よくある質問
  ---------------------------------------------------------------------------*/
	#contents dl.list_faq {
		margin: 15px 0 0 0;
		padding: 0 2.98% 15px 2.98%;
		border-bottom: solid 2px #eee;
	}

	#contents h2+dl.list_faq {
		padding-top: 24px;
		border-top: solid 2px #eee;
	}

	#contents dl.list_faq dt {
		padding: 3px 0 5px 38px;
		background: url(../images/icon_Q_s.png) no-repeat 0 top;
		background-size: 27px 27px;
		font-size: 1.7rem;
		font-weight: bold;
	}

	#contents dl.list_faq dd {
		margin-top: 15px;
		padding: 0 0 8px 38px;
		background: url(../images/icon_A_s.png) no-repeat 0 top;
		background-size: 27px 27px;
		word-break: break-all;
	}

	/*テキストリンク
  ---------------------------------------------------------------------------*/
	#contents .text_link_01 {
		margin-top: 10px;
		text-align: right;
	}

	#contents #faq .text_link_01, #contents #case .text_link_01 {
		width: 89.4%;
		margin: 10px auto 0 auto;
	}

	#contents .text_link_01 a {
		padding-right: 18px;
		background: url(../images/icon_arrow_01.png) no-repeat right center;
		background-size: 7px 12px;
		font-size: 1.4rem;
	}
}