@charset "utf-8"; 
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Playfair+Display:ital,wght@0,400..900; 1,400..900&display=swap'); 

body{background:#f8f8f8;}
section{background:#f8f8f8;}

/* main { background: url('../img/sub1/image2.jpg') no-repeat center top/cover;  }  */
main .main-slide .swiper-wrapper .s1 { background-image: url('../img/sub1/image1.jpg'); }
main .main-slide .swiper-wrapper .s2 { background-image: url('../img/sub1/image2.jpg'); }
main .main-slide .swiper-wrapper .s3 { background-image: url('../img/sub1/image3.jpg'); }
main .main-slide .swiper-wrapper .s4 { background-image: url('../img/sub1/image4.jpg'); }
main .main-slide .swiper-wrapper .s5 { background-image: url('../img/sub1/image5.jpg'); }
main .main-slide .swiper-wrapper .s6 { background-image: url('../img/sub1/image6.jpg'); }
main .main-slide .swiper-wrapper .s7 { background-image: url('../img/sub1/image7.jpg'); }
main .main-slide .swiper-wrapper .s8 { background-image: url('../img/sub1/image8.jpg'); }
main .main-slide .swiper-wrapper .s9 { background-image: url('../img/sub1/image9.jpg'); }
main .main-slide .swiper-wrapper .s10 { background-image: url('../img/sub1/image10.jpg'); }
main .main-slide .swiper-wrapper .s11 { background-image: url('../img/sub1/image11.jpg'); }
main .main-slide .swiper-wrapper .s12 { background-image: url('../img/sub1/image12.jpg'); }
main .main-slide .swiper-wrapper .s13 { background-image: url('../img/sub1/image13.jpg'); }
main h1 { position: absolute; top: 50%;  transform: translate(0%, -50%); font-size: 55px; text-align: center; color: #fff; width: 100%; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); z-index: 1;}
main h1 span { display: block; font-family: 'SUIT-Regular'; font-size: 13px; line-height: 1em; font-weight: 400; margin-bottom: 10px; }


.aboutline { width: 1px; height: 170px; background: rgb(167, 165, 165); margin: 100px auto 0; } 

.about-imgs { height: auto; } 
.about-imgs> .content-box { display: flex; flex-direction: row; margin: 100px auto 80px; flex-wrap: wrap; justify-content: space-between; } 
.about-imgs .content-box> div { width: 33%; /* height: 150px; */
 margin-bottom: 0.5%; background-size: cover; background-position: center; } 
.about-imgs .content-box> div::after { display: block; content: ""; padding-bottom: 100%; } 
.about-imgs .content-box> .img1 { background-image: url('../img/sub1/image2.jpg'); } 
.about-imgs .content-box .img2 { background-image: url('../img/sub1/image3.jpg'); } 
.about-imgs .content-box .img3 { background-image: url('../img/sub1/image5.jpg'); } 
.about-imgs .content-box .second-txt { flex-direction: column; align-items: start; width: calc(100% - 33.5%); } 
.about-imgs .content-box> .second-txt::after { display: block; display: none; content: ""; padding-bottom: 33%; } 
.about-imgs .content-box> .second-txt> :nth-child(2) { font-size: 60px; font-weight: 600; margin-top: 20px; line-height: 1.5em; } 
.about-imgs .content-box .second-txt .about-txt { display: none; } 
.about-imgs .content-box> .img4 { background-image: url('../img/sub1/image6.jpg'); } 
.about-imgs .content-box .img5 { background-image: url('../img/sub1/image7.jpg'); } 
.about-imgs .content-box .img6 { background: #e7e4df; background: #eae8df;} 
.about-imgs .content-box .img6 p { text-align: center; width: 100%; height: 100%; margin: auto; display: flex; align-items: center; justify-content: center; font-family: "Playfair Display", serif; line-height: 2.4em; font-size: 25px; font-style: italic; } 
.about-imgs .content-box> .img6::after { padding-bottom: 33%; } 
.about-imgs .content-box> .img7 { background-image: url('../img/sub1/image10.jpg'); background-position: 70%; } 

.mo-img { display: none; }

.about-txt { height: auto; text-align: center; margin: 150px auto; font-size: 16px; } 

footer { border-top: 1px solid #ddd; }

@media screen and (max-width: 1200px){
 .aboutline { height: 100px; margin: 80px auto 0; } 

 .about-imgs .content-box { margin: 80px auto 80px; flex-direction: row; } 
 .about-imgs .content-box> .second-txt> :nth-child(2) { font-size: 40px; line-height: 1.2em; } 
 .about-imgs .content-box> .img6 p { line-height: 2.4em; font-size: 18px; } 
 }


@media screen and (max-width: 1024px){
    .about-imgs .content-box> .second-txt> :first-child { font-size: 14px; } 
    .about-imgs .content-box> .img6 p { line-height: 2em; font-size: 15px; } 
    /* .about-imgs .content-box> div::after { padding-bottom: 60%; } */
    .about-imgs .content-box> .img6::after { padding-bottom: 60%; }
    .about-txt { margin: 60px auto 130px; font-size: 14px; } 
 }


@media screen and (max-width: 840px){
 main h1 {font-size: 32px; padding: 0 20px;}

 .aboutline { height: 80px; margin: 60px auto 0; } 

 .about-imgs .content-box { margin: 40px auto 80px; } 
 .about-imgs .content-box> div { width: 100%; margin-bottom: 20px; } 
 .about-imgs .content-box> .second-txt { order: -1; width: 100%; text-align: center; align-items: center; margin: 0;} 
 .about-imgs .content-box> .second-txt> :nth-child(2) { font-size: 2rem; margin: 0; } 
 .about-imgs .content-box .second-txt .about-txt { display: block;  margin: 60px auto 80px; text-align: left; width: 90%;} 
 .about-imgs .content-box> .img6 { background-image: url('../img/sub1/image8.jpg'); background-size: cover; background-position: center; } 
 .about-imgs .content-box> div::after { padding-bottom: 60%; }
 .about-imgs .content-box> .img6::after { padding-bottom: 60%; } 
 .about-imgs .content-box> .img6 p { display: none; } 

 .mo-img { display: block; }
 .about-imgs .content-box> .img8 { background-image: url('../img/sub1/image1.jpg'); background-position: 70%; } 
 .about-imgs .content-box> .img9 { background-image: url('../img/sub1/image4.jpg'); background-position: 70%; } 
 .about-imgs .content-box> .img10 { background-image: url('../img/sub1/image8.jpg'); } 
 .about-imgs .content-box> .img11 { background-image: url('../img/sub1/image11.jpg');  } 
 .about-imgs .content-box> .img12 { background-image: url('../img/sub1/image12.jpg'); background-position: 70%; } 

 .about-txt { display: none; } 
}

@media screen and (max-width: 600px){
    .aboutline { height: 60px; }
}