@charset "utf-8";

/*  common
----------------------------------------------------------------------------------------------------------- */
h2{font-family: 'Philosopher', sans-serif;
    font-weight: 700;
    font-size: clamp(20px,8vw,130px);
    color: #fff;
    text-align: center;
    width: 95%;
    margin: 0 auto 3% auto;
    text-shadow: -1px 1px 10px #7e5344, -1px 1px 10px #7e5344;
}



/*  about
----------------------------------------------------------------------------------------------------------- */


.about-wrapper{
background:url(../img/about/about-bg.jpg) #fff1dc top center no-repeat;
-moz-background-size:100% auto;
background-size:100% auto;
padding-top: 10%;
font-weight: 600;
color: #685348;
text-align: center;
line-height:1.81;
font-size: clamp(18px,1.5vw,47px); /*最小値, 基準値, 最大値 */
}


.about-container{
background:url(../img/top/about-bg.png) top center repeat-y;
-moz-background-size:100% auto;
background-size:100% auto;
width: 90%;
margin: 0 auto 3% auto;
padding-top: 5%;
padding-bottom: 3%;
}

.about-text{width: 80%; padding: 3% 0; margin: 0 auto;}
.about-text .point{color: #ff4d1c; font-size: clamp(20px,2vw,61px); }


.about-icon{width: 30%; max-width: 252px; margin: 0 auto 0 auto; padding: 10% 0 5% 0;}
.about-img{width: 100%; padding-bottom: 10%;}
.about-img img{width: 100%;}

@media screen and (max-width: 768px) {

h2{ font-size: clamp(20px,10vw,80px);}

.about-wrapper{
background:url(../img/about/about-bg.jpg) #fff1dc top center no-repeat;
-moz-background-size:auto 100%;
background-size: auto 100%;
font-size: clamp(16px,3vw,20px);
}
.about-wrapper .point{font-size: clamp(15px,3.5vw,25px);}

.about-container{
background:rgba(255,241,219,0.85);
width: 95%;
margin: 0 auto 3% auto;
padding-top: 5%;
padding-bottom: 3%;
}
.swiper-button-d-box{width: 90%; max-width: 700px;}

}