@charset "UTF-8";

/*Roboto 400*/
@font-face {
    font-family: 'Roboto';
    src: url(/fonts/Roboto-Medium.woff2);
    font-weight: 400;
    font-display: swap;
}

/*Roboto 700*/
@font-face {
    font-family: 'Roboto';
    src: url(/fonts/Roboto-Bold.woff2);
    font-weight: 700;
    font-display: swap;
}

.l-wrapper {
    overflow: hidden;
}
.l-main {
    width: 100%;
    background: #fff;
    padding: 0 0 0;
}
.l-main * {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}
.ui-full-screen {
    margin-bottom: 0;
}

/*///////////////////// 共通 ///////////////////////////*/
.ui_inner {
    width: 1140px;
    margin: 0 auto; 
    padding-block: 98px 100px;
}
.ui_catch {
    text-align: center;
    margin-bottom: 40px;
}
[class*="ui_en--"] {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.03em;
    display: block;
}
[class*="ui_ttl--"] {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.ui_en--white,
.ui_ttl--white {
    color: #fff;
}
.ui_en--black {
    color: #0B2D61;
}
.ui_ttl--black {
    color: #1E1E1E;
}
.ui_btn {
    width: 400px;
    margin: 0 auto;
    box-shadow: 0 3px 6px rgba(91, 110, 139, .16);
}

/*///////////////////// メイン画像 ///////////////////////////*/
.mv_wrap {
    background: url(/images/top/bg_mv.webp) no-repeat top / cover;
    height: 648px;
}
.mv_inner {
    width: 1140px;
    margin: 0 auto; 
}
.mv_content {
    padding-top: 142px;
}
.mv_catch {
    margin-bottom: 30px;
}
.mv_btn--item:not(:last-child) {
    margin-bottom: 10px;
}

/*///////////////////// 不動産売却.netの特徴 ///////////////////////////*/
.features_wrap {
    background: #08306D;
    background: url(/images/top/bg_features.webp) no-repeat center / cover;
}
.features_content {
    display: flex;
    gap: 30px;
}
[class*="modal__section--"]{
    right: inherit;
}
[class*="features_list--"] {
    border-radius: 4px 4px 0 0;
}
.features_list--left {
    width: 460px;
}
.features_list--right {
    width: 650px;
}
[class*="features_ttl--"] {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    border-radius: 4px 4px 0 0;
    letter-spacing: 0.04em;
}
.features_ttl--left {
    background-color: #9B9B9B;
}
.features_list--right {
    background: url(/images/top/bg_features_ttl.webp) no-repeat center / contain;
    height: 62px;
}
[class*="features_img--"] {
    text-align: center;
}
.features_img--left {
    margin-bottom: 26px;
}
.features_img--right {
    margin-bottom: 29px;
}
[class*="features_detail--"] {
    height: 488px;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    padding: 30px 30px 40px;
}
.features_text {
    font-size: 18px;
    letter-spacing: 0.02em;
    padding-bottom: 13px;
    line-height: 1.8;
} 
.features_text:last-child {
    padding-bottom: 0;
}
.features_text span {
    font-size: 18px;
    font-weight: 500;
    color: #0B2D61;
}

/*///////////////////// 不動産売却.netが運営するサイト ///////////////////////////*/
.site_wrap {
    background: #F6F6F6;
}
.site_catch {
    margin-bottom: 17px;
}
.site_text {
    font-size: 26px;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 0.03em;
}
.site_list {
    display: flex;
    gap: 30px;
}
.site_item {
    box-shadow: 0 3px 6px rgba(91, 110, 139, .16);
}

/*///////////////////// ご相談はこちらから ///////////////////////////*/
.contact_wrap {
    background: url(/images/top/bg_contact.webp) no-repeat top / cover;
    height: 617px;
}
.contact_catch {
    margin-bottom: 50px;
}
.contact_list {
    width: 850px;
    display: flex;
    flex-wrap: wrap;
    gap: 52px 50px;
    margin: 0 auto;
}
.contact_item--tel {
    width: 360px;
    margin: 0 auto;
}
.contact_item--btn {
    width: 400px;
}
.contact_text {
    font-size: 18px;
    color: #fff;
    text-align: center;
    margin-bottom: 6px;
}
.contact_tel {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 44px;
    color: #fff;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    padding-left: 55px;
}
.contact_tel:before {
    content: "";
    position: absolute;
    background: url(/images/top/icon_tel.webp) no-repeat top / cover;
    width: 42px;
    height: 33px;
    left: 0;
}
.contact_day {
    font-size: 16px;
    color: #fff;
    text-align: center;
}

/*///////////////////// あなたにぴったりのプランをお選びいただけます ///////////////////////////*/
.plan_wrap {
    background: url(/images/top/bg_plan.webp) no-repeat top / cover;
    height: 1065px;
}
.plan_catch {
    margin-bottom: 37px;
}
.plan_list {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}
[class*="plan_item--"]  {
    width: 360px;
    height: 620px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 5px 20px rgba(91, 110, 139, .10)
}
[class*="plan_ttl--"] {
    height: 50px;
    font-size: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plan_ttl--left {
    background: url(/images/top/bnr_plan01.webp) no-repeat top / cover;
}
.plan_ttl--middle {
    background: url(/images/top/bnr_plan02.webp) no-repeat top / cover;
}
.plan_ttl--right {
    background: url(/images/top/bnr_plan03.webp) no-repeat top / cover;
}
.plan_detail {
    padding: 18px 18px 18px 30px;
}
[class*="plan_subttl--"] {
    width: 300px;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 19px;
}
.plan_subttl--left,
.plan_after--ttl_left {
    color: #4089C2;
}
.plan_subttl--middle,
.plan_after--ttl_middle {
    color: #0B2D61;
}
.plan_subttl--right,
.plan_after--ttl_right {
    color: #A1960B;
}
[class*="plan_check--list_"] {
    position: relative;
    padding: 17px 0 15px;
    margin-bottom: 32px;
}
[class*="plan_check--list_"]:before {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 13px;
    bottom: -13px;
    left: 41%;
}
.plan_check--list_left:before {
    background: url(/images/top/icon_triangle01.webp) no-repeat top / cover;
}
.plan_check--list_middle:before {
    background: url(/images/top/icon_triangle02.webp) no-repeat top / cover;
}
.plan_check--list_right:before {
    background: url(/images/top/icon_triangle03.webp) no-repeat top / cover;
}
[class*="plan_check--item_"] {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 4px;
    padding-left: 25px;
}
[class*="plan_check--item_"]:last-child {
    margin-bottom: 0;
}
[class*="plan_check--item_"]:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 19px;
    left: 0;
}
.plan_check--item_left:before {
    background: url(/images/top/icon_check01.webp) no-repeat top / cover;
}
.plan_check--item_middle:before {
    background: url(/images/top/icon_check02.webp) no-repeat top / cover;
}
.plan_check--item_right:before {
    background: url(/images/top/icon_check03.webp) no-repeat top / cover;
}
[class*="plan_after--ttl_"] {
    width: 300px;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 17px;
}
.plan_after--text {
    font-size: 18px;
    line-height: 1.78;
}

[class*="plan_check--item_"]:first-of-type:after {
    position: absolute;
    display: block;
    width: 300px;
    height: 1px;
    background: #8495AF;
    top: -16px;
    content: "";
    left: 0;
}

[class*="plan_check--item_"]:last-of-type:after {
    position: absolute;
    display: block;
    width: 300px;
    height: 1px;
    background: #8495AF;
    bottom: -15px;
    content: "";
    left: 0;
}
/*///////////////////// 不動産を売るまでの流れ ///////////////////////////*/
.flow_inner {
    padding-block: 98px 67px;
}

/*///// 不動産のプロフェッショナルが、中立公正な立場から最善のソリューションをご提案 ///////////*/
.solution_wrap {
    background: url(/images/top/bg_solution.webp) no-repeat top / cover;
    height: 1066px;
}
.solution_catch {
    margin-bottom: 26px;
}
.solution_text {
    font-size: 26px;
    text-align: center;
    margin-bottom: 39px;
    letter-spacing: 0.02em;
    line-height: 1.75;
}

/*///// 売却の際に税理士が大切になる理由とは？ ///////////*/
.reasons_inner {
    padding-block: 98px 70px;
}
.reasons_list {
    counter-reset: num;
}
.reasons_item {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid #CECECE;
    margin-bottom: 30px;
    padding-bottom: 30px;
}
.reasons_item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}
.reasons_left {
    width: 400px;
}
.reasons_right {
    width: 710px;
    margin-top: 7px;
}
.reasons_detail dt {
    position: relative;
    counter-increment: num;  
    font-size: 26px;
    font-weight: 500;
    color: #0B2D61;
    display: flex;
    align-items: center;
    padding-left: 61px;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
}
.reasons_detail dt:before {
    content: counter(num, decimal-leading-zero) "";
    position: absolute;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    z-index: 1;
    left: 13px;
    font-family: 'Roboto', sans-serif;
}
.reasons_detail dt:after {
    content: "";
    position: absolute;
    background: url(/images/top/icon_square.webp) no-repeat top / cover;
    width: 50px;
    height: 50px;
    left: 0;
}
.reasons_detail dd {
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    padding-left: 2px;
}

/*///// 当社ではKAJIグループ様とタイアップをしております ///////////*/
.tieup_wrap {
    background: url(/images/top/bg_tieup.webp) no-repeat top / cover;
    height: 780px;
}
.tieup_catch {
    margin-top: 6px;
}
.tieup_subttl {
    position: relative;
    font-size: 30px;
    color: #fff;
    line-height: 1.4;
}
.tieup_subttl:before {
    content: "";
    position: absolute;
    background: url(/images/top/icon_dot.webp) no-repeat top / cover;
    width: 62px;
    height: 6px;
    left: 48.6%;
    top: -4px;
}
.tieup_ttl {
    font-size: 40px;
    font-weight: 500;
    color: #fff;
}
.tieup_ttl span {
    font-size: 40px;
    font-weight: 500;
    color: #ECE7A8;
}
.tieup_content {
    width: 865px;
    margin: 0 auto 40px;
    border-radius: 5px;
    background-color: #fff;
}
.tieup_imgbox {
    border-bottom: 1px solid #333333;
}
.tieup_logo {
    padding: 19px 0;
    text-align: center;
}
.tieup_detail {
    padding: 17px 30px 36px;
}
.tieup_text {
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/*///// 不動産売却の手引き ///////////*/
.guidance_wrap {
    background-color: #D2E3F1;
}
.guidance_list {
    display: flex;
    gap: 30px;
}
.guidance_item {
    position: relative;
    width: 360px;
    height: 386px;
    border-radius: 3px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .10);
    background-color: #fff;
}
.guidance_item :after {
    content: "";
    position: absolute;
    background: url(/images/top/icon_guidance.webp) no-repeat top / cover;
    width: 25px;
    height: 25px;
    bottom: 5px;
    right: 5px;
}
.guidance_detail {
    padding: 20px;
}
.guidance_detail dt {
    font-size: 20px;
    font-weight: 500;
    border-bottom: 1px solid #CECECE;
    padding-bottom: 8px;
    margin-bottom: 8px;
    color: #0B2D61;
}
.guidance_detail dd {
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0.02em;
}

/*///////////////////// 不動産売却の豆知識 ///////////////////////////*/
.blog_inner {
    padding-block: 97px 81px;
}
.blog_catch {
    margin-bottom: 37px;
}
.blog_contents {
    display: flex;
    flex-wrap: wrap;
    gap: 19px 50px;
}
.blog_content {
    width: 545px;   
}
.blog_content--ttl {
    position: relative;
    width: 545px;
    height: 54px;
    display: flex;
    align-items: center;
    background-color: #EDF1F8;
    border-radius: 3px;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding-left: 20px;
    margin-bottom: 22px;
    color: #0B2D61;
}
.blog_content--ttl:before {
    content: "";
    position: absolute;
    background: url(/images/top/bg_border.webp) no-repeat top / cover;
    width: 5px;
    height: 54px;
    left: 0;
}
.blog_item {
    border-bottom: 1px solid #CECECE;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.blog_item--content {
    display: flex;
    align-items: center;
    gap: 15px;
}
.blog_img {
    width: 130px;
    height: 87px;
    background-color: #EFEFEF;
    border-radius: 2px;
}
.blog_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog_detail {
    width: 390px;
}
.blog_text {
    font-size: 18px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    
}

/*///////////////////// 人々の力をエンパワーメントする ///////////////////////////*/
.about_content {
    display: flex;
    justify-content: space-between;
}
.about_detail {
    position: relative;
    padding-top: 104px;
    z-index: 2;
}
.about_ttl {
    font-size: 50px;
    font-weight: bold;
    color: #0B2D61;
    letter-spacing: 0.04em;
    margin-bottom: 38px;
    line-height: 1.4;
}
.about_ttl span {
    font-size: 40px;
    font-weight: bold;
    color: #0B2D61;
    letter-spacing: 0.03em;
}
.about_text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.02em;
    margin-bottom: 32px;
}
.about_text:last-child {
    margin-bottom: 0;
}
.about_img {
    position: relative;
    z-index: 1;
}
.about_img img {
    box-shadow: 0px 3px 10px rgb(0 0 0 / 10%);
}
.about_img:after {
    content: "";
    position: absolute;
    width: 570px;
    height: 630px;
    border-radius: 3px;
    background-color: #F8F8F8;
    z-index: -1;
    left: -119px;
    top: 101px;
}

/*///////////////////// 取引実績 ///////////////////////////*/
.business_inner {
    padding-block: 26px 100px;
}
.business_box {
    width: 1140px;
    margin: auto;
}
.business_list {
    margin-bottom: 40px;
}
.business_item {
    width: 360px!important;
    height: 356px;
}
.business_imgbox {
    position: relative;
    width: 360px;
    height: 240px;
    margin-bottom: 10px;
}
[class*="business_tab--"] {
    position: relative;
    font-size: 20px;
    color: #fff;
    text-align: center;
    left: 0;
    bottom: 35px;
    z-index: 1;
}
[class*="business_tab--"]:before {
    content: "";
    position: absolute;
    width: 360px;
    height: 39px;
    left: 0;
    bottom: -6px;
    z-index: -1;
}
.business_tab--inherit:before {
    background: url(/images/top/bnr_inherit.webp) no-repeat top / cover;
}
.business_tab--gift:before {
    background: url(/images/top/bnr_gift.webp) no-repeat top / cover;
}
.business_tab--investment:before {
    background: url(/images/top/bnr_investment.webp) no-repeat top / cover;
}
.business_detail {
    width: 360px;
}
.business_text {
    font-size: 18px;
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #CECECE;
}
[class*="business_name--"] {
    font-size: 18px;
    font-weight: 500;
    text-align: right;
}
.business_name--inherit {
    color: #60A2D5;
}
.business_name--gift {
    color: #0B2D61;
}
.business_name--investment {
    color: #BBAE00;
}
/*///////////////////// 物件検索 ///////////////////////////*/
.search_wrap {
    background-color: #5F6F8D;
}
.search_list {
    width: 870px;
    display: flex;
    gap: 30px;
    margin: 0 auto;
}
.search_item {
    box-shadow: 0 3px 6px rgba(91, 110, 139, .16);
}

/*///////////////////// 各種SNS ///////////////////////////*/
.sns_wrap {
    background: url(/images/top/bg_sns.webp) no-repeat top / cover;
    height: 464px;
}
.sns_inner {
    padding-block: 96px 100px;
}
.sns_catch {
    margin-bottom: 18px;
}
.sns_text {
    font-size: 26px;
    color: #fff;
    text-align: center;
    margin-bottom: 40px;
}
.sns_list {
    display: flex;
    gap: 20px;
}
.sns_item {
    width: 270px;
    box-shadow: 0 3px 6px rgba(91, 110, 139, .16);
}
.sns_item a:hover {
    opacity: 1;
}