@charset "utf-8";
/* up date 2016-12-01 */

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body { padding: 0; margin: 0; letter-spacing: 0.05em; line-height: 1.8; font-size: 16px; color: #333; font-family: 'Noto Sans Japanese', sans-serif, "メイリオ", Meiryo, Arial, Verdana, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; font-weight: 400; text-align: left; min-width:1300px; }
a, a:link, a:visited { color: #333; transition: .5s; }
a:hover { text-decoration: none; }
/*==============================================================*/
/* helper class*/
/*==============================================================*/

.contentsWrap { width: 1120px; margin: 0 auto; }
/*==============================================================*/
/* mainimg */
/*==============================================================*/

/* #mainimg { background: url(../../img/mainbg.jpg) no-repeat; background-size: cover; height: 750px; position: relative; }
#mainimg p { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%) }
#mainimg img { display: block; margin: 0 auto }
#mainimg img:first-child { margin-bottom: 20px; }
#wave { position: absolute; bottom: 0; width:100% } */

#mainimg { background: url(../../img/mainbg.jpg) no-repeat; background-size: cover; min-height: 750px; position: relative; }
#mainimg p { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%) }
#mainimg img { display: block; margin: 0 auto }
#mainimg img.catch { margin-bottom: 20px; }
#mainimg p > span {
	max-width: 720px;
	margin-top: 20px;
	padding: 15px 20px;
	line-height: 1.6;
	font-size: 14px;
	font-size: 500;
	color: #000000;
	border: 4px solid #000000;
	border-radius: 10px;
	display: block;
}

#mainimg p > span strong {
	margin-bottom: 0.5em;
	display: block;
	text-align: center;
	line-height: 1.5;
	font-size: 20px;
	font-weight: 700;
}

#mainimg p > span .red {
	color: #EE0000;
}
#wave { position: absolute; bottom: 0; width:100% }
/*==============================================================*/
/* header */
/*==============================================================*/
h1 { text-indent:-9999px; height:0}
#header { border-bottom: 5px solid #59dbf9; }
#header .contentsWrap { position: relative; overflow: hidden; }
#header figure { position: absolute; bottom: 0; left: 0 }
#gnavi { float: right; letter-spacing: -.4em;  }
#gnavi li { letter-spacing: normal; display: inline-block; width: 160px; vertical-align: middle; height: 95px; text-align: center; font-size: 16px; }
#gnavi a { display: block; height: 100%; padding-top: 20px; box-sizing: border-box; background-image: linear-gradient(rgba(0,0,0,0) 50%, #E5FDFF 50%); background-position: 0 0; background-size: auto 200%; transition: .3s; }
#gnavi a::after { content: attr(data-text); display: block; margin-top: .7em; color: #1b96d5; font-size: 10px; line-height: 1.4; }
#gnavi a:hover { background-position: 0 100%; }
/*==============================================================*/
/* top */
/*==============================================================*/
/*事業案内*/
#topService .btn { width: 290px; text-align: center; margin: 0 auto 60px; }
#topService .btn a { background: #5addfa; /* Old browsers */ background: linear-gradient(to right, #5addfa 0%, #2f87e1 100%); color: #fff; display: block; border-radius: 50px; padding: 10px 0; font-size: 18px; }
#topService .btn a:hover { background: linear-gradient(to right, #2f87e1 0%, #5addfa 100%); }
#topService .kind { background: url(../img/bggrid.png) repeat; padding: 100px 0 50px}
#topService .kind ul { text-align: center; margin-bottom:50px; }
#topService .kind li { display: inline-block; width: 320px; vertical-align:top }
#topService .kind li + li { margin-left: 80px; }
#topService h2 { font-size: 24px; margin-bottom: 10px; font-weight: 500 }
#topService h2 span { display:inline-block; vertical-align:middle} 
#topService h2::after { display: inline-block; font-family: 'Font Awesome 5 Free'; content: "\f138"; font-weight: 900; font-size: 15px; margin-left: 10px; vertical-align: middle; }
#topService .kind a { display: block }
#topService .kind a:hover { transform: translateY(-10px) }
/*コンセプト*/
#topConcept { padding: 70px 0 0; background: #d4f5ff; text-align: center; }
#topConcept .contentsWrap { position: relative; }
#topConcept figure img { position: absolute; top: -10px; left: -80px }
#topConcept figure img:nth-child(2) { left: inherit; right: -100px; top: 0 }
#topConcept h2 { font-size: 28px; font-weight: 500; line-height: 1.5; }
#topConcept h2::after { display: block; content: ""; width: 180px; border-bottom: 5px solid #00d3f9; margin: 20px auto 50px; }
#topConcept .innner { width: 600px; margin: 0 auto; padding: 40px 0 }
#topConcept .btn { width: 290px; margin: 50px auto; }
#topConcept .btn a { border: 3px solid #16d7f9; color: #16d7f9; background: #fff; text-align: center; display: block; border-radius: 50px; padding: 10px 0; font-size: 18px; }
#topConcept .btn a:hover { background:#16d7f9; color:#fff;}
/*==============================================================*/
/* footer */
/*==============================================================*/
/*コンテンツ内footer*/
#company { padding: 80px 0 120px; overflow:hidden; width:1140px;}
#company .left { float:left; width:400px; text-align:center; padding-top:30px; }
#company .left h2 { font-size:30px; font-weight:400; margin-bottom:30px; letter-spacing:0}
#company address { font-size:16px; letter-spacing:0}
#company address > span { display:block; font-size:20px; font-weight:500;}
#company address .btn { width:290px; text-align:center; margin:30px auto  }
#company address .btn a { background: #5addfa; /* Old browsers */ background: linear-gradient(to right, #5addfa 0%, #2f87e1 100%); color: #fff; display: block; border-radius: 50px; padding: 10px 0; font-size: 18px; }
#company address .btn a:hover { background: linear-gradient(to right, #2f87e1 0%, #5addfa 100%); }
#map_custmomize { width:700px; height:350px; float:right}
/*footer*/
#footer { background:#45bff2; color:#fff; position:relative; padding:50px 0 0 }
#footwave { position:absolute; top:-78px; z-index:1; width:100% }
#footer .contentsWrap { position:relative;}
#footer .footerimg img:nth-child(1) { position:absolute; top:-200px; z-index:0; }
#footer .footerimg img:nth-child(2) { position:absolute; top:-125px; right:0; z-index:2; animation: yacht 10s ease infinite;  }

 @keyframes yacht {
 0% {
transform: translateY(-15px)
}
50% {
transform: translateY(0)
}
100% {
transform: translateY(-15px)
}
}
#footer .contentsWrap > div { overflow:hidden; padding-bottom:80px;}
#footer nav { float:right;margin-top: 20px;}
#footer nav ul li { display:inline-block; font-size:14px;}
#footer nav ul li + li { margin-left:40px;}
#footer nav ul a { color:#fff; font-weight:700}
#footer nav ul a:hover { text-decoration:underline}
#footer .logo { float:left;}
#copyright { text-align:right; font-size:12px; color:#b4f3ff}
#copyright a { color:#fff;}
/*ページトップ*/
.backtotop { bottom: 50px; display: none; position: fixed; right: 50px; text-align: center; z-index: 9000; line-height:1.2; padding-bottom:0 !important}
.backtotop a { background-color: #3089e2; display: block; font-weight: bold;color: #fff;font-size: 14px; border-radius:50%; height: 100px; width: 100px;  }
.backtotop a::before { display: block; content: '\f062'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 36px; padding-top:10px;  }
.backtotop a:hover { opacity: 0.5; }