@charset "utf-8";

body {
  margin: 0 auto;
  width: 100%;
  max-width: 650px;
  background-color: white;
  box-shadow: 0px 5px 22px 0px rgb(0 0 0 / 25%);
  
}

/* ヘッダー分だけ下げる */
body {
  padding-top: 90px;
}

/* SP */
@media screen and (max-width: 767px) {

  body {
    padding-top: 70px;
  }

}



img{
    width: 100%;
    margin: 0 auto;
    margin-top: -6px;
}

head{
    display: none;    
}

style{
    display: none;
}

/* 初期状態：両方非表示 */
.sp {
  display: none;
}

.pc {
  display: none;
}

/* SPだけ表示 */
@media (max-width: 768px) {
  .sp {
    display: block;
  }
}

/* PCだけ表示 */
@media (min-width: 769px) {
  .pc {
    display: block;
  }
}

/* ヘッダー */
/* ヘッダー */
header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: 100%;
  max-width: 651px;
  padding: 20px 20px;
  box-sizing: border-box;
  background: #fff;
}

/* 横並び */
.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ロゴ */
.header_logo {
  width: 70px;
  flex-shrink: 0;
}

.header_logo img {
  width: 100%;
  display: block;
}

/* CTA横並び */
.header_cta_wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 375px ;
  flex: 1;
  justify-content: flex-end;
}



/* 画像 */
.header_cta01 img,
.header_cta02 img {
  width: 100%;
  display: block;
}

/* ロゴ */
.header_logo {
  width: 58px;
}



/* =========================
   SP
========================= */

@media screen and (max-width: 767px) {

  header {
    padding: 15px 10px;
  }

  .header_inner {
    gap: 8px;
  }

  .header_logo {
    width: 50px;
  }

  .header_cta_wrap {
    max-width: 260px;
    gap: 6px;
  }

  

}
  
  
.fv{
  margin-top: -20px;
}
  

  /* 悩み */
  .problem{
    margin-top: -30px;
  }

  /* メリット */
  .merit{
    margin-top: -17px;
  }

  /* 商品 */
.item_title{
  margin-top: -21px;
}

.item{
  margin-top: -37px;
  padding: 26px 0 76px 0;
  background: url(../img/item_bg.jpg) no-repeat top center;
  background-size: cover;
}



/* 各商品 */
.item-box{
  position: relative;
  width: 95%;
  max-width: 1100px;
  margin: 0 auto 17px;
  overflow: hidden;
}

/* ボタン */
.item-btn{
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: block;
  height: 61px;
  overflow: hidden;
  transition: height 0.4s ease;
}

/* 開いた時 */
.item-box.active .item-btn{
  height: auto;
}

/* 画像 */
.item-btn img{
  width: 100%;
  display: block;
}

/* ▼ */
.item-box::after{
  content: "▼";
  position: absolute;
  top: 20px;
  right: 48px;
  color: #fff;
  font-size: 18px;
  z-index: 2;
}

/* ▲ */
.item-box.active::after{
  content: "▲";
}

.item01 .item-btn {
  height: 84px;
}

.item01::after{
  top: 40px;
}

/* テキスト全体 */
.item_texts{
  margin-top: 78px;
}

/* テキスト */
.item_txt01,
.item_txt02{
  width: 92%;
  margin: 0 auto;
}

.item_txt01{
  margin-bottom: 20px;
}

/* 画像 */
.item_txt01 img,
.item_txt02 img{
  width: 100%;
  display: block;
}

/* SP */
@media screen and (max-width: 767px){

  .item_list{
    width: 98%;
  }

  .item-btn{
    height: 32px;
  }

  .item01 .item-btn {
    height: 43px;
  }

  .item-box::after{
    top: 10px;
    right: 26px;
    font-size: 10px;
  }

  .item_txt01,.item_txt02{
    left: 14px;
  }

  .item-box{
    margin: 0 auto 14px;
  }

  .item01::after{
    top: 19px;
  }

  .item_texts{
    margin-top: 45px;
  }
  

}

  /* 強み */
  .strengths{
    margin-top: -27px;
    position: relative;
  }

  .strengths01,.strengths02,.strengths03,.strengths04,.strengths05{
    position: absolute;
    left: 0px;
    width: 100%;
  }

  .strengths01{
    top: 10%;
    left: 14px;
    width: 98%;
  }

  .strengths02{
    top: 30%;
  }

  .strengths03{
    top: 48%;
    left: 14px;
    width: 98%;
  }

  .strengths04{
    top: 65%;
  }

  .strengths05{
    top: 81%;
    left: 14px;
    width: 98%;
  }

  /* SP */
@media screen and (max-width: 767px) {
  .strengths01,.strengths03,.strengths05{
    left: 8px;
}
}

  /* お客様の声 */
  .voice{
    margin-top: -27px;
    position: relative;
  }

  .voice01,.voice02,.voice03{
    position: absolute;
    transform: translateX(3%);
    width: 96%;
   }
  .voice01 {
    top: 14%;
  }

  .voice02 {
    top: 42%;
  }

  .voice03 {
    top: 69%;
  }

  /* =========================
   よくある質問
========================= */
.question_title {
  margin-top: -29px;
}


.question {
  padding: 0px 0 76px 0;
  background: url(../img/Q&A_bg.jpg) no-repeat top center;
  background-size: cover;
}

.question_title img {
  width: 100%;
  display: block;
}

/* 各質問 */
.qa-item {
  width: 95%;
  max-width: 1100px;
  margin: 0 auto 36px;
  overflow: hidden;
  background: #173d8f;
}

/* ボタン */
.qa-btn {
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: block;

  /* 閉じている時はネイビー部分だけ見せる */
  height: 66px;

  overflow: hidden;
  transition: height 0.4s ease;
}

.qa08 .qa-btn{
  height: 136px;
}

.qa09 .qa-btn{
  height: 106px;
}

/* 開いた時 */
.qa-item.active .qa-btn {
  height: auto;
}

.qa-btn img {
  width: 100%;
  display: block;
}

/* 各質問 */
.qa-item {
  position: relative;
}

/* ▼アイコン */
.qa-item::after {
  content: "▼";

  position: absolute;
  top: 23px;
  right: 18px;

  color: #fff;
  font-size: 20px;
  line-height: 1;

  z-index: 2;

  transition: 0.3s;
}

/* 開いてる時 */
.qa-item.active::after {
  content: "▲";
}

/* Q8だけ */
.qa08::after {
  top: 53px;
  right: 18px;
}

/* Q9だけ */
.qa09::after {
  top: 43px;
  right: 18px;
}

/* SP */
@media screen and (max-width: 767px) {

  .question {
    padding: 0px 0px 50px;
  }

  .qa-item {
    width: 92%;
    margin-bottom: 16px;
    
  }

  .qa-btn img {
    margin-top: 0px;
  }

  /* SPは見出し高さ調整 */
  .qa-btn {
    height: 42px;
  }

  .qa08 .qa-btn{
    height: 80px;
  }
  
  .qa09 .qa-btn{
    height: 63px;
  }

  @media screen and (max-width: 767px) {

    .qa-item::after {
      top: 15px;
      right: 9px;
  
      font-size: 10px;
    }

    @media screen and (max-width: 767px) {

      .qa08::after {
        top: 33px;
        right: 9px;
      }
    
      .qa09::after {
        top: 25px;
        right: 9px;
      }
    
    }
  
  }

}

.cta{
  margin-top: -27px;
  position: relative;
}

.cta_houjin,.cta_kojin{
  position: absolute;
  left: 50%;
  transform: translateX(-49%);
  width: 84%;
 }

 .cta_houjin{
  top: 46%;
 }

 .cta_kojin{
  top: 66%;
 }

 /* =========================
   footer
========================= */

.footer {
  margin-top: -30px;
  background: #000;
  padding: 28px 0 28px;
  color: #fff;
  font-family: serif;
}

.footer_inner {
  width: 90%;
  max-width: 789px;
  margin: 0 auto;
}

/* タイトル */
.footer_title {
  font-size: 20px;
  font-weight: normal;
  line-height: 1;
  margin-bottom: 28px;
}

/* 情報全体 */
.footer_info {
  margin-bottom: 38px;
}

/* 1行 */
.footer_row {
  display: flex;
  align-items: flex-start;

  margin-bottom: -5px;
}

/* 左 */
.footer_row dt {
  width: 110px;

  font-size: 15px;
  line-height: 1.5;

  flex-shrink: 0;
}

/* 右 */
.footer_row dd {
  position: relative;

  padding-left: 42px;

  font-size: 15px;
  line-height: 1.45;
}

/* 情報全体 */
.footer_info {
  position: relative;

  margin-bottom: 38px;
  padding-left: 0;
}

/* 縦線1本 */
.footer_info::before {
  content: "";

  position: absolute;
  top: 6px;
  bottom: 6px;

  left: 100px;

  width: 1px;
  background: #fff;
}


/* 下部 */
.footer_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ポリシー */
.footer_policy {
  color: #fff;
  text-decoration: none;

  font-size: 15px;
  line-height: 1;
}

/* コピー */
.footer_copy {
  font-size: 15px;
  line-height: 1;
}

/* =========================
   SP
========================= */

@media screen and (max-width: 767px) {

  .footer {
    padding: 20px 0 20px;
    
  }

  .footer_inner {
    width: 88%;
  }

  .footer_title {
    font-size: 18px;
    margin-bottom: 22px;
  }

  .footer_info {
    margin-bottom: 28px;
  }

  .footer_row {
    margin-bottom: -10px;
  }

  .footer_row dt {
    width: 74px;
    font-size: 10px;
  }

  .footer_row dd {
    padding-left: 18px;
    font-size: 10px;
    line-height: 1.7;
  }

  .footer_bottom {
    flex-direction: column;
    align-items: flex-start;
    
  }

  .footer_policy,
  .footer_copy {
    font-size: 10px;
    
  }

  .footer_info::before {
    content: "";
  
    position: absolute;
    top: 6px;
    bottom: 6px;
  
    left: 83px;
  
    width: 1px;
    background: #fff;
  }

}

/* 会社名＋ロゴ */
.footer_company {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer_logo {
  width: 28px;
  height: auto;
  flex-shrink: 0;
}

/* SP */
@media screen and (max-width: 767px) {

  .footer_company {
    gap: 6px;
  }

  .footer_logo {
    width: 18px;
  }

}