@charset "utf-8";
.container-1000 {max-width: 1000px; width: calc(100% - 40px); margin: 0 auto;}

.sect1 {margin-bottom: 100px;}
.sect1 .img {position: relative; margin-bottom: 50px;}
.sect1 .img figure {position: relative;}
.sect1 .img figure figcaption {font-size: 10px; padding: 5px 10px 0; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4); position: absolute; bottom: 5px; left: 10px; color: #fff;}
.sect1 .img .overlay {position: absolute;top: 0; left: 5.2%; padding: 50px 30px; background: rgba(95, 81, 78, 0.65);color: #fff; font-family: 'Noto Serif JP', sans-serif; max-width: 410px;}
.sect1 .img .overlay h3 {font-size: 2.5rem; margin-bottom: 30px; line-height: 0.5;}
.sect1 .img .overlay h3 span {display: block;}
.sect1 .img .overlay h3 span:nth-of-type(1) {font-size: 2.5rem; font-style: italic; letter-spacing: 0.4rem;}
.sect1 .img .overlay h3 span:nth-of-type(2) {font-size: 1.7rem;}
.sect1 .img .overlay h3 span img {width: auto; margin: 3px 0;}
.sect1 .img2 {margin-bottom: 0;}
.sect1 .img2 .overlay {left: auto; right: 50px;}
.sect1 .boxTit img{width: 244px;}
.sect1 .img .overlay .boxTit span:nth-of-type(1) {font-size: 1.7rem;padding-top: 9px; letter-spacing: -2px;line-height: 1;}

.sect2 {margin-bottom: 5.2vw;}
.sect2 .row1{margin-bottom: 60px; align-items: center; justify-content: flex-start;}
.sect2 .row1 .left{width: 52.6%;}
.sect2 .row1 .right{width: 31.55%; margin-left: min(2vw, 40px);}
.sect2 .row2{align-items: flex-start; justify-content: flex-end;}
.sect2 .row2 .left{width: 37.35%; margin-right: min(4vw, 80px);}
.sect2 .row2 .right{width: 31.55%; margin-right: min(2vw, 40px); position: relative; top: -160px;}

.sect3 {margin-bottom: 5.2vw;}
.sect3 .ds-flex{align-items: center;}
.sect3 .row1{margin-bottom: 20px;}
.sect3 .row1 .left{width: 27.35%; margin: 0 auto;}
.sect3 .row1 .right{width: 52.6%; text-align: right;}
.sect3 .row2 .left{width: 49.6%; margin: 0 auto;}
.sect3 .row2 .right{width: 44.7%; text-align: right;}

.fs-10 {
    color: #221815;
}

/* MEDIA */

@media (max-width: 1400px) and (min-width: 768px){
    .sect2 .row2 .right{top: -7vw;}
}

@media (max-width: 1080px) and (min-width: 768px){
    .sect1 .img .overlay h3 span:nth-of-type(1) {font-size: 2vw;}
    .sect1 .img .overlay h3 span:nth-of-type(2) {font-size: 1.3vw;}
    .sect1 .img .overlay p {font-size: 1.2vw;}
 
}

@media screen and (max-width: 768px) {
    
    .sect1 {margin-bottom: 20px;}
    .sect1 .img {margin-bottom: 0;}
    .sect1 .img .overlay {position: static; padding: 50px 20px; width: 100%; max-width: 100%;}
    .sect1 .img .overlay h3 {margin-bottom: 20px;}
    .sect1 .img figure {margin-bottom: 20px;}

    .sect2 {margin-bottom: 10px;}
    .sect2 .row1{margin-bottom: 0;}
    .sect2 .row2 .right{top: 0;}
    .sect2 .row1 .left, .sect2 .row1 .right, .sect2 .row2 .left, .sect2 .row2 .right{width: 100%; margin: 10px auto; text-align: center;}
    
    .sect3 {margin-bottom: 40px;}
    .sect3 .row1{margin-bottom: 0;}
    .sect3 .row1 .left, .sect3 .row1 .right, .sect3 .row2 .left, .sect3 .row2 .right{width: 100%; margin: 10px auto; text-align: center;}
}