﻿/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

input[type=text], input[type=email], input[type=tel], select , textarea {
 border: none;
 border-radius: 5px;
 background: #FFF;
 padding: 15px 10px;
 box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.1);
 width: 100%;
 box-sizing: border-box;
}

:placeholder-shown {
 background-color: #F5F5F5 !important;
}

input::placeholder { color: rgba(16, 45, 63, 0.3); font-weight: 700; }
input:-ms-input-placeholder { color: rgba(16, 45, 63, 0.3); font-weight: 700; } /* IE */
input::-ms-input-placeholder { color: rgba(16, 45, 63, 0.3); font-weight: 700; } /* Edge */


input[type=checkbox] {
 display: none;
}   
.mwform-checkbox-field label span {
 position: relative;
 padding-left: 32px;
 display: block;
}
.mwform-checkbox-field label span:after {
 position: absolute; 
 content: ""; 
 display: block; 
 top: 50%; 
 left: 0; 
 margin: -10px 0 0 -2px;
 width: 22px;
 height: 22px;
 background: #F5F5F5;
 border: 1px solid #A5A5A5;
 border-radius: 2px; 
 z-index: 1;
}
.mwform-checkbox-field label span:before {
 position: absolute; 
 content: ""; 
 left: 8px; 
 top: 2px; 
 width: 5px; 
 height: 9px; 
 border-right: 3px solid #FFF;
 border-bottom: 3px solid #FFF;
 transform: rotate(45deg) translate(50% , 50%); 
 opacity: 0; 
 z-index: 2;
}
.mwform-checkbox-field input[type=checkbox]:checked + span:after {
 background: var(--color-mossgreen);
 border: 1px solid #FFF;
}
.mwform-checkbox-field input[type=checkbox]:checked + span:before {
 opacity: 1; 
}




.form__wrapper a {
 color: var(--color-mossgreen); 
 text-decoration: none;
}

.contact__wrapper {
 margin: 0 auto;
}
@media screen and (min-width: 769px){
.contact__wrapper {
 max-width: 1320px;
 padding: 0 5%;
}
}
@media screen and (max-width: 768px){
.contact__wrapper {
 max-width: 90%;
}
}

.contact__wrapper p {
 line-height: 1.75;
}


/*
進捗
============================= */
.stepflow__list {
 position: relative;
 display: flex;
 justify-content: center;
}

.stepflow__list li {
 position: relative;
 line-height: 1;
 padding-top: 65px;
 display : flex;
 flex-direction : column;
}

.stepflow__list li + li:before {
 content: "";
 display: block;
 width: 150px;
 height: 3px;
 background-color: var(--color-mossgreen);
 position: absolute;
 top:25px;
 left:0;
}



.stepflow__list .-circle {
 position: absolute;
 top:0;
 right:0;
 display: table;
 width: 50px;
 height: 50px;
 border-radius : 25px;
 background-color: var(--color-mossgreen);
}
.stepflow__list .-circle:before , .stepflow__list .-circle:after {
 content: "";
 position: absolute;
 top:50%;
 left:50%;
 transform: translate(-50%,-50%);
}
.stepflow__list .-circle:before {
 width: 44px;
 height: 44px;
 border-radius : 22px;
 background-color: #FFF;
 z-index: 2;
}
.stepflow__list .-active .-circle:after {
 width: 38px;
 height: 38px;
 border-radius : 19px;
 background-color: var(--color-mossgreen);
 z-index: 3;
}

.stepflow__list .-label {
 position: relative;
 display: block;
 z-index: 1;
 width: 50px;
 color: var(--color-mossgreen); 
 font-weight: 600;
 text-align: center;
 box-sizing: border-box;
}

.stepflow__list li:after {
 content: "";
 display: block;
 font-size: 0;
 line-height: 0;
 box-sizing: border-box;
 position: absolute;
 margin: 0;
 padding: 0;
 border: none;
 right: -20px;
 top: 50%;
 z-index: 2;
 width: 30px;
 height: calc(100% + 4px);
 transform: translateY(-50%);
}



@media screen and (min-width: 769px){
.stepflow__list { margin: 80px auto 0; }
.stepflow__list li + li { padding-left: 150px; }
.stepflow__list li + li:before { width: 150px; top:25px; }
	
}
@media screen and (max-width: 768px){
 .stepflow__list { margin: 35px auto 0; }
 .stepflow__list li + li { padding-left: 50px; }
 .stepflow__list li + li:before { width: 50px; top:25px; }
}


.active .triangle.-p2 {
 position: absolute;
 right: -52px;
 top:50%;
 transform: translateY(-50%);
 z-index: 4;
}

.active .triangle.-p3 {
 position: absolute;
 right: -54px;
 top:50%;
 transform: translateY(-50%);
 z-index: 3;
}

.normal .triangle.-p1 {
 position: absolute;
 right: -25px;
 top:50%;
 transform: translateY(-50%);
 z-index: 5;
}

.normal .triangle.-p2 {
 position: absolute;
 right: -27px;
 top:50%;
 transform: translateY(-50%);
 z-index: 4;
}

.normal .triangle.-p3 {
 position: absolute;
 right: -54px;
 top:50%;
 transform: translateY(-50%);
 z-index: 3;
}

.triborder {
 position: absolute;
 top:50%;
 right: 0;
 z-index: 4;
 transform: translateY(-50%);	
}

.triborder span:nth-child(1) {
 position: absolute;
 top:50%;
 right: -23px;
 display: block;
 border-top: 28px solid transparent;
 border-bottom: 28px solid transparent;
 border-left: 28px solid #FFF;
 z-index: 5;
 transform: translateY(-50%);
}
.triborder span:nth-child(2) {
 position: absolute;
 top:50%;
 right: -26px;
 display: block;
 border-top: 28px solid transparent;
 border-bottom: 28px solid transparent;
 border-left: 28px solid var(--color-mossgreen);
 z-index: 4;
 transform: translateY(-50%);
}
.triborder span:nth-child(3) {
 position: absolute;
 top:50%;
 right: -54px;
 display: block;
 border-top: 54px solid transparent;
 border-bottom: 54px solid transparent;
 border-left: 54px solid #FFF;
 z-index: 3;
 transform: translateY(-50%);
}
.triborder span:nth-child(4) {
 position: absolute;
 top:50%;
 right: -56px;
 display: block;
 border-top: 56px solid transparent;
 border-bottom: 56px solid transparent;
 border-left: 56px solid var(--color-mossgreen);
 z-index: 2;
 transform: translateY(-50%);
}


.form__wrapper {
 background: #FFFFFF;
 box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
 }
dl.form__inner {
 max-width: 760px;
 margin: 0 auto;
 text-align: left;
}
div.form__inner {
 max-width: 760px;
 margin: 0 auto;
 text-align: center;
}

.form__wrapper dt {
 position: relative;
 font-weight: 700;
 line-height: 1.4;
}
.form__wrapper dt.required:after {
 content: "必須";
 display: inline-block;
 margin-left: 12px;
 font-weight: 700;
 line-height: 1;
 color: #FFF;
 background: #d02e2e;
 border-radius: 5px;
}

@media screen and (min-width: 769px){
.form__wrapper {
 border-radius: 50px; 
 padding: 100px 5%;
 margin-top: 75px;
}
.form__wrapper dt {
 font-size: 18px;
}
.form__wrapper dt.required:after {
 font-size: 14px;
 padding: .5em .75em;
}
}
@media screen and (max-width: 768px){
.form__wrapper {
 border-radius: 15px; 
 padding: 50px 5%;
 margin-top: 50px;
}
.form__wrapper dt {
 font-size: 16px;
}
.form__wrapper dt.required:after {
 font-size: 12px;
 padding: 5px 6px;
}
}

.form__wrapper dd {
 margin-top: 15px;
}


@media screen and (min-width: 769px){
.form__wrapper dd + dt { margin-top: 50px; }
}
@media screen and (max-width: 768px){
.form__wrapper dd + dt { margin-top: 40px; }
}


.completePage h2 {
 font-size: 20px;
}

.completePage .form__wrapper p  {
 margin: 2em auto 0;
 width: 90%;
 max-width: 760px;
 line-height: 1.75;
}

@media screen and (min-width: 769px){
.completePage h2 { font-size: 20px; }
.completePage .form__wrapper p  {
 font-size: 16px;
}
}
@media screen and (max-width: 768px){
.completePage h2 { font-size: 16px; }
.completePage .form__wrapper p  {
 font-size: 14px;
 text-align: left;
}
}

.completePage .complete__backbt a {
 display: table;
 margin: 80px auto 0;
 width: 90%;
 max-width: 760px;
 font-size: 24px;
 font-weight: 700;
 line-height: 1;
 padding: 1em;
 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 border-radius : 3em !important;
 color: #FFF !important; 
 background: var(--color-mossgreen);
}




.inputbuttons {
 margin-top: 60px;
}
.confirmbuttons {
 margin-top: 60px;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}


.inputbuttons button , .inputbuttons input ,
.confirmbuttons button , .confirmbuttons input {
 display: table;
 font-weight: 700;
 line-height: 1;
 padding: 1em;
 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 border-radius : 3em !important;
}

.button__confirm {
 margin: 0 auto;
 width: 58%;
 color: #FFF;
 background: var(--color-mossgreen);
}

.button__back {
 width: 23.75%;
 background: #D2D2D2;
}

.button__submit {
 color: #FFF;
 background: var(--color-mossgreen);
}

@media screen and (min-width: 769px){
 .button__confirm { width: 58%; }
 .button__back { width: 23.75%; }
 .button__submit { margin-left: 20px; width: 38%; }
.inputbuttons button , .inputbuttons input , .confirmbuttons button , .confirmbuttons input { font-size: 24px; }
}
@media screen and (max-width: 768px){
 .button__confirm { width: 88%; margin: 0 auto; }
 .button__back { width: 88%; order: 2; }
 .button__back { width: 88%; order: 2; margin-top:20px; }
 .button__submit { width: 88%; order: 1; }
 .inputbuttons button , .inputbuttons input ,.confirmbuttons button , .confirmbuttons input { font-size: 20px; }
}


.mw_wp_form_input .confirmbuttons {
 display: none;
}
.mw_wp_form_confirm .inputText,
.mw_wp_form_confirm .inputbuttons {
 display: none;
}