@charset "utf-8";

.page_ttl {
    margin: 0;
    color: #fff;
    font-weight: 800;
    font-size: clamp(28px, 5.2vw, 56px);
    letter-spacing: .25em;
    -webkit-text-stroke: 1px rgba(6, 172, 132, .9);
    text-shadow: 0 0 17px #fff, 0 0 10px #fff;
}

/* ===================== Hero ===================== */
.page_ttl_wrap{
  --hero: url(../img/cadcam_ttl_back.jpg);
  --tint: rgba(17,176,143,.35);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(220px, 28vw, 360px);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-image: var(--hero);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.is-sub .page_ttl_wrap{ padding: 20px 16px; }
.page_ttl_wrap::before{
  content:"";
  position:absolute; inset:0;
  background:var(--tint);
  z-index:-1;
}

/* ===================== Common ===================== */
section{ max-width:1200px; margin:0 auto; line-height:1.8; color:#333; }
.section-title{ text-align:-webkit-center; margin-top:80px; }
.cadcam_expln p{ max-width:900px; margin:50px auto 100px; }

/* ===================== Pros & Cons ===================== */
.pc-section{
  width:min(1080px, 92vw);
  margin:100px auto 60px;
  color:#333;
  font-family:"Noto Sans JP", system-ui, -apple-system, sans-serif;
}
.pc-title{
  display:flex; align-items:center; justify-content:center; gap:.6em;
  text-align:center; font-weight:800;
  font-size:clamp(17px, 3.6vw, 32px);
  letter-spacing:.12em; color:#344054;
  margin:0 0 60px;
}
.pc-title__icon{ width:28px; height:28px; object-fit:contain; vertical-align:middle; display:inline-block; }

.pc-board{
  background:#e9fbf5; border-radius:26px;
  padding: clamp(18px, 3.6vw, 34px);
  padding-bottom:100px;
}

/* 2列→1列 */
.pc-panels{
  display:grid; gap:clamp(18px, 3vw, 36px);
  grid-template-columns:1fr 1fr;
}
@media (max-width: 860px){
  .pc-panels{ grid-template-columns:1fr; }
}

/* 各パネル */
.pc-panel{
  position:relative; border-radius:18px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow:0 6px 18px rgba(0,0,0,.04) inset;
  overflow:hidden;
  padding-bottom:250px; /* 右下装飾のぶん */
}
.pc-panel.merit{   background:#ffe7e3; }
.pc-panel.demerit{ background:#eef6df; }

/* 初期(テキスト) → 後ろで画像に上書き */
.pc-panel.merit::after,
.pc-panel.demerit::after{
  position:absolute; right:20px; bottom:10px; opacity:.15;
  font-size:clamp(42px, 8vw, 72px);
  font-weight:700; font-style:italic; letter-spacing:.02em;
  color:#1db397; content:""; pointer-events:none;
}
.pc-panel.merit::after{   content:"Merit"; }
.pc-panel.demerit::after{ content:"Demerit"; }

/* ピル */
.pc-chip{
  display:inline-block; color:#fff; font-weight:800; letter-spacing:.16em;
  padding:.55em 2.2em; border-radius:999px;
  background: radial-gradient(#ffffff33 2px, transparent 3px) 0 0/16px 16px, #f59b84;
}
.pc-chip.-green{
  background: radial-gradient(#ffffff33 2px, transparent 3px) 0 0/16px 16px, #6ac76f;
}

/* リスト */
.pc-list{ list-style:none; margin:12px 0 0; padding:0; }
.pc-list li{
  position:relative; padding-left:2.1em; margin:1.2em 0; line-height:1.9;
}
.pc-list li::before{
  content:""; position:absolute; left:0; top:.35em;
  width:18px; height:18px; border:2px solid #747474; border-radius:4px;
}
.pc-list li::after{
  content:""; position:absolute; left:6px; top:.45em; width:6px; height:11px;
  border-right:3px solid #11b08f; border-bottom:3px solid #11b08f; transform:rotate(45deg);
}
.pc-list.-cons li::before{ border-color:#747474; }
.pc-list.-cons li::after{  border-color:#11b08f; }

/* 装飾画像に差し替え */
.pc-panel.merit::after,
.pc-panel.demerit::after{
  content:""; right:clamp(12px, 2vw, 20px); bottom:clamp(8px,1.2vw,14px);
  width:clamp(160px, 28vw, 260px); height:clamp(36px, 6vw, 66px);
  background-repeat:no-repeat; background-position:right bottom; background-size:contain;
  opacity:.22; font-size:0; letter-spacing:0; font-style:normal; font-weight:400; color:transparent;
}
.pc-panel.merit::after{   background-image:url("../img/merit.png"); }
.pc-panel.demerit::after{ background-image:url("../img/demerit.png"); }

/* ====== Tablet/Phone tweaks for Pros&Cons ====== */
@media (max-width: 900px){
  .pc-section{ margin: 0 auto; margin-top: 60px;}
  .pc-board{ padding-bottom:60px; }
  .pc-panel{ padding-bottom:200px; }
}
@media (max-width: 560px){
  .pc-title{ margin-bottom:32px; }
  .pc-board{ padding:18px; }
  .pc-panel{ padding:16px; padding-bottom:150px; }
  .pc-list li{ margin: .9em 0; }
  .pc-list li::before{ width:16px; height:16px; }
  .pc-list li::after{ left:5px; top:.5em; }
}

/* ===================== 比較表 ===================== */
.compare-section{ padding:60px 20px; background:#fff; text-align:center; color:#333; font-size:15px; line-height:1.8; margin-bottom:90px; }
.compare-title{ font-size:24px; font-weight:500; margin-bottom:28px; display:flex; align-items:center; justify-content:center; gap:8px; }
.compare-title .icon{ width:28px; height:auto; }
.table-wrap,
.compare-table-wrap{ overflow-x:auto; margin-bottom:24px; margin-top:60px; -webkit-overflow-scrolling:touch; }
.compare-table{ width:100%; max-width:900px; margin:0 auto; border-collapse:collapse; text-align:center; border:2px solid #1ac1a2; min-width:700px; }
.compare-table th, .compare-table td{ border:1px solid #1ac1a2; padding:14px 10px; width:25%; }
.compare-table thead th{ background:#e6f7ef; font-weight:600; }
.compare-table .highlight{ background:#fffbea; }
.compare-note{ max-width:900px; margin:0 auto; line-height:1.9; background: #ffffa9; padding: 20px 10px;}

@media (max-width: 768px){
  .compare-title{ font-size:20px; }
  .compare-table th, .compare-table td{ font-size:13px; padding:10px; }
  .compare-note{ font-size:13px; line-height:1.7; }
}
@media (max-width: 480px){
  .compare-title{ font-size:18px; }
  .table-wrap, .compare-table-wrap{ margin-top:32px; }
}

/* ===================== 適用条件 ===================== */
.condition-section{ padding:60px 20px; max-width:1100px; margin:0 auto; }
.condition-title{ text-align:center; font-size:26px; font-weight:500; margin-bottom:20px; }
.condition-title span{ color:#18a48a; }
.condition-lead{ font-size: 15px; line-height: 1.8; margin: 0 auto; margin-bottom: 30px; width: min(1080px, 92vw);}
.condition-lead .red{ color:#d33; font-weight:bold; }
.condition-inner{ display:flex; align-items:flex-start; gap:108px; }
.condition-text{ flex:0 0 50%; font-size:15px; line-height:1.8; }
.condition-text h3{ font-size:30px; margin:20px 0 10px; display:flex; align-items:center; gap:8px; }
.condition-text h3::before{ content:"🦷"; font-size:20px; color:#18a48a; }
.condition-text p{ margin:0 0 12px; }
.condition-text ol{ margin:0 0 12px; }
.condition-text li{ margin-bottom:6px; }
.condition-text small{ font-size:13px; color:#555; }
.condition-image{ flex:0 0 41%; text-align:center; }
.condition-image img{ max-width:90%; height:auto; }

@media (max-width: 980px){
  .condition-inner{ gap:48px; }
}
@media (max-width: 768px){
  .condition-inner{ flex-direction:column; gap:24px; }
  .condition-text, .condition-image{ flex:100%; max-width:100%; margin: 0px auto 30px; width: min(1080px, 92vw);}
  .condition-image img{ max-width:70%; margin: 0 auto;}
  .condition-text h3{ font-size:18px; }
  .cadcam_expln p { margin-bottom: 0;}
  .compare-section { margin-bottom: 0;}
 .condition-title {font-size: 22px;}
}
@media (max-width: 480px){
  .condition-image img{ max-width:86%; margin: 0 auto;}
}

/* ===================== FAQ ===================== */
.faq-sec{
  --accent:#10bea7; --accent-deep:#0fb69f; --bg:#e9fbf5; --border:#1bc9b3;
  --flower:url("../img/kusa.png");
  width:min(1100px, 92vw);
  margin:150px auto;
  font-family:"Noto Sans JP", system-ui, -apple-system, sans-serif;
  color:#333;
}
.faq-sec__heading{
  position:relative; background:var(--accent); color:#fff; border-radius:8px;
  padding:18px 24px; text-align:center; font-weight:800; letter-spacing:.18em;
  font-size:clamp(22px, 3.8vw, 36px); line-height:1; overflow:hidden;
}
.faq-sec__heading::before{
  content:""; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:48px; height:48px; background-image:var(--flower); background-repeat:no-repeat;
  background-position:center; background-size:contain; filter:brightness(0) invert(1); opacity:.9;
}
@media (max-width:520px){ .faq-sec__heading::before{ display:none; } }

.faq-card{ background:var(--bg); border-radius:18px; padding:clamp(18px, 3.5vw, 40px); margin-top:24px; }
.faq-list{ display:grid; gap:30px; }
.faq-row{ background:#fff; border:2px solid var(--border); border-radius:8px; overflow:hidden; }
.faq-row__head{
  list-style:none; display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:14px; padding:18px 20px; cursor:pointer;
}
.faq-row__head::-webkit-details-marker{ display:none; }
.q-badge{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:20px;
}
.faq-row__q{ letter-spacing:.02em; }
.acc-plus{ position:relative; width:28px; height:28px; }
.acc-plus::before,
.acc-plus::after{
  content:""; position:absolute; left:50%; top:50%; width:18px; height:2px;
  background:#6b7280; border-radius:2px; transform:translate(-50%,-50%);
}
.acc-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-row[open] .acc-plus::after{ opacity:0; }
.faq-row__body{
  padding:16px 20px 20px 78px; border-top:1px dashed #bdebe3;
  line-height:1.9; color:#444;
}

@media (max-width: 640px){
  .faq-sec{ margin:30px auto; }
  .faq-list{ gap:18px; }
  .faq-row__head{ padding:14px 16px; }
  .q-badge{ width:36px; height:36px; font-size:18px; }
  .faq-row__body{ padding:14px 16px 18px; }
}

/* ===== Hero & intro spacing on small screens ===== */
@media (max-width: 560px){
  .page_ttl_wrap{ min-height: 200px; }
  .cadcam_expln p{ font-size: 16px; text-align: left; width: min(1080px, 92vw);  margin-bottom: 0; margin-top: 30px;}
  .condition-text ol {font-size:16px;}
}