@charset "UTF-8";
.common_fv {
  background-image: url(../img/sales/flow/main_image.jpg);
}
@media screen and (min-width: 770px) {
  #flow_conts {
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    background-repeat: repeat;
  }
  #flow_conts .section_01_bg {
    clear: both;
    float: left;
    width: 100%;
    margin-bottom: 119px;
  }
  #flow_conts .section_01 {
    width: 1100px;
    min-height: 400px;
    padding: 11px 550px 0 0;
    box-sizing: border-box;
    position: relative;
    margin-inline: auto;
  }
  #flow_conts .section_01 .title_section {
    font-size: 36px;
    line-height: 1.7;
    margin-bottom: 20px;
  }
  #flow_conts .section_01 .img {
    width: calc(50vw - 77px);
    height: 400px;
    position: absolute;
    top: 0;
    left: calc(50% + 77px);
    margin: 0;
    overflow: hidden;
  }
  #flow_conts .section_01 .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #flow_conts .section_01 .text {
    line-height: 2;
  }
  #flow_conts .bg_wrapper {
    clear: both;
    float: left;
    width: 100%;
    padding-bottom: 125px;
    background-color: var(--color-bg-main);
    background-image: url(../img/sales/flow/flow_bg_01.png), url(../img/sales/flow/flow_bg_02.png);
    background-repeat: no-repeat;
    background-position: center top 221px, center top 906px;
    background-size: 1100px;
    position: relative;
  }
  #flow_conts .bg_wrapper .number {
    width: 54px;
  }
  #flow_conts .bg_wrapper .title {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
  }
  #flow_conts .section_02_bg {
    clear: both;
    float: left;
    width: 100%;
    padding-top: 131px;
    height: 653px;
    position: relative;
  }
  #flow_conts .section_02 {
    width: 1100px;
    font-size: 12px;
    line-height: 1.67;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    position: relative;
  }
  #flow_conts .section_02 .s_title {
    text-align: center;
    font-size: 36px;
    line-height: 1.3;
    margin-bottom: 22px;
  }
  #flow_conts .section_02 .box_01 {
    width: 466px;
    position: absolute;
    left: 186px;
    top: 107px;
  }
  #flow_conts .section_02 .box_01 .number {
    margin-left: 16px;
    margin-bottom: 8px;
  }
  #flow_conts .section_02 .box_01 .title {
    margin-bottom: 44px;
  }
  #flow_conts .section_02 .box_01 .text_01 {
    width: 247px;
    position: absolute;
    top: 36px;
    left: 203px;
  }
  #flow_conts .section_02 .box_01 .text_02 {
    width: 247px;
    position: absolute;
    top: 105px;
    left: 203px;
  }
  #flow_conts .section_02 .box_01 .red {
    color: #eb5402;
  }
  #flow_conts .section_02 .box_01 .button {
    width: 215px;
    position: absolute;
    top: 342px;
    left: 90px;
  }
  #flow_conts .section_02 .box_02 {
    width: 386px;
    position: absolute;
    left: 682px;
    top: 168px;
  }
  #flow_conts .section_02 .box_02 .number {
    margin-left: 25px;
    margin-bottom: 10px;
  }
  #flow_conts .section_02 .box_02 .title {
    margin-bottom: 44px;
  }
  #flow_conts .section_02 .box_02 .text {
    width: 210px;
    margin-left: 137px;
    margin-top: -104px;
  }
  #flow_conts .section_02 .box_03 {
    text-align: center;
    width: 232px;
    position: absolute;
    left: 801px;
    top: 288px;
    z-index: 9999;
  }
  #flow_conts .section_02 .box_03 dl dt {
    font-size: 16px;
    margin-bottom: 2px;
  }
  #flow_conts .section_02 .box_03 dl .tel {
    font-size: 24px;
    line-height: 1.3;
    background: url(../img/index/icon_06.png) no-repeat 25px 9px/19px;
    text-align: left;
    margin-bottom: 1px;
    padding-top: 5px;
    letter-spacing: .02em;
    padding-left: 50px;
  }
  #flow_conts .section_02 .box_03 dl .time {
    text-align: left;
    font-size: 13px;
    margin-left: 76px;
    margin-bottom: 13px;
  }
  #flow_conts .section_02 .box_03 .text {
    font-size: 19px;
    text-align: center;
    margin-bottom: 10px;
  }
  #flow_conts .section_02 .box_03 .btn_common {
    width: 100%;
  }
  #flow_conts .section_02 .box_03 .btn_common a {
    min-height: auto;
    font-size: 14px;
    gap: 4px;
    padding: 10px 26px 10px 12px;
    background-position: right 12px center;
    position: relative;
  }
  #flow_conts .section_02 .box_03 .btn_common a::before {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    background: url(../img/sales/flow/icon_mail.png) no-repeat center/contain;
    transition: .3s;
  }
  #flow_conts .section_02 .box_03 .btn_common a:hover::before {
    background-image: url(../img/sales/flow/icon_mail_navy.png);
  }
  #flow_conts .section_02 .box_04 {
    width: 530px;
    position: absolute;
    left: 499px;
    top: 404px;
    z-index: 9;
  }
  #flow_conts .section_02 .box_04 .number {
    margin-left: 37px;
    margin-bottom: 7px;
  }
  #flow_conts .section_02 .box_04 .title {
    margin-bottom: 32px;
  }
  #flow_conts .section_02 .box_04 .text {
    width: 236px;
    margin-left: 300px;
  }
  #flow_conts .section_02 .box_05 {
    width: 382px;
    position: absolute;
    left: 155px;
    top: 500px;
  }
  #flow_conts .section_02 .box_05 .number {
    margin-left: 20px;
    margin-bottom: 8px;
  }
  #flow_conts .section_02 .box_05 .title {
    width: 110px;
    text-align: center;
  }
  #flow_conts .section_02 .box_05 .small {
    display: block;
    font-size: 13px;
    font-weight: 600;
  }
  #flow_conts .section_02 .box_05 .text {
    width: 197px;
    margin-left: 136px;
    margin-top: -63px;
  }
  /*ボート購入背景*/
  #flow_conts .section_03_bg {
    clear: both;
    float: left;
    width: 100%;
    height: 643px;
    margin-top: 0;
    position: relative;
  }
  #flow_conts .section_03 {
    width: 1100px;
    font-size: 12px;
    line-height: 1.67;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    position: relative;
  }
  #flow_conts .section_03 .box_01 {
    width: 484px;
    position: absolute;
    top: 161px;
    left: 659px;
  }
  #flow_conts .section_03 .box_01 .number {
    margin-bottom: 8px;
  }
  #flow_conts .section_03 .box_01 .text {
    width: 332px;
    margin-left: 83px;
    margin-top: 208px;
  }
  /*ボート購入背景top: 116px*/
  #flow_conts .section_03 .box_02 {
    width: 309px;
    position: absolute;
    top: 207px;
    left: 192px;
    text-align: center;
  }
  #flow_conts .section_03 .box_02 .number {
    margin-bottom: 10px;
    margin-left: 131px;
  }
  #flow_conts .section_03 .box_02 .title {
    margin-bottom: 7px;
  }
  #flow_conts .section_03 .box_02 .text {
    width: 261px;
    font-size: 12px;
    line-height: 1.67;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  #flow_conts .section_03 .box_02 .text font, #flow_conts .section_03 .box_02 .text a {
    font-size: 12px;
    line-height: 1.67;
  }
  #flow_conts .section_03 .box_02 .text a {
    display: inline-block;
    width: fit-content;
    text-decoration: underline;
  }
  #flow_conts .section_03 .box_02 .text a:hover {
    text-decoration: none;
  }
  #flow_conts .section_03 .box_03 {
    width: 258px;
    position: absolute;
    top: 459px;
    left: 424px;
    text-align: center;
  }
  #flow_conts .section_03 .box_03 .number {
    position: relative;
    left: 98px;
    margin-bottom: 10px;
  }
  #flow_conts .section_03 .box_03 .title {
    margin-bottom: 8px;
  }
  #flow_conts .section_03 .box_03 .text {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  #flow_conts .section_04_bg {
    clear: both;
    float: left;
    width: 100%;
    height: 402px;
    position: relative;
  }
  #flow_conts .section_04 {
    width: 1100px;
    font-size: 12px;
    line-height: 1.67;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    position: relative;
  }
  #flow_conts .section_04 .box_01 {
    width: 215px;
    position: absolute;
    left: 143px;
  }
  #flow_conts .section_04 .box_01 .number {
    text-align: center;
    position: relative;
    margin-top: 38px;
    margin-left: 78px;
    margin-bottom: 10px;
  }
  #flow_conts .section_04 .box_01 .title {
    text-align: center;
  }
  #flow_conts .section_04 .box_01 .text {
    width: 174px;
    position: absolute;
    top: 68px;
    left: 254px;
  }

  /* section_05_bg */
  .section_05_bg {
    width: 1100px;
    clear: both;
    margin-inline: auto;
    .green_bg {
      display: flex;
      min-height: 350px;
      box-sizing: border-box;
      padding: 50px 554px 50px 47px;
      background-color: var(--color-bg-main-dark);
      position: relative;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 68px;
    }
    .green_bg dt {
      font-size: 27px;
      line-height: 1.3;
      margin-bottom: 10px;
    }
    .green_bg dd {
      line-height: 1.76;
      margin-bottom: 20px;
    }
    .green_bg .img {
      width: 400px;
      height: 250px;
      position: absolute;
      top: 50px;
      right: 65px;
    }
    .green_bg .img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .green_bg .icon {
      width: 66px;
      position: absolute;
      top: 34px;
      right: 41px;
    }
    .green_bg .wrapper_btn {
      display: flex;
      gap: 21px;
    }
    .green_bg .btn_common {
      width: 225px;
    }
    .green_bg .btn_common a {
      min-height: auto;
      padding: 12px 36px 12px 12px;
      background-position: right 20px center;
    }
    .box_banner {
      width: 600px;
      margin: 0 auto 80px;
    }
    .box_07 {
      width: 600px;
      margin-inline: auto;
    }
  }

}

@media screen and (max-width:769px) {
  .common_fv img {
    width: 50%;
    padding-top: 15vw;
    margin-left: auto;
    margin-right: auto;
  }
  #flow_conts {
    width: 100%;
    height: auto;
  }
  #flow_conts .section_01_bg {
    width: 90%;
    margin: 80px 5%;
    padding-bottom: 60px;
  }
  #flow_conts .section_01 {
    box-sizing: border-box;
  }
  #flow_conts .section_01 .title_section {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 18px;
  }
  #flow_conts .section_01 .pc_none {
    font-size: 2rem;
    line-height: 1.3;
    text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff;
    text-align: center;
    margin-bottom: 12px;
  }
  #flow_conts .section_01 .hukidashi {
    width: 100%;
    margin: 0 auto;
    text-align: right;
    max-width: 100%;
  }
  #flow_conts .section_01 .hukidashi img {
    width: 250px;
  }
  #flow_conts .section_01 .circle_img {
    width: 100%;
    text-align: right;
    max-width: 100%;
    letter-spacing: -.4em;
  }
  #flow_conts .section_01 .circle_img img {
    width: 45%;
    margin-right: 10%;
    vertical-align: middle;
  }
  #flow_conts .section_01 .circle_img img:last-of-type {
    width: 35%;
  }
  #flow_conts .section_01 .img {
    text-align: center;
    margin-top: 34px;
  }
  #flow_conts .section_01 .text {
    margin-bottom: 24px;
  }
  #flow_conts .section_01 .blue {
    color: #394b86;
  }
  #flow_conts .section_01 .gold {
    color: #b28e3c;
  }
  #flow_conts .bg_wrapper {
    padding-bottom: 125px;
    background-color: var(--color-bg-main);
    padding-top: 60px;
    padding-bottom: 80px;
  }
  #flow_conts .bg_wrapper .number {
    position: absolute;
    left: -10px;
    top: 0;
    width: 60px;
    z-index: 1;
  }
  #flow_conts .bg_wrapper .title {
    font-size: 19px;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 10px;
  }
  #flow_conts .bg_wrapper .title .small {
    display: block;
    font-weight: 600;
    font-size: 14px;
  }
  #flow_conts .bg_wrapper .text, #flow_conts .bg_wrapper .text_01, #flow_conts .bg_wrapper .text_02 {
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 12px;
  }
  #flow_conts .bg_wrapper .text a {
    display: inline-block;
    width: fit-content;
    text-decoration: underline;
  }
  #flow_conts .section_01_bg, #flow_conts .section_02_bg, #flow_conts .section_03_bg, #flow_conts .section_04_bg {
    width: 90%;
    margin: 0 5% 0;
  }
  #flow_conts .section_04_bg {
    margin-bottom: 60px;
    position: relative;
  }
  #flow_conts .s_title {
    font-size: 2.3rem;
    text-align: center;
    margin-bottom: 14px;
  }
  #flow_conts .box_01, #flow_conts .box_02, #flow_conts .box_03, #flow_conts .box_04, #flow_conts .box_05 {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding-bottom: 48px;
    padding-top: 18px;
    padding-left: 60px;
    background-image: url(../img/sales/flow/sp_border.png);
    background-repeat: repeat-y;
    background-size: 1px;
    background-position: 20px top;
  }
  #flow_conts .section_04 .box_01 {
    padding-bottom: 0;
  }
  #flow_conts .box_tel {
    margin-top: 20px;
  }
  #flow_conts .box_tel dl {
    margin-bottom: 16px;
  }
  #flow_conts .box_tel dt {
    text-align: left;
  }
  #flow_conts .box_tel dd {
    width: fit-content;
  }
  #flow_conts .box_tel dd.tel {
    font-size: 26px;
    padding-left: 26px;
    background: url(../img/index/icon_06.png) no-repeat left 10px/22px;
  }
  #flow_conts .box_tel dd.time {
    font-size: 13px;
    text-align: right;
  }
  #flow_conts .box_tel .btn_common a {
    padding-inline: 10px 30px;
    gap: 10px;
  }
  #flow_conts .box_tel .btn_common a::before {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    background: url(../img/sales/flow/icon_mail.png) no-repeat center/contain;
    transition: .3s;
  }
  #flow_conts .txt_img {
    width: 40%;
    max-width: 156px;
    text-align: left;
    margin-bottom: -12px;
    box-sizing: border-box;
    margin-left: 60px;
  }
  #flow_conts .section_04 .txt_img {
    position: absolute;
    left: 0;
    top: -34px;
  }
  #flow_conts .txt_img img {
    width: 100%;
  }
  /* section_05_bg */
  .section_05_bg {
    width: 90%;
    clear: both;
    margin-inline: auto;
    .green_bg {
      box-sizing: border-box;
      padding: 44px 5% 40px;
      background-color: var(--color-bg-main-dark);
      position: relative;
      margin-bottom: 58px;
    }
    .green_bg dt {
      font-size: 24px;
      line-height: 1.3;
      margin-bottom: 10px;
    }
    .green_bg dd {
      margin-bottom: 20px;
    }
    .green_bg .img {
      width: 100%;
      height: 100%;
      aspect-ratio: 8/5;
      margin-bottom: 28px;
    }
    .green_bg .img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .green_bg .icon {
      width: 60px;
      position: absolute;
      top: 16px;
      right: 16px;
    }
    .green_bg .wrapper_btn {
      display: flex;
      gap: 8px;
    }
    .green_bg .btn_common {
      width: 225px;
    }
    .green_bg .btn_common a {
      min-height: 50px;
      font-size: 13px;
      line-height: 1.5;
      padding: 5px 22px 5px 6px;
      background-position: right 12px center;
    }
    .box_banner {
      width: 100%;
      margin: 0 auto 60px;
    }
    .box_03 {
      width: 600px;
      margin-inline: auto;
    }
  }
}