@charset "utf-8";



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

/* header
--------------------------------------------*/
header {
position: fixed;
top: 0;
background: #eceae0;
padding: 20px 0;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
transition: 0.5s;
z-index: 50;
}

header .header .logo_Hed { max-width: 300px; width: 25%; display: block; }
header .header .logo_Hed_w { display: none; }

header .hed_wrap .menu ul li a { color: #2c2321; }

header .hed_wrap .hed_button_w { display: none; }
header .hed_wrap .hed_button { display: flex; flex-wrap: wrap; align-items: center; }
header .hed_wrap .hed_button .x { width: 20px; margin-right: 25px; }
header .hed_wrap .hed_button .insta { width: 20px; }

header .insta_banner { display: none; }



/* shop
--------------------------------------------*/
.shop { position: relative; background: #b66f9a; }
.shop .w1200 { position: relative; padding: 0px 0 100px; }
.shop .illust { position: absolute; left: 0; bottom: 0; width: 100%; }



.title { position: relative; padding: 150px 10% 250px; background: #eceae0; color: #2c2321; }
.title .txtbox h2 { font-size: 3rem; color: #b66f9a; }
.title .txtbox h2 span { display: block; font-size: 2rem; }
.title .txtbox .tit { width: 400px; margin-top: 20px; }



.read { text-align: center; color: #eeeee9; }
.read h3 { font-size: 3.6rem; margin-bottom: 20px; }
.read p { font-size: 1.8rem; margin-bottom: 50px; }
.read p span { font-size: 3rem; }



.box01 { background: #eeeee9; padding: 100px 0 0; color: #2c2321; }
.box01 .txtbox { text-align: center; }
.box01 .txtbox h3 { font-size: 4.2rem; margin-bottom: 40px; }
.box01 .txtbox p span { font-size: 1.4rem; display: block; padding-top: 20px; }

.box01 .box_img { width: 70%; margin: 0 auto; }

.box01 .l-inner { overflow: hidden; }
.box01 .swiper { overflow: visible; padding: 0 0px 70px; }
.box01 .swiper-slide { width: 37rem; }
.box01 .swiper-slide .slide-content { padding: 10px; text-align: center; }
.box01 .swiper-slide h4 { font-size: 2rem; margin-bottom: 5px; }
.box01 .swiper-slide p { font-size: 1.8rem; color: #b66f9a; }

.box01 .swiper-controller .swiper-pagination { bottom: 0; }
.box01 .swiper-controller .swiper-button-prev,
.box01 .swiper-controller .swiper-button-next { color: #b66f9a; bottom: 0%; top: auto; }
.box01 .swiper-controller .swiper-button-prev { right: 120px; left: auto; }



.box02 { background: #eeeee9; color: #2c2321; }
.box02 .txtbox { text-align: center; }
.box02 .txtbox h3 { font-size: 4.2rem; margin-bottom: 40px; }

.box02 p.tamanegi { position: relative; width: 90%; margin: auto; padding: 40px; border: 8px solid #b66f9a; border-radius: 40px; background: #fff; box-sizing: border-box; }
.box02 p.tamanegi img { position: absolute; top: -20px; right: -40px; width: 150px; }
.box02 p.tamanegi span { font-size: 2.4rem; color: #b66f9a; }

.box02 .box_img { width: 70%; margin: 0 auto; }

.box02 ul.flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 80px;
}
.box02 ul.flex_wrap li { width: 40%; margin: 0 2%; }
.box02 ul.flex_wrap li p { font-size: 1.6rem; margin-top: 10px; }
.box02 ul.flex_wrap li p span { display: block; font-size: 1.4rem; }



.box03 { background: #eeeee9; color: #2c2321; }
.box03 .txtbox { text-align: center; }
.box03 .txtbox h3 { font-size: 4.2rem; margin-bottom: 40px; }
.box03 .txtbox p span { font-size: 1.4rem; display: block; padding-top: 20px; }

.box03 .box_img { width: 70%; margin: 0 auto; }



.box04 { background: #eeeee9; color: #2c2321; padding: 50px 0 0; }
.box04 .txtbox { text-align: center; }
.box04 .txtbox h3 { font-size: 4.2rem; margin-bottom: 40px; }
.box04 .txtbox p span { font-size: 1.4rem; display: block; padding-top: 20px; }

.box04 .l-inner { overflow: hidden; margin-top: 80px; }
.box04 .swiper { overflow: visible; padding: 0 0px 70px; }
.box04 .swiper-slide { width: 37rem; }
.box04 .swiper-slide .slide-content { padding: 10px; text-align: center; }
.box04 .swiper-slide h4 { font-size: 2rem; margin-bottom: 5px; }
.box04 .swiper-slide p { font-size: 1.8rem; color: #b66f9a; }

.box04 .swiper-controller .swiper-pagination { bottom: 0; }
.box04 .swiper-controller .swiper-button-prev,
.box04 .swiper-controller .swiper-button-next { color: #b66f9a; bottom: 0%; top: auto; }
.box04 .swiper-controller .swiper-button-prev { right: 120px; left: auto; }



.box05 { background: #eeeee9; color: #2c2321; }
.box05 .txtbox { text-align: center; }
.box05 .txtbox h3 { font-size: 4.2rem; margin-bottom: 40px; }
.box05 .txtbox p span { font-size: 1.4rem; display: block; padding-top: 20px; }

.box05 .box_img { width: 70%; margin: 0 auto; }

.box05 .l-inner { overflow: hidden; }
.box05 .swiper { overflow: visible; padding: 0 0px 70px; }
.box05 .swiper-slide { width: 37rem; }
.box05 .swiper-slide .slide-content { padding: 10px; text-align: center; }
.box05 .swiper-slide h4 { font-size: 2rem; margin-bottom: 5px; }
.box05 .swiper-slide p { font-size: 1.8rem; color: #b66f9a; }

.box05 .swiper-controller .swiper-pagination { bottom: 0; }
.box05 .swiper-controller .swiper-button-prev,
.box05 .swiper-controller .swiper-button-next { color: #b66f9a; bottom: 0%; top: auto; }
.box05 .swiper-controller .swiper-button-prev { right: 120px; left: auto; }



.box06 { background: #eeeee9; color: #2c2321; }
.box06 .txtbox { text-align: center; }
.box06 .txtbox h3 { font-size: 4.2rem; margin-bottom: 40px; }
.box06 .txtbox p span { font-size: 1.4rem; display: block; padding-top: 20px; }

.box06 .box_img { width: 70%; margin: 0 auto; }

.box06 .l-inner { overflow: hidden; }
.box06 .swiper { overflow: visible; padding: 0 0px 70px; }
.box06 .swiper-slide { width: 37rem; }
.box06 .swiper-slide .slide-content { padding: 10px; text-align: center; }
.box06 .swiper-slide h4 { font-size: 2rem; margin-bottom: 5px; }
.box06 .swiper-slide p { font-size: 1.8rem; color: #b66f9a; }

.box06 .swiper-controller .swiper-pagination { bottom: 0; }
.box06 .swiper-controller .swiper-button-prev,
.box06 .swiper-controller .swiper-button-next { color: #b66f9a; bottom: 0%; top: auto; }
.box06 .swiper-controller .swiper-button-prev { right: 120px; left: auto; }

.box06 p.txt { text-align: center; }
.box06 p.txt span { display: inline-block; padding: 10px; box-sizing: border-box; background: #b66f9a; color: #fff; margin-bottom: 5px; }





}













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

/* header
--------------------------------------------*/
header {
position: fixed;
top: 0;
background: #eceae0;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
transition: 0.5s;
z-index: 50;
}

header .header .logo_Hed_w { display: none; }
header .header .logo_Hed { width: 220px; position: absolute; left: 5%; display: block; z-index: 200; }

header .hed_wrap ul.hed_button_w { display: none; }
header .hed_wrap ul.hed_button { display: flex; flex-wrap: wrap; justify-content: end; align-items: end; position: relative; z-index: 100; }
header .hed_wrap ul.hed_button .x { width: 20px; margin-right: 15px; }
header .hed_wrap ul.hed_button .insta { width: 20px; margin-right: 15px; }

header .insta_banner { display: none; }

header .spbutton .menu-trigger span { background-color: #2c2321; }
header .spbutton .menu-trigger.active span { background-color: #eeeeea; }



/* shop
--------------------------------------------*/
.shop { position: relative; background: #b66f9a; }
.shop .w1200 { position: relative; padding: 0px 0 50px; }
.shop .illust { position: absolute; left: 0; bottom: 0; width: 100%; }



.title { position: relative; padding: 100px 5% 120px; background: #eceae0; color: #2c2321; }
.title .txtbox h2 { font-size: 2rem; color: #b66f9a; }
.title .txtbox h2 span { display: block; font-size: 2rem; }
.title .txtbox .tit { width: 250px; margin-top: 10px; }



.read { text-align: center; color: #eeeee9; }
.read h3 { font-size: 3rem; margin-bottom: 20px; }
.read p { font-size: 1.6rem; margin-bottom: 30px; }
.read p span { font-size: 2.6rem; }



.box01 { background: #eeeee9; padding: 100px 0 0; color: #2c2321; }
.box01 .txtbox { text-align: center; }
.box01 .txtbox h3 { font-size: 2.6rem; margin-bottom: 10px; }
.box01 .txtbox p span { font-size: 1.4rem; display: block; padding-top: 20px; }

.box01 .l-inner { overflow: hidden; }
.box01 .swiper { overflow: visible; padding: 0 0px 70px; }
.box01 .swiper-slide { width: 18rem; }
.box01 .swiper-slide .slide-content { padding: 10px; text-align: center; }
.box01 .swiper-slide h4 { font-size: 1.8rem; margin-bottom: 5px; }
.box01 .swiper-slide p { font-size: 1.4rem; color: #b66f9a; }

.box01 .swiper-controller .swiper-pagination { bottom: 0; }
.box01 .swiper-controller .swiper-button-prev,
.box01 .swiper-controller .swiper-button-next { color: #b66f9a; bottom: 0%; top: auto; }
.box01 .swiper-controller .swiper-button-prev { right: 90px; left: auto; }



.box02 { background: #eeeee9; color: #2c2321; }
.box02 .txtbox { text-align: center; }
.box02 .txtbox h3 { font-size: 2.6rem; margin-bottom: 10px; }

.box02 p.tamanegi { position: relative; width: 100%; margin: auto; padding: 20px 30px; border: 5px solid #b66f9a; border-radius: 30px; background: #fff; box-sizing: border-box; }
.box02 p.tamanegi img { position: absolute; top: -30px; right: -20px; width: 100px; }
.box02 p.tamanegi span { font-size: 1.6rem; color: #b66f9a; }

.box02 ul.flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 50px;
}
.box02 ul.flex_wrap li { width: 48%; }
.box02 ul.flex_wrap li p { font-size: 1.4rem; margin-top: 10px; }
.box02 ul.flex_wrap li p span { display: block; font-size: 1.2rem; }



.box03 { background: #eeeee9; color: #2c2321; }
.box03 .txtbox { text-align: center; }
.box03 .txtbox h3 { font-size: 2.6rem; margin-bottom: 10px; }
.box03 .txtbox p span { font-size: 1.4rem; display: block; padding-top: 20px; }



.box04 { background: #eeeee9; color: #2c2321; padding: 50px 0 0; }
.box04 .txtbox { text-align: center; }
.box04 .txtbox h3 { font-size: 2.6rem; margin-bottom: 10px; }
.box04 .txtbox p span { font-size: 1.4rem; display: block; padding-top: 20px; }

.box04 .l-inner { overflow: hidden; margin-top: 30px; }
.box04 .swiper { overflow: visible; padding: 0 0px 70px; }
.box04 .swiper-slide { width: 18rem; }
.box04 .swiper-slide .slide-content { padding: 10px; text-align: center; }
.box04 .swiper-slide h4 { font-size: 1.8rem; margin-bottom: 5px; }
.box04 .swiper-slide p { font-size: 1.4rem; color: #b66f9a; }

.box04 .swiper-controller .swiper-pagination { bottom: 0; }
.box04 .swiper-controller .swiper-button-prev,
.box04 .swiper-controller .swiper-button-next { color: #b66f9a; bottom: 0%; top: auto; }
.box04 .swiper-controller .swiper-button-prev { right: 90px; left: auto; }



.box05 { background: #eeeee9; color: #2c2321; }
.box05 .txtbox { text-align: center; }
.box05 .txtbox h3 { font-size: 2.6rem; margin-bottom: 10px; }
.box05 .txtbox p span { font-size: 1.4rem; display: block; padding-top: 20px; }

.box05 .l-inner { overflow: hidden; }
.box05 .swiper { overflow: visible; padding: 0 0px 70px; }
.box05 .swiper-slide { width: 18rem; }
.box05 .swiper-slide .slide-content { padding: 10px; text-align: center; }
.box05 .swiper-slide h4 { font-size: 1.8rem; margin-bottom: 5px; }
.box05 .swiper-slide p { font-size: 1.4rem; color: #b66f9a; }

.box05 .swiper-controller .swiper-pagination { bottom: 0; }
.box05 .swiper-controller .swiper-button-prev,
.box05 .swiper-controller .swiper-button-next { color: #b66f9a; bottom: 0%; top: auto; }
.box05 .swiper-controller .swiper-button-prev { right: 90px; left: auto; }



.box06 { background: #eeeee9; color: #2c2321; }
.box06 .txtbox { text-align: center; }
.box06 .txtbox h3 { font-size: 2.6rem; margin-bottom: 10px; }
.box06 .txtbox p span { font-size: 1.4rem; display: block; padding-top: 20px; }

.box06 .l-inner { overflow: hidden; }
.box06 .swiper { overflow: visible; padding: 0 0px 70px; }
.box06 .swiper-slide { width: 18rem; }
.box06 .swiper-slide .slide-content { padding: 10px; text-align: center; }
.box06 .swiper-slide h4 { font-size: 1.8rem; margin-bottom: 5px; }
.box06 .swiper-slide p { font-size: 1.4rem; color: #b66f9a; }

.box06 .swiper-controller .swiper-pagination { bottom: 0; }
.box06 .swiper-controller .swiper-button-prev,
.box06 .swiper-controller .swiper-button-next { color: #b66f9a; bottom: 0%; top: auto; }
.box06 .swiper-controller .swiper-button-prev { right: 90px; left: auto; }

.box06 p.txt { font-size: 1.3rem; margin-top: 20px; text-align: center; }
.box06 p.txt span { display: inline-block; padding: 10px; box-sizing: border-box; background: #b66f9a; color: #fff; margin-bottom: 5px; }



}