﻿.main-area{
  font-family: var(--hirakaku);
	font-weight: normal;
	overflow: hidden;
	box-sizing: border-box;
  background-color: #fff;
}

.main-area a {
  transition: all .3s;
}

.main-area img {
	width: 100%;
	height: auto;
}

.sp_only{
	display: block;
}

.pc_only{
	display: none;
}

/************** js **************/
.main-area .js_imgFadeIn {
  opacity: 0;
  transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
  transform: translateY(100px);
}

.main-area .imgAnimated{
  opacity: 1;
  transform: translateX(0);
  transform: translateY(0);
}

/************** common **************/
/*** sec_tax ***/
.sec_tax{
  margin-top: calc(10* (100vw /375));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8* (100vw /375)) 0;
}

.sec_tax li{
  width: calc(230* (100vw /375));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: calc(15* (100vw /375));
  letter-spacing: 0.1em;
  color: #fff;
}

.sec_tax_btn{
  margin-top: calc(6* (100vw /375));
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(80* (100vw /375));
  height: calc(22* (100vw /375));
  font-size: calc(13* (100vw /375));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #C6A89E;
  background-color: #fff;
}

/************** mv **************/
.mv_bg{
  background-color: #D9C6C0;
  padding-bottom: calc(52* (100vw /375));
}

.mv{
  margin: 0 auto;
  text-align: center;
}

.mv_img{
  margin-bottom: calc(60* (100vw /375));
}

.mv_ttl{
  margin-bottom: calc(23* (100vw /375));
  font-size: calc(24* (100vw /375));
  letter-spacing: 0.09em;
  line-height: 1.29;
  font-family: merriweather, serif;
  font-weight: 700;
  color: #fff;
}

.mv_text{
  font-size: calc(14* (100vw /375));
  font-weight: 600;
  line-height: 2;
  color: #fff;
}

/************** sec01 **************/
.sec01_bg{
  margin-bottom: calc(60* (100vw /375));
  padding-bottom: calc(60* (100vw /375));
  background-color: #D9C6C0;
}

.sec01{
  position: relative;
  z-index: 2;
}

.sec01::before{
  z-index: -1;
  width: calc(345* (100vw /375));
  height: calc(288* (100vw /375));
  content: '';
  display: block;
  position: absolute;
  top: auto;
  bottom: calc(120* (100vw /375));
  left: calc(15* (100vw /375));
  background-size: contain;
  background-color: #C6A89E;
}

.sec01_img_1{
  margin: 0 auto calc(30* (100vw /375));
  width: calc(315* (100vw /375));
}

.sec01_img_2{
  margin: 0 auto calc(30* (100vw /375));
  width: calc(315* (100vw /375));
}

/*** sec01_sub_box_1 ***/
.sec01_sub_box_1{
  margin: 0 auto;
  width: calc(255* (100vw /375));
  height: calc(528* (100vw /375));
  position: relative;
}

.sec01_img_3{
  width: calc(200* (100vw /375));
  position: absolute;
  right: 0;
  left: auto;
}

.sec01_img_4{
  width: calc(200* (100vw /375));
  position: absolute;
  top: auto;
  bottom: 0;
}

/************** sec02 **************/
.sec02{
  margin-bottom: calc(61* (100vw /375));
  padding: calc(32* (100vw /375)) 0;
  background-color: #ABC3DD;
}

.sec02_box{
  margin: 0 auto;
  width: calc(355* (100vw /375));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10* (100vw /375)) 0;
}

.sec02_sub_box{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.sec02_img{
  width: calc(172* (100vw /375));
}

.sec02 .sec_tax{
  margin: 0;
}

.sec02 .sec_tax_btn{
  color: #fff;
  background-color: #759ECA;
}

/************** sec03 **************/
.sec03{
  margin: 0 auto calc(62* (100vw /375));
  width: calc(315* (100vw /375));
}

.sec03_box{
  display: flex;
  flex-wrap: wrap;
  gap: calc(20* (100vw /375)) 0;
}

.sec03_img{
  width: calc(315* (100vw /375));
}

.sec03 .sec_tax li{
  color: #A29E93;
}

.sec03 .sec_tax_btn{
  color: #fff;
  background-color: #A29E93;
}

/************** sec04 **************/
.sec04_bg{
  margin-bottom: calc(63* (100vw /375));
  padding: calc(60* (100vw /375)) 0;
  background-color: #C5D6B2;
}

.sec04{
  position: relative;
  z-index: 2;
}

.sec04::before{
  z-index: -1;
  width: calc(254* (100vw /375));
  height: calc(200* (100vw /375));
  content: '';
  display: block;
  position: absolute;
  top: calc(264* (100vw /375));
  left: calc(30* (100vw /375));
  background-size: contain;
  background-color: #A6BF8B;
}

.sec04_box{
  margin: 0 auto;
  width: calc(355* (100vw /375));
  height: calc(745* (100vw /375));
  position: relative;
}

.sec04_img_1{
  margin: 0 auto;
  width: calc(260* (100vw /375));
}

.sec04_img_2{
  width: calc(170* (100vw /375));
  position: absolute;
  top: auto;
  bottom: calc(165* (100vw /375));
}

.sec04_img_3{
  width: calc(167* (100vw /375));
  position: absolute;
  top: auto;
  right: 0;
  bottom: calc(118* (100vw /375));
  left: auto;
}

.sec04 .sec_tax_btn{
  color: #fff;
  background-color: #A6BF8B;
}

.sec04 .sec_tax{
  position: absolute;
  top: auto;
  bottom: 0;
}

/************** sec05 **************/
.sec05{
  margin: 0 auto calc(123* (100vw /375));
  position: relative;
}

.sec05::before{
  width: calc(101* (100vw /375));
  height: calc(31* (100vw /375));
  content: '';
  display: block;
  position: absolute;
  top: auto;
  right: calc(30* (100vw /375));
  bottom: calc(-63* (100vw /375));
  left: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/sp_copy.svg);
}

.sec05_box{
  margin: 0 auto;
  width: calc(315* (100vw /375));
}

.sec05 .sec_tax li{
  color: #48726C;
}

.sec05 .sec_tax_btn{
  color: #fff;
  background-color: #48726C;
}

/************** btn **************/
.sec_btn{
  margin: 0 auto calc(80* (100vw /375));
  width: calc(300* (100vw /375));
}

.sec_btn_img_1{
  margin-bottom: calc(20* (100vw /375));
}


/* ===============================================
### PC用デザイン###
=============================================== */
@media screen and (min-width:768px) {

.sp_only{
  display: none;
}

.pc_only{
  display: block;
}

.li_br{
  width: 100%;
}

.main-area .sec{
  max-width: 124rem;
  padding: 0 2rem
}

/************** common **************/
/*** sec_tax ***/
.sec_tax{
  margin-top: 2.2rem;
  justify-content: flex-start;
  gap: .4rem 0;
}

.sec01 .sec_tax{
  gap: .6rem 0;
}

.sec03 .sec_tax{
  margin-top: 2rem;
}

.sec_tax li{
  width: max-content;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: #fff;
}

.sec_tax_btn{
  margin: 0 0 0 .9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  height: 2.2rem;
  font-size: 1.3rem;
}

/************** mv **************/
.mv_bg{
  padding-bottom: 5.2rem;
}

.mv{
  margin: 0 auto;
}

.mv_img{
  margin: 0 auto 6rem;
}

.mv_ttl{
  margin-bottom: 2.2rem;
  font-size: 4.6rem;
  line-height: 1.26;
  font-family: merriweather, serif;
}

.mv_text{
  font-size: 1.6rem;
}

/************** sec01 **************/
.sec01_bg{
  margin-bottom: 6rem;
  padding-bottom: 6.2rem;
}

.sec01{
  margin: 0 auto;
}

.sec01::before{
  margin: 0 calc(78% - 100vw);
  width: 100vw;
  height: 46rem;
  bottom: 36rem;
  left: 0;
}

.sec01_img_1{
  margin: 0 auto 6rem;
  width: 56rem;
}

/*** sec01_box_2 ***/
.sec01_box_2{
  margin: 0 auto;
  width: 100rem;
  display: flex;
  justify-content: space-between;
}

.sec01_img_2{
  margin: 0;
  width: 44rem;
}

/*** sec01_sub_box_1 ***/
.sec01_sub_box_1{
  margin: 0;
  width: 50rem;
  height: 108.9rem;
  position: relative;
}

.sec01_img_3{
  width: 40rem;
  position: absolute;
  right: 0;
  left: auto;
}

.sec01_img_4{
  width: 40rem;
  position: absolute;
  top: auto;
  bottom: 0;
}

/************** sec02 **************/
.sec02{
  margin: 0 auto 6rem;
  padding: 6rem 0!important;
  width: 100rem;
}

.sec02_box{
  margin: 0 auto;
  width: 88rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6rem 0;
}

.sec02_sub_box{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.sec02_img{
  width: 41rem;
}

.sec02 .sec_tax{
  margin: 0 0 0 6rem;
  flex-direction: column;
}

/************** sec03 **************/
.sec03{
  margin: 0 auto 6rem;
  width: 100%;
}

.sec03_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0;
}

.sec03_img{
  width: 57rem;
}

/************** sec04 **************/
.sec04_bg{
  margin: 0 0 6rem 0;
  padding: 6rem 0!important;
}

.sec04{
  margin: 0 auto;
}

.sec04::before{
  width: 79rem;
  height: 65rem;
  top: 24rem;
  left: 26rem;
}

.sec04_box{
  margin: 0 auto;
  width: 100rem;
  height: 124rem;
  position: relative;
}

.sec04_img_1{
  margin: 0 0 0 auto;
  width: 56rem;
}

.sec04_img_2{
  width: 38rem;
  position: absolute;
  top: auto;
  bottom: 25.6rem;
}

.sec04_img_3{
  width: 36rem;
  position: absolute;
  top: auto;
  right: 20rem;
  bottom: 0;
  left: auto;
}

.sec04 .sec_tax{
  flex-direction: column;
  bottom: 18.4rem;
}

/************** sec05 **************/
.sec05{
  margin: 0 auto 13.1rem;
}

.sec05::before{
  width: 14rem;
  height: 4.3rem;
  position: absolute;
  top: auto;
  right: 2rem;
  bottom: -10rem;
  left: auto;
  background-image: url(../img/pc_copy.svg);
}

.sec05_box{
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sec05_img{
  width: 38rem;
}

.sec05 .sec_tax{
  margin-top: 1.9rem;
  flex-direction: column;
}

/************** btn **************/
.sec_btn{
  margin: 0 auto 12.2rem;
  width: 30rem;
}

.sec_btn_img_1{
  margin-bottom: 2rem;
}

}

/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px){
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
}

