@charset "utf-8";

#footer::after { content: "";}

img {
    -webkit-backface-visibility: hidden;
}

body{
	font:13px/1.231 arial,helvetica,clean,sans-serif;
	font-family:'メイリオ','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo',  'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
	font-size: 120%;
	margin: 0;
    padding: 0;
    line-height: 1.5em;
}

/*.questionnaire p{
	position: absolute;
	text-align: center;
	font-weight: 800;
	font-size: 1.3em;
	line-height: 50px;
	letter-spacing: 2px;
	top: 58%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin: 0!important;
	padding: 0!important;
	max-width: 100%;
	z-index: 100;
}

.questionnaire img{
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin: 0!important;
	padding: 0!important;
	max-width: 100%;
}

.questionnaire p span{
	font-size: 1.5em;
}

.sp{
	display: none;
}

.questionnaire{
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #f4ffec;
	background-repeat: no-repeat;
	text-align: center;
	background-size: 100% 100%;
}

.questionnaire img{
	max-height: 100%;
}

@media screen and (max-width: 930px) {
.questionnaire p{
	font-size: 1.2em;
}
}

@media screen and (max-width: 860px) {
.questionnaire p{
	width: 500px;
}
}

@media screen and (max-width: 640px) {
.sp{
	display: block;
}
	
.pc{
	display:none;
}

.questionnaire img {
    max-width: 100%;
	max-height: 175%;
}
}*/

/*2026*/
/* 画面全体に背景色を適用するための設定 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #f4ffec; 
}

/* リース画像とテキスト全体を中央に配置する設定 */
.questionnaire {
    background-color: #f4ffec; 
    position: relative; 
    min-height: 100vh; /* 画面の高さ全体を確保 */
    
    /* ---- ★★★ ここが画像を中央に寄せるための重要変更点 ★★★ ---- */
    display: flex; /* Flexboxを有効化 */
    justify-content: center; /* 子要素を横方向中央に配置 */
    align-items: center; /* 子要素を縦方向中央に配置 */
}

/* 画像全体の設定 */
.questionnaire img {
    /* Flexアイテムとして中央に配置されているため、マージンは不要 */
    position: static; 
    display: block; 
    /* margin: 0 auto; は不要 */
    width: 90%; 
    max-width: 650px; 
    height: auto;
    
    /* 縦方向の中央配置を安定させるため、z-indexを追加 */
    z-index: 5; 
}

/* テキストを画像の上に重ねて中央に配置 */
.questionnaire p {
    /* 親要素 (questionnaire) が Flexコンテナになったため、pタグの位置決めは画像基準ではなく、画面中央基準で維持 */
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 10; /* 画像より手前に表示 */
    width: 80%; 
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.6;
    color: #000000;
}

.questionnaire p span{
font-size: 25px;
}

br.p_br{display: none;}
/* ---------------------------------------------------------------- */
/* PC/SP 画像の切り替え */
/* ---------------------------------------------------------------- */

/* デフォルトはPC用画像を表示 (641px以上) */
.questionnaire img.sp {
    display: none;
}
.questionnaire img.pc {
    display: block;
}

/* 640px以下での調整（スマートフォン） */
@media screen and (max-width: 640px) {
    /* 画像の切り替え */
    .questionnaire img.pc {
        display: none;
    }
    .questionnaire img.sp {
        display: block;
    }

    .questionnaire img {
        width: 100%;
        max-width: none;
    }

    /* SP画像に合わせたテキストの調整 */
    .questionnaire p {
        /* SP画像は縦長なので、topを調整して中央の空白にフィットさせる */
        top: 50%; 
        transform: translate(-50%, -50%); 
        font-size: 28px;
        width: 90%;
    }
	.questionnaire p span{
		font-size: 35px;
	}
}

@media screen and (max-width: 500px) {
br.p_br{display: block;}
}

@media screen and (max-width: 400px) {
	.questionnaire p {
        top: 55%; font-size: 24px;
}
}