
/*=================================================
 * CSS for PC
 * ================================================= */

body{
	padding-top: 0;
	background: url(https://www.eye-r.com/wp-content/themes/child/image/issue_bg.jpg) no-repeat top center;
	background-size: cover;
}

.h_logo h1 img{
	filter: invert(100%) brightness(200%);
}
.fixed .h_logo h1 img{
	filter: invert(0%) brightness(100%);
}
body#index_body #rnw_header.fixed{	background-color: rgba(255, 255, 255, 0.7);}

#rnw_header #header_menu a em,
#rnw_header #header_menu button em{
	-webkit-transition	: 0.2s ease-in-out;
	-moz-transition	: 0.2s ease-in-out;
	-o-transition	: 0.2s ease-in-out;
	transition		: 0.2s ease-in-out;
	color: #fff;
}
#rnw_header.fixed #header_menu a em,
#rnw_header.fixed #header_menu button em{
	color: #000;
}

#topmv{
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 1600 / 900;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}
#topmv video{
	width: 100%;
	height: auto;
	
}
#topmv p{
	width: 100%;
	text-align: center;
	position: absolute;
	top: calc(50% - 70px);
	left: 0;
}
#topmv p img{
	width: 550px;
}


/** search **/

#search{
	padding: 50px 0;
	background: #fff;
}
.search_in{
	max-width: 580px;
	margin: 0 auto;
}
.search_top{
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	margin: 0 0 0 0;
	padding: 0 0;
}
.search_top h3{
	position: relative;
	width: 105px;
	font-size: 18px;
	font-weight: normal;
	line-height: 40px;
	color: var(--color-1);
}
.search_top h3 span{
	position: relative;
	top: 4px;
	font-size: 22px;
	margin-right: 2px;
}
.search_top div{
	width: calc(100% - 105px);
}
.search_top input[type="text"],
.search_top input[type="email"],
.search_top input[type="tel"]{
	width: 100%;
	padding			: 7px 7px;
	font-size		: 16px;
	font-family		: Meiryo,'Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif;
	border: 1px solid #ccc;
	border-radius	: 3px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.search_top input::placeholder,
.search_top textarea::placeholder{	color: #ccc;}
.search_top input:-ms-input-placeholder,
.search_top textarea:-ms-input-placeholder{	color: #ccc;}
.search_top input::-ms-input-placeholder,
.search_top textarea::-ms-input-placeholder{	color: #ccc;}
.zero_p{
	font-size: 15px;
	line-height: 20px;
	text-align: center;
	padding: 50px 0;
}
.search_top + .list_common{
	margin-top: 20px;
}


/** new_list **/

#new_list{
	padding: 50px 0;
}
#new_list .new_list_in{
	width: 100%;
	max-width: 1140px;
	margin: 0 auto 50px auto;
}
#new_list .new_list_in:last-of-type{	margin-bottom: 0;}
#new_list .list_common .cont .icon+a{
	display: -webkit-box;
}


/** plan **/

#plan{
	text-align: center;
	padding: 50px 0;
	background: #fff;
}
#plan h3{
	font-size: 30px;
	line-height: 1.2;
	color: var(--color-1);
	margin: 0 0 50px 0;
}
#plan .plan_p{
	font-size: 13px;
	line-height: 20px;
	margin: 0 0 30px 0;
}

/** pbox **/

.pbox{
	width: 1000px;
	margin: 0 auto;
	padding: 0 0 30px 0;
}
.pbox table{
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 8px 0;
	margin: 0;
}
.pbox tr{
	vertical-align: middle;
}
.pbox tr:nth-of-type(even) th,
.pbox tr:nth-of-type(even) td{	background: #f5f5f5;}
.pbox tr h4{
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	height: 40px;
	line-height: 1.4;
	text-align: center;
	margin: 0 0 0 0;
}
.pbox tr h4 em{
	font-weight: normal;
	font-size: 20px;
	font-style: normal;
}
.pbox tr h4 span{
	font-size: 12px;
	color: #333;
}
.pbox tr h4 br{
	display: none;
}
.pbox tr div{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 34px;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	background: rgba(255,255,255,0.7);
	border-radius: 40px;
}
.pbox th{
	vertical-align: middle;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.2;
	padding: 15px 15px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.pbox td{
	vertical-align: middle;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	padding: 15px 15px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.pbox td em{
	font-size: 24px;
	font-style: normal;
	padding: 0 2px;
}
.pbox td.no{
	font-size: 24px;
	color: #bdbdbd;
}
.pbox td span{
	display: inline-block;
	font-size: 10px;
	line-height: 12px;
	color: #aaa;
}
.pbox td.c1,
.pbox td.c2,
.pbox td.c3{
	color: #fff;
	border-bottom: 8px solid #fff;
}
.pbox td.c1{	background: linear-gradient(135deg, #83cef2 0%,#5b9df2 100%);}
.pbox td.c2{	background: linear-gradient(135deg, #5b9df2 0%,#3269d2 100%);}
.pbox td.c3{	background: linear-gradient(135deg, #3269d2 0%,#154085 100%);}

.boxtxt{
	width: 1000px;
	margin: 0 auto 50px auto;
	padding: 0 8px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.boxtxt p{
	position: relative;
	font-size: 10px;
	line-height: 1.4;
	text-align: left;
	margin: 0 0 3px 0;
	padding: 0 0 0 12px;
}
.boxtxt p:last-of-type{	margin-bottom: 0;}
.boxtxt p span{
	color: #ff0000;
	position: absolute;
	top: 0;
	left: 0;
}


/** list **/

#list{
	display: flex;
	justify-content: center;
	padding: 50px 0;
}
.list_in{
	width: 545px;
	margin: 0 25px;
}

#list .list_common .name:only-child{
	width: 100%;
	font-size: 16px;
	line-height: 20px;
	padding: 10px 15px;
}

#list .list_common .name.list_common_btm{
	text-align: center;

}
#list .list_common .name.list_common_btm a,
#list .list_common .name.list_common_btm a:hover{	color: #000;}



/*=================================================
 * CSS for SP
 * ================================================= */

@media (max-width: 750px) {
	body{	padding-top: 0;}
	.h_logo h1 img,
	#header_menu img{
		filter: invert(100%) brightness(200%);
	}
	.fixed .h_logo h1 img,
	.fixed #header_menu img{
		filter: invert(0%) brightness(100%);
	}


	#topmv{
		height: 70vh;
		aspect-ratio: auto;
	}
	#topmv video{
		width: auto;
		height: 100vh;
	}
	#topmv p{
		width: 100%;
		text-align: center;
		position: absolute;
		top: calc(60% - 40px);
		left: 0;
	}
	#topmv p img{
		width: auto;
		height: 100px;
	}


	/** search **/
	#search{
		padding: 15px 15px;
	}
	.search_in{
		margin: 0;
	}
	.search_top{
		margin: 0 0 0 0;
	}
	.search_top h3{
		position: relative;
		width: 95px;
		font-size: 16px;
		line-height: 40px;
		color: var(--color-1);
	}
	.search_top h3 span{
		position: relative;
		top: 4px;
		font-size: 20px;
		margin-right: 1px;
	}
	.search_top div{
		width: calc(100% - 95px);
	}
	.search_top + .list_common{
		margin-top: 15px;
	}



	/** new_list **/
	#new_list{
		padding: 15px 15px;
	}
	#new_list .new_list_in{
		margin: 0 0 15px 0;
	}
	#new_list .new_list_in:last-of-type{	margin-bottom: 0;}
	#new_list .list_common dl{
		display: flex;
		flex-direction: column-reverse;
	}
	#new_list .list_common .name+.cont{
		padding: 10px 10px 5px 10px;
	}
	#new_list .list_common .name {
		padding-top: 0px;
	}
	#new_list .list_common .name+.cont .icon {
		top: 10px;
	}

	/** plan **/
	#plan{
		padding: 30px 0;
	}
	#plan h3{
		font-size: 22px;
		line-height: 1.2;
		color: var(--color-1);
		margin: 0 0 25px 0;
	}
	#plan .plan_p{
		font-size: 13px;
		line-height: 20px;
		margin: 0 0 30px 0;
		padding: 0 15px;
	}
	.pbox{
		width: 100%;
		margin: 0;
		padding: 0 0 15px 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.pbox::-webkit-scrollbar{	display: none;}
	.pbox table{
		width: 100%;
		min-width: 375px;
		border-spacing: 3px 0;
	}
	.pbox tr h4{
		height: auto;
		line-height: 1.3;
		text-align: center;
		margin: 0 0 0 0;
	}
	.pbox tr h4 em{
		font-size: 13px;
	}
	.pbox tr h4 span{
		font-size: 10px;
	}
	.pbox tr h4 br{
		display: inline;
	}
	.pbox tr div{
		height: 24px;
		font-size: 8px;
		line-height: 1.2;
		text-align: center;
	}
	.pbox th{
		position: sticky;
		left: 0;
		z-index: 2;
		width: 100px;
		font-size: 11px;
		line-height: 1.2;
		padding: 10px 0 10px 10px;
		background: rgba(255,255,255,0.9);
		box-shadow: 3px 0 0 rgba(255,255,255,0.9);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.pbox td{
		font-size: 11px;
		line-height: 1.2;
		text-align: center;
		padding: 10px 0;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.pbox td em{	font-size: 15px;}
	.pbox td.no{
		font-size: 12px;
		color: #bdbdbd;
	}
	.pbox td span{
		display: inline-block;
		font-size: 10px;
		line-height: 12px;
		color: #bdbdbd;
	}
	.pbox td.c1,
	.pbox td.c2,
	.pbox td.c3,
	.pbox td.c4{
		border-bottom: 3px solid #fff;
	}
	.pbox tr:last-of-type th,
	.pbox tr:last-of-type td{	border-bottom: 3px solid #f5f5f5;}

	.boxtxt{
		width: auto;
		margin: 0 0 30px 0;
		padding: 0 15px;
	}
	.boxtxt p{
	}
	.boxtxt p:last-of-type{	margin-bottom: 0;}
	.boxtxt p span{
		color: #ff0000;
		position: absolute;
		top: 0;
		left: 0;
	}


	/** list **/
	#list{
		display: block;
		padding: 15px 15px;
	}
	.list_in{
		width: auto;
		margin: 0 0 15px 0;
	}
	.list_in:last-of-type{	margin-bottom: 0;}

	#list .list_common .name:only-child{
		font-size: 14px;
		line-height: 20px;
		padding: 10px;
	}



}