@charset "utf-8";

/*------------------------------------------------------------------------------
---------------------------     1. イベント情報      -----------------------------
---------------------------------------------------------------------------------*/


/*------------------------------------------------
イベント：細部告知欄
【創立記念行事　パラメータ】
------------------------------------------------*/
.event-body {
    display: flex;
    align-items: flex-start;
}

/*---------------------------
イベント：タイトルバナー
---------------------------*/
.ceremony-title {
    width: 100%;
    height: 5em;
    margin: 0 auto 2em;
    background-image: url(02_img/ceremony_title.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 55%;
}

.ceremony-title>div {
    background-color: rgba(0, 0, 255, 0.131);
    height: 100%;
    align-content: center;
}

.ceremony-title h1 {
    text-align: center;
    margin: 0;
    padding: .5em 0;
    font-size: 4vw;
    line-height: 1;
    color: white;
    text-shadow:
        rgba(0, 0, 50, .6) .05em .05em 0,
        rgba(0, 0, 50, .6) -.05em .05em 0,
        rgba(0, 0, 50, .6) .05em -.05em 0,
        rgba(0, 0, 50, .6) -.05em -.05em 0,
        rgba(0, 0, 50, .6) .05em 0 0,
        rgba(0, 0, 50, .6) -.05em 0 0,
        rgba(0, 0, 50, .6) 0 .05em 0,
        rgba(0, 0, 50, .6) 0 -.05em 0;
}

/*---------------------------------------------------
イベント；ポスター設定（左側）
-----------------------------------------------------*/
.poster-box {
    width: 40%;
    text-align: center;
    padding: 1%;
    position: sticky;
    top: 0;
}

.poster-box>a:nth-of-type(1) img {
    width: 100%;
    border: solid .1em rgba(0, 0, 0, 1);
}

.poster-box>img {
    width: 100%;
}

.poster-box>a:nth-of-type(2) img {
    width: 90%;
    border-radius: .5em;
}

/*---------------------------------------------------
イベント：説明箇所（右側）
-----------------------------------------------------*/
.info {
    width: 60%;
    padding: 0 1em 0 2em;
}

/*--------------------------------
イベント：見出し（カラーパラメータ）
---------------------------------*/
/*--　見出し（緑）　--*/
.parade-info>dt:before {
    background: rgba(0, 150, 0, 1);
}

.parade-info>dt {
    border-left: none;
    background-color: rgba(100, 205, 105, .5);
}

.parade-info>dl>dt {
    border-left: solid 1em rgba(0, 200, 100, 1);
    background-color: rgba(150, 200, 155, .5);
}

/*--　見出し（青）　--*/
.event-schedule>dt:before,
.event-list>dt:before,
.bus-schedule>dt:before,
.ceremony-info>dt:before {
    background: rgba(0, 0, 255, 1);
}

.event-schedule>dt,
.event-list>dt,
.bus-schedule>dt,
.ceremony-info>dt {
    background-color: rgba(150, 200, 255, .5);
}

.ceremony-info>dl>dt:nth-of-type(1) {
    border-left: solid 1em rgb(38, 67, 255);
}

/*--　見出し（赤）　--*/
.ev-caution>dt,
.ev-caution-box>dt {
    background-color: rgb(255, 150, 150);
}

.ev-caution>dt:before,
.ev-caution-box dt:before {
    background: rgb(255, 0, 0);
}

/*--　見出しの三角　--*/
.info>dl>dt:before,
.ev-caution-box dt::before {
    content: "▶";
    color: white;
    padding: .5em;
    margin-right: .5em;
}

/*------------------------------
イベント：市中パレード
-------------------------------*/
.parade-img {
    width: 40%;
    margin: .5em 5em;
}

.parade-parking-info {
    color: red;
    font-weight: bold;
}

.parade-info dl dd {
    text-indent: 1em;
}

/*-- 市中マップ --*/
.ev-map a {
    text-align: center;
}

.ev-map img {
    width: 95%;
    margin: .5em 0;
}

.ev-map p {
    padding: 0;
    margin: 0 auto;
    font-size: 1.5vw;
    font-weight: bold;
}

.ev-map p:before {
    content: "↑ "
}

/*------------------------
イベント：見出し
----------------------------*/
/*--　大見出し　--*/
.info>dl dt {
    padding: 0;
    font-size: 2vw;
    height: 2em;
    align-content: center;
    font-weight: bold;
    margin-bottom: .5em;
}

/*-------------------------
イベント：見出し内記事
-------------------------*/
.info>dl {
    margin: 0 0 2em;
    background-color: rgba(255, 255, 255, .9);
    padding-bottom: 1em;
}

.info>dl>dl {
    padding: .5em .5em 0 1em;
}

.info>dl>dl>dt {
    text-indent: 1em;
    margin-bottom: .1em;
}

.info dd {
    font-size: 1.5vw;
    padding-right: 1em;
    margin-left: 1.5em;
}

.event-list>dd,
.bus-schedule>dd {
    text-indent: 1em;
}

.event-list>dd.andmore {
    font-size: 1.3vw;
    text-indent: 2em;
}

.event-list-caution {
    color: red;
    font-weight: bold;
}

/*--------------------------
当日スケジュール
--------------------------*/
.anv-schedule {
    margin: 1em;
    padding: .5em 1em;
    background-color: white;
    border-radius: .5em;
    box-shadow: 0 0 .2em rgba(50, 50, 150, .5);
}

.anv-schedule>dl>dt::before {
    content: "■";
    margin-right: .5em;
}

.anv-schedule>dl {
    margin: .5em 0 1em;
}

.anv-schedule>dl>dt {
    font-size: 1.4vw;
    font-weight: bold;
    border-bottom: .2em solid rgb(50, 50, 150);
    margin-bottom: .5em;
}

.anv-schedule dd {
    font-size: 1.3vw;
    line-height: 1.8;
}

.anv-schedule>dl>dd {
    display: flex;
}

.anv-schedule-ev ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.anv-schedule-atr ul {
    list-style: square;
    margin-left: 6em;
    padding: 0;
    line-height: 1.4;
}

.anv-schedule-time span:nth-of-type(1) {
    width: 60%;
    word-break: keep-all;
    margin-left: .5em;
}

.anv-schedule-time dd {
    align-items: center;
    line-height: 1.3;
    margin: 1em 2em 1em;
}

.anv-schedule-time dd:nth-of-type(1) {
    padding-bottom: .5em;
    border-bottom: .1em solid rgb(100, 100, 150);
}

.anv-schedule img {
    width: 90%;
    margin: 1em 5%;
}

/*-------------------------
イベント：シャトルバス
-------------------------*/
/*---　臨時駐車場　---*/

.bus-schedule>dl p {
    margin: 0;
    font-weight: bold;
    font-size: 1.5vw;
}

.bus-parking ul {
    list-style: circle;
    margin: .5em;
    padding: .5em;
    border-style: dashed;
    font-size: 1.4vw;
}

.bus-parking li {
    margin-left: 2em;
}

/*--　シャトルバス運行経路　--*/
.bus-line {
    margin-left: 1em;
    margin-bottom: .5em;
    padding: .5em;
    background-color: white;
    border-radius: .5em;
}

.bus-line>p {
    font-size: 1.5vw;
    font-weight: bold;
    margin: 0;
}

.bus-line>div {
    display: flex;
    align-items: center;
}

.bus-line>div>ul {
    margin: .5em 0 .5em 1em;
    font-size: 1.4vw;
    width: 13em;
    list-style: square;
}

.bus-line>div>div {
    width: .5em;
    height: 2em;
    border-top: .05em solid;
    border-right: .05em solid;
    border-bottom: .05em solid;
    margin-right: .5em;
}

.bus-line>div>p:nth-of-type(1) {
    margin: 0 .5em 0 .5em;
}

.bus-line>div>p:nth-of-type(2) {
    font-size: 1.5vw;
}

.bus-line>div:nth-of-type(1)>p:nth-of-type(2) {
    text-indent: -.5em;
    margin-left: .5em;
}

.bus-schedule img {
    width: 80%;
    margin: 0 0 0 2em;
}

/*---　注意事項　---*/
.bus-schedule>dd:nth-of-type(2) {
    color: red;
    font-weight: bold;
}

/*---------------------------------------
　　　　　イベント：注意事項
-----------------------------------------*/
.ev-caution-box {
    margin: 0 1em;
    background-color: rgba(255, 255, 255, .9);
    padding-bottom: .5em;
    border-radius: .2em;
}

.ev-caution {
    margin: 0;
}

.ev-caution dt {
    padding: .25em 0 .25em 0;
    margin: 0 0 .5em;
    font-size: 2vw;
    font-weight: bold;
}

.ev-caution dd:before {
    content: "※ "
}

.ev-caution dd {
    font-size: 1.4vw;
    margin-bottom: .5em;
    text-indent: -1em;
    padding-right: 1em;
}

/*--　禁止事項　--*/
.ev-caution-img {
    display: flex;
    margin-bottom: 0;
}

.ev-caution-img a {
    text-align: center;
}

.ev-caution-img img {
    width: 90%;
}

.ev-caution-box>p:nth-of-type(1) {
    font-size: 1.7vw;
    font-weight: bold;
    margin: 0 auto .5em;
    padding: 0;
    text-align: center;
}

/*-- 連絡先 --*/
.contact-switch {
    margin: 0;
    font-weight: bold;
    font-size: 1.7vw;
    padding: .5em;
    border-radius: .5em;
}



/*--------------------------------------------------------------------------------

　          最大サイズ到達時に適用

----------------------------------------------------------------------------------*/

@media screen and (min-device-width: 1040px) {


    .event-container {
        width: 1000px;
    }

    .event-site {
        font-size: 20px;
    }

    .ceremony-title h1,
    .summer-title h1 {
        font-size: 40px;
    }



    .ev-caution dt,
    .info>dl>dl>dt,
    .info>dl>dt:nth-of-type(1) {
        font-size: 20px;
    }

    .ev-caution-box>p {
        font-size: 17px;
    }

    .event-list-2>dt {
        font-size: 16px;
    }

    .event-list-2 dl>dt,
    .sum-schedule dt,
    .ev-map p,
    .bus-line>div>p,
    .bus-line>p,
    .bus-schedule>dl p,
    .bus-line>div>p:nth-of-type(2),
    .info dd {
        font-size: 15px;
    }

    .bus-line>div>ul,
    .event-list-2 dl>dd,
    .event-list-2>dd,
    .ev-caution dd,
    .anv-schedule>dl>dt,
    .bus-schedule>dl ul {
        font-size: 14px;
    }

    .event-list>dd.andmore,
    .sum-schedule dd,
    dd.children {
        font-size: 13px;
    }
}

/*--------------------------------------------------------------------------------

　          最大サイズ到達時に適用

----------------------------------------------------------------------------------*/

@media screen and (min-device-width: 1921px) {

    /*------------------------------------------------

    イベント：細部告知欄
    【創立記念行事　パラメータ】
    
    ------------------------------------------------*/
    .event-container {
        width: 1280px;
    }


    .ceremony-title h1,
    .summer-title h1 {
        font-size: 51.2px;
    }

    .event-site,
    .info>dl>dt:nth-of-type(1),
    .info>dl>dl>dt,
    .ev-caution dt {
        font-size: 25.6px;
    }

    .ev-caution-box>p {
        font-size: 21.76px;
    }

    .event-list-2 dt {
        font-size: 20.48px;
    }

    .event-list-2 dl>dt,
    .sum-schedule dt,
    .ev-map p,
    .bus-line>div>p,
    .bus-line>p,
    .bus-schedule>dl p,
    .bus-line>div>p:nth-of-type(2),
    .info dd {
        font-size: 19.2px;
    }

    .event-list-2>dd,
    .event-list-2 dl>dd,
    .bus-schedule>dl ul,
    .bus-line>div>ul,
    .anv-schedule>dl>dt,
    .ev-caution dd {
        font-size: 17.92px;
    }

    .sum-schedule dd,
    .event-list>dd.andmore,
    dd.children {
        font-size: 16.64px;
    }

}