@charset "UTF-8";
/*
	Setting CSS
-----------------------------------------------------------------------------------------------*/
@media print, screen and (min-width:812px){
	/* iPad背景切れ対策 */
	body{
		min-width: 1200px;
	}
	/* tel pcのみ無効 */
	a[href^="tel:"]{
		pointer-events: none;
	}
}
/* 表示切替 */
.switch{
	visibility: hidden;
}
.sp{
	display: none;
}
/*
	common
-----------------------------------------------------------------------------------------------*/
:root{
	/* color */
	--orange:#ff9833;
	--blue: #008cdc;
	--blue-rgb: 0, 85, 125;
	/* font-weight */
	--light: 100;
	--regular: 400;
	--medium: 500;
	--bold: 700;
	--black: 900;
	/* width */
	--maw: 1050px;
}
#wrapper > *{
	font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: 1.6rem;
	font-weight: var(--regular);
}
#wrapper a{
	text-decoration:none;
	transition: all 0.3s;
}
#wrapper a:hover{
	text-decoration:none;
}
/* box
============================== */
.ctsArea{
	max-width: var(--maw);
	margin: 0 auto;
	padding: 115px 30px;
	position: relative;
}
/* flex
============================== */
[class$="__flex"]{
	display: flex;
}
/* target="_blank"
============================== */
a[target="_blank"] span{
	background: url(/eye-portal/assets/img/link_icon02svg) no-repeat right center;
	background-size: 13px;
	display: inline-block;
	padding-right: 16px;
}
/* button-arrow
============================== */
.button_area{
	text-align: center;
	max-width: 400px;
	margin: 0 auto;
}
.button_area_n{
	text-align: center;
	margin: 0 auto;
}
a.button-arrow{
	align-items: center;
	justify-content: center;
	color: #FFF;
	background: var(--orange);
	display: inline-flex;
	font-size: 2.0rem;
	border-radius: 50px;
	font-weight: var(--medium);
	height: 70px;
	margin: 12px 30px 0 0;
	min-width: 345px;
	padding: 0 25px;
	position: relative;
	box-shadow: 3px 3px 0px 0px rgba(0, 140, 220, 0.2);
}
a.button-arrow_n{
	align-items: center;
	justify-content: center;
	color: #FFF;
	background: var(--orange);
	display: inline-flex;
	font-size: 1.8rem;
	border-radius: 50px;
	font-weight: var(--medium);
	height: 60px;
	margin: 20px 20px 0 30px;
	min-width: 300px;
	padding: 0 25px;
	position: relative;
	box-shadow: 3px 3px 0px 0px rgba(0, 140, 220, 0.2);
}
.button-arrow_n[target="_blank"]::after {
    font-family: "Font Awesome 6 Free";
    content: "\f08e";
    font-weight: 900;
    margin: 0 0.25rem;
}

.button-arrow::before,
.button-arrow::after{
	background: #FFF;
	content: '';
	height: 1px;
	position: absolute;
	right: 20px;
	transition: right .3s;
}
.button-arrow::before{
	top: 53%;
	width: 25px;
}
.button-arrow::after{
	transform: rotate(45deg);
	width: 7px;
}
/* hover */
.button-arrow:hover::before,
.button-arrow:hover::after{
	right: 15px;
}
@media screen and (max-width:812px){
	img{
		width:100%;
	}
	/* p{
		line-height: 150%;
		font-size: 1.6rem;
	} */
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
	br.sp{
		display:inline-block;
	}
	/*
		common
	-----------------------------------------------------------------------------------------------*/
	:root{
		--maw: 100%;
	}
	/* box
	============================== */
	.ctsArea{
		padding: 70px 15px;
	}
	/* flex
	============================== */
	[class$="__flex"]{
		display: flex;
	}
	/* target="_blank"
	============================== */
	a[target="_blank"] span{
		background: url(/eye-portal/assets/img/link_icon02svg) no-repeat right center;
		background-size: 13px;
		display: inline-block;
		padding-right: 16px;
	}
	/* button-arrow
	============================== */
	.button_area{
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
		width: 100%;
		padding: 0 20px;
	}
	.button_area_n{
		flex-flow: column;
		text-align: center;
		margin: 0 auto;
				padding: 0 20px;
	}
	a.button-arrow{
		font-size: 1.7rem;
		margin: 0;
		min-width: 100%;
		height: 50px;
		padding: 0 20px;
	}
	a.button-arrow_n{
		font-size: 1.3rem;
		min-width: 100%;
		height: 50px;
		padding: 0 20px;
		margin: 10px;
	}
	.button-arrow::before,
	.button-arrow::after{
		right: 20px;
	}
	.button-arrow::before{
		top: 53%;
		width: 25px;
	}
	.button-arrow::after{
		width: 7px;
	}
	/* hover */
	.button-arrow:hover::before,
	.button-arrow:hover::after{
		right: 15px;
	}
}