/* -- -- */
.txt {
   text-align: justify;
}

@media only screen and (max-width: 767px) {
   .txt br {
      display: none;
   }

   .h-30 {
      font-family: 'Shippori Mincho', serif;
      font-weight: 400;
      font-size: 6vw;
      line-height: 2;
      letter-spacing: 0.1em;
   }

   .price {
      font-family: 'Shippori Mincho', serif;
      font-weight: 400;
      font-size: 5vw;
      line-height: 1.5;
      letter-spacing: 0.1em;
   }

   .price small {
      font-size: 4vw;
   }
}

@media only screen and (min-width: 768px) {
   .h-30 {
      font-family: 'Shippori Mincho', serif;
      font-weight: 400;
      font-size: 30px;
      line-height: 45px;
      letter-spacing: 0.1em;
   }

   .price {
      font-family: 'Shippori Mincho', serif;
      font-weight: 400;
      font-size: 25px;
      line-height: 34px;
      letter-spacing: 0.1em;
   }

   .price small {
      font-size: 20px;
   }
}

/* -- -- */
#key {
   background: url("../img/menuaw/key.jpg") no-repeat center top/cover;
}

@media only screen and (max-width: 767px) {
   #key:before {
      content: '';
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.16);
      position: absolute;
      top: 0;
      left: 0;
   }
}

/* --- --- */
#sec1 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec1 {
      padding: 15vw 0;
   }

   #sec1 h2 {
      width: 30vw;
      margin: 0 auto;
   }

   #sec1 .txt {
      padding-top: 4vw;
   }

   #sec1 .photo {
      margin-top: 4vw;
      position: relative;
   }

   #sec1 .photo li {
      padding-top: 4vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      padding: 0 20px;
   }

   #sec1 .box {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      padding: 74px 48px 0 0;
   }

   #sec1 .txt {
      height: 470px;
      letter-spacing: 0;
      padding: 88px 38px 10px 0;
   }

   #sec1 .photo {
      padding-bottom: 128px;
      position: relative;
   }

   #sec1 .photo li:nth-child(1) {
      position: absolute;
      top: -200px;
      left: -250px;
   }

   #sec1 .photo li:nth-child(2) {
      padding-left: 100px;
   }

   #sec1 .photo li:nth-child(3) {
      position: absolute;
      bottom: -60px;
      right: -162px;
      z-index: 1;
   }
}

/* --- --- */
#sec2 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec2 {
      padding: 5vw 0 15vw;
   }

   #sec2 [class*="box"] {
      padding-top: 12vw;
   }

   #sec2 [class*="box"] .photo {
      position: relative;
   }

   #sec2 [class*="box"] .photo:before {
      content: '';
      width: 80%;
      height: 80%;
      background: url("../img/shared/bg-deco.png") repeat center top;
      position: absolute;
      bottom: -5vw;
   }

   #sec2 [class*="box"] .col {
      padding-top: 6vw;
   }

   #sec2 [class*="box"] .txt {
      padding-top: 4vw;
   }

   #sec2 .box1 .photo:before {
      right: -5.33vw;
   }

   #sec2 .box2 .photo:before {
      left: -5.33vw;
   }

   #sec2 .photo1 {
      padding-top: 12vw;
      position: relative;
   }

   #sec2 .photo1:before {
      content: '';
      width: 30vw;
      height: 40vw;
      background: url("../img/menuaw/sec2-deco.png") no-repeat center top/cover;
      position: absolute;
      top: -20vw;
      right: 0;
   }

   #sec2 .photo1:after {
      content: '';
      width: 80%;
      height: 80%;
      background: url("../img/shared/bg-deco.png") repeat center top;
      position: absolute;
      bottom: 0;
      right: -5.33vw;
   }

   #sec2 .photo1 h3 {
      padding-top: 4vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 {
      padding: 133px 0 80px;
   }

   #sec2 .wrap {
      width: 100%;
      max-width: 1260px;
   }

   #sec2 [class*="box"] {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
   }

   #sec2 [class*="box"] .col {
      width: 400px;
   }

   #sec2 [class*="box"] .txt {
      letter-spacing: 0;
   }

   #sec2 [class*="box"] .photo {
      width: calc(100% - 465px);
      position: relative;
   }

   #sec2 .box1 {
      flex-direction: row-reverse;
      gap: 47px;
      padding-bottom: 70px;
   }

   #sec2 .box1 .photo:before {
      content: '';
      width: 529px;
      height: 385px;
      background: url("../img/shared/bg-deco.png") repeat center top;
      position: absolute;
      bottom: -50px;
      right: -50px;
   }

   #sec2 .box1 .col {
      padding-bottom: 24px;
   }

   #sec2 .box1 .price {
      padding-bottom: 35px;
   }

   #sec2 .box2 {
      gap: 49px;
      padding-bottom: 70px;
   }

   #sec2 .box2 .photo:before {
      content: '';
      width: 529px;
      height: 385px;
      background: url("../img/shared/bg-deco.png") repeat center top;
      position: absolute;
      bottom: -50px;
      left: -50px;
   }

   #sec2 .box2 .col {
      padding-bottom: 14px;
   }

   #sec2 .box2 .price {
      padding-bottom: 35px;
   }

   #sec2 .photo1 {
      width: 600px;
      margin-left: auto;
      padding-right: 90px;
      position: relative;
   }

   #sec2 .photo1:before {
      content: '';
      width: 529px;
      height: 385px;
      background: url("../img/shared/bg-deco.png") repeat center top;
      position: absolute;
      bottom: 0;
      right: -120px;
   }

   #sec2 .photo1:after {
      content: '';
      width: 325px;
      height: 515px;
      background: url("../img/menuaw/sec2-deco.png") no-repeat center top/cover;
      position: absolute;
      top: 40px;
      right: 99%;
   }

   #sec2 .photo1 h3 {
      padding-top: 20px;
   }
}

@media only screen and (min-width: 1201px) {
   #sec2 [class*="box"] .photo {
      width: 690px;
   }
}

/* --- --- */
#sec3 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec3 {
      padding: 15vw 0;
   }

   #sec3:before {
      content: '';
      width: 100%;
      border-top: 1px solid #475b3e;
      position: absolute;
      top: 25vw;
      left: 0;
      transform: skewY(-25deg);
   }

   #sec3 h2 {
      background-color: #fff;
      margin: 0 auto;
   }

   #sec3 .price {
      padding-top: 4vw;
   }

   #sec3 .txt {
      padding-top: 4vw;
   }

   #sec3 .photo {
      padding-top: 8vw;
   }

   #sec3 .photo p+p {
      padding-top: 4vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 {
      padding: 150px 0 166px;
   }

   #sec3:before {
      content: '';
      width: 100%;
      border-top: 1px solid #475b3e;
      position: absolute;
      top: 0;
      left: -625px;
      transform: skewY(39deg);
   }

   #sec3 .wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      width: 100%;
      max-width: 1360px;
   }

   #sec3 .col {
      width: 440px;
      text-align: center;
      padding-left: 20px;
   }

   #sec3 h2 {
      height: 110px;
      text-align: left;
      background-color: #fff;
      margin: 0 auto;
      padding: 0 32px;
   }

   #sec3 .price {
      padding-top: 81px;
   }

   #sec3 .txt {
      text-align: center;
      padding-top: 7px;
   }

   #sec3 .photo {
      width: calc(100% - 460px);
      max-width: 850px;
      padding-top: 73px;
   }

   #sec3 .photo p+p {
      letter-spacing: 0;
      padding-top: 3px;
   }
}

/* --- --- */
#sec4 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec4 {
      background: url("../img/menuaw/sec4-deco.png") no-repeat top right/50% auto;
      padding: 0 0 15vw;
   }

   #sec4 h2 {
      margin: 0 auto;
   }

   #sec4 .price {
      padding-top: 4vw;
   }

   #sec4 .txt {
      padding-top: 4vw;
   }

   #sec4 .photo {
      padding-top: 8vw;
   }

   #sec4 .photo p+p {
      padding-top: 4vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec4 {
      padding: 0 0 154px;
   }

   #sec4 .wrap {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      gap: 84px;
   }

   #sec4 .wrap:before {
      content: '';
      width: 460px;
      height: 430px;
      background: url("../img/menuaw/sec4-deco.png") no-repeat center top/cover;
      position: absolute;
      top: -135px;
      right: -257px;
   }

   #sec4 .col {
      width: 266px;
      text-align: center;
   }

   #sec4 h2 {
      height: 220px;
      text-align: left;
      margin: 0 auto;
   }

   #sec4 .price {
      padding-top: 25px;
   }

   #sec4 .txt {
      letter-spacing: 0;
      text-align: center;
      padding-top: 3px;
   }

   #sec4 .photo {
      width: 600px;
      padding-top: 8px;
   }
}

/* --- --- */
#sec5 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec5 {
      padding: 0 0 15vw;
   }

   #sec5 .col {
      background: url("../img/shared/bg01.png") repeat center top;
      padding: 8vw 5.33vw;
   }

   #sec5 .txt {
      padding-top: 4vw;
   }

   #sec5 h3 {
      padding-top: 3vw;
   }

}

@media only screen and (min-width: 768px) {
   #sec5 {
      margin-bottom: 144px;
      padding: 83px 0 11px;
   }

   #sec5:before {
      content: '';
      width: calc(50% + 90px);
      height: 100%;
      background: url("../img/shared/bg01.png") repeat center top;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec5 .wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 70px;
   }

   #sec5 .col {
      width: 460px;
      text-align: center;
      padding-top: 38px;
      margin-left: -10px;
   }

   #sec5 .txt {
      text-align: center;
      letter-spacing: 0;
      padding-top: 33px;
   }

   #sec5 .photo {
      text-align: center;
   }

   #sec5 .photo h3 {
      padding-top: 20px;
   }
}

/* --- --- */
#sec6 {
   position: relative;
}

#sec6 .menu_txt{
		text-align: center;
		font-size:22px;
		font-weight:bold;
		margin-top:50px;
		margin-bottom:-40px;
	}

@media only screen and (max-width: 767px) {
   #sec6 {
      padding: 15vw 0;
   }

   #sec6 .row1 {
      background: url("../img/menuaw/sec6-deco.png") no-repeat top right/50% auto;
   }

   #sec6 .row1:before {
      content: '';
      width: 100%;
      border-top: 1px solid #475b3e;
      position: absolute;
      top: 0;
      left: 0;
      transform: skewY(-35deg);
   }

   #sec6 .row1 h2 {
      width: 25vw;
      margin: 0 auto 4vw;
   }

   #sec6 .row1 .box1 .txt {
      padding-bottom: 8vw;
   }

   #sec6 .row1 .box1 .photo {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 4%;
      padding-bottom: 16vw;
      position: relative;
   }

   #sec6 .row1 .box1 .photo p {
      width: 48%;
   }

   #sec6 .row1 .box1 .photo p:first-child {
      padding-bottom: 12vw;
      position: relative;
      z-index: 1;
   }

   #sec6 .row1 .box1 .photo p:last-child {
      position: absolute;
      bottom: 0;
      left: -5.33vw;
   }

   #sec6 .row1 .box2 {
      display: flex;
      flex-direction: column-reverse;
      gap: 8vw;
      padding-top: 12vw;
   }

   #sec6 .row1 .box2 h3 {
      width: 50vw;
      margin: 0 auto;
      padding-bottom: 5vw;
   }

   #sec6 .row2 {
      padding-top: 15vw;
   }

   #sec6 .row2 .menu-btn {
      border-top: 1px solid #8f8984;
      border-bottom: 1px solid #8f8984;
      margin: 0 5.33vw;
   }

   #sec6 .row2 .menu-btn a {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5vw;
      padding: 5vw 0;
      position: relative;
   }

   #sec6 .row2 .menu-btn a:after {
      content: '+';
      display: block;
   }
	
	
	
}

@media only screen and (min-width: 768px) {
   #sec6 {
      padding: 145px 0 118px;
   }

   #sec6:before {
      content: '';
      width: 100%;
      border-top: 1px solid #475b3e;
      position: absolute;
      top: 240px;
      left: 0;
      transform: skewY(-39deg);
   }

   #sec6 .row1 {
      background: url("../img/menuaw/sec6-deco.png") no-repeat top 11px right;
      padding-bottom: 125px;
      position: relative;
   }

   #sec6 .row1 .box1 {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      padding: 0 36px 480px 0;
   }

   #sec6 .row1 .box1 .txt {
      height: 400px;
      line-height: 38px;
      padding: 102px 44px 0 0;
   }

   #sec6 .row1 .box1 .photo {
      width: 1068px;
      padding-bottom: 250px;
      position: absolute;
      top: -57px;
      left: -250px;
   }

   #sec6 .row1 .box1 .photo p:nth-child(1) {
      padding-left: 150px;
      position: relative;
      z-index: 1;
   }

   #sec6 .row1 .box1 .photo p:nth-child(2) {
      position: absolute;
      bottom: 40px;
      right: 0;
   }

   #sec6 .row1 .box1 .photo p:nth-child(3) {
      position: absolute;
      bottom: 0;
      left: 0;
   }

   #sec6 .row1 .box2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 72px;
      margin-right: -122px;
      padding: 0;
   }

   #sec6 .row1 .box2 h3 {
      padding-top: 39px;
	  padding-bottom:39px;
   }

   #sec6 .row1 .box2 .button {
      padding-top: 62px;
   }

   #sec6 .row2 .menu-btn {
      width: 360px;
      border-top: 1px solid #8f8984;
      border-bottom: 1px solid #8f8984;
      margin: 30px auto;
   }

   #sec6 .row2 .menu-btn a {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 45px;
      padding: 24px 0 25px;
      position: relative;
   }

   #sec6 .row2 .menu-btn a:after {
      content: '+';
      display: block;
   }
   #sec6 .row2 .menu-btn a:hover {
      opacity: 0.5;
   }
	#sec6 .menu_txt{
		text-align:center;
		font-size:30px;
		margin-bottom:30px;
	}
}

/* --- --- */
.remodal-overlay {
   background: #fff url("../img/shared/bg01.png") repeat center top;
}

.remodal-wrapper {
   padding: 0;
}

.remodal-cancel {
   background: transparent;
   padding: 0;
}

.remodal-cancel:hover {
   background: transparent;
}

@media only screen and (max-width: 767px) {
   .modal-menu {
      padding: 12vw 0;
   }

   .remodal-cancel {
      width: 50vw;
      margin-top: 12vw;
   }
}

@media only screen and (min-width: 768px) {
   .modal-menu {
      padding: 100px 0;
   }

   .remodal-cancel {
      margin-top: 70px;
   }

   .remodal-cancel:hover {
      opacity: 0.5;
   }
}