@charset "utf-8";

/* Font Awesomeの読み込み */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/* --- */
/* =========================================
   初期リセット・共通スタイル
   (基本的なブラウザ間の差異を吸収し、デフォルトスタイルをリセット)
========================================= */
a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
}

html {
    -webkit-text-size-adjust: none;
}

img {
    vertical-align: bottom;
    max-width: 100%;
    width: auto;
}

a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-decoration: none;
}

strong {
    font-weight: 700;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, td, th {
    font-weight: 400;
    text-align: left;
    vertical-align: top;
}

blockquote:after, blockquote:before, q:after, q:before {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

a:focus {
    overflow: hidden;
}

option {
    padding-right: 10px;
}

article, aside, details, footer, hgroup, menu, nav, section, summary {
    display: block;
}

.cfx:after, .cfx:before {
    content: " ";
    display: table;
}

.cfx:after {
    clear: both;
}

.cfx {
    *zoom: 1;
}

html, body {
    /* ブラウザのデフォルトマージン・パディングを確実にリセット */
    margin: 0;
    padding: 0;
    /* ヘッダーの配置に影響しないようにoverflowを設定 */
    overflow-x: hidden; /* 横スクロールバーが出ないように */
	height: 100%;
}

/* --- */
/* =========================================
   フォント定義 (カスタムアイコンフォントとGoogle Fontsを定義)
========================================= */
/* icomoon */
@font-face {
    font-family: icomoon;
    src: url(fonts/icomoon.eot?9prvu9);
    src: url('fonts/icomoon.eot?9prvu9#iefix') format('embedded-opentype'),
         url('fonts/icomoon.ttf?9prvu9') format('truetype'),
         url('fonts/icomoon.woff?9prvu9') format('woff'),
         url('fonts/icomoon.svg?9prvu9#icomoon') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

[class*=" icon-"], [class^=icon-] {
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-phone:before {
    content: "\e942";
    margin-right: .3em;
}

.icon-facebook2:before {
    content: "\ea91";
}

.icon-instagram:before {
    content: "\ea92";
}

.icon-twitter:before {
    content: "\ea96";
}

/* Body, フォント (基本的なテキストスタイルとレスポンシブなフォントサイズ) */
body {
    line-height: 1.5;
    font-size: 14px;
    color: #555;
    font-family: Noto Sans JP, sans-serif; /* Google FontsのNoto Sans JPを指定 */
	display: flex;
    flex-direction: column; /* 要素を縦に並べる (wrapperとfooter) */
    min-height: 100vh; /* ★追加：ビューポートの高さまで最低限伸ばす */
}
#wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* ★追加：残りのスペースを全て使うことで、フッターを下に押し出す */
    /* min-height: 100vh; はbodyに設定したので不要な場合が多いですが、
       コンテンツが極端に少ない場合に備えて設定しても良いかもしれません
       min-height: 100vh;
    */
}

.mincho {
    font-family: Zen Old Mincho, serif;
}

/* レスポンシブフォントサイズ */
@media print, screen and (min-width:959px) {
    body {
        font-size: 15px;
    }
}

@media print, screen and (min-width:1024px) {
    body {
        font-size: 17px;
    }
}


/* --- */
/* =========================================
   ヘッダーとロゴのスタイル
========================================= */
header {
    background: #fff;
    color: var(--primary-text-color, #333);
    text-align: center;
    padding: 0;
    position: relative; /* モバイルではrelative */
    z-index: 10;
    border-bottom: 1px solid #747D8A;
    height: 80px;
    transition: height 0.3s ease-in-out;
    top: 0 !important; /* ★ここを再確認・維持★ */
    left: 0 !important; /* ★追加: 左端からの位置も0に固定★ */
    width: 100% !important; /* ★追加: 幅を100%に固定★ */
    margin: -5px;
}

/* スクロール時にis-animationクラスが追加されたときのヘッダーのスタイル */
.is-animation {
    background: hsla(0, 0%, 100%, .9);
    height: 80px; /* ヘッダーの高さは一定に保つ */
    top: 0 !important; /* ★再確認・維持★ */
    left: 0 !important; /* ★追加: 左端からの位置も0に固定★ */
    width: 100% !important; /* ★追加: 幅を100%に固定★ */
}

/* ヘッダー内コンテナ（ロゴとナビを横並びに配置） */
/* ヘッダー内の #container にのみ適用し、サイト全体の #container と区別 */
header > #container {
    display: flex;
    justify-content: space-between; /* ロゴとナビを左右に配置 */
    /* align-items: center; を削除またはコメントアウト */
    /* ★ここを変更します★ */
    align-items: flex-end; /* ヘッダー内の要素（ロゴとナビ）を下端に揃える */
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
    padding: 0 15px;
    height: 100%; /* 親要素であるheaderの高さに合わせる */
}

/* ロゴのスタイル */
#logo {
    margin: 5px; /* ロゴの上下左右の余白 */
    width: 180px;
    text-align: center; /* モバイル時は中央寄せ */
}

#logo img {
    display: block;
    width: 100%; /* 親要素の幅に合わせて画像を表示 */
    height: auto;
}

@media print, screen and (min-width:900px) { /* PC表示（900px以上）の場合 */
    #logo {
        width: 210px; /* ★PC表示時のロゴの幅を大きくする（例: 250px）★ */
        margin: 5px; /* PC表示ではマージンをリセットするか調整 */
        text-align: left; /* 必要であれば左寄せに */
    }
}

/* --- */
/* =========================================
   ナビゲーションのスタイル
   (モバイル/デスクトップで表示を切り替える)
========================================= */

/* メニューブロック初期設定（デフォルトでは非表示） */
#menubar {
    display: none; /* デフォルトで非表示 (JavaScriptで制御) */
}

#menubar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menubar a {
    display: block;
    text-decoration: none;
    color: inherit; /* 親から色を継承 */
}

/* JavaScriptで付与されるクラス */
/* large-screen: デスクトップメニューの表示 */
.large-screen #menubar {
    display: block;
    position: static; /* 固定配置を解除 */
    background: none; /* 背景色を解除 */
    width: auto;
    height: auto;
    padding: 0;
    text-align: left;
}

/* small-screen: モバイルメニューが開いたときの表示 */
.small-screen #menubar.display-block {
    display: block;
    position: fixed; /* 全画面を覆う */
    overflow: auto;
    z-index: 100;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    padding: 80px 20px 20px;
    background: rgba(0, 0, 0, 0.9);
    text-align: center;
    animation: animation1 0.2s both; /* スライドインアニメーション */
    color: #fff;
}

/* ドロップダウンメニューの初期状態（デフォルトでは非表示） */
.ddmenu_parent ul {
    display: none;
}

/* ddmenuクラスを持つリンクのカーソルをデフォルトに */
a.ddmenu {
    cursor: default;
}

/* ドロップダウンメニューに矢印アイコンを付ける (Font Awesomeが必要) */
a.ddmenu::before {
    font-family: "Font Awesome 6 Free";
    content: "\f078"; /* Font Awesomeのアイコンコード */
    font-weight: bold;
    margin-right: 0.5em;
    font-size: 0.6rem;
}

/* 大きな端末用のメニューブロック設定 */
@media print, screen and (min-width:900px) {
    .large-screen #menubar > nav > ul {
        display: flex;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #2c2c2c;
        justify-content: flex-end;
        align-items: flex-end; /* ★ここを追加または修正★ */
        margin-top: -2px;
    }

    .large-screen #menubar li a {
        padding: 11px 13px; /* 上下左右のパディングを調整 */
        line-height: 27px;
    }

    .large-screen #menubar li.ddmenu_parent a {
        transform: translateY(3px);
    }

    .large-screen #menubar > nav > ul > li:last-child a {
        margin-right: 10px;
    }

    .large-screen #menubar li { /* ★すべてのli要素に右マージンを適用★ */
        margin-right: 5px; /* お好みの余白サイズに調整してください */
    }

    .large-screen #menubar li:last-child { /* ★最後のli要素のマージンをリセット★ */
        margin-right: 0;
    }

    /* 大きな端末用のドロップダウンメニューの詳細設定 */
    .large-screen #menubar ul ul {
        display: none;
        position: absolute;
        z-index: 1;
        border-radius: 10px;
        text-align: center;
        min-width: 130px !important;
        color: #fff;
        background: rgba(0, 0, 0, 0.7);
        top: 90%; /* 例: 親要素の高さの90%下に配置することで、少し上にずらす */
                  /* 100% から 90%、80% のように調整してみてください */
        left: 0;
        /* min-width: 120px; この行は重複しているので削除 */
        animation: opa1 0.5s 0.1s both;
        padding-bottom: 10px;
    }

    .large-screen #menubar ul ul a {
        color: inherit;
        background: transparent; /* 背景は透明に */
        padding: 13px 10px !important;
        line-height: 1.2 !important;
        display: block; /* リンク全体がクリックできるようにブロック要素にする */
    }

    .large-screen #menubar li.ddmenu_parent {
        position: relative; /* ドロップダウンメニューの基準点 */
    }
}

/* --- */
/* 小さな端末用のメニュー項目 */
.small-screen #menubar a {
    color: inherit;
    padding: 10px;
}

/* --- */
/* =========================================
   ハンバーガーメニューアイコンとマスク
========================================= */
.toggle_btn {
    position: fixed;
    top: 20px;
    right: 15px;
    cursor: pointer;
    z-index: 20;

    /* ★ここが重要：丸のサイズをここで確実に指定します★ */
    width: 45px; /* 丸のサイズに合わせて幅を設定 */
    height: 45px; /* 丸のサイズに合わせて高さを設定 */
    border-radius: 50%; /* 円形にする */
    background-color: #ccc; /* グレーの背景色 */

    /* 中の線を中央に配置するためにFlexboxを適用 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* トランジションもここに移動 */
    transition: all .5s;
}

/* デスクトップ表示時 (900px以上) はハンバーガーメニューを非表示 */
@media screen and (min-width: 900px) {
    .toggle_btn {
        display: none; /* デスクトップではハンバーガーメニューを非表示 */
    }
}

.toggle_btn span {
    display: block; /* 3本線自体はブロック要素 */
    width: 15px; /* ★ここを調整！丸のサイズ45pxに合わせて、線の長さを調整（例: 25px）★ */
    height: 0.5px;
    background-color: #333;
    border-radius: 4px;
    position: absolute; /* .toggle_btn を基準に絶対位置指定 */
    /* left: 8px; を削除し、Flexboxに任せるか、必要なら再計算して追加 */
    /* Flexboxで中央寄せしているので、leftは基本的に不要になります */
}

/* 線の垂直位置は丸の高さに合わせて再調整が必要です */
.toggle_btn span:nth-child(1) {
    top: 17px;
} /* 45pxの丸の高さに合わせて調整 */
.toggle_btn span:nth-child(2) {
    top: 21.5px;
} /* 中央に */
.toggle_btn span:nth-child(3) {
    bottom: 17px;
} /* 45pxの丸の高さに合わせて調整 */

/* ハンバーガーメニュー下の「menu」テキストの位置と色の調整 */
.toggle_btn:after {
    content: ""; /* テキストを非表示にする */
    position: absolute;
    bottom: -20px; /* 位置を調整 */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    /* font-size, color はテキストがないので削除またはコメントアウトしてOK */
}

/* メニューオープン時の「X」印の調整 */
.open .toggle_btn:after {
    content: "";
    color: #fff;
} /* 「close」テキストも非表示に */

.open .toggle_btn span {
    background-color: #fff;
} /* 開いた時の線の色 */

.open .toggle_btn span:nth-child(1) {
    -webkit-transform: translateY(6.5px) rotate(-315deg); /* Y軸の移動量を調整 */
    transform: translateY(6.5px) rotate(-315deg);
}

.open .toggle_btn span:nth-child(2) {
    opacity: 0;
}

.open .toggle_btn span:nth-child(3) {
    -webkit-transform: translateY(-6.5px) rotate(315deg); /* Y軸の移動量を調整 */
    transform: translateY(-6.5px) rotate(315deg);
}

/* --- */
/* =========================================
   メインコンテンツエリアと新着情報一覧
========================================= */
#container { /* サイト全体のコンテナ */
    width: 100%;
    position: relative;
    background: #fff;
    z-index: 0;
    padding-bottom: 0 !important;
    padding-top: 0; /* ヘッダー固定の場合、contentsで調整 */
	/* コンテンツが少ない時に#containerが伸びるように */
    flex-grow: 1; /* ★追加：wrapper内の残りのスペースをコンテンツが埋めるように */
}

#contents {
    width: 90%; /* コンテンツの幅 */
    margin-top: 20px;
    margin-bottom: 20px;
    /* margin-left: auto;   <-- この行を削除またはコメントアウト */
    /* margin-right: 5%;    <-- この行も削除またはコメントアウト */
    margin-left: 5%;      /* ★左端から5%の位置に固定する例★ */
    margin-right: 5%;     /* 右端からも5%の余白を確保して、width: 90%と合わせる */
    padding-top: 30px; /* 固定ヘッダーの高さ分を確保 */
}

/* 新着情報一覧のタイトルを中央寄せ */
#contents h2 {
    text-align: center;
}

/* ニュースアイテムのコンテナを中央寄せ */
.news-items-container {
    max-width: 900px; /* ニュース一覧の最大幅。必要に応じて調整してください */
    margin: 30px auto; /* 上下の余白と左右の中央寄せ */
}

/* ページネーションを中央寄せ */
.pagination {
    text-align: center;
    margin-top: 40px;
}

/* --- その他の既存のコンテンツ・ページタイトル関連スタイル --- */
/* これらのスタイルは特定のページやセクションに適用されるため、残しています。 */
#recruit #contents {
    padding: 0 0 30px
}

#text_only #contents {
    border-top: 0
}

.contents_full {
    width: 100%
}

.contents_inner:first-of-type {
    margin: 0 auto 30px
}

.contents_bg {
    margin: 30px auto;
    width: calc(90% - 40px);
    padding: 20px;
    background: #fff;
    border-radius: 20px
}

@media print, screen and (min-width:559px) {
    #container {
        padding-bottom: 0 !important;
    } /* モバイルで調整していたpadding-bottomをリセット */
    #contents, #text_only #contents {
        padding: 30px 0
    }
}
@media print, screen and (min-width: 560px) and (max-width: 959px) {
    #container {
        padding-bottom: 0 !important;
    }
}

@media print, screen and (min-width:959px) {
	#container {
        padding-bottom: 0 !important;
    }
    #contents {
        padding: 50px 0
    }

    #text_only #contents {
        padding: 10px 0 50px
    }

    .contents_bg {
        padding: 30px 20px
    }
}

@media print, screen and (min-width:1024px) {
    .contents, .contents_inner {
        width: 750pt;
        margin: 50px auto
    }

    .contents_inner:first-of-type {
        margin: 0 auto 50px
    }

    .contents_bg {
        margin: 50px auto;
        width: 60pc;
        padding: 50px 20px
    }
}

@media print, screen and (min-width:1299px) {
    .contents, .contents_inner {
        width: 825pt
    }

    .contents_bg {
        width: 750pt;
        padding: 50px
    }
}

.center {
    text-align: center
}

.right {
    text-align: right
}

.left {
    text-align: left
}

.right_illust {
    text-align: center
}

.font-weight700 {
    font-weight: 700
}

#page_title {
    width: 100%;
    height: 75pt;
    margin: auto;
    display: table;
    padding: 50px 0 0
}

#company .chapter_title {
    background: url(../img/icon/home.png)no-repeat
}

#construction .chapter_title {
    background: url(../img/icon/construction.png)no-repeat
}

#dismanting .chapter_title {
    background: url(../img/icon/dismanting.png)no-repeat
}

#aggregate .chapter_title {
    background: url(../img/icon/aggregate.png)no-repeat
}

#exterior .chapter_title {
    background: url(../img/icon/exterior.png)no-repeat
}

#recruit .chapter_title {
    background: url(../img/icon/company.png)no-repeat
}

#contact .chapter_title {
    background: url(../img/icon/home.png)no-repeat
}

#aggregate .chapter_title, #company .chapter_title, #construction .chapter_title, #contact .chapter_title, #dismanting .chapter_title, #exterior .chapter_title, #recruit .chapter_title {
    background-size: auto 75pt;
    background-position: center right
}

#page_title .chapter_title {
    width: 90%;
    margin: auto;
    display: table-cell;
    vertical-align: bottom
}

#page_title .chapter_title h2 {
    font-size: 37px;
    width: calc(100% - 75pt);
    text-align: right;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1;
    padding-bottom: 10px
}

#page_title .chapter_title h2.none_space {
    letter-spacing: 0
}

#page_title .chapter_title p {
    font-size: 18px;
    width: calc(100% - 75pt);
    text-align: right;
    line-height: 1.5;
    font-weight: 100;
    letter-spacing: .2em
}

.section_title {
    font-size: 30px;
    font-weight: 500
}

.title_accent {
    width: 1.5em;
    height: 1.5em;
    background: url(../img/icon/title_accent.svg)no-repeat;
    background-size: contain;
    display: inline-block
}

.left_illust {
    text-align: left;
    padding-left: 110px;
    height: 75pt;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    letter-spacing: .2em
}

#company .left_illust {
    background: url(../img/company/company_title.png)no-repeat;
    background-size: 75pt 75pt;
    background-position: center left
}

#recruit .left_illust {
    background: url(../img/recruit/recruit_title.png)no-repeat;
    background-size: 75pt 75pt;
    background-position: center left
}

@media print, screen and (min-width:559px) {
    #page_title {
        padding-top: 0;
        width: 100%;
        height: 150px;
        margin: auto
    }

    #aggregate .chapter_title, #company .chapter_title, #construction .chapter_title, #contact .chapter_title, #dismanting .chapter_title, #exterior .chapter_title, #recruit .chapter_title {
        background-size: auto 150px
    }

    #page_title .chapter_title h2 {
        font-size: 50px;
        width: calc(100% - 250px);
        line-height: 1;
        margin-bottom: 10px
    }

    #page_title .chapter_title h2.none_space {
        width: calc(100% - 150px)
    }

    #page_title .chapter_title p {
        font-size: 25px;
        width: calc(100% - 250px)
    }

    .section_title {
        font-size: 40px
    }

    .left_illust {
        padding-left: 150px;
        height: 90pt
    }

    #company .left_illust, #recruit .left_illust {
        background-size: 90pt 90pt
    }
}

@media print, screen and (min-width:959px) {
    #page_title {
        height: 200px
    }

    #aggregate .chapter_title, #company .chapter_title, #construction .chapter_title, #contact .chapter_title, #dismanting .chapter_title, #exterior .chapter_title, #recruit .chapter_title {
        background-size: auto 200px
    }

    #page_title .chapter_title h2, #page_title .chapter_title h2.none_space {
        font-size: 60px;
        width: calc(100% - 350px)
    }

    #page_title .chapter_title p {
        font-size: 30px;
        width: calc(100% - 350px)
    }

    .section_title {
        font-size: 45px
    }

    .left_illust {
        padding-left: 170px;
        height: 130px
    }

    #company .left_illust, #recruit .left_illust {
        background-size: 130px 130px
    }
}

@media print, screen and (min-width:1024px) {
    .section_title {
        font-size: 50px
    }

    .left_illust {
        padding-left: 200px;
        height: 150px
    }

    #company .left_illust, #recruit .left_illust {
        background-size: 150px 150px
    }
}

@media print, screen and (min-width:1124px) {
    #page_title {
        height: 250px
    }

    #aggregate .chapter_title, #company .chapter_title, #construction .chapter_title, #contact .chapter_title, #dismanting .chapter_title, #exterior .chapter_title, #recruit .chapter_title {
        background-size: auto 250px
    }

    #page_title .chapter_title h2, #page_title .chapter_title h2.none_space {
        font-size: 65px;
        width: calc(100% - 450px)
    }

    #page_title .chapter_title p {
        font-size: 30px;
        width: calc(100% - 450px)
    }
}

@media print, screen and (min-width:1399px) {
    #page_title .chapter_title h2, #page_title .chapter_title h2.none_space {
        font-size: 70px;
        width: calc(100% - 470px)
    }

    #page_title .chapter_title p {
        font-size: 35px;
        width: calc(100% - 470px)
    }
}

#popular_title {
    width: 100%;
    height: 130px;
    margin: auto;
    display: table
}

#popular_title .chapter_title {
    width: 100%;
    margin: auto;
    display: table-cell;
    vertical-align: bottom
}

#popular_title .chapter_title h2 {
    font-size: 40px;
    width: 90%;
    margin: auto;
    text-align: right;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .1em
}

#popular_title .chapter_title p {
    font-size: 20px;
    width: 90%;
    margin: auto;
    text-align: right;
    line-height: 1.5
}

@media print, screen and (min-width:559px) {
    #popular_title {
        height: 150px
    }

    #popular_title .chapter_title h2 {
        font-size: 50px;
        width: 90%
    }

    #popular_title .chapter_title p {
        font-size: 25px;
        width: 90%
    }
}

@media print, screen and (min-width:959px) {
    #popular_title {
        height: 200px
    }

    #popular_title .chapter_title h2 {
        font-size: 60px
    }

    #popular_title .chapter_title p {
        font-size: 30px
    }
}

@media print, screen and (min-width:1124px) {
    #popular_title .chapter_title h2 {
        font-size: 70px
    }

    #popular_title .chapter_title p {
        font-size: 35px
    }
}

.page_contect {
    position: relative
}

.page_contect .page_contect_illust {
    position: absolute;
    width: 150px;
    height: 50px;
    background: url(../img/item/page_contect_illust.png)no-repeat;
    background-size: contain;
    bottom: -70px;
    left: 0
}

.page_contect p.exterior_contact {
    margin-bottom: 30px
}

.page_contect h3 {
    font-size: 25px;
    text-align: center;
    font-weight: 600
}

.page_contect h3 span {
    font-size: 15px;
    display: block;
    font-weight: 500;
    letter-spacing: .2em;
    margin-right: 0
}

.page_contect > p {
    font-size: 1pc;
    text-align: center;
    margin-bottom: 10px
}

.page_contect > div p span.ti {
    font-size: 10px;
    display: block;
    font-weight: 300
}

.page_contect > div p:first-of-type {
    font-size: 30px;
    text-align: center;
    font-weight: 900;
    line-height: 1.3
}

.page_contect > div p:first-of-type span:first-of-type {
    font-size: 25px
}

.page_contect > div p:last-of-type {
    font-size: 25px;
    text-align: center;
    font-weight: 700;
    line-height: 1.3
}

.page_contect > div p:last-of-type a {
    display: block;
    background: #555;
    color: #fff;
    padding: 5px 0;
    width: 9em;
    margin: 10px auto 0
}

@media print, screen and (min-width:559px) {
    .page_contect {
        width: 520px;
        margin: auto
    }

    .page_contect .page_contect_illust {
        width: 15pc;
        height: 5pc;
        top: -5pc;
        left: 0
    }

    .page_contect p.exterior_contact {
        width: 20em;
        margin: auto;
        margin-bottom: 30px
    }

    .page_contect h3 {
        font-size: 30px;
        letter-spacing: .1em
    }

    .page_contect h3 span {
        font-size: 20px
    }

    .page_contect > p {
        margin-bottom: 9pt
    }

    .page_contect > div:last-of-type {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .page_contect > div p {
        width: 50%
    }

    .page_contect > div p span.ti {
        font-size: 9pt
    }

    .page_contect > div p:first-of-type {
        font-size: 28px;
        letter-spacing: .05em
    }

    .page_contect > div p:first-of-type span:first-of-type {
        font-size: 30px
    }

    .page_contect > div p:last-of-type {
        font-size: 2pc
    }

    .page_contect > div p:last-of-type a {
        width: 9em;
        margin: 0 auto
    }
}

@media print, screen and (min-width:959px) {
    .page_contect {
        width: 700px
    }

    .page_contect .page_contect_illust {
        width: 270px;
        height: 90px;
        top: -90pt;
        left: 0
    }

    .page_contect p.exterior_contact {
        width: 27em;
        font-size: 20px
    }

    .page_contect h3 {
        font-size: 35px
    }

    .page_contect h3 span {
        font-size: 22px
    }

    .page_contect > p {
        font-size: 18px;
        margin-bottom: 20px
    }

    .page_contect > div:last-of-type {
        width: 700px;
        margin: auto
    }

    .page_contect > div p span.ti {
        font-size: 15px
    }

    .page_contect > div p:first-of-type {
        font-size: 38px
    }

    .page_contect > div p:first-of-type span:first-of-type {
        font-size: 30px
    }

    .page_contect > div p:last-of-type {
        font-size: 2pc
    }

    .page_contect > div p:last-of-type a {
        padding: 8px 0;
        transition: .35s
    }

    .page_contect > div p:last-of-type a:hover {
        background: #fbe89b;
        color: #897e74
    }
}

@media print, screen and (min-width:1024px) {
    .page_contect {
        width: 900px
    }

    .page_contect .page_contect_illust {
        width: 300px;
        height: 75pt;
        top: -110px;
        left: 0
    }

    .page_contect p.exterior_contact {
        width: 27em;
        font-size: 22px
    }

    .page_contect h3 {
        font-size: 38px
    }

    .page_contect h3 span {
        font-size: 28px
    }

    .page_contect > p {
        font-size: 20px
    }

    .page_contect > div:last-of-type {
        width: 700px;
        margin-top: 30px
    }

    .page_contect > div p:first-of-type {
        font-size: 40px
    }

    .page_contect > div p:first-of-type span:first-of-type, .page_contect > div p:last-of-type {
        font-size: 35px
    }

    .page_contect > div p:last-of-type a {
        padding: 10px 0
    }
}

/* --- */
/* =========================================
   フッターとページトップボタン
========================================= */
footer {
    background: #747d89;
    border-top: 1px solid #747d89;
    padding-top: 30px;
    position: static; /* フッターを固定する場合 */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: auto;
	padding-bottom: 10px; /* copyrightのpaddingと合わせて調整 */
}

/* フッター内のすべてのリンクの色を白に設定 */
footer a {
    color: #fff;
}

/* ホバー時の色も調整 */
footer a:hover {
    color: #f6d592;
}

.copyright {
    text-align: center;
    font-size: 10px;
    padding: 10px;
    width: auto;
    color: #fff;
    background: #747d89
}

.footer {
    width: 90%;
    margin: auto
}

.footer > div {
    margin: 10px auto
}

.footer .footer_left {
    text-align: center
}

.footer .footer_left h2 {
    text-indent: -99999px;
    width: 150px;
    height: 50px;
    background: url(../img/logo_white.svg)no-repeat;
    background-size: contain;
    margin: auto
}

.footer .footer_left dl {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 5px;
    clear: both
}

.footer .footer_left dt {
    text-indent: -99999px;
    background: url(../img/icon/map_pin.svg)no-repeat;
    background-size: contain;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px
}

.footer .footer_left dd {
    font-size: 9pt
}

.footer .footer_left p {
    display: inline-block;
    margin: 0 .5em;
    font-size: 9pt
}

.footer .footer_center ul {
    width: 300px;
    margin: auto;
    overflow: hidden;
    text-align: center;
    padding: 10px 0
}

.footer .footer_center li {
    display: inline-block
}

.footer .footer_center li:before {
    content: "／";
    padding: 0 .5em;
    color: #fff
}

.footer .footer_center li:first-of-type:before, .footer .footer_center li:nth-of-type(4):before {
    content: "";
    padding: 0
}

.footer .footer_right {
    display: flex;
    align-items: center;
    justify-content: center
}

.footer .footer_right div {
    width: 90pt;
    height: 90pt;
    margin: 10px;
    background: hsla(0, 0%, 100%, .2);
    display: table;
    border-radius: 20px
}

.footer .footer_right dl {
    display: table-cell;
    vertical-align: middle;
    text-align: center
}

.footer .footer_right dt, .footer .footer_right dt a {
    text-indent: -99999px;
    width: 30px;
    height: 30px;
    display: block
}

.footer .footer_right dt {
    margin: 0 auto 10px
}

.footer .footer_right div:first-of-type dt {
    background: url(../img/icon/telephone.svg)no-repeat;
    background-size: auto
}

.footer .footer_right div:last-of-type dt {
    background: url(../img/icon/mail.svg)no-repeat;
    background-size: auto
}

.footer .footer_right dd {
    font-size: 13px
}

.footer .footer_right dd span {
    font-size: 10px;
    display: block
}
/* ホバー前のリンク色を設定 */
.footer .footer_left dd,
.footer .footer_left dd a, /* 住所と電話番号のリンク */
.footer .footer_left p a,
.footer .footer_center li a,
.footer .footer_right dd,
.footer .footer_right dd a {
    color: #fff;
	transition: color 0.35s ease;
}

/* ホバー時のリンク色を設定 */
.footer .footer_left dd a:hover, /* 住所と電話番号のリンク */
.footer .footer_left p a:hover,
.footer .footer_center li a:hover,
.footer .footer_right dd a:hover {
    color: #f6d592; /* ホバー時の色 */
}

@media print, screen and (min-width:559px) {
    .footer .footer_left {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(150px + 20em);
    }

    .footer .footer_left div {
        width: 20em;
        margin: auto
    }

    .footer .footer_left dd {
        font-size: 15px
    }

    .footer .footer_left p {
        display: inline-block;
        margin: 0 .5em;
        font-size: 13px
    }

    .footer .footer_center ul {
        width: 500px;
        padding: 20px 0 10px
    }

    .footer .footer_center li:nth-of-type(4):before {
        content: "／";
        padding: 0 .5em
    }

    .footer .footer_right div {
        width: 200px;
        height: 110px;
        margin: 15px
    }

    .footer .footer_right dt, .footer .footer_right dt a {
        width: 35px;
        height: 35px
    }

    .footer .footer_right dd {
        font-size: 15px
    }

    .footer .footer_right dd span {
        font-size: 9pt;
        display: block
    }
}


@media print, screen and (min-width:1024px) {
    .footer {
        display: table;
        padding-bottom: 20px
    }

    .footer .footer_center, .footer .footer_left, .footer .footer_right {
        display: table-cell;
        vertical-align: middle
    }

    .footer .footer_left {
        width: 20em;
        padding-right: 20px
    }

    .footer .footer_left h2 {
        width: 210px;
        height: 70px
    }

    .footer .footer_center {
        border-left: 1px solid #fff
    }

    .footer .footer_center ul {
        width: auto;
        border-top: 0;
        padding: 0 0 0 2em
    }

    .footer .footer_center li {
        display: block;
        text-align: left;
        margin: 5px 0
    }

    .footer .footer_center li:before, .footer .footer_center li:nth-of-type(4):before {
        content: "";
        padding: 0
    }

    .footer .footer_right {
        width: 324px
    }

    .footer .footer_right div {
        width: 140px;
        height: 140px;
        margin: 10px;
        float: left
    }
}

#page-top {
    position: fixed;
    right: 20px;
    z-index: 101;
    transform: translateY(50px);  /* JavaScriptで制御するため、これは元に戻しておく */
    /* opacity: 0; */ /* JavaScriptで制御するため、これも元に戻しておく */
    transition: all 0.5s ease; /* スムーズな表示/非表示アニメーションのため */
    /* bottom の初期値（スマホを基本と仮定） */
    bottom: 220px; /* ★スマホ表示時のbottom値（例: 80px）★ */
}

#page-top.UpMove {
    animation: c .5s forwards
}

@keyframes c {
    0% {
        opacity: 0;
        transform: translateY(150px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

#page-top.DownMove {
    animation: d .5s forwards
}

@keyframes d {
    0% {
        transform: translateY(0)
    }
    0%, to {
        opacity: 1
    }
    to {
        transform: translateY(150px)
    }
}

#page-top a {
    display: block;
    width: 5pc;
    height: 5pc;
    color: #333;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: .6rem;
    background: url(../img/icon/scroll_down.png)no-repeat center;
    background-size: contain
}

#page-top.floatAnime a {
    width: 5pc;
    height: 110px;
    background: url(../img/icon/scroll_up.png)no-repeat center;
    background-size: contain;
    animation: e 2s linear infinite;
    opacity: 0
}

@keyframes e {
    0% {
        transform: translateX(0);
        opacity: 0
    }
    25% {
        transform: translateX(-6px);
        opacity: 1
    }
    50% {
        transform: translateX(0)
    }
    to {
        transform: translateX(6px);
        opacity: 1
    }
}

#page-top span {
    position: absolute;
    bottom: -20px;
    right: 20px;
    color: #666
}
/* PC表示時のスタイル（960px以上の画面幅の場合） */
@media screen and (min-width: 960px) { /* PCのブレークポイントに合わせて調整してください */
    #page-top {
        bottom: 220px; /* ★PC表示時のbottom値（例: 220px）。現在の値★ */
    }
}
@media print, screen and (min-width:959px) {
	#page-top {
        bottom: 220px; /* セミコロンの位置を修正 */
    }
    #page-top a {
        width: 90px;
        height: 90px;
        transition: .35s
    }

    #page-top a:hover {
        opacity: .8
    }

    #page-top.floatAnime a {
        animation: none; /* アニメーションを無効にする */
        opacity: 1;      /* 不透明にする */
        transform: none; /* transformもリセット */
        /* widthとheightは上記の#page-top aで設定されているので、ここでの再設定は不要 */
    }
}

@media print, screen and (min-width:1024px) {
	#page-top {
        bottom: 230px; /* セミコロンの位置を修正 */
    }
    #page-top a {
        width: 75pt;
        height: 75pt
    }

    #page-top.floatAnime a {
        animation: none; /* アニメーションを無効にする */
        opacity: 1;      /* 不透明にする */
        transform: none; /* transformもリセット */
    }
}

.modaal-close {
    top: 75pt !important
}

/* アニメーションキーフレーム (JavaScriptで使用) */
@keyframes animation1 {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes opa1 {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.large-screen #menubar > nav > ul > li:last-child a {
    margin-right: 15px;
}

/* お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new dd {
    padding-bottom: 1rem !important; /* そのまま */
    padding-top: 0rem; /* ★記事ブロックの上の余白を追加★ */
    font-size: 14px;
    line-height: 1.8; /* ★行間を少し小さく戻すか、微調整する★ */
}

/* 日付を表示するspanのスタイル */
/* このセレクタは、HTMLで日付を`span class="news-date"`で囲んだ場合に適用されます */
.new dt .news-date {
    display: inline-block;
    min-width: 90px; /* ★ここで具体的な幅を指定★ */
    text-align: left;
    /* font-size, line-height は必要に応じてここにも定義 */
    font-size: 14px;
    line-height: 1.8;
}

/* ここはレイアウトに関する共通スタイルのみ残し、色や背景は各icon-bgクラスに任せる */
.new dt span:not(.news-date) { 
    display: inline-block;
    text-align: center;
    line-height: 1.8; /* 行間（アイコンの高さ）*/
    border-radius: 20px; /* 角を丸くする指定*/
    width: 10rem; /* 幅。６文字分。*/
    transform: scale(0.8); /* 80%のサイズに縮小*/
    /* background: #fff;  この行を削除またはコメントアウト */
    /* color: #777;    この行を削除またはコメントアウト */
    font-size: 13px; /* 文字色（これは残してもOKですが、各icon-bgで指定されていれば削除可）*/
    /* margin-left: 0; */
}

/* news-date 用のスタイル (日付の領域) */
.new dt .news-date {
    display: inline-block;
    min-width: 90px; /* 例えば90px。日付の長さやデザインに合わせて調整 */
    text-align: left;
    font-size: 15px !important; /* 日付のフォントサイズ */
    line-height: 1.8; /* 日付の行の高さ */
	color: #8C8C8C;
    /* その他の日付に適用したいスタイル */
}

/*icon-bg1*/
.new .icon-bg1 {
    background: #7FBF9F; /* 背景色*/
	font-weight: 700;
    color: #fff; /* 文字色*/
	font-size: 0.9em !important;

}

/*icon-bg2*/
.new .icon-bg2 {
    background: #929090; /* 背景色*/
    color: #fff; /* 文字色*/
	font-weight: 700;
	font-size: 0.9em !important;
}

.new .icon-bg3 {
    background: #3E3A39; /* 背景色*/
    color: #fff; /* 文字色*/
	font-weight: 700;
	font-size: 0.9em !important;
}

.new a:hover {
    color: #57876f;
}

.new {
    background-color: #fff;
    padding: 0 20px 0px 20px;
    /*border-top: 1px solid #6f6f6f ;*/
}
.news-date {
    font-size: 1.2em !important; /* 強制的に適用 */
}

/* 補足：スマホ表示での日付の調整（もし必要なら） */
@media screen and (max-width: 558px) {
    .news-date {
        font-size: 1.1em; /* スマホでは少し小さめにするなど調整 */
    }
}
/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {

    /*ブロック全体*/
    .new {
        display: grid; /*gridを使う指定*/
        grid-template-columns: auto 1fr; /*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
        background-color: #fff;
        padding: 0 50px 0 50px;
        /*border-top: 1px solid #6f6f6f ;*/
    }

    /* PC表示時の日付部分の幅調整 */
    .new dt .news-date {
        min-width: auto; /* PC表示時の日付の固定幅を少し広めに設定 (例: 120px) */
    }
} /*追加指定ここまで*/

/*bg4（トップページの「お知らせ」などで使っている背景）
---------------------------------------------------------------------------*/
/*背景画像の指定。上側だけ作っておけばOKです。*/
.bg4,
.bg4::after {
    background: url('../top-images/bg4z.svg') repeat-x center bottom / auto 50px; /*bg3で何ヶ所かある50pxの数値は変更してもいいが、全て合わせておく*/
}

/*背景ブロック全体*/
.bg4 {
    position: relative;
    padding-top: 0px; /*bg3で何ヶ所かある50pxの数値は変更してもいいが、全て合わせておく*/
    padding-bottom: 50px; /*bg3で何ヶ所かある50pxの数値は変更してもいいが、全て合わせておく*/
    color: #333333; /*文字色*/

    /*以下は変更不要*/
    margin-left: calc(-1 * var(--global-space));
    margin-right: calc(-1 * var(--global-space));
}

/*下の背景画像への追加指定*/
.bg4::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50px; /*bg3で何ヶ所かある50pxの数値は変更してもいいが、全て合わせておく*/
    left: 0px;
    bottom: 0px;
    transform: scaleY(-1); /*上下反転*/
}

/*backgroundには、上で読み込む背景画像のカラーを抜き出して指定して下さい。*/
.bg4 > div {
    padding: 1px;
    background: #fff; /*背景色。背景画像と同じ色を指定して下さい。*/
    padding-left: var(--global-space); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。*/
    padding-right: var(--global-space); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。*/
    padding: 2% 0% 1% 4%;
}

.bg4 a {
    color: inherit;
}

/*h2_n見出し*/
.h2_n {
    position: relative;
    margin-top: 5px;
    margin-left: 0px;  /* ★ここで左からの固定ピクセルを指定★ */
    margin-right: 0;
    margin-bottom: 0rem;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 30px;
}


/*h2_n装飾用の小文字*/
.h2_n .small {
    display: block;
    font-size: 0.5em; /*文字サイズを親要素の50%に*/
    opacity: 0.7; /*透明度。色が70%出た状態。*/
    font-weight: 200; /*文字の太さ。100から900まで指定可能。*/
}

@media screen and (min-width:800px) {
    .h2_n {
        position: relative;
        text-align: left; /*テキストをセンタリング*/
        margin: 0 0 0rem; /*h2の外側にとるスペース。上、左右、下への順番。*/
        padding-top: 10px;
        font-size: 28px;
        line-height: 35px;
    }
}
.news {
    max-width: 900px;
    margin: 0 auto; /* 中央寄せに戻す */
    padding: 0 4%; /* 現在のパディング */
    padding-left: 10%; /* ★ここを調整！左に余白を作り、コンテンツ全体を右にずらす★ */
    /* 必要であれば padding-right も調整 */
}

/* ニュースリスト共通スタイル */
.news_list {
    margin: 0 5%;
}

.news_list_item {
    padding: 25px 0;
    border-bottom: 1px solid #E6E6E6;
}

.news_list_item:first-child {
    border-top: 1px solid #E6E6E6;
}

.news_list_item a {
    position: relative;
    display: flex;
    padding-right: 30px;
    /* news_list_dateとnews_itemのスタイルが定義されているため、ここでは重複を避ける */
}

.news_list_date {
    font-size: 15px;
    display: flex;
    margin-right: 15px;
    align-items: center;
}

/* ------------------------------
   メディアクエリ
------------------------------ */

/* 1024px以下の画面 */
@media screen and (max-width: 1024px) {
    .news_list_item a {
        display: block; /* フレックスボックスからブロック要素に変更 */
    }
}

/* 769px以下の画面 */
@media screen and (max-width: 769px) {
    .news_list_item a {
        font-size: 14px;
    }
}

/* 480px以下の画面 */
@media screen and (max-width: 480px) {
    .arrow {
        display: none;
    }

    .news_list_item a {
        padding-right: 0;
    }
}

/* ------------------------------
   ニュース記事
------------------------------ */
/*h2_news見出し*/
.h2_news {
    position: relative;
    margin-top: 5px;
    margin-left: 30px;  /* ★ここで左からの固定ピクセルを指定★ */
    margin-right: 0;
    margin-bottom: 0rem;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 30px;
	border-bottom: solid 3px #C1C1C1; /* 2pxの太さで実線、色は濃い灰色 */
    padding-bottom: 5px; /* テキストと線の間に少し隙間を作る */
    display: inline-block; /* 線の幅をテキストに合わせるために必要 */
    padding: 5px 0 5px 0;
}
.h2_news::after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #F86C00;
	bottom: -3px;
	width: 30%;
	}

@media screen and (min-width:800px) {
.h2_news {
        position: relative;
        text-align: left; /*テキストをセンタリング*/
        padding-top: 10px;
        font-size: 28px;
        line-height: 35px;
    }
}
/* ------------------------------
   ニュース記事タイトル
------------------------------ */
.news_list h3 {
    text-align: left;
	font-weight: bold;
	font-size: 25px;
	margin-bottom: 15px;
	color: #555;
}

/* news-top.css */

p.news_content {
    /* 現在のnews_contentの他のスタイルがあればそのまま残し、以下を追加または修正 */
    line-height: 1.9; /* 例: 行の高さがフォントサイズの1.8倍になります */
    font-weight: 350; /* ここを追加。希望の細さに合わせて数値を調整してください */
}
/* ------------------------------
   news-list-grid1（4カラムボックス）
------------------------------ */
.news-list-grid1 .list * {
    padding: 0;
}

.news-list-grid1 .list {
    display: grid;
    margin-bottom: 1rem;
    background: #fff;
    grid-template-rows: auto 1fr auto;
    /* box-shadow: 5px 5px 20px rgba(0,0,0,0.1); */
}

.news-list-grid1 .list p {
    font-size: 14px;
    line-height: 1.5;
}

.news-list-grid1 .list figure {
    margin: 0;
}

.news-list-grid1 h4 {
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 0.5em;
    text-align: center;
}

.news-list-grid1 {
	margin-top: 30px;
}
.news_img { /* imgタグに直接適用されているクラス */
    display: block; /* ブロック要素にする */
    margin-bottom: 10px; /* ここで画像の下に余白を追加 */
    width: 100%; /* 親要素の幅いっぱいに広げる（元のサイズを維持するため） */
    height: auto; /* アスペクト比を維持 */
}
.news-list-grid1 .text-c p {
 text-align: center;
}

/* 画面幅800px以上の追加指定 */
@media screen and (min-width: 800px) {
    .news-list-grid1 h4 {
        font-size: 1.3rem;
    }

    .news-list-grid1 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .news-list-grid1 .list {
        margin-bottom: 0;
    }
}
/* ------------------------------
   news-list-grid2（3カラムボックス）
------------------------------ */
.news-list-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 30px;
    max-width: 1000px;
    justify-content: center;
}

.news-list-grid2 .list * {
    padding: 0;
}

.news-list-grid2 .list {
    display: grid;
    background: #fff;
    grid-template-rows: auto 1fr auto;
}

.news-list-grid2 .list figure {
    margin: 0;
}

.news-list-grid2 .list figure img {
    max-width: 100%;
    height: auto;
    display: block;
}

.news-list-grid2 h4 {
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 0.5em;
    text-align: center;
}
.news-list-grid2 .text-c p {
 text-align: center;
}
/* タブレット縦向き〜広めのスマホ横向き（480px〜767px） */
@media screen and (min-width: 480px) and (max-width: 767px) {
    .news-list-grid2 {
        gap: 1.5rem;
    }
}

/* 画面幅768px以上の追加指定 */
@media screen and (min-width: 768px) {
    .news-list-grid2 h4 {
        font-size: 1.3rem;
    }
    .news-list-grid2 {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
        gap: 1rem;
    }
}

/* 非常に小さいスマホ向け（479px以下） */
@media screen and (max-width: 479px) {
    .news-list-grid2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
/* ------------------------------
   news-list-grid3（2カラムボックス）
------------------------------ */
.news-list-grid3 {
    display: grid;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 40px;
	max-width: 900px;
	margin-left: auto;   /* 要素自体を親の中で中央寄せにする */
    margin-right: auto;
}

.news-list-grid3 .list * {
    margin-top: 0;
    padding: 0;
}

.news-list-grid3 .list {
    display: grid;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #fff;
    grid-template-rows: auto 1fr auto;
    flex-basis: calc(100% - 1rem);
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 280px;
}

/* 580px以上の画面で2カラムになるよう調整 */
@media screen and (min-width: 580px) {
    .news-list-grid3 .list {
        flex-basis: calc(50% - 1rem);
    }
}

.news-list-grid3 .list p {
    font-size: 14px;
    line-height: 1.5;
}

.news-list-grid3 .list figure {
    margin: -1rem;
    margin-bottom: 0.5rem;
}

.news-list-grid3 h4 {
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 0.5em;
    text-align: center;
}

/* デスクトップ (800px以上) */
@media screen and (min-width: 800px) {
    .news-list-grid3 h4 {
        font-size: 1.3rem;
    }

    .news-list-grid3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-list-grid3 .list {
        margin-bottom: 0;
        flex-basis: auto;
    }
}
/* PCでの表示（デフォルトのスタイル） */
/* 769px以上の画面幅に適用されるスタイル */
.news_img0303 {
 float: left;
 margin-right: 20px;
 margin-bottom: 10px;
 max-width: 100px; /* ← 追加：画像の最大幅を100pxに指定 */
 height: auto;    /* ← 追加：高さは自動調整 */
}
.news_img0312 {
 float: left;
 margin-right: 20px;
 margin-bottom: 10px;
 max-width: 200px; /* ← 追加：画像の最大幅を100pxに指定 */
 height: auto;    /* ← 追加：高さは自動調整 */
}
.news_content {
    overflow: hidden; /* floatの回り込みを解除 */
}

/* スマホでの表示を考慮した調整 */
@media screen and (max-width: 768px) {
 .news_img0303 {
  float: none; /* floatを解除して、回り込みをなくす */
  display: block; /* ブロック要素にして縦に並ぶようにする */
  margin: 0 auto 15px auto; /* 画像を中央寄せにし、下に余白を追加 */
  max-width: 150px; /* ← 調整：スマホではさらに小さく */
 }
 .news_img0312 {
  float: none; /* floatを解除して、回り込みをなくす */
  display: block; /* ブロック要素にして縦に並ぶようにする */
  margin: 0 auto 15px auto; /* 画像を中央寄せにし、下に余白を追加 */
  max-width: 180px; /* ← 調整：スマホではさらに小さく */
 }
}

.news_content {
 overflow: hidden;
}