@charset "UTF-8";
/*
 * モバイルを基準にした追加スタイルです。
 * コンテンツ用のCSSはこのファイルへ追記してください。
 */
html {
  font-size: 1px;
}

a {
  color: #3B4D57;
  text-decoration: none;
}
a:hover {
  opacity: 0.5;
  transition: opacity 0.5s ease 0s;
}

figure,
ul, li, dl, dt, dd {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

html {
  font-size: 0.2544529262vw;
}

body {
  background-color: #f9e8c9;
  background-image: url("../img/bg_min.jpg");
  background-repeat: repeat;
  background-position: top left;
  background-size: 320px auto;
  color: #3B4D57;
  font-size: 16rem;
  background-attachment: fixed;
}
body.temp {
  background: #fff;
}

.gear-rail {
  top: 0;
  bottom: 0;
  width: 10vw;
  overflow: visible;
}

.gear-rail--left {
  right: auto;
  left: -5vw;
}

.gear-rail--right {
  right: -5vw;
  left: auto;
}

.gear {
  width: var(--gear-size-sp) !important;
  height: var(--gear-size-sp) !important;
  opacity: 0.96;
}

.gear--left {
  right: auto !important;
  left: calc(var(--gear-axis-sp) - var(--gear-half-sp)) !important;
}

.gear--right {
  right: calc(var(--gear-axis-sp) - var(--gear-half-sp)) !important;
  left: auto !important;
}

.progress-rail {
  right: 18px;
  bottom: 17px;
  left: 18px;
}

/* parts
----------------- */
.disable {
  opacity: 0.3;
  pointer-events: none;
}

.arrow {
  position: relative;
}
.arrow::after {
  position: absolute;
  content: "";
  display: block;
  width: 3vw;
  height: 3vw;
  border-right: 1px solid #3B4D57;
  border-top: 1px solid #3B4D57;
  rotate: 45deg;
  right: 5vw;
  top: 50%;
  transform: translate(0, -50%);
}

.box {
  position: relative;
  background-color: #fff;
  border-radius: 4.5vw;
  width: 80vw;
  left: 10vw;
  box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.02), 0px 0px 4px rgba(3, 7, 18, 0.03), 0px 1px 9px rgba(3, 7, 18, 0.05), 0px 2px 15px rgba(3, 7, 18, 0.06), 0px 3px 24px rgba(3, 7, 18, 0.08);
  padding: 5vw 7vw;
}

.table {
  border-top: 1px solid #eee;
  margin-bottom: 15vw;
}
.table dl {
  display: flex;
  align-items: center;
  font-size: 14rem;
  border-bottom: 1px solid #eee;
  padding: 3.5vw 0;
  line-height: 1.4;
}
.table dl dt {
  text-align: right;
  width: 27%;
}
.table dl dd {
  width: 73%;
  padding-left: 4vw;
}

.key {
  background: url(../img/key-sp.jpg) left top no-repeat;
  background-size: cover;
  position: relative;
  height: 200vw;
  width: 100vw;
}
.key .lead-pc {
  display: none;
}
.key .lead-sp {
  position: relative;
  z-index: 100;
  margin-top: 60vw;
  text-align: center;
}
.key .lead-sp img {
  width: 90vw;
}

.key h1, .temp-head h1 {
  position: relative;
  z-index: 100;
  text-align: center;
  margin: 0;
}
.key h1 img, .temp-head h1 img {
  width: 90vw;
  max-width: 600px;
}

.intro {
  position: relative;
  background: url(../img/bg_about.jpg) center no-repeat;
  background-size: cover;
  padding-top: 5vw;
  border-top: 10px solid #fff;
  border-bottom: 10px solid #fff;
}
.intro::before {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
}
.intro h2 {
  position: relative;
  text-align: center;
}
.intro h2 img {
  width: 80vw;
  max-width: 446px;
}
.intro p {
  position: relative;
  color: #fff;
  font-weight: bold;
  max-width: 600px;
  margin: 0 auto;
  padding: 5vw 17vw 15vw;
  font-size: 16rem;
  line-height: 1.8;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.about {
  position: relative;
  margin-bottom: 25vw;
}
.about .char {
  position: relative;
  width: 100%;
  margin-bottom: 15vw;
}
.about .char figure {
  position: relative;
}
.about .char figure img {
  vertical-align: bottom;
  position: relative;
}
.about .char figure._neosphre {
  border-top: 1.5vw solid #fff;
  border-bottom: 1.5vw solid #fff;
  margin-top: -5vw;
  z-index: 100;
}
.about .char figure._neosphre img {
  box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.02), 0px 0px 4px rgba(3, 7, 18, 0.03), 0px 1px 9px rgba(3, 7, 18, 0.05), 0px 2px 15px rgba(3, 7, 18, 0.06), 0px 3px 24px rgba(3, 7, 18, 0.08);
  width: 100vw;
  left: 0;
}
.about .char figure._nano img {
  width: 100vw;
  z-index: 101;
}
.about .char figure._eri img {
  width: 90vw;
  z-index: 101;
  left: 7vw;
}
.about .char .box {
  z-index: 100;
}
.about .char .box h3 {
  text-align: center;
  margin-bottom: 7vw;
}
.about .char .box p {
  line-height: 1.8;
}
.about .char .box._neosphre {
  margin-top: -15vw;
}
.about .char .box._nano {
  padding-top: 50vw;
  margin-top: -50vw;
}
.about .char .box._eri {
  padding-top: 50vw;
  margin-top: -50vw;
}

.screen {
  position: relative;
  overflow: hidden;
  padding-bottom: 24vw;
}
.screen h2 {
  text-align: center;
}
.screen h2 img {
  width: 70vw;
  max-width: 374px;
}
.screen .case-wrap {
  width: 100%;
  max-width: 1200rem;
  margin: 0 auto;
  padding-top: 20rem;
  padding-bottom: 5vw;
  position: relative;
  z-index: 100;
  background: url(../img/bg-ss.jpg) center;
  background-size: cover;
  border-top: 1.5vw #fff solid;
  border-bottom: 1.5vw #fff solid;
  box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.02), 0px 0px 4px rgba(3, 7, 18, 0.03), 0px 1px 9px rgba(3, 7, 18, 0.05), 0px 2px 15px rgba(3, 7, 18, 0.06), 0px 3px 24px rgba(3, 7, 18, 0.08);
}
.screen .splide__slide {
  opacity: 0.45;
  transition: opacity 0.25s ease;
}
.screen .splide__slide.is-active {
  opacity: 1;
}
.screen .screen-card {
  display: block;
  color: #3B4D57;
}
.screen .screen-card:focus-visible {
  outline: 3rem solid #fff;
  outline-offset: 4rem;
}
.screen .screen-card img {
  display: block;
  width: 100%;
  border-radius: 4.5vw;
  box-shadow: 0 12rem 28rem rgba(46, 61, 73, 0.22);
}
.screen .screen-card__caption {
  display: block;
  padding: 12rem 4rem 0;
  text-align: center;
  font-size: 14rem;
  line-height: 1.5;
}
.screen .splide__arrow {
  position: absolute;
  top: calc(50% - 24rem);
  z-index: 10;
  display: grid;
  width: 48rem;
  height: 48rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #3B4D57;
  cursor: pointer;
}
.screen .splide__arrow--prev {
  left: 4vw;
}
.screen .splide__arrow--prev svg {
  transform: rotate(180deg);
}
.screen .splide__arrow--next {
  right: 4vw;
}
.screen .splide__arrow svg {
  width: 16rem;
  height: 16rem;
  fill: currentColor;
}
.screen .splide__arrow:focus-visible {
  outline: 3rem solid #fff;
  outline-offset: 3rem;
}
.screen .splide__pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 10rem;
  padding-top: 20rem;
}
.screen .splide__pagination button {
  width: 10rem;
  height: 10rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(59, 77, 87, 0.35);
  font-size: 0;
}
.screen .splide__pagination button.is-active {
  background: #3B4D57;
}

.product {
  padding-bottom: 25vw;
}
.product h2 {
  text-align: center;
}
.product h2 img {
  width: 50vw;
  max-width: 256px;
}
.product .box {
  z-index: 100;
}
.product .box .package {
  text-align: center;
}
.product .box .package img {
  width: 40vw;
}
.product .box header {
  text-align: center;
  margin-bottom: 10vw;
}

.list-store li {
  margin-bottom: 2.5vw;
}
.list-store .btn-store {
  display: flex;
  align-items: center;
  height: 15vw;
  border-radius: 2.5vw;
  background-image: linear-gradient(127deg, #116da0, #0d1b35);
  overflow: hidden;
  color: #fff;
  font-weight: bold;
  font-size: 16rem;
}
.list-store .btn-store .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15vw;
  height: 15vw;
  background-color: #343D43;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.list-store .btn-store .icon img._steam {
  width: 12vw;
}
.list-store .btn-store .icon img._switch {
  width: 10vw;
}
.list-store .btn-store .icon img._shop {
  width: 8vw;
}
.list-store .btn-store ._text {
  display: block;
  padding-left: 2.5vw;
}
.list-store .btn-store ._cap {
  display: block;
  font-size: 14rem;
}
.list-store .btn-store._switch {
  background-image: linear-gradient(127deg, #E60012, #D00111);
}

body.temp {
  background: #fff;
}
body.temp .temp-head {
  margin-bottom: 10vw;
}
body.temp .temp-head h2 {
  text-align: center;
  font-size: 16rem;
}
body.temp .box {
  z-index: 100;
  margin-bottom: 15vw;
}
body.temp .box time {
  font-size: 14rem;
}
body.temp .box h2 {
  font-size: 20rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5vw;
  margin-bottom: 5vw;
}
body.temp .box h3 {
  font-size: 16rem;
}
body.temp .box p {
  line-height: 1.6;
  margin-bottom: 10vw;
}
body.temp .box a {
  display: block;
  color: #116da0;
  text-decoration: underline;
  margin: 2vw 0;
}
body.temp .box img {
  width: 100%;
}
body.temp .back {
  display: block;
  text-align: center;
  margin-bottom: 15vw;
  font-weight: bold;
  font-size: 16rem;
}

footer {
  position: relative;
  color: #fff;
  background-color: #343D43;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 25vw;
  padding: 15vw 0 40vw;
  z-index: 100;
}
footer .seal-kogado {
  display: block;
  margin-bottom: 10vw;
}
footer small {
  display: block;
  font-size: 10rem;
}

.screen-modal {
  width: calc(100vw - 32rem);
  max-width: 1200rem;
  max-height: calc(100svh - 32rem);
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
.screen-modal::backdrop {
  background: rgba(13, 20, 26, 0.76);
}
.screen-modal__content {
  position: relative;
  padding: 16rem;
  border-radius: 4.5vw;
  background: #fff;
}
.screen-modal figure {
  margin: 0;
}
.screen-modal__image {
  display: block;
  width: 100%;
  max-height: calc(100svh - 150rem);
  -o-object-fit: contain;
     object-fit: contain;
}
.screen-modal__caption {
  margin-top: 14rem;
  color: #3B4D57;
  font-size: 16rem;
  line-height: 1.6;
}
.screen-modal__close {
  position: absolute;
  top: -16rem;
  right: -16rem;
  z-index: 10;
  width: 40rem;
  height: 40rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #3B4D57;
  color: #fff;
  font-size: 28rem;
  line-height: 1;
  cursor: pointer;
}
.screen-modal__close:focus-visible {
  outline: 3rem solid #fff;
  outline-offset: 3rem;
}

#news {
  position: fixed;
  bottom: 5vw;
  left: 5vw;
  width: 90vw;
  background: #fff;
  border-radius: 4.5vw;
  z-index: 1000;
  box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.02), 0px 0px 4px rgba(3, 7, 18, 0.03), 0px 1px 9px rgba(3, 7, 18, 0.05), 0px 2px 15px rgba(3, 7, 18, 0.06), 0px 3px 24px rgba(3, 7, 18, 0.08);
  font-size: 14rem;
}
#news header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 12.5vw;
  border-bottom: 1px solid #eee;
}
#news header h2 {
  font-size: 14rem;
  padding-left: 3.5vw;
}
#news header .more {
  position: relative;
  padding-right: 9vw;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#news header .more::after {
  rotate: -45deg;
  right: 2vw;
  transition: rotate 0.3s ease, right 0.3s ease, top 0.3s ease;
}
#news header .more.is-expanded::after {
  rotate: 135deg;
  right: 4vw;
  top: 0;
}
#news .news-wrap {
  display: block;
  overflow: hidden;
  height: 12.5vw;
}
#news .list-news a {
  display: block;
}
#news .list-news dl {
  display: flex;
  align-items: center;
  height: 12.5vw;
}
#news .list-news dl dt {
  font-weight: bold;
  width: 25%;
  padding-left: 3vw;
}
#news .list-news dl dd {
  width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 5%;
}/*# sourceMappingURL=body.css.map */