@charset "utf-8";
/*==================
 ▼ブレイクポイントのルール▼
 -スマホを基本設計にする-
 *～519px スマホ縦
 *520px～スマホ横
 *768px～PC小
 *960px～PC
==================*/

section{width:100%; margin:0 auto; padding:20px 10px 10px;}

div.space1{height:20px;}

h2.h21{font-size:150%;text-align:center;line-height:300%;font-weight:bolder;}

div.h2section{width:100%;background-image:url(../img/ha.png);background-repeat:no-repeat;
background-color:#e8f1c9;background-size:25%;background-position: right center;box-shadow:0px 3px 3px rgba(0,0,0,0.4);}
div.h2page_out{position:relative;height:150px;}
h2.h2page{position:absolute;top:38%;left:5px;font-family: 'M PLUS Rounded 1c', sans-serif;}
h3.h3page{line-height:400%; text-align:center;font-size:120%;font-weight:bolder;}
h4.h4page{line-height:300%; text-align:center;font-size:100%;font-weight:bolder;}
h5.h5page{line-height:200%; text-align:center;font-size:100%;font-weight:bolder;border-bottom:1px solid green;margin:0 0 10px 0;}

div.over_f{overflow:auto;height:200px;}
article.oshirase dl{margin:0 0 5px 0;padding:0;}
article.oshirase dl dt span{background-color:orange;padding:1px 5px 0;border-radius:4px;font-size:80%;}
article.oshirase dl dd{margin:0;}
article.oshirase dd a{display:block;padding:0;margin:0;color:#000000;font-size:80%;}

div.elements{float:left;width:50%;}

/* traffic.php */
div.bus1{border:1px solid gray;margin:0 0 20px 0;border-radius:5px;}
.hirobus{background-color:#c30d23;}
.hiroden{background-color:#8fc31f;}
div.real{background-color:gray;}
div.bus1 p a{display:block;text-align:center;font-size:80%;padding:10px;line-height:250%;font-weight:bolder;color:#ffffff;}
div.taxi1{border:1px solid gray;margin:0 0 20px 0;border-radius:5px;font-size:80%;}
p.phone{line-height:250%;text-align:center;}
p.phone span{font-weight:bolder;}
p.phone a{padding:5px 20px;background-color:silver;color:gray;font-size:110%;}
/* traffic_hirobus.php traffic_hiroden.php */
p.timetable a{display:block;text-align:center;background-color:red;line-height:250%;color:#ffffff;width:50%;margin:0 auto;border-radius:5px;}
p.timetable a:hover{background-color:#ff6666;}

/* 100sai.php */
/* ユーチューブ動画 */
.wrap {
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
}
.wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
p.point{line-height:200%;background-color:yellow;border-radius:5px;border:1px solid red;text-align:center;font-weight:bolder;}
ul.taiso1{font-size:90%;padding:0;}
ul.taiso1 li{margin:0;}

div.nittei100 dl{font-size:90%;}
div.nittei100 dt{font-weight:bolder;background-color:#e8f1c9;padding:0 0 0 10px;}
div.nittei100 dd{margin:0;padding:0 0 0 10px;}

.button a{display:block;line-height:250%;color:#ffffff;width:50%;border-radius:5px;margin:0 auto;background-color:lightblue;text-align:center;}

/* terms.php */
div.mokuji1 ul{margin:0;padding:0;}
div.mokuji1 ul li a{display:block;margin:0;padding:0;line-height:250%;}
div.allfonts{font-size:90%;}

footer{margin-bottom:60px;}

@media only screen and (min-width: 520px) {
div.elements{width:33.33%;}

/* traffic.php */
div.bus1{width:46%;margin:0 2% 10px;float:left;}
div.bus1 p a{font-size:90%;}
div.taxi1{width:46%;margin:0 2% 0;float:left;font-size:90%;}

}

@media(min-width: 768px) {

section{width:90%;}
div.h2section{background-size:25%;}
div.h2page_out{width:90%;margin:0 auto;height:200px;}
h2.h2page{font-size:200%;font-weight:lighter;}
h4.h4page{font-size:120%;}

header{width:20%;float:left; margin:0; padding:0; position:fixed; top:0;}
h2.h21{font-size:200%;}
div#container{width:79%;float:right; margin:0;padding:0;}

article.oshirase{display:table;width:100%;}
article.oshirase dl{display:table-row;line-height:200%;}
article.oshirase dl dt{display:table-cell;width:15%;vertical-align:middle;padding-right:10px;}
article.oshirase dl dt span{font-size:90%;}
article.oshirase dl dd{display:table-cell;}
article.oshirase dl dd a{display:block;width:100%;font-size:90%;}

/* traffic.php */
div.bus1{width:48%;margin:0 1% 10px;}
div.bus1 p a{font-size:100%;}
div.taxi1{width:48%;margin:0 1% 0;font-size:100%;}
.phonetouch{display:none;}
/* traffic_hirobus.php traffic_hiroden.php */
p.timetable a{line-height:300%;}

/* 100sai.php */
ul.taiso1{font-size:100%;}

div.nittei100{display:table;width:100%;border-top:1px dotted gray;}
div.nittei100 dl{display:table-row;font-size:100%;line-height:250%;}
div.nittei100 dl dt{display:table-cell;width:15%;vertical-align:middle;text-align:center;border-bottom:1px dotted gray;padding:0;}
div.nittei100 dl dd{display:table-cell;border-bottom:1px dotted gray;padding:0 0 0 15px;}

/* terms.php */
div.mokuji1{width:50%;float:left;}


/*==================
div.sitenav{display:none;}
div.pcmenu{display:block;margin:0;padding:0;background-color:orange;}
div.pcmenu nav.pcnav ul{margin:0;padding:0;background-color:maroon;}
div.pcmenu  nav.pcnav ul li a{display:block;padding:10px 5px;color:#000000;font-size:90%;}
div.pcmenu  nav.pcnav ul li a:hover{background-color:#eeeeee;}
==================*/
}

@media only screen and (min-width: 960px) {
div.h2section{background-size:15%;}
h2.h2page{font-size:250%;top:35%;}


article.oshirase dl dt{width:12%;}
article.oshirase dl dt span{font-size:95%;}
article.oshirase dl dd a{font-size:95%;}

div.bus1 p a{font-size:120%;}

div.allfonts{font-size:95%;}
}

@media only screen and (min-width: 1280px) {
header{width:18%;}
div#container{width:81%;}
section{width:80%;}
div.h2page_out{width:80%;}

article.oshirase dl dt span{font-size:100%;}
article.oshirase dl dd a{font-size:100%;}
}