:root {
  /* ===== ブランドカラー ===== */
  --color-brand-01: #FFD12D;
  --color-brand-02: #345F55;

  /* ===== アクセント ===== */
  --color-strong: #FFA600;

  /* ===== 背景・枠線 ===== */
  --color-bg-white: #ffffff;
  --color-bg-yellow-01: #FFDD65;
  --color-bg-yellow-02: #FEF5D5;
  --color-bg-yellow-03: #FFE197;
  --color-bg-yellow-04: #FDC04E;
  --color-bg-light-red-01: #FD6C6F;
  --color-bg-brown: #664f00;
  --color-bg-line: #06C755;
  --color-dot: #231815;
  --color-border: #D9D9D9;

  /* ===== テキスト ===== */
  --color-text: #231815;
  --color-text-white: #ffffff;
  --color-text-brown: #664f00;
  --color-text-light-red-01: #FD6C6F;
}

/* ================================================================ */

html {
  font-size: 62.5%;
  scroll-padding-top: 0;
  /* wordpress管理画面でアンカーリンクの遷移先がずれるのを防止 */
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

body :target {
  scroll-margin-top: 0;
  /* wordpress管理画面でアンカーリンクの遷移先がずれるのを防止 */
}

/* =============
  ヘッダー
============= */
.header-top {
  background-color: var(--color-bg-yellow-01);
  position: relative;
}

@media screen and (min-width: 768px) {
  .header-top {
    background-color: transparent;
    position: absolute;
    width: 100%;
  }
}

.header-top__content {
  max-width: 91vw;
  margin: 0 auto;
  padding: 32px 0 20px;
}

@media screen and (min-width: 768px) {
  .header-top__content {
    max-width: 77.22222222222223vw;
    padding: 32px 0 0;
    position: relative;
    display: flex;
    justify-content: space-between;
  }
}

.header-top__logo {
  margin: 0;
  width: 148px;
}

.header-top__logo>a {
  display: block;
}

@media screen and (min-width: 768px) {
  .header-top__logo {
    width: min(22.22222222222222vw, 320px);
  }
}

@media (hover: hover) {
  .header-top__logo img {
    transition: opacity 0.3s ease;
  }

  .header-top__logo:hover img {
    opacity: 0.5;
  }
}

.header-top__link_list {
  display: none;
}

@media screen and (min-width: 768px) {
  .header-top__link_list {
    position: static;
    display: flex;
    gap: 20px;
    margin: 0;
  }
}

@media screen and (min-width: 768px) {
  .header-top__link_list_item {
    display: block;
    margin: 0;
  }
}

@media screen and (min-width: 768px) {
  .header-top__link {
    display: block;
    width: min(13.88888888888889vw, 200px);
    border-radius: 50px;
    background-color: var(--color-bg-light-red-01);
    box-shadow: 0px 4px 4px #1B511480;
    color: var(--color-text-white);
    font-size: min(1.3888888888888888vw, 2rem);
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    padding: 1.6vw 2.6vw 1.6vw 1vw;
    position: relative;
  }
}

@media (hover: hover) {
  .header-top__link {
    transition: filter 0.3s ease-in-out;
  }

  .header-top__link:hover {
    filter: brightness(1.4);
  }
}

@media screen and (min-width: 768px) {
  .header-top__link--line {
    background-color: var(--color-bg-line);
  }
}

@media (hover: hover) {
  .header-top__link--line:hover {
    filter: brightness(1.1);
  }
}

@media screen and (min-width: 768px) {
  .header-top__link::after {
    content: "";
    position: absolute;
    display: block;
    right: 1vw;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("../images/icon-link_arrow_right-fill.svg");
    background-repeat: no-repeat;
    margin-top: 1px;
    width: 20px;
    height: 20px;
  }
}

/* =============
  フッター
============= */

.footer-top {
  background-color: var(--color-bg-white);
  overflow-x: hidden;
  /* iOS Safariで背景画像拡大対策により横スクロールが出るためoverflow-xでカット */
}

.footer-top__logo {
  text-align: center;
  padding-top: 40px;
  width: 154px;
  margin: 0 auto 24px;
}

@media screen and (min-width: 768px) {
  .footer-top__logo {
    width: 184px;
    padding-top: 64px;
    margin: 0 auto 96px;
  }

  .footer-top__logo img {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .footer-top__picture {
    display: block;
    background-image: linear-gradient(0deg, #345f55, #345f55 33%, #FFFFFF 33% 100%);
  }
}

.footer-top__img {
  width: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  /* ↑iOS Safariのサブピクセル丸めで1px欠ける問題の回避 */
}

@media screen and (min-width: 768px) {
  .footer-top__img {
    width: 400px;
    margin: 0 auto;
  }
}

.footer-top__content {
  background-color: var(--color-brand-02);
  padding-bottom: 16px;
}

.footer-top__nav {
  padding: 16px 40px 64px;
}

@media screen and (min-width: 768px) {
  .footer-top__nav {
    max-width: 735px;
    margin: 0 auto;
    padding: 24px 40px 40px;
  }
}

.footer-top__nav_primary_list {
  max-width: 300px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media screen and (min-width: 768px) {
  .footer-top__nav_primary_list {
    max-width: 464px;
  }
}

.footer-top__nav_primary_list_item {
  display: flex;
  align-items: center;
  gap: 0 4px;
}

.footer-top__nav_primary_list_item::before {
  content: "";
  display: block;
  background-image: url("../images/icon-footer_link_arrow-right.svg");
  background-repeat: no-repeat;
  width: 15px;
  min-width: 15px;
  height: 15px;
}

.footer-top__nav_primary_list_item>a {
  font-size: 1.2rem;
  color: var(--color-text-white);
  font-weight: bold;
  line-height: 1.3;
}

@media screen and (min-width: 768px) {
  .footer-top__nav_primary_list_item>a {
    font-size: 1.4rem;
  }
}

@media (hover: hover) {
  .footer-top__nav_primary_list_item>a:hover {
    text-decoration: underline;
  }
}

.footer-top__nav_hr {
  border-top: 1px solid var(--color-bg-white);
  border-left: none;
  border-right: none;
  border-bottom: none;
  margin: 32px 0;
}

@media screen and (min-width: 768px) {
  .footer-top__nav_hr {
    margin: 40px 0 20px;
  }
}

.footer-top__nav_secondary_list {
  max-width: 300px;
  margin: 0 auto;
  display: flex;
  gap: 0 24px;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .footer-top__nav_secondary_list {
    max-width: 464px;
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

.footer-top__nav_secondary_list_item {
  display: flex;
  align-items: center;
  gap: 0 4px;
}

.footer-top__nav_secondary_list_item::before {
  content: "";
  display: block;
  background-image: url("../images/icon-footer_link_arrow-right.svg");
  background-repeat: no-repeat;
  width: 15px;
  min-width: 15px;
  height: 15px;
}

.footer-top__nav_secondary_list_item>a {
  font-size: 1.2rem;
  color: var(--color-text-white);
  line-height: 1.3;
}

@media screen and (min-width: 768px) {
  .footer-top__nav_secondary_list_item>a {
    font-size: 1.4rem;
  }
}

@media (hover: hover) {
  .footer-top__nav_secondary_list_item>a:hover {
    text-decoration: underline;
  }
}

.footer-top__copy {
  text-align: center;
  color: var(--color-text-white);
  font-size: 1.2rem;
  line-height: 1;
  display: block;
}

/* ================================================================ */

/* =============

  汎用コンポーネント

  ============= */

/* =============
  見出し
============= */
.heading-02 {
  margin-bottom: 16px;
}

.heading-02__sub {
  max-width: 80px;
  margin: 0 auto 16px;
  border-radius: 10px;
  color: var(--color-brand-02);
  background-color: var(--color-brand-01);
  font-size: 1.2rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .heading-02__sub {
    max-width: 96px;
    border-radius: 20px;
    font-size: 1.4rem;
  }
}

.heading-02__sub--bg_white {
  background-color: var(--color-bg-white);
}

.heading-02__main {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .heading-02__main {
    font-size: 2.4rem;
  }
}

/* =============
  ボタン - 通常リンク用
============= */
.button-link {
  width: 216px;
  max-width: 100%;
  display: inline-block;
  border-radius: 30px;
  background-color: var(--color-brand-02);
  padding: 8px 40px 8px 24px;
  color: var(--color-text-white);
  box-shadow: 0px 4px 4px #0E4C0B40;
  font-size: 1.6rem;
  position: relative;
}

@media screen and (min-width: 768px) {
  .button-link {
    width: 234px;
    padding: 16px 40px 16px 24px;
  }
}

@media (hover: hover) {
  .button-link {
    transition: filter 0.3s ease-in-out;
  }

  .button-link:hover {
    filter: brightness(1.3);
  }
}

.button-link::after {
  content: "";
  position: absolute;
  display: block;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("../images/icon-link_arrow_right-fill.svg");
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

/* =============
  アイコン装飾
============= */
.icon-required {
  color: var(--color-text-light-red-01);
}

/* =============
  追従 - CTA
============= */

.fixed-cta {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
}

@media screen and (min-width: 768px) {
  .fixed-cta {
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backface-visibility: hidden;
    /* transformによるにじみ防止 */
  }
}

@media screen and (min-width: 768px) {
  .fixed-cta.is-visible {
    opacity: 1;
    visibility: visible;
  }
}

.fixed-cta__link_list {
  display: flex;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .fixed-cta__link_list {
    flex-direction: column;
  }
}

.fixed-cta__link_list_item {
  display: block;
  margin: 0;
}

.fixed-cta__link {
  display: block;
  width: 68px;
  height: 68px;
  padding: 12px 6px;
  color: var(--color-text-white);
  line-height: 1.23;
  font-size: 1.3rem;
  text-align: center;
  font-family: "M PLUS 1p";
  background-color: var(--color-bg-light-red-01);
  position: relative;
  border-right: 2px solid #BE5152;
  border-bottom: 2px solid #BE5152;
}

@media screen and (min-width: 768px) {
  .fixed-cta__link {
    width: 82px;
    height: 82px;
    font-size: 1.5rem;
    border-right: 3px solid #BE5152;
    border-bottom: 3px solid #BE5152;
  }
}

@media (hover: hover) {
  .fixed-cta__link {
    /* 他と同様にfilterにしたかったが、実際の表示が微妙だったのでbackground-colorを適用 */
    transition: background-color 0.3s ease-in-out;
  }

  .fixed-cta__link:hover {
    background-color: #FF979B;
  }
}

.fixed-cta__link--line {
  background-color: var(--color-bg-line);
  border-right: 2px solid #01933D;
  border-bottom: 2px solid #01933D;
}

@media (hover: hover) {
  .fixed-cta__link--line:hover {
    background-color: #07DB5E;
  }
}

@media screen and (min-width: 768px) {
  .fixed-cta__link--line {
    border-right: 3px solid #01933D;
    border-bottom: 3px solid #01933D;
  }
}

.fixed-cta__link::after {
  content: "";
  position: absolute;
  display: block;
  background-image: url("../images/icon-link_arrow_right-fill.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (min-width: 768px) {
  .fixed-cta__link::after {
    width: 22px;
    height: 22px;
    bottom: 4px;
  }
}

.fixed-cta__link_content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 73%;
}

@media screen and (min-width: 768px) {
  .fixed-cta__link_content {
    height: 80%;
  }
}

/* =============
  エリア - CTA
============= */
.area-cta-01 {
  background-color: var(--color-bg-light-red-01);
  padding: 40px 24px;
  position: relative;
  z-index: 2;
}

@media screen and (min-width: 768px) {
  .area-cta-01 {
    padding: 40px 0;
  }
}

.area-cta-01__heading {
  position: absolute;
  display: block;
  margin-bottom: 12px;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: var(--color-brand-01);
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-brown);
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  width: calc(100% - 24px * 2);
  max-width: 328px;
}

@media screen and (min-width: 768px) {
  .area-cta-01__heading {
    font-size: 2rem;
    border-radius: 40px;
    top: -20%;
    max-width: 620px;
    filter: drop-shadow(0px 6px 4px #00000040);
  }
}

.area-cta-01__heading::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  border-style: solid;
  border-width: 12px 6px 0 6px;
  border-color: var(--color-brand-01) transparent transparent;
  translate: -50% 100%;
}

@media screen and (min-width: 768px) {
  .area-cta-01__heading::after {
    border-width: 20px 10px 0 10px;
  }
}

.area-cta-01__content {
  background-color: #FFF0F0;
  padding: 32px 24px;
}

@media screen and (min-width: 768px) {
  .area-cta-01__content {
    padding: 40px 24px;
  }
}

.area-cta-01__texts {
  margin-bottom: 16px;
}

.area-cta-01__text {
  color: var(--color-bg-light-red-01);
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  margin: 0 0 8px;
}

@media screen and (min-width: 768px) {
  .area-cta-01__text {
    font-size: 1.8rem;
    margin: 0;
  }
}

.area-cta-01__link_list {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .area-cta-01__link_list {
    display: flex;
    align-items: center;
    gap: 0 3.125vw;
    max-width: 680px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .area-cta-01__link_list_item {
    width: 50%;
  }
}

.area-cta-01__link_list_item:not(:last-child) {
  margin-bottom: 24px;
}

@media screen and (min-width: 768px) {
  .area-cta-01__link_list_item:not(:last-child) {
    margin-bottom: 0;
  }
}

.area-cta-01__link {
  border-radius: 30px;
  max-width: 216px;
  padding: 16px 24px;
  font-size: 1.6rem;
  display: block;
  margin: 0 auto;
  text-align: center;
  font-family: "M PLUS 1p";
  color: var(--color-text-white);
  position: relative;
  background-color: var(--color-bg-light-red-01);
  box-shadow: 0px 4px 4px #8B121240;
}

@media screen and (min-width: 768px) {
  .area-cta-01__link {
    max-width: 100%;
    font-size: 2rem;
    border-radius: 60px;
    padding: 8px 3.125vw;
  }
}

@media (hover: hover) {
  .area-cta-01__link {
    transition: filter 0.3s ease-in-out;
  }

  .area-cta-01__link:hover {
    filter: brightness(1.4);
  }
}

.area-cta-01__link--line {
  background-color: var(--color-bg-line);
  box-shadow: 0px 4px 4px #1B511440;
}

@media (hover: hover) {
  .area-cta-01__link--line:hover {
    filter: brightness(1.1);
  }
}

.area-cta-01__link::after {
  content: "";
  position: absolute;
  display: block;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("../images/icon-link_arrow_right-fill.svg");
  background-repeat: no-repeat;
  margin-top: 1px;
  width: 20px;
  height: 20px;
}

@media screen and (min-width: 768px) {
  .area-cta-01__link::after {
    background-size: contain;
    width: 32px;
    height: 32px;
    right: 2.5vw;
  }
}

/* =============
  エリア - 背景色付き
============= */
.area-bg_yellow_01 {
  background-color: var(--color-bg-yellow-01);
  padding: 0 0 64px;
}

/* ================================================================ */

/* =============

  KVエリア

  ============= */

/* =============
  エリア - キービジュアル
============= */

.area-kv {
  background-color: var(--color-bg-white);
  padding-bottom: 80px;
}

@media screen and (min-width: 768px) {
  .area-kv {
    padding-bottom: 120px;
  }
}

.area-kv__img {
  width: 100%;
  object-fit: cover;
}

.area-kv__reason {
  margin-top: 32px;
  padding: 0 24px;
}

.area-kv__reason_heading {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  margin: 0 16px 16px;
}

@media screen and (min-width: 768px) {
  .area-kv__reason_heading {
    font-size: 1.8rem;
    margin: 0 16px 40px;
  }
}

.area-kv__reason_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 320px;
  margin: 0 auto 24px;
}

@media screen and (min-width: 768px) {
  .area-kv__reason_list {
    gap: 16px;
    max-width: 400px;
    margin: 0 auto 40px;
  }
}

.area-kv__reason_list_item {
  background: linear-gradient(to right bottom,
      #EFCE5C 19%,
      #FFE59C 57%,
      #F3C457 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10.1rem;
  border-radius: 100%;
  padding: 24px 8px;
  text-align: center;
  color: var(--color-text);
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .area-kv__reason_list_item {
    font-size: 1.4rem;
    height: 12.2rem;
  }
}

.area-kv__reason_list_item em {
  font-size: 1.6rem;
  font-style: normal;
}

@media screen and (min-width: 768px) {
  .area-kv__reason_list_item em {
    font-size: 1.8rem;
  }
}

.area-kv__feature {
  padding: 0 24px;
  max-width: 380px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .area-kv__feature {
    max-width: 920px;
    margin: 0 auto;
  }
}

.area-kv__feature_top,
.area-kv__feature_bottom {
  background-color: var(--color-bg-yellow-02);
  position: relative;
  height: 24px;
}

@media screen and (min-width: 768px) {

  .area-kv__feature_top,
  .area-kv__feature_bottom {
    height: 32px;
  }

}

.area-kv__feature_top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

@media screen and (min-width: 768px) {
  .area-kv__feature_top {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}

.area-kv__feature_top::before,
.area-kv__feature_top::after,
.area-kv__feature_bottom::before,
.area-kv__feature_bottom::after {
  content: "";
  position: absolute;
  display: block;
  width: 6px;
  height: 6px;
  background: var(--color-dot);
  border-radius: 100%;
}

@media screen and (min-width: 768px) {

  .area-kv__feature_top::before,
  .area-kv__feature_top::after,
  .area-kv__feature_bottom::before,
  .area-kv__feature_bottom::after {
    width: 10px;
    height: 10px;
  }

}

.area-kv__feature_top::before {
  left: 8px;
  top: 8px;
}

@media screen and (min-width: 768px) {
  .area-kv__feature_top::before {
    left: 16px;
    top: 16px;
  }
}

.area-kv__feature_top::after {
  right: 8px;
  top: 8px;
}

@media screen and (min-width: 768px) {
  .area-kv__feature_top::after {
    right: 16px;
    top: 16px;
  }
}

.area-kv__feature_bottom {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.area-kv__feature_bottom::before {
  left: 8px;
  bottom: 8px;
}

@media screen and (min-width: 768px) {
  .area-kv__feature_bottom::before {
    left: 16px;
    bottom: 16px;
  }
}

.area-kv__feature_bottom::after {
  right: 8px;
  bottom: 8px;
}

@media screen and (min-width: 768px) {
  .area-kv__feature_bottom::after {
    right: 16px;
    bottom: 16px;
  }
}

.area-kv__feature_content {
  background-color: var(--color-bg-yellow-02);
  padding: 0 16px;
}

.area-kv__feature_heading {
  margin: 0 0 8px;
  font-size: 1.6rem;
  color: var(--color-text);
  font-weight: bold;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: end;
}

@media screen and (min-width: 768px) {
  .area-kv__feature_heading {
    font-size: 1.8rem;
    margin: 0 0 24px;
    align-items: center;
  }
}

@media screen and (min-width: 768px) {
  .area-kv__feature_heading>span {
    margin: 0 8px;
  }
}

.area-kv__feature_heading::before,
.area-kv__feature_heading::after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  height: 44px;
  width: 30px;
}

.area-kv__feature_heading::before {
  background-image: url("../images/icon-accent_line-left.svg");
}

.area-kv__feature_heading::after {
  background-image: url("../images/icon-accent_line-right.svg");
}

.area-kv__feature_heading em {
  background-color: var(--color-strong);
  display: inline-block;
  border-radius: 20px;
  color: var(--color-text-white);
  padding: 0 8px;
  margin: 0 2px;
  font-size: 1.8rem;
  font-style: normal;
}

@media screen and (min-width: 768px) {
  .area-kv__feature_heading em {
    font-size: 2rem;
    border-radius: 30px;
    padding: 4px 16px;
    margin: 0 8px 0 0;
  }
}

.area-kv__feature_text {
  font-size: 1.8rem;
  text-align: center;
  margin: 0;
  color: var(--color-text);
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .area-kv__feature_text {
    font-size: 2rem;
  }
}

.area-kv__feature_text>em {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-color: var(--color-strong);
  text-decoration-thickness: 6px;
  text-underline-offset: -3px;
  font-style: normal;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .area-kv__feature_text>em {
    text-decoration-thickness: 12px;
    text-underline-offset: -6px;
  }
}

/* =============

  Problem（こんな“片づけのつまずき”ありませんか？）セクション関連

  ============= */

/* =============
  エリア - こんな“片づけのつまずき”ありませんか？
============= */

.area-problem_voices {
  background-color: var(--color-bg-white);
  padding: 40px 16px;
}

@media screen and (min-width: 768px) {
  .area-problem_voices {
    padding: 64px 16px;
  }
}

/* =============
  リスト - こんな“片づけのつまずき”ありませんか？
============= */
.list-problem_voices {
  margin-top: 24px;
}

@media screen and (min-width: 768px) {
  .list-problem_voices {
    max-width: 920px;
    margin: 0 auto;
    margin-top: 40px;
  }
}

.list-problem_voices__item:not(:last-child) {
  margin-bottom: 24px;
}

@media screen and (min-width: 768px) {
  .list-problem_voices__item:not(:last-child) {
    margin-bottom: 32px;
  }
}

.list-problem_voices__title {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--color-strong);
  margin: 0;
  margin-left: 102px;
}

@media screen and (min-width: 768px) {
  .list-problem_voices__title {
    font-size: 2rem;
    margin-left: 155px;
  }
}

.list-problem_voices__content {
  display: flex;
  align-items: center;
  gap: 0 8px;
}

@media screen and (min-width: 768px) {
  .list-problem_voices__content {
    margin-top: -20px;
  }
}

.list-problem_voices__icon {
  min-width: 75px;
}

@media screen and (min-width: 768px) {
  .list-problem_voices__icon {
    min-width: 130px;
  }

  .list-problem_voices__icon img {
    width: 130px;
    height: 130px;
  }
}

.list-problem_voices__detail {
  width: 100%;
}

.list-problem_voices__detail_desc {
  position: relative;
  display: block;
  margin: 0 0 0 14px;
  padding: 8px 12px;
  background-color: var(--color-bg-yellow-02);
  text-align: left;
  font-size: 1.4rem;
  color: var(--color-text);
}

@media screen and (min-width: 768px) {
  .list-problem_voices__detail_desc {
    font-size: 1.6rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    min-height: calc((1em * 1.83) * 2 + 24px);
    padding: 16px 40px;
    line-height: 1.2;
  }
}

.list-problem_voices__detail_desc::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-style: solid;
  border-width: 8px 14px 8px 0;
  border-color: transparent var(--color-bg-yellow-02) transparent transparent;
  translate: -100% -50%;
}

@media screen and (min-width: 768px) {
  .list-problem_voices__detail_desc::after {
    bottom: auto;
    top: 50%;
  }
}

/* 右寄せ用スタイル */
.list-problem_voices__item:nth-child(even) .list-problem_voices__title {
  margin-left: 0;
}

.list-problem_voices__item:nth-child(even) .list-problem_voices__content {
  flex-direction: row-reverse;
}

.list-problem_voices__item:nth-child(even) .list-problem_voices__detail_desc {
  margin: 0 14px 0 0;
}

.list-problem_voices__item:nth-child(even) .list-problem_voices__detail_desc::after {
  left: auto;
  right: 0;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent var(--color-bg-yellow-02);
  translate: 100% -50%;
}

/* =============
  エリア - 不安や面倒で放置してしまうと…
============= */

.area-problem_fear {
  background-color: var(--color-bg-white);
  overflow-x: hidden;
  /* iOS Safariで背景画像拡大対策により横スクロールが出るためoverflow-xでカット */
}

.area-problem_fear::before {
  content: "";
  display: block;
  transform: scale(1.01);
  /* ↑iOS Safariのサブピクセル丸めで1px欠ける問題の回避 */
  background-image: url("../images/bg-wave-brown-sp.svg");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 13.866666666666665vw;
  /* ↓ブラウザの描画誤差で出る 1px 隙間対策（1px 下にずらす） */
  position: relative;
  top: 1px;
}

@media screen and (min-width: 768px) {
  .area-problem_fear::before {
    background-image: url("../images/bg-wave-brown-pc.svg");
    padding-top: 6.458333333333334vw;
  }
}

.area-problem_fear__content {
  background-color: var(--color-bg-brown);
  background-image: url("../images/bg-problem_fear-sp.svg");
  background-repeat: no-repeat;
  background-position: center calc(100% - 20px);
  padding: 0 0 184px;
}

@media screen and (min-width: 768px) {
  .area-problem_fear__content {
    padding: 16px 0 6.944444444444445vw;
    background-image: url("../images/bg-problem_fear-01-pc.svg"), url("../images/bg-problem_fear-02-pc.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: 15% 100%, 85% 100%;
  }
}

@media screen and (max-width: 1294.9px) {
  .area-problem_fear__content {
    padding: 16px 0 180px;
  }
}

.area-problem_fear__heading {
  color: var(--color-bg-white);
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin: 0 0 16px;
  line-height: 1.5;
}

.area-problem_fear__heading::before {
  content: "";
  background-image: url("../images/icon-problem_frustrated.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 60px;
  height: 70px;
  display: block;
  margin: 0 auto 8px;
}

/* =============
  リスト - 不安や面倒で放置してしまうと…
============= */

.list-problem_fears {
  padding: 0 16px;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .list-problem_fears {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
    max-width: 800px;
    margin: 40px auto 0;
  }
}

.list-problem_fears__item {
  border-radius: 50px;
  background-color: var(--color-bg-white);
  padding: 12px 8px;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-text-brown);
  text-align: center;
}

@media screen and (min-width: 768px) {
  .list-problem_fears__item {
    font-size: 1.6rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 250px;
    max-width: 100%;
    height: 250px;
  }
}

.list-problem_fears__item:not(:last-child) {
  margin-bottom: 16px;
}

.list-problem_fears__item em {
  font-style: normal;
  color: var(--color-strong);
}

/* =============

  Service（迷う必要ナシ！あなたにあった不用品回収をご紹介）セクション関連

  ============= */

.section-service {
  background-color: var(--color-bg-white);
  padding: 64px 0 40px;
}

@media screen and (min-width: 768px) {
  .section-service {
    padding: 64px 0 120px;
  }
}

/* =============
  リスト - サービスのポイント
============= */
.list-service {
  margin: 40px 0 0;
}

@media screen and (min-width: 768px) {
  .list-service {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 3.3333333333333335vw;
    max-width: calc(1225px - 16px * 2);
    padding: 0 16px;
    margin: 48px auto 0;
  }
}

.list-service__item {
  position: relative;
}

@media screen and (min-width: 768px) {
  .list-service__item {
    border-radius: 20px;
  }
}

.list-service__item:not(:last-child)::after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  display: block;
  width: 100%;
  height: 11.466666666666667vw;
  top: calc(100% - 1px);
  left: 0;
}

@media screen and (min-width: 768px) {
  .list-service__item:not(:last-child)::after {
    content: none;
  }
}

.list-service__item:nth-child(1) {
  background-color: var(--color-bg-yellow-03);
  padding: 24px 24px 40px;
  z-index: 3;
}

@media screen and (min-width: 768px) {
  .list-service__item:nth-child(1) {
    padding: 24px;
  }
}

.list-service__item:nth-child(1)::after {
  background-image: url("../images/icon-service_point_accent_arrow-01.svg");
}

.list-service__item:nth-child(2) {
  background-color: var(--color-brand-01);
  padding: 10.666666666666668vw 24px;
  z-index: 2;
}

@media screen and (min-width: 768px) {
  .list-service__item:nth-child(2) {
    padding: 24px;
  }
}

.list-service__item:nth-child(2)::after {
  background-image: url("../images/icon-service_point_accent_arrow-02.svg");
}

.list-service__item:nth-child(3) {
  background-color: var(--color-bg-yellow-04);
  padding: 10.666666666666668vw 24px 80px;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .list-service__item:nth-child(3) {
    padding: 24px;
  }
}

.list-service__heading {
  margin: 0 0 16px;
}

.list-service__heading_point {
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--color-text-white);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 8px;
  margin: 0 0 8px;
}

@media screen and (min-width: 768px) {
  .list-service__heading_point {
    font-size: 2rem;
  }
}

.list-service__heading_point_number {
  font-size: 4rem;
}

@media screen and (min-width: 768px) {
  .list-service__heading_point_number {
    font-size: 3.6rem;
  }
}

.list-service__heading_text {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--color-text);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .list-service__heading_text {
    font-size: clamp(1.8rem, 1.5277777777777777vw, 2.2rem);
  }
}

.list-service__desc::before {
  content: "";
  display: block;
  margin: 0 auto 24px;
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
}

.list-service__desc--point_01::before {
  background-image: url("../images/icon-service_point-01.svg");
}

.list-service__desc--point_02::before {
  background-image: url("../images/icon-service_point-02.svg");
}

.list-service__desc--point_03::before {
  background-image: url("../images/icon-service_point-03.svg");
}

.list-service__desc_text {
  font-size: 1.6rem;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

.list-service__desc_text:not(:last-child) {
  margin: 0 0 16px;
}

/* =============

  Price（不用品回収の料金例）セクション関連

  ============= */

.section-price {
  background-color: var(--color-bg-yellow-02);
  padding: 56px 32px 32px;
}

@media screen and (min-width: 768px) {
  .section-price {
    padding: 64px 56px 80px;
  }
}

.section-price__note {
  font-size: 1.2rem;
  color: var(--color-brand-02);
  margin: 0;
}

@media screen and (min-width: 768px) {
  .section-price__note {
    font-size: 1.4rem;
    text-align: center;
  }
}

/* =============
  リスト - 不用品回収の料金例
============= */

.list-plan {
  margin: 40px 0;
}

@media screen and (min-width: 768px) {
  .list-plan {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 20px;
    margin: 48px 0 32px;
  }
}

@media screen and (max-width: 1001.9px) {
  .list-plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

.list-plan__item {
  border: 3px solid var(--color-brand-01);
  border-radius: 15px;
  background-color: var(--color-bg-white);
  padding: 40px 16px 24px;
  text-align: center;
  position: relative;
}

@media screen and (min-width: 768px) {
  .list-plan__item {
    padding: 40px 8px 24px;
  }
}

.list-plan__item:not(:last-child) {
  margin-bottom: 16px;
}

@media screen and (min-width: 768px) {
  .list-plan__item:not(:last-child) {
    margin-bottom: 0;
  }
}

.list-plan__badge {
  width: 70px;
  height: 70px;
  border-radius: 100%;
  padding: 4px;
  background-color: var(--color-strong);
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  left: -16px;
  top: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .list-plan__badge {
    width: 64px;
    height: 64px;
  }
}

.list-plan__badge--bg-light_red_01 {
  background-color: var(--color-bg-light-red-01);
}

.list-plan__heading {
  margin-bottom: 16px;
}

.list-plan__heading_main {
  font-size: 3.3rem;
  font-weight: bold;
  color: var(--color-brand-02);
  margin: 0 0 16px;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .list-plan__heading_main {
    font-size: min(2.083333333333333vw, 3rem);
  }
}

.list-plan__heading_sub {
  background-color: var(--color-brand-02);
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-white);
  max-width: 9.4rem;
  padding: 4px 8px;
  margin: 0 auto;
}

.list-plan__price {
  font-family: "Inter";
  font-size: 5rem;
  font-weight: bold;
  color: var(--color-brand-02);
  line-height: 1;
  margin: 0 0 16px;
}

@media screen and (min-width: 768px) {
  .list-plan__price {
    font-size: min(2.7777777777777777vw, 4rem);
  }
}

.list-plan__unit {
  font-size: 2.2rem;
}

.list-plan__from {
  font-size: 1.5rem;
  margin-left: 8px;
}

.list-plan__feature {
  font-family: "Inter";
  font-size: 1.6rem;
  color: var(--color-brand-02);
  font-weight: bold;
  margin: 0 0 8px;
}

@media screen and (min-width: 768px) {
  .list-plan__feature {
    margin: 0;
    padding-top: 16px;
    min-height: 60px;
  }
}

.list-plan__desc {
  font-size: 1.2rem;
  color: var(--color-brand-02);
  line-height: 1.3;
}

.list-plan__desc::before {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  margin: 0 auto 8px;
}

.list-plan__desc--light_plan::before {
  background-image: url("../images/icon-price_light_plan.svg");
  width: 64px;
  height: 64px;
}

.list-plan__desc--standard_plan::before {
  background-image: url("../images/icon-price_standard_plan.svg");
  width: 145px;
  height: 53px;
}

@media screen and (min-width: 768px) {
  .list-plan__desc--standard_plan::before {
    width: 175px;
    height: 64px;
  }
}

.list-plan__desc--large_plan::before {
  background-image: url("../images/icon-price_large_plan.svg");
  width: 78px;
  height: 78px;
}

@media screen and (min-width: 768px) {
  .list-plan__desc--large_plan::before {
    width: 64px;
    height: 64px;
  }
}

/* =============

  Voice（お客様の声）セクション関連

  ============= */

.section-voice {
  background-color: var(--color-bg-white);
  padding: 40px 24px 80px;
}

@media screen and (min-width: 768px) {
  .section-voice {
    padding: 64px 100px 120px;
  }
}

.section-voice__note {
  font-size: 1.2rem;
  color: var(--color-text);
  text-align: center;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .section-voice__note {
    font-size: 1.4rem;
  }
}

/* =============
  リスト - お客様の声
============= */

.list-voices {
  margin: 40px 0 24px;
}

@media screen and (min-width: 768px) {
  .list-voices {
    max-width: 1060px;
    margin: 48px auto 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 3.3333333333333335vw;
  }
}

@media screen and (max-width: 1003.9px) {
  .list-voices {
    max-width: 1060px;
    margin: 48px auto 24px;
    display: flex;
    flex-direction: column;
    gap: 24px 0;
  }
}

.list-voices__item {
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 64px 24px 40px;
  overflow: hidden;
  position: relative;
}

@media screen and (min-width: 768px) {
  .list-voices__item {
    padding: 64px 16px 40px;
  }
}

.list-voices__item:not(:last-child) {
  margin-bottom: 16px;
}

@media screen and (min-width: 768px) {
  .list-voices__item:not(:last-child) {
    margin-bottom: 0;
  }
}

.list-voices__label {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background-color: var(--color-brand-01);
  color: var(--color-text-white);
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  min-width: 118px;
  padding: 8px 16px;
  line-height: 1;
}

.list-voices__image {
  max-width: 89%;
  margin: 0 auto 16px;
  text-align: center;
}

.list-voices__image>img {
  object-fit: cover;
}

.list-voices__heading {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--color-text);
  text-align: center;
  line-height: 1.3;
  margin: 0 0 16px;
}

.list-voices__age {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--color-text);
  text-align: center;
  margin: 0 0 24px;
}

.list-voices__desc {
  font-size: 1.4rem;
  line-height: 1.71;
  color: var(--color-text);
  margin: 0;
}

/* =============

  Column（お役立ちコラム）セクション関連

  ============= */

.section-column {
  padding: 40px 24px 0;
  margin-bottom: 40px;
}

@media screen and (min-width: 768px) {
  .section-column {
    padding: 64px 24px 0;
    margin-bottom: 60px;
  }
}

.section-column__lead {
  font-size: 1.6rem;
  line-height: 1.43;
  color: var(--color-text);
}

@media screen and (min-width: 768px) {
  .section-column__lead {
    max-width: 1030px;
    margin: 32px auto 0;
  }
}

.section-column__note {
  font-size: 1.6rem;
  text-align: center;
  margin: 40px 0;
}

/* =============
  リスト - コラム
============= */
.list-column {
  margin: 40px 0 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 14px;
}

@media screen and (min-width: 768px) {
  .list-column {
    max-width: 1030px;
    margin: 40px auto 48px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
  }
}

/* SP表示は7個目からは表示しない */
@media screen and (max-width: 767.9px) {
  .list-column__item:nth-child(n+7) {
    display: none;
  }
}

.list-column__item_link {
  display: block;
  color: var(--color-text);
  text-align: center;
}

.list-column__item_thumb {
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 8px;
}

@media screen and (min-width: 768px) {
  .list-column__item_thumb {
    overflow: hidden;
  }
}

.list-column__item_thumb_img {
  width: 100%;
  object-fit: cover;
}

@media (hover: hover) {
  .list-column__item_thumb_img {
    transition: transform 0.3s ease;
  }

  .list-column__item_link:hover .list-column__item_thumb_img {
    transform: scale(1.1);
  }
}

.list-column__item_no_thumb {
  border-radius: 10px;
  background-color: #D9D9D9;
  width: 300px;
  max-width: 100%;
  height: 90px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 1.6rem;
}

.list-column__item_title {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

@media screen and (min-width: 768px) {
  .list-column__item_title {
    font-size: 1.4rem;
  }
}

/* =============

  FAQ（よくあるご質問）セクション関連

============= */

.section-faq {
  padding: 40px 24px 0;
}

@media screen and (min-width: 768px) {
  .section-faq {
    padding: 60px 24px 0;
  }
}

/* =============
  リスト - FAQ
============= */
.list-faq {
  margin: 40px 0 0;
}

@media screen and (min-width: 768px) {
  .list-faq {
    max-width: 656px;
    margin: 32px auto 0;
  }
}

.list-faq__item:not(:last-child) {
  margin-bottom: 8px;
}

/* =============
  アコーディオン
============= */
.accordion {
  margin: 0;
}

.accordion__button {
  background-color: var(--color-brand-02);
  color: var(--color-bg-white);
  border: none;
  padding: 16px 40px 16px 16px;
  width: 100%;
  text-align: left;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0 16px;
  position: relative;
  transition: all 0.3s ease-out;
}

.accordion__button[aria-expanded="false"] {
  background-color: var(--color-bg-white);
  color: var(--color-brand-02);
}

.accordion__button::before,
.accordion__button::after {
  content: "";
  display: block;
  position: absolute;
  right: 16px;
  border-radius: 10px;
  background-color: var(--color-brand-02);
}

.accordion__button::before {
  width: 2px;
  height: 13px;
  transform: translateX(-6px);
  transition: height 0.3s ease;
}

.accordion__button::after {
  width: 14px;
  height: 2px;
}

.accordion__button[aria-expanded="true"]::before {
  height: 0;
}

.accordion__button[aria-expanded="true"]::after {
  background-color: var(--color-bg-white);
}

.accordion__content {
  background-color: var(--color-bg-white);
  padding: 16px 40px 16px 16px;
  font-size: 1.4rem;
  color: var(--color-brand-02);
  display: flex;
  align-items: center;
  gap: 0 16px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  max-height: 60vh;
}

.accordion__button[aria-expanded="false"]+.accordion__content {
  padding: 0 40px 0 16px;
  max-height: 0;
}

/*
  MEMO:filterの値は以下参照
  https: //codepen.io/sosuke/pen/Pjoqqp
 */
.accordion__button[aria-expanded="false"] .accordion__icon_question {
  filter: invert(30%) sepia(11%) saturate(1531%) hue-rotate(116deg) brightness(99%) contrast(85%);
}

.accordion__button[aria-expanded="true"] .accordion__icon_question {
  filter: invert(98%) sepia(100%) saturate(6%) hue-rotate(146deg) brightness(103%) contrast(102%);
}

.accordion__icon {
  min-width: 30px;
}

/* =============

  Contact（お問合せ）セクション関連

  ============= */

.section-contact {
  background-color: var(--color-bg-white);
  padding: 56px 32px 80px;
}

@media screen and (min-width: 768px) {
  .section-contact {
    padding: 64px 32px 120px;
  }
}

.section-contact__note {
  text-align: center;
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0 0 24px;
}

@media screen and (min-width: 768px) {
  .section-contact__note {
    font-size: 1.4rem;
  }
}

/* =============
  フォーム - お問合せ
============= */

/* プラグインにより追加される要素調整 */
.form-contact form:not([data-status="invalid"]) .wpcf7-response-output {
  display: none;
}

.form-contact__content {
  margin: 0 0 40px;
}

@media screen and (min-width: 768px) {
  .form-contact__content {
    max-width: 656px;
    margin: 0 auto 40px;
  }
}

.form-contact__item {
  margin: 0 0 24px;
}

.form-contact__item label {
  font-size: 1.6rem;
  color: var(--color-text);
}

.form-contact__item input:not([type="checkbox"], [type="radio"]),
.form-contact__item textarea {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-strong);
  border-radius: 10px;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--color-text);
}

.form-contact__item input:not([type="checkbox"], [type="radio"]) {
  height: 2.4em;
}

.form-contact__item input[type="date"] {
  -webkit-appearance: none;
}

.form-contact__item input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin-top: -0.12em;
}

.form-contact__item input:not([type="checkbox"], [type="radio"])::placeholder,
.form-contact__item textarea::placeholder {
  color: #ccc;
}

.form-contact__item select {
  background-color: var(--color-bg-white);
  background-image: url("../images/icon-form-select.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  border: 1px solid var(--color-strong);
  color: var(--color-text);
  padding-left: 36px;
  border-radius: 10px;
  font-size: 1.6rem;
  line-height: 1;
  width: auto;
}

.form-contact__item .wpcf7-checkbox {
  display: block;
  margin-top: 16px;
}

.form-contact__item .wpcf7-checkbox .wpcf7-list-item {
  display: block;
  margin: 0 0 8px;
}

@media (hover: hover) {
  .form-contact__item .wpcf7-checkbox .wpcf7-list-item label:hover {
    cursor: pointer;
  }
}

.form-contact__item input[type="checkbox"] {
  display: none;
}

.form-contact__item input[type="checkbox"]+span {
  padding-left: 32px;
  display: block;
  position: relative;
}

.form-contact__item input[type="checkbox"]+span::after,
.form-contact__item input[type="checkbox"]+span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
}

.form-contact__item input[type="checkbox"]+span::before {
  border: 2px solid #ccc;
  border-radius: 6px;
  background-color: var(--color-bg-white);
  height: 24px;
  width: 24px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.form-contact__item input[type="checkbox"]+span::after {
  width: 11px;
  height: 8px;
  border-left: 2px solid var(--color-bg-light-red-01);
  border-bottom: 2px solid var(--color-bg-light-red-01);
  transform: rotate(-45deg);
  left: 8px;
  top: 8px;
  display: none;
}

.form-contact__item input[type="checkbox"]:checked+span::before {
  border: 2px solid var(--color-bg-light-red-01);
}

.form-contact__item input[type="checkbox"]:checked+span::after {
  display: block;
}

.form-contact__submit {
  text-align: center;
}

.form-contact__submit [type="submit"] {
  width: 214px;
  max-width: 100%;
  background-color: var(--color-strong);
  color: var(--color-text-white);
  border: none;
  border-radius: 30px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
  padding: 16px 24px;
  box-shadow: 4px 4px 4px #00000040;
}

@media screen and (min-width: 768px) {
  .form-contact__submit [type="submit"] {
    padding: 24px;
  }
}

@media (hover: hover) {
  .form-contact__submit [type="submit"] {
    transition: filter 0.3s ease-in-out;
  }

  .form-contact__submit [type="submit"]:hover {
    filter: brightness(1.15);
  }
}

/* プラグインにより追加される要素調整 */
.form-contact__submit .wpcf7-spinner {
  display: none;
}

/* エラーメッセージ装飾 */
.form-contact__item .wpcf7-not-valid-tip {
  font-size: 1.4rem;
}

.form-contact .wpcf7 form .wpcf7-response-output {
  font-size: 1.4rem;
  padding: 16px;
}

.form-contact .wpcf7 form.invalid .wpcf7-response-output {
  border-color: #dc3232;
  background-color: #f8dddd;
}

/* ================================================================ */

/* =============

  汎用クラス

  ============= */

/* =============
  テキスト
============= */
.text-16 {
  font-size: 1.6rem;
}

.text-14 {
  font-size: 1.4rem;
}

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

/* =============
  表示切替
============= */
@media screen and (min-width: 768px) {
  .hidden-pc {
    display: none;
  }
}

@media screen and (max-width: 767.9px) {
  .hidden-sp {
    display: none;
  }
}

/* ================================================================ */

/* =============

  その他（プラグインのオーバーライド等）

  ============= */

/* =============
  リキャプチャのバッジ
============= */
.grecaptcha-badge {
  z-index: 20;
}