@charset "utf-8";
/*--------------------------------------
	copyright : Lampros co.,Ltd.
--------------------------------------*/

@import url(normalize.css);
@import url(../_plugin/fontawesome/css/all.min.css);
@import url(../_plugin/aos/aos.css);
@import url(common_parts.css);
@import url(common.css);


/*
 index
==============================*/

.blue { color: #00B0F0; }
.green { color: #007357; }
.green2 { color: #1C9321; }
.yellow { color: #FFB800; }
.red { color: #CB0000; }
.premium { color: #CDAE5D; letter-spacing: .05em; padding-left: .1em;}

.product_name { color: #000;}
.product_name img { height: 1.2em; margin-right: 0.1em; margin-top: .2em; }


/* mv ----------*/
#mv { padding: 24rem 2rem; background-image: url(../_img/index/mv_bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }
#mv .inner { text-align: center; }
#mv h1 { display: inline-block; width: 100%; max-width: 102.4rem; overflow: hidden; border-radius: 1rem; }
#mv h1 strong { display: block; padding: 4rem 2rem; color: #FFF; background-color: #00B0F0; line-height: 1.4; font-size: 6rem; }
#mv h1 small { position: relative; display: block; padding: 3rem 2rem; color: #999; background-color: #FFF; line-height: 1.6; font-size: 3rem; }
#mv h1 small:after { position: absolute; content: ""; top: 0; left: 0; right: 0; margin: auto; width: 0; height: 0; border: 2.5rem solid transparent; border-top: 2.5rem solid #00B0F0; }
@media screen and (max-width:1024px) { /* iPad 横 l */
	#mv { padding: 20vw 2rem; }
	#mv h1 strong { padding: 3rem 1rem; font-size: 4rem; }
	#mv h1 small { padding: 3rem 1rem; font-size: 2rem; }
}
@media screen and (max-width:736px) { /* iPhone 横 ms */
	#mv h1 strong { padding: 2rem 1rem; font-size: 3rem; }
	#mv h1 small { line-height: 1.3; }
}

/* renewal ----------*/
#renewal { padding-top: 4rem !important; padding-bottom: 4rem !important; }
#renewal h2 { text-align: center; font-size: 3rem; vertical-align: middle; line-height: 1.4; }
#renewal h2 .c { display: inline-block; margin-right: 2rem; padding: 0.8rem 2.5rem; border-radius: 0.5rem; color: #FFF; background-color: #CB0000; line-height: 1; font-size: 2rem; vertical-align: middle; }
@media screen and (max-width:736px) { /* iPhone 横 ms */
	#renewal h2 { font-size: 2.5rem; }
	#renewal h2 .c { font-size: 1.6rem; margin-bottom: 1rem; }
}

/* application ----------*/
#application { background-color: #F0F6FB; }
#application h2 { margin-bottom: 6rem; text-align: center; line-height: 1.4; font-size: 5rem; }
@media screen and (max-width:1024px) { /* iPad 横 l */
	#application h2 { margin-bottom: 4rem; font-size: 4rem; }
}
@media screen and (max-width:736px) { /* iPhone 横 ms */
	#application h2 { margin-bottom: 3rem; font-size: 3rem; }
}

/* flow ----------*/
#flow {}
#flow .inner { display: flex; justify-content: center; }
#flow .inner p { margin: 0; }
#flow .inner p:first-child { margin-right: 8rem; }
@media screen and (max-width:736px) { /* iPhone 横 ms */
	#flow .inner { display: block; }
	#flow .inner p { width: 100%; text-align: center; }
	#flow .inner p:first-child { margin-right: 0; margin-bottom: 4rem; padding: 0 6rem; }
}

/* proposal ----------*/
#proposal { background-color: #F6F6F6; }
#proposal h2 { margin-bottom: 6rem; text-align: center; line-height: 1.6; font-size: 4rem; }
#proposal h2 .c { display: inline-block; padding: 1rem 2.5rem; border-radius: 0.5rem; color: #FFF; background-color: #CB0000; line-height: 1; font-size: 2rem; vertical-align: middle; }
#proposal .page_nav {}
#proposal .page_nav li {}
#proposal .page_nav li a { display: block; padding: 2rem 3rem; border-radius: 1rem; color: #FFF; text-align: center; text-decoration: none; line-height: 1.6; font-size: 2.4rem; font-weight: bold; }
#proposal .page_nav li a:after { content: "\f0ab"; display: block; padding-top: 2rem; color: rgba(255, 255, 255, 0.5); text-align: center; font-family: 'Font Awesome 5 Pro'; font-weight: 900; }
#proposal .page_nav li a .n, .sub_sec h3 .n { display: inline-block; width: 5rem; height: 5rem; margin-bottom: 2rem; border-radius: 100%; text-align: center; line-height: 5rem; font-size: 3rem; font-family: 'Roboto', sans-serif; }
#proposal .page_nav div:nth-child(1) li a { background-color: #0068B2; }
#proposal .page_nav div:nth-child(2) li a { background-color: #FFB800; }
#proposal .page_nav div:nth-child(3) li a { background-color: #1C9321; }
#proposal .page_nav div:nth-child(1) li a .n, #secA h3 .n { background-color: #00B0F0; }
#proposal .page_nav div:nth-child(2) li a .n, #secB h3 .n { background-color: #FFD15B; }
#proposal .page_nav div:nth-child(3) li a .n, #secC h3 .n { background-color: #5DB860; }
@media screen and (max-width:736px) { /* iPhone 横 ms */
	#proposal h2 { margin-bottom: 3rem; font-size: 3rem; }
	#proposal .page_nav li a { padding: 2rem 2rem; line-height: 1.4; font-size: 2rem; }
}

.sub_sec { width: 100%; overflow: hidden; }
.sub_sec h3 { position: relative; width: 100%; padding: 4rem 2rem 2rem; color: #FFF; text-align: center; font-size: 4rem; }
.sub_sec h3:after { position: absolute; z-index: 0; bottom: calc(-50vw - 5.9rem); left: 0; content: ""; width: 100vw; height: 12rem; border: 50vw solid transparent; border-top: 6rem solid #FFF; }
.sub_sec h3 .n { color: #FFF; text-align: center; }
.sub_sec .inner { position: relative; z-index: 1; max-width: 100rem !important; padding-top: 10rem !important; padding-bottom: 4rem !important; }
#secA h3 { background-color: #0068B2; }
#secB h3 { background-color: #FFB800; }
#secC h3 { background-color: #1C9321; }
#secA h3:after { border-top-color: #0068B2; }
#secB h3:after { border-top-color: #FFB800; }
#secC h3:after { border-top-color: #1C9321; }
.sec_sw { overflow: hidden; margin-bottom: 4rem; border-radius: 1rem; }
.sec_sw h4 { padding: 2rem; color: #FFF; text-align: center; font-size: 2.4rem; }
.sec_sw .w { padding: 4rem; }
.sec_sw .ww { padding: 4rem; border-radius: 1rem; background-color: #FFF; }
.sec_sw .ww-blue { background-color: #0068B2; }
#secA .sec_sw h4, #campaign .sec_sw h4 { background-color: #00B0F0; }
#secB .sec_sw h4 { background-color: #FFD15B; }
#secC .sec_sw h4 { background-color: #5DB860; }
#secA .sec_sw .w, #campaign .sec_sw .w { background-color: #E6F8FE; }
#secB .sec_sw .w { background-color: rgba(255, 184, 0, 0.1); }
#secC .sec_sw .w { background-color: rgba(28, 147, 33, 0.1); }
@media screen and (max-width:736px) { /* iPhone 横 ms */
	.sub_sec h3 { padding: 4rem 2rem 2rem; font-size: 3rem; line-height: 1.4; }
	.sec_sw h4 { padding: 1.5rem; font-size: 2rem; line-height: 1.4; }
	.sec_sw .w { padding: 1.5rem; }
	.sec_sw .ww { padding: 1.5rem; }
}

/* secA ----------*/
#secA {}
#secA .hd1 { margin-bottom: 3rem; text-align: center; }
#secA .hd1 span { display: inline-block; border-bottom: solid 2px rgba(0, 104, 179, 0.5); color: #0068B2; font-size: 2.4rem; }
#secA .hd2 { margin-bottom: 2rem; color: #0068B2; text-align: center; font-size: 2rem; }
#secA .ww-blue { text-align: center; }
#secA .c { display: inline-block; padding: 1rem 2.5rem; border-radius: 3rem; color: #0068B2; background-color: #FFF; line-height: 1; font-size: 1.6rem; font-weight: bold; vertical-align: middle; }
#secA .hd3 { color: #FFF; text-align: center; line-height: 1.4; font-size: 4rem; font-weight: bold; }
#secA .flow_list { overflow: hidden; border-radius: 1rem; }
#secA .flow_list li { position: relative; padding: 3rem; color: #0068B2; background-color: #FFF; text-align: center; font-size: 2rem; font-weight: bold; }
#secA .flow_list li:after { position: absolute; top: 0; left: 0; right: 0; content: ""; width: 0; height: 0; margin: auto; border: 2rem solid transparent; border-top: 2rem solid #B8DBEF; }
#secA .flow_list li:nth-child(odd) { background-color: #B8DBEF; }
#secA .flow_list li:nth-child(odd):after { border-top: 2.5rem solid #FFF; }
#secA .flow_list li:first-child:after { border: none; }
@media screen and (max-width:736px) { /* iPhone 横 ms */
	#secA .hd3 { font-size: 2.4rem; }
	#secA .flow_list li { padding: 3rem 1rem 2rem; font-size: 1.8rem; }
}

/* secB ----------*/
#secB {}
#secB .hd1 { margin-bottom: 3rem; color: #FFB800; text-align: center; font-size: 2.4rem; }
#secB .merit_list { margin-bottom: 4rem; }
#secB .merit_list li { text-align: center; }
#secB .merit_list li img { margin-bottom: 1rem; }
#secB .merit_list li strong { display: block; margin-bottom: 1rem; color: #FFB800; text-align: center; font-weight: bold; font-size: 2.4rem; }
#secB .merit_list li span { display: block; text-align: center; line-height: 1.4; font-weight: bold; font-size: 1.6rem; }

/* secC ----------*/
#secC {}
#secC .c { display: inline-block; padding: 1rem 2.5rem; border-radius: 3rem; color: #FFF; background-color: #CB0000; line-height: 1; font-size: 2rem; font-weight: bold; vertical-align: middle; }
#secC h2 { padding: 2rem 0; color: #1C9321; text-align: center; font-size: 3rem; }
#secC a { color: #5DB860; }
@media screen and (max-width:736px) { /* iPhone 横 ms */
	#secC h2 { padding: 2rem 0; font-size: 2.4rem; line-height: 1.4; }
}

/* campaign ----------*/
#campaign { padding-top: 4rem !important; padding-bottom: 4rem !important; background-color: #00B0F0; }
#campaign .inner { max-width: 100rem !important; }
#campaign h2 { margin-bottom: 4rem; color: #FFF; text-align: center; line-height: 1.4; font-size: 4rem; }
#campaign h2 .c { display: inline-block; margin: 0 1rem; padding: 1rem 2.5rem; border-radius: 0.5rem; color: #FFF; background-color: #FFB800; line-height: 1; font-size: 2rem; vertical-align: middle; }
#campaign h2 small { font-size: 2rem; }
#campaign .ww { padding: 4rem; border-radius: 1rem; background-color: #FFF; }
#campaign .ww li { text-align: center; }
#campaign .ww .lead { text-decoration: underline; }
#campaign .ww h3 { margin-bottom: 4rem; padding: 2rem; border-radius: 1rem 1rem 0 0; color: #FFF; background-color: #00B0F0; text-align: center; font-weight: bold; font-size: 2rem; }
#campaign .sec_sw { margin-bottom: 0; }
@media screen and (max-width:736px) { /* iPhone 横 ms */
	#campaign h2 .c { margin: 0 1rem 2rem; }
	#campaign .ww { padding: 2rem; }
	#campaign .sec_sw a { display: block; text-align: center; border: solid 2px #00B0F0; border-radius: 1rem; padding: 3rem; }
	#campaign .sec_sw h4 a { padding: 0; }
}