.tbView{ display: block;}
.pcOnly{ display: block;}
.spOnly{ display: none;}

/* =========================================
   タイトル
========================================= */
#newsTitle{ padding: 1rem 0 1.5rem;}
.newsTitleInner{
    width: 90%;
    max-width: 975px;
    margin: 0 auto;
    position: relative;
    text-align: center;
}
.newsLabel{
    position: absolute;
    top: 0;
    left: 0;
    width: 210px;
}
.newsLabel img{
    display: block;
    width: 100%;
    height: auto;
}
#newsTitle h1 img{
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

/* =========================================
   夢のみちって？
========================================= */
#aboutBox{
    background: #ffdea8;
    padding: 2rem 0;
}
.aboutInner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 975px;
    margin: 0 auto;
}
.aboutText{ width: 72%;}
.aboutMidashi{
    display: inline-block;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    background: #000;
    border-radius: 2rem;
    padding: 0.3rem 1rem;
    margin: 0 0 0.4rem;
}
.aboutText p{
    font-size: 1.1rem;
    line-height: 1.7;
}
.aboutQr{
    display: flex;
    align-items: center;
}
.qrBalloon{
    position: relative;
    font-size: 0.95rem;
    line-height: 1.3;
    background: #fff;
    border-radius: 10px;
    padding: 0.8rem 1.2rem;
    margin: 0 1.6rem 0 0;
}
.qrBalloon::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 10px 0 10px 12px;
    border-color: transparent transparent transparent #fff;
}
.aboutQr img{
    width: 124px;
    height: auto;
}

/* =========================================
   コンテンツ共通
========================================= */
#contBox{
    width: 90%;
    max-width: 975px;
    margin: 0 auto;
    padding: 3.5rem 0 3rem;
}
.newsSec{ margin: 0 0 3rem;}
.newsSec:last-child{ margin: 0;}
.newsSec + .newsSec{
    border-top: 2px solid #000;
    padding: 3rem 0 0;
}

.secTitle{
    display: flex;
    align-items: flex-end;
    font-weight: normal;
    margin: 0 0 1.2rem;
}
.secTitle--center{ align-items: center;}
.secTitle--center .secNum{
    position: relative;
    top: -0.05em;
}
.secNum{
    font-family: "Righteous", sans-serif;
    font-weight: 400;
    font-size: 4.83rem;
    line-height: 0.85;
    color: #f29351;
    letter-spacing: 0.04em;
    margin: 0 0.5rem 0 0;
    flex-shrink: 0;
    position: relative;
    top: -0.07em;
}
.secTitleText{
    font-size: 2rem;
    line-height: 1.3;
}
.secSub{
    display: block;
    font-size: 1.4rem;
}
.secLead{
    line-height: 1.8;
    margin: 0 0 2rem;
}

/* 日付バッジ */
.dateBadge{
    position: relative;
    flex-shrink: 0;
    width: 78px;
    height: 86px;
    background: #ffdea8;
    border-radius: 10px;
    text-align: center;
    margin: 0 0.8rem 1.4rem 0;
}
.dateBadge .year{
    display: block;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.4rem 0 0.2rem;
    margin: 0 5px;
    border-bottom: 1px solid #000;
}
.dateBadge .md{
    display: block;
    position: relative;
    height: 52px;
    font-size: 1.5rem;
    line-height: 1;
}
.dateBadge .md::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 46px;
    background: #000;
    transform: translate(-50%, -50%) rotate(40deg);
}
.dateBadge .m{
    position: absolute;
    top: 6px;
    left: 14px;
}
.dateBadge .d{
    position: absolute;
    bottom: 2px;
    right: 8px;
}
/* 日付が一桁の時 */
.dateBadge .d.single{ right: 16px;}
.dateBadge .week{
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 1rem;
    color: #fff;
    background: #f08439;
    border-radius: 50%;
}

/* =========================================
   01 イベント
========================================= */
.eventHead{
    display: flex;
    align-items: flex-start;
    margin: 0 0 2rem;
}
.eventHeadText p{ line-height: 1.8;}

.barTitle{
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background: #f29351;
    padding: 0.6rem 1rem;
    margin: 0 0 1.8rem;
}

.col2List{
    display: flex;
    justify-content: space-between;
    list-style: none;
}
.col2List li{ width: 46.8%;}
.col2List img{
    display: block;
    width: 100%;
    height: auto;
}
.col2List h4{
    font-size: 1.3rem;
    font-weight: bold;
    margin: 0.6rem 0 0.2rem;
}
.col2List p{ font-size: 0.8rem; line-height: 1.5;}

.pillTitle{
    text-align: center;
    border-top: 1px dotted #000;
    padding: 2rem 0 0;
    margin: 2rem 0 1.8rem;
}
.pillTitle span{
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold;
    background: #ffdea8;
    border-radius: 10px;
    padding: 0.4rem 1rem;
}

/* ブース */
.boothList{
    display: flex;
    justify-content: space-between;
    list-style: none;
}
.boothList li{
    display: flex;
    flex-direction: column;
    width: 31.8%;
}
.boothList h4{
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
    min-height: 2.8em;
    margin: 0 0 0.8rem;
}
.boothText{
    line-height: 1.6;
    margin: 0 0 1rem;
    flex-grow: 1;
}
.boothList li > img{
    display: block;
    width: 100%;
    height: auto;
}
.boothFoot{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0.8rem 0 0;
}
.balloon{
    position: relative;
    width: 59%;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.6;
    background: #fff;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 0.4rem;
    box-sizing: border-box;
}
/* 吹き出しのしっぽ */
.balloon::before,
.balloon::after{
    content: "";
    position: absolute;
    left: 24px;
    border-style: solid;
    border-width: 0 9px 14px 9px;
}
.balloon::before{
    top: -15px;
    border-color: transparent transparent #000 transparent;
}
.balloon::after{
    top: -13px;
    border-color: transparent transparent #fff transparent;
}
.boothSub{
    width: 38.7%;
    height: auto;
}
.boothSign{
    position: absolute;
    right: 5.5%;
    bottom: 0;
    width: 27.7%;
    height: auto;
}

/* 乗り物 */
.vehicleBox{
    display: flex;
    justify-content: space-between;
}
.vehicleList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 49.3%;
    list-style: none;
}
.vehicleList li{
    width: 48.6%;
    background: #f0f0f0;
    border-radius: 10px;
    margin: 0 0 14px;
    text-align: center;
    padding: 0.4rem 0 0.5rem;
    box-sizing: border-box;
}
.vehicleList li:nth-child(n+3){ margin: 0;}
.vehicleList img{
    display: block;
    width: 96%;
    height: auto;
    margin: 0 auto;
}
.vehicleMain{
    display: flex;
    flex-direction: column;
    width: 49.2%;
    background: #f0f0f0;
    border-radius: 10px;
    box-sizing: border-box;
}
.vehicleMain img{
    display: block;
    width: 100%;
    height: auto;
    margin: auto 0;
}
.vText{
    line-height: 1.5;
    margin: 1rem 0 0;
}
.vehicleMain2{

    background: #f0f0f0;
    border-radius: 10px;
    padding: 0.4rem 1.2rem 1rem;
    box-sizing: border-box;
}
/* ＼ラベル／ */
.vLabel{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.05rem;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
}
.vLabel::before,
.vLabel::after{
    content: "";
    display: block;
    flex-shrink: 0;
    width: 2px;
    height: 2.8em;
    background: #000;
    margin: 0 0.8rem;
}
.vLabel::before{ transform: rotate(-22deg);}
.vLabel::after{ transform: rotate(22deg);}
.vehicleMain .vLabel::before,
.vehicleMain .vLabel::after{ margin: 0 1.8rem;}

/* =========================================
   02 表彰式
========================================= */
.ribbonTitle{
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background: #f08439;
    padding: 0.6rem 2rem;
    margin: 0 0 1.2rem;
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%, 20px 50%);
}
.awardList img{ margin: 0 0 0.8rem;}

/* =========================================
   03 親子体験ツアー
========================================= */
.secHeadQr{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.secHeadQr > div{ width: 88%;}
.secHeadQr > img{
    width: 86px;
    height: auto;
}

.tourBox{
    border-top: 1px dotted #000;
    padding: 2rem 0 0;
    margin: 0 0 2rem;
}
.tourBox:last-child{ margin: 0;}
.tourHead{
    display: flex;
    align-items: flex-start;
    margin: 0 0 1rem;
}
.tourCatch{ line-height: 1.4;}
.tourHead h3{
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4;
}
.tourPlace{ line-height: 1.4;}
.tourLead{
    line-height: 1.8;
    margin: 0 0 1rem;
}
.col3List{
    display: flex;
    justify-content: space-between;
    list-style: none;
}
.col3List li{ width: 32.2%;}
.col3List img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 0.8rem;
}
.col3List p{ font-size: 0.8rem; line-height: 1.5;}

.newaLink{ text-decoration: underline;}
.newaLink:hover{ text-decoration: none;}

/* =========================================
   TB
========================================= */
@media (max-width: 1024px) {
    .secNum{ font-size: 3.91rem;}
    .secTitleText{ font-size: 1.6rem;}
    .secSub{ font-size: 1.1rem;}
    .barTitle,
    .pillTitle span{ font-size: 1.2rem;}
    .boothList h4{ font-size: 1.05rem;}
    .balloon{ font-size: 0.9rem;}
    .vLabel{ font-size: 0.9rem;}
    .vLabel::before,
    .vLabel::after{ margin: 0 0.4rem;}
    .ribbonTitle{ font-size: 1.1rem;}
}

/* =========================================
   SP
========================================= */
@media (max-width: 640px) {
    .pcOnly{ display: none;}
    .spOnly{ display: block;}

    #newsTitle{ padding: 1rem 0;}
    .newsLabel{
        position: static;
        width: 160px;
        margin: 0 auto 1rem;
    }
    #newsTitle h1 img{ max-width: 320px;}

    #aboutBox{ padding: 1.5rem 0;}
    .aboutInner{ display: block;}
    .newaLink{ 
        margin: 1rem auto;
        text-decoration: underline;
        background: #fff;
        padding: 1rem;
        text-align: center;
        border: #000 1px solid;
        border-radius: 10px;
        display: block;
    }
    .aboutText{ width: 100%;}
    .aboutText p{ font-size: 1rem;}

    #contBox{ padding: 2.5rem 0 2rem;}
    .newsSec{ margin: 0 0 2rem;}
    .newsSec + .newsSec{ padding: 2rem 0 0;}

    .secTitle{ align-items: flex-start;}
    .secNum{ font-size: 3.22rem;}
    .secTitleText{ font-size: 1.3rem;}
    .secSub{ font-size: 0.85rem;}

    .eventHead,
    .tourHead{ margin: 0 0 1.6rem;}
    .tourBox{ padding: 1.5rem 0 0;}
    .barTitle{ font-size: 1rem;}
    .pillTitle{ padding: 1.5rem 0 0; margin: 1.5rem 0 1.4rem;}
    .pillTitle span{ font-size: 1.05rem;}

    .col2List,
    .boothList,
    .col3List,
    .vehicleBox{ display: block;}
    .col2List li,
    .boothList li,
    .col3List li{ width: 100%; margin: 0 0 2rem;}
    .col2List li:last-child,
    .boothList li:last-child,
    .col3List li:last-child{ margin: 0;}
    .col2List h4{ font-size: 1.1rem;}

    .boothList h4{ min-height: 0;}
    .balloon{ font-size: 1rem;}

    .vehicleList{ width: 100%;}
    .vehicleList li:nth-child(n+3){ margin: 0 0 14px;}
    .vehicleMain{ width: 100%;}
    .vLabel{ font-size: 0.85rem;}
    .vLabel::before,
    .vLabel::after{ margin: 0 0.3rem;}

    .ribbonTitle{ font-size: 1rem; padding: 0.3rem 1.6rem;}
    .secHeadQr{display: block; margin: 0 0 1.5rem 0;}
    .secHeadQr > div{ width: 100%;}
    .tourHead h3{ font-size: 1.2rem;}
}