main {
 margin-bottom: 200px;
}
@media screen and (max-width: 1024px) {
 main {
  margin-bottom: 100px;
 }
}
main p.lead {
 line-height: 1.6666666667;
 margin-bottom: 70px;
 font-size: 18px;
 text-align: center;
 letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
 main p.lead {
  margin-bottom: 35px;
  font-size: 16px;
 }
}
main >section {
 position: relative;
 width: 100%;

 --main_brs: 60px;
 padding-inline: 3%;
}
@media screen and (max-width: 1024px) {
 main >section {
  padding-inline: 5%;
 }
}
@media screen and (max-width: 600px) {
 main >section {
  --main_brs: 30px;
 }
}
main >section h2 {
 line-height: 1.40625;
 margin-bottom: 50px;
 color: var(--c_rd);
 font-weight: bold;
 font-size: 32px;
 text-align: center;
 letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
 main >section h2 {
  margin-bottom: 30px;
  font-size: 24px;
 }
}
@media screen and (max-width: 600px) {
 main >section h2 {
  font-size: 20px;
 }
}
main >section.recommended_area {
 margin-bottom: 120px;
}
@media screen and (max-width: 1024px) {
 main >section.recommended_area {
  margin-bottom: 60px;
 }
}
main >section.recommended_area >.inner {
 width: 100%;
 max-width: 1100px;
 margin: 0 auto;
}
main >section.recommended_area >.inner ul {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 row-gap: 40px;
 -moz-column-gap: 3.1%;
      column-gap: 3.1%;
}
@media screen and (max-width: 1024px) {
 main >section.recommended_area >.inner ul {
  grid-template-columns: repeat(2, 1fr);
 }
}
@media screen and (max-width: 600px) {
 main >section.recommended_area >.inner ul {
  grid-template-columns: repeat(1, 1fr);
 }
}
main >section.recommended_area >.inner ul li a {
 display: block;
 width: 100%;
 transition: 0.3s;
}
@media (hover) {
 main >section.recommended_area >.inner ul li a:hover {
  opacity: 0.7;
 }
}
main >section.recommended_area >.inner ul li a .tmb {
 overflow: hidden;
 margin-bottom: 10px;
 border-radius: 20px;

 aspect-ratio: 17/11;
}
main >section.recommended_area >.inner ul li a .tmb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
main >section.recommended_area >.inner ul li a h3 {
 line-height: 1.6;
 color: var(--c_rd);
 font-weight: bold;
 font-size: 20px;
 letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
 main >section.recommended_area >.inner ul li a h3 {
  font-size: 16px;
 }
}
main >section.recommended_area >.inner ul li a p.price {
 line-height: 1.0714285714;
 margin-top: 20px;
 font-weight: 500;
 font-size: 28px;
 letter-spacing: 0em;
}
@media screen and (max-width: 1024px) {
 main >section.recommended_area >.inner ul li a p.price {
  font-size: 24px;
 }
}
main >section.recommended_area >.inner ul li a p.price span {
 font-size: 0.65em;
}
main >section.online_area {
 margin-bottom: 60px;
}
main >section.online_area >.inner {
 position: relative;
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
 padding: 65px 4% 60px;
 border: 3px solid var(--c_rd);
 border-radius: var(--main_brs);
}
@media screen and (max-width: 1024px) {
 main >section.online_area >.inner {
  padding-block: 40px 20px;
 }
}
main >section.online_area >.inner h2 {
 position: absolute;
 top: 0;
 left: 50%;
 margin: 0;
 white-space: nowrap;
 translate: -50% -50%;

 --icon_pos: 30px;
}
@media screen and (max-width: 1024px) {
 main >section.online_area >.inner h2 {
  --icon_pos: 10px;
 }
}
main >section.online_area >.inner h2 span {
 display: inline-block;
 position: relative;
 padding: 0 85px;
 background: #ffffff;
}
@media screen and (max-width: 1024px) {
 main >section.online_area >.inner h2 span {
  padding: 0 40px;
 }
}
main >section.online_area >.inner h2 span:before,main >section.online_area >.inner h2 span:after {
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 left: var(--icon_pos);
 width: clamp(1.25rem, -0.767rem + 3.15vw, 2.188rem);
 -webkit-mask-image: url(/common/img/icon_cart.svg);
         mask-image: url(/common/img/icon_cart.svg);
 -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
 -webkit-mask-position: center;
         mask-position: center;
 -webkit-mask-size: cover;
         mask-size: cover;
 background: var(--c_rd);
 translate: 0 -50%;
 transition: all 0.3s;

 aspect-ratio: 7/6;
}
main >section.online_area >.inner h2 span:after {
 right: var(--icon_pos);
 left: auto;
}
main >section.online_area >.inner p.lead {
 margin-bottom: 30px;
}
@media screen and (max-width: 1024px) {
 main >section.online_area >.inner p.lead {
  margin-bottom: 20px;
 }
}
main >section.online_area >.inner .bnr {
 display: block;
 width: 100%;
 max-width: 606px;
 margin: 0 auto;
}
main >section.catalog_area {
 margin-bottom: 120px;
}
@media screen and (max-width: 1024px) {
 main >section.catalog_area {
  margin-bottom: 70px;
 }
}
main >section.catalog_area >.inner {
 text-align: center;
}
main >section.catalog_area >.inner p.lead {
 margin-bottom: 40px;
}
@media screen and (max-width: 1024px) {
 main >section.catalog_area >.inner p.lead {
  margin-bottom: 20px;
 }
}
main >section.catalog_area >.inner .rd_btn {
 width: 360px;
 margin: 0 auto;
}
@media screen and (max-width: 600px) {
 main >section.catalog_area >.inner .rd_btn {
  width: 100%;
 }
}
main >section.guide_area {
 margin-bottom: 120px;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area {
  margin-bottom: 60px;
 }
}
main >section.guide_area >.inner {
 width: 100%;
 max-width: 1000px;
 margin: 0 auto;
}
main >section.guide_area >.inner .w800 {
 width: 100%;
 max-width: 800px;
 margin: 0 auto;
}
main >section.guide_area >.inner ul.anc {
 display: grid;
 grid-template-columns: 0.77fr 1fr 1fr;
 gap: 35px;
 margin-bottom: 90px;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner ul.anc {
  gap: 20px;
  margin-bottom: 50px;
 }
}
@media screen and (max-width: 600px) {
 main >section.guide_area >.inner ul.anc {
  grid-template-columns: 1fr;
 }
}
main >section.guide_area >.inner ul.anc li a {
 display: flex;
 position: relative;
 width: 100%;
 height: 60px;
 line-height: 1.5;
 align-items: center;
 padding: 0 20px;
 border: 2px solid var(--c_rd);
 border-radius: 10px;
 color: var(--c1);
 background: var(--c2);
 font-weight: bold;
 font-size: 20px;
 letter-spacing: 0.05em;
 transition: all 0.3s;

 --c1: var(--c_rd);
 --c2: #ffffff;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner ul.anc li a {
  font-size: 16px;
 }
}
@media (hover) {
 main >section.guide_area >.inner ul.anc li a:hover {
  --c1: #ffffff;
  --c2: var(--c_rd);
 }
}
main >section.guide_area >.inner ul.anc li a:after {
 content: "";
 position: absolute;
 top: 50%;
 right: 20px;
 width: 15px;
 -webkit-mask-image: url(/common/img/icon_arrow_bottom.png);
         mask-image: url(/common/img/icon_arrow_bottom.png);
 -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
 -webkit-mask-position: center;
         mask-position: center;
 -webkit-mask-size: cover;
         mask-size: cover;
 background-color: var(--c1);
 translate: 0 -50%;
 transition: all 0.3s;

 aspect-ratio: 38/52;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner ul.anc li a:after {
  right: 10px;
  width: 10px;
 }
}
main >section.guide_area >.inner h3 {
 line-height: 1.5384615385;
 margin-bottom: 40px;
 color: #333333;
 font-weight: bold;
 font-size: 26px;
 text-align: center;
 letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner h3 {
  margin-bottom: 20px;
  font-size: 20px;
 }
}
main >section.guide_area >.inner .bdb {
 margin-bottom: 80px;
 padding-bottom: 80px;
 border-bottom: 1px solid #cccccc;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner .bdb {
  margin-bottom: 40px;
  padding-bottom: 40px;
 }
}
main >section.guide_area >.inner dl {
 text-align: left;
}
main >section.guide_area >.inner dl dt {
 line-height: 1.6;
 margin-bottom: 5px;
 color: var(--c_rd);
 font-weight: bold;
 font-size: 20px;
 letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner dl dt {
  font-size: 16px;
 }
}
main >section.guide_area >.inner dl dd {
 line-height: 1.875;
 font-size: 16px;
 letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner dl dd {
  font-size: 14px;
 }
}
main >section.guide_area >.inner dl dd:not(:last-child) {
 margin-bottom: 20px;
}
main >section.guide_area >.inner #order p.lead {
 margin-bottom: 30px;
}
main >section.guide_area >.inner #order .tel_area {
 display: flex;
 width: 100%;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 30px;
 margin-bottom: 50px;
 padding: 60px 5%;
 border-radius: 20px;
 background: #ffe7d4;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #order .tel_area {
  gap: 20px;

  padding-block: 30px;
 }
}
main >section.guide_area >.inner #order .tel_area a {
 display: flex;
 line-height: 1;
 align-items: flex-end;
 gap: 10px;
 color: var(--c_rd);
 font-weight: 500;
 font-size: 50px;
 letter-spacing: 0em;
 pointer-events: none;

 margin-block: calc((1em - 1lh) / 2);
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #order .tel_area a {
  font-size: 35px;
 }
}
@media screen and (max-width: 600px) {
 main >section.guide_area >.inner #order .tel_area a {
  pointer-events: auto;
 }
}
main >section.guide_area >.inner #order .tel_area a .icon {
 display: inline-block;
 width: 32px;
 -webkit-mask-image: url(/common/img/icon_tel.svg);
         mask-image: url(/common/img/icon_tel.svg);
 -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
 -webkit-mask-position: center;
         mask-position: center;
 -webkit-mask-size: cover;
         mask-size: cover;
 background-color: var(--c_rd);
 transition: all 0.3s;

 aspect-ratio: 32/41;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #order .tel_area a .icon {
  width: 20px;
 }
}
main >section.guide_area >.inner #order .tel_area p {
 line-height: 1.9444444444;
 font-weight: 500;
 font-size: 18px;
 text-align: center;
 letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #order .tel_area p {
  font-size: 16px;
 }
}
main >section.guide_area >.inner #order .fax_area {
 padding: 0 45px;
 text-align: center;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #order .fax_area {
  padding: 0;
 }
}
main >section.guide_area >.inner #order .fax_area p.num {
 line-height: 1;
 font-weight: 500;
 font-size: 42px;
 letter-spacing: 0em;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #order .fax_area p.num {
  font-size: 30px;
 }
}
main >section.guide_area >.inner #order .fax_area p.num span {
 font-size: 0.741em;
}
main >section.guide_area >.inner #order .fax_area p.num +p {
 line-height: 1;
 margin-top: 15px;
 font-weight: 500;
 font-size: 18px;
 letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #order .fax_area p.num +p {
  margin-top: 10px;
  font-size: 16px;
 }
}
main >section.guide_area >.inner #order .fax_area ul {
 margin-top: 30px;
 text-align: left;
}
main >section.guide_area >.inner #order .fax_area ul li {
 line-height: 1.875;
 padding-left: 0.5em;
 font-size: 16px;
 text-indent: -0.5em;
 letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #order .fax_area ul li {
  font-size: 14px;
 }
}
main >section.guide_area >.inner #order .fax_area ul li:not(:last-child) {
 margin-bottom: 20px;
}
main >section.guide_area >.inner #order .fax_area dl {
 margin: 25px 0 70px;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #order .fax_area dl {
  margin: 20px 0 35px;
 }
}
main >section.guide_area >.inner #order .fax_area .rd_btn {
 width: 300px;
 margin: 0 auto;
}
main >section.guide_area >.inner #delivery dl {
 padding: 0 45px;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #delivery dl {
  padding: 0;
 }
}
main >section.guide_area >.inner #delivery dl ul li {
 padding-left: 0.5em;
 text-indent: -0.5em;
}
main >section.guide_area >.inner #pay p.lead {
 margin-bottom: 30px;
}
main >section.guide_area >.inner #pay .payment {
 padding: 0 45px;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #pay .payment {
  padding: 0;
 }
}
main >section.guide_area >.inner #pay .payment ul li {
 display: flex;
 line-height: 1.875;
 gap: 20px;
 font-size: 16px;
 letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
 main >section.guide_area >.inner #pay .payment ul li {
  font-size: 14px;
 }
}
main >section.guide_area >.inner #pay .payment ul li:not(:last-child) {
 margin-bottom: 20px;
}
main >section.guide_area >.inner #pay .payment p.note {
 line-height: 2.1428571429;
 margin-bottom: 20px;
 font-size: 14px;
 letter-spacing: 0.05em;
}
main >section.guide_area >.inner #pay .payment p.only {
 line-height: 1.5;
 margin-bottom: 10px;
 color: var(--c_rd);
 font-weight: bold;
 font-size: 20px;
 letter-spacing: 0.05em;
}
main >section.shop_area >.inner {
 display: flex;
 width: 100%;
 max-width: 800px;
 height: 310px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 margin: 0 auto;
 border-radius: 20px;
 background: url(../img/shop_bg.jpg) center/cover;
}
@media screen and (max-width: 1024px) {
 main >section.shop_area >.inner {
  height: 250px;
 }
}
@media screen and (max-width: 600px) {
 main >section.shop_area >.inner {
  height: 200px;
 }
}
main >section.shop_area >.inner h2 {
 color: #ffffff;
}
/*# sourceMappingURL=layout.css.map */