@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Roboto:wght@700&display=swap');

html, body {
	margin: 0;
  font-size: calc((var(--width) / 1300) * 10px);
  font-family: Noto Sans JP, sans-serif;
}
article {
  position: relative;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease-in-out;
}
a:hover {
  opacity: .7;
}
main {
  position: relative;
}

@media screen and (min-width: 769px) {
  .sp {
    display: none!important;
  }
}
@media screen and (max-width: 768px) {
  html, body {
    font-size: calc((var(--width) / 375) * 10px);
  }
  .pc {
    display: none!important;
  }
}

/*------------
  common
------------*/

.container {
  position: relative;
  width: min(90.0rem, 900px);
  margin: 0 auto;
}

.nav {
  padding: min(2.5rem, 25px) 0;
  color: #FFFFFF;
  background: #000000;
}
.nav-header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
  transition: transform .5s ease-out;
}
.nav-header.scroll.active {
  transform: translateY(0);
}
.nav ul {
  display: flex;
  justify-content: center;
}
.nav ul li {
  margin: 0 min(4.0rem, 40px);
  font-size: min(1.6rem, 16px);
  font-weight: 700;
}

.sec-ttl {
  text-align: center;
  letter-spacing: min(0.15rem, 1.5px);
}
.sec-ttl h1 {
  margin-bottom: min(1.0rem, 10px);
  font-size: min(3.0rem, 30px);
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
}
.sec-ttl h2 {
  font-size: min(1.6rem, 16px);
  font-weight: 500;
}
.sec-ttl h2._small {
  font-weight: 400;
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 2.0rem;
  }

  .nav {
    padding: 1px 2.0rem 2.0rem;
  }
  .nav ul {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .nav ul li {
    padding: 1.0rem 1.5rem;
    margin: 2.0rem 1.5rem 0 0;
    font-size: 1.4rem;
    color: #000000;
    background: #FFFFFF;
    border-radius: 2.0rem;
  }

  .sec-ttl h1 {
    font-size: 3.0rem;
    line-height: 4.0rem;
  }
  .sec-ttl h2 {
    font-size: 1.6rem;
  }
  .sec-ttl h2._small {
    font-size: 1.4rem;
    line-height: 1.9rem;
  }
}


/*------------
  header
------------*/

.header {
  position: relative;
  padding: min(2.0rem, 20px) min(3.0rem, 30px);
}
.header-logo img {
  width: min(7.5rem, 75px);
  /*height: min(3.5rem, 35px);*/
	height: min(5.5rem, 50px);
}
.header-ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.header-ttl img {
  width: min(19.9rem, 199px);
  height: min(2.8rem, 28px);
}

@media screen and (max-width: 768px) {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.0rem;
  }
  .header-logo img {
    width: 5.9rem;
    height: 2.7rem;
  }
  .header-ttl {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
  .header-ttl img {
    width: 16.9rem;
    height: 2.4rem;
  }
}


/*------------
  footer
------------*/

.footer {
  padding: min(9.0rem, 90px) 0 min(5.0rem, 50px);
  text-align: center;
}
.footer-insta {
  font-size: min(1.6rem, 16px);
  font-weight: bold;
}
.footer-insta span {
  font-size: min(1.2rem, 12px);
}
.footer-insta .insta-icon {
  margin: min(1.5rem, 15px) 0;
}
.footer-insta .insta-icon img {
  width: min(4.0rem, 40px);
  height: min(4.0rem, 40px);
}
.footer-logo {
  margin: min(9.5rem, 95px) auto min(4.0rem, 40px);
}
.footer-logo img {
  width: min(11.6rem, 116px);
  height: min(5.3rem, 53px);
}
.footer-nav {
  display: flex;
  justify-content: center;
  margin-bottom: min(2.0rem, 20px);
  font-size: min(1.2rem, 12px);
}
.footer-nav a {
  margin: 0 min(2.0rem, 20px);
}
.footer-cright {
  font-size: min(1.2rem, 12px);
}

@media screen and (max-width: 768px) {
  .footer {
    padding: 11.5rem 0 7.5rem;
  }
  .footer-insta {
    font-size: 1.6rem;
    line-height: 2.3rem;
  }
  .footer-insta span {
    font-size: 1.2rem;
  }
  .footer-insta .insta-icon {
    margin: 1.5rem 0;
  }
  .footer-insta .insta-icon img {
    width: 4.0rem;
    height: 4.0rem;
  }
  .footer-logo {
    margin: 5.0rem auto 0;
  }
  .footer-logo img {
    width: 11.6rem;
    height: 5.3rem;
  }
  .footer-nav {
    display: block;
    margin: 9.0rem auto;
    font-size: 1.2rem;
  }
  .footer-nav a {
    display: block;
    margin: 0;
  }
  .footer-nav a + a {
    margin-top: 3.0rem;
  }
  .footer-cright {
    font-size: 1.2rem;
  }
}


/*------------
  index
------------*/

/*
  about
------------*/

#about {
  padding: min(9.0rem, 90px) 0 min(13.0rem, 130px);
}
#about h1 {
  padding: min(1.5rem, 15px) 0;
  text-align: center;
  font-size: min(3.0rem, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: min(0.15rem, 1.5px);
  color: #FFFFFF;
  background: #000000;
  border-radius: min(4.5rem, 45px) min(4.5rem, 45px) 0 0;
}
#about h2 {
  margin-bottom: min(3.0rem, 30px);
  font-size: min(3.0rem, 30px);
  font-weight: 700;
  line-height: 1;
}
#about .about-wrapper {
  position: relative;
  width: min(118.0rem, 1180px);
  margin: 0 auto;
  border: min(0.7rem, 7px) solid #000000;
  border-radius: min(5.5rem, 55px);
}
#about .about-wrapper::before {
  content: '';
  position: absolute;
  z-index: 98;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + min(8.0rem, 80px));
  height: calc(100% + min(8.0rem, 80px));
  background: rgba(0, 0, 0, .6);
}
#about .about-wrapper::after {
  content: '本キャンペーンは終了いたしました';
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: min(3.0rem, 30px);
  color: #FFFFFF;
}
#about .about-wrapper a {
  pointer-events: none;
}
#about .about-inner {
  padding: min(3.0rem, 30px) min(4.5rem, 45px) min(5.0rem, 50px);
  text-align: center;
  font-size: min(1.5rem, 15px);
  font-weight: 500;
  line-height: min(3.0rem, 30px);
}
#about .about-inner small {
  font-size: min(1.4rem, 14px);
}
#about .about-term {
  display: flex;
  align-items: center;
  margin: min(4.5rem, 45px) 0 min(2.0rem, 20px);
  padding: min(1.5rem, 15px) min(4.5rem, 45px);
  font-size: min(3.0rem, 30px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: min(0.15rem, 1.5px);
  color: #FFFFFF;
  background: #000000;
  border-radius: min(1.7rem, 17px);
}
#about .about-term span {
  margin-right: min(3.0rem, 30px);
  padding: min(0.6rem, 6px) min(1.2rem, 12px) min(0.6rem, 6px) min(1.5rem, 15px);
  font-size: min(1.8rem, 18px);
  font-weight: 700;
  letter-spacing: min(0.3rem, 3px);
  color: #000000;
  background: #FFFFFF;
}
#about .about-register {
  text-align: center;
}
#about .about-register a {
  display: inline-block;
  margin: min(4.0rem, 40px) auto min(2.0rem, 20px);
  padding: min(2.0rem, 20px) min(8.5rem, 85px);
  font-size: min(2.2rem, 22px);
  font-weight: 900;
  letter-spacing: min(0.15rem, 1.5px);
  color: #FFFFFF;
  background: #000000;
  border-radius: min(1.4rem, 14px);
}
#about .about-list {
  margin-top: min(4.0rem, 40px);
  padding: min(3.0rem, 30px) min(3.5rem, 35px);
  text-align: left;
  font-size: min(1.3rem, 13px);
  font-weight: 400;
  line-height: min(3.0rem, 30px);
  border: min(0.1rem, 1px) solid #707070;
  list-style: none;
}
#about .about-list a {
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  #about {
    padding: 3.0rem 2.0rem 6.0rem;
  }
  #about h1 {
    margin: 0 -0.2rem;
    border-radius: 1.7rem 1.7rem 0 0;
  }
  #about h2 {
    margin-bottom: 2.0rem;
    text-align: center;
    font-size: 2.5rem;
  }
  #about .about-wrapper {
    width: 100%;
    border: 0.5rem solid #000000;
    border-radius: 2.7rem;
  }
  /*
  #about .about-wrapper::before {
    width: calc(100% + min(3.0rem, 30px));
    height: calc(100% + min(4.0rem, 40px));
  }
  #about .about-wrapper::after {
    content: '本キャンペーンは\A終了いたしました';
    font-size: 2.5rem;
    line-height: 3.5rem;
    white-space: pre;
  }
  */
  #about .about-inner {
    padding: 3.0rem 1.5rem;
    text-align: left;
    font-size: 1.5rem;
    line-height: 3.0rem;
  }
  #about .about-inner small {
    display: block;
    text-align: center;
    font-size: 1.4rem;
    line-height: 2.1rem;
  }
  #about .about-inner b {
    display: block;
    text-align: center;
  }
  #about .about-term {
    display: block;
    margin: 4.5rem auto 1.5rem;
    padding: 2.0rem;
    text-align: center;
    font-size: 1.7rem;
    line-height: 2.2rem;
  }
  #about .about-term span {
    display: inline-block;
    margin: 0 auto 2.5rem;
    padding: 0.5rem 2.5rem 0.5rem 3.0rem;
    font-size: 1.3rem;
    border-radius: 1.5rem;
  }
  #about .about-register a {
    margin: 4.0rem auto 1.5rem;
    padding: 1.5rem 6.5rem;
    font-size: 1.6rem;
    border-radius: 3.4rem;
  }
  #about .about-list {
    margin-top: 5.5rem;
    padding: 2.0rem 1.5rem;
    font-size: 1.3rem;
    line-height: 3.0rem;
  }
}


/*
  product
------------*/

#product {
  padding: min(10.0rem, 100px) 0 min(9.5rem, 95px);
  background: #F7F7F7;
}
#product .product-box + .product-box {
  margin-top: min(10.5rem, 105px);
}
#product .product-item {
  display: flex;
  flex-wrap: wrap;
  margin: min(2.5rem, 25px) auto 0;
}
#product .product-image {
  width: 50%;
  padding-right: min(3.0rem, 30px);
}
#product .product-image .image-list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: min(2.5rem, 25px);
}
#product .product-image .image-list p {
  margin: 0 min(0.5rem, 5px);
}
/*
#product .product-image .image-list p:nth-of-type(1) img {
  height: min(2.2rem, 22px);
}
#product .product-image .image-list p:nth-of-type(2) img {
  height: min(3.6rem, 36px);
}
#product .product-image .image-list p:nth-of-type(3) img {
  height: min(3.6rem, 36px);
}
*/
#product .product-detail {
  width: 50%;
  margin-right: max(-5.0rem, -50px);
  padding-left: min(3.0rem, 30px);
}
#product .product-detail .detail-overview {
  margin: min(4.5rem, 45px) 0 min(3.0rem, 30px);
  font-size: min(1.8rem, 18px);
  line-height: min(3.4rem, 34px);
  letter-spacing: min(0.15rem, 1.5px);
}
#product .product-detail .detail-overview h3 {
  font-size: min(2.0rem, 20px);
  font-weight: 900;
}
#product .product-detail .detail-sim {
  margin: min(3.0rem, 30px) 0;
}
#product .product-detail .detail-sim a {
  display: block;
  width: min(28.0rem, 280px);
  padding: min(1.5rem, 15px) 0;
  text-align: center;
  font-size: min(1.6rem, 16px);
  font-weight: 700;
  color: #FFFFFF;
  background: #000000;
}
#product .product-detail .detail-desc {
  font-size: min(1.3rem, 13px);
  line-height: min(3.0rem, 30px);
}
#product .product-detail .detail-info {
  display: none;
  margin: min(6.0rem, 60px) auto;
}
#product ._active .product-detail .detail-info {
  display: block;
}
#product .product-detail .detail-info a {
  text-decoration: underline;
}
#product .product-detail .detail-info small {
  font-size: min(1.2rem, 12px);
}
#product .product-detail .detail-info .info-row {
  display: flex;
}
#product .product-detail .detail-info .info-row._tags {
  align-items: center;
  margin-top: min(3.5rem, 35px);
}
#product .product-detail .detail-info .info-ttl {
  width: min(8.6rem, 86px);
  font-size: min(1.3rem, 13px);
  font-weight: 700;
  line-height: min(3.0rem, 30px);
  letter-spacing: min(0.1rem, 1px);
}
#product .product-detail .detail-info .info-text {
  width: min(34.5rem, 345px);
  margin-left: min(4.0rem, 40px);
  font-size: min(1.3rem, 13px);
  line-height: min(3.0rem, 30px);
}
#product .product-detail .detail-info .info-tags {
  display: flex;
  align-items: center;
}
#product .product-detail .detail-info .info-tags p {
  margin-right: min(0.5rem, 5px);
}
#product .product-detail .detail-info .info-tags p img {
  height: min(3.0rem, 30px);
}
#product .product-detail .detail-spec {
  display: none;
  font-size: min(1.4rem, 14px);
}
#product ._active .product-detail .detail-spec {
  display: block;
}
#product .product-detail .detail-spec small {
  font-size: min(1.1rem, 11px);
}
#product .product-detail .detail-spec table {
  width: min(35.5rem, 355px);
  font-size: min(1.3rem, 13px);
  line-height: min(6.0rem, 60px);
}
#product .product-detail .detail-spec table tr {
  border-bottom: min(0.1rem, 1px) solid ;
}
#product .product-detail .detail-spec table th {
  width: 20%;
  font-weight: 700;
}
#product .product-detail .detail-spec table td {
  width: 20%;
  text-align: center;
}
#product .product-more {
  width: 100%;
  margin-top: min(4.0rem, 40px);
  text-align: center;
}
#product .product-more span {
  display: inline-block;
  padding: min(1.0rem, 10px) min(4.0rem, 40px);
  font-size: min(1.7rem, 17px);
  font-weight: 900;
  border: 2px solid #000000;
  border-radius: min(3.8rem, 38px);
  cursor: pointer;
}
#product ._active .product-more span {
  display: none;
}
#product .product-close {
  width: 100%;
  margin: min(4.0rem, 40px) auto 0;
  text-align: center;
}
#product .product-close span {
  display: none;
  padding: min(1.0rem, 10px) min(4.0rem, 40px);
  font-size: min(1.7rem, 17px);
  font-weight: 900;
  background: #D7DDDF;
  border: 2px solid #D7DDDF;
  border-radius: min(3.8rem, 38px);
  cursor: pointer;
}
#product ._active .product-close span {
  display: inline-block;
}
#product .product-caution {
  display: none;
  width: min(123.0rem, 1230px);
  margin: min(10.5rem, 105px) auto 0;
  font-size: min(1.3rem, 13px);
  line-height: min(3.0rem, 30px);
  color: #FF0000;
}
#product ._active .product-caution {
  display: block;
}
#product .product-gallery {
  display: none;
  flex-wrap: wrap;
  width: min(123.0rem, 1230px);
  margin: min(2.5rem, 25px) auto 0;
}
#product ._active .product-gallery {
  display: flex;
}
#product .product-gallery .gallery-item {
  width: calc((100% - min(9.0rem, 90px)) / 4);
  margin-left: min(3.0rem, 30px);
}
#product .product-gallery .gallery-item:nth-of-type(4n + 1) {
  margin-left: 0;
}
#product .product-gallery .gallery-item:nth-of-type(n + 5) {
  margin-top: min(3.0rem, 30px);
}

@media screen and (max-width: 768px) {
  #product {
    padding: 6.0rem 0 10.0rem;
  }
  #product .product-box + .product-box {
    margin-top: 4.0rem;
  }
  #product .product-item {
    flex-wrap: wrap;
    margin: 1.5rem auto 0;
  }
  #product .product-image {
    width: 100%;
    padding: 0;
    text-align: center;
  }
  #product .product-detail {
    width: 100%;
    margin-top: 3.5rem;
    padding: 0;
  }
  #product .product-detail .detail-overview {
    margin: 0 0 3.0rem;
    font-size: 1.4rem;
    line-height: 3.0rem;
    letter-spacing: 0.3rem;
  }
  #product .product-detail .detail-overview h3 {
    font-size: 1.6rem;
  }
  #product .product-detail .detail-sim a {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 0;
    font-size: 1.6rem;
  }
  #product .product-detail .detail-desc {
    display: none;
    font-size: 1.3rem;
    line-height: 3.0rem;
  }
  #product ._active .product-detail .detail-desc {
    display: block;
  }
  #product .product-detail .detail-info {
    margin: 5.0rem auto;
  }
  #product .product-detail .detail-info .info-row._tags {
    margin-top: 1.5rem;
  }
  #product .product-detail .detail-info small {
    font-size: 1.2rem;
  }
  #product .product-detail .detail-info .info-ttl {
    width: 10.5rem;
    font-size: 1.3rem;
    line-height: 3.0rem;
  }
  #product .product-detail .detail-info .info-text {
    width: calc(100% - 12.0rem);
    margin-left: 1.5rem;
    font-size: 1.3rem;
    line-height: 3.0rem;
  }
  #product .product-detail .detail-info .info-tags p img {
    height: 3.0rem;
  }
  #product .product-detail .detail-spec {
    font-size: 1.4rem;
  }
  #product .product-detail .detail-spec table {
    width: 100%;
    font-size: 1.3rem;
    line-height: 6.0rem;
  }
  #product .product-caution {
    width: 100%;
    padding: 0 2.0rem;
  }
  #product .product-gallery {
    width: 100%;
    padding: 0 2.0rem;
  }
  #product .product-gallery .gallery-item {
    width: calc((100% - 3.0rem) / 2);
    margin-left: 3.0rem;
  }
  #product .product-gallery .gallery-item:nth-of-type(odd) {
    margin-left: 0;
  }
  #product .product-gallery .gallery-item:nth-of-type(n + 3) {
    margin-top: 3.0rem;
  }
}


/*
  order
------------*/

#order {
  padding: min(10.5rem, 105px) 0 min(11.0rem, 110px);
}
#order .order-step {
  margin: min(5.0rem, 50px) auto min(17.5rem, 175px);
  padding: min(4.0rem, 40px) 0 min(5.0rem, 50px);
  background: #F2F2F2;
}
#order .order-step .step-ttl {
  margin-bottom: min(4.5rem, 45px);
  text-align: center;
  font-size: min(1.6rem, 16px);
  font-weight: 700;
}
#order .order-step .step-row {
  display: flex;
  width: min(79.0rem, 790px);
  margin: 0 auto;
  text-align: center;
}
#order .order-step .step-item {
  position: relative;
  width: calc(100% / 6);
  font-size: min(1.2rem, 12px);
  line-height: min(1.6rem, 16px);
}
#order .order-step .step-item span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: min(7.0rem, 70px);
  height: min(7.0rem, 70px);
  font-size: min(1.8rem, 18px);
  line-height: min(1.8rem, 18px);
  font-weight: 700;
  background: #FFFFFF;
  border-radius: 100%;
}
#order .order-step .step-row p {
  margin-top: min(2.0rem, 20px);
}
#order .order-step .step-item:not(:last-child)::before {
  content: '';
  position: absolute;
  top: min(3.5rem, 35px);
  right: 0;
  transform: translate(25%, -50%) rotate(-45deg);
  width: min(1.0rem, 10px);
  height: min(1.0rem, 10px);
  border-bottom: min(0.3rem, 3px) solid #CECECE;
  border-right: min(0.3rem, 3px) solid #CECECE;
}
#order .order-flow .flow-item {
  display: flex;
  align-items: center;
  position: relative;
}
#order .order-flow .flow-num {
  width: min(12.0rem, 120px);
}
#order .order-flow .flow-num span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: min(12.0rem, 120px);
  height: min(12.0rem, 120px);
  font-size: min(3.1rem, 31px);
  font-weight: 700;
  background: #F2F2F2;
  border-radius: 100%;
}
#order .order-flow .flow-detail {
  width: calc(100% - min(12.0rem, 120px));
  padding-left: min(5.0rem, 50px);
  font-size: min(1.4rem, 14px);
  line-height: min(1.9rem, 19px);
}
#order .order-flow .flow-detail._image {
  width: calc(100% - min(37.0rem, 370px));
  padding-right: min(4.5rem, 45px);
}
#order .order-flow .flow-ttl {
  margin-bottom: min(1.0rem, 10px);
  font-size: min(1.8rem, 18px);
  font-weight: 700;
  line-height: min(2.4rem, 24px);
}
#order .order-flow .flow-btn {
  margin-top: min(1.5rem, 15px);
}
#order .order-flow .flow-btn a {
  display: inline-block;
  padding: min(1.0rem, 10px) min(4.0rem, 40px);
  font-size: min(1.7rem, 17px);
  font-weight: 900;
  color: #FFFFFF;
  background: #000000;
  border-radius: min(3.8rem, 38px);
}
#order .order-flow .flow-small {
  margin-top: min(2.0rem, 20px);
  font-size: min(1.2rem, 12px);
}
#order .order-flow .flow-sepalator {
  position: relative;
  width: min(12.0rem, 120px);
  margin: min(13.0rem, 130px) 0;
  text-align: center;
}
#order .order-flow .flow-sepalator span {
  display: inline-block;
  width: min(1.0rem, 10px);
  height: min(1.0rem, 10px);
  border-bottom: min(0.3rem, 3px) solid #CECECE;
  border-right: min(0.3rem, 3px) solid #CECECE;
  transform: translate(-50%, -50%) rotate(45deg);
}
#order .order-flow .flow-image {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: min(25.0rem, 250px);
}
#order .order-link {
  margin-top: min(12.0rem, 120px);
}
#order .order-link .link-list {
  display: flex;
  justify-content: center;
}
#order .order-link .link-list a {
  width: min(28.0rem, 280px);
  margin-left: min(2.5rem, 25px);
  padding: min(1.5rem, 15px) 0;
  text-align: center;
  font-size: min(1.6rem, 16px);
  font-weight: 700;
  color: #FFFFFF;
  background: #000000;
}
#order .order-link .link-list a:nth-of-type(3n + 1) {
  margin-left: 0;
}

@media screen and (max-width: 768px) {
  #order {
    padding: 9.0rem 0 0;
  }
  #order .order-step {
    display: none;
  }
  #order .order-flow {
    margin-top: 4.5rem;
  }
  #order .order-flow .flow-item {
    display: block;
  }
  #order .order-flow .flow-num {
    width: 12.0rem;
    margin: 0 auto;
  }
  #order .order-flow .flow-num span {
    width: 12.0rem;
    height: 12.0rem;
    font-size: 3.1rem;
  }
  #order .order-flow .flow-detail {
    width: 100%;
    margin: 3.0rem 0 0;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.9rem;
  }
  #order .order-flow .flow-detail._image {
    width: 100%;
    padding: 0;
  }
  #order .order-flow .flow-ttl {
    margin-bottom: 2.5rem;
    text-align: center;
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
  #order .order-flow .flow-btn {
    margin-top: 4.5rem;
    text-align: center;
  }
  #order .order-flow .flow-btn a {
    padding: 1.0rem 4.0rem;
    font-size: 1.7rem;
    border-radius: 3.8rem;
  }
  #order .order-flow .flow-sepalator {
    width: 100%;
    margin: 5.0rem 0;
  }
  #order .order-flow .flow-sepalator span {
    width: 1.0rem;
    height: 1.0rem;
    border-bottom: 0.3rem solid #CECECE;
    border-right: 0.3rem solid #CECECE;
  }
  #order .order-flow .flow-small {
    margin-top: 2.0rem;
    font-size: 1.2rem;
  }
  #order .order-flow .flow-image {
    position: relative;
    top: 0;
    transform: none;
    margin: 2.0rem auto 0;
  }
  #order .order-link {
    margin-top: 7.0rem;
  }
  #order .order-link .link-list {
    display: block;
  }
  #order .order-link .link-list a {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem;
    font-size: 1.6rem;
  }
  #order .order-link .link-list a + a {
    margin-top: 2.0rem;
  }
}


/*
  faq
------------*/

#faq {
  padding: min(11.0rem, 110px) 0 0;
}
#faq .faq-item {
  margin-top: min(9.0rem, 90px);
  padding-bottom: min(7.0rem, 70px);
  border-bottom: min(0.1rem, 1px) solid #707070;
}
#faq .faq-item + .faq-item {
  margin-top: min(7.0rem, 70px);
}
#faq .faq-ttl {
  display: flex;
  align-items: center;
  cursor: pointer;
}
#faq .faq-ttl span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: min(4.5rem, 45px);
  height: min(4.5rem, 45px);
  font-size: min(1.8rem, 18px);
  font-weight: 700;
  color: #FFFFFF;
  background: #000000;
  border-radius: 100%;
}
#faq .faq-ttl p {
  width: calc(100% - min(7.0rem, 70px));
  padding-left: min(1.5rem, 15px);
  font-size: min(1.6rem, 16px);
  font-weight: 700;
}
#faq .faq-ttl button {
  width: min(2.5rem, 25px);
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: none;
  transition: transform .5s;
}
#faq .faq-ttl.active button {
  transform: rotate(225deg);
}
#faq .faq-answer {
  display: none;
  margin-top: min(2.0rem, 20px);
  padding-left: min(6.0rem, 60px);
  padding-right: min(5.0rem, 50px);
  font-size: min(1.4rem, 14px);
  line-height: min(1.9rem, 19px);
}
#faq .faq-answer.active {
  display: block;
}
#faq .faq-answer a {
  text-decoration: underline;
}
#faq .faq-answer small {
  font-size: min(1.2rem, 12px);
}

@media screen and (max-width: 768px) {
  #faq {
    padding: 10.0rem 0 0;
  }
  #faq .faq-item {
    margin-top: 11.0rem;
    padding-bottom: 5.0rem;
  }
  #faq .faq-item + .faq-item {
    margin-top: 5.0rem;
  }
  #faq .faq-ttl {
    align-items: flex-start;
  }
  #faq .faq-ttl span {
    width: 3.0rem;
    height: 3.0rem;
    font-size: 1.8rem;
  }
  #faq .faq-ttl p {
    width: calc(100% - 7.0rem);
    margin-top: 0.5rem;
    padding-left: 1.5rem;
    font-size: 1.6rem;
    line-height: 1.9rem;
  }
  #faq .faq-ttl button {
    width: 2.5rem;
    margin-top: 0.25rem;
  }
  #faq .faq-answer {
    margin-top: 2.0rem;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.9rem;
  }
}


/*
  shop
------------*/

#shop {
  padding: min(14.0rem, 140px) 0 0;
}
#shop .shop-box {
  display: flex;
  align-items: center;
  margin-top: min(9.0rem, 90px);
  padding: min(3.0rem, 30px) min(4.0rem, 40px);
  border: min(0.1rem, 1px) solid #707070;
}
#shop .shop-box + .shop-box {
  margin-top: min(4.5rem, 45px);
}
#shop .shop-detail {
  width: calc(100% - min(35.0rem, 350px));
  padding-right: min(5.0rem, 50px);
  font-size: min(1.3rem, 13px);
}
#shop .shop-detail h3 {
  margin-bottom: min(1.5rem, 15px);
  font-size: min(2.0rem, 20px);
  font-weight: 700;
}
#shop .shop-tags {
  display: flex;
  margin-top: min(1.5rem, 15px);
}
#shop .shop-tags p {
  margin-right: min(1.0rem, 10px);
}
#shop .shop-tags p img {
  width: min(3.3rem, 33px);
  height: min(3.3rem, 33px);
}
#shop .shop-image {
  width: min(35.0rem, 350px);
}

@media screen and (max-width: 768px) {
  #shop {
    padding: 13.0rem 0 0;
  }
  #shop .shop-box {
    display: block;
    margin-top: 8.0rem;
    padding: 2.0rem;
    text-align: center;
  }
  #shop .shop-box + .shop-box {
    margin-top: 5.0rem;
  }
  #shop .shop-detail {
    width: 100%;
    padding: 6.0rem 0;
    font-size: 1.3rem;
    line-height: 2.0rem;
  }
  #shop .shop-detail h3 {
    margin-bottom: 1.5rem;
    font-size: 2.0rem;
  }
  #shop .shop-tags {
    justify-content: center;
  }
  #shop .shop-tags p {
    margin: 0;
  }
  #shop .shop-tags p + p {
    margin-left: 1.0rem;
  }
  #shop .shop-tags p img {
    width: 3.3rem;
    height: 3.3rem;
  }
  #shop .shop-image {
    width: 100%;
  }
}


/*
  contact
------------*/

#contact {
  padding: min(13.0rem, 130px) 0 0;
}
#contact .contact-btn {
  width: min(35.0rem, 350px);
  margin: min(5.5rem, 55px) auto 0;
}
#contact .contact-btn a {
  display: flex;
  align-items: center;
  padding: min(2.5rem, 25px);
  border: min(0.1rem, 1px) solid #707070;
}
#contact .contact-btn a img {
  width: min(2.7rem, 27px);
  height: min(1.8rem, 18px);
}
#contact .contact-ttl {
  margin-left: min(2.5rem, 25px);
  font-size: min(1.2rem, 12px);
}
#contact .contact-ttl h3 {
  margin-top: min(0.5rem, 5px);
  font-size: min(1.6rem, 16px);
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  #contact {
    padding: 11.0rem 2.0rem 0;
  }
  #contact .contact-btn {
    width: 100%;
  }
  #contact .contact-btn a {
    padding: 2.5rem 1.5rem;
  }
  #contact .contact-btn a img {
    width: 2.7rem;
    height: 1.8rem;
  }
  #contact .contact-ttl {
    font-size: 1.2rem;
  }
  #contact .contact-ttl h3 {
    margin-top: 0.5rem;
    font-size: 1.6rem;
  }
}


/*------------
  privacy
------------*/

/*
  privacy-nav
------------*/

.privacy-nav {
  width: min(83.0rem, 830px);
  margin: 0 auto;
  padding: min(14.0rem, 140px) 0 0;
}
.privacy-nav ul {
  display: flex;
  justify-content: space-between;
}
.privacy-nav ul li {
  width: calc((100% - min(4.0rem, 40px)) / 3);
  padding: min(1.0rem, 10px) 0;
  text-align: center;
  font-size: min(1.4rem, 14px);
  font-weight: 700;
  border: min(0.1rem, 1px) solid #707070;
}

@media screen and (max-width: 768px) {
  .privacy-nav {
    width: 100%;
    padding: 10.0rem 2.0rem 0;
  }
  .privacy-nav ul {
    display: block;
  }
  .privacy-nav ul li {
    width: 100%;
    padding: 2.0rem 0;
    font-size: 1.4rem;
    border: 0.1rem solid #707070;
  }
  .privacy-nav ul li + li {
    margin-top: 2.0rem;
  }
}


/*
  privacy-box
------------*/

.privacy-box {
  padding-top: min(15.0rem, 150px);
  font-size: min(1.4rem, 14px);
  line-height: min(1.9rem, 19px);
}
.privacy-box h1 {
  margin-bottom: min(7.5rem, 75px);
  text-align: center;
  font-size: min(2.0rem, 20px);
  font-weight: 700;
}
.privacy-box h2 {
  font-weight: 700;
}
.privacy-row + .privacy-row {
  margin-top: min(2.0rem, 20px);
}
.privacy-list {
  padding-left: min(1.5rem, 15px);
}
.privacy-list._sub {
  padding-left: 0;
  list-style-type: none;
  counter-reset: number 0;
}
.privacy-list._inner {
  margin-bottom: min(2.0rem, 20px);
  padding-left: 0;
}
.privacy-list .list-sub {
  display: flex;
}
.privacy-list li + li {
  margin-top: min(2.0rem, 20px);
}
.privacy-list .list-sub::before {
  counter-increment: number 1;
  content: '('counter(number)')';
  margin-right: min(0.5rem, 5px);
}
.privacy-ul {
  margin: min(2.0rem, 20px) 0;
  padding-left: min(2.5rem, 25px);
  list-style: none;
}
.privacy-ul li + li {
  margin: 0;
}

@media screen and (max-width: 768px) {
  .privacy-box {
    padding-top: 10.0rem;
    font-size: 1.4rem;
    line-height: 1.9rem;
  }
  .privacy-box h1 {
    font-size: 2.0rem;
    line-height: 3.2rem;
  }
  .privacy-row + .privacy-row {
    margin-top: 2.0rem;
  }
  .privacy-list {
    padding-left: 1.5rem;
  }
  .privacy-list._inner {
    margin-bottom: 2.0rem;
  }
  .privacy-list li + li {
    margin-top: 2.0rem;
  }
  .privacy-list .list-sub::before {
    margin-right: 0.5rem;
  }
  .privacy-ul {
    margin: 2.0rem 0;
    padding-left: 2.5rem;
  }
}