@charset "UTF-8";
/* =================================================================
product
=================================================================*/
/*  コンテンツ
-------------------------------------------------------------*/
.product__title {
  font-size: 4.2rem;
  font-family: 'Yu Gothic Pr6N M';
  margin: 1.5rem 0 6rem; }

@media screen and (max-width: 767px) {
  .product__title {
    font-size: 2.2rem; } }

.product-contents {
  width: 100rem;
  max-width: 100%; }

.product-contents + .product-contents {
  margin: 6rem 0 0; }

@media screen and (max-width: 767px) {
  .product-contents + .product-contents {
    margin: 6rem 0 0; } }

.product-contents:last-child {
  padding: 6rem 0 12rem; }

@media screen and (max-width: 767px) {
  .product-contents:last-child {
    padding: 3rem 0 6rem; } }

.product-contents__title {
  position: relative;
  display: flex;
  font-size: 2rem;
  font-family: 'Yu Gothic Pr6N B';
  font-weight: bold;
  padding: 0 0 0.6rem;
  margin: 0 0 1.5rem; }

@media screen and (max-width: 767px) {
  .product-contents__title {
    margin: 0 0 0.5rem; } }

.product-contents__title:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #000; }

.product-size__box {
  display: flex; }

@media screen and (max-width: 767px) {
  .product-size__box {
    flex-direction: column; } }

.product-size__box img {
  -o-object-fit: contain;
  object-fit: contain;
  max-width: 100%; }

.product-size__row {
  display: flex;
  font-size: 1.5rem;
  padding: 1rem 2rem; }

@media screen and (max-width: 767px) {
  .product-size__row {
    padding: 1rem 0;
    font-size: 1.4rem;
    flex-direction: column; } }

.product-spec__container {
  padding: 1rem 0; }

@media screen and (max-width: 767px) {
  .product-spec__container {
    padding: 0; } }

.product-spec__row {
  display: flex;
  font-size: 1.5rem;
  padding: 1rem 2rem; }

@media screen and (max-width: 767px) {
  .product-spec__row {
    padding: 1rem 0;
    font-size: 1.4rem;
    flex-direction: column; } }

.product-spec__row .label {
  width: 18rem; }

@media screen and (max-width: 767px) {
  .product-spec__row .label {
    width: 100%;
    padding: 0 1rem 0.5rem 0; }
  .product-spec__row .label br {
    display: none; } }

.product-spec__row .contents {
  flex: 1; }

.product-spec__row .contents .visa-mark {
  display: block;
  width: 32rem;
  height: 10rem;
  margin-top: -3rem;
  margin-left: -1rem; }

@media screen and (max-width: 767px) {
  .product-spec__row .contents .visa-mark {
    width: 22rem;
    margin-top: 0.5rem;
    margin-left: -3.5rem; } }

.product-spec__button {
  position: relative;
  width: 100%;
  max-width: 57rem;
  color: #fff;
  font-size: 2.6rem;
  background: #000;
  padding: 0.65rem 1rem;
  margin: 5rem 0 0;
  overflow: hidden;
  border: 1px solid #000;
  transition: color 0.15s 0.2s cubic-bezier(0.4, 0, 0.1, 1);
  z-index: 0; }

@media screen and (max-width: 767px) {
  .product-spec__button {
    font-size: 2rem; } }

.product-spec__button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  display: block;
  width: 120%;
  height: 60rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.74, 0.11, 0.17, 0.51);
  z-index: -9; }

.product-spec__button:hover {
  color: #000; }

.product-spec__button:hover:after {
  transform: translate(-50%, -50%) scale(1); }

.plan-contents__desc {
  font-size: 3.2rem; }

@media screen and (max-width: 767px) {
  .plan-contents__desc {
    font-size: 2.2rem; } }

.plan-contents__desc {
  font-size: 3.2rem; }

@media screen and (max-width: 767px) {
  .plan-contents__desc {
    font-size: 2.2rem; } }

.plan-list {
  display: flex;
  padding: 4rem 0 0;
  flex-wrap: wrap; }

@media screen and (max-width: 767px) {
  .plan-list {
    flex-direction: column;
    padding: 1.5rem 0 0; } }

.plan-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 110rem; }

@media screen and (max-width: 767px) {
  .plan-item {
    width: 100%; } }

.plan-item + .plan-item {
  margin: 12rem 0 0; }

@media screen and (max-width: 767px) {
  .plan-item + .plan-item {
    margin: 6rem 0 0; } }

.plan-item__visual {
  width: 55rem;
  max-width: 100%;
  margin: 0 0 1.5rem; }

.plan-item__title {
  font-size: 3.2rem;
  font-weight: 300;
  border-bottom: 1px solid; }

@media screen and (max-width: 767px) {
  .plan-item__title {
    font-size: 2.4rem; } }

.plan-item__row {
  padding: 2rem 0;
  border-bottom: 1px solid;
  font-size: 2rem; }

@media screen and (max-width: 767px) {
  .plan-item__row {
    font-size: 1.4rem;
    padding: 1.6rem 0; } }

.plan-item__row .link {
  font-size: 1.4rem;
  color: #000;
  text-decoration: underline; }

.plan-item__row .price {
  font-size: 3.6rem;
  font-family: 'Yu Gothic Pr6N B';
  font-weight: bold;
  line-height: 1;
  margin: 0; }

@media screen and (max-width: 767px) {
  .plan-item__row .price {
    font-size: 3rem; } }

.plan-item__row .price .tax {
  font-size: 1.8rem;
  padding: 0 0.5rem;
  font-family: 'Yu Gothic Pr6N R'; }

.plan-item__row .price .per {
  font-size: 2rem;
  font-family: 'Yu Gothic Pr6N R'; }

.plan-item__note {
  padding: 1.5rem 0 2rem;
  font-size: 1.5rem; }

@media screen and (max-width: 767px) {
  .plan-item__note {
    font-size: 1.2rem; } }

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

.plan-item__note li {
  position: relative;
  font-size: 1.8rem;
  padding: 0 0 0 2.5rem; }

@media screen and (max-width: 767px) {
  .plan-item__note li {
    font-size: 1.4rem;
    padding: 0 0 0 2rem; } }

.plan-item__note li + li {
  margin: 1.2rem 0 0; }

@media screen and (max-width: 767px) {
  .plan-item__note li + li {
    margin: 0.8rem 0 0; } }

.plan-item__note li:before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0; }

.plan-item__note a {
  color: #000;
  text-decoration: underline; }

.plan-item__cart-button {
  position: relative;
  width: 100%;
  color: #fff;
  font-size: 2.8rem;
  background: #000;
  padding: 1.2rem 1rem;
  margin: auto 0 0;
  overflow: hidden;
  border: 1px solid #000;
  transition: color 0.15s 0.2s cubic-bezier(0.4, 0, 0.1, 1);
  z-index: 0; }

@media screen and (max-width: 767px) {
  .plan-item__cart-button {
    font-size: 1.8rem;
    padding: 0.8rem 1rem; } }

.plan-item__cart-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  display: block;
  width: 100vw;
  height: 100vw;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.74, 0.11, 0.17, 0.51);
  z-index: -9; }

.plan-item__cart-button:hover {
  color: #000; }

.plan-item__cart-button:hover:after {
  transform: translate(-50%, -50%) scale(1); }

.plan-item__link {
  margin: 1.5rem 0 0;
  font-size: 1.6rem;
  text-decoration: underline;
  color: #000; }

.plan-notation {
  font-size: 1.5rem;
  padding: 8rem 0 14rem; }

@media screen and (max-width: 767px) {
  .plan-notation {
    font-size: 1.4rem;
    padding: 4rem 0; } }

.plan-notation__list {
  margin: 0;
  padding: 0 0 0 1.8rem;
  list-style: none; }

.plan-notation__item {
  position: relative; }

.plan-notation__item + li {
  margin: 2rem 0 0; }

.plan-notation__item:before {
  content: "・";
  position: absolute;
  top: 0;
  left: -1.65rem; }

.plan-list {
  display: flex;
  padding: 4rem 0 0;
  flex-wrap: wrap; }

@media screen and (max-width: 767px) {
  .plan-list {
    flex-direction: column;
    padding: 1.5rem 0 0; } }

.plan-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 110rem; }

@media screen and (max-width: 767px) {
  .plan-item {
    width: 100%; } }

.plan-item + .plan-item {
  margin: 12rem 0 0; }

@media screen and (max-width: 767px) {
  .plan-item + .plan-item {
    margin: 6rem 0 0; } }

.plan-item__visual {
  width: 55rem;
  max-width: 100%;
  margin: 0 0 1.5rem; }

.plan-item__title {
  font-size: 3.2rem;
  font-weight: 300;
  border-bottom: 1px solid; }

@media screen and (max-width: 767px) {
  .plan-item__title {
    font-size: 2.4rem; } }

.plan-item__row {
  padding: 2rem 0;
  border-bottom: 1px solid;
  font-size: 2rem; }

@media screen and (max-width: 767px) {
  .plan-item__row {
    font-size: 1.4rem;
    padding: 1.6rem 0; } }

.plan-item__row .link {
  font-size: 1.4rem;
  color: #000;
  text-decoration: underline; }

.plan-item__row .price {
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1;
  margin: 0; }

@media screen and (max-width: 767px) {
  .plan-item__row .price {
    font-size: 3rem; } }

.plan-item__row .price .tax {
  font-size: 1.8rem;
  padding: 0 0.5rem;
  font-weight: 300; }

.plan-item__row .price .per {
  font-size: 2rem;
  font-weight: 300; }

.plan-item__note {
  padding: 1.5rem 0 2rem;
  font-size: 1.5rem; }

@media screen and (max-width: 767px) {
  .plan-item__note {
    font-size: 1.2rem; } }

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

.plan-item__note li {
  position: relative;
  font-size: 1.8rem;
  padding: 0 0 0 2.5rem; }

@media screen and (max-width: 767px) {
  .plan-item__note li {
    font-size: 1.4rem;
    padding: 0 0 0 2rem; } }

.plan-item__note li + li {
  margin: 1.2rem 0 0; }

@media screen and (max-width: 767px) {
  .plan-item__note li + li {
    margin: 0.8rem 0 0; } }

.plan-item__note li:before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0; }

.plan-item__note a {
  color: #000;
  text-decoration: underline; }

.plan-item__cart-button {
  position: relative;
  width: 100%;
  color: #fff;
  font-size: 2.8rem;
  background: #000;
  padding: 1.2rem 1rem;
  margin: auto 0 0;
  overflow: hidden;
  border: 1px solid #000;
  transition: color 0.15s 0.2s cubic-bezier(0.4, 0, 0.1, 1);
  z-index: 0; }

@media screen and (max-width: 767px) {
  .plan-item__cart-button {
    font-size: 1.8rem;
    padding: 0.8rem 1rem; } }

.plan-item__cart-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  display: block;
  width: 100vw;
  height: 100vw;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.74, 0.11, 0.17, 0.51);
  z-index: -9; }

.plan-item__cart-button:hover {
  color: #000; }

.plan-item__cart-button:hover:after {
  transform: translate(-50%, -50%) scale(1); }

.plan-item__link {
  margin: 1.5rem 0 0;
  font-size: 1.6rem;
  text-decoration: underline;
  color: #000; }

.plan-notation {
  font-size: 1.5rem;
  padding: 8rem 0 14rem; }

@media screen and (max-width: 767px) {
  .plan-notation {
    font-size: 1.4rem;
    padding: 4rem 0; } }

.plan-notation__list {
  margin: 0;
  padding: 0 0 0 1.8rem;
  list-style: none; }

.plan-notation__item {
  position: relative; }

.plan-notation__item + li {
  margin: 2rem 0 0; }

.plan-notation__item:before {
  content: "・";
  position: absolute;
  top: 0;
  left: -1.65rem; }

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