@charset "UTF-8";

/*
@media screen and (max-width: 767px){
    .pc{display:none !important}.sp{display:block !important}
    }
    
    @media screen and (min-width: 768px){
    .pc{display:block !important}.sp{display:none !important}
    }

}
*/


@media screen and (max-width: 767px){
    .block_contaier {
        width: 90%;
        margin: 0px auto;
    }
    }
    
    @media screen and (min-width: 768px){
        .block_contaier {
            width: 90%;
            max-width: 1100px;
            margin: 30px auto;
        }
    }



.block_contaier img.catch {
    max-width: 800px;
    width: 100%;
}

.block_contaier img.btn {
    max-width: 300px;
    width: 100%;
}
.catch_point2_20250114 {
  background-image: url(../images/top/20250114_catch_BG@2x.jpg);
  background-image: 100% auto;
  background-repeat: repeat-y;
}


.catch_point2_20250217 {
  background-image: url(../images/top/20250217_catch_BG.jpg);
  background-image: 100% auto;
  background-repeat: repeat-y;
}





@media screen and (max-width: 767px){
    .catch_point3_20250114 {
        background-image: url(../images/top/20250114_catch3_BG@2x.jpg);
        background-repeat: repeat-y;
    }
    }
    
    @media screen and (min-width: 768px){
        .catch_point3_20250114 {
            background-image: url(../images/top/20250114_catch3_BG@2x.jpg);
            background-image: 100% auto;
        }
    }



/*マンション名箇所*/

    @media screen and (max-width: 767px){
        div.infoTIT_brock_20250114 {
            background-image: url(../images/top/20250114_catch4_BG_sp.jpg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover; /* デフォルトではブラウザ幅に合わせて調整 */
          }
        .block_contaier img.name {
            max-width: 200px;
            width: 100%;
        }
        }


 
   
    
    @media screen and (min-width: 768px){
        div.infoTIT_brock_20250114 {
            background-image: url(../images/top/20250114_catch4_BG.jpg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover; /* デフォルトではブラウザ幅に合わせて調整 */
          }
        .block_contaier img.name {
            max-width: 380px;
            width: 100%;
        }
    }

  
  @media screen and (min-width: 1920px) {
    div.infoTIT_brock_20250114 {
      background-size: 100% auto; /* 横幅が1920px以上の場合、拡大表示 */
    }
  }
  
  @media screen and (max-width: 1919px) {
    div.infoTIT_brock_20250114 {
      background-size: cover; /* それ以外ではトリミング */
    }
  }

/*インフォメーション*/
@media screen and (max-width: 767px){
    div.info_brock_20250114 {
        background-image: url(../images/top/20250114_info_BG.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover; /* デフォルトではブラウザ幅に合わせて調整 */

      }
      div.info_brock_20250114 .block_contaier{
        display: block;
        min-width: 900px;
      }

    }





@media screen and (min-width: 768px){
    div.info_brock_20250114 {
        background-image: url(../images/top/20250114_info_BG.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover; /* デフォルトではブラウザ幅に合わせて調整 */
        padding: 50px 0; /* 上下余白 */
      }

}


@media screen and (min-width: 1920px) {
div.info_brock_20250114 {
  background-size: 100% auto; /* 横幅が1920px以上の場合、拡大表示 */
}
}

@media screen and (max-width: 1919px) {
div.info_brock_20250114 {
  background-size: cover; /* それ以外ではトリミング */
}
}

.info_brock_20250114 {
    background-image: url(../images/top/20250114_info_BG.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* 背景をカバー表示 */
    padding: 50px 0; /* 上下余白 */
  }
  
  .info_box {
    background-color: rgba(255, 255, 255, 0.8); /* 背景色（透明度あり） */
    border: 1px solid #e1e1e1; /* ボーダー */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ボックス影 */
    overflow-y: auto; /* 縦スクロールを表示 */
    box-sizing: border-box; /* パディングを含めた幅と高さを適用 */
  }
  
 
  
  

/* PC用デザイン */
@media screen and (min-width: 768px) {
    .info_box {
        max-width: 600px; /* ボックスの幅 */
        max-height: 330px; /* 高さの制限 */
        margin: 0 0 30px; /* ボックスの下部余白 */
      padding: 30px; /* 全方向の内側余白を統一 */
    }
    .info_box h2 {
        font-size: 24px; /* タイトルの文字サイズ */
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
      }
      
      .info_content p {
        margin: 5px 0; /* 各段落の間隔 */
        font-size: 16px;
        line-height: 1.6; /* 行間 */
        color: #555;
      }
      
      .info_content p strong {
        font-size: 18px;
        color: #000;
      }
      

}

  

/* スマートフォン用デザイン */
@media screen and (max-width: 767px) {
    .info_box {
      max-width: 90%; /* 幅を画面幅の90%に調整 */
      max-height: 200px; /* 高さの制限 */
      margin: 0 auto 30px; /* 上下中央揃え */
      padding: 20px; /* パディングを小さく調整 */
    }

    .info_box h2 {
        font-size: 16px; /* タイトルの文字サイズ */
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
      }
      
      .info_content p {
        margin: 5px 0; /* 各段落の間隔 */
        font-size: 12px;
        line-height: 1.6; /* 行間 */
        color: #555;
      }
      
      .info_content p strong {
        font-size: 12px;
        color: #000;
      }
      
  }
  

  @media screen and (max-width: 767px){
    .block_contaier_info {
        width: 90%;
        margin: 0px auto;
    }
    }
    
    @media screen and (min-width: 768px){
        .block_contaier_info {
            width: 90%;
            max-width: 1100px;
            margin: 30px auto;
        }
    }

    /* 明朝体を全体に適用 */
.info_box {
    font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  }
  
  /* 各要素に合わせてフォントを継承 */
  .info_box h2 {
    color: #263666;
    font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  }
  
  .info_content p {
    font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  }

/*エフェクト「キラキラ」*/
.reflection{
    display:inline-block;
    position:relative;
    overflow:hidden;
    }
     
    .reflection:after {
    content:"";
    height:100%;
    width:30px;
    position:absolute;
    top:-180px;
    left:0;
    background-color: #fff;
    opacity:0;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
    }
     
    @keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
    }