@charset "utf-8";

/*全般設定
------------------------------------------------------------------------------------------
■基本的に各ページ毎に
・base.css（リセットcssとbody,container等全体共通のcss、ヘッダー・フッター・左サイドのナビバーのcss）、
・ページ別のcss（トップページならtop_page.css、他のページはcontents_pages.css）
を読み込んでもらうように作ってあります。
------------------------------------------------------------------------------------------*/

/*リセットCSS開始
------------------------------------------------------------------------------------------*/
main {
  display:block; /* IE対策に追加 */
}
html {
/* 	font-size:62.5%; */
	font-size:calc(10vw/9.8) ;
}
body {
	-webkit-text-size-adjust: 100%;
}
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-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}

a {
	text-decoration:none;
}

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

html{
    overflow-y: scroll;
}

blockquote, q {
	quotes: none;
}

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

input, textarea {
	margin: 0;
	padding: 0;
}

ol, ul{
    list-style:none;
}

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

caption, th{
    text-align: left;
}

a:focus {
	outline:none;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.both{
	clear:both;
}

.inline_block {  
	display: inline-block;  
/* 	*display: inline;  
	*zoom: 1;   */
}
/*リセットCSS終了
------------------------------------------------------------------------------------------*/

/*body,container,全体共通のCSS開始
------------------------------------------------------------------------------------------*/
html {
	scroll-behavior:smooth;
}
body {
	color: #111;
	font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Sans-Serif;
	line-height:1.7;
	background: #FaFeFE;
}
.container {
	margin: 0px auto;
	width: 980px;
	background: #fff;
	padding-bottom:20px;
}
div#limit_of_side_navi {
	position:relative;
}
/*
.indent {
	text-indent:1em;
}
*/
.center {
	text-align:center;
}
.align-right {
	text-align:right;
}
.align-left {
	text-align: left;
}
.f_right {
	float:right;
}
.f_left {
	float:left;
}
.orange {
	color:#FF3300;
}
.skyblue {
	color:#1a73e8;
}
a:hover img {
	opacity: 0.7;
}
a:hover {
	font-weight:bold;
	text-decoration:underline;
}
a:hover li ,
a:hover p ,
a:hover dd ,
a:hover h1 ,
a:hover h2 ,
a:hover h3 {
	font-weight:bold;
}
strong {
	font-weight:bold;
}
img{
	vertical-align:bottom;
	margin-bottom:8px;
}
ol.BreadcrumbList {
	font-size:16px;
	margin-top:4px;
	margin-bottom:6px;
	padding-left:5px;
}
ol.BreadcrumbList li {
	display:inline;
}
ol.BreadcrumbList li::after {
	content:">";
	padding-left:7px;
}
ol.BreadcrumbList li:last-child::after {
	content:none;
}
ol.BreadcrumbList a:hover {
	color:#0000f0;
}
.yt-wrapper {
	position: relative;
	width: 100%;
}
.yt-wrapper:before {
	content:"";
	display: block;
	padding-top: 56.25%;
}
.yt-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
div.horizontal-border {
	border-bottom: 1px solid #DADCE0;
	margin:8px 0 8px 0;
}
span.no-break {
	display:inline-block;
}
div.kousai {
	text-shadow: 1px 1px 2px  #FFFFFF ,
							 -1px 1px 2px #FFFFFF ,
               1px -1px 2px #FFFFFF ,
               -1px -1px 2px #FFFFFF ,
							 1px 1px 2px  #FFFFFF ,
							 -1px 1px 2px #FFFFFF ,
               1px -1px 2px #FFFFFF ,
               -1px -1px 2px #FFFFFF ;
}
.of-hidden {
	overflow:hidden;
}
.position-relative {
	position: relative;
}
.position-absolute {
	position:absolute;
}

/*body,container,全体共通のCS終了
------------------------------------------------------------------------------------------*/

/*ヘッダー部分開始
------------------------------------------------------------------------------------------*/
header div.header_img_bg{
	background-color:#0092d6;
}
header div.header_pro{
	max-width:250px;
}
header img {
	margin:0;
}

/*ハンバーガーメニュー用の部分開始
------------------------------------------------------------------------------------------*/
/* 四角の部分 */
div.openbtn {
	position:relative;
  z-index: 9999;
	display: inline-block;
  cursor: pointer;
  width: 134px;
  height: 134px;
	margin: 8px 4px 14px 0;
  background-color: #a5d1f6;
  border-radius:15px;
  transition: all 0.6s;
}
div.openbtn.active {
	position: fixed;
}

/* ３本線 */
.openbtn span {
  display: inline-block;
	position:relative;
  transition: all 0.4s;
	margin:0 32px 0;
  width: 51%;
  height: 5px;
  border-radius: 2px;
  background-color: #fff;
}
.openbtn span:nth-of-type(1) {
  top: 29px;
}
.openbtn span:nth-of-type(2) {
  top: 42px;
}
.openbtn span:nth-of-type(3) {
  top: 55px;
}
/* ×に変化 */
.openbtn.active span:nth-of-type(1) {
  top: -18px;
  left: 18px;
	margin:0px;
  transform: translateY(45px) rotate(-45deg);
  width: 50%;
}
.openbtn.active span:nth-of-type(2) {
  top:   8px;
  left: 18px;
	margin:0px;
  opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
  top: -7px;
  left: 18px;
	margin:0px;
  transform: translateY(-0px) rotate(45deg);
  width: 50%;
}
/* メニューのレイアウト */
nav.hamburger ul {
  width: 100%;
}
nav#gnav ul.parent {
  position: absolute;
  z-index: 999;
  top: 30px;  /* メニューが増えて画面からはみ出したらここを調整してみよう！ */
  left: 50%;
  transform: translate(-50%);
}
/* クラスが付与される前のレイアウト */
nav#gnav {
  position: fixed;
  z-index: 999;
  top: 0;
  right: -120%;  /* 画面の右側に隠すためのコード */
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.90);
  transition: all 0.6s;
}
/* クラスが付与された後のレイアウト */
nav#gnav.list_active div#gnav_list {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
nav#gnav.list_active {
  right: 0;
}


nav#gnav a{
	font-size:16px;
}
nav#gnav h2{
	width: auto;
	height: auto;
	border-bottom:#FFF solid 1px;
	padding-left:0;
	margin-top:25px;
	margin-left:20px;
}
nav#gnav h3.underborder {
	border-bottom:#ccc dotted 2px;
}
nav#gnav h2 > a {
	display:block;
	width: auto;
	height:100%;
	font-size:22px;
	color:#FFF;
}
nav#gnav ul.back{
	width: auto;
	border: none;
	margin:10px 0 0 15px;
}
nav#gnav .back li{
	display: inline-block;
	width:260px;
	margin:9px 0 9px 30px;
	line-height:1.2;
	font-size:16px;
	vertical-align:top;
}
nav#gnav .back a{
	color:#fff;
}
nav#gnav .back a:hover{
	font-weight:bold;
}
nav#gnav .kakaku > li{
	box-sizing:border-box;
	width: auto;
	min-width:260px;
	color:#00103F;
}
nav#gnav h2.toiawase {
	margin-bottom:55px;
}



/*ハンバーガーメニュー用の部分終了
------------------------------------------------------------------------------------------*/

/*ここまでがヘッダー部分
------------------------------------------------------------------------------------------*/





/*フッター部分開始
------------------------------------------------------------------------------------------*/
footer {
	text-align:center;
	background-color:#F7F7F7;
	border-top:solid 1px #BBB;
	padding-bottom:40px;
	min-width:980px;
	}
footer div.footer_container{
	width:980px;
	margin:0 auto;
}
footer ul.footer_nav {
	margin-top:20px;
}
footer .footer_nav li {
	display:inline-block;
	margin-right:15px;
	padding-left:22px;
	font-size:16px;
	height:45px;
	background:url(../page-parts/images/arrow_gry.gif) no-repeat 14px 5.5px;
}
footer .footer_nav a:hover {
	color:#00103F;
	font-weight:bold;
}

footer .footer_nav a {
	color:#333;
}
footer div.g-search-box-annai {
	height:18px;
	margin:5px auto 5px auto;
}
footer div.g-search-box-annai p{
	font-size:16px;
}
footer div.g-search-box {
	width:320px;
	margin:5px auto 20px auto;
}
footer p.copy {
	font-size:16px;
	margin:15px 10px 0;
	line-height:28px;
	color:#333;
}
footer address {
	font-size:16px;
	margin:0 10px 20px;
	line-height:28px;
	color:#333;
}
footer p.text{
	font-size:16px;
	margin:20px 5px;
	color:#333;
}
footer address a{
	color:#333;
}
footer ul.link {
	display:flex;
	flex-wrap:wrap;
}
footer .link li {
  display: block;
	margin:0 auto 10px;
	flex-grow:1;
	max-width:33.125%;
}

	/*ここまでがフッター部分
------------------------------------------------------------------------------------------*/







/*大画面表示用部分開始
------------------------------------------------------------------------------------------*/

@media screen and (min-width : 980px){
	html {
		font-size:10px;
	}

}

	/*ここまでが大画面表示用部分
------------------------------------------------------------------------------------------*/



/*デスクトップ表示時のお問い合わせボタン、メニューボタン変形後の大きさ調整の為の部分開始
------------------------------------------------------------------------------------------*/

@media screen and (min-width : 768px){
/*	p.m_otoiawase {
		display: none;
	}
*/	p.m_otoiawase {
    position: fixed;/* 追従 */
    z-index: 998;/* 他の要素の下に隠れないように */
    bottom: 0;/* バナーの上下の位置 */
    right: 3px;/* バナーの左右の位置 */	
  }
	div.openbtn.active {
		top: 8px;
		right: 30px;
		width: 70px;
		height: 70px;
		background-color: #5581a6; 
	}
	html {
		font-size:10px;
	}
}

	/*ここまでがデスクトップ表示時のお問い合わせボタン、メニューボタン変形後の大きさ調整の為の部分ここまで
------------------------------------------------------------------------------------------*/



/*スマホ表示用部分開始
------------------------------------------------------------------------------------------*/

@media screen and (max-width : 767px){

/*body,container,全体共通のスマホ表示用CSS開始
------------------------------------------------------------------------------------------*/
	
	img {
		max-width:100%;
		height:auto;
	}
	nav#side_navi {
		display: none;
	}
	.container {
		margin: 0px auto;
		width: 100%;
  	overflow:hidden;
	}
	ol.BreadcrumbList {
		font-size:14px;
		margin:8px 0 6px 0;
	}


/*headerのスマホ表示用CSS開始
------------------------------------------------------------------------------------------*/

	header div.header_pro{
		width:22.45%;
		height:auto;
	}
	header img.f_left{
		width:48.98%;
		height:auto;
	}
	header a img.f_right_1{
		width:14.08%;
		height:auto;
	}
	header a img.f_right_2{
		width:14.08%;
		height:auto;
	}



/*ハンバーガーメニュー用の部分開始
------------------------------------------------------------------------------------------*/


	div.openbtn {
		position: fixed;
		top: 6px;
		right: 3px;
		z-index: 9999;
		cursor: pointer;
		width: 13vw;
		height: 13vw;
		background-color: #a5d1f6;
		margin:0 0 0 0;
	}
	div.openbtn.active {
		background-color: transparent;
	}
	/* ３本線 */
	.openbtn span {
		display: inline-block;
		transition: all 0.4s;
		position: absolute;
		left: 3.25vw;
		width: 50%;
		height: 3px;
		border-radius: 2px;
		background-color: #fff;
		margin:0 0 0 0;
	}
	.openbtn span:nth-of-type(1) {
		top: 3.5vw;
	}
	.openbtn span:nth-of-type(2) {
		top: 6.3vw;
	}
	.openbtn span:nth-of-type(3) {
		top: 9.2vw;
	}
	/* ×に変化 */
	.openbtn.active span:nth-of-type(1) {
		top: 18px;
		left: 16px;
		transform: translateY(6px) rotate(-45deg);
		width: 55%;
	}
	.openbtn.active span:nth-of-type(2) {
		top: 6.3vw;
		opacity: 0;
	}
	.openbtn.active span:nth-of-type(3) {
		top: 30px;
		left: 16px;
		transform: translateY(-6px) rotate(45deg);
		width: 55%;
	}
	
	nav#gnav ul.parent {
		top: 3vw;
	}
	nav#gnav h2{
		margin-top:17px;
	}





/*ハンバーガーメニュー用の部分終了
------------------------------------------------------------------------------------------*/







 
	
/*footerのスマホ表示用CSS開始
------------------------------------------------------------------------------------------*/
	
	footer {
		min-width:1px;
		}
	footer div.footer_container{
		width:100%;
		margin:0 auto;
	}
	footer aside.ccard {
		width:60%;
   	margin:0 auto;
	}
	footer .footer_nav li {
		font-size:14px;
		height:35px;
	}
	footer .footer_nav a:hover {
		font-weight:normal;
	}
	footer div.g-search-box-annai p{
		font-size:14px;
	}
	footer p.copy {
		font-size:14px;
		line-height:22px;
	}
	footer address {
		font-size:14px;
		line-height:22px;
	}
	footer p.text{
		font-size:14px;
	}

/*スマホで画面下部にお問い合わせボタンを表示するためのCSS開始
------------------------------------------------------------------------------------------*/

	p.m_otoiawase {
    position: fixed;/* 追従 */
    z-index: 998;/* 他の要素の下に隠れないように */
    bottom: 0;/* バナーの上下の位置 */
    right: 0;/* バナーの左右の位置 */	
  }



}