@charset "utf-8";

/*========= モーダル表示のためのCSS ===============*/

/*infoエリアをはじめは非表示*/
#info {
  display: none;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container {
  max-width: 100%;
  background: none;
}

.modaal_caution_wrap {
  width: 100%;
  background: none;
  padding: 0;
}

.modaal_caution_ttl {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.modaal_caution {
  width: 100%;
  max-width: 622px;
  margin: 0 auto;
  font-size: 15px;
  font-weight: bold;
  line-height: 21px;
  border: 6px solid #F00;
  background: #fff;
  padding: 1.5em 1.0em;
}

.txt_red {
  color: #f00;
  font-size: 18px;
  font-weight: bold;
}

.caution_tel {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
}

.caution_tel a {
  color: #338811;
}

.caution_tel a:hover {
  color: #f00;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
  background:#ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background:#666;
}

section {
  padding:30px;
}

section:nth-child(2n) {
  background:#f3f3f3;
}

img {
  max-width: 100%;
  height: auto;
}

/* モーダル確認ボタンを隠す */
.btn_modaal {
  display: none;
}

.caution_area {
  width: 100%;
  padding: 40px 0;
  background: #ECF4D0;
}

.caution_wrap {
  width: 100%;
  max-width: 622px;
  margin: 0 auto;
}