@charset "utf-8";

/* ===================================================================
CSS information
 file name : detachedhouselp.css
 style info :  スタイル指定
=================================================================== */
.check {
    padding: 0;
}

.house {}

.house .wrapper .inner {
    padding: 60px 0 100px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.house .wrapper .inner .link_banner {
    width: 100%;
    margin: 0 auto;
}

.house .wrapper .inner .link_banner a {
    display: block;
    width: 100%;
}

.house .wrapper .inner .link_banner a img {
    /* width: 100%; */
}

.house .wrapper .inner>h2 {
    padding: 50px 0 0;
    font-size: 32px;
}

.house .wrapper .inner>h2 span {
    color: #17ABE8;
}

.house .wrapper .inner>.flex_box {
    display: flex;
    justify-content: space-between;
    padding: 50px 0 0;
    align-items: center;
}

.house .wrapper .inner>.flex_box li {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    line-height: 2;
}

.house .wrapper .inner>.flex_box li ul.text li {
    display: flex;
    align-items: center;
}

.house .wrapper .inner>.flex_box li ul.text li:before {
    content: "";
    background: url(../images/detachedhouselp/icon_li.png) no-repeat;
    width: 21px;
    height: 21px;
    display: block;
    padding: 0 10px 0 0;
}

.house .wrapper .inner>.flex_box li ul.img {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.house .wrapper .inner>.flex_box li ul.img li {
    margin: 0 0 0 20px;
}

.house .wrapper .inner>.flex_box li ul.img li:first-of-type {
    margin: 0;
}

.house .wrapper .inner>.arrow {
    margin: 60px auto 0;
}

.house .wrapper .inner>h3 {
    margin: 25px auto 0;
    font-size: 32px;
    line-height: 1.2;
}

.house .wrapper .inner>h3 span {
    color: #17ABE8;
}

.house .wrapper .inner>h3 span.big {
    color: #17ABE8;
    font-size: 58px;
    letter-spacing: -7px;
}

.house .wrapper .inner>.fee_img {
    width: 100%;
    margin: 60px auto 75px;
}

.house .wrapper .inner>.fee_img img {
    width: 100%;
}

.house .wrapper .inner>.fee_img p {
    margin: 30px auto 0;
    font-size: 16px;
    width: 100%;
    text-align: left;
}

.form {
    width: 100%;
    margin: 0 auto;
    padding: 100px 0 0;
}

.form h2 {
    margin: 0 auto 23px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    background-color: #17abe8;
    position: relative;
}

.form h2:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #17abe8;
}

.form .wrapper .inner {
    padding: 75px 0 0;
    text-align: left;
}

.form .wrapper .inner form>p {
    font-size: 16px;
}

.form .wrapper .inner form>p:last-of-type {
    margin: 0 auto 60px;
}

.form .wrapper .inner form>h3 {
    display: flex;
    width: 100%;
    padding: 0 10px;
    font-size: 32px;
    font-weight: bold;
    color: #17abe8;
    border: solid #17abe8;
    border-width: 0 0 1px;
    margin: 0 auto 30px;
}

.form .wrapper .inner form h4 {
    width: 250px;
    font-size: 18px;
    color: #17ABE8;
}

.form .wrapper .inner form .required h4::after {
    content: "必須";
    background: #FF0000;
    border-radius: 5px;
    color: #fff;
    font-weight: normal;
    padding: 0 5px;
    font-size: 16px;
    margin: 0 0 0 5px;
}

.form .wrapper .inner form .delete {
    padding: 0;
    margin-bottom:50px;
}

.form .wrapper .inner form .delete .delete_btn {
    margin: 10px 0 0 auto;
    display: block;
    width: 100px;
    border: 1px solid #000;
    text-align: center;
}

.form .wrapper .inner form .plus {
    padding: 30px 0 0;
}

.form .wrapper .inner form .plus .plus_btn {
    margin: 0 auto;
    padding: 10px 15px;
    text-align: center;
    border: 1px solid #000;
    width: 500px;
}

.form .wrapper .inner form>div>ul {
    margin: 0 0 30px;
}

.form .wrapper .inner form .radio,
.form .wrapper .inner form .text,
.form .wrapper .inner form .textarea,
.form .wrapper .inner form .select,
.form .wrapper .inner form .check,
.form .wrapper .inner form .file {
    display: flex;
    justify-content: space-between;
    margin: 0 0 30px;
}


.form .wrapper .inner form .radio>ul,
.form .wrapper .inner form .text>.text_wrapper,
.form .wrapper .inner form .textarea>ul,
.form .wrapper .inner form .check>ul,
.form .wrapper .inner form .select>.select_wrapper {
    width: calc(100% - 280px);
    display: flex;
    flex-wrap: wrap;
}
/*
.form .wrapper .inner form .select>.select_wrapper select {
    width: 200px;
    height: 60px;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 3px 3px 5px #ccc;
    border: 1px solid #ccc;
    margin: 0 0 10px;
}
*/
.form .wrapper .inner form .file>.img_up {
    width: calc(100% - 280px);
}
/*
.form .wrapper .inner form .text>.text_wrapper input,
.form .wrapper .inner form .textarea>textarea {
    margin: 13px 0 0;
    height: 180px;
    font-size: 22px;
    padding: 25px 30px;
    border-radius: 10px;
    font-weight: bold;
    color: #333;
    box-shadow: 3px 3px 5px #ccc;
    border: 1px solid #ccc;
    width: calc(100% - 280px);
}

.form .wrapper .inner form .text>.text_wrapper input {
    height: 60px;
    width: 100%;
}

*/

.form .wrapper .inner form .radio>ul>li,
.form .wrapper .inner form .check>ul>li {
    line-height: 1;
    font-size: 16px;
    margin-right: 15px;
}

.form .wrapper .inner form .check.check02>ul>li {
    width: 30%;
    line-height: 1;
}

.form .wrapper .inner form .check.check02 .anser {
    margin: 15px 0 0;
}

.form .wrapper .inner form .check.check02 .anser p {
    font-size: 14px;
    margin: 0 0 5px;
}

.form .wrapper .inner form .check.check02 .anser input {
    display: block;
    padding: 10px 15px;
    width: 100%;
}

.form .wrapper .inner form .url_property .radio>ul>li,
.form .wrapper .inner form .name_property .radio>ul>li,
.form .wrapper .inner form .img_property .radio>ul>li {
    line-height: 1;
    font-size: 16px;
    width: 33%;
    margin: 0 0 15px;
}

.form .wrapper .inner form .radio>ul>li input,
.form .wrapper .inner form .check>ul>li input {
    display: none;
}

.form .wrapper .inner form .radio>ul>li label,
.form .wrapper .inner form .check>ul>li label {
    position: relative;
    padding: 0 0 0 30px;
    height: 35px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.form .wrapper .inner form .radio>ul>li label span,
.form .wrapper .inner form .check>ul>li label span {
    font-size: 11px;
}

.form .wrapper .inner form .pp .pp_wrapper .check ul {
    align-items: center;
}

.change_label:before,
.chenge_check:before {
    left: 0px;
    top: 4px;
    margin-top: 0px;
    width: 21px;
    height: 10px;
    opacity: 0;
    border-left: 5px solid #17abe8;
    border-bottom: 5px solid #17abe8;
    transform: rotate(-45deg) translateY(-50%);
    top: 39%;
    left: 11px;
}

.form .wrapper .inner form .radio>ul>li input[type="radio"]:checked+.change_label:before,
.form .wrapper .inner form .check>ul>li input[type="checkbox"]:checked+.chenge_check:before {
    opacity: 1;
}

.change_label:after,
.change_label:before,
.chenge_check:after,
.chenge_check:before {
    position: absolute;
    content: "";
    display: block;
}

.change_label:after,
.chenge_check:after {
    width: 35px;
    height: 35px;
    border: 1px solid #333333;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}


input[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #17abe8;
    background: #17abe8;
    border-radius: 35px;
    height: 70px;
    width: 100%;
    font-size: 21px;
    color: #fff;
}

input[type="submit"]:hover {
    background: #54A9BD;
}

input[type="submit"][disabled] {
    background-color: #ccc;
    cursor: default;
}

.form_btn {
    margin: 70px auto 0;
}

.form_btn .form_btn_wrapper {
    width: 450px;
    position: relative;
    margin: 0 auto;
}

.form_btn .form_btn_wrapper::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 24px;
    top: calc(50% - 1px);
    border-top: solid 1px;
    border-right: solid 1px;
    transform: rotate(45deg) translateY(-50%);
    color: #fff;
}

/* BreakPoint 1100
=============================================================*/
@media only screen and (max-width: 1100px) {
    .mv .wrapper {
        position: inherit;
        width: 100%;
        padding: 4%;
        background: url(../images/detachedhouselp/mv.png) no-repeat;
        background-size: cover;
        background-position: center;
    }

    .form .wrapper .inner form .url_property .radio>ul>li,
    .form .wrapper .inner form .name_property .radio>ul>li,
    .form .wrapper .inner form .img_property .radio>ul>li {
        width: 50%;
    }
}


/* BreakPoint 639px sp
=============================================================*/
@media only screen and (max-width: 639px) {
    .house .wrapper .inner {
        padding: 30px 0 50px;
    }

    .house .wrapper .inner>h2 {
        padding: 25px 0 0;
        font-size: 20px;
    }

    .house .wrapper .inner>.flex_box {
        padding: 25px 0 0;
        flex-wrap: wrap;
        flex-flow: column-reverse;
    }

    .house .wrapper .inner>.flex_box li ul.img {
        margin: 0 auto 20px;
    }

    .house .wrapper .inner>.flex_box li ul.text li {
        line-height: 1.5;
        margin: 0 auto 10px;
        font-size: 16px;
    }

    .house .wrapper .inner>.arrow {
        margin: 10px auto 0;
    }

    .house .wrapper .inner>h3 {
        margin: 10px auto 0;
        font-size: 4.5vw;
        line-height: 1.2;
        letter-spacing: 0.15vw;
    }

    .house .wrapper .inner>h3 span.big {
        color: #17ABE8;
        font-size: 30px;
        letter-spacing: -3px;
    }

    .house .wrapper .inner>.fee_img {
        width: 100%;
        margin: 30px auto 30px;
    }

    .house .wrapper .inner>.fee_img p {
        margin: 15px auto 0;
        font-size: 14px;
    }

    .form h2 {
        font-size: 18px;
        padding: 10px 20px;
    }

    .form .wrapper .inner {
        padding: 30px 20px 0;
    }

    .form .wrapper .inner form>h3 {
        font-size: 18px;
        margin: 30px auto 15px;
    }

    .form .wrapper .inner form .radio,
    .form .wrapper .inner form .text,
    .form .wrapper .inner form .textarea,
    .form .wrapper .inner form .select,
    .form .wrapper .inner form .check,
    .form .wrapper .inner form .file {
        flex-wrap: wrap;
        margin: 0 0 15px;
    }

    .form .wrapper .inner form h4 {
        font-size: 18px;
        width: 100%;
    }

    .form .wrapper .inner form .radio>ul,
    .form .wrapper .inner form .text>.text_wrapper,
    .form .wrapper .inner form .textarea>ul,
    .form .wrapper .inner form .check>ul,
    .form .wrapper .inner form .select>.select_wrapper {
        width: 100%;
    }

    .form .wrapper .inner form .url_property .radio>ul>li,
    .form .wrapper .inner form .name_property .radio>ul>li,
    .form .wrapper .inner form .img_property .radio>ul>li {
        width: 100%;
    }

    .form .wrapper .inner form .text>.text_wrapper input,
    .form .wrapper .inner form .textarea>textarea {
        font-size: 16px;
        padding: 15px;
        width: 100%;
    }

    .form .wrapper .inner form .plus {
        padding: 30px 0 0;
    }

    .form .wrapper .inner form .plus .plus_btn {
        width: 100%;
    }

    .form .wrapper .inner form .file>.img_up {
        width: 100%;
        margin: 15px 0 0;
    }

    .form_btn .form_btn_wrapper {
        width: 100%;
    }

    input[type="submit"] {
        font-size: 17px;
    }

    .form .wrapper .inner form .check.check02>ul>li {
        width: 100%;
        line-height: 1;
    }
    .motiron .wrapper .inner .staff2_slider {
        margin: 20px auto 0!important;
    }
    .motiron .wrapper .inner .staff2_slider ul li a .img_box img {
        height: 240px!important;
    }
}

.chenge_check:after,
.change_label:after {
    margin-top: 0!important;
}
.contactfr>div:first-child {
    width: 100%!important;
}
.reservation_contact div.contactfr {
    margin: 0!important;
}
.reservation_contact div.formLayout input,
.reservation_contact div.formLayout select {
    margin: 0!important;
}

.mark_orange {
	display: inline;
	background: linear-gradient(transparent 50%, #ffad55 0%);
	font-weight: bold;
}

.black {
    color: #000 !important;
    margin-left: -10px !important;
}
@media (max-width: 767px) {
    .black {
        margin-left: 0vw !important;
    }
}

.house .link_banner .pc_mode {
    margin-top: -60px;
    margin-left: 30px;
}

.reason .link_banner {
    margin-top: 30px;
}
@media (max-width: 767px) {
    .reason .link_banner {
        padding: 0 3%;
    }
}

.pattern .link_banner {
    margin-top: -60px;
    margin-bottom: 40px;
}
@media (max-width: 767px) {
    .pattern .link_banner {
        margin-top: 6vw;
        margin-bottom: 12vw
    }
}

.motiron .link_banner {
    margin-top: 45px;
    margin-bottom: 90px;
    margin-left: 30px;
}
@media (max-width: 767px) {
    .motiron .link_banner {
        margin-top: 20vw;
        margin-bottom: initial;
        margin-left: initial;
    }
}

 /* add talent
----------------------------------------------------------------------------- */
.mv .wrapper .title_area ul li::before {
    content: initial !important;
  }
  @media (max-width: 767px) {
    .mv .wrapper {
        padding: 0 3% !important;
    }
  }
  @media (max-width: 767px) {
    .mv .wrapper .title_area h1 img {
      width: 83%;
      margin-top: 3vw;
    }
  }
  @media (max-width: 767px) {
    .mv .wrapper .title_area {
      padding-top: 32px!important;
    }
  }
  @media (max-width: 767px) {
    .mv .wrapper .title_area h1 {
      margin-left: -1.5vw;
    }
  }
  
  
  .intro {
    display: initial !important;
    width: 620px !important;
    margin: initial !important;
    counter-reset: initial !important;
    margin-top: 60px !important;
  }
  @media (max-width: 767px) {
    .intro {
      width: 100% !important;
      margin-top: initial !important;
    }
  }
  .intro li{
    position: relative !important;
    padding: initial !important;
    background: initial !important;
    margin: 12px !important;
    width: 100% !important;
    box-shadow: 0px 0px 13px 4px rgba(0, 0, 0, 0.3) !important;
  }
  @media (max-width: 767px) {
    .intro li{
      margin: 2vw 0 !important;
    }
  }
  .intro li .number{
    position: absolute;
    top: 14px;
    left: 27px;
    font-size: 33px;
    color: #fff;
  }
  @media (max-width: 767px) {
    .intro li .number{
      top: 0vw;
      left: 3vw;
      font-size: 7vw;
      color: #fff;
    } 
  }
  .intro li .black{
    position: absolute;
    top: 20px;
    left: 95px;
    font-size: 26px;
    color: #000;
  }
  @media (max-width: 767px) {
    .intro li .black{
      top: 3.25vw;
      left: 15vw;
      font-size: 3.5vw;
      color: #000;
    } 
  }
  .intro li .light-blue{
    position: absolute;
    top: 13px;
    left: 346px;
    font-size: 33px;
    color: #1aabe7;
  }
  @media (max-width: 767px) {
    .intro li .light-blue{
      top: 1.75vw;
      left: 49vw;
      font-size: 5vw;
      color: #1aabe7;
    } 
  }
  .intro .one {
  
  }
  @media (max-width: 767px) {
  }
  .intro .two {
    left: 346px !important;
  }
  @media (max-width: 767px) {
    .intro .two {
      left: 49vw !important;
    }
  }
  .intro .three {
    left: 195px !important;
  }
  @media (max-width: 767px) {
    .intro .three {
      left: 28vw !important;
    }
  }
  
  @media (max-width: 767px) {
    .mv .wrapper .intro__banner {
      float: right;
      margin-right: 4vw;
    }
  }
  
  .talent {
    position: absolute;
    top: 180px;
    right: -90px;
  }
  @media (max-width: 767px) {
    .talent {
      position: initial;
      margin-top: -6vw;
    }
  }
  @media (max-width: 767px) {
    .talent img{
      width: 90%;
      margin: 0 auto;
    }
  }
  .detail{
    display: flex;
  }
  .detail__leftItem {
    width: 60%;
  }
  @media (max-width: 767px) {
    .detail__leftItem {
      width: 50%;
    }
  }
  .detail__leftItem p{
    font-weight: initial;
    margin-top: 60px;
  }
  @media (max-width: 767px) {
    .detail__leftItem p{
      font-weight: initial;
      margin-top: 3vw;
    }
  }
  .detail__rightItem {
    width: 40%;
  }
  @media (max-width: 767px) {
    .detail__rightItem {
      width: 50%;
    }
  }
  .detail__rightItem img{
    margin-top: 30px;
    margin-left: 50px;
  }
  @media (max-width: 767px) {
    .detail__rightItem img{
      margin-top: 6vw;
      margin-left: 5vw;
    }
  }