@charset "UTF-8";
/* service_SSL style.css */

/* overworite, common
==================================*/
#main {
	color: #33335A;
}
#main section {
padding-top: 0px;
padding-bottom: 0px;
}
#main > section {
padding-top: 120px;
padding-bottom: 120px;
}
#main section > .inner {
	position: relative;
}

.btnLink01 {
	margin-top: 40px;
	width: 400px;
	width: auto;
}
.btnLink01 a,
.btnLink01 button {
	color: #fff;
	background-color: #EA5549;
	/*display: block;*/
	-webkit-border-radius: 2em;
	border-radius: 2em;
}
.btnLink01 a span,
.btnLink01 button span {
	font-weight: 700;
	line-height: 1.1;
	/*display: inline-block;*/
	width: auto;
	padding: 1em 2em;
}
.btnLink01 a span:after,
.btnLink01 button span:after,
.btnLink01 a:before,
.btnLink01 button:before {
	display: none;
}

.heading02 {
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
.heading02 span {
	font-size: 2.8rem;
}
.heading02:after {
	display: none;
}
.heading02 + * {
	margin-top: 55px;
}

.txt_red {
	color: #ea5549;
}
.ttl_acb {
	color: #ea5549;
	font-size: 2.4rem;
	font-weight: 700;
}


/*SP Layout
----------------------------- */
@media only screen and (max-width: 768px) {
#main > section {
padding-top: 12vw;
padding-bottom: 12vw;
}

.btnLink01 {
	margin-top: 8vw;
	width: auto;
}

.heading02 {
	font-size: 2.2rem;
}
.heading02 span {
	font-size: 1.5rem;
}
.heading02 + * {
	margin-top: 8vw;
}

.ttl_acb {
	font-size: 1.8rem;
}
}


/* fv_area
==================================*/
#main #fv_area {
	background-color: #F0F5F5;
	text-align: center;
	padding-top: 60px;
	padding-bottom: 0px;
}
#main #fv_area .inner {
	padding-bottom: 620px;
}
#fv_area .anchor_list {
	background-color: #fff;
	display: table;
	width: 100%;
	padding-left: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}
#fv_area .anchor_list li {
	line-height: 1;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 20px 10px;
}
#fv_area .anchor_list li a {
	color: #4D4D4D;
	font-size: 1.3rem;
	font-weight: 700;
}
#fv_area .anchor_list li a:after {
	display: none;
}
#fv_area .anchor_list li.btnLink01 {
	margin-top: 0px;
}
#fv_area .anchor_list li.btnLink01 a span {
	color: #fff;
	font-size: 1.4rem;
	height:2.5em;
	height:2em;
}
#fv_area h1 {
	font-size: 1.8rem;
	font-weight: 700;
	color: #ea5549;
	display: inline-block;
	padding: 0.7em 1em;
	margin-top: 65px;
	border: 1px solid #ea5549;
}
#fv_area h1 + p {
	font-size: 4.6rem;
	font-weight: 700;
	margin-top: 0.5em;
}
#fv_area h1 + p span {
	font-size: 3rem;
	font-weight: 700;
}
#fv_area h1 + p + p {
	color: #808080;
	font-weight: 500;
	margin-top: 1em;
}
#fv_area .slider_wrap {
	margin-left: -410px;
	position: absolute;
	left: 50%;
	bottom: -65px;
}
#fv_area .slider_wrap .bx-wrapper {
	width: 772px;
	height: 411px;
	position: absolute;
	left: 24px;
	top: 28px;
	z-index: 10;
}


/*SP Layout
----------------------------- */
@media only screen and (max-width: 768px) {
#main #fv_area {
	padding-top: 6vw;
}
#main #fv_area .inner {
	padding-bottom: 0vw;
}
#fv_area .anchor_list {
	display: block;
	display: none;
	padding: 15px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#fv_area .anchor_list li {
	display: inline-block;
	text-align: center;
	padding: 0;
	width: 100%;
}
#fv_area .anchor_list li + li {
	margin-top: 1.2em
}
#fv_area .anchor_list li.w50 {
	width: 50%;
	margin-right: -5px;
}
#fv_area .anchor_list li a {
	font-size: 1.4rem;
}
#fv_area .anchor_list li.btnLink01 {
	margin-top: 1.2em;
}
#fv_area .anchor_list li.btnLink01 a {
	width: 100%;
	display: table;
}
#fv_area h1 {
	font-size: 1.6rem;
	padding: 0.5em.8em;
	margin-top: 8vw;
	margin-top: 0vw;
}
#fv_area h1 + p {
	font-size: 2.4rem;
}
#fv_area h1 + p span {
	font-size: 1.6rem;
}

#fv_area .slider_wrap {
	margin-left: 0px;
	margin-top: 6vw;
	position: absolute;
	position: relative;
	left: auto;
	bottom: auto;
}
#fv_area .slider_wrap .bx-wrapper {
	width : -webkit-calc(100vw - 42px);
	width : calc(100vw - 42px);
	height: auto;
	left: 11px;
	top: 12px;
}
}



/* result_area
==================================*/
#main #result_area {
	text-align: center;
}
#result_area .result_list {
	display:-webkit-box;
	display:-webkit-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}
#result_area .result_list .col {
	padding: 20px;
	float: left;
	margin-right: 18px;
	width : -webkit-calc((100% - 37px) / 3);
	width : calc((100% - 37px) / 3);
	border: 1px solid #f0f5f5;
	-webkit-box-shadow: 8px 8px 0px 0px rgba(240,245,245,1);
box-shadow: 8px 8px 0px 0px rgba(240,245,245,1);
}
#result_area .result_list .col:last-child {
	margin-right: 0px;
}
#result_area .result_list .col figure img {
	width: 100%;
	height: auto;
}
#result_area .result_list .col h3 {
	font-size: 2.2rem;
	font-weight: 500;
	text-align: center;
	margin-top: 1em;
}
#result_area .result_list .col p {
	font-weight: 500;
	color: #999999;
	text-align: left;
	margin-top: 1.5em;
}
#result_area .result_list .col p + p {
	margin-top: 0.5em;
}


/*SP Layout
----------------------------- */
@media only screen and (max-width: 768px) {
#result_area .result_list {
	display:block;
	-webkit-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}
#result_area .result_list .col {
	padding: 15px;
	float: none;
	margin-right: 0px;
	width : 100%;
	width : -webkit-calc(100% - 4px);
	width : calc(100% - 4px);
	-webkit-box-shadow: 4px 4px 0px 0px rgba(240,245,245,1);
	box-shadow: 4px 4px 0px 0px rgba(240,245,245,1);
}
#result_area .result_list .col + .col {
	margin-top: 4vw;
}
#result_area .result_list .col h3 {
	font-size: 1.7rem;
	font-weight: 500;
}
#result_area .result_list .col p {
	font-size: 1.4rem;
	margin-top: 1em;
}
}


/* change_area
==================================*/
#main #change_area {
	background-color: #f0f5f5;
}
#change_area .inner {
	display: table;
}
#change_area .inner > * {
	text-align: right;
	vertical-align: middle;
	display: table-cell;
	width: 50%;
}
#change_area .inner .ttl_col {
	padding-left: 80px;
	text-align: left;
}
#change_area .inner .heading02,
#price_area .inner .heading02 {
	text-align: left;
	margin-top: 0.2em;
}

/*SP Layout
----------------------------- */
@media only screen and (max-width: 768px) {
#change_area .inner {
	display: block;
}
#change_area .inner > * {
	text-align: left;
	display: block;
	width: 100%;
}
#change_area .inner > figure {
	padding: 4vw 10vw 5vw
}
#change_area .inner .ttl_col {
	padding-left: 0px;
}
}


/* price_area
==================================*/
#main #price_area {
	text-align: left;
}
#price_area .price_box {
	color: #FFF;
	background-image: url(/service/ssl/img/ssl_bg01.svg);
	background-size: contain;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	height: 300px;
	width: 300px;
	margin-top: 0;
	padding: 90px 40px;
	position: absolute;
	left: 600px;
	top: -120px;
}
#price_area .price_box dt {
	font-size: 2.4rem;
	font-weight: 700;
}
#price_area .price_box dd {
	font-size: 4.6rem;
	font-weight: 700;
	margin: 10px;
	padding-top: 0px;
	border-top: 2px solid #FFF;
	position: relative;
}
#price_area .price_box dd span {
	font-size: 2rem;
}
#price_area .price_box dd .tax {
	font-size: 1.2rem;
	font-weight: 400;
	position: absolute;
	top: 15px;
	right: 0.7em;
}
#price_area .terms_box {
	margin-top: 150px;
	counter-reset: numList;
}
#price_area .terms_box h3 {
	font-size: 2rem;
	font-weight: 700;
	color: #71718B;
}
#price_area .terms_box .terms_list {
	font-size: 1.4rem;
	color: #666666;
	float: left;
	width: 50%;
	padding-top: 15px;
}
#price_area .terms_box .terms_list > li {
	padding-left: 2em;
	margin-top: 1em;
	position: relative;
}
#price_area .terms_box .terms_list > li:before {
	content: "";
	background-color: #ccccd5;
	display: block;
	height: 20px;
	width: 20px;
	position: absolute;
	left: 0px;
	top: 0px;
}
#price_area .terms_box .terms_list > li:after {
	content: "" counter(numList,decimal);
	counter-increment: numList;
	font-weight: 700;
	color: #fff;
	position: absolute;
	left: 7px;
	top: 0px;
}
#price_area .terms_box .terms_list > li:last-child p {
	padding-left: 1.5em;
	margin-top: .5em;
	text-indent: -1.5em;
}
#price_area .terms_box .terms_list > li:last-child p:before {
	content: '※';
	margin-right: .5em;
}


/*SP Layout
----------------------------- */
@media only screen and (max-width: 768px) {
#price_area .price_box {
	height: 50vw;
	width: 50vw;
	margin-top: 0vw;
	padding: 13vw 20px;
	left: auto;
	right: 5vw;
	top: -20vw;
}
@media only screen and (max-width:320px) {
#price_area .price_box {
	padding: 13vw 2vw;
}
}
#price_area .price_box dt {
	font-size: 1.6rem;
}
#price_area .price_box dd {
	font-size: 3rem;
}
#price_area .price_box dd span {
	font-size: 1.4rem;
}
#price_area .price_box dd .tax {
	font-size: .9rem;
	top: 8px;
	right: 0em;
}
#price_area .terms_box {
	margin-top: 80px;
}
#price_area .terms_box h3 {
	font-size: 1.6rem;
}
#price_area .terms_box .terms_list {
	font-size: 1.4rem;
	color: #666666;
	float: none;
	width: 100%;
	padding-top: 0px;
}
#price_area .terms_box .terms_list > li {
	margin-top:.8em;
}
}


/* estimate_area
==================================*/
#main #estimate_area {
	background-color: #EA5549;
	color: #fff;
	padding: 70px 0;
}
#main #estimate_area .heading02 span.sub_ttl {
	font-size: 2.4rem;
	line-height: 1.8;
	display: block;
	position: relative;
}
#main #estimate_area .heading02 span.sub_ttl:before,
#main #estimate_area .heading02 span.sub_ttl:after {
	content: '';
	vertical-align: middle;
	display: inline-block;
	width: 1em;
	margin: 0 1em;
	border-top: solid 1px #fff;
}
#main #estimate_area .btnLink01 {
	text-align: center;
}
#main #estimate_area .btnLink01 a {
	background-color: #fff;
}
#main #estimate_area .btnLink01 span {
	color: #EA5549;
}


/*SP Layout
----------------------------- */
@media only screen and (max-width: 768px) {
#main #estimate_area {
	padding: 8vw 0;
}
#main #estimate_area .heading02 span.sub_ttl {
	font-size: 1.8rem;
}
}


/* flow_area
==================================*/
#main #flow_area {
	background-color: #F0F5F5;
	text-align: left;
}
#main #flow_area .heading02 {
	text-align: left;
}
#main #flow_area .flow_list {
	counter-reset: numList;
	display:-webkit-box;
	display:-webkit-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	padding-top: 30px;
}
#main #flow_area .flow_list li {
	background-color: #FFF;
	text-align: center;
	width : -webkit-calc((100% - 81px) / 5);
	width : calc((100% - 81px) / 5);
	float: left;
	margin-right: 20px;
	margin-top: 20px;
	padding: 35px 0;
	position: relative;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#main #flow_area .flow_list li:nth-child(5n) {
	margin-right: 0px;
}
#main #flow_area .flow_list li + li:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0 20px 20px;
	border-color: transparent transparent transparent #ccccd5;
	position: absolute;
	top: 50%;
	left: -10px;
	margin-top: -20px;
}
#main #flow_area .flow_list li:nth-child(6):after,
#main #flow_area .flow_list li:last-child:after {
	display: none;
}
#main #flow_area .flow_list li:before {
	content: "";
	font-size: 1.6rem;
	font-weight: 700;
	display: block;
	position: absolute;
	left: -0.3em;
	top: -.6em;
	content: counter(numList,decimal-leading-zero);
	counter-increment: numList;
	text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 2px 1px 0px, rgb(255, 255, 255) 1px 2px 0px, rgb(255, 255, 255) 0px 2px 0px, rgb(255, 255, 255) 0px 2px 0px, rgb(255, 255, 255) -1px 2px 0px, rgb(255, 255, 255) -2px 2px 0px, rgb(255, 255, 255) -2px 1px 0px, rgb(255, 255, 255) -2px 0px 0px, rgb(255, 255, 255) -2px 0px 0px, rgb(255, 255, 255) -2px -1px 0px, rgb(255, 255, 255) -1px -2px 0px, rgb(255, 255, 255) -1px -2px 0px, rgb(255, 255, 255) 0px -3px 0px, rgb(255, 255, 255) 0px -2px 0px, rgb(255, 255, 255) 1px -2px 0px, rgb(255, 255, 255) 2px -1px 0px, rgb(255, 255, 255) 2px 0px 0px;
}
#main #flow_area .flow_list li figure {
	vertical-align: middle;
	display: table-cell;
	height: 65px;
	width: 100%;
	width: 180px;
}
#main #flow_area .flow_list li p {
	font-size: 1.6rem;
	font-weight: 700;
	margin-top: 25px;
}
#main #flow_area .flow_list li p span {
	font-size: 1.1rem;
	font-weight: 400;
	margin-top: 5px;
	display: block;
}
#main #flow_area .flow_list li:last-child {
	text-align: left;
	background-color: rgba(255,255,255,0);
	padding-left: 50px;
	padding-top: 70px;
}
#main #flow_area .flow_list li:last-child:before {
	display: none;
}
#main #flow_area .flow_list li:last-child p {
	margin-top: 5px;
}
#main #flow_area .flow_list li:last-child p:before {
	content: '';
	vertical-align: middle;
	display: inline-block;
	width:2em;
	margin-right: 5px;
	border-top: solid 5px #33335A;
}
#main #flow_area .flow_list li:last-child p.studiosc:before {
	border-top: solid 5px #EA5549;
}


/*SP Layout
----------------------------- */
@media only screen and (max-width: 768px) {
#main #flow_area .flow_list {
	padding-top: 0px;
}
#main #flow_area .flow_list li {
	width : -webkit-calc((100% - 36px) / 3);
	width : calc((100% - 36px) / 3);
	margin-right: 18px;
	margin-top: 0px;
	padding: 18px 0;
}
#main #flow_area .flow_list li:nth-child(5n) {
	margin-right: 18px;
}
#main #flow_area .flow_list li:nth-child(3n) {
	margin-right: 0px;
}
#main #flow_area .flow_list li:nth-child(3) ~ li {
	margin-top: 18px;
}
#main #flow_area .flow_list li:nth-child(6):after {
	display: block;
}
#main #flow_area .flow_list li:nth-child(4):after,
#main #flow_area .flow_list li:nth-child(7):after {
	display: none;
}
#main #flow_area .flow_list li figure {
	height: 45px;
	width: 100%;
	width: 130px;
}
#main #flow_area .flow_list li figure img {
	width: 30%;
}
#main #flow_area .flow_list li:nth-child(7) figure img {
	width: 60%;
}
#main #flow_area .flow_list li p {
	font-size: 1.3rem;
	margin-top: 1em;
}
#main #flow_area .flow_list li p span {
	font-size: 1rem;
}
#main #flow_area .flow_list li:last-child {
	padding-left: 10px;
	padding-top: 0px;
}
#main #flow_area .flow_list li:last-child:before {
	display: none;
}
#main #flow_area .flow_list li:last-child p {
	margin-top: 5px;
}
}


/* form_wrap
==================================*/
#main #form_area {
	color:#333;
	padding: 60px 0 !important;
}
#main #form_area .form .btnLink01 button:hover:after {
	background: #EA5549;
	-webkit-transform: scale(0);
	transform: scale(0);
}
#main #form_area .form .btnLink01 > * {
	font-size: 2rem;
}


/*SP Layout
----------------------------- */
@media only screen and (max-width: 768px) {
#main #form_area {
	padding: 10vw 0 !important;
}
#main #form_area.form_wrap .inner {
padding: 0 3.2%;
}
}


/* coution_area
==================================*/
#main #coution_area {
	background-color: #fafaf0;
}
#main #coution_area dl {
	color:#333;
}
#main #coution_area dl dt {
	font-weight: 500;
}
#main #coution_area dl * + dt {
	margin-top: 1.5em;
}
#main #coution_area dl dd {
	font-size: 1.4rem;
	line-height: 1.8;
	margin-top: .5em;
}


/*SP Layout
----------------------------- */
@media only screen and (max-width: 768px) {
#main #coution_area dl dd {
	font-size: 1.3rem;
}
}












/*PC Layout
------------------------------ */
@media print, screen and (min-width: 769px) {
}



/*SP Layout
----------------------------- */
@media only screen and (max-width: 768px) {
}