@charset "UTF-8";
/* CSS Document */
/* 基本設定-------------------------------------------*/
a {
  text-decoration: none;
  transition: all 0.3s;
  color: #7A4EA0;
  outline: none;
  position: relative;
  display: inline-block;
}

a img,
a svg {
  text-decoration: none;
  transition: all 0.3s;
  color: #7A4EA0;
  outline: none;
}

div {
  outline: none;
  word-break: break-word;
}

img {
  max-width: 100%;
  height: auto;
  outline: none;
}

img:not(.allow-right-click) {
  /* SPの長押し禁止 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
}

svg {
  backface-visibility: hidden;
  transform: translateZ(0);
}

div,
li,
header,
footer,
dt,
dd,
section {
  box-sizing: border-box;
}

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

.pc-view {
  display: none !important;
}

.sp-view {
  display: block !important;
}

@media screen and (min-width: 769px) {
  .pc-view {
    display: block !important;
  }
  .sp-view {
    display: none !important;
  }
}
/*-- Base --*/
html {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: -webkit-fill-available;
}

body {
  color: #7A4EA0;
  background: #fff;
  line-height: 1.7;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 14px;
  width: 100%;
  word-wrap: break-word;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  min-height: -webkit-fill-available;
}

@media screen and (min-width: 769px) {
  body {
    font-size: 16px;
  }
  a[href*="tel:"] {
    text-decoration: none;
  }
}
/*-- HTML5 elements --*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
  display: block;
  margin: 0;
  padding: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*/ /*/
height: auto;
overflow: hidden;
/**/
}

strong {
  font-weight: bold;
}

section,
article {
  position: relative;
}

.nolink {
  pointer-events: none;
}
.nolink:hover {
  opacity: 1;
}

.svg-box {
  width: 0;
  height: 0;
}

/* 細かいパーツ-------------------------------------------*/
#page {
  position: relative;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  background: url(../img/common/pc_bg.webp) no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.flex-wrapper {
  display: flex;
}

.box-inner {
  padding: 0 15px;
  position: relative;
}

@media screen and (min-width: 769px) {
  .box-inner {
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1020px;
  }
  .pc-flex {
    display: flex;
  }
}
.font-en {
  font-family: "Quicksand", sans-serif;
}

.icon-svg {
  position: absolute;
  width: 0;
  height: 0;
}

.font-s {
  font-size: 10px;
}

@media screen and (min-width: 769px) {
  .font-s {
    font-size: 12px;
  }
}
/* PC用背景 */
.pc-side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
@media (max-width: 768px) {
  .pc-side {
    display: none !important;
  }
}
.pc-side.side-l {
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.pc-side.side-l .title-logo {
  max-width: 501px;
  margin-bottom: 80px;
}
.pc-side.side-l .mainttl-letters {
  width: 375px;
  height: 252px;
  margin-bottom: 80px;
  position: relative;
  opacity: 0;
  transition: 0.3s;
  z-index: 1;
}
.pc-side.side-l .mainttl-letters.loaded {
  opacity: 1;
}
@media (max-width: 768px) {
  .pc-side.side-l .deco-img {
    display: none !important;
  }
}
.pc-side.side-l .deco-img [class^=deco] {
  animation: floating-y 2s ease-in-out infinite alternate-reverse;
  animation-delay: var(--delay);
}
.pc-side.side-l .deco-img .deco01 {
  --delay: 0s;
  animation-duration: 1.8s;
}
.pc-side.side-l .deco-img .deco02 {
  --delay: -0.3s;
  animation-duration: 2s;
}
.pc-side.side-l .deco-img .deco03 {
  --delay: -0.6s;
  animation-duration: 1.6s;
}
.pc-side.side-l .deco-img .deco04 {
  --delay: -0.9s;
  animation-duration: 2.2s;
}
.pc-side.side-l .deco-img .deco05 {
  --delay: -1.2s;
  animation-duration: 1.3s;
}
.pc-side.side-l .deco-img .deco06 {
  --delay: -1.5s;
  animation-duration: 2.7s;
}
.pc-side.side-l .deco-img .deco07 {
  --delay: 0s;
  animation-duration: 1.8s;
}
.pc-side.side-l .deco-img .deco08 {
  --delay: -0.3s;
  animation-duration: 2s;
}
.pc-side.side-l .deco-img .deco09 {
  --delay: -0.6s;
  animation-duration: 1.6s;
}
.pc-side.side-l .deco-img img {
  position: absolute;
}
.pc-side.side-l .deco-img .deco01 {
  width: 141px;
  top: 5.8565153734vw;
  left: 2.8550512445vw;
}
.pc-side.side-l .deco-img .deco02 {
  width: 101px;
  top: 1.756954612vw;
  left: 20.0585651537vw;
}
.pc-side.side-l .deco-img .deco03 {
  width: 130px;
  top: 1.756954612vw;
  left: 43.1918008785vw;
}
.pc-side.side-l .deco-img .deco04 {
  width: 127px;
  top: 15.8125915081vw;
  left: 52.5622254758vw;
}
.pc-side.side-l .deco-img .deco05 {
  width: 101px;
  top: 28.7701317716vw;
  left: 46.9985358712vw;
}
.pc-side.side-l .deco-img .deco06 {
  width: 130px;
  bottom: -2.4890190337vw;
  left: 38.8726207906vw;
}
.pc-side.side-l .deco-img .deco07 {
  width: 101px;
  bottom: 1.6837481698vw;
  left: 17.6427525622vw;
}
.pc-side.side-l .deco-img .deco08 {
  width: 127px;
  bottom: 6.3689604685vw;
  left: -0.8052708638vw;
}
.pc-side.side-l .deco-img .deco09 {
  width: 112px;
  top: 23.8653001464vw;
  left: -0.8052708638vw;
}
.pc-side.side-l .info-sp {
  max-width: 500px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  padding: 20px 30px;
  display: flex;
  gap: 15px;
  align-items: center;
  z-index: 1;
}
.pc-side.side-l .info-sp .info-txt {
  color: #7A4EA0;
  font-weight: bold;
  font-size: 16px;
  flex: 1;
}
.pc-side.side-l .info-sp .info-qr {
  width: 70px;
}
.pc-side.side-r {
  right: 0;
  display: flex;
  flex-direction: column;
  width: 15vw;
}
.pc-side.side-r .deco-img [class^=deco] {
  animation: floating-y 2s ease-in-out infinite alternate-reverse;
  animation-delay: var(--delay);
}
.pc-side.side-r .deco-img .deco01 {
  --delay: -0.6s;
  animation-duration: 1.6s;
}
.pc-side.side-r .deco-img .deco02 {
  --delay: -0.9s;
  animation-duration: 2.2s;
}
.pc-side.side-r .deco-img .deco03 {
  --delay: -1.2s;
  animation-duration: 1.3s;
}
.pc-side.side-r .deco-img img {
  position: absolute;
}
.pc-side.side-r .deco-img .deco01 {
  width: 101px;
  top: 5.9297218155vw;
  right: -1.6105417277vw;
}
.pc-side.side-r .deco-img .deco02 {
  width: 134px;
  top: 24.8901903367vw;
  right: 5.1244509517vw;
}
.pc-side.side-r .deco-img .deco03 {
  width: 141px;
  bottom: 4.39238653vw;
  right: -3.7335285505vw;
}

.main-wrapper {
  width: 375px;
  /* IE, Edge 対応 */
  -ms-overflow-style: none;
  /* Firefox 対応 */
  scrollbar-width: none;
  background: #ffebea url(../img/common/hd_bg.png) no-repeat;
  background-size: cover;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 768px) {
  .main-wrapper {
    max-width: initial;
    width: 100%;
  }
}
.main-wrapper #title {
  padding-top: 28px;
  padding-bottom: 18px;
  text-align: center;
}
.main-wrapper #title .mainttl img {
  width: 73.3333333333vw;
}
@media (min-width: 769px) {
  .main-wrapper #title .mainttl img {
    width: 275px;
  }
}

@keyframes float-move {
  from {
    transform: translate(calc(var(--fx) * -1), calc(var(--fy) * -1)) rotate(var(--rot));
  }
  to {
    transform: translate(var(--fx), var(--fy)) rotate(var(--rot));
  }
}
.mainttl-letters {
  width: 100vw;
  height: 67.2vw;
  position: relative;
}
@media (min-width: 769px) {
  .mainttl-letters {
    width: 375px;
    height: 252px;
  }
}
.mainttl-letters [class^=letter] {
  --fx: 6px;
  --fy: 8px;
  --rot: 0deg;
  animation: float-move var(--dur, 4s) ease-in-out infinite alternate;
  animation-delay: var(--delay, -1s);
  will-change: transform;
}
.mainttl-letters .letter01 {
  --fx: 2px;
  --fy: 3px;
  --dur: 5s;
  --delay: -2s;
}
.mainttl-letters .letter02 {
  --fx: 3px;
  --fy: 3px;
  --dur: 5s;
  --delay: -5s;
}
.mainttl-letters .letter03 {
  --fx: 2px;
  --fy: 3px;
  --dur: 7s;
  --delay: -4s;
}
.mainttl-letters .letter04 {
  --fx: 3px;
  --fy: 3px;
  --dur: 5s;
  --delay: -2s;
}
.mainttl-letters .letter05 {
  --fx: 2px;
  --fy: 2px;
  --dur: 7s;
  --delay: -2s;
}
.mainttl-letters .letter06 {
  --fx: 3px;
  --fy: 3px;
  --dur: 6s;
  --delay: -2s;
}
.mainttl-letters .letter07 {
  --fx: 2px;
  --fy: 3px;
  --dur: 5s;
  --delay: -2s;
}
.mainttl-letters .letter08 {
  --fx: 2px;
  --fy: 2px;
  --dur: 7s;
  --delay: -6s;
}
.mainttl-letters .letter09 {
  --fx: 2px;
  --fy: 2px;
  --dur: 7s;
  --delay: -2s;
}
.mainttl-letters .letter10 {
  --fx: 3px;
  --fy: 2px;
  --dur: 5s;
  --delay: -1s;
}
.mainttl-letters .letter11 {
  --fx: 3px;
  --fy: 2px;
  --dur: 5s;
  --delay: -2s;
}
.mainttl-letters .letter12 {
  --fx: 2px;
  --fy: 2px;
  --dur: 5s;
  --delay: -4s;
}
.mainttl-letters .letter13 {
  --fx: 3px;
  --fy: 3px;
  --dur: 6s;
  --delay: -4s;
}
.mainttl-letters .letter14 {
  --fx: 3px;
  --fy: 3px;
  --dur: 7s;
  --delay: -5s;
}
.mainttl-letters .letter15 {
  --fx: 2px;
  --fy: 3px;
  --dur: 7s;
  --delay: -4s;
}
.mainttl-letters .letter16 {
  --fx: 3px;
  --fy: 2px;
  --dur: 6s;
  --delay: -2s;
}
.mainttl-letters .letter17 {
  --fx: 2px;
  --fy: 2px;
  --dur: 6s;
  --delay: -3s;
}
.mainttl-letters .letter18 {
  --fx: 2px;
  --fy: 2px;
  --dur: 7s;
  --delay: -6s;
}
.mainttl-letters img {
  position: absolute;
}
.mainttl-letters .letter01 {
  width: 10.1333333333vw;
  top: 0.8vw;
  left: 5.3333333333vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter01 {
    width: 38px;
    top: 3px;
    left: 20px;
  }
}
.mainttl-letters .letter02 {
  width: 10.6666666667vw;
  top: 3.4666666667vw;
  left: 15.7333333333vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter02 {
    width: 40px;
    top: 13px;
    left: 59px;
  }
}
.mainttl-letters .letter03 {
  width: 11.7333333333vw;
  top: 0vw;
  left: 26.9333333333vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter03 {
    width: 44px;
    top: 0;
    left: 101px;
  }
}
.mainttl-letters .letter04 {
  width: 10.6666666667vw;
  top: 5.0666666667vw;
  left: 39.2vw;
  --rot: -18deg;
}
@media (min-width: 769px) {
  .mainttl-letters .letter04 {
    width: 40px;
    top: 19px;
    left: 147px;
  }
}
.mainttl-letters .letter05 {
  width: 10.1333333333vw;
  top: 0.8vw;
  left: 49.6vw;
  --rot: 25deg;
}
@media (min-width: 769px) {
  .mainttl-letters .letter05 {
    width: 38px;
    top: 3px;
    left: 186px;
  }
}
.mainttl-letters .letter06 {
  width: 10.6666666667vw;
  top: 4.8vw;
  left: 60.8vw;
  --rot: 9deg;
}
@media (min-width: 769px) {
  .mainttl-letters .letter06 {
    width: 40px;
    top: 18px;
    left: 228px;
  }
}
.mainttl-letters .letter07 {
  width: 11.7333333333vw;
  top: 0vw;
  left: 71.2vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter07 {
    width: 44px;
    top: 0px;
    left: 267px;
  }
}
.mainttl-letters .letter08 {
  width: 10.6666666667vw;
  top: 3.4666666667vw;
  left: 83.4666666667vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter08 {
    width: 40px;
    top: 13px;
    left: 313px;
  }
}
.mainttl-letters .letter09 {
  width: 18.1333333333vw;
  top: 19.2vw;
  left: 6.1333333333vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter09 {
    width: 68px;
    top: 72px;
    left: 23px;
  }
}
.mainttl-letters .letter10 {
  width: 16.2666666667vw;
  top: 20.8vw;
  left: 24.5333333333vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter10 {
    width: 61px;
    top: 78px;
    left: 92px;
  }
}
.mainttl-letters .letter11 {
  width: 20.2666666667vw;
  top: 18.4vw;
  left: 38.4vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter11 {
    width: 76px;
    top: 69px;
    left: 144px;
  }
}
.mainttl-letters .letter12 {
  width: 18.1333333333vw;
  top: 20vw;
  left: 58.1333333333vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter12 {
    width: 68px;
    top: 75px;
    left: 218px;
  }
}
.mainttl-letters .letter13 {
  width: 16.5333333333vw;
  top: 20.5333333333vw;
  left: 75.7333333333vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter13 {
    width: 62px;
    top: 77px;
    left: 284px;
  }
}
.mainttl-letters .letter14 {
  width: 13.3333333333vw;
  top: 48vw;
  left: 7.2vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter14 {
    width: 50px;
    top: 180px;
    left: 27px;
  }
}
.mainttl-letters .letter15 {
  width: 16.5333333333vw;
  top: 44.2666666667vw;
  left: 21.3333333333vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter15 {
    width: 62px;
    top: 166px;
    left: 80px;
  }
}
.mainttl-letters .letter16 {
  width: 20.2666666667vw;
  top: 46.4vw;
  left: 37.3333333333vw;
  --rot: 11deg;
}
@media (min-width: 769px) {
  .mainttl-letters .letter16 {
    width: 76px;
    top: 174px;
    left: 140px;
  }
}
.mainttl-letters .letter17 {
  width: 15.4666666667vw;
  top: 44.8vw;
  left: 55.7333333333vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter17 {
    width: 58px;
    top: 168px;
    left: 209px;
  }
}
.mainttl-letters .letter18 {
  width: 13.3333333333vw;
  top: 48.8vw;
  left: 74.1333333333vw;
}
@media (min-width: 769px) {
  .mainttl-letters .letter18 {
    width: 50px;
    top: 183px;
    left: 278px;
  }
}

@keyframes floating-y {
  0% {
    transform: translateY(-7%);
  }
  100% {
    transform: translateY(7%);
  }
}
.page-ft {
  text-align: center;
  z-index: 2;
  position: relative;
  background: url(../img/common/ft_bg.webp) no-repeat;
  background-size: cover;
}
.page-ft .ft-inner {
  padding: 40px 10px 20px;
}
.page-ft .copyright {
  font-size: 10px;
  font-weight: bold;
  font-family: "Quicksand", sans-serif;
}

.fixbtn {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 162px;
  z-index: 1;
}
@media (min-width: 769px) {
  .fixbtn {
    right: 15vw;
  }
}

/*============================
#howto
============================*/
.modal-box {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 10;
  backdrop-filter: blur(20px);
  --webkit-backdrop-filter: blur(20px);
  padding: 37px 20px 50px;
  overflow: auto;
}
.modal-box.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
}
.modal-box .modal-inner {
  isolation: isolate;
  border-radius: 20px;
  background: #fff;
  padding: 50px 20px 40px;
}
@media (min-width: 769px) {
  .modal-box .modal-inner {
    max-width: 345px;
    margin: 0 auto;
  }
}
.modal-box .modal-inner .contents-ttl {
  text-align: center;
  margin-bottom: 12px;
}
.modal-box .modal-inner .contents-ttl img {
  width: 67.4666666667vw;
}
@media (min-width: 769px) {
  .modal-box .modal-inner .contents-ttl img {
    width: 253px;
  }
}
.modal-box .modal-inner .contents-sttl {
  border-radius: 16px;
  border: 1px solid #7a4ea0;
  padding: 3px 16px;
  width: fit-content;
  margin: 0 auto 16px;
  font-size: 14px;
  font-weight: bold;
}
.modal-box .modal-inner .howto-mds {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 4px dotted #7a4ea0;
}
.modal-box .modal-inner .flow-box li {
  margin-bottom: 24px;
  padding-bottom: 40px;
  border-bottom: 4px dotted #7a4ea0;
}
.modal-box .modal-inner .flow-box li .txt-box {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.modal-box .modal-inner .flow-box li .txt-box .num {
  font-size: 32px;
  font-weight: bold;
  font-family: "Quicksand", sans-serif;
  line-height: 1;
}
.modal-box .modal-inner .flow-box li .txt-box .detail {
  flex: 1;
  line-height: 1.375;
}
.modal-box .modal-inner .flow-box li .txt-box .detail .txt-l {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.modal-box .modal-inner .flow-box li .txt-box .detail .txt-s {
  font-size: 14px;
  font-weight: 500;
}
.modal-box .modal-inner .flow-box li .txt-box .detail .txt-s2 {
  font-size: 14px;
  border-left: 1px solid #7a4ea0;
  padding-left: 8px;
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 30px;
}
.modal-box .modal-inner .flow-box li .img-box {
  text-align: center;
}
.modal-box .modal-inner .flow-box li .img-box img {
  width: 56.8vw;
}
@media (min-width: 769px) {
  .modal-box .modal-inner .flow-box li .img-box img {
    width: 213px;
  }
}
.modal-box .modal-inner .btm-note {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}
.modal-box .btn-base {
  width: 215px;
  margin: 24px auto 0;
}
.modal-box .btn-base a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 13px 0;
  background: #fff;
  border: 2px solid #7A4EA0;
  border-radius: 2em;
  font-weight: bold;
}
.modal-box .btn-close {
  position: absolute;
  top: 14px;
  right: 4px;
  cursor: pointer;
}
@media (min-width: 769px) {
  .modal-box .btn-close {
    right: 50%;
    transform: translate(410%, 0);
  }
}
/*# sourceMappingURL=_map/common.css.map */