@charset "UTF-8";
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Foundation - Variables
==================================================*/
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Foundation - Mixins
==================================================*/
/*==================================================
  Foundation - Reset
==================================================*/
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html,
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  li,
  figure,
  figcaption,
  blockquote,
  dl,
  dd {
    margin: 0;
    padding: 0;
  }
  ul,
  ol {
    list-style: none;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    border: none;
    background: transparent;
    color: inherit;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    text-align: left;
    vertical-align: top;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Layout - Header
==================================================*/
@layer components {
  .l-header {
    width: clamp(375px, 430px, 100vw);
    height: 25px;
    margin: 0 auto;
  }
  .l-header__inner {
    margin: 0 auto;
    display: flex;
    align-items: center;
    text-align: center;
    width: min(100%, 430px);
    height: 100%;
  }
  .l-header__area {
    width: 100%;
    height: 100%;
    font-size: 0.875rem;
    line-height: 1.8;
    letter-spacing: 0em;
    font-weight: 400;
    color: #fdfdfd;
    background: #068ac7;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Layout - Footer
==================================================*/
@layer components {
  .l-footer {
    background-color: #1f3f95;
    color: #fdfdfd;
    width: clamp(375px, 430px, 100vw);
    position: relative;
    padding: 80px 53px 100px;
    margin: 0 auto;
  }
  .l-footer__inner {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    max-width: 280px;
  }
  .l-footer__title {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    line-height: 1;
  }
  .l-footer__company-info {
    margin: 24px auto 0;
  }
  .l-footer__info-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #fdfdfd;
    text-align: left;
  }
  .l-footer__info-label {
    font-size: 0.875rem;
    font-weight: 400;
    text-align: center;
    width: 60px;
    line-height: 1.5;
  }
  .l-footer__info-value {
    font-size: 0.875rem;
    font-weight: 400;
    margin: 0;
    flex: 1;
    text-align: left;
    line-height: 1.5;
  }
  .l-footer__copyright {
    font-size: 0.625rem;
    line-height: 1.5;
    margin-top: 64px;
    text-align: center;
    color: #fdfdfd;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Object Component - Button
==================================================*/
@layer components {
  .c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 8px;
    background-color: #068ac7;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: opacity 0.3s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .c-button {
      transition: none;
    }
  }
  .c-button:hover,
  .c-button:focus {
    opacity: 0.88;
  }
  .c-button--accent {
    background-color: #00b0b0;
    color: #083757;
  }
  .c-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Object Project - Common Styles
==================================================*/
@layer components {
  body {
    font-family: "Inter", "Noto Sans JP", sans-serif;
    color: #083757;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.8;
    position: relative;
  }
  .pc-container {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: radial-gradient(89.9% 200.72% at 2.38% 10.1%, #00b0b0 0%, #068ac7 100%);
    z-index: -1;
    pointer-events: none;
  }
  .p-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: clamp(375px, 430px, 100vw);
    margin: 0 auto;
  }
  .p-section {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .p-section__container {
    width: min(100%, 430px);
    display: flex;
    flex-direction: column;
  }
  .p-section__header {
    display: flex;
    flex-direction: column;
  }
  .p-section__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .p-section__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f3f95;
    line-height: 1.4;
  }
  @media (min-width: 768px) {
    .p-section__title {
      font-size: 1.5rem;
    }
  }
  .p-section__description {
    margin-top: 8px;
    font-size: 1rem;
    color: #083757;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Hero Section (.p-hero)
==================================================*/
@layer components {
  .p-hero {
    position: relative;
    width: 100%;
    height: 809px;
    overflow: hidden;
    background: #fff url("../image/top-1FV-bg.webp") no-repeat top -25px center/100% auto;
  }
  .p-hero__white-box {
    position: absolute;
    top: 714px;
    left: 0;
    width: 100%;
    height: 125px;
    background-color: #fff;
    z-index: 100;
  }
  .p-hero__inner {
    position: relative;
    z-index: 1;
  }
  .p-hero__top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 5rem;
    text-align: left;
    color: #1f3f95;
  }
  .p-hero__lead {
    font-size: 0.75rem;
    font-weight: 400;
    text-align: left;
  }
  .p-hero__lead--first,
  .p-hero__lead--second {
    position: absolute;
    transform: rotate(-11.82deg);
    transform-origin: left top;
  }
  .p-hero__lead--first {
    top: 27.46px;
    left: 15.54px;
  }
  .p-hero__lead--second {
    top: 37.06px;
    left: 62.91px;
  }
  .p-hero__logo {
    position: absolute;
    top: 58px;
    left: 16px;
    width: 110px;
  }
  .p-hero__headline-bubble {
    width: 100%;
    position: absolute;
    top: 10px;
    left: 145.01px;
    width: 222.11px;
  }
  .p-hero__headline-bubble-image {
    width: 100%;
  }
  .p-hero__price {
    position: absolute;
    top: 166px;
    left: 48%;
    transform: translateX(-50%);
    width: 316px;
    z-index: 1000;
  }
  .p-hero__price-image {
    width: 100%;
  }
  .p-hero__price-bubble {
    position: absolute;
    top: 241px;
    left: 36px;
    width: 165px;
  }
  .p-hero__price-bubble img {
    width: 100%;
  }
  .p-hero__discount {
    position: absolute;
    top: 454.92px;
    left: 40%;
    transform: translateX(-52%);
    width: 233px;
    z-index: 1000;
    border-radius: 8px 8px 4px 4px;
    box-shadow: 0px 2.52px 1.68px 0px rgba(0, 0, 0, 0.35);
  }
  .p-hero__brands {
    position: absolute;
    top: 623px;
    left: 50%;
    transform: translateX(-50%);
    width: 333px;
    z-index: 1000;
  }
  .p-hero__discount-image,
  .p-hero__brands-image {
    width: 100%;
  }
  .p-hero__staff {
    position: absolute;
    top: 247px;
    left: 149px;
    width: 286px;
  }
  .p-hero__staff-image {
    width: 100%;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  About Section (.p-about)
==================================================*/
@layer components {
  .p-about {
    background-color: #fdfdfd;
    position: relative;
    flex-direction: column;
  }
  .p-about__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("../image/top-CTA-bg.webp") no-repeat center/cover;
  }
  .p-about__place {
    width: 310px;
    margin-top: 6px;
  }
  .p-about__contact {
    margin-top: 12px;
  }
  .p-about__contact p:first-child {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }
  .p-about__contact p:first-child span {
    letter-spacing: -0.16em;
  }
  .p-about__contact p:nth-child(2) {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
  }
  .p-about__contact-bar {
    width: 212.5px;
    margin: 8px auto 0;
  }
  .p-about__contact-phone {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #068ac7;
    padding: 8px 16px;
    border-radius: 8px;
    margin-top: 8px;
    box-shadow: inset 0 -3px 4px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
  }
  .p-about__contact-phone:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 -4px 6px 0 rgba(0, 0, 0, 0.25);
  }
  .p-about__contact-phone img {
    width: 48px;
  }
  .p-about__contact-phone-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fdfdfd;
    padding: 0 6px 0 12px;
  }
  .p-about__contact-phone-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36.5px;
    background-color: #fdfdfd;
  }
  .p-about__contact-phone-text p:first-child {
    font-family: "Source Serif Pro", "Inter", serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
  }
  .p-about__contact-phone-text p:last-child {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
  }
  .p-about__contact-email {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #C77006;
    padding: 8px 16px;
    border-radius: 8px;
    margin-top: 8px;
    color: #fdfdfd;
    box-shadow: inset 0 -3px 4px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
  }
  .p-about__contact-email:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 -4px 6px 0 rgba(0, 0, 0, 0.25);
  }
  .p-about__contact-email img {
    width: 48px;
  }
  .p-about__contact-email-text {
    position: relative;
    padding: 0 36px;
  }
  .p-about__contact-email .p-about__contact-email-text p {
    font-size: 1.125rem;
    font-weight: 700;
  }
  .p-about__contact-email .p-about__contact-email-text p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36.5px;
    background-color: #fdfdfd;
  }
  .p-about__contact-line {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #06C755;
    padding: 8px 16px;
    border-radius: 8px;
    margin-top: 8px;
    color: #fdfdfd;
    box-shadow: inset 0 -3px 4px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
  }
  .p-about__contact-line:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 -4px 6px 0 rgba(0, 0, 0, 0.25);
  }
  .p-about__contact-line img {
    width: 48px;
  }
  .p-about__contact-line-text {
    position: relative;
    padding: 0 42px;
  }
  .p-about__contact-line .p-about__contact-line-text p {
    font-size: 1.125rem;
    font-weight: 700;
  }
  .p-about__contact-line .p-about__contact-line-text p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36.5px;
    background-color: #fdfdfd;
  }
  .p-about__price {
    width: 330px;
    margin: 16px auto 120px;
  }
  .p-about__troubles {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: -88px;
    background: transparent url("../image/top-2about-bg.webp") no-repeat top center/cover;
    position: relative;
    z-index: 500;
  }
  .p-about__person1 {
    position: absolute;
    left: 0;
    width: clamp(360px, 412px, 96vw);
  }
  .p-about__trouble-card {
    width: clamp(335px, 388px, 90vw);
    margin: 16px auto 0;
    position: relative;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background-color: #fdfdfd;
    border-radius: 20px 20px 4px 4px;
    box-shadow: inset 0 -2px 2px 0 rgba(0, 0, 0, 0.25), inset 0 4px 4px 0 rgba(253, 253, 253, 0.2);
  }
  .p-about__trouble-card.first {
    margin-top: clamp(210px, 240px, 56vw);
  }
  .p-about__trouble-header {
    padding: 8px;
    border-radius: 20px 20px 0 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    box-shadow: inset 0 4px 4px 0 rgba(253, 253, 253, 0.2);
  }
  .p-about__trouble-header--toilet {
    background-color: #00b0b0;
  }
  .p-about__trouble-header--kitchen {
    background-color: #E6A313;
  }
  .p-about__trouble-header--bath {
    background-color: #465B95;
  }
  .p-about__trouble-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fdfdfd;
    line-height: 1.2;
  }
  .p-about__trouble-title span {
    letter-spacing: -0.24em;
  }
  .p-about__trouble-subtitle {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fdfdfd;
    line-height: 1;
  }
  .p-about__trouble-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .p-about__trouble-image {
    position: relative;
    width: 100%;
  }
  .p-about__trouble-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  .p-about__trouble-list {
    display: flex;
    flex-direction: column;
    padding: 6px 24px 24px 32px;
    list-style: none;
  }
  .p-about__trouble-list li {
    position: relative;
    padding-left: 16px;
    font-size: 1rem;
    line-height: 1.6;
    color: #083757;
    margin-top: 4px;
  }
  .p-about__trouble-list li::before {
    content: "";
    position: absolute;
    left: -0.3em;
    top: 0.25em;
    width: 15px;
    height: 15px;
    background-image: url("../image/top-2about‐drop.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
  }
  .p-about__person2 {
    margin-top: 16px;
    width: clamp(360px, 412px, 96vw);
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Reason Section (.p-reason)
==================================================*/
@layer components {
  .p-reason {
    background: url("../image/top-3reason-bg.webp") no-repeat center/cover;
    padding-bottom: 40px;
  }
  .p-reason__cards {
    display: flex;
    flex-direction: column;
    width: clamp(350px, 400px, 93vw);
    margin: 8px auto 0;
  }
  .p-reason__card {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
  }
  .p-reason__card-header.first {
    width: 214px;
  }
  .p-reason__card-header.second {
    width: 246px;
  }
  .p-reason__card-header.third {
    width: 311px;
  }
  .p-reason__card-header.fourth {
    width: 329px;
  }
  .p-reason__card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 25px 20px;
    background-color: #fdfdfd;
    border: 2px solid #068ac7;
    border-radius: 0 0 2px 2px;
  }
  .p-reason__card-body.third {
    gap: 32px;
  }
  .p-reason__card-image {
    margin: 0 auto;
  }
  .p-reason__card-image.first {
    width: clamp(234px, 268px, 62vw);
  }
  .p-reason__card-image.second {
    width: clamp(143px, 164px, 38vw);
  }
  .p-reason__card-image.third {
    width: clamp(205px, 223.6px, 52vw);
    border: 6px solid #81899F;
    border-radius: 6px;
    margin-top: 16px;
  }
  .p-reason__card-image.fourth {
    width: clamp(228px, 261.44px, 60.8vw);
  }
  .p-reason__card-text {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    color: #083757;
    margin: 0;
  }
  .third .p-reason__card-text {
    margin-top: 0;
  }
  .p-reason__card-text span {
    font-weight: 700;
    color: #00b0b0;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Comparison Section (.p-comparison)
==================================================*/
@layer components {
  .p-comparison {
    background: linear-gradient(45deg, #0B8CC8 -60%, #FFFFFF 120%);
  }
  .p-section__container {
    position: relative;
  }
  .p-comparison__bubble1 {
    position: absolute;
    top: -24px;
    left: 4.5px;
    width: 62px;
  }
  .p-comparison__bubble2 {
    position: absolute;
    top: 8px;
    left: 63px;
    width: 39px;
  }
  .p-comparison .p-section__container {
    padding: 0 20px;
  }
  .p-comparison .p-section__header {
    margin: 56px auto 0;
    width: clamp(182px, 210px, 50vw);
  }
  .p-comparison__content {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .p-comparison__description {
    font-size: 1rem;
    line-height: 1.6;
    color: #083757;
    margin: 24px 0 0;
  }
  .p-comparison__image {
    width: clamp(330px, 378px, 88vw);
    margin: 24px auto 0;
  }
  .p-comparison__image img {
    width: 100%;
  }
  .p-comparison__table {
    margin-top: 40px;
  }
  .p-comparison__price-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 16px;
    background-color: #1f3f95;
    border-radius: 4px 4px 0 0;
  }
  .p-comparison__price-title {
    font-size: 1rem;
    font-weight: 400;
    color: #fdfdfd;
    line-height: 1.6;
    margin: 0;
  }
  .p-comparison__price-list {
    display: flex;
    flex-direction: column;
    background-color: #fdfdfd;
    border-radius: 0 0 4px 4px;
    border: 1px solid #1f3f95;
  }
  .p-comparison__price-item {
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    border-bottom: 1px solid #1f3f95;
  }
  .p-comparison__price-item:last-of-type {
    border-bottom: none;
  }
  .p-comparison__price-service {
    font-size: 1rem;
    font-weight: 700;
    color: #083757;
    line-height: 1.6;
    margin: 0;
  }
  .p-comparison__price-service span {
    letter-spacing: -0.32em;
  }
  .p-comparison__price-note {
    font-size: 0.875rem;
    font-weight: 700;
    color: #083757;
    line-height: 1.6;
    margin: 0;
  }
  .p-comparison__price-detail {
    display: flex;
    align-items: baseline;
  }
  .p-comparison__price-label {
    font-size: 0.875rem;
    font-weight: 400;
    color: #083757;
    line-height: 1.5;
    margin: 0;
  }
  .p-comparison__price-value {
    display: flex;
    align-items: baseline;
  }
  .p-comparison__price-number {
    font-size: 1.625rem;
    font-weight: 700;
    color: #E64C75;
    line-height: 1;
    font-family: "Source Serif Pro", "Inter", serif;
    margin: 0 4px 0 8px;
  }
  .p-comparison__price-unit {
    font-size: 0.875rem;
    font-weight: 400;
    color: #083757;
    line-height: 1.5;
  }
  .p-comparison__price-tax {
    font-size: 0.75rem;
    font-weight: 400;
    color: #083757;
    line-height: 1.5;
    margin-left: 4px;
  }
  .p-comparison__price-footer {
    display: flex;
    flex-direction: column;
  }
  .p-comparison__price-disclaimer {
    font-size: 0.75rem;
    font-weight: 400;
    color: #083757;
    line-height: 1.6;
    margin: 0;
  }
  .p-comparison__CTA {
    margin: 40px auto 32px;
    width: 100%;
  }
  .p-comparison__CTA img {
    width: 100%;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Beware Section (.p-beware)
==================================================*/
@layer components {
  .p-beware {
    background: url("../image/top-5beware‐bar.webp") repeat-x center top/auto 12px, url("../image/top-5beware‐bar.webp") repeat-x center bottom/auto 12px #ffe939;
    position: relative;
    padding-bottom: 52px;
  }
  .p-beware .p-section__header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    margin-top: 52px;
  }
  .p-beware__title-image {
    width: 110px;
  }
  .p-beware__title {
    font-size: 2rem;
    font-weight: 700;
    color: #F90000;
    line-height: 1.2;
    text-align: center;
    margin: 0;
  }
  .p-beware__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 28px 0;
  }
  .p-beware__item {
    display: flex;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #1f3f95;
  }
  .p-beware__item-icon {
    flex-shrink: 0;
    width: 53.42px;
    height: 53.42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .p-beware__item-icon img {
    width: 100%;
  }
  .p-beware__item-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .p-beware__item-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #083757;
    line-height: 1.6;
    margin: 0;
  }
  .p-beware__item-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #083757;
    margin: 0;
  }
  .p-beware__item-text span {
    color: #F90000;
    font-weight: 700;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  CTA Section (.p-cta)
==================================================*/
@layer components {
  .p-cta {
    background: url("../image/top-CTA-bg.webp") no-repeat center/cover;
  }
  .p-cta__container {
    position: relative;
  }
  .p-cta__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .p-cta__place {
    width: 304px;
    margin-top: 70px;
  }
  .p-cta__discount {
    width: 233px;
    margin-top: 16px;
    border-radius: 8px 8px 4px 4px;
    box-shadow: 0px 2.52px 1.68px 0px rgba(0, 0, 0, 0.35);
  }
  .p-cta__contact {
    margin-top: 16px;
  }
  .p-cta__contact p:first-child {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }
  .p-cta__contact p:first-child span {
    letter-spacing: -0.16em;
  }
  .p-cta__contact p:nth-child(2) {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
  }
  .p-cta__contact-bar {
    width: 212.5px;
    margin: 8px auto 0;
  }
  .p-cta__contact-phone {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #068ac7;
    padding: 8px 16px;
    border-radius: 8px;
    margin-top: 8px;
    box-shadow: inset 0 -3px 4px 0 rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .p-cta__contact-phone {
      transition: none;
    }
  }
  .p-cta__contact-phone:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 -4px 6px 0 rgba(0, 0, 0, 0.3);
  }
  .p-cta__contact-phone img {
    width: 48px;
  }
  .p-cta__contact-phone-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fdfdfd;
    padding: 0 6px 0 12px;
  }
  .p-cta__contact-phone-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36.5px;
    background-color: #fdfdfd;
  }
  .p-cta__contact-phone-text p:first-child {
    font-family: "Source Serif Pro", "Inter", serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
  }
  .p-cta__contact-phone-text p:last-child {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
  }
  .p-cta__contact-email {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #C77006;
    padding: 8px 16px;
    border-radius: 8px;
    margin-top: 8px;
    color: #fdfdfd;
    box-shadow: inset 0 -3px 4px 0 rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .p-cta__contact-email {
      transition: none;
    }
  }
  .p-cta__contact-email:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 -4px 6px 0 rgba(0, 0, 0, 0.3);
  }
  .p-cta__contact-email img {
    width: 48px;
  }
  .p-cta__contact-email-text {
    position: relative;
    padding: 0 36px;
  }
  .p-cta__contact-email .p-cta__contact-email-text p {
    font-size: 1.125rem;
    font-weight: 700;
  }
  .p-cta__contact-email .p-cta__contact-email-text p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36.5px;
    background-color: #fdfdfd;
  }
  .p-cta__contact-line {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #06C755;
    padding: 8px 16px;
    border-radius: 8px;
    margin-top: 8px;
    color: #fdfdfd;
    box-shadow: inset 0 -3px 4px 0 rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .p-cta__contact-line {
      transition: none;
    }
  }
  .p-cta__contact-line:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 -4px 6px 0 rgba(0, 0, 0, 0.3);
  }
  .p-cta__contact-line img {
    width: 48px;
  }
  .p-cta__contact-line-text {
    position: relative;
    padding: 0 42px;
  }
  .p-cta__contact-line .p-cta__contact-line-text p {
    font-size: 1.125rem;
    font-weight: 700;
  }
  .p-cta__contact-line .p-cta__contact-line-text p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36.5px;
    background-color: #fdfdfd;
  }
  .p-cta__price {
    width: 330px;
    margin: 16px auto 80px;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Flow Section (.p-flow)
==================================================*/
@layer components {
  .p-flow {
    background: url("../image/top-3reason-bg.webp") no-repeat center/cover;
  }
  .p-flow__bubble1 {
    position: absolute;
    top: -16px;
    right: 60px;
    width: 62px;
  }
  .p-flow__bubble2 {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 39px;
  }
  .p-flow .p-section__container {
    padding: 0 32px 80px;
  }
  .p-flow__title-wrapper {
    display: flex;
    justify-content: center;
  }
  .p-flow__title-badge {
    display: inline-block;
    padding: 0 16px;
    background-color: #068ac7;
    border-radius: 56px;
    font-size: 1rem;
    font-weight: 400;
    color: #FFF700;
    line-height: 1.6;
    margin-top: 40px;
  }
  .p-flow__title {
    text-align: center;
    margin: 8px 0 0;
    line-height: 1;
  }
  .p-flow__title img {
    width: 192px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .p-flow__steps {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 24px;
  }
  .p-flow__step {
    display: flex;
    flex-direction: column;
    background-color: #fdfdfd;
    border: 1px solid #00b0b0;
    border-radius: 8px;
    padding: 16px;
  }
  .p-flow__step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 16px;
  }
  .p-flow__step-number {
    font-size: 0.875rem;
    font-weight: 700;
    color: #083757;
    line-height: 1.5;
  }
  .p-flow__step-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: #083757;
    line-height: 1.1;
    margin: 0;
  }
  .p-flow__step-title .first {
    letter-spacing: -0.32em;
  }
  .p-flow__step-title .second {
    letter-spacing: -0.16em;
  }
  .p-flow__step-image {
    width: 100%;
    margin: 12px 0 0;
  }
  .p-flow__step-image img {
    width: 100%;
    height: auto;
  }
  .p-flow__step-content {
    display: flex;
    flex-direction: column;
  }
  .p-flow__step-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #083757;
    margin: 12px 0 0;
  }
  .p-flow__step-text span {
    font-weight: 700;
  }
  .p-flow__step-check {
    display: flex;
    flex-direction: column;
    padding: 8px 0 12px 16px;
    background-color: #F1F1F1;
    border-radius: 8px;
    margin-top: 18px;
  }
  .p-flow__step-check-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f3f95;
    line-height: 1.6;
    margin: 0;
  }
  .p-flow__step-check-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
  }
  .p-flow__step-check-list li {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1rem;
    line-height: 1.6;
    color: #1f3f95;
  }
  .p-flow__step-check-list li img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .p-flow__step-check-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 400;
    color: #1f3f95;
    line-height: 0.6;
  }
  .p-flow__step-arrow {
    margin: 8px auto;
    width: 54px;
  }
  .p-flow__step-check-text {
    line-height: 1.2;
  }
  .p-flow__step-check-sub {
    font-size: 0.8125rem;
    font-weight: 400;
  }
  .p-flow__bubble3 {
    position: absolute;
    bottom: -10px;
    left: 42px;
    width: 62px;
  }
  .p-flow__bubble4 {
    position: absolute;
    bottom: 20px;
    left: 90px;
    width: 25px;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  FAQ Section (.p-faq)
==================================================*/
@layer components {
  .p-faq {
    background-color: #068ac7;
    color: #fdfdfd;
  }
  .p-faq__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    margin: 40px 0 0;
  }
  .p-faq__title span.p-faq-16 {
    letter-spacing: -0.16em;
  }
  .p-faq__title span.p-faq-24 {
    letter-spacing: -0.24em;
  }
  .p-faq__title span.p-faq-8 {
    letter-spacing: -0.08em;
  }
  .p-faq__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 32px 20px 40px;
  }
  .p-faq__item {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 0.5s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .p-faq__item {
      transition: none;
    }
  }
  .p-faq__item:has(.p-faq__checkbox:checked) {
    grid-template-rows: auto 1fr;
  }
  .p-faq__checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .p-faq__question {
    display: flex;
    align-items: flex-start;
    padding-top: 17px;
    cursor: pointer;
    border-top: 1px solid #fdfdfd;
  }
  .p-faq__item:first-child .p-faq__question {
    border-top: none;
  }
  .p-faq__label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 32px;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 0.8;
    flex-shrink: 0;
  }
  .p-faq__question-text {
    flex: 1;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
  }
  .p-faq__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    position: relative;
  }
  .p-faq__toggle-icon {
    font-size: 0.8rem;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .p-faq__toggle-icon {
      transition: none;
    }
  }
  .p-faq__toggle-icon--down {
    opacity: 1;
  }
  .p-faq__toggle-icon--up {
    opacity: 0;
  }
  .p-faq__answer {
    display: flex;
    align-items: flex-start;
    opacity: 0;
    overflow: hidden;
    min-height: 0;
    padding: 0 46px 0 0;
    margin-top: 8px;
    transform: translateY(-100%);
    transition: opacity 0.5s ease, transform 0.5s ease, padding-top 0.5s ease, padding-bottom 0.5s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .p-faq__answer {
      transition: none;
    }
  }
  .p-faq__checkbox:checked ~ .p-faq__answer {
    opacity: 1;
    transform: translateY(0);
  }
  .p-faq__checkbox:checked ~ .p-faq__question .p-faq__toggle-icon--down {
    opacity: 0;
  }
  .p-faq__checkbox:checked ~ .p-faq__question .p-faq__toggle-icon--up {
    opacity: 1;
  }
  .p-faq__checkbox:not(:checked) ~ .p-faq__question .p-faq__toggle-icon--down {
    opacity: 1;
  }
  .p-faq__checkbox:not(:checked) ~ .p-faq__question .p-faq__toggle-icon--up {
    opacity: 0;
  }
  .p-faq__answer-text {
    flex: 1;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Area Section (.p-area)
==================================================*/
@layer components {
  .p-area {
    background-image: url("../image/top-7area-bg.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }
  .p-area__bubble1 {
    position: absolute;
    top: -36px;
    left: 4px;
    width: 83px;
  }
  .p-area__bubble2 {
    position: absolute;
    top: -27px;
    left: 97px;
    width: 33px;
  }
  .p-area__header {
    width: clamp(293px, 78%, 336px);
    margin: 16px 16px 0 auto;
  }
  .p-area__header img {
    width: 100%;
    height: auto;
    display: block;
  }
  .p-area__content {
    width: clamp(347px, 92%, 398px);
    margin: 8px auto 56px;
  }
  .p-area__prefectures {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  .p-area__prefecture {
    display: flex;
    flex-direction: column;
    background-color: #fdfdfd;
    border: 1px solid #083757;
  }
  .p-area__prefecture-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fdfdfd;
    line-height: 1.2;
    margin: 0;
    background-color: #083757;
    text-align: center;
  }
  .p-area__prefecture-list {
    font-size: 0.75rem;
    font-weight: 200;
    line-height: 1;
    color: #083757;
    margin: 0;
    padding: 8px;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Contact Section (.p-contact)
==================================================*/
@layer components {
  .p-contact {
    background: linear-gradient(45deg, #0B8CC8 -60%, #FFFFFF 120%);
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .p-contact__bubble1 {
    position: absolute;
    top: -45px;
    left: 250.5px;
    width: 83px;
  }
  .p-contact__bubble2 {
    position: absolute;
    top: 10px;
    left: 320px;
    width: 33px;
  }
  .p-contact .p-section__header {
    margin: 64px auto 0;
    width: clamp(252px, 288.96px, 67vw);
    text-align: center;
  }
  .p-contact .p-section__title {
    color: #083757;
    font-size: 1.5rem;
  }
  .p-contact .p-section__description {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .p-contact__table {
    width: clamp(332px, 380px, 88.5vw);
    margin: 40px auto 0;
  }
  .p-contact__row {
    display: flex;
    flex-direction: column;
    width: clamp(332px, 380px, 88.5vw);
    margin-top: 38px;
  }
  .p-contact__label {
    font-weight: 400;
    line-height: 1.2;
  }
  .p-contact__label label {
    display: flex;
    align-items: center;
  }
  .p-contact__field {
    margin-top: 12px;
    width: clamp(332px, 380px, 88.5vw);
  }
  .p-contact__field input,
  .p-contact__field textarea,
  .p-contact__field select {
    padding: 14px 20px;
    background-color: #fdfdfd;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.6;
  }
  .p-contact__field input::placeholder,
  .p-contact__field textarea::placeholder,
  .p-contact__field select::placeholder {
    color: #aaaaaa;
    opacity: 1;
  }
  .p-contact__field input,
  .p-contact__field select {
    height: 54px;
  }
  .p-contact__field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23083757' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 50px;
    cursor: pointer;
    color: #083757;
  }
  .p-contact__field select:invalid {
    color: #aaaaaa;
  }
  .p-contact__field select option {
    color: #083757;
  }
  .p-contact__field select option:disabled {
    color: #aaaaaa;
  }
  .p-contact__privacy {
    margin: 40px auto 0;
    font-size: 0.875rem;
    color: #083757;
    border-radius: 4px;
    border: 0.5px solid #083757;
    background-color: #fdfdfd;
    padding: 8px 12px;
    width: clamp(332px, 380px, 88.5vw);
    height: 160px;
    overflow: auto;
  }
  .p-contact__consent {
    margin-top: 41.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
  }
  .p-contact__actions {
    margin-top: 24px;
    text-align: center;
  }
  .p-contact__actions .c-button {
    min-width: 220px;
    background-color: #068ac7;
    border-radius: 30px;
    width: clamp(332px, 380px, 88.5vw);
    margin-bottom: 64px;
  }
  .p-contact__form:invalid .p-contact__actions .c-button {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .p-contact__form:valid .p-contact__actions .c-button {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
  }
  .p-contact__label .is-required,
  .p-contact__field .is-required {
    color: #fdfdfd;
    background-color: #1f3f95;
    font-weight: 700;
    font-size: 0.75rem;
    margin-left: 12px;
    padding: 4px 8px;
    border-radius: 2px;
    line-height: 1;
  }
  .p-contact__consent input[type=checkbox] {
    width: 24px;
    height: 24px;
    border: 1px solid #aaaaaa;
    border-radius: 4px;
    accent-color: #1f3f95;
  }
  .p-contact__radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
  }
  .p-contact__radio-row:last-child {
    margin-bottom: 0;
  }
  .p-contact__radio-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background-color: transparent;
  }
  .p-contact__radio-label input[type=radio] {
    width: 24px;
    height: 24px;
    margin: 0;
    cursor: pointer;
    accent-color: #068ac7;
    background-color: transparent;
  }
  .p-contact__radio-text {
    color: #083757;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Fixed CTA (.p-fixed-cta)
==================================================*/
@layer components {
  .p-fixed-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 8px 0;
    max-width: 430px;
    margin: 0 auto;
  }
  .p-fixed-cta__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    max-width: 430px;
    margin: 0 auto;
  }
  .p-fixed-cta__line,
  .p-fixed-cta__email,
  .p-fixed-cta__phone {
    padding: 16px;
    border-radius: 8px;
    width: 88px;
    height: 80px;
    box-shadow: inset 0 -3px 4px 0 rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    color: #fdfdfd;
  }
  @media (prefers-reduced-motion: reduce) {
    .p-fixed-cta__line,
    .p-fixed-cta__email,
    .p-fixed-cta__phone {
      transition: none;
    }
  }
  .p-fixed-cta__line:hover,
  .p-fixed-cta__email:hover,
  .p-fixed-cta__phone:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 -4px 6px 0 rgba(0, 0, 0, 0.3);
  }
  .p-fixed-cta__line:active,
  .p-fixed-cta__email:active,
  .p-fixed-cta__phone:active {
    transform: translateY(0);
  }
  .p-fixed-cta__line {
    background-color: #06C755;
  }
  .p-fixed-cta__line img {
    width: 48px;
    height: auto;
    margin: 0 auto;
  }
  .p-fixed-cta__email {
    background-color: #C77006;
  }
  .p-fixed-cta__email img {
    width: 48px;
    height: auto;
    margin: 0 auto;
  }
  .p-fixed-cta__phone {
    background-color: #068ac7;
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    width: 173.66px;
  }
  .p-fixed-cta__phone::before {
    content: "";
    position: absolute;
    left: 44%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 48px;
    background-color: #fdfdfd;
  }
  .p-fixed-cta__phone-left img {
    width: 48px;
    height: auto;
  }
  .p-fixed-cta__phone-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    padding-left: 8px;
  }
  .p-fixed-cta__phone-right p {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    margin: 0;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Thanks Section (.p-thanks)
==================================================*/
@layer components {
  ---外側背景を設定したい場合はこちらを使ってください--- body.p-thanks__wrapper {
    background-color: #068ac7;
  }
  .l-thanks__header {
    width: 100%;
    background-color: #068ac7;
  }
  .p-thanks__wrapper {
    width: 100%;
    background: url("../image/top-3reason-bg.webp") repeat-x center top;
    background-size: 430px auto;
  }
  .p-thanks {
    background: none !important;
  }
  .l-thanks__footer {
    width: 100%;
    background-color: #1f3f95;
  }
  ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー .p-thanks {
    background: url("../image/top-3reason-bg.webp") no-repeat center top;
    background-size: 430px auto;
    width: clamp(375px, 430px, 100vw);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  @media (min-width: 430px) {
    ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー .p-thanks {
      background-size: 100% auto;
      background-position: center top;
    }
  }
  .p-thanks {
    background: url("../image/top-3reason-bg.webp") no-repeat center top;
  }
  .p-thanks__header {
    padding: 16px;
    margin: 0 auto;
    position: relative;
    width: clamp(375px, 430px, 100vw);
  }
  .p-thanks__logo {
    width: 150px;
    height: auto;
    position: absolute;
    top: 16px;
    left: 10%;
  }
  .p-thanks__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 16px 40px;
  }
  .p-thanks__message-box {
    background-color: rgba(0, 176, 176, 0.8);
    border-radius: 8px;
    padding: 40px 32px;
    text-align: center;
    color: #fdfdfd;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .p-thanks__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .p-thanks__text {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 2;
  }
  .p-thanks__text:first-of-type {
    margin-top: 16px;
  }
  .p-thanks__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 24px;
    margin-top: 40px;
    background-color: #00b0b0;
    border-radius: 30px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .p-thanks__button {
      transition: none;
    }
  }
  .p-thanks__button:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .p-thanks__button-text {
    display: inline-block;
  }
  .p-thanks__button-arrow {
    width: auto;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
  }
  .l-thanks__footer {
    padding-bottom: 0;
  }
  @media (min-width: 768px) {
    .l-thanks__footer {
      padding-bottom: 64px;
    }
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Object Utility - Text Helpers
==================================================*/
@layer utilities {
  .u-text-center {
    text-align: center;
  }
  .u-text-small {
    font-size: 0.875rem;
  }
  .u-font-en {
    font-family: "Source Serif Pro", "Inter", serif;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
}
/*==================================================
  Style Entry Point
==================================================*/
/*==================================================
  Object Utility - Spacing Helpers
==================================================*/
@layer utilities {
  .u-mb-sm {
    margin-bottom: 8px;
  }
  .u-mb-md {
    margin-bottom: 16px;
  }
  .u-mb-lg {
    margin-bottom: 24px;
  }
  .u-mt-lg {
    margin-top: 24px;
  }
}
html {
  font-synthesis: none;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}