#News .main-contents {
    max-width: 700px;
    width: 100%;
    height: 100%;
}

.news1 {
    margin-top: 6rem;
}

#News .news-title {
    color: rgb(95, 95, 95);
    display: flex;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: left;
    border-bottom: 1px solid rgb(95, 95, 95);
    ;
    width: 100%;
    padding-bottom: 1.5rem;
}

#News .news-date {
    color: rgb(95, 95, 95);
    margin-right: 20px;
}

#News .news-description {
    margin-top: 2rem;
    margin-bottom: 30px;
    font-size: 1rem;
    font-weight: 300;
    line-height: 2.5rem;
    letter-spacing: 2px;
    text-align: left;
    padding: 0;
}

.news-img {
    max-width: 700px;
    width: 100%;
    height: 222px;
    /* コンテナの高さを統一 */
    object-fit: cover;
    /* 画像をコンテナにフィットさせてトリミング */
    position: relative;
    gap: 34px;
    display: flex;
}

/* ニュース記事の写真のキャプション */
#News figcaption {
    text-align: left;
    font-size: 0.8rem;
    margin-top: 0.8rem;
}

.news4 img  {
    max-width: 700px;
    width: 100%;
    max-height: 550px;
    height: 130%;
}
.news4 .news4-img-left  {
    width: 42%;
   
}

.news3 .news-img img {
    max-width: 700px;
    width: 100%;
    height: 120%;
}


/* news2 の画像スタイルを調整 */
.news2 .news-img {
    height: 450px;
    /* 左側の画像の高さ */
    overflow: hidden;
}

.news2 .news-img-left {
    width: 50%;
    /* 左側の幅を50%に設定 */
}

.news2 .news-img-left img {
    width: 140%;
    height: 140%;
    object-fit: cover;
    /* 画像をコンテナにフィットさせてトリミング */
    margin-top:-100px ;
}

  /* 右側の画像エリア */
.news2 .news-img-right {
    width: 50%;
    /* 右側の幅を50%に設定 */
    display: flex;
    flex-direction: column;
    gap: 34px;
    /* 画像間の隙間 */
    height: 100%;
    /* 親コンテナの高さを継承 */
    overflow: hidden;
    /* はみ出した部分を隠す */
}

  /* 右側の通常画像スタイル */
.news2 .news-img-right img.news-img2-2 {
    width: 100%;
    height: 222px;
    /* 各右側画像の高さ */
    object-fit: cover;
    /* 画像をコンテナにフィットさせてトリミング */
}

  /* ラッパーコンテナのスタイル */
.news2 .news-img-right .img-wrapper1,
.news2 .news-img-right .img-wrapper2 {
    width: 100%;
    height: 222px;
    /* 各右側画像の高さ */
    overflow: hidden;
    /* はみ出した部分を隠す */
    position: relative;
    /* 子要素の絶対配置の基準 */
}

   /* 右側画像-上（news-img2-2）のスタイル */
.news2 .news-img-right .img-wrapper1 img.news-img2-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 160%;
    /* 高さを140%に設定（調整可能） */
    transform: translate(-50%, -50%);
    /* 画像を中央に配置 */
    object-fit: cover;
    /* 画像をコンテナにフィットさせてトリミング */
   
}

    /* 右側画像⁻下（news-img2-3）のスタイル */
.news2 .news-img-right .img-wrapper2 img.news-img2-3 {
    position: relative;
    top: 50%;
    left: 50%;
    width: auto;
    height: 135%;
    /* 高さを140%に設定（調整可能） */
    transform: translate(-50%, -50%);
    /* 画像を右に10pxずらす */
    object-fit: cover;
    /* 画像をコンテナにフィットさせてトリミング */
}

.news2 .news-img-right .img-wrapper2 img.news-img2-3 img{
    left: 55%;
}

.news1 .news-img img  {
    max-width: 333px;
    width: 100%;
    height: auto;
}