@charset "UTF-8";

/* ================================================

  MISAWA Web Estitimate Step01 PC Renewal Style

================================================ */
.l-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  float: none;
}


/*
  Search Unit
------------------------------------------------ */
.plan-select-unit { padding: 40px 75px 40px 80px; }
.plan-select-unit > h3 {
  font-size: 24px;
  font-size: 2.4rem;
  letter-spacing: -.025em;
  padding: 0 0 10px;
  margin: 0 0 15px;
  border-bottom: solid 3px var(--blk);
}
.plan-select-unit > h3 + p {
  font-size: 14px;
  font-size: 1.4rem;
  color: #5d5d5d;
  margin: 0 0 45px;
}
.plan-select {
  border-left: 0;
  text-align: center;
}
.plan-select:first-of-type { margin: 0 0 55px; }
.plan-select a {
  padding: 20px 10px 25px;
  text-decoration: none;
  color: var(--blk);
  background-color: #ffffff;
  box-shadow: 9px 9px 7px 0 rgba(236,233,223,.35);
  display: block;
  transition: all .3s;
}
.plan-select a:hover { opacity: .7; }
.plan-select h4 {
  position: relative;
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: -.025em;
  font-weight: 400;
  margin: 1.25em 0 0;
}
.plan-select h4 span {
  font-size: calc(24 / 18 * 1em);
  display: inline-block;
  margin: 0 .125em;
}

.inc-select-plan, .inc-select-product {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #f5f1e7;
  overflow-y: scroll;
}

.l-section > .modal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

/*
  "renewal" Config
------------------------------------------------ */
.renewal {
  min-width: 1290px;
  background-color: #f5f1e7;
}
.renewal .l-container { height: auto; }
.renewal .l-header { background-color: #f8f6ef; }
.renewal .l-footer {
  float: none;
  width: 100%;
  margin: 0;
}
.renewal .l-main { padding: 0 0 85px; }

/*
  Section Header
------------------------------------------------ */
.l-section .select-header { padding: 30px 0 10px; }
.l-section .select-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.l-section .select-header h2 {
  width: fit-content;
  font-size: 26px;
  font-size: 2.6rem;
  font-weight: 400;
  padding: 0 1em 5px;
  margin: 0 auto 20px;
  border-bottom: solid 3px var(--blk);
}
.l-section .select-header .sec-heading {
  padding: 0;
  margin: 0;
  border-bottom: none;
}
/*
  Section Heading
------------------------------------------------ */
.sec-heading {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: -.025em;
  font-weight: 400;
}
.sec-heading span { font-size: calc(24 / 18 * 1em); }
.sec-heading small { font-size: calc(14 / 18 * 1em); }

/*
  戻る
------------------------------------------------ */
.return {
  width: fit-content;
  background-color: var(--wht);
  padding: 8px 30px;
}
.return a {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: -.025em;
  color: var(--blk);
  text-decoration: none;
  transition: all .3s;
}
.return a::before {
  content: "←";
  transform: scaleX(1.5);
  display: inline-block;
  margin: 0 10px 0 0;
  transition: all .3s;
}
.return a:hover, .return a:hover::before { opacity: .7; }

/*
  閉じる
------------------------------------------------ */
.close-btn {
  position: fixed;
  z-index: 2;
  top: 30px;
  right: 45px;
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  background-color: var(--wht);
  font-size: 24px;
  font-size: 2.4rem;
  color: #000000;
  text-decoration: none;
}

/*
  選ぶ
------------------------------------------------ */
.select-container {
  max-width: 1290px;
  height: auto;
  margin: 0 auto 20px;
  padding: 35px 45px 25px;
  background-color: var(--wht);
  box-shadow: 9px 9px 7px 0 rgba(236,233,223,.35);
}
#select-product .select-container { padding: 55px 45px 25px; }
.cb-unit {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 60px 15px;
  margin: 0 0 50px;
}
.cb-unit label {
  position: relative;
  cursor: pointer;
  transition: all .3s;
  margin: 0;
}
.cb-unit label.product-name::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: -33px;
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: -.025em;
  background-color: #ffffff;
  display: inline-block;
  padding: 0 15px 0 0;
}
.cb-unit label.pn01::before { content: "SMART STYLE Roomie"; }
.cb-unit label.pn02::before { content: "CENTURY Stylepro"; }
.cb-unit label.pn03::before { content: "SMART STYLE"; }
.cb-unit label.pn04::before { content: "MJ Wood NYSTYLE N"; }

.cb-unit label.product-name::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  height: 1px;
  background-color: #666666;
  display: inline-block;
}
.cb-unit label.pn01::after { width: calc(400% + 45px); }
.cb-unit label.pn02::after { width: 100%; }
.cb-unit label.pn03::after { width: calc(300% + 30px); }
.cb-unit label.pn04::after { width: calc(200% + 15px); }

.cb-unit label figure {
  width: 100%;
  overflow: hidden;
  margin: 0 0 15px;
}
.cb-unit label figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: all .3s;
}
.cb-unit label figure:hover img { opacity: .6; }
.cb-unit label input[type="checkbox"] { display: none; }
.cb-unit label input[type="checkbox"] + p {
  position: relative;
  padding: 0 0 0 25px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.cb-unit label input[type="checkbox"] + p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: solid 1px #c0c6d1;
  background-color: var(--wht);
  display: inline-block;
}
.cb-unit label input[type="checkbox"]:checked + p::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/step01/psr_checked.png) no-repeat 0 0;
  width: 20px;
  height: 20px;
  background-size: cover;
}
.cb-unit label input[type="checkbox"] + p span {
  position: relative;
  top: .1em;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -.025em;
  white-space: nowrap;
  transition: all .3s;
}
#select-product .cb-unit label input[type="checkbox"] + p span {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 5px;
}
.cb-unit label input[type="checkbox"] + p span:hover { opacity: .5; }
.cb-unit label input[type="checkbox"] + p .info-btn {
  position: relative;
  top: .35em;
  flex-shrink: 0;
  margin: 0 0 0 5px;
}
.cb-unit label input[type="checkbox"] + p .info-btn img {
  width: calc(42px * .35);
  height: calc(42px * .35);
}
/*.cb-unit label input[type="checkbox"] + p .info-btn:hover img { opacity: 1; }*/
.cb-unit label small {
  font-size: 12px;
  font-size: 1.2rem;
  display: block;
  text-align: left;
  padding: 0 0 0 25px;
}
.view360 {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: calc(42px * .55 * 1.2) !important;
  height: calc(42px * .55 * 1.2) !important;
  display: inline-block;
}

/*
  条件で絞り込む
------------------------------------------------ */
.filter-trigger {
  position: relative;
  width: 533px;
  background-color: #ede8dc;
  border: solid 1px #ddd4be;
  padding: 10px 0;
  margin: auto;
  text-align: center;
  text-decoration: none;
  color: var(--blk);
  display: block;
  cursor: pointer;
  transition: all .3s;
}
.filter-trigger:hover { opacity: .5; }
.filter-trigger span {
  position: relative;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: -.025em;
}
.filter-trigger span::before {
  content: "＋";
  position: absolute;
  top: 50%;
  left: -40px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: var(--wht);
  display: grid;
  place-content: center;
}

.conditions-unit { display: none; }

.condition-list {
  width: 100%;
  background-color: #ede8dc;
  border: solid 1px #ddd4be;
  padding: 30px 0 35px 60px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0 150px;
}
.condition-list dl dt {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: -.025em;
  margin: 0 0 10px;
}
.condition-list dl dd {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: -.025em;
}
.condition-list dl dd ul li:not(:last-of-type) { margin: 0 0 10px; }
.condition-list dl dd ul li label { cursor: pointer; }
.condition-list dl dd ul li label input[type="checkbox"] { display: none; }
.condition-list dl dd ul li label input[type="checkbox"] + span {
  position: relative;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: -.025em;
  padding: 0 0 0 25px;
  transition: all .3s;
}
.condition-list dl dd ul li label input[type="checkbox"] + span:hover { opacity: .5; }
.condition-list dl dd ul li label input[type="checkbox"] + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: solid 1px #c0c6d1;
  background-color: var(--wht);
  display: inline-block;
}
.condition-list dl dd ul li label input[type="checkbox"]:checked + span::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/step01/psr_checked.png) no-repeat 0 0;
  width: 20px;
  height: 20px;
  background-size: cover;
}

/*
  選択間取り数表示
------------------------------------------------ */
.select-container + .num-disp,
.renewal .num-disp {
  width: 533px;
  height: auto;
  line-height: 115px;
  display: block;
  padding: 0 35px;
  margin: 0 auto 30px;
}
.select-container + .num-disp ul,
.renewal .num-disp ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select-container + .num-disp ul li span,
.renewal .num-disp ul li span { margin: 0 5px 0 50px; }
.select-container + .num-disp .disp-btn,
.renewal .num-disp .disp-btn { width: 150px; }