@charset "utf-8";

.t-title { padding: 0 60px; margin: 80px auto 150px; }
.t-title h2 { font-size: 24px; font-family: "Bodoni Moda", serif; color: #6A2F2B; }
.t-title> :last-child { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; }
.t-title div .more-btn{position: relative; margin-right: 20px;}
.t-title div .more-btn a{ display: inline-block; writing-mode: vertical-lr; text-align: center;  padding-bottom: 0; pointer-events: none; color: #212529; font-size: 14px; opacity: 0.45; }
.t-title div .more-btn a::before{ content: ''; writing-mode: vertical; position: absolute; right: -10px; top:0px; width: 1px; height: 0%; opacity: 1; background-color: #212529; animation: scroll-d 2s infinite; }


@keyframes scroll-d{
    0%{ height:0%; }
    100%{ height: 100%;}
}

.t-list { width: 1800px; margin: 0 auto; padding-bottom: 130px;  }
.t-list li { display: flex; }
.t-list> :not(:last-child) { margin-bottom: 80px; }
.t-list> :nth-child(2n) { flex-direction: row-reverse; }
.t-list li div { width: 50%; }
.t-list li .imgbox { aspect-ratio: 4/3; background-position: center; background-size: cover; background-repeat: no-repeat;}
.t-list> :nth-child(2n+1) .imgbox { margin-right: 40px; }
.t-list> :nth-child(2n) .imgbox { margin-left: 40px; }
.t-list li .img1 { background-image: url('../img/sub5/image1.jpg'); }
.t-list li .img2 { background-image: url('../img/sub5/image2.jpg'); }
.t-list li .img3 { background-image: url('../img/sub5/image3.jpg'); }
.t-list li .img4 { background-image: url('../img/sub5/image4.jpg'); }
.t-list li .img5 { background-image: url('../img/sub5/image5.jpg'); }
.t-list li .img6 { background-image: url('../img/sub5/image6.jpg'); }
.t-list li .img7 { background-image: url('../img/sub5/image7.jpg'); }
.t-list li .img8 { background-image: url('../img/sub5/image8.jpg'); }
.t-list li .img9 { background-image: url('../img/sub5/image9.jpg'); }
.t-list li .img10 { background-image: url('../img/sub5/image10.jpg'); }
.t-list li> :last-child { padding: 40px 2% 0; border-top: 1px solid #6A2F2B; border-bottom: 1px solid #6A2F2B; }
.t-list li div h2 { font-size: 28px; margin-bottom: 20px; font-family: "Bodoni Moda", serif; font-weight: 600; color: #6A2F2B;}
.t-list li div h3 { font-size: 16px; margin-bottom: 20px; color: #212529; }
.t-list li div :last-child { font-size: 14px; }


@media all and (max-width: 1800px){
    /* .t-title { padding: 0 60px; } */
    .t-list { width: 100%; padding: 0 60px 130px; }
}

@media all and (max-width: 1024px){
    .t-title { padding: 0 30px; }
    .t-list { padding: 0 30px 130px; }
    .t-list> :nth-child(2n+1) .imgbox { margin-right: 30px; }
    .t-list> :nth-child(2n) .imgbox { margin-left: 30px; }
    .t-list li> :last-child { padding: 20px 2% 0; width: 60%; }
    .t-list li div h2 { font-size: 18px; }
    .t-list li div h3 { font-size: 14px; margin-bottom: 10px; }
}

@media all and (max-width: 768px){
    .t-title { padding: 0 20px; }
    .t-list { padding: 0 20px 80px; }
    
}

@media all and (max-width: 840px){
    .t-title { margin: 80px auto; }
    .t-title div .more-btn a{ font-size: 12px; }

    .t-list li { display: block; }
    .t-list> :not(:last-child){ margin-bottom: 40px;}
    .t-list li div { width: 100%; }
    .t-list li> :last-child { width: 100%; padding: 20px 15px; }
    .t-list li .imgbox { margin-bottom: 0px;}
    .t-list> :nth-child(2n+1) .imgbox { margin-right: 0; }
    .t-list> :nth-child(2n) .imgbox { margin-left: 0; }
    .t-list li> :last-child{ border-top: 0;}
}

@media all and (max-width: 500px){
    .t-title { margin: 60px auto 50px; }
    .t-title h2 { font-size: 20px; margin-bottom: 15px; }
    .t-title div p { font-size: 14px; }
    .t-title div .more-btn{ display: none; }
}