@charset "utf-8";

	body{
	    line-height: 1.5;
	    color: #000;
	    margin: 0;
	}
	#all{
    	width: 100%;
	    margin: 0 auto;
	}
	#top_title{
		background-image:url(../img/header_backgraund.png);
		background-repeat:no-repeat;
		background-size:cover;
	}
	#text_box{
	    padding: 12% 8% 5% 8%;
	    font-size: 1.3em;
	    padding-bottom: 5%;
	    max-width: 750px;
	    width: 84%;
	}
	#summary{
		background: #ffffff9e;
	    padding: 10px;
	    max-width: 655px;
	    margin: 0;
	    border-radius: 7px;
	    box-shadow: 0px 0px 12px #f7f8fb;
	    width: 92%;
	}
	#text_box h1{
		font-size: 1.6em;
	    margin: 15px 0 13px;
	    line-height: 1.2em;
	    letter-spacing: 2px;
	}
	.text_sign{
		color: #324c7b;
	    font-size: 1.2em;
	    font-weight: 600;
	    margin-left: 1%;
	}
	.ftcolor_red {
	    color: red;
	}
	section{
		margin-top: 150px;
	}
	.display_inblk{
		display: inline-block;
	}
	#service_list{
		padding: 0;
	    margin: 0 auto;
	    width: 95%;
	    max-width: 1180px;
	    list-style: none;
	}
	#service_list li{
		width: 98%;
		text-align: center;
		margin-bottom: 50px;
	}
	.service_list_div{
		display: flex;
	    flex-wrap: wrap;
	    justify-content: space-evenly;
	}
	.service_list_div div{
		max-width: 320px;
		margin: 50px 0 0;
	}
	#service_list img{
		width: 100%;
	}
	.detail_list{
		list-style: none;
		padding: 0;
		max-width: 500px;
	    width: 90%;
		margin: auto 0;
	}
	.detail_list li{
		text-align: left!important;
		margin-bottom: 10px!important;
		text-indent: -16px;
	    padding-left: 16px;
	}
	.content_title{
		text-align: center;
		font-size: 2em;
		margin-bottom: 80px!important;
	}
	.service_title{
		font-size: 1.5em;
	}
	
	.service_title {
	  position: absolute;
	  display: inline-block;
	  margin: 1rem 0 1rem -10px;
	  padding: 1rem 3rem;
	  color: #fff;
	  border-radius: 0 100vh 100vh 0;
	  background: #0075a9;
	  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
	  box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
	  top: 10px;
	  left: 0;
	}

	.service_title:before {
	  position: absolute;
	  bottom: -10px;
	  left: 0;
	  width: 0;
	  height: 0;
	  content: '';
	  border-top: 10px solid #005276;
	  border-left: 10px solid transparent;
	}
	.img_box{
		height: 230px;
	}
	
	.img_box img{
		border-radius: 3px;
    	box-shadow: 5px 5px 15px -5px #444;
	}
	.service_list_li{
		border: 1px solid #c1caff;
	    border-radius: 5px;
    	padding: 15px 5px;
		position: relative;
	}
	
	#meritPoint_list{
		padding: 0;
	    margin: 0 auto;
	    width: 95%;
	    max-width: 900px;
	    list-style: none;
	}
	#meritPoint_list li{
		font-size: 1.3em;
	    text-indent: -42px;
	    padding-left: 42px;
	    margin-bottom: 10px;
	}
	.meritPoint_title{
		display: flex;
	    max-width: 450px;
	    width: 98%;
	    margin: 0 auto;
	    flex-wrap: wrap;
	    justify-content: center;
	    line-height: 36px;
	}
	
	#request_list{
		display: flex;
	    max-width: 1080px;
	    width: 98%;
	    margin: 0 auto;
	    flex-wrap: wrap;
	    justify-content: center;
	    list-style: none;
	    padding: 0;
	}
	#request_list li {
	    max-width: 200px;
	    width: 100%;
	}
	#plus_list{
		display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;;
	}
	#plus_list li {
	    max-width: 400px;
	    width: 100%;
	}
	.footer {
	    position: relative;
	}
	.footer_inner-block {
	    z-index: 1;
	    padding-top: 120px;
	    position: relative;
	}
	.footer_wrap {
	    position: relative;
	    background: #3a6ca8;
	    z-index: 1;
	}
	.footer_contents {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    padding-top: 56px;
	    padding-bottom: 20px;
	    max-width: 1080px;
	    margin: 0 auto;
	}
	.footer_nav {
	    -webkit-box-flex: 1;
	    -ms-flex: 1 0 auto;
	    flex: 1 0 auto;
	}
	.footer_nav_menu {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-pack: end;
	    -ms-flex-pack: end;
	    justify-content: flex-end;
	    width: 98%;
	    padding: 0;
	}
	.footer_nav_menu_item {
	    margin-left: 40px;
	    font-size: 14px;
	    list-style: none;
	}
	.footer_nav_menu_item_link{
	    color: #fff;
	    
	}
	.footer_copyright{
		text-align: center;
	    color: white;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	}
	
	.footer_copyright_box{
		margin:0 10px 10px;
		display: inline-block;
	}
	.header {
	    width: 100%;
	    height: 120px;
	    position: fixed;
	    opacity: 1;
	    top: 0;
	    left: 0;
	    z-index: 100;
	    background: -webkit-gradient(linear,left bottom,left top,from(#ecf8ff00),to(#ecf8ffc7));
	    background: linear-gradient(to top,#ecf8ff00 0%,#7697d6b3 100%);
	    -webkit-transition: all .15s ease-out;
	    transition: all .15s ease-out;
	}
	.header_logo {
	    position: absolute;
	    z-index: 2;
	    top: 30px;
	    left: 15px;
	    height: 40px;
	    margin: 0;
	}
	.header_logo_link {
	    display: block;
	    height: 100%;
	}
	.header_logo_img {
	    height: 100%;
	    width: auto;
	}
	.header_nav {
	    height: 100%;
	    width: 100%;
	    position: relative;
	    top: 0px;
	}
	.header_nav_menu {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-pack: end;
	    -ms-flex-pack: end;
	    justify-content: flex-end;
/*	    width: calc(100% - 440px);*/
		width:98%;
	    height: 100%;
	    -webkit-transition: .2s all ease-out;
	    transition: .2s all ease-out;
	    font-size: 15px;
	    padding: 0;
	    margin: 0 auto;
	}
	.header_nav_menu_item {
	    height: 100%;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    margin: 0 5px;
	    font-size: 13px;
	    max-width: 150px;
	    width: 100%;
	    text-align: center;
	}
	.header_nav_menu_item_link {
	    display: inline-block;
	    text-decoration: none;
	    font-size: 16px;
	    font-weight: 500;
	    max-width: 145px;
	    width: 100%;
	    color: #222a89;
	    font-weight: 600;
	    font-size: 1.4em;
	}
	.contact_menu_item{
		list-style: none;
		padding: 15px 10px;
		height: 70px;
	}
	#contact_list{
	    list-style: none;
	    padding: 0;
	    margin: 0 auto;
	    text-align: center;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-around;
	    max-width: 800px;
	}
	#contact_list li{
		margin: 0 10px;
	}
	.contact_text {
	    font-size: 38px;
	    display: inline-block;
	    margin-left: 10px;
	    vertical-align: bottom;
	    font-weight: 600;
	    color: #1d2989;
	}
	
	
	.js-marker {
	  padding: 0 5px;
	  background-image: linear-gradient(#abbfe5, #abbfe5);
	  background-size: 0 50%;/*幅をゼロにしておく*/
	  background-position: 0 100%;
	  background-repeat: no-repeat;
	  transition: .8s;
	}

	/* アニメーション発火時 */
	.js-marker.active {
	  background-size: 100% 20%; /* '30%'の部分は上で設定した太さに合わせる */
	}
	
	#content_form{
		width: 140px;
	    height: 140px;
	    padding: 0;
	    color: #fff;
	    background: #eb6877;
	    -webkit-box-shadow: 0 7px 0 #e53b4e;
	    box-shadow: 0 7px 0 #e53b4e;
	    border-radius: 100%;
	    font-size: 16px;
	    font-weight: 700;
	    line-height: 1.5;
	    position: relative;
	    display: inline-block;
	    cursor: pointer;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    transition: all .3s;
	    text-align: center;
	    vertical-align: middle;
	    letter-spacing: .1em;
	    border: 0;
	}
	#content_form:hover{
		-webkit-transform: translate(0,4px);
		transform: translate(0,4px);
	    color: #fff;
	    -webkit-box-shadow: 0 3px 0 #e53b4e;
	    box-shadow: 0 3px 0 #e53b4e;
	}
	
	@media screen and (max-width: 460px){
		header{
			display:none
		}
		#top_title{
			background-repeat:no-repeat;
			background-size:contain;
		}		
		#text_box{
		    padding: 3%;
		    font-size: 1em;
		    max-width: 750px;
		    width: 94%;
		}
		.text_sign {
		    font-size: 1em;
		}
		
		#text_box h1{
			font-size: 1.3em;
		    margin: 15px 0 13px;
		    line-height: 1.2em;
		    letter-spacing: 2px;
		    width: 60%;
		}
		#summary{
			background: #ffffff;
		    padding: 10px;
		    max-width: 655px;
		    margin: 30px auto 0;
		    border-radius: 7px;
		    box-shadow: 0px 0px 12px #f7f8fb;
		    width: 94%;
		}
	
		section {
		    margin-top: 30px;
		}
		.content_title {
		    text-align: center;
		    font-size: 1.5em;
		    margin-bottom: 50px !important;
		}
		#service_box{
			width: 90%;
		    margin: 0 auto;
		}
		#request_list li {
		    max-width: 130px;
		    width: 100%;
		}
		
		
		
	}