/* コラムページ内*/
a {
    text-decoration: underline;
}

.column {
    margin: auto;
    line-height: 1.5rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
    margin: auto;
    margin-top: 50px;
    width: 90%;
}

/*パンくず* SEOに重要*/
#breadcrumbs {
    font-size: 14px;
    /* 本文より少し小さめが一般的 */
    color: #333;
    /* 基本の文字色 */
    margin-bottom: 20px;
    /* 下のコンテンツとの余白 */
    padding: 10px 0;
    /* 上下のゆとり */
    line-height: 1.5;
}

#breadcrumbs a {
    color: #0056b3;
    /* リンクらしい青色（サイトのメインカラーに合わせてください） */
    text-decoration: underline;
    /* 下線をつけてリンクであることを強調 */
    transition: opacity 0.3s;
}

#breadcrumbs a:hover {
    opacity: 0.7;
    /* マウスを乗せた時に少し薄くする */
    text-decoration: none;
}

/* 矢印（»）の色を薄くして文字を目立たせる */
#breadcrumbs {
    color: #999;
    /* 矢印を含む全体の文字色を一旦薄く */
}

/* 現在地（リンクがない最後のテキスト）を濃くする */
#breadcrumbs span:last-child {
    font-weight: bold;
    color: #333;
    /* 最後の項目だけ黒く強調 */
}

.l-heading-primary {
    /* ベースのフォント設定などはここへ */
    line-height: 1.5;
    color: #333;
}

/* --- スマホ・タブレット（デフォルト） --- */
.l-heading-primary span {
    display: block;
    /* 1行ずつブロックとして扱う */
    width: 100%;
    /* 横幅いっぱいを使う */
}

/* サブタイトルの文字サイズ調整（お好みで） */
.l-heading-primary .sub-title {
    font-size: 0.9em;
    /* メインより少し小さくするとバランスが良い */
    margin-top: 0.2em;
    /* 上との隙間 */
    color: #555;
    /* 少し色を薄くする等の調整も可 */
}

.column h1 {
    font-size: 1.5rem;
    margin: 20px 0;
    text-align: left;
}

.column h2 {
    padding: 20Px 0 5px 0;
    margin: 20px 0;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: left;
    border-bottom: 2px #000 solid;
    line-height: 1.8rem;
    ;
}

.column h3 {
    padding: 20Px 0 5px 0;
    margin: 20px 0;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: left;
    border-bottom: 2px #000 solid;
    ;
}

.column h4 {
    padding: 20Px 0 0px 0;
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: left;
    color: #023024;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    /* 縦並びにする */
    gap: 30px;
    /* テキストと画像の間隔 */
}

.text-area {
    width: 100%;
    /* 横幅いっぱい */
}

.image-area {
    width: 100%;
    /* 横幅いっぱい */
}

/* 画像がはみ出さないための必須設定 */
.image-area img {
    width: 100%;
    /* 親枠に合わせて伸縮 */
    height: auto;
    /* 比率を保持 */
    display: block;
    /* 下の隙間を消す */
}

/*g-list 青*/
.g-list {
    padding: 0 20px 15px;
}

.g-list li {
    list-style: square;
    color: #073290;
    margin-bottom: 0.5em;
}

.g-list span {
    color: #000000;
    font-weight: normal;
}

/* 佐藤木型へボタン・お問い合わせはこちらへボタン */
.c-btn {
    /* レイアウトとサイズ（レスポンシブ対応） */
    display: flex;
    /* 文字をど真ん中に配置 */
    justify-content: center;
    align-items: center;
    width: 90%;
    /* スマホなど小画面では幅90%で大きく表示 */
    max-width: 400px;
    /* PCなど大画面では400px以上広がらないように制限 */
    margin: 100px auto;
    /* 上下100px、左右中央揃え */
    padding: 15px 0;
    /* ボタンの厚み */
    box-sizing: border-box;
    /* パディングを含めた幅計算にする */

    /* 文字の設定（改行防止） */
    white-space: nowrap;
    /* ★ここで「改行」を禁止しています */
    font-weight: bold;
    text-decoration: none;
    color: #fff !important;

    /* デザイン */
    background: #073290;
    border-radius: 5px;
    transition: 0.2s;
}

.c-btn:hover {
    background: #E50012;
    text-decoration: none;
    opacity: 0.9;
    /* ホバー時に少し透明にして押した感を出す */
}

/* 10のコラムページへのリンク一覧 */
.c-linkblock {
    border: 2px solid #808080;
    padding: 0px 20px 5px;
}

.c-pagelink li {
    list-style-type: decimal;
    margin: 0 10px 10px 30px;
}

.c-pagelink li a:hover {
    color: #ff0000;
}

.text_box {
    line-height: 1.6;
    margin: 0 auto;
    width: 85%;
}

.text_area h2 {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 15px;
    padding: 0 0 7px;
    border-bottom: 2px solid #073290;
}

.text_area p {
    margin: 0 0 1em;
}

.text_area p:last-child {
    margin: 0;
}

.column_link {
    margin: 45px 0 60px;
}

.column_link a {
    color: #fff;
    display: block;
    max-width: 200px;
    text-align: center;
    text-decoration: none;
    margin: 0 auto;
    padding: 10px;
    background: #073290;
    border: 1px solid #073290;
}

.column_link a:hover {
    color: #073290;
    background: #fff;
}


.column .img-right-s {
    width: 100%;
    height: auto;
}

/*ページのナビゲーションボタン P1 P2*/
.page-nav {
    margin: 1em auto;
    color: #333;
    text-align: center;
}

.page-nav .now {
    background: #073290;
    color: #fff;
}

.page-nav li {
    display: inline;
    margin: 0 2px;
    padding: 0;
}

.page-nav li span,
.page-nav li a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 5px 13px;
    background: #f6dfd9;
    text-decoration: none;
    vertical-align: middle;
}

.page-nav li a:hover {
    color: #333;
    background: #f1f1f1;
}

/* ====================================
   表（Table）のスマホ対応設定
   ==================================== */
.table-scroll {
    overflow-x: auto;
    /* 横にはみ出たらスクロールさせる */
    width: 100%;
}

.table-scroll table {
    min-width: 600px;
    /* ★重要：表の最小幅を確保する */
    width: 100%;
    border-collapse: collapse;
    /* 隙間をなくす */
}

/* もし文字が詰まりすぎているなら、セルの余白も調整 */
.table-scroll th,
.table-scroll td {
    padding: 10px;
    /* 適度な余白 */
    white-space: normal;
    /* 文字の折り返しを許可 */
    text-align: left;
    vertical-align: top;
    /* 上揃えにして読みやすくする */
}

/*g-ﾃｰﾌﾞﾙ*/
.g-table {
    overflow: auto;
    width: 100%;
    border: solid 1px #6279ac;
    border-collapse: collapse;
    margin-bottom: 1.5em;
    text-align: left;
}

.g-table th {
    padding: 0px, 0, 0, 10px;
    border: solid 1px #a3a3a3;
    width: 20%;
    background: #c9c9c9;
    vertical-align: middle;
    color: #000;
    text-align: left;
}

.g-table td {
    padding: 5px 15px 5px;
    border: solid 1px #a3a3a3;
}

.g-td {
    padding: 5px 20px 5px;
    border: solid 1px #a3a3a3;
    vertical-align: middle;
    background: #ececec;
    width: 10%;
    text-align: center;
}

.list-ul li {
    list-style-type: disc;
    margin-left: 20px;
}

.photo_center {
    display: flex;
    width: 100%;
}

@media screen and (min-width: 601px) {
    .column {
        width: 80%;
        max-width: 1000px;
    }

    /*パンくず*/
    /* スマホ表示用の追加記述（メディアクエリなしで常時適用でもOK） */
    #breadcrumbs {
        /* 横並びを強制 */
        white-space: nowrap;

        /* 横スクロールを許可 */
        overflow-x: auto;
        overflow-y: hidden;

        /* iOSでのスクロールを滑らかにする */
        -webkit-overflow-scrolling: touch;

        /* 左右に少し余白を入れて、端の文字が切れにくくする */
        padding-left: 5px;
        padding-right: 5px;
    }

    /* スクロールバーを目立たなくする（お好みで） */
    #breadcrumbs::-webkit-scrollbar {
        height: 4px;
    }

    #breadcrumbs::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }

    .l-heading-primary span {
        display: inline;
        /* 横並びに戻す */
        width: auto;
    }

    /* 2つ目のspan（サブタイトル）の前に線を入れる */
    .l-heading-primary .sub-title::before {
        content: "｜";
        /* ここで線を追加 */
        margin: 0 15px;
        /* 線の左右に余白 */
        color: #ccc;
        /* 線の色（薄くして目立たせすぎない） */
    }

    /* PCでは文字サイズを戻す */
    .l-heading-primary .sub-title {
        font-size: 1em;
        color: inherit;
    }

    /*パンくずここまで*/

    .column .img-right-s {
        width: 30%;
        height: auto;
        float: right;
        margin-left: 20px;
        margin-bottom: 50px;
    }

    .g-table {
        width: 65%;
    }

    .g-table th {
        padding: 0;
        padding-left: 10px !important;
    }

    .content-wrapper {
        flex-direction: row;
        /* 横並びに切り替え */
        align-items: flex-start;
        /* 上揃え */
    }

    .text-area {
        flex: 1;
        /* 余った幅を全てテキストが使う */
    }

    .image-area {
        width: 300px;
        /* PCでの画像の幅指定 */
        flex-shrink: 0;
        /* 画像幅が勝手に縮まないようにする */
    }
}

.list-img ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* 縦に並べる */
    gap: 1em;
    /* 画像間の余白 */
    align-items: center;
}

.list-img ul li img {
    width: 100%;
    /* モバイルでは幅いっぱい（必要に応じて調整） */
    height: auto;
    display: block;
}

@media screen and (min-width: 601px) {
    .list-img ul {
        flex-direction: row;
        /* 横に並べる */
        justify-content: center;
        /* 中央寄せ */
        width: 80%;
        /* 全体の幅を80%に制限 */
        margin: 0 auto;
        /* 親要素に対して中央配置 */
        gap: 20px;
        /* 画像同士の間隔 */
    }

    .list-img ul li {
        flex: 1;
        /* 2つの画像を均等な幅にする */
    }

    .list-img ul li img {
        width: 100%;
        /* liの幅いっぱいに広げる */
        height: auto;
    }
}