Difference between revisions of "Team:Nagahama"

Line 1: Line 1:
−
<!DOCTYPE html>
+
/*------- ここから共通のCSS  --------*/
−
<html lang="ja">
+
* {
−
  <head>
+
  box-sizing: border-box;
−
    <meta charset="utf-8">
+
}
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
−
    <title>0からWEBサイトを作ってみよう</title>
+
−
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+
−
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Dosis:300,400,500,600,700">
+
−
    <link rel="stylesheet" href="stylesheet.css">
+
−
    <link rel="stylesheet" href="responsive.css">
+
−
  </head>
+
−
  <body>
+
−
    <!-- Header -->
+
−
    <header>
+
−
      <div class="container">
+
−
        <div class="header-title">
+
−
          <a class="header-logo" href="#home">Progate School</a>
+
−
        </div>
+
−
        <div class="header-menu">
+
−
          <ul class="header-menu-right">
+
−
            <li>
+
−
              <a href="#languages">学習言語</a>
+
−
            </li>
+
−
            <li>
+
−
              <a href="#features">特徴</a>
+
−
            </li>
+
−
            <li>
+
−
              <a href="#pricing">料金</a>
+
−
            </li>
+
−
            <li>
+
−
              <a href="#columns">コラム</a>
+
−
            </li>
+
−
            <li>
+
−
              <a href="#contact">お問い合わせ</a>
+
−
            </li>
+
−
          </ul>
+
−
        </div>
+
−
      </div>
+
−
    </header>
+
  
−
    <!-- Top content -->
+
html, body,
−
    <div id="home" class="top-section">
+
ul, ol, li,
−
      <div class="inner-bg">
+
h1, h2, h3, h4, h5, h6, p,
−
        <div class="container">
+
form, input, div {
−
          <div class="top-description">
+
  margin: 0;
−
            <h2>プログラミングは人生を変える</h2>
+
  padding: 0;
−
            <p>プログラミングを学んで、新しい自分を見つけよう。</p>
+
}
−
          </div>
+
−
          <div class="top-detail">
+
−
            <a class="btn btn-top-white btn-lg" id="read-more">もっと詳しく</a>
+
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
  
−
    <!-- Languages -->
+
body {
−
    <div id="languages" class="languages-section">
+
  font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
−
      <div class="container">
+
  font-weight: 400;
−
        <div class="section-title">
+
  -webkit-font-smoothing: antialiased;
−
          <h3>学習する言語</h3>
+
  font-size: 14px;
−
        </div>
+
  color: #888;
−
        <div class="languages-box-wrapper">
+
}
−
          <div class="languages-box">
+
−
            <div class="icon">
+
−
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/html.png">
+
−
            </div>
+
−
            <h4>HTML & CSS</h4>
+
−
            <p>Webページの<br>見た目をつくる言語</p>
+
−
          </div>
+
−
          <div class="languages-box">
+
−
            <div class="icon">
+
−
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/jquery.png">
+
−
            </div>
+
−
            <h4>jQuery</h4>
+
−
            <p>効果やアニメーションを実装できる<br>Javascriptライブラリ</p>
+
−
          </div>
+
−
          <div class="languages-box">
+
−
            <div class="icon">
+
−
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/js.png">
+
−
            </div>
+
−
            <h4>Javascript</h4>
+
−
            <p>動的なウェブサイト構築に用いる<br>プログラミング言語</p>
+
−
          </div>
+
−
          <div class="languages-box">
+
−
            <div class="icon">
+
−
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/git.png">
+
−
            </div>
+
−
            <h4>Git</h4>
+
−
            <p>ソースコードのバージョン管理、<br>共同開発を可能にするツール</p>
+
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
  
−
    <!-- Features -->
+
li {
−
    <div id="features" class="features-section">
+
  list-style: none;
−
      <div class="features-section-top gray-section">
+
}
−
        <div class="container">
+
−
          <div class="section-title">
+
−
            <h3>特徴</h3>
+
−
          </div>
+
−
          <img class="features-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/mac_code.png">
+
−
        </div>
+
−
      </div>
+
−
      <div class="features-section-bottom">
+
−
        <div class="container">
+
−
          <div class="features-box">
+
−
            <h5>① ProgateでWEB開発の基礎知識を身につけよう</h5>
+
−
            Progateで各コースをクリアして基礎知識を身につけましょう。それぞれ２周することによって知識を定着させます。
+
−
          </div>
+
−
          <div class="features-box">
+
−
            <h5>② Progateの道場で知識を習得しよう</h5>
+
−
            Progateのコースで基礎知識を身につけたら、実践的な演習をこなしていきましょう。また道場では更に発展的な学習もしていきます。
+
−
          </div>
+
−
          <div class="features-box">
+
−
            <h5>③ 実際にプロダクトを作ってみよう</h5>
+
−
            Progateで実践的な力を身につけたら自分で１つのプロダクトを作ってみましょう。自分で１から作ってみると、意外に理解できていないことに気づくと思います。
+
−
            バグを修正しながらプロダクトを完成させることで、エンジニアとしての力を磨きましょう。
+
−
          </div>
+
−
          <div class="features-box">
+
−
            <h5>④ エンジニアインターンを体験しよう</h5>
+
−
            実際に培ったスキルをインターンを通じて仕事として使ってみましょう。会社のエンジニアとともに仕事をしていくことによって、さらなるスキルアップを目指せるはずです。
+
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
  
−
    <!-- Message -->
+
a {
−
    <div class="message-section">
+
  text-decoration: none;
−
      <div class="message-section-inner">
+
  color: #323a45;
−
        <div class="container">
+
  transition: all .3s;
−
          <h4>プログラミングを学ぶのなら、生涯仕事に困らないことを私が保証しよう。
+
}
−
            <br>- Facebook元役員
+
−
          </h4>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
  
−
    <!-- Pricing -->
+
a:hover {
−
    <div id="pricing" class="pricing-section gray-section">
+
  color: #0dc0c0;
−
      <div class="container">
+
  text-decoration: none;
−
        <div class="section-title">
+
}
−
          <h3>コースを選ぶ</h3>
+
−
        </div>
+
−
        <div class="price-column">
+
−
          <h2>短期集中2週間コース</h2>
+
−
          <h3>3万円</h3>
+
−
          <ul>
+
−
            <li>期間 : 2週間</li>
+
−
            <li>チャットでの質問 : ◯ </li>
+
−
            <li>オフィスでの質問 : ◯ </li>
+
−
          </ul>
+
−
          <div class="btn btn-black">申し込む</div>
+
−
        </div>
+
−
        <div class="price-column price-column-green">
+
−
          <h2>通常1ヶ月コース</h2>
+
−
          <h3>5万円</h3>
+
−
          <ul>
+
−
            <li>期間 : 1ヶ月</li>
+
−
            <li>チャットでの質問 : ◯ </li>
+
−
            <li>オフィスでの質問 : ◯ </li>
+
−
          </ul>
+
−
          <div class="btn btn-black">申し込む</div>
+
−
        </div>
+
−
        <div class="price-column">
+
−
          <h2>土日開発2ヶ月コース</h2>
+
−
          <h3>8万円</h3>
+
−
          <ul>
+
−
            <li>期間 : 2ヶ月</li>
+
−
            <li>チャットでの質問 : ◯ </li>
+
−
            <li>オフィスでの質問 : ◯ </li>
+
−
          </ul>
+
−
          <div class="btn btn-black">申し込む</div>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
  
−
    <!-- Contact -->
+
h2, h3, h4, h5, h6 {
−
    <div id="contact" class="contact-section">
+
  margin-top: 10px;
−
      <div class="contact-section-inner">
+
  margin-bottom: 10px;
−
        <div class="container">
+
  font-weight: 400;
−
          <div class="section-title">
+
}
−
            <h3>お問い合わせ</h3>
+
−
          </div>
+
−
          <div class="contact-form">
+
−
            <h4>メッセージを送る</h4>
+
−
            <form>
+
−
              <input type="text" name="email" placeholder="Email" class="contact-email">
+
−
              <input type="text" name="subject" placeholder="Subject" class="contact-subject">
+
−
              <textarea name="message" class="form-control" placeholder="Message"></textarea>
+
−
              <button type="submit" class="btn btn-contact">Submit</button>
+
−
            </form>
+
−
          </div>
+
−
          <div class="contact-about">
+
−
            <h4>About Us</h4>
+
−
            <p>プログラミングは世界を変える力です。
+
−
                そしてあなたの人生を変える力です。
+
−
                この信念は、私たち自身がプログラミングで人生を変えてきた原体験に基づいています。
+
−
                この原体験をもとに、Progateは 「初心者から、創れる人を生み出す」 ことを理念としています。
+
−
                プログラミングの最初のハードルを徹底的に低くし、世界一わかりやすく、楽しい学習環境を作ります。プログラミングを学びたい人の、せっかくの一歩を挫折で終わらせないために、私たちは全力で皆様に寄り添い、日本のプログラミング教育を変えていきます。
+
−
                私たちと一緒にプログラミングを学んでみませんか？
+
−
            </p>
+
−
            <h4>Address</h4>
+
−
            <p><i class="fa fa-map-marker"></i>東京都渋谷区神泉町20-24 Bricks 7F</p>
+
−
            <p><i class="fa fa-phone"></i>Phone: 03-6455-0950</p>
+
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
  
−
    <!-- Social -->
+
h4, h5 {
−
    <div class="social-section">
+
  color: #444;
−
      <div class="container">
+
  font-size: 18px;
−
        <div class="section-title">
+
}
−
          <h3>Follow Us!</h3>
+
 
−
        </div>
+
.container {
−
        <div class="follow-us">
+
  max-width: 1170px;
−
          <a href="https://www.facebook.com/Progate-742679992421539" class="social-icon" target='_blank'>
+
  width: 100%;
−
            <i class="fa fa-facebook"></i>
+
  padding: 0 15px;
−
          </a>
+
  margin: 0 auto;
−
          <a href="https://twitter.com/prog_8" class="social-icon" target='_blank'>
+
}
−
            <i class="fa fa-twitter"></i>
+
 
−
          </a>
+
.section-title {
−
        </div>
+
  color: #555;
−
      </div>
+
  padding-top: 70px;
−
    </div>
+
  text-align: center;
−
    <footer>
+
}
−
      <div class="container">
+
 
−
        <div class="copyright">©2015-
+
.section-title h3 {
−
          Progate
+
  font-size: 32px;
−
        </div>
+
  font-weight: 300;
−
      </div>
+
}
−
    </footer>
+
 
−
   </body>
+
.gray-section {
−
</html>
+
  background: #f4f4f4;
 +
}
 +
/*-------  ここまで共通のCSS  --------*/
 +
 
 +
/*-------  ここからheader  --------*/
 +
header {
 +
  height: 50px;
 +
  position: fixed;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  background-color: #fff;
 +
  line-height: 50px;
 +
  border-bottom: 1px solid #eee;
 +
  z-index: 10;
 +
}
 +
 
 +
.header-title {
 +
  float: left;
 +
}
 +
 
 +
.header-logo {
 +
  color: #777;
 +
  font-weight: 700;
 +
  font-size: 22px;
 +
  font-family: 'Dosis', sans-serif;
 +
}
 +
 
 +
.header-menu-right {
 +
  float: right;
 +
}
 +
 
 +
.header-menu-right li {
 +
  float: left;
 +
}
 +
 
 +
.header-menu-right a {
 +
  font-weight: 700;
 +
  padding-left: 20px;
 +
}
 +
 
 +
.header-menu-right a:hover {
 +
  color: #0dc0c0;
 +
  transition: color .3s;
 +
}
 +
/*-------  ここまでheader  --------*/
 +
 
 +
/*-------  ここからtop content  --------*/
 +
.top-section {
 +
  margin: 0 auto;
 +
  text-align: center;
 +
  color: #fff;
 +
  background-image: url("https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/top.jpg");
 +
  background-size: cover;
 +
}
 +
 
 +
.inner-bg {
 +
  padding-top: 210px;
 +
  padding-bottom: 120px;
 +
  background-color: rgba(0, 0, 0, 0.6);
 +
}
 +
 
 +
.top-description {
 +
  margin-bottom: 20px;
 +
}
 +
 
 +
.top-description h2 {
 +
  font-size: 48px;
 +
  margin-bottom: 30px;
 +
  font-weight: 400;
 +
}
 +
 
 +
.top-description p {
 +
  color: rgba(255, 255, 255, 0.8);
 +
  font-size: 18px;
 +
}
 +
 
 +
.btn {
 +
  display: inline-block;
 +
  padding: 10px 20px;
 +
  margin: 20px;
 +
  font-weight: 600;
 +
  font-size: 18px;
 +
  cursor: pointer;
 +
  transition: all .3s;
 +
}
 +
 
 +
.btn:hover {
 +
  color: #fff;
 +
}
 +
 
 +
.btn-top-white {
 +
  background: rgba(250, 250, 250, 0.06);
 +
  border: 1px solid rgba(250, 250, 250, 0.15);
 +
  color: rgba(250, 250, 250, 0.9);
 +
}
 +
 
 +
.btn-top-white:hover {
 +
  border: 1px solid rgba(250, 250, 250, 0.8);
 +
}
 +
/*-------  ここまでtop content  --------*/
 +
 
 +
/*-------  ここからlanguages  --------*/
 +
.languages-section {
 +
  padding-bottom: 80px;
 +
  text-align: center;
 +
}
 +
 
 +
.languages-box-wrapper {
 +
  width: 85%;
 +
  height: 500px;
 +
  margin: 0 auto;
 +
}
 +
 
 +
.languages-box {
 +
  float: left;
 +
  vertical-align: top;
 +
  width: 50%;
 +
  padding-top: 40px;
 +
}
 +
 
 +
.languages-box .icon {
 +
  margin-bottom: 20px;
 +
}
 +
/*-------  ここまでlanguages  --------*/
 +
 
 +
/*-------  ここからfeatures  --------*/
 +
.features-section-top {
 +
  text-align: center;
 +
  clear: left;
 +
  height: 376px;
 +
}
 +
 
 +
.features-section-bottom {
 +
  padding-top: 120px;
 +
}
 +
 
 +
.features-box {
 +
  float: left;
 +
  vertical-align: top;
 +
  width: 50%;
 +
  padding: 0 30px;
 +
  margin-bottom: 60px;
 +
}
 +
/*-------  ここまでfeatures  --------*/
 +
 
 +
/*-------  ここからmessage  --------*/
 +
.message-section {
 +
  clear: left;
 +
  color: white;
 +
  background: url("https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/night_view.jpg");
 +
  background-size: cover;
 +
  text-align: center;
 +
}
 +
 
 +
.message-section-inner {
 +
  background-color: rgba(0, 0, 0, 0.6);
 +
  padding: 140px 0;
 +
}
 +
 
 +
.message-section h4 {
 +
  color: white;
 +
  font-size: 22px;
 +
  line-height: 40px;
 +
}
 +
/*-------  ここまでmessage  --------*/
 +
 
 +
/*-------  ここからpricing  --------*/
 +
.pricing-section {
 +
  padding-bottom: 100px;
 +
  clear: left;
 +
}
 +
 
 +
.price-column {
 +
  display: inline-block;
 +
  vertical-align: top;
 +
  width: 31%;
 +
  padding: 15px 15px 20px 15px;
 +
  margin-top: 20px;
 +
  margin-left: 1%;
 +
  margin-right: 1%;
 +
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 +
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 +
  background-color: #fff;
 +
  text-align: center;
 +
}
 +
 
 +
.price-column h2 {
 +
  color: #fff;
 +
  font-size: 24px;
 +
  background: #323a45;
 +
  margin-top: 0;
 +
  margin-bottom: 0;
 +
  padding: 30px 0;
 +
}
 +
 
 +
.price-column-green h2 {
 +
  background: #0dc0c0;
 +
}
 +
 
 +
.price-column h3 {
 +
  color: #555;
 +
  background: #f0f0f0;
 +
  margin-bottom: 0;
 +
  margin-top: 0;
 +
  padding: 30px 0;
 +
  font-size: 28px;
 +
}
 +
 
 +
.price-column ul {
 +
  padding: 20px 30px;
 +
}
 +
 
 +
.price-column li {
 +
  font-size: 16px;
 +
  border-bottom: 1px solid #eee;
 +
  padding: 25px 0;
 +
}
 +
 
 +
.btn-black {
 +
  background: #323a45;
 +
  color: #c9d1d6;
 +
}
 +
/*-------  ここまでpricing  --------*/
 +
 
 +
/*-------  ここからcontact  --------*/
 +
.contact-section {
 +
  background: url("https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/contact.jpg");
 +
  background-size: cover;
 +
  color: white;
 +
}
 +
 
 +
.contact-section-inner {
 +
  background-color: rgba(0, 0, 0, 0.6);
 +
  padding-bottom: 70px;
 +
}
 +
 
 +
.contact-section h3, .contact-section h4 {
 +
  color: white;
 +
}
 +
 
 +
.contact-section h4 {
 +
  font-size: 22px;
 +
  padding-bottom: 10px;
 +
}
 +
 
 +
input[type="text"], textarea {
 +
  margin: 0;
 +
  padding: 0 10px;
 +
  vertical-align: middle;
 +
  background: rgba(250, 250, 250, 0.08);
 +
  border: none;
 +
  width: 85%;
 +
  color: white;
 +
  font-family: 'Open Sans', sans-serif;
 +
  font-size: 16px;
 +
  font-weight: 300;
 +
  border-radius: 0;
 +
  box-shadow: none;
 +
  transition: all .3s;
 +
  margin-bottom: 20px;
 +
  padding: 15px;
 +
}
 +
 
 +
textarea {
 +
  height: 150px;
 +
}
 +
 
 +
.contact-form {
 +
  display: inline-block;
 +
  vertical-align: top;
 +
  width: 58%;
 +
}
 +
 
 +
.btn-contact {
 +
  font-family: 'Dosis', sans-serif;
 +
  font-size: 18px;
 +
  font-weight: 600;
 +
  background: #0dc0c0;
 +
  border: 1px solid #09b1b9;
 +
  color: white;
 +
  box-shadow: inset 0 1px 0 #0fc8c8;
 +
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 +
  transition: all .3s;
 +
  margin: 10px 0;
 +
  padding: 15px 35px;
 +
}
 +
 
 +
.contact-about {
 +
  display: inline-block;
 +
  vertical-align: top;
 +
  width: 40%;
 +
}
 +
 
 +
.contact-about i {
 +
  padding-right: 15px;
 +
  font-size: 18px;
 +
}
 +
 
 +
.contact-about p {
 +
  margin: 0 0 24px;
 +
  line-height: 24px;
 +
}
 +
/*-------  ここまでcontact  --------*/
 +
 
 +
/*-------  ここからsocial  --------*/
 +
.social-section {
 +
  text-align: center;
 +
  padding-bottom: 70px;
 +
}
 +
 
 +
.social-icon {
 +
  text-align: center;
 +
  font-size: 36px;
 +
  padding: 5px;
 +
  transition: all .3s;
 +
}
 +
/*-------  ここまでsocial  --------*/
 +
 
 +
/*-------  ここからfooter  --------*/
 +
footer {
 +
   text-align: center;
 +
  padding: 40px 0;
 +
  background: #222;
 +
}
 +
/*-------  ここまでfooter  --------*/

Revision as of 13:13, 13 October 2016

/*------- ここから共通のCSS --------*/

  • {
 box-sizing: border-box;

}

html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div { 

 margin: 0;
 padding: 0;

}

body { 

 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
 font-weight: 400;
 -webkit-font-smoothing: antialiased;
 font-size: 14px;
 color: #888;

}

li { 

 list-style: none;

}

a { 

 text-decoration: none;
 color: #323a45;
 transition: all .3s;

}

a:hover { 

 color: #0dc0c0;
 text-decoration: none;

}

h2, h3, h4, h5, h6 { 

 margin-top: 10px;
 margin-bottom: 10px;
 font-weight: 400;

}

h4, h5 { 

 color: #444;
 font-size: 18px;

}

.container { 

 max-width: 1170px;
 width: 100%;
 padding: 0 15px;
 margin: 0 auto;

}

.section-title { 

 color: #555;
 padding-top: 70px;
 text-align: center;

}

.section-title h3 { 

 font-size: 32px;
 font-weight: 300;

}

.gray-section { 

 background: #f4f4f4;

} /*------- ここまで共通のCSS --------*/

/*------- ここからheader --------*/ header { 

 height: 50px;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 background-color: #fff;
 line-height: 50px;
 border-bottom: 1px solid #eee;
 z-index: 10;

}

.header-title { 

 float: left;

}

.header-logo { 

 color: #777;
 font-weight: 700;
 font-size: 22px;
 font-family: 'Dosis', sans-serif;

}

.header-menu-right { 

 float: right;

}

.header-menu-right li { 

 float: left;

}

.header-menu-right a { 

 font-weight: 700;
 padding-left: 20px;

}

.header-menu-right a:hover { 

 color: #0dc0c0;
 transition: color .3s;

} /*------- ここまでheader --------*/

/*------- ここからtop content --------*/ .top-section { 

 margin: 0 auto;
 text-align: center;
 color: #fff;
 background-image: url("top.jpg");
 background-size: cover;

}

.inner-bg { 

 padding-top: 210px;
 padding-bottom: 120px;
 background-color: rgba(0, 0, 0, 0.6);

}

.top-description { 

 margin-bottom: 20px;

}

.top-description h2 { 

 font-size: 48px;
 margin-bottom: 30px;
 font-weight: 400;

}

.top-description p { 

 color: rgba(255, 255, 255, 0.8);
 font-size: 18px;

}

.btn { 

 display: inline-block;
 padding: 10px 20px;
 margin: 20px;
 font-weight: 600;
 font-size: 18px;
 cursor: pointer;
 transition: all .3s;

}

.btn:hover { 

 color: #fff;

}

.btn-top-white { 

 background: rgba(250, 250, 250, 0.06);
 border: 1px solid rgba(250, 250, 250, 0.15);
 color: rgba(250, 250, 250, 0.9);

}

.btn-top-white:hover { 

 border: 1px solid rgba(250, 250, 250, 0.8);

} /*------- ここまでtop content --------*/

/*------- ここからlanguages --------*/ .languages-section { 

 padding-bottom: 80px;
 text-align: center;

}

.languages-box-wrapper { 

 width: 85%;
 height: 500px;
 margin: 0 auto;

}

.languages-box { 

 float: left;
 vertical-align: top;
 width: 50%;
 padding-top: 40px;

}

.languages-box .icon { 

 margin-bottom: 20px;

} /*------- ここまでlanguages --------*/

/*------- ここからfeatures --------*/ .features-section-top { 

 text-align: center;
 clear: left;
 height: 376px;

}

.features-section-bottom { 

 padding-top: 120px;

}

.features-box { 

 float: left;
 vertical-align: top;
 width: 50%;
 padding: 0 30px;
 margin-bottom: 60px;

} /*------- ここまでfeatures --------*/

/*------- ここからmessage --------*/ .message-section { 

 clear: left;
 color: white;
 background: url("night_view.jpg");
 background-size: cover;
 text-align: center;

}

.message-section-inner { 

 background-color: rgba(0, 0, 0, 0.6);
 padding: 140px 0;

}

.message-section h4 { 

 color: white;
 font-size: 22px;
 line-height: 40px;

} /*------- ここまでmessage --------*/

/*------- ここからpricing --------*/ .pricing-section { 

 padding-bottom: 100px;
 clear: left;

}

.price-column { 

 display: inline-block;
 vertical-align: top;
 width: 31%;
 padding: 15px 15px 20px 15px;
 margin-top: 20px;
 margin-left: 1%;
 margin-right: 1%;
 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 background-color: #fff;
 text-align: center;

}

.price-column h2 { 

 color: #fff;
 font-size: 24px;
 background: #323a45;
 margin-top: 0;
 margin-bottom: 0;
 padding: 30px 0;

}

.price-column-green h2 { 

 background: #0dc0c0;

}

.price-column h3 { 

 color: #555;
 background: #f0f0f0;
 margin-bottom: 0;
 margin-top: 0;
 padding: 30px 0;
 font-size: 28px;

}

.price-column ul { 

 padding: 20px 30px;

}

.price-column li { 

 font-size: 16px;
 border-bottom: 1px solid #eee;
 padding: 25px 0;

}

.btn-black { 

 background: #323a45;
 color: #c9d1d6;

} /*------- ここまでpricing --------*/

/*------- ここからcontact --------*/ .contact-section { 

 background: url("contact.jpg");
 background-size: cover;
 color: white;

}

.contact-section-inner { 

 background-color: rgba(0, 0, 0, 0.6);
 padding-bottom: 70px;

}

.contact-section h3, .contact-section h4 { 

 color: white;

}

.contact-section h4 { 

 font-size: 22px;
 padding-bottom: 10px;

}

input[type="text"], textarea { 

 margin: 0;
 padding: 0 10px;
 vertical-align: middle;
 background: rgba(250, 250, 250, 0.08);
 border: none;
 width: 85%;
 color: white;
 font-family: 'Open Sans', sans-serif;
 font-size: 16px;
 font-weight: 300;
 border-radius: 0;
 box-shadow: none;
 transition: all .3s;
 margin-bottom: 20px;
 padding: 15px;

}

textarea { 

 height: 150px;

}

.contact-form { 

 display: inline-block;
 vertical-align: top;
 width: 58%;

}

.btn-contact { 

 font-family: 'Dosis', sans-serif;
 font-size: 18px;
 font-weight: 600;
 background: #0dc0c0;
 border: 1px solid #09b1b9;
 color: white;
 box-shadow: inset 0 1px 0 #0fc8c8;
 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 transition: all .3s;
 margin: 10px 0;
 padding: 15px 35px;

}

.contact-about { 

 display: inline-block;
 vertical-align: top;
 width: 40%;

}

.contact-about i { 

 padding-right: 15px;
 font-size: 18px;

}

.contact-about p { 

 margin: 0 0 24px;
 line-height: 24px;

} /*------- ここまでcontact --------*/

/*------- ここからsocial --------*/ .social-section { 

 text-align: center;
 padding-bottom: 70px;

}

.social-icon { 

 text-align: center;
 font-size: 36px;
 padding: 5px;
 transition: all .3s;

} /*------- ここまでsocial --------*/

/*------- ここからfooter --------*/ footer { 

 text-align: center;
 padding: 40px 0;
 background: #222;

} /*------- ここまでfooter --------*/