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

/* ベース */
.service-content .content { padding:0; margin-bottom:56px; }

@container( min-width:1000px ) {

/* ベース */
.service-content .content { margin-bottom:160px; }

}

/* -------------------------------------------------- */
/* 主なサービス */
/* -------------------------------------------------- */

/* リスト */
.service-list { flex-direction:column; gap:40px; margin:0 20px; }
.service-card { background-color:var(--card); border-radius:15px; gap:24px; padding:24px; }

/* カード内容 */
.service-card h3 { border-bottom:1px solid var(--bk); font-size:20px; line-height:32px; letter-spacing:3px; padding-bottom:4px; margin:0 auto; width:fit-content; }
.card-ph img { pointer-events:none; margin:auto; height:90px; width:auto; }
.card-content p, .card-content ul li { font-size:16px; line-height:30px; }
.card-content p, .card-content ul li { font-family:"Zen Maru Gothic", sans-serif; }
.card-content ul li { display:flex; }
.card-content ul li::before { content:'・'; flex-shrink:0; }

/* 追加コンテンツ */
.subcontent-title { border:1px solid var(--bk); border-radius:40px; font-size:16px; letter-spacing:1.6px; padding:2px 20px; margin:auto; margin-bottom:8px; width:fit-content; }
.sub-list { gap:40px; justify-content:center; }
.sub-list li a { align-items:center; gap:8px; }
.sub-list li a::after { aspect-ratio:1/1; background-image:url('../img/icon/icon-blank.svg'); background-position:center; background-repeat:no-repeat; background-size:contain; display:block; height:24px; width:24px; }

@container( min-width:1000px ) {

/* リスト */
.service-list { flex-direction:row; flex-wrap:wrap; gap:70px; justify-content:center; margin:auto; max-width:1000px; width:100%; }
.service-card { box-sizing:border-box; justify-content:flex-start; padding:38px; max-width:calc( 50% - 70px ); width:100%; }

}

/* -------------------------------------------------- */
/* データで見る概要 */
/* -------------------------------------------------- */

/* リスト */
.data-list { display:grid; grid-template-columns:1fr; gap:24px; margin:0 20px; max-width:100%; }
.data-card { background-color:var(--ye-2); border-radius:15px; padding:24px 0; }
.data-card h3 { border-bottom:1px solid var(--bk); font-size:20px; line-height:36px; letter-spacing:3px; padding-bottom:8px; margin:auto; margin-bottom:16px; width:60%; }

/* カードの中身 */
.user-data { margin:auto; width:fit-content; }
.user-data p { font-size:20px; line-height:32px; }
.user-count.year, .patients-count { font-size:40px; line-height:64px; }
.user-count.month { font-size:36px; line-height:41px; }
.year-data { font-size:16px; line-height:32px; letter-spacing:2.4px; } 
.staff-box { align-items:center; gap:30px; justify-content:center; }
.box-r { background-color:var(--wh); border-radius:10px; flex:0 0 1; justify-content:center; gap:16px; padding:24px; }
.box-r::before { background-color:var(--wh); clip-path:polygon(100% 0, 0 50%, 100% 100%); display:inline-block; position:absolute; top:50%; left:-20px; transform:translateY(-50%); height:25px; width:20px; }
.box-r p.flex { align-items:center; gap:20px; justify-content:space-between; }
.staff-count { color:var(--gr-1); font-size:32px; line-height:30px; }

@container( max-width:400px ) { 

/* カードの中身 */
.box-r { padding:24px 16px; }
.box-r p { font-size:14px; }

}  

@container( min-width:1000px ) {

/* リスト */
.data-list { grid-template-columns:repeat(2, 1fr); gap:25px; margin:auto; margin-bottom:160px; max-width:1000px; width:100%; }
.data-list > li:nth-child(3) { grid-column:1 / -1; }
.data-card h3 { width:fit-content; }

/* カードの中身 */
.user-data p { text-align:center; }
p.line-year { font-size:32px; line-height:57px; }
p.line-month { font-size:18px; line-height:175%; }
p.line-patients { font-size:39px; line-height:175%; }
.user-count.year { font-size:72px; line-height:72px; }
.patients-count, .staff-count { font-size:88px; line-height:88px; }
.box-r { padding:26px 60px; }
.box-r p.flex .staff-count { font-size:42px; line-height:30px; }
.user-count.month { font-size:42px; }
.box-r p.flex { align-items:flex-start; flex-direction:column; gap:8px; }
.box-r p.flex br { display:none; }

}

/* -------------------------------------------------- */
/* ご利用をお考えの方へ */
/* -------------------------------------------------- */

/* ベース */
.use-block { padding:0 20px; margin-bottom:40px; }

/* テキスト */
.use-block h2.ai-midashi { font-size:20px; margin-bottom:8px; }
.use-block p { line-height:30px; }

/* テーブル */
.price-list { border-radius:20px; overflow:hidden; margin-top:24px; width:100%; }
.price-list table { border-collapse:separate; border-spacing:4px; height:100%; width:100%; }
.price-list table th, .price-list table td, .price-list table td p { font-size:12px; }
.price-list table th { background-color:var(--gr-3); text-align:center; padding:8px; vertical-align:middle; }
.price-list table td { background-color:var(--ye-2); padding:8px; vertical-align:middle; }
.price-list table td p { padding:0; line-height:20px; }
.price-list table td .vr { letter-spacing:5px; writing-mode:vertical-rl; }

@container( min-width:1000px ) {

/* ベース */
.use-block { padding:0; margin:auto; margin-bottom:40px; max-width:1000px; width:100%; }

/* テキスト */
.use-block h2.ai-midashi { font-size:24px; padding-bottom:15px; margin-bottom:32px; }
.use-block p { padding:0 20px; }

/* テーブル */
.price-list { border-radius:30px; margin:auto; margin-top:24px; width:80%; }
.price-list table th, .price-list table td, .price-list table td p { font-size:18px; line-height:173%; }
.price-list table th { padding:12px; }
.price-list table td { padding:12px; }
.price-list table th, .price-list table td p { white-space:nowrap; }
.price-list table td .vr { letter-spacing:0; writing-mode:horizontal-tb; white-space:nowrap; }

}

/* -------------------------------------------------- */
/* よくあるご質問 */
/* -------------------------------------------------- */

/* ベース */
.faq { gap:18px; padding:0 20px; }

/* アイコン */
.faq-item .q { color:var(--gr-2); font-size:28px; line-height:36px; }
.faq-item .a { color:#f9ad07; font-size:28px; line-height:28px; }

/* ボタン */
.faq-question { align-items:center; cursor:pointer; gap:10px; justify-content:space-between; width:100%; }
.faq-q-item { align-items:center; gap:20px; }
.faq-question .icon { flex-shrink:0; height:16px; width:16px; }
.faq-question .icon::before, .faq-question .icon::after { background-color:var(--gr-2); position:absolute; }
.faq-question .icon::before { top:7px; left:0; height:2px; width:16px; }
.faq-question .icon::after { top:0; left:7px; transition:opacity 0.2s; width:2px; height:16px; }
.faq-question[aria-expanded="true"] .icon::after { opacity:0; }

/* テキスト */
.faq-item .text, .answer-text p { font-size:16px; line-height:30px; }

/* 展開部分 */
.faq-answer { overflow:hidden; transition:max-height 0.3s ease; max-height:0; }
.answer-inner { align-items:flex-start; gap:20px; padding-top:20px; }
.answer-inner .a { flex-shrink:0; }

@container( min-width:1000px ) {

/* ベース */
.faq { padding:0; margin:auto; max-width:1000px; width:100%; }

/* ボタン */
.faq-question, .faq-answer { margin:auto; max-width:820px; width:100%; }


/* テキスト */ 
.faq-item .text, .answer-text p { font-size:18px; line-height:32px; }

}