@charset "utf-8";

/* -----------------------------------------------------------
	common
----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500&display=swap');
@import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css');

:root {
	--color-white: #fff;
	--color-bg: #f0f1f5;
	--color-blue-01: #1171d8;
	--color-blue-02: #012551;
	--color-blue-03: #bcd9e9;
	--color-blue-04: #f0f1ff;
	--color-blue-05: #f2f5f6;
	--color-blue-06: #f5fffb;
	--color-blue-07: #5998C5;
	--color-orange-01: #fff6e7;
	--color-yellow-01: #fffbba;
	--color-yellow-02: #fefa7f;
	--color-black-01: #3c3c3c;
	--color-black-02: #333;
	--color-black-03: #515556;
	--color-gray-01: #ccc;
	--color-gray-02: #bfbfbf;
	--color-gray-03: #f8f8f8;
	--color-gray-04: #ececec;
	--color-gray-05: #f4f4f4;
	--color-gray-06: #dbdbdb;
	--color-gray-07: #9d9d9d;
	--color-link-text: #317dee;
	--color-link-hover: #1a5cbd;
	--color-btn-01: #317dee;
	--color-btn-02: #1a5cbd;
	--color-red-01: #ff0000;
	--color-red-02: #ec3636;
	--color-red-03: #770304;
	--font-family-01: 'Noto Sans JP', sans-serif;
	--font-weight-01: 600;
	--title-01: 2.0rem;
	--title-02: 1.2rem;
	--title-03: 1.0rem;
	--title-04: 1.5rem;
}

.pc_br {
	display: block;
}
.sp_br {
	display: none;
}
@media screen and (max-width:767px) {
	.pc_br {
		display: none;
	}
	.sp_br {
		display: block;
	}
}


/* -----------------------------------------------------------
	wrap
----------------------------------------------------------- */

.pro_wrap {
	width: 100%;
	margin: 50px auto 0px;
}

section {
	margin: 0 0 50px;
}

.pro_wrap img {
	margin: 0 0 40px;
}

/* -----------------------------------------------------------
	ttl
----------------------------------------------------------- */


.pro_ttl01 {
	color: var(--color-blue-02);
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 30px;
}

/* -----------------------------------------------------------
	conts_box02
----------------------------------------------------------- */

.conts_box02 {
	text-align: center;
	padding: 30px;
	border: 2px solid var(--color-blue-02);
}

.conts_box02_catch {
	position: relative;
	display: block;
	font-size: 1.1rem;
}

.conts_box02_catch::after {
	position: absolute;
	content: '';
	width: 30px;
	height: 2px;
	top: 10px;
	right: 10px;
	background: var(--color-blue-02);
	transform: rotate(-65deg);
}

.conts_box02_catch::before {
	position: absolute;
	content: '';
	width: 30px;
	height: 2px;
	top: 10px;
	left: 10px;
	background: var(--color-blue-02);
	transform: rotate(65deg);
}

.conts_box02_point span {
	display: inline-block;
	color: var(--color-white);
	font-size: 1.3rem;
	margin: 20px 10px 20px;
	padding: 5px 20px;
	background: var(--color-blue-02);
}

.conts_box02_text {
	font-size: 1.1rem;
}

/* -----------------------------------------------------------
	card_container
----------------------------------------------------------- */

.card_container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	gap: 10px;
	padding: 35px 0px 0px;
}

.card_box {
	position: relative;
	width: 22%;
	padding: 60px 10px 0px;
	border: 1px solid var(--color-gray-02);
	border-radius: 5px;
}

.card_box h3 {
	font-size: 1.1rem;
	color: var(--color-blue-02);
	text-align: center;
	margin: 0px 0 20px;
}

.card_ttl {
	position: absolute;
	display: inline-block;
	color: var(--color-white);
	font-size: 1.0rem;
	width: 80px;
	height: 60px;
	line-height: 1;
	text-align: center;
	padding-top: 20px;
	top: -30px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	border-radius: 50%;
	background-color: var(--color-blue-02);
}

.card_number {
	display: block;
	font-size: 1.5rem;
	margin: 5px 0 0;
}


/* -----------------------------------------------------------
	comment_container
----------------------------------------------------------- */

.comment_container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 30px;
}

.comment_container img {
	width: 150px;
}

.comment {
	position: relative;
	width: 60%;
	font-size: 1.0rem;
	padding: 30px 30px;
	background-color: var(--color-blue-05);
	border-radius: 20px;
}

.comment::before {
	position: absolute;
	display: block;
	content: '';
	top: 50%;
	transform: translateY(-50%);
	right: -40px;
	background-color: var(--color-blue-05);
	width: 40px;
	height: 40px;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

/* -----------------------------------------------------------
	voice_container
----------------------------------------------------------- */

.voice_container li {
	margin: 0 0 20px;
	padding: 15px 15px;
	border: 1px solid var(--color-gray-02);
	border-radius: 10px;
}

/* -----------------------------------------------------------
	cta
----------------------------------------------------------- */

.cta_wrap {
	width: 100%;
	padding: 30px 0;
	background: var(--color-blue-05);
}

.cta_ttl {
	font-size: 1.4rem;
	font-weight: 500;
	text-align: center;
}

.cta_container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	gap: 20px;
	margin: 20px 0 0px;
}

.btn_cta {
	display: block;
	width: 180px;
	padding: 0.5rem;
	font-size: 1.0rem;
	font-weight: 500;
	text-align: center;
	color: var(--color-white);
	background: var(--color-btn-01);
	border: 2px solid var(--color-btn-01);
	border-radius: 10px;
	transition: .4s;
}

.btn_cta:hover {
	color: var(--color-white);
	text-decoration: none;
	background: var(--color-btn-02);
}

.cta_mail::before {
	font-family: 'Font Awesome 5 Free';
	content: "\f0e0";
	font-weight: 900;
	padding-right: 10px;
}

.cta_fax::before {
	font-family: 'Font Awesome 5 Free';
	content: "\f1ac";
	font-weight: 900;
	padding-right: 10px;
}

.cta_tel::before {
	font-family: 'Font Awesome 5 Free';
	content: "\f2a0";
	font-weight: 900;
	padding-right: 10px;
}