@charset "UTF-8";
/*--------------------------------------------------------
副業スタイル診断 LP  ―  左右スワイプ診断
デザイン原寸 900 x 2030 (img/amfc_0*.png)
すべての座標は「コンテナ幅に対する比率(cqw)」で指定しているので
ウィンドウ幅が変わっても背景画像と要素がズレない
--------------------------------------------------------*/

:root {
  --teal: #23b4c8;
  --teal-dark: #164c52;
  --pink: #fd7381;
  --cream: #fff58d;
  --shell-w: 900px;
}

main {
  overflow: visible;
}

/*--------------------------------------------------------
シェル（＝背景画像 1 枚 ＝ 1 画面）
--------------------------------------------------------*/
.site-shell {
  position: relative;
  width: 100%;
  max-width: var(--shell-w);
  margin: 0 auto;
  aspect-ratio: 900 / 2030;
  overflow: hidden;
  container-type: inline-size;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  -webkit-user-select: none;
  user-select: none;
}

.phase-quiz    { background-image: url(../img/amfc_01.png); }
.phase-loading { background-image: url(../img/amfc_02.png); }
.phase-result  { background-image: url(../img/amfc_03.png); }

/* フェーズ切り替え */
.quiz-view,
.loading-view,
.result-view { display: none; }

.phase-quiz    .quiz-view    { display: block; }
.phase-loading .loading-view { display: block; }
.phase-result  .result-view  { display: block; }

/*--------------------------------------------------------
Q1〜Q5 スワイプ
--------------------------------------------------------*/
.quiz-view {
  padding-top: 49.1cqw; /* 「左右に5回スワイプ!」帯の下 */
}

.swipe-stage {
  position: relative;
  width: 100%;
  height: 95.8cqw;
}

.choice-card {
  position: absolute;
  top: 2.33cqw;
  left: 5%;
  width: 90%;
  aspect-ratio: 810 / 840;
  touch-action: pan-y;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .22s linear;
}

.choice-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 9px 10px rgba(22, 76, 82, .17));
}

/* 次の設問（現在のカードの真後ろで待機） */
.next-card {
  z-index: 4;
  opacity: .96;
  pointer-events: none;
  transition: none;
}

.next-card > img {
  filter: none;
}

.current-card {
  z-index: 10;
  cursor: grab;
}

.current-card.dragging {
  cursor: grabbing;
  transition: none;
}

/* ドラッグ方向のラベル */
.swipe-badge {
  position: absolute;
  top: 6.5cqw;
  z-index: 12;
  padding: 1.6cqw 2.4cqw;
  border-radius: 99px;
  color: #fff;
  font-size: 2.4cqw;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .12s linear, transform .12s ease-out;
  pointer-events: none;
}

.swipe-badge.left  { left: 4.65cqw;  background: var(--pink); }
.swipe-badge.right { right: 4.65cqw; background: var(--teal); }

.swipe-badge.show {
  opacity: 1;
  transform: scale(1);
}

/* 「直感で左右にスワイプ」 */
.swipe-instruction {
  position: absolute;
  left: 50%;
  bottom: 3.4cqw;
  z-index: 14;
  width: 78%;
  height: auto;
  pointer-events: none;
  transform: translateX(-50%);
  animation: instruction-pulse 2.4s ease-in-out infinite;
}

@keyframes instruction-pulse {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(.97); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.025); }
}

/* 進捗ドット */
.question-progress {
  position: relative;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.56cqw;
  margin-top: 5.1cqw;
}

.question-progress span {
  display: block;
  width: 1.63cqw;
  height: 1.63cqw;
  border-radius: 50%;
  background: #fff;
  opacity: .5;
  transition: opacity .2s;
}

.question-progress span.active { opacity: 1; }

/*--------------------------------------------------------
診断中
--------------------------------------------------------*/
/* 参照ソースと同じ border 方式（conic-gradient / mask は不使用）
   中央寄せは margin-left で行い、transform は rotate だけにしている */
.loading-spinner {
  position: absolute;
  top: 44.4cqw;
  left: 50%;
  margin-left: -17.35cqw;
  width: 34.7cqw;
  height: 34.7cqw;
  border: 1.16cqw solid rgba(30, 181, 198, .25);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: spinner-turn 1s ease-in-out infinite;
}

@keyframes spinner-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/*--------------------------------------------------------
診断結果
--------------------------------------------------------*/
.line-button {
  position: absolute;
  top: 118.6cqw;
  left: 0;
  width: 100%;
  display: block;
  animation: line-pulse 1.8s ease-in-out infinite;
}

.line-button img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 9px 14px rgba(16, 155, 72, .22));
}

@keyframes line-pulse {
  0%, 70%, 100% { transform: scale(1); }
  82%           { transform: scale(1.035); }
  91%           { transform: scale(.99); }
}

/*--------------------------------------------------------
フッター
--------------------------------------------------------*/
footer {
  position: static;
  width: 100%;
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 18px 12px 22px;
  background: #91d9e3;
  color: #fff;
  text-align: center;
}

footer .copyright p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.9;
  letter-spacing: .02em;
}

footer a { color: #fff; }
footer a:hover { text-decoration: underline; }

@media screen and (max-width: 600px) {
  footer .copyright p { font-size: 1rem; }
}