@charset "UTF-8";

/* スマホでは非表示 */
.sp_no{display: none;}


.content{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


/*◎768px以下*/
@media screen and (max-width: 768px) {
}

/*◎768px以上*/
@media screen and (min-width: 768px) {
}

/*◎768〜1240の間の幅*/
@media screen and (min-width: 768px) and (max-width: 1240px){
}

/* -------------------------------------------------------- */
/* -----header--------------------------------------------- */
/* -------------------------------------------------------- */
/* メインナビ */
.l-header__logo{width: 60vw;}
.l-header__inner{
  background: linear-gradient(rgba(255 255 255 / 1),rgba(255 255 255 / 0.8));
  width: 100%;
  padding: 1rem;
  position: fixed;
  top: 0;
  z-index: 10;
}
/* -------------------------------------------------------- */
/* hamburger___menu */
.menu > li {margin: 0 1rem; overflow: hidden;}

  .menu-button-container {
    display: none;
    height: 100%;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right:1rem;
    top:0;

  }
#menu-toggle {display: none;}

  .menu-button,
  .menu-button::before,
  .menu-button::after {
    display: block;
    background-color:var(--main-c);
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
  }

  .menu-button::before {
    content: '';
    margin-top: -8px;
  }

  .menu-button::after {
    content: '';
    margin-top: 8px;
  }

  #menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
  }

  #menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(193, 231, 247, 0.9);
    z-index: 10;
  }

  #menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
  }


.menu-button-container {display: flex;}
    .menu {
      position: absolute;
      top: 0;
      margin-top: 5rem;
      left: 0;
      flex-direction: column;
      width: 100%;
      justify-content: center;
      align-items: center;
    }
    .menu a {color: var(--main-d);}
    #menu-toggle ~ .menu li {
      height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle:checked ~ .menu li {
      border-top: 1px solid var(--white);
      height: 5rem;
      padding-top: 2rem;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
      font-weight: bold;
      letter-spacing: 0.1rem;
    }
    .menu > li {
      display: flex;
      justify-content: center;
      margin: 0;
      padding: 0.5em 0;
      width: 100%;
      color: white;
      background: rgba(193, 231, 247, 0.9);
      z-index: 9999;
    }
    .menu > li:not(:last-child) {
      border-bottom: 1px solid var(--gray-el);
    }

/* -------------------------------------------------------- */
/* 無料見積・無料相談 */
.fixed_btn{
    position: fixed;
    bottom: 0;
    border: none;
    width: 100%;
    font-size: x-large;
    letter-spacing: 0.2rem;
    z-index: 999;

}
.fixed_btn a{
    display: block;
    padding: 1rem;
    background-color: var(--yellow);
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .3);
    text-align: center;
    font-size: var(--font-sl);
}
.fixed_btn a:hover{
    color:var(--white);
    background-color: var(--red);
}

/* -------------------------------------------------------- */
/* ---top-main--------------------------------------------- */
/* -------------------------------------------------------- */
/* content__top */
#content__top{
  background: url("../img/top/img_top_main.png") no-repeat top left/100%;
  position: relative;

}
.top_greeting{
  text-align: center;
  padding: 57% 0 5rem 0;
  letter-spacing: 0.2rem;
}
.top_greeting h3{
  font-size: var(--font-sl);
  color: var(--main-d);
  font-weight:var(--font-b);
}
.top_greeting img{width: 25vw; margin: 1rem auto;}
.top_greeting p{
  width: 80vw;
  margin: 0 auto;
  font-weight: var(--font-b);
  letter-spacing: 0.1rem;
  text-align:justify;
}
.top__img_bubble{
  position: absolute;
  top: 18%;
  right: 15%;
  width: 20vw;
}
.top__img_bottom{margin-top: -25%;}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* content__service */
#content__service{
  background: linear-gradient(rgb(214, 241, 255),rgb(193, 231, 247));
  padding-bottom: 5rem;
}
#content__service h2{
  color: var(--main-c);
  font-size: var(--font-xl);
  text-align: center;
}
#content__service h2 span{
  display: block;
  color: var(--gray);
  font-size: var(--font-s);
}
/* ------------- */
#content__service .service_item,
#content__service .service_item_s{
  background-color: var(--white);
  border-radius:var(--r1);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .2);
  margin-top: 2rem;
}


.service_item img,
.service_three_item img{
  width: 100%;
  border-radius: var(--r1) var(--r1) 0 0;
}

.service_item .txt,
.service_item_s .txt{padding: 1.5rem;}

.service_item .txt h4,
.service_item_s .txt h4{
  color: var(--main-c); font-size: var(--font-l);}
.service_item .txt p,
.service_item_s .txt p{font-weight: var(--font-b);}

.service_item .txt p,
.service_item_s .txt p{margin: 1rem 0 1.5rem 0;}


/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* content__news */
#content__news{
  background-color: var(--main-c);
  padding: 4rem 0;
}
.news__wrap{
  background-color: var(--white);
  border-radius: var(--r1);
  padding: 3rem;
}

#content__news h2{
  color: var(--main-c);
  font-size: var(--font-xl);
  text-align: center;
  margin-bottom: 2rem;
}
#content__news h2 span{
  display: block;
  color: var(--gray);
  font-size: var(--font-ss);
}
.news__list a span{
  color: var(--main-c);
  font-size: var(--font-s);
  font-weight: var(--font-b);
  margin-right: 1rem;
  padding-bottom: 0.5rem;
  display: block;
}
.news__list li{
  border-top: solid 1px var(--gray-el);
  padding: 1.8rem 0;
}
.news__list li:last-child{
  border-bottom: solid 1px var(--gray-el);
  margin-bottom: 1rem;
}

/* -------------------------------------------------------- */
/* 内部リンクボタン */
.cp_arrows a{
    color: var(--main-c);
    display: block;
}
.cp_arrows{
    margin: 1rem auto 0 auto;
    border: none;
    background-color: var(--main-el);
    color: var(--main-c);
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    border-radius: 30px;
    transition: 0.1s ease;
}
.cp_arrows:hover{letter-spacing: 0.3rem;}
  .cp_arrows span {
    display: inline-block;
    background:var(--white);
    border-radius: 100%;
    width: 28px;
    height: 28px;
    margin-left: 6rem;
  }
  /*矢印の縦線*/
  .cp_arrows [class*='cp_arrow'] {
    position: relative;
    left: -6px;
    top: 5px;
    display: inline-block;
    width: 2px;
    height: 18px;
    background:var(--main-c);
    border-radius: 2px;
    margin: 0 20px;

  }
  /*矢印の＜の部分*/
  .cp_arrows [class*='cp_arrow']:before,
  .cp_arrows [class*='cp_arrow']:after {
    position: absolute;
    content: '';
    top: -1.5px;
    width: 2px;
    height: 10px;
    background:var(--main-c);
    border-radius: 2px;

  }
  .cp_arrows [class*='cp_arrow']:before {left: 3px; transform: rotate(-45deg);}
  .cp_arrows [class*='cp_arrow']:after {right: 3px; transform: rotate(45deg); }
  .cp_arrows .cp_arrow_right {transform: rotate(90deg); }




/* -------------------------------------------------------- */
/* ----下層ページ共通----------------------------------------- */
/* -------------------------------------------------------- */

/*下層ページTOP背景*/
.content__internal_top,
.content__tertiary_top{
    background: linear-gradient(rgb(193, 231, 247),rgb(214, 241, 255));
    position: relative;
}
.content__internal_top{padding: 15.5rem 0 1.5rem 0;}
.content__tertiary_top{padding: 7rem 0 1.5rem 0;}

.page_top_img{
  width: 100vw;
  position: absolute;
  top: 0;
  right: 0;
}
.content__internal_top h2,
.content__tertiary_top h2{
  font-size: var(--font-l);
  letter-spacing: 0.1rem;
  font-weight: 600;
}
.sub_nav{
    display: flex;
    margin-left: 1rem;
}
.sub_nav li a{
    color: var(--main-d);
    font-weight: 500;
}
.sub_nav li a:hover{color: var(--red);}
.sub_nav li{
    list-style: '> ';
    color: var(--main-d);
    margin-right: 1.5rem;
    line-height: 1.5rem;
    font-size: var(--font12);
}
 /* ----------------------------------------- */
.intro{
  font-weight: 500;
  margin: 2rem auto 1rem auto;
}
.circle{
  margin: 0 auto;
  color: var(--white);
  background-color: var(--red);
  text-align: center;
  border-radius: 30px;
  padding: 0.5rem 0;
  letter-spacing: 0.1rem;
  }
  .txt_intro{
    margin-top: 1rem;
    text-align: center;
  }
  .circle span{font-size: var(--font-sl);}
  .txt_intro span{
    display: block;
    font-size: var(--font-sl);
    margin-top: -0.3rem;
    font-weight: 600;
  }
  .txt_intro span{
    letter-spacing: 0.1rem;
    line-height: 2.5rem;
}

 /* ----------------------------------------- */
 /* 本文  */
.txt{text-align: justify;}

 /*タイトル見出し*/
 #content__sub_top h3,
 .wrap__clean h3,
 .wrap__features h3, .wrap__qa h3,
 .content__sub_other h3{
    color: var(--gray);
    text-align: center;
    font-size: var(--font-sm);
}
#content__sub_top h3 span,
.wrap__clean h3 span,
.wrap__features h3 span, .wrap__qa h3 span,
.content__sub_other h3 span{
    color: var(--main-c);
    font-size: var(--font-ml);
    display: block;
}
 /*タイトル見出し下テキスト*/
 .txt_title{
  width: 90%;
    font-weight: 400;
    letter-spacing: 0.1rem;
    margin: 2rem auto 0 auto;
    font-size: var(--font-sm);
    text-align: justify;
}
  /* 強調 */
.txt_title em{
  font-size: var(--font-l);
  font-style: normal;
  color: var(--red);
  font-weight: 600;
}
.txt_title b{font-size: var(--font-m);}
.box__heading{
    margin-top: -5rem;
    z-index: 10;
}

/* ----------------------------------------- */
/* 背景動く文字 */
#content__sub_top,
#content__sub_wax{
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgb(214, 241, 255),rgb(193, 231, 247));
    z-index: -10;

  }
  .loop_wrap {
      display: flex;
      width: 100%;
      overflow: hidden;
    }

  .loop_wrap div {
      flex: 0 0 auto;
      white-space: nowrap;
      font-size: 200px;
      overflow: hidden;
      color: rgb(255,255,255,0.15);
      font-family:"Roboto Condensed";
      font-weight: 600;
      margin-top: -6rem;
      z-index: -5;
    }

  .loop_wrap div:nth-child(odd) {animation: loop 80s -40s linear infinite;}
  .loop_wrap div:nth-child(even) {animation: loop2 80s linear infinite;}

  @keyframes loop {
      0% {transform: translateX(100%);}
      to {transform: translateX(-100%);}
    }

  @keyframes loop2 {
      0% {transform: translateX(0);}
      to {transform: translateX(-200%);}
    }
/* ----------------------------------------- */

.box__sub_top,
.box__sub_top_two{margin: 1rem auto 3rem auto;}

.box__sub_top .item,
.box__sub_top_two .item{
  margin-bottom: 1.5rem;
}
.box__sub_top img,
.box__sub_top_two img{
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.box__sub_top h5,
.box__sub_top_two h5{
    color: var(--main-c);
    text-align: center;
    font-size: var(--font-sl);
    margin: 2rem auto 1rem auto;
  }

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* お問い合わせ */
.bt_ctc{
  width:100%;
  margin:0 auto;
  padding-bottom: 5rem;
  text-align: center
}
.bg_blue{background-color: rgb(193, 231, 247);}/* 背景色 */

/* お問い合わせこちらボタン */
.ctc_arrows a{
  display: block;
  color: var(--white);
  margin:0 auto;
  letter-spacing: 0.08rem;
  font-size: var(--font-m);
}
.ctc_arrows{
    border: none;
    background-color: var(--red);
    color: var(--main-c);
    padding: 0.5rem 0.5rem 0.5rem 3rem;
    margin:0 auto;
    border-radius: 30px;
    transition: 0.3s ease;
}

.ctc_arrows:hover {
  transform: scale(1.1,1.1);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .3);
}


  .ctc_arrows span{
    display: inline-block;
    background:var(--white);
    border-radius: 100%;
    width: 28px;
    height: 28px;
    margin-left: 2rem;
  }
  /*矢印の縦線*/
  .ctc_arrows [class*='cp_arrow']{
    position: relative;
    left: -6px;
    top: 5px;
    display: inline-block;
    width: 2px;
    height: 18px;
    background:var(--red);
    border-radius: 2px;
    margin: 0 20px;
  }

  /*矢印の＜の部分*/
  .ctc_arrows [class*='cp_arrow']:before,
  .ctc_arrows [class*='cp_arrow']:after{
    position: absolute;
    content: '';
    top: -1.5px;
    width: 2px;
    height: 10px;
    background:var(--red);
    border-radius: 2px;
  }

  .ctc_arrows [class*='cp_arrow']:before{left: 3px; transform: rotate(-45deg);}
  .ctc_arrows [class*='cp_arrow']:after{right: 3px; transform: rotate(45deg);}
  .ctc_arrows .cp_arrow_right{transform: rotate(90deg);}

/* -----下層ページ共通--------------------- */
/*  見出し　横に線  */
.catch {
  font-weight: 500;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content:space-between;
}
.catch:before, .catch:after {
  border-top: 1px solid;
  content: "";
  width: 7vw; /* 線の長さ */
}
.catch:before {margin-right: 0.5em;}
.catch:after {margin-left: 0.5em;}

/* -----下層ページ共通--------------------- */
/* リストマーク ※ */
.note, .note_second{
  text-indent: -1em;
  font-size: var(--font14);
}
.note li, .note_second li{
    position: relative;
    padding-left: 15px;
    line-height: 1.3rem;
  }
.note li:before, .note_second li:before {content: "※";}

 /* 注釈 */
.asterisk{
font-size: var(--font14);
line-height: 1.3rem;
}



/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* footer */
footer{margin-bottom: 5rem;}
.l-footer__inner{
    padding: 1rem;
}
.l-footer__logo{
    width: 50vw;
    margin-bottom: 0.5rem;
}
address p{
    font-style: normal;
    font-size:var(--font-s);
    line-height: 1.3rem;
}
address .tel{
    font-size: 1.3rem;
    letter-spacing: 0.15rem;
    margin-top: 0.5rem;
}
.l-footer__wrap{
    border-top: solid 1px var(--gray-el);
    padding: 0.5rem 1rem;
}
.l-footer__wrap ul{
 font-size:var(--font13);
 text-align: center;
 display: flex;
}
.l-footer__wrap ul li{margin-right: 1rem;}
.l-footer__copyright{font-size:9px;}

/* -------------------------------------------------------- */
  /* トップへ戻る */
.l-page-top{
    position: fixed;
    bottom: 2.5rem;
    right: 1rem;
    z-index: 9999;
}
.l-page-top a{
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    background-color:var(--gray);
    border-radius: 30px;
    text-decoration: none;
    text-align: center;
  }
  /* アイコンのスタイル */
  .l-page-top a::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 27px;
    width: 9px;
    height: 9px;
    margin: auto;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(2px) rotate(315deg);
    box-sizing: border-box;
  }
/* -------------------------------------------------------- */