@charset "UTF-8";

.lp div {
	box-sizing: border-box;
}
.lp_inner {
	width: 1100px;
	margin: 0 auto;
	font-size: 14px;
}
.lp_inner.not_first {
	padding-top: 10px;
}
.heading {
	padding: 30px 0;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.heading .left {
	width: 50%;
	padding: 50px 0 0 70px;
}
.heading .right {
	width: 45%;
}
.heading h3 {
	font-size: 43px;
	font-weight: bold;
	color: #287781;
}
.heading img {
	width: 400px;
}
.highlighter {
	background: #ffff56;
  font-weight: bold;
  color: #222;
}
.lineup {
	padding: 20px 100px 20px;
	background-image: url("../img/lp/background_1.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.lineup h4 {
	padding: 30px 0;
	font-size: 28px;
	line-height: 42px;
	text-align: center;
	color: #fff;
}
.lineup h4.left {
	padding-right: 225px;
}
.lineup .list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 15px 15px;
	list-style: none;
}
.lineup .list li {
	width: calc(33% - 10px);
	padding: 14px 0;
	border: 3px solid #85cc88;
	border-radius: 5px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #003d45;
	box-sizing: border-box;
	background: #f6fff7;
}
.overview {
	margin: 0 auto;
	padding: 80px 0 0 70px;
	width: 870px;
	color: #003d45;
	font-size: 21px;
	line-height: 35px;
}
.overview h4 {
	padding: 10px 0;
	font-size: 35px;
}
.mark_heading {
	padding: 80px 0 60px;
	text-align: center;
}
.mark_heading h3 {
	display: block;
	margin: 0 auto;
	position: relative;
	font-size: 40px;
	text-align: center;
	color: #03a9f4;
	width: fit-content;
}
.mark_heading h3::before {
	position: absolute;
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	top: 9px;
	left: -52px;
	background-image: url("../img/lp/line_left.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;   
}
.mark_heading h3::after {
	position: absolute;
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	top: 9px;
	right: -48px;
	background-image: url("../img/lp/line_right.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;   
}
.line_heading {
	padding: 90px 0 50px;
}
.line_heading h3 {
	padding: 20px 0;
	text-align: center;
	font-size: 35px;
	color: #03a9f4;
	border-top: 3px solid #03a9f4;
	border-bottom: 3px solid #03a9f4;
}
.service_list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 30px 20px;
}
.service_list .num {
	width: calc(15% - 10px);
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;  
	text-align: center;
	font-size: 36px;
	font-weight: bold; 
	color: #ff5924;
	background-image: url("../img/lp/background_2.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;   
}
.service_list .desc {
	width: calc(85% - 10px);
}
.service_list h5 {
	margin: 0 0 10px;
	padding: 10px 20px;
	font-size: 20px;
	background: #00766b;
	color: #fff;
}
.service_list p {
	padding-left: 20px;
	font-size: 16px;
	line-height: 28px;
}
.single_account {
	margin: 0 auto;
	padding: 50px 100px;
	width: 800px;
	background: #eee;
}
.single_account .step {
	min-height: 78px;
	display: flex;
	justify-content: center;
	align-items: center;  
	text-align: center;
	font-size: 20px;
	text-align: center;
	border: 5px solid #009688;
	border-radius: 100px;
	background: #fff;
}
.single_account .arrow {
	margin: 10px 0;
	text-align: center;
	font-size: 40px;
	color: #009688;
}
.single_account .arrow::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f0d7";
}
.function_list {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 35px 30px;
}
.function_list .column {
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
}
.function_list .icon {
	width: calc(25% - 15px);
	height: 150px;
}
.function_list .icon img {
	width: 100%;
}
.function_list .desc {
	width: calc(75% - 15px);
}
.function_list .desc h4 {
	padding-bottom: 8px;
	font-size: 20px;
	border-bottom: 1px solid #9dbec2;
	color: #206169;
}
.function_list .desc p {
	font-size: 16px;
}
.function_list .desc .notice {
	font-size: 14px;
}
.flow_info {
	padding: 0 140px;
	font-size: 22px;
	color: #00675d;
}
.flow_list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 40px;
}
.flow_list .num {
	width: 12%;
	height: 140px;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;  
	background-image: url("../img/lp/dot.png");
	background-size: auto 50px;
	background-repeat: no-repeat;
	background-position: bottom;   
}
.flow_list .num.last {
	background: none;
}
.flow_list .num .number {
	margin: 0;
	padding: 0;
	background: #a9d18e;
	color: #fff;
	width: 70px;
	height: 70px;
	border-radius: 70px;
	display: flex;
	justify-content: center;
	align-items: center;  
	text-align: center;
	font-size: 36px;
	font-weight: bold; 
}
.flow_list .num .dot {
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #bad69a;
}
.flow_list .desc {
	width: 85%;
}
.flow_list .desc h5 {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #c8c8c8;
	font-size: 22px;
	color: #27777c;
}
.flow_list .desc p {
	margin: 0;
	padding: 10px 0;
	font-size: 17px;
	    line-height: 31px;
}
.price_info {
	padding: 0 120px 20px;
	font-size: 22px;
	line-height: 36px;
	color: #00675d;
}
.price_list {
	width: 900px;
	margin: 0 auto;
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 0 30px;
}
.price_list .price {
	width: calc(33% - 20px);
	position: relative;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 12px;
}
.price_list .icon {
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center; 
	font-size: 35px;
	color: #fff;
	background: #aaa;
	border-radius: 12px 12px 0 0;
}
.price_list .basic .icon {
	background: #00569a;
}
.price_list .basic .icon::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f013";
}
.price_list .option .icon {
	background: #75cf79;
}
.price_list .quote .icon {
	background: #f29f24;
}
.price_list .quote .icon::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f1ec";
}
.price_list .icon img {     
	height: 41px;
	padding-bottom: 4px;
}
.price_list .desc {
	margin-bottom: 65px;
	padding: 10px 15px;
}
.price_list .desc h5 {
	margin: 0 0 20px;
    padding: 10px 0;
	font-size: 20px;
	text-align: center;
	border-bottom: 1px solid #aaa;
	color: #27777c;
}
.price_list .desc ul {
	padding-left: 25px;
	font-size: 17px;
    line-height: 30px;
    color: #333;
}
.price_list .basic li::marker {
  color: #00569a;
}
.price_list .option li::marker {
  color: #75cf79;
}
.price_list .quote li::marker {
  color: #f29f24;
}
.price_list .bottom {
	width: 100%;
	padding: 15px 0;
	position: absolute;
	bottom: 0;
	text-align: center;
	font-size: 17px;
	font-weight: bold;
	border-radius: 0 0 12px 12px;
}
.price_list .bottom a {
    padding: 8px 40px;
    background: #c50000;
    color: #fff;
    border-radius: 50px;
}
.price_list .bottom i {
	margin-left: 14px;
}
.price_list .basic .bottom {
	color: #042540;
	background: #d9eeff;
}
.price_list .option .bottom {
	color: #056909;
	background: #d4ffd6;
}
.price_list .quote .bottom {
	color: #ac6700;
	background: #ffe8c6;
}
.price_list .estimate {
	margin: 15px 0 10px 10px;
	color: #d1881b;
	font-size: 22px;
	font-weight: bold;
}
.price_list .example {
	margin-left: 10px;
	font-size: 15px;
	line-height: 22px;
}
.result_intro {
	padding: 0 120px 20px;
	font-size: 22px;
	line-height: 36px;
	color: #00675d;
}
.result_stats {
	width: 850px;
	margin: 0 auto;
	padding: 40px 70px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px 10px;
	background: #eee;
}
.result_stats .stat {
	width: calc(50% - 10px);
}
.result_stats .stat h5 {
	width: fit-content;
	margin: 0;
	padding-bottom: 5px;
	color: #003d45;
	font-size: 19px;
	font-weight: normal;
	border-bottom: 1px solid #003d45;
}
.result_stats .stat p {
	margin: 20px 0;
	font-size: 23px;
	color: #00766b;
}
.result_stats .stat p .number {
	font-size: 41px;
	font-weight: bold;
}
.result_logo_title h4 {
	margin: 45px 0 10px;
	font-size: 31px;
	text-align: center;
	color: #00675d;
}
.support_info {
	padding: 0 0 50px;
	font-size: 22px;
	line-height: 42px;
	color: #00675d;
}
.support_info .support_content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 20px;
}
.support_info .support_content .column {
	width: 40%;
	padding: 25px 0;
	border: 1px solid #00675d;
	text-align: center;
}
.contact_info {
	position: relative;
	padding: 25px 20px;
	width: 100%;
	background: #126570;
}
.contact_info.float {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 15px 20px;
	background: rgba(5, 103, 116, 0.86);;
}
.contact_info h3 {
	padding-bottom: 20px;
	color: #fff;
	text-align: center;
	font-size: 20px;
}
.contact_info.float h3 {
	padding-bottom: 12px;
	font-size: 15px;
}
.contact_info a {
	margin: 0 auto;
	padding: 15px 50px;
	width: fit-content;
	display: block;
	background: #fff3cd;
	color: #bf2e00;
	font-size: 24px;
	font-weight: bold;
	border-radius: 40px;
}
.contact_info.float a {
	padding: 8px 50px;
	font-size: 19px;
}

/***
 * ===============================================================
 * スマホ対応
 * ===============================================================
 * */

@media screen and (max-width:1160px) {

	.lp_inner {
		width: 100%;
		padding: 0;
	}
	.heading {
		flex-direction: column;
	}
	.heading .left {
		width: 100%;
		padding: 10px 0 0 40px;
	}
	.heading .right {
		width: 100%;
	}
	.heading h3 {
		font-size: 38px;
	}
	.heading img {
		width: 50%;
		float: right;
	}
	.mark_heading {
		padding: 30px 40px;
	}
	.mark_heading h3 {
		font-size: 20px;
	}
	.mark_heading h3::before {
		width: 33px;
		height: 33px;
		top: 0;
		left: -40px;
	}
	.mark_heading h3::after {
		width: 33px;
		height: 33px;
		top: 0;
		right: -40px;
	}
	.line_heading {
		padding: 30px 0;
	}
	.line_heading h3 {
		margin: 0 20px;
		padding: 15px 0;
		font-size: 20px;
	}
	.lineup {
		padding: 10px 15px;
		background-image: none;
		background: #017575;
		border-radius: 10px;
	}
	.lineup h4 {
		padding: 20px 0;
		font-size: 18px;
		line-height: 25px;
	}
	.lineup h4.left {
		padding-right: 0;
	}
	.lineup .list li {
		width: calc(50% - 15px);
		padding: 10px 0;
		font-size: 14px;
	}
	.overview {
		width: 100%;
		padding: 30px 20px 15px;
		font-size: 16px;
		line-height: 24px;
	}
	.overview h4 {
		font-size: 22px;
	}
	.service_list {
		padding: 10px 10px;
		flex-direction: column;
		gap: 10px 0;
	}
	.service_list .num {
		display: none;
	}
	.service_list .desc {
		width: 100%;
	}
	.service_list h5 {
		font-size: 17px;
	}
	.service_list h5 .marker {
		padding-right: 10px;
		display: inline-flex;
	}
	.service_list p {
    padding-left: 0;
		font-size: 15px;
    line-height: 24px;
	}
	.single_account {
		width: 100%;
		padding: 50px 15px;
	}
	.single_account .step {
		min-height: 70px;
		font-size: 16px;
	}
	.single_account .arrow {
		margin: 0;
		font-size: 25px;
	}
	.function_list {
		margin-top: 10px;
		gap: 20px;
	}
	.function_list .column {
		width: 100%;
		padding: 0 15px;
		gap: 20px;
	}
	.function_list .icon {
		width: calc(20% - 10px);
	}
	.function_list .desc {
		width: calc(80% - 10px);
	}
	.function_list .desc h4 {
		font-size: 19px;
	}
	.function_list .desc p {
		font-size: 16px;
	}
	.flow_info {
		padding: 0 20px;
		font-size: 18px;
	}
	.flow_list {
		padding: 0;
		gap: 10px;
	}
	.flow_list .num {
		width: calc(20% - 10px);
		background-image: none;
	}
	.flow_list .num .number {
		width: 50px;
		height: 50px;
		font-size: 22px;
	}
	.flow_list .desc {
		width: calc(80% - 10px);
		padding: 0 10px 0 0;
	}
	.flow_list .desc h5 {
		padding: 10px 0 10px;
		font-size: 20px;
	}
	.flow_list .desc p {
		font-size: 16px;
	}
	.price_info {
		padding: 0 20px;
		font-size: 18px;
	}
	.price_list {
		width: 100%;
		padding: 0 20px 30px;
		flex-direction: column;
		gap: 50px 0;
	}
	.price_list .price {
		width: 100%;
	}
	.price_list .desc {
		padding: 10px 30px 20px;
	}
	.result_intro {
		padding: 0 20px;
		font-size: 18px;
	}
	.result_stats {
		width: 100%;
		padding: 30px 40px;
	}
	.result_stats .stat {
		width: 100%;
	}
	.result_stats .stat h5 {
		font-size: 17px;
	}
	.result_stats .stat p {
		margin: 10px 0;
	}
	.result_logo_title h4 {
		font-size: 26px;
	}
	.channel_container {
		padding: 20px 0;
	}
	.support_info {
		padding: 0 20px 30px;
		font-size: 18px;
		line-height: 32px;
	}
	.contact_info h3 {
		font-size: 13px;
	}
	.contact_info.float h3 {
		font-size: 13px;
	}
	.contact_info a {
		padding: 8px 30px;
		font-size: 16px;
	}
	.contact_info.float a {
		padding: 8px 30px;
		font-size: 16px;
	}
}

/***
 * ===============================================================
 * スマホ対応（700px以下）
 * ===============================================================
 * */

@media screen and (max-width:700px) {

	.heading h3 {
		font-size: 28px;
	}
	.heading .left {
		padding: 10px 0 0 10px;
	}
}

/**
 * =========================
 * 追従停止
 * =========================
 */ 

.global_header {
	position: absolute;
}
.nav_container .nav_button {
	position: absolute;
}
.sp_navi_btn {
	position: absolute;
}

/**
 * =========================
 * animation
 * =========================
 */ 

.fade_in {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade_in.show {
	opacity: 1;
	transform: translateY(0);
}