@charset "utf-8";
@-ms-viewport{width:device-width;}
@import url(http://fonts.googleapis.com/css?family=Dosis:400,800,700,600,300,200);


/*--------------------------------------------------*/
/*               $reset
/*--------------------------------------------------*/
*{margin:0; padding:0; text-align:left; -webkit-text-size-adjust:100%;}
img{border:none; vertical-align:bottom;}
p{line-height:1.8;}
hr{display:none;}
.clear{zoom:100%;}
.clear:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}
header,nav,section,article,aside,footer{display:block;}



/*--------------------------------------------------*/
/*               $link
/*--------------------------------------------------*/
a img,a{-moz-transition:all 0.4s ease; -webkit-transition:all 0.4s ease; -o-transition:all 0.4s ease; -ms-transition:all 0.4s ease; transition:all 0.4s ease;}
a{color:#069; text-decoration:underline;}
a:hover{color:#09f; text-decoration:none;}



/*--------------------------------------------------*/
/*               $layout
/*--------------------------------------------------*/
html{margin:0 auto; padding:0; font-size:100%; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif}
body{margin:0 auto; padding:0; background:#fff; font-size:1rem; text-align:center; color:#333;}
.fleft{float:left;}
.fright{float:right;}
#wrap{width:960px; margin:0 auto;}
.remarks{font-size:.875rem;}
p.remarks{padding-left:1rem; text-indent:-1rem;}
p.remarks:before{content:"※";}

@media screen and (max-width: 640px) {
html{font-size:75%; font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Droid Sans",Helvetica,Arial,sans-serif;}
body{font-size:1rem;}
#wrap{width:93.75%;}
}



/*--------------------------------------------------*/
/*               $header
/*--------------------------------------------------*/
header{-moz-box-shadow:0 6px 6px -6px #333; -webkit-box-shadow:0 6px 6px -6px #333; -ms-box-shadow:0 6px 6px -6px #333; box-shadow:0 6px 6px -6px #333;}
header .inner{width:960px; margin:0 auto; padding:0 0 15px;}
header .inner h1{font-family:'Dosis'; font-weight:normal; line-height:1.2;}
header .inner h1 span{font-size:.625rem;}
header .inner h1 a{color:#333; text-decoration:none;}
@media screen and (max-width: 640px) {
header{-moz-box-shadow:0 3px 3px -3px #333; -webkit-box-shadow:0 3px 3px -3px #333; -ms-box-shadow:0 3px 3px -3px #333; box-shadow:0 3px 3px -3px #333;}
header .inner{width:93.75%; padding:0 0 3.125%;}
}



/*--------------------------------------------------*/
/*               $nav
/*--------------------------------------------------*/
nav.gnavi{padding:25px 0 20px; background-color:#036;}
nav.gnavi ul{list-style:none; width:960px; margin:0 auto; font-size:0;}
nav.gnavi ul li{display:inline-block; margin-right:2rem; font-size:1rem; line-height:1;}
nav.gnavi ul li a{color:#fff; text-decoration:none;}
nav.gnavi ul li a:hover{color:#09f;}
@media screen and (max-width: 640px) {
nav.gnavi{padding:0;}
nav.gnavi ul{width:100%;}
nav.gnavi ul li{display:inline-block; width:50%; margin-right:0; border-bottom:1px #fff solid;}
nav.gnavi ul li a{display:block; padding:1rem 0; color:#fff; text-decoration:none; text-align:center;}
nav.gnavi ul li:nth-child(even) a{border-left:1px #fff solid;}
nav.gnavi ul li a:hover{color:#09f;}
}


/*--------------------------------------------------*/
/*               $reserve
/*--------------------------------------------------*/
#reserve{padding-bottom:100px;}
#reserve a{display:block; width:50%; margin:0 auto; padding:1rem;
border-radius:10px;
background:-moz-linear-gradient(#09f, #069);
background:-webkit-gradient(linear, left top, left bottom, from(#09f), to(#069));
background:-webkit-linear-gradient(#09f, #069);
background:linear-gradient(#09f, #069);
-moz-box-shadow:0 6px 6px -6px #333; -webkit-box-shadow:0 6px 6px -6px #333; -ms-box-shadow:0 6px 6px -6px #333; -o-box-shadow:0 6px 6px -6px #333; box-shadow: 0 6px 6px -6px #333; color:#fff; text-shadow:0 1px #efefef; text-align:center; text-decoration:none;}
#reserve a:hover{
background:-moz-linear-gradient(#069, #09f);
background:-webkit-gradient(linear, left top, left bottom, from(#069), to(#09f));
background:-webkit-linear-gradient(#069, #09f);
background:linear-gradient(#069, #09f);
}
@media screen and (max-width: 640px) {
#reserve{padding-bottom:7.8125%;}
#reserve a{width:80%;}
}


/*--------------------------------------------------*/
/*               $footer
/*--------------------------------------------------*/
footer{padding:25px 0; background-color:#efefef;}
footer p{padding-bottom:10px; font-size:.75rem; text-align:center;}
footer p br{display:none;}
footer address{font-style:normal; text-align:center; font-size:.625rem;}
@media screen and (max-width: 640px) {
footer{padding:3.90625% 0;}
footer p{padding-bottom:1.5625%;}
footer p br{display:block;}
}

/*--------------------------------------------------*/
/*               $news-bar
/*--------------------------------------------------*/
.news-bar {
    background: linear-gradient(135deg, #069, #09f);
    color: #fff;
    padding: 12px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.news-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shine 3s infinite;
}

.news-content {
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.news-label {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.news-text {
    font-size: 0.9rem;
    font-weight: normal;
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

@media screen and (max-width: 640px) {
    .news-bar {
        padding: 10px 0;
    }
    
    .news-content {
        flex-direction: column;
        gap: 8px;
    }
    
    .news-label {
        font-size: 0.7rem;
        padding: 3px 10px;
    }
    
    .news-text {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}