@charset "UTF-8";

/* CSS Document */


/*PC*/
@media print, screen and (min-width: 768px) {


/*
----------------------------*/
body { background: #fff7ee; }

.hedImg { background: url(../images/about/hedImg.png) center/cover no-repeat; }

.cont01 { position: relative; padding: 100px 15% 0; margin: 0 auto 150px; }
.cont01 h2 { position: relative; font-size: 22rem; font-weight: 400; line-height: 0.8; color: #b2620d29; text-align: center; font-family: "Zeyada", cursive; z-index: 1; }
.cont01 p { position: relative; font-size: 1.5rem; line-height: 2.4; color: #b2620d; text-align: center; margin-bottom: 50px; z-index: 1; font-family: 'Noto Serif JP', serif; }

.cont01 .imgbox figure { position: absolute; z-index: 0; opacity: 1; transition: opacity 0.7s ease; }
.cont01 .imgbox .img01 { width: 33%; top: 10%; left: 0; }
.cont01 .imgbox .img02 { width: 25%; top: 30%; right: 5%; }
.cont01 .imgbox .img03 { width: 27%; top: 60%; left: 3%; }
.cont01 .imgbox .img04 { width: 33%; top: 80%; right: 0%; }



}






/*sp*/
@media only screen and (max-width: 767px) {


/*
----------------------------*/
body { background: #fff7ee; overflow: hidden; }

.hedImg { background: url(../images/about/hedImg.png) center/cover no-repeat; }

.cont01 { position: relative; padding: 100px 10% 0; margin: 0 auto 150px; }
.cont01 h2 { position: relative; font-size: 14rem; font-weight: 400; line-height: 0.8; color: #b2620d29; text-align: center; font-family: "Zeyada", cursive; z-index: 1; }
.cont01 p { position: relative; font-size: 1.4rem; line-height: 2.2; color: #b2620d; text-align: center; margin-bottom: 40px; z-index: 1; font-family: 'Noto Serif JP', serif; }

.cont01 .imgbox figure { position: absolute; z-index: 0; opacity: 1; transition: opacity 0.7s ease; }
.cont01 .imgbox figure::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fff7ee; opacity: 0.6; }
.cont01 .imgbox .img01 { width: 35%; top: 10%; left: 0; }
.cont01 .imgbox .img02 { width: 25%; top: 30%; right: 5%; }
.cont01 .imgbox .img03 { width: 30%; top: 60%; left: 3%; }
.cont01 .imgbox .img04 { width: 35%; top: 80%; right: 0%; }




}