/*
■スタイル名の分類

「すぐ使えるメールフォーム」のユーザ用のフォームで使っているスタイル定義は、以下の3つに分類できます。

A. Pure
pure-* というクラス名のスタイル定義は、フレームワーク pure を使用しているものです。レスポンシブWebの仕組みの実装と、ボタンのスタイルのために利用しています。また、フォーム要素に関し、項目の間の空間量の初期値が設定されています。

B. 「すぐ使えるメールフォーム」で定義したスタイル
sugu-* というクラス名のスタイル定義は、「すぐ使えるメールフォーム」で定義し、表示調整のみに使用していものです。フォーム要素のスタイル調整や細かいレイアウト調整に利用しています。

C. システム用のスタイル
上記2つに当てはまらないクラス名（例："error" ）は、「すぐ使えるメールフォーム」で定義し、フォームの機能と絡めて使用しています。例えば、エラーがあるときは赤字で表示するために使っています。


これらのクラスは、表示上不要であれば削除、変更して構いません。
タグからクラス名を削除するか、<link>タグを削除してスタイルシートのファイルの読み込み自体を停止する事で、これらのスタイルは適用されなくなります。

A（Pure）のスタイルシートは以下の3つです。
css/pure-min.css
css/pure-grids-responsive-min.css
css/pure-grids-responsive-old-ie-min.css

このファイル（sugu.css）には、B（「すぐ使えるメールフォーム」表面用）, C（システム用） の定義と、pure-* の付いたクラスの微調整が定義されています。このファイルを編集してスタイル設定や、色味の変更が可能です。

*/
/* 
■フレームワーク pure による、レスポンシブWebデザインの設定方法
参考（英語）: http://purecss.io/

1.
pure-u-* という名前が付いたスタイルは、その要素の幅を定義しています。
例えば、pure-u-1-4 というクラスを付けると、その要素は親要素全体 4分の1 の幅で表示されます。pure-u-1-3 なら 3分の1です。
このように幅を調整する時は、親要素には pure-g、当該要素に pure-u というクラス名を付けておいて下さい。

2.
この幅指定は、デバイスによって変える事ができます。例えば、「タブレットでは 50%の幅にしたいけど、PCでは3分の1の幅で表示する」などです。
この時は、デバイス指定が追加されたクラスを重複して指定します。
例えば、以下のように指定します。

<div class="pure-u pure-u-1 pure-u-sm-1 pure-u-md-2-3 pure-u-lg-3-4 pure-u-xl-3-5">...</div>

この指定は、以下を表します。
- sm: デバイスが小さかったら 100%幅
- md: デバイスが中くらいだったら（タブレット）3分の2幅
- lg: デバイスが大きかったら（PC）4分の3の幅
- xl: デバイスが特別大きかったら（デザイナのディスプレイ？） 5分の3の幅

3.
上記の4つのサイズ区分は、Pure の内部で以下のように、em を使って定義されています。
----------------------------------------------------------------------------------------
大きさ    メディアクエリー                     おおよそのサイズ   クラス名
----------------------------------------------------------------------------------------
どれでも  (なし)                              (サイズに関わらず)  .pure-u-*
小さい    @media screen and (min-width: 35.5em)  568px 以上       .pure-u-sm-*
中くらい  @media screen and (min-width: 48em)    768px 以上       .pure-u-md-*
大きい    @media screen and (min-width: 64em)    1024px 以上      .pure-u-lg-*
特大      @media screen and (min-width: 80em)    1280px 以上      .pure-u-xl-*
----------------------------------------------------------------------------------------

同様のメディアクエリーを独自に設定することにより、「PC以上で表示する」などの調整が可能です。

例）

// まず小さなデバイス用を先に定義し、
.pc-only {
	display: none;
}
@media screen and (min-width: 48em) {
	// その後、PCではどうするかで上書きする 
	.pc-only {
		display: block;
	}
}

*/
/* 
■フレームワーク pure をベースにした、表示調整のためのスタイル */
/* レスポンシブWebレイアウトのための基本設定 */
.pure-form .pure-g > label,
.pure-form .pure-g > input,
.pure-form .pure-g > select,
.pure-g > div {
  /* マージンまで含んだ幅がボックスのサイズ */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* セレクタの文字が読めなくなる事の調整 */
.pure-form select {
  padding: 0.3em 0.6em;
}
/* 注意書きと入力欄が近くなりすぎる事の調整 */
textarea + .pure-form-message,
select + .pure-form-message,
input + .pure-form-message {
  margin-top: 0.3em;
}
.pure-form-message + textarea,
.pure-form-message + select,
.pure-form-message + input {
  margin-top: 0.3em;
}
/* 
■「すぐ使えるメールフォーム」で独自に定義したスタイル */
/* ページ全体の枠 */
.sugu-container {
  padding: 0 2em 2em 2em;
}
/* フォーム項目 */
.sugu-control-group {
  margin-top: 0.3em;
  margin-bottom: 0.7em;
}
/* 項目名 */
.sugu-control-group .sugu-label {
  font-weight: 600;
  margin-top: 0.1em;
  /* 項目の説明をフィールドの上に配置する場合は、この位狭い方が座りが良い。 */
}
/* 選択項目のインライン表示 */
.sugu-control-group .sugu-inline {
  display: inline-block;
  margin-right: 1.2em;
}
/* 横並べ時の項目名を右寄せ */
@media screen and (min-width: 48em) {
  /* pure-u pure-u-sm-1 pure-u-md-1-3 の境界 */
  .sugu-label-right {
    text-align: right;
    padding-right: 1.2em;
  }
}
/* プログレスバー */
.sugu-progress {
  margin: 0;
  padding: 0;
  z-index: -2;
  white-space: nowrap !important;
  overflow: hidden;
  border-radius: 2px;
  width: 100%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.sugu-progress .sugu-step {
  position: relative;
  display: inline-block;
  text-align: center;
  margin: 0 0.2em 0 0;
  height: 2.8em;
  line-height: 2.8em;
  color: rgba(0, 0, 0, 0.8);
  /* 基本の文字色。背景色は .step: before/after で付けているので、ここでは文字色のみ指定 */
  width: 33.33%;
  /* 100% を3ステップで割ったもの */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.sugu-progress .sugu-step:before,
.sugu-progress .sugu-step:after {
  content: "";
  position: absolute;
  z-index: -1;
  background: rgba(0, 0, 0, 0.2);
  /* 基本の背景色 */
  width: 100%;
  height: 1.4em;
  /* 高さ 2.8em / 2 */
}
.sugu-progress .sugu-step:before {
  top: 0;
  left: 0;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform: skew(45deg);
}
.sugu-progress .sugu-step:after {
  top: 1.4em;
  /* 高さ 2.8em / 2 */
  left: 0;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
}
.sugu-progress .sugu-step:first-child {
  margin-left: -1.6em;
  /* 高さ 2.8em / 2 + 要素の基本マージン 0.2em */
  padding-left: 1.6em;
  /* 高さ 2.8em / 2 + 要素の基本マージン 0.2em */
}
.sugu-progress .sugu-step.sugu-step-active {
  color: white;
  /* 今いる場所の文字色 */
}
.sugu-progress .sugu-step.sugu-step-active:before,
.sugu-progress .sugu-step.sugu-step-active:after {
  background: #0078e7;
  /* 今いる場所の背景色 */
}
/* 右寄せ・左寄せ・中央 */
.sugu-clearfix:before,
.sugu-clearfix:after {
  content: " ";
  display: table;
}
.sugu-clearfix:after {
  clear: both;
}
.sugu-center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.sugu-pull-right {
  float: right !important;
}
.sugu-pull-left {
  float: left !important;
}
/* 
■フォームの基本動作に関わるスタイル（色味の変更ができます）  */
/* フォームの IME 入力モードの設定 */
.noime {
  ime-mode: disabled;
  /* always off */
}
.imeoff {
  ime-mode: inactive;
  /* default off */
}
.imeon {
  ime-mode: active;
}
.imeauto {
  ime-mode: auto;
  /* no change */
}
/* メッセージの色：通常 */
.text-info {
  color: green;
}
/* メッセージの色：エラー */
.text-error {
  color: red;
}
/* 必須項目表示 */
.required .required {
  /* div.required span.required など */
  color: red;
}
/* エラー時の項目表示 */
.error .message {
  color: red;
}
/* 入力欄のスタイルは Pure で指定されており、ここではエラーの時の色変更のみ指定。 */
.error input[type="text"],
.error input[type="password"],
.error input[type="email"],
.error input[type="url"],
.error input[type="date"],
.error input[type="month"],
.error input[type="time"],
.error input[type="datetime"],
.error input[type="datetime-local"],
.error input[type="week"],
.error input[type="number"],
.error input[type="search"],
.error input[type="tel"],
.error input[type="color"],
.error input[type="text"]:focus,
.error input[type="password"]:focus,
.error input[type="email"]:focus,
.error input[type="url"]:focus,
.error input[type="date"]:focus,
.error input[type="month"]:focus,
.error input[type="time"]:focus,
.error input[type="datetime"]:focus,
.error input[type="datetime-local"]:focus,
.error input[type="week"]:focus,
.error input[type="number"]:focus,
.error input[type="search"]:focus,
.error input[type="tel"]:focus,
.error input[type="color"]:focus,
.error select,
.error select:focus,
.error textarea,
.error textarea:focus {
  border: 1px solid red;
  box-shadow: inset 0 1px 3px pink;
}
.error input[type="file"],
.error input[type="radio"],
.error input[type="checkbox"],
.error input[type="file"]:focus,
.error input[type="radio"]:focus,
.error input[type="checkbox"]:focus {
  outline: thin solid red;
  /* ラジオボタンとチェックボックス */
}
/* 製品情報 */
.prodinfo {
  text-align: center;
  margin: 20px auto;
}