﻿/*-----------------------------------------------------------*/
/* Reset                                                     */
/*-----------------------------------------------------------*/
html,
body,
div,
span,
h1,
h2,
h3 p,
blockquote,
pre,
a,
address,
big,
code,
em,
font,
img,
small,
strong,
ol,
ul,
li,
form,
label,
table,
article,
aside,
footer,
header,
menu,
nav,
section,
summary {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    background: transparent;
}

ul,
ol {
    list-style: none;
}

img {
    border: none;
}

h1,
h2,
h3 {
    font-weight: bold;
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}


/*-----------------------------------------------------------*/
/* Layout                                                    */
/*-----------------------------------------------------------*/
#page {
    width: 800px;
    margin: 0 auto;
}

#page_w {
    width: 980px;
    margin: 0 auto;
}

@media screen and (max-width: 780px) {
    #page,
    #page_w {
        width: 100%;
    }
}

#header {
    text-align: center;
}

#content {
    width: 780px;
    margin: 0 10px;
    float: left;
}

#content_w {
    width: 960px;
    margin: 0 10px;
    float: left;
}

@media screen and (max-width: 780px) {
    #content,
    #content_w {
        width: 96%;
    }
}

#main {
    width: 520px;
    float: left;
}

#sidebar {
    width: 240px;
    float: right;
}

.side_left {
    margin: 4px;
    float: left;
}

.side_center {
    margin: 0 auto;
}

.side_right {
    margin: 4px;
    float: right;
}

.container_center {
    text-align: center;
}

.title_logo {
    font-weight: bold;
    font-size: 120%;
}

.logo_main {
    width: 542px;
    margin: 0 auto;
}
@media screen and (max-width: 600px) {
    .logo_main {
        width: 100%;
    }
}

.logo_panel_side {
    width: 120px;
    text-align: center;
    float: left;
}
@media screen and (max-width: 600px) {
    .logo_panel_side {
        display: none;
    }
}

.logo_panel_center {
    width: 300px;
    text-align: center;
    float: left;
}
@media screen and (max-width: 600px) {
    .logo_panel_center {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .logo_panel_center p {
        margin: 0;
    }
}

.block_right {
    margin-left: auto;
    margin-right: 0px;
}

/*-----------------------------------------------------------*/
/* Menu Bar                                                  */
/*-----------------------------------------------------------*/
.menu_bar {
    margin: 4px 10px;
}

#menu ul {
    list-style: none;
    margin: 0 auto;
}

#menu li {
    float: left;
    margin: 2px 4px;
    position: relative;
    background-color: #ddddaa;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    width: 88px;
}

#menu a {
    color: #000000 !important;
    font-weight: normal;
}

#menu a.cur_bar {
    background-color: #ffffcc !important;
    color: #000000 !important;
    font-weight: bold;
}

#menu a,
#menu a.cur_bar {
    display: block;
    padding: 1px 0;
    width: 100%;
    border-width: 1px 2px 1px 1px;
    border-color: #999966;
    border-style: solid;
}

body {
    background-color: #cccc99;
    color: #000000;
}

p,
dl {
    line-height: 150%;
}

.normal_left {
    padding-left: 1em;
    text-align: left;
}

pre,
tt {
    line-height: 100%;
}

img.space {
    margin: 8px;
}

img.space_right {
    float: right;
    margin: 8px;
}
@media screen and (max-width: 780px) {
    img.space_right {
        float: none;
    }
}

hr {
    margin-bottom: 8px;
    height: 1px;
    border: none;
    border-top: 1px #999966 solid;
}

hr.short {
    width: 680px;
}
@media screen and (max-width: 780px) {
    hr.short {
        width: 90%;
    }
}

a {
    text-decoration: none;
}

a:link {
    color: #336600;
}

a:visited {
    color: ##333366;
}

a:hover {
    background-color: #ffaaaa;
}

a.navi_bar {
    text-decoration: none;
    background-color: #ddddaa;
    padding: 0px 4px;
    border-style: solid;
    border-width: 1px 3px 1px 1px;
    border-color: #999966;
}

a.normal_r {
    color: #336600;
    text-decoration: underline;
    margin-right: 20px;
}

a.normal_r:hover {
    background-color: #ffaaaa;
}

#link_list a {
    display: block;
    padding: 1px 0;
    width: 100%;
    text-decoration: none;
}

/* ページタイトル */
.page_title {
    margin-top: 8px;
    margin-bottom: 8px;
    border-style: solid none;
    border-top-width: 2px;
    border-bottom-width: 4px;
    border-top-color: #ffffcc;
    border-bottom-color: #666633;
    background-color: #ccccaa;
    padding: 6px;
    font-size: large;
    letter-spacing: 0.4em;
    text-align: center;
}

/*  スケジュール */
.sch_frame {
    padding: 8px;
    border-style: solid;
    border-width: 1px 3px 4px 1px;
    border-color: #cccc99 #999966 #999966 #cccc99;
    background-color: #ffffcc;
    box-shadow: 6px 6px 20px 0px #666666;
}

.sch_info {
    text-align: center;
    line-height: 125%;
    margin-bottom: 8px;
}

.sch_caption {
    text-align: center;
    font-weight: bold;
    font-size: larger;
    margin-top: 8px;
    margin-bottom: 4px;
}

.sch_header {
    text-align: left;
    line-height: 125%;
    margin-bottom: 8px;
}

.sch_contents {
    text-align: left;
    padding-left: 1em;
    line-height: 125%;
    margin-bottom: 8px;
}

.sch_dm {
    width: 270px;
    float: left;
}

.sch_dm_w {
    width: 400px;
    float: left;
}

.sch_side {
    width: 470px;
    float: left;
    margin-left: 8px;
    text-align: left;
    vertical-align: top;
    line-height: 125%;
}
@media screen and (max-width: 600px) {
    .sch_side {
        width: 270px;
    }
}

.sch_side_n {
    width: 340px;
    float: left;
    margin-left: 8px;
    text-align: left;
    vertical-align: top;
    line-height: 125%;
}

/*  案内 */
.inf_frame {
    width: 100%;
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px 3px 4px 1px;
    border-color: #cccc99 #999966 #999966 #cccc99;
    background-color: #ffffcc;
}

.img_frame {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
    border-style: solid;
    border-width: 1px 3px 4px 1px;
    border-color: #cccc99 #999966 #999966 #cccc99;
    background-color: #ffffcc;
}

.img_frame td {
    border-collapse: separate;
    border-spacing: 8px;
    border: 1px solid #ffffcc;
    text-align: center;
}

@media screen and (max-width: 780px) {
    .img_frame img,
    .img_frame td p img {
        width: 90%;
    }
}

/* イベント */
.event_frame {
    margin-left: 3em;
    padding: 0.5em;
    border-style: solid;
    border-width: 1px;
    border-color: #ccccaa;
    background-color: #f8f8c8;
    line-height: 125%;
}

.event_frame_s {
    margin-left: 2em;
    padding: 0.5em;
    border-style: solid;
    border-width: 1px;
    border-color: #ccccaa;
    background-color: #f8f8c8;
    font-size: smaller;
    line-height: 125%;
}
@media screen and (max-width: 780px) {
    .event_frame_s {
        max-width: 300px;
    }
}

.note_frame_s {
    margin-left: 1em;
    margin-right: 2em;
    padding: 0.5em;
    border-style: solid;
    border-width: 1px;
    border-color: #ccccaa;
    background-color: #f8f8c8;
    font-size: smaller;
}

.note_frame_s_r {
    margin-left: 2em;
    padding: 0.5em;
    border-style: solid;
    border-width: 1px;
    border-color: #ccccaa;
    background-color: #ffcccc;
    font-size: smaller;
}


.exh_frame {
    border-style: solid;
    border-width: 1px 3px 4px 1px;
    border-color: #cccc99 #999966 #999966 #cccc99;
    background-color: #333333;
}

.post_frame {
    border-style: solid;
    border-width: 1px;
    border-color: #ccccaa;
}

/* セル */
.head_right {
    padding-top: 4px;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
    border-style: none none solid;
    border-width: 1px;
    border-color: #666699;
    background-color: #ddddcc;
    padding-right: 0.6em;
}
@media screen and (max-width: 780px) {
    .head_right {
        white-space: normal;
    }
}

.cell_list {
    padding-top: 4px;
    border-style: none none solid;
    border-bottom-width: 1px;
    border-color: #666699;
    background-color: #eeeeaa;
}

.cell_box {
    border-style: ridge;
    border-width: 4px 2px;
    border-color: #cccc99;
    background-color: #eeeebb;
}

.cell_box_2 {
    border-style: ridge;
    border-width: 2px 4px;
    border-color: #cccc99;
    background-color: #eeeecc;
}

.cell_box_3 {
    border-style: solid;
    border-width: 2px 2px;
    border-color: #cc9999;
    background-color: #eeeeee;
}

.cell_cap {
    padding: 6px;
    background-color: #ccccaa;
    font-weight: bold;
    text-align: left;
}

#shop img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 8px;
}
@media screen and (max-width: 780px) {
    #shop img {
        max-width: 80%;
    }
}

.shop_intro {
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 12px 16px;
}

.shop_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.shop_card {
    box-sizing: border-box;
    padding: 10px;
    border-style: solid;
    border-width: 1px 3px 4px 1px;
    border-color: #cccc99 #999966 #999966 #cccc99;
    background-color: #ffffcc;
}

@media screen and (max-width: 780px) {
    .shop_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 520px) {
    .shop_grid {
        grid-template-columns: 1fr;
    }
}

/* ------- テキスト ------- */
.wide_spc {
    letter-spacing: 0.5em;
    line-height: 125%;
}

.wide_spc_2 {
    letter-spacing: 0.2em;
    line-height: 125%;
}

.small_wide {
    font-size: 80%;
    line-height: 150%;
}

.xsmall_wide {
    font-size: 70%;
    line-height: 150%;
}

.narrow_line {
    line-height: 120%;
}

.normal_right {
    text-align: right;
}

.small_right {
    text-align: right;
    font-size: 80%;
}

.small_indent1 {
    padding-left: 1em;
    font-size: 80%;
}

.big {
    font-size: larger;
}

.big_b {
    font-size: larger;
    font-weight: bold;
}

.indent1 {
    margin-bottom: 0.5em;
    padding-left: 1em;
}

.indent2 {
    margin-bottom: 0.5em;
    padding-left: 2em;
}

.indent100 {
    margin-bottom: 0.5em;
    padding-left: 100px
}

.color_m {
    color: #cc0099;
}

.color_m_b {
    color: #cc0099;
    font-weight: bold;
}

.color_r {
    color: #cc0000;
}

.color_r_s {
    color: #cc0000;
    font-size: smaller;
}
