@charset "utf-8";

    .mB_30sp20{margin-bottom:30px !important;}
    .mB_50sp40{margin-bottom:50px !important;}
    .mB_60sp40{margin-bottom:60px !important;}
    .mB_80sp40{margin-bottom:80px !important;}
    .mB_100sp70{margin-bottom:100px !important;}

@media only screen and (max-width:640px){
    .mB_30sp20{margin-bottom: 20px !important;}
    .mB_50sp40,.mB_60sp40,.mB_80sp40{margin-bottom:40px !important;}
    .mB_100sp70{margin-bottom:70px !important;}

}

#container{background:url(../images/pattern_tckf2026_report.png) repeat #deedec top left / 128px auto;}

.wrapper{
    width: 980px;
    margin: 0 auto;
    padding: 50px 10px;
    box-sizing: border-box;
}

.mvReport{
    max-width:1340px;
    margin:0 auto;
}

.mvReport img{width:100%;}

@media only screen and (max-width:640px){
    .wrapper{
        width:100%;
        padding: 30px 15px;
    }
}

.reportTtl {
    position: relative;
    padding: 20px 10px;
    text-align: center;
    border: 2px solid #a78686;
    margin-bottom: 30px;
}

.reportTtl::before,
.reportTtl::after {
    position: absolute;
    content: '';
}

.reportTtl::before {
    top: -40px;
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    border: 2px solid #a78686;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}

.reportTtl::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
}

.reportTtl > span {
    position: relative;
    z-index: 1;
    font-size: 22px;
}

.reportTtl > span::before {
    content: '♪';
    font-size: 28px;
    position: absolute;
    z-index: 2;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    color: #a78686;
}

 @media only screen and (max-width:640px){
    .reportTtl{
        margin-bottom: 20px;
        padding: 10px 10px;
    }

     .reportTtl::before{
        top: -30px;
        left: calc(50% - 30px);
        width: 60px;
        height: 60px;
    }

    .reportTtl > span{
        font-size: 20px;
    }

    .reportTtl > span::before{
        font-size: 20px;
        top: -33px;
    }
}

.imgSingle{
    width: 470px;
    margin: 0 auto;
}

.imgSingle img {width: 100%;}

@media only screen and (max-width:640px){.imgSingle{width: 100%;}}

.cmnPhotoLst{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.cmnPhotoLst li{width: 306px;}
.cmnPhotoLst.double li{width:470px;}
.cmnPhotoLst li img{width: 100%;}

@media only screen and (max-width:640px){
    .cmnPhotoLst{display: block;}
    .cmnPhotoLst li,.cmnPhotoLst.double li{width:100%;}
    .cmnPhotoLst li{margin-bottom: 20px;}
}

.slideArea{position: relative;}

/*.slideArea .carousel{padding-bottom: 40px;}*/

.slideArea .flickity-viewport{height: 210px !important;}

.slideArea .carousel-cell{
    width: 334px;
    padding-right: 20px;
}

.slideArea .carousel-cell .imgWrap{background-color: #333;}
.slideArea .carousel-cell img{width: 100%;}

@media only screen and (max-width:640px){
    .slideArea .carousel{
        /*padding-bottom: 66.7%;　←のように計算して%で指定してもOK */
        padding-bottom: calc(((2 / 3) * 100%))/*画像の比率に応じて変更*/;
    }

    .slideArea .flickity-viewport{
        position: absolute;
        width: 100%;
        height: 100% !important;
    }

    .slideArea .carousel-cell{
        width: 100%;
        height: 100%;
        padding-right: 0;
    }
}

.doubleLine{
    text-align: center;
    margin-bottom: 20px;
}

.doubleLine > span{
    position: relative;
    padding: 0 80px;
    font-size: 20px;
    color: #a78686;
}


.doubleLine > span::before, .doubleLine > span::after{
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    width: 50px;
    height: 3px;
    border-top: solid 2px #a78686;
    border-bottom: solid 2px #a78686;
}

@media only screen and (max-width:640px){
    .doubleLine > span{
        padding: 0 70px;
        font-size: 18px;
    }
}

.doubleLine > span::before{left: 0;}
.doubleLine > span::after{right: 0;}

body{color: #4e3939;}