@charset 'utf-8';

/*メディアクエリー
スマホ @media (max-width: 768px)
タブレットのみ @media (min-width:768px) and (max-width:1000px)
タブレット・PC @media (min-width:768px)
PCのみ　@media (max-width: １０００px)
PC大 @media (min-width:1200px) 
※上記以外のブレイクポイントは、例外的に設定。その場合はコメントアウトを記載すること。
*/


/* 問い合わせボタンを非表示 */
/*#page_top,*/.side_footer_fixed.contact_page,.box_contact_wrap.contact_page { display: none!important;}
/* ヘッダーリンクを非表示 + スキマ詰め */
.icon_wrap, .tel_pc, #nav-toggle, #head_wrap .header_bottom { display: none; }
#head_wrap { height: auto;}
/* フッターリンクを非表示 */
.footer_link { display: none; }
.privacy { margin-top: 40px;}

/* タイトル */
.h1_contents { width: 100%;}
.h1_inner { width: 90%; margin: 64px auto 0 auto; padding: 35px 0; }
.h1_inner span.title_eng { margin: 0 auto 20px auto; display: flex; align-items: center; color: #bbbbbb; font-family: "Roboto", sans-serif; font-weight: 500; font-style: normal; font-size: 1.6rem; letter-spacing: 0.2em; }
.h1_inner span.title_eng small { margin-right: 10px; font-size:8px; color: #FCFF56; line-height: 18px; }
.h1_inner .title_text { margin-bottom: 35px; font-size: 28px; line-height:1.2em; }
.h1_inner .guide_text { }
@media screen and ( min-width: 768px ) {
    .h1_inner { max-width: 1080px; margin-top: 88px; padding: 80px 0 40px 0;}
    .h1_inner .title_text { margin-bottom: 45px; font-size: 48px; letter-spacing: 0.1rem;}
}


/* プログレス(進捗)バー */
.progressbar { position: relative; margin: 0 auto 35px auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; z-index: 1;}
.progressbar_kanryo { margin: 0 auto;}
.progressbar li { position: relative; list-style-type: none; text-align: center; text-transform: uppercase; width: 33.333%; color: #999999; }
.progressbar li:before { display: block;width: 18px; height: 18px; margin: 0 auto 6px auto; content: '';text-align: center; border-radius: 50%; background-color: #bbbbbb; }/* 丸 */
.progressbar li:after { position: absolute; z-index: -1; top: 8px; left: -50%; width: 100%; height: 2px; content: ''; background-color: #bbbbbb; }/* 横線 */
.progressbar li:first-child:after { content: none; }
.progressbar li.active,.progressbar li.complete { color: #5C9062; }
.progressbar li.active:before,.progressbar li.complete:before { background-color: #5C9062; }
.progressbar li.active:after,.progressbar li.complete:after { background-color: #5C9062; }


/* ページ枠 */
.contents { border-bottom: solid 1px #000; }
.contents .inner { padding: 0 0 80px 0; background-color: #fff;}
@media screen and ( min-width: 768px ) {
  .contents { padding: 0 0 120px 0; border: none;}
  .contents .inner { width: 90%; max-width: 1280px; border-radius: 10px; padding: 80px 0 100px 0; }
}


/* フォーム内のタイトル帯（緑） */
.form_section_title { width: 100%; height: 60px; padding: 0 5%; color: #fff; background-color: #5C9062; font-size: 18px; line-height: 60px;}
@media screen and ( min-width: 768px ) {
  .form_section_title { font-size: 28px;}
}


/* フォームリスト */
.form_body {}
.form_list_wrap { padding: 35px 5%;}
.form_list { }
.form_list dt { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px;}/* 余白固定 */
.form_list dt em { float: right; padding: 0 7px; border-radius: 3px; color: #fff; background-color: #FC523A; text-align: center; font-size: 13px; line-height: 22px; }
.form_list dt.kome { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }/* 注釈付きの項目 */
.form_list dt.kome .kome_hissu { justify-content: space-between; display: flex; align-items: flex-start;  width: 100%; flex-wrap:wrap;}/* 注釈付き + 必須の項目 */
.form_list dt.kome .kome_hissu em { margin-top: 4px;}/* 注釈付き + 必須の項目 */
.form_list dt.kome span { margin-top: 0; font-size: 14px; line-height: 1.7; font-weight: normal; margin-bottom: 7px;}/* 注釈 */
.form_list dd { margin-bottom: 22px; text-align: left;}/* 余白固定 */
.form_list:last-of-type dd:last-of-type { margin-bottom: 0;}/* 余白固定 */
.form_list dd.error_text { margin-bottom: 35px; }
    /* 確認画面のとき */
#confirm .form_list dt { margin-bottom: 0;}
#confirm .form_list dd .view { height: 54px; padding: 0 5%; color: #727171; border-bottom: solid 1px #707070; line-height: 54px; } /* 確認画面 */
#confirm .form_list dd .view.view__l { height: auto; padding: 13px 5%; line-height: 3.2rem; }
@media screen and ( min-width: 768px ) {
  .form_body { max-width: 1080px; margin: 0 auto; width: 90%; }
  .form_list_wrap { padding: 0 0 80px 0;}
  .form_list { position: relative; display: flex; padding: 40px 0 40px 5%; border-bottom: solid 1px #707070; }
  .form_list dt { width: 40%; margin: 0 3% 0 0; font-size: 18px; }
  .form_list dt.kome span { margin-top: 6px; }/* 注釈 */
  .form_list dd { width: 60%; margin-bottom: 0; font-size: 18px;}
  .form_list dd.error_text { margin-bottom: 0; }
  
  #confirm .form_list dd .view { padding: 0; border: none; }
  #confirm .form_list dd .view.view__l { padding: 0; }
}
@media screen and ( min-width: 1000px ) {
  .form_list dd { display: flex; align-items: center; }
  .form_list dt { width: 30%; }
  .form_list dd { width: 70%; }
}

/* フォームリスト内の項目(input、textarea、select) */
.form_list dd .form__inputs-label { width:100%; display:flex; margin: 0 0 13px 0; align-items:center; color:#1b1b1b;}
.form_list dd .form__inputs-check { color: #1b1b1b;}
input[type="checkbox"] { width: 18px; height: 18px; margin-right:9px; border: solid 1px #707070; border-radius: 2px;}
input[type="checkbox"]:checked { border: none; background-image: url("../img/check.svg"); background-repeat: no-repeat; background-size: cover; border: solid 1px #707070; }
.form_list dd.form__inputs-ask { display: flex; flex-direction: column; }
.form__input-text { width: 100%; height: 54px; padding: 10px 5%; margin: 0 auto; background: #fff; display: block; /* flexを削除 */ border-radius: 2px; border: solid 1px #707070; text-align: left; /* 左揃えを明示 */ text-align:left; }
.MONTH_SHORT { width: 100%; padding: 10px 1em; background:#F8F8F8; border: none; border-radius: 15px; font-size:16px; }
.form__input-text-s { width: 50%; max-width: 200px; padding: 10px 1em; background:#fff; border-radius: 15px; border: solid 1px; font-size:16px; }
.form__input-textarea { width: 100%; height: 108px; padding: 10px 1em; background:#fff; box-sizing: border-box; border-radius: 2px; border: solid 1px#707070; line-height:1.5; }
.form__input-zip { width: 100%; padding: 10px 1em; background:#fff; /*border-radius: 15px; */ border: solid 1px; font-size:16px;}
.form__input-text::placeholder,.form__input-text-s::placeholder, .form__input-textarea::placeholder,.form__input-zip::placeholder, .form__input-select .select_empty { color: #aaa;}
#datepicker.form__input-text::placeholder { color: #1b1b1b;}
.form__input-select { width: 100%; min-width: 160px; height: 54px; padding: 10px 1em; background:#fff; /*border-radius: 15px;*/  border: solid 1px; font-size:16px; border:1px solid #707070; }
select[type="select"]:selected { color: #1b1b1b; }
@media screen and (min-width: 768px){
  .form_list dd.form__inputs-ask { display: flex; align-items: flex-start;}
  .form_list dd .form__input-text { width: 350px; margin:0; padding: 10px 1em; box-sizing: border-box;}
  input[type="checkbox"] { margin-right:9px; }
  .form_list dd .form__input-zip { width: 350px; }
  .form_list dd .form__input-select { width: 350px; font-size: 18px;}
  .form_list dd .form__input-textarea { width: 350px; }
}


/* プルダウン */
div.dropdown__btn { width: 100%; font-size: 16px;}
div.dropdown,.dropdown__menu .dropdown__item { font-size: 16px;}
@media screen and (min-width: 768px){
  div.dropdown__btn { font-size: 18px;}
  div.dropdown,.dropdown__menu { width: 350px; box-sizing: border-box;}
  div.dropdown,.dropdown__menu .dropdown__item { font-size: 18px;}
}


/* エラー表示 */
.error_title { width: 100%; margin: 0 auto 20px auto; color:#FC523A; line-height:1.5; text-align: left; }
.error_text { position: relative;}
.error_text input,.error_text select,.error_text textarea { background-color: #FFF5F2; border: solid 1px #FC523A!important;}
.error_text::after { content: attr(data-after); display: block; margin-top: 13px; color:#FC523A; line-height:1.2; }
.error_text .shapeBox {border: solid #FC523A;}
.error_text .typeBox {border: solid #FC523A;}
label.error_text{ border: solid 3px #FC523A!important; border-radius:10px; }
@media screen and (min-width: 768px){
  .form_list dd.error_text.error_text { margin: 0; }
  .form_list_date dd.error_text { flex-direction:column; }
}
@media screen and (min-width: 1000px){
  .error_text::after {  width: calc( 100% - 375px); margin: 0 0 0 25px; }/*枠＋余白*/
  .form_list_date dd.error_text { align-items:baseline; }
  .form_list_date dd.error_text::after { width:350px; margin: 0; position: absolute; bottom: -25px; }
  .form_list dd.form__inputs-ask.error_text::after { width: auto; margin: 13px 0 0 0;}
}


/* 個人情報同意 */
.form_privacy { margin-bottom: 22px; text-align: center;}
@media screen and (min-width: 768px){
  .form_privacy { margin-bottom: 35px;}
}


/* テキストリンク */
.privacy_link { position: relative; width:auto; display:inline-block; float:none; margin:0; font-family: 'GenJyuuGothic-Bold'; letter-spacing:0.04rem; color:#5C9062; align-items:center; justify-content: center; padding-bottom:5px; }
.privacy_link.right { float:right; }
.privacy_link img { margin: 0 0 5px 10px; transition: transform 0.3s ease; }
.privacy_link:hover img { transform: translateX(4px); /* 矢印を4px右に移動 */ transition: transform 0.3s ease;}
.privacy_link::before { width: 100%; height: 1px; position: absolute; left: 0; content: ''; background: #5C9062; bottom: 5px; transform: scaleX(1); /* 初期状態で全体表示 */ transform-origin: left; transition: none; /* マウスアウト時にアニメーションを無効化 */}
.privacy_link:hover::before { transform-origin: right; transform: scaleX(0); transition: transform 0.3s ease; /* 右から消えるアニメーション */ }
.privacy_link:hover::after { content: ''; position: absolute; left: 0; bottom: 5px; width: 100%; height: 1px; background: #5C9062; transform: scaleX(0); transform-origin: left; animation: line-reappear 0.3s ease 0.3s forwards; /* 左から出るアニメーション */ }

@keyframes line-reappear {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@media screen and ( min-width:1000px) {
  .privacy_link_wrap { width:100%; text-align:right; margin-top:25px;}
  .privacy_link { margin:25px 0 0 0; float: right; position: relative;}
}
@media screen and ( min-width:1200px) {
  .privacy_link { margin-top:20px; }
}
@media only screen and (min-width:768px) {
  .privacy_link:hover::before {transform: scaleX(0); }
}

/* 送信ボタン（デフォルト） */
/*ボタン中サイズ 緑.form_privacy  300px × 56px*/
.button_containers { display: flex; flex-direction: column-reverse; }
.kadomaru_button { position: relative; width:300px; height:56px; margin: 0 auto; border-radius:9999px; background:#5C9062; color:#fff; border:1px solid #5C9062; font-size:20px; text-align: center; letter-spacing:0.04em; transition: background-color 0.3s ease;}

@media screen and ( max-width:768px) {
  .kadomaru_button { display:block; }
}

.kadomaru_button::before { content: ""; position: absolute; right:17px; top:50%; transform: translateY(-50%); width:22px; height:22px; background-image: url('../img/arrow_right_w.svg'); background-size: contain; background-repeat:no-repeat; transition: right 0.3s ease; }
.kadomaru_button:hover { color:#5C9062; background:#fff; transition: background-color 0.3s ease; }
.kadomaru_button:hover::before { right:13px; background-image: url('../img/arrow_right_g.svg'); }
.kadomaru_button span { width: 100%; display: inline-block; font-size:20px; text-align: center; /*line-height:56px;*/ }
/* 送信ボタン（白） */
.kadomaru_button__white {  width:300px; height:56px; color: #5C9062; background:#fff; border:1px solid #5C9062; display:flex; align-items: center;}
.kadomaru_button__white::before { background-image: url('../img/arrow_right_g.svg'); }
.kadomaru_button__white:hover { color: #fff; background:#5C9062; transition: background-color 0.3s ease; }
.kadomaru_button__white:hover::before { background-image: url('../img/arrow_right_w.svg');}

#confirm .button_containers a:first-child { margin-top: 24px;}
@media screen and ( min-width:768px) {
  .button_containers { max-width: 640px; margin: 0 auto; display: flex; flex-direction: row; }
  .kadomaru_button { margin: 0 auto; display:block; }
  #confirm .button_containers a:first-child { margin-top: 0; line-height:56px; }

}


/* 完了画面 */
.box_contents { width: 90%; margin: 40px auto; text-align: center;}
.kanryo_text { margin-bottom: 40px; text-align: center; font-size: 18px; line-height: 1.4;}
.kanryo_subtext { margin-bottom: 40px; text-align: left; line-height: 1.9;}
.privacy_link { float: none; margin: 0;}

@media screen and ( min-width:768px) {
  .box_contents { max-width: 1080px; margin: 0 auto; padding: 0;}
  .kanryo_text { font-size: 32px; letter-spacing: 0.1em;}
  .kanryo_subtext { margin-bottom: 80px; font-size: 18px; letter-spacing: 0.04em; text-align:center; }
  .box_contents .link { float: none; margin: 0;}
}

/* 問い合わせページの時の固定ボタンの扱い */
.side_footer_fixed { display:none; }


/* 日付 */
.date-label { position: relative; display: flex; width: 100%; align-items: center; }

@media screen and ( max-width: 768px ) {
    .date-label input[type="date"],
    input[type="date"] {
      text-align: left !important;
      text-align-last: left !important;
      padding-left: 10px;
    }

  
}
  



/* お気に入りページの来店予約の日付 */
.buy_favorite.form_list .form_list_wrap { padding: 0;}
.buy_favorite.form_list .form_list { flex-wrap: wrap; justify-content: space-between; padding: 0 0 35px 0; border-bottom: none; }
.buy_favorite.form_list .form_list dt,.buy_favorite.form_list .form_list dd { width: 100%; margin-bottom: 13px;}
.buy_favorite.form_list .form__input-textarea { margin-bottom: 35px;}
.buy_favorite.form_list .form_list.second_date { padding: 0;}
@media screen and ( min-width: 768px ) {
  .buy_favorite.form_list .form_list dd { width: 49%; flex-direction: column; margin-bottom: 0;}
  .buy_favorite.form_list .checkbox-wrapper { width: 100%; }
  .buy_favorite.form_list dd .select, .buy_favorite.form_list dd .form__input-select { width: 100%; }
  .buy_favorite.form_list .first_date .error_text::after { width: 100%; margin: 13px 0 0 0;}
  
}

/* 系最終了物件問い合わせ */
.buy_soldout.box_contents .inner { width: 100%; margin: 0 auto; padding-bottom: 80px;}
.buy_soldout .h1_inner .title_text { text-align: left;}

@media screen and ( min-width: 768px ) {
  .first_date_time { margin-left:-7%; }
}