html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:rgba(0,0,0,0)
}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
    display:block
}
ul {
    list-style:none;
}
blockquote,q {
    quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
    content:"";
    content:none;
}
option {
  color: #111;
}
select {
  -webkit-tap-highlight-color: transparent;
}

del {
    text-decoration:line-through;
}
abbr[title],dfn[title] {
    border-bottom:1px dotted #111;
    cursor:help
}
html {
    overflow:auto;
    font-size:62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;  /* ヘッダーの高さに合わせる */
}

*,*:before,*:after {
    box-sizing:border-box;
}
a {
  text-decoration:none;
  color:#111;
  transition:.3s linear;
  box-sizing:border-box;
}
a:hover {
  opacity:.7;
  color:#111;
}
:root {
--border-radius: 20px;
--gap: 20px;
--radius: 20px;

  /* Colors */
--c-text: #111;
--c-accent: #14607E;
--c-accent-2: #466BB3;
--c-danger: #E60719;
--c-bg-blue: #F1F6FA;
--c-bg-blue-2: #E8F0F6;
--c-bg-gray: #ECECEC;

/* Typography */
--ff-deco: "Sorts Mill Goudy", serif;
}
img {
vertical-align: top;
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5 {-webkit-font-smoothing:antialiased;}
body {
  margin: 0;
  color: var(--c-text);
  font: 1.6rem / 2 'Noto Sans JP', sans-serif;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
  line-height: 1.5;
  position: relative;
  background-color: #fff;
}
/* =================================== */
section {
  text-align: center;
  margin: 0 auto;
  padding: 8rem 0;
  background: #FCE2EC;
}
.att01 {color: #e93069;}
.att02 {color: #FBC527;}
/* ---------------- Header ---------------- */
.header {
  position: fixed;
  top:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 1rem;
  background:rgba(255,255,255,0.9);
  z-index:1000;
  line-height: 1;
  font-size: clamp(14px, 2vw, 18px);
  height: 8rem;
}
.header-nav {
  display:flex;
  gap:8px;
  align-items: center;
}
.header-logo {margin-right: 1rem;}
.btn {
  padding:1rem 2.5rem 1rem 1.5rem;
  border-radius:4px;
  text-decoration:none;
  color:#fff;
  display:inline-block;
  white-space:nowrap;
  position: relative;
  line-height: 1.4;
  font-weight: bold;
}
.btn:hover {
  color:#fff;
}
.btn::after {
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 1rem;
    bottom: 0;
    margin: auto;
    transition: right .3s;
}
.btn--estimate { background:#e93069; }
.btn--line {
  background:#06c755 url(../images/ico_line.webp) 0.8rem center no-repeat;
  background-size: 38px auto;
  padding: 1rem 2.5rem 1rem 4.5rem;
}
.tel {
  font-size: clamp(18px, 3vw, 42px);
  font-family: Arial, Helvetica, sans-serif;
  color:#222;
  text-decoration:none;
  font-weight:bold;
  white-space: nowrap;
  position: relative;
}
.tel::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 21px;
  margin-right: 1rem;
  background: url(../images/ico_tel.svg) left center no-repeat;
  background-size: cover;
  position: relative;
  top: 50%;
}

/* ---------------- Main Visual ---------------- */
#mv {
  width:100%;
  /* height: calc( 100vh - 8rem); */
  background:url("../images/mv.webp") center/cover no-repeat;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  position:relative;
  margin-top:8rem; /* header高さの余白 */
}
#mv h1 {
  width: 40%;
  max-width: 512px;
  min-width: 390px;
}

#cta-section {
  background: #fdd1dd url(../images/bg_cta.webp) 0 0 repeat;
  padding: 6rem 2rem;
  text-align: center;
}

.cta-btn {
  text-align: center;
  display: block;
}

.cta-btn:hover {
  opacity: 0.75;
}


#worry {
  background: #111 url(../images/worry.webp?) top/cover no-repeat;
  color: #fff;
  padding: 6rem 0 6rem 2rem;
  position: relative;
}
#worry::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 4rem 6rem 0 6rem;
  border-color: #111 transparent transparent;
  translate: -50% 100%;
}
.worry-flex {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
}
.worry-flex img {
    width: 54%;
    max-width: 728px;
    padding-left: 2rem;
}
.worry-inner {
  position: relative;
  right: 0;
  top: 3rem;
  border-radius: 2rem 0 0 2rem;
  font-size: clamp(1.6rem, 2vw, 2.6rem);
  padding: 6rem 6rem;
  color: #fff;
  background-color: #F9749D;
  max-width: 580px;
  margin-left: auto;
  margin-bottom: 6rem;
  font-weight: bold;
  width: 44%;
}
.worry-inner::before {
  content: '';
  width: 295px;
  height: 103px;
  right: 3rem;
  top: -4rem;
  display: block;
  position: absolute;
  background: url(../images/message.webp) 0 0 no-repeat;
  background-size: 295px auto;
}
.worry-inner::after {
  content: '';
  width: 141px;
  height: 220px;
  right: -3rem;
  bottom: -4rem;
  display: block;
  position: absolute;
  background: url(../images/worry1.webp) 0 0 no-repeat;
  background-size: 141px 220px;
}
.worry-inner span {
  color: #FDFF85;
}
/* 解決いたします ================================== */
#solution {
  text-align: center;
  margin: 0 auto;
  padding: 8rem 1rem;
  background-color: #fff;
}
/* 選ばれる理由 ================================== */
.slide {width: 100%;}
#reason {
  background: url(../images/bg_reason.webp) 0 0 repeat;
}
#reason h2 {
  font-size: 40px;
  color: #e93069;
  position: relative;
}
#reason h2::after {
  font-size: 20px;
  content: 'REASON';
  display: block;
  letter-spacing: 0.5rem;
}
#reason h2 span {
  font-size: 60px;
}
#reason ul {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}
#reason li {
  flex: 1 1 calc(25% - 3rem);
  background: #fff;
  padding: 8rem 2rem 2rem;
  border-radius: 4rem;
  position: relative;
  text-align: left;
  max-width: 300px;
  font-weight: bold;
}
#reason li h3 {
  color: #e93069;
  font-size: 2.0rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}
#reason li img {
  margin-bottom: 1rem;
}
#reason li span {
  color: #e93069;
  font-size: 6.4rem;
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  top: 3rem;
}
#reason li span::before {
  content: 'POINT';
  font-size: 2rem;
  display: block;
}
/* 利用例 ================================== */
#example {
  background: #fff url(../images/bg_example.webp) 0 0 repeat;
  z-index: 2;
  position: relative;
}
.example-bx {
  border-radius: 4rem;
  border: 6px solid #e93069;
  background-color: #fff;
  padding: 2rem 5rem;
}
.example-bx h3 {
  font-size: 2.8rem;
  color: #e93069;
  text-align: left;
  margin-bottom: 2rem;
}
.example-bx h3 span {
  font-size: 6.4rem;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  top: 1rem;
  margin-right: 2rem;
}
.example-bx .segment {
  background-color: #e93069;
  border-radius: 2rem;
  padding: 0.5rem 2rem;
  color: #fff;
  font-size: 2.0rem;
  white-space: nowrap;
  margin-right: 1rem;
  top: initial;
}
.example-bx ul {
  border-top: 4px solid #e93069;
  border-bottom: 4px solid #e93069;
  padding: 2rem 0;
  flex-wrap: nowrap;
  display: flex;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 2rem;
}
.example-bx ul li {
  width: 20%;
  font-size: 2.4rem;
  border-right: 4px dashed #e93069;
  line-height: 0.7;
}
.example-bx ul li:last-child {
  border-right: none;
}
.example-bx ul li span {
  font-size: 3.6rem;
  font-family: Arial, Helvetica, sans-serif;
}
.example-bx ul li span.small {
  font-size: 1.6rem;
}
.example-bx ul li span.tax {
  font-size: 1.6rem;
  white-space: nowrap;
}
.example-bx ul p {
  color: #e93069;
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 0 1rem 0;
}
.example-photo {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: space-between;
}
.example-photo div:nth-child(2) img {
  top: calc(50% - 3rem);
  position: relative;
}
.example-photo div:first-child p, .example-photo div:last-child p {
  background-color: #6C6C6C;
  color: #fff;
  text-align: left;
  padding: 1rem 2rem;
}
.example-photo div:last-child p {
  background-color: #e93069;
}
.flex2, .flex3 {
  display: flex;
  gap: 3rem;
  flex-wrap: nowrap;
  position: relative;
}
.flex3 li {
  width: calc(100% / 3 - 3rem);
}
.example-read {
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
  line-height: 1.8;
}
.example-read .att01 {
  font-size: 3.8rem;
  white-space: nowrap;
}

/* 寄り添います ================================== */
#yorisoi {
  background: url(../images/bg_yorisoi.webp) 0 0 repeat;
  text-align: center;
  position: relative;
  padding-bottom: 0;
}
#yorisoi h2 {
  position: relative;
  margin-left: 106px;
  z-index: 1;
}
#yorisoi::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background: #F9FAC9;
  border-radius: 50%;
  z-index: 1;
  left: -5rem;
  top: 12%;
}
#yorisoi h2::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  background: #F9FAC9;
  border-radius: 50%;
  top: -21rem;
  left: -15rem;
  z-index: 1;
}
#yorisoi h2::after {
  content: '';
  background: url(../images/yorisoi2.webp) 0 0 no-repeat;
  width: 20%;
  height: 213px;
  background-size: contain;
  position: relative;
  display: inline-block;
  left: 2rem;
}
#yorisoi .bg-green .flex2 li:last-child {
  position: relative;
  top: -14rem;
  margin-bottom: -8rem;
}
#yorisoi .bg-green .flex2 li {
  font-size: 2.0rem;
}
.bg-green {
  background-image: linear-gradient(#23a37a, #f9eed4);
  color: #fff;
  padding: 8rem 0;
  text-align: left;
}
.flex2 li {
  width: calc(50% - 3rem);
  position: relative;
}
/* かっこ*/
.parentheses {
    position: relative;
    display: inline-block;
    padding: 0 2em;
    color: #FDFF85;
}

.bg-green h3 {
  font-size: clamp(2.0rem, 2.5vw, 3.6rem);
}
.parentheses::before {
  font-size: 5rem;
  line-height: 1;
  content: '“';
  position: absolute;
  left: 0;
  top: -1rem;
}
.parentheses::after {
  font-size: 5rem;
  line-height: 1;
  content: '”';
  right: 1rem;
  position: absolute;
  bottom: 0.5em;
}

.example-voice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: left;
  padding: 4rem 0 2rem;
}

.example-voice img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}

.example-voice p {
  font-size: 20px;
  line-height: 1.7;
  color: #111;
  font-weight: 500;
}

/* よくあるご質問 ================================== */
#faq {
  background: url(../images/bg_faq.webp) 0 0 repeat;
}
#faq .inner {
  max-width: 900px;
}
.qa {
  background-color: #fff;
  border-radius: 2rem;
  font-size: clamp(1.8rem, 2.5vw, 2.0rem);
  margin-bottom: 2rem;
  text-align: left;
}
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 3rem 3rem 3rem 9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display:none;
}

.qa summary::before,
.qa p::before {
  position: absolute;
  left: 1rem;
  font-weight: normal;
  font-size: 2.6rem;
  font-family: Arial, Helvetica, sans-serif;
  width: 40px;
  text-align: center;
  border-radius: 20px;
  line-height: 1.5;
}

.qa summary::before {
  color: #fff;
  content: "Q";
  background: #e93069;
  left: 3rem;
  position: absolute;
}

.qa summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border-bottom: 3px solid #e93069;
  border-right: 3px solid #e93069;
  content: '';
  transition: transform .5s;
}

.qa[open] summary::after {
  transform: rotate(225deg);
}

.qa p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3.5em 1.5em;
  transition: transform .5s, opacity .5s;
  font-size: 16px;
}

.qa[open] p {
    transform: none;
    opacity: 1;
    border-top: 1px solid #D8CACA;
    margin: 0 2rem;
    padding: 3rem 3rem 3rem 7rem;
    text-align: left;
}

.qa p::before {
    color: #e93069;
    width: 40px;
    content: "A";
    background: #fff;
    border: 2px solid;
    line-height: 1.4;
    left: 1rem;
    position: absolute;
    top: 2rem;
}
/* 比較 ================================== */
#compare {
  background-image: linear-gradient(#fff, #F9EED4);
}
.compare-table {
  width: 100%;
  max-width: 1000px;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  font-size: 20px;
  line-height: 1.6;
  margin: 0 auto;
}

.compare-table th,
.compare-table td {
  border: 2px solid #fff;
  padding: 18px;
  vertical-align: middle;
}

/* 左の項目セル */
.compare-table tbody th {
  background: #0FA287;
  color: #fff;
  font-weight: 600;
  padding: 1rem;
}

/* ヘッダー */
.compare-table thead th {
  padding: 2rem 1rem;
  font-weight: 700;
  color: #fff;
}

.compare-table thead th:first-child {
  background: #0FA287;
}

.compare-table thead .pro {
  background: #E93069;
  border: 4px solid #e93069;
}

.compare-table thead .other {
  background: #111;
}

/* 片付けプロ列 */
.compare-table td:nth-child(2) {
  background: #EEEEEE;
  color: #E93069;
  font-weight: 600;
  border-right: 4px solid #e93069;
  border-left: 4px solid #e93069;
}
.compare-table tr:last-child td:nth-child(2) {
  border-bottom: 4px solid #e93069;
}

/* 一般業者列 */
.compare-table td:last-child {
  background: #EEEEEE;
  color: #111;
}
/* 利用者の声 ================================== */
#voice {
  background-color: #fff;
}
#voice .flex3 {
  overflow-x: scroll;
}
#voice .flex3 li {
  border: 1px solid #D9D9D9;
  background-color: #F2F2F2;
  padding: 2rem;
  text-align: left;
  border-radius: 4rem;
  line-height: 1.8;
  min-width: 300px;
}
#voice .flex3 li img {
  margin-bottom: 1rem;
}
#voice .flex3 li a {
  text-decoration: underline;
  float: right;
  margin-top: 2.5rem;
}
#voice .flex3 li a:hover {
  text-decoration: none;
}

/* お見積りフォーム ================================== */
#contact {
  text-align: center;
}
#contact .ttl01 span {
  color: #F9EED4;
}
.contact-bx {
  padding: 8rem 4rem 4rem;
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
  background-color: #EDEDED;
  border-radius: 6rem;
  color: #111;
  text-align: left;
}
#contact a {color: #999;font-size: 1.2rem;margin-top: 2rem;display: block;}

/*  */
.form-wrapper {
  max-width: 600px;
  margin: 0 auto;
  font-family: "Hiragino Sans", sans-serif;
  color: #333;
}

.form-block {
  margin-bottom: 35px;
}

.label {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: bold;
}

.required {
  background: #ff2f6f;
  color: #fff;
  font-size: 12px;
  padding: 0.3rem 1rem;
  margin-left: 6px;
}

.small-label {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.input,
.textarea {
  border: 1px solid #ccc;
  border-radius: 1rem;
  padding: 1.5rem;
  font-size: 18px;
  box-sizing: border-box;
}

.input.full {
  width: 100%;
}

.input.half {
  width: 100%;
}

.name-row {
  display: flex;
  gap: 10px;
}

.zip-row,
.pref-row,
.addr-row,
.tel-row {
  margin-bottom: 18px;
}

.input.zip {
  width: 200px;
}

.input.pref {
  width: 200px;
}

.input.tel {
  width: 200px;
}

.textarea {
  width: 100%;
  height: 150px;
  resize: vertical;
}
.submit-wrapper {
  text-align: center;
  margin-top: 40px;
}

.submit-btn {
  background: #f02f6e;
  color: #fff;
  font-size: 18px;
  padding: 2rem;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  letter-spacing: 1px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  transition: opacity .2s ease;
  max-width: 300px;
  width: 100%;
  text-align: center;
}

.submit-btn:hover {
  opacity: 0.85;
}


/* スマホ固定CTA ================================== */
@media(max-width:768px) {
  .fix-content {
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    align-items: center;
    justify-content: center;
    z-index: 99;
    background-color: #fff;
    font-size: 14px;
  }
  .fix-content li {
    flex: 3 1 110px;
  }
  .fix-content li:last-child {
    flex: 3 1 140px;
  }
  .fix-content li .btn--line {
    padding-right: 1.5rem;
  }
  .fix-content li a {
    border-radius: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .fix-content li:first-child {
    flex: 2 1 100px;
  }
  .fix-content li:first-child a {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 2.0rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 2px;
  }
  .fix-content li a {
    width: 100%;
    display: block;
  }
}
/* フッター ================================== */
.footer {
  background: #fcfcfc;
  padding: 3rem 0;
}

.footer__inner {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4rem;
}

.footer__left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.footer__logo {
  max-width: 226px;
  height: auto;
  width: 34%;
}

.footer__nav a {
  text-decoration: underline;
}
.footer__nav a:hover {
  text-decoration: none;
}

.footer__nav span {
  margin: 0 5px;
}

.footer__copy {
  white-space: nowrap;
}
/* ページトップボタン */
#page-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 100;
  display: none;
  width: 50px;
  height: 50px;
  background: #00856C;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0,0,0,0.15);
  transition: opacity 0.3s ease;
}
#page-top:hover {
  opacity: 0.8;
}
/* 共通 ================================== */
.ttl01 {
  font-size: clamp(3.0rem, 2vw, 4.0rem);
  position: relative;
}
.ttl01 span {
  font-size: clamp(1.4rem, 2vw, 2.0rem);
  display: block;
  letter-spacing: 0.5rem;
  color: #e93069;
}
.inner {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  padding: 0 2rem;
}
.marker {
  background:linear-gradient(transparent 60%, #FFF776 60%);
}

/* ---------------- 共通 ---------------- */
.mb1 {margin-bottom: 1rem;}
.mb2 {margin-bottom: 2rem;}
.mb3 {margin-bottom: 3rem;}
.mb4 {margin-bottom: 4rem;}
.mb6 {margin-bottom: 6rem;}
.mb8 {margin-bottom: 8rem;}
.mb10 {margin-bottom: 10rem;}
.small {font-size: 80%;}


/* PC */
@media(min-width:1440px) {
  .worry-inner {border-radius: 2rem;}
}
/* PC */
@media(max-width:1165px) {
  #yorisoi h2 {margin-left: 0;}
  #yorisoi h2::after {background: url(../images/yorisoi2.webp) 0 0 no-repeat;background-size: contain;width: 24%; min-width: 140px; margin: 2rem 0 -2rem -2rem;}
  .worry-inner {padding: 3rem 3rem;}
  .worry-inner::after {bottom: -15rem;content: '';background: url(../images/worry1.webp) 0 0 no-repeat;background-size: 100px auto; right: -4rem;}
}
/* PC */
@media(min-width:769px) {
  .fix-content {display: none;}
  .sp {display: none;}
}

/* TAB */
@media(max-width:768px) {
  .pc{display: none;}
  .header {position: absolute;justify-content: center}
  .header-nav, #page-top {display: none !important;}
  .footer__left, .worry-flex {flex-direction: column;}
  .footer__inner {display: initial;}
  .footer {padding: 2rem 1rem 10rem;}
  .footer__copy {text-align: center;margin-top: 1rem;}
  .fix-content .tel::before {top: 3px;}
  

  #yorisoi .flex3 {flex-direction: column;margin-top: -5rem;}
  #yorisoi .flex3 li, .footer__logo, .worry-inner {width: 100%;}
  .worry-inner {margin-top: 3rem;}
  #reason h2 {font-size: 3.0rem;line-height: 1.2;}
  #reason h2::after {font-size: 14px;margin-top: 2rem;}
  #reason li {flex: 1 1 calc(50% - 3rem);}
  .example-bx {padding: 0 2rem;}
  .example-bx h3, .example-read {font-size: 1.8rem;}
  .example-bx .segment, .compare-table {font-size: 1.6rem;}
  .example-bx ul p {font-size: 1.2rem;}
  .example-bx ul {flex-wrap: wrap;padding: 1rem 0;}
  .example-bx ul li {width: 20%;border: none;font-size: 1.4rem;padding: 0.5rem 0;letter-spacing: -0.05rem;line-height: 1;}
  .example-bx ul li span {font-size: 3.2rem;}
  #yorisoi::before {width: 120px;height: 120px;left: initial;top: 0;right: -5rem;}
  #yorisoi .bg-green .flex2 li:last-child {position: absolute;top: -10rem;left: calc(50% - 160px);width: 320px;}
  #yorisoi .bg-green .flex2 li:first-child {width: 100%;margin-top: 140px;text-align: center;}
  .parentheses::after {bottom: 0;}
  .qa summary {padding: 2rem 2rem 2rem 6rem;}
  .qa summary::before {left: 1rem;}
  .ttl01 span {letter-spacing: 0.3rem;}
  .compare-table thead th:first-child {width: 90px;}
  .compare-table th, .compare-table td {padding: 1rem 0.5rem;}
  .contact-bx {border-radius: 3rem;padding: 3rem 2rem;}
  .worry-flex img {
      width: 100%;
      max-width: 728px;
      padding-left: 0;
  }
  .worry-inner {
      width: calc(100% + 2rem);
      max-width: 110%;
      left: -2rem;
      border-radius: 0;
      text-align: center;
  }
  .worry-inner::after {bottom: -18rem;}

section {padding: 4rem 0;}
.mb1 {margin-bottom: 0.5rem;}
.mb2 {margin-bottom: 1rem;}
.mb3 {margin-bottom: 1.5rem;}
.mb4 {margin-bottom: 2rem;}
.mb6 {margin-bottom: 3rem;}
.mb8 {margin-bottom: 4rem;}
.mb10 {margin-bottom: 5rem;}
}
/* SP */
@media (max-width: 670px) {
  #mv h1 {width: 50%;min-width: 300px;margin-top: -30%;}
  #mv {
    width:100%;
    height: calc( 100vh - 12.9rem);
    background:url("../images/mv_sp.webp") bottom/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
    margin-top:8rem; /* header高さの余白 */
  }
}
/* SP */
@media (max-width: 600px) {
  .example-bx ul li {width: 33%;}
  .example-bx ul li:last-child, .example-bx ul li:nth-child(4) {width: 50%;}
}
/* SP */
@media(max-width:480px) {
  .txt-l-sp {text-align: left;}
  #reason ul, .example-photo, .example-voice, .name-row {flex-direction: column;}
  #reason li {max-width: 100%;width: 100%;}
  #mv h1 {width: 80%;min-width: initial;margin-top: -30%;}
  .example-bx h3 span {font-size: 4.8rem;}
  .example-photo div:nth-child(2) img {transform: rotate(90deg);}
  .example-photo div:first-child p, .example-photo div:last-child p {padding: 1rem;font-size: 1.4rem;}
  .example-voice p {font-size: 1.6rem;}
  .example-bx ul li span.small, .example-bx ul li span.tax {font-size: 1.2rem;}
  .example-bx {border: 4px solid #e93069;}
  .example-read .att01 {font-size: 2.4rem;}
  .worry-inner::before {
    content: '';
    width: 295px;
    height: 103px;
    right: 0;
    top: -3rem;
    display: block;
    position: absolute;
    background: url(../images/message.webp) 0 0 no-repeat;
    background-size: 240px auto;
  }

}