/*
 * ごみ管理スマート ”ページ”用CSS 
 */
/* =========================================================
   下層ページ共通：H1帯・パンくずエリア
   ========================================================= */
.kk-layout-gomi-smart .kk-page-title-band {
  display: grid;
  place-items: center;
  min-height: 112px;
  color: #fff;
  background: linear-gradient(100deg, #145f8f 50%, #06314f 100%);
  text-align: center;
}
.kk-layout-gomi-smart .kk-page-title-band__inner {
  width: min(1360px, calc(100% - 40px));
  margin: 0 auto;
}
.kk-layout-gomi-smart .kk-page-title-band__title {
  margin: 0;
  color: #fff;
  font-size: var(--h2_font--);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .05em;
}
.kk-layout-gomi-smart .kk-breadcrumb-area {
  background: #fff;
}
.kk-layout-gomi-smart .kk-breadcrumb-area__inner {
  width: min(1360px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 0;
}
.kk-layout-gomi-smart .kk-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  color: #333;
  font-size: clamp(14px, calc(0.714vw + 2.286px), 16px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .02em;
}
.kk-layout-gomi-smart .kk-breadcrumb__link {
  color: #333;
  text-decoration: none;
}
.kk-layout-gomi-smart .kk-breadcrumb__link:hover {
  color: #0e4f81;
  text-decoration: underline;
}
.kk-layout-gomi-smart .kk-breadcrumb__separator {
  margin: 0 10px;
  color: #777;
}
.kk-layout-gomi-smart .kk-breadcrumb__current {
  color: #111;
  font-weight: 700;
}
.kk-layout-gomi-smart .kk-breadcrumb-area + .entry, .kk-layout-gomi-smart .kk-breadcrumb-area ~ .entry:first-of-type {
  padding-top: 46px;
}
@media (max-width: 900px) {
  .kk-layout-gomi-smart .kk-page-title-band {
    min-height: 92px;
  }
  .kk-layout-gomi-smart .kk-page-title-band__inner, .kk-layout-gomi-smart .kk-breadcrumb-area__inner {
    width: min(1360px, calc(100% - 28px));
  }
  .kk-layout-gomi-smart .kk-page-title-band__title {
    font-size: clamp(22px, 5.4vw, 30px);
  }
  .kk-layout-gomi-smart .kk-breadcrumb-area__inner {
    padding-top: 20px;
  }
  .kk-layout-gomi-smart .kk-breadcrumb {
    font-size: 12px;
  }
  .kk-layout-gomi-smart .kk-breadcrumb-area + .entry, .kk-layout-gomi-smart .kk-breadcrumb-area ~ .entry:first-of-type {
    padding-top: 34px;
  }
}
/* =========================================================
   下層ページ共通：H1帯・パンくずエリア
   ========================================================= */
/* Minimal content fallback */
.kk-layout-gomi-smart .site-main {
  min-height: 60vh;
}
.kk-layout-gomi-smart .entry {
  width: min(1360px, calc(100% - 40px));
  margin: 0 auto;
  padding: 50px 0 0;
}
/* ============================================================================================================================ 
TOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOPTOP
============================================================================================================================ */
.kk-layout-gomi-smart .post-15 {
  width: min(100%, calc(100% - 1rem));
  margin: 0 auto;
  padding: 0;
}
.page-id-15 footer {
  margin-top: 0 !important;
}
/* =============================================================
TOP-メインビジュアル
=============================================================== */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  background: #B9FFFF;
  isolation: isolate;
}
/* レイヤー */
.hero-bg, .hero-grad, .hero-inner {
  position: absolute;
  inset: 0;
}
/* =================================================
背景
================================================= */
.hero-bg {
  z-index: 1;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  opacity: 0;
  transform: scale(1.08);
}
/* 背景アニメーション */
.hero.is-animated .hero-bg img {
  animation: heroBgFadeZoom 2.2s ease forwards;
}
@keyframes heroBgFadeZoom {
  0% {
    opacity: 0;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* =================================================
白グラデーション
================================================= */
.hero-grad {
  z-index: 2;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 20%, rgba(255, 255, 255, 0.72) 36%, rgba(255, 255, 255, 0.46) 52%, rgba(255, 255, 255, 0.18) 66%, rgba(255, 255, 255, 0) 78%);
}
.hero.is-animated .hero-grad {
  animation: heroGradFade 1.2s ease forwards;
  animation-delay: 1.1s;
}
@keyframes heroGradFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* =================================================
前景
================================================= */
.hero-inner {
  z-index: 3;
  width: min(1350px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
/* =================================================
コピー：左から右にフェードイン
================================================= */
.hero-copy {
  width: min(45%, 559px);
  opacity: 0;
  transform: translateX(-30px);
  margin-left: 50px;
}
.hero-copy img {
  max-width: 100%;
  display: block;
}
.hero-copy ul {
  margin-top: 50px;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero-copy li {
  margin: 0;
  padding: 0;
}
.hero.is-animated .hero-copy {
  animation: heroCopyFadeRight 1s ease forwards;
  animation-delay: 2s;
}
@keyframes heroCopyFadeRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* =================================================
トラックと袋のビジュアル：動かさずフェードインのみ
================================================= */
.hero-track_fukuro {
  width: min(55%, 696px);
  text-align: right;
  opacity: 0;
  transform: none;
  align-self: flex-start;
  margin-top: 0;
}
.hero-track_fukuro img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  margin-top: -20%;
  /*margin-top: -140px;*/
}
.hero.is-animated .hero-track_fukuro {
  animation: heroFukuroFadeIn 1.1s ease forwards;
  animation-delay: 2.25s;
}
@keyframes heroFukuroFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* =================================================
タブレット
================================================= */
@media (max-width: 1280px) {
  .hero-inner {
    gap: 0;
  }
}
@media (max-width: 1190px) {
  .hero {
    min-height: 500px;
  }
  .hero-inner {
    width: min(1000px, calc(100% - 100px));
    gap: 0;
  }
  .hero-copy {
    width: 50%;
    margin-left: 0;
  }
  .hero-track_fukuro {
    width: 70%;
    margin-top: 0;
  }
  .hero-track_fukuro img {
    margin-top: -100px;
  }
}
@media (max-width: 940px) {
  .hero {
    min-height: 450px;
  }
  .hero-inner {
    width: min(1000px, calc(100% - 50px));
    gap: 0;
  }
  .hero-copy {
    width: 40%;
    margin-left: 0;
  }
  .hero-track_fukuro {
    width: 60%;
    margin-top: 0;
  }
  .hero-track_fukuro img {
    margin-top: -100px;
  }
}
/* =================================================
スマホ完全切替
================================================= */
@media (max-width: 770px) {
  .hero {
    min-height: 650px;
  }
  /* 背景 */
  .hero-bg img {
    content: url("../../../../uploads/gomi-smart/hero/hero-haikei-smt.png");
    width: 100vw;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 1;
    transform: none;
    animation: none;
  }
  /* グラデーション無し */
  .hero-grad {
    display: none;
  }
  /* スマホは縦並び */
  .hero-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-top: 20px;
    gap: 20px;
  }
  /* コピー画像 */
  .hero-copy {
    width: 100%;
    max-width: 80%;
    padding: 0 1%;
    margin-left: 0;
    opacity: 0;
    transform: translateX(-30px);
    position: absolute;
    z-index: 3;
  }
  .hero-copy img {
    width: 100%;
    height: auto;
    display: block;
    max-width: none;
    padding: 0;
  }
  /* ボタンをスマホで非表示 */
  .hero-copy ul {
    display: none;
  }
  .hero.is-animated .hero-copy {
    animation: heroCopyFadeRight 1s ease forwards;
    animation-delay: .8s;
  }
  /* 袋画像をスマホでも表示して縦並び */
  .hero-track_fukuro {
    display: block;
    width: 80%;
    height: 80%;
    margin: 15% auto 0;
    text-align: center;
    opacity: 0;
    transform: none;
    position: absolute;
    z-index: 2;
    align-self: auto;
  }
  .hero-track_fukuro img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    display: block;
    margin-top: 10px;
  }
  .hero.is-animated .hero-track_fukuro {
    animation: heroFukuroFadeIn 1.1s ease forwards;
    animation-delay: 1.2s;
  }
}
/* =================================================
小スマホ
================================================= */
@media (max-width: 600px) {
  .hero {
    min-height: 500px;
  }
}
@media (max-width: 530px) {
  .hero {
    min-height: 500px;
  }
  .hero-copy {
    padding: 0 0%;
  }
}
@media (max-width: 450px) {
  .hero {
    min-height: 450px;
  }
}
@media (max-width: 395px) {
  .hero {
    min-height: 450px;
  }
  .hero-copy {
    padding: 0 0%;
  }
}
@media (max-width: 375px) {
  .hero {
    min-height: 400px;
  }
  .hero-copy {
    padding: 0 0%;
  }
}
@media (max-width: 320px) {
  .hero {
    min-height: 360px;
  }
  .hero-copy {
    padding: 0 0%;
  }
}
/* =================================================
モーション削減
================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-bg img, .hero-grad, .hero-copy, .hero-track_fukuro, .hero-track_fukuro img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* =================================================
TOPセクション-1
================================================= */
.top-s1-hajimari {
  padding: 2rem 0;
}
.top-s1-hajimari .center {
  text-align: center;
}
.top-s1-hajimari p {
  margin: 25px;
}
.top-s1-hajimari .cyuui {
  font-size: var(--smallfont--);
}
@media (max-width: 520px) {
  .top-s1-hajimari {
    padding: 1rem 0;
  }
  .top-s1-hajimari p {
    margin: 0px;
  }
}
/* =================================================
TOPセクション-2
================================================= */
.top-s2-3point {
  background: linear-gradient(100deg, #e4f2ff 0%, #aad4fd 50%);
  padding: 3rem 0;
}
@media (max-width: 1360px) {
  .top-s2-3point {
    padding: 3.5rem 1rem;
  }
}
@media (max-width: 520px) {
  .top-s2-3point {
    padding: 1.5rem 1rem;
  }
  .top-s2-3point .white-dox {
    margin: 0 0 1rem;
    0;
    width: 100%;
  }
}
.top-s2-3point h2, .top-s2-3point h3 {
  text-align: center;
  font-size: var(--50font--);
  margin-bottom: 15px;
}
.top-s2-3point h2 span {
  color: #164a7c;
}
@media (max-width: 520px) {
  .top-s2-3point h2 {
    font-size: 200%;
  }
}
.top-s2-3point p {
  text-align: center;
}
.top-s2-merit {
  max-width: 1100px;
  margin: 0 auto 15px;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  list-style: none;
}
.top-s2-merit li {
  width: calc((100% - 60px) / 3);
  margin: 0;
  padding: 30px 30px 30px 120px;
  list-style: none;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 700;
  line-height: 110%;
  /* テキストを上下中央 */
  display: flex;
  align-items: center;
  /* 左側に背景画像 */
  background-repeat: no-repeat;
  background-position: 30px center;
  background-size: 64px auto;
}
.top-s2-merit li:nth-child(1) {
  background-image: url("../../../../uploads/gomi-smart/top/s2-bt1.png");
}
.top-s2-merit li:nth-child(2) {
  background-image: url("../../../../uploads/gomi-smart/top/s2-bt2.png");
}
.top-s2-merit li:nth-child(3) {
  background-image: url("../../../../uploads/gomi-smart/top/s2-bt3.png");
}
.top-s2-merit .before-after {}
@media (max-width: 750px) {
  .top-s2-merit {
    gap: 10px;
    width: 100%;
  }
  .top-s2-merit li {
    width: calc((100% - 10px) / 3);
    padding: 80px 10px 10px 15px;
    background-position: center 10px;
    background-size: auto 60px;
    /*font-size: 80%;*/
    text-align: center;
    /* flex内の文字を中央へ */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 450px) {
  .top-s2-merit li {
    padding: 70px 5px 5px 5px;
    background-size: auto 50px;
    border-radius: 5px;
    /*font-size: 65%;*/
  }
}
/* =================================================
Before / After 比較レイアウト
================================================= */
.before-after {
  /* 左・矢印スペース・右の比率 */
  --before-width: 41%;
  --arrow-space: 6%;
  --after-width: 53%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 0 0;
  background: #fff;
  border-radius: 24px;
  display: grid;
  grid-template-columns:
    minmax(0, var(--before-width)) minmax(36px, var(--arrow-space)) minmax(0, var(--after-width));
  column-gap: 0;
  align-items: start;
}
/* 左 */
.before-after .s-before {
  grid-column: 1;
  min-width: 0;
}
/* 右 */
.before-after .s-after {
  grid-column: 3;
  min-width: 0;
}
/* s-before と s-after の間に出す三角矢印 */
.before-after::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  margin-top: clamp(80px, 12vw, 145px);
  width: 0;
  height: 0;
  border-top: 28px solid transparent;
  border-bottom: 28px solid transparent;
  border-left: 28px solid #333;
  z-index: 2;
}
/* 画像 */
.before-after img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #d8d8d8;
  background: #fff;
  box-sizing: border-box;
}
/* 箇条書き */
.before-after ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.before-after li {
  position: relative;
  margin: 0 0 5px;
  padding-left: 0.75em;
  padding-bottom: 0.25em;
  font-size: 85%;
  line-height: 1.25;
  font-weight: 500;
}
/* 灰色の丸 bullet */
.before-after li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d3d3d3;
}
/* =================================================
スマホ
================================================= */
@media (max-width: 750px) {
  .before-after {
    width: 100%;
    padding: 24px 18px 28px;
    border-radius: 18px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 22px;
  }
  .before-after .s-before {
    grid-column: 1;
    grid-row: 1;
  }
  .before-after::before {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    align-self: center;
    margin-top: 0;
    transform: rotate(90deg);
    border-top-width: 20px;
    border-bottom-width: 20px;
    border-left-width: 22px;
  }
  .before-after .s-after {
    grid-column: 1;
    grid-row: 3;
  }
  .before-after li {
    font-size: 90%;
    line-height: 1.5;
    padding-bottom: 0.15em;
  }
}
@media (max-width: 520px) {
  .before-after {
    width: 100%;
    padding: 24px 18px 28px;
    border-radius: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 5px;
  }
  .before-after {
    padding: 0;
    margin: 0;
    width: 100%;
  }
}
/* =================================================
TOPセクション-3
================================================= */
.top-s3-flow {
  text-align: center;
  padding: 3em 0;
}
@media (max-width: 1360px) {
  .top-s3-flow {
    padding: 3em 1rem;
  }
}
@media (max-width: 520px) {
  .top-s3-flow img {
    width: 80%;
    margin: 0 auto;
  }
}
/* =================================================
TOPセクション-4
================================================= */
.top-s4-goriyou {
  padding: 3em 0;
  background-color: #f7ffcb;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@media (max-width: 1360px) {
  .top-s4-goriyou {
    padding: 3em 1rem;
  }
}
.top-s4-goriyou .white-dox {
  width: min(1260px, calc(100% - 40px));
  margin: 0 auto 4rem;
}
@media (max-width: 1260px) {
  .top-s4-goriyou .white-dox {
    width: 100%;
  }
}
.top-s4-sm {
  max-width: 1260px;
}
.top-s4-goriyou .white-dox h2 {
  background-color: #33973e;
}
.gazou-yokonarabi {
  margin: 50px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  position: relative;
  align-items: start; /* 画像を上寄せ */
}
.gazou-yokonarabi::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #ccc;
  transform: translateX(-50%);
}
.gazou-yokonarabi img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  justify-self: center; /* 各エリア内で画像を中央寄せ */
}
/* スマホ */
@media screen and (max-width: 750px) {
  .gazou-yokonarabi {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .gazou-yokonarabi::before {
    display: none;
  }
  .gazou-yokonarabi img {
    width: auto;
  }
  .gazou-yokonarabi img:first-child {
    margin-bottom: 50px;
  }
}
.top-s4-goriyou .white-dox .gray-dox {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 40px;
  row-gap: 0;
  align-items: start;
  margin-bottom: 2em;
}
/* WordPressの自動余白をリセット */
.top-s4-goriyou .white-dox .gray-dox > h4, .top-s4-goriyou .white-dox .gray-dox > p {
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
/* 一番上の見出し */
.top-s4-goriyou .white-dox .gray-dox > h3 {
  grid-column: 1;
}
/* 左側：目安画像 */
.top-s4-goriyou .white-dox .gray-dox > picture {
  grid-column: 1;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem 0;
}
/* 左側：ポイント見出し */
.top-s4-goriyou .white-dox .gray-dox > h4 {
  grid-column: 1;
  color: #ff0000;
  font-size: var(--30font--);	
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px !important;
}
.top-s4-goriyou .white-dox .gray-dox > h4::after {
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 35px;
  background-image: url("../../../../uploads/gomi-smart/top/s4-3-img-point.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 左側：本文 */
.top-s4-goriyou .white-dox .gray-dox > p {
  grid-column: 1;
  line-height: 1.65;
  font-size: var(--20font--);
}
/* 右側：シーン画像 */
.top-s4-goriyou .white-dox .gray-dox > img:last-of-type {
  grid-column: 2;
  grid-row: 1 / 5;
  max-width: min(280px, 30vw);
  height: auto;
  display: block;
}
/* タブレット調整 */
@media screen and (max-width: 1024px) {
  .top-s4-goriyou .white-dox .gray-dox {
    grid-template-columns: 1fr minmax(100px, 200px);
    column-gap: 25px;
  }
  .top-s4-goriyou .white-dox .gray-dox > img:last-of-type {
    width: 200px;
    max-width: 100%;
    height: auto;
  }
}
/* スマホ */
@media screen and (max-width: 750px) {
  .top-s4-goriyou .white-dox .gray-dox {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
    margin-bottom: 2em;
  }
  .top-s4-goriyou .white-dox .gray-dox > h3, .top-s4-goriyou .white-dox .gray-dox > h4, .top-s4-goriyou .white-dox .gray-dox > p, .top-s4-goriyou .white-dox .gray-dox > img {
    grid-column: 1;
  }
  .top-s4-goriyou .white-dox .gray-dox > h3 {
    grid-row: auto;
    margin-bottom: 1rem;
  }
  .top-s4-goriyou .white-dox .gray-dox > picture {
    grid-row: auto;
    max-width: 100%;
    margin: 1rem auto 1.5rem;
  }
  .top-s4-goriyou .white-dox .gray-dox > h4 {
    grid-row: auto;
    padding-left: 28px;
    margin-bottom: 10px !important;
  }
  .top-s4-goriyou .white-dox .gray-dox > h4::after {
    width: 20px;
    height: 30px;
  }
  .top-s4-goriyou .white-dox .gray-dox > p {
    grid-row: auto;
    line-height: 1.65;
    margin-bottom: 0rem !important;
  }
  .top-s4-goriyou .white-dox .gray-dox > img:last-of-type {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
    width: auto;
    margin: 0 auto;
  }
}
@media screen and (max-width: 570px) {
  .top-s4-goriyou .white-dox .gray-dox > img:last-of-type {
    display: none
  }
}
/* ============================================================================================================================ 
new-application new-application new-application new-application new-application
============================================================================================================================ */
.chu-kaku {
  color: red;
  font-size: var(--40font);
  text-align: center;
  font-weight: 700;
  display: block;
  margin: 3rem auto;
}
/* =========================================================
   Contact Form 7 共通フォームレイアウト
   対象：.cf7-form-new
========================================================= */
.cf7-form-new {
  max-width: 900px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: #111;
}
/* CF7が自動で入れるpの余白をリセット */
.cf7-form-new p {
  margin: 0;
}
/* dlを2カラムのフォームレイアウトにする */
.cf7-form-new .cf7-form-list {
  display: grid;
  grid-template-columns: 230px 1fr;
  width: 100%;
  margin: 0;
  padding: 0;
}
/* 左側：項目名 */
.cf7-form-new .cf7-form-list dt {
  margin: 0;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid #ddd;
  font-weight: 700;
  box-sizing: border-box;
}
/* 右側：入力欄 */
.cf7-form-new .cf7-form-list dd {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}
/* 必須・任意ラベル */
.cf7-form-new .required, .cf7-form-new .optional {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}
.cf7-form-new .required {
  background-color: #f00;
}
.cf7-form-new .optional {
  background-color: #168bd8;
}
/* テキスト入力・日付・メール・電話 */
.cf7-form-new input[type="text"], .cf7-form-new input[type="email"], .cf7-form-new input[type="tel"], .cf7-form-new input[type="date"], .cf7-form-new textarea {
  width: 100%;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid #bbb;
  border-radius: 2px;
  background-color: #fff;
  font-size: 15px;
  line-height: 1.5;
  box-sizing: border-box;
}
.cf7-form-new input[type="date"] {
	max-width: 250px;
}
.cf7-form-new input[type="text"], .cf7-form-new input[type="email"], .cf7-form-new input[type="tel"], .cf7-form-new input[type="date"] {
  height: 31px;
}
.cf7-form-new textarea {
  min-height: 88px;
  resize: vertical;
}
/* CF7のwrapを幅100%に */
.cf7-form-new .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
/* 注釈 */
.cf7-form-new .form-note {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
}
/* ラジオ・チェックボックスの横並び */
.cf7-form-new .wpcf7-radio, .cf7-form-new .wpcf7-checkbox, .cf7-form-new .wpcf7-acceptance {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
}
/* CF7リストアイテムの余白調整 */
.cf7-form-new .wpcf7-list-item {
  display: inline-block;
  margin: 0;
}
.cf7-form-new .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
/* ラジオ・チェックボックス */
.cf7-form-new input[type="radio"], .cf7-form-new input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  vertical-align: middle;
}
/* チェックボックス項目が多い行は画像のように2列寄りに */
.cf7-form-new [data-name="garbage-bag-type"] .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 28px;
  row-gap: 4px;
}
/* 事前購入型の説明文 */
.cf7-form-new [data-name="pre-purchase-agree"] {
  margin-top: 8px;
}
.cf7-form-new .cf7-form-list dd p + p {
  margin-top: 2px;
}
/* HTML内の説明文先頭brによる余白を抑える */
.cf7-form-new .cf7-form-list dd p:first-child br {
  display: none;
}
/* 下部：利用条件同意 */
.cf7-form-new .cf7-agree {
  margin-top: 34px;
  text-align: center;
}
.cf7-form-new .cf7-agree .wpcf7-acceptance {
  justify-content: center;
}
/* 画像のように、同意項目の後ろに必須ラベルを表示 */
.cf7-form-new .cf7-agree .wpcf7-list-item-label::after {
  content: "必須";
  display: inline-block;
  margin-left: 14px;
  padding: 1px 6px;
  background-color: #f00;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}
/* 送信ボタン */
.cf7-form-new .cf7-submit {
  margin-top: 10px;
  text-align: center;
}
.cf7-form-new .cf7-submit p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cf7-form-new input[type="submit"] {
  width: 150px;
  height: 28px;
  padding: 0;
  border: 1px solid #bbb;
  border-radius: 3px;
  background-color: #fff;
  color: #111;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.cf7-form-new input[type="submit"]:hover {
  background-color: #f5f5f5;
}
.cf7-form-new input[type="submit"]:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}
/* CF7スピナー位置調整 */
.cf7-form-new .wpcf7-spinner {
  margin-left: 8px;
}
/* エラーメッセージ */
.cf7-form-new .wpcf7-not-valid-tip {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
}
/* =========================================================
   タブレット
========================================================= */
@media (max-width: 1024px) {
  .cf7-form-new {
    max-width: 100%;
  }
  .cf7-form-new .cf7-form-list {
    grid-template-columns: 210px 1fr;
  }
  .cf7-form-new .cf7-form-list dt {
    padding-right: 14px;
  }
}
/* =========================================================
   スマホ
========================================================= */
@media (max-width: 767px) {
  .cf7-form-new {
    font-size: 15px;
  }
  .cf7-form-new .cf7-form-list {
    display: block;
  }
  .cf7-form-new .cf7-form-list dt {
    padding: 14px 0 6px;
    border-bottom: none;
  }
  .cf7-form-new .cf7-form-list dd {
    padding: 0 0 14px;
    border-bottom: 1px solid #ddd;
  }
  .cf7-form-new input[type="text"], .cf7-form-new input[type="email"], .cf7-form-new input[type="tel"], .cf7-form-new input[type="date"] {
    height: 38px;
    font-size: 16px;
  }
  .cf7-form-new textarea {
    min-height: 120px;
    font-size: 16px;
  }
  .cf7-form-new .wpcf7-radio, .cf7-form-new .wpcf7-checkbox, .cf7-form-new .wpcf7-acceptance {
    display: block;
  }
  .cf7-form-new .wpcf7-list-item {
    display: block;
    margin-bottom: 6px;
  }
  .cf7-form-new [data-name="garbage-bag-type"] .wpcf7-checkbox {
    display: block;
  }
  .cf7-form-new .cf7-agree {
    margin-top: 28px;
    text-align: left;
  }
  .cf7-form-new .cf7-agree .wpcf7-acceptance {
    display: block;
  }
  .cf7-form-new .cf7-agree .wpcf7-list-item-label::after {
    margin-left: 8px;
  }
  .cf7-form-new input[type="submit"] {
    width: 180px;
    height: 36px;
    font-size: 15px;
  }
  .cf7-form-new .cf7-submit {
    text-align: center;
  }
}
/* =========================================================
   2回目以降のご注文エリア
========================================================= */
.repeat-area {
  max-width: 900px;
  margin: 5rem auto;
  padding: 30px;
  border: 3px solid #164a7c;
  border-radius: 10px;
  box-sizing: border-box;
}
.repeat-area .wp-block-columns {
  margin-bottom: 0;
}
.repeat-area .is-layout-flex {
  gap: 1em !important;
}
/* 見出し */
.repeat-area h2 {
  margin: 0 0 20px;
  color: #164a7c;
  font-size: var(--30font--);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
}
/* QRコード */
.repeat-area img {
  display: block;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .repeat-area {
    max-width: 900px;
    padding: 15px;
    border: 3px solid #164a7c;
  }
}
/* ============================================================================================================================ 
guide guide guide guide guide guide guide guide guide guide
============================================================================================================================ */
.guide-explanation {
  padding: 3em 0;
  background-color: #f7ffcb;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.guide-explanation .white-dox {
  width: min(1260px, calc(100% - 40px));
  margin: 0 auto 4rem;
}
.guide-explanation .white-dox h2 {
  background-color: #164a7c;
}
.guide-explanation .white-dox h3 {
  color: #d9432e;
}
.guide-explanation .white-dox h3.wp-block-heading.underline {
  border-bottom: 2px solid #ccc;
  padding: 0 0 0.25rem 0;
}
/* =========================================================
   ごみ袋・シール 商品説明ボックス
========================================================= */
.guide-explanation .white-dox .fukuro-area {
  margin: 0 auto 4rem;
}
/* ボックス本体 */
.fukuro-area {
  padding: var(--fukuro-area-padding);
}
/* ボックス本体 */
.fukuro-area {
  --fukuro-area-padding: 50px;
  background-color: #f4f4f4;
  padding: 16px var(--fukuro-area-padding) var(--fukuro-area-padding);
  margin-bottom: 3rem;
  list-style: none;
  box-sizing: border-box;
}
/* ボックス本体 */
.fukuro-area {
  --fukuro-area-padding: 50px;
  background-color: #f4f4f4;
  padding: 0 var(--fukuro-area-padding) 30px;
  margin-bottom: 3rem;
  list-style: none;
  box-sizing: border-box;
}
/* ボックス内の黒帯見出し
   ※ h4だけでなく、f-h-3内のh3にも対応 */
.fukuro-area h4, .fukuro-area h3 {
  margin: 0 calc(-1 * var(--fukuro-area-padding)) 2rem;
  padding: 0.3em var(--fukuro-area-padding);
  background-color: #000;
  color: #fff;
  font-size: var(--30font--);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 750px) {

.guide-explanation .white-dox .fukuro-area {
  margin: 0 auto 1.5rem;
}
}
/* =========================================================
   種類別 見出し色調整
   必要に応じて色は変更してください
========================================================= */
/* 燃えるごみ */
.f-h-1 h4 {
  background-color: #139f68;
}
/* 燃えないごみ・シール */
.f-h-2 h4 {
  background-color: #a50b3f;
}
/* あきびん用 */
.f-h-3 h4 {
  background-color: #ab8902;
}
/* 資源ごみ */
.f-h-4 h4 {
  background-color: #2996ff;
}
/* =========================================================
   fukuro-area 内：画像＋説明＋料金リスト
========================================================= */
/* WordPressカラムの余白調整 */
.fukuro-area .wp-block-columns {
  gap: 40px;
  align-items: center;
  margin: 0;
}
/* 画像 */
.fukuro-area img {
  display: block;
  margin: 0 auto 1.5rem;
}
/* 説明文 */
.fukuro-area .wp-block-column p {
  margin: 0 0 1.5rem;
  line-height: 1.9;
  font-size: var(--20font--)
}
/* 対象例ラベル */
.fukuro-area .wp-block-column > p > span {
  display: inline-block;
  margin-right: 0.6em;
  padding: 0.05em 0.7em;
  background-color: #cccccc;
  font-weight: 700;
  font-size: 80%;
}
/* 料金リスト全体 */
.fukuro-area .wp-block-column > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--20font--)
}
/* 資源ごみは無料です / お支払いについて / 回収ルール・排出時間 */
.gray-waku {
  --shigengomi-area-padding--: 30px;
  padding: var(--shigengomi-area-padding--);
  border: 5px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box;
}
.gray-waku .wp-block-column h3, .gray-waku h3 {
  color: #000 !important;
}
.gray-waku .wp-block-column p, .gray-waku p, .gray-waku .wp-block-column li, .gray-waku li {
  margin: 0 0 0.75rem;
  line-height: 1.9;
  font-size: var(--20font--);
}
.gray-waku .wp-block-columns {
  margin-bottom: 0em !important;
}
.gray-waku .wp-block-column ul, .gray-waku ul {
  margin: 0;
}
.gray-waku .wp-block-column li, .gray-waku li {
  margin: 0 0 0.25rem;
}
.gray-waku .wp-block-column span, .gray-waku span {
  display: inline-block;
  margin-right: 0.6em;
  padding: 0.05em 0.7em;
  background-color: #cccccc;
  font-weight: 700;
  font-size: 80%;
}
/* =========================================================
   スマホ
========================================================= */
@media (max-width: 767px) {
  .fukuro-area {
    --fukuro-area-padding: 15px;
  }
  .fukuro-area .wp-block-columns {
    gap: 0px;
  }
  .fukuro-area .wp-block-column > ul {
    display: block;
  }
  .fukuro-area .wp-block-column > ul > li {
    margin: 0 0 15px 0;
  }
}

/* =========================================================
   ご利用の流れ STEPリスト
========================================================= */
.flow-step-list {
  --step-color: #1f8f35;
  --step-box-width: 120px;
  --step-box-height: 70px;
  --step-gap: 24px;
  width: 100%;
  margin: 2.5rem auto 4rem;
  padding: 0;
}
/* STEPタイトル行 */
.flow-step-list dt {
  position: relative;
  display: grid;
  grid-template-columns: var(--step-box-width) 1fr;
  column-gap: var(--step-gap);
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--step-color);
  font-size: clamp(1.35rem, 1.6vw, 2rem);
  font-weight: 800;
  line-height: 1.45;
}
/* 緑のSTEPボックス */
.flow-step-list dt span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--step-box-width);
  height: var(--step-box-height);
  background-color: var(--step-color);
  color: #fff;
  font-size: clamp(1.1rem, 1.2vw, 1.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
}
/* 説明文 */
.flow-step-list dd {
  margin: 0 0 3rem;
  padding: 0 0 0 calc(var(--step-box-width) + var(--step-gap));
  color: #111;
  font-size: clamp(1.2rem, 1.35vw, 1.8rem);
  font-weight: 500;
  line-height: 1.65;
}
/* STEP間の下向き三角 */
.flow-step-list dt:not(:last-of-type)::after {
  content: "";
  position: absolute;
  left: calc(var(--step-box-width) / 2 - 18px);
  bottom: -48px;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 24px solid #cfcfcf;
}
/* 最後の余白調整 */
.flow-step-list dd:last-child {
  margin-bottom: 0;
}
/* =========================================================
   スマホ
========================================================= */
@media (max-width: 767px) {
  .flow-step-list {
    --step-box-width: 92px;
    --step-box-height: 54px;
    --step-gap: 16px;
    margin: 2rem auto 3rem;
  }
  .flow-step-list dt {
    font-size: 1.1rem;
    align-items: center;
  }
  .flow-step-list dt span {
    font-size: 0.95rem;
  }
  .flow-step-list dd {
    margin-bottom: 2.5rem;
    padding-left: calc(var(--step-box-width) + var(--step-gap));
    font-size: 1rem;
    line-height: 1.7;
  }
  .flow-step-list dt:not(:last-of-type)::after {
    left: calc(var(--step-box-width) / 2 - 13px);
    bottom: -38px;
    border-left-width: 13px;
    border-right-width: 13px;
    border-top-width: 18px;
  }
}
/* =========================================================
   ごみの分け方・出し方：対象リスト
========================================================= */
.wakekata-area {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
/* WordPress Columns の標準余白をリセット */
.wakekata-area.wp-block-columns {
  margin-bottom: 3rem;
}
/* 各ボックス */
.wakekata-area .wp-block-column {
  overflow: hidden;
  background-color: #f7f7f7;
  border-radius: 10px;
  border: 5px solid #e0e0e0;
  box-sizing: border-box;
  padding: 0.75em;
}
/* 見出し */
.wakekata-area .wp-block-column h4 {
  margin: 0 0 0.75em 0;
  padding: 0.4em;
  color: #fff !important;
  font-size: var(--30font--);
  font-weight: 800;
  line-height: 1.25;
  border-radius: 5px;
}
/* 本文・リスト共通の内側余白 */
.wakekata-area .wp-block-column > p, .wakekata-area .wp-block-column > ul {
  font-size: var(--20font--);
  margin: 0;
}
/* 本文 */
.wakekata-area .wp-block-column strong {
  display: block;
  margin: 1.4rem 0 0 0;
}
/* リスト */
.wakekata-area .wp-block-column > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* リスト項目 */
.wakekata-area .wp-block-column > ul > li {
  font-size: var(--20font--);
  position: relative;
  margin: 0 0 0 0.75em;
  padding-left: 1.0em;
  line-height: 1.6;
}
/* 丸アイコン */
.wakekata-area .wp-block-column > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: currentColor;
}
/* 入れ子リスト */
.wakekata-area .wp-block-column ul ul {
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
}
/* 入れ子リスト項目 */
.wakekata-area .wp-block-column ul ul li {
  position: relative;
  margin: 0 0 0.35rem;
  padding-left: 1em;
  font-size: 90%;
  line-height: 1.25;
}
/* 入れ子リストの線 */
.wakekata-area .wp-block-column ul ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
}
/* =========================================================
   スマホ
========================================================= */
@media (max-width: 767px) {
  .wakekata-area {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 2rem 0;
  }
  .wakekata-area .wp-block-column {
    border-radius: 10px;
    border: 2px solid #e0e0e0;
  }
  /* 丸アイコン */
  .wakekata-area .wp-block-column > ul > li::before {
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
  }
}
/* =========================================================
   色分け
========================================================= */
/* 燃えるごみ */
.wakekata-area .f-h-1 {
  border-color: #139f68;
}
.wakekata-area .f-h-1 h4 {
  background-color: #139f68;
}
.wakekata-area .f-h-1 li::before {
  color: #139f68;
}
/* 燃えないごみ */
.wakekata-area .f-h-2 {
  border-color: #a50b3f;
}
.wakekata-area .f-h-2 h4 {
  background-color: #a50b3f;
}
.wakekata-area .f-h-2 li::before {
  color: #a50b3f;
}
/* あきびん */
.wakekata-area .f-h-3 {
  border-color: #ab8902;
}
.wakekata-area .f-h-3 h4 {
  background-color: #ab8902;
}
.wakekata-area .f-h-3 li::before {
  color: #ab8902;
}
/* 資源ごみ */
.wakekata-area .f-h-4 {
  border-color: #2996ff;
}
.wakekata-area .f-h-4 h4 {
  background-color: #2996ff;
}
.wakekata-area .f-h-4 li::before {
  color: #2996ff;
}
/* =========================================================
   ご注文・お問い合わせエリア
========================================================= */
.renraku-area {
  max-width: 900px;
  margin: 5rem auto;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
}
/* 見出し */
.renraku-area h2 {
  margin: 0 0 1rem;
  color: #000;
  font-size: var(--50font--);
  font-weight: 800;
  line-height: 1.45;
}
/* 説明文 */
.renraku-area > p {
  margin: 0 0 2.4rem;
}
/* 注文ボタンリスト */
.renraku-area ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
  margin: 0 auto 4.5rem;
  padding: 0;
  list-style: none;
}
/* 各ボタンの上の説明 */
.renraku-area ul li {
  margin: 0;
  padding: 0;
  color: #111;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
}
/* 共通ボタン */
.renraku-area ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 74px;
  padding: 16px 22px;
  border-radius: 6px;
  font-size: var(--30font--);
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.renraku-area ul li a:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
/* 通常注文ページ：青塗り */
.renraku-area ul li:nth-child(1) a {
  background-color: #164a7c;
  border: 3px solid #164a7c;
  color: #fff;
}
/* 新規申込ページ：緑枠 */
.renraku-area ul li:nth-child(2) a {
  background-color: #fff;
  border: 3px solid #2d9a48;
  color: #2d9a48;
}
/* 通常注文アイコン */
.renraku-area ul li:nth-child(1) a::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 55px;
  height: 45px;
  background-image: url("../../../../uploads/gomi-smart/common/bt-01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 新規申込アイコン */
.renraku-area ul li:nth-child(2) a::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 55px;
  height: 46px;
  background-image: url("../../../../uploads/gomi-smart/common/bt-02.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 2つ目の見出し前の余白 */
.renraku-area ul + h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}
/* 電話番号CTA */
.renraku-area .phon-cta {
  margin: 1.4rem auto 0;
  text-align: center;
}
.renraku-area .phon-cta a {
  display: inline-block;
  min-width: 420px;
  max-width: 100%;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  color: #111;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  letter-spacing: 0px;
}
/* 電話番号 */
.renraku-area .phon-cta a span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #164a7c;
  font-size: var(--50font--);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -2px;
}
/* 電話アイコン */
.renraku-area .phon-cta a span::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  background-image: url("../../../../uploads/gomi-smart/guide/icon-phon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* ご注文・お問い合わせエリア：スマホ表示 */
@media (max-width: 767px) {
  .renraku-area {
    max-width: 100%;
    margin: 2rem auto;
    padding: 0 15px;
  }
  /* 見出し */
  .renraku-area h2 {
    margin-bottom: 0.8rem;
    font-size: var(--40font--);
    line-height: 1.35;
  }
  .renraku-area h3 {
    margin: 0 0 1rem;
    font-size: var(--30font--);
    font-weight: 800;
    line-height: 1.45;
  }
  /* 説明文 */
  .renraku-area > p {
    margin: 0 0 2rem;
    line-height: 1.8;
  }
  /* スマホでは改行を消す */
  .renraku-area .pc-br-shinai {
    display: none;
  }
  /* 注文ボタンリスト：縦並び */
  .renraku-area ul {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0 auto 4rem;
  }
  .renraku-area ul li {
    font-size: 1rem;
    line-height: 1.6;
  }
  /* 共通ボタン */
  .renraku-area ul li a {
    max-width: 70%;
    min-height: 40px;
    padding: 10px;
    gap: 10px;
    margin: 0 auto;
  }
  /* ボタンアイコン */
  .renraku-area ul li:nth-child(1) a::before, .renraku-area ul li:nth-child(2) a::before {
    width: 40px;
    height: 36px;
  }
  /* ご不明な場合の見出し前調整 */
  .renraku-area ul + h3 {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  /* 電話番号CTA */
  .renraku-area .phon-cta {
    margin: 1.6rem auto 0;
  }
  .renraku-area .phon-cta a {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    font-size: 0.95rem;
    line-height: 1.4;
  }
  /* 電話番号 */
  .renraku-area .phon-cta a span {
    gap: 8px;
    font-size: clamp(2rem, 9vw, 2.8rem);
    letter-spacing: -1px;
    line-height: 1.1;
  }
  /* 電話アイコン */
  .renraku-area .phon-cta a span::before {
    width: 34px;
    height: 34px;
  }
}
/* ============================================================================================================================ 
Q&Aエリア Q&Aエリア Q&Aエリア Q&Aエリア Q&Aエリア Q&Aエリア Q&Aエリア Q&Aエリア
============================================================================================================================ */
.qa-area {
  padding: 3em 1rem;
  background-color: #fff;
}
.qa-area h2 {
  color: #d9432e;
  border-bottom: 2px solid #ccc;
  padding: 0 0 0.25em 0;
}
.qa-area .wp-block-group__inner-container {
  max-width: 1100px;
  margin: 0 auto;
}
.qa-area dl {
  margin: 0;
  padding: 0;
}
/* =========================================================
   質問 dt
========================================================= */
.qa-area dt {
  position: relative;
  margin: 0;
  padding: 0.42em 2.5em 0.42em 2.08em;
  font-size: var(--default--);
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
}
/* Qアイコン */
.qa-area dt::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #33973e;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}
/* 右側の＋アイコン */
.qa-area dt::after {
  content: "＋";
  position: absolute;
  right: 0;
  top: 11px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 27px;
  text-align: center;
}
/* 開いた時 */
.qa-area dt.is-open::after {
  content: "－";
  background-color: red;
}
/* =========================================================
   回答 dd：開閉アニメーション
========================================================= */

/* 初期状態は閉じる */
.qa-area dd {
  position: relative;
  overflow: hidden;

  max-height: 0;
  opacity: 0;
  visibility: hidden;

  margin: 0 0 0 53px;
  padding: 0 0 0 2.21em;

  color: #222;
  font-size: var(--default--);
  font-weight: 500;
  line-height: 1.45;

  transform: translateY(-6px);

  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    transform 0.25s ease,
    margin 0.25s ease,
    padding 0.25s ease,
    visibility 0s linear 0.35s;
}

/* 開いている質問の直後の回答だけ表示 */
.qa-area dt.is-open + dd {
  max-height: 800px;
  opacity: 1;
  visibility: visible;

  margin: 0 0 53px 53px;
  padding: 0.21em 0 0.25em 2.21em;

  transform: translateY(0);

  transition:
    max-height 0.45s ease,
    opacity 0.28s ease,
    transform 0.28s ease,
    margin 0.28s ease,
    padding 0.28s ease,
    visibility 0s;
}
/* Aアイコン */
.qa-area dd::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #222;
  background-color: #fff;
  color: #222;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
  box-sizing: border-box;
}
/* dd内のリスト調整 */
.qa-area dd ul {
  margin: 12px 0 12px 29px;
  padding: 0;
}
.qa-area dd li {
  margin: 5px 0;
}
/* リンク */
.qa-area dd a {
  color: #0099ff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.qa-area dd a:hover {
  opacity: 0.75;
}
/* キーボード操作時 */
.qa-area dt:focus-visible {
  outline: 2px solid #33973e;
  outline-offset: 6px;
  border-radius: 5px;
}
/* ＋アイコンの動き */
.qa-area dt::after {
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

/* 開いた時に少し回転 */
.qa-area dt.is-open::after {
  content: "－";
  background-color: red;
  transform: rotate(180deg);
}
/* =========================================================
   スマホ調整
========================================================= */
@media (max-width: 768px) {
  .qa-area {
    padding: 1.75em 0.5rem;
  }
  .qa-area h2 {
    padding: 0 0 0.3em 0;
  }
  .qa-area dt {
    padding: 0.35em 2.5em 0.5em 1.95em;
    line-height: 1.7;
  }
  .qa-area dt::before {
    top: 8px;
    width: 25px;
    height: 25px;
    font-size: 16px;
    line-height: 24px;
  }
  .qa-area dt::after {
    top: 10px;
    width: 24px;
    height: 24px;
    font-size: 15px;
    line-height: 24px;
  }
  .qa-area dd {
    margin: 0 0 0 1.9em;
    padding: 0 0 0 2.4em;
    line-height: 1.7;
  }
  .qa-area dt.is-open + dd {
    margin: 0 0 2em 0.75em;
    padding: 0.25em 0 0 2.2em;
  }	
  .qa-area dd::before {
    top: 5px;
    width: 25px;
    height: 25px;
    font-size: 16px;
    line-height: 24px;
  }
  .qa-area dd ul {
    margin: 0.7em 0 0.7em 1.2em;
  }
  .qa-area dd li {
    margin: 0.3em 0;
  }
	
}
/* ============================================================================================================================ 
会社概要 個人情報保護方針 特定商取引法に基づく表記 会社概要 個人情報保護方針 特定商取引法に基づく表記
============================================================================================================================ */
/* =========================================================
   会社概要
========================================================= */
.company-honbun-area {
  text-align: center;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  letter-spacing: 0.05em;
  line-height: 2;
}
@media (max-width: 750px) {
  .company-honbun-area {
    text-align: left;
    letter-spacing: 0em;
    line-height: 1.65;
  }
}
.page-id-26 h2, .page-id-30 h2, .page-id-28 h2 {
  color: #d9432e;
  border-bottom: 2px solid #ccc;
  padding: 0 0 0.25em 0;
}
/* =========================================================
   表デザイン：会社情報・特商法
========================================================= */
.table-deza {
  max-width: 1000px;
  margin: 0.75em auto 1.5em 0;
  padding: 0;
  overflow-x: auto;
}
.table-deza table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  font-size: var(--20font--);
}
.table-deza th, .table-deza td {
  padding: 5px;
  border: 1px solid #ccc;
  line-height: 1.7;
  vertical-align: middle;
}
.table-deza th {
  width: 25%;
  background-color: #efefef;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.table-deza td {
  width: 75%;
  color: #222;
  font-weight: 500;
  text-align: left;
}
.table-deza tr:last-child th, .table-deza tr:last-child td {
  border-bottom: none;
}
/* メールアドレスや電話番号が長い場合の崩れ防止 */
.table-deza td {
  word-break: break-word;
}
/* =========================================================
   スマホ調整
========================================================= */
@media (max-width: 768px) {
  .table-deza {
    margin: 2em auto;
  }
  .table-deza table, .table-deza tbody, .table-deza tr, .table-deza th, .table-deza td {
    display: block;
    width: 100%;
  }
  .table-deza table {
    font-size: 1rem;
  }
  .table-deza tr {}
  .table-deza tr:last-child {
    border-bottom: none;
  }
  .table-deza th {
    border-bottom: none;
    padding: 10px 10px 5px;
    white-space: normal;
  }
  .table-deza td {
    padding: 5px 10px 10px;
    border-top: none;
    background-color: #fff;
    color: #222;
    line-height: 1.7;
  }
}
/* =========================================================
   シンプルリスト
========================================================= */
.list-deza {
  padding-left: 0em;
}
.list-deza li {
  margin-left: 35px;
  margin-bottom: 0em;
  line-height: 1.8;
  color: #333;
}
/* 黒丸を少し小さく */
.list-deza li::marker {
  font-size: 0.85em;
}