@charset "utf-8";

/* -----------------------------------------------------------
CSS Information
Site Name: toumishi
File name: 	home.css
Style Info:   
Version: 1.00
update/auther: WEBHARUTA.COM
----------------------------------------------------------- */

/* ----------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
   common layout
////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
---------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------
 body , page  layout 
---------------------------------------------------------------------------------- */
body{

}


div#page{
max-width:900px;
min-width:800px;
margin:0 auto;
padding:0 20px;

}

/* ----------------------------------------------------------------------------------
header layout 
---------------------------------------------------------------------------------- */

header#header{
width:100%;
margin:0 0 10px 0;
padding:0 0 15px 0;
background-image:url(../img/header_back01.gif);
background-position:bottom right;
background-repeat:no-repeat;
background-color:#f3fbfc;
}


header#header h1#logo{
float:left;
display:inline;
width:20%;
height:75px;
margin:0;
padding:11px 20px 0 20px;
}

header#header h1#logo img{
width:100%;
}

header#header p#header_graph{
float:left;
width:25%;
padding:20px 0 0 0;
}

header#header p#header_graph img{
width:100%;
}


header#header ul#header_graph{
float:left;
width:30%;
padding:20px 0 0 0;
}

header#header ul#header_graph li{
float:left;
margin:0 6.6%  0 0;
}

header#header ul#header_graph li.lastchild{
margin:0 0  0 0;
}

header#header nav#sub_nav{
float:right;
display:inline;
width:380px;
padding:10px 0 0 0;
margin:0 0 10px 0;
}

header#header nav#sub_nav ul{
padding:0 15px 0 0;
}

header#header nav#sub_nav ul li{
float:right;
display:inline;
padding:0 0 0 25px;
}

header#header nav#sub_nav ul li.lastchild{
padding:0 0 0 0;
}

header#header nav#sub_nav ul li a{
background-image:url(../img/header_sub_nav_back.gif);
background-position:left top;
background-repeat:no-repeat;
padding:0 0 0 12px;
line-height:18px;
font-size:1.1em;
}

header#header div#function{
float:right;
display:inline;
width:380px;
}

header#header div#function aside#font_size{
float:left;
width:35%;
}

header#header div#function aside#font_size h2{
margin:0 0 2px 0;
font-size:1em;
}

header#header div#function aside#font_size ul{
width:105px;
}

header#header div#function aside#font_size ul li#middle{
float:left;
display:inline;
cursor:pointer;
}

header#header div#function aside#font_size ul li#large{
float:left;
display:inline;
cursor:pointer;
}

header#header div#function aside#font_size ul li#big{
float:right;
display:inline;
cursor:pointer;
}

header#header div#function aside#search{
float:right;
width:65%;
padding:3px 0 10px 0;
font-size:1em;
}

header#header div#function aside#search form#cse-search-box{
}

header#header div#function aside#search form#cse-search-box input#g-search{
width:172px;
margin:0 0 0 0;
}

header#header div#function aside#search form#cse-search-box a#howto{
margin:0 40px 0 0;
padding:0;
font-size:10px;
}

header#header div#function aside#search form#cse-search-box input#custom{
padding:3px 0 0 0;
}

header#header div#function aside#search form#cse-search-box input#www{

}

header#header div#function #readspeaker_button1{
	display:block;
	margin:5px 0 0 35%;
}

header#header div#function #readspeaker_button1 a{
	display:inline-block;
	box-sizing:border-box;
	padding:5px 10px;
	border-radius:5px;
	width:240px;
	text-align:center;
	background:#0e3192;
	color:#fff;
	text-decoration:none;
	letter-spacing:1px;
}

header#header div#function #readspeaker_button1 a:hover{
	background:#247575;
}

header#header div#function #readspeaker_button1 a span{
	padding: 0 0 0 15px;
	background:url(../img/whiteArrow.png) center left no-repeat;
}

/* ----------------------------------------------------------------------------------
global_menu layout 　
 201512-
 2020-12 PC版ボタン画像を差し替え
 2022-03 カテゴリボタン画像ホバー時にサブカテゴリメニュー表示を追加
---------------------------------------------------------------------------------- */

.global_menu {
  width: 900px;
  max-width: 100%;
	margin: 0px 0px 15px;
}

#menuho {
  padding: 0px;
  width: 100%;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

/* サブカテゴリメニュー改修 */
#menuho div:not(.tooltips) {
  position: relative;
}

#menuho li .mouseover-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  margin-top: -1px;

  width: 900px;
  max-width: calc(100vw - 40px - 16px);
  min-width: 800px !important;
  padding: 22px;
  box-sizing: border-box;

  font-size: 15px;

  background-color: rgba(145, 204, 214, 0.98);
}

#menuho li div:hover ~ .mouseover-menu {
  display: block;
  animation: FADE_IN .3s ease-in-out;
}
@keyframes FADE_IN {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#menuho li div ~ .mouseover-menu:hover {
  display: block;
}

#menuho li .mouseover-menu ul {
  width: 100%;
  max-width: 100%;
  min-height: 150px;
  box-sizing: border-box;

  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;

  list-style-type: none;
}

#menuho li .mouseover-menu ul li {
  display: block;
  box-sizing: border-box;
  float: unset;
  width: calc(25% - 12px); 
  max-width: calc(25% - 12px);

  margin-bottom: 1em;
  list-style-type: none;
}

#menuho li .mouseover-menu ul li:not(:nth-child(4n)) {
  margin-right: 16px;
}

#menuho li .mouseover-menu ul li a {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 39px;

  display: block;
  box-sizing: border-box;
  padding: .75em 1.5em .75em .875em;
  border-radius: .5em;
  line-height: 1.2;
  color: #000;
  text-decoration: none;
  background-color: #fff;
}
#menuho li .mouseover-menu ul li a::after {
  content: '';
  position: absolute;
  right: .35em;
  top: .9em;
  width: 12px;
  height: 11px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' viewBox='0 0 10 11'%3E%3Cpath id='arrow' d='M5.5,0,11,10H0Z' transform='translate(10) rotate(90)' fill='%23058196'/%3E%3C/svg%3E%0A");
}

#menuho li .mouseover-menu ul li a:hover  {
  background-color: #FFFBDE;
  opacity: 1;
}
#menuho li .mouseover-menu ul li a:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='11' viewBox='0 0 10 11'%3E%3Cpath id='arrow-active' d='M5.5,0,11,10H0Z' transform='translate(10) rotate(90)' fill='%23f60'/%3E%3C/svg%3E%0A");
}


/* 左端に寄せる */
#menuho li:nth-child(2) .mouseover-menu {
  left: calc(-170px - 12px);
}
#menuho li:nth-child(3) .mouseover-menu {
  left: calc((-170px - 12px) * 2 - 1px);
}
#menuho li:nth-child(4) .mouseover-menu {
  left: calc((-170px - 12px) * 3 - 1px);
}
#menuho li:nth-child(4) .mouseover-menu {
  left: calc((-170px - 12px) * 3 - 1px);
}
#menuho li:nth-child(5) .mouseover-menu {
  left: calc((-170px - 12px) * 4 - 2px);
}
@media screen and (max-width: 958px) {
  #menuho li:nth-child(2) .mouseover-menu {
    left: calc((-100vw + 16px + 40px) / 5  - 1px)
  }
  #menuho li:nth-child(3) .mouseover-menu {
    left: calc(( (-100vw + 16px + 40px) / 5 - 1px) * 2);
  }
  #menuho li:nth-child(4) .mouseover-menu {
    left: calc(( (-100vw + 16px + 40px) / 5 - 1px) * 3);
  }
  #menuho li:nth-child(5) .mouseover-menu {
    left: calc(( (-100vw + 16px + 40px) / 5 - 1px) * 4);
  }
}
@media screen and (max-width: 856px) {
  #menuho li:nth-child(2) .mouseover-menu {
    left: calc(-154px - 7px - 1px);
  }
  #menuho li:nth-child(3) .mouseover-menu {
    left: calc((-154px - 7px) * 2 - 1px);
  }
  #menuho li:nth-child(4) .mouseover-menu {
    left: calc((-154px - 7px) * 3 - 1px);
  }
  #menuho li:nth-child(4) .mouseover-menu {
    left: calc((-154px - 7px) * 3 - 2px);
  }
  #menuho li:nth-child(5) .mouseover-menu {
    left: calc((-154px - 7px) * 4 - 2px);
  }
}
/* サブカテゴリメニュー ここまで  */

#menu11 a {
  width: 170px;
  height: 70px;
  background: url("../img/globalmenu_shimin.png") no-repeat;
  display: block;
  text-indent: -9999px;
}

#menu12 a {
  width: 170px;
  height: 70px;
  background: url("../img/globalmenu_event.png") no-repeat;
  display: block;
  text-indent: -9999px;
}

#menu13 a {
  width: 170px;
  height: 70px;
  background: url("../img/globalmenu_shisei.png") no-repeat;
  display: block;
  text-indent: -9999px;
}

#menu14 a {
  width: 170px;
  height: 70px;
  background: url("../img/globalmenu_commercial.png") no-repeat;
  display: block;
  text-indent: -9999px;
}

#menu15 a {
  width: 170px;
  height: 70px;
  background: url("../img/globalmenu_ijyuu.png") no-repeat;
  display: block;
  text-indent: -9999px;
}

@media screen and (max-width: 932px) and (min-width: 769px) {
  #menuho li [id^="menu1"] a {
    max-width: 18vw;
    min-width: 154px;
    background-size: contain;
    background-position: 50%;
  }
}

#menuho a:hover {
  opacity: .8;
  transition: opacity .25s;
}

.global_menu li{
	float: left;
	list-style: none;
	margin: 0px;
    position:relative;
}	

.c-both {
  /* clear: both; */
  display:none;
} 

.tooltips {
  display: none;
  width: 300px;
  height: 70px;
  position: absolute;
  left: -60px;
  z-index: 9999;
  padding: 0.3em 0.5em;
  color: #FFFFFF;
  font-size: 1.5em;
  background: #247575;
}

.tooltips5 {
  display: none;
  width: 220px;
  height: 70px;
  position: absolute;
  left: -55px;
  z-index: 9999;
  padding: 0.3em 0.5em;
  color: #FFFFFF;
  font-size: 1.5em;
  background: #247575;
}

#menuho div:hover~.tooltips {
  /* display: block; */
}
#menuho div:hover~.tooltips5 {
  /* display: block; */
}

/* レスポンシブメニュー追加 20170131 */
#spMenu {
  display:none;
}
.global_menu {
  display:block;
}

/* ----------------------------------------------------------------------------------
main_nav layout 
---------------------------------------------------------------------------------- */
nav#main_nav{
width:100%;
margin:0 0 15px 0;
}

nav#main_nav ul{
width:100%;
}

nav#main_nav ul li{
float:left;
display:inline;
width:15.555%;
margin:0 1.333% 0 0;
}

nav#main_nav ul li.lastchild{
margin:0 0 0 0;
}

nav#main_nav ul li a{
width:100%;
display:block;
}

nav#main_nav ul li img{
width:100%;
}




/* ----------------------------------------------------------------------------------
link_banner layout 
---------------------------------------------------------------------------------- */
#link_banner{
width:100%;
margin:0 0 15px 0;
background-image:url(../img/link_banner_back.gif);
background-position:top right;
background-repeat:no-repeat;
}


#link_banner_img{
padding:15px 0 0 0;
}

#link_banner_img ul{
text-align:center;
}

#link_banner_img li{
display:inline;
margin:0 6px 0 6px ;
}

#link_banner_img li a{
text-decoration: none;
}

#link_banner_img li img{
padding:0 0 5px 0;
}


/* ----------------------------------------------------------------------------------
footer layout 
---------------------------------------------------------------------------------- */
footer#footer{
width:100%;
margin:0 0 15px 0;
background-image:url(../img/footer_back01.gif);
background-position:top right;
background-repeat:no-repeat;
padding:30px 0 0 0;
}

footer#footer ul#footer_nav{
text-align:center;
margin:0 0 15px 0;
}

footer#footer ul#footer_nav li{
display:inline;
border-right:1px solid #333;
padding:0 15px 0 0;
margin:0 15px 0 0;
}

footer#footer ul#footer_nav li.lastchild{
padding:0 0 0 0;
margin:0 0 0 0;
border-right:none;
}

footer#footer ul#footer_nav li a{
font-size:1.3em;
}

footer#footer address#footer_info{
font-size:1.3em;
line-height:1.5em;
text-align:center;
}

footer#footer div#footer_banner{
padding:15px 0 0 0;
}

footer#footer div#footer_banner h3{
text-align:center;
font-size:1.3em;
margin:0 0 5px 0 0;
font-weight:normal;
}

footer#footer div#footer_banner ul{
text-align:center;
}

footer#footer div#footer_banner li{
display:inline;
margin:0 2px 0 3px ;
}

footer#footer div#footer_banner li a{
text-decoration: none;
}

footer#footer div#footer_banner li img{
padding:0 0 5px 0;
}


/* ----------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
   home only layout
////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
---------------------------------------------------------------------------------- */

body.home div#main{
margin:0 0 20px 0;
}


/* ----------------------------------------------------------------------------------
スライドイメージ
---------------------------------------------------------------------------------- */

body.home div#slide_image{
height:300px;
margin:0px 0px 15px 0px;
overflow:hidden !important;
}


/* ----------------------------------------------------------------------------------
key_visual
---------------------------------------------------------------------------------- */

body.home div#main div#key_visual{
height:200px;
margin:0 0 15px 230px;
background-color:#f8f8f8;
overflow:hidden !important;
}


/* ----------------------------------------------------------------------------------
center_contents layout 
---------------------------------------------------------------------------------- */
body.home div#main div#center_contents_wrapper{
float:left;
width:100%;
}

body.home div#main div#center_contents{
margin:0 230px;

}

body.home div#main div#center_contents section.nav{
margin:0 0 15px 0;
}

body.home div#main div#center_contents section.nav h1{
background-image:url(../img/top_center_contents_head_back3.gif);
background-position:left top;
background-repeat:no-repeat;
height:30px;
font-size:1.5em;
line-height:32px;
padding:0 0 0 15px;
font-weight:normal;
}

body.home div#main div#center_contents section.nav h1 span{
display:block;
background-image:url(../img/top_center_contents_head_back3-2.gif);
background-position:right top;
background-repeat:no-repeat;
height:30px;
}

body.home div#main div#center_contents section.nav ul{
border:1px solid #d8d8d8;
border-top:none;
padding:10px 5px;
}

body.home div#main div#center_contents section.nav ul li{
margin:0 0 0 0;
}

body.home div#main div#center_contents section.nav ul li a{
display:block;
background-image:url(../img/contents_nav_back.gif);
background-position:left center;
background-repeat:no-repeat;
line-height:1.1em;
padding:0 0 0 17px;
margin:0 0 5px 0;
font-size:1.4em;
}

@media screen and (min-width: 769px) {
  body.home div#main div#center_contents section.nav ul li a {
    margin-bottom: .75em;
  }
}

/*---------- bousai ----------*/
body.home div#main div#center_contents section.bousai{
font-size:1.4em;
}

body.home div#main div#center_contents section.bousai ul li a{
display:block;
background-image:url(../img/contents_nav_back.gif);
background-position:left center;
background-repeat:no-repeat;
line-height:1.1em;
padding:0 0 0 17px;
margin:0 0 5px 0;
font-size:1.0em;
}

body.home div#main div#center_contents section.bousai h1{
background-image:url(../img/top_center_contents_head_back1.gif);
color:#ff3300;
font-size:1.071em;
}

body.home div#main div#center_contents section.bousai h1 span{
background-image:url(../img/top_center_contents_head_back1-2.gif);
}

/*---------- news ----------*/
body.home div#main div#center_contents section.news{
position:relative;
padding:23px 0 0 0;
}

body.home div#main div#center_contents section.news h1{
background-image:url(../img/top_center_contents_head_back2.gif);
}

body.home div#main div#center_contents section.news h1 span{
background-image:url(../img/top_center_contents_head_back2-2.gif);
}

body.home div#main div#center_contents section.news p.more{
position:absolute;
top:0px;
right:5px;
}

/*---------- guide ----------*/
body.home div#main div#center_contents section.guide{

}

body.home div#main div#center_contents section.guide ul{
padding:20px 19px 10px 19px;
margin:0;
}

body.home div#main div#center_contents section.guide ul li{
width:80px;
margin:0 0 10px 0;
padding:0 10px;
float:left;
text-align:center;
}

body.home div#main div#center_contents section.guide ul li a{
background-image:none;
padding:0;
display:inline;
overflow:hidden;
}

body.home div#main div#center_contents section.guide ul li a img{
margin:0 0 5px 0;
}



/* NEW GUDE */
body.home div#main div#center_contents section.newguide ul{
padding:20px 8px 10px 8px;
margin:0;
}
body.home div#main div#center_contents section.newguide ul li{
width:72px;
margin:0 0 20px 0;
padding:0 6px;
float:left;
text-align:center;
}
body.home div#main div#center_contents section.newguide ul li a{
background-image:none;
padding:0;
display:inline;
overflow:hidden;
}

body.home div#main div#center_contents section.newguide ul li a img{
margin:0 0 5px 0;
}
/* NEW GUDE */





/*---------- often_found ----------*/
body.home div#main div#center_contents section.often_found h1{
background-image:url(../img/top_center_contents_head_back4.gif);
}

body.home div#main div#center_contents section.often_found h1 span{
background-image:url(../img/top_center_contents_head_back4-2.gif);
}

/* ----------------------------------------------------------------------------------
left_contents layout 
---------------------------------------------------------------------------------- */

body.home div#main div#left_contents{
width:210px;
float: left;  
margin-left: -100%; 
}

body.home div#main div#left_contents section.nav{
margin:0 0 15px 0;
}

body.home div#main div#left_contents section.nav h1{
/*width:195px;*/
height:30px;
background-image:url(../img/top_sidenav_head_back1.gif);
background-position:left top;
background-repeat:no-repeat;
font-size:1.5em;
font-weight:normal;
line-height:32px;
padding:0 0 0 15px;
color:#333;
}

body.home div#main div#left_contents section.nav ul{
border:1px solid #d8d8d8;
border-top:none;
padding:10px 5px;
}

body.home div#main div#left_contents section.nav ul li{
margin:0 0 0 0;
}

body.home div#main div#left_contents section.nav ul li a{
display:block;
background-image:url(../img/contents_nav_back.gif);
background-position:left center;
background-repeat:no-repeat;
line-height:1.1em;
padding:0 0 0 17px;
margin:0 0 5px 0;
font-size:1.4em;
}

/*---------- if_the_time ----------*/
body.home div#main div#left_contents section.if_the_time h1{
background-image:url(../img/top_sidenav_head_back2.gif);
padding:0 0 0 40px;
}

/*---------- population ----------*/
body.home div#main div#left_contents section.population{

}


body.home div#main div#left_contents section.population h1{
background-image:url(../img/top_center_contents_head_back4.gif);
background-position:left top;
background-repeat:no-repeat;
height:30px;
font-size:1.5em;
line-height:32px;
padding:0 0 0 15px;
font-weight:normal;
}

body.home div#main div#left_contents section.population h1 span{
display:block;
background-image:url(../img/top_center_contents_head_back4-2.gif);
background-position:right top;
background-repeat:no-repeat;
height:30px;
}


body.home div#main div#left_contents section.population dl{
border:1px solid #d8d8d8;
border-top:none;
padding:10px 20px;
font-size:1.4em;
margin:0px!important;
}

body.home div#main div#left_contents section.population dl dt{
line-height:1.3em;
}

body.home div#main div#left_contents section.population dl dd{

}

/*---------- link ----------*/
body.home div#main div#left_contents section.link h1{
background-image:url(../img/top_sidenav_head_back3.gif);
margin:0 0 10px 0;
}

body.home div#main div#left_contents section.link ul{
border:none;
padding:0;
}

body.home div#main div#left_contents section.link ul li{
margin:0 0 10px 0;
}

body.home div#main div#left_contents section.link ul li a{
display:block;
background-image:none;
padding:0 0 0 0;
}

/*---------- banner ----------*/

body.home div#main div#left_contents p.banner{
margin:0 0 15px 0;
}

body.home div#main div#left_contents p.banner_Mayor{
margin:0 0 15px 0;
}

body.home div#main div#left_contents p.banner_Mayor a{
display:block;
background-image:url(../img/banner_Mayor_back.gif);
background-position:left center;
background-repeat:no-repeat;
height:50px;
line-height:50px;
font-size:16px;
font-weight:bold;
padding:0 0 0 60px;
}

/* ----------------------------------------------------------------------------------
right_contents layout 
---------------------------------------------------------------------------------- */
body.home div#main div#right_contents{
width:210px;
float: left;  
margin-left: -210px; 
}

body.home div#main div#right_contents section.nav{
margin:0 0 15px 0;
}

body.home div#main div#right_contents section.nav h1{
width:195px;
height:30px;
background-image:url(../img/top_sidenav_head_back1.gif);
background-position:left top;
background-repeat:no-repeat;
font-size:1.5em;
font-weight:normal;
line-height:32px;
padding:0 0 0 15px;
color:#333;
}

body.home div#main div#right_contents section.nav ul{
border:1px solid #d8d8d8;
border-top:none;
padding:10px 5px;
}

body.home div#main div#right_contents section.nav ul li{
margin:0 0 0 0;
}

body.home div#main div#right_contents section.nav ul li a{
display:block;
background-image:url(../img/contents_nav_back.gif);
background-position:left center;
background-repeat:no-repeat;
line-height:1.1em;
padding:0 0 0 17px;
margin:0 0 5px 0;
font-size:1.4em;
text-decoration: none;
}

/*---------- photo_album ----------*/
body.home div#main div#right_contents section.photo_album{

}

body.home div#main div#right_contents section.photo_album div.album_contents_wrap{
border:1px solid #d8d8d8;
border-top:none;
padding:10px 5px;
}

body.home div#main div#right_contents section.photo_album p{
font-size:1.2em;
line-height:1.5em;
margin:0 0 10px 0;
padding:0 5px ;
}

body.home div#main div#right_contents section.photo_album p.graph{

}

body.home div#main div#right_contents section.photo_album p.graph img{
width:188px;
}

body.home div#main div#right_contents section.photo_album ul{
border:none;
padding:0;
}

body.home div#main div#right_contents section.photo_album ul li{
margin:0 0 10px 0;
}

body.home div#main div#right_contents section.photo_album ul li a{
}

#fbBlock{
	margin:0 0 20px 0;
}

/*---------- link ----------*/
body.home div#main div#right_contents section.link h1{
background-image:url(../img/top_sidenav_head_back3.gif);
margin:0 0 10px 0;
}

body.home div#main div#right_contents section.link ul{
border:none;
padding:0;
}

body.home div#main div#right_contents section.link ul li{
margin:0 0 10px 0;
}

body.home div#main div#right_contents section.link ul li a{
display:block;
background-image:none;
padding:0 0 0 0;
}

/*---------- banner ----------*/
body.home div#main div#right_contents p.voice{
margin:0 0 15px 0;
}


/*   ページの先頭へもどる    */
#toPageTop {
  text-align:right;
  margin:15px 0px;
}
#toPageTop a {
  font-size: 1.2em;
  display: inline-block;
  margin: 0;
  padding: 10px 15px;
  letter-spacing: 0.2em;
  background-color: #FFFFFF;
  border: 1px solid #8D9AAA;
  border-radius: 3px;
}




/*----------------------------------------------------------------------------------
  cleafix Huck base source
---------------------------------------------------------------------------------- */

.clearfix:after { 
content: url(pixel.gif);
display: block;
clear: both; height: 0; 
}

.clearfix { display: inline-block; }
.clearfix { display: block; }
/* Mac$BHG(BIE$B$N$_$KE,MQ(B \*//*/
.clearfix { overflow: hidden; }
/* */


	
/* OPERA huck */

div#page div#header h1#top_logo:not(\*|*) { 

	}

/* ----------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
   @media screen and (max-width : 768px)
////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
---------------------------------------------------------------------------------- */
@media screen and (max-width : 768px) {
	
/* ----------------------------------------------------------------------------------
 body , page  layout 
---------------------------------------------------------------------------------- */

body{
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust:100%
}

div#page{
	max-width:100%;
	min-width:100%;
	margin:0 auto;
	padding:0 ;
}

/* ----------------------------------------------------------------------------------
header layout 
---------------------------------------------------------------------------------- */

header#header{
margin:0;
padding:0 0 20px 0;
text-align:center;

}

header#header h1#logo{
width:130px;
height:auto;
float:none;
display:inline-block;
padding: 11px 20px 0 0;
}

header#header h1#logo img{
width:130px;
height:auto;
}

header#header p#header_graph{
width:130px;
box-sizing:border-box;
float:none;
display:inline-block;
padding:20px 0 0 0;
vertical-align:top;
}

header#header p#header_graph img{
height:auto;
width:130px;
}

header#header nav#sub_nav{
float:none;
clear:both;
display:block;
width:100%;
padding: 10px 0 0 0;
}

header#header nav#sub_nav ul{
padding:0;
text-align:center;
}

header#header nav#sub_nav ul li{
float: none;
}

header#header nav#sub_nav ul li:nth-of-type(1){
padding: 0;
}

header#header nav#sub_nav ul li:nth-of-type(2){
display:none;
}

header#header nav#sub_nav ul li.lastchild{
padding: 0 0 0 25px;
}

header#header div#function{
float:none;
text-align:center;
display:block;
width:100%;
padding:0;
box-sizing:border-box;
}

header#header div#function aside#font_size{
display:none;
}

header#header div#function aside#search{
float:none;
width:100%;
padding:3px 0 0 0;
font-size:1em;
text-align:center;
}

header#header div#function aside#search form{
margin:0 auto;
text-align:center;
}

/*header#header div#function aside#search form input{
font-size:16px;
}*/

/* 2022-03 SP版フォームを大きく表示 */
header#header div#function aside#search form input[type="text"] {
  font-size: 16px;
  padding: .15em .5em;
  width: 260px;
  max-width: 80%;
}

header#header div#function #readspeaker_button1{
	display:block;
	margin:10px auto 0 auto;
	text-align:center;
}

header#header div#function #readspeaker_button1 a{
	display:inline-block;
	box-sizing:border-box;
	padding:5px 10px;
	border-radius:5px;
	width:240px;
	text-align:center;
	background:#0e3192;
	color:#fff;
	text-decoration:none;
	letter-spacing:1px;
	margin:0 auto;
}

/* ----------------------------------------------------------------------------------
global_menu layout 　201512-
---------------------------------------------------------------------------------- */

#spMenu {
  width:100%;
  height:48px;
  display:block;
  box-sizing:border-box;
  margin:0;
  padding:0px;
  font-size:18px;
  color:#404040;
  background-color:#e0e0c0;
  line-height:48px;
  border:1px solid #e0e0e0;
  cursor:pointer;
  position:relative
}

#spMenu span:after {
  content:url(../img/spglobalmenu.png);
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -18px;
}


#spMenu span {
  width:100%;
  height:46px;
  display:block;
  box-sizing:border-box;
  margin:0;
  padding:0px 15px;
  border:1px solid #FFFFFF;
}

.global_menu {
	width: 100%;
	margin: 0px;
  padding: 0px;
  clear:both;
}

#menuho {
  margin:0px;
	padding: 0px;
  display:none;
}

#menuho li a {
  width: 100%;
  height:110px;
  background:none !important;
  display: block;
  box-sizing:border-box;
  text-indent:inherit;
  color:#FFFFFF;
  text-decoration:none;
  margin:0;
  padding:0px 0px 10px 20px;
  line-height:50px;
  position:absolute;
  top:0;
  left:0;
  z-index:99999;
}

/* 2022-03 カテゴリボタン画像ホバー時にサブカテゴリメニュー表示を追加 */
#menuho li .mouseover-menu {
  display: none !important;
}
#menuho li div:hover ~ .mouseover-menu {
  display: none !important;
}

#menu11 a {
}

#menu12 a {
}

#menu13 a {
}

#menu14 a {
}

#menu15 a {
}

#menu11 a:after  {
    /* content:url();*/
}

#menu12 a:after  {
    content:url(../img/spMenu01.png);
}

#menu13 a:after  {
    content:url(../img/spMenu02.png);
}

#menu14 a:after  {
    content:url(../img/spMenu03.png);
}

#menu15 a:after  {
    content:url(../img/spMenu04.png);
}



#menuho a:hover {
  background-color:inherit;
  background-position:inherit;
}

.global_menu ul li{
  width:100%;
  height:110px;
	margin:0px;
  padding:0px;
  display:block;
  box-sizing:border-box;
	list-style:none;
	float:none;
  position:relative;
  border-top:1px solid #93d6e1;
  font-size:15px;
  background-color:#049b9b;
}

.global_menu ul li:hover {
  background-color:#247575;
}

.global_menu ul li a:after  {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -20px;
}


#menu15 {
  border-bottom:1px solid #93d6e1;
}


.c-both {
	clear: both;
} 

.tooltips {
  width: auto;
  height: auto;
  position:absolute;
  z-index:1;
  left:0;
  top:20px;
  padding:25px 55px 10px 20px;
  color:#ffffff;
  font-size: 11px;
  background:inherit;
  
  /* display: none; */
}

.tooltips5 {
  width: auto;
  height: auto;
  position:absolute;
  z-index:1;
  left:0;
  top:20px;
  padding:25px 55px 10px 20px;
  color:#ffffff;
  font-size: 11px;
  background:inherit;
  
  /* display: none; */
}

#menuho div~.tooltips {
  display:inline;
}
#menuho div~.tooltips5 {
  display:inline;
}


#menuho div:hover~.tooltips {
  display:inline;
}

#menuho div:hover~.tooltips5 {
  display:inline;
}


/* ----------------------------------------------------------------------------------
link_banner layout 
---------------------------------------------------------------------------------- */
#link_banner{
width:100%;
margin:0 0 15px 0;
box-sizing:border-box;
padding:0 10px 0;
}

#link_banner_img ul{
letter-spacing:-0.4em;
text-align:left;

}

#link_banner_img li{
display:inline-block;
text-align:right;
width:49%;
margin:0 2% 10px 0 ;
vertical-align:top;
}

#link_banner_img li:nth-of-type(even){
text-align:left;
margin:0 0 10px 0 ;
}

#link_banner_img li img{
width:100%;
height:auto;
max-width:210px;
padding:0;
}
/* ----------------------------------------------------------------------------------
footer layout 
---------------------------------------------------------------------------------- */
footer#footer{
width:100%;
box-sizing:border-box;
padding:30px 10px 0;
}

footer#footer ul#footer_nav{
letter-spacing:-0.4em;
}

footer#footer ul#footer_nav li{
display:inline-block;
width:50%;
box-sizing:border-box;
letter-spacing:normal;
border-right:1px solid #333;
border-left:1px solid #333;
padding:2px 0;
margin:0 0 10px 0;
text-align:center;
}

footer#footer ul#footer_nav li:nth-of-type(even){
border-left-style:none;

}

footer#footer ul#footer_nav li.lastchild{
padding:2px 0;
margin:0 0 10px 0;
border-right:1px solid #333;
}
	
footer#footer div#footer_banner{
padding:15px 0 0 0;
}

footer#footer div#footer_banner ul{
letter-spacing:-0.4em;
text-align:left;
}

footer#footer div#footer_banner li{
display:inline-block;
text-align:right;
width:49%;
margin:0 2% 10px 0;
vertical-align:top;
}

footer#footer div#footer_banner li:nth-of-type(even){
text-align:left;
margin:0 0 10px 0 ;
}

footer#footer div#footer_banner li img{
width:100%;
height:auto;
max-width:172px;
padding:0;
}
	
	
/* ----------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
   home only layout
////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
---------------------------------------------------------------------------------- */

body.home div#main{
width:100%;
padding:0;
box-sizing:border-box;
margin:0 0 20px 0;
}

/* ----------------------------------------------------------------------------------
スライドイメージ
---------------------------------------------------------------------------------- */

body.home div#slide_image{
height:auto;
min-height:100px;
}

/* ----------------------------------------------------------------------------------
center_contents layout 
---------------------------------------------------------------------------------- */
body.home div#main div#center_contents_wrapper{
float:none;
width:100%;
padding:0 10px;
box-sizing:border-box;
}

body.home div#main div#center_contents{
margin:0;
width:100%;
}

body.home div#main div#center_contents p.more a img{
width:100%;
}

/*---------- guide ----------*/
/* NEW GUDE */
body.home div#main div#center_contents section.newguide ul{
padding:20px 8px 10px 8px;
margin:0;
width:100%;
box-sizing:border-box;
}
body.home div#main div#center_contents section.newguide ul li{
width:25%;
box-sizing:border-box;
margin:0 0 20px 0;
padding:0 6px;
float:left;
text-align:center;
}
body.home div#main div#center_contents section.newguide ul li a{
background-image:none;
padding:0;
display:inline;
overflow:hidden;

}

body.home div#main div#center_contents section.newguide ul li a img{
width:100%;
height:auto;
max-width:72px;
margin:0 0 5px 0;
}
/* NEW GUDE */

/*---------- topics ----------*/

body.home div#main div#center_contents section.topics ul li{
padding:5px 0;
}

/* ----------------------------------------------------------------------------------
left_contents layout 
---------------------------------------------------------------------------------- */

body.home div#main div#left_contents{
width:100%;
float: none;  
margin-left: 0;
padding:0 10px;
box-sizing:border-box;
}

/*---------- link ----------*/

body.home div#main div#left_contents section.link ul{
	letter-spacing:-0.4em;
}

body.home div#main div#left_contents section.link ul li{
display:inline-block;
width:49%;
margin:0 2% 10px 0;
text-align:right;
vertical-align:top;
}

body.home div#main div#left_contents section.link ul li a{
text-decoration: none;
}

body.home div#main div#left_contents section.link ul li:nth-of-type(even){
	margin:0 0 10px 0;
	text-align:left;
}

body.home div#main div#left_contents section.link ul li img{
width:100%;
height:auto;
max-width:210px;
padding:0;
}

/* ----------------------------------------------------------------------------------
right_contents layout 
---------------------------------------------------------------------------------- */
body.home div#main div#right_contents{
width:100%;
float: none;  
margin-left: 0;
padding:0 10px;
box-sizing:border-box;
}

body.home div#main div#right_contents p.voice{
	display:none;
}

/*---------- fb ----------*/
#fbBlock{
	text-align:center;
	margin:0 0 20px 0;
}

#fbBlock > p{
	text-align:center;
}

/*---------- link ----------*/

body.home div#main div#right_contents section.link ul{
	letter-spacing:-0.4em;
}

body.home div#main div#right_contents section.link ul li{
	display:inline-block;
	width:49%;
	margin:0 2% 10px 0;
	text-align:right;
	vertical-align:top;
}

body.home div#main div#right_contents section.link ul li:nth-of-type(even){
	margin:0 0 10px 0;
	text-align:left;
}

body.home div#main div#right_contents section.link ul li img{
width:100%;
height:auto;
max-width:210px;
padding:0;
}

/*   ページの先頭へもどる    */
#toPageTop {
  margin:15px 10px;
}


	
}