@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

@chaset "UTF-8";
/*
 Share Style <
-------------------------------------------------
*/
body{
	margin:0;
	padding:0;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
}

html{
	font-size:100%;
}

@font-face {
  font-family: 'arial-black';
  src: local('Arial Black');
}

h1,h2,h3,h4,h5{
	margin:0;
	padding:0;
}

#pageWrap img{border:0;}
#pageWrap ul{list-style:none;}

body,
#htbdfwp_contents{
	background-color:#ffffff;
}

#pageWrap ul{
	margin:0;
	padding:0;
	list-style:none;
}

#pageWrap img{
	width:100%;
	height:auto;
}

#pageWrap {
	margin: 0;
	padding:0;
	width:auto;	
}

.clear{clear:both; visibility:hidden; padding:0; margin:0;}
.leftArea{float:left;}
.rightArea{float:right;}

/*-- clearfix --*/
.cf {overflow: hidden;}

/*---------------------------------

	#header

---------------------------------*/
#pageWrap header{
	position:relative;
	min-width: 1100px;
	padding:0;
	margin:0 auto;
	min-height:350px;
	background:url(../images/header/about.jpg) no-repeat center top;
	background-size:cover;
}

#pageWrap header h1{
	padding:0;
	width:330px;
	margin:0 auto;
	position:absolute;
	top:0;
	left:-70px;
	background-color:#ffffff;
	z-index:100;
	text-align:center;
	padding:20px;
}

#pageWrap header h1 img{
	width:230px;
	height: auto;
}

#pageWrap header #headerTitle{
	width:1100px;
	margin:0 auto;
	padding:200px 0 0 0;
}

#pageWrap header h2:before{
	display:block;
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    top:18px;
    left: 0;
    border-top: solid 1px #ffffff;
    border-right: solid 1px #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#pageWrap header h2{
	margin:0 ;
	color:#ffffff;
	padding:0 0 0 35px;
	font-size:2.3rem;
	font-family: 'Noto Sans JP';
	font-weight:200;
	position:relative;
	line-height:1.2;
	
}

/*--[#navi]----------*/
.inner {
	width:1100px;
	margin: 0 auto;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}
 
/* header */
#top-head {
	background:url(../images/navBack.png) repeat-x center top;
	height:76px;
	width:100%;
	position:absolute;
	z-index:90;
    line-height: 1;
    z-index: 999;
}

#top-head .inner {
    position: relative;
}

#global-nav ul {
	display: flex;
	justify-content: flex-end;
	padding:10px 0;
}

#global-nav ul li {
	background-repeat:no-repeat;
	background-position:0px 3px;
	padding: 20px 0 0 20px;
	margin: 0;
	font-weight:bold;
	font-size:1rem;
	font-family: 'Noto Sans JP';
	font-weight:500;
}

#global-nav ul li a {
	text-decoration:none;
	color:#434343;
}
 
/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top:0;
	height:76px;
	background:url(../images/navBack.png) repeat-x center top;
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}

#top-head.fixed #global-nav ul li a {
    color: #333;
    padding: 0;
}

#global-nav ul li a:hover,
#top-head.fixed #global-nav ul li a:hover{
	color:#0d56c4;
}

#global-nav ul li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

#global-nav ul li a::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  content: '';
  width: 100%;
  height: 4px;
  background: #0a51b2;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}

#global-nav ul li a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
 
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}

#nav-toggle div {
    position: relative;
}

#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

@media screen and (max-width: 750px) {
	#pageWrap header{
		min-width:auto;
		min-height:220px;
		background:url(../images/header/sp_about.jpg) no-repeat center top;
	}
	#pageWrap header{
	}

	#pageWrap header h1{
		padding:0;
		width:115px;
		margin:0 auto;
		position:absolute;
		top:0;
		left:0;
		background-color:none;
		z-index:100;
		text-align:center;
		padding:0;
	}

	#pageWrap header h1 img{
		width:100%;
		height: auto;
	}

	#pageWrap header #headerTitle{
		width:auto;
		margin:0 auto;
		padding:120px 0 0 0;
	}

	#pageWrap header h2:before{
		display:block;
	    content: "";
	    width: 12px;
	    height: 12px;
	    position: absolute;
	    top:12px;
	    left: 10px;
	    border-top: solid 1px #ffffff;
	    border-right: solid 1px #ffffff;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	}

	#pageWrap header h2{
		margin:0 ;
		color:#ffffff;
		padding:0 0 0 35px;
		font-size:1.7rem;
		font-family: 'Noto Sans JP';
		font-weight:200;
		position:relative;
		line-height:1.2;
	}

    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
	height:auto;
    	
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: #fff;
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 5px;
        color: #333;
        font-size: 26px;
    }
    #global-nav {
        position: absolute;
        top: -500px;
        background: #ffffff;
        width: 100%;
        text-align: center;
        padding: 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    	border-top:1px solid #ebebeb;
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
    	padding:0;
        font-size: 14px;
		display: flex;
		justify-content: flex-end;
    	flex-direction: column;
    }
    #global-nav ul li {
        position: static;
    	border-bottom:1px solid #ebebeb;
    	padding:0;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
		text-decoration:none;
		color:#434343;
        padding: 18px 0;
    }
    #top-head #global-nav ul li a:hover,
    #top-head.fixed #global-nav ul li a :hover{
		background-color:#ededed;
	}
    #nav-toggle {
        display: block;
    }
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    .open #global-nav {
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }

	#global-nav ul li a::after {
		position:static;
		display:none;
	}
}
/*-----------------------

   #topicPath

-----------------------*/
#topicPath{
	background-color:#e8e8e8;
	padding:15px 0;
	min-width: 1100px;
}

#topicPath ul{
	width:1100px;
	margin:0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#topicPath ul li{
	padding:0 15px 0 0;
	font-size:0.9rem;
}

#topicPath ul li:after{
	content:">";
	padding-left:15px;
	font-family: 'Noto Sans JP';
}

#topicPath ul li:last-child:after{
	content:"";
}



@media screen and (max-width: 750px) {
	#topicPath{
		min-width: auto;
	}

	#topicPath ul{
		width:auto;
		margin:0 10px;
	}

	#topicPath ul li{
		padding:0 5px 0 0;
		font-size:0.7rem;
	}

	#topicPath ul li:after{
		padding-left:5px;
	}
}

/*-----------------------

   #mainSectionWrap

-----------------------*/
#mainSectionWrap{background-color:#ffffff;}

#mainSection{
	width:1100px;
	margin:0 auto;
	padding:50px 0 0;
}

#mainSection .imgArea{margin:10px 0 0 40px;}
#mainSection .txtArea{width:600px;}

#mainSection article{
	padding:0 0 40px;
	margin:0 0 30px;
	border-bottom:5px solid #dcdcdc;
}

#mainSection article h1{
	font-size:2.5rem;
	font-weight:400;
	font-family: 'Noto Sans JP';
	color:#000000;
	padding-bottom:20px;
}

#mainSection article p{
	font-size:0.95rem;
	line-height:1.9rem;
	color:#000000;
	margin:0 0 15px;
}

#mainSection article .txt_img{
	display: flex;
	flex-direction: row;
}

#mainSection article .sanku{
	background-color:#eeeeee;
	padding:20px;
	margin:0 0 15px;
}

#about #mainSection article h2{
	color:#1f2c5c;
	font-size:1.7rem;
	padding:20px 0 0;
	font-family: 'Noto Sans JP';
	font-weight:normal;
}

#about #mainSection article .sanku h2{
	color:#1f2c5c;
	font-size:1.1rem;
	padding:0 0 10px;
}

#mainSection article h3{
	color:#0076d6;
	font-size:1.1rem;
	padding:5px 0 10px;
}

#mainSection article .sanku p{
	margin:0;
	color:#434343;
	line-height:1.7;
}

#mainSection article ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;/* 
	justify-content: space-between; */
}

#mainSection article ul li{
	padding:0 2px 10px;
	font-size: 0.8rem;
	line-height: 1.7;
}

#mainSection article ul li img{
	width:540px;
}

#mainSection article ul.w1100 li img{
	width:1100px;
}

#access #mainSection article dl dt:before{
	content:"■";
	color:#1f2d5d;
	font-size:1.9rem;
}

#access #mainSection article dl dt{
	font-size:1.5rem;
	font-weight:bold;
	color:#1f2d5d;
	border-bottom:4px solid #1f2d5d;
	margin:0 0 10px;
	padding: 0;
	line-height:1.2;
}

#access #mainSection article dl dd{
	padding:0 0 20px;
	margin:0;
	line-height:1.8;
}

#guide #mainSection .txtArea{width:700px;}
#guide #mainSection .photo{
	width:340px;
	margin-right:60px;
}

#guide #mainSection ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width:690px;
}

#guide #mainSection ul li{
	margin-bottom:15px;
}

#guide #mainSection ul li a{
	display:block;
	width:330px;
	text-decoration:none;
	color:#000000;
}

#guide #mainSection ul li img{
	width:100%;
	height:auto;
}

#guide #mainSection ul li a .logo{
	border:3px solid #e6e6e6;
}

#guide #mainSection ul li a h2{
	font-size:1.1rem;
	font-weight:100;
	padding:10px 0 5px;
}

#guide #mainSection ul li a p{
	color:#ffffff;
	text-align:center;
	padding:0 10px;
	margin:0;
	display:inline-block;
	font-weight:bold;
	font-size:0.9rem;
	line-height:1.5;
}

#guide #mainSection .hight ul li a p{
	background-color:#e030a0;
}

#guide #mainSection .low ul li a p{
	background-color:#0162b4;
}


#topic #mainSection ul{
	width:auto;
	display:block;
	
}

#topic #mainSection ul li{
	width:auto;
	border-bottom:1px solid #e5e5e5;
}

#topic #topicsList{width:700px;}
#topic #topicsList li a{text-decoration:none;}
#topic #topicsList li dl{margin:25px 0 0;}

#topic #mainSection #topicsList li dt{
	font-weight:bold;
	font-size:1.2rem;
	color:#d159a5;
	clear: left;
	float: left;
	width: 150px;
	line-height: 1.4;
	margin: 0 0 10px;
	border:none;
}

#topic #topicsList li dd { margin: 0 0 10px 20px;}

#topic #mainSection article h1{
	line-height:1.4;
	padding-bottom: 10px;
}

#topic .topicdate{
	color:#d159a5;
	font-size:0.9rem;
	border-bottom:1px solid #d159a5;
	text-align:right;
	font-family: 'Noto Sans JP';
}

#information table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.8rem;
}

#information table th,#information table td{
    padding: 15px;
    text-align: left;
    vertical-align: middle;
}

#information table td{
    border-right:  1px solid #ffffff;
}

#information table tr{
    margin: 1px 0;
    border-bottom: 1px solid #ffffff;
}
#information table th{
    background-color: #003780;
    color: #ffffff;
    width: 200px;
    border-right:  1px solid #ffffff;
    font-size: 0.95rem;
}

#information table tr:nth-child(odd){
  background-color: #f5f5f5;
}

@media screen and (max-width: 750px) {
	#mainSection{
		width:auto;
		padding:20px 0;
	}

	#mainSection article{
		padding:0 0 30px;
		margin:0 15px 30px;
		border-bottom:5px solid #dcdcdc;
	}

	#mainSection .imgArea{width:auto; max-width:400px; padding:10px; margin:0 auto;}
	#mainSection .txtArea{width:auto; padding:0 0 15px;}

	#mainSection article h1{
		font-size:1.5rem;
	}

	#mainSection article p{
		font-size:0.8rem;
		line-height:1.5rem;
	}

	#mainSection article .txt_img{
		display:block;
	}

	#about #mainSection article h2{
		color:#1f2c5c;
		font-weight:normal;
		font-size:1.4rem;
	}

	#mainSection article .sanku h2{
		font-size:1rem;
	}

	#mainSection article h3{
		font-size:1rem;
	}

	#mainSection article ul li img{
		max-width:540px;
		width:100%;
		height:auto;
	}

	#mainSection article ul.w1100 li img{
		width:100%;
	}

	#mainSection article dl{
		margin:0;
		padding:0;
	}

	#mainSection article dl dt:before{
		font-size:1.5rem;
	}

	#mainSection article dl dt{
		font-size:1.2rem;
		font-weight:bold;
		color:#1f2d5d;
		border-bottom:3px solid #1f2d5d;
		margin:0 0 10px;
		padding: 0;
		line-height:1.2;
	}

	#mainSection article dl dd{
		padding:0 0 20px;
		margin:0;
		line-height:1.8;
		font-size:0.8rem;
	}

	#mainSection article iframe{
		height:200px;
	}


	#guide #mainSection .txtArea{width:auto;}
	#guide #mainSection .photo{
		width:70%;
		max-width:300px;
		margin:0 auto 20px;
	}

	#guide #mainSection ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		width:auto;
	}

	#guide #mainSection ul li{
		width:48%;
		max-width:300px;
		margin-bottom:5px;
	}

	#guide #mainSection ul li a{
		display:block;
		width:100%;
		text-decoration:none;
		color:#000000;
	}

	#guide #mainSection ul li img{
		width:100%;
		height:auto;
	}

	#guide #mainSection ul li a .logo{
		border:3px solid #e6e6e6;
	}

	#guide #mainSection ul li a h2{
		font-size:0.75rem;
		font-weight:100;
		line-height:1.4;
		padding:10px 0 2px;
	}

	#guide #mainSection ul li a p{
		color:#ffffff;
		text-align:center;
		padding:0 10px;
		margin:0;
		display:inline-block;
		font-weight:bold;
		font-size:0.75rem;
		line-height:1.5;
	}

	#guide #mainSection .hight ul li a p{
		background-color:#e030a0;
	}

	#guide #mainSection .low ul li a p{
		background-color:#0162b4;
	}

	#topic #topicsList{width:auto;}
	#topic #topicsList li dl{margin:5px 0 0;}

	#topic #mainSection #topicsList li dt{
		font-size:1rem;
		clear:none;
		float:none;
		width: auto;
		margin: 0;
		border:none;
	}

	#topic #mainSection #topicsList li dd { margin: 0; font-size:0.8rem;}
	#topic #topicsList li dd { margin: 0;}
	#mainSection article dl dd{padding: 0;}
    
    #information table th,#information table td{display : block;}
    #information table th{ width: auto;}
    #information table .info_title{display: none;}

    #information table tr:nth-child(odd){
        background-color: #ffffff;
    }

    #information table th,#information table tr{
        padding: 10px 0 10px;
        display: block;
    }
    #information table th,#information table td{
        padding: 10px;
        text-align: left;
        vertical-align: middle;
    }
    #information table td{
        padding: 10px 10px 0;
    }

}


/*-----------------------

   footer

-----------------------*/
footer{
	background-color:#313131;
	min-width:1100px;
}

footer #footerSection{
	width:1100px;
	margin:0 auto;
	padding:50px 0;
	font-family: 'Noto Sans JP';
	display:flex;
}

footer #footerSection #leftFooterAbout{
	border:1px solid #cccccc;
	padding:10px 25px;
	margin-right:40px;
}

footer #footerSection p{
	font-size:0.9rem;
	color:#ffffff;
	font-weight:100;
	line-height:1.7;
}

footer #footerSection #rightFooterAbout p{
	padding-left:4em;
	text-indent:-4em;
	font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic',sans-serif;
}

footer #footerSection #rightFooterAbout dl {
	width:700px;
	color:#ffffff;
	font-size:0.9rem;
}
footer #footerSection #rightFooterAbout dt {
  float:left;
  clear:left;
  width:50px;
}
footer #footerSection #rightFooterAbout dd {
	float:left;
	width:620px;
	margin: 0 0 10px 20px;
}

footer #footerSection #s_bannerArea{
	display: flex;
	flex-wrap: wrap;
}

footer #footerSection #s_bannerArea li{
	width:160px;
	margin-right:10px;
	margin-bottom:5px;
}

footer #footerSection #s_bannerArea li:first-child{
/* 	margin-left:0; */
}

@media screen and (max-width: 750px) {
	footer{
		min-width:auto;
	}

	footer #footerSection{
		width:auto;
		padding:20px 15px;
		display:flex;
		flex-direction:column;
	}

	footer #footerSection p{
		font-size:0.8rem;
	}

	footer #footerSection #leftFooterAbout{
		border:1px solid #cccccc;
		padding:10px 25px;
		margin-right:0;
	}

	footer #footerSection #s_bannerArea{
		display: flex;
		flex-wrap: wrap;
		width:auto;
		margin:0 auto;
	}

	footer #footerSection #s_bannerArea li{
		width:120px;
		margin:5px;
		margin-bottom:5px;
	}

	footer #footerSection #rightFooterAbout dl {
		width:auto;
		color:#ffffff;
		font-size:0.9rem;
		margin:15px 0 0;
	}
	footer #footerSection #rightFooterAbout dt {
	  float:none;
	  clear:none;
	  width:auto;
	}
	footer #footerSection #rightFooterAbout dd {
	  float:none;
	  width:auto;
	}
}
/*-----------------------

   link

-----------------------*/
a:link,
a:visited{
	color:#003567;
}

a:hover{
	color:#0054a4;
}