@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);

/* 初期化 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	overflow-x: hidden;
}

/* リンク基本 */
a{color: #000; text-decoration: none;}
a:hover, .active{text-decoration: underline;}
a:active, a:focus,input:active, input:focus{outline:0;}

/* 共通設定------------------------------------------------------------*/
h1, h2, h3{
	font-family: 'Josefin Sans', 'Noto Sans JP',serif;
}

img{
	width: 100%;
	height: auto;
}

section{clear:both;}

section h1{
	position:absolute;
	color: #fff;
	font-weight:normal;
	text-align: right;
	letter-spacing: 0.5em;
	border-bottom: solid 2px white;
	background-color: rgba(100, 100, 250, 0.5);
	text-shadow: 2px 2px 2px #000;
}

section h2{
	font-size: 20px;
	font-weight:normal;
	text-align: center;
	letter-spacing: 0.15em;
}


.table table{
	margin: 0 auto;
	margin-bottom: 50px;
	font-size:16px;
}

.table tr,td{
	width: 500px;
	padding: 10px 40px 10px 20px;
	border: solid 1px;
}

.table th{
	width: 200px;
	padding: 10px 40px 10px 20px;
	font-weight: normal;
	background-color: #87b7de;
	border-left: solid 5px #6487a3;
}

/* フッター 共通部分 -----------------------------------------------------*/
#footer{
	width:100%;
	color: #000;
}

#footer .footIndex{
 font-weight:bold;
 border-bottom: double 3px #000;
}


#footer .sitemap{
	text-align: left;
}

.sitemap a{
	margin: 0 100px;
}

.footTable{
	margin-top:20px;
	width:80%;
	font-size: 16px;
	font-weight:normal;
}

.footTable th{
	text-align: right;
	padding:1px 5px 1px;
	font-weight:normal;
}

.footTable td{
	border-style:none;
	text-align: left;
	padding:1px 20px 1px;
}

#copyright{
	text-align: center;
	font-size:16px;
}

/* //フッター------------------------------------------------------------*/


/* SEC01 タイトル
------------------------------------------------------------*/
.title{
	width: 100%;
	background: url(../images/business/title.jpg) no-repeat center;
	background-size:cover;
	background-position: 0px 28%;
	margin-top: 67px;
}

/* SEC02 内容
------------------------------------------------------------*/
#sec02 {
	padding:30px 0;
	background: #e6f2ff;
}

.waku{
	display: flex;
	flex-wrap: wrap;
	margin:0 auto;
	background: #fff;
	justify-content: space-around;
}

.wrap{
	width: 100%;
	margin: 20px;
	background-color: : #fff;
	/*box-shadow: 1px 1px 8px #808080;*/
	/*border: solid 1px green;*/
}

.tit{
	width:100%;
	margin:auto;
}
.tit h2{
	text-align:left;
	margin: 20px 10px 0 10px;
	padding:5px 10px;
	background-color: #e6f2ff;
	border-left: solid 10px #2877f7;
	border-bottom: solid 2px #2877f7;
}

.wrap ul{
	margin:0 20px;
	list-style-type:disc;
	/*border: solid 1px green;*/
}

  .wrap li{
	 width:100%;
	 margin:0 50px;
 }

 .wrap h3{
	margin:10px 0;
	font-weight: normal;
 }

.photo img{padding:10px 2px;}

.spacer{
	margin:40px 0;
}

/*※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※*/

/*PC用(Width800～それ以上はココを適用)*/

@media only screen and (min-width: 1081px){
		/* タイトル(PC用)-----------------*/
	section h1{
		width:30%;
		top:250px;
		font-size: 42px;
	}
	.title{padding:150px 0;}

	.waku{width:80%;}

	.tit h2{font-size:20px;}

	.wrap ul{
		width:48%;
		font-size:18px;
	}

	.wrap li{margin:0 50px;}

	.wrap h3{
 		width:48%;
 		margin:10px 0;
 		font-size:18px;
  }

	.photo{
		width:50%;
		margin: 10px;
		float:right;
	}

	.photo img{width:48%;}

/* フッター(PC用)-----------------*/
		#footer{
			display:flex;
			height:300px;
			background: linear-gradient(90deg,#87b7de 60%,#87b7de 100px,#E6F2FF 100px,#E6F2FF 100%);
		}

		#footer img{
			width:333px;
			margin: 0 30px;
			margin-top:20px;

		}

		#footer .sitemap{
			padding: 20px 30px;
			margin-left: auto;
			width:30%;
			white-space: nowrap;
			font-size: 18px;
		}

		#footer .footer{
			text-align: left;
			width:40%;
		}

		.footTable{
			margin-left: auto;
			width:100%;
			white-space: nowrap;
			font-size: 16px;
		}

		.footTable th{
			width: 220px;
		}

		.footTable td{
			width: 500px;
		}
}


/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/


/*タブレット用(Width721まで適用される部分)*/
@media only screen and (min-width: 721px) and (max-width: 1080px){
	/* タイトル(タブレット用)-----------------*/
	section h1{
		width:50%;
		top:160px;
		font-size: 36px;
	}
	.title{padding:100px 0;}

	.waku{width:90%;}

	.tit h2{font-size:18px;}

	.wrap ul{
		width:55%;
		font-size:18px;
	}

	.wrap li{margin:0 40px;}
	.wrap h3{
 		width:55%;
 		margin:10px 0;
 		font-size:18px;
  }

	.photo{
		width:40%;
		margin: 10px;
		float:right;
	}

	.photo img{width:100%;}

	/* フッター(タブレット用)-----------------*/
		#footer{
			display:flex;
			height:300px;
			background: linear-gradient(90deg,#87b7de 45%,#87b7de 100px,#E6F2FF 100px,#E6F2FF 100%);
		}

		#footer img{
			width:333px;
			margin: 0 50px;
			margin-top:20px;
		}

		#footer .sitemap{
			padding: 20px 10px;
			margin-right: auto;
			width:42%;
			font-size: 16px;
			white-space: nowrap;
		}

		#footer .footer{
			margin-right: auto;
			text-align: left;
			width:60%;
			margin-left:0px;
		}

		.footTable{
			margin-left: auto;
			width:90%;
			white-space: nowrap;
			font-size: 14px;
		}

		.footTable th{
			width: 80px;
		}

		.footTable td{
			width: 300px;
		}




}

/*◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎*/
/*スマホ用(Width720まで適用される部分)*/
@media only screen and (max-width: 720px){
	/* タイトル(スマホ用)-----------------*/
	section h1{
		width:60%;
		top:140px;
		font-size: 28px;
	}

	.title{padding:80px 0;}

	.waku{width:100%;}

	.tit h2{font-size:16px;}

	.wrap ul{
		width:100%;
		font-size:16px;
	}

	.wrap li{margin:0 20px;}

	.wrap h3{
 		width:100%;
 		margin:10px 0;
 		font-size:16px;
  }

	.photo{
		width:100%;
		margin: auto;
	}

	.photo img{width:48%;}

/* フッター(スマホ用)-----------------*/
		#footer{
			display:block;
			height:560px;
			background: linear-gradient(-180deg,#87b7de 45%,#87b7de 100px,#E6F2FF 100px,#E6F2FF 100%);
		}

		#footer img{
			width:333px;
			margin: 0 20px;
			margin-top:20px;
		}

		#footer .sitemap{
			padding: 20px 50px;
			margin-left: auto;
			width:42%;
			font-size: 16px;
			white-space: nowrap;
		}

		#footer .footer{
			margin-right: auto;
			text-align: left;
			width:99%;
			margin-left:0px;
		}

		.footTable{
			margin-left: auto;
			width:90%;
			white-space: nowrap;
			font-size: 14px;
		}

		.footTable th{
			width: 80px;
		}

		.footTable td{
			width: 300px;
		}
}



/*ハンバーガーメニュー(PC・tablet)*/
@media only screen and (min-width: 721px){
	a#menu{
		display:none;
	}

	.panel{
		display:block !important;
		white-space: nowrap;
	}

	#mainnav{
		position:fixed;
		top: 0;
		width:100%;
		z-index:500;
	}

	#mainnav ul{
		text-align: right;
		padding-right: 30px;
	}

	#mainnav li{
		display: inline-block;
		padding: 20px 10px 20px;
		font-size: 16px;
		font-weight: 500;
	}

	#mainnav a{
		color: #000;
	}

	#mainnav img{
		display: inline;
		float: left;
		margin-top: 1.0em;
		margin-left: 0.8em;
		width: 240px;
	}

/*スクロール後の白いナビ*/
	#mainnav.changeNav{
		background: rgba(255,255,255,.9);
		border-bottom: 1px solid #d1d1d1;
		height: 64px;
	}

	#mainnav.changeNav li{
		padding: 20px 10px;
	}

	#mainnav.changeNav img{
		display: inline;
		float: left;
		margin-top: 1.0em;
		margin-left: 0.8em;
		width: 240px;
	}

	#mainnav.changeNav a{
		color: #000;
	}
}

/*ハンバーガーメニュー(スマホ)*/
@media only screen and (max-width: 720px){
	.declaration h2{
		display:inline-block;
 		text-align:left;
		font-size: 14px;
	}

  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 40px;
  	height: 40px;
  	margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #000;
  	transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #000;
  	transition: .3s;
	}

	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: 0;
		z-index: 100;
	}

	#mainnav{
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		text-align: right;
		z-index:500;
	}

	#mainnav ul{
		border-bottom: 1px solid #ccc;
		background: #fff;
		text-align: left;
	}

	#mainnav img{
		display: inline;
		float: left;
		margin-top: 1.0em;
		margin-left: 0.8em;
		width: 240px;
	}

	#mainnav li a{
		position: relative;
		display:block;
		padding:15px 25px;
		border-bottom: 1px solid #ccc;
		color: #000;
		font-weight: 400;
	}

	#mainnav li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #000;
		border-right: solid 2px #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}