@charset "utf-8";
* {
	margin: 0px;
	padding: 0px;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
a {
	text-decoration: none;
}
img {
	vertical-align:bottom;
	border:none;
	width:100%;
}
table {
	border-collapse: collapse;
}
.clearfix:after {
	content: ".";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
  	height: 1px;
  	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}
body {
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
#main {
	max-width:1000px;
	width:100%;
	margin:0 auto;
	font-feature-settings: "palt";
}
header {
	display: flex;
	justify-content: space-between;
}
header img#header_logo {
	max-width:310px;
}
div#header_btn_area {
	display: flex;
	flex-direction:row-reverse;
}
#header_img {
	background:url(header_img_bg.png) #161E7B no-repeat;
	background-position:100% 60%;
	height:380px;
	width:100%;
	position:relative;
}
#header_text_area{
	position:absolute;
	top:15%;
	left:3%;
}
#header_text_area h1 {
	color:#FFF;
	font-size:40px;
	font-weight:bold;
	line-height:60px;
}
.pink_color {
	color:#FE6BAA;
}
.pink_color02 {
	color:#FD309E;
}
.size_s {
	font-size:70%;
}
.size_l {
	font-size:120%;
}
.pink_marker {
	background:linear-gradient(transparent 60%, #FEC7E1 0%);
}

#header_text_area h1 #logo_text {
	font-weight:bold;
	font-size:62px;
	line-height:140px;
	letter-spacing:-8px;
	display:block;	
}
img#logo_explanation {
	display:block;
	padding-top:0%;
	max-width:465px;
	width:94%;
}
#header_img_bottom {
	display: flex;
	justify-content: space-between;
	background:#161E7B;
	padding:0 2% 2%;
}
#header_img_bottom div {
	padding:0 1%;
}

#onayami {
	background:#F0F0F0;
	padding-bottom:5%;
}
#onayami_text {
	padding:6% 0;
	text-align:center;
	font-size:41px;
	font-weight:bold;
}
#onayami_text img#balloon_icon01 {
	max-width:80px;
}
#onayami_balloon {
	padding:0 5%;
}
.onayami_balloon_area {
	display:flex;
	align-items: center;
}
.onayami_balloon_area .balloon_body{
	width:500px;
}
.onayami_balloon_area .balloon_side_img {
	width:55%;
}
.onayami_balloon_area .balloon_side_img img{

	max-width:360px;
}
.balloon_body .balloon_text {
	background:#161E7B;
	color:#FFF;
	font-weight:bold;
	padding:3% 6%;
	font-size:24px;
}

#center_logo {
	text-align:center;
	font-size:60px;
	font-weight:bold;
	color:#161E7B;
	padding:5% 0;
}
#center_logo img {
	width:90%;
	max-width:590px;
}

/*サービス*/
#service_guide_title {
	position:relative;
	background:url(service_guide_title_bg.jpg) 50% 50%;
}
#service_guide_title #service_guide_title_text {
	position:absolute;
	top:18%;
	left:0;
	right:0;
	margin:0 auto;
	text-align:center;
	font-size:55px;
	font-weight:bold;
	color:#161E7B;
}
ul#service_guide_body {
	list-style:none;
	padding:7% 0;
	background:#F0F0F0;
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}
ul#service_guide_body li {
	width:234px;
	background:#FFF;
	padding:15px 5px;
	text-align:center;
	margin:8px 5px;
}
ul#service_guide_body li .service_guide_parts_title {
	display:flex;
	align-items: center;
	justify-content:center;
	padding-bottom:10px;
}
ul#service_guide_body li .service_guide_parts_title .service_guide_parts_title_icon img {
	display:block;
	width:38px;
}
ul#service_guide_body li .service_guide_parts_title .service_guide_parts_title_text h3{
	padding-left:5px;
	font-weight:bold;
	font-size:20px;
	letter-spacing:-1px;
}
.border_title {
	color: #161E7B;
	font-size: 24px;
	display: flex;
	align-items: center;
}
.border_title:before, .border_title:after {
	content: "";
	flex-grow: 1;
	height: 2px;
	background: #161E7B;
	display: block;
}
.border_title:before {
	margin-right: .4em;
}
.border_title:after {
	margin-left: .4em;
}
/*見積もりボタン*/
.free_consultation_area {
	padding:5% 0;
}
.free_consultation_area .free_consultation_btn {
	background:#FD309E;
	padding:10px 0;
	text-align:center;
	font-weight:bold;
	font-size:30px;
	width:70%;
	max-width:600px;
	margin:0 auto;
	border-radius:6px;
}
.free_consultation_area a {
	color:#fff;
}
/*ステップ*/
#step_guide {
	padding:5% 0;
}
h3.border_title {
	padding:0 1% 3%;
	font-size:30px;
}
#step_box {
	width:86%;
	margin:0 auto;
}
#step_box .step_parts {
	display: flex;
	align-items: center;
}
#step_box .step_parts .step_parts_text {
	padding:2% 2%;
	font-weight:bold;
	font-size:25px;
	line-height:120%;
}
#step_box .step_parts div.step_parts_img {
	width:70%;
	max-width:220px;
}
#step_box .step_parts .step_parts_text .step_parts_text_title {
	color:#161E7B;
	line-height:200%;
}
#step_box .step_parts .step_parts_text .step_parts_text_time {
	color:#666;
}
img.step_allow {
	width:30%;
	display:block;
	max-width:220px;
	margin:10px auto;
}
/*クラウドサイン*/
#cloud_sign {
	text-align:center;
}
#cloud_sign h3 {
	color:#161E7B;
	font-size:30px;
	font-weight:bold;
	letter-spacing:-1px;
	padding:1% 0 5%;
}
#cloud_sign img {
	max-width:370px;
	width:80%;
}
#cloud_sign p {
	font-weight:bold;
	display:inline-block;
	margin:-3% auto 0;
	text-align:left;
	width:80%;
	max-width:700px;
}

/*比較・フローチャート*/
#comparison, #flowchart{
	padding:7% 0;
	text-align:center;
}
#comparison img {
	max-width:900px;
}
#flowchart img {
	max-width:780px;
	
}
/*ご契約事例*/
#case {
	padding:7% 0;
}
#case .case_contents {
	width:96%;
	margin:4% auto;
	box-shadow: 0px 0px 4px 2px #ccc;
	display: flex;
	align-items: center;
	padding:3%;
}
#case .case_contents .case_contents_text .case_contents_title {
	font-size:22px;
	font-weight:bold;
}
#case .case_contents .case_contents_img_r, #case .case_contents .case_contents_img_l {
	width:80%;
	max-width:118px;
}
#case .case_contents .case_contents_img_r {
	padding-left:2%;
}
#case .case_contents .case_contents_img_l {
	padding-right:2%;
}

/*電話案内*/
#tel_area {
	padding:0 1% 7%;
}
#tel_area_box {
	border:1px solid #161E7B;
	border-radius:10px;
	padding:4px;
}
#tel_area_box #tel_area_title {
	background:#161E7B;
	color:#FFF;
	text-align:center;
	font-weight:bold;
	padding:3% 1%;
	border-radius:6px;
	font-size:26px;
}
#tel_area_number {
	margin:0 auto;
	display: flex;
	justify-content:center;
	align-items: center;
	padding:2% 1%;
}
#support_numder {
	padding:0 1%;
	font-weight:bold;
	font-size:50px;
}

/*Q&A*/
#qa {
	padding:3% 1%;
}
#qa_box {
	border:3px solid #F27C6A;
	padding:3px;
}
#qa_box ul#qa_list {
	width:96%;
	max-width:800px;
	list-style:none;
	margin:15px auto;
}
#qa_box ul#qa_list li {
	display: flex;
	align-items: center;
	padding-bottom:1%;
	font-weight:bold;
}
#qa_box ul#qa_list li:nth-child(even) {
	padding-bottom:5%;
}
#qa_box ul#qa_list li .qa_icon img {
	display:block;
	width:42px;
}
#qa_box ul#qa_list li .qa_text {
	padding-left:2%;
}
#apologize_area {
	padding:5% 0;
	position:relative;
}
#apologize_area img {
	display:block;
	margin:0 auto;
	max-width:800px;
}
#apologize_text {
	position:absolute;
	top:34%;
	left:0;
	right:0;
	margin:0 auto;
	text-align:center;
	font-size:33px;
	font-weight:bold;
}
/*相談フォーム*/
#form_area {
	padding:3% 1%;
}
#form_area #form_title_area {
	position:relative;
}
#form_area #form_title_area img {
	display:block;
	max-width:938px;
	margin:0 auto;
}
#form_area #form_title_area #form_title_text {
	position:absolute;
	top:32%;
	left:6%;
	color:#FFF;
	font-weight:bold;
	font-size:40px;
}
#form_area form {
	display:block;
	margin:3% auto 5%;
	max-width:938px;
}
#form_area .form_title {
	display: flex;
	align-items: center;
	font-weight:bold;
	font-size:20px;
	padding-top:3%;
}
#form_area .form_title.label_top {
	padding-bottom:1%;
}
.required, .optional{
	padding:1px 3px;
	font-size:12px;
	color:#FFF;
	font-weight:normal;
	margin-left:10px;
}
.required {
	background:#F00;
}
.optional {
	background:#36C;
}

#form_area label {
	padding:1% 3%;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	border: 2px solid #161E7B;
	font-weight:bold;
	color:#161E7B;
}
#form_area input[type=radio] {
	opacity: 0;
}
#form_area input[type=radio]:checked + label {
	background:#161E7B;
	color:#FFF;
}
#form_area input[type="text"], #form_area textarea {
	width: 100%;
    padding: 0.5em;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 1.1rem;
    -webkit-appearance: none;
	border: 2px solid #161E7B;
}
#form_area textarea {
	height:200px;
}
#form_area input[type="submit"] {
    -webkit-appearance: none;
    display: block;
    margin: 20px auto;
    padding: 0.5em 0.6em;
    width: 60%;
    font-size: 1.4rem;
    background: #FD309E;
    color: #FFF;
    border-style: none;
    font-weight: bold;
    cursor: pointer;
}
#rule, #rule2 {
	border:1px solid #bbb;
	width:96%;
	margin:10px auto;
	padding:5px;
	overflow-y: scroll;
	font-size:0.9rem;
}
#rule span, #rule2 span {
	font-weight:bold;
}
#rule ul, #rule2 ul{
	list-style:none;
	padding-left:8px;
}
#rule {
	height:300px;
}
#rule2 {
	height:250px;
	width:96%;
	max-width:800px;
}
/*会社概要*/
#company_area {
	padding:3% 1%;
}
#company_area table {
	width:100%;
	max-width:800px;
	margin:0 auto;
}
#company_area table th, #company_area table td {
	border-bottom:2px solid #161E7B;
	padding:3% 0;
	color:#555;
}
#company_area table th {
	color:#161E7B;
}
#company_area table th#table_title {
	background:#161E7B;
	color:#FFF;
	font-size:24px;
	padding:2% 0;
}
/*footer*/
footer{
	background:#161E7B;
	color:#FFFFFF;
	text-align:center;
	padding:5% 0 8%;
}
#bottom_menu {
	display: flex;
	justify-content: center;
	background:#161E7B;
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	margin:0 auto;
	box-shadow: 0 -3px 4px rgba(0,0,0,0.5);
	opacity: 0;
	z-index: 50;
}
#bottom_menu a {
	color:#FFF;
}
#bottom_menu div {
	width:50%;
	text-align:center;
	color:#FFF;
	font-weight:bold;
	border-top:1px solid #36C;
	border-left:1px solid #36C;
	border-right:1px solid #003;
	font-size:12px;
	padding-bottom:15px;
}
#bottom_menu div img {
	max-width:40px;
	padding:5px 0;
}


/*error thanks*/
.message_area {
	width:100%;
	max-width:800px;
	margin:50px auto;
	text-align:center;
}
@media screen and (max-width:940px) { 
	#header_img {
		background-position:100% 75%;
		background-size:55% auto;	
	}
	#service_guide_title #service_guide_title_text {
		font-size:6vw;
		line-height:7vw;
	}
	#apologize_text {
		font-size:4vw;
	}
	#tel_area_box #tel_area_title {
		font-size:4.1vw;
	}
}
@media screen and (max-width:720px) {
	header {
		padding:10px 0;
	}
	#header_img {
		background-image:none;
		height:auto;
	}
	img#header_img_sp {
		display:block;
		width:100%;
		max-width:600px;
		margin:0 auto;
		padding-top:15px;
	}
	#header_text_area {
		position:relative;
		top:15%;
		left:0;
		right:0;
		width:94%;
		max-width:90vw;
		margin:0 auto;
		padding-bottom:10px;
		text-align:center;
		padding-top:10%;
	}
	#header_text_area h1 {
		font-size:8vw;
		line-height:11vw;
	}
	#header_text_area h1 #logo_text {
		font-size:14vw;
		line-height:21vw;
	}
	img#logo_explanation {
		display:inline-block;
	}
	#header_img_bottom {
		padding:3% 2% 5%;
	}
	#onayami_text {
		font-size:5.5vw;
	}
	#onayami_balloon {
		padding:0 2%;
	}
	.balloon_body .balloon_text {
		font-size:4.5vw;
	}
	#center_logo {
		font-size:9vw;
	}
	ul#service_guide_body li {
		width:48%;
		margin:8px 0.5%;
		font-size:3.4vw;
	}
	ul#service_guide_body li .service_guide_parts_title {
		font-size:2vw;
	}
	ul#service_guide_body li .service_guide_parts_title .service_guide_parts_title_icon img {
	width:30px;
}
	ul#service_guide_body li .service_guide_parts_title .service_guide_parts_title_text h3 {
		font-size:4.5vw;
	}
	.free_consultation_area .free_consultation_btn {
		font-size:4.5vw;
	}
	h3.border_title {
		font-size:5vw;
	}
	#step_box .step_parts .step_parts_text {
		font-size:4vw;
	}
	#cloud_sign h3 {
		font-size:4.8vw;
	}
	#apologize_text {
		font-size:4.5vw;
	}
	#form_area .form_title {
		font-size:4.2vw;
	}
	#form_area #form_title_area #form_title_text {
		font-size:4.8vw;
	}
	footer {
		padding:5% 0 28%;
	}
	#form_area .form_title {
		
	}
	#company_area table th {
		width:20%;
		font-size:2.5vw;
	}
	.pc_on {
		display:none !important;	
	}
}
@media screen and (min-width:721px) {
	.sp_on {
		display:none !important;	
	}
	.sp_on_tel {
		pointer-events: none;
	}
}
