@charset "utf-8";

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


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

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

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

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


/*
------------------------------------------------------------------------------------------------------------
コンテナー（全体）のCSS
------------------------------------------------------------------------------------------------------------
*/


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

@media screen and (max-width : 767px) {
  width: 750px;
}
}

.content{
  background-color: #c0edec;
  padding: 20px 0 30px;
}

.day1{
  background-image: url(../images/content1.png);
  background-repeat: no-repeat;
  background-position:center;
  background-size: contain;
  height: 305px;
  margin-bottom: 10px;
}

.day2{
  background-image: url(../images/content2.png);
  background-repeat: no-repeat;
  background-position:center;
  background-size: contain;
  height: 375px;
  margin-bottom: 10px;
}

.day3{
  background-image: url(../images/content3.png);
  background-repeat: no-repeat;
  background-position:center;
  background-size: contain;
  height: 295px;
  margin-bottom: 10px;
}

.day4{
  background-image: url(../images/content4.png);
  background-repeat: no-repeat;
  background-position:center;
  background-size: contain;
  height: 410px;
  margin-bottom: 10px;
}

.day5{
  background-image: url(../images/content5.png);
  background-repeat: no-repeat;
  background-position:center;
  background-size: contain;
  height:345px;
  margin-bottom: 10px;
}

.day_ttl{
  margin: -7px 0 10px;
}

.day_txt{
font-size: 28px;
font-weight: bold;
color: #292929;
}

.sankaku{
  margin: 0 0 20px;
}

.small{
  font-size: 18px;
  display: block;
  margin: -2px 0 0px;
}

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

.schedule {
  background-color: #1e9995;
  padding: 10px 0;
}

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

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

.countdown {
  background-color: #fbfbf9;
  height: 130px;
  padding-top: 30px;
  max-width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
  /* テキストが真ん中に来るCSS */
}

.countdown p {
  line-height: 10px;
}

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

/* カウントダウンの数字のスタイル */
.timer {
  color: #f0421f;
  font-family: 'ヒラギノ角ゴ ProN W6', sans-serif;
  font-size: 30pt;
  font-weight: 500;
}

/* フォームの最背景画像 */
.form-in.sp {
  height: 370px;
  background-image: url(../images/cta-bg.png);
  padding-top: 50px;
  background-repeat: no-repeat;
}

.form-in.pc {
  height: 305px;
  background-image: url(../images/cta-bg-pc.png);
  padding-top: 35px;
  background-repeat: no-repeat;
  background-position: center;
}

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

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

/* メールアドレスを入力欄 */
input[type="email"].pc {
  font-size: 120%;
  padding-left: 20px;
  background-color: #fefeed;
  border-radius: 5px;
  border: solid 1px #9d9d9d;
  height: 70px;
  width: 490px;
  text-align: center;
  margin-top: 30px;
  margin: 0 auto;
}

.btn.sp {
  padding-bottom: 10px;
}

.btn.pc {
  padding-top: 15px;
  padding-bottom: 0;
}

.icloud {
  color: #6d6d6d;
  font-family: 'ヒラギノ角ゴ ProN W6', sans-serif;
  font-size: 10pt;
  font-weight: 500;
  padding-left: 120px;
  padding-right: 120px;
}

.icloud-sp {
  color: #6d6d6d;
  font-family: 'ヒラギノ角ゴ ProN W6', sans-serif;
  font-size: 12pt;
  font-weight: 500;
  padding-left: 130px;
  padding-right: 130px;
  text-align: left;
  text-align: justify;
  text-align-last: left;
}

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



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

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

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

.footer__inner li {
  /* padding: 8px 100px; */
  /*内側の余白設定*/
  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;
}


/*
------------------------------------------------------------------------------------------------------------
スマホとPC表示の変更
------------------------------------------------------------------------------------------------------------
*/


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

.sp {
  display: none !important;
}

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

  .sp {
    display: block !important;
  }
}

@media only screen and (max-width: 767px) {


  /*
===================================================================================================================================
スマホ版フッターのCSS
===================================================================================================================================
*/

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

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