h1 {
/*	font-family: "Kokoro";*/
}

body {
	font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
	font-weight: 600;
	font-style: normal;
    background-color: #ffe4e1;
}

.question {
	display: none;
	background-color: #ffffff;
	/* 質問枠の白色 */
	padding: 26px 0 20px 0;
	border-radius: 10px;
	width: 98%; /* 横幅を98%に設定 */
	margin: 0 auto; /* 中央寄せ */
    text-align: center; /* テキストを中央寄せに */
}

.active {
	display: block;
}

.center {
	display: block;
	margin: 10px auto;
	text-align: center;
	animation: slideInCenter 1.0s ease forwards;
	/* アニメーションを適用 */
}

.button-container {
	display: flex;
    align-items: center; /* 縦方向の中央揃え */
    justify-content: center; /* 横方向の中央揃え（必要に応じて） */
	gap: 10px;
	/* ボタン間の隙間を設定 */
	margin-top: 10px;
	/* 上に少し余白を追加 */
}

.nav-button {
	padding: 0px 10px 0px 10px;
	/* ボタンの内側の余白を設定 */
	border: none;
	/* ボタンの枠線をなくす */
	border-radius: 50px;
	/* ボタンの角を丸くする */
	color: white;
	/* ボタンの文字色 */
	cursor: pointer;
	/* マウスポインターを指アイコンに変更 */
	font-size: 17px;
	font-weight: 600;
	font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
	height: 60px;
    display: flex; /* Use flexbox for the button */
    align-items: center; /* Center items vertically */
}

.nav-button:disabled {
	background-color: #E6D9BB;
	/* 薄いオレンジ */
	cursor: not-allowed;
}

.nav-button:enabled {
	background-color: #ff7f00;
	/* 濃いオレンジ */
	color: white;
}

.nav-button:hover:enabled {
	background-color: #cc6600;
	/* 押せるときのホバー色 */
}

.back-button {
	padding: 8px 8px 8px 8px;
	/* ボタンの内側の余白を設定 */
	border: 2px solid #E6D9BB;
	/* ボタンの枠線をなくす */
	border-radius: 50%;
	/* ボタンの角を丸くする */
	background-color: #FFFEFC;
	/* ボタンの背景色 */
	color: #6D5A49;
	/* ボタンの文字色 */
	width: 52px;
	height: 52px;
}

.choice-button {
	padding: 10px 20px;
	/* 上下の余白を20pxに設定 */
	border-radius: 20px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	background-color: #FFFEFC;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	margin-bottom: 10px;
	text-align: center;
	width: 100px;
	height: 50px;
	vertical-align: middle;
	border: 2px solid #E6D9BB;
	/* 枠線を2px太くする */
}

.choice-button input[type="radio"] {
	display: none;
}

.choice-button.selected {
	border-color: orange;
	/* 選択された時の枠線の色をオレンジに変更 */
	background-color: rgba(255, 165, 0, 0.2);
	/* 選択された時の背景色を薄いオレンジに設定 */
}

/* ラベル内のスパンをフレックスボックスでセンタリング */
.choice-button span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #6D5A49;
}

.radio-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.radio-container .choice-button {
	flex: 0 1 30%;
	/* 横2列の幅 */
	margin: 5px;
	/* 各選択肢間の余白 */
	text-align: center;
}

@keyframes slideInCenter {
    0% {
        opacity: 0;
        transform: translateX(10%);
        /* 右側から開始 */
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        /* 中央に移動 */
    }
}

/* 最初の質問のみアニメーションを除外 */
.first-question {
	animation: none;
}

/* 入力欄とラベルの横並び */
.input-container {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.input-label {
	margin-right: 15px;
	margin-left: 0px;
	font-weight: bold;
	color: #6D5A49;
}

input.center {
	flex: 1;
	/* 入力欄が横並びにするための調整 */
	padding: 10px 0 10px 0;
	border: 2px solid #E6D9BB;
	/* 茶色の枠線 */
	border-radius: 8px;
	/* 丸みを帯びた角 */
	box-sizing: border-box;
	/* paddingとborderを含めた全体のサイズ */
	font-size: 17px;
	outline: none;
    font-weight: 550; /* 入力中のテキストを太くする */
	box-sizing: border-box; /* ボックスサイズを保持 */
	width: 100%; /* 入力欄の幅を保持 */
}

input.center:focus {
    background-color: #FFFFCC; /* 入力中の背景色（薄い黄色） */
/*    background-color: #ffccd5; /* 入力中の背景色（薄い黄色） */
	font-size: 20px; /* 入力中の文字の大きさを大きくする */
	box-sizing: border-box; /* ボックスサイズを保持 */
	width: 100%; /* 入力欄の幅を保持 */
}

/* JavaScriptで制御するスタイル */
.input-filled {
    background-color: #FFE5CC; /* 入力されている時の背景色を薄いオレンジに設定 */
}

input.center.blur {
	background-color: #FFF4E6; /* 入力が終わった後の背景色（薄いオレンジ） */
}

input.center::placeholder {
	color: rgba(0, 0, 0, 0.3); /* プレースホルダーの文字色を薄くする */
}

.label-container {
	display: flex;
	align-items: center;
	justify-content: center; /* 横方向の中央揃え */
	width: 98%;
	margin: 0 auto; /* 左右の余白を均等に */
}

/* チェックボックスを非表示にする */
.choice-button input[type="checkbox"] {
	display: none;
}

/* チェックされているラベルのスタイル */
.choice-button input[type="checkbox"]:checked+span {
	color: #ff9933;
	/* 濃いオレンジ色 */
}

.input-nallow {
	width: 40%;
	/* 横幅を40%に設定 */
	box-sizing: border-box;
}

p {
	font-family: "Zen Maru Gothic", "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
	font-size: 1.4em;
	/* 必要に応じてサイズを調整 */
	color: #6D5A49;
	margin-bottom: 16px;
	font-weight: 700;
}

.progress-container {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.dot {
	width: 10px;
	height: 10px;
	margin: 0 5px;
	border-radius: 50%;
	background-color: #E6D9BB;
}

.dot.active {
	background-color: orange;
}

.choice-button input[type="checkbox"]:checked + span {
    color: rgb(5, 5, 5);
}

.choice-button input[type="checkbox"]:checked + span::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -1;
    width: 100%;
    height: 100%;
    z-index: 1000;
    border-radius: 20px; /* 適切な角の丸みを設定 */
	background-color: rgba(255, 165, 0, 0.2); /* 薄いオレンジ色の背景 */
    border: 2px solid #ff7f00; /* 濃いオレンジ色の枠線 */
}

.choice-button {
    position: relative;
    display: inline-block;
}

/*thanksページ*/
.center-text {
	display: block;
	font-size: 1.5em;
	margin: 12px auto;
	text-align: center;
	font-weight: 900;
}

.center-text-small {
	display: block;
	margin: 8px auto;
	text-align: center;
	font-size: 11.5pt;
	margin-bottom: 11px !important; /* 下側の余白を10pxに設定 */
}

.nav-button-thanks {
	padding: 0px 80px 0px 80px;
	border: none;
	border-radius: 50px;
	color: white;
	cursor: pointer;
	font-size: 19px;
	font-weight: 600;
	font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
	height: 60px;
    display: flex; /* Use flexbox for the button */
    align-items: center; /* Center items vertically */
	background-color: #ff7f00;
	text-decoration: none; /* 下線を消す */
}