@charset "utf-8";

/* element
--------------------------*/
html {
  font-size: 10px;
}

body {
  font-family: "Noto Serif", "Noto Serif JP", sans-serif;
  font-feature-settings: "palt";
  color: #ffffff;
}

body::before {
  content: "";
  position: fixed;
  background: url("../images/background_pc.svg") no-repeat center center / cover;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

main {
  overflow: hidden;
}

img {
  width: 100%;
  display: block;
}

a {
  display: block;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  body::before {
    background: url("../images/background_sp.svg") no-repeat center center / cover;

  }
}

/* common selector
--------------------------*/
.title-lg {
  font-size: clamp(52px, 33.293px + 2.433vw, 80px);
  font-weight: 700;
  letter-spacing: 0.125em;
}

.title-md {
  font-size: clamp(36px, 17.293px + 2.433vw, 64px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.1em;
}

.title-sm {
  font-size: clamp(34px, 19.301px + 1.911vw, 56px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.title-xs {
  font-size: clamp(18px, 8.646px + 1.216vw, 32px);
  font-weight: 300;
  display: block;
  line-height: 2;
  letter-spacing: 0.15em;
}

.text-xl {
  font-size: clamp(30px, 17.974px + 1.564vw, 48px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.text-lg {
  font-size: clamp(24px, 13.310px + 1.39vw, 40px);
  font-weight: 300;
  display: block;
  letter-spacing: 0.05em;
}

.text-md {
  font-size: clamp(18px, 8.646px + 1.216vw, 32px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
}

.text-sm {
  font-size: clamp(14px, 7.319px + 0.869vw, 24px);
  line-height: 2;
  letter-spacing: 0.075em;
}

.text-xs {
  font-size: clamp(12px, 7.991px + 0.521vw, 18px);
  display: block;
  line-height: 2;
  letter-spacing: 0.05em;
}

.color-text {
  color: #B29E6A;
}

.color-bg {
  background-color: #B29E6A;
}

.color-border {
  border: solid clamp(3px, 1.664px + 0.174vw, 5px) #B29E6A;
}

.cta-border {
  border: solid clamp(1.5px, 0.498px + 0.13vw, 3px) #B29E6A;
}

.primary-bg90 {
  background-color: #1D1D1DE6;
}

.primary-bg80 {
  background-color: #1D1D1DCC;
}

.secondary-bg80 {
  background-color: #181817CC;
}

.receive {
  position: relative;
}

.overlay {
  position: absolute;
}

.reverse {
  transform: rotate(180deg);
}

.cta-button {
  height: clamp(60px, 43.297px + 2.172vw, 85px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-button:after {
  content: "";
  width: clamp(7.5px, 2.489px + 0.652vw, 15px);
  height: clamp(20px, 13.319px + 0.869vw, 30px);
  position: absolute;
  background: url(../images/triangle.svg) no-repeat center center / cover;
  right: 7.5%;
  top: calc(50% - clamp(10px, 6.659px + 0.434vw, 15px));
}

.cta-button:hover {
  color: #B29E6A;
  background-color: #ffffff33;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.cta-button:hover::after {
  background: url(../images/triangle_color.svg) no-repeat center center / cover;
}

.card-group {
  max-width: 1300px;
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 5%;
}

.card-group .card {
  width: 35%;
  z-index: 1;
}

.card-group .card img {
  margin-bottom: 10%;
}

.card-group .card .text-xl {
  font-weight: 400;
  margin-bottom: 7.5%;
}

.card-group .card .cta-button {
  width: 80%;
  margin: auto;
}

.card-group .image-chara {
  width: clamp(400px, 116.051px + 36.924vw, 825px);
  bottom: -10%;
  opacity: 70%;
  z-index: -1;
}

.card-group .card.first .image-chara {
  right: 60%;
}

.card-group .card.second .image-chara {
  left: 60%;
}

.card-group .image-circle {
  width: 50%;
  bottom: 22.5%;
}

.card-group .card.first .image-circle {
  left: -30%;
}

.card-group .card.second .image-circle {
  right: -30%;
}

.not-block-pc {
  display: none;
}

.not-generate-pc {
  display: contents;
}

@media screen and (max-width: 768px) {
  .title-lg {
    font-size: clamp(27px, 1.237px + 6.87vw, 54px);
    letter-spacing: 0.075em;
  }

  .title-md {
    font-size: clamp(24px, 1.099px + 6.107vw, 48px);
    letter-spacing: 0.075em;
  }

  .title-sm {
    font-size: clamp(20px, 0.916px + 5.089vw, 40px);
    letter-spacing: 0.075em;
  }

  .title-xs {
    font-size: clamp(12px, 0.550px + 3.053vw, 24px);
    letter-spacing: 0.075em;
  }

  .text-xl {
    font-size: clamp(18px, 0.824px + 4.58vw, 36px);
    letter-spacing: 0.075em;
  }

  .text-lg {
    font-size: clamp(16px, 0.733px + 4.071vw, 32px);
    letter-spacing: 0.05em;
  }

  .text-md {
    font-size: clamp(15px, 0.687px + 3.817vw, 30px);
    letter-spacing: 0.05em;
  }

  .text-sm {
    font-size: clamp(12px, 0.550px + 3.053vw, 24px);
    letter-spacing: 0.075em;
  }

  .text-xs {
    font-size: clamp(10px, 2.366px + 2.036vw, 18px);
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  .color-border {
    border: solid clamp(3px, 1.092px + 0.509vw, 5px) #B29E6A;
  }

  .cta-border {
    border: solid clamp(1.5px, 0.069px + 0.382vw, 3px) #B29E6A;
  }

  .cta-button {
    height: clamp(42.5px, 6.718px + 9.542vw, 80px);
  }

  .cta-button:after {
    width: clamp(6.5px, 0.775px + 1.527vw, 12.5px);
    height: clamp(12.5px, 0.573px + 3.181vw, 25px);
    top: calc(50% - clamp(6.5px, 0.775px + 1.527vw, 12.5px));
  }

  .card-group {
    max-width: 1300px;
    width: 54.5%;
    margin: auto;
    flex-direction: column;
    gap: clamp(70px, 3.206px + 17.812vw, 140px)
  }

  .card-group .card {
    width: 100%;
  }

  .card-group .card .cta-button {
    width: 90%;
  }

  .card-group .image-chara {
    width: clamp(280px, 12.824px + 71.247vw, 560px);
    bottom: -5%;
  }

  .card-group .card.first .image-chara {
    right: 50%;
  }

  .card-group .card.second .image-chara {
    left: 50%;
  }

  .card-group .image-circle {
    width: 55%;
    bottom: 22.5%;
  }

  .card-group .card.first .image-circle {
    left: initial;
    right: -32.5%;
  }

  .card-group .card.second .image-circle {
    right: initial;
    left: -32.5%;
  }

  .not-block-pc {
    display: block;
  }

  .not-generate-pc {
    display: block;
  }
}

/* mainvisual
--------------------------*/
#main-visual {
  height: clamp(400px, 32.537px + 47.785vw, 950px);
  padding: 5% 0 2.5%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#main-visual h1 {
  width: clamp(350px, 169.609px + 23.458vw, 620px);
  margin: 0 auto;
  visibility: hidden;
}

#main-visual h1 .image-logo {
  width: 85%;
  margin: 0% auto 5%;
}

#main-visual .image-hero {
  width: 57.85%;
  top: 0%;
  z-index: -1;
  visibility: hidden;
}

#main-visual .image-hero.left {
  left: -22.5%;
}

#main-visual .image-hero.right {
  right: -22.5%;
}

@media screen and (max-width: 768px) {
  #main-visual {
    height: calc(clamp(667px, 326.351px + 90.84vw, 1024px) - 7.5vh);
    padding: 10vh 0 0;
    align-items: flex-start;
  }

  #main-visual h1 {
    width: clamp(267.5px, 45.649px + 59.16vw, 500px);
  }

  #main-visual h1 .image-logo {
    width: 56.5%;
  }

  #main-visual .image-hero {
    width: clamp(365px, 64.427px + 80.153vw, 680px);
    top: initial;
    bottom: -10vh;
  }

  #main-visual .image-hero.left {
    left: -45%;
  }

  #main-visual .image-hero.right {
    right: -45%;
  }
}

/* overview
--------------------------*/
#overview .inner {
  text-align: center;
}

#overview .video {
  height: clamp(435px, 191.138px + 31.712vw, 800px);
  margin: clamp(80px, 53.275px + 3.475vw, 120px) 0 17.5%;
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%;
}

#overview .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

@media screen and (max-width: 768px) {
  #overview .video {
    height: clamp(215px, 5.076px + 55.98vw, 435px);
    margin: clamp(37.5px, 1.718px + 9.542vw, 75px) 0 clamp(87.5px, 4.008px + 22.265vw, 175px);

  }
}

/* detail
--------------------------*/
#detail {
  margin: clamp(100px, 59.913px + 5.213vw, 160px) 0;
}

#detail .title-md {
  width: fit-content;
  margin: 0 auto 2.5%;
  text-align: center;
}

#detail .title-md .image-deco {
  width: clamp(120px, 66.551px + 6.95vw, 200px);
  z-index: -1;
}

#detail .title-md .image-deco.left {
  top: -20px;
  left: -80px;
}

#detail .title-md .image-deco.right {
  bottom: -10px;
  right: -80px;
}

#detail .part-area {
  margin-bottom: clamp(85px, 48.254px + 4.778vw, 140px);
}

#detail .container {
  max-width: 1300px;
  width: 90%;
  margin: auto;
}

#detail .inner {
  padding: 0 5%;
}

/* part-area first */
#detail .part-area.first .container {
  padding: 7.5% 7.5% 2.5%;
}

#detail .part-area.first .text-sm {
  width: 63.5%;
  padding: clamp(20px, 9.978px + 1.303vw, 35px);
  margin-bottom: 3.5%;
}

#detail .part-area.first .image-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#detail .part-area.first .image-group .left {
  width: 62.5%;
}

#detail .part-area.first .image-group .right {
  width: 32.5%;
  margin-top: -47.5%;
}

/* part-area second */
#detail .part-area.second .container {
  padding: 0 7.5% 7.5%;
}

#detail .part-area.second .container .overlay {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: -10px;
  left: 0;
}

#detail .part-area.second .container .overlay .left,
#detail .part-area.second .container .overlay .right {
  width: clamp(320px, 176.355px + 18.679vw, 535px);
}

#detail .part-area.second .block-group.top {
  margin-top: clamp(280px, 146.377px + 17.376vw, 480px);
  margin-bottom: 8.5%;
}

#detail .part-area.second .block-group.top .text-sm {
  width: 47.5%;
  padding: clamp(20px, 9.978px + 1.303vw, 35px);
  margin-bottom: 5%;
}

#detail .part-area.second .block-group.top .image-group {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#detail .part-area.second .block-group.top .image-group .left {
  width: 47.5%;
}

#detail .part-area.second .block-group.top .image-group .right {
  width: 47.5%;
  margin-top: -21.25%;
}

#detail .part-area.second .block-group.bottom {
  margin-bottom: 5%;
}

#detail .part-area.second .block-group.bottom .image-group {
  display: flex;
  gap: 5%
}

#detail .part-area.second .block-group.bottom .text-md {
  text-align: center;
  margin-top: 2.5%;
}

/* part-area third */
#detail .part-area.third .image-group {
  max-width: 1075px;
  margin: 0 auto 3.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#detail .part-area.third .image-group .left {
  width: 48.5%;
}

#detail .part-area.third .image-group .right {
  width: 48.5%;
}

#detail .part-area.third .text-xl {
  text-align: center;
}

/* part-area forth */
#detail .part-area.forth .container {
  padding: 7.5%;
}

#detail .part-area.forth .block-group.top {
  margin-bottom: 7.5%;
}

#detail .part-area.forth .block-group.top .image-group {
  margin-bottom: 2.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#detail .part-area.forth .block-group.top .image-group .left,
#detail .part-area.forth .block-group.top .image-group .right {
  width: 48.5%;
}

#detail .part-area.forth .block-group.block-group.top .text-md {
  text-align: center;
}

#detail .part-area.forth .block-group.block-group.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#detail .part-area.forth .block-group.bottom .left,
#detail .part-area.forth .block-group.bottom .right {
  width: 48.5%;
}

#detail .part-area.forth .block-group.bottom .right {
  padding: clamp(20px, 9.978px + 1.303vw, 35px);
}

#detail .part-area.forth .block-group.bottom .right img {
  width: 50%;
  margin: auto;
  filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.729));
}

#detail .part-area.forth .block-group.bottom .right .text-sm {
  text-align: center;
}

/* part-area fifth */
#detail .part-area.fifth .inner img {
  max-width: 1075px;
  margin: 0 auto 3.5%;
}

#detail .part-area.fifth .text-xl {
  text-align: center;
}

@media screen and (max-width: 768px) {
  #detail {
    margin: clamp(62.5px, 2.863px + 15.903vw, 125px) 0;
  }

  #detail .title-md {
    margin: 0 auto 3.5%;
  }

  #detail .title-md .image-deco {
    width: clamp(85px, 3.893px + 21.628vw, 170px);
  }

  #detail .title-md .image-deco.left {
    top: -19.5px;
    left: -15%;
  }

  #detail .title-md .image-deco.right {
    bottom: -6.5px;
    right: -15%;
  }

  #detail .part-area {
    margin-bottom: clamp(65px, 2.977px + 16.539vw, 130px);
  }

  #detail .container {
    width: 90%;
  }

  #detail .inner {
    padding: initial;
  }

  /* part-area first */
  #detail .part-area.first .container {
    padding: 7.5% 5% 10%;
  }

  #detail .part-area.first .text-sm {
    width: 100%;
    padding: clamp(17.5px, 0.802px + 4.453vw, 35px);
    margin-bottom: 3.5%;
  }

  #detail .part-area.first .image-group .left {
    width: 60%;
  }

  #detail .part-area.first .image-group .right {
    width: 35%;
    margin-top: 0;
    margin-bottom: -27.5%;
  }

  /* part-area second */
  #detail .part-area.second .container {
    padding: 0 5% 7.5%;
  }

  #detail .part-area.second .container .overlay .left,
  #detail .part-area.second .container .overlay .right {
    width: clamp(153.75px, 7.042px + 39.122vw, 307.5px);
  }

  #detail .part-area.second .block-group.top {
    margin-top: clamp(140px, 6.412px + 35.623vw, 280px);
    margin-bottom: 10%;
  }

  #detail .part-area.second .block-group.top .text-sm {
    width: 100%;
    padding: clamp(17.5px, 0.802px + 4.453vw, 35px);
    margin-bottom: 5%;
  }

  #detail .part-area.second .block-group.top .image-group .left {
    width: 47.5%;
  }

  #detail .part-area.second .block-group.top .image-group .right {
    width: 47.5%;
    margin-top: 0%;
  }

  #detail .part-area.second .block-group.bottom {
    margin-bottom: 10%;
  }

  #detail .part-area.second .block-group.bottom .image-group {
    display: flex;
    gap: 5%
  }

  #detail .part-area.second .block-group.bottom .image-group .left,
  #detail .part-area.second .block-group.bottom .image-group .right {
    width: 47.5%;
  }

  #detail .part-area.second .block-group.bottom .image-group .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #detail .part-area.second .block-group.bottom .text-md {
    text-align: center;
    margin-top: 2.5%;
  }

  /* part-area third */
  #detail .part-area.third .image-group {
    padding: 0 7.5%;
  }

  #detail .part-area.third .text-xl .text-xs {
    margin-top: 0.5%;
  }

  /* part-area forth */
  #detail .part-area.forth .container {
    padding: 5%;
  }

  #detail .part-area.forth .block-group.top {
    margin-bottom: 10%;
  }

  #detail .part-area.forth .block-group.top .image-group .left,
  #detail .part-area.forth .block-group.top .image-group .right {
    width: 47.5%;
  }

  #detail .part-area.forth .block-group.top .text-md {
    line-height: 1.5;
  }

  #detail .part-area.forth .block-group.bottom .left,
  #detail .part-area.forth .block-group.bottom .right {
    width: 47.5%;
  }

  #detail .part-area.forth .block-group.bottom .left {
    width: 47.5%;
  }

  #detail .part-area.forth .block-group.bottom .right {
    width: 50%;
  }

  #detail .part-area.forth .block-group.bottom .right {
    padding: 3.5% 0;
  }

  #detail .part-area.forth .block-group.bottom .right img {
    width: 40%;
    filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.729));
  }

  #detail .part-area.forth .block-group.bottom .right .text-sm {
    font-size: clamp(10px, 0.458px + 2.545vw, 20px);
    line-height: 1.5;
  }

  /* part-area fifth */
  #detail .part-area.fifth .inner img {
    padding: 0 7.5%;
    margin: 0 auto 5%;
  }
}

/* reference
--------------------------*/
#reference {
  padding: clamp(135px, 78.210px + 7.385vw, 220px) 0;
  background: url("../images/background_jpattern_pc.svg") no-repeat center center / cover;
  z-index: -1;
}

#reference .inner {
  max-width: 1075px;
  padding: 0 2.5%;
  margin: 0 auto 10%;
}

#reference .title-lg {
  width: clamp(160px, 93.189px + 8.688vw, 260px);
  margin-bottom: 7.5%;
}

#reference .block-group.first {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

#reference .block-group.first .text-md {
  width: 62.5%;
  padding: clamp(20px, 9.978px + 1.303vw, 35px);
}

#reference .block-group.second .card {
  width: 32.5%;
  margin-bottom: 5%;
}

#reference .block-group.second .card .text-lg {
  margin-top: 5%;
  text-align: center;
}

#reference .block-group .image-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#reference .block-group .image-group .first,
#reference .block-group .image-group .second {
  width: 47.5%;
}

@media screen and (max-width: 768px) {
  #reference {
    padding: clamp(50px, 2.290px + 12.723vw, 100px) 0;
    background: url("../images/background_jpattern_sp.svg") no-repeat center center / cover;
  }

  #reference .inner {
    padding: 0 5%;
    margin: 0 auto 15%;
  }

  #reference .title-lg {
    width: clamp(87.5px, 4.008px + 22.265vw, 175px);
  }

  #reference .block-group.first .text-md {
    font-size: clamp(12px, 0.550px + 3.053vw, 24px);
    letter-spacing: 0.075em;
    width: 100%;
    padding: clamp(17.5px, 0.802px + 4.453vw, 35px);
    margin-bottom: 7.5%;
  }

  #reference .block-group.second {
    display: flex;
    justify-content: space-between;
  }

  #reference .block-group.second .card {
    width: 45%;
    margin-bottom: 2.5%;
  }

  #reference .block-group.second .image-group {
    width: 50%;
    flex-direction: column;
    justify-content: flex-start;
  }

  #reference .block-group .image-group .first,
  #reference .block-group .image-group .second {
    width: 100%;
  }

  #reference .block-group .image-group .first {
    margin-bottom: 7%;
  }
}

/* shoplist
--------------------------*/
#shoplist {
  margin: clamp(125px, 41.486px + 10.86vw, 250px) 0 clamp(100px, 56.573px + 5.647vw, 165px);
  text-align: center;
}

#shoplist .title-lg {
  margin-bottom: 6.5%;
}

#shoplist .container {
  padding: 8.5% 0 5%;
}

#shoplist .container .cta-button {
  min-width: 530px;
  width: 30%;
  margin: 0 auto 3.5%;
}

#shoplist .container ul li {
  padding: 1.5% 0;
  border-bottom: 0.5PX solid #BFBFBF;
}

@media screen and (max-width: 768px) {
  #shoplist {
    margin: clamp(82.5px, 3.779px + 20.992vw, 165px) 0 clamp(50px, 2.290px + 12.723vw, 100px);
  }

  #shoplist .title-lg {
    margin-bottom: 8.5%;
  }

  #shoplist .container {
    padding: 12.5% 0 10%;
  }

  #shoplist .container .cta-button {
    min-width: initial;
    width: 75%;
    margin: 0 auto 7.5%;
  }

  #shoplist .container .cta-button:after {
    right: 3.5%;
  }

  #shoplist .container ul li {
    padding: 2.5% 0;
  }
}

/* footer
--------------------------*/
footer {
  padding: 0 1.5% 1%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
}

footer .text-xs {
  padding-bottom: 0.5%;
  letter-spacing: 0em;
}

footer .text-xs span {
  margin-left: -0.5%;
  margin-right: -0.5%;
}

footer img {
  width: clamp(60px, 36.616px + 3.041vw, 95px);
  filter: drop-shadow(0px 0px 1.5px rgba(255, 255, 255, 0.729));
}

@media screen and (max-width: 768px) {

  footer {
    padding: 0 0 2.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  footer .text-xs {
    padding-bottom: 1%;
    order: 2;
  }

  footer img {
    width: 20%;
    filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.729));
    order: 1;
  }
}