@charset "utf-8";
.t-narrow, .voice-list { width: 90%; margin-inline: auto;}
.contact, .bnr { margin-block: 2em; }
#voice, #promise, #appeal { padding-block: 4em 1em; }

h2 { margin-bottom: 1.5em; }

.bg-org { background-color: #ff9f00; }
.yel { color: #fde913; }

/* mv */
#mv figure { margin-bottom: 1em; }

/* contact */
.contact { width: 70%; margin-inline: auto; }
.contact-ttl { width: 80%; margin-inline: auto; margin-bottom: .5em; }

/* googleクチコミバナー */
.google-voice.bnr img { width: 100%; }

/* voice */
#voice .lead { margin-bottom: 2em; }
.voice-list li { margin-bottom: 1em; }
.fukidashi { position: relative; padding: 1em 1.5em; background-color: #ffeeda; border-radius: 10px; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.2); }
.fukidashi::after { position: absolute; content: ""; bottom: -44px; left: 30%; margin-left: -86px; border: 20px solid transparent; border-top: 28px solid #ffeeda; transform: rotate(9deg); }
.fukidashi p { margin: 0; font-weight: 500; line-height: 1.6; }
.voice-list figure { margin-top: 1.5em; margin-left: 1.5em; }
.voice-list figure img { width: 16%; }

.voice-list li:nth-of-type(2) figure { margin: 1.5em 1.5em 0 auto; text-align: right; }
.voice-list li:nth-of-type(2) .fukidashi::after { left: auto; right: 18%; transform: rotate(-9deg); }

/* discount */
#discount { margin-top: 5em; }
#discount > p > img { width: 100%; }

/* fee */
#fee { margin-top: 5em; }
#fee .lead { margin-bottom: 1.5em; color: var(--color-sub4); font-size: 1.5em; font-weight: 900; }
#fee table :where(thead th:first-child,tbody th) { min-width: 8em; font-size: .95em; color: var(--color-wht); font-weight: 500; background-color: var(--color-base); }
#fee table :where(thead th:nth-child(n+2) ,tbody td:not(:last-child)) {
  border-right: 2px solid var(--color-wht);}
#fee table thead th { width: 3%; padding: 0 .6em .5em; }
#fee table tbody { font-weight: 600; }
#fee table tbody tr:nth-child(odd) { background-color: #eff2f7; }
#fee table tbody tr > * { padding: .6em .3em; }
#fee table tbody tr.total th { background-color: var(--color-sub4); }
#fee table tbody tr.total td { color: var(--color-sub4); font-weight: 700; background-color: #fdf1f2; }
#fee table tbody td { font-size: .93em; text-align: center; }
#fee table tbody td.weight { width: 14.5%; font-size: .875em; }
#fee table tbody th { border-top: 1px solid var(--color-gry3); }
#fee table tbody tr.total td em { font-size: 1.6em; font-family: 'Helvetica', 'Arial', sans-serif; }
#fee table .appeal { font-size: 1.5em; }
#fee table .name { margin: 0 max(-1vw, -12px); padding: .3em .3em .2em; background-color: #b6c2de; }
#fee table .car-img { width: 80%; margin-inline: auto; }
#fee table .car-img img { height: 100%; object-fit: contain; }
#fee table small { display: block; font-size: .75em; font-weight: 500; line-height: 1.5; }
/* #fee table thead th:last-child small { line-height: 3; } */

#fee .bnr-tel { width: 70%; margin: 2em auto 1em; }

/* promise */
.promise-list { counter-reset: list-num 0; }
.promise-list li { margin-bottom: 1em; border: 1px solid var(--color-sub1); border-radius: 10px; counter-increment: list-num; }
.promise-list .sub-ttl { position: relative; margin: 0; padding: .7em .5em; padding-left: 4.8em; color: var(--color-wht); background-color: var(--color-sub1); border-radius: 7px 7px 0 0; }
.promise-list .sub-ttl span { font-size: 1.2em; font-weight: bold; line-height: 1; }
.promise-list li:last-child .sub-ttl > span { font-size: 1.1em; }
.promise-list .sub-ttl::before { position: absolute; content: "お約束" counter(list-num); left: .8em; padding: 0 .5em; font-size: .8em; font-weight: 600; color: var(--color-sub1); background-color: var(--color-wht); line-height: 2; border-radius: 9999px; }
.promise-list .txt-area { padding: 1em; }
.promise-list .ttl { margin-bottom: .5em; font-size: 1.5em; font-weight: 800; color: var(--color-sub1); }
.promise-list .txt { margin: 0; line-height: 1.6; }

/* HP限定特典 */
.hp-tokuten { margin: 0; }

/* suggestion */
#suggestion {}
.bg-gry { margin-bottom: 3em; padding-block: 2em 10em; background: url(../img/bg-gry.jpg) 100% / cover no-repeat; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); }
#suggestion h2 { margin-bottom: .7em; color: var(--color-wht); font-size: 2.5em; font-weight: 800; text-align: center; line-height: 1.5; }
#suggestion h2 span { font-size: .8em; }

.worries-list { width: 80%; margin-inline: auto; padding: 1em; background: rgba(255, 255, 255, 0.8); border-radius: 10px; }
#suggestion ul.worries-list.disc { padding-left: 3.3em; }
.worries-list li { font-size: 1.3em; font-weight: bold; line-height: 2; }

#suggestion > p { color: var(--color-sub3); font-size: 2.5em; font-weight: 800; }

.suggestion-list > li { margin-bottom: 1em; border: 3px solid var(--color-sub3); border-radius: 10px; }
.suggestion-list h3 { position: relative; padding: .7em 2.5em; font-size: 1.5em; font-weight: 800; color: #fff; background-color: var(--color-sub3); }
.suggestion-list h3::before { position: absolute; content: "1"; display: inline-block; width: 1.5em; height: 1.5em; left: 2%; top: 50%; transform: translateY(-50%); color: var(--color-sub3); text-align: center; font-weight: 900; line-height: 1.5em; background: var(--color-wht); border-radius: 50%; }
.suggestion-list li:nth-of-type(2) h3::before { content: "2"; }
.suggestion-list li:nth-of-type(3) h3::before { content: "3"; }
.suggestion-list li > ul { padding: 1em 1em 1em 3em; }
.suggestion-list li > ul li { font-size: 1.1em; font-weight: bold; }

/* appeal */
.appeal-list { display: flex; flex-wrap: wrap; gap: 2%; }
.appeal-list li { width: 48%; margin-bottom: 1em; padding: 1em 1.2em 1em; background-color: var(--color-sub1); border-radius: 10px; }
.appeal-list li p { margin: 0 0 .5em; color: var(--color-wht); font-weight: bold; font-size: 1.5em; text-align: center; line-height: 1.4; }
.appeal-list li p.lh { line-height: 2.8; }
.appeal-list li p span { font-size: .8em; }

/* access */
.access { margin-top: 5em; }
.access > div { align-items: end; }
.access h3 { margin: 0 0 17px; font-size: 25px; color: #0d2e72; font-weight: bold; }

.access-tbl { width: 100%; }
.access-tbl th { width: 110px; padding: 1em; color: #fff; font-weight: normal; background: #0d2e72; }
.access-tbl td { padding: 1em; background: #ebedf0; }
.access-tbl tr:not(:last-child) th, .access tr:not(:last-child) td { border-bottom: 5px solid #f9fafc; }

.access .gmap { width: 100%; margin-top: 2em; }
.access .gmap iframe { width: 100%; }

/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 959px) {
  #fee { width: 90%; margin-inline: auto; }
  #fee table tbody { font-weight: 500; font-size: .87em; }
  #fee table tbody th[rowspan="4"] { border-right: 1px solid var(--color-gry3); }
  #fee table.sp :where(thead th:first-child,tbody th) { min-width: 6em; }
  #fee .price-list-ttl { display: grid; grid-template-columns: 1fr minmax(auto, 100px); align-items: center; column-gap: 1em; }
  #fee table.sp { width: 100%; border: 1px solid var(--color-gry2); }
  #fee .price-list-ttl .note { padding: .5em .7em; font-size: .65em; font-weight: 600; background-color: var(--color-gry0); ;line-height: 1.5; }
}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  .bnr, .contact, #promise, #discount, #discount h2, #appeal h2, .appeal-list li, .suggestion-list, .access > div { width: 90%; margin-inline: auto; }

  .fukidashi::after { left: 50%; }

  h2 { margin-bottom: 1em; }
  .contact, .bnr { margin-block: 1.5em; }
  #voice, #promise { padding-block: 2em 1em; }

  /* contact */
  .contact-ttl { width: 90%; }

  /* voice */
  .voice-list figure { margin-top: 1em; margin-left: .5em; }
  .voice-list figure img { width: 22%; }

  .voice-list li:nth-of-type(2) figure { margin: 1em .5em 0 auto; }
  .voice-list li:nth-of-type(2) .fukidashi::after { right: 24%; }

  /* discount */
  #discount { margin-top: 2.5em; }

  /* fee */
  #fee { margin-top: 2.5em; }
  #fee h2 { width: 70%; }
  #fee .lead { margin-bottom: 0; font-size: 1.1em; font-weight: 700; }
  #fee .bnr-tel { width: 100%; margin-top: 1em; }

  /* suggestion */
  .bg-gry { margin-bottom: 1em; padding-block: 2em 8em; }
  #suggestion h2 { font-size: 1.5em; }
  .worries-list { width: 90%; }
  .worries-list li { font-size: 1em; line-height: 1.4; }
  #suggestion ul.worries-list.disc { padding-left: 2.3em; }

  #suggestion > p { font-size: 1.6em; }

  .suggestion-list h3 { padding: .5em .4em .5em 2em; font-size: 1.3em; }
  .suggestion-list h3::before { left: 2.5%; font-size: .8em; line-height: 1.4em; }

  .suggestion-list li > ul { padding: .7em .5em .7em 2em; }
  .suggestion-list li > ul li { font-size: 1em; line-height: 1.4; }
  .suggestion-list li > ul li:not(:last-child),
  .worries-list li:not(:last-child) { padding-bottom: .7em;}

  /* appeal */
  #appeal { padding-block: 2em 0; }

  /* access */
  .access { margin-top: 2em; }
  .access .details { margin-bottom: 1em; }
  .access .gmap { margin-top: 1em; }
}