body {
  font-family: "Noto Sans JP", sans-serif;
  color: #212121;
  background: #00AFCC;
  margin: 0;
  font-size: clamp(14px, 2.5vw, 16px);
  line-height: 1.6;
}
*, *::before, *::after {box-sizing: border-box;}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dt, dd {margin: 0; padding: 0;}

.l-container {max-width: 1120px; padding: clamp(30px, 6vw, 80px) clamp(15px, 5vw, 40px); margin: clamp(30px, 5vw, 60px) auto 0; background-color: #E4F9FC; border-radius: 8px;}
.pcNone {display: none;}
@media (max-width: 1160px) {
  .l-container {width: 90%;}
}
@media (max-width: 768px) {
  .pcNone {display: block;}
}

.c-section-title {
  text-align: center;
  color: #3E1D10;
  font-size: clamp(18px, 4vw, 36px);
  font-weight: 900;
  margin: 0 auto clamp(20px, 5vw, 40px);
}
.c-section-title-privacy {color: #3E1D10; font-size: clamp(16px, 4vw, 24px); font-weight: 700;}
.c-section-title__lead {font-size: clamp(12px, 2vw, 20px); font-weight: 700; display: block;}
.c-button-banner {
  display: flex;
  align-items: center;
  gap: clamp(8px, 3vw, 15px);
  max-width: 760px;
  width: 100%;
  background-color: #FFF000;
  border: clamp(2px, 0.6vw, 4px) solid #3E1D10;
  border-radius: 8px;
  color: #3E1D10;
  padding: clamp(10px, 4vw, 24px) clamp(15px, 4.5vw, 30px);
  text-decoration: none;
  transition: all .3s ease;
  position: relative;
  box-shadow: clamp(2px, 1vw, 4px) clamp(2px, 1vw, 4px) 0 #3E1D10;
  margin: 0 auto clamp(10px, 3vw, 20px);
  font-weight: 900;
}
.c-button-banner:hover {transform: translate(3px, 3px); box-shadow: 1px 1px 0 #3E1D10;}
.c-button-banner__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #3E1D10;
  color: #fff;
  border-radius: 50%;
  width: clamp(48px, 8vw, 60px);
  height: clamp(48px, 8vw, 60px);
  font-size: clamp(12px, 3.2vw, 20px);
  font-weight: 700;
  flex-shrink: 0;
}
.c-button-banner__text {font-size: clamp(14px, 3vw, 32px);}
.c-button-banner__text-big {font-size: clamp(18px, 4vw, 40px);}
.c-button-banner__icon {margin-left: auto; width: clamp(20px, 6vw, 32px);}
@media (max-width: 768px) {
  .c-button-banner__text-big {display: block;}
}

.l-header {background: #fff;}
.l-header__inner {max-width: 1120px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 10px;}
.c-button-banner--header {width: auto; padding: 10px 20px; font-size: clamp(14px, 2.5vw, 16px); font-weight: 700; margin: 0; border-width: 2px; box-shadow: 2px 2px 0 #3E1D10;}
.c-button-banner--header:hover {transform: translate(1px, 1px);}
.header-logo {width: 90px;}

@media (max-width: 768px) {
  .c-button-banner--header {padding: 8px 20px;}
  .header-logo {width: 80px;}
}

.l-hero {
  background: url('/wp/wp-content/themes/tyl/images/hearpet/aixia/main_bg.webp') no-repeat center center;
  background-size: cover;
  padding: 20px 0 0;
}
.l-hero__inner {
  max-width: 1280px;
  padding: 0 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}
@media (max-width: 768px) {
  .l-hero {padding: 0;}
  .l-hero__inner {padding: 0 10px 20px; flex-direction: column; gap: 0;}
  .l-hero__item--cat {width: 48px; margin-top: -10px;}
}

.l-present__inner {border: clamp(3px, 1vw, 6px) solid #FFF000; padding: clamp(15px, 4vw, 40px);}
.present-product {display: flex; align-items: center; gap: clamp(10px, 3vw, 50px); justify-content: center; margin-bottom: clamp(15px, 4vw, 40px);}
.present-product__image {max-width: clamp(160px, 20vw, 240px); width: 100%; height: 100%;}
.present-product__title {max-width: 680px; width: 100%; height: 100%; text-align: right; line-height:1;}
.present-product__remark {font-size: clamp(9px, 1.2vw, 12px); font-weight: 400; margin-top: 20px;}
.present__period {text-align: center;}
.present__period span {font-size: clamp(12px, 2.2vw, 14px);}
@media (max-width: 768px) {
  .present-product {flex-direction:column;}
}

.voice-list {display: grid; gap: 20px; max-width: 890px; width: 100%; margin: 0 auto clamp(20px, 4vw, 40px);}
.voice-item {display: flex; align-items: center; justify-content: center; gap: 40px;}
.voice-item__image {width: clamp(100px, 12vw, 130px); height: auto; flex-shrink: 0;}
.voice-item__bubble {
  background-color: #fff;
  border-radius: 4px;
  padding: clamp(15px, 2.5vw, 20px) clamp(15px, 3vw, 30px);
  position: relative;
  max-width: 100%;
}
.voice-item__bubble::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 16px solid #fff;
}
.voice-item__title {
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 700;
  color: #00AFCC;
  margin: 0 0 8px;
}
@media (max-width: 768px) {
  .voice-item {flex-direction: column-reverse; gap: 10px;}
  .voice-item__bubble::before {
    left: 50%;
    top: initial;
    bottom: -10px;
    transform: translateX(-50%);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 16px solid #fff;
    border-bottom: none;
  }
}

.c-feature-lead {
  background-color: #C29B43;
  color: #fff;
  text-align: center;
  padding: clamp(10px, 2vw, 20px) clamp(14px, 2vw, 24px);
  border-radius: 40px;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.6;
  position: relative;
  width: 100%;
  display: inline-block;
  margin-bottom: 30px;
}
.c-feature-lead::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #C29B43;
}
.features__icare {width: clamp(100px, 25vw, 160px); margin: 0 auto clamp(8px, 2vw, 16px);}
.feature-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 3vw, 40px);
  margin-bottom: clamp(40px, 6vw, 80px);
}
.feature-item {display: grid; gap: clamp(8px, 3vw, 15px);}
.feature-item__icon img {width: clamp(100px, 10vw, 120px); height: auto; margin: 0 auto;}
.feature-item__title {font-size: clamp(16px, 3.5vw, 24px); font-weight: 700; color: #3E1D10; text-align: center;}
.feature-support-visual {max-width: 1000px; width: 100%; margin: 0 auto 40px;}
@media (max-width: 768px) {
}

.c-product-title {width: 100%; max-width: 940px; margin: 0 auto 10px; font-size: clamp(14px, 3.5vw, 20px);}
.product-table {width: 100%; max-width: 940px; margin: 0 auto 10px; border-collapse: collapse;}
.product-table th, .product-table td {border: 1px solid #ccc; padding: clamp(10px, 2.5vw, 15px);}
.product-table td {background: #fff;}
.product-table th {background: #fafafa; width: 7em; font-weight: 400; text-align: left;}
.product-table__note {font-size: clamp(10px, 1.2vw, 12px); display: block;}
.product-info__note {font-size: clamp(12px, 2.2vw, 14px); width: 100%; max-width: 940px; margin: 0 auto clamp(20px, 4vw, 40px);}
@media (max-width: 768px) {
  .product-table, .product-table tbody, .product-table tr, .product-table th, .product-table td {display: block; width: 100%;}
  .product-table tr {margin-bottom: 10px;}
  .product-table th {border-bottom: none;}
}

@media (max-width: 768px) {
  .c-feature-lead {text-align: center; border-radius: 4px; margin-bottom: 20px;}
  .c-feature-lead::after {bottom: -11px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid #C29B43;}
  .feature-list {grid-template-columns: 1fr;}
}

.l-about {padding: clamp(20px, 5vw, 40px);}
.l-about__inner {max-width: 940px; margin: 0 auto;}
.c-about__lead, .c-about__block {margin-bottom: 30px;}
.c-about__heading {font-weight: 700; font-size: clamp(14px, 2.5vw, 16px);}
.c-about__text a {color: #006F81; text-decoration: underline; transition: all .3s ease;}
.c-about__text a:hover {opacity: .8;}
.c-about__text span {font-size: clamp(12px, 2.2vw, 14px);}

.l-apply {padding: clamp(20px, 5vw, 40px);}
.l-apply__inner {max-width: 760px; margin: 0 auto;}
.c-entry-form__label {display: flex; align-items: center; gap: 10px; margin-bottom: 8px;}
.c-entry-form__required {background-color: #E50012; color: #fff; font-size: clamp(12px, 2.2vw, 14px); padding: 0 8px;}
.c-entry-form__optional {background-color: #999; color: #fff; font-size: clamp(12px, 2.2vw, 14px); padding: 0 8px;}
.c-entry-form__input, .c-entry-form__textarea {width: 100%; border: solid 1px #ccc; padding: 10px;}
.c-entry-form__row {margin-bottom: 20px;}
.c-entry-form__submit .c-button-banner {max-width: 280px; font-size: clamp(14px, 2.5vw, 16px); padding: 15px 40px;}
.c-thanks {text-align: center;}
.c-thanks h3 {font-size: clamp(14px, 2.5vw, 16px);}
.apply-text {text-align: center; margin-bottom: 40px;}
.apply-text a {color: #006F81; text-decoration: underline; transition: all .3s ease;}
.apply-text a:hover {opacity: .8;}

@media (max-width: 768px) {
  .c-entry-form__submit .c-button-banner {margin-bottom: 0;}
  .c-thanks p {text-align: left;}
  .apply-text {text-align: left; margin-bottom: 30px;}
}

.campaign-contact {background-color: #006F81; color: #fff; max-width: 640px; width: 90%; margin: clamp(30px, 5vw, 60px) auto; padding: clamp(20px, 4vw, 30px) clamp(20px, 6vw, 60px); border-radius: 8px;}
.campaign-contact__title {font-size: clamp(14px, 3vw, 18px); font-weight: 700; margin-bottom: 8px;}
.campaign-contact__label {margin-bottom: 10px;}
.campaign-contact__note, .campaign-contact__footnote {font-size: clamp(10px, 2vw, 12px); display: block;}
.campaign-contact__link {color: #fff; text-decoration: underline;}
.campaign-contact__link:hover {opacity: 0.8;}

.p-banner {max-width: 760px; width: 100%; margin: clamp(30px, 5vw, 60px) auto; padding: clamp(15px, 4vw, 40px);}
.p-banner__link {transition: all .5s ease;}
.p-banner__link:hover {filter: brightness(1.1);}
.p-banner__img {}

.l-footer {background: #212121; padding: 20px 0; color: #fff;}
.l-footer__inner {max-width: 1120px; width: 90%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.l-footer__copy {font-size: clamp(12px, 2.4vw, 14px);}
.l-footer__nav {display: flex; gap: 24px; list-style: none;}
.l-footer__nav-item a {color: #fff; font-size: clamp(12px, 2.4vw, 14px); text-decoration: none; transition: opacity 0.2s ease;}
.l-footer__nav-item a:hover {opacity: 0.7;}
@media (max-width: 768px) {
  .l-footer__inner {flex-direction: column-reverse; gap: 8px;}
}

.c-entry-form__remark {font-size: clamp(12px, 2.4vw, 14px); margin-bottom: 20px;}

.l-terms {padding: clamp(20px, 5vw, 40px); margin-bottom: 60px;}
.p-notice__list {padding-left: 1em; margin-bottom: 40px;}
.p-notice__text {margin-bottom: 40px;}