@charset "utf-8";

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

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


/*
------------------------------------------------------------------------------------------------------------
リンク（全般）設定の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;
    /*コンテナー幅*/
  }
}

/*
------------------------------------------------------------------------------------------------------------
【新】申し込み期限カウントダウン
------------------------------------------------------------------------------------------------------------
*/

.yellow {
  background-color: #FFFF99;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kigen {
  color: #D70200;
  font-size: 46px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 1px;
}

/*
------------------------------------------------------------------------------------------------------------
【旧】フォーム
------------------------------------------------------------------------------------------------------------
*/

/* CTA文章 */
.cta-text {
  color: #3d3d3d;
  font-size: 22px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 10px;
}

/* CTAプライバシーポリシー文章 */
.cta-policy {
  color: #888888;
  font-size: 16px;
  text-align: justify;
  padding: 30px 25px 30px 25px;
}

.cta-policy a {
  color: #05499C;
  font-size: 16px;
  text-decoration: underline;
}

/*
------------------------------------------------------------------------------------------------------------
フッターの設定
------------------------------------------------------------------------------------------------------------
*/

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


/*
===================================================================================================================================
支給コードのフォームの幅を変更するためのCSS（20250722）
===================================================================================================================================
*/

/* ▼ モバイル専用スタイル（最大幅768px以下で適用） */
@media screen and (max-width: 768px) {

  /* フォームタイトル */
  .ewp_widget_container h3,
  .ewp_widget_container h2,
  .ewp_widget_container h1,
  .ewp_widget_container .ewp_headline {
    display: none;
  }

  /* 入力エリアの調整 */
  .ewp_widget_container input[type="text"],
  .ewp_widget_container input[type="email"],
  .ewp_widget_container input[type="tel"],
  .ewp_widget_container select,
  .ewp_widget_container textarea {
    width: 100% !important;
    /* 横幅 */
    height: 80px !important;
    /* 高さ */
    font-size: 16px !important;
    padding: 50px !important;
    margin: 10px auto !important;
    display: block;
    border-radius: 6px !important;
    text-align: left !important;
  }

  /* ラベル間の間隔（上下余白） */
  .ewp_widget_container label {
    font-size: 26px !important;
    margin-bottom: 6px !important;
    display: block;
    color: #333 !important;
    padding-left: 5%;
  }

  /* ボタンのスタイル */
  .ewp_widget_container button,
  .ewp_widget_container input[type="submit"] {
    font-size: 30px !important;
    font-weight: 500;
    width: 100% !important;
    height: 60px !important;
    margin: 20px auto !important;
    background-color: #f37021 !important;
    /* オレンジ色など変更可 */
    color: #fff !important;
    border-radius: 8px !important;
    display: block;
  }

  /* セレクトボックスの高さも合わせる */
  .ewp_widget_container select {
    height: 48px !important;
  }

  .ewp_widget_container input[type="tel"] {
    margin: 10px auto 30px auto !important;
  }

  .ewp_widget_container input[type="text"],
  .ewp_widget_container input[type="email"],
  .ewp_widget_container input[type="tel"],
  .ewp_widget_container select,
  .ewp_widget_container textarea {
    font-size: 24px !important;
  }
  
    /* 日時選択欄のフォントサイズを26pxに */
    .ewp_widget_container select.recurr-date,
    .ewp_widget_container select.ew_webinar_dates,
    .ewp_widget_container select.ewp_select {
      font-size: 24px !important;
      height: auto !important;       /* 文字がはみ出す場合に自動調整 */
      padding: 30px 20px 30px 60px !important; /* 高さを確保しつつ余白も調整 */
    }
  
}