@charset "UTF-8";
/*-------------------
----- contact ------
-------------------*/

/*===========================================================
common
===========================================================*/

header {
   position: static;
   padding: .2em 0 .4em 0;
}

main {
   background: #fffdf4;
}

h2 {
   padding: 1.2em .1em;
   text-align: center;
   color: #fff;
   font-size: clamp(2.6rem,3.66vw,4.6rem);
   background: #F89C40;
   }

h3 {
   text-align: center;
   font-size: 2.4rem;
   font-weight: 700;
}

#page-input .inner > p,
#page-confirm .inner > p {
   font-weight: 600;
}

form {
   margin: 0 auto;
}

/*
ボタン
-------------------------*/

.inquiry-btn {
   display: block;
}

.inquiry-btn__text {
   padding: 1em 1.5em;
   font-size: 2.2rem;
}

.inquiry__arrow {
   position: absolute;
   right: 5%;
   width: 10px;
   height: 20px;
}

.inquiry__arrow::before,
.inquiry__arrow::after {
   top: calc(50% - 1px);
   width: 12px;
   height: 2px;
   background-color: #fff;
   transform-origin: calc(100% - 1px) 50%;
}

.inquiry__arrow::before {
   transform: rotate(52.5deg);
}

.inquiry__arrow::after {
   transform: rotate(-52.5deg);
}

/*----------------------------------------------------------
   TABLET（画面幅768px以上で読み込む）
-----------------------------------------------------------*/
@media screen and (min-width:768px) {

   #page-input .inner > p,
   #page-confirm .inner > p,
   #page-thanks .inner > p {
      margin-top: 20px;
      padding-bottom: 35px;
      text-align: center;
   }
}



/*===========================================================
page-input
===========================================================*/

#page-input form {
   max-width: 660px;
}

#page-input .item {
   margin-top: 35px;
   letter-spacing: .07em;
}

.item-name {
   justify-content: flex-start;
}

.item-name label {
   font-weight: 700;
}

.item .required,
.item .any {
   margin-right: .6em;
   padding: 0 .8em;
   font-size: 82%;
   color: #fff;
   font-weight: 400;
   line-height: 1.6;
   border-radius: 3px;
}

.item .required {
   background: #FB9042;
}

.item .any {
   background: #707070;
}

input[type="text"],
input[type="email"],
select,
textarea {
   margin-top: 5px;
   padding: .5em 1em;
   width: 100%;
   height: 55px;
   font-weight: 400;
   background: #fff;
   border-radius:7px;
   box-shadow: 2.5px 2.5px 0px 0px #d6d6d6;
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
   border: solid 2px #FB9042;
   outline: none;
}

::placeholder {
   color: #969696;
}

/*
お問合せ詳細
-------------------------*/
textarea{
   height: 280px;
}

/*
入力エラーメッセージ
-------------------------*/
.error-text {
   margin-top: 5px;
   color: #ff0000;
   font-weight: 700;
   font-size: 1.5rem;
}

/*
メール送信エラーメッセージ
-------------------------*/
.error-message {
   text-align: center;
   border-bottom: 2px solid #ff0000;
   border-top: 2px solid #ff0000;
   background-color: #fffafa;
   color: #ff0000;
   padding: 20px;
   font-weight: 700;
   margin-bottom: 30px;
   font-size: 1.7rem;
}


/*===========================================================
page-confirm
===========================================================*/

#page-confirm form {
   max-width: 580px;
}

#page-confirm .item {
   margin-top: 35px;
}

#page-confirm .item-name {
   margin-bottom: 5px;
   color: #FB9042;
}

.back {
   margin-bottom: 20px;
}

.back .inquiry-btn__text {
   background: #8E8982;
}

.back .inquiry__arrow {
   left: 5%;
}

.back .inquiry__arrow::before,
.back .inquiry__arrow::after {
   right: auto;
   left: 0;
   transform-origin: 1px 50%;
}

/*----------------------------------------------------------
   TABLET（画面幅768px以上で読み込む）
-----------------------------------------------------------*/
@media screen and (min-width:768px) {

   #page-confirm .inquiry-btn__wrap {
      display: flex;
      justify-content: space-between;
   }

   #page-confirm .inquiry-btn {
      width: 47%;
   }

   .back {
      margin-bottom: 0;
   }
}


/*===========================================================
page-thanks
===========================================================*/

#page-thanks {
   min-height: calc(100vh - 280px);
}

@media screen and (min-width:390px) {
   #page-thanks .inner > p {
      text-align: center;
   }
}