/* style.css */

/* 0. 基本的なリセットとページ全体のスタイル */
body {
    margin: 0; /* ブラウザデフォルトの余白を消す */
    padding: 0; /* ブラウザデフォルトの余白を消す */
    font-family: sans-serif; /* 基本的なフォント (好みで変更可) */
    background-color: #ffffff; /* ページ全体の背景色 (アプリの背景に近い色など) */
    color: #333; /* 基本的な文字色 */
    line-height: 1.6; /* 行間を少し広めにとる */
}

/* ヘッダーとフッターの簡単なスタイル (前回index.htmlの雛形にあったもの) */
header {
    background-color: #ffffff; /* ヘッダーの背景色 */
    padding: 1em; /* 上下左右に余白 */
    text-align: center;
    border-bottom: 1px solid #e0e0e0; /* 下に薄い境界線 */
}

header h1 {
    margin: 0;
    font-size: 1.5em; /* 見出しのサイズ */
}

footer {
    text-align: center;
    padding: 1em;
    font-size: 0.9em;
    color: #777;
    margin-top: 2em; /* フッターの上の余白 */
    border-top: 1px solid #e0e0e0; /* 上に薄い境界線 */
}

/* footer a {
    color: #555;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
} */

/* メインコンテンツエリアの上下の余白 */
main {
    padding-top: 1em;
    padding-bottom: 1em;
}

/* 1. 「次の連休」セクション (.next-holidays-container) */
.next-holidays-container {
    padding: 0 1em; /* 左右に余白 */
    margin-bottom: 2em; /* 下に余白を設けて次のセクションと区切る */
}

.next-holidays-container h2 {
    font-size: 1.2em;
    margin-bottom: 0.5em;
    color: #333;
}

.holiday-card {
    background-color: #e3f2fd; /* アプリのカードのような薄い青系の背景色 */
    padding: 1em;
    border-radius: 8px; /* 角を少し丸める */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 薄い影を付ける (任意) */
}

.holiday-card .holiday-date {
    font-size: 1.3em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0.3em;
}

.holiday-card .holiday-duration,
.holiday-card .holiday-countdown {
    font-size: 0.9em;
    color: #333; /* やや濃いめの文字色 */
    margin-bottom: 0.2em;
}

/* 2. 「おすすめの旅行先」セクション (.recommendations-container) */
.recommendations-container {
    padding: 0 1em; /* 左右に余白 */
}

.recommendations-container h2 {
    font-size: 1.2em;
    margin-bottom: 0.8em;
    color: #333;
}

.recommendation-grid {
    /* モバイルでは縦に並ぶので、特別なGrid/Flex設定はまだ必須ではない */
    /* PC表示用に後で display: grid; や gap を追加します */
}

.recommendation-card {
    background-color: #ffffff; /* カードの背景色 */
    border-radius: 8px; /* 角を丸める */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影を付けて立体感を出す */
    margin-bottom: 1.5em; /* カード下の余白 */
    overflow: hidden; /* 画像の角丸を適用するためなど */
}

.recommendation-card a {
    /* text-decoration: none; */
    /* color: inherit; */
    display: block;
}

.recommendation-card .hotel-name {
    font-weight: bold;
    margin-bottom: 0.5em;
}

.recommendation-card .hotel-special {
    font-size: 0.9em;
    color: #555;
}

.recommendation-card img {
    width: 100%; /* 画像の幅をカードに合わせる */
    height: auto; /* 高さは自動調整 (または固定の高さを指定して object-fit) */
    display: block; /* 画像下の余計な隙間を防ぐ */
    /* border-top-left-radius: 8px; (カード全体でoverflow:hiddenなら不要かも) */
    /* border-top-right-radius: 8px; */
}

.recommendation-card .recommendation-text {
    padding: 0.8em 1em; /* テキスト部分の余白 */
}

.recommendation-card .recommendation-text p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
}