@CHARSET "utf-8";
:root {
	--base-color: #FFF;/* ベースカラー() */
	--main-color: #1629CC; /* メインカラー(印象色) 4374fb青,007af,#008200緑 #1c81e5古い*//*JR 008900 1a881a*/
	--accent-color: blue;/* アクセントカラー(強調色) #00b31e*/
	--bg-color: #CCC;
	--bg-color-on: #1629CC;
	--color-from: #1629CC;/*  #1629CC青1*/
	--color-to: #2FCDED;/* 2FCDED青2 */
	--border-color: #CCC;/* （暗黙）枠の色 */
	--border-color-on: #1629CC;/* (active)枠の色 */
	--txt-color: #333;/* （暗黙）文字の色 */
	--txt-color-on: #FFF;/* 背景色あり場合文字の色 */
	--device-sp-width: 640px;
	--device-tablet-width: 960px;
	--width-side-menu: 18%;
	--width-main-content: 64%;
}
/*=======================================
 * tag定義
 *======================================*/ 
* {
	margin:0; 
	padding:0;
}
html,
body {
	color: #333;
	color: var(--txt-color);
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Osaka,Verdana,sans-serif;	
	font-size: 16px;
	height: 100%;
	line-height: 150%;
	margin: 0 auto;
	text-align: center;
}
header, 
#content, 
footer {
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 3%;
}
@media screen and (max-width: 960px) {
	header, 
	#content, 
	footer {
		padding: 0 0%;
	}
}
header {
	background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -ms-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: linear-gradient(top, #c9dbe9 0%, #fff 100%);
	box-sizing: border-box;
	height: 76px;
	position: relative;
	z-index: 10;
}
@media screen and (max-width: 960px) {
	header {
		top: 0;
		margin-top: 0;
		height: 55px;
		padding-right: 2%;
	}
}
#content {
	width: 100%;;
	box-sizing: border-box;
	position: relative;
	padding-left: calc(3% + 76px);
	overflow: hidden;
}
@media screen and (max-width: 960px) {
	#content {
		width: 100%;
		top: 0;
	  	padding: 0 2%;
	}
}

.Subfooter {
	width: 100%;
	background-color: inherit;
	display: inline-block;
}
.Subfooter__qrcodeimg {
	display: none;
	float: left;
}

.Subfooter__info {
	float: left;
	padding: 4px 8px;
	min-width: 50%;
	text-align: left;
}


a {
	text-decoration: none;
}
a:link {
	color: blue; /*#1111CC;*/
} 
a:visited {
	color:#6633CC;
}
a:hover {
	text-decoration: underline;
} 
a:active {

} 
ul {
	list-style-type: none;
}
h1 {
	font-size: 1rem;
}
h2,
h3,
h4,
h5,
h6 {  
	
}
h2 {
	font-size: 1.1rem;
}
h3 {
	font-size: 1rem;
}
h4 {
	font-size: 0.9rem;
}
h5 {
	font-size: 0.8rem;
}
h6 {
	font-size: 0.7rem;
}
fieldset {
	border: 2px solid #00b31e;
	border: 2px solid var(--accent-color);
}
fieldset legend {
	font-weight: bold;
	font-size: 0.95rem;
	color: #32a138;
	color: var(--main-color);
}
/*=======================================
 * Parts定義
 *======================================*/ 
#sideMenuL,
#sideMenuR {	
	width: 18%;
}
#sideMenuL {
	float: left;
	min-width: 176px;
	
}
@media screen and (max-width: 960px) {
	#sideMenuL {
		display: none;
	}
	#sideMenuR {
		top: 0;
		left: 0;
		float: left;
	}
}
#sideMenuR {
	float: right;
	min-width: 176px;
}
@media screen and (max-width: 680px) {
	#sideMenuR {
		width: 98%;
		margin: 0 auto;
		float: left;
	}
}

#main {
	float: left;
	width: 608px;
}
/*=======================================
 * Header定義
 *======================================*/ 
header.FixedNav {/* 固定 */
    top: 0;
    margin-top: 0;
    padding-top: 0;
    position: fixed;
    height: 55px;
    width: 100%;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
    transition: top 0.65s ease-in;
}
@media screen and (max-width: 960px) {
	header.FixedNav {

	}
}
header.FixedNav h1 {
    display: none;
}
@media screen and (max-width: 960px) {
	header.FixedNav h1  {
	display: block;
	}
}

header.FixedNav #logo {
    top: 0;
    font-size: 24px;
    color: #333;
    color: var(--txt-color);
    position: absolute;
}
header.FixedNav nav.Navigation {
	padding-left: calc(76px);
	box-sizing: initial;
}

@media screen and (max-width: 960px) {
	header.FixedNav nav.Navigation {
		padding-left: 0;
	}
}
header.FixedNav nav.Navigation ul li a {
    color: #333;
    color: var(--txt-color);
    padding: 0 20px;
}
header .MenuIcon {width: 50px;height: 50px;position: fixed;top: 0;right: 0;margin: 10px 15px;transform:scale(0.8);padding: 0;cursor: pointer;z-index:20}
header .MenuBar {width: 50px;height: 5px;background: #32a138;position: absolute;transition: all 0.3s;}
header .MenuBar1 {margin-top: 9px}
header .MenuBar2 {margin-top: 23px}
header .MenuBar3 {margin-top: 37px}
header .MenuIcon.IconOpenClose .MenuBar1 {-webkit-transform: rotate(45deg) scaleX(0.7);margin-top: 22px;}
header .MenuIcon.IconOpenClose .MenuBar2 {opacity: 0}
header .MenuIcon.IconOpenClose .MenuBar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;}
@media screen and (max-width: 600px) {header .MenuItem {min-width:50%}}
@media screen and (max-width: 350px) {header .MenuItem {min-width:100%}}
header .DropMenu {
	opacity: 0;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
	transition: opacity 0.6s, transform 0.6s;
	display: block;
	background:lightgray;
	width: 0;
	overflow: hidden;
	z-index: 9;
	position: absolute;
}
header .MenuOpen  {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	width: 100%;
	position: relative;
	z-index: 1;
}
nav.MenuItem {
	width: 960px;
	margin: 0 auto;
}

nav.MenuItem ul {
	width: 33%;
	float: left;
	text-align: left;
}
/*=======================================
 * Navi-icon Toggle アイコン仕様
 *======================================*/ 
.MBNavIcon {
    display: none;
    position: absolute;
    right: 0;
    top: 1rem;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
.MBNavIcon div {
    position: relative;
}
.MBNavIcon span {
    height: 4px;
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    background: #32a138;
    background: var(--main-color);/*#32a138;*/
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.MBNavIcon span:nth-child(1) {
    top: 0;
}
.MBNavIcon span:nth-child(2) {
    top: 11px;
}
.MBNavIcon span:nth-child(3) {
    top: 22px;
}
@media screen and (max-width: 960px) {
	.MBNavIcon {
	    display: block;
	}
	.OpenNav .MBNavIcon span:nth-child(1) {
	    top: 11px;
	    -webkit-transform: rotate(315deg);
	    -moz-transform: rotate(315deg);
	    transform: rotate(315deg);
	}
	.OpenNav .MBNavIcon span:nth-child(2) {
	    width: 0;
	    left: 50%;
	}
	.OpenNav .MBNavIcon span:nth-child(3) {
	    top: 11px;
	    -webkit-transform: rotate(-315deg);
	    -moz-transform: rotate(-315deg);
	    transform: rotate(-315deg);
	}
	/* #global-nav スライドアニメーション */
	.OpenNav nav.Navigation {
	    -moz-transform: translateY(556px);
	    -webkit-transform: translateY(556px);
	    transform: translateY(556px);
	    height: 100%;
	    width: 100%;
	}
	.OpenNav nav.Navigation ul li {
		width: 100%!important;
		background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
		background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
		background: -ms-linear-gradient(top, #c9dbe9 0%, #fff 100%);
		background: linear-gradient(top, #c9dbe9 0%, #fff 100%);
	}
}

/* ************************************************************  
 * モバイルナビCSS
 * ************************************************************/
/* ------------------------------------------------ モバイルメニュー */
.MobileNavi {
	display: none;
}
@media screen and (max-width: 960px) {
	.MobileNavi {
		display: block;
	}
}
.MobileNavi > .DrawerMenu {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	padding: 90px 0;
	background: blue;
	background: var(--main-color);
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform-origin: right center;/* 右から表示 */
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: perspective(500px) rotateY(-90deg);
	transform: perspective(500px) rotateY(-90deg);
	opacity: 0;
}
.DrawerMenu li {
	text-align: left;
	box-sizing: border-box;
}
.DrawerMenu li a {
	display: block;
	height: 3rem;
	line-height: 3rem;
	font-size: 1rem;
	color: #fff;
	-webkit-transition: all .8s;
	transition: all .8s;
	padding: 0 1rem;
}
.DrawerMenu li a:hover {
	color: #1a1e24;
	color: var(--accent-color);
	background: #fff;
	background: var(--base-color);
}
/* ------------------------------------------------ ナビON/OFF checkbox */
.MobileNaviToggle {
	display: none;
}
/* ------------------------------------------------ ナビICON */
/* --------2018.5.1から固定を外す start ------
.MobileNavi > .NaviIcon {
	position: fixed;
	display: block;
	top: 1rem;
	right: 1rem;
	display: block;
	width: 36px;
	height: 36px;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	z-index: 9999;
}
 --------2018.5.1から固定を外す END------*/

.MobileNavi > .NaviIcon {
	position: relative;
	display: block;
	float: right;
	right: 5px;
	top: -50px;
	display: block;
	width: 36px;
	height: 5px;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	z-index: 9999;
}

.NIBar {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 36px;
	height: 5px;
	background: blue;
	background: var(--main-color);
	-webkit-transition: all .5s;
	transition: all .5s;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}
.NIBar.MiddleBar {
	top: 15px;
	opacity: 1;
}
.NIBar.BottomBar {
	top: 30px;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
}
.NaviIconTxt {
	position: absolute;
	bottom: -50px;
	left: 0;
	right: 0;
	margin: auto;
	color: #fff;
	color: var(--main-color);
	-webkit-transition: all .5s;
	transition: all .5s;
	display: block;
	visibility: visible;
	opacity: 1;
}
.NaviIcon:hover .NIBar {
	background: blue;
	background: var(--accent-color);
}
.NaviIcon:hover .NaviIconTxt {
	color: blue;
	color: var(--accent-color);
}
.MobileNavi > .NaviIconClose {
	position: fixed;
	top: 0;
	right: 300px;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,5);
	cursor: url(../images/cross.svg),auto;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	visibility: hidden;
	opacity: 0;
}
/* ------------------------------------------------ .Container */
.Container, footer {
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
}

/* ------------------------------------------------ モバイルナビONの場合 */
.MobileNaviToggle:checked ~ .MobileNavi .DrawerMenu {
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	opacity: 1;
	z-index: 20;
}
.MobileNaviToggle:checked ~ .Container ,
.MobileNaviToggle:checked ~ footer {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: translateX(-300px);
	-ms-transform: translateX(-300px);
	transform: translateX(-300px);
}
.MobileNaviToggle:checked ~ .MobileNavi .NaviIcon .NaviIconTxt {
	visibility: hidden;
	opacity: 0;
}
.MobileNaviToggle:checked ~ .MobileNavi .NaviIcon .NIBar.TopBar {
	width: 56px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color: Highlight;
}
.MobileNaviToggle:checked ~ .MobileNavi .NaviIcon .NIBar.MiddleBar {
	opacity: 0;
}
.MobileNaviToggle:checked ~ .MobileNavi .NaviIcon .NIBar.BottomBar {
	width: 56px;
	top: 40px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	background-color: Highlight;
}
.MobileNaviToggle:checked ~ .MobileNavi .NaviIconClose {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	background: rgba(0,0,0,.5);
	visibility: visible;
	opacity: 1;
	z-index: 3;
}
/* //モバイルナビCSS　END */

header h1 {
	width: calc(100%);
  box-sizing: border-box;
  margin: 0 auto;
  padding-left: calc(76px);
	font-size: 0.8rem;
	font-weight: normal;
	text-align: left;
	z-index: 10;
}
@media screen and (max-width: 960px) {
header h1 {
	font-size: 18px;
	font-weight: bolder;
	text-align: center;
	position: absolute;
	padding-left: 0;
	padding: 1rem 0;
width: 100%;
}
}
#logo {
    height: 100%;
    width: 76px;
    float: left;
    position: relative;
    top: -24px;
    z-index: 99;
}
@media screen and (max-width: 960px) {
#logo {
	top: 0;
}
}


/*=======================================
 * 要素表示/非表示
 *======================================*/ 
.DisplayNone, .Hidden {
	display: none;
}
.DisplayBlock {
	display: block;
}
.VisibilityHidden {
	visibility: hidden;
}
.VisibilityVisible {
	visibility: visible;
}
.ViewOnOff {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
}
/*=======================================
 * BUTTONボタン仕様
 *======================================*/ 
.Btn {
	float: left;
	width: auto;
	box-sizing: border-box;
	text-align: center;
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.5rem;
	border-top: solid 1px #0047BA;
	border-bottom: solid 2px #022072;
	border-left: solid 1px #0047BA;
	border-right: solid 2px #022072;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.Btn:hover,
.BtnOn {
	color: #FFF;
	color: var(--txt-color-on);
}
.Btn:hover {
	cursor: pointer;
	background-image: -ms-linear-gradient(top left, #2FCDED 0%, #1629CC 100%);
	background-image: -ms-linear-gradient(top left, var(--color-to) 0%, var(--color-from) 100%);
	background-image: -moz-linear-gradient(top left, #2FCDED 0%, #1629CC 100%);
	background-image: -moz-linear-gradient(top left, var(--color-to) 0%, var(--color-from) 100%);
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #2FCDED), color-stop(1, #1629CC));
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, var(--color-to)), color-stop(1, var(--color-from)));
	background-image: -webkit-linear-gradient(top left, #2FCDED 0%, #1629CC 100%);
	background-image: -webkit-linear-gradient(top left, var(--color-to) 0%, var(--color-from) 100%);
	background-image: linear-gradient(to bottom right, #2FCDED 0%, #1629CC 100%);
	background-image: linear-gradient(to bottom right, var(--color-to) 0%, var(--color-from) 100%);
}
.BtnOn{
    background-image: -ms-linear-gradient(top left, #1629CC 0%, #2FCDED 100%);/* 青系 */
    background-image: -ms-linear-gradient(top left, var(--color-from) 0%, var(--color-to) 100%);/* （定数）緑系 */
    background-image: -moz-linear-gradient(top left, #1629CC 0%, #2FCDED 100%);/* 青系 */
    background-image: -moz-linear-gradient(top left, var(--color-from) 0%, var(--color-to) 100%);/* （定数）緑系 */
    background-image: -o-linear-gradient(top left, #1629CC 0%, #2FCDED 100%);/* 青系 */
    background-image: -o-linear-gradient(top left, var(--color-from) 0%, var(--color-to) 100%);/* （定数）緑系 */
    background-image: -webkit-linear-gradient(top left, #1629CC 0%, #2FCDED 100%);/* 青系 */
    background-image: -webkit-linear-gradient(top left, var(--color-from) 0%, var(--color-to) 100%);/* （定数）緑系 */
    background-image: linear-gradient(to bottom right, #1629CC 0%, #2FCDED 100%);/* 青系 */
    background-image: linear-gradient(to bottom right, var(--color-from) 0%, var(--color-to) 100%);/* （定数）緑系 */
}
/*=======================================
 * Float仕様
 *======================================*/ 
.FloatT {
	float: top;
}
.FloatR {
	float: right;
}
.FloatB {
	float: bottom;
}
.FloatL {
	float: left;
}
.FloatC {
	float: center;
}
/*=======================================
 * Align仕様
 *======================================*/ 
.TxtAlignT {
	text-align: top;
}
.TxtAlignR {
	text-align: right;
}
.TxtAlignB {
	text-align: bottom;
}
.TxtAlignL {
	text-align: left;
}
.TxtAlignM {
	text-align: middle;
}
.TxtAlignC {
	text-align: center;
}
/*=======================================
 * Margin仕様
 *======================================*/ 
.Margin1rem {
	margin: 1rem;
}
.MarginT1rem {
	margin-top: 1rem;
}
.MarginR1rem {
	margin-right: 1rem;
}
.MarginB1rem {
	margin-bottom: 1rem;
}
.MarginL1rem {
	margin-left: 1rem;
}
.MarginTB1rem {
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.MarginLR1rem {
	margin-left: 1rem;
	margin-right: 1rem;
}
/*=======================================
 * Fontの大きさ定義
 *======================================*/  
.LLarger {
  font-size: 1.3rem;
}
.Larger {
  font-size: 1.2rem;
}
.Large {
  font-size : 1.1rem;
}
.Normal {
  font-size: 1rem;
}
.Small {
  font-size: 0.9rem;
}
.SSmall {
  font-size: 0.8rem;
}
.Font16 {font-size: 16pt;}
.Font15 {font-size: 15pt;}
.Font14 {font-size: 14pt;}
.Font13 {font-size: 13pt;}
.Font12 {font-size: 12pt;}
.Font11 {font-size: 11pt;}
.Font10 {font-size: 10pt;}
.Font9 {font-size: 9pt;}
.Font8 {font-size: 8pt;}
.Font7 {font-size: 7pt;}
.Font6 {font-size: 6pt;}
.Font5 {font-size: 5pt;}
.Font4 {font-size: 4pt;}
/*=======================================
 * 幅表示仕様
 *======================================*/ 
.FullWidth {
	width: calc(100%);
	float: left;
	margin: 0 auto;
	box-sizing: border-box;
	clear: both;
	position: relative;
	text-align: left;
	display: table;
}

/*-----------------------------------------------
 * ナビゲーションメニューCSS
 *-----------------------------------------------*/
nav.Navigation {
	width: calc(100% - 76px);
	box-sizing: border-box;
	float: left;
	margin: 0 auto;
	height: 52px;
	z-index: 10; 
	font-weight: bold;
}
@media screen and (max-width: 960px) {
	nav.Navigation {
		position: absolute;
		/* 開いてないときは画面外に配置 */
		top: -500px;
		width: 100%;
		text-align: center;
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		padding-left: 0px;
	}
}
.MBNaviWrapper {
        display: none;
}
@media screen and (max-width: 960px) {
	.MBNaviWrapper {
	        display: block;
	        z-index: 999;
	        height: 56px;
	        position: relative;
	        float: right;
	}
}
nav.Navigation ul.NaviMenus {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
nav.Navigation ul li.Menu {
	width: calc( 100% / 6 - 1px);
	float: left;
	height: 100%;
	position: relative; 
	margin-top : -1px;
	list-style: none;
	display: inline; 
	text-align: center;
	border-right:solid 1px #ccc; 
	box-sizing:border-box;
}
nav.Navigation ul li.Menu:last-child {
	width: 16.66%;
}

nav.Navigation ul li.MenuHoverEffect {
	background-color: #1629CC;
	background-color: var(--main-color);
	background: #1629CC;
	background: var(--main-color);
	text-decoration:none; 
}

nav.Navigation ul li.Menu:first-child{

}
nav.Navigation ul li.Menu.last{
	background:none;

}
nav.Navigation ul li.Menu a.MenuTtl {
	width: 100%;
	text-decoration:none;
	display: inline-block;
	color: #1629CC;
	color: var(--main-color);
	text-align: center;
	padding: 0.7rem 0;
}
nav.Navigation ul li.MenuHoverEffect a.MenuTtl {
	color: #FFF;
}
header div#topWrapper {
	width: 960px;
	height: 30px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
}


a.MenuTtl label.MenuLabel {
	top: 50%;
	width: 100%;
	clear: both;
	display: block;
	position: absolute;
	font-family: Monotype Corsiva;
	color: lightslategray;
	color: var(--txt-color);
	font-weight: normal;
	cursor: pointer;
}
.MenuHoverEffect a.MenuTtl label.MenuLabel {
	color: #DDD;
}
.SubMenu{
	display:none;
	position:absolute;
	top:50px;
	left:0;
	width:301%; 
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	-webkit-box-shadow: 1px 5px 10px #696969;
	-moz-box-shadow: 1px 5px 10px #696969;
	box-shadow: 1px 5px 10px #696969;
	background-color: #FFF;
	z-index: 9;
}
.SubMenuR{
	left: -201%;
}

.SubMenuTxt, .SubMenuTxtR{
	width: calc(100% / 3);
	padding: .8rem ;
	overflow: hidden;
	display: inline-block;
	line-height: 2.2em; 
	font-size: 90%; 
	box-sizing: border-box;
	text-align: left;
}
.SubMenuTxt {
	float: left;
}
.SubMenuTxtR{
	float: right;
	border-left: solid 1px #CCC; 
}
.SubMenuTxt a {
	text-decoration:none;
}
.SubMenuTxt a:hover:before  {
	content:"　" ;
}
.SubMenuTxt a:hover:after  {
	content:" ≫" ;
}
.SubMenuTxtR a:hover:after  {
	content:"　" ;
}
.SubMenuTxtR a:hover:before  {
	content:"≪ " ;
}
.SubMenuImg{
	width: calc(100% / 3 * 2);
	padding: 1em 0 0;
	float:right; 
	display:none;
	text-align:center; 
	line-height:2.2em; 
	font-size:88%;
	box-sizing: border-box;
	overflow: hidden;
}

.SubMenuImg img {
	max-width: 95%;
	moz-background-size:cover;
	background-size:cover;
	overflow:hidden;
}
.SubMenuImg label {
	font-weight: bold;
	top: -1rem;
	position: relative;
}

/*=======================================
 * sideMenuL(カテゴリ)
 *======================================*/
#categoryMenu {
	width: 100%;
}
ul#categorySortable {
	width: 100%;
	border: 1px solid #CCC;
	border: 1px solid var(--border-color);
	list-style:none;
	padding: 0;
	margin: 0;
	border-radius: 3px;
}
ul#categorySortable li {
	padding: 0.25rem 1rem;
	border-bottom: 1px dotted #00b31e;
	border-bottom: 1px dotted var(--border-color);
	text-align: left;
}
ul#categorySortable li:last-child {
	border-bottom: 0;
}
ul#categorySortable:hover {
	border: 1px solid #00b31e;
	border: 1px solid var(--main-color);
}
#categoryMenu ul li:first-child {

	height: 1.9rem;
	text-align: center;
	padding: .25rem 0;
	box-sizing: border-box;
	margin: 0;
	cursor: auto;
	
	background-color: #CCC;
    background-color: var(--base-color);
    background-image: -ms-linear-gradient(top, #FFF, #DDD);/*IE10以上*/
    background-image: -moz-linear-gradient(top, #FFF, #DDD);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(1, #DDD));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFF',EndColorStr='#DDD');/*IE8,9*/
}
#categoryMenu ul li:first-child span {
	font-weight: bolder;
	font-size: 1.2rem;
}
ul#categorySortable:hover li:first-child {
	color: #FFF;
	background-color: #1629CC;
	background-color: var(--accent-color);
	background-image: -ms-linear-gradient(top, #1629CC, #2FCDED);
	background-image: -moz-linear-gradient(top, var(--color-from), var(--color-to));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--color-from)), color-stop(1, var(--color-to)));
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#1629CC',EndColorStr='#2FCDED');/*IE8,9*/
}
#categoryMenu ul li:first-child:hover {
	background-color: #1629CC;
	background-color: var(--accent-color);
	background-image: -ms-linear-gradient(top, #1629CC, #2FCDED);
	background-image: -moz-linear-gradient(top, var(--color-from), var(--color-to));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--color-from)), color-stop(1, var(--color-to)));
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#1629CC',EndColorStr='#2FCDED');/*IE8,9*/
}

.topLine 
	{height: 30px;position: absolute;top: 0px;margin-left: 15%;margin-right: 5%;z-index: 10;}


.LangTool 
	{float:right;width:18em;height:30px;font-size:90%;}
.LangTool a
	{color: gray;}	

/*=======================================
 * checkbox定義
 *======================================*/ 
 input.CheckBox{
    display:none;
}
input.CheckBox + label {
	margin-left:20px;
    display:inline-block;
    position:relative;
    padding-left:20px;
}
input.CheckBox + label:before,input.CheckBox + label:after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:15px;
    height:15px;
}
input.CheckBox + label:before{
    background:#FFF;
    border:1px solid #666;
    border-radius:3px;
}
input.CheckBox:checked + label:before{
    background: #A8EDA8;
}
input.CheckBox:checked + label:after{
    top:2px;
    height:7px;
    border-left: 4px solid #32a138;
    border-bottom: 3px solid #32a138;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
input.CheckBox:hover, input.CheckBox + label:hover {
	cursor:pointer;
}
/*=======================================
 * パンくずリスト
 *======================================*/ 
.CrumbList {
	list-style-type: none;
	text-align: left;
	margin: 0.5rem 0;
}
.CrumbList li {
	display: inline;
}
.CrumbList li::before {
	content: ' \00bb ';
}
.CrumbList li:first-child:before {
	content: '';
}

.CrumbList li a {
	text-decoration: none;
}
.CrumbList li a {
  position: relative;
  display: inline-block;
  transition: .3s;
}
.CrumbList li a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: blue;
  background-color: var(--main-color);
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.CrumbList li a:hover::after {
  width: 100%;
}

/*=======================================
 * Adsense CSS
 *======================================*/ 
.Adsense {
	margin: 10px auto;
	height: auto;
}
#footerAdsense {
	margin: 1rem auto;
}

/*=======================================
 * Image CSS
 *======================================*/ 
img.Loading {
	display: block;
	margin: auto;
}
/*=======================================
 * 改行CSS
 *======================================*/ 
.Br--sp { display:none; }
@media screen and (max-width: 479px){   
  .Br--sp { display:block; }
}
 
/*=======================================
 * base table
 *======================================*/ 
/*-- Base table Style 1 --*/ 
table.BaseTbl {
	border-spacing: 0;
	text-align: left;
	line-height: 1.5rem;
	border-collapse: collapse;
}
table.BaseTbl th,
table.BaseTbl td {
	padding: 0.25rem 0.5rem;
	vertical-align: top;
	border: 1px solid #CCC;
}
table.BaseTbl th {
	font-weight: bold;
}
table.BaseTbl thead th {
	background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -ms-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/*-- Base table Style 2 --*/ 
table.infoTable {
	border-collapse: collapse;
	border: 0;
	width: 100%;
}
table.infoTable td {
	border-bottom: dotted 1px #222;
	text-align: left;
}
table.infoTable tr:first-child  td {
	/*border-top: dotted 1px #222;*/
}
td.txtRight {
	text-align: right;
}
table.infoTable td:first-child {
	color: #266CB5;	
	padding: 10px 0 10px 5px;;
	width: 20%;
	font-weight: bold;
  	text-indent: 0.1em;
}
table.infoTable td:last-child {
	padding: 10px 0 10px 5px;;
	width: 75%;
}
.infoTableFnt1 {
	font-color: 266CB5;	
	font-size: 1.2em;
}
.infoTableFnt2 {
	font-color: #222;
	font-size: 1em;
}

/*-- responsive table --*/ 
.Table--responsive {
	border-collapse: collapse;
    border-spacing: 0;
	box-sizing: border-box;
	width: 100%;
	width: calc(100% - 1px);
}
.Table--responsive th, 
.Table--responsive td {
	padding: 10px; 
	border: 1px solid #ddd; 
}
.Table--responsive th { 
	width: 25%; 
	text-align: left; 
	background: #f4f4f4; 
}
.Table--responsive thead th {
	font-size: 110%;
	font-weight: bold;
	text-align: center;
	border: 0;
	background :none;
}
.Table--responsive tfoot td { 
	text-align:right;
	font-size: 80%; 
	border: 0;
}

@media only screen and (max-width:680px){
	.Table--responsive	{ 
		margin: 0 auto; 
	}
    .Table--responsive th,
    .Table--responsive td{
		width: 100%;
		border-top: none;
        display: inline-block;
		box-sizing: border-box;
    }
    .Table--responsive th {
    	border-bottom: 1px dotted #ddd;
    }
	.Table--responsive tr:first-child th { 
		border-top: 1px solid #ddd; 
	}
	.Table--responsive thead th {
		border: 1px solid #ddd; 
		border-bottom: 0;
	}
}

/*=======================================
 * cross table
 *======================================*/ 
 .Cross--highlight {
  border-spacing: 0;
  border-collapse: collapse;
  border: solid 1px #666;
  overflow: hidden;
}
.Cross--highlight tr:hover {
  background-color: #f0f0f0;
}
.Cross--highlight td, .Cross--highlight th {
  padding: 0.5rem;
  position: relative;
  /*box-shadow: 0px -3px 8px 1px #eee inset;*/
  border: 1px gray solid;
}
.Cross--highlight thead td, .Cross--highlight thead th {
  /*box-shadow: 0px -3px 8px 1px #eee inset;*/
}
.Cross--highlight td:hover {
  background-color: #ccc;
}
.Cross--highlight td:hover:after {
  content: "";
  background-color: #f0f0f0;
  width: 100%;
  height: 200vh;
  position: absolute;
  top: -100vh;
  left: 0;
  z-index: -1;
}
 
/*===========================================
 * 一覧テーブル仕様 class = ListTbl
 *===========================================*/
tabl.ListTbl {
    text-align: left;
    line-height: 1.5rem;
    border-collapse: collapse;
}
.ListTbl,
.FixedHead,
.ScrollBody,
.ListTbl tr {
	width: 100%;
	box-sizing: border-box;
}
.FixedHead,
.ScrollBody {
	display: block;
}
.ScrollBody {
	overflow-y: scroll;
	width: calc(100%);
}
.ListTbl tr {
	display: flex;
}
.ListTbl td,
.ListTbl th{
	table-layout:fixed;
	box-sizing: border-box;
	vertical-align: middle;
	border: 1px solid #CCC;
}

.redFont {
	font-color: red;
}
/***********************************
 * （DLタグ）情報一覧表示用CSS
 ***********************************/
dl.InfoList { 
	border: 1px solid #CCC; 
}
dl.InfoList dt {
    clear: left;
    float: left;
    width: 6rem;
    padding: 0 1%;
    border-top: 1px solid #CCC;
}
dl.InfoList dd {
  display: block;
  margin: 0 0 0 6.6rem;
  padding: 0 1%;
  font-size: .9em;
  line-heitht: 1.1em;
  border-top: 1px solid #CCC;
  border-left: 1px solid #CCC;
	text-align: left;
}

dl.InfoList dt:first-child,
dl.InfoList dd:first-of-type { border-top: 0 none transparent; }

/*=======================================
 * Flash CSS
 *======================================*/ 

#flashMessage {
    padding: 10px;
    border-radius: 4px;
}

.SuccessMessage {
    background-color: #dff7df;
    border: 1px solid #5cb85c;
}
.WarningMessage {
    color: #CD0A0A;
    background-color: lightYellow;
    border: 1px solid #E6DB55;
}
.FailureMessage {
    color: #CD0A0A;
    border: 1px solid #CD0A0A;
    background-color: #FEF1EC;
}
.ErrorMessage {
    color: #CD0A0A;
    border: 1px solid #CD0A0A;
    background-color: #FEF1EC;
}
/*=======================================
 * validation CSS
 *======================================*/ 
.form-error {
    background-color: pink;
}
.error-message {
    font-size: 85%;
    color: red;
}
/*=======================================
 * Title CSS
 *======================================*/ 
.Category:before {
    position: absolute;
    top: 0.3em;
    left: 0px;
    width: 0.4em;
    height: 1em;
    background: #2577e3;
    content: "";
}
 .Category {
 	font-size: 18px !important;
    color: #333333 !important;
    margin: 0.3em 0em !important;
    padding: 0.3em 0.8em 0px 0.8em !important;
    background-color: #fff !important;
    position: relative !important;
    border-bottom: 1px dotted #0050d4 !important;
    
    font-size: 120%;
    height: 32px;
    width: 100%;
    text-align: left;
    clear: both;
    font-weight: bold;
    text-indent: 0em!important;
 }
 
.Category:after {
    position: absolute;
    top: 1em;
    left: 0;
    width: 0.4em;
    height: 0.4em;
    background: #0050d4;
    content: "";
}

.Ttl {
    background: url(/img/icon/ttl.png) no-repeat;
    padding-left: 1.5rem;
    background-position: center left;
    box-sizing: border-box;
    float: left;
    text-align: left;
    font-weight: bold;
    color: #32a138;
    color: var(--main-color);
    width: 100%;
    text-align: left;
}

.Tittle-icon--tranggle {
    background: url(/img/icon/arrow_tranggle_right.svg) no-repeat;
    margin-left: 0.5rem;
    background-position: center left;
    box-sizing: border-box;
    float: left;
    text-align: left;
    font-weight: bold;
    color: #32a138;
    color: var(--main-color);
    width: 100%;
    text-align: left;
    line-height: 150%;
}

/* 見出しCSS(共通用) */
.Midashi {
	color: var(--font-color);
	font-size: 1.1rem;
	/*line-height: 2rem;*/
	margin: 0 auto;
	padding: 0.5rem 0.2rem;
	border-left: 1rem solid #1629CC;
	border-left: 1rem solid var(--main-color);
	border-bottom: 2px solid #1629CC;
	border-bottom: 2px solid var(--main-color);
	font-weight: bold;
	text-align: left;
	box-sizing: border-box;
}

.MidashiEn {
	font-size: 1.1rem;
	position: relative;
	color: #333;
	color: var(--txt-color);
	text-shadow: 0 0 2px white;
}
.MidashiEn:before {
	content: "";
	position: absolute;
	background: #9de5ff;
	background: var(--bg-color);
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	top: 50%;
	left: -0.85rem;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: -1;
}
.MidashiEn:first-letter {
	font-size: 1.2rem;
	color: var(--txt-color-on);
}

.Midashi--hashi {
	position: relative;
	color: #158b2b;
	color: var(--main-color);
	font-size: 20px;
	padding: 10px 0;
	text-align: center;
	margin: 1.5em 0;
}
.Midashi--hashi:before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 150px;
	height: 58px;
	border-radius: 50%;
	border: 5px solid #a6ddb0;
	border: 5px solid var(--main-color);
	border-left-color: transparent;
	border-right-color: transparent;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.Title--ribbon {
  display: inline-block;
  position: relative;
  height: 45px;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
}
.Title--ribbon:before {/*左側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  left: -35px;
  z-index: -2;
  border: 20px solid #56adf3;
  border-left-color: transparent;/*山形に切り抜き*/
}

.Title--ribbon:after {/*右側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  right: -35px;
  z-index: -2;
  border: 20px solid #56adf3;
  border-right-color: transparent;/*山形に切り抜き*/
}

.Title--ribbon h3 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 20px;
  line-height: 45px;
  font-size: 18px;
  color: #FFF;
  background: #2196F3;/*真ん中の背景色*/
}
.Title--ribbon h3:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #397eb5;/*左の折り返し部分*/
}
.Title--ribbon h3:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #397eb5;/*右の折り返し部分*/
}

/*=======================================
 * グループ単位ブロック CSS
 *======================================*/ 
.GroupWrapper {
	border: 1px solid var(--border-color);
}
.GroupWrapper:hover {
	border: 1px solid var(--border-color-on);
}
.GroupWrapper .Title {
	background-color: var(--bg-color);
	background-image: -moz-linear-gradient(top, #FFF, #DDD);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(1, #DDD));
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFF',EndColorStr='#DDD');
}
.GroupWrapper:hover .Title {
	color: var(--txt-color-on);
	background-color: var(--bg-color-on);
	background-image: -moz-linear-gradient(top, var(--color-from), var(--color-to));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--color-from)), color-stop(1, var(--color-to)));
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='var(--color-from)',EndColorStr='var(--color-to)');
}

/*=======================================
 * Footer中でのＣＳＳ定義
 *======================================*/ 
 footer {
	text-align: left;
	position: relative;
	clear: both;
	border-top: 3px solid #114098;
	border-top: 3px solid var(--main-color);
	/*background:#114098;*/
	margin-top: 2rem;
	background: url(./img/common/bg_footer.gif) repeat;
	background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -ms-linear-gradient(top, #c9dbe9 0%, #fff 100%);

}
#footerInner {
	width: 100%;
	text-align: left;
	padding: 0 3%;
	box-sizing: border-box;
}
footer a:link,
footer a:visited,
footer a:hover {
	color: #FFF;
	
}
.ToTop {
    left: 0.2rem;
    bottom: 0.2rem;
    position: fixed;
}

@media screen and (max-width: 1024px) {
	.ToTop {
	    display: none!important;
	}
}

.PageTop {
	position: absolute;
    top: -2rem;
    width: 8rem;
    left: auto;
    right: 2%;
    height: 2rem;
    font-weight: bolder;
    text-align: center;
    color: #FFF;
    background:#114098;
    background: var(--main-color);
}



/****************************************************
 * input.text,password,textarea,radio,checkbox　CSS
 ****************************************************/
input.Text,
input.Password {
	height:1.7rem;
}
.Textarea{
	line-height: 130%;
}

input.Text,
input.Password ,
.Textarea{
	font-weight: bold;
	font-size: 120%;
	padding: 0.25rem 0 0.25rem 0.125rem;
	border: 1px solid #CCC;
	border: 1px solid var(--border-color);
}
input.Text:hover,
input.password:hover,
.Textarea:hover{
    border: 1px solid #007ced;
    border: 1px solid var(--border-color-on);
}
input.Text:focus,
input.password:focus,
.Textarea:focus{
    box-shadow: inset 0 0 2px #00f;
    box-shadow: inset 0 0 2px var(--border-color-focus);
}

input.Radio{
  display: none;
}
input.Radio + label{
  padding-left: 1.3rem;
  position:relative;
  margin-right: 1rem;
}
input.Radio + label:hover{
	cursor:pointer;
	color: var(--accent-color);
}
input.Radio + label::before{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 0.75rem;
  height: 0.75rem;
  background: #EEE;
  border-radius: 50%;
  border: 1px solid #666;
}
input.Radio:checked + label::before{
  background: var(--accent-color);
  border: 1px solid var(--border-color);
}
input.Radio:checked + label{
  color: #007ced;
  color: var(--accent-color);
}
input.Radio:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 18px;
  height: 18px;
  border: 1px solid #999;
  border: 1px solid var(--accent-color);
  border-radius: 50%;
}

input.Checkbox{
    display:none;
}
input.Checkbox + label {
	margin-left: 1.25rem;
    display: inline-block;
    position: relative;
    padding-left: 1.25rem;
}
input.Checkbox + label:before,
input.Checkbox + label:after{
    content: '';
    display: block;
    position: absolute;
    top: 1px;
    left: 0;
    width: 1rem;
    height: 1rem;
}
input.Checkbox + label:before{
    border: 1px solid #666;
    border-radius: 2px;
}
input.Checkbox:checked + label:before{
    background: #A8EDA8;
    background: var(--accent-color);
}
input.Checkbox:checked + label:after{
    top: 0px;
    left: 2px;
    height: 8px;
    border-left: 3px solid rgb(0,179,30);
    border-left: 3px solid var(--txt-color-on);
    border-bottom: 3px solid rgb(0,179,30);
    border-bottom: 3px solid var(--txt-color-on);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
input.Checkbox:hover, 
input.Checkbox + label:hover {
	cursor:pointer;
}

/****************************************************
 * <select class="Select"> css
 ****************************************************/

.Selector {
	margin: 0 auto;
}
.Selector label {
	position: relative;		/* 選択ボックスの位置指定 */ 
	display: block;			/* ブロックレベル要素化にする */ 
	border: 1px solid #CCC;/* ボックスの境界線を実線で指定する */
	border: 1px solid var(--border-color);
	border-radius: 3px;		/* ボックスに角丸を指定する */
	background: #fff;		/* ボックスの背景色を指定する */
	background: var(--base-color);
	width: auto;
}
.Selector label:before {
	position: absolute;	/* 矢印の位置を指定する */
	content: "";		/* 矢印のコンテンツ */ 
	top: 45%;			/* 下部から配置の基準位置を決める */ 
	right: 10px;		/* 右側から配置の基準位置を決める */ 
	width:0px;			/* ボックスの横幅をなしに指定する */
   	height:0px;			/* ボックスの高さをなしに指定する */
	margin: -2px 0 0 0;	/* ボックス外側の余白を指定する */
	border: 7px solid transparent;	/* 矢印の境界線を透過する */
	border-top: 7px solid var(--txt-color);	/* 矢印ボックス上部の境界線を実線で指定する */
	cursor: pointer;		/* マウスカーソルの形を指定する */
	pointer-events: none;	/* マウスイベントを制御する */
}
.Selector label:hover:before {
	border-top: 7px solid var(--accent-color);	/* 矢印ボックス上部の境界線を実線で指定する */
}
.Selector label:hover {
	border: 1px solid var(--accent-color);
}

.Select {
	-webkit-appearance: none;/* ベンダープレフィックス(Google Chrome、Safari用) */
	-moz-appearance: none;	/* ベンダープレフィックス(Firefox用) */
	appearance: none;		/* 標準のスタイルを無効にする */ 
	display: block;			/* ブロックレベル要素化する */ 
	width: 100%;			/* ボックスの高さを指定する */
	padding: 5px 7px;		/* ボックス内側の余白を指定する */
	color: var(--txt-color);			/* フォントの色を指定 */
	border: none;			/* 境界線をなしに指定する */
	border-radius: 3px;		/* 角丸を指定する */
	background: transparent;/* 背景を透過指定する */
	cursor: pointer;
}
::-ms-expand {		/* select要素のデザインを無効にする（IE用） */
	display: none;
}

/****************************************************
 * .Tooltip 吹き出しcss
 ****************************************************/
 /*クエスチョンマーク*/
.QMark,
.TTMark {
	color: #FFF;
	color: var(--txt-color-on,#FFF)!important;
	text-align: center;
	text-decoration: none;
	font-size: 90%;
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	background: blue;
	background: var(--main-color,blue);
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	
}
/* 吹き出し */
.Tooltip {
	position: relative;	/*吹き出しの表示位置指定の基準とするため追加*/
}
.Tooltip:hover {
	color: #fff;
	color: var(--txt-color-on);
	background: #CE4A44; 
	background: var(--accent-color); 
}
.Tooltip span {
	display: none;
	padding: 2px 3px;
	width: 15rem;/*吹き出しの幅 */
}
.Tooltip:hover span{
	color: #fff;
	color: var(--txt-color-on);
	display: inline;
	position: absolute;
	background: #CE4A44;
	background: var(--accent-color);
	/*border: 1px solid var(--border-color-on);*/
	bottom: 1.8rem;	/*位置指定追加。クエスチョンマークの下端から、吹き出しの下端を25px上げる*/
	left: -7.4rem;	/*位置指定追加。吹き出しの幅の半分を左に移動させる*/
}

/*アニメーションの制御設定*/
.BubbleUpAnimation:hover span{
	-moz-animation: bubbleUp 0.3s 1;
	-webkit-animation: bubbleUp 0.3s 1;
	-o-animation: bubbleUp 0.3s 1;
	animation: bubbleUp 0.3s 1;
}
/*アニメーションの内容*/
@-moz-keyframes bubbleUp {
	0% {bottom: 1rem; opacity:0;}
	100% {bottom: 1.7rem; opacity:1;}
}
@-webkit-keyframes bubbleUp {
	0% {bottom: 1rem; opacity:0;}
	100% {bottom :1.7rem; opacity:1;}
}
@-o-keyframes bubbleUp {
	0% {bottom: 1rem; opacity:0;}
	100% {bottom: 1.7rem; opacity:1;}
}
@keyframes bubbleUp {
	0% {bottom: 1rem; opacity:0;}
	100% {bottom: 1.7rem; opacity:1;}
}
/*アニメーションの制御設定*/
.BubbleUpAnimation2:hover span{
	-moz-animation: bubbleUp2 0.3s ease-in-out 1;
	-webkit-animation: bubbleUp2 0.3s ease-in-out 1;
	-o-animation: bubbleUp2 0.3s ease-in-out 1;
	animation: bubbleUp2 0.3s ease-in-out 1;
}
/*アニメーションの内容*/
@-moz-keyframes bubbleUp2 {
	0% {bottom:0px; opacity:0; -moz-transform: scale(0,0);}
	40% {bottom:45px; opacity:1; -moz-transform: scale(1.15,1.15);}
	60% {bottom:25px; opacity:1; -moz-transform: scale(1,1);}
	80% {bottom:30px; opacity:1; -moz-transform: scale(1.05,1.05);}
	100% {bottom:25px; opacity:1; -moz-transform: scale(1,1);}
}
@-webkit-keyframes bubbleUp2 {
	0% {bottom:0px; opacity:0; -webkit-transform: scale(0,0);}
	40% {bottom:45px; opacity:1; -webkit-transform: scale(1.15,1.15);}
	60% {bottom:25px; opacity:1; -webkit-transform: scale(1,1);}
	80% {bottom:30px; opacity:1; -webkit-transform: scale(1.05,1.05);}
	100% {bottom:25px; opacity:1; -webkit-transform: scale(1,1);}
}
@-o-keyframes bubbleUp2 {
	0% {bottom:0px; opacity:0; -o-transform: scale(0,0);}
	40% {bottom:45px; opacity:1; -o-transform: scale(1.15,1.15);}
	60% {bottom:25px; opacity:1; -o-transform: scale(1,1);}
	80% {bottom:30px; opacity:1; -o-transform: scale(1.05,1.05);}
	100% {bottom:25px; opacity:1; -o-transform: scale(1,1);}
}
@keyframes bubbleUp2 {
	0% {bottom:0px; opacity:0; transform: scale(0,0);}
	40% {bottom:45px; opacity:1; transform: scale(1.15,1.15);}
	60% {bottom:25px; opacity:1; transform: scale(1,1);}
	80% {bottom:30px; opacity:1; transform: scale(1.05,1.05);}
	100% {bottom:25px; opacity:1; transform: scale(1,1);}
}
/*吹き出しの足*/
.Tooltip:hover span:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 0.5rem solid #CE4A44;
	border-top: 0.5rem solid var(--accent-color);
	border-left: 0.5rem solid transparent;
	border-right: 0.5rem solid transparent;
	position: absolute;
	left: 7.5rem;
	bottom: -0.5rem;
}

/****************************************************
 * 背景色gradient
 ****************************************************/
.BgGradient {    
   	background-color: #CCC;
    background-color: var(--base-color);
    background-image: -ms-linear-gradient(top, #FFF, #DDD);/*IE10以上*/
    background-image: -moz-linear-gradient(top, #FFF, #DDD);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(1, #DDD));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFF',EndColorStr='#DDD');/*IE8,9*/
}

/****************************************************
 * class="RegularBtn" button css
 ****************************************************/
.RegularBtn {
	font-size: 90%;
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #B6B6B6;
    border-radius: 3px 3px 3px 3px;
    line-height: 111%;
    height: 2rem;
    padding: 0.5rem;
    color: #333;
    color: var(--txt-color);
    box-sizing: border-box;
    /*text-shadow: 0 1px 0 rgba(255,255,255,.6);*/
    background-attachment: scroll;
   	background-color: #CCC;
    background-color: var(--base-color);
    background-image: -ms-linear-gradient(top, #FFF, #DDD);/*IE10以上*/
    background-image: -moz-linear-gradient(top, #FFF, #DDD);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(1, #DDD));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFF',EndColorStr='#DDD');/*IE8,9*/
}
.RegularBtn:hover {
	/*background-image: none;*/
	background-color: blue;
	color: #FFF;
	color: var(--txt-color-on);
	border: 1px solid var(--accent-color);
	background-image: -ms-linear-gradient(top, #1629CC, #2FCDED);
	background-image: -moz-linear-gradient(top, var(--color-from), var(--color-to));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--color-from)), color-stop(1, var(--color-to)));
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#1629CC',EndColorStr='#2FCDED');/*IE8,9*/
}

/********************************************************
 * SlideUp：バナーmouse hover event
 ********************************************************/
/* 
.SlideUpBox {
	margin: 0.5rem auto 0;
	padding: 0;
	border: 1px solid #CCC;
	border: 1px solid var(--border-color);
}
li.SlideUp {
	display: inline-block;
	position: relative;
	overflow: hidden;
	letter-spacing: 0;
	width: 100%;
	height: 100%;
}
.SlideUp dl {
	width:100%;
	height: 100%;
	top: -2.2rem;
	position: absolute;
	text-align: center;
	margin: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 0.5rem;
	color: #fff;
	background: var(--accent-color);
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
	transition: opacity 0.6s, transform 0.6s;
}
.SlideUp:hover dl {
	opacity: 1;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
}
.SlideUp dl dt {
	margin-bottom: 0.5rem;
	width: 100%;
	font-weight: bold;
	font-size: 90%;
}

.SlideUp dl:hover dt {
	background: var(--main-color);
	width: 100%;
}
.SlideUp dl dd {
	margin: auto 1rem;
	line-height: 1.8;
	text-align: justify;
	word-break: break-all;
	font-size: 90%;
}
.SlideUp dl dd:last-of-type {

}
.SlideUp dl dd:last-of-type a {

}
.SlideUpBox img.ImgBanner {
	
}

.SlideUpBox dd a,
.SlideUpBox dd a:link,
.SlideUpBox dd a:visited,
.SlideUpBox dd a:hover,
.SlideUpBox dd a:active {
	color: #FFF;
	color: var(txt-color-on);
}
*/
/*-------------------------------------------------------
 * SlideUp CSS
 *------------------------------------------------------*/
.SlideUpWrap {
	border: 1px solid #CCC;
	border: 1px solid var(--border-color);
}
.SlideUp {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	letter-spacing: 0;
}
.SlideUp__content {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	position: absolute;
	top: -2.2rem;
	text-align: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	color: #fff;
	background: var(--bg-color);
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: opacity 0.6s, 
	-webkit-transform 0.6s;
	transition: opacity 0.6s, transform 0.6s;
}
.SlideUp:hover .SlideUp__content {
	opacity: 0.9;
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	background: var(--bg-color-on);
}
.SlideUp__komidashi {
	padding: 0.5rem 0;
	height: 2.2rem;
	width: 100%;
	font-weight: bold;
	font-size: 90%;
	color: #222;
	color: var(--txt-color);
	font-weight: bolder;
	box-sizing: border-box;
	background-color: #CCC;
    background-color: var(--bg-color);
    background-image: -ms-linear-gradient(top, #FFF, #CCC);
    background-image: -moz-linear-gradient(top, #FFF, #CCC);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(1, #CCC));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFF',EndColorStr='#CCC');
}
.SlideUp:hover .SlideUp__komidashi {
	background: var(--main-color);
	width: 100%;
	color: #FFF;
	color : var(--txt-color-on);
}
.SlideUp__txt {
	margin: auto 1rem;
	line-height: 1.8;
	text-align: justify;
	word-break: break-all;
	font-size: 90%;
}
.SlideUp__txt:last-of-type {
	text-align: center;
}
.SlideUp__txt:last-of-type a {
	/*
	color: #FFF;
	font-weight: bolder;
	*/
}
img.SlideUp__bgImg {
	 object-fit: cover;
	 width: 100%;
}
.SlideUp__txt a {
	text-decoration: none;
}
.SlideUp__txt a,
.SlideUp__txt a:link,
.SlideUp__txt a:visited,
.SlideUp__txt a:hover,
.SlideUp__txt a:active {
	color: #FFF;
	color: var(txt-color-on);
}
/*-------------------------------------------------------
 * 形状 CSS (共通) TODO 補全が必要
 *------------------------------------------------------*/
.Shap__square--250 {
	width: 250px;
	height: 250px;
}


.WidthPercent100 {
	width: 100%;
	height: auto;
}


/*************************************************
* 検索Button及びinput text CSS
**************************************************/
.SearchArea {/* 検索全体のBOX */
  width: 100%;
  height: 3rem;
  margin: auto;
  letter-spacing : 0.1rem;
  line-height: 100%;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.SearchCategory {/* -検索カテゴリ */

	width: 100%;
	height: 1rem;
	margin: 0 auto;
	float: left;
	clear: both;
	margin-left: 8rem;
}
@media screen and (max-width: 1024px) {
	.SearchCategory {
		margin-left: 4rem;
	}
}
.SearchContent {/* -検索内容エリア */
	width: 100%;
	height: 2rem;
	font-weight: bold;
}
.SearchCategory dt.SCItem { /* --- 検索カテゴリCSS */
	width: 3rem;
	height: 100%;
	float: left;
	font-size: 90%;
	box-sizing: border-box;
}
.SearchCategory dt.SCItem:first-child {
	border-left: 0px;
}
.SearchCategory dt.SCItem:active {
	font-weight: bold;
	color: green;
	color: var(--accent-color);
}
.SearchCategory dt.SCItem:hover {
	font-weight: bold;
	color: green;
	color: var(--accent-color);
	cursor: pointer;
}
.SearchCategory dt.SCCur {
	font-weight: bold;
	color: green;
	color: var(--accent-color);
}
.SearchContent .SearchWord {/* 入力エリア--- */
  display: block;
  float: left;
  box-sizing: border-box;
  height: 100%;
  width: calc(100% - 15rem);
  margin: 0;
  padding: 0 0.3rem;
  border: 2px solid #007fff;
  border: 2px solid var(--main-color);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  color: #333;
  color: var(--txt-color);
  outline: 0; /* 入力の薄い枠を非表示  */
  font-size: 110%;
}
@media screen and (max-width: 1024px) {
	.SearchContent .SearchWord {/* 入力エリア--- */
		width: calc(100% - 10rem);
	}
	
}

.SearchContent .SearchBtn {/* 検索ボタン --- */
  float: left;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0 3px 3px 0;
  background: #007fff;
  background: var(--main-color);
  color: #fff;
  cursor: pointer;
  line-height: 100%;
  font-size: 100%;
  padding: 0 0.3rem;
}
.SearchContent .SearchBtn:hover {
  opacity: 0.9;
}
.SearchContent .SearchWord:focus {
  background: #cfe7ff;
}
.SearchContent .SearchImg {
  display: inline-block;
  height: 100%;
  margin: 0 1px 0 0;
  vertical-align: middle;
}
.SearchContent .SearchWord::-ms-clear {
  display: none;
}
button.SearchBtn label {
	cursor: pointer;
	vertical-align: middle;
}

/*************************************************
* ResponsiveDiv 
**************************************************/
.ResponsiveDiv {
	width: calc(100% / 3);
	box-sizing: border-box;
	display: inline-block;
	float: left;
}
@media screen and (max-width: 1024px) {/* mobile css */
	.ResponsiveDiv {
		/*width: calc(100% / 2);*/
	}
}
@media screen and (max-width: 680px) {/* mobile css */
	.ResponsiveDiv {
		width: 100%;
	}
}

.ResponsiveDiv:last-child {
	margin-right: 0;
}

/********************************************************
** 部品(Block) 定義
*********************************************************/	
.Block {
	width: calc(100% / 2 - 0.5rem);
	margin: 0.5rem 0.5rem 0 0;
	float: left;
}
.Block:last-child {
	margin-right: 0
}
@media screen and (max-width: 1024px) {/* mobile css */
	.Block {
		width: 100%;
	}
}
.BBody {
	width: 100%;
	border: 1px solid #CCC;
	float: left;
	text-align: left;
	box-sizing: border-box;
	display: inline-block;
	-webkit-transition: 1.2s;
    -moz-transition: 1.2s;
    -o-transition: 1.2s;
    -ms-transition:1.2s;
    transition: 1.2s;
    overflow: hidden;
}
.BBody:hover {
	border: 1px solid #1629CC;
	border: 1px solid var(--main-color);
	background: #cfe7ff;
}
.BContent {
	width: 100%;
	display: inline-block;
	position: relative;
}

.BContent dt {
	font-size: 1rem;
	font-weight: bold;
	padding-left: 0.5rem;
}
.BContent dt span {
	font-weight: normal;
	font-size: 0.9rem;
}
.BContent dd {
	/*
	text-indent: 1rem;
	white-space: nowrap;
	overflow: hidden;
	margin: 0.5rem 1rem;*/
	/*
	word-wrap: break-word;
	word-break: break-all;
	display: inline-block;
	*/
	/* 一行しかできないオーバーの際に省略号付く*/
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.BHeader {
	position: relative;
	display: block;
    padding: 0.4rem 0 0.4rem 0.5rem;
	box-sizing: border-box;
	font-weight: bolder;
	background-color: #CCC;
    background-color: var(--base-color);
    background-image: -ms-linear-gradient(top, #FFF, #DDD);/*IE10以上*/
    background-image: -moz-linear-gradient(top, #FFF, #DDD);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(1, #DDD));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFF',EndColorStr='#DDD');/*IE8,9*/

    -webkit-transition: 1.2s;
    -moz-transition: 1.2s;
    -o-transition: 1.2s;
    -ms-transition:1.2s;
    transition: 1.2s;
}
.BBody:hover .BHeader {
	color: #FFF;
	color: var(--txt-color-on);
	background-color: #1629CC;
	background-color: var(--accent-color);
	/*
	background-image: -ms-linear-gradient(top, #1629CC, #2FCDED);
	background-image: -moz-linear-gradient(top, var(--color-from), var(--color-to));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--color-from)), color-stop(1, var(--color-to)));
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#1629CC',EndColorStr='#2FCDED');
	*/
	background: #1629CC;
	background: var(--bg-color-on);
	
}

.Block:hover .BHeader a {
	color: #FFF;
	color: var(--base-color);
}

.BItem, 
.BTxt 
{
	width: calc(100% - 5rem);
	float: left;
}
.BTxt {
	text-indent: 1.5rem;
	margin: 0 auto;
	line-height: 150%;
	font-weight: normal;
}
.BItem a, 
.BTxt a {
	font-size: 95%;
	font-weight: normal;
} 
.RightTopImg {
	position: absolute;
	top: 0.1rem;
	right: 0.1rem;
	width: 5rem;
	height:5rem;
	margin: 0!important;
	padding: 0!important;
	text-align: center;	
}


/****************************************************
 * ドラッグできる部品CSS
 ****************************************************/
.Portable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    /*display: table-row;*/
    float: left;
    box-sizing: border-box;
}
.PortableItem {
    margin: 0 auto;
    font-size: 1rem;
    font-weight: bold;
	box-sizing: border-box;
	/*display: table-cell;*/
	display: inline-block;
    vertical-align: top;
}
.PortableContent {
	width: 100%;
}
/*
.PortableContent .Block .BHeader {
	cursor: move;
}
*/
.MenuTxt {
	width: 100%;
	padding-left: 1em;
	z-index: 1;
}
/*********************************
 *  縦真ん中CSS
 *********************************/
.VerticalMiddle {
	height: 100%;
	display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: left;
}
/* 一行しかできないオーバーの際に省略号付く*/
.Just1Row {
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/***************************************************************
 * (検索条件) ResearchTbl CSS(共通)
 ***************************************************************/
.ResearchTbl {
	width: 100%;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	box-sizing: border-box;
	text-align: left;
}
.ResearchTbl dt, .ResearchTbl dd {
	padding: 0.2rem;
	height: 2.5rem;
}
@media only screen and (max-width:580px) {
	.ResearchTbl dt, .ResearchTbl dd {
		padding: 0.2rem;
		height: 1.5rem;
	}
}
.ResearchTbl dt {
	width: 6rem;
	clear: left;
	float: left;
	font-size: 1rem;
	border-top: 1px solid #DDD;
	padding-left: 1rem;
}
.ResearchTbl dd {
	background-color: #FFF;
	padding-left: 0.5rem;
	border-left: 0px dotted #DDD;
	border-top: 1px solid #DDD;
	margin-left: 7rem;
}
.ResearchTbl input {
	max-width: 70%;
}
.ResearchTbl textarea {
	max-width: 70%;
}
.ResearchTbl dt:first-child, .ResearchTbl dd:first-child {
	border-top: 0px solid #BFBFDA;
}
@media only screen and (max-width:580px) {
	.ResearchTbl dt {
		clear: right;
	}
	.ResearchTbl dt, .ResearchTbl dd {
		width: 100%;
	}
	.ResearchTbl dd {
		margin-left: 10%;
		clear: left;
		border-top: 0;
	}
}

/* 検索結果見出しCSS(共通用) */
.TtlTip {
	position: relative;
	background: #1629CC;
	background: var(--main-color);
	font-size: 1.5em;
	letter-spacing: .03em;
	color: #fff !important;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0.1em;
	margin: 0 auto 1.5rem;
	text-align: center;
	line-height: 1.8rem;
}

.TtlTip:after {
	position: absolute;
	bottom: -1rem;
	left: 50%;
	z-index: 90;
	margin-left: -1rem;
	border-top: 1rem solid #1629CC;
	border-top: 1rem solid var(--main-color);
	border-left: 1rem solid transparent;
	border-right: 1rem solid transparent;
	border-bottom: 1rem;
	content: "";
}

/* 見出しCSS(共通用) */
.TtlHeadline {
	color: var(--font-color);
	font-size: 1.1rem;
	/*line-height: 2rem;*/
	margin: 0 auto;
	padding: 0.5rem 0.2rem;
	border-left: 1rem solid #1629CC;
	border-left: 1rem solid var(--main-color);
	border-bottom: 2px solid #1629CC;
	border-bottom: 2px solid var(--main-color);
	font-weight: bold;
	text-align: left;
}
/********************************************************
 * もっと読むCSS(共通)
 ********************************************************/
 .ReadmoreBtn {
	z-index: 2;
	position: absolute;
	right: 0;
	top: 1rem;
	width: 4rem;
	margin: auto;
	padding: 0;
	color: var(--main-color);
	font-size: 0.8rem;
	text-align: center;
	cursor: pointer;
	transition: .3s ease;
}
.ReadmoreBtn:hover {
	box-shadow: 0 0 2px var(--main-color);
}

.ReadmoreBtn::before {
	content: "▼表示";
}

.ReadmoreItem {
	position: relative;
	overflow: hidden;
	height: 1px; /*隠した状態の高さ*/
}

.ReadmoreItem::before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px; /*グラデーションで隠す高さ*/
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
	background: linear-gradient(top, rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
	content: "";
}

.ReadmorTrigger {
	display: none; /*チェックボックスは常に非表示*/
}

.ReadmorTrigger:checked ~ .ReadmoreBtn::before {
	content: "▲非表示"; /*チェックされていたら、文言を変更する*/
}

.ReadmorTrigger:checked ~ .ReadmoreItem {
	height: auto; /*チェックされていたら、高さを戻す*/
}

.ReadmorTrigger:checked ~ .ReadmoreItem::before {
	display: none; /*チェックされていたら、ReadmoreItemのbeforeを非表示にする*/
}


/***************************************************************
 * Accordion メニューCSS
 ***************************************************************/
 .AccordionWrapper {
	min-width: 300px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}
.AccordionWrapper .AccordionContent {
	margin: 0;
	padding: 0;
}
.AccordionWrapper input {
	display: none;
}
.AccordionWrapper label {
	display: block;
	background: #9fb7d4;
	background: var(--main-color);
	cursor: pointer;
	padding: 10px;
	border-bottom: 1px solid #fff;
	box-sizing: border-box;
	color: #FFF;
}
.AccordionWrapper label:hover {
	background: #ccc;
	background: var(--accent-color);
}
.AccordionWrapper label.AcMenu a {
	color: #FFF!important;	
}
.AccordionWrapper .AcTxt {
	transition: 0.3s;
	height: 0;
	overflow: hidden;
	background: #ddd;
	padding: 0 10px;
	box-sizing: border-box;
}
.AccordionWrapper input:checked+.AcTxt {
	height: auto;
	padding: 1rem;
	box-sizing: border-box;
}
 
 
/************************************
 *
 ***********************************/
.OuterBorder {
     box-sizing: border-box;
    clear: both;
    vertical-align: middle;
    /*margin: auto 1.5rem;*/
    border: 9px solid #BDCCD6;
    border-radius: 7px;
    background-attachment: fixed;
    /*background-color: #E4EAF1;
    */
    background-repeat: no-repeat;
    background-position: center 0;
    box-shadow: 1px 1px 0 #99b6c9 inset, -1px -1px 0 #99b6c9 inset, 0 0 8px rgba(0, 0, 0, .2);
    height: calc(100% - 3.5rem);
    margin-top: 0.1rem;
}  

/************************************
 * table.ResponsiveTable CSS 
 ***********************************/
.ResponsiveTable {
	border-collapse: collapse;
    border-spacing: 0;
	box-sizing: border-box;
	width: 100%;
	width: calc(100% - 1px);
}
.ResponsiveTable th, 
.ResponsiveTable td {
	padding: 10px; 
	border: 1px solid #ddd; 
	text-align: left;
}
.ResponsiveTable th { 
	width: 30%; 
	text-align: left; 
	background: #f4f4f4; 
}
.ResponsiveTable thead th {
	font-size: 110%;
	font-weight: bold;
	text-align: center;
	border: 0;
	background :none;
}
.ResponsiveTable tfoot td { 
	text-align:right;
	font-size: 80%; 
	border: 0;
}

@media only screen and (max-width:480px){
	.ResponsiveTable	{ 
		margin: 0 auto; 
	}
    .ResponsiveTable th,
    .ResponsiveTable td{
		width: 100%;
		border-top: none;
        display: inline-block;
		box-sizing: border-box;
    }
    .ResponsiveTable th {
    	border-bottom: 1px dotted #ddd;
    }
	.ResponsiveTable tr:first-child th { 
		border-top: 1px solid #ddd; 
	}
	.ResponsiveTable thead th {
		border: 1px solid #ddd; 
		border-bottom: 0;
	}
}
 
 
 
/********************************************************
** 部品(Block2) 定義
*********************************************************/	
.Block2 {
	width: 100%;
	margin: 0;
	float: left;
	box-sizing: border-box;
	opacity: 1;
}
.Block2:last-child {
	margin-right: 0
}
@media screen and (max-width: 1024px) {/* mobile css */
	.Block2 {

	}
}
.Block2__inner {
	width: 100%;
	border: 1px solid #CCC;
	float: left;
	text-align: left;
	box-sizing: border-box;
	display: inline-block;
	opacity: 1;
	background-color: transparent;
	-webkit-transition: 1.2s;
    -moz-transition: 1.2s;
    -o-transition: 1.2s;
    -ms-transition:1.2s;
    transition: 1.2s;
}
.Block2__inner:hover {
	border: 1px solid #1629CC;
	border: 1px solid var(--main-color);
	background: #cfe7ff;
}
.Block2__content {
	width: 100%;

	display: inline-block;
	position: relative;
}
.Block2__content dt {
	font-size: 1rem;
	font-weight: bold;
	padding-left: 0.5rem;
}
.Block2__content dt span {
	font-weight: normal;
	font-size: 0.9rem;
}
.Block2__content dd {
	/*
	text-indent: 1rem;
	white-space: nowrap;
	overflow: hidden;
	margin: 0.5rem 1rem;*/
	/*
	word-wrap: break-word;
	word-break: break-all;
	display: inline-block;
	*/
	/* 一行しかできないオーバーの際に省略号付く*/
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.Block2__header {
	position: relative;
	display: block;
    padding: 0.4rem 0 0.4rem 0.5rem;
	box-sizing: border-box;
	font-weight: bolder;
	background-color: #CCC;
    background-color: var(--base-color);
    background-image: -ms-linear-gradient(top, #FFF, #DDD);/*IE10以上*/
    background-image: -moz-linear-gradient(top, #FFF, #DDD);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(1, #DDD));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFF',EndColorStr='#DDD');/*IE8,9*/
}
.Block2__inner:hover .Block2__header {
	color: #FFF;
	color: var(--txt-color-on);
	background-color: #1629CC;
	background-color: var(--accent-color);
	background-image: -ms-linear-gradient(top, #1629CC, #2FCDED);
	background-image: -moz-linear-gradient(top, var(--color-from), var(--color-to));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--color-from)), color-stop(1, var(--color-to)));
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#1629CC',EndColorStr='#2FCDED');/*IE8,9*/
}
.Block2__item-category, 
.Block2__item-txt {
	width: 100%;
	margin: 0;
	float: left;
}
.Block2__item-txt {
	text-indent: 1.5rem;
	margin: 0 auto;
	line-height: 150%;
	font-weight: normal;
	font-size: 0.9rem;
}


/****************************************************
 * ドラッグできる部品CSS
 ****************************************************/
.Portable2 {
	width:100%;
	font-size:1rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: table-row;
}
.Portable2__widget {
    margin: 0 auto;
    font-size: 1rem;
    font-weight: bold;
	box-sizing: border-box;
	display: inline-block;
    vertical-align: top;
    padding: 0.25rem;
	box-sizing: border-box;
}
.Portable2__item:hover {
	cursor: move;
}

/****************************************************
 * レスポンシブ並び部品CSS
 ****************************************************/
.Responsive2 {
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top; 
	margin: 0 auto;
	/*overflow: hidden;*/
}
.Responsive2:last-child {
	margin-right: 0;
}
.Responsive2--div2 {
	width: 50%;
	width: calc(100% / 2);
}
@media screen and (max-width:1023px){
	.Responsive2--div2 {
		width: 100%;
	}
}
.Responsive2--div3 {
	width: 33%;
	width: calc(100% / 3 - 4px);
}
@media screen and (max-width:1023px) and (min-width:680px){
	.Responsive2--div3 {
		width: 50%;
		width: calc(100% / 2);
	}
}
@media screen and (max-width:679px){
	.Responsive2--div3 {
		width: 100%;
	}
}
.Responsive2--div4 {
	width: 25%;
	width: calc(100% / 4);
}
@media screen and (max-width:1023px) and (min-width:768px){
	.Responsive2--div4 {
		width: 33%;
		width: calc(100% / 3);
	}
}
@media screen and (max-width:767px) and (min-width:512px){
	.Responsive2--div4 {
		width: 50%;
		width: calc(100% / 2);
	}
}
@media screen and (max-width:511px){
	.Responsive2--div4 {
		width: 100%;
	}
}
.Responsive2--div5 {
	width: 20%;
	width: calc(100% / 5);
}
@media screen and (max-width:1023px) and (min-width:816px){
	.Responsive2--div5 {
		width: 25%;
		width: calc(100% / 4);
	}
}
@media screen and (max-width:815px) and (min-width:612px){
	.Responsive2--div5 {
		width: 33%;
		width: calc(100% / 3);
	}
}
@media screen and (max-width:611px) and (min-width:408px){
	.Responsive2--div5 {
		width: 50%;
		width: calc(100% / 2);
	}
}
@media screen and (max-width:407px){
	.Responsive2--div5 {
		width: 100%;
	}
}

/*-------------------------------------------------------------------- 吹き出し */
.Tooltip2 {
	position: relative;
}
.Tooltip:hover {
	color: #fff;
	color: var(--txt-color-on);
	z-index: 10;
}

.Tooltip2:hover .Tooltip__popup-txt{
	color: #FFF;
	color: var(--txt-color-on);
	display: inline;
	position: absolute;
	border: 1px solid blue;
	border: 1px solid var(--accent-color);
	background: #CE4A44;
	background: var(--accent-color);
	bottom: 2.2rem;	/*位置指定追加。クエスチョンマークの下端から、吹き出しの下端を25px上げる*/
	left: -3.4rem;	/*位置指定追加。吹き出しの幅の半分を左に移動させる*/
	border-radius: 5px;
	opacity: 0.9;
}

.Tooltip2:hover .Tooltip__popup-txt:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 0.5rem solid #CE4A44;
	border-top: 0.5rem solid var(--accent-color);
	border-left: 0.5rem solid transparent;
	border-right: 0.5rem solid transparent;
	position: absolute;
	left: 3.5rem;
	bottom: -0.5rem;
	border-radius: 0;
}
.Tooltip__popup-txt {
	display: none;
	padding: 3px;
	width: 7rem;
	z-index: 20;
	font-size: 0.8rem;
	color: #222;
	color: var(--txt-color);
	text-align: center;
}

/*-------------------------------------- Processingアニメーション--- */
.Processing-wrap {
	width: 100%;
	display: table;
	position: relative;
	/*border: 1px solid #CCC;*/
	height: 100%;
}
.Processing {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
.Processing__bounce {
	width: 12px;
	height: 12px;
	background-color: rgba(0,0,255,1);
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: Processing__bouncedelay 1.4s infinite ease-in-out;
	animation: Processing__bouncedelay 1.4s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	display: inline-block;
	box-sizing: border-box;

}
.Processing__bounce1 {
    -webkit-animation-delay: -.64s;
    animation-delay: -.64s;
    opacity: 0.6;
}
.Processing__bounce2 {
    -webkit-animation-delay: -.48s;
    animation-delay: -.48s;
    opacity: 0.7;
}
.Processing__bounce3 {
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s;
    opacity: 0.8;
}
.Processing__bounce4 {
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s;
    opacity: 0.9;
}

@-webkit-keyframes Processing__bouncedelay {
	0%,100%,80% {-webkit-transform: scale(0)}
	40% {-webkit-transform: scale(1)}
}
@keyframes Processing__bouncedelay {
	0%,100%,80% {transform: scale(0);-webkit-transform: scale(0)}
	40% {transform: scale(1);-webkit-transform: scale(1)}
}

/* --------------------------------------- .MobileOnly スマホのみ表示 */
.MobileOnly {
	display: none!important;
}
@media screen and (max-width: 680px) {
	.MobileOnly {
		display: inline-block!important;
		width: 100%;
		text-align: center;
	}
}
/* --------------------------------------- .MobileOnly スマホのみ表示 */
.PcOnly {
	display: block;
}
@media screen and (max-width: 680px) {
	.PcOnly {
		display: none!important;
	}
}
/* --------------------------------------- #goto ページ内遷移で利用ID */
#goto {
	display: none;
	width: 100%;
	text-align: right;
	padding-right: 1rem;
}
/*----------------------------------------- GoogleAdsense*/
.GoogleAdsense {
	width:100%;display:inline-block;
}
/* --------------------------------------- .ShareList ソーシャルメディアSNSボタン */
.ShareList {
	list-style:none;
	display: flex;
    justify-content: flex-end;
	flex-wrap:wrap;
	width:100%;
	margin:0;
	padding:0;
}
.ShareList__item {
    flex-grow: 1;
	height:48px;
	line-height:48px;
	min-width:80px;
	text-align:center;
	width: 80px;
}

@media screen and (max-width: 480px) {
	.ShareList__item {
		width: calc(100% / 6);
	}
}

@media screen and (max-width: 680px) {
	.ShareList__item {
		width: calc(100% / 8);
	}
}

.ShareList__link {
	display:block;
	color:#ffffff;
	text-decoration: none;
}
.ShareList__link::before{
	font-size:40px;
	display:block;
	transition: ease-in-out .2s;
color: #fff;
}
.ShareList__link:hover::before{
	background:#ffffff;
	transform: scale(1.2);
	box-shadow:1px 1px 4px 0px rgba(0,0,0,0.15);
}

.ShareList__icon-twitter{background:#55acee;}
.ShareList__icon-twitter:hover::before{color:#55acee;}

.ShareList__icon-facebook{background:#3B5998;}
.ShareList__icon-facebook:hover::before{color:#3B5998;}

.ShareList__icon-google-plus{background:#dd4b39;}
.ShareList__icon-google-plus:hover::before{color:#dd4b39;}

.ShareList__icon-hatebu{background:#008FDE;}
.ShareList__icon-hatebu:hover::before{color:#008FDE;}

.ShareList__icon-pocket{background:#EB4654;}
.ShareList__icon-pocket:hover::before{color:#EB4654;}

.ShareList__icon-rss{background:#ff9900;}
.ShareList__icon-rss:hover::before{color:#ff9900;}

.ShareList__icon-feedly{background:#6cc655;}
.ShareList__icon-feedly:hover::before{color:#6cc655;}

.ShareList__icon-pinterest{background:#cb2027;}
.ShareList__icon-pinterest:hover::before{color:#cb2027;}

.ShareList__icon-linkedin{background:#0e76a8;}
.ShareList__icon-linkedin:hover::before{color:#0e76a8;}

.ShareList__icon-line{background:#1dcd00;}
.ShareList__icon-line:hover::before{color:#1dcd00;}

/* --------------------------------------- .ShareList ソーシャルメディアSNSボタン　font */
@font-face {
	font-family: 'icomoon';
	src:url('/css/plugin/fonts/icomoon.svg?ookgoz#icomoon') format('svg');
	src:url('/css/plugin/fonts/icomoon.eot?ookgoz#iefix') format('embedded-opentype'),
		url('/css/plugin/fonts/icomoon.ttf?ookgoz') format('truetype'),
		url('/css/plugin/fonts/icomoon.woff?ookgoz') format('woff'),
		url('/css/plugin/fonts/icomoon.eot?ookgoz');
		font-weight: normal;
		font-style: normal;
}

[class^="ShareList__icon-"], [class*=" ShareList__icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: inherit;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.ShareList__icon-line:before        {content: "\e90a";}
.ShareList__icon-feedly:before      {content: "\e900";}
.ShareList__icon-pocket:before      {content: "\e902";}
.ShareList__icon-instagram:before   {content: "\ea92";}
.ShareList__icon-twitter:before     {content: "\ea96";}
.ShareList__icon-youtube:before     {content: "\ea9d";}
.ShareList__icon-google:before      {content: "\ea88";}
.ShareList__icon-google2:before     {content: "\ea89";}
.ShareList__icon-google-plus:before {content: "\ea8b";}
.ShareList__icon-google-plus2:before{content: "\ea8c";}
.ShareList__icon-facebook:before    {content: "\ea90";}
.ShareList__icon-facebook2:before   {content: "\ea91";}
.ShareList__icon-linkedin:before    {content: "\eaca";}
.ShareList__icon-linkedin2:before   {content: "\eac9";}
.ShareList__icon-pinterest:before   {content: "\ead2";}
.ShareList__icon-pinterest2:before  {content: "\ead1";}
.ShareList__icon-hatebu:before      {content: "\e903";}
.ShareList__icon-hatebu2:before     {content: "\e901";}
.ShareList__icon-rss:before         {content: "\ea9b";}
.ShareList__icon-rss2:before        {content: "\ea9c";}

/*--------------------------------------------------上記のShareListが未利用 */
/*--------------------------------------------------SNS一覧（利用） */
.SnsList {
	float: left;
	padding: 4px 8px;
	min-width: 50%;
	text-align: left;
}
.SnsList {
	height: 2rem;
}