/* フォント設定 */

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

html {
            font-size: 16px; /* 基準となるフォントサイズを16pxに設定 */
            letter-spacing:0.1rem;
        }
        
body {
       font-size: 1rem; /* 1remは16px */
       margin: 0;
       font-family: "Noto Sans JP";
       padding-top: 120px; /* ヘッダーの高さ分余白を追加 */
       
    }
        
        h1 {
            font-size: 3rem; /* 2remは32px */
            font-family: 'Noto Serif JP', sans-serif;
            font-weight: 600;
            margin: 0;
            padding: 0;
            }

        h2 {
            font-size: 2rem; /* 2remは32px */
            font-family: 'Noto Serif JP', sans-serif;
            font-weight: 600;
            letter-spacing:0.5rem;
            margin: 0;
            padding: 1rem;
        }

        h3 {
            font-size: 1.8rem; /* 2remは32px */
            font-family: 'Noto Serif JP', sans-serif;
            font-weight: 500;
            margin: 0;
            padding: 1rem;
        }

        h4 {
            font-size: 1.3rem; /* 2remは32px */
            font-family: 'Noto Serif JP', sans-serif;
            font-weight: 500;
            margin: 0;
            padding: 1rem;
        }

        h5 {
            font-size: 1.2rem; /* 2remは32px */
            font-family: 'Noto Serif JP', sans-serif;
            font-weight: 500;
            margin: 0;
            padding: 1rem;
            line-height: 2.5rem;
        }
                
        p {
            font-size: 1.2rem; /* 1.2remは19.2px */
            font-family: "Noto Sans JP";
            font-weight: 400;
            line-height: 2.5rem;
            margin: 0;
            padding: 0;
        }
        
        h1, h2, h3, h4 ,h5, p {
            color: #001960;
        }

        /*ーーーーーーーーーーーーーー 改行設定ーーーーーーーーーーーーーー */
        .line-break {
            display: none; /* PCでは非表示に */
        }

        /* スマホ表示の場合（768px以下） */
        @media (max-width: 768px) {
            .line-break {
                display: block; /* スマホでは表示して改行を有効に */
            }
        }


        /*ーーーーーーーーーーーーーー ヘッダーーーーーーーーーーーーーーー */
        header {
            position: fixed; /* 画面に固定 */
            top: 0; /* 上部から0px */
            left: 0; /* 左端から0px */
            width: 100%; /* 幅を100%に */
            z-index: 10; /* ヘッダーが他の要素よりも前に表示されるようにする */
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0;
            padding: 0px;
            height: 125px;
            background-color: #FFF;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影をつけて浮かせる */
            
        }

        .logo {
            height: 65px;
            padding-left: 20px;
        }


        /* メニューのスタイル（PC版） */
        .menu {
            display: flex;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .menu li {
            margin: 0 15px;
        }

        .menu a {
            color: #001960;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 500;
        }

        .menu a:hover {   
            color: #35509b
        }

        /* ハンバーガーメニューのスタイル */
        .menu-toggle {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 50px;
            height: 30px;
            cursor: pointer;
            padding-right: 20px;
        }

        .bar {
            width: 50px;
            height: 4px;
            background-color: #001960;
            border-radius: 2px;
            transition: all 0.3s ease;
        }




      /*ーーーーーーーーーーーーーー スライドショーーーーーーーーーーーーーーーー */
        .slider {
            z-index: 1; /* スライドショーはヘッダーの下に表示 */
            position: relative;
            width: 100%;
            height: 550px;
            overflow: hidden;
        }

        .slides {
            display: flex;
            transition: transform 2s ease-in-out;
        }

        .slide {
            flex: 0 0 100%;
            height: 550px;
            position: relative;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ロゴ固定 */
        .slider-logo {
            position: absolute;
            width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            padding: 10px 20px;
            border-radius: 5px;
            text-align: center;
        }

        .slider-logo img {
            width: 300px;
            height: auto;
         }

        .slider-text {
            text-align: center;
            color: #fff;
        }


        /*ーーーーーーーーーーーーーー セクション共通ーーーーーーーーーーーーーーー */
        
       h2.section-title-h2 {
            margin: 0 0 2rem 0;
            padding: 0 0 0.5rem 0.5rem;
            border-bottom: #001960 2px solid;
            display: inline-block;
        }
        p.section-title-eng {
            font-family: 'Noto Serif JP', sans-serif;
        }
        
        #top-about-tokyo-estate, 
        #top-our-properties,
        #top-access,
        #company-profile {
            text-align: center;
            margin: 0;
            padding: 100px 0;        
        }
        #top-about-tokyo-estate {
            padding: 100px 0 40px 0;
        }

        .button-blue {
            display: inline-block;
            margin: 20px 0;
            padding: 20px 20%; /* ボタンの内側の余白 */
            background-color: #15a9df; /* ボタンの背景色 */
            color: #fff; /* テキストの色 */
            border: none; /* ボーダーを削除 */
            border-radius: 0; /* 四角形にする */
            font-size: 16px; /* フォントサイズ */
            font-weight: bold; /* フォントの太さ */
            text-align: center; /* テキストを中央揃え */
            text-decoration: none; /* テキストの下線を削除 */
            cursor: pointer; /* カーソルをポインターにする */
            transition: background-color 0.3s ease, transform 0.3s ease; /* ホバー時のアニメーション */
        }
        
        .button-blue:hover {
            background-color: #00AFEC; /* ホバー時の色 */
            transform: scale(1.05); /* 少し大きくする */
        }
        
        .button-blue:active {
            background-color: #001960; /* クリック時の色 */
            transform: scale(0.95); /* 少し縮む */
        }

         /*ーーーーーーーーーーーーーー 事業紹介ーーーーーーーーーーーーーーー */
        
         #top-about-tokyo-estate {
            background-color: #EDFBFF;           
        }


        .about-top,
        .about-baibai,
        .about-consulting,
        .about-resort,
        .about-abroad {
            opacity: 0; /* 初期状態で非表示 */
            transform: translateY(-60px); /* 少し下にずらす */
            transition: opacity 2s ease, transform 1s ease; /* なめらかなアニメーション */


        }

        .about-top.visible,
        .about-baibai.visible,
        .about-consulting.visible,
        .about-resort.visible,
        .about-abroad.visible {
            opacity: 1; /* 表示 */
            transform: translateY(0); /* 元の位置に */
        }

        .about-top {
            padding: 0 0 80px 0;
            line-height: 3rem;
        }
        
        .about-baibai-banner,
        .about-consulting-banner,
        .about-resort-banner,
        .about-abroad-banner {
            width: 100%;               /* 横幅いっぱい */
            height: 390px;             /* 固定の高さ */
            background-size: cover;    /* 画像をコンテナにフィットさせる */
            background-position: center; /* 中央に配置 */
            background-repeat: no-repeat; /* 繰り返しを無効化 */
            display: flex;             /* フレックスボックスを有効化 */
            justify-content: center;   /* 横方向の中央揃え */
            align-items: center;       /* 縦方向の中央揃え */           
            text-align: center;
        }

        .about-banner-h3 {
            color:#fff;
            font-size: 2.2rem;           /* フォントサイズ */
        
        }
        
        .about-txt {
            margin: 2rem 1rem 5rem 1rem;
        }

        .about-baibai-banner {
            background-image: url('../img/about_baibai.png'); /* 背景画像を設定 */
        }
        .about-consulting-banner {
            background-image: url('../img/about_consulting.png'); /* 背景画像を設定 */
        }
        .about-resort-banner {
            background-image: url('../img/about_resort.png'); /* 背景画像を設定 */
        }
        .about-abroad-banner {
            background-image: url('../img/about_abroad.png'); /* 背景画像を設定 */
        }


         /*ーーーーーーーーーーーーーー アクセスーーーーーーーーーーーーーーー */
         #top-access {
            background-color: #EDFBFF;
        }

        #top-access .adress {
            margin: 2rem;
            font-size: 1rem;
            line-height: 1.8rem;
        }

        .googlemap iframe {
            width: 90%;
            height: 500px;
        }

         /*ーーーーーーーーーーーーーー フッターーーーーーーーーーーーーーーー */
        footer {
            background-color: #15a9df;
            margin: 0;
            padding: 80px 0;
            text-align: center;
        }

        footer p {
            font-size: small;
            color: #FFF;
        }

          /*ーーーーーーーーーーーーーー 下層ページ共通ーーーーーーーーーーーーーーー */

        .page-title {
            text-align: center;
            background-color: #15a9df;;
            padding: 50px;
          }

        .page-title-eng {
            font-family: 'Noto Serif JP', sans-serif;
            color: #FFF;

          }
        .page-title-h2 {
            color: #FFF;
            margin: 0;
            padding: 0 0 0.5rem 0;
            display: inline-block;

          }

          #company-profile-contents, #our-properties-contents {
            margin: 0 auto 200px auto;
            padding: 0;
            max-width: 1000px; 
        }

          /*ーーーーーーーーーーーーーー 会社概要ーーーーーーーーーーーーーーー */

        #company-profile {
          
            }

        

        #company-profile-message {
            margin: 0 0 150px 0;

        }


        .message-txt {
            margin: 50px 0 0 0;
            text-align: left;
            font-size: 1.2rem;
            font-family: 'Noto Serif JP', sans-serif;
            line-height: 3rem;
            }
        
        #company-profile-outline {
            text-align: left;
            line-height: 2rem;
            
        }
        
        #company-profile-outline table {
            width: 100%;
            border-collapse: separate; /* セル間にスペースを設ける */
            border-spacing: 5px; /* セル間隔を10pxに設定 */
            
        }

        #company-profile-outline th, td {
         
        

        }

        #company-profile-outline th {
            width: 20%;
            text-align: center;
            color: #FFF;
            background-color: #15a9df;
            padding: 1rem;
        }

        #company-profile-outline td {
            padding: 2rem;
            background-color: #f6f6f6;
        }
        .torihikisaki {
            display: flex;
            gap: 50px;
            font-size: 0.9rem;
            letter-spacing: normal;
           
        }

        .torihikisaki-list, .torihikisakibank-list {
            list-style-type: none; /* デフォルトのマーカーを無効化 */
            padding: 0;
        }
        .torihikisaki-list li::before, .torihikisakibank-list  li::before {
            content: "●"; /* 頭に●をつける */
            font-size: 0.5rem;
            vertical-align: top;
            color: #a4a4a4; /* ●の色 */
            display: inline-block;
            width: 2em; /* マーカーの幅を調整 */
            
        }

         .torihikibank {
            display: flex;
            gap: 100px;
            letter-spacing: normal;
           
        }

        /*ーーーーーーーーーーーーーー 所有物件ーーーーーーーーーーーーーーー */

        .our-properties-top {
            text-align: center;
            margin: 100px 0 0 0;
           
            
        }
        .our-properties-top p {
            font-family: 'Noto Serif JP', sans-serif;

        }

        .properties-info {
            margin: 100px auto 100px auto;
            width: 100%;
        }

        .properties-info h3 {
            border-left: 0.5rem solid #15a9df; 
            margin: 0 0 20px 0;
            padding: 0 0 0 0.5rem;

        }

        /*ーーーーーーーーーーーーーー 所有物件ギャラリーーーーーーーーーーーーーーーー */

        .image-gallery {
            width: 100%;
            margin: 20px auto;
            text-align: center;
            position: relative;
        }
        
        .main-image {
            position: relative;
        }
        
        .main-image img {
            width: 100%;
            max-height: 1000px;
            object-fit: contain;
            border: 2px solid #ddd;
            margin-bottom: 10px;
        }
        
        .slide-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            font-size: 18px;
            z-index: 10;
        }
        
        .slide-button.prev {
            left: 10px;
        }
        
        .slide-button.next {
            right: 10px;
        }
        
        .thumbnails {
            display: flex;
            justify-content: center;
            gap: 10px;
            
           
        }
        
        .thumbnail {
            max-width: 100px;
            height: 70px;
            object-fit: cover;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border 0.3s;
        }
        
        .thumbnail:hover,
        .thumbnail.active {
            border: 2px solid #007BFF;
        }


        /*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー スマホ用設定ーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
        @media screen and (max-width: 768px) {

            h2 {
                font-size: 1.7rem;
                line-height: 2.3rem;                
            }

            h3 {
                font-size: 1.4rem;
                line-height: 2.3rem;                
            }
    
            h4 {
                font-size: 1rem; 
                line-height: 2rem;
            }
            h5 {
                font-size: 1rem; 
                line-height: 2rem;
                padding: 0;
            }


            /* body */
                    
            body {
                padding-top: 80px; /* ヘッダーの高さ分余白を追加 */
            }

            
            /* ヘッダー */
            header {
                padding: 0;
                height: 80px;
            }

            /* ヘッダーロゴ */
           .logo {
               height: 45px;
               padding-left: 10px;
           }
        
            #top-about-tokyo-estate, 
            #top-our-properties,
            #top-access {
            text-align: center;
            margin: 0;
            padding: 50px 0;        
            }
            
  
        /*ーーーーーーーーーーーーーー ハンバーガーメニューーーーーーーーーーーーーーー */

           /* ハンバーガーメニューを表示 */
           .menu-toggle {
               display: flex;
               justify-content: space-between;
               z-index: 2000; /* ハンバーガートグル前面に来るように */
           }

           /* メニューはデフォルトで非表示に */
           .menu {
               z-index: 1000; /* メニューが前面に来るように */
               display: none;
               position: fixed; /* 画面に固定 */
               top: 0;
               right: -100%; /* 初期位置は画面外 */
               width: 100%;
               height: 100vh;
               
               background-color: rgba(0, 142, 191, 0.9);
               box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
               transition: right 0.5s ease; /* スライドのアニメーション */
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
              
           }

           /* メニューが開いているときのバーのスタイル */
           .menu-toggle.open .bar:nth-child(1) {
               transform: rotate(45deg);
               position: relative;
               top: 17px;
           }

           .menu-toggle.open .bar:nth-child(2) {
               opacity: 0;
           }

           .menu-toggle.open .bar:nth-child(3) {
               transform: rotate(-45deg);
               position: relative;
               top: -8px;
           }

           .menu.open {
               display: flex; 
               right: 0; /* メニューが開いたときに画面にスライドイン */
           }

           /* メニューアイテムのスタイル */
           .menu li {
               padding: 20px;
               text-align: center;
           }

           .menu a {
               text-decoration: none;
               color: #fff;
               font-size: 1.5rem;
           }

           .menu a:hover {
                color: #fff;
           }

        /*ーーーーーーーーーーーーーー スライドーーーーーーーーーーーーーーー */
            .slider-logo img {
                width:70%;               
            }

            .slider-text {
                font-size: 1.2rem;
                padding:2rem;
            }

        /*ーーーーーーーーーーーーーー 各事業内容ーーーーーーーーーーーーーー */
            .about-baibai-banner,
            .about-consulting-banner,
            .about-resort-banner,
            .about-abroad-banner {
                width: 100%;               /* 横幅いっぱい */
                height: 150px;             /* 固定の高さ */
            }

            #top-about-tokyo-estate {
                padding: 50px 0 20px 0;
            }
            .about-banner-h3 {
                font-size: 1.6rem;           /* フォントサイズ */
            }
            .section-title-eng {
                font-size: 0.8rem;
            }

            .about-txt {
                margin: 1rem 1rem 2.5rem 1rem;
                font-size: 1rem;
                line-height: 1.7rem; 
            }
        
         /*ーーーーーーーーーーーーーー 各事業内容ーーーーーーーーーーーーーー */
            #top-access .adress {
                margin: 1rem;
                font-size: 0.9rem;
                line-height: 1.6rem;
            }

         /*ーーーーーーーーーーーーーー セクション共通ーーーーーーーーーーーーーー */
            #top-about-tokyo-estate, 
            #top-our-properties,
            #top-access,
            #company-profile {
                
                padding: 50px 0;        
            }
           /*ーーーーーーーーーーーーーー 下層ページ共通ーーーーーーーーーーーーーー */

            .page-title {
                text-align: center;
                background-color: #15a9df;;
                padding: 10px;
                margin: 0;
            }

            .page-title-eng {
                font-family: 'Noto Serif JP', sans-serif;
                color: #FFF;

            }
            .page-title-h2 {
                color: #FFF;
                margin: 0;
                padding: 0 0 0.5rem 0;
                display: inline-block;

            }

            h2.section-title-h2 {
                margin: 0 0 1rem 0;
                
            }

            #company-profile-contents, #our-properties-contents {
                margin: 0 auto 10px auto;
                padding: 0 10px;
                max-width: 1000px; 
            }

        /*ーーーーーーーーーーーーーー 会社概要ーーーーーーーーーーーーーー */
           
                #company-profile-message {
                    margin: 0 0 70px 0;

                }
                .message-txt {
                margin: 10px 0 0 0;
                padding: 0 ;
                font-size: 1.1rem;
                line-height: 2rem;
                }
            
                #company-profile-outline table {
                   margin: 0;
                   padding: 0;
                   width: 100%;
                   border-spacing: 0px;
                    
                }
        
                #company-profile-outline th, td {
                    margin: 0;
                   padding: 0;
                }
                #company-profile-outline tr {
                    
                    padding: 0;
                    margin: 0;
                    border-spacing: 0px;

                   
                }
                #company-profile-outline th {
                    width: 100%;
                    display: block;
                    padding: 0;
                    margin: 0;
                    border-spacing: 0px;
                }
        
                #company-profile-outline td {
                    
                    display: block;
                    border-spacing: 0px;
                    padding: 1rem;
                    margin: 0;
                   
                }
                .torihikisaki {
                    display: block;
                    gap: 0px;
                    font-size: 0.9rem;
                    letter-spacing: normal;
                    line-height: 1.5rem;
                   
                }

                .torihikisaki ul {
                    margin: 0;
                    padding: 0;
                }
        
                .torihikisaki-list, .torihikisakibank-list {
                    list-style-type: none; /* デフォルトのマーカーを無効化 */
                    padding: 0;
                }
                .torihikisaki-list li::before, .torihikisakibank-list  li::before {
                    content: "●"; /* 頭に●をつける */
                    font-size: 0.5rem;
                    vertical-align: top;
                    color: #a4a4a4; /* ●の色 */
                    display: inline-block;
                    width: 2em; /* マーカーの幅を調整 */
                    
                }
        
                 .torihikibank {
                    display: block;
                    gap: 0px;
                    letter-spacing: normal;
                   
                }

                 .torihikibank ul {
                    margin: 0;
                    padding: 0;
                }
        


        /*ーーーーーーーーーーーーーー 所有物件ーーーーーーーーーーーーーー */

        .image-gallery .main-image img {
            width: 100%; /* 画像を画面幅に合わせる */
        }

        .properties-info h3 {
            font-size: 1.3rem;
        }

        .thumbnails {
            display:block;
            text-align: left;
        }
        
        .thumbnail {
            height: 50px;
        }
        /*ーーーーーーーーーーーーーー フッターーーーーーーーーーーーーーーー */
        footer {
            padding: 30px 0;
        }
        footer p {
            font-size: 0.6rem;
        }

       }