/*
------------------------------------------------------------------------------------------------------------
全体の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;
}

/*
------------------------------------------------------------------------------------------------------------
Day01〜Day05の日程と受講内容の詳細
------------------------------------------------------------------------------------------------------------
*/

/* 最背景全面 薄緑色 */
.midori {
  background-color: #eaf2ed;
}

/* 内容はこちらの下矢印（三角形） */
.day-triangle {
  margin: 0 auto;
  padding-bottom: 35px;
}

/* Day1〜Day5の吹き出しCSS */
.fukidashi {
  margin-top: -35px;
  margin-left: -510px;
}

/* 開催日時記載の背景 */
.hiduke {
  margin: 10px auto 0 auto;
}

.hiduke-bg {
  background-color: #5d5d5d;
  width: 635px;
  height: 92px;
  margin: 0 auto;
  border-radius: 15px 15px 0 0;
}

/* 開催日時（白文字）の設定 */
.white-day {
  color: #fff;
  text-align: center;
  margin-top: -40px;
  font-weight: 500;
}

/* Span白文字（日付）のCSS */
.hiduke {
  font-size: 36px;
}

/* Span白文字（曜日と時間）のCSS */
.jikan {
  font-size: 30px;
}

/* 開催詳細内容（画像）のCSS */
.day-content {
  margin-top: -10px;
  margin-bottom: 30px;
}

/*
------------------------------------------------------------------------------------------------------------
フォーム/CTA①
------------------------------------------------------------------------------------------------------------
*/
/* 開始日時セクション */
.countdown01 {
  background-color: #f48300;
  height: 84px;
}
/* 開始日時の文字設定 */
.countdown01 p {
  padding-top: 30px;
  line-height: 20px;
  font-size: 30px;
}

.countdown01-2 {
  background-color: #f2ece9;
  height: 140px;
}

/* チャレンジ開始まであと */
.countdown-01-2 {
 color: #292929;
 font-size: 24px;
 padding-top: 26px;
}

/* カウントダウンの数字のスタイル */
.form01
.timer {
  position: relative;
  top: -36px;
  color: #f3331f;
  font-family: 'ヒラギノ角ゴ ProN W7', sans-serif;
  font-size: 32pt;
  font-weight: bolder;
}

/* フォームの最背景画像 */
.form01 {
  /* background-image: url(../images/0308-cta-bg_07.png); */
  height: 210px;
}

/* メールアドレスを入力してくださいの部分 */
.form01-2 {
  margin: 40px 0 20px;
}

.mail-please {
  font-size: 22px;
  font-weight: 500;
}

.cta_back{
  margin-top: 40px;
}

/* メールアドレスを入力欄 */
input[type="email"] {
  font-size: 120%;
  padding-left: 20px;
  background-color: #fefeed;
  border-radius: 5px;
  border: solid 1px #6d6d6d;
  height: 70px;
  width: 548px;
  margin: 10px 20px;
  text-align: left;
}

#semail{
  font-size: 120%;
  padding-left: 20px;
  background-color: #fefeed;
  border-radius: 5px;
  border: solid 1px #6d6d6d;
  height: 70px;
  width: 548px;
  margin: 10px 20px;
  text-align: left;
}

/*
------------------------------------------------------------------------------------------------------------
フォーム/CTA②
------------------------------------------------------------------------------------------------------------
*/

.countdown02 {
  padding: 225px 0px 180px;
  max-width: 548px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  max-height: 0px;
  /* テキストが真ん中に来るCSS */
}

.countdown02 p {
  line-height: 20px;
}

/* 日付のスタイル */
.countdown-day .date {
  color: #fff;
  font-family: 'Helvetica', sans-serif;
  font-weight: 500;
  font-size: 24pt;
}

.countdown-day {
  color: #fff;
  font-family: 'ヒラギノ角ゴ ProN W6', sans-serif;
  font-size: 22pt;
}


/* チャレンジ開始まであと */
.countdown-challenge {
 color: #fff;
 font-size: 24px;
 font-weight: 500;
}

/* カウントダウンの数字のスタイル */

.timer {
  color: #fff01f;
  font-family: 'ヒラギノ角ゴ ProN W6', sans-serif;
  font-size: 34pt;
}

/* フォームの最背景画像 */
.form02 {
  background-image: url(../image/0308-cta-bg-03.png);
  height: 920px;
   background-repeat: no-repeat;
}

/* メールアドレスを入力してくださいの部分 */
.mail-please {
  font-size: 22px;
  font-weight: 500;
  margin-top: 20px;
}


/* メールアドレスを入力欄 */
input[type="email"] {
  font-size: 120%;
  padding-left: 20px;
  background-color: #fefeed;
  border-radius: 5px;
  border: solid 1px #9d9d9d;
  height: 80px;
  width: 548px;
  margin: 0 10px;
}

.icloud {
  font-size: 18px;
  font-weight: 400;
  margin-top: 0;
}

/*
------------------------------------------------------------------------------------------------------------
ボタンの設定
------------------------------------------------------------------------------------------------------------
*/

.btn {
  display: block; /* ブロック要素として表示 */
  width: 適切な幅px; /* デザインカンプに合わせた値に置き換える */
  margin: 15px auto; /* 上下に20pxのマージン、左右は自動で中央揃え */
  padding: 0; /* パディングは0 */
  border: none; /* 枠線なし */
  background: none; /* 背景透明 */
}

.btn img {
  display: block;
  width: 100%; /* 画像をボタンの幅に合わせて100％に設定 */
  height: auto; /* 高さは自動調整 */
}

.thanks-linebtn {
  background-image: url(../image/0308-btn.png);
  height: 480px;
  display: block;
  width: 100%;;
}

.btn{
  background: url(../image/0308-btn.png) center top no-repeat;
  width: 100%;
  height: 125px;
  border: none;
}

.btn:hover{
  opacity: 0.8;
}


.table_form{
  margin: 0px auto;
}

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



.footer {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  /*横幅設定*/
  height: auto;
  /*高さ設定*/
  color: #fff;
  /*文字色設定*/
  background-color: #3d3d3d;
  /*背景色設定*/

  padding-top: 0px;
}

.footer__inner {
  text-align: left;
  /*ブロック要素を左配置*/
}

.footer__inner a {
  padding: 5px 30px;
  /*内側の余白設定*/
  color: #fff;
  /*文字色設定*/
  padding-left: 30px;
  /*内側左の余白設定*/
  /*footerの矢印画像の設定*/
  display: block;
  width: 100%;
}



.footer__inner li {
  padding: 8px;
  /*内側の余白設定*/
  font-size: 100%;
  /*文字サイズ*/
  border-bottom: 1px solid #ffffff;
  /*下外枠の設定*/
}

.footer__inner a:hover {
  opacity: 0.5;
  /*不透明度50%*/
  /* background: #ffffff; */
  /*背景色設定*/
}

footer p.copy {
  text-align: center;
  /*ブロック要素を中央配置*/
  padding: 40px 0;
  /*内側の余白設定*/
  font-size: 90%;
  /*文字サイズ*/
}

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


/*
------------------------------------------------------------------------------------------------------------
その他
------------------------------------------------------------------------------------------------------------
*/
.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%;
  }


  .small{
  font-size: 16px;
  color: #333333;
  text-align: left;
  margin-left: 100px;
}