@charset "UTF-8";
/**
 * 見積画面用共通CSS
 */
/************************************
 全体
*************************************/
dt {
  font-weight: normal;
}

select {
  cursor: pointer;
}

/************************************
 レイアウト
*************************************/
body {
  background-color: #f0f0f0;
}

body.en .ja {
  display: none;
}

body.ja .en {
  display: none;
}

#wrapper {
  width: 800px;
  margin: auto;
  padding: 60px 2% 20px;
  background-color: #fff;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.27);
}

@media screen and (max-width: 800px) {
  #wrapper {
    width: 100%;
  }
}
@media screen and (min-width: 800px) {
  #wrapper {
    padding: 60px 20px 20px;
  }
}
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  background: #191970;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
}
header .header_left {
  white-space: nowrap;
}
header img.apj_logo {
  height: 40px;
  margin-left: 14px;
  vertical-align: bottom;
}
header .partner_logo {
  display: inline-block;
  top: 7px;
  height: 40px;
  vertical-align: bottom;
}
header .partner_name {
  display: inline-block;
  color: #fff;
  margin-left: 8px;
  font-size: 28px;
  text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.6);
  font-weight: normal;
  vertical-align: bottom;
}
@media screen and (max-width: 500px) {
  header .partner_logo {
    height: 25px;
  }
  header .partner_name {
    font-size: 20px;
  }
  header img.apj_logo {
    height: 25px;
  }
}
@media screen and (max-width: 400px) {
  header .header_left {
    line-height: 1;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: row;
  }
  header .partner_logo {
    height: 25px;
    vertical-align: middle;
  }
  header .partner_name {
    margin-left: 2px;
    font-size: 16px;
    line-height: 25px;
  }
  header img.apj_logo {
    height: 25px;
  }
}

#footer .footer_top {
  background: #d3e7fc;
  padding: 10px 0;
  text-align: center;
}

#footer .footer_top a {
  display: inline-block;
  padding: 0 20px;
  text-shadow: 1px 1px 1px #fff;
}

#footer .footer_bottom {
  text-align: center;
  background: #191970;
  padding: 10px 0;
  font-size: 14px;
  color: #fff;
}

@media screen and (max-width: 800px) {
  #footer .footer_bottom {
    font-size: 10px;
  }
  #footer .footer_top a {
    width: 100%;
    text-align: left;
    margin: 0;
  }
}
/************************************
 文字
*************************************/
body {
  line-height: 1.4;
  font-family: "Roboto";
}

a {
  color: #191970;
  text-decoration: none;
}

a:hover {
  color: #0056b3;
  text-decoration: none;
}

a.link {
  color: #0000ff;
  text-decoration: underline;
}

a.link:hover {
  color: #ff0000;
}

h2 {
  margin: 30px 0px 20px;
  color: #4a5598;
  font-weight: bold;
  border-bottom: 1px solid #4a5598;
  padding-bottom: 4px;
}

/************************************
 プログレスバー
*************************************/
#progressWindow {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000000;
  width: 100%;
  justify-content: center;
  align-items: center;
}
#progressWindow:after {
  content: "\f110";
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  color: #fff;
  animation: rotation 1.7s linear infinite;
  font-size: 50px;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media screen and (max-width: 991px) {
  #progressWindow {
    position: fixed;
  }
}

/************************************
 装飾
*************************************/
.bordered {
  color: #666;
  border: 1px solid #6b82b2;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3098039216);
  border-radius: 2px;
  color: #666;
  padding: 20px 20px;
}

.gold {
  text-shadow: 1px 1px 1px #fff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.32);
  border-radius: 1px;
  background: #fceabb;
  background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
  background: -webkit-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
  background: linear-gradient(to bottom, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fceabb", endColorstr="#fbdf93",GradientType=0 );
}

/************************************
 フォーム
*************************************/
form div.error {
  color: #ff0000;
  font-size: 80%;
}

form div.warning {
  color: #ff0000;
  font-size: 76%;
}

input[type=text],
select {
  border: 1px solid #999;
  padding: 2px 4px;
  border-radius: 4px;
  outline: none;
}

select {
  height: 28px;
  padding: 0px 10px;
}

button {
  cursor: pointer;
}

a.button {
  display: inline-block;
  background-color: #191970;
  color: #eee !important;
  min-width: 80px;
  height: 35px;
  text-align: center;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s;
}
a.button.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}

a.button:hover {
  background: #ff8d27;
}

.buttons {
  margin-top: 20px;
  text-align: center;
}

.buttons > a:nth-child(n+2) {
  margin-left: 10px;
}

dd.date {
  position: relative;
}

span.date {
  position: relative;
  display: inline-block;
}

span.time {
  position: relative;
  display: inline-block;
}

span.date:after,
dd.date:after,
span.time:after,
dd.time:after {
  content: "\f073";
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  position: absolute;
  right: 4px;
  font-size: 19px;
  top: 1px;
  color: #5e7da5;
  pointer-events: none;
}

span.date:after,
dd.date:after {
  content: "\f073";
}

span.time:after,
dd.time:after {
  content: "\f017";
}

input.date,
input.time {
  padding-right: 20px;
  cursor: pointer;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}
input[type=checkbox] + label,
input[type=radio] + label {
  display: inline-block;
  margin-right: 1vw;
  cursor: pointer;
  padding: 4px;
}
input[type=checkbox] + label:before,
input[type=radio] + label:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  margin-right: 4px;
  color: #7c9ec1;
}
input[type=checkbox]:checked + label:before,
input[type=radio]:checked + label:before {
  content: "\f058";
  color: #ff6c00;
  font-weight: 600;
}

input[type=checkbox] + label:before {
  content: "\f0c8";
}

input[type=checkbox]:checked + label:before {
  content: "\f14a";
}

input[type=radio] + label:before {
  content: "\f111";
}

input[type=radio]:checked + label:before {
  content: "\f058";
}

/************************************
 ページTOPボタン
*************************************/
#page_top {
  position: fixed;
  right: 3%;
  bottom: 12px;
  z-index: 99999;
}

#page_top a {
  display: block;
  width: 54px;
  height: 54px;
  font-size: 1.6rem;
  line-height: 50px;
  transition: 0.4s;
  color: #fff;
  text-align: center;
  background: #0067db;
  opacity: 0.8;
}

#page_top a:hover {
  line-height: 38px;
}

/************************************
 進捗バー
*************************************/
.tracker {
  text-align: center;
  font-size: 0;
  line-height: 0;
  margin: 0 1% 10px;
}

.tracker .step {
  position: relative;
  display: inline-block;
  width: 90px;
  vertical-align: top;
  margin-bottom: 4px;
}

.tracker .step:nth-child(n+2):before,
.tracker .step:nth-last-child(n+2):after {
  display: block;
  content: "";
  position: absolute;
  width: 30px;
  height: 4px;
  top: 16px;
  background-color: #9b9b9b;
}

.tracker .step:before {
  left: 0;
}

.tracker .step:after {
  right: 0;
}

.tracker .step.done:before,
.tracker .step.done:after,
.tracker .step.now:before {
  background-color: #3f79e1;
}

.tracker .num {
  margin-top: 4px;
  background-color: #9b9b9b;
  display: inline-block;
  font-weight: bold;
  line-height: 30px;
  width: 30px;
  border-radius: 15px;
  font-size: 14px;
  color: #fff;
}

.tracker .step.done .num {
  background-color: #3f79e1;
}

.tracker .step.now .num {
  background-color: #04d900;
}

.tracker .text {
  margin-top: 2px;
  font-size: 11px;
  color: #666;
  line-height: 1.1;
}

/************************************
 部屋情報
*************************************/
#roomInfo {
  border: 1px solid #a3bed4;
  padding: 6px 2%;
  border-radius: 4px;
  color: #666;
  background-color: #e9faff;
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.31);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.31);
  width: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9fdff+0,e8f8ff+100 */
  background: #f9fdff; /* Old browsers */
  background: -moz-linear-gradient(top, #f9fdff 0%, #e8f8ff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f9fdff 0%, #e8f8ff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f9fdff 0%, #e8f8ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f9fdff", endColorstr="#e8f8ff",GradientType=0 ); /* IE6-9 */
}

#roomInfo .name {
  display: inline-block;
  font-size: 20px;
  color: #333;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2509803922);
  margin-right: 14px;
}

#roomInfo .code {
  display: inline-block;
  font-size: 70%;
  font-weight: normal;
  display: inline-block;
  color: #777;
}

#roomInfo div.info {
  position: relative;
  padding-left: 24px;
}

#roomInfo > div:nth-child(n+2) {
  margin-top: 6px;
}

#roomInfo i {
  width: 20px;
  position: absolute;
  text-align: center;
  left: 0;
  top: 3px;
}

/************************************
 契約期間
*************************************/
.ContractPeriod {
  text-align: center;
}

.ContractPeriod.decide {
  border: 1px solid #b3ccc2;
  padding: 10px 2%;
  font-size: 15px;
  border-radius: 4px;
  color: #666;
  background-color: #e9faff;
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.31);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.31);
  width: 100%;
  margin-top: 12px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9fdff+0,e8ffe8+100 */
  background: #f9fdff; /* Old browsers */
  background: -moz-linear-gradient(top, #f9fdff 0%, #e8ffe8 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f9fdff 0%, #e8ffe8 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f9fdff 0%, #e8ffe8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f9fdff", endColorstr="#e8ffe8",GradientType=0 ); /* IE6-9 */
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.ContractPeriod dl {
  display: inline-block;
  margin: 5px;
  vertical-align: top;
  width: 140px;
}
.ContractPeriod dl.term {
  width: 180px;
}
.ContractPeriod dl.residents {
  width: 90px;
}

.ContractPeriod.decide dl {
  width: 120px;
}
.ContractPeriod.decide dl dd.residents i {
  margin-right: 20px;
}

.ContractPeriod dt {
  width: 100%;
  font-size: 80%;
  text-align: left;
  color: #888;
  font-weight: normal;
}

.ContractPeriod dd {
  width: 100%;
  text-align: left;
}

.ContractPeriod dd span {
  display: block;
  text-align: center;
}

.ContractPeriod dd input,
.ContractPeriod dd select {
  width: 100%;
  text-align: center;
}

.ContractPeriod dd select[name=residents] {
  padding-left: 30px;
}

/************************************
 アイコン
*************************************/
i.area {
  width: 31px;
  height: 32px;
  background: url(/images/portal/portal_common/icon_area01.png) left center no-repeat;
}

i.size {
  width: 34px;
  height: 32px;
  background: url(/images/portal/portal_common/icon_size02.png) left center no-repeat;
}

/************************************
 申込完了
*************************************/
section.complete_contract p {
  color: #333;
  margin-bottom: 20px;
}
section.complete_contract .buttons {
  margin-top: 40px;
}
section.complete_contract .box1 {
  display: inline-block;
  margin: 0px auto;
  width: 43%;
  height: auto;
  padding: 70px 20px;
  text-align: center;
  vertical-align: top;
}
@media screen and (max-width: 991px) {
  section.complete_contract .box1 {
    width: 100%;
    padding: 0px;
    margin-bottom: 0.5em;
  }
}
section.complete_contract .box1 img {
  width: 100%;
}
@media screen and (max-width: 991px) {
  section.complete_contract .box1 img {
    width: 60%;
  }
}
@media screen and (max-width: 414px) {
  section.complete_contract .box1 img {
    width: 80%;
  }
}
section.complete_contract .box2 {
  display: inline-block;
  width: 56%;
}
@media screen and (max-width: 991px) {
  section.complete_contract .box2 {
    width: 100%;
  }
}

/************************************
 予約完了画面_SNSシェア
*************************************/
.share_with {
  text-align: left;
  font-size: 23px;
  margin-top: 20px;
  margin-left: 20px; /* 右寄りにするための調整 */
}

.sns_icons {
  display: flex; /* アイコンを横並びに */
  justify-content: left; /* アイコンを中央寄せ */
  align-items: center; /* アイコンを垂直方向で中央寄せ */
  margin-top: 20px;
  margin-bottom: 40px; /* フッターとの間に余白を追加 */
  gap: 15px; /* アイコン間の余白を追加 */
  margin-left: 20px; /* 右寄りにするための調整 */
}

.sns_icons a {
  display: inline-block;
  width: 40px; /* アイコンの幅 */
  height: 40px; /* アイコンの高さ */
  background-size: cover;
  background-repeat: no-repeat;
  flex-shrink: 0; /* アイコンが縮まないように設定 */
  transition: box-shadow 0.3s ease;
}

/* Xアイコンにカスタム画像を設定 */
.sns_icons a.X-link {
  background-image: url("/images/portal/portal_common/x.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Facebookアイコンにカスタム画像を設定 */
.sns_icons a.facebook-link {
  background-image: url("/images/portal/portal_common/Facebook.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* LinkedInアイコンにカスタム画像を設定 */
.sns_icons a.linkedin-link {
  background-image: url("/images/portal/portal_common/LinkedIn.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* linkCopyアイコンにカスタム画像を設定 */
.sns_icons a.linkCopy {
  background-image: url("/images/portal/portal_common/LinkCopy.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/************************************
 契約内容確認画面
*************************************/
#confirm_contract {
  font-size: 12px;
  margin: 30px;
}
@media screen and (max-width: 414px) {
  #confirm_contract {
    margin: 30px 10px 30px 10px;
  }
}
#confirm_contract .indent1 {
  margin-left: 20px;
}
#confirm_contract .indent2 {
  margin-left: 40px;
}
#confirm_contract .indent1_2 {
  margin-left: 15px;
}
#confirm_contract .indent1_2 dd {
  margin-left: 5px;
}
#confirm_contract dl {
  display: flex;
  column-gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
  #confirm_contract .payment-row {
    flex-wrap: nowrap !important;
  }
}
#confirm_contract dt {
  display: flex;
  gap: 10px;
  min-width: 160px;
}
#confirm_contract dd {
  margin-left: 20px;
  flex-grow: 1;
}
#confirm_contract h3 {
  margin: 20px 0 10px;
  color: #94752c;
  font-weight: bold;
}
#confirm_contract .details {
  width: 380px;
}
@media screen and (max-width: 414px) {
  #confirm_contract .details {
    width: 100%;
  }
}
#confirm_contract .details dl {
  margin-bottom: 4px;
}
#confirm_contract .details dd {
  margin-left: 0px;
  text-align: right;
  flex-grow: 1;
}
#confirm_contract .details dl.subTotal {
  border-top: 1px solid #999;
}
@media screen and (max-width: 767px) {
  #confirm_contract #confirm_contract dl .amount-line {
    display: flex;
    flex-wrap: nowrap !important;
  }
  #confirm_contract #confirm_contract .note-sp {
    display: none !important;
  }
}
#confirm_contract .amount-line {
  margin-left: 0;
}
@media screen and (min-width: 767px) {
  #confirm_contract .amount {
    display: inline-block;
    width: 120px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    margin-left: 50px;
  }
}
#confirm_contract .note-pc {
  display: inline;
  text-align: right;
  margin-left: 20px;
}
@media screen and (max-width: 767px) {
  #confirm_contract .note-pc {
    display: none;
  }
}
#confirm_contract .note-sp {
  display: none;
  font-size: 100%;
}
@media screen and (max-width: 767px) {
  #confirm_contract .note-sp {
    display: block;
    white-space: nowrap;
    margin-left: 30px;
  }
  #confirm_contract .amount-line {
    display: flex;
  }
  #confirm_contract .payment-row dd {
    display: block;
  }
  #confirm_contract .amount {
    margin-left: 0px;
    text-align: right;
    flex-grow: 1;
  }
  #confirm_contract .payment-row dt {
    display: block;
  }
}

/************************************
 contact lessorポップアップ
*************************************/
#wrapper {
  position: relative; /* 親要素を基準にする */
}

.contact-lessor {
  position: absolute; /* 親要素に対して絶対位置を指定 */
  bottom: 15px; /* 下からの距離 */
  right: 15px; /* 右からの距離 */
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1.5px solid #000;
  border-radius: 8px;
  font-size: 14px;
  background-color: #fff;
  color: #000;
  z-index: 1000;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  display: none; /* 最初は非表示 */
}

.contact-lessor i {
  font-family: "Font Awesome 5 Pro";
}

.fa-question {
  margin-right: 1px; /* アイコンと文字の間に余白を追加 */
  font-size: 12px;
  transform: translateY(-2px); /* ? を少し上に移動 */
}

.text {
  margin-right: 8px;
}

/* Closeボタンのスタイル */
.close-btn {
  background: none;
  border: 1px solid #000; /* 枠線をつける */
  border-radius: 50%; /* 丸い形にする */
  font-size: 7px;
  cursor: pointer;
  width: 0px; /* 幅を小さく */
  height: 13px; /* 高さを小さく */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 外付けで右上にボタンを配置 */
  position: absolute;
  top: -7px;
  right: -7px;
  background-color: #fff; /* 背景色を白にする */
}

.contact-lessor a {
  color: #000 !important; /* 文字色を強制的に黒に固定 */
}

/* タッチデバイスでhoverを制御 */
@media (hover: hover) and (pointer: fine) {
  /* 通常のhover効果を維持（PCなどマウスデバイス用） */
  .contact-lessor:hover,
  .close-btn:hover {
    border: 1px solid #000; /* 枠線を固定 */
    box-shadow: 0 0 10px rgba(0, 150, 255, 0.8), 0 0 20px rgba(25, 0, 255, 0.237); /* 光るエフェクト */
    transition: box-shadow 0.3s ease; /* エフェクトにスムーズな遷移を追加 */
    cursor: pointer; /* ホバー時にクリック可能な状態を示す */
  }
}
@media (hover: none) {
  /* タッチデバイスではhoverを無効に */
  .contact-lessor,
  .close-btn {
    box-shadow: none; /* デフォルトでは光らない */
  }
}
@media screen and (max-width: 768px) {
  .contact-lessor {
    position: absolute; /* 親要素に対して絶対位置を指定 */
    bottom: 15px; /* 下からの距離 */
    right: 15px; /* 右からの距離 */
    display: inline-flex;
    align-items: center;
    padding: 5px 5px;
    border: 1.5px solid #000;
    border-radius: 8px;
    font-size: 10px;
    background-color: #fff;
    color: #000;
    z-index: 1000;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    display: none; /* 最初は非表示 */
  }
  .contact-lessor i {
    font-size: 10px;
  }
  .close-btn {
    background: none;
    border: 1px solid #000; /* 枠線をつける */
    border-radius: 50%; /* 丸い形にする */
    font-size: 0px; /* フォントサイズを小さくする */
    cursor: pointer;
    width: 0px; /* 幅を小さく */
    height: 13px; /* 高さを小さく */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 外付けで右上にボタンを配置 */
    position: absolute;
    top: -6px;
    right: -7px;
    background-color: #fff; /* 背景色を白にする */
  }
}

/*# sourceMappingURL=estimate_common.css.map */