@charset "utf-8";
/* CSS Document */

.to_mail {
  padding: 0 10px;
}
.to_mail a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  border-radius: 3em;
  background: #f5b3a2;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  max-width: 340px;
  margin:0 auto 20px;
}
.to_mail a img {margin-right: 5px}

.hissu {color: red}

/*LINE
====================================================*/
#contact_line {margin-bottom: 2rem}
#contact_line .contact_line {
  border: solid 5px rgb(0, 195, 0);
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
  text-align: center;
}
#contact_line .title {
  background: rgb(0, 195, 0);
  color: #FFF;
  font-size: 26px;
  padding: 0.5em 0;
  margin: -25px -25px 20px;
}
#contact_line .step {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 2rem auto 1rem;
  padding: 0;
  max-width: 850px;
}

#contact_line .step li {
  list-style: none;
  border: solid 2px rgb(0, 195, 0);
  width: calc((100% - 50px) / 3);
  border-radius: 10px;
  padding: 15px 10px 0;
  position: relative;
}
#contact_line .step li p {margin: 0}
#contact_line .step li .step_title {
  position: absolute;
  left: 0;right: 0;
  top: -15px;
  height: 30px;
  z-index: 2;
}
#contact_line .step li .step_title span {
  display: table;
  padding: 0 1em;
  margin: 0 auto;
  border-radius: 2em;
  line-height: 30px;
  font-size: 18px;
  font-weight: bold;
  background: rgb(0, 195, 0);
  color: #FFF;
}

/*PCの時はQRを表示********/
.friend.pc {
  color: rgb(0, 195, 0);
  font-weight: bold;
}
.friend.pc span {display: block;}

/*スマホの時はリンクボタンを表示********/
.friend.sp {line-height: 0;}
.friend.sp a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(0, 195, 0);
  color: #FFF;
  padding: 0.5em 0;
  border-radius: 2em;
}
.friend.sp a img {margin-right: 5px;}

@media only screen and (min-width: 645px) {/*スマホ以外*/
  #contact_line .step li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  #contact_line .step li:not(:last-of-type)::after {
    content: "";
    display: block;
    width: 20px; height: 30px;
    background: rgb(0, 195, 0);
    position: absolute;
    top: calc(50% - 15px);
    right: -24.5px;
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
  }
  #contact_line .step li .step_text { 
    flex-grow: 1;
    margin: 5px 0;
  }
}
@media only screen and (max-width: 644px) {/*スマホサイズ*/
  #contact_line .contact_line {
  border-radius: 10px;
  }
  #contact_line .title {
    font-size: 18px;
  }
  #contact_line .step {margin-top: 0}
  #contact_line .step li {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
  }
  #contact_line .step li:not(:last-of-type)::after {
    content: "";
    display: block;
    width: 30px; height: 20px;
    background: rgb(0, 195, 0);
    position: absolute;
    bottom: -8px;
    left: calc(50% - 15px);
-webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
clip-path: polygon(0 0, 50% 100%, 100% 0);
  }

  
  #contact_line .step li .step_text { 
    order: 2;
    width: 50%;
  }
  #contact_line .step li .step_img { 
    width: 50%;
    order: 1;
  }
}



/*MAILフォーム
====================================================*/
#contact_mail .contact_mail {
  border: solid 5px #f5b3a2;
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
}
#contact_mail .title {
  background: #f5b3a2;
  color: #FFF;
  font-size: 26px;
  padding: 0.5em 0;
  margin: -25px -25px 10px;
  text-align: center;
}
#contact_mail .form_table {width: 100%}
#contact_mail .form_table tr {
  border-bottom: solid 1px #f5b3a2;
}
#contact_mail .form_table td:nth-of-type(n+2){display: none}
#contact_mail .ex_text {
  color: #666;
  margin-bottom: 5px;
}
#contact_mail .temp {padding: 0.5em 0}
#contact_mail .temp .temp_title {
  display: inline-block;
  width: 6em;
  line-height: 2;
  text-align: center;
  background: #f5b3a222;
  margin-right: 5px;
}

#contact_mail iframe {
  width: 100%;
  height: 10em;
  border: solid 1px #999;
  background: #FFF;
}


/*コンタクトフォームの調整
----------------------------------------*/
::placeholder {color: #f5b3a2;}
textarea,input[type="text"],input[name="number-year"],select{border: solid 1px #999;padding: 5px;background: #FFF}
.wpcf7-text,textarea {width: 100%;}

/**ラジオボタン、チェックボックスを縦並びに******/
.wpcf7-list-item {
  display: block;
  margin: 0;
}
.wpcf7-form label {
  display: block;
  padding: 5px 0;
  cursor: pointer;
}
.wpcf7-form label:hover {background:#ffee99 }
input[type="file"]:hover {background:#ffee99 ;}

input[type="submit"] {
  display: block;
  border: none;
  background: #f5b3a3;
  color: #FFF;
  font-size: 1.5rem;
  padding: 1rem 2rem;
  border-radius: 10px;
  margin: 0 auto;
}
input[type="submit"]:hover {background: red}

input[type="submit"][disabled=""] {
  opacity: 1;
  background: #aaa;
}
input[type="submit"][disabled=""]:hover {
  background: #aaa;
}

.wpcf7-spinner {display: none}

.wpcf7 form .wpcf7-response-output {
  max-width: 1100px;
  margin: 2em auto 1em;
  padding: 1.5em 1em;
}

/**性別の時ボタンを横並びに******/
#contact_mail .sex .wpcf7-list-item {
  display: inline-block;
  margin-right: 1em;
}
#contact_mail .sex label {padding-right: 0.5em}

/***生年月日の「未入力」の文字の位置を調整*****/
#contact_mail .birthday td {position: relative}
#contact_mail .birthday td .wpcf7-form-control-wrap {position: initial}
#contact_mail .birthday select {width: 3em;margin: 0 5px;}
#contact_mail .birthday input[name="number-year"] {width: 5em;margin-left: 0}

/**郵便番号を横並びに****/
#contact_mail .zip .ex_text {float: left;padding: 5px 5px 0 0;}
#contact_mail .zip input {width: 7em;}

/**同意のlabelを100%に******/
#contact_mail .doui {
  background: #f5b3a222;
}

#contact_mail .doui label {
  text-align: center;
  padding: 1em 0.5em;
}

/*****************/
.submit_area {
  text-align: center;
  padding: 2rem 0 1rem;
}





@media only screen and (min-width: 645px) {/*スマホ以外*/
  #contact_mail .form_table th,
  #contact_mail .form_table td {padding:10px}
  #contact_mail .form_table th {white-space: nowrap}
  #contact_mail .birthday .wpcf7-not-valid-tip {
    position: absolute;
    z-index: -1;
    top: 1em;
    left: 17em;
  }
}
@media only screen and (max-width: 644px) {/*スマホサイズ*/
  #contact_mail .title {margin-bottom: 10px}
  #contact_mail .form_table tr,
  #contact_mail .form_table tr th ,
  #contact_mail .form_table tr td {display: block;}
  #contact_mail .form_table th,
  #contact_mail .form_table td {padding:15px 5px}
  #contact_mail .form_table tr th {padding-bottom: 0;}
  
  
  #contact_mail .sex td {text-align: center}
  #contact_mail .birthday .wpcf7-not-valid {margin-bottom: 1.2em}
  #contact_mail .birthday .wpcf7-not-valid-tip {
    position: absolute;
    bottom: 0.5em;
    left: 5px;
  }
}