@charset "utf-8";

@media screen and (max-width: 820px) and (min-width: 640px) {

img {
max-width: 100%;
height   : auto;
}
body {
	height: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	 font-weight: 400;
	}
	/*上隙間埋め*/
	*{
	margin: 0px;
	padding: 0px;
		}
	#container{
		position: relative;
		min-height: 100%;
		height: auto !important;
		margin: 0;
		width: 100%;
	}
	.wrapper {
		width:100%;
		height: 100%;
		right: 0;
		left: 0;
		margin: auto;
		position: relative;
		overflow: hidden;
		z-index: 0;
	}
	
	.wrapper2 {
		width: 100%;
		right: 0;
		left: 0;
		margin: auto;
		position: relative;
		overflow: hidden;
	}
	
	.wrapper3 {
		width: 100%;
		right: 0;
		left: 0;
		margin: auto;
		position: relative;
		overflow: hidden;
		background-color: #FFF;
	padding-bottom: 50px;
	}
	
	.sc01{
		position: relative;
		/* 余白指定 */
		display        : flex;
		/* フレックスボックスにする */
		flex-direction : row;
		flex-wrap      : wrap;
		justify-content: center;
	}
	a{
		color: #585858;
	}
	a[target="_blank"] {
	 display: inline-block;
	 padding-right: 20px;
	 background-image: url(images/windou_ico.png);
	 background-repeat: no-repeat;
	 background-position: right center;
	 color: #333;
	}
	h1{
	 z-index: 4;
	display: block;
	padding-left: 15px;
	height: 120px;
	margin-bottom: 20px;
	}
	h1 a{
	}
	h1.mobile{
		z-index: 5;
		position: relative;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
		display: none;
	}
	h2{
		color: #003366;
		font-size: 17pt;
		font-weight: normal;
		padding-bottom: 20px;
	}
	h3{
		color: #333333;
		font-size: 14pt;
		font-weight: normal;
	}
	h4{
		display: inline-block;
		font-size: 13pt;
		line-height: 1.8em;
		text-align: left;
		font-weight: normal;
	}
	p{
	color: #000;
	font-size: 12pt;
	padding-bottom: 20px;
	line-height: 1.6em;
	padding-left: 10px;
	}
	ul{
	padding-left: 30px;
	}
	.center{
	 text-align: center;
		left: 0;
		right: 0;
		margin: auto;
	}
	.sp{
		height: 10px;
		overflow: hidden;
	}
	.sp01{
		height: 20px;
		overflow: hidden;
	}
	.sp02{
		height: 40px;
		overflow: hidden;
	}
	.sp03{
		position: relative;
		height: 80px;
		overflow: hidden;
	}
	
	/*トップビジュアル*/
	.top_img{
		position: relative;
		width: 100%;
		height: 600px;
		right: 0;
	}
	.top_img img{
		position: absolute;
		width: 100%;
		height: 80%;
		object-fit: cover;
	}
	/*ボトムビジュアル*/
	.bottom_imgBox{
	position: relative;
	height: 400px;
	}
	.bottom_innerBox{
		position: absolute;
		text-align: center;
		width: 100%;
		right: 0;
		left: 0;
		margin: auto 0;
		top: 150px;
	}
	.bottom_img{
		position: relative;
		width: 100%;
		height: 400px;
		right: 0;
	}
	.bottom_img img{
		position: relative;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/*heder_mail*/
	#sidemenu_box {
	 width: 120px;
	 height: 65px;
	 right: 0px;
	 position: absolute;
	 z-index: 5;
	 top: 0;
	 color: #FFF;
	 background-color: #004A82;
	 text-align: center;
	 padding-top: 5px;
	 font-size: 12pt;
		display: block;
	}
	#sidemenu_box p{
	margin-bottom: -10px;
	color: #FFF;
	
	}
	#sidemenu_box a{
		text-decoration: none;
	}
	.fa-envelope{
	color: #FFF;
	}
	/*メインメニュー*/
	/*=============================
	.btn-trigger
	=============================*/
	#menu-wrap{
		height: 100px;
		width: 100%;
		position: relative;
		left: 0;
		right: 0;
		margin: auto;
	}
	.toggle_btn {
		display   : block;
		position  : fixed;
		top       : 10px;
	right: 40px;
		width     : 50px;
		height    : 44px;
		transition: all .5s;
		cursor    : pointer;
		z-index   : 5;
		}
		
		.bt_bg{
		background-color: #000;
		padding: 10px 5px;
		z-index   : 4;
		display   : block;
		position  : fixed;
		top       : 11px;
		right     : 25px;
		width     : 50px;
		height    : 44px;
		}
		
		.toggle_btn span {
		display         : block;
		position        : absolute;
		left            : 0;
		width           : 100%;
		height          : 3px;
		background-color: #004078;
		border-radius   : 2px;
		transition      : all .5s;
		}
		.toggle_name{
		color: #FFF;
		text-align: center;
		font-size: 10pt;
		letter-spacing: 2px;
		}
		.toggle_btn span:nth-child(1) {
		top: 28px;
		}
		
		.toggle_btn span:nth-child(2) {
		bottom: 0px;
		}
		
		.open .toggle_btn span {
		background-color: #000;
		}
		
		.open .toggle_btn span:nth-child(1) {
		-webkit-transform: translateY(7px) rotate(-25deg);
		transform        : translateY(7px) rotate(-25deg);
		}
		
		.open .toggle_btn span:nth-child(2) {
		-webkit-transform: translateY(-7px) rotate(25deg);
		transform        : translateY(-7px) rotate(25deg);
		}
		
		/*============
		nav
		=============*/
		nav {
		display: block;
		position: fixed;
		top: 0;
		right: -300px;
		bottom: 0;
		width: 300px;
		background: #fff;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: all .5s;
		z-index: 3;
		opacity: 0;
		}
		
		.open nav {
		right   : 0;
		opacity: 1;
		}
		
		nav .inner {
		padding: 25px;
		margin-top: 70px;
		}
		
		nav .inner ul {
		list-style: none;
		margin-top: 0;
		padding   : 0;
		}
		
		nav .inner ul li {
		position     : relative;
		margin       : 0;
		}
		
		nav .inner ul li a {
		display            : block;
		color              : #000;
		font-size          : 11pt;
		padding            : 1em;
		text-decoration    : none;
		transition-duration: 0.2s;
		}
		
		nav .inner ul li a:hover {
		background: #d2d2d2;
		}
		
		nav .inner ul li li {
		position     : relative;
		margin       : 0;
		border-bottom: none;
		padding-left : 5px;
		}
		
		nav .inner ul li li li {
		position     : relative;
		margin       : 0;
		border-bottom: none;
		padding-left : 10px;
		}
		
		nav .inner ul li li li:before {
		content         : '';
		position        : absolute;
		left            : 50%;
		bottom          : 18px;
		/*線の上下位置*/
		display         : inline-block;
		width           : 3%;
		/*線の長さ*/
		height          : 1px;
		/*線の太さ*/
		left            : 1%;
		background-color: #cc0000;
		/*線の色*/
		border-radius   : 2px;
		/*線の丸み*/
		}
		
		nav .inner ul li li li a {
		font-size: 10pt;
		}
		
		/*============
		#mask
		=============*/
		#mask {
		display   : none;
		transition: all .5s;
		}
		
		.open #mask {
		display   : block;
		position  : fixed;
		top       : 0;
		left      : 0;
		width     : 100%;
		height    : 100%;
		background: #000;
		opacity   : .5;
		z-index   : 2;
		cursor    : pointer;
		}
		
	span.marker{
	 background:linear-gradient(transparent 75%, #fff799 75%);
	 display:inline;
	}
	.textBox{
		width: 800px;
		position: relative;
	}
	.textBox h4{
		padding-left: 70px;
	}
	.textBox2{
		position: relative;
		width: 94%;
		margin: auto;
		left: 0;
		right: 0;
	}
	.textBox3{
		width: auto;
		position: relative;
		margin: auto;
		left: 0;
		right: 0;
	}
	
	
	/*トップページ写真バナー*/
	.top_ba1{
		position: relative;
		width: 50%;
		height: 380px;
	}
	.top_ba1 img{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
	}
	
	.top_ba1_back{
		position: absolute;
		top: 480px;
		background-color: #003366;
		width: 100%;
		height: 400px;
		z-index: 0;
	}
	
	.top_ba2{
		position: relative;
		width: 50%;
		background-color: #FFF;
	}
	.top_ba2_inner{
		position: relative;
		height: auto;
		left: 0;
		right: 0;
		margin: auto;
		padding: 50px 30px 0px 30px;
	}
	
	.top_ba2 p{
		font-size:12pt;
		color: #000;
		line-height: 1.8em;
	}
	
	/*ボタン*/
	.button {
		position: relative;
		display: inline-block;
		padding: 9px 60px 10px 50px;
		color: #FFF;
		text-align: center;
		text-decoration: none;
		z-index: 1;
		background-color: #003366;
		left: 30%;
		right: 50%;
		margin: auto;
		}
		.button::after {
		position: absolute;
		top: 50%;
		right: 3%;
		content: '';
		margin-top: -5px;
		border: 7px solid transparent;
		border-top-width: 5px;
		border-bottom-width: 5px;
		border-left-color: #FFF;
		transition: all .2s;
		}
		.button:hover::after {
		right: 0%;
		}
		.button a{
		color: #FFF;
		text-decoration: none;
		font-size: 12pt;
		letter-spacing: 1pt;
		}
	
		.button2 {
			position: relative;
			display: inline-block;
			padding: 9px 60px 10px 50px;
			border: solid 1px #FFF;
			color: #FFF;
			text-align: center;
			text-decoration: none;
			z-index: 1;
			background-color: #FFF;
			margin: auto;
			}
			.button2::after {
			position: absolute;
			top: 50%;
			right: 3%;
			content: '';
			margin-top: -5px;
			border: 7px solid transparent;
			border-top-width: 5px;
			border-bottom-width: 5px;
			border-left-color: #003366;
			transition: all .2s;
			}
			.button2:hover::after {
			right: 0%;
			}
			.button2 a{
			color: #003366;
			text-decoration: none;
			font-size: 12pt;
			letter-spacing: 1pt;
			}
	
	/*画像横並び*/
	.box-row {
		position: relative;
		/* 余白指定 */
		display        : flex;
		/* フレックスボックスにする */
		flex-direction : row;
		flex-wrap      : wrap;
		justify-content: center;
		align-items: flex-start;
		width          : 100%;
		left: 0;
		right: 0;
		margin: auto;
	}
	.box-row img{
		padding: 0px;
		width: 300px;
	}
	
	.h-2-box{text-align: center;
		position: relative;
	}
	.h-2-box2{
		position: relative;
		overflow: hidden;
		margin-top: 100px;
		text-align: center;
	}
	h2.content1 {
		position: relative;
		display: inline-block;
		margin-bottom: 1.5em;
		font-size: 20pt;
	}
	
	h2.content1:before {
		content: '';
		position: absolute;
		bottom: -2px;
		display: inline-block;
		width: 60%;
		height: 3px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		background-color: #003366;
		border-radius: 2px;
	}
	
	h2.content2 {
		position: relative;
		display: inline-block;
		margin-bottom: 1.5em;
		color: #FFF;
	}
	
	h2.content2:before {
		content: '';
		position: absolute;
		bottom: -2px;
		display: inline-block;
		width: 60%;
		height: 2px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		background-color: #FFF;
		border-radius: 1px;
	}
	h2.topMidashi{
		font-size: 26pt;
		color: #FFF;
		background-color: #003366;
		text-align: center;
		padding: 20px 20px;
	}
	h2.top {
		position: relative;
		margin-bottom: 2.5em;
		color: #FFF;
		text-align: center;
		font-size: 24pt;
	}
	h2.top2 {
		position: relative;
		margin-bottom: 1.5em;
		color: #FFF;
		font-size: 24pt;
		z-index: 2;
		left: 0;
	right: 0;
	margin: 0 auto;
	}
	span.about{
		font-size: 14pt;
		padding: 0px 20px 10px 20px;
		font-weight: bold;
		vertical-align: middle;
		display: inline-block;
	}
	h3.content1 {
		padding: 1rem 1rem 1rem 2.5rem;
		position: relative;
		display: inline-block;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: left;
		font-size: 16pt;
		}
	h3.content1:before {
	position: absolute;
	top: 30%;
	left: 20px;
	width: 6px;
	height: 40%;
	content: '';
	background: #1079D5;
	}
	p.text1{
		padding-left: 40px;
	}
	/*キャプション*/
	figure{
	overflow: hidden;
	padding: 10px;
	}
	figcaption{
		font-size: 11pt;
		padding-left: 20px;
	}
	
	/* ---会社概要 --- */
	table.example {
		width: 98%; /* 表の幅 */
		border-collapse: collapse;
		font-size: 11pt;
		color: #000;
		margin-bottom: 50px;
		margin-right: auto;
		margin-left: auto;
		border-collapse: collapse;
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		border-top-width: 1px;
		border-bottom-width: 1px;
		border-top-style: dotted;
		border-bottom-style: dotted;
		border-top-color: #CCC;
		border-bottom-color: #CCC;
	}
	/* --- 表タイトル --- */
	table.example caption {
		padding-bottom: 20px; /* 表タイトルの下パディング */
		font-size: 12pt;
		color: #333;
		padding-top: 20px;
	}
	/* --- セル --- */
	
	table.example th
	{
		padding-top: 15px;
		padding-right: 8px;
		padding-bottom: 15px;
		padding-left: 8px;
		text-align: center;
		border-bottom-width: 1px;
		border-bottom-style: dotted;
		border-bottom-color: #CCC;
		border-right:1px dotted #CCC;
		font-weight: normal;
		background-color: #f4f4f4;
		}
	table.example td {
		padding-top: 20px;
		padding-right: 8px;
		padding-bottom: 20px;
		padding-left: 8px;
		border-bottom-width: 1px;
		border-bottom-style: dotted;
		border-bottom-color: #CCC;
	}
	table.example td.s1{
		text-align: right;
		width: 100px;
		padding-right: 50px;
	}
	
	/*map*/
	.map{
		top:10px;
		width: 100%;
		position: relative;
	}
	.map iframe,
	.map object,
	.map embed {
		height: 400px;
		width: 100%;
	}
	/*リスト*/
	ul.list1{
		padding-left: 50px;
		list-style-type: none;
		margin-bottom: 20px;
		text-align: left;
	}
	li.list1 {
	 font-size: 12pt;
	 color: #000;
	 letter-spacing: 1.5px;
	 position: relative;
	 padding-top: 5px;
	 padding-bottom: 5px;
	 line-height: 1.8em;
	 list-style: disc;
	}
	li.list1 span{
	 color: #333;
	}
	
	/* Footer */
	#footer {
		width: 100%;
		overflow: hidden;
	}
	small{
	position: relative;
	z-index: 5;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #003366;
	text-align: center;
	 background-color: #FFF;
	display: block;
	}
	.footer_conainor{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 50vw;
	background-color: #003366;
	position: relative;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	.footer_conainor img{
	width: auto;
	}
	ul.footer{
	 position: relative;
	 top: 30px;
		list-style-type: none;
	text-align: center;
	margin-right: 30px;
	}
	li.footer{
	font-size: 11pt;
	color: #FFF;
	letter-spacing: 1px;
	line-height:2em;
	}
	li.footer_menu{
		display: inline-block;
		-webkit-transform: skewX(150deg);
	-moz-transform: skewX(150deg);
	transform: skewX(150deg);
	border-right: 1px solid #ccc;
	margin-top: 30px;
	}
	li.footer_menu a{
		display:block;
	transform: skewX(-150deg);
	padding:0 10px;
		color: #FFF;
		font-size: 11pt;
		text-decoration: none;
	}
	li.footer_menu a:hover{
	color: #ccc;
	}
	li.footer_menu:last-child{
		border: none;
	}
	.snsico{
		position: absolute;
		left: 50px;
	top:230px;
	}
	
	/*single*/
	h2.tytle{
		font-size: 18pt;
		font-weight: normal;
		color: #666;
		letter-spacing: 2px;
		padding-top: 20px;
		padding-bottom: 40px;
		overflow: hidden;
	}
	.posted{
		font-size: 10px;
		color: #999999;
		margin-top: 40px;
	}
	.posted a{
		font-size: 11pt;
		color: #666666;
	}
	.post{
	
		width: 900px;
		font-size: 11pt;
		line-height: 1.8em;
		letter-spacing: 1px;
		margin-right: auto;
		margin-left: auto;
		z-index: 5;
		position: relative;
	}
	.post-content{
	width: 100%;
	overflow: hidden;
	}
	.post a{
		color: #666;
		font-size: 11pt;
		font-weight: normal;
		text-decoration: underline;
	}
	.post li{
	padding-top: 5px;
	padding-bottom: 5px;
	}
	.post p {
	}
	
	/*Contact form7 CSS*/
	.wpcf7 {}
	
	.wpcf7 p {
		font-size     : 11pt;
		color         : #333;
		letter-spacing: 2px;
		line-height   : 1.5em;
	}
	
	.wpcf7 input {
		height          : 30px;
		font-size       : 12pt;
		color           : #000;
		border-radius   : 3px 3px 3px 3px;
		padding-left    : 5px;
		border          : 1px solid #333;
		background-color: rgba(255, 255, 255, 0.1);
	}
	
	.wpcf7-form .wpcf7-submit {
		color     : #000;
		margin-top: 30px;
		width     : 80px;
	}
	
	.wpcf7-form .textarea {
	font-size: 12pt;
	padding: 10px;
	}
	
	.wpcf7 input.name {
		margin-left: 0%;
		width      : 170px;
	}
	
	.wpcf7 textarea[name="your-message"] {
		width : 60%;
		height: 200px !important;
	}
	
	input[type="checkbox"],
	input[type="radio"] {
		display       : inline-block;
		margin        : 0 2px;
		padding       : 0;
		vertical-align: middle;
		position      : relative;
		top           : -1px;
		cursor        : pointer;
		width         : 20px;
	}
	
	.wpcf7-form .wpcf7-select,
	select {
		border-color : #000000;
		width        : 20%;
		height       : 2.6em;
		font-size    : 11pt;
		border-radius: 3px 3px 3px 3px;
	}
	
	dl.mform {
		padding: 15px 0;
	}
	
	dt.mform {
		padding-bottom: 5px;
		width         : auto;
	}
	span.mform{
		color: #f93a31;
	}
	
	
	/*pagination*/
	.pagination {
		font-size: 12pt;
		line-height: 13px;
		padding-top: 20px;
		padding-bottom: 20px;
		margin-bottom: 30px;
		margin-left: 50px;
	}
	
	.pagination span, .pagination a {
	display: block;
	float: left;
	text-decoration: none;
	width: auto;
	color: #FFF;
	border: 1px solid #FFF;
	background-color: #003366;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 0;
	padding-top: 5px;
	padding-right: 11px;
	padding-bottom: 7px;
	padding-left: 11px;
	}
	
	.pagination a:hover{
		color: #FFF;
		background-color: #0099cc;
	}
	
	.pagination .current{
		padding: 5px 11px 7px 11px;
		background-color: #003366;
		color: #fff;
	}
	/* ページトップへボタン */
	html {
		scroll-behavior: smooth;
	}
	.pagetop {
		height: 50px;
		width: 50px;
		position: fixed;
		right: 30px;
		bottom: 30px;
		background: #fff;
		border: solid 2px #000;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}
	
	.pagetop__arrow {
		height: 10px;
		width: 10px;
		border-top: 3px solid #000;
		border-right: 3px solid #000;
		transform: translateY(20%) rotate(-45deg);
	}
	
	/*404ページ*/
	.er404{
	 text-align: center;
	 padding: 50px
	}
	.er404 h2{
	font-size: 15pt;
	 color: #000
	}
	.er404 p{
	 font-size: 12pt;
	 color: #000
	}
	.er404 a{
	 background-color: #000;
	 padding: 8px 20px;
	 color: #FFF;
	 margin-top: 50px;
	display: inline-block;
	text-decoration: none;
	}
	p.er{
	 font-weight: bolder;
	 font-size: 100pt;
	}
	
}