@charset "UTF-8";

/** webフォントを使用 **/
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,600,700&subset=japanese');

@media print, screen {

/********************

common

********************/

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
	display: block;
}

body {
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.8em;
	color: #333;
	font-family: 'Noto Serif JP', "Hiragino Mincho Pro", "MS PMincho", Meiryo, sans-serif;
	font-size: 16px;
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #FFF;
	letter-spacing: 0.05em;
}

ul, ol, dl {
	padding: 0;
	margin: 0;
	list-style: none;
}

h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd {
	margin: 0;
}

th, td {
	font-weight: normal;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

figure, figcaption {
	margin: 0;
	padding: 0;
}

img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

a img {
	border: none;
}

a {
	color: #0E7AC4;
	outline: none;
	text-decoration: none;
}

a:hover {
}


hr {
	border: none;
}

.clear {
	clear: both;
	width: 0;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-color: #fff;
}

.fl_left {
	float: left;
}

.fl_right {
	float: right;
}

.overhidden {
	overflow: hidden;
}

.none {
	display: none !important;
}

.top {
	margin-top: 0px !important;
	padding-top: 0px !important;
}

.cen_mid {
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.red {
	color: #F00;
}

.gray {
	color: #666;
}

.yellow {
	color: #FBA848;
}

.blue {
	color: #9b59b6;
}

.green {
	color: #58BE89;
}

.orange {
	color: #F8823C;
}

.brown {
	color: #998258;
}

.bg_gray {
	background-color: #F5F5F5;
}

.bg_blue {
	background-color: #0E7AC4;
}

.bg_orange {
	background-color: #F8823C;
}

.s_font {
	font-size: 0.9rem;
}

/** 文字の太さ **/
.noto100 {font-weight:100 !important;}
.noto300 {font-weight:300 !important;}
.noto400 {font-weight:400 !important;}
.noto500 {font-weight:500 !important;}
.noto700 {font-weight:700 !important;}
.noto900 {font-weight:900 !important;}


/***
リスト時に使える矢印
************************************/
.list_arrow li {
	position: relative;
	padding-left: 15px;
}

.list_arrow li::before,
.list_arrow li::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 0;
	margin-top: -5px;
	border-top: 5px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid #0E7AC4;
}

.list_arrow li::after {
	z-index: 1;
	margin-left: -3px;
	border-left-color: #FFF;
}


/***
ボタン・リンクのhoverアニメーション
************************************/

/** 共通設定 **/
.button {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
}

.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/** 上からスライドで背景色が変わる **/
.curtain {
	display: block;
	width: 100%;
	position: relative;
	z-index: 2;
	background-color: #FFF;
	border: 1px solid #333;
	color: #333;
	line-height: 50px;
	overflow: hidden;
}

.curtain:hover {
	color: #FFF !important;
}

.curtain::after {
	top: -100%;
	left: 0%;
	width: 100%;
	height: 100%;
}

.curtain:hover::after {
	top: 0;
	background-color: #333;
}

/** 左からスライドで背景色が変わる **/
.curtain_left {
	display: block;
	width: 100%;
	position: relative;
	z-index: 2;
	border: 1px solid #000;
	color: #333333;
	line-height: 50px;
	overflow: hidden;
}

.curtain_left:hover {
	color: #FFFFFF;
}

.curtain_left::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
}

.curtain_left:hover::before {
	left: 100%;
}

.curtain_left::after {
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
}

.curtain_left:hover::after {
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
}

/** 線が文字に被る **/
.over-border {
	position: relative;
	transition: .3s;
} 

.ob-inner {
	padding: 0;
} 

.ob-inner::before {
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	width: 0px;
	height: 1px;
	background-color: #0E7AC4;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.ob-inner::before {
	bottom: 0;
}

.ob-inner:hover::before {
	width: 100%;
}

/** 文字の下に線が表示される 左から右 **/
.right-border {
	display: inline-block;
	position: relative;
	color: #333;
}

.right-border:hover {
	color: #0E7AC4;
}

.right-border::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    height: 3px;
    width: 100%;
	background-color: #999;
}

.right-border::after {
    background-color: #3498db;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    height: 3px;
    left: 0;
	bottom: 0;
    width: 0px;
}

.right-border:hover::after {
    width: 100%;
    width: calc(100% + 1px);
}

/** 枠が四角から伸びて表示される **/
/** <a class="border-stretch"><span class="bs-inner"> 〜 </span></a>と使用 **/
.border-stretch {
	display: inline-block;
	position: relative;
}

.border-stretch::after,
.border-stretch::before,
.bs-inner::after,
.bs-inner::before {
    background-color: #3498db;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

.border-stretch::after {
    height: 1px;
    left: -1px;
    top: -1px;
    width: 0px;
}

.border-stretch::before {
    bottom: -1px;
    height: 1px;
    right: -1px;
    width: 0px;
}

.bs-inner::after {
    bottom: -1px;
    height: 0px;
    left: -1px;
    width: 1px;
}

.bs-inner::before {
    height: 0px;
    right: -1px;
    top: -1px;
    width: 1px;
}

/* hover */
.border-stretch:hover::after,
.border-stretch:hover::before {
    width: 100%;
    width: calc(100% + 1px);
}

.border-stretch:hover .bs-inner::after,
.border-stretch:hover .bs-inner::before {
    height: 100%;
    height: calc(100% + 1px);
}

/** 背景カラーが左右に分かれる **/
.open_bg {
	position: relative;
	z-index: 2;
	background-color:;
	border:;
	color:;
}
.open_bg:hover {
	background-color:;
	border-color:;
	color:;
}
.open_bg::before,
.open_bg::after {
	top: 0;
	width: 50%;
	height: 100%;
	background-color:;
}
.open_bg::before {
	right: 0;
}
.open_bg::after {
	left: 0;
}
.open_bg:hover::before,
.open_bg:hover::after {
	width: 0;
	background-color:;
}

.border-none {
	border: none !important;
}





/********************

container

********************/
#container {
	width: 100%;
	height: auto;
	overflow: hidden;
}



/********************

header

********************/
#header {
	width: 100%;
}




/********************

content

********************/
#content .mainImg img {
	display: block;
}





/********************

footer

********************/
#footer section {
}

#footer #pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 0.8rem;
	text-align: center;
	z-index: 100;
}

#footer #pageTop a.curtain {
	display: table-cell;
	width: 100px !important;
	height: 100px !important;
	vertical-align: middle;
	padding: 10px;
	border: 1px solid #0a3369;
	background-color: #0a3369;
	color: #FFF;
	line-height: normal;
}

#footer #pageTop a.curtain:hover {
	color: #0a3369 !important;
	border: 1px solid #0a3369;
}

#footer #pageTop a.curtain:hover::after {
	background-color: #FFF;
}

#footer address {
	color: #333;
	font-style: normal;
	font-size: 0.9rem;
	text-align: center;
	word-break: keep-all;
	border-top: 1px solid #333;
}


}





/***********************************************************
for smartphone
************************************************************/
@media only screen and (max-width:736px){

/********************

common

********************/
body {
	-webkit-text-size-adjust: 100%;
}

.sp_none {
	display: none !important;
}

.sp_bg_gray {
	background-color: #F5F5F5;
}

#header a {
	color: #222;
}

img {
	width: 100% !important;
}

.main {
	padding-top: 60px;
	height: 260px !important;
	width: auto !important;
	position: relative;
	left: 50%;
	-weckit-transform: translateX(-50%);
	transform: translateX(-50%);
}



/********************

header

********************/
#header #global_menu {
	display: block;
	width: 100%;
	position: fixed;
	top: 0;
	min-height: 60px;
	background-color: rgba(255,255,255,1);
	border-bottom: 1px solid #FFF;
	box-shadow:0px 0px 5px 0px rgba(50,50,50,0.5);
	-moz-box-shadow:0px 0px 5px 0px rgba(50,50,50,0.5);
	-webkit-box-shadow:0px 0px 5px 0px rgba(50,50,50,0.5);
	z-index: 1000;
}

#header .logo {
	display: block;
	padding: 20px;
	font-size: 1rem;
	font-weight: bold;
}

#header .logo .pagetitle {
	display: none;
}

#header .menu {
	position: relative;
	top: -12px;
	left: -16px;
	display: block;
	font-size: 1rem;
	font-weight: bold;
}

.home {
	position: absolute;
	top: 12px;
	left: 12px;
}

.home img {
	width: 14% !important;
}

.drawer-nav {
	padding: 60px 0px;
	background-color: #F5F5F5;
}

.drawer-nav li a {
	display: block;
	padding: 16px 0px;
	margin: 0 60px;
	border-bottom: solid 1px #AAA;
}



/********************

content

********************/
#content {
}

#content section {
	padding: 60px  5% 0px 5%;
}

#content section:first-of-type {
	padding: 0px  5% 0px 5%;
}

h2 {
	padding: 40px 0 20px 0;
}



/********************

f_contact

********************/
#f_contact {
	display: none;
}



/********************

footer

********************/
#footer {
	margin-top: 100px;
}

#footer #pageTop br {
	display: none;
}

#footer section {
	font-size: 0.9rem;
	padding: 20px 0px;
	background-color: #001e47;
	color: #FFFFFF !important;
}

#footer section a {
	color: #FFFFFF !important;
}

#footer section .logo {
	font-size: 1.4rem;
	padding-top: 20px;
}

#footer section .logo a {
	display: block;
	text-align: center;
}

#footer section .logo a img {
	height: 30px !important;
	width: auto !important;
	margin: 0px 10px -2px 0px;
}

#footer section .info {
	padding: 0px 20px;
}

#footer section .info p {
	text-align: center;
	padding-bottom: 20px;
}

/* フッターナビゲーション */
#footer section .fNav {
	overflow: hidden;
}

#footer section .fNav nav {
	padding: 20px;
}

#footer section .fNav ul {
	text-align: center;
	border-top: solid 1px #FFFFFF;
	border-left: solid 1px #FFFFFF;
	overflow: hidden;
}

#footer section .fNav ul li {
	float: left;
	width: 50%;
	border-bottom: solid 1px #FFFFFF;
	border-right: solid 1px #FFFFFF;
}

#footer section .fNav ul li a {
	padding: 10px 0px;
	display: block;
}

#footer section .fNav ul li a.over-border:hover {
	color: #DDD;
}

#footer section .fNav ul li a.over-border .ob-inner::before {
	top: 100% !important;
	background-color: #FFF !important;
}

#footer section .fNav .contact {
	padding: 20px;
}

#footer address {
	color: #FFFFFF;
	padding-top: 20px;
	margin-top: 40px;
	border-top: solid 1px #FFFFFF !important;
}

}





/************************************************************
for pc  width 737px 以上はpc表示
************************************************************/
@media print, screen and (min-width:737px){


/********************

common

********************/
.pc_none {
	display: none !important;
}

.pc_fl_left {
	float: left;
}

.pc_fl_right {
	float: right;
}

.pc_bg_gray {
	background-color: #F5F5F5;
}

.contentArea {
	position: relative;
	overflow: hidden;
	width: 1000px;
	margin: 0 auto;
}

#content .scrImg {
	margin: 0 auto;
}
/***
#content .scrImg {
	bottom: -50px;
	margin: 0 auto;
	display: none;
	position: relative;
}
***/

h2 {
	padding-bottom: 40px;
}



/********************

header

********************/
#header section .drawer-toggle,
#header section .drawer-hamburger {
	display: none;
}

/** 下線の色が左から右に変わる **/
/** ヘッダーで使用 **/
.menu-border {
	display: inline-block;
	position: relative;
	padding: 0 10px;
	border-bottom: solid 3px #DDDDDD;
}

.menu-border::after {
    background-color: #093e86;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    bottom: -3px;
    height: 3px;
    left: 0px;
    width: 0px;
}

/* hover */
.menu-border:hover::after {
    width: 100%;
    width: calc(100% + 1px);
}



/********************

content

********************/
#container .mainImg {
	width: 100%;
	max-height: 550px;
	overflow: hidden;
}

/** メイン画像の表示を下基準にする **/
#container .mainImg .mainImg .sticky {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0px;
}

/** メイン画像の表示を真ん中基準にする **/
#container .mainImg .middle {
	position: -webkit-sticky;
	position: sticky;
	bottom: -20%;
}

#content section {
	padding: 100px 5% 100px 5%;
}

#content section header {
	transition: .8s;
}





/********************

f_contact

********************/
#f_contact {
	background: url(../images/contact_bg.png) no-repeat center;
	background-size: cover;
	color: #FFFFFF;
	font-weight:700 !important;
	margin-top: 100px;
	padding: 60px 5%;
}

#f_contact .contentArea {
}

#f_contact .contentArea a {
	display: block;
	width: 240px;
	padding: 0px 15px;
	margin: 30px 0px;
	letter-spacing: 3px;
	font-size: 0.9rem;
}

#f_contact .contentArea .tel span {
	font-size: 1.4rem;
}





/********************

footer

********************/
#footer section {
	padding: 100px 5% 30px;
	letter-spacing: 2px;
}

#footer section .logo {
	font-size: 1.6rem;
	height: 80px;
}

#footer section .logo a {
	position: relative;
}

#footer section .logo a img {
	width: 40px;
	height: 40px;
	position: absolute;
}

#footer section .logo a span {
	position: absolute;
	width: 300px;
	top: 8px;
	left: 50px;
	color: #333;
}

#footer section .info {
	overflow: hidden;
}

#footer section .info .pc_fl_right {
	text-align: right;
}

/* フッターナビゲーション */
#footer section .fNav {
	padding-top: 60px;
	text-align: center;
}

#footer section .fNav ul {
	display: inline-block;
	overflow: hidden;
}

#footer section .fNav ul li {
	float: left;
	padding: 0px 30px;
	margin: 5px 0px;
	line-height: normal !important;
}

#footer section .fNav ul li a.over-border {
	color: #333;
	padding: 0px 10px;
}

#footer section .fNav ul li a.over-border:hover {
	color: #0a3369;
	padding: 0px 10px;
}

#footer section .fNav ul li a.over-border .ob-inner::before {
	top: 100% !important;
	background-color: #0a3369 !important;
}

#footer address {
	padding-top: 30px;
}



}


/**
for pc  width 737 ～ 1000pxで影響 **/
@media screen and (min-width:737px) and (max-width:1000px){
#content .fixed {
	top: 150px !important;
}

#content #inner_nav p a.curtain {
	font-size: 0.8rem;
	padding: 10px 20px;
}
}