@charset "utf-8";

/*全体の設定
---------------------------------------------------------------------------*/
body {
  background: #fff;
  color: #6d6d6d;
  font-size: 16px;
  line-height:1.5;
  font-family:"Noto Sans JP","メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
}

h2 {
  font-size: 120%;
}

h1 {
  text-align: center;
  color: #fff;
  font-size: 150%;
  line-height: 1.5;
  padding: 5px;
}

p{
  line-height: 1.8;
}
/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
  h1 {
    text-align: center;
    color: #fff;
    font-size: 42px;
    line-height: 1.2;
    padding: 0.5em;
  }

p {
  line-height: 1.8;
  margin-bottom: 10px;
}
}/* ▲PCメディアクエリ終了▲ */




img {
  max-width: 100%;
  height: auto;
  display: block;
}




.wrapper {
  padding-top: 20px;
  padding-bottom: 20px;
}

.wrapper p {
  font-size: 16px;
  margin-bottom: 30px;
}
/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.wrapper {
  padding-top: 20px;
  padding-bottom: 45px;
}

.wrapper p {
  font-size: 18px;
  margin-bottom: 30px;
}
}/* ▲PCメディアクエリ終了▲ */






/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
  color: #555; /*リンクテキストの色*/
  text-decoration: none;
}

a:hover {
  color: #006ddc; /*マウスオン時の文字色（全体）*/
}

a:hover .btn {
  position: relative;
  top: 3pt;
  left: 3pt;
}

a:hover img{
  opacity:0.8;filter:alpha(opacity=80); /* ホバー時に80%の濃さになる */
}



/*---------- PC・スマホの非表示指定 ----------*/
@media screen and (max-width:768px){.spnone{display:none;}}
@media screen and (min-width:768px){.pcnone{display:none;}}




/*コンテナー（HPを囲むブロック）
---------------------------------------------------------------------------*/
#container {
  width: 100%;
}

/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
#container {
  width: 768px;
  /*コンテナー幅*/
  background-color: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin: 0 auto;
}
}/* ▲PCメディアクエリ終了▲ */








/*メインコンテンツ
---------------------------------------------------------------------------*/

#main {
  clear: both;
  margin: 0;
}


.fv{
  margin:0 0 -0px 0
}


/*CTA設定
---------------------------------------------------------------------------*/
.btn_box-01 {
    position: relative; /* 子要素を絶対配置するために必要 */
    display: block; /* 画像サイズに合わせたい場合 */
    margin:0;
}

.cta-bg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.cta-btn {
  position: absolute;
  left: 50%;
  transform: translate(-50%);/* はみ出し対策（勝手に大きくならないように） */
  bottom: 63px; /* 好きな位置に調整(増やすと上に上がる) */
  width: auto;
  height: auto;
  max-width: 80%;

  margin: 0;
  animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
}

 


  @keyframes pulse {
    0% {
      transform: translateX(-50%) scale(1);
    }
    50% {
      transform: translateX(-50%) scale(1.07);
    }
    100% {
      transform: translateX(-50%) scale(1);
    }
  }

/* ▼TLメディアクエリ */
@media screen and (min-width:768px){
.btn_box-01 {
    position: relative; /* 子要素を絶対配置するために必要 */
    display: block; /* 画像サイズに合わせたい場合 */
    margin:0;
}

.cta-bg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.cta-btn {
  position: absolute;
  left: 50%;
  transform: translate(-50%);/* はみ出し対策（勝手に大きくならないように） */
  bottom: 135px; /* 好きな位置に調整(増やすと上に上がる) */
  width: auto;
  height: auto;
  max-width: 80%;

  margin: 0;
  animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
  
}

}

/* ▼PCメディアクエリ */
@media screen and (min-width:1024px){
.btn_box-01 {
    position: relative; /* 子要素を絶対配置するために必要 */
    display: block; /* 画像サイズに合わせたい場合 */
    margin:0;
}

.cta-bg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.cta-btn {
  position: absolute;
  left: 50%;
  transform: translate(-50%);/* はみ出し対策（勝手に大きくならないように） */
  bottom: 135px;/* 好きな位置に調整(増やすと上に上がる) */
  width: auto;
  height: auto;
  max-width: 80%;

  margin: 0;
  animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
  
}
}












/*フローティングCTA設定
---------------------------------------------------------------------------*/

/* フローティングCTA全体 */
.floating {
  position: fixed;       /* スクロールしても常に画面下 */
  bottom: 0;
  left: 0;
  width: 100%;           /* PC画面いっぱい */
  height: 15vh;       /* 親に高さを指定 */
 
  z-index: 9999;          /* 最前面 */
  pointer-events: auto;   /* 背景クリックできなくてもOKなら消す */

}

/* 半透明背景 */
.floating-cta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  
  background-color: rgba(0, 0, 0, 0.3); /* 半透明グレー */
  z-index: 1;               /* ボタンより下 */
  height: 100%;           /* 親の高さに追従 */
 
   

}

/* ボタン */
.floating-cta-btn {
  position:  absolute;      /* 背景の上に重ねる */
  left: 50%;                /* 親の横中央 */
  bottom: 3px;             /* 下からの位置 */
  transform: translateX(-50%); /* 横方向の中央寄せ */
  pointer-events: auto;    /* クリックできるように */
  animation: pulse 2s infinite; /* パルスアニメーション */
  z-index: 2;               /* 背景より前 */
}

.floating-cta-btn img {
    display: block;      /* 親幅に従う */
    width: 90vw;         /* ビューポート幅の90%に設定 */
    height: auto;        /* 縦横比を維持 */
    max-height: none;    /* 高さ制限を外す */
    
  
}

/* ▼TLメディアクエリ */
@media screen and (min-width:768px){
.floating {
  position: fixed;       /* スクロールしても常に画面下 */
  bottom: 0;
  left: 0;
  width: 100%;           /* PC画面いっぱい */
  height: 16vh;       /* 親に高さを指定 */

  z-index: 9999;          /* 最前面 */
  pointer-events: auto;   /* 背景クリックできなくてもOKなら消す */

}

/* 半透明背景 */
.floating-cta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  
  background-color: rgba(0, 0, 0, 0.3); /* 半透明グレー */
  z-index: 1;               /* ボタンより下 */
  height: 100%;           /* 親の高さに追従 */
 
   

}

/* ボタン */
.floating-cta-btn {
  position:  absolute;      /* 背景の上に重ねる */
  left: 50%;                /* 親の横中央 */
  bottom: 3px;             /* 下からの位置 */
  transform: translateX(-50%); /* 横方向の中央寄せ */
  pointer-events: auto;    /* クリックできるように */
  animation: pulse 2s infinite; /* パルスアニメーション */
  z-index: 2;               /* 背景より前 */
}

.floating-cta-btn img {
    display: block;      /* 親幅に従う */
    width: 60vw;         /* ビューポート幅の90%に設定 */
    height: auto;        /* 縦横比を維持 */
    max-height: none;    /* 高さ制限を外す */
    
  
}
}

/* ▼PCメディアクエリ */
@media screen and (min-width:1024px){
/* フローティングCTA全体 */
.floating {
  position: fixed;       /* スクロールしても常に画面下 */
  bottom: 0;
  left: 0;
  width: 100%;           /* PC画面いっぱい */
  z-index: 9999;          /* 最前面 */
  height: 210px;           /* 背景高さと揃える */
  pointer-events: auto;   /* 背景クリックできなくてもOKなら消す */
}

/* 半透明背景 */
.floating-cta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;           /* 親の高さに合わせる */
  background-color: rgba(0, 0, 0, 0.3); /* 半透明グレー */
  z-index: 1;               /* ボタンより下 */
}

/* ボタン */
.floating-cta-btn {
  position:  absolute;      /* 背景の上に重ねる */
  left: 50%;                /* 親の横中央 */
  bottom: 3px;             /* 下からの位置 */
  transform: translateX(-50%); /* 横方向の中央寄せ */
  pointer-events: auto;    /* クリックできるように */
  animation: pulse 2s infinite; /* パルスアニメーション */
  z-index: 2;               /* 背景より前 */
}

.floating-cta-btn img {
  display: block;
  width: auto;
  height: auto;
  max-height: 90%;       /* 背景高さに合わせる */
}
}
/* ▲PCメディアクエリ終了▲ */






/*フッター設定
---------------------------------------------------------------------------*/
#footer {
  width: 100%;
  min-width: 100%;
  font-size:75%;
  margin:2px auto 0;
  padding:20px 20px 20px 20px;
  background-color:#5b4c3e;
  color: #fff;
  text-align: center;
}

#footer a {
  color: #fff;
  margin: 10px 0;
}

#footer p {
  margin: 10px 0;
}

/* ▼TLメディアクエリ */
@media screen and (min-width:768px){
  #footer {
    width: 100%;
    margin: 2px auto 0;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 5%;
    color: #fff;
    position: relative;
    background-color: #5b4c3e;
    font-size: 100%;
  }
  
  #footer a {
    color: #fff;
    margin: 10px 0;
  }
  
  #footer p {
    margin: 10px 0;
  }
}
/* ▼PCメディアクエリ */
@media screen and (min-width:1024px){

#footer {
  width: 100%;
  margin: 2px auto 0;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 40px;
  color: #fff;
  position: relative;
  background-color: #5b4c3e;
  font-size: 100%;
}

#footer a {
  color: #fff;
  margin: 10px 0;
}

#footer p {
  margin: 10px 0;
}
}/* ▲PCメディアクエリ終了▲ */





/*---------- 特商法・プライバシーポリシー----------*/
table.info{
  width:100%;
  border-collapse:separate;
  margin:20px 0;
  font-family:  'Noto Sans JP';
  }
  table.info th{
  padding:10px 0;
  font-size:90%;
  line-height:150%;
  text-align:left; /* thのデフォルトはセンター揃えのため */
  border-bottom:solid 1px #666;
  display:block;
  font-family:  'Noto Sans JP';
  }
  table.info td{
  padding:10px 0 20px 0;
  font-size:90%;
  line-height:150%;
  display:block;
  font-family:  'Noto Sans JP';
  }

 /* ▼PCメディアクエリ */
 @media screen and (min-width:769px){

  table.info{
  width:100%;
  border-collapse:separate;
  margin:20px 0;
  font-family:  'Noto Sans JP';
  }
  table.info th{
  width:180px;
  padding:10px 0;
  font-size:14px;
  line-height:150%;
  text-align:left; /* thのデフォルトはセンター揃えのため */
  letter-spacing:1px;
  border-bottom:solid 1px #666;
  display:table-cell;
  font-family:  'Noto Sans JP';
  }
  table.info td{
  padding:10px;
  font-size:14px;
  line-height:150%;
  letter-spacing:1px;
  border-bottom:dotted 1px #ccc;
  display:table-cell;
  font-family:  'Noto Sans JP';
  }
}/* ▲PCメディアクエリ終了▲ */





/*------------------------------ ページ一番上へ ------------------------------*/

#pagetop {
  position:fixed;
  bottom:5%; /* 下からの位置／今回はフローティングがあるため高めに設定。通常は20～30 */
  right:20px;
  }
  #pagetop i {
  padding-top:6px
  }
  #pagetop a {
  display:block;
  z-index:9999;
  padding:3px 4px 3px 4px;/* 内側の余白 */
  border-radius:50%;     /* 角丸度（丸さ） */
  width:45px;             /* 横幅 */
  height:45px;            /* 高さ */
  background-color:#ccc;
  color:#fff;
  text-decoration:none;
  text-align:center;
  font-size:20px;
  }
  #pagetop a:hover {
  text-decoration:none;
  opacity:0.7;
  }
  

 /* ▼TLメディアクエリ */
 @media screen and (min-width:768px){
  #pagetop {
    position:fixed;
    bottom:5%; /* 下からの位置／今回はフローティングがあるため高めに設定。通常は20～30 */
    right:20px;
    }
    #pagetop i {
    padding-top:6px
    }
    #pagetop a {
    display:block;
    z-index:9999;
    padding:10px 4px 3px 4px;/* 内側の余白 */
    border-radius:50%;       /* 角丸度（丸さ） */
    width:60px;              /* 横幅 */
    height:60px;             /* 高さ */
    background-color:#ccc;
    color:#fff;
    text-decoration:none;
    text-align:center;
    font-size:20px;
    }
    #pagetop a:hover {
    text-decoration:none;
    opacity:0.7;
    }
  }


  /* ▼PCメディアクエリ */
  @media screen and (min-width:1024px){
  #pagetop {
  position:fixed;
  bottom:20px; /* 下からの位置／今回はフローティングがあるため高めに設定。通常は20～30 */
  right:20px;
  }
  #pagetop i {
  padding-top:6px
  }
  #pagetop a {
  display:block;
  z-index:9999;
  padding:7px 4px 8px 4px;/* 内側の余白 */
  border-radius:50%;   /* 角丸度（丸さ） */
  width:60px;             /* 横幅 */
  height:60px;            /* 高さ */
  background-color:#ccc;
  color:#fff;
  text-decoration:none;
  text-align:center;
  font-size:23px;
  }
  #pagetop a:hover {
  text-decoration:none;
  opacity:0.7;
  }
  } /* ▲PCメディアクエリ終了▲ */