@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Dancing+Script:wght@700&display=swap');

/* カスタムプロパティ（変数）の定義 */
:root {
    --primary-color: #333366; /* メインカラー */
    --secondary-color: #ff69b4; /* サブカラー */
    --backcolor: #1b1464; /* 背景色 */
    --text-color: #000; /* テキストカラー */
    --white: #fff; /* 白色 */
    --gray:#e6e6e6;
}

/* 全体のスタイル */
body {
    font-family: 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro', serif; /* フォントファミリーの設定 */
    margin: 0;/*外*/
    padding: 0;/*外*/
    background-color: var(--backcolor); /* 背景色の設定 */
    color: var(--text-color); /* テキストカラーの設定 */
    font-size: 16px;
    display: flex; /* フレックスボックスを有効化 */
    flex-direction: column; /* 縦方向に並べる */
    max-width: 100vw; /* ビューポート幅を超えないようにする */
    overflow-x: hidden; /* 横スクロールを強制的に非表示 */
}

/* ヘッダーのスタイル */
.header {
    display: flex;
    width:100%;
    height:60px;
    background-color: #fff; /* ヘッダーの背景色 */
    position: sticky; /* スクロール時に固定 */
    top: 0; /* 上部に固定 */
    z-index: 1000; /* 重なり順序の設定 */
    align-items: center;
    justify-content:space-between;
}

.head-logo {
    height: 100%;
    width: auto;
    object-fit: contain;/*アスペクト比の維持*/
}

.head-nav{
	width:40%;
	
}

.head-ul {
    list-style-type:none;
    display: flex; /* フレックスボックスの使用 */
    justify-content: right; /* 中央揃え */
    flex:1;
    margin-left:2%;
    margin-right:1%;
}

nav ul li {
    margin: 0 1rem; /* 左右マージンの設定 */
}

nav ul li a {
    color: var(--primary-color); /* テキストカラーの設定 */
    text-decoration: none; /* テキストデコレーションのリセット */
    font-weight: bold; /* フォントウェイトの設定 */
    transition: color 0.3s ease; /* カラーのトランジション設定 */
}

nav ul li a:hover {
    color: var(--secondary-color); /* ホバー時のテキストカラー */
}

/* メインコンテンツのスタイル */
main {
    width: 100%; /* 幅を画面いっぱいに設定 */
    margin: 0; /* 中央揃えを解除 */
    padding: 0; /* パディングを解除 */
}




/*トップイメージ*/
.top-img {
    position: relative;
    width: 100%;
    height: 980px;
    background: url('../images/diva_room.jpg') no-repeat center center/cover;
}


.concept-img {
    position: relative;
    display: flex; /* 中央揃えのためにFlexboxを使用 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    width: 100%;
    height: 220px;
    background: url('../images/line.png') no-repeat center center/cover;
}


.centered-text {
    position: absolute;
    top: 50%; /* 親要素の高さの50% */
    left: 50%; /* 親要素の幅の50% */
    transform: translate(-50%, -50%); /* 自身の幅と高さを調整して完全に中央へ */
    color: #e6e6e6;
    font-size: 24px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-family: 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro', serif;
    padding: 0;
    margin: 0;
    line-height: 1.2; /* 行間を小さくする */
    text-align: center; /* テキストがあれば中央揃え */
}
.centered-txet h1 {
	font-size: 2.5rem; /* 見出しのフォントサイズ */
    color: #333; /* 見出しの色 */
}

.back-white {
    background-color:#fff;
    display: grid;
    grid-template-columns: 24% 50% 24%; /* 列の幅を指定 */
    grid-template-rows: repeat(7,120px);
    text-align: center;
    padding-left: 10px;
    gap: 15px;
    padding-top:60px;
    max-width: 100vw; /* ビューポート幅を超えないようにする */
    overflow-x: hidden; /* 横スクロールを強制的に非表示 */
}
.title-area {
    grid-column:3 span;
}
.zone-title {
    line-height: 5px; /* 行間を5pxに設定 */
}

.zone-subtitle {
    line-height: 5px; /* 行間を5pxに設定 */
}

.info-area {
    display: grid;
    grid-template-columns: 20% 80%;
    border: 2px solid #666; /* 暗いグレー */
}

.info-title {
    display: grid; /* Gridレイアウトを設定 */
    place-items: center; /* 水平方向と垂直方向を中央揃え */
    text-align: center;
    color: #535248;
    font-size: 20px;
}

.info-data {
    display: grid; /* Gridレイアウトを設定 */
    place-items: center; /* 水平方向と垂直方向を中央揃え */
    justify-items: start; /* 子要素を左揃え */
    color: #000000;
    font-size: 25px;
    padding-left: 10%;
}

.info-data-2 {
    display: grid; /* Gridレイアウトを設定 */
    grid-template-rows: 60px;
    justify-items: start; /* 子要素を左揃え */
    color: #000000;
    font-size: 20px;
    padding-left: 10%;
}

.align-bottom {
    align-self: end; /* 垂直方向に下詰め */
}

.align-top {
    align-self: start; /* 垂直方向に上詰め */
}


.back-gray {
    background-color:#e4e0e0;
    display: flex;
    flex-direction: column;
    gap: 10px; /* 要素間の隙間を設定（任意） */
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

.map {
    padding-top: 30px;
    display: flex; /* Flexbox を有効化 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
}

.g-map {
    position: relative;
    width: 80%; /* スライダーの幅 */
    height: 800px; /* 高さを固定 */
    margin: 0 auto; /* 中央揃え */
    overflow: hidden; /* 枠外の画像を隠す */
    border: 0;
}

.price {
    background-color:#1b1464;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px; /* 要素間の隙間を設定（任意） */
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

.gallery {
    background-color:#fff;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* スライダー全体のコンテナ */
.slider-container {
    position: relative;
    width: 80%; /* スライダーの幅 */
    height: 800px; /* スライダーの高さを固定 */
    margin: 0 auto; /* 中央揃え */
    overflow: hidden; /* スライダー枠外を隠す */
}

/* スライダー全体のコンテナ */
.slider-container {
    position: relative;
    width: 80%; /* スライダーの幅 */
    height: 800px; /* 高さを固定 */
    margin: 0 auto; /* 中央揃え */
    overflow: hidden; /* 枠外の画像を隠す */
}

/* スライダー内の画像群 */
.slider {
    display: flex; /* 横並びに配置 */
    transition: transform 0.5s ease; /* スライドアニメーション */
    width: 300%; /* 画像の枚数に合わせて幅を設定 */
}

/* 画像スタイル */
.slider img {
    width: 100%; /* スライダー枠内の幅にフィット */
    height: 100%; /* スライダー枠内の高さにフィット */
    object-fit: contain; /* 画像全体を表示（切れないように） */
    flex-shrink: 0; /* 縮小を防ぐ */
}

/* スライドボタンのスタイル */
button {
    position: absolute; /* ボタンをスライダーの上に配置 */
    top: 50%; /* 上下中央に配置 */
    transform: translateY(-50%); /* 完全に中央揃え */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
    color: white; /* ボタンの文字色 */
    border: none; /* 枠線をなくす */
    padding: 10px 20px; /* ボタンサイズ */
    cursor: pointer; /* ホバー時にカーソルを変える */
    z-index: 10; /* ボタンを前面に表示 */
}

/* 左ボタン */
button.prev {
    left: 10px; /* 左端からの位置 */
}

/* 右ボタン */
button.next {
    right: 10px; /* 右端からの位置 */
}


@media (max-width: 1200px) {
    body {
        font-family: 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro', serif; /* フォントファミリーの設定 */
        margin: 0;
        padding: 0;
        background-color: var(--backcolor); /* 背景色の設定 */
        color: var(--text-color); /* テキストカラーの設定 */
        font-size: 12px;
        width: 100%;
    }

	/* ヘッダーのスタイル */
    .header {
        background-color: #FFFFFF; /* ヘッダーの背景色 */
        padding: 0rem; /* パディングの設定 */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* ボックスシャドウの設定 */
        position: static; /* 固定を解除 */
        height:80px;
    }
    
    .head-ul {
        flex-direction: column; /* 縦並びに変更 */
        justify-content: flex-start; /* 上揃え（必要に応じて変更） */
        align-items: flex-end; /* 左揃え（必要に応じて変更） */
        padding-right: 1rem;
        padding-top: 3px;
        padding-bottom:3px;
    }

    .top-img {
        position: relative;
        width: 100%;
        height: 480px;
        background: url('../images/diva_room.jpg') no-repeat center center/cover;
    }

    .concept-img {
        position: relative;
        display: flex; /* 中央揃えのためにFlexboxを使用 */
        justify-content: center; /* 水平方向の中央揃え */
        align-items: center; /* 垂直方向の中央揃え */
        width: 100%;
        height: 160px;
        background: url('../images/line.png') no-repeat center center/cover;
    }
    
    
    .centered-text {
        position: absolute;
        top: 50%; /* 親要素の高さの50% */
        left: 50%; /* 親要素の幅の50% */
        transform: translate(-50%, -50%); /* 自身の幅と高さを調整して完全に中央へ */
        color: #e6e6e6;
        font-size: 12px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        font-family: 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro', serif;
        padding: 0;
        margin: 0;
        line-height: 1.2; /* 行間を小さくする */
        text-align: center; /* テキストがあれば中央揃え */
        width: 100%;
    }

    .centered-txet h1 {
        font-size: 1%; /* 見出しのフォントサイズ */
        color: #333; /* 見出しの色 */
    }

    .back-white {
        background-color:#fff;
        display: grid;
        grid-template-columns: 0.5% 90% 5%; /* 列の幅を指定 */
        grid-template-rows: repeat(7,120px);
        text-align: center;
        gap: 15px;
        padding-top:60px;
        max-width: 100vw; /* ビューポート幅を超えないようにする */
        overflow-x: hidden; /* 横スクロールを強制的に非表示 */
    }

    .info-area {
        display: grid;
        grid-template-columns: 20% 80%;
        border: 2px solid #666; /* 暗いグレー */
    }
    
    .info-title {
        display: grid; /* Gridレイアウトを設定 */
        align-items: center; /* 垂直方向を中央揃え */
        justify-items: start; /* 水平方向を左揃え */
        padding-left: 14%; /* 左側の余白 */
        text-align: start; /* テキストの左揃え */
        color: #535248;
        font-size: 14px;
    }
    
    .info-data {
        display: grid; /* Gridレイアウトを設定 */
        place-items: center; /* 水平方向と垂直方向を中央揃え */
        justify-items: start; /* 子要素を左揃え */
        color: #000000;
        font-size: 14px;
        padding-left: 10%;
    }
    
    .info-data-2 {
        display: grid; /* Gridレイアウトを設定 */
        grid-template-rows: 60px;
        justify-items: start; /* 子要素を左揃え */
        text-align: left;
        color: #000000;
        font-size: 13px;
        padding-left: 10%;
    }
    
    .align-bottom {
        align-self: end; /* 垂直方向に下詰め */
    }
    
    .align-top {
        align-self: start; /* 垂直方向に上詰め */
    }

    .map {
        padding-top: 30px;
        display: flex; /* Flexbox を有効化 */
        justify-content: center; /* 水平方向の中央揃え */
        align-items: center; /* 垂直方向の中央揃え */
    }
    
    .g-map {
        position: relative;
        width: 80%; /* スライダーの幅 */
        height: 400px; /* 高さを固定 */
        margin: 0 auto; /* 中央揃え */
        overflow: hidden; /* 枠外の画像を隠す */
        border: 0;
    }
    
    .price {
        background-color:#1b1464;
        color: #fff;
        display: flex;
        flex-direction: column;
        gap: 10px; /* 要素間の隙間を設定（任意） */
        text-align: center;
        padding-top: 60px;
        padding-bottom: 60px;
        height: 600px;
    }

    .price-menue {
        position: absolute;
        transform: translate(-50%, -0%); /* 自身の幅と高さを調整して完全に中央へ */
        width: 70%;
        object-fit: contain; /* 画像全体を表示（切れないように） */
        flex-shrink: 0; /* 縮小を防ぐ */
        height: 500px;
    }

    .gallery {
        background-color:#fff;
        text-align: center;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    /* スライダー全体のコンテナ */
    .slider-container {
        position: relative;
        width: 80%; /* スライダーの幅 */
        height: 500px; /* スライダーの高さを固定 */
        margin: 0 auto; /* 中央揃え */
        overflow: hidden; /* スライダー枠外を隠す */
    }
    
    /* スライダー全体のコンテナ */
    .slider-container {
        position: relative;
        width: 80%; /* スライダーの幅 */
        height: 500px; /* 高さを固定 */
        margin: 0 auto; /* 中央揃え */
        overflow: hidden; /* 枠外の画像を隠す */
    }
    
    /* スライダー内の画像群 */
    .slider {
        display: flex; /* 横並びに配置 */
        transition: transform 0.5s ease; /* スライドアニメーション */
        width: 300%; /* 画像の枚数に合わせて幅を設定 */
    }
    
    /* 画像スタイル */
    .slider img {
        width: 100%; /* スライダー枠内の幅にフィット */
        height: 100%; /* スライダー枠内の高さにフィット */
        object-fit: contain; /* 画像全体を表示（切れないように） */
        flex-shrink: 0; /* 縮小を防ぐ */
    }
    
    /* スライドボタンのスタイル */
    button {
        position: absolute; /* ボタンをスライダーの上に配置 */
        top: 20%; /* 上下中央に配置 */
        transform: translateY(-50%); /* 完全に中央揃え */
        background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
        color: white; /* ボタンの文字色 */
        border: none; /* 枠線をなくす */
        padding: 10px 20px; /* ボタンサイズ */
        cursor: pointer; /* ホバー時にカーソルを変える */
        z-index: 10; /* ボタンを前面に表示 */
    }
    
    /* 左ボタン */
    button.prev {
        left: 10px; /* 左端からの位置 */
    }
    
    /* 右ボタン */
    button.next {
        right: 10px; /* 右端からの位置 */
    }

    .slider img {
        width: 100%; /* スライダー枠内の幅にフィット */
        height: 100%; /* スライダー枠内の高さにフィット */
        object-fit: contain; /* 画像全体を表示（切れないように） */
        object-position: top; /* 画像を上寄せ */
        flex-shrink: 0; /* 縮小を防ぐ */
    }
    
}