@charset "utf-8";

@import url(./global/_variable.css);
@import url(./layout/_reset.css);


/* common
  ---- memo ----
  font-feature-settings: 'palt';
  font-size: calc( 16 / var(--r_size) * 1rem );
============================================ */
html {
  scroll-behavior: smooth;
  /*scroll-padding-top: 50px; check the header hight!*/
}

body {
	background: #fff;
	color: var(--font_c);
  font-family: var(--font_normal);
  font-weight: 400;
  min-height: 100vh;
  overflow-wrap: anywhere;
  line-break: strict;
  &.is-fixed {
    height: 100%;
    overflow: hidden;
  }
}

#wrapper {
  position:relative;
  overflow: hidden;
}

a {
  color: currentColor;
  transition: all .3s ease-out;
  text-decoration: none;
  &:hover {
    @media(hover:hover) {
      opacity: .7;
    }
  }
}

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

.pconly {
  @media (width < 896px) {
    display: none;
  }
}
.sponly {
  display: none;
  @media (width < 896px) {
    display: block;
  }
}
.portraitonly {
  display: none;
  @media (width < 480px) {
    display: block;
  }
}
.portraitnone {
  @media (width < 480px) {
    display: none;
  }
}
.tabonly {
  display: none;
  @media (width < 1025px) {
    display: block;
  }
}
.tabnone {
  @media (width < 1025px) {
    display: none;
  }
}

.newline {
	display: inline-block;
}

.width {
  max-width: 1340px;
  width: calc(100% - 40px);
  margin: 0 auto;
  container-type: inline-size;
}

.outer {
  overflow: hidden;
}



/* pagetop
============================================ */
.pagetop_arrow {
  position: fixed;
  right: 70px;
  bottom: -100px;
  z-index: 1500;
  transition: all 300ms 0s ease;
  opacity: 0;
  a {
    overflow: hidden;
    outline: none;
    display: block;
    background-color: rgba(0,0,0,0.4);
    padding: 5px;
    img {
      width: 60px;
      height: auto;
    }
  }
  @media (max-width:1025px) {
    right: 10px;
  }
  @media (max-width:896px) {
    a {
      img {
        width: 30px;
      }
    }
  }
}
.fade_in {
  .pagetop_arrow {
    opacity: 1;
    transition: all 300ms 0s ease;
    bottom: 100px;
  }
}



/* utility
============================================ */
.u-red {
  color: var(--point_c);
}

/* components
============================================ */
.btn-primary {
  display: inline-block;
  padding: 20px 50px;
  word-break: keep-all;
  line-height: 1.3em;
  border-radius: 999px;
  background-color: var(--main_c);
  color: #fff;
  font-size: clamp(1.125rem, 0.93vw + 0.906rem, 1.688rem); /* 18px-27px(375-1340) */
  font-weight: 700;
  text-align: center;
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 98%;
    height: 89%;
    border: 3px solid #fff;
    background-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 100px;
  }
  &:hover {
    @media (hover: hover) {
      opacity: .8;
    }
  }
  @media (width < 600px) {
    padding: 16px 24px;
  }
}

/* header
============================================ */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 30px 0;
  @media (width < 1025px) {
    padding: 20px 0;
  }
}
.header_nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 50px;
  list-style: none;
  @media (width < 1025px) {
    gap: 24px;
  }
  @media (width < 600px) {
    gap: 14px;
  }
}
.header_nav-link {
  color: #fff;
  font-size: clamp(0.875rem, 1.04vw + 0.632rem, 1.5rem); /* 14px-24px(375-1340) */
  font-weight: 500;
  letter-spacing: .04em;
}

/* hero
============================================ */
.hero {
  position: relative;
  background-color: var(--space_c);
  overflow: hidden;
  min-height: 100svh;
  @media (width < 1025px) {
    min-height: auto;
  }
}
.hero_bg {
  position: absolute;
  inset: 0;
  background-image: url(../images/hero_bg.webp);
  background-repeat: repeat;
  background-size: cover;
}
.hero_inner {
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: 1340px;
  padding-inline: 20px;
  margin: 0 auto;
  container-type: inline-size;
  min-height: 100svh;
  @media (width < 1025px) {
    min-height: auto;
  }
}
.hero_visual {
  width: 57%;
  position: absolute;
  top: 3vw;
  left: 4vw;
  @media (width < 539px) {
    width: 80%;
    top: 45px;
    left: -70px;
  }
}
.hero_visual-img {
  display: block;
  width: 100%;
  height: auto;
}
.hero_copy {
  width: 50%;
  margin: 0 0 0 auto;
  padding-block: 10vw 6vw;
  color: #fff;
  text-align: center;
  position: relative;
  @media (width < 480px) {
    width: 70%;
    padding-block: 70px 40px;
  }
}
.hero_lead {
  font-size: clamp(1.125rem, 1.04vw + 0.882rem, 1.75rem); /* 18px-28px(375-1340) */
  font-weight: 500;
  line-height: 1.6;
  word-break: keep-all;
}
.hero_logo {
  margin: 2.4vw 0;
}
.hero_logo-label {
  font-size: clamp(1rem, 0.83vw + 0.806rem, 1.5rem);/* 16px-24px(375-1340) */
  letter-spacing: .1em;
  margin-bottom: 8px;
}
.hero_logo-mark {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}
.hero_logo-sub {
  font-size: clamp(0.938rem, 0.73vw + 0.768rem, 1.375rem);/* 15px-22px(375-1340) */
  letter-spacing: .1em;
  margin-top: 10px;
}
.hero_features {
  list-style: none;
}
.hero_features-item {
  font-size: clamp(1rem, 1.04vw + 0.757rem, 1.625rem); /* 16px-26px(375-1340) */
  font-weight: 500;
  line-height: 2em;
  &::before {
    content: '■';
    font-size: 1.2rem;
    margin-right: 6px;
  }
}
.hero .btn-primary {
  margin-top: 2vw;
}

/* ar_intro
============================================ */
.ar_intro {
  position: relative;
  overflow: hidden;
  background-image: url(../images/ar_intro_bg.webp);
  background-size: cover;
  background-position: right bottom;
  aspect-ratio: 16 / 9;
  align-content: center;
  @media (width < 1060px) {
    aspect-ratio: inherit;
  }
}
.ar_intro_inner {
  padding: 20px;
  width: 100%;
  max-width: 1340px;
  margin: auto;
}
.ar_intro_card {
  background-color: rgba(0, 0, 0, .55);
  color: #fff;
  padding: 50px;
  border-radius: 12px;
  width: 66%;
  @media (width < 1060px) {
    width: 100%;
  }
  @media (width < 896px) {
    padding: 20px;
  }
}
.ar_intro_title {
  font-size: clamp(1.625rem, 1.66vw + 1.236rem, 2.625rem); /* 26px-42px(375-1340) */
  font-weight: 700;
  word-break: keep-all;
  line-height: 1.4em;
  text-align: center;
}
.ar_intro_text {
  font-size: clamp(1rem, 0.41vw + 0.903rem, 1.25rem); /* 16px-20px(375-1340) */
  line-height: 1.9;
  margin-top: 24px;
  text-align: center;
  word-break: keep-all;
  & + & {
    margin-top: 1.66vw;
  }
  @media (width < 480px) {
    text-align: justify;
    word-break: normal;
  }
}
.ar_intro_text-last {
  margin-top: 30px;
  font-weight: 500;
}
.ar_intro_visual {
  flex: 0 1 480px;
  @media (width < 1025px) {
    flex-basis: auto;
    max-width: 360px;
  }
}
.ar_intro_visual-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* merit
============================================ */
.merit {
  position: relative;
  background-color: #fff;
  overflow: hidden;
  background-image: url(../images/plus_tile.svg);
  background-repeat: repeat;
  background-size: 30px 30px;
}
.merit_inner {
  position: relative;
  z-index: 1;
  padding: 100px 0;
  text-align: center;
  @media (width < 600px) {
    padding: 60px 0;
  }
}
.merit_title {
  font-size: clamp(1.6rem, 1.66vw + 1.211rem, 2.6rem); /* 25.6px-41.6px(375-1340) */
  font-weight: 700;
  margin-bottom: 60px;
  word-break: keep-all;
  line-height: 1.3em;
}
.merit_list {
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  /* max-width: 900px; */
  margin: 0 auto;
  list-style: none;
  @media (width < 896px) {
    gap: 26px;
  }
}
.merit_item {
  display: grid;
  align-items: center;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  text-align: left;
  border-radius: 20px;
  @media (width < 480px) {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
.merit_item-num {
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gray_c-light);
  /* border: 5px solid #fff; */
  border-radius: 50%;
  color: var(--gray_c);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1em;
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 90%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: #fff solid 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}
.merit_item-body {
  background-color: var(--gray_c-light);
  padding-inline: 40px 80px;
  padding-block: 24px;
  border-top-left-radius:90px;
  border-bottom-left-radius:90px;
  position: relative;
  margin-right: calc(50% - 50vw);
  @media (width < 480px) {
    border-top-left-radius:40px;
    border-bottom-left-radius:0px;
    border-top-right-radius:40px;
    padding-inline: 20px;
    padding-block: 20px;
    margin-right: 0;
  }
  &::after {
    content: "";
    display: block;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-top-left-radius:90px;
    border-bottom-left-radius:90px;
    border: #fff solid 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    @media (width < 480px) {
      border-top-left-radius:37px;
      border-bottom-left-radius:0px;
      border-top-right-radius:37px;
    }
  }
}
.merit_item-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--point_c);
  margin-bottom: 6px;
}
.merit_item-text {
  font-size: 1.05rem;
  line-height: 1.7;
}
.merit_note {
  font-size: clamp(1rem, 0.41vw + 0.903rem, 1.25rem); /* 16px-20px(375-1340) */
  font-weight: 500;
  line-height: 1.8;
  margin-block: 4.47cqw;
  @media (width < 480px) {
    margin-block: 30px;
  }
}
.merit-compact .merit_inner {
  padding: 70px 0;
}
.merit-compact .merit_title {
  margin-bottom: 40px;
}

/* exp_band
============================================ */
.exp_band {
  background-color: var(--gray_c-dark);
  padding: 30px 0;
  text-align: center;
}
.exp_band_title {
  color: #fff;
  font-size: clamp(1.188rem, 3.21vw + 0.434rem, 3.125rem); /* 19px-50px(375-1340) */
  font-weight: 700;
}

/* exp_detail
============================================ */
.exp_detail {
  position: relative;
  background-color: #e4e4e4;
  background-image: url(../images/exp_bg.webp);
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}
.exp_detail_bg {
  position: absolute;
  inset: 0;
  background-image: url(../images/space_doodle.svg);
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 1000px auto;
}
.exp_detail_inner {
  position: relative;
  z-index: 1;
  padding: 70px 0;
  @media (width < 700px) {
    padding: 50px 0;
  }
}
.exp_detail_num {
  font-size: clamp(1.875rem, 2.69vw + 1.244rem, 3.5rem); /* 30px-56px(375-1340) */
  font-weight: 700;
  line-height: 1em;
  border-bottom: #333 solid 2px;
  padding-block: 0 20px;
}
.exp_detail_head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4cqw;
  padding-block: 12px 0;
  @media (width <= 480px) {
    grid-template-columns: 1fr;
    gap: 0px;
  }
}
.exp_detail_type {
  font-size: clamp(1.25rem, 2.07vw + 0.764rem, 2.5rem); /* 20px-40px(375-1340) */
  font-weight: 700;
  padding-bottom: 10px;
}
.exp_detail_desc {
  font-size: clamp(0.875rem, 0.21vw + 0.826rem, 1rem);/* 14px-16px(375-1340) */
  line-height: 1.8;
}
.exp_detail_row {
  display: grid;
  grid-template-columns: 16% 30% 1fr;
  gap: 5.6cqw;
  padding-block: 30px 0;
  img {
    width: 100%;
    height: auto;
  }
  @media (width <= 480px) {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 20px 0;
  }
}
.box_qr {}
.exp_detail_qr {
  border: 3px solid var(--point_c);
}
.exp_illust{}
.exp_detail_steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
  @media (width <= 480px) {
    padding-block: 20px 0;
    gap: 16px;
  }
}
.exp_detail_steps-item {
  background-color: #fff;
  border-radius: 14px;
  padding: 26px 12px 16px;
  text-align: center;
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 5px;
  @media (width < 480px) {
  padding: 16px 10px 12px;
  }
  p {
    font-size: clamp(0.875rem, 0.21vw + 0.826rem, 1rem);/* 14px-16px(375-1340) */
    line-height: 1.5;
    text-align: justify;
  }
  &:not(:last-child) {
    &::after {
      content: "\00BB";
      position: absolute;
      top: 50%;
      right: -15px;
      transform: translate(50%, -50%);
      font-size: 1.8rem;
      font-weight: 700;
      color: #aaa;
      @media (width < 480px) {
        right: -8px;
      }
    }
  }
}
.exp_detail_steps-icon {
  display: block;
  width: 90px;
  height: 90px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}
.exp_detail_steps-label {
  display: inline-block;
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border: 2px solid #333;
  color: #333;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.exp_detail_poster {
  display: block;
  width: auto;
  max-height: 97svh;
  height: auto;
  margin: 50px auto 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* exp_visual
============================================ */
.exp_visual {
  position: relative;
  background-color: var(--space_c);
}
.exp_visual_box {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  img {
  }
}
.exp_visual_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.exp_visual_catch {
  position: absolute;
  top: 6vw;
  color: #fff;
  font-size: clamp(1.25rem, 4.15vw + 0.279rem, 3.75rem); /* 20px-60px(375-1340) */
  font-weight: 700;
  text-align: center;
  font-feature-settings: 'palt';
  letter-spacing: 0.05em;
  width: 100%;
}
.accent {
  font-size: 1.3em;
}

/* scene
============================================ */
.scene {
  position: relative;
  background-color: #fff;
  overflow: hidden;
  background-image: url(../images/plus_tile.svg);
  background-repeat: repeat;
  background-size: 30px 30px;
}
.scene_inner {
  position: relative;
  z-index: 1;
  padding: 8vw 0;
}
.scene_title {
  font-size: clamp(1.9rem, 0.83vw + 1.706rem, 2.4rem); /* 30.4px-38.4px(375-1340) */
  font-weight: 700;
  text-align: center;
  margin-bottom: 60px;
}
.scene_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.47cqw;
  @media (width < 1025px) {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.scene_card {
  position: relative;
  background-color: var(--gray_c-light);
  border-radius: 10px;
  padding: 40px 30px 30px;
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap: 1.5cqw;
}
.scene_card-tag {
  position: absolute;
  top: -3cqw;
  left: 30px;
  background-color: var(--point_c);
  color: #fff;
  font-size: clamp(1.25rem, 2.07vw + 0.764rem, 2.5rem);
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 50%;
}
.scene_card-heading {
  font-size: clamp(1.25rem, 1.45vw + 0.91rem, 2.125rem);
  font-weight: 700;
}
.scene_card-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.scene_title {
  text-align: left;
  font-size: clamp(1.25rem, 1.45vw + 0.91rem, 2.125rem);
}
.scene_card-label {
  font-weight: 700;
  margin-left: -0.5em;
  font-size: clamp(1rem, 0.41vw + 0.903rem, 1.25rem); /* 16px-20px(375-1340) */
}
.scene_arrow {
  text-align: center;
  img {
    width: 20%;
    height: auto;
  }
}
.scene_card-problem {
  font-size: clamp(1rem, 0.41vw + 0.903rem, 1.25rem); /* 16px-20px(375-1340) */
  font-weight: 700;
  padding-block: 8px 0;
}
.scene_card-solution {
  font-size: clamp(0.875rem, 0.21vw + 0.826rem, 1rem);/* 14px-16px(375-1340) */
  line-height: 1.8;
  text-align: justify;
}
.scene_conv {
  text-align: center;
  padding-block: 6vw 0;
}


/* faq
============================================ */
.faq {
  position: relative;
  background-color: #d4d4d4;
  overflow: hidden;
}
.faq_bg {
  position: absolute;
  inset: 0;
  background-image: url(../images/starfield_light_tile.webp);
  background-repeat: repeat;
  background-size: 500px 500px;
}
.faq_inner {
  position: relative;
  z-index: 1;
  padding: 100px 0;
  @media (width < 700px) {
    padding: 60px 0;
  }
}
.faq_card {
  background-color: #fff;
  border-radius: 16px;
  padding: 60px;
  max-width: 900px;
  margin: 0 auto;
  @media (width < 700px) {
    padding: 30px 20px;
  }
}
.faq_card-title {
  font-size: clamp(1.5rem, 0.50vw + 1.383rem, 1.8rem); /* 24px-28.8px(375-1340) */
  font-weight: 700;
  margin-bottom: 30px;
}
.faq_item {
  & + & {
    margin-top: 30px;
  }
}
.faq_item-q {
  font-size: clamp(1.125rem, 0.62vw + 0.979rem, 1.5rem);/* 18px-24px(375-1340) */
  font-weight: 700;
  line-height: 1.3em;
  padding-inline: 1.8em 0;
  text-indent: -1.8em;
}
.faq_item-a {
  font-size: clamp(0.875rem, 0.21vw + 0.826rem, 1rem);/* 14px-16px(375-1340) */
  line-height: 1.8em;
  padding-block: 8px 0;
  padding-inline: clamp(1.75rem, 0.41vw + 1.653rem, 2rem) 0;
}

/* footer
============================================ */
.footer_band {
  background-color: var(--gray_c-dark);
  padding: 24px 0;
  text-align: center;
}
.footer_home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
}
.footer_home-icon {
  flex: 0 0 auto;
}