@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);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap');

/* reset */
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;}
*{box-sizing:border-box;}
img{max-width: 100%;height: auto;}

body{
	font-family: 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 400;
	line-height: 1.8;
	font-size: 14px;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #0d2b31;
	background: #fff;
}

a{
	color: #0066ff;
	text-decoration: none;
}

a:hover, .active{
  text-decoration: underline;
}
a img.img_hv { 
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;}
a:hover img.img_hv { opacity: 0.7; }

a:active, a:focus,input:active, input:focus{outline:0;}


/* ヘッダー
------------------------------------------------------------*/
#header{
	position: relative;
    width:100vw;
    height:100vh;
	background-image: url("../images/mv_pc.jpg");
	background-position: center center;
	background-size: cover;
}

.logo { width: 270px; height: auto; position: fixed; top: 30px; left: 40px; z-index: 501; }
@media all and (max-width: 1060px){.logo { width: 240px;top: 32px; left: 30px;}}
@media all and (max-width: 900px){.logo { width: 210px;left: 20px;}}
@media all and (max-width: 848px){.logo { width: 180px;top: 36px;}}
@media all and (max-width: 800px){.logo { width: 230px;top: 12px; left: 16px;}}

.mv_block h2{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
	width: 50%;
	margin: 0 40% 0 10%;
}

.btn01 { position: absolute; right: 70px; bottom: 70px; width: 240px; }
.btn02 { position: absolute; left: 50%; bottom: 10px; width: 80px; margin-left: -40px; }
.btn01 img,.btn02 img { -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;}
.btn01:hover img,.btn02:hover img { opacity: 0.7; }
@media all and (max-width: 1280px){
.mv_block h2{width: 65%;margin: 0 30% 0 5%;}
}
@media all and (max-width: 1024px){
.mv_block h2{width: 70%;margin: 0 25% 0 5%;}
.btn01 { right: 60px; bottom: 60px; width: 24%; }
}
@media all and (max-width: 800px){
.mv_block h2{width: 90%;margin: 0 7% 0 3%;}
.btn02 { width: 60px; margin-left: -30px; }
.btn01 { right: 50px; bottom: 90px; width: 200px; }
}
@media all and (max-width: 560px){
.mv_block h2{width: 96%;margin: 0 3% 0 1%;}
.btn01 { right: 45px; bottom: 100px; width: 160px; }
}

/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 50px 10px 50px 0;
	text-align: center;
	font-size: 12px;
}


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

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

section{clear:both;}

section h2{
	font-size: 36px;
	font-weight:normal;
	text-align: center;
}
section h2 span { font-size: 16px; font-weight: 400; position: relative; top: -30px; }
h3{
	font-size: 26px;
	font-weight:normal;
}
h3 span { font-size: 18px; font-weight: 400; position: relative; top: -10px; }

.inner{
	width: 94%;
	margin: 0 auto;
	padding-bottom: 50px;
}

.col2 li{
	display: inline-block;
	width: 100%;
  	margin: 20px 0 20px 0;
}


/* SEC01
------------------------------------------------------------*/

.vision{
	width: 80%;
	margin: 0 auto;
	max-width: 1220px;
	padding-bottom: 80px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.v_txt { width: 70%; }
.v_photo { width: 27%; padding-right: 60px; box-sizing: border-box; }
.v_photo .v_img { position: relative; width: 100%; }
.v_img:before { position: absolute; bottom: -25px; right: -30px; width: 100%; height: 100%; background: rgba(50,120,136,.05); content: ""; z-index: 4; }
.v_photo .v_img img { position: relative; z-index: 5; }
.v_photo .v_img span { 
display: block;
width: 100%;
text-align: center;
font-size: 12px; color: #333; position: absolute;word-break: keep-all;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);}
.vision p { margin-bottom: 20px; }
@media all and (max-width: 1280px){
.v_txt { width: 64%; }
.v_photo { width: 33%; }
}
@media all and (max-width: 960px){.vision{padding: 0 30px;}.v_photo { padding-right: 30px;}}
@media all and (max-width: 840px){
.v_txt { width: 58%; }
.v_photo { width: 38%; }}

@media all and (max-width: 800px){
.v_txt { width: 100%; }
.v_photo { width: 50%; margin: 40px auto 70px; }}
@media all and (max-width: 560px){
.vision{ width: 90%; }
.v_photo { width: 70%; }}
@media all and (max-width: 420px){
.vision{ width: 100%; }
.v_photo { width: 90%; }}

/* SEC02
------------------------------------------------------------*/
.wrap{
	clear: both;
	width: 100%;
	background: #f6f6f6;
}

.bg{
	line-height: 0;
}

.txt h2{
	padding: 0 0 20px !important;
}
#sec02{
	background-image: url("../images/bgSec04.jpg");
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	-webkit-background-size: cover;
	color: #fff;
}
.sec02_wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
.sec02_wrap_R { display: flex; flex-flow: row-reverse; flex-wrap: wrap; justify-content: space-between; }
.sec02_img { width: 50%; background-position: center center; background-size: cover; }
.sec02_img.sec_d01 { background-image: url("../images/sec02_01.jpg"); }
.sec02_img.sec_d02 { background-image: url("../images/sec02_02.jpg"); }
.sec02_img.sec_d03 { background-image: url("../images/sec02_03.jpg"); }
.sec02_txt { width: 50%; padding: 70px 50px; }
.sec_d01t { background: rgba(131,248,164,.5); }
.sec_d02t { background: rgba(120,198,234,.5); }
.sec_d03t { background: rgba(241,173,194,.5); }

@media all and (max-width: 1200px){
.sec02_txt { padding: 50px 40px; }
}
@media all and (max-width: 800px){
.sec02_wrap_R { flex-flow: row; flex-wrap: wrap; }
.sec02_img { width: 100%; padding-top: 56.25%; }
.sec02_txt { width: 100%; }
}
@media all and (max-width: 560px){
.sec02_img { padding-top: 72.25%; }
.sec02_txt { padding: 40px 24px; }
}

/* SEC03
------------------------------------------------------------*/

.col3 { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 40px; }
.col3 li { width: 30%; }
.col3 li img { margin-bottom: 12px; }
.int_h3 { font-size: 20px; font-family: 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif; baseline-shift: baseline; font-weight: 500; }
.int_h3 span { font-size: 70%; top: 0; }
.vision.vision2 { width: 100% !important; padding-bottom: 0 !important; }


@media all and (min-width: 801px){
.vision.vision2.visionR { flex-flow: row-reverse; }
}

.color_01 { color: #4290b3; font-size: 34px; text-align: center; position: relative; padding-top: 120px; position: relative; }
h3.color_01:before { content: ""; width: 100%; position: absolute; top: 60px; left: 0; height: 0; border-bottom: 1px dotted #4290b3; }
.color_01 span { top: -30px; position: relative; }

h4 { font-weight: 500; font-size: 18px; }
h4 span { font-size: 80%; }
h4 span.tag { font-weight: 300; background-color: #64a0bb; color: #fff; margin-bottom: 30px; padding: 2px 10px 3px; display: inline-block; line-height: 1.5 !important; margin-top: 5px; }

.color_sec01 { color: #4bc26c !important; }
.color_sec02 { color: #4fa8d1 !important; }
.color_sec03 { color: #d47491 !important; }
h4 span.tag.tag01 { background-color: #4bc26c; }
h4 span.tag.tag02 { background-color: #4fa8d1; }
h4 span.tag.tag03 { background-color: #d47491; }

#sec03 .v_txt { width: 58%; }
#sec03 .v_photo { width: 39%; }
#sec03 .v_photo .v_img { margin-top:100px; }
#sec03 .v_img:before { bottom: -20px; }

@media all and (max-width: 800px){
.col3 li { width: 100%; margin-bottom: 40px !important; }
.col3 li img { width: 70%; margin: 0 auto 16px; display: block; }
.col3 { margin-bottom: 0; }
#sec03 .v_txt { width: 100%; }
#sec03 .v_photo { width: 100% !important; padding: 0 !important; display: flex; justify-content: space-between; }
#sec03 .v_photo .v_img { width: 45%; margin-top: 0; }
#sec03 .v_img:before { bottom: -10px; right: -14px; }
}
@media all and (max-width: 640px){
.int_h3 { font-size: 16px; }
.col3 li { width: 100%; max-width: 480px !important; padding: 0 20px; margin-bottom: 60px !important; }
.col3 li:last-child { margin-bottom: 20px !important; }
.col3 li img { margin-bottom: 10px; }
h4 span { font-size: 70%; }
}


/* SEC04
------------------------------------------------------------*/
#sec04{
	background:#f8f8f8;
}

ul.ga_wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }
ul.ga_wrap li { width: 23.5%; margin-bottom: 20px; }
@media all and (max-width: 960px){
ul.ga_wrap li { width: 31.5%; margin-bottom: 14px; }
}
@media all and (max-width: 640px){
ul.ga_wrap li { width: 48.5%; margin-bottom: 10px; }
}
@media all and (max-width: 480px){
ul.ga_wrap li { margin-bottom: 6px; }
}


/* SEC05
------------------------------------------------------------*/

dl{
	line-height: 1.2;
}

dt{
	clear: left;
	float: left;
	display: block;
	width: 20%;
	margin-right: 5%;
	margin-bottom: 20px;
	text-align: right;
	line-height: 1.6em;
	word-break: keep-all;
}

dd{
	width: 75%;
	float: left;
	text-align: left;
	margin-bottom: 15px;
	line-height: 1.6em;
}

dd { position: relative; }
dd:before { position: absolute; content: ""; height: 100%; width: 1px; border-right: 1px solid #ccc; top: 0; left: -30px; }
@media all and (max-width:980px){ dd:before { left: -20px; }}
@media all and (max-width:660px){ dd:before { left: -15px; }}
@media all and (max-width:480px){ dd:before { left: -10px; }}
#gmap {
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
#gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

/* SEC06
------------------------------------------------------------*/
#sec06{
	background-image: url("../images/yoko_bg.jpg");
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	-webkit-background-size: cover;
	color: #fff;
}


/* レスポンシブ設定
------------------------------------------------------------*/

@media all and (min-width: 1200px){
	.inner{
		width: 1024px;
		padding-bottom: 120px;
	}
	section h2{
		padding: 20px 0;
	}
}

	#mainnav.changeNav{
		background: rgba(50,120,136,.6);
	}
@media all and (min-width: 800px){
	body{
		font-size:16px;
	}
	
  a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}

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

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

	#mainnav li{
		display: inline-block;
		padding: 40px 20px;
		font-size: 16px;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
	}
	
  #mainnav a{
		color: #fff;
	}
	

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

@media all and (max-width: 1280px){
#mainnav li, #mainnav.changeNav li {padding: 40px 0 40px 30px;}
#mainnav ul{padding-right: 45px;}
}
@media all and (max-width: 1160px){
#mainnav li, #mainnav.changeNav li {padding: 40px 0 40px 24px;font-size: 14px;}
#mainnav ul{padding-right: 36px;}
}
@media all and (max-width: 1024px){
#mainnav li, #mainnav.changeNav li {padding: 40px 0 40px 16px; font-size: 12px;}
#mainnav ul{padding-right: 30px;}
}
@media all and (max-width: 960px){
#mainnav li, #mainnav.changeNav li {padding: 40px 0 40px 12px; font-size: 12px;}
#mainnav ul{padding-right: 20px;}
}

	/* SEC02 MESSAGE
	-----------------*/
	.txt, .bg{
		width: 50%;
		float: left;
		display: table;
	background: #f6f6f6;
	}

	#sec02_02 .txt, #sec02_02 .bg{
		float: right;
	}

	.vMid{
		display: table-cell;
		padding: 30px 24px;
		vertical-align: middle;
	}
	

	
	/* SEC05 PROFILE
	-----------------*/
	#sec05{
		padding-top: 120px;
	}
	
  #footer{
		padding: 30px 10px 70px 0;
	}
}

@media all and (min-width: 641px){
	.col2 li{
		width: 40%;
		padding: 0 3%;
		vertical-align: top;
	}
}

@media all and (max-width: 640px){
	#map iframe{
	  width: 96% !important;
		left: 2%;
	}
}

@media all and (max-width: 799px){
	#slogan h1{
		font-size: 31px;
	}

	#slogan h2{
		font-size: 16px;
	}

  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: 0 0 0 -9px;
  	background: #fff;
  	transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #fff;
  	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: fixed;
		top: 0;
		right: 0;
		width: 100%;
		text-align: right;
		z-index:500;
	}

	#mainnav ul{
		background: rgba(50,120,136,.9);
		text-align: left;
	}

	#mainnav li a{
		position: relative;
		display:block;
		padding:15px 25px;
		border-bottom: 1px solid #fff;
		color: #fff;
		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 #fff;
		border-right: solid 2px #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.col3 li{
		margin: 0 auto;
		display: block;
	max-width: 288px;
	}
}

@media all and (max-width: 1199px){
	section h2{
		padding: 20px 0;
	}
	.vMid{
		padding: 40px 24px;
	}
}

section { padding-top: 90px; }

/* ページトップ */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
	width: 60px;
	height: 60px;
	display: block;
}
#page-top img {
	width: 100%;
	height: auto;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;}
#page-top:hover img {
	filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;}
	
/* */
dd span { display: inline-block; word-break: keep-all; margin-right: 20px; }

.pcB,.pcB2,.pcB3 { display: inherit; }
.spB,.spB2,.spB3 { display: none; }
@media all and (max-width: 1388px){
.pcB3 { display: none; }
.spB3 { display: inherit; }
}
@media all and (max-width: 960px){
.pcB2 { display: none; }
.spB2 { display: inherit; }
}
@media all and (max-width: 560px){
.pcB { display: none; }
.spB { display: inherit; }
}

strong { font-weight: 400; position: relative; left: -7px; }
.txt_w4 { font-weight: 400; }