@charset "UTF-8";

/* ------------------------------
header SP
 ------------------------------ */
header{
  padding: 0 0 12rem;
  position: relative;
  background:#f8f8f8;
}
.sp-header-top h1{
  width: 100%;
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
}
.sp-header-top h1 a{
  display: block;
  width: 15rem;
  margin: 0 auto;
  padding: 5rem 0 0;
}

/*------------- .gnavBtn -------------*/
/* ---リサイズ時にメニューが見える挙動を制御 --- */
.resize-animation-stopper * {
  transition: none !important;
}

/* ハンバーガーボタン SP
  -------------------------- */
button.gnavBtn {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0 1.4rem;
  border-radius: 50%;  
  background-color:var(--gn);
  border: none;
  cursor: pointer;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  outline: none;
  transition: 0.5s;
}

/*   ハンバーガーボタン3本線   */
button span.bar {
  display: block;
  width: 2rem;
  height: 0.2rem;
  padding: 0;
  background-color:#fff;
  margin: 0.5rem 0;
  transition: 0.3s;
  transform-origin: 0 0.1rem;
}

/*  メニューアクティブ時  */
button.active.gnavBtn{
  padding: 0 0 0 1.7rem;  
}
button.active span.bar {
} 
button.active .bar1 {
  transform: rotate(45deg);
}
button.active .bar2 {
  opacity: 0;
}
button.active .bar3 {
  transform: rotate(-45deg);
}

button.gnavBtn:hover {
  opacity: 0.6;
}

/*------------- .gnavBtn li -------------*/
header nav.gNav .ham-gNav {
  width: 100%;
  height: 100vh;
  padding: 12rem 0 0;
  background: #fff;
  position: fixed;
  top: 0;
  right: -100vw;
  transition: 0.5s;
  z-index: 999;
}
header nav.gNav.active .ham-gNav {
  right: 0;
}

.nav-logo{
  width: 15rem;
  margin: 0 auto;
  padding: 5rem 0 0;
}
.nav-logo a{
  display: block;
}

header nav.gNav .ham-gNav ul {
  padding: 0 2rem 2rem;
}
header nav.gNav .ham-gNav li a {
  display: block;
  padding: 1.5rem;
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  line-height: 1.5;
  border-bottom: 0.1rem #ccc solid;
  transition: 0.5s;
  position: relative;
}
header nav.gNav .ham-gNav li a::after {
  content: url('../img/head-sp-icon.svg');
  display: block;
  width: 1.2rem;
  height: 1.1rem;
  position: absolute;
  top: 30%;
  right: 2rem;
}
header nav.gNav .ham-gNav li a:hover {
  opacity: 0.6;
}
/* トップは矢印無 ---------- */
header nav.gNav .ham-gNav li:first-child a::after {
  content: "";
}

/* スマホ ヘッダー内CTA
-----------------------------------*/
.btn-cta-head{
  display: flex;
}
.btn-cta-head p{
  width: 33.3%;
}
.btn-cta-head p a,
.btn-cta-head p img{
  opacity: 1;
  display: block;
  height: 6rem;
}
.btn-cta-head p img{
  margin: 0 auto;
}
.btn-cta-head p:first-child a{background: var(--or);}
.btn-cta-head p:first-child a img{width: 9rem;}

.btn-cta-head p:nth-child(2) a{background: var(--gn);}
.btn-cta-head p:nth-child(2) a img{width: 10.3rem;}

.btn-cta-head p:last-child a{background: #ddd;}
.btn-cta-head p:last-child a img{width: 9.8rem;}


/* ---------------
footer SP
--------------- */
.f-dl {
  background: var(--dgn);
  padding: 3rem 0;
}
.f-dl .f-inner {
  max-width: 117.2rem;/* 114.2rem幅 */
  padding: 0 1.5rem;
  margin: 0 auto;
}
.f-dl .f-inner p {
  font-size: 2.6rem;
  color: #ff0;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  white-space: nowrap;
  margin-bottom: 4rem;
}
.f-dl .f-inner figure {
  position: relative;
}
.f-dl .f-inner figure a{
  opacity: 1;
}
.f-dl .f-inner figure a img{
  transition-duration: .2s;
}
.f-dl .f-inner figure a:hover img{
   transform: scale(1.1);
}

.f-dl .f-inner figure span {
  width: 18.5%;
  position: absolute;
  top: -50%;
  left: -1rem;
}
.f-estimate {
  background: var(--or);
  padding: 2rem 0 3rem;
}
.f-estimate .f-inner {
  max-width: 117.2rem;
  padding: 0 1.5rem;
  margin: 0 auto;
}
.f-estimate .f-inner figure:first-child {
  margin-bottom: 1.5rem;
}
.f-estimate .f-inner figure a{
  opacity: 1;
}
.f-estimate .f-inner figure:first-child a img{
  transition-duration: .2s;
}
.f-estimate .f-inner figure:first-child a:hover img{
   transform: scale(1.1);
}
.f-estimate .f-inner p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  padding-top: 2rem;
}

/* ロゴ・住所 SP ------- */
.f-box {
  background: #fff;
  padding: 4rem 0 7rem;
}
.f-box .f-info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: auto;
  margin: 0 auto;
}
.f-box .f-info figure {
  width: 15rem;
  padding: 0;
}
.f-box .f-info p {
  text-align: center;
  line-height: 1.5;
  padding: 2rem 0;
}

/* フッター その他メニュー SP ------- */
.f-box .f-nav {
  font-size: 1.4rem;
  padding: 0.5rem 0 2rem;
}
.f-box .f-nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 30rem;
  margin: 0 auto;
}
.f-box .f-nav li {
  margin: 0 0.5em 0.5rem;
  line-height: 2;
}
.f-box .f-nav li:nth-child(3){
  width: 100%;
  text-align: center;
}
.f-box .f-nav li a {
  position: relative;
}
.f-box .f-nav li a::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.1rem;
  background: #d4d4d4;
  position: absolute;
  bottom: 0;
  left: 0;
}


.f-box .copyright {
  font-size: 1.4rem;
  color: #666;
  text-align: center;
}

.f-box .approval-num {
  max-width: 93rem;
  font-size: 1.2rem;
  color: #666;
  text-align: right;
  padding: 0 1.5rem;
  margin: 0 auto;
}

/* --------------------------------
追従ボタン（ページ下） SP
----------------------------------- */
.cta-follow-pc{
  display: none;
}
.cta-follow-sp{
  display: block;
  position: fixed;
  z-index: 99;
  bottom: 0;
  width: 100%;
}
.cta-follow-sp ul{
  display: flex;
  align-items: center;
}
.cta-follow-sp ul li{
  width: 33.3%;
}
.cta-follow-sp ul li a{
  display: block;
  height: 6rem;
  padding: 2.2rem 0 0;
  text-align: center;
}
.cta-follow-sp ul li:last-child a{
  padding: 1.5rem 0 0;
}

.cta-follow-sp ul li a img{
  display: block;
  margin: 0 auto;
}
.cta-follow-sp ul li:first-child a{background: var(--or);}
.cta-follow-sp ul li:first-child a img{width: 9rem;}

.cta-follow-sp ul li:nth-child(2) a{background: var(--gn);}
.cta-follow-sp ul li:nth-child(2) a img{width: 10.3rem;}

.cta-follow-sp ul li:last-child a{background: #ddd;}
.cta-follow-sp ul li:last-child a img{width: 9.8rem;}


/*----------------------------------------------------
タブレット用 750- 
----------------------------------------------------*/
@media screen and (min-width:750px) {

  .sp-header-top h1 a{
    margin: 0 0 0 1.5rem;
  }

  /* ハンバーガーボタン SP
  -------------------------- */
  button.gnavBtn {
    display: block;
    width: 8rem;
    height: 8rem;
    padding: 0 3rem;
  }

  /*   ハンバーガーボタン3本線 TB -------  */
  button span.bar {
    display: block;
    width: 2rem;
    height: 0.2rem;
    padding: 0;
    background-color:#fff;
    margin: 0.5rem 0;
    transition: 0.3s;
    transform-origin: 0 0.1rem;
  }
  /*  メニューアクティブ時 TB ---------  */
  button.active.gnavBtn{
    padding: 0 0 0 3.3rem;  
  }

  /*  スマホメニュー TB  
  ----------------------------------------*/
  header nav.gNav .ham-gNav li a {
    padding: 1.8rem;
    font-size: 1.6rem;
  }

  /* -------------------------
  footer 750
  ---------------------------- */
  .f-dl {
    padding: 3rem 0 3.5rem;
  }
  .f-dl .f-inner {
    display: flex;
    justify-content: space-between;
  }
  .f-estimate .f-inner figure:first-child {
    margin-bottom: 0;
  }
  .f-dl .f-inner p {
    font-size: 2.4rem;
    text-align: left;
    margin: 0 5rem 0 0;
  }
  .f-dl .f-inner figure {
    max-width: 57.7rem;
    width: 100%;
  }
  .f-estimate {
    padding: 2rem 0;
  }
  .f-estimate .f-inner {
    display: flex;
    justify-content: space-between;
    gap: 4%;
    flex-wrap: wrap;
  }
  .f-estimate .f-inner figure {
    width: 48%;
  }
  .f-estimate .f-inner p {
    line-height: 1;
    padding-top: 1.2rem;
  }

  /* ロゴ・住所 750 ------- */
  .f-box {
    padding: 8rem 0;
  }
  .f-box .f-info {
    flex-direction: row;
  }
  .f-box .f-info figure {
    width: 20rem;
    padding: 1rem 1rem 0 0;
  }
  .f-box .f-info p.address {
    padding: 0 0 0 1rem;
    text-align: left;
  }
  .f-box .f-info p.contact a {
    width: 22rem;
  }

  /* フッター その他メニュー 750 ------- */
  .f-box .f-nav {
    font-size: 1.6rem;
    padding: 3rem 0 1.5rem;
  }
  .f-box .f-nav ul {
    width: 60rem;
    margin: 0 auto;
  }
  .f-box .f-nav li {
    margin: 0 0.5em 1rem;
  }
  .f-box .f-nav li:nth-child(3){
    width: auto;
    text-align: left;
  }

  /* フッター その他メニュー（コンタクトボタン） 750 ------- */
  .f-box .f-nav li.contact a {
    width: 13rem;
  }












/*  .f-box .f-nav ul {
    width: auto;
  }
  .f-box .f-nav li {
    margin: 0 1.2rem;
    line-height: 1;
  }*/
  

  .f-box .copyright {
    font-size: 1.6rem;
  }

}

/*----------------------------------------------------
Tablet 850 
----------------------------------------------------*/
@media screen and (min-width:850px) {

  /* -------------------------
  footer 850
  ---------------------------- */
  .f-dl .f-inner p {
    font-size: 2.8rem;
  }
}

/*----------------------------------------------------
PC 1000- 
----------------------------------------------------*/
@media screen and (min-width:1000px) {

  /* ------------------------------
   header 1000
  ------------------------------ */
  .sp-header-top h1 {
    width: 50%;
  }
  .sp-header-top h1 a{
    width: 20.8rem;
    margin: 0 0 0 3rem;
    padding: 3rem 0 0 0;
    position: static;
  }
    
  /* ハンバーガーボタン 1000
  -------------------------- */
  button.gnavBtn {
    display: none;
  }

  /* --------------------------------
  追従ボタン（ページ下） 1000
  ----------------------------------- */
  .cta-follow-sp{
    display: none;
  }
  .cta-follow-pc{
    display: block;
    width: 54%;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
  }
  .cta-follow-pc ul{
    display: flex;
    position: relative;
  }
  .cta-follow-pc ul li:first-child a::before{
    content: url('../img/cta/cta-icon.svg');
    display: block;
    width: 8.5rem;
    position: absolute;
    top: 5px;
    left: -50px;
    z-index: 10;
    transition-duration: .2s;
  }
  .cta-follow-pc ul li:first-child a:hover::before{
    transform: rotate(10deg);
  }
  .cta-follow-pc ul li{
    width: 33.3333333%;
  }
  .cta-follow-pc ul li a{
    display: block;
    opacity: 1;
  }
  .cta-follow-pc ul li:first-child a img,
  .cta-follow-pc ul li:nth-child(2) a img{
  transition-duration: .2s;
  } 
  .cta-follow-pc ul li:first-child a:hover img,
  .cta-follow-pc ul li:nth-child(2) a:hover img{
     transform: scale(1.1);
  }

  /* -------------------------
  footer 1000
  ---------------------------- */
  .f-dl .f-inner p {
    font-size: 3.2rem;
  }

  /* ロゴ・住所 1000 ------- */
  .f-box {
    padding: 8rem 0 4rem;
  }
  .f-box .f-info figure {
    width: 30rem;
    padding: 1.8rem 2rem 0 0;
  }
  .f-box .f-info p.address {
    padding: 0 0 0 2rem;
    font-size: 2rem;
  }

  /* フッター その他メニュー 1000 ------- */
  .f-box .f-nav {
    font-size: 1.6rem;
    padding: 6rem 0 3rem;
  }
  .f-box .f-nav ul {
    width: auto;
    margin: 0;
  }
  .f-box .f-nav li {
    margin: 0 1.5rem;
  }


  .f-box .copyright {
    font-size: 2rem;
    line-height: 1.6;
  }


}

/*----------------------------------------------------
PC 1200 
----------------------------------------------------*/
@media screen and (min-width:1200px) {

  /* -------------------------
  footer 1200
  ---------------------------- */
  .f-dl .f-inner p {
    font-size: 3.8rem;
  }

  /* フッター その他メニュー 1200 ------- */
  .f-box .f-nav {
    font-size: 1.8rem;
  }

  /* フッター その他メニュー（コンタクトボタン） 1200 ------- */
  .f-box .f-nav li.contact a {
    width: 16rem;
  }
  .f-box .f-nav li.contact a span {
    padding-left: 4.2rem;
  }


}

/*----------------------------------------------------
PC 1400- 
----------------------------------------------------*/
@media screen and (min-width:1400px) {

  /* --------------------------------
  追従ボタン（ページ下） 1400
  ----------------------------------- */
  .cta-follow-pc{
    width: 50%;
  }

}

/*----------------------------------------------------
PC 1600- 
----------------------------------------------------*/
@media screen and (min-width:1600px) {

  /* --------------------------------
  追従ボタン（ページ下） 1600
  ----------------------------------- */
  .cta-follow-pc{
    width: 40%;
  }

}

/*----------------------------------------------------
PC 1800- 
----------------------------------------------------*/
@media screen and (min-width:1800px) {

  /* --------------------------------
  追従ボタン（ページ下） 1800
  ----------------------------------- */
  .cta-follow-pc ul::before{
    width: 8.5rem;
    top: 5px;
    left: -60px;    
  }

}