html {
  box-sizing: border-box;
  font-size: 62.5%;
}

@media screen and (min-width: 821px) and (max-width: 1536px) {
  html {
    font-size: 0.65vw;
  }
}

@media screen and (max-width: 820px) {
  html {
    font-size: 1.3vw;
  }
}

@media screen and (max-width: 640px) {
  html {
    font-size: 1.3vw;
  }
}

.lp_style * {
  box-sizing: border-box;
}

.lp_style {
  -webkit-text-size-adjust: 100%;
  font-size: 100%;
  color: #333333;
  font-weight: normal;
  letter-spacing: .01em;
  line-height: 1;
  list-style: none;
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  overflow: hidden;
}

.lp_style button {
  background: transparent;
  padding: 0;
  margin: 0;
}

.lp_style ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp_style a {
  text-decoration: none;
}

.lp_style img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.sp_only {
  display: none !important;
}

@media screen and (min-width:751px), print {
  .pc_only {
    display: block !important;
  }
}

@media screen and (max-width:750px), print {
  .pc_only {
    display: none !important;
  }

  .sp_only {
    display: block !important;
  }
}

@media screen and (max-width:768px) and (min-width:751px), print {
  img {
    width: 100%;
    height: auto;
  }
}

.TextGroup {
  display: inline-block;
}

.inner {
  width: 120rem;
  margin: 0 auto;
}

@media screen and (max-width:820px), print {
  .inner {
    width: 100%;
    padding: 0 3rem;
  }
}

/* Mainvisual */ 

#Mainvisual {
  margin: 0 auto;
}

#Mainvisual img{
  width: 100%;
}

/* Intro */
#Intro {
  background: url(./../images/intro-bg.png) no-repeat;
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 7rem 0 7.7rem;
  color: #fff;
}

@media screen and (max-width:820px), print {
  #Intro {
    height: auto;
    padding: 8.5rem 0 8rem;
  }
}

.IntroHead {
  font-size: 3.4rem;
  line-height: 1;
  text-align: center;
  margin-bottom: 4rem;
}

@media screen and (max-width:820px), print {
  .IntroHead {
    font-size: 4rem;
    margin-bottom: 5rem;
  }
}

.IntroText {
  font-size: 2rem;
  line-height: 2.2;
  letter-spacing: .02em;
  text-align: center;
}

@media screen and (max-width:820px), print {
  .IntroText {
    font-size: 2.8rem;
    line-height: 1.929;
    letter-spacing: .02em;
  }
}

.IntroText .TextBlock {
  display: block;
}

/* Intro */
.page-bg {
  padding: 8rem 0 10rem;
  background: url(./../images/p-bg.png);
}

@media screen and (max-width:820px), print {
  .page-bg {
    padding: 5rem 0 12rem;
  }
}

.PageInfo {
  width: 96rem;
  position: relative;
  padding: 5rem 0;
  margin: 0 auto 6.5rem;
  border-top: 1px solid #555555;
  border-bottom: 1px solid #555555;
}

@media screen and (max-width:820px), print {
  .PageInfo {
    width: calc(100% - 6rem);
    padding: 6rem 3rem;
    margin: 0 auto 6.5rem;
    border-top: 1px solid #555555;
    border-bottom: 1px solid #555555;
  }
}

.Info_Txt {
  margin-bottom: 3rem;
  font-size: 2.2rem;
  text-align: center;
}

@media screen and (max-width:820px), print {
  .Info_Txt {
    margin-bottom: 4rem;
    font-size: 3rem;
    line-height: 1.733;
  }
}

.Special {
  text-align: center;
  font-size: 0;
}

.Special_Item {
  display: inline-block;
  margin: 0 1rem;
  width: 37rem;
}

@media screen and (max-width:820px), print {
  .Special_Item {
    display: inline-block;
    margin: 0;
    width: 48.5rem;
  }

  .Special_Item:not(:last-of-type) {
    margin-bottom: 1rem;
  }

}

.Special_Item img {
  width: 100%;
  height: auto;
}

.PageLinkBlock {
  margin-bottom: 10rem;
}

@media screen and (max-width:820px), print {
  .PageLinkBlock {
    padding: 0 3rem;
  }
}



.PageLinks {
  text-align: center;
  font-size: 0;
}

@media screen and (max-width:820px), print {
  .PageLinks {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

.PageLink {
  display: inline-block;
  width: 25.2rem;
  margin: 0 4rem;
}

@media screen and (max-width:820px), print {
  .PageLink {
    display: inline-block;
    width: 30.2rem;
    margin: 0;
  }

  .PageLink:nth-of-type(even) {
    margin-left: 4rem;
  }

  .PageLink:nth-of-type(n+3) {
    margin-top: 2.4rem;
  }

}

.PageLink::after {
  content: "";
  display: block;
  margin: 2rem auto 0;
  width: 1.4rem;
  height: .9rem;
  background: url(./../images/pl-arrow.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

@media screen and (max-width:820px), print {
  .PageLink::after {
    width: 2.4rem;
    height: 1.3rem;
  }
}

.PageLinkImage {
  margin-bottom: 2.8rem;
}

@media screen and (max-width:820px), print {
  .PageLinkImage {
    margin-bottom: 2rem;
  }
}

.PageLinkName {
  margin-bottom: 1.4rem;
  font-size: 2rem;
  letter-spacing: .02em;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: #333333;
}

@media screen and (max-width:820px), print {
  .PageLinkName {
    margin-bottom: 1.7rem;
    font-size: 2.8rem;
  }
}

.PageLinkPrice {
  font-size: 1.6rem;
  color: #555555;
  text-align: center;
}

@media screen and (max-width:820px), print {
  .PageLinkPrice {
    font-size: 2.4rem;
  }
}

.yen {
  font-size: 80%;
}

.tax {
  font-size: 60%;
}

.contents {
  background-color: #fff;
  box-shadow: 0px 0px 20px 0px rgba(160, 156, 147, 0.2);
  width: 120rem;
  margin: 0 auto;
}

@media screen and (max-width:820px), print {
  .contents {
    box-shadow: 0px 0px 14px 0px rgba(160, 156, 147, 0.2);
    width: calc(100% - 6rem);
    margin: 0 auto;
  }
}

.contents:not(:last-of-type) {
  margin-bottom: 6rem;
}

@media screen and (max-width:820px), print {
  .contents:not(:last-of-type) {
    margin-bottom: 4rem;
  }
}

.contents .inner {
  padding: 10rem 12rem;
}

@media screen and (max-width:820px), print {
  .contents .inner {
    padding: 9rem 2rem;
  }
}

#Gift.contents .inner {
  padding: 10rem 12rem 8rem;
}

@media screen and (max-width:820px), print {
  #Gift.contents .inner {
    padding: 9rem 2rem 10rem;
  }
}

#Gift {
  padding-bottom: 3rem;
}

@media screen and (max-width:820px), print {
  #Gift {
    padding-bottom: 3rem;
  }
}

.ProductArea:not(:last-of-type) {
  margin-bottom: 12rem;
}

@media screen and (max-width:820px), print {
  .ProductArea:not(:last-of-type) {
    margin-bottom: 10rem;
  }
}

.ProductGroup {
  font-size: 3rem;
  letter-spacing: .02em;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  margin-bottom: 8rem;
}

@media screen and (max-width:820px), print {
  .ProductGroup {
    font-size: 4rem;
    line-height: 1.3;
  }
}

.ProductBlock:not(:last-of-type) {
  margin-bottom: 8rem;
}

@media screen and (max-width:820px), print {
  .ProductBlock:not(:last-of-type) {
    margin-bottom: 8rem;
  }
}

.ProductCategory {
  margin-bottom: 5rem;
  font-size: 2.2rem;
  letter-spacing: .02em;
  text-align: center;
}

@media screen and (max-width:820px), print {
  .ProductCategory {
    margin-bottom: 6rem;
    font-size: 3.2rem;
  }
}

.ProductCategory::before {
  content: "〈";
}

.ProductCategory::after {
  content: "〉";
}

/* .ProductTable {} */

.column-02, .column-03 {
  display: flex;
}

.column-02 {
  justify-content: center;
  align-items: flex-start;
}

@media screen and (max-width:820px), print {
  .column-03 {
    font-size: 0;
    flex-wrap: wrap;
    justify-content: space-between;
  }

}

/* .ProductBox {} */

.column-02 .ProductBox:nth-of-type(odd) {
  margin-right: 2rem;
}

@media screen and (max-width:820px), print {
  .column-02 .ProductBox:nth-of-type(odd) {
    margin-right: 1rem;
  }
}

.column-02 .ProductBox:nth-of-type(even) {
  margin-left: 2rem;
}

@media screen and (max-width:820px), print {
  .column-02 .ProductBox:nth-of-type(even) {
    margin-left: 1rem;
  }
}

.ProductThumbnail {
  margin-bottom: 2.4rem;
  overflow: hidden;
}

@media screen and (max-width:820px), print {
  .ProductThumbnail {
    margin-bottom: 4rem;
    overflow: hidden;
  }
}

.column-02 .ProductThumbnail {
  width: 46rem;
}

@media screen and (max-width:820px), print {
  .column-02 .ProductThumbnail {
    width: 100%;
  }
}

.column-02 .ProductThumbnail img {
  transition: .4s transform cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.column-02 .ProductThumbnail:hover img {
  transform: scale(1.05);
}

.column-03 .ProductThumbnail {
  width: 30rem;
}

@media screen and (max-width:820px), print {
  .column-03 .ProductThumbnail {
    width: 100%;
    margin-bottom: 0;
  }

  .column-03 .ProductThumbnail img {
    width: 100%;
  }

}

.column-03 .ProductBox:not(:first-of-type) {
  margin-left: 3rem;
}

@media screen and (max-width:820px), print {
  .column-03 .ProductBox:not(:first-of-type) {
    margin-left: 0;
  }

  .column-03 .ProductBox:nth-of-type(1) {
    width: 100%;
    margin-bottom: 2rem;
  }

  .column-03 .ProductBox:nth-of-type(2),
  .column-03 .ProductBox:nth-of-type(3) {
    display: inline-block;
    width: calc(50% - 1rem);
  }

  .column-03 .ProductBox:nth-of-type(3) {
    margin-left: 2rem;
  }
}

.ProductName {
  margin-bottom: 4rem;
  font-size: 1.6rem;
  text-align: center;
}

@media screen and (max-width:820px), print {
  .ProductName {
    font-size: 2.4rem;
    line-height: 1.75;
  }
}

.ProductButton {
  text-align: center;
}

.Button a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 26rem;
  height: 6rem;
  font-size: 1.6rem;
  letter-spacing: .02em;
  border-radius: 3rem;
  color: #fff;
  background: #e06c60;
  border: 1px solid #e06c60;
  transition: .4s all cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media screen and (max-width:820px), print {
  .Button a {
    font-size: 1.8rem;
    letter-spacing: .02em;
  }
}

.Button a:hover {
  background: #fff;
  color: #e06c60;
}

.Button a::before, .Button a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2rem;
  background: #fff;
}

.Button a:hover::before,
.Button a:hover::after {
  background: #e06c60;
}

.Button a::before {
  width: 17px;
  height: 1px;
}

.Button a::after {
  width: 4px;
  height: 1px;
  transform: translate(0.25px, -1.5px) rotate(30deg);
}

.GiftHead {
  text-align: center;
  margin-bottom: 8rem;
}

@media screen and (max-width:820px), print {
  .GiftHead {
    text-align: center;
    margin-bottom: 10rem;
  }
}

.GiftHeadTxt {
  display: inline-block;
  font-size: 2.6rem;
  text-align: center;
  letter-spacing: .02em;
  color: #e06c60;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e06c60;
}

@media screen and (max-width:820px), print {
  .GiftHeadTxt {
    display: inline-block;
    font-size: 3.4rem;
    padding-bottom: 4rem;
    line-height: 1.588;
  }
}

.Shopper {
  border-radius: 2rem;
  border: 1px solid #e06c60;
  overflow: hidden;
}

.ShopperHead {
  position: relative;
  height: 7rem;
  line-height: 7rem;
  font-size: 2.2rem;
  color: #fff;
  text-align: center;
  background: #e06c60;
}

@media screen and (max-width:820px), print {
  .ShopperHead {
    position: relative;
    height: auto;
    padding: 2.6rem 0;
    font-size: 3.2rem;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    background: #e06c60;
  }
}

.ShopperHead::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 0 15px;
  border-color: #e06c60 transparent transparent transparent;
}

.ShopperBox {
  display: flex;
  align-items: center;
  padding: 3rem 7.5rem;
}

@media screen and (max-width:820px), print {
  .ShopperBox {
    flex-wrap: wrap;
    align-items: center;
    padding: 7.4rem 5rem 6rem;
  }
}

.ShopperImg {
  margin-right: 2rem;
}

@media screen and (max-width:820px), print {
  .ShopperImg {
    margin-right: 0;
    margin-bottom: 4rem;
  }
}

.ShopperImg img {
  margin: 0 3.4rem;
}

@media screen and (max-width:820px), print {
  .ShopperImg img {
    margin: 0 ;
  }
}

.ShopperInfo {
  margin-left: 2rem;
}

@media screen and (max-width:820px), print {
  .ShopperInfo {
    width: 100%;
    margin-left: 0;
  }
}

.ShopperName {
  margin-bottom: 2rem;
  font-size: 2.2rem;
}

@media screen and (max-width:820px), print {
  .ShopperName {
    margin-bottom: 2rem;
    font-size: 3.2rem;
    text-align: center;
    font-weight: bold;
  }
}

.ShopperPrice {
  margin-bottom: 4rem;
  font-size: 1.6rem;
  color: #555555;
  text-align: center;
}

@media screen and (max-width:820px), print {
  .ShopperPrice {
    margin-bottom: 4rem;
    font-size: 3rem;
  }
}

/* .ShopperButton {} */


.Caution {
  padding: 0 3rem;
}


@media screen and (max-width:820px), print {
  .Caution {
    padding: 0 2rem;
  }
}

.Caution .CautionList {
  display: block;
  width: 100%;
  background: #f9f9f9;
  padding: 7rem 13rem;
}

@media screen and (max-width:820px), print {
  .Caution .CautionList {
    padding: 6rem 4.8rem;
  }
}

.CautionText {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 2;
  text-align: left;
}

@media screen and (max-width:820px), print {
  .CautionText {
    font-size: 1.8rem;
    letter-spacing: .01em;
    line-height: 2;
  }
}

.CategoryButton {
  margin-top: 6rem;
}

@media screen and (max-width:820px), print {
  .CategoryButton {
    margin-top: 8rem;
  }
}

.CategoryButton a {
  width: 60rem;
  height: 10rem;
  border-radius: 5rem;
  font-size: 2.4rem;
}




.CategoryButton a::before {
  width: 26px;
}

@media screen and (max-width:820px), print {
  .CategoryButton a::before {
    width: 2.6rem;
  }
}

.CategoryButton a::after {
  width: 7px;
}

@media screen and (max-width:820px), print {
  .CategoryButton a::after {
    width: .7rem;
  } 
}