@charset "UTF-8";
/* @start color */
/* @end color */
/*
@styleguide
@title info
​
reset.cssは共通システム側にあったため含めてません。
​
デフォルトfont-sizeは14pxです。
​
画像パスはローカルになっています。
​
*/
* {
  box-sizing: border-box;
}
a, a:visited, a:hover, a:active {
  color: #4c4a40;
}
html {
  font-size: 62.5%;
}
body {
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 1.4rem;
  color: #4c4a40;
  background-color: #ffffff;
}
.wrapper {
  position: relative;
}
/*
* head style
*/
.cocoloni {
  background: #fff;
  padding: .3em;
  text-align: center;
}
.header {
  background: #A2E65C;
}
.header__title {
  font-size: 1.8rem;
  color: #fff;
  padding: 1em;
  text-align: center;
}
/*
* footer style
*/
.footer {
  background: #A2E65C;
}
.copy {
  font-size: 1rem;
  color: #fff;
  padding: 1em;
  text-align: center;
}
/*
* main style
*/
.main {
  padding: 2em 1.2em 5em;
}
.section + .section {
  margin-top: 24px;
}
/*
@styleguide
@title text
​
テキストに対して使用します。
​
    <p class="text">テキスト</p>
​
<p class="text">テキスト</p>
​
    <p class="text"><strong class="text__strong">強調テキスト</strong></p>
​
<p class="text"><strong class="text__strong">強調テキスト</strong></p>
​
    <p class="text textCenter">テキスト中央寄せ</p>
​
<p class="text textCenter">テキスト中央寄せ</p>
​
    <p class="text textRight">テキスト右寄せ</p>
​
<p class="text textRight">テキスト右寄せ</p>
​
*/
.text {
  line-height: 1.2;
  margin: 1em 0;
}
.text__strong {
  color: #FF5757;
  font-weight: bold;
}
.text__small {
  font-size: 1.2rem;
  display: block;
  margin-top: .4em;
}
.textCenter {
  text-align: center;
}
.textRight {
  text-align: right;
}
/*
@styleguide
@title subhead
​
小見出しとして使用します。
​
    <h1 class="subhead">サブタイトル</h1>
​
<h1 class="subhead">サブタイトル</h1>
​
    <h2 class="subhead">サブタイトル</h2>
​
<h2 class="subhead">サブタイトル</h2>
​
*/
.subhead {
  font-size: 1.6rem;
  border-bottom: #A2E65C 2px solid;
  font-weight: bold;
  margin-bottom: 32px;
  padding: .5em .2em;
}
.btnBlock {
  margin: 32px 16px;
}
/*
@styleguide
@title button
​
ボタンスタイルを生成します。aタグ、inputタグ、buttonタグに使用できます。
​
    <a class="btn">aタグボタン</a>
​
<a class="btn">aタグボタン</a>
​
    <button class="btn">buttonタグボタン</button>
​
<button class="btn">buttonタグボタン</button>
​
    <input type="submit" class="btn" value="inputタグボタン">
​
<input type="submit" class="btn" value="inputタグボタン">
​
*/
.btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #e1e1e1), color-stop(0, #fff));
  background: -webkit-linear-gradient(#fff, #e1e1e1);
  background: linear-gradient(#fff, #e1e1e1);
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  color: #4c4a40;
  display: block;
  margin: 8px auto 0;
  padding: .8em;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 100%;
}
.btn + .btn {
  /*  margin-top: 8px; */
}
/*
@styleguide
@title carrierLogo
​
キャリアロゴのimgタグに使用します。
​
    <img alt="au" class="carrierLogo" src="${imagepath}">
​
<img alt="au" class="carrierLogo" src="../assets/image/logo_au.png">
​
*/
.carrierLogo {
  display: block;
  margin: auto;
  width: 140px;
}
/*
@styleguide
@title asideLink
​
補足リンクとして使用。
​
    <a class="asideLink">補足リンク</a>
​
<a class="asideLink">補足リンク</a>
​
*/
.asideLink {
  border-bottom: 1px solid #000;
  color: #000;
  display: inline-block;
  line-height: 1.2;
  text-decoration: none;
}
/*
@styleguide
@title list
​
リストスタイルを生成します。
​
    <ul class="list">
      <li class="list__item">
        <a href="" class="list__target">リスト</a>
      </li>
    </ul>
​
<ul class="list"><li class="list__item"><a href="" class="list__target">リスト</a></li></ul>
​
*/
.list {
  list-style: none;
  margin: 0 16px;
  padding: 0;
}
.list__item {
  border: 1px solid #e1e1e1;
  border-radius: 5px;
}
.list__item + .list__item {
  margin-top: 8px;
}
.list__target {
  color: #4c4a40;
  display: block;
  padding: 1em 1.6em 1em 1em;
  position: relative;
  text-decoration: none;
}
.list__target::after {
  border-right: 1px solid #4c4a40;
  border-top: 1px solid #4c4a40;
  bottom: 0;
  content: "";
  height: 6px;
  margin: auto;
  position: absolute;
  right: .8em;
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 6px;
}
/*
@styleguide
@title form
​
formスタイルを生成します。
​
    <form class="form">
      <div class="form__group">
        <label class="form__label">
        お名前<span class="form__label__required">必須</span>
        </label>
        <input type="text" class="form__item">
      </div>
      <div class="form__group">
        <label class="form__label">
        住所
        </label>
        <select class="form__item">
          <option>住所セレクト</option>
        </select>
      </div>
      <div class="form__group">
        <label class="form__label">
        ご意見
        </label>
        <textarea rows="5" cols="20" class="form__item">
        </textarea>
      </div>
    </form>
​
<form class="form">
  <div class="form__group">
    <label class="form__label">
    お名前<span class="form__label__required">必須</span>
    </label>
    <input type="text" class="form__item">
  </div>
  <div class="form__group">
    <label class="form__label">
    住所
    </label>
    <select class="form__item">
      <option>住所セレクト</option>
    </select>
  </div>
  <div class="form__group">
    <label class="form__label">
    ご意見
    </label>
    <textarea rows="5" cols="20" class="form__item">
    </textarea>
  </div>
</form>
*/
.form__group {
  margin: 12px 0;
}
.form__label {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 10px;
}
.form__label__required {
  font-size: 1rem;
  background: #FF5757;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  text-align: center;
}
.form__item {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: block;
  padding: 10px;
  resize: vertical;
  width: 100%;
}
.form__item.error {
  background: #ffd4da;
}
.form select {
  background-image: url("https://websmart.zappallas.com/web_image?url=81ad21b8cf8af24e3f35b8b927eb400b06f1250cf53ac39464c95c86acb0ae652c0799d5cbae9429c639c5df2a1f4a36323fc419eb4ca4fac89b655ac56993dccb6c90089e66bc37058e461f3589f033c97aae5a321a171fe8405756fc5d28e6e8405756fc5d28e6e8405756fc5d28e6e8405756fc5d28e6deb7ba2d41d4c96f5ead87121f502d8ace6cd67a1b55ac82ce6cd67a1b55ac82ce6cd67a1b55ac82a34449b798fc94a77d661acf9d8cb5ce2663af411145fc78ce6cd67a1b55ac82ce6cd67a1b55ac82ce6cd67a1b55ac82ce6cd67a1b55ac82ce6cd67a1b55ac82ce6cd67a1b55ac82ce6cd67a1b55ac82ce6cd67a1b55ac82ce6cd67a1b55ac82560b98f245dc5681c20616f5466299a84829996281c16b989aee82fb2a793bfe2e5b821bb4058cba7c05e5d5c0f4085263ae6ddcc8843dcf3ae100dee04f2fb030464dc77ec9118174f5845a8bc82b83a509cb2d2be58e21897c857a4080cf576969c4ad7a386fabc437b56e54db40c46ba69b0fc3164cc38f82de0b52b878c49188163b3a5c77e963ae6ddcc8843dcf63ae6ddcc8843dcfdff79fd2c51f5049cc4ed668ce94be0a63ae6ddcc8843dcf4617b86859b2437fc3ca88e668219aeb0592f93a1fd3e93951319b8eea52f331a22b1594922b842bfbcc7525d7e5865494eb03c6a764db8444631e0e71d678bc5740867c689c14fea4bfce1f8d46c28068c4ad17f02475d6d17cd99c9f07e0fcc3f3e8538ff508a76fb062e9519ee4d0a6b6979c0d605793a02495c43c932c79135c94e6cf009c073e973d6b07851f07b73df95385cfd5640a49ddbe49563ff80c162988f60c4ed97ece02c8f382c0a87b346b9baa2a291c88b5fcbb8b03526831c545702720b87cb7b94907b5d9060e69a210e507a59e6456c664853ddbaab2ec0f46ab4c75efb46976fff6ff3abe779dab9121c4270b94a7813f8d2401ee66af4494fb906895624280b8d8dd463219ca7c53fc47f0805db10fe2f274a79398213f9f4a225fbea8f7b8d2e9e2c139562e2dc8833dd90a9802c3f530b136f606c49eb04430266c6d643aa08cf90894d6047b5404ab78da3d9282a3a800e1660229509877bfeb9cd00508fef06b226a473ea395f49fad25562d3326ab41ed089034fa3f7b5d24edb78dcc7a8f9f5952f25f1ba6115e62eec40e48f99571ca3549d90d7586c86172c06b7bc2cd2cb6228a5f707575e16516b763ac81a5e4c55a60%26decrypt%3D1");
  background-position: right 0 top 50%;
  background-repeat: no-repeat;
}
/*
@styleguide
@title error
​
formのバリデーションでのエラー表示で使用します。
​
    <lable class="error">必須項目です</label>
​
<label class="error">必須項目です</label>
 */
.error:not(.form__item) {
  font-size: 1.2rem;
  background: #ffd4da;
  border: 1px solid #FF5757;
  border-radius: 5px;
  color: #FF5757;
  display: block;
  margin-top: 8px;
  padding: 4px 8px;
}
/*
@styleguide
@title table
​
formの確認画面などで使用します。
​
    <table class="table">
      <tr class="table__tr">
        <td class="table__td">氏名</td>
        <td class="table__td">name</td>
      </tr>
      <tr class="table__tr">
        <td class="table__td">電話番号</td>
        <td class="table__td">telno</td>
      </tr>
    </table>
​
<table class="table">
  <tr class="table__tr">
    <td class="table__td">氏名</td>
    <td class="table__td">name</td>
  </tr>
  <tr class="table__tr">
    <td class="table__td">電話番号</td>
    <td class="table__td">telno</td>
  </tr>
</table>
​
 */
.table {
  max-width: 100%;
  width: 100%;
}
.table__tr:nth-child(odd) {
  background: #E5FFCB;
}
.table__td {
  border: 1px solid  #A2E65C;
  padding: 12px 8px;
}