@charset "UTF-8";
/* 色 */
:root {
  --orange: #ee9f84;
  --blue:#2759a2;
  --light-blue:#75c9e6;
  --red:#ca464b;
  --gray:#ccc;
  --black:#444;
  --light-gray:#f0f0f0;
  --gradation:linear-gradient(45deg, var(--color-main), var(--color-sub));
  --gradation-transparent:linear-gradient(45deg, #f6d3656e, #ee9f8487);
  --bicolor:linear-gradient(10deg, var(--color-sub) , var(--color-main));
  --gradation-blue:linear-gradient(45deg, var(--color-blue2), var(--light-blue));
  --color-main:#f6d365;
  --color-sub:#ee9f84;
  --color-sub2:#fffcfb;
  --color-blue:#75c9e6;
  --color-blue2:#94eacf;
  --color-gray:#b3b3b3;
  --color-back:#fdfbfb;
  --text-light:#999;
  --font-mincho: "Yu Mincho","MS PMincho",serif,Arial, Helvetica;
}

/* 文字 */
.orange {
  color: var(--orange);
}

.blue {
  color: var(--blue);
}

.red {
  color: var(--red);
}

/* 線 */
.border-orange {
  border-bottom: 2px solid var(--orange);
}

/* ハイライト */
span.marker {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, rgba(236, 255, 81, 0)), color-stop(60%, #ffdec4));
  background: linear-gradient(rgba(236, 255, 81, 0) 40%, #ffdec4 60%);
  font-weight: bold;
}

.marker-yellow {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, #ffffff00), color-stop(80%, #f6d365));
  background: linear-gradient(#ffffff00 65%, #f6d365 80%);
}

/* 背景 */
.bg-orange {
  background-color: var(--orange);
}

.bg-gray {
  background-color: var(--gray);
}

.bg-light-gray {
  background-color: var(--light-gray);
}

/* 画像 */
.img-w100 {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 初期設定・解除 */
body {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body ul {
  list-style-type: none;
  margin-bottom: 0;
  padding-left: 0;
}

body dl, body dd {
  margin-bottom: 0;
}

body p {
  margin-bottom: 0;
}

body a {
  text-decoration: none;
  color: #333;
}

body a:hover {
  color: var(--orange);
}

@media (min-width: 576px) {
  .br-sp {
    display: none;
  }
  .br-pc {
    display: block;
  }
}

@media (max-width: 575px) {
  .br-sp {
    display: block;
  }
  .br-pc {
    display: none;
  }
}

a:hover {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

/* 全ページ共通======================================================================== */
html {
  overflow-x: hidden;
}

html body {
  overflow-x: hidden;
  background-color: var(--color-back);
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

#content {
  margin-top: 6rem;
}

a:hover {
  opacity: 0.7;
}

/*----------------------------------------------------
固定ヘッダー
--------------------------------------------------------*/
header {
  top: 0;
  width: 100%;
  position: fixed;
  z-index: 1050;
  background-color: #fff;
}

header .pc-wide {
  max-width: 1200px;
  margin: auto;
}

header .text-24h {
  font-size: 0.75rem;
  line-height: 1.4rem;
}

/* スマホ表示 */
@media (max-width: 1000px) {
  .pc_nav, .sp_nav {
    display: none;
  }
}

@media (max-width: 767px) {
  .text-24h {
    display: none;
  }
}

/* PC表示 */
@media (min-width: 1000px) {
  .sp_nav {
    display: none !important;
  }
}

/* menu_ハンバーガーメニュー
================================================== */
.g_nav ul.menu-trigger {
  position: relative;
}

.g_nav ul.menu-trigger li {
  position: absolute;
}

@media (min-width: 1000px) {
  .g_nav .humb {
    display: none;
  }
}

@media (max-width: 1000px) {
  .humb {
    background: -webkit-gradient(linear, left top, right top, from(var(--color-main)), to(var(--color-sub)));
    padding: 0.1rem;
    height: 3.1rem;
  }
  .menu-trigger {
    position: relative;
    width: 2.9rem;
    height: 2.9rem;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    background-color: #fff;
    padding: 0.1rem;
  }
  .menu-trigger li {
    position: absolute;
    left: 8px;
    width: 30px;
    height: 2px;
    border-radius: 1px;
    background: -webkit-gradient(linear, left top, right top, from(var(--color-main)), to(var(--color-sub)));
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
  }
  .menu-trigger li:nth-of-type(1) {
    top: 13px;
  }
  .menu-trigger li:nth-of-type(2) {
    top: 23px;
  }
  .menu-trigger li:nth-of-type(3) {
    top: 33px;
  }
  .active .menu-trigger li:nth-of-type(1) {
    -webkit-transform: translateY(9px) rotate(-45deg);
            transform: translateY(9px) rotate(-45deg);
  }
  .active .menu-trigger li:nth-of-type(2) {
    opacity: 0;
  }
  .active .menu-trigger li:nth-of-type(3) {
    -webkit-transform: translateY(-11px) rotate(45deg);
            transform: translateY(-11px) rotate(45deg);
  }
  .tab-br::before {
    content: "\A";
    white-space: pre;
  }
}

.nav_open {
  display: block;
}

.sp_nav .sns {
  width: 14rem;
  margin: auto;
}

.sp_nav .sns .sns_icon {
  width: 3rem;
}

.sp_nav .sns .sns_icon img {
  width: 100%;
}

.btn-outline-warning {
  color: var(--color-sub);
  border-color: var(--color-sub);
  font-weight: bold;
  background-color: var(--color-sub2);
}

/*pc ヘッダーナビ ======================================== */
.pc_nav ul {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.pc_nav ul li {
  padding-right: 1.5rem;
}

.pc_nav ul a {
  display: block;
  font-size: 0.9rem;
}

.pc_nav ul a:hover {
  color: var(--orange);
}

.pc_nav ul:nth-of-type(1) li {
  padding-left: 1rem;
  line-height: 1;
}

.pc_nav ul:nth-of-type(1) li:not(:last-of-type) {
  border-right: 1px solid var(--black);
  padding: 0 1rem;
}

.pc_nav ul:nth-of-type(2) {
  margin-top: 0.5rem;
  line-height: 2;
}

.pc_nav ul:nth-of-type(2) a {
  font-size: 1rem;
}

@media screen and (max-width: 999px) {
  .header-button-pc {
    display: none;
  }
}

@media screen and (min-width: 1000px) {
  .header-button-pc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .header-button-pc a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: auto;
    padding: 0.8rem 1rem;
    border-radius: 100px;
    background: var(--color-sub);
    height: 3rem;
    width: 3rem;
  }
  .header-button-pc a:nth-of-type(2) {
    background: var(--color-blue);
  }
}

@media screen and (min-width: 1000px) and (min-width: 1000px) {
  .header-button-pc a {
    width: 13rem;
  }
}

@media screen and (min-width: 1000px) {
  .header-button-pc a div {
    height: 1.5rem;
    padding-right: 0.5rem;
  }
  .header-button-pc a div img {
    height: 100%;
  }
  .header-button-pc a span {
    color: #fff;
    display: none;
  }
}

@media screen and (min-width: 1000px) and (min-width: 1000px) {
  .header-button-pc a span {
    display: block;
    font-size: 1.4rem;
    line-height: 1;
  }
}

@media screen and (min-width: 1000px) {
  .header-button-sp {
    display: none;
  }
}

@media screen and (max-width: 999px) {
  .header-button-sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .header-button-sp .tel {
    width: 7rem;
    display: block;
    border: 1px solid var(--color-sub);
    text-align: center;
  }
}

@media screen and (max-width: 999px) and (min-width: 768px) {
  .header-button-sp .tel {
    height: 93%;
    width: 12rem;
  }
}

@media screen and (max-width: 999px) {
  .header-button-sp .tel .top {
    padding: 0.2rem 0;
    background-color: var(--color-sub);
    font-size: 0.6rem;
    color: #fff;
  }
  .header-button-sp .tel .bottom {
    padding: 0.2rem 0;
    color: var(--color-sub);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;
  }
  .header-button-sp .mail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0 auto;
    padding: 0.1rem;
    background: -webkit-gradient(linear, left top, right top, from(var(--color-main)), to(var(--color-sub)));
    height: 3.1rem;
    width: 3.1rem;
  }
  .header-button-sp .mail div {
    height: 2.9rem;
    width: 2.9rem;
    padding: 0.4rem;
    background-color: #fff;
  }
  .header-button-sp .mail div img {
    height: 100%;
  }
  .header-button-sp .mail span {
    color: #fff;
    display: none;
  }
}

@media screen and (max-width: 999px) and (min-width: 1000px) {
  .header-button-sp .mail span {
    display: block;
  }
}

/*----------------------------------------------------
bootstrapボタン　色変更
----------------------------------------------------*/
.submit-button .btn-primary {
  background: linear-gradient(45deg, var(--color-main), var(--color-sub));
  border-color: #ffffff00;
  border-radius: 100px;
  width: 15rem;
  padding: 1rem;
  -webkit-box-shadow: 0 3px 5px 0 #aaa;
          box-shadow: 0 3px 5px 0 #aaa;
}

.submit-button .btn-primary:hover {
  border-color: #ffffff00;
}

.submit-button .btn-check:focus + .btn-primary, .submit-button .btn-primary:focus {
  background: linear-gradient(45deg, var(--color-main), var(--color-sub));
  border-color: #ffffff00;
}

.submit-button .btn-check:active + .btn-primary, .submit-button .btn-check:checked + .btn-primary, .submit-button .btn-primary.active, .submit-button .btn-primary:active, .submit-button .show > .btn-primary.dropdown-toggle {
  background: linear-gradient(45deg, var(--color-main), var(--color-sub));
  border-color: #ffffff00;
}

.submit-button .btn-check:active + .btn-primary, .submit-button .btn-check:checked + .btn-primary, .submit-button .btn-primary.active, .submit-button .btn-primary:active,
.submit-button .btn-check:focus + .btn, .submit-button .btn:focus .show > .btn-primary.dropdown-toggle,
.submit-button .btn-check:active + .btn-primary:focus, .submit-button .btn-check:checked + .btn-primary:focus, .submit-button .btn-primary.active:focus, .submit-button .btn-primary:active:focus, .submit-button .show > .btn-primary.dropdown-toggle:focus,
.submit-button .btn-check:focus + .btn-primary, .submit-button .btn-primary:focus, .submit-button .btn-check:focus + .btn, .submit-button .btn:focus {
  -webkit-box-shadow: 0 0 0 0.25rem #e3e3e380 !important;
          box-shadow: 0 0 0 0.25rem #e3e3e380 !important;
  border-color: #ffffff00 !important;
}

/*==================================================
見出し（リニューアル）
==================================================*/
section h2.new {
  text-align: center;
  position: relative;
}

section h2.new::before {
  left: 50%;
  content: "";
  display: block;
  width: 1rem;
  height: 3px;
  background-color: var(--color-sub);
  bottom: 0;
  position: absolute;
}

section h2.new::after {
  right: 50%;
  content: "";
  display: block;
  width: 1rem;
  height: 3px;
  background-color: var(--color-main);
  bottom: 0;
  position: absolute;
}

section h2.new span {
  font-size: 0.9rem;
  color: var(--text-light);
}

section h2.new p {
  padding-bottom: 0.5rem;
  position: relative;
  width: 12rem;
  margin: auto;
}

section h2.new p::before {
  position: absolute;
  content: "";
  display: block;
  left: -2rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  background: url("../img/common_img/deco.svg");
}

section h2.new p::after {
  position: absolute;
  content: "";
  display: block;
  right: -2rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  background: url("../img/common_img/deco-right.svg");
}

/*============================================================================= 
topページ
================================================================================ */
section.container, div.container {
  max-width: 1200px;
}

.container-small {
  max-width: 800px;
}

/* ページTOPスクロール ==================================================*/
#page_top a {
  display: block;
  width: 5rem;
  height: 5rem;
  z-index: 1000;
  position: fixed;
  right: 0.3rem;
  bottom: 0.3rem;
  background: #fff;
  border-radius: 50%;
  opacity: 0.9;
  color: var(--orange);
  -webkit-box-shadow: 0 3px 6px -3px #666;
          box-shadow: 0 3px 6px -3px #666;
}

#page_top a:hover {
  opacity: 0.7;
}

#page_top a::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f102';
  font-weight: 900;
  font-size: 25px;
}

#page_top a::after {
  content: 'TOP';
  position: absolute;
  bottom: 1rem;
  right: 0;
  left: 0;
  font-weight: bold;
}

/* TOP画像 =====================================================--*/
.pc-wide-full {
  margin: 4.4rem auto 3rem;
  position: relative;
}

.pc-wide-full .main_imgBox {
  opacity: 0.5;
}

@media (max-width: 576px) {
  .pc-wide-full .main_imgBox {
    height: 50vh;
  }
}

@media (min-width: 577px) {
  .pc-wide-full .main_imgBox {
    height: 45rem;
  }
}

@media (min-width: 1000px) {
  .pc-wide-full .main_imgBox {
    height: 90vh;
  }
}

.pc-wide-full .main_imgBox ul.slider li img {
  height: 50vh;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 768px) {
  .pc-wide-full .main_imgBox ul.slider li img {
    height: 45rem;
  }
}

@media (min-width: 1000px) {
  .pc-wide-full .main_imgBox ul.slider li img {
    height: 90vh;
  }
}

.pc-wide-full .title-img {
  position: absolute;
  top: 20%;
  width: 80%;
  -webkit-transform: translateX(10%);
          transform: translateX(10%);
}

@media screen and (min-width: 768px) {
  .pc-wide-full .title-img {
    top: 20%;
    width: 60%;
    -webkit-transform: translateX(30%);
            transform: translateX(30%);
  }
}

@media screen and (min-width: 1000px) {
  .pc-wide-full .title-img {
    top: 15%;
    width: 35%;
    -webkit-transform: translateX(90%);
            transform: translateX(90%);
  }
}

.pc-wide-full .title-img img {
  width: 100%;
}

/* あなたにおすすめのサービス */
.fit {
  position: absolute;
  left: 0px;
  top: -10rem;
  height: 15rem;
  width: 100%;
  margin-top: 13rem;
}

.fit p {
  font-size: 1.3rem;
}

.house-choice .choose_box {
  position: relative;
  height: 22rem;
}

@media screen and (min-width: 768px) {
  .house-choice .choose_box {
    height: 18rem;
  }
}

@media screen and (min-width: 768px) {
  .house-choice .choose_box .flexbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.house-choice .choose_box .flexbox li a {
  font-size: 1.2rem;
  display: block;
  padding: 1rem;
  border-radius: 100px;
  background: var(--color-sub);
  color: #fff;
  -webkit-box-shadow: 0 2px 5px 0px #aaa;
          box-shadow: 0 2px 5px 0px #aaa;
  margin: 1rem;
  width: 20rem;
}

.house-choice .choose_box .flexbox li:nth-of-type(2) a {
  background: var(--color-blue);
}

.house-choice .choose_box span a {
  color: var(--color-sub);
}

.sec-news {
  margin: 3rem auto;
}

.sec-news h3 {
  padding: 0.5rem;
  border-radius: 100px;
  background: var(--gradation);
  width: 10rem;
  font-size: 1.2rem;
  color: #fff;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .sec-news h3 {
    margin: 0;
  }
}

.sec-news dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: start;
  border-bottom: 1px dashed var(--black);
}

@media screen and (min-width: 768px) {
  .sec-news dl {
    padding: 0.5rem 2rem 0;
  }
}

.sec-news dl dt {
  width: 6rem;
  padding: 0.5rem;
}

.sec-news dl dd {
  padding: 0.5rem;
}

/*カテゴリ　service===================================================*/
.sec1-service h2 p::before {
  left: -2rem;
}

.sec1-service h2 p::after {
  right: -2rem;
}

.sec1-service > div {
  position: relative;
  background: var(--gradation);
  padding: 1rem;
  border-radius: 1rem;
  margin-top: 3rem;
}

.sec1-service > div h3 {
  font-size: 1.2rem;
  color: #fff;
  background: var(--color-sub);
  padding: 0.5rem;
  border-radius: 100px;
  width: 18rem;
  margin: -2.3rem auto 0;
  border: 2px solid #fff;
}

@media screen and (min-width: 768px) {
  .sec1-service > div h3 {
    width: 26rem;
  }
}

.sec1-service .manshon {
  background: var(--gradation-blue);
}

.sec1-service .manshon h3 {
  background: var(--color-blue);
}

.sec1-service > div ul {
  padding-top: 1rem;
}

@media screen and (min-width: 768px) {
  .sec1-service > div ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.sec1-service > div ul li {
  width: 100%;
  margin: 0 auto 1rem;
  border-radius: 1rem;
  -webkit-box-shadow: 0 2px 5px 0 #ce8d76;
          box-shadow: 0 2px 5px 0 #ce8d76;
  border: 1px solid var(--color-sub);
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .sec1-service > div ul li {
    width: 40%;
    margin: 0 0.5rem 1rem;
  }
}

@media screen and (min-width: 1000px) {
  .sec1-service > div ul li {
    width: 30%;
  }
}

.sec1-service > div ul li h4 {
  font-size: 1.2rem;
  color: var(--color-sub);
  padding: 1rem 0 0.5rem;
  font-weight: bold;
}

.sec1-service > div ul li .service-ex {
  padding: 0.5rem 0;
  background: var(--color-sub);
  border-radius: 100px;
  color: #fff;
  max-width: 18rem;
  margin: auto;
  position: relative;
  font-size: 1.2rem;
}

.sec1-service > div ul li .service-img {
  height: 10rem;
  margin: -1.4rem auto 0.5rem;
}

.sec1-service > div ul li .service-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.sec1-service > div ul li .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.sec1-service > div ul li .flex .left p, .sec1-service > div ul li .flex .right p {
  font-size: 0.8rem;
  text-align: start;
}

.sec1-service > div ul li .flex .left > div, .sec1-service > div ul li .flex .right > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.8rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.sec1-service > div ul li .flex .left > div strong, .sec1-service > div ul li .flex .right > div strong {
  color: var(--color-sub);
  font-size: 2.5rem;
  line-height: 1;
}

.sec1-service > div ul li .flex .left > div span, .sec1-service > div ul li .flex .right > div span {
  display: block;
  font-size: 1.4rem;
  line-height: 1;
}

.sec1-service > div ul li .flex .left div p {
  line-height: 1.2;
  padding: 0.2rem 0.2rem 0.3rem;
}

.sec1-service > div ul li .flex .right div strong {
  color: var(--color-main);
}

.drop-btn {
  margin: 0.5rem auto;
  border-radius: 100px;
  background: var(--gradation);
  padding: 0.1rem;
  width: 19rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .drop-btn {
    width: 18rem;
  }
}

.drop-btn select {
  -webkit-appearance: none;
  border-radius: 100px;
  padding: 1rem;
  background: #fff;
  color: var(--black);
  border: none;
  width: 18.7rem;
  text-align: center !important;
}

@media screen and (min-width: 768px) {
  .drop-btn select {
    width: 17.7rem;
    padding: 0.4rem 0;
  }
}

.drop-btn select option {
  -webkit-appearance: none;
  text-align: center;
  display: block;
  width: 5rem;
  margin: auto;
}

.drop-btn select:hover {
  cursor: pointer;
}

.drop-btn select:focus-visible {
  outline: none;
}

.sec1-service .manshon ul li {
  -webkit-box-shadow: 0 2px 5px 0 #55acc5;
          box-shadow: 0 2px 5px 0 #55acc5;
  border: 1px solid var(--color-blue);
  background-color: #fff;
}

.sec1-service .manshon ul li h4 {
  color: var(--color-blue);
}

.sec1-service .manshon ul li .service-ex {
  background: var(--color-blue);
}

.sec1-service .manshon ul li .flex .left > div strong, .sec1-service .manshon ul li .flex .right > div strong {
  color: var(--color-blue);
}

.sec1-service .manshon ul li .flex .right div strong {
  color: var(--color-main);
}

.sec1-service .manshon ul li .drop-btn {
  background: var(--gradation-blue);
}

/*すまサポを知る　about===================================================*/
.sec-about > div {
  height: 35rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

@media screen and (min-width: 768px) {
  .sec-about > div {
    height: 28rem;
  }
}

.sec-about > div .house-img {
  position: absolute;
  width: 25rem;
}

.sec-about > div .house-img img {
  width: 100%;
}

.sec-about > div .text {
  margin: auto 0 auto auto;
  text-align: center;
  background: var(--gradation);
  padding: 0.3rem;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .sec-about > div .text {
    text-align: start;
    height: 26rem;
    width: 28rem;
  }
}

@media screen and (min-width: 1000px) {
  .sec-about > div .text {
    height: 22rem;
    width: 38rem;
  }
}

.sec-about > div .text > div {
  background: #fff;
  padding: 2rem;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .sec-about > div .text > div {
    padding: 2rem 5rem;
  }
}

.sec-about > div .text > div h3 {
  border-bottom: 2px dashed var(--color-sub);
  width: 11rem;
  margin: 0 auto 1rem;
}

@media screen and (min-width: 768px) {
  .sec-about > div .text > div h3 {
    margin: 0 0 1rem;
  }
}

.sec-about > div .text > div strong {
  font-weight: normal;
  font-size: 1.2rem;
}

.sec-about > div .text > div strong span {
  border-bottom: 5px solid var(--color-main);
}

.sec-about > div .text > div p {
  font-size: 1rem;
  padding: 1rem 0;
  text-align: start;
}

.sec-about > div .text > div div img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .sp-house {
    display: block;
  }
  .pc-house {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .sp-house {
    display: none;
  }
  .pc-house {
    display: block;
  }
}

/*=========================================
 ランキング調査（リニューアル）
=========================================*/
.rank {
  margin-top: 2rem;
}

.rank h2 {
  margin: 1rem auto;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif,"メイリオ";
  font-size: 1.3rem;
  position: relative;
  width: 18rem;
}

@media screen and (min-width: 768px) {
  .rank h2 {
    font-size: 1.6rem;
    width: 38rem;
  }
}

.rank h2::before {
  background: url("../image/h2-line.svg") no-repeat;
  position: absolute;
  content: "";
  display: block;
  left: -1rem;
  width: 2rem;
  height: 2rem;
  top: 33%;
}

@media screen and (min-width: 768px) {
  .rank h2::before {
    top: 17%;
  }
}

.rank h2::after {
  background: url("../image/h2-line.svg") no-repeat;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
  position: absolute;
  content: "";
  display: block;
  right: -1rem;
  width: 2rem;
  height: 2rem;
  top: 33%;
}

@media screen and (min-width: 768px) {
  .rank h2::after {
    top: 17%;
  }
}

.rank > div {
  max-width: 650px;
  margin: auto;
}

.rank > div img {
  width: 100%;
}

.rank p {
  font-size: 0.8rem;
  margin: 1rem;
}

@media screen and (min-width: 768px) {
  .rank p {
    text-align: center;
  }
}

.sec-point h3 {
  background-color: var(--color-sub);
  border-radius: 100px;
  color: #fff;
  font-size: 1.2rem;
  margin: 3rem;
  padding: 0.5rem;
  font-weight: bold;
  letter-spacing: 3px;
}

.sec-point h3 img {
  height: 2rem;
}

.sec-point ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.sec-point ul li {
  text-align: start;
  position: relative;
  padding: 0.2rem;
  background: var(--gradation-transparent);
  border-radius: 3rem 0 0 0;
  width: 100%;
  margin-bottom: 3rem;
}

@media screen and (min-width: 768px) {
  .sec-point ul li {
    width: 32%;
  }
}

.sec-point ul li h4 {
  position: absolute;
  top: -2rem;
  color: var(--color-sub);
  font-size: 1rem;
  line-height: 1;
}

.sec-point ul li h4 span {
  display: block;
  font-size: 3rem;
  font-weight: bold;
}

.sec-point ul li > div {
  border-radius: 2.8rem 0 0 0;
  background: #fff;
  padding: 2rem 0.5rem 1rem 1.2rem;
  height: 100%;
}

.sec-point ul li > div > div {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.sec-point ul li > div p {
  font-size: 1rem;
  width: 16rem;
}

@media screen and (min-width: 768px) {
  .sec-point ul li > div p {
    width: 12rem;
  }
}

@media screen and (min-width: 1000px) {
  .sec-point ul li > div p {
    width: 15rem;
  }
}

.sec-point ul li > div img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 5rem;
}

/*=================================================================
 お客様の声　voice（リニューアル）
=================================================================*/
.sec-voice > div {
  text-align: center;
  font-size: 1.3rem;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .sec-voice > div {
    width: 28rem;
  }
}

.sec-voice > div span {
  font-size: 0.8rem;
  display: block;
}

.sec-voice ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.sec-voice ul li {
  margin: 0 1%;
  text-align: center;
  padding: 1rem;
}

@media screen and (min-width: 768px) {
  .sec-voice ul li {
    width: 30%;
  }
}

.sec-voice ul li .hukidashi {
  background-color: var(--color-sub);
  padding: 0.5rem;
  color: #fff;
  border-radius: 3px;
  position: relative;
  font-size: 1.2rem;
}

.sec-voice ul li .hukidashi::after {
  position: absolute;
  content: "";
  width: 0;
  display: block;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-sub);
  border-left: 5px solid transparent;
  bottom: -4px;
  left: 47%;
}

.sec-voice ul li .person-img {
  width: 5rem;
  margin: auto;
  padding-top: 2rem;
}

.sec-voice ul li .person-img img {
  width: 100%;
}

.sec-voice ul li p {
  text-align: start;
}

.sec-voice ul li > span {
  font-size: 0.8rem;
}

/*=================================================================
flow ご契約の流れ　
================================================================== */
.sec-flow {
  background-color: var(--color-main);
  padding: 2rem 1rem;
}

@media screen and (min-width: 768px) {
  .sec-flow {
    padding: 1rem 2rem;
  }
}

.sec-flow h2.new {
  text-align: center;
  color: #fff;
  margin-bottom: 2rem;
}

.sec-flow h2.new::after {
  background-color: #fff;
}

.sec-flow > div {
  background-color: var(--color-sub2);
  text-align: center;
  padding: 2rem 0 1rem;
  font-size: 2rem;
  letter-spacing: 6px;
  border-radius: 0.5rem 0.5rem 0 0;
}

.sec-flow ul {
  padding: 1rem;
  background-color: var(--color-sub2);
  border-radius: 0 0 0.5rem 0.5rem;
}

@media screen and (min-width: 768px) {
  .sec-flow ul {
    padding: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.sec-flow ul li {
  background-color: #fff;
  border-radius: 1rem;
  padding: 0.3rem;
  background: -webkit-gradient(linear, left top, right top, from(var(--color-main)), to(var(--color-sub)));
  background: linear-gradient(90deg, var(--color-main), var(--color-sub));
  position: relative;
  margin-bottom: 2.5rem;
}

@media screen and (min-width: 768px) {
  .sec-flow ul li {
    width: 30%;
  }
}

.sec-flow ul li .border {
  background: #fff;
  padding: 1rem;
  border-radius: 0.7rem;
}

@media screen and (min-width: 768px) {
  .sec-flow ul li .border {
    height: 26rem;
  }
}

@media screen and (min-width: 1000px) {
  .sec-flow ul li .border {
    height: 24rem;
  }
}

.sec-flow ul li::after {
  position: absolute;
  content: "";
  width: 0;
  display: block;
  border-top: 1rem solid var(--color-main);
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  bottom: -2rem;
  right: 45%;
}

@media screen and (min-width: 768px) {
  .sec-flow ul li::after {
    border-left: 1rem solid var(--color-main);
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    bottom: 50%;
    right: -22%;
    right: -18%;
  }
}

@media screen and (min-width: 1000px) {
  .sec-flow ul li::after {
    right: -18%;
  }
}

.sec-flow ul li:last-of-type::after {
  display: none;
}

.sec-flow ul li .flow-number {
  background-color: var(--color-main);
  border-radius: 100px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  width: 3rem;
  height: 3rem;
  line-height: 2;
  text-align: center;
  margin: auto;
}

.sec-flow ul li h3 {
  text-align: center;
  font-size: 1.4rem;
  margin: 1rem 0;
}

.sec-flow ul li .flow-img {
  width: 8rem;
  height: 7rem;
  margin: 1rem auto;
}

.sec-flow ul li .flow-img img {
  width: 100%;
}

.sec-flow ul li p span {
  color: var(--color-sub);
}

.flow-bottom {
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: var(--color-main);
  margin: auto;
}

.flow-bottom h3 {
  color: #fff;
  padding: 1rem;
}

.flow-bottom p {
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 2rem;
}

.flow-bottom p span {
  color: var(--color-sub);
}

/* トラブル研究所 blog=====================================================-*/
.sec-blog .new {
  margin: 2rem auto 1rem;
}

.sec-blog ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.sec-blog ul li {
  text-align: start;
  width: 48%;
  margin: 0 0 1rem;
}

@media screen and (min-width: 768px) {
  .sec-blog ul li {
    width: 50%;
  }
}

@media screen and (min-width: 1000px) {
  .sec-blog ul li {
    width: 24%;
  }
}

.sec-blog .card img {
  height: 7rem;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.long-text {
  overflow: hidden;
  width: 100%;
}

.long-text p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-more {
  display: block;
  width: 16rem;
  margin: auto;
  background: var(--gradation);
  padding: 0.1rem;
}

.btn-more div {
  background: #fff;
  padding: 0.6rem;
}

/* topページEND==================================================================================== */
/* ========================================================================
よくある質問ページ
========================================================================= */
.qa_list li {
  padding: 2rem 1rem;
  border-top: 1px solid var(--black);
  text-align: start;
}

.qa_list li:last-of-type {
  border-bottom: 1px solid var(--black);
}

.qa_list li .quest {
  display: block;
  font-weight: bold;
  position: relative;
  padding: 0.5rem 0;
  font-size: 1.3rem;
  font-family: var(--font-mincho);
  padding-left: 2.5rem;
}

.qa_list li .quest::before {
  width: 2rem;
  height: 2rem;
  content: "";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  left: 0;
  background: url("/img/contents/Q-icon.svg") no-repeat;
}

.qa_list li .answer {
  padding-left: 2.5rem;
}

/* =============================================================================================
お客様の声ページ
============================================================================================= */
.voice-page {
  margin-bottom: 3rem;
}

.voice-page .top-text {
  margin-bottom: 3rem;
  padding: 0.3rem;
  background: -webkit-gradient(linear, left top, right top, from(var(--color-main)), to(var(--color-sub)));
  background: linear-gradient(90deg, var(--color-main), var(--color-sub));
}

.voice-page .top-text > div {
  background: #fff;
  padding: 1rem 0 0;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.voice-page .top-text > div .left, .voice-page .top-text > div .right {
  width: 20rem;
}

@media screen and (min-width: 768px) {
  .voice-page .top-text > div .left, .voice-page .top-text > div .right {
    width: 40rem;
  }
}

.voice-page .top-text > div .left img, .voice-page .top-text > div .right img {
  width: 100%;
}

.voice-page .top-text > div h2 {
  font-size: 1rem;
  font-family: var(--font-mincho);
}

@media screen and (min-width: 768px) {
  .voice-page .top-text > div h2 {
    font-size: 1.4rem;
  }
}

.voice-page .top-text > div p {
  font-size: 0.6rem;
}

@media screen and (min-width: 768px) {
  .voice-page .top-text > div p {
    font-size: 0.9rem;
  }
}

.customer .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.customer .inner .customervoice {
  width: 100%;
  background-color: #fff;
  padding: 1rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--black);
}

@media screen and (min-width: 768px) {
  .customer .inner .customervoice {
    width: 48%;
    margin-right: 1%;
  }
}

@media screen and (min-width: 1000px) {
  .customer .inner .customervoice {
    width: 30%;
    margin-right: 1%;
  }
}

.customer .inner .customervoice .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  border-bottom: 1px solid var(--black);
  padding-bottom: 0.5rem;
}

@media screen and (min-width: 1000px) {
  .customer .inner .customervoice .top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-bottom: 0;
  }
}

.customer .inner .customervoice .top .comment-img {
  width: 3rem;
  margin-right: 1rem;
}

.customer .inner .customervoice .top .comment-img img {
  width: 100%;
}

.customer .inner .customervoice .top .service-name {
  margin-right: 0.5rem;
}

@media screen and (min-width: 1000px) {
  .customer .inner .customervoice .top .service-name {
    width: 100%;
    border-bottom: 1px solid var(--black);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

.customer .inner .customervoice .top .service-name span {
  font-size: 0.7rem;
}

.customer .inner .customervoice .top .service-name a {
  display: block;
  font-size: 1.4rem;
  line-height: 1.2;
}

.customer .inner .customervoice .top .area-name {
  font-size: 1rem;
}

.customer .inner .customervoice p {
  padding-top: 0.5rem;
}

/* プライバシーポリシー =============================================================================-*/
.privacy h2 {
  margin-top: 1.5rem;
  background-color: var(--orange);
  color: #fff;
  padding: 0.7rem;
  font-size: 1.5rem;
}

.privacy h3 {
  color: var(--orange);
  margin-top: 1rem;
  font-size: 1.3rem;
}

.privacy p {
  text-align: start;
}

.privacy table {
  width: 100%;
}

.privacy th {
  text-align: center;
}

.privacy dt {
  margin-top: 0.8rem;
}

.privacy th, .privacy td {
  border: 1px solid #aaa;
  padding: 0.5rem;
}

/*=======================================================================
 お問い合わせフォーム
=======================================================================*/
h3.section-band-form {
  text-align: start;
  background: var(--gradation);
  color: #fff;
  padding: 1rem;
  font-size: 1rem;
  margin: 3rem auto 1rem;
}

h3.section-band-form span {
  font-size: 0.7rem;
  background-color: #fff;
  color: var(--color-sub);
  padding: 0.2rem;
  border-radius: 100px;
  margin-left: 1rem;
}

#content .deco-h2 h2 {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 0;
  font-size: 2.5rem;
  text-align: start;
}

#content .deco-h2 h2::before {
  content: "";
  display: block;
  width: 1.2rem;
  height: 3px;
  background-color: var(--color-main);
  top: 50%;
  position: absolute;
  left: 0.3rem;
}

@media screen and (min-width: 768px) {
  #content .deco-h2 h2::before {
    left: 0;
  }
}

#content .deco-h2 h2::after {
  content: "";
  display: block;
  width: 1.2rem;
  height: 3px;
  background-color: var(--color-sub);
  top: 50%;
  position: absolute;
  left: 1.5rem;
}

@media screen and (min-width: 768px) {
  #content .deco-h2 h2::after {
    left: 1.2rem;
  }
}

#content .badge {
  color: var(--red);
}

#content dl {
  text-align: start;
}

#content dl dt {
  text-align: start;
}

#content dl dd {
  text-align: start;
}

@media screen and (min-width: 768px) {
  #content .name-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (min-width: 768px) {
  #content .name-flex dl {
    width: 49%;
  }
}

#content .agree {
  width: 15rem;
  margin: auto;
}

.form-step {
  max-width: 30rem;
  margin: auto;
}

.form-step ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  color: var(--color-gray);
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

@media screen and (min-width: 768px) {
  .form-step ul {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.form-step ul li {
  position: relative;
}

.form-step ul li div {
  font-family: "fantasy","Impact";
}

.form-step ul li span {
  display: block;
  margin: auto;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-gray);
  border-radius: 50%;
}

.form-step ul li.now {
  color: var(--color-main);
}

.form-step ul li.now span {
  background-color: var(--color-main);
}

.form-step ul li:not(:last-of-type) span::after {
  content: "";
  position: absolute;
  display: block;
  width: 8rem;
  height: 1px;
  background-color: var(--color-gray);
  top: 50%;
  left: 1rem;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .form-step ul li:not(:last-of-type) span::after {
    width: 10rem;
  }
}

@media screen and (min-width: 1000px) {
  .form-step ul li:not(:last-of-type) span::after {
    width: 14rem;
  }
}

.teikei-form form {
  background: var(--gradation);
  padding: 0.2rem;
}

.teikei-form form > div {
  background: #fff;
  padding: 1rem;
}

/*=============================================================================
 フッター
============================================================================ */
footer.b_footer {
  background: var(--gradation);
}

footer.b_footer nav {
  padding: 1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (min-width: 1200px) {
  footer.b_footer nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

footer.b_footer nav .footer-link {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: auto;
}

@media screen and (min-width: 768px) {
  footer.b_footer nav .footer-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media screen and (min-width: 1200px) {
  footer.b_footer nav .footer-link {
    width: 60%;
  }
}

footer.b_footer nav .footer-link a {
  display: block;
  color: #fff;
}

footer.b_footer nav .footer-link dt a {
  font-size: 1.1rem;
  padding: 0 0 1rem 1rem;
}

@media screen and (min-width: 768px) {
  footer.b_footer nav .footer-link dd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

footer.b_footer nav .footer-link dd a {
  font-size: 0.9rem;
  padding: 0 0 0.5rem 1.5rem;
}

footer.b_footer nav .footer-banner {
  max-width: 24rem;
  margin: auto;
}

footer.b_footer nav .footer-banner .top {
  background-color: var(--color-sub);
  color: #fff;
  padding: 0.2rem 1rem;
}

footer.b_footer nav .footer-banner .top div {
  font-size: 1.2rem;
  font-weight: bold;
}

footer.b_footer nav .footer-banner .top div span {
  font-size: 1rem;
}

@media screen and (max-width: 767px) {
  footer.b_footer nav .footer-banner .top div span {
    display: block;
  }
}

footer.b_footer nav .footer-banner .top p {
  font-size: 0.7rem;
}

footer.b_footer nav .footer-banner .bottom {
  background-color: #fff;
  color: var(--color-sub);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem 1.2rem;
}

footer.b_footer nav .footer-banner .bottom div {
  height: 2.5rem;
  margin: auto auto auto 0;
}

footer.b_footer nav .footer-banner .bottom div img {
  height: 100%;
}

footer.b_footer nav .footer-banner .bottom p {
  font-size: 2.7rem;
  font-weight: bold;
  line-height: 0.9;
}

@media screen and (min-width: 768px) {
  footer.b_footer nav .footer-banner .bottom p {
    font-size: 3rem;
  }
}

/* サンクスページのみ　余白 */
@media (min-width: 576px) {
  .sanks-margin {
    margin-bottom: 27rem;
  }
}

@media (min-width: 1000px) {
  .sanks-margin {
    margin-bottom: 15rem;
  }
}

/* サービス文章 */
h4.service-text {
  font-weight: bold;
  background-color: #ffdec4;
  padding: 1rem;
}

/*----------------------------------------------------------------------------
 サービス詳細ページ
 ----------------------------------------------------------------------------*/
.service-title {
  background: var(--gradation);
  padding: 1rem;
  color: #fff;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .img-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media screen and (min-width: 768px) {
  #service-sec1 {
    width: 50%;
  }
}

.img-flex {
  margin-bottom: 3rem;
}

@media screen and (min-width: 768px) {
  .img-flex #sec2 {
    width: 50%;
    margin-right: 1rem;
  }
}

.img-flex #sec2 img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .img-flex #sec2 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.box-text {
  background: -webkit-gradient(linear, left top, right top, from(var(--color-main)), to(var(--color-sub)));
  background: linear-gradient(90deg, var(--color-main), var(--color-sub));
  padding: 0.5rem;
  margin-bottom: 5rem;
}

.box-text > div {
  background: #fff;
  padding: 1rem;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-flow: row-reverse;
          flex-flow: row-reverse;
}

@media screen and (min-width: 768px) {
  .box-text > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
  }
}

.box-text > div div {
  padding-right: 5%;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .box-text > div div {
    width: 35%;
  }
}

.box-text > div div img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .box-text > div p {
    width: 65%;
  }
}

.box-text > div p span {
  color: var(--color-sub);
}

.page-service h3 {
  margin-top: 3rem;
}

@media screen and (min-width: 768px) {
  #sec1 {
    width: 50%;
  }
}

.sec02 {
  border: 1px solid var(--black);
  padding: 0.5rem;
  margin-top: 3rem;
  font-size: 1rem;
}

@media screen and (min-width: 768px) {
  .sec02 {
    margin-top: 1.5rem;
  }
}

.sec02 h3 {
  width: 17rem;
  padding: 0.5rem;
  border-radius: 100px;
  border: 1px solid var(--black);
  text-align: center;
  margin-top: -2rem;
  background-color: #fff;
  font-size: 1.2rem;
}

@media screen and (min-width: 768px) {
  .sec02 .trouble-list ul {
    margin: 2rem 2rem 1rem 0;
    max-width: 25rem;
  }
}

.sec02 .trouble-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 2;
  padding-bottom: 0.5rem;
  padding-left: 3rem;
  text-align: start;
  position: relative;
}

.sec02 .trouble-list li::before {
  position: absolute;
  left: 0.5rem;
  margin-right: 0.5rem;
  background-color: var(--color-main);
  color: #fff;
  font-weight: bold;
  width: 2rem;
  height: 2rem;
  text-align: center;
  display: block;
  border-radius: 100px;
  line-height: 1.4;
  font-size: 1.4rem;
}

.sec02 .trouble-list li:nth-of-type(1)::before {
  content: "1";
}

.sec02 .trouble-list li:nth-of-type(2)::before {
  content: "2";
}

.sec02 .trouble-list li:nth-of-type(3)::before {
  content: "3";
}

.sec02 .trouble-list li:nth-of-type(4)::before {
  content: "4";
}

.sec02 .trouble-list li:nth-of-type(5)::before {
  content: "5";
}

.sec02 .trouble-list div {
  position: relative;
}

@media screen and (max-width: 767px) {
  .sec02 .trouble-list div {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .sec02 .trouble-list div {
    display: block;
  }
}

.sec02 .trouble-list div img {
  position: absolute;
  right: 0;
  bottom: 0;
}

.muryou {
  margin: 1rem auto;
  background-color: var(--color-sub);
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 100px;
  padding: 0.3rem;
}

@media screen and (min-width: 768px) {
  .muryou {
    width: 23rem;
  }
}

.muryou p {
  font-size: 1.5rem;
}

.muryou div {
  position: relative;
  width: 7rem;
}

.muryou div img {
  position: absolute;
  bottom: -0.2rem;
  width: 100%;
  right: 0;
}

.normal-price .col-12 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ryokin h2 {
  font-weight: normal;
  font-size: 1.5rem;
}

@media screen and (min-width: 1000px) {
  .ryokin .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.ryokin .flex .price-block {
  display: block;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (min-width: 1000px) {
  .ryokin .flex .price-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.ryokin .flex .price-block .first, .ryokin .flex .price-block .normal {
  padding: 0.3rem;
  border: 2px solid var(--color-sub);
  color: var(--color-sub);
  text-align: center;
  line-height: 1.5;
  height: 4rem;
  width: 4rem;
  margin-top: auto;
}

.ryokin .flex .price-block .service-price {
  font-size: 4.5rem;
  letter-spacing: -4.5px;
  color: var(--color-sub);
  line-height: 0.9;
  padding: 0 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
}

.ryokin .flex .price-block .service-price div {
  font-size: 1.9rem;
  line-height: 1.1;
  width: 12rem;
}

.ryokin .flex .price-block .service-price span {
  font-size: 1.2rem;
  display: block;
  width: 8rem;
  line-height: 1.5;
  padding-right: 1rem;
}

.ryokin .flex .price-block .yen span {
  line-height: 1;
  display: block;
  font-size: 2.7rem;
}

.ryokin .flex .text {
  border: 1px solid var(--black);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 1rem 0;
  font-size: 0.9rem;
  width: 100%;
  text-align: start;
}

@media screen and (min-width: 1000px) {
  .ryokin .flex .text {
    width: 50%;
    margin: 0 0 0 0.5rem;
  }
}

.trip {
  display: none;
}

.content-frame {
  padding: 0.5rem;
  margin-bottom: 3rem;
  text-align: start;
}

.content-frame > div {
  padding: 0.5rem;
}

@media screen and (min-width: 768px) {
  .content-frame > div {
    max-width: 1000px;
    margin: auto;
  }
}

/*--------------------------------------
 電話・見積・キャンセル　無料バナー
--------------------------------------*/
.banner {
  margin: 2rem 0.75rem 1rem;
}

@media screen and (min-width: 768px) {
  .banner {
    margin: auto;
    max-width: 791px;
  }
}

.banner h3 {
  border-radius: 0.5rem 0.5rem 0 0;
  background-color: var(--color-sub);
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  padding: 0.5rem;
}

@media screen and (min-width: 768px) {
  .banner h3 {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.banner h3 p {
  color: #fff;
  font-size: 1.4rem;
  font-weight: normal;
}

.banner h3 div {
  width: 8rem;
  position: relative;
}

@media screen and (min-width: 768px) {
  .banner h3 div {
    width: 5rem;
  }
}

.banner h3 div img {
  position: absolute;
  width: 100%;
  bottom: -5px;
  right: 0;
}

@media screen and (min-width: 768px) {
  .banner h3 div img {
    width: 150%;
    right: -3rem;
  }
}

.banner .bottom {
  border-radius: 0 0 0.5rem 0.5rem;
  background-color: var(--color-sub2);
  padding: 1rem;
  text-align: center;
}

.banner .bottom p {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.banner .bottom p span {
  font-size: 1.6rem;
}

@media screen and (min-width: 768px) {
  .banner .bottom div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0 2.5rem;
  }
}

.banner .bottom div a {
  -webkit-box-shadow: 0 3px 5px -1px #aaa;
          box-shadow: 0 3px 5px -1px #aaa;
  color: #fff;
  width: 20rem;
  height: 4rem;
  display: block;
  margin: auto;
  line-height: 1.2;
  font-weight: bold;
  border-radius: 1rem;
}

.banner .bottom div a:nth-of-type(1) {
  font-size: 2.1rem;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color-main)), to(var(--color-sub)));
  background: linear-gradient(var(--color-main), var(--color-sub));
  padding: 0.2rem;
  padding-left: 3rem;
}

@media screen and (max-width: 767px) {
  .banner .bottom div a:nth-of-type(1) {
    margin-bottom: 1rem;
  }
}

.banner .bottom div a:nth-of-type(1) span {
  display: block;
  font-size: 0.8rem;
}

.banner .bottom div a:nth-of-type(2) {
  font-size: 1.5rem;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color-blue2)), to(var(--light-blue)));
  background: linear-gradient(var(--color-blue2), var(--light-blue));
  padding: 1rem;
  padding-left: 3rem;
  line-height: 1.5;
}

.banner .bottom div a i {
  font-size: 2rem;
}

.banner.contact {
  max-width: 550px;
}

.banner.contact p span {
  font-size: 0.9rem;
}

.banner-mail, .banner-tel {
  position: relative;
}

.banner-mail::before, .banner-tel::before {
  content: "";
  width: 2rem;
  height: 2rem;
  display: block;
  position: absolute;
  left: 1.2rem;
  top: 28%;
}

.banner-mail::before {
  background: url("../img/common_img/mail-letter-white.svg") no-repeat;
}

.banner-tel::before {
  background: url("../img/common_img/head-tel-white.svg") no-repeat;
}

/*--------------------------------------
 提携会社ページ
--------------------------------------*/
@media screen and (max-width: 767px) {
  .gyosya-page > div .gyosya-img-sp {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .gyosya-page > div .gyosya-img-sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .gyosya-page > div .gyosya-img-pc {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .gyosya-page > div .gyosya-img-pc {
    display: block;
  }
}

.gyosya-page > div img {
  width: 100%;
}

.gyosya-page .free-gyosya {
  display: block;
  padding: 1.5rem 0.5rem;
  background: var(--bicolor);
  color: #fff;
  font-weight: bold;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0px 3px 5px 0px #aaa;
          box-shadow: 0px 3px 5px 0px #aaa;
  width: 20rem;
  margin: auto;
  font-size: 1.2rem;
}

.gyosya-page .free-gyosya span {
  padding: 1rem 0.6rem;
  border-radius: 0.5rem;
  color: var(--color-sub);
  background-color: #fff;
}

.gyosya-page .gyosya-sec01 h2 {
  position: relative;
  margin: 2rem auto;
  font-size: 1.4rem;
  width: 20rem;
}

@media screen and (min-width: 768px) {
  .gyosya-page .gyosya-sec01 h2 {
    width: 30rem;
  }
}

.gyosya-page .gyosya-sec01 h2::before, .gyosya-page .gyosya-sec01 h2::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -30%;
  width: 2rem;
  height: 2rem;
  background: url(../image/h-line.svg) no-repeat;
}

.gyosya-page .gyosya-sec01 h2::before {
  left: 0;
}

.gyosya-page .gyosya-sec01 h2::after {
  right: 0;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.gyosya-page .gyosya-sec01 .sumasapo-title {
  position: relative;
  padding: 0.3rem;
  border: 1px solid #ec9121;
  border-radius: 100px;
  width: 15rem;
  margin: 1rem auto -1.2rem;
  background-color: #fff;
}

.gyosya-page .gyosya-sec01 .sumasapo-title img {
  width: 5rem;
}

.gyosya-page .gyosya-sec01 .text {
  border: 1px solid #ec9121;
  padding: 3rem 1rem 1rem;
  text-align: start;
}

.gyosya-page .gyosya-sec01 .text h3 {
  font-size: 1.4rem;
  font-weight: normal;
  margin-bottom: 2rem;
  width: 20rem;
}

@media screen and (min-width: 768px) {
  .gyosya-page .gyosya-sec01 .text h3 {
    width: 33rem;
  }
}

.gyosya-page .gyosya-sec01 .text p {
  font-size: 0.9rem;
  line-height: 2;
}

.gyosya-page .gyosya-sec02 {
  margin: 3rem auto;
}

.gyosya-page .gyosya-sec02 > div:nth-of-type(1) {
  width: 5rem;
  margin: 1rem auto;
}

.gyosya-page .gyosya-sec02 > div:nth-of-type(1) img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .gyosya-page .gyosya-sec02 ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.gyosya-page .gyosya-sec02 ul li {
  border: 1px solid var(--black);
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem auto;
}

@media screen and (min-width: 768px) {
  .gyosya-page .gyosya-sec02 ul li {
    width: 30%;
  }
}

.gyosya-page .gyosya-sec02 ul li img:nth-of-type(1) {
  width: 2.5rem;
  height: 4rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.gyosya-page .gyosya-sec02 ul li h3 span {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, #ffffff00), color-stop(60%, var(--color-sub)));
  background: linear-gradient(#ffffff00 60%, var(--color-sub) 60%);
  font-size: 1.5rem;
  font-weight: bold;
}

.gyosya-page .gyosya-sec02 ul li img:nth-of-type(2) {
  width: 6rem;
  height: 6rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.gyosya-page .gyosya-sec02 ul li p {
  font-size: 1rem;
  text-align: start;
  padding-top: 1rem;
}

@media screen and (min-width: 768px) {
  .gyosya-page .gyosya-sec02 .contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
}

.gyosya-page .gyosya-sec02 .contact a {
  display: block;
  margin: 2rem auto;
  padding: 0.7rem;
  border-radius: 100px;
  border: 1px solid var(--color-sub);
  -webkit-box-shadow: 0 2px 5px 0px #aaa;
          box-shadow: 0 2px 5px 0px #aaa;
}

@media screen and (min-width: 768px) {
  .gyosya-page .gyosya-sec02 .contact a {
    width: 40%;
  }
}

.gyosya-page .gyosya-sec02 .contact .mail {
  background-color: var(--color-sub);
  color: #fff;
  font-size: 1.2rem;
  line-height: 2;
}

.gyosya-page .gyosya-sec02 .contact .tel {
  background-color: #fff;
  color: var(--color-sub);
  font-size: 1.6rem;
}

.gyosya-page .gyosya-sec02 .contact .tel img {
  height: 2rem;
}

.gyosya-page .gyosya-sec03 ul {
  margin: 2rem auto;
}

.gyosya-page .gyosya-sec03 ul li {
  position: relative;
}

.gyosya-page .gyosya-sec03 ul li .number {
  position: absolute;
  left: 0;
  top: 10%;
  background: var(--color-sub);
  padding: 0.2rem;
  -webkit-box-shadow: 2px 2px 0 0 #aaa;
          box-shadow: 2px 2px 0 0 #aaa;
}

.gyosya-page .gyosya-sec03 ul li .number div {
  background: #fff;
  padding: 1rem;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-sub);
}

.gyosya-page .gyosya-sec03 ul li .text {
  text-align: start;
  margin-left: 2.5rem;
  background: var(--gradation);
  padding: 0.2rem;
}

.gyosya-page .gyosya-sec03 ul li .text dl {
  background: #fff;
  padding: 2rem 0 2rem 5rem;
}

.gyosya-page .gyosya-sec03 ul li .text dl dt {
  font-size: 1.4rem;
  font-weight: normal;
}

.gyosya-page .gyosya-sec03 ul li .text dl dd {
  font-size: 1rem;
}

.gyosya-page .gyosya-sec03 ul li:not(:last-of-type):after {
  content: "";
  display: block;
  margin: 1rem auto;
  width: 3rem;
  height: 3rem;
  background: url(../image/yajirusi.png) no-repeat;
}

/*---------------------------------------------------------------
 運営会社ページ
---------------------------------------------------------------*/
.company div:nth-of-type(2) {
  border-bottom: 1px solid var(--gray);
  margin: 5rem auto;
}

.company div:nth-of-type(2) dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 1px solid var(--gray);
  padding: 3rem 0;
}

@media screen and (min-width: 768px) {
  .company div:nth-of-type(2) dl {
    padding: 3rem;
  }
}

.company div:nth-of-type(2) dl dt {
  width: 30%;
  font-weight: normal;
}

.company div:nth-of-type(2) dl dd {
  width: 70%;
}

.company div:nth-of-type(2) iframe {
  width: 100%;
  max-height: 20rem;
  margin-bottom: 2rem;
}

.customervoice p.summery {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.customervoice p.summery br {
  display: none;
}

.open_category p.summery {
  display: none;
}

/* sec-category カテゴリから探す*/
.category_item {
  max-height: 0;
  overflow: hidden;
}

.js_item.open_category .category_item {
  /* display: block; */
  max-height: 100%;
}

/*=====================================
複製LP
=====================================*/
.banner.web .bottom div a:nth-of-type(1) {
  font-size: 1.5rem;
  line-height: 2.5;
}
/*# sourceMappingURL=boot-style.css.map */