@charset "UTF-8";
/* =========================
   Shuuwa｜頑張りタイプ診断 専用CSS
   ・SPは縦横いっぱい（フルブリード）
   ・質問/スタート＝1画面固定（画像上にボタンを重ねる）
   ・結果＝スクロール可（全文読める）
========================= */

/* 変数（PCでもSPと同じ幅にしたい時は 420px を維持） */
:root{
  --card-max: 420px;
  --pad: 14px;
}

*,*::before,*::after{
	box-sizing:inherit;
}

/* ベース */
html, body{
	margin: 0;
	height: 100%;
	background: #f6f6f6;
	overflow-x:hidden;
	box-sizing:border-box;
}

*{
	/*border: 1px solid #000;*/
}

/* 診断エリア中央寄せ（PC） */
.diagnose{
	min-height: 100vh;
}

.wrap{
  min-height: 100%;
  display: grid;
  place-items: center;
  /*padding: 24px 12px;*/
}

/* =============== デフォルト（= 結果向け / スクロール可） =============== */
.quizcard{
	position: relative;
	width: 100%;
	max-width: var(--card-max);
	min-height: 100dvh;
	min-height: 100svh;
	overflow: visible;                   /* 縦に伸びる＝全文読める */
	background: transparent;
}

#screen,
#screen.fade{
	transition: none !important;
	transform: none !important;
}

#screen.screen-img{
  position: static;                    /* 通常フロー */
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 下部のボタン（結果時は通常フローで下に） */
/*#btnArea{
  position: static;
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: var(--pad);
}*/

/* 2個の時の横並び補助クラス */
#btnArea.is-two{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

/* PNGボタン */
.img-btn{
	border:0;
	background:transparent; 
	padding:0; 
	line-height:0; 
	cursor:pointer;
}

.img-btn img{
	display:block; 
	width:min(44%,220px); 
	height:auto;
}

.img-btn:focus-visible{
	outline:3px solid #a6d3ff; 
	outline-offset:4px; 
	border-radius:12px; 
}


/* 新しいCTAエリア */
.cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding: clamp(24px, 5svh, 48px) 16px;
}

/* ボタン風リンク */
.btn-link{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:min(72%, 320px);
  height:56px;
  background-color: #fff;
  color:#DF2D0A;
  text-decoration:none;
  border-radius:9999px;
  font-weight:700;
	border: 1.5px solid #DF2D0A;
}

/* 好みでホバー */
.btn-link:hover{ opacity:.9; }



/* フェード */
.fade{
	opacity:0;
	transform:translateY(8px);
	transition:opacity.25s ease, transform .25s ease;
}

.fade.show{
	opacity:1;
	transform:none;
}

/* =============== 質問/スタートのみ 1画面固定（オーバーレイ） =============== */
.quizcard.is-fixed{
	height: 100dvh;
	height: 100svh;                      /* 1画面に固定 */
	overflow: hidden;                    /* スクロールしない */
}
.quizcard.is-fixed #screen{
	position: absolute;
	inset: 0; 
	width:100%; 
	height:100%;
	object-fit: cover;                   /* 全面にフィット */
}


/* =============== SPだけフルブリード（余白ゼロ） =============== */
@media (max-width: 767px){
	body{
	  background:#fff;
	}
	.diagnose .wrap{
		padding:0;
		place-items: stretch;
	}
  .quizcard{
	  max-width:100%;
	  width:100%;
	  margin:0;
	  border-radius:0;
	  box-shadow:none;
	  min-height: auto !important;   /* ← ここが効くと白い帯が消えます */
	}

	#btnArea{
		padding-left:0; 
		padding-right:0;
	}
	.site-header{
		display:none;
	}
	/* ← 追加：親の余白も強制オフ（style.css の影響を打ち消す） */
	main.diagnose{
		padding:0 !important; 
		margin:0 !important; 
		width:100% !important;
	}
	.diagnose{
		padding:0 !important; 
		margin:0 !important;
	}
	.diagnose .wrap{
		padding:0 !important;
		margin:0 !important; 
		place-items:stretch; 
		width:100%;
	}

  /* カードは上限を完全解除してフル幅 */
  .quizcard{
	  max-width:none !important;
	  width:100% !important;
	  margin:0;
	  border-radius:0; 
	  box-shadow:none;
	}

  /* 画像は親幅にフィット（100vwは使わない） */
  #screen.screen-img{ 
	  width:100% !important;
	}
	main.diagnose, .diagnose, .diagnose .wrap{
    padding:0 !important; margin:0 !important; width:100% !important;
  }
	/* 画像は親幅にフィット（100vwは使わない） */
  #screen.screen-img{ width:100% !important; }
}

/* ===== ボタンを中央にそろえ、サイズを統一 ===== */

/* 画面ごとの基準サイズ（必要なら数値だけ調整） */
:root{
  /* スタート（1個）の横幅 */
  --btn-w-1: clamp(160px, 48vw, 260px);
  /* はい・いいえ（2個）の各横幅 */
  --btn-w-2: clamp(120px, 36vw, 200px);
}

/* 固定画面（スタート／質問）で必ず全幅フレックスにして中央下へ */
.quizcard.is-fixed #btnArea{
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;      /* = inset:0; と同じ */
  display: flex;
  width: 100%;
  justify-content: flex-end;                  /* 下寄せ */
  align-items: center;                        /* 水平方向は中央 */
  flex-direction: column;                     /* デフォは1個想定 */
  gap: 14px;
  padding: 0 16px clamp(16px, 6vh, 48px);
  z-index: 2;
}

/* スタート（1個）のサイズを固定（画像の素の大きさに左右されない） */
.quizcard.is-fixed #btnArea .img-btn img{
  width: var(--btn-w-1) !important;
  height: auto;
}

/* はい・いいえ（2個）は横並び＋同じ幅で均等に */
.quizcard.is-fixed #btnArea.is-two{
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(16px, 6vw, 32px);
  padding-bottom: clamp(180px, 16vh, 320px);
}

.quizcard.is-fixed #btnArea.is-two .img-btn img{
  width: var(--btn-w-2) !important;
  height: auto;
}

/* 念のため画像の外側に透明余白があってもクリックしやすいように */
.img-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0; 
	background: none;
  -webkit-tap-highlight-color: transparent;
}

/* カードは基準に（重ねる土台） */
.quizcard{
	position: relative;
}

/* デフォルトは通常フロー（質問中やスタート時はスクロールの邪魔をしない） */
.cta{
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px; /* 結果を重ねない端末でも見映えするように */
  z-index: 3;
}

/* 結果画面のときだけ、背景画像の中に重ねる */
.quizcard.is-result .cta{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(16px, 6vh, 48px); /* 画像の下からの余白。必要に応じて調整 */
  width: min(92%, 520px);         /* ボタン群の横幅（カード幅に追従） */
  padding: 0;                     /* 重ねるときは余白ゼロでOK */
}

/* ボタンは100%で2段縦並び */
.quizcard.is-result .cta .btn-link{
  width: 60%;
  max-width: none;
  height: 56px;
  border-radius: 9999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #DF2D0A;
  text-decoration: none;
  border: 1.5px solid #DF2D0A;
  font-weight: 700;
}

/* スマホでもはみ出さないように */
@media (max-width: 767px){
  .quizcard.is-result .cta{
    bottom: clamp(16px, 8vh, 56px); /* アドレスバーを考慮して少し大きめ */
    width: min(94%, 480px);
  }
}


@media (min-width: 1024px){
  html, body { background: transparent !important; }
  body::before{
	  content:"";
	  position: fixed;
	  inset:0;
	  z-index:-1;
	  pointer-events:none;
	  background-image: /*linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)), */url("../images/pc-fixed-bg.png");
	  background-size: cover;
	  background-position: center;
  }
}

/* 下部リンク（スタート/質問で左下固定） */
.foot{
  position: absolute;
  left: 120px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  gap: 12px;
  padding: 0;
}

/* 結果画面では隠す（CTAと重ならないように） */
.quizcard.is-result .foot{
	display: none;
}

.linklike{
  appearance: none;
  border: 0;
  background: none;
  color: #666;
  text-decoration: underline;
  font-size: 14px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
}

@media (max-width: 767px){
  .foot{
	  left: 156px;
	  bottom: max(10px, env(safe-area-inset-bottom));
	}
  .linklike{
	  font-size: 13px; 
	  padding: 8px;
	}
}

/* グリッド内のアイテム(=カード)の縦位置を上に */
.quizcard.is-result { 
  align-self: start;           /* ← これで中央寄せを打ち消す */
}

/* スタート画面（1個のとき）↓ 下からの距離をここで調整 */
.quizcard.is-fixed #btnArea{          /* 既存の同セレクタの下に追記でOK */
  padding: 0 16px clamp(40px, 12vh, 120px);
}

/* 質問（2個のとき）↓ 下からの距離をここで調整 */
.quizcard.is-fixed #btnArea.is-two{
  gap: clamp(16px, 6vw, 32px);
  padding-bottom: clamp(140px, 20vh, 260px); /* ←ここを好みで上下 */
}