@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メディアクエリ終了▲ */









.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;
}

/*---------- 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
}


/*ボタン設定
---------------------------------------------------------------------------*/
.btn_box-01 {
  width: 100%; /* 親要素の幅にフィット */
     position: relative; /* 子要素を絶対配置するために必要 */
     padding-top: 36.46%; /* 16:9のアスペクト比を保持 */
     background-image: url('img/CTA-1-04.png'); /* 背景画像を指定 */
     background-size: contain; /* 背景画像を全体にフィット */
     background-position: center; /* 背景画像を中央に配置 */
     background-repeat: no-repeat; /* 繰り返しを防ぐ */
     margin:-00px 0 -00px 0;
 }
 
 .btn_box-01 a {
     position: absolute; /* 背景画像の上に重ねるために絶対配置 */
     top: 50%; /* 上下中央に配置 */
     left: 50%; /* 左右中央に配置 */
     transform: translate(-83%, -33%); /* 中央揃え調整 */
 }
 
 .btn_box-01 a img {
     width: 170%; /* ボタン画像のサイズを調整 */
     height: auto; /* 縦横比を維持 */
     margin: 0px 0px 0 0;
     animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
 }
 
 .btn_box-02 {
   width: 100%; /* 親要素の幅にフィット */
      position: relative; /* 子要素を絶対配置するために必要 */
      padding-top: 90.36%; /* アスペクト比を保持 (アスペクト比＝縦÷横)*/
      background-image: url('img/CTA-2-12.webp'); /* 背景画像を指定 */
      background-size: contain; /* 背景画像を全体にフィット */
      background-position: center; /* 背景画像を中央に配置 */
      background-repeat: no-repeat; /* 繰り返しを防ぐ */
      margin:30px 0 0px 0;
  }
  
  .btn_box-02 a {
      position: absolute; /* 背景画像の上に重ねるために絶対配置 */
      top: 50%; /* 上下中央に配置 */
      left: 50%; /* 左右中央に配置 */
      transform: translate(-83%, 30%); /* 中央揃え調整 */
  }
  
  .btn_box-02 a img {
      width: 170%; /* ボタン画像のサイズを調整 */
      height: auto; /* 縦横比を維持 */
      margin: 0px 0 0 0;
      animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
  }
  



  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.07);
    }
    100% {
      transform: scale(1);
    }
  }
/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.btn_box-01 {
 width: 100%; /* 親要素の幅にフィット */
    position: relative; /* 子要素を絶対配置するために必要 */
    padding-top: 36.46%; /* 16:9のアスペクト比を保持 */
    background-image: url('img/CTA-1-04.png'); /* 背景画像を指定 */
    background-size: contain; /* 背景画像を全体にフィット */
    background-position: center; /* 背景画像を中央に配置 */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    margin:-00px 0 -00px 0;
}

.btn_box-01 a {
    position: absolute; /* 背景画像の上に重ねるために絶対配置 */
    top: 50%; /* 上下中央に配置 */
    left: 50%; /* 左右中央に配置 */
    transform: translate(-50%, -50%); /* 中央揃え調整 */
}

.btn_box-01 a img {
    width: 620px; /* ボタン画像のサイズを調整 */
    height: auto; /* 縦横比を維持 */
    margin: 60px 0 0 0;
    animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
}




.btn_box-02 {
  width: 100%; /* 親要素の幅にフィット */
     position: relative; /* 子要素を絶対配置するために必要 */
     padding-top: 90.36%; /* アスペクト比を保持 (アスペクト比＝縦÷横)*/
     background-image: url('img/CTA-2-12.webp'); /* 背景画像を指定 */
     background-size: contain; /* 背景画像を全体にフィット */
     background-position: center; /* 背景画像を中央に配置 */
     background-repeat: no-repeat; /* 繰り返しを防ぐ */
     margin:40px 0 0px 0;
 }
 
 .btn_box-02 a {
     position: absolute; /* 背景画像の上に重ねるために絶対配置 */
     top: 50%; /* 上下中央に配置 */
     left: 50%; /* 左右中央に配置 */
     transform: translate(-50%, -50%); /* 中央揃え調整 */
 }
 
 .btn_box-02 a img {
     width: 620px; /* ボタン画像のサイズを調整 */
     height: auto; /* 縦横比を維持 */
     margin: 300px 0 0 0;
     animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
 }
 






}/* ▲PCメディアクエリ終了▲ */





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

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

#footer p {
  margin: 10px 0;
}

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

#footer {
  width: 100%;
  margin: 20px auto 0;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  color: #fff;
  position: relative;
  background-color: #3d3d3d;
  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:7%; /* 下からの位置／今回はフローティングがあるため高めに設定。通常は20～30 */
  right:20px;
  }
  #pagetop i {
  padding-top:6px
  }
  #pagetop a {
  display:block;
  z-index:9999;
  padding:5px 4px 3px 4px;
  border-radius:30px;
  width:35px;
  height:35px;
  background-color:#ccc;
  color:#fff;
  text-decoration:none;
  text-align:center;
  }
  #pagetop a:hover {
  text-decoration:none;
  opacity:0.7;
  }
  
  /* ▼PCメディアクエリ */
  @media screen and (min-width:769px){
  #pagetop {
  position:fixed;
  bottom:30px; /* 下からの位置／今回はフローティングがあるため高めに設定。通常は20～30 */
  right:20px;
  }
  #pagetop i {
  padding-top:6px
  }
  #pagetop a {
  display:block;
  z-index:9999;
  padding:3px 4px 3px 4px;
  border-radius:30px;
  width:35px;
  height:35px;
  background-color:#ccc;
  color:#fff;
  text-decoration:none;
  text-align:center;
  }
  #pagetop a:hover {
  text-decoration:none;
  opacity:0.7;
  }
  } /* ▲PCメディアクエリ終了▲ */