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

/* === 基本スタイルとリセット === */
:root {
    --color-yellow-main: #fff000;
    --color-yellow-header-stripe: #fdd835;
    --color-navy-dark: #003f8e;
    --color-blue-button: #005bac;
    --color-text-dark: #333333;
    --color-text-light: #555555;
    --color-white: #ffffff;
    --color-border: #e0e0e0;
    --color-bg-light-gray: #f7f7f7;

    --font-family-base: 'Noto Sans JP', Arial, sans-serif;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;
}

.page-wrapper {
    margin: 0 auto;
    font-family: var(--font-family-base);
    line-height: 1.7;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    max-width: 1200px;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
}

.content-image {
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
}

/* ▼▼▼ 修正箇所 ▼▼▼ */
/* PC/SP画像の表示・非表示をここで一括管理します */
.sp-image { display: none; }
.pc-image { display: block; }
/* ▲▲▲ 修正箇所 ▲▲▲ */
.sp-only { display: none; }
.pc-only { display: block; }


/* === ヘッダー === */
.page-header {
    text-align: center;
    padding-bottom: 20px;
}
.header-top-banner {
    background-color: var(--color-yellow-main);
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}

/* ▼▼▼ 修正箇所 ▼▼▼ */
.header-top-banner h2 {
    margin: 0;
    /* 画像を表示するため、テキスト用のスタイルとpaddingを削除 */
    padding: 0;
    /* h2自体にはline-heightは不要なので0に */
    line-height: 0;
}

.header-top-banner h2 img {
    width: 100%;
    height: auto;
    /* displayプロパティの指定を削除し、.pc-image/.sp-imageの指定に委ねる */
}
/* ▲▲▲ 修正箇所 ▲▲▲ */

.jagged-edge {
    width: 100%;
    height: 10px;
    fill: var(--color-yellow-main);
    position: absolute;
    left: 0;
    right: 0;
}
.jagged-edge.top { top: 0; transform: rotate(180deg); }
.jagged-edge.bottom { bottom: 0; }
.header-intro {
    padding: 25px 20px;
    font-size: 1.1em;
    color: var(--color-navy-dark);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}
.header-intro p { margin-bottom: 1em; }
.header-intro p:last-child { margin-bottom: 0; }
.header-intro p:first-child {
    font-weight: var(--font-weight-normal);
    color: var(--color-navy-dark);
}

/* === メインコンテンツ === */
.main-content { padding: 0; }

/* === 自宅編セクション === */
.section-home-prep {
    padding: 0 20px;
    background-color: var(--color-white);
    text-align: center;
}
.section-title-yellow h3 {
    display: inline-block;
    background-color: transparent;
    color: var(--color-navy-dark);
    font-size: 1.8em;
    font-weight: var(--font-weight-bold);
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    /*margin: 0 0 30px 0;*/
}
.prep-point {
    display: flex;
    align-items: center;
    background-color: var(--color-white);
    padding: 10px 25px 25px 10px;
    border-radius: 10px;
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.katayama-image {
    order: 1;
    width: 25%;
    max-width: 220px;
    height: auto;
    border-radius: 8px;
    margin-right: 25px;
    flex-shrink: 0;
}

/* ▼▼▼【PC表示】修正ここから ▼▼▼ */
/* 吹き出し全体のスタイル */
.speech-bubble {
    order: 2;
    flex-grow: 1; /* 利用可能なスペースを埋めるように変更 */
    width: auto; /* 明示的なwidth指定をリセット */
    background-color: var(--color-yellow-main);
    color: var(--color-navy-dark);
    padding: 25px 30px;
    margin: 0;
    text-align: left;
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
}
/* ▲▲▲【PC表示】修正ここまで ▲▲▲ */

/* 吹き出しの矢印 */
.speech-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -18px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid var(--color-yellow-main);
}

/* 吹き出し上部（画像とタイトル） */
.bubble-top {
    display: flex;
    align-items: center; /* このプロパティで画像とテキストを垂直方向に中央揃えにします */
    margin-bottom: 10px;
}

.kangaeyo-image {
    height: 1.5em; /* テキストサイズに合わせて調整 */
    width: auto;
    margin-right: 10px;
    flex-shrink: 0;
}

/* セレクタの詳細度を上げて、外部CSSの影響を受けないようにします */
.bubble-top .bubble-title {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.6;
    font-weight: 700;
    color: var(--color-navy-dark);
}

/* ネイビーの線 */
.navy-line {
    border: none;
    height: 2px;
    background-color: var(--color-navy-dark);
    margin: 0 0 10px 0;
    width: 100%;
}

/* 吹き出し下部（説明文） */
.bubble-bottom p {
    margin: 0;
    font-size: 1.0em;
    line-height: 1.6;
    color: var(--color-navy-dark);
}


.prep-point p strong {
    font-weight: var(--font-weight-black);
}

/*
 * ===============================================
 * ▼▼▼【ここから追加/修正】レイアウト反転用のスタイル ▼▼▼
 * ===============================================
 */

/*【共通】画像と吹き出しの表示順を入れ替える */
.prep-point-reversed .katayama-image {
    order: 2; /* 画像を2番目に */
}
.prep-point-reversed .speech-bubble {
    order: 1; /* 吹き出しを1番目に */
}

/*【PC表示用】反転レイアウトのマージンと吹き出し矢印の調整 */
.prep-point-reversed .katayama-image {
    margin-right: 0;
    margin-left: 25px; /* 左側にマージンを設定 */
}
.prep-point-reversed .speech-bubble::before {
    left: auto; /* leftをリセット */
    right: -18px; /* 右側に配置 */
    border-right: none; /* 右のborderを削除 */
    border-left: 20px solid var(--color-yellow-main); /* 左のborderで矢印を作成 */
}

/*
 * ===============================================
 * ▲▲▲【ここまで追加/修正】レイアウト反転用のスタイル ▲▲▲
 * ===============================================
 */


.section-disaster-items {
    padding: 0 20px 0 20px;
    margin-bottom: 60px;
}

.section-title-navy {
    background-color: #fee600; /* 背景:黄色 */
    color: var(--color-white);
    padding: 15px 20px;
    text-align: left;
    border-radius: 5px;
}
.section-title-navy h4,
.section-title-navy h5,
.section-title-navy h6 {
    margin: 0;
    font-size: 1.0em;
    font-weight: var(--font-weight-bold);
    line-height: 1.7;
}
.section-disaster-items > .section-title-navy {
    margin-bottom: 25px;
    /* text-align: center;*/
}
.section-disaster-items > .section-title-navy h4 {
    font-size: 1.0em;
    line-height: 1.8;
    /* font-weight: var(--font-weight-normal); */
    color: #003f8e;
}

.accordion-container { }
.read-more-button {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 10px auto 0 auto;
    padding: 12px 20px;
    background-color: var(--color-blue-button);
    color: var(--color-white);
    font-size: 1.2em;
    font-weight: var(--font-weight-bold);
    text-align: center;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s;
    list-style: none;
}
.read-more-button::-webkit-details-marker { display: none; }
.read-more-button { list-style-type: none; }
.read-more-button:hover { background-color: #004a8c; }
.read-more-button .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid var(--color-white);
    margin-left: 15px;
    transition: transform 0.3s;
    vertical-align: middle;
}
details[open] > .read-more-button .arrow { transform: rotate(180deg); }
.accordion-content {
    margin-top: 30px;
    padding: 0 25px;
    border-radius: 8px;
    border: 5px solid var(--color-navy-dark);
}
.section-editor-picks {
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.editor-picks-title {
    font-size: 1.3em;
    font-weight: var(--font-weight-bold);
    color: var(--color-navy-dark);
    text-align: center;
    margin-bottom: 8px;
}
.editor-picks-subtitle {
    text-align: center;
    font-size: 0.95em;
    color: var(--color-text-light);
    margin-bottom: 20px;
}
.editor-picks-image-placeholder {
    margin-bottom: 25px;
    text-align: center;
}
.editor-picks-image-placeholder .content-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
.editor-item-list {
    list-style: none;
    padding-left: 0;
    counter-reset: editor-item-counter;
    columns: 3;
    gap: 20px;
    max-width: 750px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.editor-item-list li {
    font-size: 0.95em;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    break-inside: avoid-column;
    line-height: 1.6;
    position: relative;
    padding-left: 32px;
    color: var(--color-navy-dark); /* ▼▼▼ 修正箇所: 文字色をネイビーに指定 ▼▼▼ */
}
.editor-item-list li .item-icon {
    display: none;
}
.editor-item-list li::before {
    counter-increment: editor-item-counter;
    content: counter(editor-item-counter);
    position: absolute;
    left: 0;
    top: 3px;
    background-color: var(--color-navy-dark);
    color: var(--color-white);
    font-weight: bold;
    font-size: 0.85em;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    box-sizing: border-box;
}

.section-lifeline-water {
    padding: 30px 20px 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* コンテンツ全体を中央寄せに変更 */
}


/* lifeline-itemのデフォルトスタイル */
.lifeline-item {
    display: flex;
    align-items: center; /* 画像とテキストの垂直方向を中央揃え */
    gap: 20px;
    margin-bottom: 25px;
    width: 100%; /* 親要素に対して100% */
    max-width: 750px; /* コンテンツの最大幅を設定 */
}
.lifeline-item:last-child {
    margin-bottom: 0;
}
.lifeline-text-box {
    order: 2;
    flex-grow: 1;
    flex-basis: auto;
    border-radius: 5px;
    padding: 0;
    margin: 0;
}
.lifeline-text-box h6 {
    font-size: 1.4em;
    font-weight: var(--font-weight-bold);
    color: var(--color-navy-dark);
    margin: 0 0 10px 0;
    line-height: 1.5;
}
.lifeline-text-box p {
    font-size: 1.1em;
    margin: 0;
    line-height: 1.7;
    color: var(--color-text-dark);
}

.lifeline-image-bg-container {
    order: 1;
    width: 220px; /* デフォルトの画像幅（編集部Mのセクションに適用） */
    flex-shrink: 0;
    margin-bottom: 0;
}

/* 編集部M以外の画像の幅を150pxに指定 */
.lifeline-item:not(.editor-intro-item) .lifeline-image-bg-container {
    width: 150px;
}


.lifeline-bg-image {
    border-radius: 8px;
    width: 100%;
    height: auto;
    display: block;
}

/* ===== 「編集部M」セクションの専用スタイル START ===== */
.editor-intro-item {
    display: inline-flex; /* ★修正: 要素を内容に合わせて縮小し中央寄せを有効に */
    width: auto;          /* ★修正: widthを自動に */
    max-width: 100%;
    align-items: center;
    gap: 10px;
}
/* ===== 修正点: 画像を本来のサイズで表示 ===== */
.editor-intro-item .lifeline-image-bg-container {
    width: auto; /* コンテナの幅を、中に入る画像の幅に合わせる */
}
.editor-intro-item .lifeline-bg-image {
    width: auto; /* 画像の幅を本来のサイズに */
}
/* ★追加: 指定エリアのpタグの文字色をネイビーに */
.editor-intro-item .lifeline-text-box p {
    color: var(--color-navy-dark);
}
/* ===== 「編集部M」セクションの専用スタイル END ===== */


/* ▼▼▼ ここにスタイルを追加しました ▼▼▼ */
/* テキストハイライト（マーカー）のスタイル */
.text-highlight {
    background: linear-gradient(transparent 60%, var(--color-yellow-main) 60%);
    display: inline;
    padding: 0 0.1em;
}
/* ▲▲▲ ここまで追加 ▲▲▲ */


.section-communication {
    padding-bottom: 25px;
    border-bottom: 1px dashed var(--color-border);
    margin-bottom: 25px;
}
.communication-title {
    margin-bottom: 15px;
    text-align: left;
}
.communication-title h5 {
    font-size: 1.05em;
    font-weight: var(--font-weight-bold);
}
.communication-content {
    padding: 20px;
    background-color: var(--color-white);
    border-radius: 5px;
    font-size: 0.9em;
    line-height: 1.8;
    border: 1px solid #eee;
}
.communication-content p { margin: 0 0 1em 0; }
.communication-content p:last-child { margin-bottom: 0; }


/* ▼▼▼ アイテム別で探す（ここから修正）▼▼▼ */
.section-item-search {
    padding: 40px 0;
}
.item-search-title {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: .32em;
    font-family: "游ゴシック体 Pr6N B","Yu Gothic Pr6N B",游ゴシック,"Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ W3","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic",メイリオ,Meiryo,"Noto Sans","Noto Sans CJK JP","system-ui",sans-serif;
    font-weight: 700;
    font-size: 16px;
}
.item-search-title:last-of-type {
    margin-bottom: 0;
    padding-bottom: 10px;
}
.item-search-title::before,
.item-search-title::after {
    content: "";
    display: inline-block;
    margin: 0 10px;
    width: 11px;
    height: 6px;
    background: url('data:image/svg+xml,%3Csvg viewBox="0 0 10.37 6.6" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m5.19 6.6 5.18-6.6h-10.37z"/%3E%3C/svg%3E') no-repeat 0 0;
    background-size: 100%;
}

/* PC表示のスタイル */
.item-search-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 中央寄せ */
    gap: 20px; /* アイテム間の隙間 */
    margin: 20px auto 50px;
    padding: 0;
    width: 90%;
    max-width: 1000px;
    list-style: none;
}
.item-search-item {
    position: relative;
    width: 300px; /* PCでのボタン幅を固定 */
    background: #fff;
    border: 1px solid #000;
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
    font-family: "游ゴシック体 Pr6N B","Yu Gothic Pr6N B",游ゴシック,"Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ W3","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic",メイリオ,Meiryo,"Noto Sans","Noto Sans CJK JP","system-ui",sans-serif;
    font-weight: 700;
    font-size: 18px;
}
/* ▲▲▲ アイテム別で探す（ここまで修正）▲▲▲ */

.item-search-item.ls80 {
    letter-spacing: .08em;
}
.item-search-item.ls100 {
    letter-spacing: .1em;
}
.item-search-item.ls220 {
    letter-spacing: .22em;
}
.item-search-item a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 6px 11px 0;
    color: var(--color-text-dark);
    text-decoration: none;
}
.item-search-item a::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 100%;
    background: url("data:image/svg+xml;charset=utf-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 2 2' preserveAspectRatio='none'%3e%3cg opacity='1' transform='matrix(0-1 1 0 0 2)'%3e%3cpath fill='%2300AFFF' d='M1-1h.97l-4 4v-.97zM3-1v.97l-4 4h-.97z'/%3e%3c/g%3e%3c/svg%3e") repeat 0 0;
    background-size: 6px;
}
.item-search-item a::after {
    position: absolute;
    right: 6px;
    content: "";
    width: 14px;
    height: 14px;
    background: url('data:image/svg+xml,%3Csvg viewBox="0 0 13.36 13.36" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="6.68" cy="6.68" r="6.68"/%3E%3Cpath d="m10.24 6.68-5.34-4.2v8.4z" fill="%23fff"/%3E%3C/svg%3E') no-repeat 0 0;
    background-size: 100%;
}

/* Styling for centering images added by user */
.image-centered-container {
    text-align: center; /* For inline-block or legacy centering */
    margin-bottom: 20px; /* Add some space below the image */
}
.image-centered-container img {
    display: block; /* Make sure the image is a block element */
    margin: 0 auto; /* Center the block element */
    max-width: 100%; /* Ensure responsiveness */
    height: auto; /* Maintain aspect ratio */
}

.communication-advice p {
    text-align: center;
    font-size: 1.2em;
    /*font-weight: bold;*/
    color: var(--color-navy-dark);
    line-height: 1.8;
    /* padding: 10px 0;*/
}

/*
 * ===============================================
 * ▼▼▼【ここから修正】PC用の基本スタイル ▼▼▼
 * ===============================================
 */

/* 画像付きチェックリストの新しいスタイル（PC表示） */
.checklist-items {
    list-style: none;
    padding-left: 0;
    columns: 3; /* PCでは3列表示 */
    gap: 20px;
    max-width: 750px;
    margin: 20px auto 0 auto;
    text-align: left;
}

.checklist-items li {
    font-size: 0.95em;
    margin-bottom: 15px;
    break-inside: avoid-column;
    line-height: 1.6;
    color: var(--color-navy-dark);
    display: flex;
    align-items: flex-start;
}

/* li要素の数字を画像に置き換え */
.checklist-items li::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../images/check-box.jpg); /* 画像ファイルを指定 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px; /* 画像とテキストの間隔 */
    flex-shrink: 0;
    margin-top: 4px; /* 上下の位置を微調整 */
}
/*
 * ===============================================
 * ▲▲▲【ここまで修正】PC用の基本スタイル ▲▲▲
 * ===============================================
 */


/* === レスポンシブ対応 === */
@media (max-width: 480px) {
    /* スマートフォン表示では、PC/SP画像の表示・非表示を逆転させます */
    .sp-image { display: block; }
    .pc-image { display: none; }

    .sp-only { display: block; }
    .pc-only { display: none; }

    .header-intro { padding: 20px 15px; font-size: 1em; }

    .section-home-prep { padding: 0 15px; }
    .section-title-yellow h3 {
        font-size: 1.5em;
        /* margin-bottom: 25px;*/
    }
    
    .prep-point {
        padding: 15px;
        max-width: 100%;
        flex-direction: column; /* 要素を縦積みに変更 */
    }

    .katayama-image {
        width: 40%;
        max-width: 150px;
        margin-right: 0; /* 横マージンをリセット */
        margin-bottom: 20px; /* 下にマージンを追加 */
        order: 1; /* 順番を1番目に */
    }

    .speech-bubble {
        width: 100%; /* 横幅を100%に */
        max-width: 450px;
        order: 2; /* 順番を2番目に */
        margin: 0 auto; /* 中央揃え */
        padding: 20px;
    }

    /* 吹き出しの矢印を上向きに変更 */
    .speech-bubble::before {
        top: -18px; /* 吹き出しの上部に配置 */
        left: 50%;
        transform: translateX(-50%); /* 水平中央に配置 */
        border-top: none;
        border-right: 10px solid transparent;
        border-bottom: 20px solid var(--color-yellow-main); /* 下向きの三角形を作成 */
        border-left: 10px solid transparent;
    }

    /* ▼▼▼【ここから追加/修正】SP表示での反転レイアウト調整 ▼▼▼ */
    /* ★★★ 修正箇所 START ★★★ */
    /* SPでは反転レイアウトでも「画像が上、吹き出しが下」になるようorderを上書き */
    .prep-point-reversed .katayama-image {
        order: 1;
        margin-left: 0; /* 既存のマージンリセットを統合 */
    }

    .prep-point-reversed .speech-bubble {
        order: 2;
    }
    /* ★★★ 修正箇所 END ★★★ */

    /* 反転レイアウトでも吹き出し矢印が正しく上を向くようにスタイルを上書き */
    .prep-point-reversed .speech-bubble::before {
        top: -18px;
        left: 50%;
        transform: translateX(-50%);
        border-top: none;
        border-right: 10px solid transparent;
        border-bottom: 20px solid var(--color-yellow-main);
        border-left: 10px solid transparent;
    }
    /* ▲▲▲【ここまで追加/修正】SP表示での反転レイアウト調整 ▲▲▲ */


    .bubble-top .kangaeyo-image {
        height: 3em;
    }

    .bubble-top .bubble-title {
        font-size: 1.1em;
        line-height: 1.5;
    }

    .bubble-bottom p {
        font-size: 1em;
        line-height: 1.5;
    }

    .section-disaster-items { padding: 0 15px; }
    .section-disaster-items > .section-title-navy h4 { font-size: 0.95em; line-height: 1.7; }
    .read-more-button { font-size: 1em; padding: 10px 15px; max-width: 240px; }
    .accordion-content {
        padding: 0px 15px;
        margin-top: 25px;
    }

    .editor-picks-title { font-size: 1.2em; }
    .editor-picks-subtitle { font-size: 0.9em; }

    .editor-picks-image-placeholder .content-image {
        max-width: 100%;
    }
    .editor-item-list {
        columns: 2;
        max-width: 95%;
        gap: 15px;
		/*margin-right: -20px; */
    }
    .editor-item-list li {
        font-size: 1em;
        padding-left: 30px;
        margin-bottom: 10px;
    }
    .editor-item-list li::before {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 0.8em;
        top: 3px;
    }

    .item-icon { width: 10px; height: 10px; margin-top: 4px;}

    /* SP表示でのデフォルトスタイル */
    .lifeline-item {
        flex-direction: column; 
        align-items: center;
        gap: 15px;
    }
    
    /* 全てのライフライン関連画像の最大幅を120pxに統一 */
    .lifeline-image-bg-container {
        width: 100%;
        max-width: 120px;
    }
    
    .lifeline-text-box {
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
        max-width: none;
    }
    .lifeline-text-box h6 { font-size: 1.3em; }
    .lifeline-text-box p { font-size: 1em; }

    .communication-title h5 { font-size: 1em; }
    .communication-content { padding: 15px; font-size: 0.85em; }

    .communication-advice p {
        font-size: 16px;
        line-height: 1.7;
    }

    /* アイテム別で探す（レスポンシブスタイル修正）*/
    .item-search-list {
        justify-content: space-between; /* 両端寄せの2列に */
        gap: 0; /* gapはリセット */
        width: 100%;
    }
    .item-search-item {
        width: 48.5%; /* 2列表示 */
        font-size: 14px;
        margin-bottom: 10px; /* 縦の隙間を確保 */
    }

    /* ▼▼▼【ここから修正】SP用のスタイル ▼▼▼ */
    /* 画像付きチェックリストの新しいスタイル（SP表示） */
    .checklist-items {
        columns: 2; /* スマートフォンでは2列表示 */
        max-width: 100%;
        gap: 15px;
    }

    .checklist-items li {
        font-size: 1em;
        margin-bottom: 10px;
    }

    .checklist-items li::before {
         width: 18px;
         height: 18px;
         margin-top: 3px;
    }
    /* ▲▲▲【ここまで修正】SP用のスタイル ▲▲▲ */
}

@media screen and (min-width: 481px) {
    .item-search-title {
        margin-bottom: 20px;
        font-size: 20px;
    }
    .item-search-list {
        width: 96%;
    }
}

@media screen and (min-width: 1000px) {
    .item-search-title {
        font-size: 26px;
    }
    .item-search-title:last-of-type {
        padding-bottom: 20px;
    }
    .item-search-title::before,
    .item-search-title::after {
        width: 14px;
        height: 10px;
    }
    .item-search-list {
        max-width: 1140px;
    }
    .item-search-item {
        font-size: 20px;
    }
}

/* ▼▼▼ ここから追加・修正 ▼▼▼ */
/* === Profile Section === */
.section-profile {
    padding: 40px 20px;
    border-top: 2px solid #003f8e;
	border-bottom: 2px solid #003f8e;
    margin: 40px 0 80px 0;
}

.profile-container {
    display: flex;
    align-items: flex-start;
    max-width: 750px;
    margin: 0 auto;
    gap: 30px;
}

.profile-photo {
    width: 160px;
    height: auto;
    flex-shrink: 0;
}

.profile-text-content {
    flex-grow: 1;
    text-align: left;
}

/* ▼▼▼ 修正箇所 ▼▼▼ */
.profile-text-content .profile-header {
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 1.1em;
    color: var(--color-text-dark);
    margin-top: 0;
    margin-bottom: 15px;
}

.profile-text-content .profile-body {
    font-family: var(--font-family-base);
    font-size: 1.0em;
    line-height: 1.7;
    color: var(--color-text-dark);
    margin-top: 0;
    margin-bottom: 15px;
}


.profile-text-content .profile-body2 {
    font-family: var(--font-family-base);
    font-size: 0.85em;
    line-height: 1.7;
    color: var(--color-text-dark);
    margin-top: 0;
    margin-bottom: 30px;
}
/* ▲▲▲ 修正ここまで ▲▲▲ */

.profile-body strong {
    font-weight: 700;
}

.profile-link-button {
    display: inline-block;
    padding: 12px 50px 12px 30px; /* パディングを調整 */
    background-color: var(--color-white);
    color: var(--color-navy-dark); /* テキスト色をネイビーに変更 */
    font-size: 1.1em;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid #000; /* 枠線を2pxに変更 */
    border-radius: 10px; /* 角丸を調整 */
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 0px #000; /* 影付きデザインに変更 */
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out; /* アニメーションを追加 */
}

.profile-link-button:hover {
    background-color: #f7f7f7;
	text-decoration: none;
}

/* クリック時のスタイルを追加 */
.profile-link-button:active {
    transform: translateY(4px); /* ボタンを下に移動 */
    box-shadow: 0 0 0px #000; /* 影をなくす */
}

/* アイコンを三角形に変更 */
.profile-link-button::after {
    content: ''; /* テキスト内容を削除 */
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px; /* CSSで三角形を作成 */
    border-color: transparent transparent transparent var(--color-navy-dark); /* 三角形の色をネイビーに設定 */
}


/* === Responsive for Profile Section === */
@media (max-width: 480px) {
    .section-profile {
        padding: 30px 30px;
        margin-top: 30px;
    }

    .profile-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    
    .profile-photo {
        width: 130px;
    }

    .profile-text-content {
        width: 100%;
        text-align: left;
    }

    .profile-link-button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 40px; /* スマホ表示用にパディングを調整 */
    }

    .profile-link-button::after {
        right: 30px; /* スマホ表示用にアイコン位置を調整 */
    }
}



/* ===== START: ADDED STYLES FOR BANNER AREA ===== */
.jishin-banner-area {
  margin: 0 0 30px 0;
  padding: 0 20px 60px 20px;
}

.jishin-banner-title {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.jishin-banner-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* バナー間の隙間 */
}

.jishin-banner-list li a {
  display: block;
}

.jishin-banner-list li img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ===== END: ADDED STYLES FOR BANNER AREA ===== */


/* スマートフォン対応 (600px以下) の中に追加した部分 */
@media (max-width: 600px) {
  /* ===== START: RESPONSIVE STYLES FOR BANNER AREA ===== */
  .jishin-banner-list {
    flex-direction: column; /* スマホでは縦積みにする */
  }
  
  .jishin-banner-title {
    font-size: 1.25em;
  }
  /* ===== END: RESPONSIVE STYLES FOR BANNER AREA ===== */
}

/* ▲▲▲ ここまで追加・修正 ▲▲▲ */