@charset "UTF-8";
@media screen and (min-width: 768px) {
  .hidden-pc {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .hidden-sp {
    display: none;
  }
}

body {
  font-family: "Noto Serif JP", sans-serif;
  background: #fffef5;
}
@media screen and (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
}

.title-box {
  text-align: center;
  color: #eb6100;
}

@media screen and (min-width: 768px) {
  .section {
    padding-top: 10vh;
    padding-bottom: 10vh;
  }
}
@media screen and (max-width: 767px) {
  .section {
    padding-top: 8vh;
    padding-bottom: 8vh;
  }
}

.section__title {
  font-size: 35px;
  font-weight: bold;
  font-family: "Copperplate", cursive;
}
@media screen and (min-width: 768px) {
  .section__title {
    font-size: 60px;
  }
}

.section__sub-title {
  font-size: 20px;
  letter-spacing: 5px;
}
@media screen and (min-width: 768px) {
  .section__sub-title {
    font-size: 34px;
  }
}

.title-box-sp {
  margin: 0 auto;
}
.title-box-sp img {
  width: auto;
  height: 8vh;
}

.title-box-pc {
  margin: 0 auto;
}
.title-box-pc img {
  height: 10vh;
  width: auto;
}

.title__box-sp {
  width: 70%;
  margin: 0 auto;
}
.title__box-sp img {
  width: 100%;
}

.title__box-pc {
  width: 33%;
  margin: 0 auto 60px auto;
}
.title__box-pc img {
  width: 100%;
}

.fv {
  position: relative;
}
@media screen and (min-width: 768px) {
  .fv::before {
    position: absolute;
    content: "";
    width: 140px;
    height: 140px;
    top: 70px;
    right: 93px;
    background: url(../img/logo_or.svg) no-repeat center center/contain;
  }
}
@media screen and (min-width: 768px) and (min-width: 700px) and (max-width: 1100px) {
  .fv::before {
    width: 100px;
    height: 100px;
    top: 50px;
  }
}
@media screen and (min-width: 768px) {
  .fv::after {
    position: absolute;
    content: "";
    width: 217px;
    height: 61px;
    top: 210px;
    right: 93px;
    background: url(../img/logo_bottom.svg) no-repeat center center/contain;
  }
}
@media screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1100px) {
  .fv::after {
    width: 120px;
    height: 36px;
    top: 150px;
  }
}

.fv__language-button {
  position: absolute;
  top: 10px;
  right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
}

.jp-button,
.tw-button {
  font-size: 16px;
  font-weight: bold;
  font-family: "Copperplate", cursive;
  color: #eb6100;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.jp-button:hover,
.tw-button:hover {
  opacity: 0.6;
}
@media screen and (min-width: 768px) {
  .jp-button,
  .tw-button {
    font-size: 20px;
  }
}

.tw-button {
  position: relative;
  padding-left: 10px;
}
.tw-button::after {
  position: absolute;
  content: "/";
  left: 0;
}

.fv__heading {
  position: absolute;
  top: 100px;
  z-index: 100;
}
@media screen and (max-width: 767px) {
  .fv__heading {
    left: 75%;
  }
}
.fv__heading p {
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  font-size: 8vw;
  color: #fff;
  background: #eb6100;
  padding: 46px 12px 46px 12px;
  letter-spacing: 8px;
}
@media screen and (min-width: 768px) {
  .fv__heading {
    top: 9%;
    right: 35%;
  }
  .fv__heading p {
    font-size: 3.3vw;
  }
}
@media screen and (max-width: 767px) {
  .fv__image-1 {
    position: relative;
  }
  .fv__image-1::before {
    position: absolute;
    content: "";
    width: 85px;
    height: 85px;
    top: 26px;
    left: 28px;
    background: url(../img/logo-sp.svg) no-repeat center center/contain;
  }
}
@media screen and (min-width: 768px) {
  .fv__image-1 {
    width: 53%;
  }
  .fv__image-1 img {
    width: 100%;
  }
}

.fv__image-2 {
  position: absolute;
  top: 490px;
  right: 0;
}
@media screen and (min-width: 768px) {
  .fv__image-2 {
    width: 42.5%;
    top: 317px;
  }
  .fv__image-2 img {
    width: 100%;
  }
}

.fv__image-3 {
  position: absolute;
  top: 810px;
  left: 0;
}
@media screen and (max-width: 767px) {
  .fv__image-3 {
    width: 92%;
  }
}
@media screen and (min-width: 768px) {
  .fv__image-3 {
    width: 40.6%;
    top: 110%;
    left: 128px;
  }
  .fv__image-3 img {
    width: 100%;
  }
}

.fv__image-1-sp {
  width: 80%;
}
.fv__image-1-sp img {
  width: 100%;
}

.fv__image-2-sp {
  margin: 40px 0 0 auto;
  width: 92%;
}
.fv__image-2-sp img {
  width: 100%;
}

.fv__image-3-sp {
  margin-top: 40px;
  width: 92%;
}
.fv__image-3-sp img {
  width: 100%;
}

.fv__image-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.fv__image-1-pc {
  width: 52%;
}
.fv__image-1-pc img {
  width: 100%;
}

.fv__image-2pc {
  margin-top: 25%;
  width: 44%;
}
.fv__image-2pc img {
  width: 100%;
}

.fv__image-bottom {
  position: relative;
  height: 16vw;
}

.fv__image-3-pc {
  margin-left: 10%;
  width: 40.6%;
  position: absolute;
  top: -70%;
}
.fv__image-3-pc img {
  width: 100%;
}

.feature__inner {
  position: relative;
}
.feature__content-box {
  margin-top: 5vh;
}
@media screen and (min-width: 768px) {
  .feature__content-box {
    margin-top: 6vh;
  }
}

.feature__content-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 767px) {
  .feature__content-top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 66px;
  }
}
@media screen and (min-width: 768px) {
  .feature__content-top {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.feature__top-image {
  width: 100%;
  padding: 0 28px;
}
@media screen and (min-width: 768px) {
  .feature__top-image {
    padding: 0;
    max-width: 65%;
    margin-right: 100px;
  }
}
.feature__top-image img {
  width: 100%;
}

.feature__top-text {
  display: inline;
}
@media screen and (max-width: 767px) {
  .feature__top-text {
    margin: 0 auto;
  }
  .feature__top-text img {
    width: 20vw;
  }
}
@media screen and (min-width: 768px) {
  .feature__top-text {
    padding-right: 15%;
    margin-top: 50px;
  }
}
@media screen and (min-width: 768px) {
  .feature__top-text {
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    /* 20240308追加 */
    padding-right: 16%;
    margin-top: 50px;
  }
}
.feature__top-text p {
  margin: 0 auto;
  font-size: 23px;
  color: #eb6100;
  font-weight: 100;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  display: inline-block;
  position: relative;
  /* 20240308追加 */
  width: 70px;
  height: 270px;
}
@media screen and (min-width: 768px) {
  .feature__top-text p {
    font-size: 2.5vw;
    /* 20240308追加 */
    width: 8vw;
    height: 33vw;
    letter-spacing: 0.1em;
  }
}
.feature__top-text p::before {
  position: absolute;
  content: "";
  top: -14px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: url(../img/feature_top_txt_right.png) no-repeat center center/contain;
}
@media screen and (min-width: 768px) {
  .feature__top-text p::before {
    width: 45px;
    height: 45px;
    top: -31px;
    right: -13px;
  }
}
.feature__top-text p::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: -4px;
  width: 20px;
  height: 20px;
  background: url(../img/feature_top_txt_left.png) no-repeat center center/contain;
}
@media screen and (min-width: 768px) {
  .feature__top-text p::after {
    width: 45px;
    height: 45px;
    bottom: 0;
    left: -13px;
  }
}

.feature1-sp {
  margin-top: 5vh;
}
.feature1-sp .feature__content1 {
  color: #eb6100;
}
.feature1-sp .feature1__image1 {
  width: 66%;
}
.feature1-sp .feature1__image1 img {
  width: 100%;
}
.feature1-sp .feature1__top {
  text-align: center;
  margin-top: 10vh;
}
.feature1-sp .feature1__top p {
  font-size: 6vw;
  color: #fff;
  display: inline-block;
  letter-spacing: 5px;
  padding: 16px 24px;
  background: #eb6100;
  text-align: justify;
}
.feature1-sp .feature1__text-big-box {
  margin-top: 5vh;
}
.feature1-sp .feature1__text-big {
  font-size: 20px;
  padding: 0 28px;
}
.feature1-sp .feature1__text-big p {
  font-weight: 700;
  letter-spacing: 0.3em;
}
.feature1-sp .feature1__text-small {
  font-size: 16px;
  padding: 0 28px;
  margin-top: 3vh;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-align: justify;
}
.feature1-sp .feature1__image2 {
  width: 66%;
  margin: 3vh 0 0 auto;
}

.feature1-pc .feature__content1 {
  margin-top: 10vh;
}
.feature1-pc .feature1__top {
  text-align: center;
}
.feature1-pc .feature1__top p {
  font-size: 2.4vw;
  color: #fff;
  display: inline-block;
  letter-spacing: 5px;
  padding: 20px 40px 20px 40px;
  background: #eb6100;
}
.feature1-pc .feature1__content-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-left: 6%;
  padding-right: 10%;
  margin: 6vh auto 0 auto;
}
.feature1-pc .feature1__text-box {
  color: #eb6100;
  width: 45%;
}
.feature1-pc .feature1__heading {
  width: 90%;
  margin: 0 0 0 auto;
  font-size: 2vw;
  font-weight: 700;
  letter-spacing: 0.3em;
}
.feature1-pc .feature1__text {
  width: 90%;
  margin: 3vh 0 0 auto;
  font-size: 1.4vw;
  line-height: 1.7;
  letter-spacing: 0.2em;
  font-weight: 500;
  text-align: justify;
}
.feature1-pc .feature1__image1 {
  margin-top: 89px;
  width: 100%;
}
.feature1-pc .feature1__image1 img {
  width: 100%;
}
.feature1-pc .feature1__image-box {
  width: 45%;
}
.feature1-pc .feature1__image2 {
  width: 100%;
}
.feature1-pc .feature1__image2 img {
  width: 100%;
}

.feature2-sp .feature2__top {
  text-align: center;
  margin-top: 10vh;
}
.feature2-sp .feature2__top p {
  font-size: 6vw;
  color: #fff;
  display: inline-block;
  letter-spacing: 5px;
  padding: 18px 22px 14px 28px;
  background: #eb6100;
}
.feature2-sp .feature2__image1 {
  margin-top: 50px;
  width: 66%;
  margin: 5vh 0 0 0;
}
.feature2-sp .feature2__image1 img {
  width: 100%;
}
.feature2-sp .feature2__text-box {
  margin-top: 5vh;
  color: #eb6100;
  padding: 0 28px;
}
.feature2-sp .feature2__text-big p {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 7px;
  letter-spacing: 0.3em;
}
.feature2-sp .feature2__text-small {
  margin-top: 3vh;
}
.feature2-sp .feature2__text-small p {
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-align: justify;
}
.feature2-sp .feature2__image2 {
  width: 88%;
  margin: 3vh 0 0 auto;
}
.feature2-sp .feature2__image2 img {
  width: 100%;
}

.feature2-pc .feature2__top {
  margin-top: 10vh;
  text-align: center;
}
.feature2-pc .feature2__top p {
  font-size: 2.4vw;
  color: #fff;
  display: inline-block;
  letter-spacing: 5px;
  padding: 20px 40px 20px 40px;
  background: #eb6100;
}
.feature2-pc .feature2__content-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-left: 6%;
  padding-right: 10%;
  margin: 6vh auto 0 auto;
}
.feature2-pc .feature2__image-box {
  width: 45%;
}
.feature2-pc .feature2__image2 {
  width: 100%;
}
.feature2-pc .feature2__image2 img {
  width: 100%;
}
.feature2-pc .feature2__text-box {
  color: #eb6100;
  width: 45%;
}
.feature2-pc .feature2__heading {
  font-size: 2vw;
  font-weight: 700;
  letter-spacing: 0.3em;
}
.feature2-pc .feature2__text {
  margin-top: 3vh;
  font-size: 1.4vw;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-align: justify;
}
.feature2-pc .feature2__image1 {
  margin-top: 100px;
  width: 100%;
}
.feature2-pc .feature2__image1 img {
  width: 100%;
}

.feature3-sp .feature3__top {
  text-align: center;
  margin-top: 10vh;
}
.feature3-sp .feature3__top p {
  font-size: 6vw;
  color: #fff;
  display: inline-block;
  letter-spacing: 5px;
  padding: 14px 30px 14px 30px;
  background: #eb6100;
}
.feature3-sp .feature3__image1 {
  margin: 5vh 0 0 0;
  width: 69%;
}
.feature3-sp .feature3__image1 img {
  width: 100%;
}
.feature3-sp .feature3__text-box {
  color: #eb6100;
  margin-top: 5vh;
  padding: 0 28px;
}
.feature3-sp .feature3__text-big p {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3em;
  line-height: 1.7;
}
.feature3-sp .feature3__text-small {
  margin-top: 3vh;
}
.feature3-sp .feature3__text-small P {
  font-size: 16px;
  letter-spacing: 0.2em;
  line-height: 1.7;
  text-align: justify;
}
.feature3-sp .feature3__image2 {
  width: 80%;
  margin: 3vh 0 0 auto;
}
.feature3-sp .feature3__image2 img {
  width: 100%;
}

.feature3-pc .feature3__top {
  margin-top: 10vh;
  text-align: center;
}
.feature3-pc .feature3__top p {
  font-size: 2.4vw;
  color: #fff;
  display: inline-block;
  letter-spacing: 5px;
  padding: 20px 40px 20px 40px;
  background: #eb6100;
}
.feature3-pc .feature3__content-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-right: 10%;
  margin: 6vh auto 0 auto;
}
.feature3-pc .feature3__text-box {
  color: #eb6100;
  width: 50%;
}
.feature3-pc .feature3__heading {
  font-size: 2vw;
  font-weight: 700;
  width: 80%;
  margin: 0 0 0 auto;
  letter-spacing: 0.3em;
}
.feature3-pc .feature3__text {
  width: 80%;
  margin: 3vh 0 0 auto;
  font-size: 1.4vw;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-align: justify;
}
.feature3-pc .feature3__image1 {
  margin-top: 117px;
  width: 100%;
}
.feature3-pc .feature3__image1 img {
  width: 100%;
}
.feature3-pc .feature3__image-box {
  width: 42%;
}
.feature3-pc .feature3__image2 {
  width: 100%;
}
.feature3-pc .feature3__image2 img {
  width: 100%;
}

.greeting {
  background: url(../img/greetings_sp_bg.png) no-repeat center center/cover;
}
.greetings__inner {
  padding: 0 27px;
}
@media screen and (min-width: 768px) {
  .greetings__inner {
    margin: 0 auto;
    padding: 0 10%;
  }
}

.greeting__title {
  color: #fff;
}

.greeting__sub-title {
  color: #fff;
}

.greeting__content-box {
  margin-top: 5vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 767px) {
  .greeting__content-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .greeting__content-box {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 30px;
    margin-top: 5vh;
  }
}

.greeting__image {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .greeting__image {
    width: 50%;
  }
}
.greeting__image img {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .greeting__image img {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .greeting__text-box {
    width: 42%;
    position: relative;
  }
}

.greeting__content-title {
  margin-top: 5vh;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .greeting__content-title {
    text-align: start;
    margin-top: 0;
  }
}
.greeting__content-title p {
  font-size: 25px;
  color: #fff;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .greeting__content-title p {
    font-size: 2vw;
  }
}

.greeting__content-text {
  margin-top: 3vh;
}
@media screen and (min-width: 768px) {
  .greeting__content-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
.greeting__content-text p {
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.1em;
  text-align: justify;
}
@media screen and (min-width: 768px) {
  .greeting__content-text p {
    font-size: 1.16vw;
    line-height: 1.5;
  }
}

.greeting__message {
  margin-top: 10vh;
}
@media screen and (min-width: 768px) {
  .greeting__message {
    margin-top: 10vh;
  }
}
.greeting__message img {
  width: 100%;
}

.movie {
  background: #eb6100;
  color: #fcf5d7;
}
.movie__inner {
  padding: 0 27px;
}
@media screen and (min-width: 768px) {
  .movie__inner {
    padding: 0;
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .movie__content-box {
    padding: 0 9% 0 13%;
  }
}

.movie__sub-title {
  color: #fcf5d7;
  font-family: "Noto Serif JP", sans-serif;
}
.movie__sub-title span {
  font-family: "Noto Serif JP", sans-serif;
}

.movie__content-sp .movie__content-title {
  margin-top: 5vh;
  text-align: center;
  font-size: 25px;
  letter-spacing: 4px;
}
.movie__content-sp .movie__video {
  margin-top: 16px;
  text-align: center;
}
.movie__content-sp .movie__text {
  margin: 15px auto 0 auto;
  max-width: 320px;
}
.movie__content-sp .movie__text p {
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 2.5;
}
.movie__content-sp .movie__text p span {
  font-weight: 700;
}

.movie__content-pc .movie__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 40px;
  margin-top: 5vh;
}
.movie__content-pc .movie__text-box {
  width: 45%;
}
.movie__content-pc .movie__content-title {
  font-size: 2.5vw;
  letter-spacing: 4px;
}
.movie__content-pc .movie__text {
  font-size: 1.25vw;
  letter-spacing: 2px;
  margin-top: 52px;
  line-height: 2.5;
}
.movie__content-pc .movie__text span {
  font-weight: 700;
}
.movie__content-pc .movie__video-box {
  width: 55%;
}
@media screen and (min-width: 768px) {
  .movie__content-pc .movie__video {
    position: relative;
    padding-top: 62.7118644068%;
  }
  .movie__content-pc .movie__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.item__inner {
  padding: 0 27px;
}
@media screen and (min-width: 768px) {
  .item__inner {
    padding: 0;
  }
}

.item-title-sp {
  width: 32%;
}

.item-title__box-pc {
  width: 18%;
  margin: 0 auto 100px auto;
}

.item__content {
  margin-top: 74px;
}

.item__content-box {
  margin-top: 5vh;
}
@media screen and (min-width: 768px) {
  .item__content-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: relative;
    margin-top: 5vh;
    padding-left: 13%;
    padding-right: 7%;
  }
}

@media screen and (min-width: 768px) {
  .item__image-box {
    width: 45%;
  }
}

.item__image-main {
  -webkit-box-shadow: 3px 3px 7px -1px rgba(15, 15, 15, 0.0588235294);
          box-shadow: 3px 3px 7px -1px rgba(15, 15, 15, 0.0588235294);
}
.item__image-main img {
  width: 100%;
}

.item__image-sub-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 7px;
  margin-top: 7px;
}
@media screen and (min-width: 768px) {
  .item__image-sub-box {
    gap: 14px;
    margin-top: 14px;
  }
}

.item__image-sub {
  -webkit-box-shadow: 3px 3px 7px -1px rgba(15, 15, 15, 0.0588235294);
          box-shadow: 3px 3px 7px -1px rgba(15, 15, 15, 0.0588235294);
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.item__image-sub:hover {
  opacity: 0.8;
}

.item__buy-box {
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .item__buy-box {
    width: 50%;
    margin-top: 5px;
  }
}

.item__description-title {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .item__description-title {
    text-align: start;
  }
}
.item__description-title p {
  font-size: 23px;
  color: #eb6100;
  letter-spacing: 5px;
}
@media screen and (min-width: 768px) {
  .item__description-title p {
    font-size: 2.4vw;
  }
}

.item__description-text {
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .item__description-text {
    margin-top: 30px;
    width: 100%;
  }
}
.item__description-text p {
  font-size: 16px;
  color: #eb6100;
  line-height: 1.6;
  letter-spacing: 4px;
  position: relative;
}
.item__description-text p::before {
  position: absolute;
  content: "▸";
  left: 0;
}
@media screen and (min-width: 768px) {
  .item__description-text p {
    font-size: 1.2vw;
    padding-left: 1.5vw;
  }
}
@media screen and (max-width: 767px) {
  .item__description-text p {
    padding-left: 4vw;
  }
}

.item__buy {
  margin-top: 26px;
}
@media screen and (min-width: 768px) {
  .item__buy {
    margin-top: 47%;
  }
}

.item__buy-price {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .item__buy-price {
    text-align: start;
  }
}
.item__buy-price p {
  font-size: 23px;
  color: #eb6100;
  letter-spacing: 4px;
}
@media screen and (min-width: 768px) {
  .item__buy-price p {
    font-size: 2.7vw;
  }
}

#product-component-1709255901384 {
  max-width: 100% !important;
}

@media (max-width: 767px) {
  #product-component-1709255901384 .shopify-buy__btn {
    padding-top: 3%;
    padding-bottom: 3% !important;
  }
}
@media screen and (min-width: 768px) {
  .item__button-box {
    width: 25%;
    position: absolute;
    bottom: 0;
  }
}
.item__button-box .shopify-buy-frame {
  max-width: 500px !important;
}
@media screen and (max-width: 767px) {
  .item__button-box .shopify-buy__btn {
    padding-top: 3vw !important;
    padding-bottom: 3vw !important;
    font-size: 3vw !important;
  }
}

.item__button-box-sp #product-component-1710737566370 {
  max-width: 100% !important;
}

.shopify-buy__btn {
  padding-left: 20px;
}

.how {
  padding-top: 0;
}
.how__inner {
  padding: 0 10px;
}
@media screen and (min-width: 768px) {
  .how__inner {
    padding: 0 40px;
  }
}

.item__sub-title {
  font-size: 25px;
}
@media screen and (min-width: 768px) {
  .item__sub-title {
    font-size: 34px;
  }
  .item__sub-title span {
    font-family: sans-serif;
  }
}

.how-title__box-pc {
  width: 35%;
  margin-bottom: 0;
}

.how-title__box-sp {
  width: 85%;
}

@media screen and (min-width: 768px) {
  .how__content {
    margin-top: 5vh;
  }
}
@media screen and (max-width: 767px) {
  .how__content {
    margin-top: 5vh;
  }
}

@media screen and (min-width: 768px) {
  .how__cards-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 70px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 767px) {
  .how__cards .how__card:not(:first-child) {
    margin-top: 76px;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .how__cards .how__card:not(:first-child) {
    margin-top: 4vh;
  }
}
@media screen and (max-width: 767px) {
  .how__cards .how__card:first-child {
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .how__cards .how__card:first-child {
    margin-top: 4vh;
  }
}
@media screen and (min-width: 768px) {
  .how__cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 10vh;
    max-width: 1200px;
    margin: 0 auto;
  }
}

.how__card-1 {
  grid-area: 1/1/2/3;
}

.how__card-2 {
  grid-area: 1/3/2/5;
}

.how__card-3 {
  grid-area: 1/5/2/7;
}

.how__card-4 {
  grid-area: 2/2/3/4;
}

.how__card-5 {
  grid-area: 2/4/3/6;
}

.how__card-title {
  text-align: center;
}
.how__card-title p {
  color: #eb6100;
  font-size: 20px;
  letter-spacing: 4px;
  padding-left: 28px;
  display: inline-block;
  position: relative;
}
@media screen and (min-width: 768px) {
  .how__card-title p {
    font-size: 1.8vw;
    padding-left: 24px;
    white-space: nowrap;
  }
}
@media screen and (min-width: 1600px) {
  .how__card-title p {
    font-size: 28px;
  }
}
.how__card-title p::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  background: url(../img/houwto_txt_bf.png) no-repeat center center/contain;
}
@media screen and (min-width: 768px) {
  .how__card-title p::before {
    width: 15px;
    height: 15px;
  }
}

.how__card-image {
  margin: 3vh auto 0 auto;
}
@media screen and (max-width: 767px) {
  .how__card-image {
    width: 190px;
  }
}
@media screen and (min-width: 768px) {
  .how__card-image {
    max-width: 266px;
  }
}
.how__card-image img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .how__cards-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 80px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0 140px;
    margin-top: 8vh;
  }
}

.store {
  background: #eb6100;
}
.store__inner {
  padding: 0 27px;
}
@media screen and (min-width: 768px) {
  .store__inner {
    margin: 0 auto;
    padding: 0 8%;
  }
}

.store-title-sp img {
  height: 11.5vh;
}

.store__title {
  color: #fff;
}

.store__sub-title {
  color: #fff;
  letter-spacing: 4px;
  font-size: 25px;
}
@media screen and (min-width: 768px) {
  .store__sub-title {
    font-size: 34px;
  }
}
.store__sub-title span {
  font-family: "Noto Serif JP", sans-serif;
  letter-spacing: 4px;
}

.store__content {
  margin-top: 5vh;
}
@media screen and (min-width: 768px) {
  .store__content {
    margin-top: 5vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-left: 5%;
  }
}

@media screen and (min-width: 768px) {
  .store__image {
    width: 50%;
  }
}
.store__image img {
  width: 100%;
}

.store__text-box {
  margin-top: 22px;
}
@media screen and (min-width: 768px) {
  .store__text-box {
    width: 42%;
    margin-top: 0;
    position: relative;
  }
}

@media screen and (min-width: 768px) {
  .store__text-wrap {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

.store__text-top {
  text-align: start;
}
@media screen and (max-width: 767px) {
  .store__text-top {
    text-align: center;
  }
}
.store__text-top p {
  color: #fff;
  font-size: 18px;
  letter-spacing: 2px;
}
@media screen and (min-width: 768px) {
  .store__text-top p {
    font-size: 1.4vw;
  }
}

.store__text-bottom {
  margin-top: 18px;
}
@media screen and (min-width: 768px) {
  .store__text-bottom {
    margin-top: 25px;
  }
}
@media screen and (max-width: 767px) {
  .store__text-bottom {
    text-align: center;
  }
}
.store__text-bottom p {
  color: #fff;
  font-size: 16px;
  padding-left: 5vw;
  display: inline-block;
  position: relative;
  letter-spacing: 2px;
}
@media screen and (min-width: 768px) {
  .store__text-bottom p {
    letter-spacing: 5px;
    font-size: 1.2vw;
  }
}
@media screen and (max-width: 767px) {
  .store__text-bottom p {
    padding-left: 55px;
  }
}
.store__text-bottom p::before {
  position: absolute;
  content: "地址｜";
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .store__text-bottom p::before {
    left: 0;
    top: 8px;
  }
}

.about__inner {
  padding: 0 27px;
}
@media screen and (min-width: 768px) {
  .about__inner {
    padding: 0 13%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 767px) {
  .about__content {
    margin-top: 5vh;
  }
}
@media screen and (min-width: 768px) {
  .about__content {
    margin-top: 5vh;
  }
}

.about__map {
  width: 100%;
}
.about__map img {
  width: 100%;
}

.about__image {
  width: 100%;
  margin-top: 50px;
}
@media screen and (min-width: 768px) {
  .about__image {
    margin-top: 10vh;
  }
}
.about__image img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .footer {
    padding-top: 0;
  }
}

@media screen and (min-width: 768px) {
  .footer__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (max-width: 767px) {
  .footer__image1 {
    width: 54%;
  }
  .footer__image1 img {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .footer__image1 {
    width: 35%;
  }
  .footer__image1 img {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .footer__image2 {
    width: 84%;
    margin: 5vh 0 0 auto;
  }
  .footer__image2 img {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .footer__image2 {
    margin-top: 293px;
    width: 56%;
  }
  .footer__image2 img {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .footer__bottom {
    background: url(../img/footer_sp_bg_img.png) no-repeat center center/cover;
    width: 100%;
    height: auto;
    padding-bottom: 5px;
    margin-top: 50px;
  }
}
@media screen and (min-width: 768px) {
  .footer__bottom {
    background: url(../img/footer_bg_img.png) no-repeat center center/cover;
    width: 100%;
    height: auto;
    padding-bottom: 8px;
    margin-top: 10vh;
  }
}

.footer__icon {
  padding-top: 40px;
  margin: 0 auto;
  width: 80px;
}
@media screen and (min-width: 768px) {
  .footer__icon {
    padding-top: 200px;
    width: 160px;
  }
}
.footer__icon img {
  width: 100%;
}

.footer__text {
  text-align: center;
  margin: 40px auto 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  letter-spacing: 0.2em;
}
@media screen and (min-width: 768px) {
  .footer__text {
    margin-top: 189px;
    gap: 6vw;
  }
}
@media screen and (max-width: 767px) {
  .footer__text {
    gap: 8vw;
  }
}
.footer__text p {
  font-size: 12px;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .footer__text p {
    font-size: 1.2vw;
  }
}

.footer__copy-right {
  margin-top: 13px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .footer__copy-right {
    margin-top: 17px;
  }
}
.footer__copy-right p {
  font-size: 0.8vw;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .footer__copy-right p {
    font-size: 10px;
  }
}

/* Pinkoiリンクボタン */
.pinkoi-button {
  display: inline-block;
  background-color: #eb6100;
  color: #fff;
  font-family: "Noto Serif JP", sans-serif;
  font-size: 18px;
  font-weight: bold;
  padding: 20px 60px;
  text-decoration: none;
  border-radius: 0;
  transition: opacity 0.3s;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .pinkoi-button {
    font-size: 22px;
    padding: 24px 80px;
  }
}
.pinkoi-button:hover {
  opacity: 0.7;
}