/* PICO LASER treatment page */
@import url("./density-style.css");

.page-pico .hifu-hero-title {
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing: 0.1em;
}

.page-pico .hifu-hero-title small {
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.page-pico .hifu-benefits {
  grid-template-columns: repeat(4, 1fr);
}
.pico-benefit{
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-pico .concern-grid {
  grid-template-columns: repeat(4, 1fr);
}
.pico-concern-item{
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 20px;
  background: #fff;
  border: 1px solid #ebe6df;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(14, 35, 70, 0.08);
}

.pico-concern-icon {
  /* flex: 0 0 40px; */
  /* margin: auto; */
  width: 40px;
  height: 40px;
  color: var(--gold);
}

.pico-concern-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

.pico-concern-item p {
  margin: 0;
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: 13px;
  line-height: 1.75;
  color: #3a4558;
}
.about-pico-container {
   display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.about-pico-grid {
  gap: 48px;
  align-items: center;
  padding: 16px;
  background: #fff;
  border: 1px solid #ebe6df;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(14, 35, 70, 0.08);
}
.about-pico-text-container{
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
  padding: 44px;
  background: #fff;
  border: 1px solid #ebe6df;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(14, 35, 70, 0.08);
}
.about-pico-text p {
  margin: 0 0 16px;
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: 14px;
  line-height: 2;
  color: #3a4558;
}
.pico-heading{
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.04em;
  margin: 0;
}
.page-pico .pico-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.page-pico .pico-compare-item {
  padding: 24px 14px;
  background: #fff;
}

.page-pico .pico-compare-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 6px;
}

.page-pico .pico-compare-item h3 {
  margin: 0 0 6px;
  font-family: var(--gb-serif, "Noto Serif JP", serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

.page-pico .pico-compare-item p {
  margin: 0;
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: 11px;
  line-height: 1.7;
  color: #3a4558;
}

.page-pico .pico-case-note {
  margin: 8px 0 0;
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: 10px;
  line-height: 1.65;
  color: var(--muted);
}

/* —— 施術メニュー cards —— */
.page-pico .pico-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.page-pico .pico-menu-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 8px;
  overflow: hidden;
}

.page-pico .pico-menu-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3f1ee;
}

.page-pico .pico-menu-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-pico .pico-menu-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 18px 18px;
}

.page-pico .pico-menu-body h3 {
  margin: 0 0 10px;
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
}

.page-pico .pico-menu-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.page-pico .pico-menu-tags span {
  padding: 3px 10px;
  border: 1px solid #d8d3cb;
  border-radius: 4px;
  background: #fff;
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.4;
}

.page-pico .pico-menu-desc {
  margin: 0 0 14px;
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: 12px;
  line-height: 1.85;
  color: #3a4558;
}

.page-pico .pico-menu-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.page-pico .pico-menu-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: 12px;
  line-height: 1.6;
}

.page-pico .pico-menu-label {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 4px;
  background: #f5ebe0;
  color: var(--navy);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.page-pico .pico-menu-value {
  flex: 1 1 auto;
  color: #3a4558;
  padding-top: 2px;
}

.page-pico .pico-menu-link {
  display: block;
  margin-top: auto;
  text-align: center;
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.page-pico .pico-menu-link:hover {
  color: var(--gold);
}

.page-pico .price-table-wrap {
  overflow: hidden;
}

.page-pico .price-table {
  width: 100%;
}

.page-pico .pico-doctor-insta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.page-pico .pico-doctor-panel,
.page-pico .pico-insta-panel {
  padding: 24px 22px;
  background: #fff;
  border: 1px solid #ebe6df;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(14, 35, 70, 0.08);
}

.page-pico .pico-doctor-inner {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: start;
}

.page-pico .pico-doctor-inner img {
  width: 100%;
  border-radius: 6px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}

.page-pico .pico-doctor-role {
  margin: 0 0 4px;
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: 11px;
  color: var(--gold);
}

.page-pico .pico-doctor-name {
  margin: 0 0 10px;
  font-family: var(--gb-serif, "Noto Serif JP", serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
}

.page-pico .pico-doctor-msg {
  margin: 0 0 14px;
  font-family: var(--gb-sans, "Noto Sans JP", sans-serif);
  font-size: 12px;
  line-height: 1.85;
  color: #3a4558;
}

.page-pico .pico-insta-panel h3 {
  margin: 0 0 8px;
  font-family: var(--gb-serif, "Noto Serif JP", serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
}

.page-pico .pico-insta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 0;
}

.page-pico .pico-insta-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}

@media (max-width: 1100px) {
  .page-pico .concern-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-pico .pico-menu-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .page-pico .pico-doctor-insta {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-pico-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* —— SP: pico laser page —— */
@media (max-width: 900px) {
  .page-pico .hifu-section {
    padding: 40px 0;
  }

  .page-pico .hifu-heading {
    margin-bottom: 24px;
    font-size: clamp(18px, 4.5vw, 22px);
  }

  .page-pico .hifu-benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 8px;
  }

  .page-pico .pico-benefit {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  .page-pico .pico-benefit p {
    font-size: 11px;
    line-height: 1.5;
  }

  .page-pico .pico-benefit p br {
    display: none;
  }

  .page-pico .hifu-benefit-icon {
    width: 36px;
    height: 36px;
  }

  .about-pico-text-container {
    padding: 24px 20px;
  }

  .page-pico .pico-heading {
    font-size: 20px;
  }

  .about-pico-text p {
    font-size: 12px;
    line-height: 1.85;
  }

  .page-pico .pico-concern-item {
    padding: 14px 12px;
  }

  .page-pico .pico-concern-item p {
    font-size: 12px;
  }

  .page-pico .feature-card {
    padding: 20px 14px;
  }

  .page-pico .feature-card p br {
    display: none;
  }

  .page-pico .dp-cases-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .page-pico .dp-case-content {
    padding: 12px 14px;
  }

  .page-pico .dp-case-meta > div {
    grid-template-columns: 56px 1fr;
    gap: 6px;
  }

  .page-pico .downtime-faq-grid {
    gap: 28px;
  }

  .page-pico .pico-doctor-panel,
  .page-pico .pico-insta-panel {
    padding: 20px 18px;
  }

  .page-pico .tl-doctor-btn,
  .page-pico .tl-insta-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .page-pico .hifu-section {
    padding: 32px 0;
  }

  .page-pico .hifu-section > .container,
  .page-pico .about-pico-container {
    width: min(1312px, 92vw);
  }

  .page-pico .hifu-heading {
    margin-bottom: 20px;
    font-size: 17px;
  }

  .page-pico .concern-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .page-pico .pico-compare {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page-pico .pico-compare-item {
    padding: 18px 12px;
  }

  .page-pico .feature-grid {
    gap: 12px;
  }

  .page-pico .feature-card {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    padding: 16px 14px;
  }

  .page-pico .feature-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  .page-pico .feature-card h3 {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .page-pico .feature-card p {
    font-size: 11px;
  }

  .page-pico .pico-menu-body {
    padding: 16px 14px 14px;
  }

  .page-pico .pico-menu-body h3 {
    font-size: 15px;
  }

  .page-pico .pico-menu-info-row {
    flex-direction: column;
    gap: 4px;
  }

  .page-pico .pico-menu-label {
    align-self: flex-start;
  }

  .page-pico .dp-cases-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Downtime table → stacked rows */
  .page-pico .downtime-table {
    display: block;
    border-radius: 8px;
  }

  .page-pico .downtime-table tbody {
    display: block;
  }

  .page-pico .downtime-table tr {
    display: block;
    border-bottom: 1px solid #eee;
  }

  .page-pico .downtime-table tr:last-child {
    border-bottom: none;
  }

  .page-pico .downtime-table th,
  .page-pico .downtime-table td {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-bottom: none;
  }

  .page-pico .downtime-table tbody th {
    padding-bottom: 4px;
    background: #faf8f5;
    font-size: 12px;
  }

  .page-pico .downtime-table tbody td {
    padding-top: 0;
    padding-bottom: 12px;
    font-size: 11px;
  }

  .page-pico .faq-item summary {
    font-size: 12px;
    padding: 12px 14px;
  }

  .page-pico .faq-item p {
    font-size: 11px;
    padding: 0 14px 12px;
  }

  .page-pico .note {
    font-size: 10px;
    line-height: 1.7;
  }

  /* Price table — stacked cards (no horizontal scroll) */
  .page-pico .price-table {
    display: block;
    min-width: 0;
    font-size: 12px;
  }

  .page-pico .price-table thead {
    display: none;
  }

  .page-pico .price-table tbody {
    display: block;
  }

  .page-pico .price-table tr {
    display: block;
    border-bottom: 1px solid #eee;
  }

  .page-pico .price-table tbody tr:last-child {
    border-bottom: none;
  }

  .page-pico .price-table th,
  .page-pico .price-table td {
    display: block;
    width: 100%;
    padding: 0 14px;
    border-bottom: none;
    text-align: left;
  }

  .page-pico .price-table tbody th {
    width: auto;
    padding: 12px 14px 6px;
    font-size: 13px;
    background: #faf8f5;
  }

  .page-pico .price-table tbody td {
    font-size: 12px;
    line-height: 1.6;
  }

  .page-pico .price-table tbody td::before {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
  }

  .page-pico .price-table tbody td:nth-of-type(1) {
    padding: 0 14px 6px;
    font-size: 11px;
  }

  .page-pico .price-table tbody td:nth-of-type(1)::before {
    content: "内容";
  }

  .page-pico .price-table tbody td:nth-of-type(2) {
    padding: 0 14px 4px;
    font-weight: 600;
    color: var(--navy);
  }

  .page-pico .price-table tbody td:nth-of-type(2)::before {
    content: "1回（税込）";
  }

  .page-pico .price-table tbody td:nth-of-type(3) {
    padding: 0 14px 14px;
    font-weight: 600;
    color: var(--navy);
  }

  .page-pico .price-table tbody td:nth-of-type(3)::before {
    content: "5回コース（税込）";
  }

  .page-pico .pico-doctor-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 14px;
  }

  .page-pico .pico-doctor-inner img {
    max-width: 160px;
    margin: 0 auto;
  }

  .page-pico .pico-insta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .page-pico .pico-insta-panel h3 {
    font-size: 15px;
  }

  .page-pico .pico-insta-panel p {
    font-size: 11px;
    line-height: 1.75;
  }
}

@media (max-width: 560px) {
  .page-pico .hifu-section {
    padding: 28px 0;
  }

  .page-pico .hifu-benefits {
    grid-template-columns: 1fr 1fr;
    gap: 8px 6px;
  }

  .page-pico .pico-benefit p {
    font-size: 10px;
  }

  .about-pico-text-container {
    padding: 18px 14px;
  }

  .page-pico .pico-heading {
    font-size: 18px;
  }

  .page-pico .pico-concern-icon {
    width: 32px;
    height: 32px;
  }

  .page-pico .pico-menu-tags span {
    font-size: 10px;
    padding: 2px 8px;
  }

  .page-pico .pico-menu-desc {
    font-size: 11px;
  }

  .page-pico .price-table tbody th {
    font-size: 12px;
    padding-top: 10px;
  }

  .page-pico .price-table tbody td:nth-of-type(2),
  .page-pico .price-table tbody td:nth-of-type(3) {
    font-size: 11px;
  }

  .page-pico .pico-doctor-name {
    font-size: 16px;
  }

  .page-pico .pico-doctor-msg {
    font-size: 11px;
  }
  .page-pico .hifu-hero-visual {
    left: 0;
    right: 0;
  }

  .page-pico .hifu-hero-visual::after {
    width: 100%;
    background: linear-gradient(
      180deg,
      #fff 0%,
      rgba(255, 255, 255, 0.92) 8%,
      rgba(255, 255, 255, 0.5) 22%,
      transparent 38%
    );
  }

  .page-pico .hifu-hero-title {
    font-size: 24px;
    margin-top: 0;
  }

  .page-pico .hifu-hero-catch {
    font-size: 12px;
    line-height: 1.75;
  }
}