/* -------------------------------------------------- */
/* 汎用 */
/* -------------------------------------------------- */

/* 見出し */
.page-title.subscriber::before { aspect-ratio:178/238; background-image:url('../img/page/fund/subscriber/title-subscriber.png'); height:81; width:61px; }

/* 下線 */
.u { text-decoration:underline; }

/* -------------------------------------------------- */
/* 労山基金（加入者向け） */
/* -------------------------------------------------- */

/* リード文 */
.read-area.content { background-color:transparent; padding:0; margin-bottom:24px; }

/* 見出し */
.point { flex-direction:column; }
.point h2 { margin-bottom:15px; }
.point .sub-title { color:var(--gr-2); font-size:28px; font-weight:700; text-align:center; margin-bottom:40px; }
.point .sub-title .big-font { font-size:46px; }

/* 12のポイントリスト */
.point-list { flex-direction:column; gap:32px; }
.point-list li { background-color:var(--ye-1); gap:16px; padding:16px; }
.point-list li span.number { color:var(--gr-1); font-size:62px; font-weight:900; top:-15px; left:10px; }
.point-list li h2 { border-bottom:1px solid var(--bk); color:var(--gr-2); font-size:20px; font-weight:700; padding:20px 0; }
.card-text { gap:20px; }
.notes { font-size:13px; font-weight:500; line-height:1.6; }
.point-list li.list-3 { padding-bottom:86px; }
.point-list li.list-4 { padding-bottom:156px; }
.point-list li.list-8 { padding-bottom:156px; }
.point-list li.list-10 { padding-bottom:156px; }
.point-list li.list-11 { padding-bottom:156px; }

/* アニメーション - 12のポイント */
.anime-image { display:inline-block; width:auto; z-index:2; }
.anime-let { aspect-ratio:117/136; bottom:-30px; right:0; height:136px; }
.anime-shoes { aspect-ratio:182/145; bottom:6px; left:50%; transform:translateX(-50%); height:145px; }
.anime-tracking { aspect-ratio:140/159; bottom:6px; left:50%; transform:translateX(-50%); height:140px; }
.anime-hat { aspect-ratio:132/122; bottom:16px; left:50%; transform:translateX(-50%); height:122px; }
.anime-break { aspect-ratio:258/147; bottom:6px; left:50%; transform:translateX(-50%); height:148px; }

/* 詳しくはこちら */
.details { align-items:center; justify-content:center; margin:40px auto; }
.border-midashi { font-size:18px; font-weight:700; gap:10px; margin-bottom:16px; }
.border-midashi::before, .border-midashi::after { background-color:var(--gr-2); display:inline-block; height:20px; width:2px; }
.border-midashi::before { transform:translateY(50%) rotate(-40deg); }
.border-midashi::after { transform:translateY(50%) rotate(40deg); }
a.border-button { align-items:center; border:1px solid var(--bk); border-radius:30px; justify-content:center; text-align:center; height:36px; max-width:310px; min-width:250px; width:100%; }

/* ボタン */
.button-layout { flex-direction:column; gap:24px; margin-bottom:40px; }
.button-layout div.flex { align-items:center; gap:8px; justify-content:center; }
.button-layout div.flex p { margin:auto; }
.gr-button a { align-items:center; background-color:var(--gr-1); border-radius:50px; color:var(--wh); gap:20px; justify-content:center; padding:16px; margin:auto; height:auto; max-width:100%; width:100%; }
.gr-button a .button-txt { font-size:20px; font-weight:700; line-height:28px; }
.gr-button a img { aspect-ratio:1/1; height:27.5px; width:27.5px; }

/* 共通項目まとめて */
.subscription, .management, .revised, .donation, .privilegesi, .application { margin-bottom:40px; }

/* 労山基金に加入するには */
.subscription p { margin-bottom:1rem; }
.subscription .ph-box { display:none; }

/* 基金の運営 */
.accordion-item { padding-top:20px; }
.square-title.red-square::before { color:#f00; }
.accordion-toggle { display:none; }
.accordion-title { align-items:flex-start; border-bottom:1px solid var(--bk); cursor:pointer; flex-direction:column; gap:18px; padding:8px 0 30px 0; position:relative; width:100%; }
.accordion-title::before, .accordion-title::after { border-right:2px solid var(--gr-2); border-bottom:2px solid var(--gr-2); transform:rotate(45deg); transition: transform.3s; position:absolute; right:16px; height:8px; width:8px; }
.accordion-title::before { top:1.25rem; transform:translateY(-6px) rotate(45deg); }
.accordion-title::after { top:1.25rem; transform:translateY(2px) rotate(45deg); }
.accordion-title h3 { color:var(--gr-2); font-size:18px; font-weight:700; }
.accordion-toggle:checked + .accordion-title::before { transform:translateY(-6px) rotate(-135deg); }
.accordion-toggle:checked + .accordion-title::after { transform: translateY(2px) rotate(-135deg); }
.accordion-content { overflow:hidden; transition:max-height.35s ease, padding .35s ease; padding:0 10px; max-height:0; }
.accordion-toggle:checked ~ .accordion-content { padding:20px 10px; max-height:100%; }
.open-item { margin-bottom:24px; }
.open-item .nomal-title, .open-item-02 .nomal-title { color:var(--gr-2); font-size:16px; font-weight:700; line-height:28px; margin-bottom:8px; }
.square-list li { display:flex; gap:8px; }
.square-list li::before { content:'■'; display:block; flex-shrink:0;  }
.square-list li.attention-icon::before { content:'※'; }
.open-item.last-item { margin-bottom:60px; }
.big-size { font-size:24px; font-weight:700; }
.open-item-02 { margin-bottom:24px; }
.tabel-base h3 { background-color:#c5fffa; font-size:18px; font-weight:700; justify-content:center; line-height:28px; padding:10px; }
.flex-block { display:block; }
.margin-r { margin-right:16px; }
.accordion-item .margin-b { margin-bottom:20px; }
.table-block { align-items:center; border-bottom:1px solid var(--bk); justify-content:space-between; padding:10px 5px; }
.table-block .small { font-size:12px; }

/* テーブルっぽいもの*基金の運営 */
h2.nyuin { color:var(--gr-2); font-size:18px; font-weight:700; margin-top:24px; }
.tabel-2 { margin:18px 0; width:100%; }
.tabel-2 thead, .tabel-2 tbody { border:1px solid var(--bk); box-sizing:border-box; }
.tabel-2 tbody { border-top:none; }
.tabel-2 tr { border-bottom:1px solid var(--bk); }
.tabel-2 td { padding:10px; }
.border-t { border-top:1px solid var(--bk); }
.border-r { border-right:1px solid var(--bk); }
.middle { vertical-align:middle; margin:auto; }
.bg-1 { background-color:#c5fffa; }
.bg-2 { background-color:#ffca3a; }
.additional-information { margin-top:16px; margin-bottom:50px; }
.additional-information h3 { font-size:18px; font-weight:700; margin-bottom:18px; }
.additional-information .disc-list { margin-bottom:18px; }
.additional-information .disc-list li { display:flex; gap:4px; }
.additional-information .disc-list li::before { content:'・'; display:block; flex:0 0 1; }
.additional-information .square-list li { font-weight:400; }

/* 新規加入申込書の用紙 */
.paper h3 { color:var(--gr-2); font-size:18px; font-weight:700; margin-bottom:8px; }
.paper-dl { padding:16px 0; }
.paper h3.paper-tag { align-items:center; background-color:var(--bk); color:var(--wh); display:flex; font-size:16px; font-weight:500; justify-content:center; line-height:24px; height:35px; width:120px; }
.paper-dl ul { gap:8px; margin-bottom:18px; }
.paper-dl ul li { gap:5px; }
.list-content { display:flex; gap:10px; }
.paper-dl ul li a { align-items:center; display:inline-flex; flex-shrink:0; justify-content:center; height:33px; width:33px; }
.paper-dl ul li a .icon { object-fit:contain; height:100%; width:100%; }
.sample-icon { align-items:center; border:1px solid var(--red-1); color:var(--red-1); flex-shrink:0; font-size:18px; font-weight:500; display:flex; justify-content:center; line-height:28px; letter-spacing:-0.9px; height:30px; width:45px; }

/* 交付手続き */
.accordion-toggle:checked ~ .accordion-content.step-content { padding:20px 0; }
.step { background-color:var(--ye-1); padding:24px 16px; }
.step-arrow { text-align:center; margin:50px auto; }
.step-arrow img { margin:auto; height:auto; width:60px; }
.step .step-title { margin-bottom:30px; }
.pen-title { align-items:center; font-size:26px; font-weight:700; display:flex; gap:16px; line-height:23px; margin:30px 0; }
.pen-title .pen-icon { aspect-ratio:1/1; height:38px; width:38px; }
.step-button { flex-direction:column; gap:16px; margin-bottom:33px; }
.step-button li { font-size:16px; font-weight:700; line-height:23px; }
.step-button li a { align-items:center; background-color:#ffca3a; gap:8.25px; justify-content:center; height:40px; width:100%; }
.step-button.step-button-2 li a { height:66px; }
.step-disc-list li { display:flex; }
.step-disc-list li::before { content:'・'; display:inline-block; flex-shrink:0; }
.step-button .icon { align-items:center; display:inline-flex; flex-shrink:0; justify-content:center; height:33px; width:33px; }
.step-button .icon.dl-icon { height:20px; width:20px; }
.step .sample-icon { align-items:center; border:1px solid var(--red-1); color:var(--red-1); font-size:18px; font-weight:500; display:flex; justify-content:center; line-height:28px; letter-spacing:-0.9px; height:30px; width:45px; }
.step .red { color:#ff595e; }

/* 基金改定のお知らせ */
.revised .gr-button { margin-bottom:10px; }
.revised-list { gap:16px; margin-top:16px; }
.revised-list li { color:var(--gr-1); font-size:16px; font-weight:700; line-height:28px; letter-spacing:-0.16px; }
.revised-list li a { align-items:center; gap:16px; }
.revised-list li img { aspect-ratio:1/1; height:33px; width:33px; }
.revised-list li .revised-desc { color:var(--bk); font-weight:500; }
.revised-list li .revised-desc a { color:#00f; text-decoration:underline; }

/* よくある質問（faq） */
.faq-item { border-bottom:1px solid var(--wh); box-sizing:border-box; }
.faq-q { align-items:center; background-color:var(--gr-1); cursor:pointer; color:var(--wh); font-size:18px; font-weight:700; justify-content:space-between; gap:10px; text-align:left; padding:10px 16px; width:100%; }
.faq-icon { flex-shrink:0; margin-top:4px; height:16px; width:16px; }
.faq-icon::before, .faq-icon::after { background-color:var(--wh); position:absolute; }
.faq-icon::before { top:50%; left:0; transform:translateY(-50%); transition:.3s; height:2px; width:100%; }
.faq-icon::after { left:50%; top:0; transform:translateX(-50%); transition:.3s; height:100%; width:2px; }
.faq-a { overflow:hidden; max-height:0; transition:max-height 0.3s ease; }
.faq-a p { padding:0 16px; margin:0; }
.faq-a p:first-child { padding-top:10px; }
.faq-a p:last-child { padding-bottom:10px; }
.faq-a p a { color:#00f; text-decoration:underline; }
.faq-q[aria-expanded="true"] .faq-icon::after { opacity:0; }

@container( max-width:385px ) {

/* ボタン */
.gr-button a .button-txt { font-size:18px; }

/* 基金改定のお知らせ */
.revised .gr-button { margin-bottom:10px; }
.revised-list li, .revised-list li p { font-size:14px; }
.revised-list li img { height:20px; width:20px; }

}

@container( max-width:399px ) {

/* テーブル処理 */
.tabel-2 tr td { font-size:14px; padding:7.5px 5px; }

}

@container( min-width:1000px ) {

/* 見出し */
.point { flex-direction:row; gap:40px; margin-bottom:80px; }
.point h2 { margin-bottom:0; }
.point .sub-title { margin-bottom:0; }

/* 12のポイントリスト */
.point-list { flex-direction:row; flex-wrap:wrap; gap:80px 30px; }
.point-list li { flex:0 0 calc((100% - 80px) / 3); padding:35px 24px; }

/* アニメーション - 12のポイント */
.anime-let { aspect-ratio:155/179; bottom:20px; right:auto; left:50%; transform:translateX(-50%); height:179px; width:auto; }
.anime-hat { bottom:50px; }

/* ボタン */
.button-layout { align-items:flex-start; flex-direction:row; gap:50px; justify-content:center; margin-bottom:80px; }
.button-layout .flex { max-width:50%; width:100%; }
.button-layout .flex a.flex { height:84px; max-width:100%; }

/* 共通項目まとめて */
.subscription, .management, .revised, .donation, .privilegesi, .application { margin-bottom:70px; }

/* 労山基金に加入するには */
.subscription .flex { align-items:flex-end; gap:20px; }
.subscription .txt-box { max-width:calc( 100% - ( 261px + 20px ) ) }
.subscription .ph-box { display:block; height:auto; max-width:261px; }
.subscription .ph-box img { height:auto; width:261px; }

/* 基金の運営 */
.accordion-title h3 { font-size:20px; }
.accordion-title::before, .accordion-title::after { height:12px; width:12px; }
.accordion-title::before { top:60px; }
.accordion-title::after { top:60px; }
.open-item { border-top:1px solid var(--bk); border-right:1px solid var(--bk); border-left:1px solid var(--bk); display:grid; grid-template-columns:180px 1fr; margin-bottom:0; }
.open-item.last-item { border-bottom:1px solid var(--bk); margin-bottom:72px; }
.open-item .nomal-title { align-self:stretch; align-items:center; background-color:#c5fffa; display:flex; padding:16px; margin-bottom:0;  }
.open-item-02 h3.nomal-title { font-size:20px; }
.open-item .item-text { border-left:1px solid var(--bk); padding:16px; margin-bottom:0; }
.tabel-base { display:flex; gap:20px; margin-bottom:14px; }
.tabel-base h3 { align-items:center; flex-direction:column; justify-content:center; width:150px; }
.tabel-base h3 .margin-r { padding-bottom:20px; margin-right:0; }
.table-block { justify-content:space-between; }
.table-block p { width:33%; }
.table-cell-block { flex:1; }
.first-text br, .right br { display:none; }

/* テーブルっぽいもの*基金の運営 */
h2.nyuin { font-size:20px; }
.additional-information { margin-bottom:70px; }

/* 新規加入申込書の用紙 */
.paper h3 { font-size:20px; line-height:28px; margin-bottom:18px; }
.paper-dl ul { gap:19px; }
.list-content { gap:16px; }


/* 交付手続き */
.accordion-toggle:checked ~ .accordion-content.step-content { padding:20px 0; }
.step { padding:38px 75px; }
.step-arrow { margin:-20px auto; }
.step-button { flex-direction:row; }
.step-button li a { width:225px; }

/* 基金改定のお知らせ */
.revised .gr-button a { justify-content:center; margin-left:0; height:66px; max-width:385px; width:100%; }
.revised-list { gap:25px; }
.revised-list li, .revised-list li p { font-size:18px; }

}

/* -------------------------------------------------- */
/* 短期掛け捨てプラン */
/* -------------------------------------------------- */

/* 見出し */
.short-term .square-title.red-square::before { color:#ff595e; }
.plan-item h2 { color:#ff595e; font-size:18px; font-weight:700; gap:8px; margin-bottom:16px; }
.plan-item h2::before { content:'●'; color:#ff595e; }
.plan-item-2 h3 { align-items:center; background-color:var(--bk); color:var(--wh); flex-shrink:0; font-size:16px; font-weight:500; justify-content:center; height:35px; width:120px; }

/* リード文 */
.read-content { border-bottom:1px solid var(--bk); padding-bottom:33px; }

/* リスト */
.read-content ul { margin-top:8px; }
.read-content ul li { font-size:14px; font-weight:500; line-height:23px; }
.plan-item-2 ul { margin-top:5px; }
.plan-item-2 ul li { font-size:14px; font-weight:500; line-height:22px; }
.plan-item-2 ul li span.red { color:#ff595e; font-size:16px; line-height:23px; }

/* プラン内容 */
.plan-flex { gap:30px; padding:25px 0; }
.plan-text { border-left:1px solid #ff595e; padding-left:16px; margin-left:8px; }
.plan-text .kakomi { border:1px solid var(--bk); padding:16px; margin-bottom:32px; }
.plan-content-2 { gap:30px; margin-top:32px; }
.plan-item-2 div.flex { flex-direction:column; gap:5px; }
.plan-text .color-gr-2 { font-size:18px; font-weight:500; line-height:23px; margin-top:25px; margin-bottom:30px; }
.kakomi-2 { border:1px solid var(--gr-1); padding:20px; }
.kakomi-2 ul { gap:19px; }
.kakomi-2 ul li { align-items:center; gap:16px; }
.kakomi-2 .icon { flex-shrink:0; object-fit:contain; height:33px; width:33px; }
.bottom-arrow { text-align:center; margin:11px auto; }
.bottom-arrow svg { margin:auto; }

/* 申し込み送付先 */
.plan-contact { flex-direction:column; gap:20px; }
.plan-contact h3 { align-items:center; background-color:var(--bk); color:var(--wh); display:flex; font-size:16px; font-weight:500; justify-content:center; line-height:23px; margin:auto; height:35px; width:130px; }
.contact-email { display:flex; font-size:34px; font-weight:700; gap:10px; line-height:28px; }
.contact-email svg { object-fit:contain; height:30px; width:auto; }

@container( max-width:399px ) {

/* 申し込み送付先 */
.contact-email { font-size:24px; }

}

@container( min-width:1000px ) {

/* リスト */
.read-content ul { margin-top:25px; }

/* プラン内容 */
.plan-item-2 div.flex { flex-direction:row; gap:24px; }
.plan-text { padding-left:28px; }
.kakomi-2 { max-width:600px; }
.bottom-arrow { display:flex; justify-content:flex-start; margin-left:0; max-width:600px; width:100%; }
.kakomi-2 ul li { justify-content:space-between; }

/* 申し込み送付先 */
.plan-contact { flex-direction:row; justify-content:flex-start; }
.plan-contact h3 { margin:0; }

}

/* -------------------------------------------------- */
/* ココヘリ */
/* -------------------------------------------------- */

/* 見出し */
.cocoheri { color:var(--gr-2); font-size:18px; font-weight:700; line-height:28px; margin-top:20px; margin-bottom:18px; }

/* 画像 */
.cocoheri-img { margin-top:16px; }

@container( min-width:1000px ) {

/* 見出し */
.cocoheri { font-size:20px; }

/* 画像 */
.cocoheri-img img { margin-top:24px; height:auto; width:630px; }

}

/* -------------------------------------------------- */
/* 労山基金各種申請書 */
/* -------------------------------------------------- */

/* ベース */
.acc-4 { margin-bottom:40px; }
.various .first-content { padding:30px 0; }
.various .red { color:#ff595e; }

/* 見出し */
.square-title.red-square { align-items:flex-start; }
.square-title.red-square::before { color:#ff595e; }

/* 最初のコンテンツ */
.first-content .strong { font-size:24px; font-weight:700; }
.first-content p.first-text { margin-bottom:25px; }
.first-content ul { align-items:center; flex-direction:column; gap:25px; }
.first-content ul li { background-color:var(--ye-1); box-shadow:5px 5px 0 #a3a29d; padding:20px; max-width:270px; width:100%; }
.first-content ul li p.flex { align-items:center; font-size:16px; font-weight:700; gap:9px; line-height:20px; margin:auto; width:fit-content; }
.first-content ul li p.flex span.nmb { font-size:30px; }
.first-content ul li p.flex span.small { font-size:12px; line-height:20px; }
.icon-area { border-bottom:1px solid var(--bk); text-align:center; padding-bottom:20px; margin-bottom:20px; }
.mail-image img { height:auto; max-width:40px; width:100%; }
.various-button a { align-items:center; background-color:var(--wh); border:1px solid #ff595e; border-radius:30px; font-size:12px; font-weight:700; justify-content:center; padding:5px 10px; margin:auto; margin-top:15px; height:30px; width:90%; }

/* コンテンツ */
.lineup { gap:20px; }
.lineup p { align-items:center; gap:16px; justify-content:flex-start; }
.lineup p.flex img.icon { height:33px; width:33px; } 
.lineup p.flex span.flex { gap:10px; }
.lineup .sample-icon { align-items:center; border:1px solid var(--red-1); color:var(--red-1); display:flex; font-size:18px; font-weight:500; display:flex; justify-content:center; line-height:28px; letter-spacing:-0.9px; height:30px; width:45px; }

/* カコミ1 */
.various-kakomi { border:1px solid var(--gr-2); padding:15px; }
.various-kakomi div.flex { align-items:center; gap:20px; justify-content:space-between; margin-top:20px; }
.various-kakomi div.flex p a.flex { align-items:center; background-color:var(--bk); color:var(--wh); height:35px; max-width:225px; width:100%; }
.various-kakomi p.red { margin-top:20px; }
.various-kakomi .image-icon { display:none; }
.various-kakomi .qr { height:48px; width:48px; }

/* カコミ2 */
.various-kakomi-2 { border:1px solid var(--gr-1); margin-bottom:40px; }
.various-kakomi-2 h2 { background-color:var(--gr-1); color:var(--wh); font-size:16px; padding:5px 10px; }
.various-kakomi-2 h2 .big { font-size:20px; }
.various-kakomi-2 div.flex { gap:20px; padding:15px; }

@container( max-width:399px ) {

/* カコミ1 */
.various-kakomi div.flex p a.flex { font-size:14px; }
.various-kakomi div.flex p.long a.flex { font-size:10px; }

}

@container( min-width:1000px ) {

/* ベース */
.acc-4 { margin-bottom:70px; }

/* 最初のコンテンツ */
.first-content ul { align-items:stretch; flex-direction:row; gap:50px; justify-content:center; }

/* カコミ1 */
.various-kakomi { margin:auto; max-width:610px; width:100%; }
.various-kakomi div.flex { justify-content:center; }
.various-kakomi .image-icon { display:inline-block; height:auto; width:30px; }
.various-kakomi div.flex p a.flex { padding:0 10px; max-width:100%; width:fit-content; }

/* カコミ2 */
.various-kakomi-2 { margin:auto; margin-bottom:40px; max-width:670px; width:100%; }
.various-kakomi-2 h2 br { display:none; }

}