@charset "utf-8";

/* ===================================================================
format
=================================================================== */

/*	body
----------------------------------------------------*/
body {
text-align:center;
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif , "FontAwesome";
color: #333;
-webkit-text-size-adjust: 100%;
}

/*	section
----------------------------------------------------*/
section {padding: 0 0 2em;}

/*	p
----------------------------------------------------*/
p {font-size: 1em; padding: 0em 0.5em 1em;}

/*	a:link,a:visited,a:hover,a:active
----------------------------------------------------*/
a			{color:#0068b7;text-decoration:none;}
a:link		{color:#0068b7;text-decoration:none;}
a:visited	{color:#0068b7;}
a:hover		{text-decoration:underline;}
a:active	{color:#0068b7;}

@media screen and (min-width:751px){
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}    
}

/*	h style
----------------------------------------------------*/
h2 {
margin: 0 0 1em;
padding: .5em;
font-size: 1.57em;
font-weight: bold;
border: 5px solid #0685bd;
border-left: 25px solid #0685bd;
background: #f0f8fb;
}

h3 {
margin: 0 0 1em;
padding: 0.5em 1em;
font-size: 1.2em;
font-weight: bold;
color: #0085bd;
border-bottom: 5px solid #0085bd;
}

h4 {
margin: 0 0 1em;
padding: 0.32em 0.8em;
font-size: 1.1em;
font-weight: bold;
color: #0085bd;
border-left: 4px solid #0085bd;
}

h5 {
margin: 0 0 1em;
padding: 0.32em 0;
font-size: 1.1em;
font-weight: bold;
color: #0085bd;
}

h6 {
margin: 0 0 0.5em;
}

/* ===================================================================
Layout
=================================================================== */
nav,
main,
.h_top,
.h_btm,
.breadcrumb,
.f_top,
.f_btm {
width: 100%;
max-width: 980px;
margin: 0 auto;
}

/*header		{}*/
#nav			{}
main		{}
#contents		{width: 660px;}
#sidebar		{width: 300px;}
footer			{}

/* ===================================================================
Layout-contents
=================================================================== */

/*	header
----------------------------------------------------*/
.h_bg {
background: #0085bd;
}

.h_top,
.h_btm {
display: flex;
justify-content: space-between;
}

.h_top {
padding: 0.4em 0;
color: white;
}

.h_top h1 br{
display: none;
}

.h_top a,
.h_top a:hover {
color: white;
}

.h_top ul {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}

.h_top li {
padding: 0 0 0 2em;
}

.h_btm {
padding: 1em 0;
}

.h_btm li {
text-align: right;
font-size: 1.17em;
font-weight: bold;
line-height: 1.3;
}

.h_btm li:nth-of-type(2) {
font-size: 2.8em;
background: url(../images/common/ico_freetel.png) no-repeat 0 40%;
}

.h_btm li:nth-of-type(2) a{
color: #333;   
}

/*	nav
----------------------------------------------------*/
.sp_btn{
display: none;    
}

#nav ul {
display: flex;
justify-content: space-between;
font-size: 1.1em;
}

#nav li {
width: 163px;
text-align: center;
border-left: 1px dotted #ccc;
}

#nav .nav_tel_area,
#nav .sp_menu{
    display: none;
}

#nav li:nth-child(8) {
border-right: 1px dotted #ccc;
}

#nav a {
display: block;
padding: 1.036em 0;
transition: .3s ease-in-out; 
}

#nav a:hover {
text-decoration: none;
color: white;
background: #0085bd;
}

/*	breadcrumb
----------------------------------------------------*/
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
padding: 2em 0 0;
}

.breadcrumb li:before {
content: ">";
padding: 0 0.3em 0 0.8em;
}

.breadcrumb li:first-child:before{
font-family: FontAwesome;
content: "\f015";  
padding: 0 ;
font-size: 1.2em;
line-height: 1;
}


/*	main
----------------------------------------------------*/
main {
display: flex;
justify-content: space-between;
padding: 2em 0 5em;
}

/*	contents
----------------------------------------------------*/
#contents > section{
padding: 0 0 1em;
}

/*	sidebar
----------------------------------------------------*/
.side_bnr li {
padding: 0 0 1em;
}

.side_bnr .bnr_parts a{
    display: block;
    padding: .6em 0;
    text-align: center;
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    transition: .3s ease-in-out; 
}

.side_bnr .bnr_parts a:hover{
    text-decoration: none;
    opacity: .7;
}

.side_bnr .bnr_parts a span{
    font-size: 1.2rem;
    color: #fff10f;
}

.side_bnr .bnr_parts a span:before{
    content: '\f061';
    font-family: FontAwesome;
    margin-right: 3px;
}

.side_bnr .reserve a{
    background: rgb(144,209,105);
    background: -webkit-linear-gradient(rgba(144,209,105,1) 0%, rgba(80,182,18,0.9962359943977591) 100%);
    background: -o-linear-gradient(rgba(144,209,105,1) 0%, rgba(80,182,18,0.9962359943977591) 100%);
    background: linear-gradient(rgba(144,209,105,1) 0%, rgba(80,182,18,0.9962359943977591) 100%);
}

.side_bnr .contact a{
    background: rgb(252,157,64);
    background: -webkit-linear-gradient(rgba(252,157,64,1) 0%, rgba(252,124,10,1) 100%);
    background: -o-linear-gradient(rgba(252,157,64,1) 0%, rgba(252,124,10,1) 100%);
    background: linear-gradient(rgba(252,157,64,1) 0%, rgba(252,124,10,1) 100%);
}

.side_bnr .gl a{
    padding: 0.7em 0 0.5em;
    font-size: 0.85rem;
    color: #013c88;
    line-height: 1.3;
    border: 3px solid #013c88;
    border-radius: 0;
    background: rgb(253,254,255);
    background: -webkit-linear-gradient(rgba(253,254,255,1) 0%, rgba(231,243,254,1) 100%);
    background: -o-linear-gradient(rgba(253,254,255,1) 0%, rgba(231,243,254,1) 100%);
    background: linear-gradient(rgba(253,254,255,1) 0%, rgba(231,243,254,1) 100%);
    transition: .3s ease-in-out;
}

.side_nav .tax{
text-align: center;
margin: 15px auto 0;
}

.side_h2 {
margin: 0;
padding: 0;
font-size: 1em;
font-weight: bold;
color: white;
border: none;
background: linear-gradient(#83c4e1,#0085bd);
}

.side_h2 a {
display: block;
padding: 1.212em 0.4em;
color: white;
transition: .3s ease-in-out;
}

.side_h2 a:before {
content: "";
margin: 0 1em 0 0;
padding: 0.782em 0 0.782em 0.35em;
background: #83c4e1 url(../images/common/ico_side_nav.png) no-repeat 0 50%;
}

.side_h2 a:hover {
text-decoration: none;
background: rgba(255,255,255,0.3);
}

.side_nav ul li {
border-bottom: 1px dotted #ccc;
}

.side_nav ul li:last-child {
border: none;
}

.side_nav ul li a {
display: block;
position: relative;
padding: 1.211em 0 1.211em 2em;
}

.side_nav ul li a:hover {
padding: 1.211em 0 1.211em 1.6em;
text-decoration: none;
border-left: 0.4em solid #ccc;
}

.side_nav ul li a:hover:after {
content: "";
position: absolute;
top: 1.5em;
left: 0;
width: 0;
height: 0;
border: 0.5em solid transparent;
border-left-color: #ccc;
}

.side_covid{
margin-top: 20px;
padding: 7px;
border: 2px solid #013c88;
background-color: #f9fdfe;
}

.side_covid dt{
margin-bottom: 2px;
text-align: center;
font-size: 1.15em;
font-weight: bold;
color: #013c88;
}

/*	footer
----------------------------------------------------*/
footer {
background: #0085bd;
}

.f_top {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0 0 1em;
color: white;
}

.f_top li {
padding: 1em 0 0;
}

.f_top li:before {
content: "|";
padding: 0 0.7em;
}

.f_top li:first-child{
padding-left: 0;
}

.f_top li:first-child:before {
content: none;
}

.f_top a,
.f_top a:hover {
color: white;
}

.f_btm {
padding: 0 0 1.4em;
text-align: center;
color: white;
}

/*	img
--------------------------------------------------------------------*/
img {
  max-width: 100%;
  height: auto;
}

/* ===================================================================
Pagetop
=================================================================== */
.pagetop {
position: fixed;
right: 5em;
bottom: 5em;
font-size: 77%;
transform: rotate(45deg);
background: #0085bd;
}

.pagetop .pc {
display: block;
position: absolute;
top: 3em;
left: 1em;
transform: rotate(-45deg);
}

.pagetop .sp{
display: none;
}

.pagetop a {
display: block;
position: relative;
width: 100px;
height: 100px;
text-decoration: none;
color: white;
transition: .3s ease-in-out;
}

.pagetop a:hover {
background: rgba(255,255,255,0.3);
}

/* ===================================================================
Rollover 背景が白の時用
=================================================================== */
a img {
opacity: 1;
transition: .3s ease-in-out; 
}

a:hover img {
opacity: .7;
filter: alpha(opacity=30);
}