@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700");

main #download h3,
main #download h3 + p,
main #download h4 {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap
}

section h3 {
    color: #026FB8;
    font-weight: bold
}

section h3 + * {
    margin-top: 16px
}

section + section {
    padding: 48px 0
}

/*---------------------------
メインビジュアル/キャッチ
-----------------------------*/
main #top {
    position: relative;
    overflow: hidden;
    padding: 0 0 0 0 !important
}
main #top .mainvisual img {
    display: block;
    width: 100%;
    height: auto;
}
main #top h2 img {width:100%;}
main #top h2 {
    margin: 0 auto 0;
    padding: 32px 0;
    width:100%;
    max-width:1020px;
}
main #top .txt-box {text-align:center;}
main #top .txt-box em {color: #026FB8}
main #top .txt-box p + p {padding-top: 1em}
@media only screen and (min-width: 1000px) {
    main #top {margin-bottom: 20px}
}
@media only screen and (max-width: 999px) {
    main #top {margin-bottom: 32px}
    main #top h2 {padding: 32px 0 16px}
}
@media only screen and (max-width: 540px) {
    main #top {margin-bottom: 16px}
    main #top h2 {max-width:400px;}
    main #top .txt-box {text-align:left;}
}

/*---------------------------
世界に広がるブルーサンタ
-----------------------------*/
#worlds {
    background:#ffe200;
    border-radius:20px;
    padding:25px !important;
}
#worlds img {width:100%; height:auto; display:block;}
#worlds h3 {
    background:#fff;
    padding:25px 20px;
}
#worlds h3 span {
    width:100%;
    max-width:699px;
    margin:0 auto;
    display:block;
}
#worlds h3+p {
    width:100%;
    max-width:905px;
    margin:30px auto 25px;
    display:block;
}
#worlds .w-box h4,
#worlds p.lrline {
    display:flex; justify-content:center; align-items:center;
    border-radius:24px; margin:0 auto 30px;
    font-size:27px; color:#0b308e; font-weight:700;
}
#worlds .w-box .lrline,
#worlds p.lrline  {
    display: flex;
    align-items: center;
    &:before,
    &:after {
        border-top: 3px solid #003e8d;
        content: "";
        flex-grow: 1;
    }
    &:before {
        margin-right: 30px;
    }
    &:after {
        margin-left: 30px;
    }
}
#worlds p.lrline {
    margin:0 auto 10px;
    width:100%;
}
#worlds .w-box ul {display:flex; flex-wrap:wrap; justify-content:space-between;}
#worlds .w-box {margin-bottom:40px;}
#worlds .w-box ul li {width:32.2%; margin-bottom:10px; text-align:center;}
#worlds .w-box ul li p {color:#0b308e; font-size:.92em; line-height:1.3; margin-top:5px;}

@media only screen and (max-width:540px) {
    #worlds {padding:15px !important;}
    #worlds h3 {padding:15px 20px;}
    #worlds .w-box h4 {font-size:18px; width:134px; height:38px; border-radius:19px; margin:0 auto 20px;}
    #worlds .w-box {margin-bottom:20px;}
    #worlds .w-box ul li {width:49%;}
    #worlds .w-box ul li {width:32%; margin-bottom:2vw;}
    #worlds .w-box ul li.onlysp {display:block;}
    #worlds p.lrline {
        font-size: 18px;
        width: 134px;
        border-radius: 19px;
    }
    #worlds p.lrline::before {margin-right: 20px !important;}
    #worlds p.lrline::after {margin-left: 20px !important;}
}

/*---------------------------
メインビジュアル/キャッチ
-----------------------------*/
main .main-section {
    border-radius: 16px;
    margin: 24px 0;
    padding: 2.5% !important;
    position: relative
}
main .main-section h3 {
    background-color: #fff;
    border-radius: 8px
}
main .main-section .flxc {
    justify-content: space-between
}
main .main-section .flxc h3 {
    width: 15%
}
main .main-section .flxc h3 + * {
    width: 83%
}
main .main-section .flxc h3 + p {
    display: flex;
    flex-direction: column;
    align-content: center;
    margin-top: 0;
    width: 83%
}
main .main-section .flxc h3 + p.strong {
    background-color: #fff;
    border-radius: 8px
}
main .main-section .flxc img {
    vertical-align: bottom
}
@media only screen and (max-width: 767px) {
    main .main-section .flxc {
        flex-direction: column
    }
    main .main-section .flxc h3 {
        width: 100% !important
    }
    main .main-section .flxc h3 + * {
        width: 100% !important
    }
}

.movieholder {
    max-width:660px;
    margin:40px auto 0;
}
.movieholder .wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.movieholder .wrap iframe {
  width: 100%;
  height: 100%;
}


/*---------------------------
イベント主催・参加
-----------------------------*/
main #entry-volunteer img {display:block; width:100%; height:auto;}
main #entry-volunteer {
    display:flex;
    justify-content:space-between;
}
@media only screen and (max-width:999px) {
    main #entry-volunteer {flex-direction:column;}
}
/*------------------------イベントを主催------------------------*/
main #entry {
    width:60.5%;
    background:#ffe200;
}
main #entry .entry_ttls {
    display:flex;
    justify-content:space-between;
}
main #entry .entry_ttls h3 {
    width:26%;
    background-color:transparent;
}
main #entry .entry_ttls p {
    width:72%;
    margin-top:0;
}
main #entry .entry_ttls+p {
    font-size:17px;
    line-height:1.5;
    letter-spacing: 0;
    color:#0b308e;
    text-align:center;
    margin:25px 0 10px;
}
main #entry .attention {
    font-size:12px;
    letter-spacing:0;
    line-height:1.3;
    color:#e60012;
    text-align:center;
}
main #entry .entry_days {
    width:100%;
    max-width:547px;
    margin:20px auto 30px;
}
main #entry .presents {
    position:relative;
}
main #entry .presents a.a-txt {
    font-size:12px;
    letter-spacing:0;
    line-height:1.3;
    color:#0b308e;
    position:absolute;
    bottom:10px;
    left:5px;
    text-decoration: underline;
}
main #entry .presents a.a-transpalentblock {
    position:absolute;
    bottom:38px;
    left:-1px;
    width:150px;
    height:125px;
    display:block;
    background:rgba(0,0,0,0);

}
main #entry .btn {
    background:#0b308e;
    max-width:400px;
    height:70px;
    border-radius:35px;
    margin:13px auto 0;
}
main #entry .btn:hover {background:#ff0100;}
main #entry .btn a {
    display:flex; justify-content:center; align-items:center;
    width:100%; height:100%;
}
main #entry .btn a span {
    max-width:265px;
}
@media only screen and (max-width:1250px) {
    main #entry .presents a.a-transpalentblock {
        bottom:38px;
        left:-1px;
        width:11.5vw;
        height:9.5vw;
    }
}
@media only screen and (max-width:999px) {
    main #entry {width:100%;}
    main #entry .presents a.a-transpalentblock {
        bottom:46px;
        left:-1px;
        width:19.5vw;
        height:17vw;
    }
}
@media only screen and (max-width:620px) {
    main #entry .presents a.a-txt {position:static; padding-left:10px;}
}
@media only screen and (max-width:540px) {
    main #entry {margin:5px 0 0 !important;}
    main #entry .entry_ttls+p {font-size:15px; text-align:left;}
    main #entry .attention {text-align:left;}
    main #entry .entry_ttls+p br {display:none;}
    main #entry .btn {max-width:300px; height:50px; border-radius:25px; margin:10px auto;}
    main #entry .btn a span {max-width:220px;}
}
/*------------------------イベントに参加------------------------*/
main #volunteer {
    width:36.5%;
    background:#18a03c;
}
main #volunteer h3 span {
    width:100%;
    max-width:434px;
    margin:0 auto;
}
main #volunteer .volunteer_catch {
    width:100%;
    max-width:300px;
    margin:50px auto 30px;
}
main #volunteer .volunteer_catch+p {
    font-size:17px;
    line-height:1.5;
    color:#fff;
    text-align:center;
}
main #volunteer .volunteer_map {
    width:100%;
    max-width:290px;
    margin:37px auto;
}
main #volunteer .btn {
    background:#0b308e;
    max-width:400px;
    height:70px;
    border-radius:35px;
    margin:10px auto 0;
}
main #volunteer .btn:hover {
    background:#ff0100;
}
main #volunteer .btn a {
    display:flex; justify-content:center; align-items:center;
    width:100%; height:100%;
}
main #volunteer .btn a span {
    max-width:280px;
}
@media only screen and (max-width:999px) {
    main #volunteer {width:100%;}
}
@media only screen and (max-width:540px) {
    main #volunteer {margin-bottom: 0 !important;}
    main #volunteer h3 {max-width:100%; background:#fff;}
    main #volunteer h3 span {max-width:70%; margin:0 auto; display:block;}
    main #volunteer .volunteer_catch {max-width:200px; margin:30px auto 30px;}
    main #volunteer .volunteer_catch+p {font-size:15px; text-align:left;}
    main #volunteer .volunteer_catch+p br {display:none;}
    main #volunteer .volunteer_map {max-width:400px; margin:20px auto;}
    main #volunteer .btn {max-width:300px; height:50px; border-radius:25px; margin-bottom:10px;}
    main #volunteer .btn a span {max-width:250px;}
}

/*------------------------ここまで------------------------*/


/*---------------------------
ダウンロード
-----------------------------*/
main #download {
    background: #0092ce
}
main #download h3,
main #download h3 + p,
main #download h4 {
    min-height: 16px;
    font-size: 16px;
    line-height: 1;
    vertical-align: bottom
}
main #download h3 {
    padding-top: calc(20% - 16px);
    background: #fff url(../img/25/dl_h3.webp) center center no-repeat;
    background-size: contain
}
main #download h3 + p {
    width: 83% !important;
    padding-top: calc(20% - 16px);
    background: url(../img/25/dl_txt.webp) 0 center no-repeat;
    background-size: 90%
}
main #download a.btn {
    background-color: #004098;
    text-align: center;
    line-height: 48px
}
main #download a.btn img {
    vertical-align: middle
}
main #download a.btn:hover {
    background-color: #E61B24 !important
}
main #download .flyer {
    padding-top: 4%;
    width: 43%;
    justify-content: flex-start
}
main #download .flyer h4 {
    width: 35%;
    margin-right: 1em;
    background: url(../img/25/dl_h4_flyer.webp) 0 top no-repeat;
    background-size: contain
}
main #download .flyer h4 + * {
    width: 60%
}
main #download .flyer .btn-box {
    padding-top: 1em
}
main #download .music {
    padding-top: 4%;
    width: 51%;
    justify-content: flex-start
}
main #download .music li + li {
    padding-top: 1em
}
main #download .music h4 {
    width: 30%;
    margin-right: 1em;
    background: url(../img/25/dl_h4_music.webp) 0 top no-repeat;
    background-size: contain
}
main #download .music h4 + * {
    width: 65%
}
main #download .music p {
    color: #fff;
    font-size: 13px;
    text-align: right
}
main #download .music audio#music-player {
    width: 100%;
    margin: 8px
}
main #download .music .btn {
    margin: 0 0 0 auto
}
@media only screen and (max-width: 767px) {
    main #download h3 {
        padding-top: calc(16.3% - 16px);
        background-image: url(../img/25/dl_h3@sp.webp)
    }
    main #download h3 + p {
        width: 96% !important;
        margin: 5% 2%;
        padding-top: calc(59.8% - 16px);
        background-image: url(../img/25/dl_txt@sp.webp);
        background-size: contain
    }
    main #download .btn {
        margin: 0 0 0 auto
    }
    main #download .flyer,
    main #download .music {
        width: 96%;
        margin: 5% auto 0;
        flex-direction: row
    }
    main #download .flyer h4 {
        width: 30%
    }
    main #download .flyer h4 + * {
        width: 65%
    }
    main #download .music {
        padding-bottom: 5%
    }
    main #download .music li + li {
        padding-top: 1em
    }
    main #download .music h4 {
        width: 30%
    }
    main #download .music h4 + * {
        width: 65%
    }
}

@media only screen and (max-width: 374px) {
    main #download .flyer,
    main #download .music {
        flex-direction: column
    }
    main #download .flyer h4,
    main #download .music h4 {
        width: 40%;
        padding-top: 38%
    }
    main #download .flyer h4 + *,
    main #download .music h4 + * {
        width: 100%
    }
}

main #link .umipro p {
    padding: 8px 0 8px;
    font-size: .92em;
    line-height: 1.8
}
main #link .umipro dl.flxc {
    align-content: center;
    align-items: center
}
main #link .umipro dl.flxc dt {
    margin-right: 16px;
    vertical-align: middle
}
main #link .umipro dl.flxc dd {
    flex: 1;
    vertical-align: middle
}
main #link .umipro ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center
}
main #link .umipro ul * {
    display: block;
    line-height: 40px;
    vertical-align: middle
}
main #link .umipro ul.organizer li {
    margin: 8px 16px 8px 16px;
    height: 40px
}
main #link .umipro ul.organizer li:first-child {
    margin-left: 0
}
main #link .umipro ul.organizer li.unp_cfb a {
    width: 106px
}
main #link .umipro ul.organizer li.umisakura a {
    width: 44px
}



main #link .umipro ul.sponsor {
    justify-content: start
}
main #link .umipro ul.sponsor li {
    margin: 8px 16px 8px 16px;
    line-height: 24px
}


@media only screen and (max-width: 540px) {
    main #link {padding-top:0 !important;}
    main #link .umipro dl.flxc {
        flex-direction: column;
        align-items: center
    }
    main #link .umipro dl.flxc dt {
        line-height: 1.6em;
        margin-left: 16px;
        text-align: center
    }
    main #link .umipro .organizer,
    main #link .umipro .sponsor {
        justify-content: center !important;
        padding: 8px
    }
}

main #link .archive {
    margin-top: 24px
}
main #message {
    border-top: 1px solid #026FB8
}
main #message div .flxc {
    display: -webkit-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    margin: 0 auto 24px
}
main #message div .flxc figure img {
    width: 80px;
    height: 80px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    margin-right: 16px
}
main #message div .flxc p {
    text-align: left;
    white-space: nowrap
}
@media only screen and (min-width: 541px),
print {
    main #message > .flxc {
        justify-content: space-between;
        align-items: stretch
    }
    main #message > .flxc > div {
        width: 48%
    }
}
@media only screen and (max-width: 540px) {
    main #message > .flxc {
        flex-direction: column
    }
    main #message > .flxc > div + div {
        margin-top: 40px;
        margin-left: 0
    }
    main #message > .flxc .flxc {
        display: block
    }
    main #message > .flxc .flxc figure img {
        display: block;
        margin: 0 auto 16px;
        width: 128px;
        height: 128px;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%
    }
    main #message > .flxc .flxc p {
        text-align: center
    }
}

main #entry figure + p {
    width: 56%;
    margin-top: 3%;
    /*padding-top:calc(8.1% - 16px);*/
    padding-top: calc(11.1% - 16px);
    /*background:url(../img/23/entry_txt2.webp) 0 0 no-repeat;*/
    background: url(../img/25/entry_txt2b.webp) 0 0 no-repeat;
    background-size: contain;
}
@media only screen and (max-width: 767px) {
    main #entry figure + p {
        width: 95%;
        margin: 0 2.5%;
        /*padding-top:calc(92% + 38.8% + 5% - 16px);
        /*background-image:url(../img/23/entry_txt2@sp.webp);*/
        padding-top: calc(92% + 51.8% + 5% - 16px);
        background-image: url(../img/25/entry_txt2b@sp.webp);
        background-position: 0 bottom;
    }
}