@charset "UTF-8";

.page-sp-only {
    display: none;
}

.tx_left {
    text-align: left;
}

@media (max-width: 768px) {
    .page-sp-only {
        display: block;
    }
}

.accordion-item a {
    text-decoration: underline;
    /* アンダーラインを表示 */
    cursor: pointer;
    /* カーソルをポインター（手の形）に */
}


.accordion-item {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 25px;
}

.sec_5_wrp h4 {
    width: 100%;
    margin-inline: auto;
}


.sec_5_wrp .indent_list {
    padding-left: 5rem;
}

/* ✅ デフォルトのリストマーカーを削除 */
.indent_list {
    font-size: 1.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    margin-left: -1.8rem;
}

/* ✅ 各 <li> のスタイルを統一 */
.indent_list li {
    position: relative;
    padding-left: 3.8rem;
    line-height: 1.8;
    /* 読みやすい行間 */
    list-style-type: none;
    /* デフォルトのリストマーカーを削除 */
    margin-bottom: 1rem;
}

/* ✅ 「・」を手動で追加 */
.indent_list li::before {
    content: "・";
    position: absolute;
    left: 22px;
    top: -2px;
    /* 適切な位置に調整 */
    font-size: 1.2em;
    /* サイズ調整 */
    color: inherit;
    /* 文字色を継承 */
}

/* ✅ 1つ目と2つ目の <li> の <span> に余白をつける */
.indent_list li span {
    display: block;
    padding-left: 1.2em;
    /* 2行目以降のインデント */
    text-indent: 0;
}


/* === アコーディオンボタンのスタイル === */
/* === アコーディオンボタンのスタイル === */
.accordion-btn {
    width: 100%;
    background-color: #D80C18;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: left;
    padding: 12px 50px 12px 15px;
    /* 右側に余白を確保 */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    position: relative;
    display: flex;
    align-items: center;
    /* アイコンとテキストを中央揃え */
    justify-content: space-between;
}

/* 「＋」ボタン（デフォルト） */
.accordion-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    /* アイコンを親要素の中央に配置 */
    right: 15px;
    width: 20px;
    /* アイコンの幅 */
    height: 20px;
    /* アイコンの高さ */
    background-image: url("/asset/img/icon_plus.svg");
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    /* ちょうど中央に配置 */
    transition: transform 0.3s ease-in-out;
}

/* クリック時の「−」ボタンと回転アニメーション */
.accordion-btn.active::after {
    background-image: url("/asset/img/icon_minus.svg");
    transform: translateY(-50%) rotate(180deg);
    /* 180度回転 */
}


.accordion_wrp {
    padding: 50px 60px;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
    letter-spacing: 0.1rem;

}

/* === アコーディオンのコンテンツ（デフォルトは閉じる） === */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    font-size: 1.8rem;
    border: 1px solid #ddd;
    transition: max-height 0.5s ease-in-out, padding 0.3s ease-in-out;
}


/* === 開いた時のスタイル === */
.accordion-content.active {
    max-height: 500px;
    /* 十分に大きな値（適宜調整） */
    padding: 15px;
}


.discription {
    padding: 30px 0;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
}

.dt_date {
    font-size: 1.5rem;
    text-align: right;
    margin: 0 20px 10px 0;
}

.ttl_sub {
    display: inline-block;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    padding: 10px;
    background-color: #D80C18;
}

.accordion-list {
    margin-bottom: 20px;
}

.accordion-list li {
    position: relative;
    padding-left: 25px;
    /* 2行目以降をずらす（黒丸の幅 + 余白） */
    margin-bottom: 1rem;
    font-size: 1.6rem;
    text-indent: 0;
    /* text-indent をリセット */
    font-weight: bold;
}

.accordion-list li::before {
    content: "■";
    color: black;
    font-size: 1.8rem;
    position: absolute;
    left: 0;
    top: 0;
}

.accordion-content h3 {
    font-size: 1.6rem;
    padding-left: 3rem;

}

.accordion-content h3+ul {

    padding-left: 5rem;
}

.accordion-content h4 {
    color: #D80C18;
    font-weight: bold;
    margin: 1rem 0;
    font-size: 1.6rem;
}



.accordion-content p {
    font-size: 1.6rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 3.5rem;
    margin-left: 1em;
}

.bg_gray {
    background-color: #F6F6F6;
    padding: 15px;
    margin-bottom: 3rem;
    padding: 20px 45px;
}

.bg_gray2 {
    width: 95%;
    background-color: #F6F6F6;
    padding: 15px;
    margin-bottom: 3rem;
    padding: 5px;
    margin-inline-start: auto;
}

.bg_gray .accordion-list li {
    position: relative;
    padding-left: 1em;
    /* 1文字分右に押し出す */
    margin-bottom: 1rem;
    font-size: 1.6rem;
    text-indent: -1em;
    /* 1行目だけ左にずらす */
    font-weight: bold;
}

.bg_gray .accordion-list {
    margin-bottom: 20px;

}

.bg_gray2 .accordion-list li {
    position: relative;
    padding-left: 1em;
    /* 1文字分右に押し出す */
    margin-bottom: 1rem;
    font-size: 1.6rem;
    text-indent: -1em;
    /* 1行目だけ左にずらす */
    font-weight: bold;
}

.bg_gray2 .accordion-list {
    margin-bottom: 20px;

}

.bg_gray2 h3 {
    padding-left: 0;
}
.table_wrp {
    width: 100%;
    max-width: 669px;
    margin-inline: auto;
}

.accordion_tx_area {
    margin-bottom: 40px;
}

.customer-first .mb_40 {
    margin-bottom: 40px;
}

.customer-first .fo_10 {
    font-size: 1.2rem;
}

.mb_30 {
    margin-bottom: 30px;
}

.mb_0 {
    margin-bottom: 0;
}

.bg_gray .mt_0 {
    margin-top: 0;
}

.bg_gray2 .mt_0 {
    margin-top: 0;
}



.indent_list li .pl_0 {
    padding-left: 0;
}

.bg_gray p {
    font-size: 1.4rem;
    padding: 0;
}

.bg_gray2 p {
    font-size: 1.4rem;
    padding: 0;
}

.accordion-item .img_name_tx {
    font-size: 1.6rem;
    color: #333;
    text-align: left;
    padding-left: 0;
}

.accordion-item .img_note {
    font-size: 1.1rem;
    text-indent: -1em;
    /* 「＊」を左にずらす */
    padding-left: 1em;
    /* 2行目の頭を揃える */
}

.accordion-item .img_note2 {
    font-size: 1.1rem;
        text-indent: -3em;
    /* 「＊」を左にずらす */
    padding-left: 3em;
    /* 2行目の頭を揃える */
}

.img_box_wrp {
    max-width: 488px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    gap: 20px;
    margin-bottom: 30px;
}

.img_box_wrp_2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    gap: 20px;
    padding-left: 3rem;
    margin-bottom: 1rem;
}


.last_section {
    max-width: 900px;
    width: 100%;
    margin-inline: auto;
}

.last_section ul {
    font-size: 1.2rem;
    max-width: 700px;
    width: 100%;
    margin-inline: auto;
    list-style-position: outside; /* ← デフォルトならそのままでもOK */
  }
  
  .last_section ul li {
    text-indent: -2em; /* ← 1行目を左に戻す */
    padding-left: 2em;  /* ← 2行目以降のインデント分 */
  }

.last_section_ttl {
    font-size: 1.6rem;

}

.last_section_box {
    max-width: 700px;
    width: 100%;
    margin-inline: auto;
    margin-top: 50px;
    margin-bottom: 40px;
}

/* 表 */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 16px;
}

.custom-table th,
.custom-table td {
    border: 1px solid #ccc;
    padding: 10px;
}

.custom-table thead th {
    background-color: #E1464F;
    color: white;
    font-weight: bold;
}

.custom-table .gray-row td {
    background-color: #f2f2f2;
}

.training-list {
    list-style: none;
    /* デフォルトのリストスタイルを削除 */
    padding-left: 5rem;
}

.training-list li {
    position: relative;
    margin-bottom: 1.5rem;
}


.training-list h5 {
    margin-bottom: 5px;
    font-size: 1.5rem;
    font-weight: normal;
}

.training-list p {
    font-size: 1.5rem;
    margin: 0;
    line-height: 1.6;
    padding-left: 1.5rem;
}

.link_btn {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    color: #333;
    text-decoration: underline;

}

@media (max-width: 1700px) {
    .link_btn img {
        width: auto;
        height: 15px;
        display: inline;
    }
}

/* 最後の表 */
.policy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    margin-bottom: 40px;
    
}

.policy-table th,
.policy-table td {
    border: 1px solid #ccc;
    /* 下線のみ適用 */
    padding: 10px;
    text-align: left;
    width:0;
}

.policy-table thead th {
    background-color: #e0e0e0;
    font-weight: bold;
}

.policy-table td strong {
    font-weight: bold;
}

.custom-divider {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    /* 薄いグレーの線 */
    margin: 20px 0;
}

/* SP版のスクロール可能エリア */
.sp-only {
    display: none;
    /* デフォルトは非表示 */
    overflow-x: auto;
    /* 横スクロールを有効化 */
    white-space: nowrap;
    /* 画像を改行させない */
    -webkit-overflow-scrolling: touch;
    /* スムーズスクロール */
    scrollbar-width: thin;
    /* Firefox用 */
    scrollbar-color: #D80C18 #f0f0f0;
    /* スクロールバーの色（バーの色 背景色） */
}

/* 画像が横にスクロールするように調整 */
.sp-only img {
    display: block;
    width: 150%;
    /* スクロールできるように幅を調整 */
    min-width: 768px;
    /* 画面より大きくしてスクロール可能に */
    max-width: none;
    /* 自動調整を無効化 */
}

/* Webkit（Chrome, Safari用）のスクロールバー */
.sp-only::-webkit-scrollbar {
    height: 6px;
    /* スクロールバーの高さ */
}

.sp-only::-webkit-scrollbar-track {
    background: #f0f0f0;
    /* スクロールバーの背景 */
}

.sp-only::-webkit-scrollbar-thumb {
    background: #D80C18;
    /* スクロールバー本体 */
    border-radius: 3px;
}

/* スクロールバーがホバー時に少し濃く */
.sp-only::-webkit-scrollbar-thumb:hover {
    background: #b30000;
}

.nowrap {
    white-space: nowrap;
  }

.accordion-btn {
    display: flex;
    align-items: flex-start;
    /* 上揃え */
    text-align: left;
    background-color: #D80C18;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 15px;
    border: none;
    cursor: pointer;
    position: relative;
    width: 100%;
}

/* 「運営方針X.」のスタイル */
.accordion-btn .heading {
    flex-shrink: 0;
    /* 文字のサイズに合わせる */
    min-width: 4em;
    /* 適宜調整 */
    font-weight: bold;
}

/* 2行目以降のインデント */
.accordion-btn .content {
    flex-grow: 1;
    /* 残りのスペースを埋める */
    padding-left: 10px;
    /* インデント調整 */
    display: flex;
    flex-wrap: wrap;
    /* 長すぎる場合折り返す */
    align-items: center;
}



.indent {
    display: inline-block;
    padding-left: 3.6rem;
}

.h4+ul li {
    padding-left: 3.6rem;
    font-size: 1.6rem;
    line-height: 1.6;
    /* 行間の調整（適宜変更してください） */
    margin-bottom: 8px;
    text-indent: -1em;
    margin-left: 1em;
}

.triangle_indent{
    margin-left: 1.7em;
}

.triangle_indent li {
    position: relative;
    padding-left: 2.6rem;
    font-size: 1.6rem;
    line-height: 1.6;
    /* 行間の調整（適宜変更してください） */
    margin-bottom: 8px;
}

.triangle_indent li::before  {
    content: "▶︎";
    color: black;
    font-size: 1.6rem;
    position: absolute;
    left: 0;
    top: 0;
}
h3+img+.table_wrp+p {
    font-size: 1.4rem;
}

h4+p {
    font-size: 1.6rem;
}

h4+p+p {
    font-size: 1.6rem;
}

h3+ul li p {
    padding-left: 2em;
    /* 1文字分のスペースを確保 */
}

.tx_point {
    line-height: 3;
}



.customer-first .sec_4_p {
    text-align: left;
    font-size: 1.6rem;
    width: 100%;
}

.w-row {
    background: #fff;
}

.customer-first {
    margin-bottom: 80px;
}

.hline {
    border-top: 1px solid #000;
    /* 黒い横線を設定 */
    padding-bottom: 5px;
    /* 横線とテキストの間隔を調整 */
    margin: 10px 0;
    /* 上下の余白を調整 */
}


.page-btn-pdf {
    text-align: center;
    font-size: 1.6rem;
    flex-grow: 1;
    line-height: 1.6;
    align-items: center;
    gap: 10px;
    display: block;
    margin-inline: auto;
    margin-bottom: 60px;
    margin-top: 40px;

}

.page-btn-pdf img {
    width: auto;
    height: 15px;
    display: inline;
    margin-top: -15px;
}

@media screen and (max-width: 768px) {

    .customer-first .content-wrapper {
        padding: 20px;
    }

    .discription {
        font-size: 1.5rem;
        padding: 0;
        margin: 0;
        font-weight: normal;
    }

    .last_section_ttl {
        font-size: 1.5rem;
    }

    .accordion_wrp {
        padding: 15px;
    }

    .accordion-list {
        font-size: 1.5rem;
    }

    .accordion-content p {
        font-size: 1.5rem;
        padding-left: 0;
    }

    .pc-only {
        display: none;
        /* PC版を非表示 */
    }

    .sp-only {
        display: block;
        /* SP版のみ表示 */
    }

    .table_wrp {
        background-color: #fff;
        padding: 2rem;
        border: 1px solid #ccc;
        margin-bottom: 5px;
        margin: auto;
    }

    .accordion-content h4 {
        text-align: left;
    }

    .bg_gray h4 {
        text-align: center;
    }

    .customer-first .mb_40 {
        margin-bottom: 20px;
    }

    .bg_gray {
        padding: 20px 20px 10px 20px;
        margin-bottom: 10px;
    }

    .accordion-content h3 {
        margin-bottom: 1rem;
    }

    .img_box img {
        width: 100%;
    }

    .accordion-item .img_name_tx {
        font-size: 1.8rem;
        margin: 0;
    }

    .img_box_wrp {
        gap: 30px;
        margin-bottom: 15px;
    }

    .accordion_tx_area {
        margin-bottom: 20px;
    }

    .custom-table {
        font-size: 0.9rem;
    }

    .policy-table tbody tr:last-child td {
        border-bottom: 1px solid #ccc;
    }

    .policy-table th,
    .policy-table td {
        width: 50%;
    }

    .link_btn {
        text-align: left;
    }

    .customer-first .page-btn--prev::before {
        left: 9rem;
    }

    .accordion-btn {
        flex-direction: column;
        font-size: 1.6rem;
        padding-right: 40px;
    }

    .last_section {
        max-width: 100%;
        padding: 10px;
    }

    .customer-first {
        margin-bottom: 0;
    }

    .page-btn-pdf {
        text-align: left;}


}
