@charset "utf-8";

/*=== フォームを今の見かけに無理やり変更するためのcss ===*/

/*=== お問い合わせ、名刺注文共通=== */
html{
  font-size: 62.5%;
}

body{
  background: #fff;
  color: #242424;
  font: 1.6rem/1.8
  "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
}

@font-face {
  font-family: 'MPLUSRounded1cMedium';
  src: url('../fonts/MPLUSRounded1c-Medium.ttf') format('truetype');
}

/* 全(半)空白文字を使ってスペースをあけないようにするCSS
 例：×「名刺印刷　注文」、〇「名刺印刷注文」でホームページ上では空白はあくようにする
 html：名刺印<span class="spacing1">刷</span>注文
 */
.spacing1{
  letter-spacing: 1em;
}

/* フォーム共通、色調整 */
/* 必須の赤色を濃くする(#d9534f→#C42C25) */
form#mail_form dl dt span.required {
	background: #C42C25;
}
/* テキスト等の入力枠のグレーの色を濃くする(#cccccc→#7D7D7D) */
form#mail_form input[type="text"],
form#mail_form input[type="email"],
form#mail_form input[type="tel"],
form#mail_form textarea,
div#agreement div{
  border: 1px solid #7D7D7D;
}
/* エラーメッセージの赤色を濃くする(#ff0000→#D90000) */
form#mail_form dl dd strong.error_blank,
form#mail_form dl dd strong.error_format,
form#mail_form dl dd strong.error_match {
	color: #D90000;
}
form#mail_form div#agreement strong.error_check {
	color: #D90000;
}

/* 横幅909pxの設定 */
#contact .sectionwhite909, #contact2 .sectionwhite909{
  max-width: 909px;
  margin: 60px auto 0; /* [上][左右][下] */
  width: 100%;
}

/* お問い合わせと送信完了のcss */
#thanks section{
  max-width: 909px;
  width: 100%;
  margin: 50px auto 0px auto;
}

#contact h1, #thanks section h1, #contact2 h1{
  font-size: 3.6rem;
  font-family: 'MPLUSRounded1cMedium', sans-serif;
  color: #242424;
  padding-bottom: 60px;
  line-height: 0.9;
  font-weight: normal;
  line-height: 4.5rem;
}
#contact h1 .h2span1, #thanks section h1 .h2span1, #contact2 h1 .h2span1{
  background: linear-gradient(transparent 70%, #EFFFCC 70%);
}
#thanks h1, #thanks p{
  text-align: center;
}
#thanks p{
  padding-bottom: 20px;
}
#contact h1 .h2span2, #contact2 h1 .h2span2{
  font-size: 1.4rem;
  color: #557D26;
}

#contact h2, #contact2 h2{
  font-size: 3.3rem;
  font-family: 'MPLUSRounded1cMedium', sans-serif;
  margin-top: 30px;
  margin-bottom: 20px;
  font-weight: normal;
}
#contact h2::before, #contact2 h2::before{
  content: "|";
  color: #65952B;
  margin-right: 10px;
}

#contact section p, #contact2 section p{
  padding-bottom: 0;
}

#contact section p a, #contact2 section p a{
  text-decoration: underline;
}
#contact section p a i, #contact2 section p a i{
  padding: 0 3px; /* [上下][左右] */
}

#contact section .texttel, #contact2 section .texttel{
  font-size: 2.4rem;
}
#contact section .texttel i, #contact2 section .texttel i{
  margin-right: 5px;
}

form#mail_form{
  max-width: 909px;
  margin: 0px auto 50px auto;
  box-shadow: none;
}

form #form1, form #form2, form #form3, form #form4, form #form5{
  display: flex;
  flex-flow: column;
}
form#mail_form dl dt{
  text-align: left;
  padding-left: 5%;
  padding-bottom: 0;
}
form#mail_form dl dt i{
  float: none;
  padding-left: 5px;
}
form#mail_form dl dt span.required,
form#mail_form dl dt span.optional{
  padding: 0px 6px;
  border: none;
}
form#mail_form dl dt span.optional{
  background: #5C5C5C;
}
form#mail_form dl dd{
  width: 90%;
  padding-top: 10px;
  padding-right: 5%
}



/*===お問い合わせフォームのcss ===*/
form#mail_form ul li label:hover{
  outline: 2px solid #7D7D7D;
  outline-offset: -2px;
  background: #FFF;
}

/*フォームの入力例 */
form#mail_form #form1 dd::after{ content: "※上記項目から選択ください。"; }
form#mail_form #form2 dd::after{ content: "例）愛媛 太郎"; }
form#mail_form #form3 dd::after{ content: "例）himetaro@sample.com"; }
form#mail_form #form4 dd::after{ content: "例）089-923-5002"; }
form#mail_form #form5 dd::after{ content: "お問い合わせ内容をご記入ください。"; }



/*=== プライバシーポリシーのcss ===*/
#contact #agreement h3, #contact2 #agreement h3{
  font-size: 2.0rem;
  font-weight: bold;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
  margin: 0 0 10px; /* [上][左右][下] */
}
#contact #agreement h3::before, #contact2 #agreement h3::before{
  content: "";
  margin-right: 0;
}
#contact #agreement h4, #contact2 #agreement h4{
  font-size: 1.6rem;
  font-weight: bold;
  margin: 15px 0 5px; /* [上][左右][下] */
}
#contact #agreement h4::before, #contact2 #agreement h4::before{
  content: "【";
}
#contact #agreement h4::after, #contact2 #agreement h4::after{
  content: "】";
}
div#agreement div, div#agreement p{
  margin-left: 5%;
  margin-right: 5%;
}
#agreement #agree_check label i{
  /*background: #d9534f;*/
  background: #C42C25;
  color: #fff;
  padding: 0 6px; /* [上下][左右] */
  margin-left: 5px;
  border-radius: 3px;
  display: inline-block;
  font-size: 85%;
}
div#agreement div p{
  margin-left: 0;
  margin-right: 0;
}
#agreement ul{
  margin-top: 10px;
}
#agreement ul li::before{
  content: "●";
  color: #A0A0A0;
  margin-right: 10px;
}
#agreement div dl{
  display: flex;
  flex-wrap: wrap;
  border-bottom: none;
  width: 100%;
}
#agreement div dl dt{
  width: 10%;
  font-weight: bold;
  padding: 0;
  padding: 5px 0 5px 2%; /* [上][右][下][左] */
}
#agreement div dl dd{
  width: 86%;
  padding: 0;
  padding: 5px 0 5px 2%; /* [上][右][下][左] */
}
#agreement div dl dt:nth-of-type(odd), #agreement div dl dd:nth-of-type(odd){
  background-color: #e6e6e6;
}



/*=== 送信ボタンのcss ===*/
form#mail_form input[type="button"]{
  border: solid 2px #9cd226;
  border-radius: 10px;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 10px 50px 9px 50px; /* [上][右][下][左] */
  margin-left: 5%;
  background: #9cd226;
  color: #242424;
  transition: .3s; /* 0.3秒かけて変化 */
}
form#mail_form input[type="button"]:hover, form#mail_form input[type="button"]:active, form#mail_form input[type="button"]:focus{
  color: #557D26;
  border: solid 2px #557D26;
  background: #fff;
  transition: .3s; /* 0.3秒かけて変化 */
  text-decoration: underline;
}



/*=== 愛媛県職員さん向け名刺注文書(contact2.html)のcss ===*/
form#mail_form input[name="department"],
form#mail_form input[name="position"]{
  width: 70%;
}
form#mail_form input[name="fax"]{
  width: 30%;
}
#contact2 form#mail_form ul li label{
  margin-top: 0;
}
#contact2 form#mail_form ul{
  display: grid;
  gap: 10px;
}
#contact2 form#mail_form ul.tyumon1, #contact2 form#mail_form ul.tyumon2{
  /* 横向き名刺画像と合わせて３列にする */
  grid-template-columns: 1fr 1fr 1fr;
}
#contact2 form#mail_form ul.tyumon3{
  /* 縦向き名刺画像と合わせて５列にする */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
#contact2 form#mail_form ul:not(:last-child){
  margin-bottom: 30px;
}
form#mail_form ul.tyumon1 li label{
  background: #FFE5E5;
}
form#mail_form ul.tyumon1 li label:hover{
  /*background: #FFCCCC;*/
  outline: 2px solid #FF5252;
  outline-offset: -2px;
  background: #FFF;
}
form#mail_form ul.tyumon2 li label{
  background: #E5F2FF;
}
form#mail_form ul.tyumon2 li label:hover{
  /*background: #CCE5FF;*/
  outline: 2px solid #2491FF;
  outline-offset: -2px;
  background: #FFF;
}
form#mail_form ul.tyumon3 li label{
  background: #DBFFDB;
}
form#mail_form ul.tyumon3 li label:hover{
  /*background: #ADFFAD;*/
  outline: 2px solid #00A800;
  outline-offset: -2px;
  background: #FFF;
}

/*名刺印刷フォームの入力例 */
form#mail_form #meisiform1 dd::after{ content: "例）愛媛 太郎"; }
form#mail_form #meisiform2 dd::after{ content: "例）えひめ たろう　※印刷が必要な場合のみ入力してください。"; }
form#mail_form #meisiform3 dd::after{ content: "例）愛媛県 保健福祉部 生きがい推進局 障がい福祉課 障がい支援係"; }
form#mail_form #meisiform4 dd::after{ content: "例）主任"; }
form#mail_form #meisiform5 dd::after{ content: "例）089-923-5002　※内線番号が必要な方は特記事項に入力してください。"; }
form#mail_form #meisiform6 dd::after{ content: "例）089-923-5002　※印刷が必要な方のみ入力してください。"; }


/* === タブレット版：幅が1024pxより狭い時に適用 === */
@media screen and (max-width:1024px){
  section{
    padding: 0 10px; /* [上下][左右] */
  }

}

/* === メールフォームのデフォルトの変化点：幅が1000pxより狭い時に適用 === */
@media screen and (max-width:1000px){
  form#mail_form dl dt{
    padding-left: 0;
  }

  div#agreement div, div#agreement p{
    margin-left: 0;
    margin-right: 10%;
  }

  #agreement div dl dt{
    width: 18%;
    padding-left: 2%
  }
  #agreement div dl dd{
    width: 78%;
    padding-left: 2%
  }
}


/* === スマホ版：幅が599pxより狭い時に適用 === */
@media(max-width: 599px){
  #contact h1, #thanks section h1, #contact2 h1{
    font-size: 3.5rem;
  }
  #contact h2, #contact2 h2{
    font-size: 3rem;
  }

  form#mail_form dl dd{
    width: 100%;
  }
  form#mail_form input[name="name_1"],
  form#mail_form input[name="mail_address"],
  form#mail_form input[name="phone"]{
    width: 95%;
  }

  div#agreement div, div#agreement p{
    margin-right: 0;
  }

  #agreement div dl{
    flex-direction:column;
  }
  #agreement div dl dt{
    width: 100%;
  }
  #agreement div dl dd{
    width: 100%;
  }

  form#mail_form input[type="button"]{
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    text-align: center;
  }

  /* 愛媛県職員さん向け名刺注文書(contact2.html)のcss */
  form#mail_form input[name="name_2"],
  form#mail_form input[name="department"],
  form#mail_form input[name="position"],
  form#mail_form input[name="postal"],
  form#mail_form input[name="fax"]{
    width: 95%;
  }

}