@charset "UTF-8";
/*onlineshopカスタマイズ*/
/* 源ノ明朝 */
@font-face {
  font-family: "NotoSerifJP";
  src: url("../../common/fonts/NotoSerifJP.woff2") format("woff2"), url("../../common/fonts/NotoSerifJP.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}
/* Garamond */
@font-face {
  font-family: "Garamond";
  src: url("../../common/fonts/Garamond.woff2") format("woff2"), url("../../common/fonts/Garamond.woff") format("woff");
  font-display: swap;
}
/* futura */
@font-face {
  font-family: "futura";
  src: url("../../common/fonts/futura.woff2") format("woff2"), url("../../common/fonts/futura.woff") format("woff");
}
/* futura-medium-italic */
@font-face {
  font-family: "futura-medium-italic";
  src: url("../../common/fonts/futura-medium-italic.woff2") format("woff2"), url("../../common/fonts/futura-medium-italic.woff") format("woff");
}
@font-face {
  font-family: "futura-condensed-medium";
  src: url("../../common/fonts/futura-condensed-medium.woff2") format("woff2"), url("../../common/fonts/futura-condensed-medium.woff") format("woff");
}
/* 游ゴシック体 */
/* font-family: "Yu Gothic", "游ゴシック体", sans-serif; */
/* 游ゴシック体 */
@font-face {
  font-family: "Yu-Gothic";
  src: url("../../common/fonts/Yu-Gothic.woff2") format("woff2"), url("../../common/fonts/Yu-Gothic.woff") format("woff");
  font-weight: normal;
}
@font-face {
  font-family: "Yu-Gothic";
  src: url("../../common/fonts/Yu-Gothic-bold.woff2") format("woff2"), url("../../common/fonts/Yu-Gothic-bold.woff") format("woff");
  font-weight: bold;
}
/* KsoTouryu */
@font-face {
  font-family: "KsoTouryu";
  src: url("../../common/fonts/KsoTouryu.woff2") format("woff2"), url("../../common/fonts/KsoTouryu.woff") format("woff");
}
/* MidashiGo */
@font-face {
  font-family: "MidashiGo";
  src: url("../../common/fonts/MidashiGo.woff2") format("woff2"), url("../../common/fonts/MidashiGo.woff") format("woff");
}
/* RubikRoman */
@font-face {
  font-family: "RubikRoman";
  src: url("../../common/fonts/RubikRoman.woff2") format("woff2"), url("../../common/fonts/RubikRoman.woff") format("woff");
}
/* Rubik-Bold */
@font-face {
  font-family: "Rubik-Bold";
  src: url("../../common/fonts/Rubik-Bold.woff2") format("woff2"), url("../../common/fonts/Rubik-Bold.woff") format("woff");
}
/* Rubik-Medium */
@font-face {
  font-family: "Rubik-Medium";
  src: url("../../common/fonts/Rubik-Medium.woff2") format("woff2"), url("../../common/fonts/Rubik-Medium.woff") format("woff");
}
main.onlineshop .onlineshop_hero {
  background-color: #be2239;
  padding: 60px 0;
  text-align: center;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_hero {
    padding: 33px 0;
  }
}
main.onlineshop .onlineshop_hero .hero_header .hero_title {
  font-family: "NotoSerifJP";
  font-weight: 600;
  font-size: 47px;
  letter-spacing: 8px;
  color: #ffffff;
  margin: 0 0 10px 0;
  line-height: 1.2;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_hero .hero_header .hero_title {
    font-size: calc(28px - 4px + 1.06vw);
    letter-spacing: 4px;
  }
}
main.onlineshop .onlineshop_hero .hero_header .hero_subtitle {
  font-family: "Rubik-Bold";
  font-size: 17px;
  color: #ffffff;
  letter-spacing: 3px;
  margin: 0;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_hero .hero_header .hero_subtitle {
    font-size: calc(14px - 4px + 1.06vw);
    letter-spacing: 3px;
  }
}
main.onlineshop .onlineshop_product .product_container {
  max-width: 590px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_product .product_container {
    padding: 0 15px;
  }
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_product .product_container .product_images {
    width: 67%;
    display: block;
    margin: 0 auto;
  }
}
main.onlineshop .onlineshop_product .product_container .product_images .product_bottles {
  width: 100%;
  height: auto;
  object-fit: contain;
}
main.onlineshop .onlineshop_30pay {
  padding: 23px 0 8px;
  text-align: center;
}
main.onlineshop .onlineshop_30pay .pay_banner .banner_image {
  width: 100%;
  max-width: 925px;
  margin: 0 auto;
  object-fit: contain;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_30pay .pay_banner .banner_image {
    width: 92%;
  }
}
main.onlineshop .onlineshop_download {
  padding: 40px 0 45px;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_download {
    padding: 23px 0 14px;
  }
}
main.onlineshop .onlineshop_download .download_container {
  max-width: 770px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
main.onlineshop .onlineshop_download .download_container .download_text {
  font-weight: 700;
  font-size: 33px;
  color: #222222;
  margin: 0 0 30px 0;
}
main.onlineshop .onlineshop_download .download_container .download_text span {
  margin-right: 5px;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_download .download_container .download_text {
    font-size: calc(21px - 4px + 1.06vw);
    margin-bottom: 20px;
    line-height: 1.3;
  }
}
main.onlineshop .onlineshop_download .download_container .download_logo {
  margin-bottom: 42px;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_download .download_container .download_logo {
    margin-bottom: 37px;
  }
}
main.onlineshop .onlineshop_download .download_container .download_logo .logo_image {
  width: 145px;
  margin: 0 auto;
  object-fit: contain;
}
main.onlineshop .onlineshop_download .download_container .download_buttons {
  display: flex;
  justify-content: center;
  gap: 55px;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_download .download_container .download_buttons {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
}
main.onlineshop .onlineshop_download .download_container .download_buttons .download_btn {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.2s ease;
}
main.onlineshop .onlineshop_download .download_container .download_buttons .download_btn:hover {
  transform: scale(1.05);
}
main.onlineshop .onlineshop_download .download_container .download_buttons .download_btn .btn_image {
  width: 260px;
  object-fit: contain;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_download .download_container .download_buttons .download_btn .btn_image {
    width: 275px;
  }
}
main.onlineshop .onlineshop_invitation {
  padding: 40px 0 170px;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_invitation {
    padding: 30px 0 103px;
  }
}
main.onlineshop .onlineshop_invitation .invitation_container {
  max-width: 630px;
  margin: 0 auto;
  padding: 0 20px;
}
main.onlineshop .onlineshop_invitation .invitation_container .invitation_box {
  background-color: #444444;
  text-align: center;
  position: relative;
}
main.onlineshop .onlineshop_invitation .invitation_container .invitation_box .invitation_label {
  font-weight: 700;
  font-size: 33px;
  padding: 8px;
  color: #ffffff;
  margin: 0;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_invitation .invitation_container .invitation_box .invitation_label {
    font-size: calc(26px - 4px + 1.06vw);
    padding: 11px;
  }
}
main.onlineshop .onlineshop_invitation .invitation_container .invitation_box .invitation_code {
  background-color: #ffffff;
  border: 2px solid #444444;
  font-weight: 700;
  font-size: 38px;
  color: #000000;
  padding: 9px;
  margin: 0;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_invitation .invitation_container .invitation_box .invitation_code {
    font-size: calc(31px - 4px + 1.06vw);
    padding: 8px;
  }
}
main.onlineshop .onlineshop_invitation .invitation_container .invitation_box .copy_message {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.3s ease;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 900px) {
  main.onlineshop .onlineshop_invitation .invitation_container .invitation_box .copy_message {
    bottom: -35px;
    padding: 4px 8px;
  }
}
main.onlineshop .onlineshop_invitation .invitation_container .invitation_box .copy_message.show {
  opacity: 1;
  visibility: visible;
}

/*# sourceMappingURL=onlineshop.css.map */