@charset "utf-8";

/*
------------------------------------------------------------------------------------------------------------
全体のCSS設定
------------------------------------------------------------------------------------------------------------
*/

body {
  background: #ffffff;
    /*全体の背景色*/
  color: #292929;
  /*全体の文字色*/
  font: 20px/1.6 "Hiragino Kaku GothicProN", "Helvetica Neue";
  /* 全体のフォント設定 */
}

html {
  scroll-behavior: smooth;
}

/*
------------------------------------------------------------------------------------------------------------
リンク（全般）設定のCSS
------------------------------------------------------------------------------------------------------------
*/

a {
  color: #555;
  /*リンクテキストの色*/
  text-decoration: none;
  /* テキストの下線の非表示 */
}

a:hover .btn {
  position: relative;
  /*要素の位置をずらす(相対関係)*/
  top: 3pt;
  /*要素の位置を下に3ptずらす*/
  left: 3pt;
  /* 要素の位置を右に3ptずらす */
}


/*
------------------------------------------------------------------------------------------------------------
コンテナー（HPを囲むブロック）のCSS
------------------------------------------------------------------------------------------------------------
*/

#container {
  width: 750px;
  /*コンテナー幅*/
  background-color: #fff;
    /*背景色設定*/
  border-left: 1px solid #ccc;
    /*左外枠の設定*/
  border-right: 1px solid #ccc;
    /*右外枠の設定*/
  text-align: center;
  margin: 0 auto;
    /*外側の余白設定*/
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  #container {
    width: 750px;
    /*コンテナー幅*/
}
}

/*
------------------------------------------------------------------------------------------------------------
フォーム
------------------------------------------------------------------------------------------------------------
*/

.btn-bg {
  padding: 20px 0 30px 0;
}

.btn {
  background-image:url(../images/btn.png);
  display: block;
  width: 737px;
  height: 222px;
}

.cta-btn:hover {
  position: relative;
  /*要素の位置をずらす(相対関係)*/
  top: 3pt;
  /*要素の位置を下に3ptずらす*/
  left: 3pt;
  /* 要素の位置を右に3ptずらす */
}
  
/*
------------------------------------------------------------------------------------------------------------
フッターの設定
------------------------------------------------------------------------------------------------------------
*/

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

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

footer p {
  margin: 15px 0;
}

.copy {
  color: #fff;
  font-size: 80%;
  text-align: center;
}

.copy a {
  text-decoration: underline;
  color: #ffffd0;
}

@media only screen and (max-width: 768px) {
  .footer {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    height: auto;
    color: #fff;
    background-color: #3d3d3d;
  }

  .footer__inner {
    text-align: left;
  }

  .footer__inner p {
    font-size: 24px;
  }

  .footer__inner a {
    padding: 5px 30px;
    color: #fff;
    padding-left: 30px;
    display: block;
    width: 100%;
  }

  .footer__inner li {
    padding: 0 10px 0 10px;
    font-size: 100%;
    border-bottom: 1px solid #ffffff;
  }

  footer p.copy {
    text-align: center;
    /*ブロック要素を中央配置*/
    font-size: 14px;
    /*文字サイズ*/
  }

  .container {
    display: flex;
    justify-content: space-between;
  }

  footer {
    /*mobile*/
    width: 100%;
    /*横幅設定*/
    font-size: 16px;
    /*文字サイズ*/
    margin-bottom: 0px;
    /*外側下の余白設定*/
  }

  .footer__inner li {
    font-size: 14px;
  }
}


/*
------------------------------------------------------------------------------------------------------------
その他
------------------------------------------------------------------------------------------------------------
*/
.clear {
  clear: both;
}


/*
------------------------------------------------------------------------------------------------------------
フォントの設定
------------------------------------------------------------------------------------------------------------
*/
.red { color: #C00;}

.purple{ color: indigo;}

.bold { font-weight: bold;}




dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

dt,
dd {
  padding: 6px;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
  .pc { display: none !important; }
  .sp { display: block !important; }
}



/* @media only screen and (max-width: 768px) {

  input {
    font-size: 130%;
    background-color: #fefeed;
    border-radius: 5px;
    border: solid 1px #6d6d6d;
    height: 80px;
    width: 548px;
    margin: 10px 0 5px;
 
} */

/*
===================================================================================================================================
スマホ版のCSS
===================================================================================================================================
*/

*/
  footer {
    /*mobile*/
    width: 100%;
    /*横幅設定*/
    font-size: 60%;
    /*文字サイズ*/
    margin-bottom: 0px;
    /*外側下の余白設定*/
  }

  .footer__inner li {
    font-size: 120%;
  }