/* Common Stylesheet */

/************************************ CSSリセット ***************************************************/
/************************* CSSのブラウザによる違いをリセットする ************************************/
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
	margin: 0;	
	padding: 0;	
	border: 0;	
	font-size: 100%;	
	font: inherit;	
	vertical-align: baseline;
}

/*** HTML5 display-role reset for older browsers ***/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
	display: block;
}
html {
  scroll-behavior: auto !important;
}

body {	
	line-height: 1;
	font-family:'Kosugi Maru', sans-serif;
}

ol, ul {	
	list-style: none;
}

blockquote, q {	
	quotes: none;
}

blockquote:before, blockquote:after,q:before, q:after {	
	content: '';	
	content: none;
}

table {	
	border-collapse: collapse;	
	border-spacing: 0;
}

/* ---------------- リセットEND --------------------- */

/* float使用時にバックグラウンドが縮小されるのを防ぐ　*/
.clearfix:after{
	content:".";
	display:block;
	clear:both;
	height%:0;
	font-size:0;
	visibility: hidden;
}
* html .clearfix {zoom: 1;}/*IE6*/
*+html .clearfix {zoom: 1;}/*IE7*/
/* -------------------- END ------------------------- */
.sp{ display:none }

/* --------------- アッパーエリア ------------------ */
#UpprArea{
	max-width:1920px;
	height:700px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
#Ptop{
	z-index:10;
}
#Ptop img{
	height:100%;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
}
#MLogo img{
	width:120px;
	position:absolute;
	top:5px; left:35px;
}
#Dmenu{}
/* Gnavi */
.gnavi__wrap {
    width: 650px;
	position:absolute;
	top:40px;
	right:10px;
}
.gnavi__lists {
    display: flex;
}
.gnavi__list {
    width: 25%;
    height: 30px;
    position: relative;
    transition: all .3s;
}
.gnavi__list:hover {
    background-color: #0071BB;
}
.gnavi__list:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}
.gnavi__list:hover::before {
    background-color: #0071BB;
}
.gnavi__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: all .3s;
}
.gnavi__list:hover a {
    color: #fff;
}

.dropdown__lists {
    transform: scaleY(0);/*デフォルトでは非表示の状態にしておく*/
    transform-origin: center top;/*変形を適応する基準をtopとする*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
    width: 100%;
    position: absolute;
    top: 30px;
    left: 0;
}
.gnavi__list:hover .dropdown__lists {
    transform: scaleY(1);/*Gナビメニューにホバーしたら表示*/
}
.dropdown__list {
    background-color: #004d80;
    height: 50px;
    transition: all .3s;
    position: relative;
}
.dropdown__list:not(:first-child)::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #3492d1;
    position: absolute;
    top: 0;
    left: 0;
}
.dropdown__list:hover {
    background-color: #003558;
}
.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}
.dropdown__list a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
}
/* Gnavi end */
/* --------------- フッターエリア -------------------*/
#FootArea{
	width:100%;
	height:250px;
	background:#eee;
}
#smap{
	max-width:980px;
	height:100%;
	margin:auto;
	position:relative;
}
#Flogo{
	position:absolute;
	width:280px;
	top:40px;
	left:50px;
}
#Flogo p{
	font-size:1em;
	font-weight:bolder;
	letter-spacing:0.1em;
	padding-top:0px;
	text-align:center;
	line-height:1.2em;
	color:#666;
}
#Flogo span{
	font-size:0.8em;
	text-align:center;
	display:block;
	width:80%;
	margin:15px auto 0;
	padding-top:5px;
	padding-bottom:5px;
	border:1px #333 solid;
	line-height:1.3em;
}
#Flogo img{
	width:100%;
}
#SmapInnr{
	max-width:600px;
	position:absolute;
	top:65px;
	right:50px;
}
.SmapBox{
	float:right;
	margin-left:50px;
}
.SmapBox a{
	text-decoration:none;
	color:#333;
	line-height:1.6em;
	letter-spacing:0.1em;
}
.SmapBox a:hover{
	text-decoration:underline;
}
#footbanner{
	width:100%;
	position:static;
	background:#004d80;
}
#footbanner p{
	font-size:0.8em;
	color:#ddd;
	font-weight:bold;
	text-align:center;
	margin-top:0px;
	padding-bottom:15px;
	letter-spacing:0.1em;
}
#ContArea{
	background:url(../common_img/contactback.png) top;
	height:300px;
	margin:50px auto;
	position:relative;
}
#ContBox{
	position:absolute;
	top:50%;
	left:50%;
	width:350px;
	height:350px;
	z-index:2;
	background:url(../common_img/contactimg.png) top;
	transform:translate(-50%,-50%);
}
#ContBox a{
	display:block;
	border:1px #fff solid;
	padding:15px;
	text-decoration:none;
	color:#fff;
	width:70%;
	margin:180px auto 0;
	z-index:3;
	text-align:center;
	transition:0.7s;
	background:rgba(255,255,255,0);
}
#ContBox a:hover{
	background:rgba(255,255,255,0.3);
}
@media screen and (max-width :820px){
.pc{ display:none; }
.sp{ display:inherit }
#Flogo{
	position:inherit;
	margin:100px auto;
	left:0;
}
/* --- ドロワーメニュー --- */
#Dmenu{
	position:fixed;
	right:0;
	top:0;
	width:100%;
	z-index:1;
}
#Dmenu img{
	width:100%;
	height:60px;
}
#MLogo img{
	width:70px;
	top:0px; left:20px;
	z-index:3;
}
/* --- フッター部分の固定ボタン --- */
.footer_area {
    position: fixed;
	display:block;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color:#004d80;
	height:60px;
	opacity:0.9;
	z-index: 100;
}

.footer_area .contact{
	position:relative;
	width:35%;
	display:block;
	float:left;
}

.footer_area .contact img{
	padding-left:25px;
}

.footer_area .call{
	position:relative;
	width:35%;
	display:block;
	float:left;
}

.footer_area .call img{
	padding-left:20px;
}
.footer_area .ttop{
	position:relative;
	width:18%;
	display:block;
	float:right;
}
.footer_area .top img{
	padding-right:10px;
}
}