/* CSS Variables (theme) */
:root {
  --bg: #ffffff;
  --fg: #8C8278;
  --muted: #666;
  --brand: #C375AD;
  --surface: #f6f8fa;
}

@media (prefers-color-scheme: dark) {
  :root {
  --bg: #ffffff;
  --fg: #8C8278;
  --muted: #666;
  --brand: #C375AD;
  --surface: #f6f8fa;
  }
}

/* ------------------------- Base ------------------------- */

html, body {
  height: 100%;
}
body {
  background: url("../images/bg.png") no-repeat;
  background-size: cover;
  color: var(--fg);
  line-height: 1.7;
  min-height: 100%;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body.index {
  background: url("../images/bg-index.png") no-repeat;
}

/* Focus ring */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.25em;
  border: none;
  border-radius: 2vw;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 2vw;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  position: relative;
  box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.25);
}
.btn-arrow:active {
    background: #FF0000;
}
.button-center-wrap {
    display: inline-block;
    text-align: center;
    width: 100%;
}
.btn-arrow::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url("../images/icon-arrow-right.png") no-repeat center center / contain;
  position: absolute;
  right: 3%;
  top: calc(40%);
}
.btn-arrow:active {
  background: #FFF;
  color: var(--brand);
  border: solid 1px var(--brand);
  transform: translateY(-1px);
}
 /* background: #FFF;
  border: solid 1px var(--brand);
  transform: translateY(-1px); */
/* .btn-arrow:active::after {
  background: url("../images/icon-arrow-right-purple.png") no-repeat center center / contain;
} */
/* .btn-arrow:hover {
  background: #FFF;
  color: var(--blink-duration);
  border: solid 1px var(--brand);
  transform: translateY(-1px);
} */
.icon-center-wrap {
    display: inline-block;
    text-align: center;
    width: 100%;
}

/* ------------------------- //Base ------------------------- */

/* ------------------------- header ------------------------- */
header {
    background: url("../images/bg-white-top.png") no-repeat;
    background-size: cover;
    background-position: 100% 120%;
    width: 100%;
    min-height: 30vw;
    height: auto;
    padding: 0;
}
.main-bottom {
    background: url("../images/bg-white-bottom.png") no-repeat;
    background-size: contain;
    background-position: center 0;
    width: 100%;
    height: auto;
    /* min-height: 30vw; */
    /* aspect-ratio: 16/9; */
    padding-top: 18.25%;
}
.logo {
    margin: 0 auto;
    width: 30vw;
}
.logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* ------------------------- //header ------------------------- */
/* ------------------------- main ------------------------- */

.main {
    width: 100%;
    height: auto;
    background: #FFF;
    /* background: url("../images/bg-white.png") no-repeat; */
    background-size: 100%;
    position: relative;
    padding: 0 0 3vw 0;
    margin-top: -12vw;
    min-height: 1300px;
}
 .index__main {
    position: relative;
    width: 100%;
 }

#img02 {
    position: absolute;
    top: 2%;
    left: 3%;
    width: 23%;
}
#img04 {
    position: absolute;
    top: 34%;
    right: 3%;
    width: 23%;
}
#img03 {
    position: absolute;
    bottom: 16%;
    left: 5%;
    width: 40%;
}
#img01 {
    position: absolute;
    bottom: 20%;
    right: 4%;
    width: 24%;
    z-index: 100;
}
#imghuman {
    position: absolute;
    bottom: 4%;
    right: 5%;
    width: 40%;
}
#img05 {
   position: absolute;
    top: 45%;
    left: 9%;
    width: 16%;
}
/* #img02 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 23%;
}
#img04 {
    position: absolute;
    top: 330px;
    right: 0.3vw;
    width: 23%;
}
#img03 {
    position: absolute;
    bottom: 16%;
    left: 5%;
    width: 40%;
}
#img01 {
    position: absolute;
    bottom: 150px;
    right: 30px;
    width: 100px;
    z-index: 100;
}
#imghuman {
    position: absolute;
    bottom: 4%;
    right: 5%;
    width: 40%;
}
#img05 {
   position: absolute;
    top: 90vw;
    left: 10vw;
    width: 16%;
} */


/* ------------------------- //main ------------------------- */
/* ------------------------- index ------------------------- */

.index__logo {
    margin: 0 auto;
    width: 85vw;
}
.index__logo img {
    width: 100%;
}
.intro {
    width: 100%;
    margin: 0 auto;
}
.intro h2 {
    font-size: 8.5vw;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 4vw;
    margin-top: -25vw;
    position: relative;
    z-index: 10000;
}
.intro__tap {
    font-size: 3vw;
    text-align: center;
    margin-bottom: 3vw;
}
.icon-hand {
    width: 10vw;
    padding: 4vw 0;
    display: block;
    margin: 0 auto;
}
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.index__main .btn-arrow {
    font-size: 5vw;
    display: inline-flex;
    padding: 3vw 9.5vw;
}
.index__main .btn-arrow::after {
    top: calc(30%);
}

/* ------------------------- //index ------------------------- */
/* ------------------------- select ------------------------- */
.subcontainer {
    width: 90%;
    margin: 0 auto;
}
.select__ttl {
    font-size: 5.35vw;
    color: var(--fg);
    line-height: 1.3;
    text-align: center;
    padding-bottom: 4vw;
}
.select__lists {}
.select__lists-li {
    padding-bottom: 1vw;
}
.select__lists-li a {
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 3.4vw;
    padding: 3vw 0;
}

/* ------------------------- //select ------------------------- */
/* ------------------------- answer__select ------------------------- */
.answer__select {}
.answer__ttl {}
.answer__ttl-group {
    text-align: center;
    margin-bottom: 3vw;
}
.answer__ttl-group h1 {
    font-size: 4.6vw;
    background: url("../images/bg-line.png") no-repeat center bottom;
    background-size: contain;
    padding: 2vw 0 4vw 0;
    line-height: 1.4;
}
.answer__ttl-group h2 {
    font-size: 2vw;
    color: var(--brand);
}
.answer__ttl-desctiption {
    background: var(--brand);
    color: #F7F3EB;
    font-size: 2.8vw;
    line-height: 1.2;
    text-align: center;
    border-radius: 1vw;
    padding: 2vw;
}
.answer__select-contents {}
.answer__select-ttl {
    font-size: 3.7vw;
    color: var(--brand);
    text-align: center;
    padding: 2vw 0 2vw 0;
}
.answer__select-li {
    background: #FFEAEA;
    border-radius: 1vw;
    padding: 1.5vw;
    font-size: 3vw;
    color: var(--fg);
    margin-bottom: 0.5vw;
    text-indent: -4vw;
    padding-left: 6vw;
}
.answer__select-li:before {
    content: "";
    display: inline-block;
    width: 3vw;
    height: 3vw;
    background: url("../images/icon-check.png") no-repeat center center / cover;
    transform: translateY(3px);
    margin-right: 1vw;
}
.answer__select-inner {
    position: relative;
}
.answer__select-buttonwrap {
    position: absolute;
    right: 0;
    top: 35%;
}
.answer__select-button {
    background: var(--fg);
    color: #FFF;
    font-size: 1.5vw;
    border-radius: 1vw 0 0 1vw ;
    padding: 2vw;
    width: 15vw;
    display: block;
}
.answer__select-next {
    display: block;
    width: 7%;
    position: absolute;
    top: 10px;
    transform: rotate(-20deg);
}
.answer__detail-catch {
    font-size: 3vw;
    color: var(--brand);
    text-align: center;
    padding-top: 3vw;
}
/* ------------------------- //answer__select ------------------------- */
.actionbutton__lists {
    display: flex;
    align-items: center;
    justify-self: center;
    width: 100%;
    padding: 1vw 0 3vw 0;
}
.actionbutton__lists li {
    width: 33.3%;
}
.actionbutton__lists li .btn-arrow {
    background: var(--bg);
    color: var(--fg);
    font-size: 2vw;
    border: solid 1px var(--fg);
    border-radius: 2vw;
    margin-right: 1vw;
    padding: 2vw;
}
.actionbutton__lists li .btn-arrow.right::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url("../images/icon-arrow-right-brown.png") no-repeat center center / contain;
  position: absolute;
  right: 3%;
  top: calc(40%);
}
.actionbutton__lists li .btn-arrow.left::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url("../images/icon-arrow-left-brown.png") no-repeat center center / contain;
  position: absolute;
  left: 3%;
  top: calc(40%);
}

/* ------------------------- answer__detail-inner ------------------------- */
.answer__detail-outer {
    min-height: 0;
}
.answer__detail-inner {
    overflow-y: scroll;
    height: 74vw;
    border: solid 1px #A8A8A8;
    border-radius: 3vw;
    padding: 4vw;
    /* scrollbar-gutter: stable; */
}

.answer__detail-lists {
    width: 70vw;
    margin: 0 auto;
}
.answer__detail-li {
    border-bottom: dotted 1px #ECDCCC;
    margin-bottom: 4vw;
    padding-bottom: 4vw;
}
.answer__detail-li:last-child {
    margin-bottom: 32vw;
}
.answer__detail-li.detail01 {
    margin-bottom: 30vw!important;
}

.answer__detail-ttl {
    font-size: 3vw;
    text-align: center;
    display: flex;
    line-height: 1;
    margin-bottom: 1vw;
    align-content:center;
    justify-content: center;

}
.answer__detail-ttl > * {
    align-content:center;
    justify-content: center;
}

.answer__detail-ttl-step {
    color: var(--brand);
    margin-right: 2vw;
}
.answer__detail-texts {
    font-size: 2vw;
    line-height: 1.6;
    letter-spacing: 0.1vw;
}
.answer__detail-images {
    margin-bottom: 3vw;
    display: block;
}
.answer__detail-images.detail07 img {
    border: solid 1px #ebebeb;
}
.answer__detail-images img {
    border-radius: 4vw;
    width: 100%;
}
.scroll-hint {
    width: 10vw;
    display: block;
    margin: 0 auto;
    border-radius: 2vw;
    background: rgba(255,255,255, 0.8);
    box-shadow: 00px 6px 6px 0px rgba(0, 0, 0, 0.12);
    padding: 1vw 1vw 0vw 1vw;
    position: absolute;
    top: calc(50%);
    left: 0;
    right: 0; 
}
/* ------------------------- //answer__detail-inner ------------------------- */

/* ------------------------- 点滅 ------------------------- */

.floaty-blink {
  /* 調整用（必要に応じて上書き可） */
  --float-distance: 8px;      /* 浮遊の幅 */
  --float-duration: 3.2s;     /* 浮遊スピード */
  --blink-duration: 2.4s;     /* 点滅スピード */
  --tilt: 1deg;               /* ほんのり傾き */

  animation:
    floaty var(--float-duration) ease-in-out infinite,
    blink  var(--blink-duration)  ease-in-out infinite;
  will-change: transform, opacity;
}

.floaty-blink-link {
  /* 調整用（必要に応じて上書き可） */
  --float-distance: 16px;      /* 浮遊の幅 */
  --float-duration: 3.2s;     /* 浮遊スピード */
  --blink-duration: 2.4s;     /* 点滅スピード */
  --tilt: 0;               /* ほんのり傾き */

  animation:
    floaty var(--float-duration) ease-in-out infinite,
    blink  var(--blink-duration)  ease-in-out infinite;
  will-change: transform, opacity;
}
.floaty-blink-main {
  /* 調整用（必要に応じて上書き可） */
  --float-distance: 24px;      /* 浮遊の幅 */
  --float-duration: 3s;     /* 浮遊スピード */
  --tilt: 0;               /* ほんのり傾き */

  animation:
    floaty var(--float-duration) ease-in-out infinite;
    will-change: transform, opacity;
}

/* 浮遊アニメーション（上下＋わずかに傾き） */
@keyframes floaty {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(calc(var(--float-distance) * -1)) rotate(var(--tilt)); }
  100% { transform: translateY(0) rotate(0); }
}

/* ふんわり点滅（消えない範囲で明滅） */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; } /* 弱めに暗くする */
}

/* 動きが苦手なユーザー配慮（OS設定に追従） */
@media (prefers-reduced-motion: reduce) {
  .floaty-blink { animation: none !important; }
}

/* ------------------------- //点滅 ------------------------- */
/* ------------------------- スクロールヒント ------------------------- */

/* 既存 .scroll-hint に追記 */
.scroll-hint {
  transition: opacity .4s ease, transform .4s ease;
  z-index: 9999; /* コンテンツより上に */
}

/* 非表示状態のとき */
.scroll-hint.hidden {
  opacity: 0;
  transform: translateY(10px); /* 下に少しずらして消える */
  pointer-events: none; /* 邪魔しないように */
}
/* ------------------------- //スクロールヒント ------------------------- */
/* ------------------------- 全体フェードイン・アウト ------------------------- */
  html { opacity: 0; transition: opacity .4s ease; }
  html.fade-in { opacity: 1; }
  html.fade-out { opacity: 0; }
/* ------------------------- //全体フェードイン・アウト ------------------------- */

/* html {
    visibility: hidden;
} */

html.wf-active,
html.loading-delay {
    /* visibility: visible; */
}
/* 初期は透明 */
    /* html.loading-delay body {
      opacity: 0;
    } */

    /* クラスが外れたときにふんわり表示 */
    body {
      opacity: 1;
      transition: opacity 1s ease; /* ← ここで fade-in */
    }