@charset "UTF-8";
/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 500;
  font-size: 62.5%;
  color: #1F1F1F;
}

body {
  margin: 0;
}

main {
  display: block;
  overflow: hidden;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

p {
  font-size: 1.6rem;
  line-height: 2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  font-size: 1.8rem;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.6rem;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=number] {
  -moz-appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* =============================================
 カラーセット
============================================= */
/* =============================================
 header footer
============================================= */
.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 70px;
  padding: 10px 15px;
  background: #fff;
  z-index: 11;
}
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__logo__wrap {
  width: 125px;
}
.header__logo {
  width: 125px;
  display: inline-block;
}
.header__logo img {
  width: 100%;
}
.header__tel {
  width: 165px;
  margin-right: 61px;
}
.header__tel img {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .header__tel {
    margin-right: 0px;
  }
}
.header .burger {
  position: absolute;
  display: block;
  cursor: pointer;
  width: 40px;
  height: 18px;
  right: 15px;
  top: 26px;
  z-index: 9999;
}
.header .burger span {
  position: absolute;
  width: 27px;
  height: 1.5px;
  background: #333;
  transition: 0.3s ease;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
.header .burger span:nth-child(2) {
  top: 9px;
}
.header .burger span:nth-child(3) {
  top: 18px;
}
.header .burger.is-open span {
  transform: translate(-50%, -50%) rotate(30deg);
  top: 9px;
}
.header .burger.is-open span:nth-child(2) {
  display: none;
}
.header .burger.is-open span:nth-child(3) {
  top: 9px;
  transform: translate(-50%, -50%) rotate(-30deg);
}
@media screen and (min-width: 768px) {
  .header .burger {
    display: none;
  }
}
.header .burger-menu {
  position: absolute;
  display: none;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.header .burger-menu.is-open {
  margin-top: 70px;
  display: block;
  background: #000000;
  height: 100vh;
  padding: 50px 30px;
}
.header .burger-menu__list {
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.8rem;
  gap: 25px;
}
.header .burger-menu__list li a {
  padding: 20px 0 15px;
  border-bottom: 1px solid #fff;
  display: block;
  position: relative;
}
.header .burger-menu__list li a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  position: absolute;
  right: 5px;
  top: 27px;
  transform: rotate(45deg);
}

.footer {
  background: #0D0D0D;
  color: #fff;
  padding: 48px 20px 10px;
  font-family: "Zen Old Mincho", serif;
}
.footer__bn {
  width: 153px;
  margin: 0 auto;
}
.footer__bn img {
  width: 100%;
}
.footer__bn img:hover {
  opacity: 0.5;
  transition: 0.2s;
}
.footer__catch {
  font-size: 2rem;
  text-align: center;
  margin-top: 15px;
}
.footer__sns {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 23px;
}
.footer__sns li {
  width: 33px;
}
.footer__sns li img {
  width: 100%;
}
.footer__sns li img:hover {
  opacity: 0.5;
  transition: 0.2s;
}
.footer address {
  margin-top: 40px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 2.5rem;
}
.footer__permission {
  margin-top: 10px;
  text-align: center;
}
.footer__txt {
  margin-top: 40px;
  text-align: center;
  font-size: 1.2rem;
}

.pagetop {
  position: fixed;
  right: 37%;
  bottom: 20px;
}
@media screen and (max-width: 1200px) {
  .pagetop {
    right: 35%;
  }
}
@media screen and (max-width: 768px) {
  .pagetop {
    right: 14px;
  }
}

/* =============================================
 両サイドメニュー
============================================= */
.bg-menu-wrap {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  font-family: "Zen Old Mincho", serif;
  z-index: 11;
}

.bg-content {
  position: relative;
  max-width: 430px;
  width: 100%;
  height: 1px;
}

.left-menu {
  width: calc((100% - 430px) / 2);
  display: flex;
  color: #fff;
  height: 100%;
  position: relative;
}
.left-menu::before {
  content: "";
  position: absolute;
  background: url(../img/bg-stone-1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  bottom: -15%;
  left: -25%;
  width: 515px;
  height: 333px;
  z-index: 5;
}
.left-menu::after {
  content: "";
  position: absolute;
  background: url(../img/bg-stone-2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  top: -15%;
  right: -22%;
  width: 330px;
  height: 213px;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .left-menu::before {
    display: none;
  }
  .left-menu::after {
    display: none;
  }
}
.left-menu ul {
  margin-left: 60%;
  margin-bottom: 20%;
  font-size: 2.3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 15px;
  z-index: 10;
}
.left-menu ul li {
  position: relative;
}
.left-menu ul li:not(:last-child) {
  margin-bottom: 10px;
}
.left-menu ul li:hover {
  opacity: 0.7;
  transition: 0.2s;
}
.left-menu ul li::after {
  content: "";
  width: 14px;
  height: 2px;
  bottom: 10px;
  right: -22px;
  position: absolute;
  border-bottom: solid 1px #fff;
}
@media screen and (max-width: 1100px) {
  .left-menu ul {
    margin-left: 40%;
  }
}
@media screen and (max-width: 940px) {
  .left-menu ul {
    margin-left: 20%;
  }
}
@media screen and (max-width: 768px) {
  .left-menu ul {
    display: none;
  }
}

.right-menu {
  width: calc((100% - 430px) / 2);
  display: flex;
  color: #fff;
  height: 100%;
  text-align: center;
  position: relative;
  z-index: 10;
  /* スライド共通のスタイル */
  /* アクティブなスライドのスタイル */
}
.right-menu::after {
  content: "";
  position: absolute;
  background: url(../img/bg-stone-3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  top: 45%;
  right: -15%;
  width: 330px;
  height: 213px;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .right-menu::after {
    display: none;
  }
}
.right-menu__slide {
  padding: 20px 0 35px;
  width: 45%;
  margin: 0 auto;
  z-index: 10;
}
.right-menu__slide img {
  background: #fff;
}
.right-menu__slide__price {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
@media screen and (min-width: 1301px) {
  .right-menu__slide__price .br-1300 {
    display: none;
  }
}
.right-menu__slide__price img {
  width: 143px !important;
}
@media screen and (max-width: 1000px) {
  .right-menu__slide__price img {
    width: 110px !important;
  }
}
@media screen and (max-width: 1100px) {
  .right-menu__slide {
    width: 60%;
  }
}
@media screen and (max-width: 768px) {
  .right-menu__slide {
    display: none;
  }
}
.right-menu .splide__slide {
  margin-bottom: 20px;
}
.right-menu .splide__slide:last-child {
  margin-right: 0;
}
.right-menu .splide__slide__img {
  width: 331px;
  height: 306px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right-menu .splide__slide img {
  opacity: 1; /* 左右のスライドを薄くする */
  height: auto;
  width: 100%;
}
.right-menu .splide__slide.is-active img {
  opacity: 1; /* 中央のスライドは薄くしない */
  transform: scale(1); /* 中央のスライドは小さくしない */
  z-index: 1; /* 中央のスライドを一番上にする */
}

.price_gradation {
  background: linear-gradient(0deg, #fae965, #f5c467 20%, #d7aa5d 30%, #cb9241 35%, #faffff 37%, #f7d25d 70%, #f1e66a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3.3rem;
  margin-left: 10px;
  display: inline-block;
}

/* =============================================
 main-contents
============================================= */
.main-bg {
  background-color: #000;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
  position: relative;
  height: 100%;
}
.main-bg canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.snows-2 {
  width: 100vw;
  height: 100vh;
  position: fixed;
}

.main-content {
  width: 100%;
  position: relative;
}
.main-content__wrapper {
  position: relative;
  max-width: 430px;
  width: 100%;
  margin: 0 auto;
  background-color: rgba(19, 19, 19, 0.5);
  z-index: 11;
}
.main-content img {
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}

.banner {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 390px;
  width: 100%;
  margin-bottom: 5px;
  transition: 0.3s ease;
  z-index: 2;
}

.sec01 {
  position: relative;
  width: 100%;
  margin-bottom: 65px;
  padding-top: 96px;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .sec01 {
    padding-top: 76px;
  }
}
.sec01::before {
  content: "";
  position: absolute;
  height: 361px;
  width: 100%;
  max-width: 100vw;
  background: url(../img/mv-sunrise.png) no-repeat center bottom/contain;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.sec01::after {
  content: "";
  position: absolute;
  height: 73%;
  width: 100%;
  max-width: 100vw;
  background: url(../img/mv_bg.png) no-repeat center bottom/contain;
  left: 0;
  top: 0;
  right: 0;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .sec01::after {
    height: 68%;
  }
}
.sec01 .ttl01 {
  margin: 0 auto 200px;
  width: 340px;
}
@media screen and (max-width: 768px) {
  .sec01 .ttl01 {
    margin: 0 auto 160px;
    width: 90%;
  }
}
.sec01 .ttl02 {
  width: 216px;
  margin: 0 auto 5px;
}
@media screen and (max-width: 768px) {
  .sec01 .ttl02 {
    width: 47%;
  }
}
.sec01 .ring-c {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 182px;
  width: 398px;
  height: 355px;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .sec01 .ring-c {
    width: 90%;
    height: 38%;
    bottom: 169px;
  }
}
.sec01 .ring-l {
  position: absolute;
  width: 264px;
  height: 199px;
  left: -90px;
  bottom: 305px;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .sec01 .ring-l {
    width: 214px;
    height: 199px;
    left: -70px;
    bottom: 235px;
  }
}
.sec01 .ring-r {
  position: absolute;
  width: 203px;
  height: 102.5px;
  right: -40px;
  bottom: 355.5px;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .sec01 .ring-r {
    width: 163px;
    height: 102.5px;
    right: -20px;
    bottom: 295.5px;
  }
}
.sec01 .shine {
  position: absolute;
  width: 200%;
  max-width: 400px;
  height: 102.5px;
  right: -75px;
  top: 295.5px;
  z-index: 3;
  opacity: 0;
}
@media screen and (max-width: 400px) {
  .sec01 .shine {
    right: -100px;
    top: 272.5px;
  }
}
.sec01__note {
  color: #fff;
  line-height: 1.5;
  width: 100%;
  font-size: 1rem;
}
@media screen and (max-width: 400px) {
  .sec01__note {
    font-size: 0.9rem;
  }
}

.sec02 {
  position: relative;
  padding: 0 0 100px;
}
.sec02::before {
  content: "";
  position: absolute;
  background: url(../img/anniv-bg.png) no-repeat center/cover;
  width: 100%;
  height: 640px;
  top: 70px;
  left: 0;
  z-index: 0;
}
.sec02__ttl {
  position: relative;
  max-width: 365px;
  margin: 0 auto 20px;
}
.sec02__mv {
  position: relative;
  width: 375px;
  margin: 0 auto;
}

.sec03 {
  position: relative;
  margin: -5px 0 0;
  /* スライド共通のスタイル */
  /* アクティブなスライドのスタイル */
  /* レイアウトの為のスタイル */
}
.sec03__sub {
  position: relative;
  font-size: 2rem;
  margin: 0 auto 20px;
  padding: 5px 0;
  line-height: 1.5;
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  background: linear-gradient(90deg, rgba(178, 136, 44, 0) 0%, rgba(235, 187, 72, 0.83) 7%, rgb(208, 157, 53) 22%, rgb(245, 230, 181) 44%, rgb(253, 235, 180) 51%, rgb(199, 147, 41) 65%, rgb(226, 178, 65) 90%, rgba(248, 226, 153, 0) 100%);
}
.sec03__sub span {
  position: relative;
}
.sec03__ttl {
  color: #fff;
  text-align: center;
  font-size: 2.8rem;
  font-family: "Zen Old Mincho", serif;
}
.sec03__txt {
  margin: 0 auto;
  max-width: 353px;
  padding-bottom: 75px;
  position: relative;
}
.sec03__txt::before {
  content: "";
  position: absolute;
  background: url(../img/arrow-btm.svg) no-repeat center/contain;
  width: 7.75px;
  height: 44px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.sec03__slide {
  padding: 22px 0 60px;
}
.sec03__slide p {
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.4rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sec03__slide p {
    font-size: 1.3rem;
  }
}
.sec03__slide__price {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.sec03__slide__price img {
  width: 143px !important;
}
.sec03 .splide__slide {
  margin-right: 20px;
}
.sec03 .splide__slide:last-child {
  margin-right: 0;
}
.sec03 .splide__slide__img {
  background: #fff;
  width: 100%;
  height: 238.6px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
@media screen and (max-width: 400px) {
  .sec03 .splide__slide__img {
    height: 200px;
  }
}
.sec03 .splide__slide img {
  opacity: 0.3; /* 左右のスライドを薄くする */
  height: auto;
  width: 100%;
}
.sec03 .splide__slide.is-active img {
  opacity: 1; /* 中央のスライドは薄くしない */
  transform: scale(1); /* 中央のスライドは小さくしない */
  z-index: 1; /* 中央のスライドを一番上にする */
}
.sec03 .wrapper {
  margin-inline: auto;
  margin-top: 10px;
  max-width: 600px;
  width: 100%;
}
.sec03 .price_gradation {
  background: linear-gradient(0deg, #fae965 10%, #f5c467 20%, #d7aa5d 30%, #cb9241 32%, #faffff 34%, #f7d25d 70%, #f1e66a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1.2;
}

.sec04 {
  position: relative;
  padding: 35px 0 0;
  background-position: 23% -14%;
  background-repeat: no-repeat;
  padding-top: 64px;
  /* スライド共通のスタイル */
  /* アクティブなスライドのスタイル */
  /* レイアウトの為のスタイル */
}
.sec04__sub {
  position: relative;
  max-width: 240px;
  font-size: 2.7rem;
  margin: 0 auto 24px;
  padding: 5px 0;
  line-height: 1.5;
  text-align: center;
  font-family: "Zen Old Mincho", serif;
}
.sec04__sub span {
  position: relative;
}
.sec04__ttl {
  margin: 0 auto 30px;
  max-width: 317px;
  position: relative;
}
.sec04__ttl__left {
  position: absolute;
  width: 70px;
  top: -130%;
  left: -60%;
}
.sec04__ttl__right {
  position: absolute;
  width: 70px;
  top: 30%;
  left: 82%;
}
.sec04__ttl02 {
  margin: 0 auto 10px;
  max-width: 280px;
  position: relative;
}
.sec04__ttl02::before {
  content: "";
  position: absolute;
  background: url(../img/sec04-ttl02-left.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 47px;
  height: 47px;
  top: 0;
  left: -80px;
}
@media screen and (max-width: 768px) {
  .sec04__ttl02::before {
    left: -53px;
  }
}
.sec04__ttl02::after {
  content: "";
  position: absolute;
  background: url(../img/sec04-ttl02-right.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 46px;
  height: 50px;
  top: 30px;
  right: -60px;
}
.sec04__ttl03 {
  max-width: 327px;
  margin: 0 auto;
  position: relative;
}
.sec04__ttl03::before {
  content: "";
  position: absolute;
  background: url(../img/sec04-ttl03-right.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 58px;
  height: 56px;
  top: -37px;
  right: -60px;
}
@media screen and (max-width: 768px) {
  .sec04__ttl03 {
    width: 90%;
  }
}
.sec04__txt01 {
  max-width: 360px;
  margin: 0 auto 40px;
  position: relative;
}
.sec04__txt01::before {
  content: "";
  position: absolute;
  background: url(../img/sec04-txt01-left.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 74px;
  height: 79px;
  top: -37px;
  left: -60px;
}
.sec04__txt01::after {
  content: "";
  position: absolute;
  background: url(../img/sec04-right.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 72px;
  height: 72px;
  top: 156px;
  right: -47px;
}
@media screen and (max-width: 768px) {
  .sec04__txt01 {
    width: 90%;
  }
}
.sec04__txt02 {
  padding-bottom: 25px;
  max-width: 220px;
  margin: 0 auto;
  position: relative;
}
.sec04__txt02::before {
  content: "";
  position: absolute;
  background: url(../img/ttl-arrow_01.svg) no-repeat center/contain;
  width: 253px;
  height: 13px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.sec04__txt02::after {
  content: "";
  position: absolute;
  background: url(../img/sec04-txt02-left.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 72px;
  height: 72px;
  top: 86px;
  right: 263px;
}
@media screen and (max-width: 768px) {
  .sec04__txt02 {
    width: 90%;
  }
}
.sec04__txt03 {
  max-width: 320px;
  margin: -30px auto 0;
  position: relative;
}
.sec04__txt03::before {
  content: "";
  position: absolute;
  background: url(../img/sec04-ttl02-right.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 46px;
  height: 50px;
  top: -70px;
  right: -43px;
}
.sec04__txt03::after {
  content: "";
  position: absolute;
  background: url(../img/sec04-txt03-left.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 52px;
  height: 53px;
  top: 92px;
  left: -60px;
}
@media screen and (max-width: 768px) {
  .sec04__txt03 {
    width: 90%;
  }
}
.sec04__txt04 {
  max-width: 290px;
  margin: 26px auto 0;
  position: relative;
  padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .sec04__txt04 {
    text-align: center;
  }
  .sec04__txt04 img {
    max-width: 90%;
    margin: 0 auto;
  }
}
.sec04__txt04::before {
  content: "";
  position: absolute;
  background: url(../img/ttl-arrow_02.svg) no-repeat center/contain;
  width: 283px;
  height: 13px;
  left: 49%;
  transform: translateX(-50%);
  bottom: -15px;
}
.sec04__txt05 {
  max-width: 315px;
  margin: 31px auto 0;
}
.sec04__img01 {
  margin-top: -30px;
}
.sec04__inner {
  max-width: 97%;
  width: 100%;
  margin: 0 auto;
  padding: 49px 7px;
  margin-bottom: 10px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec04__inner {
    padding: 41px 7px;
  }
}
.sec04__inner::before, .sec04__inner::after {
  content: "";
  position: absolute;
  height: 95.3%;
  width: 8px;
  left: -0.5px;
  top: 23px;
  background: url(../img/frame-side.png) repeat-y center/contain;
  z-index: -1;
}
.sec04__inner::after {
  left: initial;
  right: -0.5px;
  transform: rotate(180deg);
}
.sec04__inner .frame-top {
  position: absolute;
  height: 23px;
  width: 100%;
  left: 0;
  top: 0;
}
@media screen and (max-width: 768px) {
  .sec04__inner .frame-top {
    height: 28px;
    width: 99.78%;
    left: 0.4px;
  }
}
.sec04__inner .inner-txt {
  position: relative;
  font-size: 2rem;
  text-align: center;
  color: #fff;
  line-height: 1.7;
  margin-bottom: 15px;
}
.sec04__inner .inner-txt span {
  position: relative;
  font-size: 2.4rem;
  border-bottom: 1px solid #fff;
}
@media screen and (max-width: 400px) {
  .sec04__inner .inner-txt {
    font-size: 1.8rem;
  }
}
.sec04__inner .inner-txt02 {
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.7;
  margin-bottom: 5px;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .sec04__inner .inner-txt02 {
    font-size: 1.6rem;
  }
}
.sec04__inner .inner-txt03 {
  color: #fff;
  text-align: center;
  line-height: 1.7;
  font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
  .sec04__inner .inner-txt03 {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 400px) {
  .sec04__inner .inner-txt03 {
    font-size: 1.2rem;
  }
}
.sec04__under {
  margin-left: -6px;
  margin-right: -7px;
}
.sec04__slide {
  padding: 20px 0 35px;
  width: 97%;
  margin: 0 auto;
}
.sec04 .splide__slide {
  margin-right: 20px;
}
.sec04 .splide__slide:last-child {
  margin-right: 0;
}
.sec04 .splide__slide img {
  opacity: 0.3; /* 左右のスライドを薄くする */
  height: auto;
  width: 100%;
}
.sec04 .splide__slide.is-active img {
  opacity: 1; /* 中央のスライドは薄くしない */
  transform: scale(1); /* 中央のスライドは小さくしない */
  z-index: 1; /* 中央のスライドを一番上にする */
}
.sec04 .wrapper {
  margin-inline: auto;
  margin-top: 10px;
  max-width: 600px;
  width: 100%;
}
.sec04__ring-wrap {
  display: flex;
  justify-content: space-between;
  max-width: 238px;
  margin: 0 auto;
  padding: 150px 0 100px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec04__ring-wrap {
    max-width: 67%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26%;
    padding: 144px 0 100px;
  }
}
.sec04__ring-wrap .item {
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  color: #fff;
}
.sec04__ring-wrap .item p {
  font-size: 2.6rem;
  line-height: 1.5;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .sec04__ring-wrap .item p {
    font-size: 2.3rem;
    line-height: 1.3;
  }
}
.sec04__ring-wrap .ring01, .sec04__ring-wrap .ring02 {
  position: absolute;
  width: 253.5px;
  height: 294px;
  top: 12px;
}
@media screen and (max-width: 768px) {
  .sec04__ring-wrap .ring01, .sec04__ring-wrap .ring02 {
    width: 100%;
    height: 90%;
  }
}
.sec04__ring-wrap .ring01 {
  left: -93px;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .sec04__ring-wrap .ring01 {
    left: -75px;
  }
}
.sec04__ring-wrap .ring02 {
  right: -93px;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .sec04__ring-wrap .ring02 {
    right: -75px;
  }
}
.sec04 .frame-under {
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .sec04 .frame-under {
    height: 28px;
    width: 99.78%;
    left: 0.4px;
  }
}

.sec05 {
  background: url(../img/sec05-bg.png);
  background-position: 0 -3%;
  background-repeat: no-repeat;
  padding-top: 64px;
}
.sec05__sub {
  text-align: center;
  font-family: "Zen Old Mincho", serif;
  color: #fff;
}
.sec05__sub__txt01 {
  color: #1F1F1F;
  max-width: 333px;
  font-size: 2.7rem;
  font-weight: 400;
  margin: 0 auto 15px;
  padding: 5px 0;
  line-height: 1.5;
  text-align: center;
}
.sec05__sub__txt02 {
  width: auto;
  margin: 0 auto;
  font-size: 2.4rem;
}
.sec05__sub__txt03 {
  width: 85px;
  margin: 0 auto;
}
.sec05__inner {
  max-width: 97%;
  width: 100%;
  margin: 30px auto 0;
  padding: 60px 0 0 0;
  position: relative;
}
.sec05__inner::before, .sec05__inner::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 8px;
  left: -0.5px;
  top: 23px;
  background: url(../img/frame-side.png) repeat-y center/contain;
}
.sec05__inner::after {
  left: initial;
  right: -0.5px;
  transform: rotate(180deg);
}
.sec05__inner ol {
  margin: 0 30px;
}
.sec05__inner ol > li {
  margin-bottom: 30px;
}
.sec05__inner h4 {
  font-family: "Zen Old Mincho", serif;
  font-size: 2.8rem;
}
.sec05__inner h4 > .small-01 {
  font-size: 2rem;
}
@media screen and (max-width: 768px) {
  .sec05__inner h4 > .small-01 {
    font-size: 1.6rem;
  }
}
.sec05__inner h4 > .small-02 {
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .sec05__inner h4 > .small-02 {
    font-size: 1.4rem;
  }
}
.sec05__inner h4 > .small-03 {
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .sec05__inner h4 > .small-03 {
    font-size: 1.6rem;
  }
}
.sec05__inner .frame-top {
  position: absolute;
  background: url(../img/frame-top.png) no-repeat center/contain;
  height: 23px;
  width: 100%;
  left: 0;
  top: 0;
}
.sec05__inner .inner-txt {
  position: relative;
  font-size: 2rem;
  text-align: center;
  color: #fff;
  line-height: 1.7;
}
.sec05__inner .inner-txt span {
  position: relative;
  font-size: 2.4rem;
  border-bottom: 1px solid #fff;
}
.sec05__inner .inner-txt02 {
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.7;
  color: #fff;
}
.sec05__inner .inner-txt03 {
  color: #fff;
  text-align: center;
  line-height: 1.7;
  font-size: 1.4rem;
}
.sec05__inner__ttl {
  margin-left: 57px;
  color: #fff;
  position: relative;
}
.sec05__inner__ttl::before {
  content: "";
  position: absolute;
  width: 57px;
  height: 85px;
  top: -31px;
  left: -57px;
}
@media screen and (max-width: 768px) {
  .sec05__inner__ttl::before {
    left: -63px;
  }
}
@media screen and (max-width: 768px) {
  .sec05__inner__ttl {
    margin-left: 63px;
  }
}
.sec05__inner__ttl__01::before {
  background: url(../img/sec05-inner-ttl01.png) no-repeat center/contain;
}
@media screen and (max-width: 768px) {
  .sec05__inner__ttl__01 {
    font-size: 2.3rem !important;
  }
}
.sec05__inner__ttl__02::before {
  background: url(../img/sec05-inner-ttl02.png) no-repeat center/contain;
  top: -22px;
}
@media screen and (max-width: 768px) {
  .sec05__inner__ttl__02 {
    font-size: 2.3rem !important;
  }
}
.sec05__inner__ttl__03::before {
  background: url(../img/sec05-inner-ttl03.png) no-repeat center/contain;
  top: -21px;
}
@media screen and (max-width: 768px) {
  .sec05__inner__ttl__03 {
    font-size: 2.3rem !important;
  }
}
.sec05__inner__ttl__04 {
  margin-bottom: 30px;
}
.sec05__inner__ttl__04::before {
  background: url(../img/sec05-inner-ttl04.png) no-repeat center/contain;
  top: -33px;
}
@media screen and (max-width: 768px) {
  .sec05__inner__ttl__04 {
    font-size: 2.3rem !important;
  }
  .sec05__inner__ttl__04::before {
    top: -38px;
  }
}
.sec05__inner__store-map-ttl {
  font-family: "Zen Old Mincho", serif;
  font-size: 2.2rem;
  color: #fff;
  position: relative;
  margin: 30px 0 20px 35px;
}
.sec05__inner__store-map-ttl::before {
  content: "";
  position: absolute;
  width: 25px;
  border: 1px solid #fff;
  top: 12px;
  left: -29px;
}
.sec05__inner__store-map {
  width: 100%;
}
.sec05__inner__img {
  margin: 17px auto 0;
  text-align: center;
}
.sec05__inner__img img {
  width: 100%;
}
.sec05__inner__txt {
  width: 321px;
  margin: 0 auto;
}
.sec05__inner__txt > img {
  width: 100%;
}
.sec05__under {
  margin-top: 45px;
  margin-bottom: 95px;
  position: relative;
}
.sec05__under .frame-under {
  position: absolute;
  top: -37px;
  left: 6px;
  width: 97%;
  height: 50px;
}
@media screen and (max-width: 768px) {
  .sec05__under .frame-under {
    width: 96.8%;
    top: -38px;
  }
}

.sec06 {
  margin-bottom: 70px;
}
.sec06 h3 {
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  font-size: 2.5rem;
}
@media screen and (max-width: 768px) {
  .sec06 h3 {
    font-size: 2.3em;
  }
}
.sec06__ttl__02 {
  margin-bottom: 20px;
}
.sec06__inner {
  max-width: 97%;
  width: 100%;
  margin: 30px auto 0;
  padding: 60px 0 0 0;
  position: relative;
}
.sec06__inner::before, .sec06__inner::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 8px;
  left: -0.5px;
  top: 23px;
  background: url(../img/frame-side.png) repeat-y center/contain;
}
.sec06__inner::after {
  left: initial;
  right: -0.5px;
  transform: rotate(180deg);
}
.sec06__inner .frame-top {
  position: absolute;
  background: url(../img/frame-top.png) no-repeat center/contain;
  height: 23px;
  width: 100%;
  left: 0;
  top: 0;
}
@media screen and (max-width: 768px) {
  .sec06__inner .frame-top {
    height: 28px;
    width: 99.78%;
    left: 0.4px;
  }
}
.sec06__inner__under {
  margin-top: 45px;
  margin-bottom: 95px;
  position: relative;
}
.sec06__inner__under .frame-under {
  position: absolute;
  top: -37px;
  left: 6px;
  width: 97%;
  height: 50px;
}
@media screen and (max-width: 768px) {
  .sec06__inner__under .frame-under {
    width: 96.8%;
  }
}
.sec06__faq {
  font-size: 1.4rem;
  font-weight: 500;
}
.sec06 .faq-style01 {
  background-color: #fff;
  width: 95%;
  max-width: 370px;
  margin: 0 auto 30px;
  font-family: "Zen Old Mincho", serif;
  padding: 20px 10px 20px;
}
@media screen and (max-width: 768px) {
  .sec06 .faq-style01 {
    width: 90%;
  }
}
.sec06 .faq-style01 > dt {
  cursor: pointer;
  display: flex;
  padding: 0 30px 0 0;
  position: relative;
}
.sec06 .faq-style01 > dt .txt {
  font-size: 20px;
  line-height: 1.7;
}
.sec06 .faq-style01 > dt::before, .sec06 .faq-style01 > dt::after {
  content: "";
  background: #333;
  position: absolute;
  width: 10px;
  height: 1px;
  right: 15px;
  top: 50%;
}
@media screen and (max-width: 768px) {
  .sec06 .faq-style01 > dt::before, .sec06 .faq-style01 > dt::after {
    right: 5px;
  }
}
.sec06 .faq-style01 > dt::before {
  transform: translateY(-50%) rotate(90deg);
  transition: 0.5s;
}
.sec06 .faq-style01 > dt:not(.is-open):hover {
  opacity: 0.5;
}
.sec06 .faq-style01 > dt.is-open::before {
  transform: translateY(-50%) rotate(0);
}
.sec06 .faq-style01 dd {
  display: none;
  margin-bottom: 0px;
  padding: 15px 0 0;
}
.sec06 .faq-style01 dd .wrapper {
  display: flex;
}
.sec06 .faq-style01 dd + dt {
  margin-top: 10px;
}
.sec06 .faq-style01 .icon {
  border-radius: 100px;
  color: #1F1F1F;
  font-size: 20px;
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 31px;
  margin: 0 8px 0 0;
}
.sec06 .faq-style01 .txt {
  flex: 1;
}
.sec06__slide {
  margin: 30px auto;
  width: 97%;
  color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  /* スライド共通のスタイル */
  /* アクティブなスライドのスタイル */
  /* レイアウトの為のスタイル */
  /* プログレスバーのスタイル */
}
.sec06__slide time {
  font-size: 1.3rem;
}
.sec06__slide .swiper-slide img {
  height: auto;
  width: 100%;
}
.sec06__slide__article-ttl {
  line-height: 2.4rem;
  font-weight: 400;
}
.sec06__slide .splide__slide {
  margin-right: 20px;
}
.sec06__slide .splide__slide:last-child {
  margin-right: 0;
}
.sec06__slide .splide__slide img {
  opacity: 0.3; /* 左右のスライドを薄くする */
  height: auto;
  width: 100%;
  margin-bottom: 5px;
}
.sec06__slide .splide__slide.is-active img {
  opacity: 1; /* 中央のスライドは薄くしない */
  transform: scale(1); /* 中央のスライドは小さくしない */
  z-index: 1; /* 中央のスライドを一番上にする */
}
.sec06__slide .wrapper {
  margin-inline: auto;
  margin-top: 10px;
  max-width: 600px;
  width: 100%;
}
.sec06__slide .my-carousel-progress {
  background-color: #ccc;
}
.sec06__slide .my-carousel-progress-bar {
  background-color: greenyellow;
  height: 10px;
  transition: width 1000ms ease;
  width: 0;
}

.c-voice-time {
  display: block;
  margin-bottom: 10px;
}

.annotation {
  font-size: 1.1rem;
}

/* =============================================
 セクション
============================================= */
.container {
  width: 90%;
  margin: 0 auto;
}

/* =============================================
 ボックス
============================================= */
.box-style {
  position: relative;
  padding: 40px;
}
.box-style.bg01 {
  background: #fff;
  border-radius: 20px;
}

/* =============================================
 cv
============================================= */
.sec-cv__ttl {
  width: 100%;
  height: 44px;
  background-color: #AC7F00;
}
.sec-cv__txt01 {
  display: grid;
  place-items: center;
  color: #fff;
  max-width: 156px;
  margin: 0 auto;
  align-items: center;
}
.sec-cv__txt01 > img {
  width: 100%;
}
.sec-cv__inner {
  background: url(../img/cv-inner-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 400px;
}
.sec-cv__txt02 {
  max-width: 360px;
  margin: 0 auto;
  padding: 10px 0;
}
@media screen and (max-width: 768px) {
  .sec-cv__txt02 {
    width: 90%;
  }
}
.sec-cv__btn-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 95%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .sec-cv__btn-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    width: 95%;
    margin: 0 auto;
  }
}
.sec-cv__btn-list > li {
  width: 100%;
  height: 54px;
  background-image: url("../img/cv-btn-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .sec-cv__btn-list > li {
    width: 100%;
  }
}
.sec-cv__btn-list > li:hover {
  opacity: 0.8;
  transition: 0.2s;
}
.sec-cv__btn-list > li > a {
  display: block;
  max-width: 175px;
  width: 100vw;
  height: 41px;
  border-radius: 24px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .sec-cv__btn-list > li > a {
    max-width: 155px;
    height: 39px;
  }
}
.sec-cv__btn-list > li .cv-store {
  background-color: #E32E27;
}
.sec-cv__btn-list > li .cv-line {
  background-color: #06C755;
}
.sec-cv__btn-list > li .cv-delivery {
  background-color: #FF921C;
}
.sec-cv__btn-list > li .cv-businesstrip {
  background-color: #0997F5;
}
.sec-cv__banner {
  margin-top: 10px;
}
.sec-cv__note {
  line-height: 1.4;
  width: 100%;
  font-size: 1.1rem;
}
@media screen and (max-width: 400px) {
  .sec-cv__note {
    font-size: 0.9rem;
  }
}

/* =============================================
 リスト
============================================= */
.card-list {
  display: grid;
  gap: 30px;
}
.card-list.col01 {
  grid-template-columns: 1fr;
}
.card-list.col02 {
  grid-template-columns: repeat(2, 1fr);
}
.card-list.col03 {
  grid-template-columns: repeat(3, 1fr);
}
.card-list.col04 {
  grid-template-columns: repeat(4, 1fr);
}
.card-list.col05 {
  grid-template-columns: repeat(5, 1fr);
}
.card-list.color-sample {
  gap: 0;
  color: #fff;
  font-weight: 700;
}
.card-list.color-sample > li:nth-child(1) {
  background: #8C7E72;
}
.card-list.color-sample > li:nth-child(2) {
  background: #77D9BD;
}
.card-list.color-sample > li:nth-child(3) {
  background: #023059;
}
.card-list.color-sample > li:nth-child(4) {
  background: #3973BF;
}
.card-list.color-sample > li:nth-child(5) {
  background: #0D0D0D;
}
.card-list > li {
  padding: 25px;
}

.banner-list-wrap {
  width: 90%;
  margin: 20px auto 0;
}

.banner-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.banner-list > li {
  width: 48%;
}
.banner-list > li:hover {
  opacity: 0.5;
  transition: 0.2s;
}

/* =============================================
 ボタン
============================================= */
.btn-item01 {
  display: block;
  top: 20px;
  left: -20px;
  background: #023059;
  color: #fff;
  font-weight: 700;
  width: 40px;
  height: 40px;
  border-radius: 70px;
  transition: 0.2s ease;
}
.btn-item01:hover {
  transform: scale(1.25);
}

.tab-area {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.tab-item {
  background-color: #000;
  font-family: "Zen Old Mincho", serif;
  color: #fff;
  font-size: 1.6rem;
  border: solid 1px #fff;
  border-radius: 18px;
  width: 100%;
  height: 36px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  transition: 0.3s;
  cursor: pointer;
}
.tab-item:hover {
  opacity: 0.7;
}
.tab-item:not(:last-child) {
  margin-right: 10px;
}
.tab-item.active {
  background-color: #C19C33;
  color: #fff;
  transition: 0.3s;
  border: none;
}

@media screen and (max-width: 768px) {
  .tab-item {
    padding: 10px 5px;
  }
}
.panel-area {
  padding: 30px 0 0 0;
}
.panel-area ol {
  margin: 0 auto;
}
.panel-area ol > li {
  background-color: #fff;
  padding: 18px 10px;
  position: relative;
  margin-bottom: 64px;
}
.panel-area ol > li::after {
  content: "";
  position: absolute;
  background: url(../img/arrow-btm.svg) no-repeat center/contain;
  width: 7.75px;
  height: 44px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -52px;
}
.panel-area ol > li:last-child {
  margin-bottom: 10px;
}
.panel-area ol > li:last-child::after {
  content: none;
}
.panel-area ol > li > figure {
  float: left;
  width: 94px;
  margin-right: 10px;
}
@media screen and (max-width: 768px) {
  .panel-area ol > li > figure {
    width: 85px;
  }
}
.panel-area h5 {
  margin-left: 100px;
  padding-bottom: 10px;
  position: relative;
  font-size: 2rem;
  font-family: "Zen Old Mincho", serif;
  border-bottom: solid 1px #C19C33;
}
.panel-area h5::before {
  content: "";
  position: absolute;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .panel-area h5 {
    font-size: 1.6rem;
    margin-left: 95px;
  }
}
.panel-area p {
  font-size: 1.3rem;
  margin-top: 8px;
}
.panel-area p a {
  color: #C19C33;
  border-bottom: solid 1px #C19C33;
}
.panel-area p a:hover {
  opacity: 0.5;
  transition: 0.2s;
}
@media screen and (max-width: 768px) {
  .panel-area p {
    font-size: 1.2rem;
  }
}
.panel-area__step1 {
  padding-left: 24px;
}
@media screen and (max-width: 768px) {
  .panel-area__step1 {
    padding-left: 19px;
  }
}
.panel-area__step1::before {
  background: url(../img/sec05-panel-no1.png) no-repeat;
  width: 21px;
  height: 48px;
  top: -15px;
  left: 0;
}
@media screen and (max-width: 768px) {
  .panel-area__step1::before {
    width: 18px;
    top: -14px;
  }
}
.panel-area__step2 {
  padding-left: 27px;
}
@media screen and (max-width: 768px) {
  .panel-area__step2 {
    padding-left: 24px;
  }
}
.panel-area__step2::before {
  background: url(../img/sec05-panel-no2.png) no-repeat;
  width: 24px;
  height: 48px;
  top: -16px;
  left: 0;
}
@media screen and (max-width: 768px) {
  .panel-area__step2::before {
    width: 22px;
    top: -15px;
  }
}
.panel-area__step3 {
  padding-left: 17px;
}
.panel-area__step3::before {
  background: url(../img/sec05-panel-no3.png) no-repeat;
  width: 19px;
  height: 48px;
  top: -12px;
  left: 0;
}
@media screen and (max-width: 768px) {
  .panel-area__step3::before {
    width: 16px;
  }
}
.panel-area__step4 {
  padding-left: 26px;
}
@media screen and (max-width: 768px) {
  .panel-area__step4 {
    padding-left: 22px;
  }
}
.panel-area__step4::before {
  background: url(../img/sec05-panel-no4.png) no-repeat;
  width: 25px;
  height: 48px;
  top: -14px;
  left: 0;
}
@media screen and (max-width: 768px) {
  .panel-area__step4::before {
    width: 19px;
  }
}
.panel-area__step5 {
  padding-left: 26px;
}
.panel-area__step5::before {
  background: url(../img/sec05-panel-no5.png) no-repeat;
  width: 25px;
  height: 48px;
  top: -17px;
  left: 0;
}
.panel-area__step6 {
  padding-left: 26px;
}
.panel-area__step6::before {
  background: url(../img/sec05-panel-no6.png) no-repeat;
  width: 25px;
  height: 48px;
  top: -13px;
  left: 0;
}
.panel-area__line {
  margin-left: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.panel-area .annotation {
  font-size: 1.1rem;
  margin-top: 10px;
  display: inline-block;
}
.panel-area .mt_7 {
  margin-top: 7px;
}

.panel-item {
  display: none;
}
.panel-item.active {
  display: block;
}

.sp-only {
  display: none;
}

@media screen and (max-width: 768px) {
  .sp-only {
    display: block;
  }
}
.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.line-price {
  line-height: 1.2;
}

/*------------
splide
-------------*/
.splide__article-title p {
  line-height: 1.4;
}

.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  backface-visibility: hidden;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0 2px;
  pointer-events: auto;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized,
.splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.splide__track--fade > .splide__list {
  display: block;
}

.splide__track--fade > .splide__list > .splide__slide {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  position: relative;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__arrow {
  align-items: center;
  background: #e9e9e9;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: 64px;
  width: 64px;
  justify-content: center;
  opacity: 0.7;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.splide__arrow--prev::after,
.splide__arrow--next::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border: solid #000;
  border-width: 1px 1px 0 0;
}

.splide__arrow--prev::after {
  margin-left: 0.4rem;
  transform: rotate(-135deg);
}

.splide__arrow--next::after {
  margin-right: 0.4rem;
  transform: rotate(45deg);
}

.splide__arrow svg {
  fill: #000;
  height: 1.2em;
  width: 1.2em;
}

.splide__arrow:hover:not(:disabled) {
  opacity: 0.9;
}

.splide__arrow:disabled {
  opacity: 0.3;
}

.splide__arrow:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__arrow--prev {
  left: calc((100% - 1080px) / 2);
}

.splide__arrow--prev svg {
  transform: scaleX(-1);
}

.splide__arrow--next {
  right: calc((100% - 1080px) / 2);
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__pagination {
  bottom: 1em;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 1;
}

.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin: 3px;
  opacity: 0.7;
  padding: 0;
  position: relative;
  transition: transform 0.2s linear;
  width: 8px;
}

.splide__pagination__page.is-active {
  background: #333;
  transform: scale(1.4);
  z-index: 1;
}

.splide__pagination__page:hover {
  cursor: pointer;
  opacity: 0.9;
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__progress__bar {
  background: #ccc;
  height: 3px;
}

.splide__slide {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.splide__slide:focus {
  outline: 0;
}

@supports (outline-offset: -3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide__slide:focus-visible {
    border: 3px solid #0bf;
  }
}
@supports (outline-offset: -3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #0bf;
  }
  .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
    border-color: #0bf;
  }
}
.splide__toggle {
  cursor: pointer;
}

.splide__toggle:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__track--nav > .splide__list > .splide__slide {
  border: 3px solid transparent;
  cursor: pointer;
}

.splide__track--nav > .splide__list > .splide__slide.is-active {
  border: 3px solid #000;
}

.splide__arrows--rtl .splide__arrow--prev {
  left: auto;
  right: 1em;
}

.splide__arrows--rtl .splide__arrow--prev svg {
  transform: scaleX(1);
}

.splide__arrows--rtl .splide__arrow--next {
  left: 1em;
  right: auto;
}

.splide__arrows--rtl .splide__arrow--next svg {
  transform: scaleX(-1);
}

.splide__arrows--ttb .splide__arrow {
  left: 50%;
  transform: translate(-50%);
}

.splide__arrows--ttb .splide__arrow--prev {
  top: 1em;
}

.splide__arrows--ttb .splide__arrow--prev svg {
  transform: rotate(-90deg);
}

.splide__arrows--ttb .splide__arrow--next {
  bottom: 1em;
  top: auto;
}

.splide__arrows--ttb .splide__arrow--next svg {
  transform: rotate(90deg);
}

.splide__pagination--ttb {
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: 0.5em;
  top: 0;
}

.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden; /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

.bgextend2 {
  animation-name: bgextendAnimeBase2;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden; /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bgextendAnimeBase2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.bgappear2 {
  animation-name: bgextendAnimeSecond2;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bgextendAnimeSecond2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*左から右*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 170%;
  max-width: 240px;
  height: 125%;
  top: -9%;
  left: -34%;
  background: linear-gradient(90deg, rgba(178, 136, 44, 0) 0%, rgba(235, 187, 72, 0.83) 7%, rgb(208, 157, 53) 22%, rgb(245, 230, 181) 44%, rgb(253, 235, 180) 51%, rgb(199, 147, 41) 65%, rgb(226, 178, 65) 90%, rgba(248, 226, 153, 0) 100%);
}

.bgLRextend2::before {
  animation-name: bgLRextendAnime2;
  animation-duration: 1s;
  animation-fill-mode: backwards;
  content: "";
  position: absolute;
  width: 170%;
  max-width: 310px;
  height: 125%;
  top: -9%;
  left: -24%;
  z-index: -1;
  background: linear-gradient(90deg, rgba(178, 136, 44, 0) 0%, rgba(235, 187, 72, 0.83) 7%, rgb(208, 157, 53) 22%, rgb(245, 230, 181) 44%, rgb(253, 235, 180) 51%, rgb(199, 147, 41) 65%, rgb(226, 178, 65) 90%, rgba(248, 226, 153, 0) 100%);
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(1);
  }
}
@keyframes bgLRextendAnime2 {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(1);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger,
.bgappearTrigger2,
.bgLRextendTrigger2 {
  opacity: 0;
}

/* 宝石の輝きのアニメーション */
.rotate-fadeUp {
  animation-name: rotate-fadeUp-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes rotate-fadeUp-animation {
  from {
    opacity: 0;
    /* 　　translateYで100px下からフェードアップさせる処理 */
    transform: translateY(100px) rotate(40deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}
/* 宝石が揺れるアニメーション */
.stone-shake, .stone-shake-ba::before, .stone-shake-ba::after {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

.shake, .shake-ba::before, .shake-ba::after {
  animation-name: anim_s;
  transform: rotate(30deg);
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes anim_s {
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(30deg);
  }
}
.stone-shake2, .stone-shake2-ba::before, .stone-shake2::after {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

.shake2 {
  animation-name: anim_h;
  transform: rotate(20deg);
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
}

@keyframes anim_h {
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(30deg);
  }
}
.stone-shake3, .stone-shake3-ba::after {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 5s;
}

.shake3, .stone-shake3-ba::after {
  animation-name: anim_sc;
  transform: rotate(20deg);
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes anim_sc {
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(30deg);
  }
}
.stone-rolling, .stone-rolling-ba::before, .stone-rolling-ba::after {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 6s;
}

.rolling, .rolling-ba::before, .rolling-ba::after {
  animation-name: anim_r;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-direction: normal;
}

@keyframes anim_r {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* =============================================
 マージン
============================================= */
.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.pc-only {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}

.sp-only {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp-only {
    display: block;
  }
}/*# sourceMappingURL=style.css.map */