/* 綺麗系（上品で洗練された）デザインのためのカラーパレット変更 */
:root {
    --man-color: #4A90E2;       /* 男性（青を少し落ち着かせた色） */
    --girl-color: #FF69B4;      /* 女性（フューシャピンク） */
    --coming-soon-color: #8A2BE2; /* 紫（オーキッドに近い上品な色） */
    --red-button-color: #E24A4A; /* 赤色ボタン */
    --bg-color: #FAF9F6;        /* わずかにクリームがかった白 */
    --text-color: #333333;
    --secondary-text: #666666;
    --border-radius: 15px;      /* 角を少し丸く */
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-size: 14px; /* 全体の基準フォントサイズを調整 */
}
.main-title img {
	max-width: 100%;
}
/* 導入文 */

.introduction {
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 40px;
	padding: 10px;
	color: var(--secondary-text);
	font-weight: 500;
	color: #fff;
}
/* 診断ボタンコンテナ */
.diagnosis-buttons-container {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* ギャップを調整 */
    margin-bottom: 30px; /* 余白を調整 */
}
.diagnosis-buttons-container img {
	max-width: 100%;
	vertical-align: bottom;
}
/* 診断ボタンの共通スタイル */
.diagnosis-button {
	flex: 1;
	border-radius: 10px;
	transition: all 0.2s ease;
	line-height: 1.4;
	box-shadow: 0 4px 10px #634d32;
}
.diagnosis-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
}
.diagnosis-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 男性ボタン（水色） */
.man-button {
}

/* 女性ボタン（ピンク） */
.girl-button {
}

.screenshot-placeholder {
    flex: 1;
    height: 150px; /* 高さを調整 */
    background-color: #F7F7F7;
    border: 3px dashed #DDDDDD; 
    border-radius: 10px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 11px; /* 小さく */
    color: #AAAAAA;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

/* SNSセクション */
.sns-section {
    padding: 15px 0;
    font-size: 16px; /* 調整 */
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px; /* 余白を調整 */
    border-top: 1px dashed #FFDDEE; 
    padding-top: 20px;
}

/* Coming Soonボタン（グラデーション変更） */
.coming-soon-button {
	display: block;
	width: 90%;
	margin: 0 auto 25px;
	border-radius: var(--border-radius);
	cursor: default;
	box-shadow: 0 4px 10px #634d32;
}
.coming-soon-button img {
	max-width: 100%;
}
@media (max-width: 768px) {


}