@charset "UTF-8";
/*==========================================
変数 inc.scss
===========================================*/
/*==========================================
変数 fonts.scss
===========================================*/
/*===================================
userSS 追加
=====================================*/
/*==========================================
 共通
===========================================*/
.breadcrumbs_area {
  margin-bottom: clamp(25px, 4vw, 100px); }
  @media screen and (min-width: 961px) {
    .breadcrumbs_area {
      margin-bottom: 0; } }

.ilstWrap {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }
  .ilstWrap.professor {
    background-image: url("../img/common/ilst-03.svg");
    aspect-ratio: 110/150;
    width: clamp(80px, 11vw, 146px); }
  .ilstWrap.ojigi {
    background-image: url("../img/common/ilst-ojigi.png");
    aspect-ratio: 208/344;
    width: clamp(60px, 10vw, 104px); }

.sale-cnvBlock {
  margin-top: clamp(60px, 12vw, 120px); }
  .sale-cnvBlock .cnv-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap; }
    @media screen and (max-width: 960px) {
      .sale-cnvBlock .cnv-list {
        max-width: 540px;
        width: 100%;
        margin: 0 auto; } }
    .sale-cnvBlock .cnv-list .cnv-item {
      width: 32%;
      text-align: center;
      font-size: clamp(1.2rem, 1.4vw, 2rem);
      position: relative; }
      @media screen and (max-width: 960px) {
        .sale-cnvBlock .cnv-list .cnv-item {
          width: 100%;
          font-size: clamp(1.4rem, 1.6vw, 2rem); }
          .sale-cnvBlock .cnv-list .cnv-item:not(:last-child) {
            margin-bottom: 25px; } }
      .sale-cnvBlock .cnv-list .cnv-item .item-balloon {
        color: var(--brand-secondary);
        font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
        padding: 0 1.3em;
        position: relative;
        width: fit-content;
        margin: 0 auto 1em; }
        .sale-cnvBlock .cnv-list .cnv-item .item-balloon::before, .sale-cnvBlock .cnv-list .cnv-item .item-balloon::after {
          position: absolute;
          bottom: 0; }
        .sale-cnvBlock .cnv-list .cnv-item .item-balloon::before {
          content: "＼";
          left: 0; }
        .sale-cnvBlock .cnv-list .cnv-item .item-balloon::after {
          content: "／";
          right: 0; }
      .sale-cnvBlock .cnv-list .cnv-item .item-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--text-primary2);
        color: #fff;
        position: relative;
        padding: calc(20px + 1em) 0;
        font-size: clamp(1.8rem, 2vw, 2.5rem);
        letter-spacing: 0.15em; }
        .sale-cnvBlock .cnv-list .cnv-item .item-btn::before {
          content: "";
          display: block;
          position: absolute;
          width: calc(100% - 20px);
          height: calc(100% - 20px);
          border: 1px solid var(--brand-primary); }
        .sale-cnvBlock .cnv-list .cnv-item .item-btn .txt {
          display: block; }
        .sale-cnvBlock .cnv-list .cnv-item .item-btn .arw {
          display: flex;
          justify-content: center;
          align-items: center;
          width: clamp(20px, 2.5vw, 25px);
          margin-left: 1em; }
          .sale-cnvBlock .cnv-list .cnv-item .item-btn .arw svg {
            transition: 0.5s ease-in-out; }
            .sale-cnvBlock .cnv-list .cnv-item .item-btn .arw svg polygon {
              fill: var(--brand-primary);
              transition: 0.3s ease-in-out; }
        @media (hover: hover) {
          .sale-cnvBlock .cnv-list .cnv-item .item-btn:hover {
            background: var(--brand-primary); }
            .sale-cnvBlock .cnv-list .cnv-item .item-btn:hover .arw svg {
              transform: rotateX(360deg); }
              .sale-cnvBlock .cnv-list .cnv-item .item-btn:hover .arw svg polygon {
                fill: #fff; } }

/*==========================================
 FV
===========================================*/
.fvBlock .blockRow {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center; }
  @media screen and (max-width: 960px) {
    .fvBlock .blockRow {
      flex-direction: column; } }
  .fvBlock .blockRow .row-head {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50px;
    padding: clamp(300px, 50vw, 550px) 4% 30px;
    width: 65%; }
    @media screen and (min-width: 1361px) {
      .fvBlock .blockRow .row-head {
        width: 70%; } }
    @media screen and (max-width: 960px) {
      .fvBlock .blockRow .row-head {
        width: 100%;
        padding: clamp(160px, 30vw, 550px) 4% 30px;
        margin-top: -15px; } }
    @media screen and (max-width: 767px) {
      .fvBlock .blockRow .row-head {
        border-radius: 25px; } }
  .fvBlock .blockRow .row-body {
    width: 32%;
    position: relative;
    z-index: 1; }
    @media screen and (min-width: 1361px) {
      .fvBlock .blockRow .row-body {
        width: 28%; } }
    @media screen and (max-width: 960px) {
      .fvBlock .blockRow .row-body {
        width: 100%; } }
.fvBlock .fv-point {
  display: flex;
  justify-content: space-between;
  max-width: 596px;
  width: 100%;
  margin: 0 0 0 auto;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; }
  @media screen and (max-width: 960px) {
    .fvBlock .fv-point {
      max-width: 400px; } }
  .fvBlock .fv-point .point-item {
    width: 32%;
    border: 4px solid var(--brand-primary);
    border-radius: 100vmax;
    text-align: center;
    aspect-ratio: 1/1;
    overflow: hidden;
    line-height: 1.1; }
    @media screen and (max-width: 767px) {
      .fvBlock .fv-point .point-item {
        border-width: 2px; } }
    .fvBlock .fv-point .point-item .item-head {
      background: var(--brand-primary);
      color: #fff;
      height: 48%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      letter-spacing: 0.2em; }
    .fvBlock .fv-point .point-item .item-body {
      color: var(--brand-secondary);
      background: #fff;
      height: 52%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .fvBlock .fv-point .point-item .item-body p {
        position: relative;
        top: -0.5em; }
    .fvBlock .fv-point .point-item .lrg {
      font-size: clamp(2.4rem, 3vw, 4rem); }
.fvBlock .fv-ttlWrap {
  font-size: clamp(1.4rem, 2.2vw, 2.4rem);
  text-align: center;
  background: #fff;
  border: 1px solid var(--text-primary);
  border-radius: 50px;
  margin-right: calc(0px - clamp(50px,10vw,120px));
  padding: clamp(30px, 6vw, 60px) 0; }
  @media screen and (max-width: 960px) {
    .fvBlock .fv-ttlWrap {
      margin-right: 0;
      position: relative;
      z-index: 1; } }
  @media screen and (max-width: 767px) {
    .fvBlock .fv-ttlWrap {
      border-radius: 25px; } }
.fvBlock .fv-ttl {
  border-bottom: 1px solid var(--text-primary);
  width: fit-content;
  margin: 0 auto 1em;
  padding: 0 0 1em; }
  .fvBlock .fv-ttl .ttl-ja {
    font-size: clamp(2.6rem, 3.2vw, 5rem);
    letter-spacing: 0.2em; }
.fvBlock .fv-lead {
  letter-spacing: 0.08em; }
  .fvBlock .fv-lead .lrg {
    font-size: clamp(1.8rem, 2rem, 3rem); }
.fvBlock .fv-txtWrap {
  margin-top: clamp(30px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(1.4rem, 1.4vw, 2rem);
  letter-spacing: 0.1em;
  text-align: center; }
  @media screen and (max-width: 960px) {
    .fvBlock .fv-txtWrap {
      font-size: clamp(1.8rem, 1.8vw, 2rem);
      max-width: 400px;
      width: 100%;
      margin: clamp(30px, 4vw, 40px) auto 0; } }
.fvBlock .fv-txt {
  width: calc(100% - clamp(80px,11vw,146px)); }
  @media screen and (min-width: 1361px) {
    .fvBlock .fv-txt {
      width: calc(100% - clamp(80px,14vw,146px)); } }
@media screen and (min-width: 1361px) {
  .fvBlock .ilstWrap.professor {
    width: clamp(80px, 14vw, 146px); } }

/*==========================================
 不動産売却について
こんな「お悩み」はありませんか？
===========================================*/
.sec-problem {
  background: var(--brand-primary);
  color: #fff;
  padding: clamp(60px, 15vw, 150px) 0; }
  .sec-problem .problem-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; }
    .sec-problem .problem-row .row-head {
      width: 45%;
      text-align: center;
      font-size: clamp(2rem, 2.5vw, 3.6rem); }
      @media screen and (max-width: 767px) {
        .sec-problem .problem-row .row-head {
          width: 100%; } }
    .sec-problem .problem-row .row-body {
      width: 45%;
      font-size: clamp(1.6rem, 2vw, 2.4rem);
      letter-spacing: 0.05em;
      position: relative; }
      .sec-problem .problem-row .row-body::before {
        content: "";
        display: block;
        position: absolute;
        background: #fff;
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
        width: clamp(30px, 4vw, 48px);
        aspect-ratio: 48/95;
        left: -17%;
        top: calc(50% - clamp(30px,4vw,45px)); }
      @media screen and (max-width: 767px) {
        .sec-problem .problem-row .row-body {
          margin-top: 80px;
          width: 100%; }
          .sec-problem .problem-row .row-body::before {
            clip-path: polygon(100% 0, 0 0, 50% 100%);
            aspect-ratio: 95/48;
            width: clamp(40px, 9vw, 95px);
            left: calc(50% - clamp(20px,4.5vw,42.5px));
            top: -50px; } }
  .sec-problem .problem-ttl {
    margin-bottom: 0.8em; }
  .sec-problem .problem-ilst {
    width: 60%;
    margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .sec-problem .problem-list {
      width: fit-content;
      margin: 0 auto; } }
  .sec-problem .problem-list li {
    position: relative;
    padding: 0 0 0 1.3em; }
    .sec-problem .problem-list li:not(:last-child) {
      margin-bottom: 1em; }
    .sec-problem .problem-list li::before {
      content: "";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      font-weight: 500;
      position: absolute;
      top: 0;
      left: 0; }

/*==========================================
 イエステーション長野店が選ばれる3つの理由
===========================================*/
.sec-reason {
  margin-top: clamp(60px, 15vw, 150px); }
  .sec-reason .reason-ttl {
    text-align: center;
    font-size: clamp(1.8rem, 2.6vw, 3rem);
    letter-spacing: 0.1em;
    position: relative;
    max-width: 1582px;
    width: 100%;
    margin: 0 auto; }
    .sec-reason .reason-ttl::before, .sec-reason .reason-ttl::after {
      content: "";
      display: block;
      position: absolute;
      bottom: clamp(50px, 10vw, 100px);
      width: clamp(120px, 30vw, 460px);
      height: 1px;
      background: var(--text-primary); }
    .sec-reason .reason-ttl::before {
      left: 0;
      transform: rotate(15deg); }
    .sec-reason .reason-ttl::after {
      right: 0;
      transform: rotate(-15deg); }
    .sec-reason .reason-ttl .ttl-en {
      font-size: clamp(4rem, 6vw, 7rem);
      line-height: 1; }
    .sec-reason .reason-ttl .ttl-ja {
      margin-top: 1em; }
    .sec-reason .reason-ttl .ilstWrap.ojigi {
      margin: 25px auto 0; }
  .sec-reason .reason-list {
    margin: clamp(80px, 22vw, 240px) auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1410px;
    width: 100%; }
    @media screen and (max-width: 960px) {
      .sec-reason .reason-list {
        margin-top: clamp(40px, 10vw, 100px); } }
    .sec-reason .reason-list .reason-item {
      width: 32%;
      position: relative;
      font-size: clamp(1.6rem, 2vw, 2rem); }
      .sec-reason .reason-list .reason-item:nth-of-type(3n+1) {
        margin-top: calc(0px - clamp(60px,15vw,150px)); }
      .sec-reason .reason-list .reason-item:nth-of-type(3n) {
        margin-top: clamp(60px, 15vw, 150px); }
      @media screen and (max-width: 960px) {
        .sec-reason .reason-list .reason-item {
          width: 48%; }
          .sec-reason .reason-list .reason-item:nth-of-type(3n+1), .sec-reason .reason-list .reason-item:nth-of-type(3n) {
            margin-top: 0; }
          .sec-reason .reason-list .reason-item:nth-of-type(n+3) {
            margin-top: clamp(40px, 6vw, 60px); }
          .sec-reason .reason-list .reason-item:nth-of-type(2n) {
            margin-top: clamp(60px, 10vw, 100px); } }
      @media screen and (max-width: 576px) {
        .sec-reason .reason-list .reason-item {
          width: 100%; }
          .sec-reason .reason-list .reason-item:nth-of-type(2n) {
            margin-top: 0; }
          .sec-reason .reason-list .reason-item:nth-of-type(n+2) {
            margin-top: clamp(60px, 10vw, 100px); } }
      .sec-reason .reason-list .reason-item .item-num {
        font-size: min(40vw, 412px);
        line-height: 0.9;
        color: var(--brand-primary);
        font-weight: 900;
        opacity: 0.2;
        position: absolute;
        top: -0.2em;
        left: 0;
        z-index: -1; }
      .sec-reason .reason-list .reason-item .item-inner {
        width: 70%;
        margin: 0 0 0 auto; }
      .sec-reason .reason-list .reason-item .item-ttl {
        font-size: clamp(1.8rem, 2.6vw, 4rem);
        letter-spacing: 0.08em; }
        @media screen and (max-width: 576px) {
          .sec-reason .reason-list .reason-item .item-ttl {
            font-size: clamp(2.2rem, 2.6vw, 4rem); } }
      .sec-reason .reason-list .reason-item .item-txt {
        margin-top: 1.5em; }
        .sec-reason .reason-list .reason-item .item-txt .ark {
          font-size: clamp(1.4rem, 1.6vw, 1.6rem); }
      .sec-reason .reason-list .reason-item .item-img {
        margin-top: -3em;
        width: 45%; }
        .sec-reason .reason-list .reason-item .item-img.sml {
          width: 33%; }

/*==========================================
 売却方法は2種類
===========================================*/
.sec-type .type-ttl {
  max-width: 763px;
  width: 90%;
  border-bottom: 1px solid var(--text-primary);
  text-align: center;
  margin: 0 auto clamp(40px, 8vw, 80px);
  font-size: clamp(1.8rem, 2.2vw, 2.2rem);
  letter-spacing: 0.1em;
  position: relative;
  padding: 0 0 1.8em; }
  .sec-type .type-ttl .ttl-main {
    font-size: clamp(3rem, 5vw, 7rem);
    line-height: 1; }
  .sec-type .type-ttl .ttl-sub {
    margin-top: 1em; }
  .sec-type .type-ttl .ilstWrap.professor {
    position: absolute;
    width: clamp(55px, 11vw, 146px);
    right: calc(0px - clamp(43px,11vw,146px));
    bottom: 0; }
    @media screen and (max-width: 1200px) {
      .sec-type .type-ttl .ilstWrap.professor {
        right: -8%; } }
.sec-type .type-lead {
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--brand-secondary);
  margin-bottom: clamp(30px, 6vw, 60px); }
  .sec-type .type-lead .lrg {
    font-size: clamp(2.4rem, 3.6vw, 4rem); }

/*==========================================
 不動産売却の相談
===========================================*/
.sec-saleFlow {
  background: url("../img/sale/flow/mainimg.jpg") no-repeat center bottom 25%/cover;
  position: relative;
  color: #fff; }
  .sec-saleFlow::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.65); }
  .sec-saleFlow .wrapW {
    position: relative; }
  .sec-saleFlow .saleF-ttl {
    font-size: clamp(3rem, 6vw, 7rem);
    letter-spacing: 0.1em;
    margin-bottom: 0.5em; }
  .sec-saleFlow .saleF-cts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: clamp(1.6rem, 2vw, 2.2rem);
    max-width: 695px;
    width: 100%; }
    @media screen and (max-width: 767px) {
      .sec-saleFlow .saleF-cts {
        display: block; } }
    .sec-saleFlow .saleF-cts .cts-head {
      width: clamp(100%-clamp(170px, 19vw, 190px)); }
      @media screen and (max-width: 767px) {
        .sec-saleFlow .saleF-cts .cts-head {
          width: 100%; } }
    .sec-saleFlow .saleF-cts .cts-body {
      min-width: clamp(150px, 17vw, 170px); }
      @media screen and (max-width: 767px) {
        .sec-saleFlow .saleF-cts .cts-body {
          width: 100%;
          margin-top: 40px; } }

/*==========================================
 よくある質問
===========================================*/
.sec-faq {
  background: #ededed;
  padding: clamp(60px, 15vw, 150px) 0 clamp(40px, 10vw, 120px); }
  .sec-faq .faq-inner {
    background: #fff;
    padding: clamp(40px, 12vw, 120px) 4% clamp(60px, 15vw, 150px); }
  .sec-faq .faq-list {
    max-width: 1044px;
    width: 100%;
    margin: clamp(30px, 6vw, 60px) auto 0; }
    .sec-faq .faq-list .faq-item {
      font-size: clamp(1.6rem, 2vw, 2.2rem); }
      .sec-faq .faq-list .faq-item:not(:last-child) {
        margin-bottom: clamp(15px, 2vw, 25px); }
      .sec-faq .faq-list .faq-item .item-head {
        border: 1px solid var(--text-primary);
        border-radius: 100vmax;
        height: clamp(50px, 7vw, 76px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px 0 0;
        background: #fff;
        z-index: 1;
        position: relative;
        transition: 0.3s ease-in-out;
        cursor: pointer; }
        @media (hover: hover) {
          .sec-faq .faq-list .faq-item .item-head:hover {
            background: var(--brand-primaryL); } }
        .sec-faq .faq-list .faq-item .item-head.open {
          background: var(--brand-primaryL); }
          .sec-faq .faq-list .faq-item .item-head.open .item-openBtn .icon {
            background: #fff;
            color: var(--brand-primary); }
      .sec-faq .faq-list .faq-item .item-q {
        font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
        background: var(--text-primary);
        color: var(--brand-primary);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100vmax;
        width: clamp(50px, 7vw, 76px);
        min-width: clamp(50px, 7vw, 76px);
        aspect-ratio: 1/1;
        font-size: clamp(2rem, 3vw, 3rem);
        line-height: 1; }
      .sec-faq .faq-list .faq-item .item-ttl {
        width: calc(100% - clamp(100px,20vw,210px));
        padding: 0 1em;
        line-height: 1.2; }
        @media screen and (max-width: 960px) {
          .sec-faq .faq-list .faq-item .item-ttl {
            width: calc(100% - clamp(50px,7vw,76px)); } }
      .sec-faq .faq-list .faq-item .item-openBtn {
        font-size: clamp(1.4rem, 1.6vw, 1.6rem);
        display: flex;
        align-items: center; }
        @media screen and (max-width: 960px) {
          .sec-faq .faq-list .faq-item .item-openBtn {
            display: none; } }
        .sec-faq .faq-list .faq-item .item-openBtn .icon {
          margin-left: 0.5em;
          font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
          background: var(--brand-primary);
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          width: clamp(32px, 4vw, 42px);
          aspect-ratio: 1/1;
          border-radius: 100vmax;
          transition: 0.3s ease-in-out; }
      .sec-faq .faq-list .faq-item .item-body {
        display: none;
        margin-top: calc(0px - clamp(25px,3.5vw,38px));
        border: 1px solid var(--text-primary);
        border-top: none;
        border-radius: 0 0 50px 50px;
        padding: clamp(60px, 8vw, 80px) 4% clamp(30px, 6vw, 60px); }
        @media screen and (max-width: 767px) {
          .sec-faq .faq-list .faq-item .item-body {
            border-radius: 0 0 25px 25px; } }
      .sec-faq .faq-list .faq-item .item-answer {
        max-width: 795px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between; }
        .sec-faq .faq-list .faq-item .item-answer .answer-ttl {
          font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
          color: var(--brand-primary);
          font-size: clamp(2.2rem 0.3vw, 3rem);
          min-width: 1.5em; }
        .sec-faq .faq-list .faq-item .item-answer .answer-txt {
          width: 100%;
          line-height: 2; }
          @media screen and (max-width: 767px) {
            .sec-faq .faq-list .faq-item .item-answer .answer-txt {
              line-height: 1.8; } }
      .sec-faq .faq-list .faq-item .item-close {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: clamp(1.4rem, 1.6vw, 1.6rem);
        width: fit-content;
        margin: clamp(25px, 4vw, 40px) auto 0; }
        .sec-faq .faq-list .faq-item .item-close .icon {
          margin-left: 0.5em;
          background: var(--brand-primary);
          display: flex;
          justify-content: center;
          align-items: center;
          width: clamp(32px, 4vw, 42px);
          aspect-ratio: 1/1;
          border-radius: 100vmax;
          transition: 0.3s ease-in-out; }
          .sec-faq .faq-list .faq-item .item-close .icon span {
            position: relative;
            display: block;
            width: clamp(12px, 1.5vw, 15px);
            aspect-ratio: 1/1; }
            .sec-faq .faq-list .faq-item .item-close .icon span::before, .sec-faq .faq-list .faq-item .item-close .icon span::after {
              content: "";
              width: clamp(12px, 1.5vw, 15px);
              height: 1px;
              background: #fff;
              position: absolute;
              top: 50%; }
            .sec-faq .faq-list .faq-item .item-close .icon span::before {
              transform: rotate(45deg);
              left: 0; }
            .sec-faq .faq-list .faq-item .item-close .icon span::after {
              transform: rotate(-45deg);
              right: 0; }
        @media (hover: hover) {
          .sec-faq .faq-list .faq-item .item-close:hover .icon {
            background: var(--text-primary2); } }

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