You said
/* リセットと基本設定 */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    /* 明朝体 Noto Serif JP を設定 */

    font-family: 'Noto Serif JP', serif;

    color: #000000;

    line-height: 1.6;

    background-color: #ffffff; /* 基本の背景色 */

}



a {

    text-decoration: none;

    color: inherit;

}



ul {

    list-style: none;

}



/* ヘッダー / グローバルナビゲーション */

/* --- ヘッダーの統一設定 --- */

header {

    position: fixed;    /* スクロールしても固定 */

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;      /* 最前面に表示 */

    padding: 10px 0;    /* 上下の余白 */

    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒背景（indexと同じ） */

}



/* index3でも共通のクラス名を使えるように設定 */

.header-container, .header-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1500px;  /* コンテンツ幅に合わせる */

    margin: 0 auto;

    padding: 0 50px;

}



.logo {

    font-size: 30px;

    font-weight: bold;

    white-space: nowrap;

}



/* ロゴの色設定 */

.logo-sadaki, .logo-red { color: #c71585; } /* ピンク/赤系 */

.logo-yuma, .logo-black { color: #ffffff; } /* 文字を白に変更（黒背景で見やすくするため） */



nav ul {

    display: flex;

    gap: 30px;

    align-items: center;

}



/* ナビゲーションの文字設定（index3のh2タグなどにも対応） */

nav ul li a, nav h2 {

    color: #ffffff;

    font-size: 24px;   /* indexの30pxが大きすぎる場合はここで微調整 */

    font-weight: bold;

    text-decoration: none;

    letter-spacing: 2px;

}



/* index3独自のnav内のh2があればマージンを消す */

nav h2 {

    margin: 0;

}



/* Section 1: メイン画像、動画 */

.hero-section {

    position: relative;

    width: 100%;

    height: 850px;

    color: #ffffff;

    padding: 50px;

    overflow: hidden; /* 動画や画像をはみ出さないように */

}



.video-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.video-container video {

    width: 100%;

    height: 100%;

    object-fit: cover; /* 縦横比を維持して要素全体を覆う */

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.3); /* 動画の上にオーバーレイ (ロゴとナビゲーションを見やすくするため) */

}



.hero-text {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%); /* 中央配置 */

    text-align: center;

    z-index: 2; /* テキストを前面に表示 */

}



.hero-text h1 {

    font-size: 3em; /* 適切なフォントサイズに調整 */

    margin-bottom: 20px;

}



.hero-text p {

    font-size: 1.5em; /* 適切なフォントサイズに調整 */

}



/* 共通のコンテンツラッパー (中央配置と最大幅の制御) */

.content-wrapper {

    max-width: 1500px;

    margin: 0 auto;

    padding: 0 20px; /* 画面端との余白を確保 */

}



/* Section 2: テキスト */

.text-section {

    background-color: #fffafa;

    padding-top: 100px;

    padding-bottom: 200px;

}



.text-section .content-wrapper p {

    font-size: 25px;

    text-align: left; /* 左揃え */

}





/* Section 3: トピックス */

/* --- 修正箇所 --- */



/* --- 自動スクロールの設定 --- */





.topics-container {

    display: flex;

    overflow: hidden; /* はみ出た分を隠す */

    width: 100%;

}



.topics-inner {

    display: flex;

    gap: 30px;

    /* スクロールアニメーション */

    animation: scroll-left 30s linear infinite;

}



/* 継ぎ目なく流れるアニメーション定義 */

@keyframes scroll-left {

    from { transform: translateX(0); }

    to { transform: translateX(-50%); } /* ★ここを-100%から-50%に変更 */

}



.topic-item {

    flex: 0 0 auto;

    width: 450px;

    text-align: center;

}



.topic-item p {

    margin-top: 15px;

    font-size: 1.2em;

}



/* トピックス画像 */

.hero2, .hero3, .hero4, .hero11, .hero12{

    width: 450px; /* 指定されている幅を維持 */

    height: 400px;

    background-color: #ccc;

    background-size: cover;

    background-position: center;

    margin: 0 auto;

}



.hero2 { background-image: url('image/2.jpg'); }

.hero3 { background-image: url('image/3.jpg'); }

.hero4 { background-image: url('image/4.jpg'); }

.hero11 { background-image: url('image/11.jpg'); }

.hero12 { background-image: url('image/12.jpg'); }





/* Section 4: 平面図 */

.floor-plan-section {

    padding-bottom: 100px;

}



.floor-plan-section h2 {

    color: #000000;

    text-align: left;

    margin-bottom: 30px;

}



.hero5 {

    width: 100%;

    height: 650px;

    background-color: #ccc; /* 仮の背景色 */

    background-image: url('image/5.jpg');

    background-size: cover;

    background-position: center;

    margin: 0 auto;

}



/* Section 5: 部屋の案内 */

.room-guide-section {

    margin-top: 100px;

    margin-bottom: 100px;

    padding-right: 30px;

    padding-left: 30px;

}



.room-guide-section h2 {

    color: #000000;

    text-align: left;

    margin-bottom: 30px;

}



.room-row-parallel {

    display: flex;

    justify-content: center; /* 中央揃え */

    gap: 30px; /* 左右のユニット間の間隔 */

    margin-bottom: 100px; /* 行間の余白 */

    max-width: 100%;

}



.room-detail-unit {

    width: 50%;

    max-width: 735px;

    display: flex;

    align-items: flex-start; /* 上揃え */

    gap: 30px; /* 画像とテキストの間のスペース */

}



/* 部屋の画像 (画像パスが正しいことを確認してください) */

.hero6, .hero7, .hero8, .hero9 {

    flex-shrink: 0;

    width: 300px;

    height: 450px;

    background-color: #ccc; /* 仮の背景色 */

    background-size: cover;

    background-position: center;

}



.hero6 { background-image: url('image/6.jpg'); }

.hero7 { background-image: url('image/7.jpg'); }

.hero8 { background-image: url('image/8.jpg'); }

.hero9 { background-image: url('image/9.jpg'); }





.room-text {

    flex-grow: 1;

    color: #000000;

    font-size: 16px;

}



.room-text h3 {

    margin-bottom: 10px;

    font-size: 20px;

    color: #000000;

}



.room-text ul {

    list-style: disc inside;

    padding-left: 20px;

}



.room-text ul li {

    margin-bottom: 5px;

    line-height: 1.5;

    text-indent: -20px; /* リストマークの位置調整 */

    padding-left: 20px;

}



/* Section 6: アクセスマップ */

.access-map-section {

    padding-top: 50px;

    padding-bottom: 100px;

    padding-right: 30px;

    padding-left: 30px;

}



.access-map-section h2 {

    color: #000000;

    text-align: left;

    margin-bottom: 30px;

}



.map-container {

    /* マップのコンテナ */

    width: 100%;

    height: 500px; /* マップの表示高さを設定 (全体のバランスを考慮) */

    overflow: hidden;

    border: 1px solid #ccc; /* マップの境界線 (任意) */

}



.map-container iframe {

    /* iframe のスタイル */

    width: 100%;

    height: 100%;

    display: block;

}







/* フッター */

footer {

    margin-top: 0;

    padding: 30px;

    height: 250px;

    background-color: #fffafa;

    color: #000000;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: left;

}



.footer-content {

    line-height: 1.5;

    text-align: center; /* 施設案内のタイトルを中央に */

}



.footer-content h3 {

    margin-bottom: 15px;

}



.facility-info p {

    text-align: left; /* 施設情報の各行を左揃え */

}



.facility-info .label {

    display: inline-block;

    width: 80px; /* ラベルの幅を固定して文字の位置を揃える */

    text-align: left;

}



/* レスポンシブ対応 */

@media (max-width: 1550px) {

    .content-wrapper {

        max-width: 90%;

    }

}



@media (max-width: 1200px) {

    /* トピックスの並び替え */

    .topics-container {

        flex-direction: column;

        align-items: center;

    }

   

    .topic-item {

        margin-bottom: 50px;

    }



    /* 部屋の案内を縦並びにする */

    .room-row-parallel {

        flex-direction: column;

        gap: 50px;

    }



    .room-detail-unit {

        width: 100%;

        max-width: 600px;

        margin: 0 auto;

        flex-direction: column;

        align-items: center;

    }

   

    /* 画像はユニット内で最大幅にする */

    .hero6, .hero7, .hero8, .hero9 {

        width: 100%;

        height: 350px;

    }



    /* マップの高さ調整 */

    .map-container {

        height: 400px;

    }

}



@media (max-width: 768px) {

    /* ヘッダーの調整 */

    .logo-sadaki, .logo-yuma, nav ul li a {

        font-size: 25px;

    }

   

    .hero-section {

        height: 600px;

        padding: 20px;

    }

   

    .hero-text h1 {

        font-size: 2em;

    }

   

    .hero-text p {

        font-size: 1.2em;

    }



    .text-section .content-wrapper p {

        font-size: 18px;

    }



    .hero2, .hero3, .hero4 {

        width: 100%;

        height: 300px;

    }



    .hero5 {

        height: 400px;

    }



    .footer-content {

        padding: 0 10px;

    }



    /* マップの高さ調整 */

    .map-container {

        height: 300px;

    }

}



@media (max-width: 480px) {

    /* モバイルでの調整 */

    .header-content {

        flex-direction: column;

        align-items: flex-start;

    }



    nav ul {

        margin-top: 10px;

    }

   

    .hero-section {

        height: 450px;

    }

   

    .text-section, .topics-section, .floor-plan-section, .room-guide-section, .access-map-section, footer {

        padding-right: 15px;

        padding-left: 15px;

    }



    /* マップの高さ調整 */

    .map-container {

        height: 250px;

    }

}



/* 全体設定 */

body {

    margin: 0;

    padding: 0;

    font-family: 'Noto Serif JP', serif;

    background-color: #fffafa;

    color: #000000;

    line-height: 1.8;

}



h1, h2, h3, p {

    margin: 0;

}



ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



a {

    text-decoration: none;

    color: inherit;

}



/* ヘッダー */

header {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 20px 0;

}



.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 50px;

}



.logo {

    font-size: 24px;

    font-weight: bold;

    letter-spacing: 5px;

}



.logo-red { color: #c71585; }

.logo-black { color: #000000; }



nav ul {

    display: flex;

    gap: 30px;

}



nav h2 {

    color: #ffffff;

    font-size: 20px;

    letter-spacing: 5px;

    font-weight: 400;

}



/* メインビジュアル */

.main-visual {

    position: relative;

    width: 100%;

    height: 850px; /* 指定通り */

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    text-align: center;

}



.main-visual video {

    position: absolute;

    top: 50%;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    transform: translate(-50%, -50%);

    z-index: -1;

    object-fit: cover;

}



.overlay-text h1 {

    font-size: 3rem;

    margin-bottom: 20px;

    letter-spacing: 0.2em;

}



/* イントロダクション */

.intro-text {

    padding: 100px 0 200px; /* 指定のmarginをpaddingで実装 */

    display: flex;

    justify-content: center;

}



.container-narrow {

    width: 1500px;

    font-size: 25px;

    text-align: left;

}



/* 観光案内グリッド */

.sightseeing-grid {

    padding: 0 30px 100px;

}



.container {

    max-width: 1500px;

    margin: 0 auto;

}



.section-title {

    font-size: 28px;

    margin-bottom: 50px;

    border-left: 5px solid #c71585;

    padding-left: 15px;

}



.grid-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr; /* 横2列 */

    gap: 60px 40px;

}



.grid-item img {

    width: 100%;

    height: 450px;

    object-fit: cover;

    margin-bottom: 20px;

}



.item-desc h3 {

    font-size: 22px;

    margin-bottom: 10px;

    color: #333;

}



.item-desc p {

    font-size: 16px;

}



/* リンクエリア */

.external-links {

    margin-top: 100px;

    text-align: center;

    border-top: 1px solid #ddd;

    padding-top: 50px;

}



.external-links ul {

    margin-top: 20px;

}



.external-links li {

    display: inline-block;

    margin: 0 20px;

}



.external-links a {

    color: #c71585;

    text-decoration: underline;

}



/* フッター */

footer {

    margin-top: 100px;

    padding: 50px 30px;

    height: 250px;

    background-color: #fffafa;

    color: #000000;

    text-align: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.footer-details {

    display: inline-block;

    text-align: left;

    margin-top: 20px;

}



.footer-details dl {

    display: grid;

    grid-template-columns: 120px 1fr;

    gap: 10px;

}



.footer-details dt {

    font-weight: bold;

}

/* --- 部屋案内ページ専用スタイル --- */



/* ページ全体の下地を少しだけ和紙のような色に（お好みで） */

.page-room {

    background-color: #fcfcfc;

}



/* ページトップのタイトル */

.sub-hero-area {

    padding: 150px 0 80px;

    text-align: center;

    background: #f8f8f8;

    margin-bottom: 50px;

}



.sub-hero-area h1 {

    font-size: 2.5rem;

    letter-spacing: 0.3em;

    margin-bottom: 10px;

}



.sub-hero-area p {

    font-size: 1.1rem;

    color: #666;

}



/* お部屋のブロック（横並び） */

.room-block {

    display: flex;

    align-items: center;

    gap: 60px;

    margin-bottom: 120px;

    opacity: 0; /* フェードイン用（必要なら） */

    animation: fadeIn 1s forwards;

}



@keyframes fadeIn {

    to { opacity: 1; }

}



/* 偶数番目のブロックを反転 */

.room-block.reverse {

    flex-direction: row-reverse;

}



/* 画像エリア */
.room-img {
    flex: 1.2;
    overflow: hidden;
    /* 影の設定を削除しました */
}



.room-img img {

    width: 100%;

    height: 500px;

    object-fit: cover;

    display: block;

    transition: transform 0.5s;

}



.room-img:hover img {

    transform: scale(1.05);

}



/* 説明文エリア */

.room-info {

    flex: 1;

    padding: 20px;

}



.room-label {

    display: block;

    font-size: 0.8rem;

    color: #c71585;

    letter-spacing: 0.2em;

    margin-bottom: 10px;

}



.room-info h2 {

    font-size: 2rem;

    margin-bottom: 25px;

    position: relative;

    padding-bottom: 15px;

}



.room-info h2::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 60px;

    height: 2px;

    background: #333;

}



.room-block.reverse .room-info h2::after {

    left: auto;

    right: 0; /* 反転時は右側に */

}



.room-block.reverse .room-info {

    text-align: right;

}



.description {

    line-height: 2;

    margin-bottom: 30px;

    color: #444;

}



/* スペックリスト（箇条書き） */

.spec-list {

    border-top: 1px solid #eee;

    padding-top: 20px;

}



.spec-list li {

    margin-bottom: 10px;

    font-size: 0.95rem;

    display: flex;

}



.room-block.reverse .spec-list li {

    flex-direction: row-reverse;

}



.spec-list li span {

    width: 80px;

    font-weight: bold;

    color: #888;

    flex-shrink: 0;

}



/* スマホ対応 */

@media (max-width: 900px) {

    .room-block, .room-block.reverse {

        flex-direction: column;

        gap: 30px;

        margin-bottom: 80px;

    }

   

    .room-img img {

        height: 300px;

    }

   

    .room-block.reverse .room-info {

        text-align: left;

    }

   

    .room-block.reverse .room-info h2::after {

        right: auto;

        left: 0;

    }

}
/* --- 予約ページ専用スタイル --- */
.reservation-section {
    padding: 50px 0;
}

.calendar-container, .form-container {
    margin-bottom: 60px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
}

.calendar-container h3, .form-container h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #c71585;
    padding-bottom: 10px;
    display: inline-block;
}

.iframe-wrapper {
    position: relative;
    width: 100%;
    margin-top: 20px;
    border: 1px solid #eee;
}

.form-note {
    color: #d63384;
    font-weight: bold;
    margin-bottom: 15px;
}

.form-footer-info {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    background: #f9f9f9;
    padding: 20px;
}

/* =============================================
   スマホ・タブレット向け最適化 (PC版は維持)
   ============================================= */

@media (max-width: 768px) {
    /* 1. ヘッダー周りの調整 */
    .header-container {
        padding: 0 20px;
        flex-direction: row; /* 横並びを維持 */
        justify-content: space-between;
    }

    .logo {
        font-size: 18px; /* スマホ用にロゴを縮小 */
        letter-spacing: 2px;
    }

    nav ul {
        gap: 15px; /* メニュー間隔を狭く */
    }

    nav ul li a, nav h2 {
        font-size: 14px !important; /* 文字サイズを適正化 */
        letter-spacing: 1px;
    }

    /* 2. メインビジュアル */
    .hero-section, .main-visual {
        height: 60vh !important; /* 画面高さの60%程度にしてバランスを調整 */
    }

    .hero-text h1, .overlay-text h1 {
        font-size: 1.8rem !important;
        letter-spacing: 0.1em;
    }

    .hero-text p {
        font-size: 1rem !important;
    }

    /* 3. テキストセクション（紹介文） */
    .text-section {
        padding: 60px 20px 100px; /* 余白を縮小 */
    }

    .container-narrow, .text-section .content-wrapper p {
        width: 100% !important;
        font-size: 16px !important; /* 25pxはスマホでは大きすぎるため修正 */
        line-height: 1.8;
        text-align: justify; /* 両端揃えで見やすく */
    }

    /* 4. トピックス（自動スクロール） */
    .topic-item {
        width: 280px; /* PCの450pxからスマホサイズへ */
    }

    .hero2, .hero3, .hero4, .hero11, .hero12 {
        width: 280px;
        height: 200px; /* 高さも調整 */
    }

    .topic-item p {
        font-size: 0.9rem;
    }

    /* 5. 観光案内グリッド (index3等) */
    .grid-wrapper {
        grid-template-columns: 1fr; /* 2列から1列へ */
        gap: 40px;
    }

    .grid-item img {
        height: 250px; /* 画像の高さを抑える */
    }

    /* 6. お部屋案内 (room-block) */
    .sub-hero-area {
        padding: 100px 0 40px;
    }

    .sub-hero-area h1 {
        font-size: 1.8rem;
    }

    .room-block {
        gap: 20px;
        margin-bottom: 60px;
    }

    .room-info h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .room-img img {
        height: 250px;
    }

    .description {
        font-size: 14px;
        line-height: 1.6;
    }

    .spec-list li {
        font-size: 0.85rem;
    }

    /* 7. アクセスマップ・予約 */
    .map-container, .iframe-wrapper iframe {
        height: 300px !important;
    }

    .calendar-container, .form-container {
        padding: 15px;
    }

    /* 8. フッター */
    footer {
        height: auto;
        padding: 40px 20px;
    }

    .footer-details dl {
        grid-template-columns: 80px 1fr; /* ラベル幅を狭く */
        font-size: 13px;
    }
}

/* 小さなスマホ(iPhone SE等)への追加対応 */
@media (max-width: 480px) {
    .logo {
        font-size: 16px;
    }
    
    nav ul {
        gap: 10px;
    }
    
    .section-title {
        font-size: 20px;
    }
}

select {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    font-family: inherit;
    background-color: white;
    appearance: auto;
}