@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : corner_index.css
Description : コーナーTOPページCSS
===================================================================== */

#index .normal_program,
#index .special_program {
	background-color: #FFF;
	padding-bottom: 9.375%;
}

#index .program_1st {
	width: 50%;
	float: left;
}

#index .program_2nd {
	width: 50%;
	margin-left: 50%;
}

#index .program_1st .title,
#index .program_2nd .title {
	width: 100%;
	height: 40px;
	font-size: 18px;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	margin-bottom: 9.375%;
}

#index .program_1st .title {
	background: #a0d4f2;
	background: linear-gradient( #afedf1 0%, #a0d4f2 100%);
	color: #11afdd;
}

#index .program_2nd .title {
	background: #e8b2e0;
	background: linear-gradient( #f6d4e4 0%, #e8b2e0 100%);
	color: #d13083;
}

#index .program_1st .time,
#index .program_2nd .time {
	font-size: 18px;
	line-height: 20px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 3.125%;
}

#index .program_1st .time {
	color: #11afdd;
}

#index .program_2nd .time {
	color: #d13083;
}

#index .program_1st .time::before,
#index .program_2nd .time::before {
	content: "";
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: top;
	padding-right: 10px;
}

#index .program_1st .time::before {
	background: url(../img/common/img_oatime1_icon.png ) no-repeat left center;
	background-size: auto 100%;
}

#index .program_2nd .time::before {
	background: url(../img/common/img_oatime2_icon.png) no-repeat left center;
	background-size: auto 100%;
}

#index .program_1st .attention {
	text-align: center;
	font-size: 16px;
	line-height: 1.4;
}

#index .corner_list {
	width: 87.5%;
	letter-spacing: -.40em;
	text-align: left;
	padding-top: 6.25%;
	margin-left: auto;
	margin-right: auto;
	clear: both;
}

#index .corner_list h2 {
	position: relative;
	letter-spacing: normal;
	margin-bottom: 3.5715%;
}

#index .corner_list h2 div {
	width: 40px;
	height: 36px;
	font-size: 16px;
	line-height: 36px;
	text-align: center;
	color: #6c2363;
	font-weight: bold;
	background: url(../img/corner/bg_index_day.png) no-repeat center center;
	background-size: 100% auto;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	z-index: 10;
}

#index .corner_list h2::after {
	content: "";
	width: 100%;
	height: 0;
	border-bottom: 1px dotted #000000;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
}

#index .corner_list .corner {
	width: 42.8572%;
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
	text-align: left;
}

#index .corner_list .corner li:not(:first-child) {
	margin-top: 10.7143%;
}

#index .corner_list .corner:nth-of-type(2n-1) {
	padding-right: 14.2856%;
}

#index .corner_list .corner p {
	text-decoration: none;
	color: #333333;
	font-size: 16px;
	line-height: 1.5em;
}

#index .corner_list .corner .corner_img {
	width: 100%;
	border: 1px solid #818181;
	margin-bottom: 4.1667%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#index #corner_special.corner_list {
	width: 100%;
	letter-spacing: -.40em;
	text-align: left;
	margin-top: 10.9375%;
	margin-left: auto;
	margin-right: auto;
	clear: both;
}

#index #corner_special.corner_list dt {
	position: relative;
	letter-spacing: normal;
	background: linear-gradient( #894081 0%, #4e1445 100%);
	margin-bottom: 3.5715%;
}

#index #corner_special.corner_list dt div {
	width: 100%;
	height: 40px;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	z-index: 10;
}

#index #corner_special.corner_list dd {
	width: 37.5%;
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
	text-align: left;
	padding-left: 6.25%;
	padding-right: 6.25%;
	margin-top: 6.25%;
}

#index #corner_special.corner_list dd p {
	text-decoration: none;
	color: #333333;
	font-size: 16px;
	line-height: 1.5em;
}

#index #corner_special.corner_list dd .corner_img {
	width: 100%;
	border: 1px solid #818181;
	margin-bottom: 4.1667%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

@media screen and (min-width:700px){
	#index .normal_program,
	#index .special_program {
		padding-bottom: 40px;
	}

	#index .program_1st .title,
	#index .program_2nd .title {
		height: 55px;
		font-size: 20px;
		line-height: 55px;
		margin-bottom: 20px;
	}

	#index .program_1st .time,
	#index .program_2nd .time {
		font-size: 18px;
		margin-bottom: 15px;
	}

	#index .program_1st .attention {
		font-size: 18px;
	}

	#index .corner_list {
		width: 88.1579%;
		padding-top: 20px;
	}

	#index .corner_list h2 {
		margin-bottom: 1.4926%;
	}

	#index .corner_list h2 div {
		width: 72px;
		height: 64px;
		font-size: 20px;
		line-height: 64px;
	}

	#index .corner_list .corner {
		width: 43.2836%;
	}

	#index .corner_list .corner:nth-of-type(n+3) {
		margin-top: 20px;
	}

	#index .corner_list .corner:nth-of-type(2n-1) {
		padding-right: 13.4327%;
	}

	#index .corner_list .corner .corner_img {
		margin-bottom: 15px;
	}

	#index #corner_special.corner_list {
		margin-top: 50px;
	}

	#index #corner_special.corner_list dt {
		margin-bottom: 0;
	}

	#index #corner_special.corner_list dt div {
		/*width: 72px;*/
		height: 55px;
		line-height: 55px;
		font-size: 18px;
	}

	#index #corner_special.corner_list dt::after {
		content: "";
		display: none;
	}

	#index #corner_special.corner_list dd {
		width: 38.1579%;
		padding-left: 5.921%;
		padding-right: 5.921%;
		margin-top: 30px;
	}
}