/* ========================================
   LP BASE
======================================== */

.page-contents--lp {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg);
}

.page-contents--lp *,
.page-contents--lp *::before,
.page-contents--lp *::after {
  box-sizing: border-box;
}

.lp-container {
  position: relative;
  width: calc(100% - 60px);
  max-width: 1400px;
  margin-right: auto !important;
  margin-left: auto !important;
}

.lp-narrow {
  max-width: 1280px;
}

.lp-section {
  position: relative;
  width: 100%;
  padding: 110px 0;
  background: #fff;
}

.lp-section--sub {
  background: var(--color-bg-sub);
}

.lp-section--blue {
  background: var(--color-bg-blue);
}

.p-strong {
  color: var(--color-title);
    font-weight: 700;
    border-bottom: 2px dotted var(--color-border);
}

/* ========================================
   LP TEXT
======================================== */

.page-contents--lp p {
  font-size: 16px;
  line-height: 2;
}

.lp-center-text {
  max-width: 900px;
  margin-right: auto !important;
  margin-left: auto !important;
}


/* ========================================
   LP HEADING
======================================== */

.lp-heading {
  position: relative;
  margin-bottom: 55px !important;
}

.lp-heading--center {
  text-align: center;
}

.lp-heading__en {
  margin: 0 0 10px !important;
  color: var(--color-btn-blue);
  font-family: josefin-sans, sans-serif;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.2 !important;
  letter-spacing: .18em;
}

.lp-heading h2 {
  margin: 0;
  color: var(--color-title);
  font-family: zen-maru-gothic, sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .1em;
}

.lp-heading__dots {
  display: block;
  width: 80px;
  height: 5px;
  margin-top: 18px;
  background-image: radial-gradient(
    circle,
    var(--color-btn-blue) 2px,
    transparent 2.5px
  );
  background-size: 13px 5px;
}

.lp-heading--center .lp-heading__dots {
  margin-right: auto;
  margin-left: auto;
}


/* ========================================
   FV
======================================== */

.lp-fv {
  position: relative;
  min-height: 720px;
  padding: 70px 0 90px;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      #fff 0%,
      #fff 20%,
      var(--color-bg-blue) 100%
    );
}

.lp-fv::after {
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 500px;
  height: 500px;
  content: "";
  background: rgba(128, 173, 187, .08);
  border-radius: 50%;
}

.lp-fv__inner {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 70px;
  align-items: center;
  min-height: 570px;
}

.lp-fv__inner > .wp-block-group__inner-container {
  display: contents !important;
}

.lp-fv__content {
  position: relative;
  z-index: 3;
}

.lp-fv__en {
  margin: 0 0 15px !important;
  color: var(--color-btn-blue);
  font-family: josefin-sans, sans-serif;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: .22em;
}

.lp-fv__title {
  margin: 0 0 30px !important;
  color: var(--color-title);
  font-family: zen-maru-gothic, sans-serif;
  font-size: clamp(38px, 3.5vw, 45px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .08em;
}

.lp-fv__lead {
  margin-bottom: 30px !important;
  font-size: 21px !important;
  line-height: 2 !important;
}

.lp-fv__lead-type {
  display: inline-block;
  margin-bottom: 8px;
  padding-bottom: 4px;
  color: var(--color-title);
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  border-bottom: 2px dotted var(--color-border);
}

.lp-fv__image {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 80px 0 80px 0;
}

.lp-fv__image img {
  display: block;
  width: 100%;
  height: 570px;
  object-fit: cover;
}

.lp-fv__prices {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 30px !important;
}

.lp-fv__prices > .wp-block-group__inner-container {
  display: contents !important;
}

.lp-fv__prices p {
  margin: 0 !important;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.lp-fv__prices strong {
  color: var(--color-title);
  font-size: 1.15em;
}

.whitening-fv .wp-block-paragraph strong {
  color: var(--color-title);
  font-size: 21px;
}


/* ========================================
   CHARACTER
======================================== */

.lp-character {
  position: absolute;
  z-index: 5;
  margin: 0 !important;
  pointer-events: none;
}

.lp-character img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-character--fv {
  right: 42%;
  bottom: -35px;
  width: 150px;
}

.lp-character--cause {
  right: -50px;
  bottom: -20px;
  width: 180px;
}

.lp-character--maintenance {
  right: -20px;
    bottom: -50px;
    width: 140px;
}

.lp-character--cta {
  right: 10px;
  bottom: 0px;
  width: 250px;
}


/* ========================================
   BUTTONS
======================================== */

.lp-buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 15px;
}

.lp-buttons > .wp-block-group__inner-container {
  display: contents !important;
}

.lp-buttons--center {
  justify-content: center;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  min-height: 58px;
  padding: 15px 30px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  transition:
    transform .3s ease,
    opacity .3s ease;
}

.lp-btn:hover {
  opacity: .85;
  transform: translateY(-2px);
}

.lp-btn--primary {
  color: #fff !important;
  background: var(--color-btn-blue);
}

.lp-btn--secondary {
  color: #fff !important;
  background: var(--color-btn-beige);
}


/* ========================================
   MESSAGE
======================================== */

/* ========================================
   WHITENING MESSAGE - PARALLAX
======================================== */

.whitening-message {
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px;
  text-align: center;

  background-image: url("../img/whitening-message-bg.jpg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  background-attachment: fixed;
}

.whitening-message::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: rgba(255, 255, 255, .65);
  pointer-events: none;
}

.whitening-message .lp-container {
  position: relative;
  z-index: 2;
}

.lp-message__worries {
  margin-bottom: 30px !important;
  color: var(--color-title);
  font-family: zen-maru-gothic, sans-serif;
  font-size: 22px !important;
  font-weight: 600;
  line-height: 2 !important;
}
.whitening-message strong{
  color: var(--color-title);
    font-weight: 700;
    border-bottom: 2px dotted var(--color-border);
}


/* ========================================
   CHECK
======================================== */

.lp-check {
  display: grid;
  gap: 15px;
  margin: 0 auto 45px !important;
  padding: 0 !important;
  list-style: none;
}

.lp-check--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lp-check li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 16px 20px 16px 58px;
  background: #fff;
  border-radius: 15px;
  line-height: 1.7;
}

.lp-check li::before {
  position: absolute;
  top: 50%;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #fff;
  font-size: 13px;
  content: "✓";
  background: var(--color-btn-blue);
  border-radius: 50%;
  transform: translateY(-50%);
}


/* ========================================
   FEATURE
======================================== */

.lp-feature {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 70px;
  align-items: center;
}

.lp-feature > .wp-block-group__inner-container {
  display: contents !important;
}

.lp-feature--reverse .lp-feature__image {
  order: 2;
}

.lp-feature--reverse .lp-feature__content {
  order: 1;
}

.lp-feature__image {
  width: 100%;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 50px 0 50px 0;
}

.lp-feature__image img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.lp-feature__content h4 {
  margin: 35px 0 15px;
  color: var(--color-title);
  font-family: zen-maru-gothic, sans-serif;
  font-size: 18px;
}

.lp-point-box {
  margin: 30px 0 !important;
  padding: 25px 30px !important;
  text-align: center;
  background: var(--color-bg-blue);
  border-radius: 20px;
}

.lp-point-box p {
  margin: 0 !important;
  color: var(--color-title);
  font-size: 20px !important;
}


/* ========================================
   CAUSE
======================================== */

.whitening-cause__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  margin: 45px 0 !important;
}

.whitening-cause__grid > .wp-block-group__inner-container {
  display: contents !important;
}

.whitening-cause__item {
  padding: 40px 30px !important;
  background: #fff;
  border-radius: 25px 0 25px 0;
}

.lp-card-number {
  margin: 0 0 15px !important;
  color: var(--color-btn-blue);
  font-family: josefin-sans, sans-serif;
  font-size: 28px !important;
  line-height: 1 !important;
}

.whitening-cause__item h3 {
  margin: 0 0 20px;
  color: var(--color-title);
  font-family: zen-maru-gothic, sans-serif;
  font-size: 20px;
}


/* ========================================
   WHITENING MENU
======================================== */

.whitening-menu__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.whitening-menu__grid > .wp-block-group__inner-container {
  display: contents !important;
}

.whitening-menu__item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 35px 30px;
  color: var(--color-text) !important;
  text-align: center;
  text-decoration: none !important;
  background: var(--color-bg-sub);
  border: 1px solid transparent;
  border-radius: 30px 0 30px 0;
  transition:
    background .3s ease,
    border-color .3s ease,
    transform .3s ease;
}

.whitening-menu__item:hover {
  background: #fff;
  border-color: var(--color-border);
  transform: translateY(-5px);
}

.whitening-menu__number {
  margin-bottom: 10px;
  color: var(--color-btn-blue);
  font-family: josefin-sans, sans-serif;
  font-size: 36px;
  line-height: 1;
}

.whitening-menu__en {
  margin-bottom: 22px;
  color: var(--color-btn-blue);
  font-family: josefin-sans, sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
}

.whitening-menu__item strong {
  margin-bottom: 12px;
  color: var(--color-title);
  font-family: zen-maru-gothic, sans-serif;
  font-size: 19px;
}


/* ========================================
   WHITENING PLAN
======================================== */

.whitening-plan__header {
  display: flex !important;
  gap: 25px;
  align-items: center;
  margin-bottom: 55px !important;
}

.whitening-plan__header > .wp-block-group__inner-container {
  display: contents !important;
}

.whitening-plan__number {
  margin: 0 !important;
  color: var(--color-btn-blue);
  font-family: josefin-sans, sans-serif;
  font-size: 70px !important;
  font-weight: 300;
  line-height: 1 !important;
}

.whitening-plan__en {
  margin: 0 0 6px !important;
  color: var(--color-btn-blue);
  font-family: josefin-sans, sans-serif;
  font-size: 12px !important;
  letter-spacing: .18em;
}

.whitening-plan__header h2 {
  margin: 0;
  color: var(--color-title);
  font-family: zen-maru-gothic, sans-serif;
  font-size: 30px;
}

.whitening-plan__catch {
  margin: 0 0 30px !important;
  color: var(--color-title);
  font-family: zen-maru-gothic, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.7;
}


/* ========================================
   MINI CHECK
======================================== */

.lp-mini-check {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.lp-mini-check li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 28px;
  line-height: 1.8;
}

.lp-mini-check li::before {
  position: absolute;
  top: .15em;
  left: 0;
  color: var(--color-btn-blue);
  font-weight: 700;
  content: "✓";
}


/* ========================================
   PRICE
======================================== */

.lp-price {
  width: 100%;
  max-width: 1100px;
  margin: 70px auto 0 !important;
  padding: 45px 55px !important;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 30px 0 30px 0;
  box-shadow: 0 15px 40px rgba(62, 100, 157, .06);
}

.lp-price__label {
  margin: 0 0 15px !important;
  color: var(--color-title);
  font-size: 17px !important;
  font-weight: 600;
}

.lp-price__main {
  margin: 0 0 30px !important;
  color: var(--color-title);
  line-height: 1 !important;
}

.lp-price__main strong {
  font-family: josefin-sans, sans-serif;
  font-size: 54px;
  font-weight: 500;
}

.lp-price__main span {
  margin-left: 8px;
  font-size: 16px;
}

.lp-price__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 30px !important;
}

.lp-price__grid > .wp-block-group__inner-container {
  display: contents !important;
}

.lp-price__grid p {
  margin: 0 !important;
  padding: 18px 10px;
  background: var(--color-bg-sub);
  border-radius: 12px;
  font-size: 14px !important;
}

.lp-price__grid strong {
  display: block;
  margin-top: 5px;
  color: var(--color-title);
  font-size: 18px;
}

.lp-price__note,
.lp-note {
  margin-top: 25px !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
}

.lp-price__sub {
  margin-top: 30px !important;
  padding-top: 25px;
  border-top: 1px solid var(--color-border);
}

.lp-price__sub h4 {
  margin: 0 0 10px;
  color: var(--color-title);
}


/* ========================================
   DUAL
======================================== */

.whitening-dual__formula {
  margin: 25px 0 !important;
  padding: 20px;
  background: #fff;
  border-radius: 15px;
  text-align: center;
}

.whitening-dual__formula p {
  margin: 0 !important;
}

.whitening-dual__formula strong {
  color: var(--color-title);
  font-size: 18px;
}

.whitening-dual__formula span {
  display: inline-block;
  margin: 0 18px;
  color: var(--color-btn-blue);
  font-size: 25px;
}


/* ========================================
   CASE
======================================== */

.lp-case__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}

.lp-case__grid > .wp-block-group__inner-container {
  display: contents !important;
}

.lp-case__item {
  overflow: hidden;
  background: var(--color-bg-sub);
  border-radius: 25px 0 25px 0;
}

.lp-case__item figure {
  margin: 0 0 20px !important;
}

.lp-case__item figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.lp-case__item p {
  margin: 0 !important;
  padding: 0 25px 8px;
  font-size: 14px !important;
}

.lp-case__item p:last-child {
  padding-bottom: 25px;
}


/* ========================================
   COMPARE
======================================== */

.whitening-compare__quick {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  max-width: 900px;
  margin: 0 auto 50px !important;
}

.whitening-compare__quick > .wp-block-group__inner-container {
  display: contents !important;
}

.whitening-compare__quick p {
  margin: 0 !important;
  padding: 25px 15px;
  text-align: center;
  background: #fff;
  border-radius: 20px;
}

.whitening-compare__quick span,
.whitening-compare__quick strong {
  display: block;
}

.whitening-compare__quick span {
  margin-bottom: 0px;
  font-size: 14px;
}

.whitening-compare__quick strong {
  color: var(--color-title);
  font-size: 19px;
}

.lp-compare-table {
  margin: 0 0 40px !important;
  overflow-x: auto;
}

.lp-compare-table table {
  width: 100%;
  min-width: 750px;
  border-collapse: collapse;
  background: #fff;
}

.lp-compare-table th,
.lp-compare-table td {
  padding: 20px 15px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--color-border);
}

.lp-compare-table thead th {
  color: var(--color-title);
  background: var(--color-bg-blue);
}

.lp-compare-table tbody th {
  color: var(--color-title);
  background: #f8fbfc;
}


/* ========================================
   CLEANING DIFFERENCE
======================================== */

.whitening-cleaning__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 50px auto !important;
}

.whitening-cleaning__grid > .wp-block-group__inner-container {
  display: contents !important;
}

.whitening-cleaning__item {
  padding: 45px 40px !important;
  text-align: center;
  background: var(--color-bg-sub);
  border-radius: 30px 0 30px 0;
}

.whitening-cleaning__item--whitening {
  background: var(--color-bg-blue);
}

.whitening-cleaning__en {
  margin: 0 0 10px !important;
  color: var(--color-btn-blue);
  font-family: josefin-sans, sans-serif;
  font-size: 12px !important;
  letter-spacing: .18em;
}

.whitening-cleaning__item h3 {
  margin: 0 0 25px;
  color: var(--color-title);
  font-family: zen-maru-gothic, sans-serif;
  font-size: 28px;
}

.whitening-cleaning__point {
  margin-bottom: 20px !important;
  color: var(--color-title);
  font-size: 18px !important;
}


/* ========================================
   FLOW
======================================== */

.lp-flow__list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.lp-flow__list > .wp-block-group__inner-container {
  display: contents !important;
}

.lp-flow__item {
  position: relative;
  padding: 35px 25px !important;
  background: #fff;
  border-radius: 20px 0 20px 0;
}

.lp-flow__step {
  margin: 0 0 20px !important;
  color: var(--color-btn-blue);
  font-family: josefin-sans, sans-serif;
  font-size: 11px !important;
  line-height: 1 !important;
}

.lp-flow__step strong {
  display: block;
  margin-top: 8px;
  font-size: 30px;
  font-weight: 500;
}

.lp-flow__item h3 {
  margin: 0 0 18px;
  color: var(--color-title);
  font-family: zen-maru-gothic, sans-serif;
  font-size: 19px;
}

.lp-flow__item p:not(.lp-flow__step) {
  font-size: 14px;
  line-height: 1.9;
}


/* ========================================
   NOTICE
======================================== */

.lp-notice {
  padding: 50px 55px !important;
  background: var(--color-bg-sub);
  border: 1px solid #eee9e2;
  border-radius: 30px 0 30px 0;
}

.lp-notice__important {
  margin: 30px 0 !important;
  padding: 20px 25px;
  color: var(--color-title);
  text-align: center;
  background: #fff;
  border-left: 4px solid var(--color-btn-blue);
}


/* ========================================
   MAINTENANCE
======================================== */

.whitening-maintenance__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 50px 0 !important;
}

.whitening-maintenance__grid > .wp-block-group__inner-container {
  display: contents !important;
}

.whitening-maintenance__grid p {
  margin: 0 !important;
  padding: 35px 20px;
  text-align: center;
  background: #fff;
  border-radius: 20px;
}

.whitening-maintenance__grid span,
.whitening-maintenance__grid strong {
  display: block;
}

.whitening-maintenance__grid span {
  margin-bottom: 15px;
  color: var(--color-btn-blue);
  font-family: josefin-sans, sans-serif;
  font-size: 25px;
}

.whitening-maintenance__grid strong {
  color: var(--color-title);
  font-size: 17px;
  line-height: 1.7;
}


/* ========================================
   FAQ
======================================== */

.lp-faq {
  background: var(--color-bg-blue);
}

.lp-faq .first-faq__list {
  max-width: 1280px;
  margin-right: auto !important;
  margin-left: auto !important;
}


/* ========================================
   CTA
======================================== */

.lp-cta {
  padding-top: 100px;
  padding-bottom: 120px;
  background: #fff;
}

.lp-cta__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto !important;
  padding: 70px 70px 70px 70px !important;
  overflow: hidden;
  background: var(--color-bg-blue);
  border-radius: 50px 0 50px 0;
}

.lp-cta__inner::before {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 350px;
  height: 350px;
  content: "";
  background: rgba(255, 255, 255, .55);
  border-radius: 50%;
}

.lp-cta__inner h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 30px;
  color: var(--color-title);
  font-family: zen-maru-gothic, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.7;
}

.lp-cta__wishes {
  margin: 25px 0 !important;
  color: var(--color-title);
  font-weight: 600;
}


/* ========================================
   FIXED CTA
======================================== */

.lp-fixed-cta {
  display: none;
}

/* ========================================
   WHITENING CASE / 2 CASES
======================================== */

/* 症例一覧 */

.whitening-case .lp-case__grid {
  display: block !important;

  width: 100%;
}

.whitening-case
.lp-case__grid
> .wp-block-group__inner-container {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 30px;

  width: 100%;
}


/* 症例カード */

.whitening-case .lp-case__item {
  min-width: 0;

  overflow: hidden;

  background: var(--color-bg-sub);

  border:
    1px solid var(--color-border);

  border-radius: 25px 0 25px 0;
}

.whitening-case
.lp-case__item
> .wp-block-group__inner-container {
  height: 100%;

  padding-bottom: 30px;
}


/* 症例タイトル */

.whitening-case .lp-case__title {
  margin: 0 !important;
  padding: 22px 25px;

  color: var(--color-title);
  background: var(--color-bg-blue);

  font-family:
    zen-maru-gothic,
    sans-serif;

  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;

  text-align: center;
}


/* BEFORE・AFTER画像 */

.whitening-case .lp-case__photos {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;

  padding: 20px 20px 0;
}

.whitening-case .lp-case__photo {
  position: relative;

  min-width: 0;

  margin: 0 !important;

  overflow: hidden;

  background: #fff;

  border-radius: 12px;
}

.whitening-case .lp-case__photo img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 4 / 3;

  object-fit: cover;
}


/* BEFORE・AFTERラベル */

.whitening-case .lp-case__photo-label {
  position: absolute;

  top: 10px;
  left: 10px;

  z-index: 2;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 68px;
  min-height: 25px;

  padding: 4px 10px;

  color: #fff;
  background: rgba(95, 105, 110, .82);

  border-radius: 20px;

  font-family:
    josefin-sans,
    sans-serif;

  font-size: 10px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: .12em;
}

.whitening-case
.lp-case__photo-label--after {
  background: var(--color-btn-blue);
}


/* 症例情報 */

.whitening-case .lp-case__data {
  margin: 22px 25px 18px;

  border-top:
    1px solid var(--color-border);
}

.whitening-case .lp-case__data > div {
  display: grid;

  grid-template-columns:
    105px minmax(0, 1fr);

  border-bottom:
    1px solid var(--color-border);
}

.whitening-case .lp-case__data dt,
.whitening-case .lp-case__data dd {
  margin: 0;
  padding: 11px 10px;

  font-size: 13px;
  line-height: 1.6;
}

.whitening-case .lp-case__data dt {
  color: var(--color-title);

  font-weight: 600;

  background:
    rgba(255, 255, 255, .7);
}

.whitening-case .lp-case__data dd {
  min-width: 0;

  overflow-wrap: anywhere;
}


/* 説明文 */

.whitening-case .lp-case__description {
  margin: 0 !important;
  padding: 0 25px !important;

  font-size: 14px !important;
  line-height: 1.9 !important;
}


/* 注意事項 */

.whitening-case .lp-case__notice {
  max-width: 900px;

  margin: 30px auto 0 !important;
  padding: 18px 22px !important;

  background: #fff;

  border:
    1px solid var(--color-border);

  border-radius: 10px;

  font-size: 12px !important;
  line-height: 1.8 !important;
}


/* ========================================
   SMARTPHONE
======================================== */

@media screen and (max-width: 767px) {

  .whitening-case
  .lp-case__grid
  > .wp-block-group__inner-container {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .whitening-case .lp-case__title {
    padding: 18px 15px;

    font-size: 18px;
  }

  .whitening-case .lp-case__photos {
    gap: 6px;

    padding: 15px 15px 0;
  }

  .whitening-case .lp-case__photo-label {
    top: 7px;
    left: 7px;

    min-width: 58px;
    min-height: 22px;

    padding: 3px 7px;

    font-size: 9px;
  }

  .whitening-case .lp-case__data {
    margin:
      18px
      15px
      15px;
  }

  .whitening-case .lp-case__data > div {
    grid-template-columns:
      90px minmax(0, 1fr);
  }

  .whitening-case .lp-case__data dt,
  .whitening-case .lp-case__data dd {
    padding: 10px 8px;

    font-size: 12px;
  }

  .whitening-case .lp-case__description {
    padding:
      0
      15px !important;

    font-size: 13px !important;
  }

  .whitening-case .lp-case__notice {
    margin-top: 25px !important;

    padding:
      15px !important;
  }
}

/* ========================================
   CASE IMAGE BLOCK FIX
======================================== */

.whitening-case .lp-case__photo-item {
  position: relative;

  min-width: 0;

  overflow: hidden;

  background: #fff;

  border-radius: 12px;
}

.whitening-case
.lp-case__photo-item
> .wp-block-group__inner-container {
  display: block;
}

.whitening-case .lp-case__photo {
  margin: 0 !important;
}

.whitening-case .lp-case__photo-label {
  position: absolute;

  top: 10px;
  left: 10px;

  z-index: 2;

  width: auto;

  margin: 0 !important;
  padding: 6px 10px !important;
}

.whitening-case .lp-case__data {
  display: block;

  margin: 22px 25px 18px;

  border-top:
    1px solid var(--color-border);
}

.whitening-case
.lp-case__data
> .wp-block-group__inner-container {
  display: block;
}

.whitening-case .lp-case__data p {
  margin: 0 !important;
  padding: 11px 10px !important;

  font-size: 13px !important;
  line-height: 1.6 !important;

  border-bottom:
    1px solid var(--color-border);
}

@media screen and (max-width: 767px) {

  .whitening-case .lp-case__photo-label {
    top: 7px;
    left: 7px;

    padding: 5px 8px !important;

    font-size: 9px !important;
  }

  .whitening-case .lp-case__data {
    margin:
      18px
      15px
      15px;
  }

  .whitening-case .lp-case__data p {
    padding: 10px 8px !important;

    font-size: 12px !important;
  }
}

/* ========================================
   BEFORE / AFTER 横並び修正
======================================== */

.whitening-case .lp-case__photos {
  display: block !important;
  padding: 20px 20px 0;
}

.whitening-case
.lp-case__photos
> .wp-block-group__inner-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.whitening-case .lp-case__photo-item {
  min-width: 0;
  width: 100%;
}

.whitening-case .lp-case__photo {
  width: 100%;
  margin: 0 !important;
}

.whitening-case .lp-case__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}


/* SPでもBEFORE / AFTERは横並びのまま */
@media screen and (max-width: 767px) {

  .whitening-case .lp-case__photos {
    padding: 15px 15px 0;
  }

  .whitening-case
  .lp-case__photos
  > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

}

/* ========================================
   TABLET
======================================== */

@media (max-width: 1024px) {

  .lp-fv__inner {
    gap: 40px;
  }

  .lp-fv__title {
    font-size: 40px;
  }

  .lp-fv__image img {
    height: 500px;
  }

  .lp-check--3col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-flow__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* ========================================
   SP
======================================== */

@media (max-width: 767px) {

  .page-contents--lp {
    padding-bottom: 65px;
  }

  .lp-container {
    width: calc(100% - 40px);
  }

  .lp-section {
    padding: 70px 0;
  }


  /* HEADING */

  .lp-heading {
    margin-bottom: 35px !important;
  }

  .lp-heading h2 {
    font-size: 26px;
    line-height: 1.6;
  }

  .lp-heading__en {
    font-size: 11px !important;
  }


  /* FV */

  .lp-fv {
    min-height: 0;
    padding: 45px 0 70px;
  }

  .lp-fv__inner {
    display: flex !important;
    flex-direction: column;
    gap: 30px;
    min-height: 0;
  }

  .lp-fv__inner > .wp-block-group__inner-container {
    display: contents !important;
  }

  .lp-fv__content {
    width: 100%;
  }

  .lp-fv__title {
    margin-bottom: 20px !important;
    font-size: 32px;
    line-height: 1.55;
  }

  .lp-fv__lead {
    font-size: 15px !important;
  }

  .lp-fv__prices {
    grid-template-columns: 1fr;
  }

  .lp-fv__image {
    border-radius: 35px 0 35px 0;
  }

  .lp-fv__image img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .lp-character--fv {
    right: -15px;
    bottom: -20px;
    width: 100px;
  }


  /* BUTTON */

  .lp-buttons {
    flex-direction: column;
  }

  .lp-btn {
    width: 100%;
    min-width: 0;
  }


  /* MESSAGE */

  .whitening-message {
    padding: 65px 0;
  }

  .lp-message__worries {
    font-size: 18px !important;
  }


  /* CHECK */

  .lp-check--3col {
    grid-template-columns: 1fr;
  }

  .lp-check li {
    min-height: 62px;
    padding-left: 55px;
  }


  /* FEATURE */

  .lp-feature {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .lp-feature--reverse .lp-feature__image,
  .lp-feature--reverse .lp-feature__content {
    order: initial;
  }

  .lp-feature__image img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .lp-point-box {
    padding: 20px !important;
  }

  .lp-point-box p {
    font-size: 17px !important;
  }


  /* CAUSE */

  .whitening-cause__grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .whitening-cause__item {
    padding: 30px 25px !important;
  }


  /* MENU */

  .whitening-menu__grid {
    grid-template-columns: 1fr;
  }

  .whitening-menu__item {
    min-height: 0;
    padding: 30px 25px;
  }


  /* PLAN */

  .whitening-plan__header {
    gap: 15px;
    margin-bottom: 35px !important;
  }

  .whitening-plan__number {
    font-size: 50px !important;
  }

  .whitening-plan__header h2 {
    font-size: 23px;
  }

  .whitening-plan__catch {
    font-size: 21px;
  }


  /* PRICE */

  .lp-price {
    margin-top: 45px !important;
    padding: 35px 20px !important;
    border-radius: 25px 0 25px 0;
  }

  .lp-price__main strong {
    font-size: 44px;
  }

  .lp-price__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  /* CASE */

  .lp-case__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }


  /* COMPARE */

  .whitening-compare__quick {
    grid-template-columns: 1fr;
  }

  .lp-compare-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }


  /* CLEANING */

  .whitening-cleaning__grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .whitening-cleaning__item {
    padding: 35px 25px !important;
  }


  /* FLOW */

  .lp-flow__list {
    grid-template-columns: 1fr;
  }

  .lp-flow__item {
    padding: 30px 25px !important;
  }


  /* NOTICE */

  .lp-notice {
    padding: 30px 20px !important;
  }

  .lp-notice__important {
    padding: 18px;
  }


  /* MAINTENANCE */

  .whitening-maintenance__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }


  /* CHARACTER */

  .lp-character--cause,
  .lp-character--maintenance {
    right: -30px;
    width: 110px;
  }


  /* CTA */

  .lp-cta {
    padding: 70px 0 90px;
  }

  .lp-cta__inner {
    padding: 45px 25px 120px !important;
    border-radius: 30px 0 30px 0;
  }

  .lp-cta__inner h2 {
    font-size: 25px;
  }

  .lp-character--cta {
    right: 15px;
    bottom: -15px;
    width: 125px;
  }


  /* FIXED CTA */

  .lp-fixed-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, .08);
  }

  .lp-fixed-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 65px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
  }

  .lp-fixed-cta__tel {
    background: var(--color-btn-beige);
  }

  .lp-fixed-cta__web {
    background: var(--color-btn-blue);
  }

}

.wp-block-table .has-fixed-layout thead {
    border-bottom: 0px solid var(--color-btn-blue) !important;
}
.whitening-notice .lp-notice__important {
    border-left: 0px solid var(--color-btn-blue);
}