@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

/*----------------------------------------------------------
フルサイズ設定
---------------------------------------------------------- */
#login_mypage,
#head-wrapper,
#global-navi,
#foot-wrapper,
#main:after {
  display: none;
}
#wrap,
#page-inner {
  padding: 0!important;
}
#body-wrapper {
  border: none!important;
  background: none!important;
}
body.paused *
{
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}
/*----------------------------------------------------------
 リセット
---------------------------------------------------------- */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}
body {
  margin: 0;
  background: #000;
}
img {
  width: 100%;
  height: auto;
  display: block;
}

/*----------------------------------------------------------
デフォルトCSSの強制解除
---------------------------------------------------------- */
#body {
  width: 100%;
  font-family: 'Zen Old Mincho', serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  background: none;
}
#body-inner {
  width: 100%;
  padding: 0;
  margin: 0;
}
.one-col #centercol {
  width: 100%;
}
#main {
  width: 100%;
  padding: 0;
  margin: 0;
}
#Carea {
  width: 100%;
}

/*----------------------------------------------------------
アニメーション
---------------------------------------------------------- */
.reveal-mask{
  --dur: .9s;
  --ease: cubic-bezier(.2,.7,.2,1);
  position: relative;
  overflow:hidden;
  isolation:isolate;
  display: inline-block;
  inline-size:fit-content;
}
@supports not (inline-size:fit-content){
  .reveal-mask{ display:inline-block; width:auto; }
}
.reveal-mask::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:#000;
  transform:translateX(0%);
  transition:transform var(--dur) var(--ease);
}
.reveal-mask.is-visible::before{
  transform: translateX(100%);
}
/* 中身も少しだけフェードインさせる */
.reveal-mask > *{
  opacity: .001;
  transform: translateY(6px);
  transition: opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s;
}
.reveal-mask.is-visible > *{
  opacity: 1; transform: none;
}
.reveal-mask img {
  display:block;
  max-width:100%;
  height:auto;
}
@media (prefers-reduced-motion: reduce){
  .reveal-mask::before{ transition:none; transform:translateX(100%); }
  .reveal-mask > *{ transition:none; opacity:1; transform:none; }
}

/* 白→透明のグラデボーダー */
.gds-scrollline{
  --gds-line-color: #fff;
  --gds-line-height: 10px;
  --gds-anim-duration: 900ms;
  --gds-anim-ease: cubic-bezier(.2,.7,.2,1);
  position: relative;
  width: 100%;
  height: var(--gds-line-height);
  overflow: hidden;
  background: none;
}
.gds-scrollline::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg,
    var(--gds-line-color) 0%,
    rgba(255,255,255,0) 100%);
  transition: width var(--gds-anim-duration) var(--gds-anim-ease);
  will-change: width;
}
/* 画面内に入ったら左→右へ伸びる */
.gds-scrollline.is-visible::before{
  width: 100%;
}
/* 複数背景色に置く場合のブレンド */
.gds-scrollline.mix-soft::before{
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce){
  .gds-scrollline::before{ transition: none; width:100%; }
}


/*----------------------------------------------------------
共通設定
---------------------------------------------------------- */
#handlelock{
  position: relative;
}
section {
  position: relative;
}
.inner {
  position: relative;
  width: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
}


/*----------------------------------------------------------
MAIN VISUAL
---------------------------------------------------------- */
.mv {
  padding: 6rem 0;
  margin: 0 0 15rem 0;
}


/*----------------------------------------------------------
SECTION 01
---------------------------------------------------------- */
.sect01 {
  text-align: center;
  padding: 0;
  margin: 0 0 20rem 0;
}
.sect01 .inner {
  padding: 5rem 0;
  gap: 40px;
}
.sect01 .ttlSvg {
  display: block;
  margin: 1rem auto;
  max-width: 500px;
}


/*----------------------------------------------------------
SECTION 02
---------------------------------------------------------- */
.sect02 {
  text-align: center;
  padding: 0;
  margin: 0 0 20rem 0;
}
.sect02 .inner {
  padding: 5rem 0;
  gap: 40px;
}
.sect02 .ttlSvg {
  display: block;
  margin: 1rem auto;
  max-width: 500px;
}


/*----------------------------------------------------------
SECTION 03
---------------------------------------------------------- */
.sect03 {
  text-align: center;
  padding: 0;
  margin: 0 0 15rem 0;
}
.sect03 .inner {
  padding: 5rem 0;
  gap: 40px;
}
.sect03 .ttlSvg {
  display: block;
  margin: 1rem auto;
  max-width: 500px;
}


/*----------------------------------------------------------
SECTION 04
---------------------------------------------------------- */
.sect04 {
  text-align: center;
  padding: 0;
  margin: 0 0 15rem 0;
}
.sect04 .inner {
  padding: 5rem 0;
  gap: 40px;
}
.sect04 .ttlSvg {
  display: block;
  margin: 1rem auto;
  max-width: 600px;
}


/*----------------------------------------------------------
SECTION 05
---------------------------------------------------------- */
.sect05 {
  text-align: center;
  padding: 0;
  margin: 0 0 15rem 0;
}
.sect05 .inner {
  padding: 5rem 0;
  gap: 40px;
}
.sect05 .ttlSvg {
  display: block;
  margin: 1rem auto;
  max-width: 550px;
}
.sect05 .inner img:nth-of-type(2) {
  width: 70%;
  height: auto;
}


/*----------------------------------------------------------
SECTION 06
---------------------------------------------------------- */
.sect06 {
  text-align: center;
  padding: 0;
  margin: 0 0 15rem 0;
}
.sect06 .inner {
  padding: 5rem 0;
  gap: 40px;
}
.sect06 .ttlSvg {
  display: block;
  margin: 1rem auto;
  max-width: 550px;
}

.btn-wrap {
  display: flex;
  gap: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  background:#000;
}
.edge-btn{
  position: relative;
  display: inline-grid;
  place-items: center;
  width: min(46vw, 450px);
  height: 80px;
  text-decoration: none!important;
  color:#fff!important;
  font-weight: 500;
  letter-spacing: 0.1rem;
  font-size:clamp(16px,2vw,22px);
}
.edge-btn svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.edge-btn .frame {
  fill: transparent;
  stroke:#fff;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.edge-btn span {
  position: relative;
  z-index: 1;
}

.edge-btn:hover {
  color:#000!important;
}
.edge-btn:hover .frame {
  fill:#fff;
  transition: fill .25s ease;
}

/* スマホ寄せ */
@media (max-width:640px){
  .btn-wrap{ gap:20px; }
  .edge-btn{ width:92vw; }
}




/*----------------------------------------------------------
Logo&Copy
---------------------------------------------------------- */
.logoCopy p.attentionTxt {
  font-size: 1rem;
  display: block;
  margin: 5rem 0;
}

.logoCopy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 50px 0 200px 0;
}
.logoCopy img {
  max-width: 182px;
}
.logoCopy p.copyright {
  font-size: 0.9rem;
}