/*　レスポンシブ設定
@media (max-width: 599px){
	body{	font-size:11px;	line-height: 28px;}}
@media (min-width: 600px) and (max-width: 959px){
	body{	font-size:12px;	line-height: 28px;}}
@media (min-width: 960px) and (max-width: 1280px){
	body{	font-size:12px;	line-height: 28px;}}
@media (min-width: 1281px) {
	body{	font-size:14px;	line-height: 35px;}}
*/

/*	
	font-family: 'Lato', 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

	font-family:"Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
*/

@charset "UTF-8";
/* CSS Document */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Noto Sans Japanese', serif;
  font-size: 1.2rem;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background-color: #fff;
}
*, *::before, *::after {
  box-sizing: border-box;
}
#wrapper{
	width: 100%;
	margin:0 auto;
	text-align: center;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	
}
ul,li{	
	list-style: none;
	margin:0;
	padding:0;
}
/*フォントサイズ*/
@media (max-width: 599px){
	body{	font-size:11px;}}
@media (min-width: 1281px) {
	body{	font-size:14px;}}


/*PC版ヘッダー*/
.pc_area{
  display:block;
}
.phone_area{
  display:none;
}
header{
    width: 100%;
    height: 100px;
	border-bottom: solid 2px #1d328d;
	position: fixed;
	background-color: #fff;
}
@media (min-width: 600px) and (max-width: 959px){
	header{	padding: 0 10%;}}
@media (min-width: 960px) and (max-width: 1280px){
	header{	padding: 0 15%;}}
@media (min-width: 1281px) {
	header{	padding: 0 15%;}}


.header{
	width:;
}
@media (min-width: 600px) and (max-width: 959px){
	.header{	width:100%; margin: 0 auto;}}
@media (min-width: 960px) and (max-width: 1280px){
	.header{	width:100%; margin: 0 auto;}}
@media (min-width: 1281px) {
	.header{	width:86%; margin: 0 auto;}}




/*サービス内容*/
.service{
	margin: 2px 0 2px 10px;
	padding: 0;
	font-weight: 200;
	text-align: left;
	font-size:10px;
}
/*会社名ロゴ*/
h1{
    width: 230px;
	height:auto;
    float: left;
    margin: 0;
}



h1 img{
    vertical-align: middle;
    width: 95%;
}
/*お問い合わせ・TEL*/
.contact{ 
	width: 72%;
	height: auto;
	float: right;
	right:0;
	text-align: right;
	position: fixed;
}
@media (min-width: 600px) and (max-width: 959px){
	.contact{	margin:25px 10% 0 0;}}
@media (min-width: 960px) and (max-width: 1280px){
	.contact{	margin:20px 15% 0 0;}}
@media (min-width: 1281px) {
	.contact{	margin:20px 22% 0 0;}}



.contact li{
	float: right;
}
.contact li a{
	text-decoration: none;
}
/*メール*/
.mail{
	width:300px;
	height:100px;
	margin:0.5% 2% 0 0;
}
@media (min-width: 600px) and (max-width: 959px){
	.mail{	width: 200px;}}

.btn-flat-simple {
	padding: 3% 13% 4% 18%;
	font-weight: 400;
	font-size:18px;
	text-decoration: none;
	color: #fff;
	background: #1d328d;
	transition: .4s;
	border-radius: 5px;
}
@media (min-width: 600px) and (max-width: 959px){
	.btn-flat-simple{	padding: 5% 8% 7% 13%;	font-size:15px;}}


.btn-flat-simple:hover {
	background: #4563e6;
}
.btn-flat-simple img{
	width:27px;
	margin: 5px 0 -7px 15px;
}
@media (min-width: 600px) and (max-width: 959px){
	.btn-flat-simple img{
	width:20px;
	margin: 2px 0 -5px 10px;}}


/*電話アイコン*/
.tel{
	width:39px;
	height:36px;
	text-align: center;
	margin:5px 0 0 0;
}
.tel img{
	width:35px;
}
/*電話*/
.nunber{
	width:200px;
	height:40px;
	font-weight: 900;
	font-size:28px;
	color:#1b3184;
	margin:2px 0 0 0;
	padding: 0 0 0 5px;
}
@media (min-width: 600px) and (max-width: 959px){
.nunber{
	width:185px;
	height:40px;
	font-weight: 900;
	font-size:20px;
	color:#1b3184;
	margin:4px 0 0 -8%;
	padding: 0 ;}}
@media (min-width: 600px) and (max-width: 959px){
	.tel img{
	width:28px;
	margin: 0;}}
a .nunber img:hover {
	background: #4563e6;
	transition: .4s;
	border-radius: 5px;
}
.nunber a:link {color:#1b3184;} /*未訪問のリンクの色*/
.nunber a:visited {color:#1b3184;} /*訪問済みのリンクの色*/
.nunber a:hover {color:#fff; background:#4563e6;} /*カーソルが乗っているリンクの色*/
.nunber:active {color:#1b3184;} /*クリック中のリンクの色*/

/*スマホ版ヘッダー*/
@media screen and (max-width: 699px){
.pc_area{display:none;}
.phone_area{display:block;}

header{
    width: 100%;
    height: 70px;
	border-bottom: solid 2px #1d328d;
	padding: 0 1%;
	position: fixed;
	background-color: #fff;
}
h1{
    width: 120px;
	height:auto;
    float: left;
    margin: 0;
}
/*サービス内容*/
.service{
	font-size:8px;
	margin: 2px 0 2px 5px;
	padding: 0;
	font-weight: 200;
	text-align: left;
}	
/*お問い合わせ・TEL*/
.contact{ 
	width: 50%;
	height: auto;
	margin:2% 2% 0 0;
	padding: 0;
	float: right;
	right:0;
	text-align: right;
	position: fixed;
}
.contact li{
	float: right;
}
.contact li a{
	text-decoration: none;
}	
.contact-list img{
	width:100%;	
		
}	
	
.mail{
	width:70px;
	height:auto;
	margin: 0 7% 0 0;
	padding: 0;
}	
.nunber{
	width:37px;
	height:auto;
	margin: 0;
	padding: 0;
}
a .nunber img:hover {
	background: #4563e6;
	transition: .4s;
	opacity: 0.5;
	border-radius: 5px;
}	
.mail a :hover {
	opacity: 0.5;
	transition: .4s;
}	
	
.address-sp{
	font-size:10px;
	color:#fff;
	padding: 7% 0 0 0;
	}
@media (max-width: 599px){
	.address-sp span{font-size:20px;}}
	
	
.footer-tel-sp img{
	width:100%;
	}
	
.head-office-sp{
	color:#fff;
	}
.head-office-sp a {
    color:#fff;
    text-decoration:none;
    }	
	
	
}



/*メイン*/
main{
}
@media (max-width: 599px){
	main{	width:100%; margin: 0 auto;}}
@media (min-width: 600px) and (max-width: 959px){
	main{	width:85%; margin: 0 auto;}}
@media (min-width: 960px) and (max-width: 1280px){
	main{	width:75%; margin: 0 auto;}}
@media (min-width: 1281px) {
	main{	width:65%; margin: 0 auto;}}



.top {
	width:90%;
	background: url("../img/background-img.png") no-repeat center center;
	background-size:contain;
	clear: both;
	margin:0 auto;
}
@media (max-width: 599px){
	.top{	margin:-8% auto 0 auto;}}

.titel-img{
}
@media (max-width: 599px){
	.titel-img{	margin-top:120px;}}
@media (min-width: 600px) and (max-width: 959px){
	.titel-img{	margin-top:100px;}}
@media (min-width: 960px) and (max-width: 1280px){
	.titel-img{	margin-top:120px;}}
@media (min-width: 1281px) {
	.titel-img{	margin-top:130px;}}
.top img{
	width:100%;
}
h2{
	font-family: "ヒラギノ角ゴ Pro W3",;
	font-weight: 600;
	text-align: center;
	color:#df2d15;
	-webkit-text-stroke: 1px #000;
}

@media (max-width: 599px){
	h2{	font-size:12px;	-webkit-text-stroke: 0.5px #000;}}
@media (min-width: 600px) and (max-width: 959px){
	h2{	font-size:22px;}}
@media (min-width: 960px) and (max-width: 1280px){
	h2{	font-size:30px;}}
@media (min-width: 1281px) {
	h2{	font-size:36px;}}


/*QA*/
.qa{
	width:100%;
	height:auto;
	background-color: #1b3ca3;
	text-align: center;
	font-weight: 600;
	border-radius: 18px;
	padding: 1%;
}
@media (max-width: 599px){
	.qa{	font-size:8px;	line-height: 14px;}}
@media (min-width: 600px) and (max-width: 959px){
	.qa{	font-size:14px;	line-height: 16px;}}
@media (min-width: 960px) and (max-width: 1280px){
	.qa{	font-size:20px;	line-height: 23px;}}
@media (min-width: 1281px) {
	.qa{	font-size:26px;	line-height: 30px;}}

.qa-q{
	color: #e3e149;
	margin: 0 auto;
	padding: 0 auto;
}
.qa-a{
	color: #fff;
	margin: 0 auto;
	padding: 1%;
	text-align: left;
	display: inline-block;

}

/*フローチャート*/
.secondary {
	margin:4% 0;
}
.secondary img{
	width:90%;
}
h3{
	width:60%;
	color: #1b3ca3;
	background-color: #88b542;
	font-weight: 600;
	-webkit-text-stroke: 1px #000;
	margin:0 auto 3% auto;
	padding: 2%;
}
@media (max-width: 599px){
	h3{	font-size:14px;}}
@media (min-width: 600px) and (max-width: 959px){
	h3{	font-size:24px;}}
@media (min-width: 960px) and (max-width: 1280px){
	h3{	font-size:30px;}}
@media (min-width: 1281px) {
	h3{	font-size:32px;}}

.pail{
	width:90%;
	font-weight: 800;	
	color: #000;
	margin:0 auto;
}
@media (max-width: 599px){
	.pail{	font-size:12px;}}
@media (min-width: 600px) and (max-width: 959px){
	.pail{	font-size:24px;}}
@media (min-width: 960px) and (max-width: 1280px){
	.pail{	font-size:30px;}}
@media (min-width: 1281px) {
	.pail{	font-size:32px;}}

.pail span{
	color:#1b3ca3;
}
@media (max-width: 599px){
	.pail span{	font-size:18px;}}
@media (min-width: 600px) and (max-width: 959px){
	.pail span{	font-size:26px;}}
@media (min-width: 960px) and (max-width: 1280px){
	.pail span{	font-size:32px;}}
@media (min-width: 1281px) {
	.pail span{	font-size:34px;}}



.pail-titel{
	width:65%;
	color: #1b3ca3;
	background-color: #eea932;
	font-weight: 600;
	-webkit-text-stroke: 1px #000;
	padding: 1%;
	margin:-3% auto 0 auto;
}
@media (max-width: 599px){
	.pail-titel{	font-size:12px;}}
@media (min-width: 600px) and (max-width: 959px){
	.pail-titel{	font-size:18px;}}
@media (min-width: 960px) and (max-width: 1280px){
	.pail-titel{	font-size:22px;}}
@media (min-width: 1281px) {
	.pail-titel{	font-size:26px;}}

.pailabout{
	width:90%;	
	margin:4% auto;
	background: #f8f8f8;
	border: #9d5722 5px solid;
}

.pail-img{
	width:45%;
	float: left;
    text-align: center;
}

.pail-img img{
	width:75%;

}
@media (max-width: 599px){
	.pail-img img{	margin-top:10%;}}

.pail-text{
	width:55%;
	text-align: left;
	display: inline-block;
	font-size:16px;
	padding: 0 5% 3% 0;
}
@media (max-width: 599px){
	.pail-text{	font-size:10px;	line-height: 20px;}}
@media (min-width: 600px) and (max-width: 959px){
	.pail-text{	font-size:13px;	line-height: 30px;}}
@media (min-width: 960px) and (max-width: 1280px){
	.pail-text{	font-size:16px;	line-height: 32px;}}
@media (min-width: 1281px) {
	.pail-text{	font-size:19px;	line-height: 38px;}}


h4{
	font-weight: 600;
	margin:0 0 1% 0;
}
@media (max-width: 599px){
	h4{	font-size:18px;}}
@media (min-width: 600px) and (max-width: 959px){
	h4{	font-size:26px;}}
@media (min-width: 960px) and (max-width: 1280px){
	h4{	font-size:32px;}}
@media (min-width: 1281px) {
	h4{	font-size:34px;}}

.area p{
	font-weight: 400;	
	margin:0 auto;
	padding: 0;
	text-align: left;
	display: inline-block
}
@media (max-width: 599px){
	.area p{	font-size:8px;width:85%;}}
@media (min-width: 600px) and (max-width: 959px){
	.area p{	font-size:14px;}}
@media (min-width: 960px) and (max-width: 1280px){
	.area p{	font-size:20px;}}
@media (min-width: 1281px) {
	.area p{	font-size:24px;}}


.caption p{
	color: #3f75bf;
	font-weight: 600;
	-webkit-text-stroke: 1px #314472;
	padding: 2%;
}
@media (max-width: 599px){
	.caption p{	font-size:12px;}}
@media (min-width: 600px) and (max-width: 959px){
	.caption p{	font-size:24px;}}
@media (min-width: 960px) and (max-width: 1280px){
	.caption p{	font-size:30px;}}
@media (min-width: 1281px) {
	.caption p{	font-size:32px;}}


footer{
	background-color:#1a388d;
	height:auto;
	width:100%;
	margin-bottom:-2%;
	padding: 0 15% 2% 15%;
}

.address{
	width:50%;
	float: left;
	color:#fff;text-align: left;
	font-weight: 600;
	line-height: 26px;
}
@media (min-width: 600px) and (max-width: 959px){
	.address{	font-size:14px;}}
@media (min-width: 960px) and (max-width: 1280px){
	.address{	font-size:16px;}}
@media (min-width: 1281px) {
	.address{	font-size:18px;}}

@media (min-width: 600px) and (max-width: 959px){
	.address span{	font-size:20px;}}
@media (min-width: 960px) and (max-width: 1280px){
	.address span{	font-size:26px;}}
@media (min-width: 1281px) {
	.address span{	font-size:30px;}}





.footer-tel{
	width:50%;
	float: right;
	margin:2% 0 0 0;
}

.footer-tel img{
	width:90%;
}

.head-office{
	clear: both;
	text-align: left;
	color:#fff;
	line-height: 30px;
}
@media (min-width: 600px) and (max-width: 959px){
	.head-office{	font-size:16px;}}
@media (min-width: 960px) and (max-width: 1280px){
	.head-office{	font-size:20px;}}
@media (min-width: 1281px) {
	.head-office{	font-size:20px;}}

.head-office a {
    color:#fff;
    text-decoration:none;
    }