/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}

header.hero {
    background: url('https://source.unsplash.com/1600x900/?island') no-repeat center center/cover;
    color: white;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url('img/top.jpg');
}

.hero-content h1 {
    font-size: 3rem;
    font-family: "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS PMincho", "MS Mincho", serif;
}

.highlight-text {
    position: relative; /* 擬似要素を配置するために相対位置を設定 */
    display: inline-block; /* テキストサイズに合わせる */
    z-index: 1; /* テキストを背景より前面に表示 */
    color: white; /* 文字色 */
    line-height: 1.2; /* 行間の調整 */
}

/* 擬似要素で背景を設定 */
.highlight-text::before {
    content: ""; /* 擬似要素の内容を空にする */
    position: absolute;
    left: 0;
    top: -20%; /* 背景をテキストの半分の高さまで表示 */
    width: 100%; /* 親要素の幅に合わせる */
    height: 140%; /* 高さを文字全体の50%に設定 */
    background-color: rgba(255, 0, 0, 0.5); /* 半透明の青色 */
    z-index: -1; /* 背景を文字の後ろに配置 */
}

.section {
    padding: 50px 20px;
}

.container {
    max-width: 65%;
    margin: 0 auto;
}

.listing-item {
    background: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.listing-items {
    display: grid;
    gap: 20px;
}

.listing-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.listing-item h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #ff6f61;
}
.listing-item h3 {
    font-size: 1.5rem;
    cursor: pointer;
    color: #ff6f61;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.listing-item h3:hover {
    color: #ff3b2f;
}

.details {
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.details p {
    margin-top: 10px;
    padding-left: 10px;
    border-left: 2px solid #ff6f61;
}

.details img {
    width: 300px;  /* 幅を300pxに指定 */
    height: auto;  /* 高さは元の比率を維持 */
    border: 1px solid black;
    padding: 10px; /* 枠線内側に余白を作る */
    background-color: white; /* 余白の背景色を白に設定 */}

.footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}