@charset "shift_jis";

/* ==========================================================
   オープニングアニメーション
   ========================================================== */

.start {
    background: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9000;
}
.start p {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 9999;
    width: 145px;
}
.start p img {
    width: 100%;
}

/* ==========================================================
   フェードインアニメーション
   ========================================================== */

.fadein {
    opacity: 0;
    transform: translate(0, 30px);
    transition: all 1500ms;
}
.fadein2 {
    opacity: 0;
    transform: translate(0, 0);
    transition: all 1500ms;
}
.fadein3 {
    opacity: 0;
    transform: translate(0, 15px);
    transition: all 1500ms;
}
.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}

/* ==========================================================
   レイアウト（共通）
   ========================================================== */

#contents-main {
    max-width: 920px;
    margin: 0 auto;
}

#contents-main .section {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    background: url(./bg_main.jpg) top center / contain repeat;
}

.box_inner {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    background: #FFF;
    border: 8px solid #325090;
    border-radius: 16px;
    padding: 20px 50px 60px;
}

#contents .lp_footer .attention {
    padding: 10px 20px 0;
    font-size: 24px;
    line-height: 1.5;
    color: #fff;
    font-weight: bold;
    text-shadow:
        -2px -2px 0 #325090,
         0px -2px 0 #325090,
         2px -2px 0 #325090,
         2px  0px 0 #325090,
         2px  2px 0 #325090,
         0px  2px 0 #325090,
        -2px  2px 0 #325090,
        -2px  0px 0 #325090;
}

#contents .lp_footer {
    background: url(./bg_footer.jpg) center center / cover no-repeat;
    padding: 0px 30px 40px;
    height: 280px;
}

/* ==========================================================
   メインタイトル (#ttl)
   ========================================================== */

#contents h2 {
    background: none;
    padding: 40px 0;
    margin: 0 auto;
}

#ttl {
    background: url(ttl_bg.jpg) top / contain no-repeat;
    height: 245px;
    margin-bottom: -28px;
}
#ttl h2 {
    padding: 0;
}

/* ttl ナビボックス */
#box_event #ttl_nav .navibox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px 0px 20px;
    list-style: none;
    margin: 0;
}
#box_event #ttl_nav .navibox li {
    width: calc(100% / 2 - 5px);
    position: relative;
    padding: 0;
}
#box_event #ttl_nav .navibox li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0;
    background-color: #f9bf3d;
    color: #333;
    line-height: 1.4;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
    font-weight: bold;
    box-sizing: border-box;
    height: 100%;
    font-size: 18px;
    text-decoration: none;
    border-radius: 6px;
}
.sp #box_event #ttl_nav .navibox li a{
    font-size: 3.5vw;
    min-height: 16vw;
}
.sp #box_event #ttl_nav .navibox li::after {
    right: 10px;
}
#box_event #ttl_nav .navibox li::after {
    position: absolute;
    bottom: 35%;
    right: 20px;
    left: auto;
    transform: rotate(90deg);
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f054";
    color: #333;
    font-size: 14px;
}

/* ==========================================================
   見出し (h3, h4)
   ========================================================== */
#contents-main h3{
    padding: 20px 16px 0;;
    background: transparent;
}
#contents h4 {
    background: #A97F37;
    border-radius: 0;
    position: relative;
    min-height: 70px;
    padding: 10px 0;
    margin-top: 0;
}
#contents h4 img {
    max-width: 80%;
}

/* ==========================================================
   ナビメニュー（大）
   ========================================================== */

#contents-main ul.navi.big {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    gap: 10px;
    padding: 0 40px 30px;
    box-sizing: border-box;
}
#contents-main ul.navi.big li {
    position: relative;
    width: calc(100% / 3);
    text-align: center;
    line-height: 1.3;
    padding: 0;
}
#contents-main ul.navi.big li::after {
    position: absolute;
    content: url(./icon_arrow.svg);
    width: 15px;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}
#contents-main ul.navi.big li a {
    background-color: #ef611f;
    color: #fff;
    display: block;
    padding: 13px 0 26px;
    border: 2px solid #FFF;
    border-radius: 6px;
    box-sizing: border-box;
}

/* ==========================================================
   イベントボックス (#box_event)
   ========================================================== */

#box_event .box_inner ul li {
    padding-top: 30px;
}
#box_event .box_inner .line {
    padding-top: 20px;
}

/* PC用 画像最小高さ */
.pc #box_event .box_inner ul li img {
    min-height: 700px;
    width: 100%;
}
.pc #box_event .box_inner ul li#fes img {
    min-height: 1000px;
}
.pc #box_event .box_inner ul li.bnr img {
    min-height: 500px;
}

/* イベント内ナビメニュー */
#box_event .box_inner ul.navi {
    display: flex;
    margin: 0 auto 30px;
    gap: 10px;
}
#box_event .box_inner ul.navi li {
    position: relative;
    width: calc(100% / 2);
    text-align: center;
    line-height: 1.3;
    padding: 0;
}
#box_event .box_inner ul.navi li::after {
    position: absolute;
    content: url(./icon_arrow.svg);
    width: 15px;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}
#box_event .box_inner ul.navi li a {
    background-color: #ef611f;
    color: #fff;
    display: block;
    padding: 13px 0 26px;
}

/* ==========================================================
   イベントカード
   ========================================================== */

#box_event .event_card {
    background: #FFF;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    margin-top: 30px;
    border: 4px solid #A97F37;
}

#box_event .event_header {
    background: #A97F37;
    padding: 14px 45px;
}
#box_event .event_header img {
    display: block;
    max-width: 100%;
    height: auto;
}
#box_event .event_body {
    position: relative;
    padding: 30px 30px 0;
    display: block;
    text-decoration: none;
    color: inherit;
}
#box_event .event_body_inner {
    padding: 0 0px 30px;
}
#box_event .event_body_inner p{
    font-size: 24px;
    color: #717071;
    font-weight: bold;
    text-align: left;
    line-height: 1.4;
}
#box_event .event_body h2{
    padding: 0px 0 30px;
}
#box_event .event_body::after {
    content: "";
    display: block;
    margin: 20px 0;
    height: 12px;
    background-color: #b99558;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 17px 100%;
    -webkit-mask-repeat: repeat-x;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='%23000'/%3E%3C/svg%3E");
    mask-size: 23px 100%;
    mask-repeat: repeat-x;
}

#box_event .event_card.no-border {
    border: none;
    margin-top: 0;
}

#box_event .event_card .event_body:last-of-type::after {
    display: none;
}
#box_event .event_card .event_body.has-dot:last-of-type::after {
    display: block;
}

/* ドットカラー（カード単位のデフォルト） */
#box_event .event_card.red .event_body::after { background-color: #e7380d; }
#box_event .event_card.brown .event_body::after { background-color: #cb6a55; }

/* ドットカラー（event_body個別上書き） */
#box_event .event_card .event_body.dot-gold::after { background-color: #b99558; }
#box_event .event_card .event_body.dot-red::after { background-color: #e7380d; }
#box_event .event_card .event_body.dot-navy::after { background-color: #325090; }
#box_event .event_card .event_body.dot-orange::after { background-color: #e8380d; }
#box_event .event_card .event_body.dot-sky::after { background-color: #00ade9; }
#box_event .event_card .event_body.dot-brown::after { background-color: #cb6a55; }
#box_event .event_card .event_body.dot-teal::after { background-color: #00aecb; }
#box_event .event_card .event_body.dot-green::after { background-color: #a9ce52; }

/* カードボーダーカラーバリエーション */
#box_event .event_card.gold { border-color: #A97F37; }
#box_event .event_card.brown { border-color: #cb6a55; }
#box_event .event_card.red { border-color: #e7380d; }
#box_event .event_card.navy { border-color: #325090; }
#box_event .event_card.orange { border-color: #e8380d; }
#box_event .event_card.sky { border-color: #00ade9; }

/* ヘッダー背景カラーバリエーション */
#box_event .event_card.gold .event_header { background-color: #A97F37; }
#box_event .event_card.brown .event_header { background-color: #cb6a55; }
#box_event .event_card.red .event_header { background-color: #e7380d; }
#box_event .event_card.navy .event_header { background-color: #325090; }
#box_event .event_card.orange .event_header { background-color: #e8380d; }
#box_event .event_card.sky .event_header { background-color: #00ade9; }

#box_event .event_body h2 {
    min-height: 140px;
}
.sp #box_event .event_body h2 {
    min-height: 65px;
}
#box_event #fair .event_body h2 {
    min-height: 65px;
}
.sp #box_event #fair .event_body h2 {
    min-height: 35px;
}


#box_event .event_thumb {
    width: 100%;
    aspect-ratio: 16 / 11;
    background: #d9d9d9;
    overflow: hidden;
    margin: 0 0 32px;
    
    /*min-height: 410px;*/
}

.sp #box_event .event_thumb {
    /*min-height: 210px;*/
    aspect-ratio: 29 / 21;
}


#box_event .event_thumb.free {
    aspect-ratio: auto;
}
#box_event .event_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#box_event .event_info {
    margin: 0;
    position: relative;
}
#box_event .event_info::before,
#box_event .event_body_inner p.has-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 42px 42px;
    border-color: transparent transparent #e8492c transparent;
}
#box_event .event_body_inner p.has-arrow {
    position: relative;
}
#box_event .info_row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
#box_event .info_row dt {
    flex: 0 0 auto;
    background: #A97F37;
    color: #fff;
    font-weight: bold;
    font-size: 24px;
    padding: 12px 16px;
    margin: 0;
}

/* dt カラーバリエーション */
#box_event .event_info.dt-gold .info_row dt { background-color: #b99558; }
#box_event .event_info.dt-green .info_row dt { background-color: #a9ce52; }
#box_event .event_info.dt-teal .info_row dt { background-color: #00aecb; }
#box_event .event_info.dt-brown .info_row dt { background-color: #cb6a55; }
#box_event .info_row dd {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: #717071;
    text-align: left;
    line-height: 1.2;
}


/* ==========================================================
    OPEN
   ========================================================== */
#box_event .open-list {
    margin: 30px 0 0;
    padding: 0;
    list-style-type: none;
}

#box_event .open-card {
    margin-bottom: 16px;
    padding: 30px;
    background-color: #ffffff;
    border: 4px solid #f08300;
    box-sizing: border-box;
}

#box_event .open-card a {
    display: block;
    color: #333333;
    text-decoration: none;
    width: 100%;
    margin: auto;
    position: relative;
}
#box_event .open-card a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 42px 42px;
    border-color: transparent transparent #f08300 transparent;
}

#box_event .open-status {
    width: 82%;
    margin: 0 auto 20px;
    padding: 10px 0;
    background-color: #ed6c00;
    color: #ffffff;
    border-radius: 50px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: bold;
    text-align: center;
}

#box_event .open-logo {
    margin-bottom: 18px;
    text-align: center;
}
.pc #box_event .box_inner ul li .open-logo img{
    width: 86%;
    height: auto;
    min-height: auto;
}
#box_event .box_inner ul li .open-img img {
    width: 100%;
    height: auto;
    display: block;
    min-height: auto;
}

#box_event .open-logo.odashimon img {
    width: 60%;
}

#box_event .open-category {
    margin: 0 0 18px;
    color: #333333;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

#box_event .open-title {
    margin: 0 0 12px;
    color: #ed6c00;
    font-size: 24px;
    line-height: 1.45;
    font-weight: bold;
    border-top: dashed 2px #ed6c00;
    padding-top: 15px;
    text-align: center;
}

#box_event .open-img {
    margin: 0 0 12px;
    text-align: center;
}

#box_event .open-text {
    margin: 16px 0 0;
    color: #333333;
    font-size: 22px;
    line-height: 1.55;
    text-align: left;
    padding-right: 40px;
}


/* ==========================================================
   SP（スマホ）表示
   ========================================================== */

body.view.sp #contents > .inner {
    padding: 0;
}
body.view.sp #contents-main.all {
    padding-top: 0;
}

/* SP: レイアウト */
.sp #contents-main .section {
    width: 100%;
}
.sp #contents-main .section .box_inner {
    padding: 8px 16px 24px;
    width: 94%;
}


/* SP: 見出し */
.sp #contents #ttl{
    height: 33.7vw;
    margin-bottom: -7vw;
}

/* SP: ttl ナビボックス */
.sp #ttl_nav .navibox {
    padding: 10px 16px 0;
    gap: 6px;
}
.sp #ttl_nav .navibox li a {
    font-size: 3.2vw;
    padding: 10px 0;
}
.sp #ttl_nav .navibox li::after {
    font-size: 10px;
    right: 10px;
}
.sp #contents h3 {
    padding: 20px 0 0;
    min-height: 50px;
}

.sp #contents h4 {
    min-height: 35px;
}

/* SP: イベントボックス */
.sp #box_event .box_inner ul li {
    padding-top: 10px;
}
.sp #box_event .box_inner ul li:last-of-type {
    padding: 20px 0 0;
}
.sp #box_event .box_inner ul li::after {
    bottom: 35%;
    right: 0;
    left: auto;
    width: 10px;
}
.sp #box_event .box_inner ul li a {
    padding: 13px 0;
    font-size: 10px;
}
.sp #box_event .box_inner .line {
    padding-bottom: 20px;
}

/* SP: ナビメニュー */
.sp #box_event .box_inner ul.navi {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 30px;
    padding-top: 10px;
}
.sp #box_event .box_inner ul.navi li {
    width: calc(100% / 2 - 3px);
    padding-top: 0;
}
.sp #contents-main ul.navi.big li:nth-child(3) a {
    line-height: 36px;
}

/* SP: イベントカード */
.sp #box_event .event_header {
    padding: 10px 14px;
}
.sp #box_event .event_body {
    padding: 24px 0 0;
}
.sp #box_event .event_body_inner {
    padding: 0 14px;
}
.sp #box_event .event_body h2 {
    font-size: 18px;
    margin-bottom: 12px;
    padding: 0;
}
.sp #box_event .event_thumb {
    margin: 0 0 20px;
}
.sp #box_event .event_info{
    margin: 0 0 20px;
}
.sp #box_event .event_info::before,
.sp #box_event .event_body_inner p.has-arrow::after {
    border-width: 0 0 32px 32px;
}
.sp #box_event .event_body::after {
    height: 2vw;
    -webkit-mask-size: 5% 100%;
    mask-size: 5% 100%;
    width: 90%;
    margin: 0 auto;
}
.sp #box_event .event_body::before {
    right: 14px;
    bottom: 40px;
    border-width: 0 24px 24px 0;
}
.sp #box_event .info_row {
    gap: 10px;
    margin-bottom: 8px;
}
.sp #box_event .info_row dt {
    font-size: 4vw;
    padding: 5px 10px;
}
.sp #box_event .info_row dd {
    font-size: 4vw;
    text-align: left;
}
.sp #contents .lp_footer{
    padding: 0px 16px 40px;
    height: 28vw;
}
.sp #contents .lp_footer .attention{
    font-size: 3.5vw;
}
.sp #box_event .event_body_inner p{
    font-size: 4vw;
    margin: 0 0 20px;
}

/* SP: OPENカード */
.sp #box_event .box_inner ul.open-list li.open-card{
    padding: 20px 14px;
}
.sp #box_event .open-card {
    padding: 20px 16px;
}
.sp #box_event .open-status {
    font-size: 4.5vw;
    margin-bottom: 14px;
}
.sp #box_event .open-category {
    font-size: 3.8vw;
    margin-bottom: 12px;
}
.sp #box_event .open-title {
    font-size: 4.2vw;
}
.sp #box_event .open-text {
    font-size: 3.8vw;
    padding-right: 30px;
}
.sp #box_event .open-card a::after{
    border-width: 0 0 32px 32px;
}