@charset "UTF-8";
/*==========================================
変数 inc.scss
===========================================*/
/*==========================================
変数 fonts.scss
===========================================*/
/*===================================
userSS 追加
=====================================*/
/*==========================================
 共通
===========================================*/
.wbr_txt {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.sec-ttlR {
  text-align: center;
  font-family: "Yu Mincho", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  letter-spacing: 0.1em;
  font-size: clamp(1.8rem, 2vw, 2rem);
}
.sec-ttlR.ttlMB {
  margin-bottom: clamp(30px, 6vw, 60px);
}

.sec-subttlR {
  font-family: "Yu Mincho", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  font-size: clamp(1.6rem, 3vw, 3.6rem);
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .sec-subttlR {
    letter-spacing: normal;
    line-height: 1.75;
  }
}

.basic-txtR {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .basic-txtR {
    line-height: 1.75;
  }
}
@media screen and (min-width: 961px) {
  .basic-txtR.taC_pc {
    text-align: center;
  }
}
.basic-txtR p:not(:last-child) {
  margin-bottom: 1.5em;
}

.secC_MB {
  margin-bottom: clamp(80px, 15vw, 150px);
}

.secC_MB_ttl {
  margin-bottom: clamp(60px, 10vw, 100px);
}

/*インテリアコーディネイターカルーセル*/
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/*==========================================
 COMPANY HEAD (LEAD)
===========================================*/
.flow-head {
  margin-top: -50px;
  min-height: 100vh;
  padding: clamp(30px, 6vw, 60px) 0 40px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 70%), url("../img/flow/main_fv.jpg") center/cover no-repeat;
  position: relative;
}
.flow-head .catch {
  position: absolute;
  left: clamp(20px, 6vw, 80px);
  bottom: clamp(40px, 8vw, 100px);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 767px) {
  .flow-head .catch {
    bottom: 23%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
  }
}
.flow-head .catch .lead-ctsBlock {
  margin-top: clamp(60px, 8vw, 80px);
}
.flow-head .catch .lead-ctsBlock .lead-ttl {
  font-family: "Yu Mincho", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  letter-spacing: 0.1em;
  font-size: clamp(2.4rem, 4vw, 4.8rem);
}
.flow-head .catch .lead-ctsBlock .lead-subttl {
  font-size: clamp(1.8rem, 2.1vw, 2.1rem);
  margin: clamp(40px, 8vw, 80px) auto clamp(20px, 4vw, 40px);
  line-height: 2.25;
}

/*==========================================
まずは全体で把握
===========================================*/
@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.first .step-marquee {
  overflow: hidden;
  color: #FF4E00;
  padding: 16px 0;
}
.first .step-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.first .step-marquee__base {
  white-space: nowrap;
  font-size: clamp(30px, 10vw, 170px);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: "Bodoni Moda", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.first .select_land {
  display: flex;
  justify-content: center;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
@media screen and (max-width: 767px) {
  .first .select_land {
    flex-direction: column;
  }
}
.first .select_land-item {
  flex: 1;
}
.first .select_land-item:first-child {
  border-right: 1px solid #000;
}
@media screen and (max-width: 767px) {
  .first .select_land-item:first-child {
    border-right: none;
  }
}
.first .select_land-item .item-ttl {
  text-align: center;
  font-size: clamp(1.8rem, 1.8vw, 2.4rem);
  padding: clamp(20px, 4vw, 40px) 0;
  border-bottom: 1px solid #000;
}
@media screen and (max-width: 767px) {
  .first .select_land-item .item-ttl {
    border-top: 1px solid #000;
  }
}
.first .select_land-item .item-text {
  width: 70%;
  margin: clamp(20px, 4vw, 60px) auto clamp(30px, 6vw, 150px);
}
.first .lead {
  padding: 0 clamp(20px, 4vw, 50px);
}

/* ===============================
  flow
================================= */
.layout {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  margin: 0;
}
@media (max-width: 1600px) {
  .layout .none_1600 {
    display: none;
  }
}
.layout .left,
.layout .right {
  flex: 1;
  background: #1d2223;
  color: #fff;
  height: 100vh;
  position: sticky;
  top: 0;
  min-width: 220px;
  z-index: 2;
}
.layout .left__inner {
  height: 100%;
  padding: clamp(30px, 6vw, 80px) clamp(20px, 2.08vw - 15px, 30px);
  display: flex;
  flex-direction: column;
  font-family: "Yu Mincho", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
}
.layout .left__inner .txt-catch {
  font-size: clamp(1.6rem, 1.0416666667vw, 2rem);
  margin-bottom: 20px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 4px 10px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 960px) {
  .layout .left__inner {
    font-size: clamp(1.6rem, 2.0833333333vw, 2rem);
  }
}
.layout .left__inner .txt-ja {
  font-size: clamp(2.2rem, 2.5vw, 4.8rem);
  line-height: 2;
  letter-spacing: 0.1em;
  word-break: break-all;
}
@media screen and (max-width: 960px) {
  .layout .left__inner .txt-ja {
    font-size: clamp(2.2rem, 5vw, 4.8rem);
  }
}
.layout .left__inner .num {
  display: flex;
  align-items: baseline;
  color: #FF4E00;
  font-family: "Bodoni Moda", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: clamp(4rem, 10vw, 10rem);
}
.layout .left__inner .num .stepLabel {
  font-size: clamp(6rem, 5.2083333333vw, 10rem);
  letter-spacing: 0.05em;
}
@media screen and (max-width: 960px) {
  .layout .left__inner .num .stepLabel {
    font-size: clamp(4rem, 8.3333333333vw, 8rem);
  }
}
.layout .left__inner .num .stepNumber {
  font-size: clamp(8rem, 6.25vw, 12rem);
}
@media screen and (max-width: 960px) {
  .layout .left__inner .num .stepNumber {
    font-size: clamp(8rem, 10.4166666667vw, 10rem);
  }
}
.layout {
  /*真ん中*/
}
.layout .center {
  flex: 0 0 750px;
  width: 750px;
  margin: 0;
  position: relative;
  z-index: 1;
}
.layout .content {
  padding: clamp(30px, 6vw, 70px) 0;
  position: relative;
  border-bottom: 1px solid #000;
}
.layout .content:not(.no-line):not(:last-of-type):after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-2 * clamp(50px, 12vw, 120px) / 3);
  transform: translateX(-50%);
  width: 1px;
  height: clamp(50px, 12vw, 120px);
  background: #333;
}
.layout .content:not(.no-line):not(:last-of-type)::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-2 * clamp(50px, 12vw, 120px) / 3);
  transform: translate(-50%, 50%);
  width: 12px;
  height: 12px;
  background: orange;
  border-radius: 50%;
  z-index: 2;
}
.layout .content h2 {
  margin: clamp(30px, 6vw, 70px) auto;
  font-size: clamp(2rem, 5vw, 2.4rem);
  font-family: "Yu Mincho", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  text-align: center;
}
.layout .content .txtarea {
  padding: 0 clamp(20px, 4vw, 50px);
}
.layout .content .txtarea .txt {
  letter-spacing: 0.1em;
  font-size: clamp(1.6rem, 2vw, 1.8rem);
  line-height: 2;
}
.layout .content .txtarea .txt.ttlMB {
  margin-bottom: clamp(30px, 6vw, 60px);
}
.layout .content .head_ttl02 {
  font-family: "Yu Gothic", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif;
  text-align: left;
  font-size: clamp(1.8rem, 3vw, 2.1rem);
  padding: 0 clamp(20px, 4vw, 50px);
  font-weight: bold;
  margin-bottom: clamp(20px, 4vw, 40px);
}
.layout .content .head_ttl02::after {
  content: "";
  display: block;
  width: clamp(30px, 5vw, 78px);
  height: 9px;
  background-color: #FF4E00;
  margin-top: 15px;
}
.layout .content {
  /*content1*/
}
.layout .content.c01 {
  padding-bottom: 0;
  border: none;
  background: url("../img/flow/step1_bg.jpg") center/cover no-repeat;
}
.layout .content.c01 .contact .contact-list {
  width: 100%;
  display: flex;
}
.layout .content.c01 .contact .contact-list .contact-item:first-child {
  width: 50%;
  border-right: 1px solid #000;
}
@media screen and (max-width: 1200px) {
  .layout .content.c01 .contact .contact-list .contact-item:first-child {
    border-left: 1px solid #000;
  }
}
.layout .content.c01 .contact .contact-list .contact-item:nth-child(2) {
  width: 50%;
  border-bottom: 1px solid #000;
}
.layout .content {
  /*content3*/
}
.layout .content.c03 {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("../img/flow/step3_bg.jpg") center/cover no-repeat;
}
.layout .content.c03 .wht {
  color: #fff;
}
.layout .content.c03 .head_ttl02,
.layout .content.c03 .pd_d {
  padding: 0;
}
.layout .content {
  /*content4*/
}
.layout .content.c04 .planlist {
  position: relative;
  margin-bottom: clamp(40px, 8vw, 60px);
}
.layout .content.c04 .planlist::before {
  content: "PLAN";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(80px, 20vw, 230px);
  line-height: 1;
  color: #041441;
  z-index: 0;
  pointer-events: none;
  font-family: "Bodoni Moda", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.layout .content.c04 .planlist .plan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding-top: clamp(110px, 20vw, 130px);
  max-width: 600px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .layout .content.c04 .planlist .plan {
    gap: 20px 30px;
  }
}
@media screen and (min-width: 577px) {
  .layout .content.c04 .planlist .plan {
    padding-top: clamp(80px, 15vw, 160px);
  }
}
.layout .content.c04 .planlist .plan li {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #041441;
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  font-weight: bold;
  border-radius: 50%;
  background-color: #fff;
  z-index: 3;
  aspect-ratio: 1/1;
  width: calc(50% - 10px);
  max-width: 150px;
}
@media screen and (min-width: 768px) {
  .layout .content.c04 .planlist .plan li {
    width: calc(33.333% - 20px);
    max-width: 175px;
  }
  .layout .content.c04 .planlist .plan li:nth-child(n+4) {
    margin-top: -30px;
  }
}
.layout .content {
  /*content07*/
}
.layout .content.c07 .img_scroll {
  overflow: hidden;
  width: 100%;
}
.layout .content.c07 .img_scroll .scroll_list {
  display: flex;
  width: max-content;
  animation: scrollLeft 10s linear infinite;
}
.layout .content.c07 .img_scroll .scroll_list li {
  flex: 0 0 auto;
}
.layout .content {
  /*end*/
}
.layout .content.end {
  background: url("../img/flow/end_bg.jpg") center/cover no-repeat;
  padding-bottom: clamp(500px, 20vw, 300px);
}
.layout .content.end h2 {
  margin-top: 0;
}
.layout .content.end .txt_bold {
  font-weight: bold;
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  text-align: center;
  margin: clamp(30px, 6vw, 40px) auto;
}
.layout {
  /*右*/
}
.layout .right {
  padding: clamp(30px, 6.94vw - 53.33px, 80px) clamp(20px, 2.78vw - 13.33px, 40px);
  display: flex;
  justify-content: center;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.layout .right::-webkit-scrollbar {
  display: none;
}
.layout .right .nav {
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 6vw, 80px) 0;
  gap: clamp(10px, 1.5vh, 16px);
}
.layout .right .nav__link {
  color: #a33303;
  text-decoration: none;
  transition: 0.3s;
  font-size: clamp(14px, 1.2vw, 18px);
}
.layout .right .nav__link.active {
  font-weight: bold;
  color: #FF4E00;
}

@media screen and (max-height: 650px) {
  .tablet .left__inner {
    padding: 80px 10px 20px 20px;
  }
  .tablet .left__inner .sec_MB {
    margin-bottom: 0;
  }
  .tablet .left__inner .txt-catch {
    margin-bottom: 10px;
    font-size: 1.8rem;
  }
  .tablet .left__inner .txt-ja {
    font-size: 2.4rem;
    line-height: 1.5;
  }
  .tablet .left__inner .num .stepLabel,
  .tablet .left__inner .num .stepNumber {
    font-size: 6rem;
  }
}
@media screen and (max-width: 1200px) {
  .layout {
    display: block;
  }
  .layout .center {
    width: 100%;
    max-width: none;
  }
  .layout .left,
  .layout .right {
    display: none;
  }
  .layout .content {
    min-height: auto;
    padding: 80px 24px;
  }
}

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