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

/*----------------------------------------------------
 リセット
------------------------------------------------------*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a,
address, em, img, small, strong,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, form, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: bottom;
  box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
footer, header, nav {
  display: block;
}
body {
  line-height: 1.5;
  background-color: #eee;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  -webkit-text-size-adjust: 100%; /* iPhoneでの文字サイズ自動変換抑止 */
}
img {
  max-width: 100%;
  height: auto;
}
strong {
  font-size: 1.1em;
  color: #444;
  font-weight: bold;
}
.wrap {
    background-color: #fff;
}
a[target="_blank"] {
  display: inline-flex;
  align-items: center;
  gap: .2em;
  margin-right: .3em;
}
a[target="_blank"] img {
  width: 1em;
  height: 1em;
}
/*----------------------------------------------------
 header
------------------------------------------------------*/
h1.news {
  font-size: 1.5em;
  margin-bottom: .8em;
}

.mv {
    background-color: #666;
    width: 100%;
    aspect-ratio: 55 / 19;
    padding: 2px;
    margin-bottom: 1.5em;
    animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

nav {
    margin: 0 .5em 1em;
}

nav a {
    color: #000;
    text-decoration: none;
}

.glo_nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5em;
    margin-bottom: 1em;
}

.glo_nav li {
    border-bottom: 1px solid;
    min-height: 2em;
}

.glo_nav li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.sub_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1em;
    font-size: .8em;
}

/*----------------------------------------------------
 main
------------------------------------------------------*/
.main {
    margin: 0 1em;
}

h2 {
    font-size: 1.25em;
    font-weight: bold;
    border-left: 5px solid #666;
    padding-left: 15px;
    margin-bottom: 1em;
}

h3 {
    display: inline-block;
    font-size: 1.125em;
    font-weight: bold;
    border-bottom: 1px solid #666;
    padding-bottom: .2em;
    margin-bottom: 1em;
}

h3::after {
    content: "";
    display: block;
    height: 0;
    width: 100%;
}

h4 {
    font-size: 1em;
    font-weight: bold;
    position: relative;
    margin-bottom: 1em;
}

h4::before {
    content: "";
    width: 3em;
    height: 1px;
    border-bottom: 1px solid #666;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
}

p {
    margin-bottom: 1.2em;
}

.disc {
    list-style-type: disc;
    margin-left: 1.2em;
    margin-bottom: 1.2em;
}

.disc::marker {
    color: #666;
}

/*----------------------------------------------------
 news
------------------------------------------------------*/
#news {
    border: 1px solid #666;
    border-radius: 15px;
    padding: 1.5em 1em;
    margin-bottom: 2em;
}

#news h2 {
    border-left: none;
    padding-left: 0;
    border-bottom: 2px solid #666;
    padding-bottom: .2em;
}

.news_dl dt{
    font-weight: bold;
}

.news_dl dd {
    padding-left: 1em;
    border-bottom: 1px solid #ccc;
}

.news_dl dd:not(:last-child) {
    margin-bottom: .5em;
}

.to_news {
    display: block;
    width: 7.5em;
    margin-left: auto;
    text-align: center;
}

/*----------------------------------------------------
 summary
------------------------------------------------------*/
.summary_dl {
    display: grid;
    grid-template-columns: 4em calc(100% - 5em);
    gap: 1em .5em;
    margin-bottom: 1.2em;
}

.summary_dl dt {
    font-weight: bold;
}

.summary_dl .column_2 {
    grid-column: 1 / 3;
}

.summary_dl .column_2 + dd {
    grid-column: 2 / 3;
    margin-top: -.5em;
}

.summary_dl span {
    font-size: .9em;
    display: flex;
    flex-wrap: wrap;
    gap: 0 .5em;
}

.summary_dl span > span {
  font-size: 100%;
  display: block;
}

.summary_dl span > span:not(:first-child)::before {
  content: "／";
  padding-right: .5em;
}

.back {
  display: flex;
}

.back::before {
  content: "<";
}

/*----------------------------------------------------
 footer
------------------------------------------------------*/
footer {
    background-color: #bbb;
    padding: 1.5em 1em;
    position: relative;
    margin-top: 3em;
}

footer h2 {
    border-left: none;
    padding-left: 0;
    border-bottom: 1px solid #fff;
}

footer a {
    color: #000;
}

.org_ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 1.2em;
    margin-bottom: 1.2em;
}

.org_ul li {
    position: relative;
}

.org_ul li:not(:first-child)::before {
    content: "/";
    position: absolute;
    left: -.7em;
}

/*----------------------------------------------------
 ページトップ
------------------------------------------------------*/
.page_top {
    width: 4.5em;
    height: 4.5em;
    display: flex;
    border: 2px solid #666;
    border-radius: 50%;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    padding: .5em;
    font-size: .8em;
    background-color: #fff;
    position: absolute;
    right: .5em;
    top: -2.25em;
}

/*----------------------------------------------------
 js_on
------------------------------------------------------*/
.js_on {
    padding-top: 3.22em;
}

.menu {
    background-color: #666;
    display: flex;
    justify-content: flex-end;
    padding: .5em;
    position: fixed;
    width: 100%;
    max-width: 780px;
    top: 0;
    left: 0;
    z-index: 1;
}

.menu a {
    color: #fff;
    border: 1px solid;
    border-radius: 5px;
    text-decoration: none;
    padding: .3em;
    display: inline-block;
    width: 5.5em;
    text-align: center;
}

.nav_off {
    display: none;
}

.nav_on {
    position: fixed;
    background: #ddd;
    width: 100%;
    top: 3.2em;
    left: 0;
    margin: 0;
    padding: 1em;
    z-index: 1;
}

/*----------------------------------------------------
 venue
------------------------------------------------------*/
.anchor {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1.5em;
}

.anchor a {
    display: flex;
    gap: .3em;
    width: 100%;
    background-color: #666;
    color: #fff;
    justify-content: center;
    align-items: center;
    padding: .3em 0;
    text-decoration: none;
}

.anchor a::before {
    content: "▼";
    display: block;
    font-size: 80%;
}

.map_wrap {
    margin: 0 auto 2em;
    aspect-ratio: 1 / 1;
    width: calc(100% - 3em);
}

.map_wrap iframe {
    width: 100%;
    height: 100%;
}

.back + h2 {
    margin-top: 2em;
}

.go_route {
  display: flex;
}

.go_route::after {
  content: ">";
}

.ruote_list li {
    text-align: center;
}

.ruote_list img {
  max-height: 70vh;
}

.ruote_list li:last-child img {
    max-width: 80%;
}

@media screen and (min-width:600px) {
    .news_dl {
        display: grid;
        grid-template-columns: 8.5em calc(100% - 8.5em);
        gap: 1em 0;
    }

    .news_dl dd {
        border-bottom: none;
        position: relative;
    }

    .news_dl dd::after {
        content: "";
        width: calc(100% + 8.5em);
        height: 1px;
        border-bottom: 1px solid #ccc;
        display: block;
        position: absolute;
        left: -8.5em;
    }

    .news_dl dd:not(:last-child) {
        margin-bottom: 0;
    }

    .news_dl dd + dd {
        grid-column: 2 / 3  ;
    }

    .map_wrap {
        aspect-ratio: 5 / 4;
    }

    .anchor {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media screen and (min-width:780px) {
    .summary_dl {
        grid-template-columns: 10em calc(100% - 11em);
    }
    .summary_dl .column_2 {
        grid-column: 1 / 2;
    }
    .summary_dl .column_2 + dd {
        margin-top: 0;
    }

    .wrap {
        width: 780px;
        margin: 0 auto;
    }
    .menu,
    .nav_on {
        width: 780px;
        left: calc(50% - 390px);
    }

    .map_wrap {
        width: 80%;
        margin: 0 auto 2em;
        aspect-ratio: 5 / 3;
    }
}