@charset "utf-8";
/*************************************************
 style.css
**************************************************/

/* ガイド線（不要になった時点で消す）
header,
.contents,
footer { box-shadow: inset blue 0px 0px 0px 4px;}

header .wrap,
.page_control,
.contents .wrap,
footer .wrap,
header nav ul,
footer .nav ul { box-shadow: inset red 0px 0px 0px 2px;}
article section { box-shadow: inset purple 0px 0px 0px 2px;}

nav,
.nav { box-shadow: inset green 0px 0px 0px 2px;}
 */


/* 基本スタイル */
*,
*::before,
*::after { box-sizing: border-box;}

body { margin: 0; background: #ffffff; color: #333333; font-size: 100%; line-height: 1.6; font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif; -webkit-text-size-adjust:100%;}
header,article,footer,section,h1,h2,h3,hr { clear: both;} /*-clear-*/
article ,section ,nav ,dl,ul,div { padding: 0 0 5px; overflow: auto;} /*-hasLayout-*/
input [type="text"],
input [type="button"],
input [type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0;}
input [type="button"],
input [type="submit"] { cursor: pointer;} /*-formAppearanceClear-*/

h1,h2,h3,h4,h5,p,dl,ul,ol { margin-top: 0;}
ul { list-style: none;}
ul,ol { padding-left: 0px;} /* 30px */
textarea { max-width: 95%;}
fieldset { margin: 0 0 1em; padding: 0 0 5px; border: none;}
a { color: #0044cc; text-decoration: underline;}
a:visited { color: #61848B;}
a:hover { color: #14205F;}
a:active { color: #5D0000;}
a:hover img{opacity: 0.8;}
img { border: none; vertical-align: middle;}

#Map,#Map *,#jump { padding: 0; overflow: visible;}
#jump a { position: absolute; width: 0; height: 0; overflow: auto; text-indent: -1000em;}
#jump a:focus { width: 12em; height: 1.5em; text-indent: 0; background: #FFFFFF; text-align: center;}


/* コンテンツの幅 */
body { min-width: 320px;}
#TOP { min-width: 1024px; padding-bottom: 0;}

header .wrap,
header nav ul,
.contents .wrap,
footer .wrap,
footer .nav ul { width: 1024px; margin: 0 auto;}

.contents_wrap { display: flex; justify-content: space-between;}
.contents article { width: 700px; margin-right: 24px;}
.contents nav { width: 300px;}


/* タイトル */
header h1 { font-size: 1em;}
header h1,
header .title { width: 300px; margin: 0; padding: 0; float: left; border: none;}
header h1 a,
header .title a { display: block; height: 100%;}
header h1 img,
header .title img { max-width: 100%; height: auto;}


/* ページコントロール - 切り替えボタン */
.UD{float:left;margin:0;padding:0;}
.page_control{ float:right; margin: 0; padding:0;}
.page_control dl,
.page_control dl dt,
.page_control dl dd { min-height:34px; margin:0; padding:0;font-size: 0.95em;}
.page_control dl{ float:left; display: flex; height:34px ; margin:0 0.5em 0 0; padding:0; overflow: hidden;}
.page_control dl dt{ width:34px;}
.page_control dl.color_change dt,
.page_control dl.textsize_change dt { display: flex; justify-content: center; align-items: center;}
.page_control dl.color_change dt { width: 60px;}
.page_control dl.textsize_change dt { width: 90px;}
.page_control dl dd a { display: block; width:30px; height:30px; margin: 2px; border: 2px solid #F0EFEE; border-radius: 50%;}
.page_control dl.color_change dd a { background-color: #fff;}
.page_control dl.color_change dd.high a { background-color: #000;}
.page_control dl.color_change dd.low a { background-color: #ccc;}
/**/
.page_control dl dd a { background-color: #cccccc;} /* ボタン色 */
.page_control dl dd a:hover,
.page_control dl dd a:focus { border-color: #C00000;} /* ホバー色 */


/* ページコントロール - 翻訳ボタン */
.page_control .voice { float: left; display: block; height: 34px; margin:0 0.5em 0 0; padding: 0; text-align: center;}
.page_control .voice a { display: flex; justify-content: center; align-items: center; height: 100%; padding: 0 1em; font-size: 0.8em; text-decoration: none;}
/**/
.page_control .voice a { color: #fff; background-color: #333333;} /* ボタン色 */
.page_control .voice a:hover,
.page_control .voice a:focus { background-color: #C00000;} /* ホバー色 */


/* ページコントロール - 検索 */
.page_control .search { width:180px; margin: 0; padding: 0; float: right; text-align: center;}
.page_control .search div { margin:0; padding:0;}
.page_control .search label.search_txt{ float:left; display:flex; align-items: center; justify-content: center; height: 34px; width: 0px; font-size: 0.9em; overflow: hidden;}
.page_control .search .search_inner { width: calc(100% - 0px); border: 2px solid #333;}
.page_control .search input#search_txt {display: block; height: 30px; width:calc(100% - 4em); margin: 0%; padding: 0px 0.5em; line-height: 36px; background-color: #fff; border:none;float:left;}
.page_control .search input#search_txt:focus {background-color:#FFFFFF;outline:1px solid #CCC;}
.page_control .search input.search_bt { display: block; width: 4em; height:30px; ;margin: 0; padding:0px 0; font-weight:bold;border:none;float:left;}
/**/
.page_control .search .search_inner { border-color: #333; background-color: #333;} /* 検索枠色 */
.page_control .search input.search_bt { color:#FFF; background-color: #333;} /* 検索ボタン色 */
.page_control .search input.search_bt:hover,
.page_control .search input.search_bt:focus { background-color: #C00000;} /* 検索ボタン ホバー色 */


/* ハンバーガーメニュー・コンフィグメニュー */
p.hamburger_text { position: absolute; bottom: 5px; height: 1em; width: 100%; margin: 0px auto; padding: 0px; font-size: 0.65em; text-align: center;}
p.hamburger_text span {display: inline-block; overflow: hidden; width: 0px; height: 0px;}
.hamburger,
.hamburger span { display: inline-block; transition: all 0.4s;}
.hamburger { position: relative; width: 22px; height: 19px; margin: 8px 0px 0px 11px;}
.hamburger span { position: absolute; left: 0; width: 100%; height: 3px; border-radius: 3px;}
.hamburger span:nth-of-type(1) { top: 0;}
.hamburger span:nth-of-type(2) { top: 8px;}
.hamburger span:nth-of-type(3) { bottom: 0;}

.menu_button { display:none; position: fixed; bottom: 36px; left: 50%; height: 44px; width: 44px; margin-left: -22px; padding: 0; z-index: 110; border-radius: 0.3em; overflow: hidden;}
.menu_button a {display:block; height: 44px; width: 44px; transition-duration: 0.2s; overflow: hidden;}
.menu_button.active .hamburger { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
.menu_button.active .hamburger span:nth-of-type(1) { -webkit-transform: translateY(8px) rotate(-45deg); transform: translateY(8px) rotate(-45deg);}
.menu_button.active .hamburger span:nth-of-type(2) { -webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg);}
.menu_button.active .hamburger span:nth-of-type(3) { opacity: 0;}
/**/
.menu_button a { background: #aaa;} /* ボタン色 */
.hamburger span { background-color: #fff;} /* ハンバーガー色 */
p.hamburger_text { color: #fff;} /* 文字色 */
.menu_button a:hover,
.menu_button a:focus { background-color: #c00000;}

.conf_button { display:none; position: fixed; bottom: 36px; right: 15%; height: 44px; width: 44px; z-index: 110; border-radius: 0.3em;}
.conf_button a { position: relative; display:block; height: 44px; width: 44px; color:#fff; overflow: hidden;}
.conf_button a span.hamburger { position: absolute; top: 2px; left: 7px; width: 30px; height: 30px; margin: 0; background: url("../img/ico_search_mb.png") center center no-repeat;}
.conf_button.home_button { left: 15%;}
.conf_button.home_button a span.hamburger { background-image: url("../img/ico_home_mb.png");}
.conf_button.active a span.hamburger { background-image: url("../img/ico_search_mb_active.png"); transform: rotate(360deg);}
/**/
.conf_button a { background: #aaa;} /* ボタン色 */
.conf_button a:hover,
.conf_button a:focus { background-color: #c00000;}

.home_button { display:none; position: fixed; bottom: 36px; left: 15%; height: 44px; width: 44px; z-index: 110; border-radius: 0.3em;}
.home_button a { position: relative; display:block; height: 44px; width: 44px; color:#fff; overflow: hidden;}
.home_button a span.hamburger { position: absolute; top: 2px; left: 7px; width: 30px; height: 30px; margin: 0; background: url("../img/ico_search_mb.png") center center no-repeat;}
.home_button.home_button { left: 15%;}
.home_button.home_button a span.hamburger { background-image: url("../img/ico_home_mb.png");}
.home_button.active a span.hamburger { background-image: url("../img/ico_search_mb_active.png"); transform: rotate(360deg);}
/**/
.home_button a { background: #aaa;} /* ボタン色 */
.home_button a:hover,
.home_button a:focus { background-color: #c00000; transition-duration: 0.3s;}

.menu_bg,
.conf_bg { display: none; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: rgba(0,0,0,0.85); z-index: 100;} /* スマートフォン時の背景 */


/* グローバルメニュー */
header nav{ padding-bottom: 0px;}
#menu { display: flex; padding: 0;}
#menu li { width: 20%;}
#menu li a { display: flex; align-items: center; justify-content: center; height: 100%; transition-duration: 0.15s;}
/**/
header nav { background-color: #cccccc;} /* 帯背景色 */
#menu li a { color: #000; background-color: transparent;} /* ボタン色 */
#menu li a:hover,
#menu li a:focus { background-color: yellow;} /* ホバー色 */


/* グローバルメニュー - 下階層 */
#menu li dt a { position: relative; display: flex; align-content: center; justify-content: center; height: 100%; transition-duration: 0.15s; flex-wrap: wrap;}
#menu li dt a:hover,
#menu li dt a:focus,
#menu dl:hover dt a,
#menu dl.focus dt a { background-color: yellow;} /* グローバル　ホバー色 */
#menu ul.sub_category { background: yellow;} /* サブカテゴリ　背景色 */

header nav,
#menu { overflow: visible;}
#menu dl { position: relative; height: 100%; margin: 0px; padding: 0px; box-sizing: border-box; overflow: visible;}
#menu dl dt { height: 100%;} 
header nav ul li a,
#menu dl dt a { transition-duration: 0.2s;}
#menu dl dd { position: absolute; top: 100%; width: 1024px; padding: 0px; margin: 0px; max-height: 0px; transition-duration: 0.4s; overflow: hidden; z-index: 1000;} /* サブカテゴリ */
header nav.active #menu dl dd { top: 100%;}
#menu li.menu02 dl dd { left: -100%;}
#menu li.menu03 dl dd { left: -200%;}
#menu li.menu04 dl dd { left: -300%;}
#menu li.menu05 dl dd { left: -400%;}
#menu li.menu06 dl dd { left: -500%;}

#menu dl:hover dd,
#menu dl.focus dd{ height: auto; max-height: 600px; margin: 0px;}
#menu ul.sub_category { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; height: auto; width: auto; margin: 0px;}
#menu ul.sub_category li { flex-basis: 25%;}
#menu ul.sub_category li a { display: flex; height: calc(100% - 10px); margin: 5px; padding: 1em;	text-decoration: none; background: #fff; transition-duration: 0.15s; box-sizing: border-box;} /* サブカテゴリ項目 */

#menu ul.sub_category li a { position: relative;}
#menu ul.sub_category li a:hover,
#menu ul.sub_category li a:focus { background-color: rgba(0,255,255,1);} /* サブカテゴリ項目　ホバー色 */
#menu ul.sub_category li a:hover:before,
#menu ul.sub_category li a:focus:before { left: 1.3em;}
 

/* フッター */
footer dl{ float: left; margin:1em 0 0 0;padding:0 0 1em 0;}
footer dt{margin:0;padding:0; font-size: 1.3em; margin-bottom: 0.5em;}
footer dd{margin:0;padding:0;}

footer .copyright { clear: both;}
footer .copyright span {}
footer .reread_link{ width:76px; height: 76px; position:fixed; bottom: 10px; right:0; padding: 0; z-index: 100;}
footer .reread_link a { display:block; height:100%; width: 100%; overflow:hidden; text-indent:-1000em; background:url(../img/reread_link.png) rgba(176,214,99,0.8); border-radius: 50%; background-size: contain;}
footer .reread_link a img { max-width: 100%; height: auto;}
footer .reread_link a:hover{opacity:0.8;}



/* コンテンツ */
.contents h1 {}
.contents nav { overflow: visible;}
.contents nav ul,
.contents nav dl { padding:0;list-style:none;}





/* サブトップ */
.subtop .list { display: flex; flex-wrap: wrap;}
.subtop .category  { width: 48%;}
.subtop .category.left { margin-right: 2%;}
.subtop .category.right { margin-left: 2%;}
.subtop .section { margin-bottom: 1em; background-color: #eee;}
.subtop .section ul { display: none;}
.subtop .section li.more { margin-top: 1em;}

.subtop .listopen.active .text_open,
.subtop .listopen .text_close { display: none;}
.subtop .listopen .text_open,
.subtop .listopen.active .text_close { display: block;}


/*************************************************
 CMS用テンプレート  .txtbox内部
**************************************************/
/* 見出し */
.txtbox h2 {}
.txtbox h3 {}
.txtbox h4 {}
.txtbox h5 {}
.txtbox h6 {}

/* table */
.txtbox table th,
.txtbox table td { border: 1px solid #8888bb;} /* テーブル線の色 */
.txtbox table th { background: #eeeeff;} /* THの色 */


/*************************************************
 レスポンシブ　1024 + 20 
**************************************************/
@media screen and (max-width:1044px) {
	#TOP,
	header .wrap,
	header nav ul,
	.contents .wrap,
	.contents article,
	.contents nav,
	footer .wrap,
	footer .nav ul { position: static; width: auto; min-width: 0; max-width: 100%; float: none;}
	.contents_wrap { display: block;}

	.contents article { margin-right: 0;}	
	header .wrap,
	.wrap.contents_wrap,
	footer .wrap { margin-left: 2.5%; margin-right: 2.5%;}
	
/* グローバルメニュー */
	header { position: relative;}
	header nav { position: fixed;/* display: flex; align-items: flex-end; justify-content: center; bottom: 0px; */top:0px; left:0px; right:0px; max-height:100%; padding:0; background-color: transparent; overflow:visible; z-index: 110;}
	#menu { display: none; position: fixed; left: 0px; right: 0px; bottom: 110px; height: auto; width: auto; overflow:visible ;}
	#menu li { width: auto;}
	#menu li a { color: #fff;}
	
/* グローバルメニュー　サブカテゴリ */
	#menu dl dd { display: none!important;} /* サブカテゴリ非表示 */
	
	
/* ハンバーガーメニュー */
	.menu_button { display:block; transition-duration: 0.3s;}
	.menu_button.active { box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.9);}
	
	
/* コンフィグメニュー*/
  .conf_button { display:block; padding-bottom: 0; transition-duration: 0.3s;}
  .conf_button.active { box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.9);}
	
	
/* ホームメニュー*/
  .home_button { display:block; padding-bottom: 0; transition-duration: 0.3s;}
  .home_button.active { box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.9);}
	
	
/* タイトル */
	header h1,
	header .title {}
	
	
/* ページコントロール */
	.page_control { display: none; position: fixed; bottom: 110px; left: 0px; right: 0px; margin-top: 0; z-index: 110;}
	.page_control { color: #fff;}
	.UD,
	.page_control .search{position:static;width:auto;min-width:0;max-width:100%;float:none;}
	.page_control .search,
	.UD {margin-left:2%;margin-right:2%;}
	.page_control .voice,
	.page_control dl.textsize_change,
	.page_control dl.color_change { float: none; width: 200px;}
	.page_control .voice { margin: 10px auto 20px;}
	.page_control dl.textsize_change,
	.page_control dl.color_change { margin: 5px auto;}
	.page_control dl dd a { margin-left: 5px; margin-right: 4px;}
	.page_control dl.textsize_change dt,
	.page_control dl.color_change dt { width: 84px;}

	
/* フッター */
	footer { padding-bottom: 80px;} /* ハンバーガー分の余白 */

}


/*************************************************
 レスポンシブ　560 + 20 
**************************************************/
@media screen and (max-width:580px) {
	
	
/* サブトップ */
	.subtop .list {}
	.subtop .category  { width: 100%;}
	.subtop .category.left { margin-right: 0;}
	.subtop .category.right { margin-left: 0;}
	.subtop .section { margin-bottom: 1em; background-color: #eee;}
	.subtop .section ul { display: none;}
	


	
}



@media screen and (min-width:1045px) {
	html body #menu {display:flex!important;} 
	header .page_control {display:block!important;}
	.menu_bg,
	.conf_bg {display: none!important;}
}

@media screen and (-ms-high-contrast:active) {
* {text-indent:0em !important;}
}

@media print{
/* 幅はコンテンツサイズに合わせて修正 */
	html,body{width:1024px;margin:0;padding:0;overflow-x:hidden;} 
	#TOP{min-width:1024px;width:1024px;margin:0;padding:0;overflow-x:hidden;}
	body,body > .wrap{background:none;}
	#fb-root{display:none;}
}