@charset "UTF-8";

/* 共通 */
.imgcapkeep, .imgcap {
    position: absolute;
    bottom: 0px;
    left: 0px;
    box-sizing: border-box;
    padding: 5px 10px;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0em;
}
.imgcapkeep.wh, .imgcap.wh {
    color: #fff;
}
.imgcapkeep.bg, .imgcap.bg {
    color: #fff;
    background-color: rgba(0, 0, 0, .6);
}
.mb1em {
    margin-bottom: 1em;
}

.tpl-cover__bg.-fixed {
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0
}

.bg_white {
    position: relative
}

.bg_white::before {
    z-index: 0;
    position: absolute;
    top: 100px;
    left: 50%;
    width: 100%;
    height: calc(100% - 100px);
    transform: translate(-50%);
    background-color: rgba(248, 247, 246, .9);
    content: ""
}

@media screen and (max-width: 768px) {
    .bg_white::before {
        top: 15vw;
        height: calc(100% - 15vw)
    }
}

.bg_white .tit00 {
    background: #402021;
    color: #fff;
    box-sizing: border-box;
    padding: 20px 5px
}

@media screen and (max-width: 768px) {
    .bg_white .tit00 {
        padding: 10px
    }
}

.sec_box01 {
    position: relative
}

.sec_box01::before {
    z-index: 0;
    position: absolute;
    top: 0px;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%);
    background-color: #f8f7f6;
    content: ""
}

.sec_box01 .tit02 {
    padding-bottom: 15px;
    border-bottom: solid 1px #402021
}

.sec_box01 .tit02 span {
    font-size: .87em
}

.sec_box01 .txt01 {
    margin-bottom: 15px
}

@media screen and (max-width: 768px) {
    .sec_box01 .box01_in .tpl-col {
    width: 100%
    }
}

.sec_box01 .box01_in .txtBox {
    box-sizing: border-box;
    padding-left: 35px;
    padding-bottom: 30px
}

@media screen and (max-width: 1016px) {
    .sec_box01 .box01_in .txtBox {
        padding-left: 25px
    }
}

@media screen and (max-width: 768px) {
    .sec_box01 .box01_in .txtBox {
        padding-bottom: 0px;
        padding-right: 20px;
        padding-left: 20px
    }
}

.sec_box01 .box01_in .txtBox .date {
    margin-bottom: 15px
}

@media screen and (max-width: 768px) {
    .sec_box01 .box01_in .txtBox .date {
        margin-bottom: 10px
    }
}

.sec_box01 .box01_in .txtBox .date p {
    display: inline-block;
    background: #8a7f4d;
    font-size: 21px;
    line-height: 1.47;
    font-size: 1.8rem;
    letter-spacing: 0.025em;
    box-sizing: border-box;
    padding: .23em .47em;
    font-weight: bold;
    min-width: 6.04em;
    text-align: center;
    color: #fff
}

@media screen and (max-width: 768px) {
    .sec_box01 .box01_in .txtBox .date p {
        font-size: 1.5rem
    }
}

.sec_box01 .box01_in .txtBox .date p span {
    font-size: .8em;
    vertical-align: .1em;
    font-weight: bold
}

.sec_box01 .box01_in .txtBox .date p strong {
    font-size: 1.38em;
    font-weight: bold
}

.sec_box01 .box01_in .txtBox .time {
    font-size: 1.6rem
}

@media screen and (max-width: 768px) {
    .sec_box01 .box01_in .txtBox .time {
        font-size: 1.4rem
    }
}

.sec_box01 .box01_in .txtBox .time b {
    font-size: 1.3em;
    font-weight: 400
}

.sec_box01 .box01_in .imgBox img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media screen and (max-width: 768px) {
    .sec_com {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box
    }
}

.sec_com .tit01 {
    color: #fff;
    background: #8a7f4d;
    width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 768px) {
    .sec_com .tit01 {
        width: 100%
    }
}

.sec_com .tit01 .tpl-headline__title-jp {
    padding: 10px
}

.sec_com .list02 {
    width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width: 768px) {
    .sec_com .list02 {
        width: 100%
    }
}

.sec_com .list02 li {
    position: relative
}

.sec_com .list02 li::after {
    content: "";
    display: block;
    position: absolute;
    border: solid 13px rgba(0, 0, 0, 0);
    border-left-color: #142c41;
    border-left-width: 20px;
    box-sizing: border-box;
    left: 102%;
    top: 50%;
    transform: translateY(-50%)
}

@media screen and (max-width: 768px) {
    .sec_com .list02 li::after {
        left: 50%;
        top: 103%;
        transform: translate(-50%, 0%);
        border-width: 7px;
        border-top-width: 14px;
        border-top-color: #142c41;
        border-left-color: rgba(0, 0, 0, 0)
    }
}

.sec_com .list02 li:last-child::after {
    display: none
}

.sec_com .list03 {
    box-sizing: border-box;
    padding: 0px 50px;
    gap: 0px
}

@media screen and (max-width: 768px) {
    .sec_com .list03 {
        padding: 0px
    }
}

.sec_com .list03 .imgBox {
    position: relative
}

.sec_com .list03 .imgBox .step {
    display: block;
    position: absolute;
    width: 100%;
    max-width: 134px;
    top: -18px;
    left: -18px;
    background: #8a7f4d;
    color: #fff;
    font-size: 1.8rem;
    letter-spacing: .05em;
    text-align: center;
    line-height: 1;
    padding: .4em 0px
}

@media screen and (max-width: 768px) {
    .sec_com .list03 .imgBox .step {
        max-width: 115px;
        top: -10px;
        left: -10px
    }
}

.sec_com .list03 .imgBox .step strong {
    font-size: 1.8em;
    vertical-align: -0.05em;
    font-weight: 500
}

.sec_com .list03 .txtBox {
    background: #fff;
    box-sizing: border-box
}

@media screen and (max-width: 768px) {
    .sec_com .list03 .txtBox {
        padding: 20px 15px
    }
}