@charset "utf-8";
/* CSS Document */

.main-content .test img {
    width: 100%;
}

      .cls-1 {
        fill: #231815;
      }

      .cls-1, .cls-2, .cls-3 {
        stroke-width: 0px;
      }

      .cls-4 {
        isolation: isolate;
      }

      .cls-2 {
        fill: #182980;
      }

      .cls-3 {
        fill: #c40012;
      }

      .cls-5 {
        mix-blend-mode: multiply;
      }

      .fade-in-up {
        opacity: 0;
        animation: fadeInUp 0.5s ease forwards;
      }

      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

.main-content .swiper-slide img.pc {
    display: inherit;
}
.main-content .swiper-slide img.sp {
    display: none;
}

@media only screen and (max-width: 480px) {
.main-content .swiper-slide img.pc {
    display: none;
}
.main-content .swiper-slide img.sp {
    display: inherit;
}
}



.main-content .contentArea {
    margin: 82px auto 0 auto;
    background-image: url("../img/illust_bird.png"), url("../img/illust_tree1.png"), url("../img/illust_tree2.png");
    background-position: top right 167px, bottom left, bottom right 42px;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 46px, 82px, 53px; /* 画像サイズの調整 */
    background-origin: padding-box; /* クリッピングを調整 */
}

.main-content .long {
    width: 100%; /* レスポンシブに対応するため幅を100%に設定 */
    max-width: 100%; /* 最大幅を設定 */
    margin: 82px auto 0 auto;
    background-image: url("../img/illust_bird.png"), url("../img/illust_tree1.png"), url("../img/illust_tree2.png");
    background-position: top right calc((100% - 1290px) / 2 + 167px), 
                        bottom left calc((100% - 1290px) / 2 + 42px), 
                        bottom right calc((100% - 1290px) / 2 + 72px);
    -webkit-background-position: top right calc((100% - 1290px) / 2 + 167px), 
                        bottom left calc((100% - 1290px) / 2 + 42px), 
                        bottom right calc((100% - 1290px) / 2 + 72px);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 46px, 82px, 53px; /* 画像サイズの調整 */
    background-origin: padding-box; /* クリッピングを調整 */
}


.main-content .contentArea .contentTitle h2 {
    position: relative;
    font-size: 1rem;
    line-height: 1;
    font-family: "Shuei MaruGo L";
    color: #208180;
    margin: 20px 0 55px 0;
    padding:5px 0 0 20px;
}

.main-content .contentArea .contentTitle h2:before {
    content: '•';
    color: #FFBC1D;
    font-size: 2em;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
}

.main-content .long .contentTitle {
    max-width: 1000px; /* 最大幅を設定 */
    margin: 0px auto 0 auto;
}


.main-content .contentArea .contentTitle p {
    position: relative;
    font-size: 3.3125rem;
    line-height: 1;
    font-family: "Shuei MaruGo B";
    color: #000000;
    display: inline;
}

.main-content .contentArea .contentTitle p span {
    position: absolute;
    top: 12px;
    right: 3px;
    font-size: 0;
    line-height: 1;
    
    
}


.main-content .contentArea .contentTitle p img {
    width: 15px;
}

@media only screen and (max-width: 999px) {
.main-content .contentTitle {
    max-width: 1000px; /* 最大幅を設定 */
    margin: 0px 5vw 0 5vw;
}

.main-content .long .contentTitle {
    max-width: 1000px; /* 最大幅を設定 */
    margin: 0px 5vw 0 5vw;
}
}

@media only screen and (max-width: 480px) {
.main-content .contentArea {
    width: 100%; /* レスポンシブに対応するため幅を100%に設定 */
    max-width: none; /* 最大幅を設定 */
    margin: 0 auto 0 auto;
    background-image: url("../img/illust_bird.png"), url("../img/illust_tree1.png"), url("../img/illust_tree2.png");
    background-position: top right calc(15 * (100 / 430) * 1vw), bottom left calc(15 * (100 / 430) * 1vw), bottom right calc(15 * (100 / 430) * 1vw);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: calc(43 * (100 / 430) * 1vw), calc(68 * (100 / 430) * 1vw), calc(42 * (100 / 430) * 1vw); /* 画像サイズの調整 */
    background-origin: padding-box; /* クリッピングを調整 */
}

.main-content .long {
    width: 100%; /* レスポンシブに対応するため幅を100%に設定 */
    max-width: 100%; /* 最大幅を設定 */
    margin:  calc(20 * (100 / 430) * 1vw) auto 0 auto;
    background-image: url("../img/illust_bird.png"), url("../img/illust_tree1.png"), url("../img/illust_tree2.png");
    background-position: top right calc(15 * (100 / 430) * 1vw), 
                        bottom left calc(15 * (100 / 430) * 1vw), 
                        bottom right calc(13 * (100 / 430) * 1vw);
    -webkit-background-position: top right calc(15 * (100 / 430) * 1vw), 
                        bottom left calc(15 * (100 / 430) * 1vw), 
                        bottom right calc(13 * (100 / 430) * 1vw);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size:  calc(43 * (100 / 430) * 1vw), calc(68 * (100 / 430) * 1vw), calc(42 * (100 / 430) * 1vw); /* 画像サイズの調整 */
    background-origin: padding-box; /* クリッピングを調整 */
}

.main-content .contentArea .contentTitle h2 {
    position: relative;
    font-size: 1rem;
    line-height: 1;
    font-family: "Shuei MaruGo L";
    color: #208180;
    margin: calc(10 * (100 / 430) * 1vw) 0 calc(40 * (100 / 430) * 1vw) 0;
    padding:calc(5 * (100 / 430) * 1vw) 0 0 calc(20 * (100 / 430) * 1vw);
}

.main-content .contentArea .contentTitle h2:before {
    content: '•';
    color: #FFBC1D;
    font-size: 2em;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
}

.main-content .long .contentTitle {
    width: calc(390 * (100 / 430) * 1vw);  /* 最大幅を設定 */
    margin: 0px auto 0 auto;
}

.main-content .contentTitle {
    margin: 0px auto 0 auto;
}

.main-content .contentArea .contentTitle p {
    position: relative;
    font-size: 3rem;
    line-height: 1;
    font-family: "Shuei MaruGo B";
    color: #000000;
    display: inline;
}

_::-webkit-full-page-media, _:future, :root .main-content .contentArea .contentTitle p span {
    position: absolute;
    top: 0px;
    right: 3px;
    font-size: 0;
    line-height: 1;

}
.main-content .contentArea .contentTitle p span {
    position: absolute;
    top: 9px;
    right: 3px;
    font-size: 0;
    line-height: 1;
}


.main-content .contentArea .contentTitle p img {
    width: 15px;
}

}



.main-content .contentArea .contentAreaService {
    width: 100%; /* レスポンシブに対応するため幅を100%に設定 */
    max-width: 1000px; /* 最大幅を設定 */
    margin: 0px auto 0 auto;
}

.contentAreaService .icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 37px; /* 行間の調整 */
    
}

.contentAreaService .row1 {
    display: flex;
    gap: 60px; /* 列間の調整 */
}

.contentAreaService .row2 {
    display: flex;
    flex-wrap: wrap; /* アイコンを複数行に折り返し */
    justify-content: center; /* 全体を中央揃え */
    gap: 37.5px; /* アイコン間の間隔を調整 */
    text-align: center;
}
@media (max-width:999px) {
.contentAreaService .row1 {
    display: flex;
    gap: 6vw; /* 列間の調整 */
}

}

@media (max-width:480px) {
.contentAreaService .row1 {
    display: block;
    gap: 60px; /* 列間の調整 */
}

.contentAreaService .row2 {
    display: flex;
    flex-wrap: wrap; /* アイコンを複数行に折り返し */
    justify-content: center; /* 全体を中央揃え */
    gap: 37.5px; /* アイコン間の間隔を調整 */
    text-align: center;
}

}



@media only screen and (max-width: 480px) {
.main-content .contentArea .contentAreaService {
    width: calc(390 * (100 / 430) * 1vw); /* レスポンシブに対応するため幅を100%に設定 */
    max-width: none; /* 最大幅を設定 */
    margin: calc(80 * (100 / 430) * 1vw) auto 0 auto;
}

.contentAreaService .icon-container {
    display: block;
    flex-direction: column;
    align-items: center;
    gap: 37px; /* 行間の調整 */
    padding-bottom: calc(60 * (100 / 430) * 1vw);
}

.contentAreaService .row1 {
    display: block;
    gap: 60px; /* 列間の調整 */
}

.contentAreaService .row2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-wrap: wrap; /* アイコンを複数行に折り返し */
    justify-content: center; /* 全体を中央揃え */
    gap: calc(12 * (100 / 430) * 1vw); /* アイコン間の間隔を調整 */
    text-align: center;
}



}


.contentAreaService .icon-container a {
    text-decoration: none;
    transition: transform .7s ease-in-out; /* 移動のスピードを速くする */
}

.contentAreaService .icon-container a:hover {
    transform: translateY(-17px); /* 画像を上に10px移動 */
    transition: transform .5s ease-in-out; /* 移動のスピードを速くする */
 }

@media only screen and (max-width: 480px) {
.contentAreaService .icon-container a:hover {
    transform: none; /* 画像を上に10px移動 */
    transition: transform .5s ease-in-out; /* 移動のスピードを速くする */
 }
 }
 
.contentAreaService .row1 .column {
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center;
    align-items: center;
    width: 470px; /* 各アイコンのボックス幅を調整 */
    background: #FFF;
    border-radius: 20px;
    margin: 0 0 16px 0;
    padding:0 0 25px 0; /* ボックス内の余白を追加 */
    text-align: center; /* テキストを中央揃え */
    font-size: 1.6875rem;
    line-height: 1;
    font-family: "Shuei MaruGo B";
    color: #4D4D4D;
}

.contentAreaService .row2 .column {
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center;
    align-items: center;
    width: 170px; /* 各アイコンのボックス幅を調整 */
    background: #FFF;
    border-radius: 20px;
    padding:0 0 30px 0; /* ボックス内の余白を追加 */
    text-align: center; /* テキストを中央揃え */
    font-size: 1.3125rem;
    line-height: 1;
    font-family: "Shuei MaruGo B";
    color: #4D4D4D;
    min-height: 170px;
}

.contentAreaService .row1 .column img {
    width: 470px; /* アイコンの幅を適切に調整 */
    margin-bottom: 23px; /* アイコンとテキストの間にスペースを追加 */
}
@media only screen and (max-width: 999px) {
.contentAreaService .row1 .column {
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center;
    align-items: center;
    width: 42vw; /* 各アイコンのボックス幅を調整 */
    background: #FFF;
    border-radius: 20px;
    margin: 0 0 16px 0;
    padding:0 0 25px 0; /* ボックス内の余白を追加 */
    text-align: center; /* テキストを中央揃え */
    font-size: 1.6875rem;
    line-height: 1;
    font-family: "Shuei MaruGo B";
    color: #4D4D4D;
}

.contentAreaService .row2 .column {
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center;
    align-items: center;
    width: 170px; /* 各アイコンのボックス幅を調整 */
    background: #FFF;
    border-radius: 20px;
    padding:0 0 30px 0; /* ボックス内の余白を追加 */
    text-align: center; /* テキストを中央揃え */
    font-size: 1.3125rem;
    line-height: 1;
    font-family: "Shuei MaruGo B";
    color: #4D4D4D;
    min-height: 170px;
}

.contentAreaService .row1 .column img {
    width: 100%; /* アイコンの幅を適切に調整 */
    margin-bottom: 23px; /* アイコンとテキストの間にスペースを追加 */
}
}

@media only screen and (max-width: 480px) {
.contentAreaService .row1 .column {
    display: block;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center;
    align-items: center;
    width: 100%; /* 各アイコンのボックス幅を調整 */
    background: #FFF;
    border-radius: 17px;
    margin: 0 0 calc(15 * (100 / 430) * 1vw) 0;
    padding:0 0 calc(15 * (100 / 430) * 1vw) 0; /* ボックス内の余白を追加 */
    text-align: center; /* テキストを中央揃え */
    font-size: 1.3125rem;
    line-height: 1;
    font-family: "Shuei MaruGo B";
    color: #4D4D4D;
}

.contentAreaService .row2 .column {
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center;
    align-items: center;
    width: 100%; /* 各アイコンのボックス幅を調整 */
    background: #FFF;
    border-radius: 10px;
    padding:0 0 calc(16 * (100 / 430) * 1vw) 0; /* ボックス内の余白を追加 */
    text-align: center; /* テキストを中央揃え */
    font-size: 0.9375rem;
    line-height: 1;
    font-family: "Shuei MaruGo B";
    color: #4D4D4D;
    min-height: calc(100 * (100 / 430) * 1vw) ;
}

.contentAreaService .row1 .column img {
    width: 100%; /* アイコンの幅を適切に調整 */
    margin-bottom: calc(15 * (100 / 430) * 1vw); /* アイコンとテキストの間にスペースを追加 */
}
}

.contentAreaService .row2 .column img.iconKyosai { width: 51px; height: auto; margin: 40px 0 30px 0;}
.contentAreaService .row2 .column img.iconHoken { width: 53px; height: auto; margin: 40px 0 30px 0;}
.contentAreaService .row2 .column img.iconAqua { width: 32px; height: auto; margin: 42px 0 32px 0;}
.contentAreaService .row2 .column img.iconObento { width: 54px; height: auto; margin: 40px 0 30px 0;}
.contentAreaService .row2 .column img.iconDenki { width: 30px; height: auto; margin: 40px 0 30px 0;}
.contentAreaService .row2 .column img.iconItem { width: 43px; height: auto; margin: 39px 0 38px 0;}
.contentAreaService .row2 .column img.iconKumikatsu { width: 49px; height: auto; margin: 42px 0 40px 0;}
.contentAreaService .row2 .column img.iconOther { width: 58px; height: auto; margin: 30px 0 28px 0;}
.contentAreaService .row2 .column img.iconRecruit { width: 65px; height: auto; margin: 35px 0 32px 0;}


@media only screen and (max-width: 480px) {
.contentAreaService .row2 .column img.iconKyosai { width: calc(42 * (100 / 430) * 1vw) ; height: auto; margin: calc(20 * (100 / 430) * 1vw)  0 calc(15 * (100 / 430) * 1vw)  0;}
.contentAreaService .row2 .column img.iconHoken { width: calc(42.7 * (100 / 430) * 1vw) ; height: auto; margin: calc(15 * (100 / 430) * 1vw)  0 calc(15 * (100 / 430) * 1vw)  0;}
.contentAreaService .row2 .column img.iconAqua { width: calc(25.7 * (100 / 430) * 1vw) ; height: auto; margin: calc(18 * (100 / 430) * 1vw)  0 calc(15 * (100 / 430) * 1vw)  0;}
.contentAreaService .row2 .column img.iconObento { width: calc(44.7 * (100 / 430) * 1vw); height: auto; margin: calc(20 * (100 / 430) * 1vw)  0 calc(15 * (100 / 430) * 1vw)  0;}
.contentAreaService .row2 .column img.iconDenki { width: calc(25.7 * (100 / 430) * 1vw); height: auto; margin: calc(16 * (100 / 430) * 1vw)  0 calc(13 * (100 / 430) * 1vw)  0;}
.contentAreaService .row2 .column img.iconItem { width: calc(35.7 * (100 / 430) * 1vw); height: auto; margin: calc(20 * (100 / 430) * 1vw)  0 calc(15 * (100 / 430) * 1vw)  0;}
.contentAreaService .row2 .column img.iconKumikatsu { width: calc(40 * (100 / 430) * 1vw); height: auto; margin: calc(20 * (100 / 430) * 1vw)  0 calc(15 * (100 / 430) * 1vw)  0;}
.contentAreaService .row2 .column img.iconOther { width:  calc(47.7 * (100 / 430) * 1vw); height: auto; margin: calc(10 * (100 / 430) * 1vw)  0 calc(5 * (100 / 430) * 1vw)  0;}
.contentAreaService .row2 .column img.iconRecruit { width:  calc(66 * (100 / 430) * 1vw); height: auto; margin: calc(8 * (100 / 430) * 1vw)  0 calc(7 * (100 / 430) * 1vw)  0;}
}






.main-content .contentArea .contentAreaTopics {
    width: 100%; 
    max-width: 1000px; 
    margin: 0px auto 0 auto;
}

.main-content .long .contentAreaTopics {
    width: 100%; /* レスポンシブに対応するため幅を100%に設定 */
    max-width: 100%; /* 最大幅を設定 */
    margin: 0px auto 0 auto;
}

@media only screen and (max-width: 480px) {
.main-content .contentArea .contentAreaTopics {
    width: 100%; 
    max-width: 1000px; 
    margin: 0px auto 0 auto;
}

.main-content .long .contentAreaTopics {
    width: 100%; /* レスポンシブに対応するため幅を100%に設定 */
    max-width: 100%; /* 最大幅を設定 */
    margin: 0px auto 0 auto;
}

}


.main-content .contentArea .contentAreaNews {
    width: 100%; 
    max-width: 1000px; 
    margin: 0px auto 0 auto;
}

.main-content .contentArea .contentAreaNews .news-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 999px) {
.main-content .contentArea .contentAreaNews .news-tabs {
    margin:0 5vw 20px 5vw;
}

}
@media only screen and (max-width: 480px) {
.main-content .contentArea .contentAreaNews .news-tabs {
    margin:0 0 20px 0;
}

}
.main-content .contentArea .contentAreaNews .tab-button {
    padding: 7px 20px;
    border: 1.5px solid #208080;
    border-radius: 20px;
    background-color: #FFF;
    color: #208080;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.7s ease-in-out; /* 上に動くアニメーションを追加 */
    font-size: 0.875rem;
    line-height: 1;
    font-family: "Shuei MaruGo B";
}

.main-content .contentArea .contentAreaNews .tab-button:hover {
    transform: translateY(-7px); /* ホバー時にボタンを上に5px移動 */
    transition: transform .5s ease-in-out;
}

.main-content .contentArea .contentAreaNews .tab-button.active {
    background-color: #208080;
    color: #fff;
}

/* タブコンテンツのスタイル */
.main-content .contentArea .contentAreaNews .news-content {
}
@media only screen and (max-width: 999px) {
.main-content .contentArea .contentAreaNews .news-content {
    width: 90vw;
    margin: 0 auto;
}
}
.main-content .contentArea .contentAreaNews .tab-content {
    display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.main-content .contentArea .contentAreaNews .tab-content.active {
    display: block;
  opacity: 1;
  visibility: visible;}


.main-content .contentArea .contentAreaNews .news-link {
    text-decoration: none;
    color: inherit;
}

.main-content .contentArea .contentAreaNews .news-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1.5px solid #C2C1B9;
    transition: background-color 0.15s ease-in-out;}

.main-content .contentArea .contentAreaNews .news-item:hover {
    background-color: #F6F3EF;
}


.main-content .contentArea .contentAreaNews .news-category {
    font-weight: bold;
    color: #208080;
    margin-bottom: 0;
    font-family: "Shuei MaruGo B";
    font-size: 0.875rem;
    line-height: 1;
    width: 100px; /* 固定幅を設定 */
}

.main-content .contentArea .contentAreaNews .news-date {
    color: #727272;
    margin-bottom: 0;
    font-family: "Shuei MaruGo L";
    font-size: 1rem;
    line-height: 1;
    width: 155px; /* 固定幅を設定 */
    text-align: left; /* 日付を中央揃え */
}

.main-content .contentArea .contentAreaNews .news-title {
    font-family: "Shuei MaruGo L";
    font-size: 1rem;
    line-height: 1.3;
    width: 745px; /* 固定幅を設定 */
    text-align: left; /* タイトルを右揃え */
}

.main-content .contentArea .contentAreaNews .listBtnArea {
    margin: 0 auto;
    text-align: center;
}

.main-content .contentArea .contentAreaNews .listBtn {
    display: inline-block; /* ボタンをインラインブロック要素として表示 */
    font-family: "Shuei MaruGo B";
    font-size: 1rem;
    line-height: 1;
    padding: 10px 20px; /* ボタン内のパディングを調整 */
    border: 1.5px solid #208080; /* ボーダーの色を設定 */
    border-radius: 20px; /* ボタンの角を丸める */
    color: #208080; /* テキストカラーを設定 */
    text-decoration: none; /* テキストの下線を削除 */
    background-color: transparent; /* 背景色を透明に設定 */
    transition: background-color 0.3s ease, color 0.3s ease; /* ホバー時のアニメーションを追加 */
    text-align: center; /* テキストを中央揃え */
    margin: 55px auto; /* 中央揃えのためのマージン */
}


.main-content .contentArea .contentAreaNews .listBtn:hover {
    background-color: #208080; /* ホバー時の背景色を設定 */
    color: #ffffff; /* ホバー時のテキストカラーを設定 */
}

@media only screen and (max-width: 480px) {
.main-content .contentArea .contentAreaNews {
    width: calc(390 * (100 / 430) * 1vw); 
    max-width: none; 
    margin: calc(20 * (100 / 430) * 1vw) auto 0 auto;
}

.main-content .contentArea .contentAreaNews .news-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.main-content .contentArea .contentAreaNews .tab-button {
    padding: 7px 20px;
    border: 1.5px solid #208080;
    border-radius: 20px;
    background-color: #FFF;
    color: #208080;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.7s ease-in-out; /* 上に動くアニメーションを追加 */
    font-size: 0.875rem;
    line-height: 1;
    font-family: "Shuei MaruGo B";
}

.main-content .contentArea .contentAreaNews .tab-button:hover {
    transform: translateY(-7px); /* ホバー時にボタンを上に5px移動 */
    transition: transform .5s ease-in-out;
}

.main-content .contentArea .contentAreaNews .longTxt {
    padding: 7px 0px;
    font-size: 0.75rem;
    line-height: 1;
}

.main-content .contentArea .contentAreaNews .tab-button.active {
    background-color: #208080;
    color: #fff;
}

/* タブコンテンツのスタイル */
.main-content .contentArea .contentAreaNews .news-content {
}

.main-content .contentArea .contentAreaNews .tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* フェードインのアニメーション */
}

.main-content .contentArea .contentAreaNews .tab-content.active {
    display: block;
    opacity: 1; /* 表示時にフェードイン */
}


.main-content .contentArea .contentAreaNews .news-link {
    text-decoration: none;
    color: inherit;
}

.main-content .contentArea .contentAreaNews .news-item {
    display: block;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1.5px solid #C2C1B9;
    transition: background-color 0.15s ease-in-out;
}


.main-content .contentArea .contentAreaNews .news-item:hover {
    background-color: #F6F3EF;
}


.main-content .contentArea .contentAreaNews .news-category {
    float: left;
    color: #208080;
    margin-bottom: 3vw;
    margin-right: 3vw;
    font-family: "Shuei MaruGo B";
    font-size: 0.875rem;
    line-height: 1;
    width: auto; /* 固定幅を設定 */
    white-space: nowrap;
}

.main-content .contentArea .longTxt .news-category {
    width: auto; /* 固定幅を設定 */
}

.main-content .contentArea .contentAreaNews .news-date {
    color: #727272;
    margin-bottom: 3vw;
    font-family: "Shuei MaruGo L";
    font-size: 1rem;
    line-height: 1;
    width: 75%; /* 固定幅を設定 */
    text-align: left; /* 日付を中央揃え */
}


.main-content .contentArea .contentAreaNews .news-title {
    font-family: "Shuei MaruGo L";
    font-size: 1rem;
    line-height: 1.3;
    width: 100%; /* 固定幅を設定 */
    text-align: left; /* タイトルを右揃え */
}

.main-content .contentArea .contentAreaNews .listBtnArea {
    margin: 0 auto;
    text-align: center;
}

.main-content .contentArea .contentAreaNews .listBtn {
    display: inline-block; /* ボタンをインラインブロック要素として表示 */
    font-family: "Shuei MaruGo B";
    font-size: 1rem;
    line-height: 1;
    padding: 10px 20px; /* ボタン内のパディングを調整 */
    border: 1.5px solid #208080; /* ボーダーの色を設定 */
    border-radius: 20px; /* ボタンの角を丸める */
    color: #208080; /* テキストカラーを設定 */
    text-decoration: none; /* テキストの下線を削除 */
    background-color: transparent; /* 背景色を透明に設定 */
    transition: background-color 0.3s ease, color 0.3s ease; /* ホバー時のアニメーションを追加 */
    text-align: center; /* テキストを中央揃え */
    margin: 55px auto; /* 中央揃えのためのマージン */
}


.main-content .contentArea .contentAreaNews .listBtn:hover {
    background-color: #208080; /* ホバー時の背景色を設定 */
    color: #ffffff; /* ホバー時のテキストカラーを設定 */
}

}





/* カスタムカーソルとして使用するSVGイメージ */
a.hover-content {
    cursor: none;
}


#customCursor {
  position: absolute;
  width: 100px; /* カーソルのサイズを設定 */
  height: 100px;
  pointer-events: none; /* カーソルに対してイベントが発生しないように */
  transform-origin: center; /* 回転の中心を設定 */
  display: none; /* 初期状態では非表示 */
  opacity: 0; /* 初期状態で透明 */
  transition: opacity 0.2s ease; /* 表示を柔らかくするためのフェードイン効果 */
}

/* 中央に配置する画像（回転しない） */
#centerImage {
  position: absolute;
  width: 43px; /* 中心の画像のサイズを設定 */
  height: 50px;
  padding: 0 0 0 5px;
  pointer-events: none; /* カーソルに対してイベントが発生しないように */
  transform: none; /* 回転させない */
  display: none; /* 初期状態では非表示 */
  opacity: 0; /* 初期状態で透明 */
  transition: opacity 0.2s ease; /* 表示を柔らかくするためのフェードイン効果 */
}

/* 回転アニメーションの定義 */
@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* SVGを回転させるためのクラス */
.rotate {
  animation: rotateAnimation 8s linear infinite; /* アニメーションの速度を5秒に変更 */
}




section#jyuuyouInfo {
    background: #E5102A;
}

section#jyuuyouInfo .jyuuyouInfoWra {
    width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
}

section#jyuuyouInfo .jyuuyouInfoWra h4 {
    color: #FFF;
    font-size: 1.375rem;
    line-height: 1;
    font-family: "Shuei MaruGo B";
    margin: 0 0 20px 0;
}

section#jyuuyouInfo .jyuuyouInfoWra a {
    display: block;
    background: #FFF;
    border-radius: 12px;
    margin: 0 0 5px 0;
    transition: background-color 0.15s ease-in-out;
    text-decoration: none;
}

section#jyuuyouInfo .jyuuyouInfoWra a:hover {
    background-color:#FDE8EA;
}

/* 親要素にdisplay: flexを追加 */
section#jyuuyouInfo .jyuuyouInfoWra a .news-item {
    display: flex;
}

/* news-dateのスタイルを更新 */
section#jyuuyouInfo .jyuuyouInfoWra a .news-date {
    /* floatを削除 */
    background-color: rgba(229, 16, 42, 0.1);
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
    padding: 15px 20px;
    /* 幅をflex-basisで指定 */
    flex: 0 0 20%;
    color: #E5102A;
    text-align: center;
    /* heightを削除 */
    line-height: 1.3
}

/* news-titleのスタイルを更新 */
section#jyuuyouInfo .jyuuyouInfoWra a .news-title {
    /* floatを削除 */
    border-radius: 12px;
    padding: 15px 20px;
    /* 残りのスペースを占有 */
    flex: 1;
    color: #E5102A;
    line-height: 1.3
}

/* メディアクエリ内での調整 */
@media only screen and (max-width: 999px) {

    section#jyuuyouInfo .jyuuyouInfoWra {
        width: 90vw;
        margin: 0 auto;
        padding: 40px 0;
    }

    section#jyuuyouInfo .jyuuyouInfoWra a .news-date {
        flex: 0 0 30%;
    }

    section#jyuuyouInfo .jyuuyouInfoWra a .news-title {
        flex: 1;
        
    }
}


/* 480px以下の場合のスタイル調整 */
@media only screen and (max-width: 480px) {

    section#jyuuyouInfo .jyuuyouInfoWra {
        width: 90vw;
        margin: 0 auto;
        padding: 5vw 0;
    }

    /* フレックス方向を縦に変更 */
    section#jyuuyouInfo .jyuuyouInfoWra a .news-item {
        flex-direction: column;
    }

    /* news-dateのスタイル調整 */
    section#jyuuyouInfo .jyuuyouInfoWra a .news-date {
        flex: none;
        width: 100%;
        border-radius: 12px 12px 0 0; /* 上部の角を丸める */
        text-align: left; /* 左揃えに変更（必要に応じて） */
    }

    /* news-titleのスタイル調整 */
    section#jyuuyouInfo .jyuuyouInfoWra a .news-title {
        flex: none;
        width: 100%;
        border-radius: 0 0 12px 12px; /* 下部の角を丸める */
    }
}