body {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    background-image: url(../img/bg.jpg);
    background-position: top;
    background-repeat: no-repeat;
}

body #main {
    margin: 0 auto;
}

header, footer, #top_title_area {
	display: none;
}
div, h1, h2, h3, h4, h5, p, a {
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

h3 {
    font-size: 20px;
    color: #333;
    letter-spacing: 0.2em;
    border-bottom: 2px solid #333;
    padding-bottom: 3px;
    width: 100%;
    max-width: 90%;
    margin: 24px auto;
}

strong {
    font-size: 24px;
    letter-spacing: 8px;
    color: #dc2d6f;
}

.qus_header {
    padding-top: 12px;
}

.qus_header span {
    font-size: 16px;
    letter-spacing: 3px;
    color: #d46992;
}

.container {
    max-width: 390px;
    margin: 0 auto;
	text-align: center;
	font-size: 1.2rem;
	padding-right: 0px;
    padding-left: 0px;
    max-height: 100vh;
    overflow: hidden;
    padding: 16px;
}

.container img {
    width: 90%;
    margin: 0 auto ;
}

.wrap {
	max-width: 450px;
	margin: 0 auto;
}

a {
	text-decoration: none;
}

.top_header {
	padding: 15% 5% 0% 5%;
}

.top_img {
	margin-bottom: 5%;
	padding: 5%;
}

.btn.btn-start {
	width: 80%;
	padding: 5%;
	border-radius: 100px;
	margin: 0 auto;
	color: #fff;
	font-weight: 600;
    letter-spacing: 2px;
}

.btn-fv {
    width: 70%;
	padding: 4%;
    border-radius: 100px;
    background-color: #dc2d6f;
    border-radius: 100px;
	margin: 0 auto;
	color: #fff;
    font-size: 18px;
	font-weight: 600;
    letter-spacing: 2px;
    border: none;
}

.pageA {
	display: none;
	max-width: 390px;
	    margin: 0 auto;
}
.pageA img {
    width: 100%;
}
.question-box {
    margin-top: 50px;
}
.question-box ul {
	display: flex;
	flex-wrap: wrap;
    padding: 0px 15px;
}
.question-box img {
    width: 100%;
}

.answers {
    width: 100%;
    max-width: 94%;
    margin: 0 auto;
}

.answers button  {
    cursor: pointer;
    background-color: #FFF;
    width: 98%;
    padding: 5%;
    list-style: none;
    margin: 0.5em 0;
    border: 2px solid #dc2d6f;
    border-radius: 100px;
    box-shadow: none;
    font-weight: 600;
	letter-spacing: 2px;
        color: #d55184;
}

.btn {
	cursor: pointer;
}

.prev {
    background-color: #b0a0e2;
    padding: 2.5% 20%;
    border-radius: 100px;
    margin: 8% auto 0 auto;
    color: #fff;
    font-size: 0.8em;
    border: none;
}

.question-box, .question {
	background: rgba(255, 248, 225, 0);
	border-color: #fff;
}

.question-box::before {
	background: #D3A2A8 !important;
	display: none;
}

.btn.btn-return.prev-start {
	background-color: #D3A2A8;
	padding: 2.5% 20%;
	border-radius: 100px;
	max-width: 55px;
    margin: 8% auto 0 auto;
    color: #fff;
    font-size: 0.8em;
}

.btn.btn-return.prev-question {
	background-color: #D3A2A8;
	padding: 2.5% 20%;
	border-radius: 100px;
    max-width: 55px;
    margin: 8% auto 0 auto;
    color: #fff;
	font-size: 0.8em;
}

.result {
    padding-top: 24px;
}
.wrap.result-wrap a {
	color: #fff;
}

.next-1-2,.next-2-3,.btn-result {
	opacity: 0.5;
	pointer-events: none;
}

.question-wrap, .question-box {
	display: none;
}

.display-block {
	display: block;
}

.display-none {
	display: none;
}

.active {
	background: silver;
	pointer-events: none;
}

.opacity {
	opacity: 1;
	pointer-events: auto;
}

.entry-content {
	margin-top: 0;
}

.main {
	padding: 0px !important;
}

.wp-site-blocks {
    display: none;
}

.top_header img {
    width: 100%;
}

.result img {
    width: 100%;
    margin: 0 auto;
}
.link {
    font-size: 10px;
	padding-top: 2%;
}


.yureru-s {
        width: 96%;
    animation: yureru-s 2s infinite;
}

@keyframes yureru-s {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

.yureru-j {
    animation: yureru-j 2s infinite;
}

@keyframes yureru-j {
    0% {
        transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

#results img {
    width: 100%;
    max-width: 340px;
}

/* ラッパーの高さをスムーズに遷移 */
#questions{ overflow:hidden; transition: height .26s ease; }

/* 質問カードのアニメ */
.question{ will-change: transform, opacity; }
.q-enter-next{ animation: qEnterNext .28s ease both; }
.q-exit-next { animation: qExitNext  .22s ease both; }
.q-enter-prev{ animation: qEnterPrev .28s ease both; }
.q-exit-prev { animation: qExitPrev  .22s ease both; }

@keyframes qEnterNext{ from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:translateX(0)} }
@keyframes qExitNext { from{opacity:1; transform:translateX(0)}    to{opacity:0; transform:translateX(-24px)} }
@keyframes qEnterPrev{ from{opacity:0; transform:translateX(-24px)} to{opacity:1; transform:translateX(0)} }
@keyframes qExitPrev { from{opacity:1; transform:translateX(0)}     to{opacity:0; transform:translateX(24px)} }

/* 結果を確実に表示（他CSSに負けないように） */
#results .result[hidden]{ display:none !important; }

/* 動き控えめ設定に配慮 */
@media (prefers-reduced-motion: reduce){
    #questions{ transition:none; } 
    .q-enter-next,.q-exit-next,.q-enter-prev,.q-exit-prev{ animation:none; }
}

/* ===== Interlude & トランジション用アニメ ===== */
.fade-out-up    { animation: fadeOutUp .22s ease both; }
.fade-in-up     { animation: fadeInUp  .28s ease both; }
.fade-out-down  { animation: fadeOutDn .22s ease both; }
.fade-in        { animation: fadeIn    .22s ease both; }

@keyframes fadeInUp   { from {opacity:0; transform: translateY(12px)} to {opacity:1; transform: translateY(0)} }
@keyframes fadeOutUp  { from {opacity:1; transform: translateY(0)}    to {opacity:0; transform: translateY(-12px)} }
@keyframes fadeOutDn  { from {opacity:1; transform: translateY(0)}    to {opacity:0; transform: translateY(12px)} }
@keyframes fadeIn     { from {opacity:0} to {opacity:1} }

/* “動きを減らす”ユーザー設定に配慮 */
@media (prefers-reduced-motion: reduce){
    .fade-out-up,.fade-in-up,.fade-out-down,.fade-in{ animation: none; }
}

/* Result 画面のアニメ */
.result-enter { animation: resultEnter .32s ease both; }
.result-exit  { animation: resultExit  .22s ease both; }

@keyframes resultEnter {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes resultExit {
    from { opacity: 1; transform: translateY(0)    scale(1); }
    to   { opacity: 0; transform: translateY(16px) scale(.98); }
}

    /* 質問→結果の高さ揺れ対策（ラッパー側） */
#results { will-change: transform, opacity; }

/* 質問コンテナの高さスムース調整 */
#questions { transition: height 320ms ease; will-change: height; }

/* ---- Animations ---- */
@keyframes fadeOutUp {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-12px); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes qEnterNext {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes qExitNext {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-24px); }
}
@keyframes qEnterPrev {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes qExitPrev {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(24px); }
}

.fade-out-up { animation: fadeOutUp 280ms ease both; }
.fade-in     { animation: fadeIn 240ms ease both; }
.fade-in-up  { animation: fadeInUp 320ms ease both; }
.q-enter-next{ animation: qEnterNext 320ms ease both; }
.q-exit-next { animation: qExitNext 320ms ease both; }
.q-enter-prev{ animation: qEnterPrev 320ms ease both; }
.q-exit-prev { animation: qExitPrev 320ms ease both; }

@media (prefers-reduced-motion: reduce) {
    #questions { transition: none; }
    .fade-out-up, .fade-in, .fade-in-up,
    .q-enter-next, .q-exit-next, .q-enter-prev, .q-exit-prev { animation-duration: 1ms; }
}

.tool-privacy {
    display: inline-block;
    margin-top: 16px;
    color: #0f93eb;
    font-size: 12px;
    font-weight: 800;
}