@charset "utf-8";
/* CSS Document */


/* 全ブラウザ対応のため左→右ではなく右→左に流す */
@keyframes slide-left {
  from { transform: translateX(80%); }
  to   { transform: translateX(-100%); }
}



/*----------------------------------------
com
----------------------------------------*/

/*pc*/
@media only screen and (min-width: 768px) {

/* unkou
--------------------------------------------*/
#unkou .flex_wrap { display: flex; }
#unkou .flex_wrap h3 {
width: 140px;
font-size: 1.2rem;
text-align: center;
background: #086DB0;
color: #fff;
padding: 10px;
}
#unkou .flex_wrap .inner { width: calc(100% - 140px); font-size: 1.3rem; }
#unkou .flex_wrap .inner a { background: #B8D1E2; display: block; padding: 10px 30px; }
#unkou .flex_wrap .inner a.bg_yellow { background: #FFFF23; }
#unkou .flex_wrap .inner a.bg_red { background: #FF7F7F; }
#unkou .flex_wrap .inner p {  }



/* pankuzu
--------------------------------------------*/
#pankuzu { display: flex; justify-content: space-between; margin: 5px 30px; }

#pankuzu .pankuzu02 { margin: 0; display: flex; }
#pankuzu .pankuzu02 li { font-size: 1.2rem;font-weight: bold;}
#pankuzu .pankuzu02 li::after { font-family: "Font Awesome 5 Free"; content: "\f054"; font-weight: 900; padding: 0 10px; color: #086DB0; }
#pankuzu .pankuzu02 li:last-of-type::after { content: none;}
#pankuzu .pankuzu02 li a { color: #086DB0; font-weight: 500;}



/* anchor
--------------------------------------------*/
#anchor { padding: 10px 10%; background: #D8E6FD; }
#anchor.is-fixed { position: fixed; top: 136px; left: 0; right: 0; z-index: 10; }

#anchor ul { display: flex; flex-wrap: wrap; justify-content: center; }
#anchor ul li { padding: 0 20px; border-right: 1px solid #999; }
#anchor ul li:last-child { border-right: none; }
#anchor ul li a {
display: block;
color: #0D84EC;
border-bottom: 1px solid transparent;
}

#anchor ul li a:hover {
border-bottom-color: #0D84EC;
}



/* ttl01
--------------------------------------------*/
h3.ttl01 {
font-size: 2rem;
font-weight: 700;
color: #fff;
background: #0D84EC;
padding: 20px;
border-radius: 8px;
margin-bottom: 50px;
}



}



/*sp*/
@media only screen and (max-width: 767px) {

body { padding-bottom: 30px; }
body.pb { padding-bottom: 80px; }


/* unkou
--------------------------------------------*/
#unkou .flex_wrap { display: flex; }
#unkou .flex_wrap h3 {
width: 80px;
font-size: 1.2rem;
text-align: center;
background: #086DB0;
color: #fff;
padding: 10px;
}
#unkou .flex_wrap .inner { width: calc(100% - 80px); font-size: 1.3rem; overflow: hidden; }
#unkou .flex_wrap .inner a { background: #B8D1E2; display: block; padding: 10px; }
#unkou .flex_wrap .inner a.bg_yellow { background: #FFFF23; }
#unkou .flex_wrap .inner a.bg_red { background: #FF7F7F; }
#unkou .flex_wrap .inner p { display: inline-block; white-space: nowrap; animation: slide-left 10s linear infinite; }



/* pankuzu
--------------------------------------------*/
#pankuzu { display: flex; justify-content: space-between; margin: 5px 10px; }

#pankuzu .pankuzu02 { margin: 0; display: flex; flex-wrap: wrap; }
#pankuzu .pankuzu02 li { font-size: 1.2rem;font-weight: bold; position: relative; padding-right: 20px; }
#pankuzu .pankuzu02 li::after { font-family: "Font Awesome 5 Free"; content: "\f054"; font-weight: 900; color: #086DB0; position: absolute; right: 7px; }
#pankuzu .pankuzu02 li:last-of-type { padding-right: 0; }
#pankuzu .pankuzu02 li:last-of-type::after { content: none; }
#pankuzu .pankuzu02 li a { color: #086DB0; font-weight: 500; }



/* anchor
--------------------------------------------*/
#anchor { padding: 10px 5%; background: #D8E6FD; }
#anchor.is-fixed { position: fixed; top: 65px; left: 0; right: 0; z-index: 10; }

#anchor ul { display: flex; flex-wrap: wrap; }
#anchor ul li {
font-size: 1.2rem;
font-weight: 700;
margin: 3px 0;
padding: 0 10px;
border-right: 2px solid #999;
line-height: 1.2;
}
#anchor ul li:last-child { border-right: none; }
#anchor ul li a {
display: block;
color: #0D84EC;
border-bottom: 1px solid transparent;
}

#anchor ul li a:hover {
border-bottom-color: #0D84EC;
}



/* ttl01
--------------------------------------------*/
h3.ttl01 {
font-size: 1.6rem;
font-weight: 700;
color: #fff;
background: #0D84EC;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
}



/* foot_link
--------------------------------------------*/
#foot_link { position: fixed; bottom: 50px; z-index: 1; width: 100%; }
#foot_link ul { display: flex; flex-wrap: wrap; }
#foot_link ul li {
width: 50%;
background: #326FD1;
border-right: 1px solid #fff;
box-sizing: border-box;
}
#foot_link ul li:last-child { border-right: none; }
#foot_link ul li a {
height: 100%;
display: flex;
align-items: center;
color: #fff;
font-size: 1rem;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
#foot_link ul li:first-child a { color: #fff; font-size: 1.1rem; }
#foot_link ul li p { width: 100%; }


#foot_link.route_guidance ul li { width: calc(100% / 3); }


#foot_link.rosen ul li { background: #0AADF3; width: calc(100% / 3); }
#foot_link.rosen ul li:first-child { background: #EDEDED; }
#foot_link.rosen ul li:first-child a { color: #000; font-weight: 700; }



}