@charset "utf-8";


body {
	/*スマホで勝手に文字が大きくなる対策*/
	-webkit-text-size-adjust: 100%;
    color: #333;
    font-family: 'Meiryo', 'Noto Sans JP', sans-serif;
    line-height: 1.5;
}

/* Common */

.l-main,
#contents{
	padding: 0;
	width: 100%;
    overflow: hidden;
    background-color: #fff;
}

[class^="section__wrapper--"] {
    padding-block: 65px;
}

[class^="section__inner--"] {
    width: 1140px;
    margin: 0 auto;
    position: relative;
}

.ttl__box {
    text-align: center;
    margin-bottom: 24px;
}

.section__ttl {
    font-size: 36px;
    font-weight: bold;
    color: #000;
    font-family: "Meiryo", sans-serif;
}

.section__sub-ttl {
    font-size: 16px;
    color: #0065C4;
    letter-spacing: 3.2px;
    font-family: "Meiryo", sans-serif;
    font-weight: 700;
}

/* Main Visual */

.main__img {
    height: 400px;
}

.main__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Wrapper Colors/Backgrounds */
.section__wrapper--worry {
    background-color: #fff;
    padding-block: 61px 63px;
}

.section__wrapper--method {
    background-color: #E7F3FE; /* Light gray from design perception */
    padding-block: 63px 65px;
}

.section__wrapper--reason {
    position: relative;
    padding-block: 61px 135px;
}

.section__inner--reason{
    position: relative;
}

.section__inner--reason::before{
    position: absolute;
    content: "";
    background: url(../images/footprint.webp) no-repeat center / cover;
    width: 401px;
    height: 380px;
    top: -54px;
    right: -249px;
    z-index: 0;
}

.section__inner--reason::after{
    position: absolute;
    content: "";
    background: url(../images/footprint-1.webp) no-repeat center / cover;
    width: 348px;
    height: 330px;
    bottom: 73px;
    left: -244px;
    z-index: 1;
}

.section__wrapper--flow {
    background-color: #E7F3FE;
    padding-block: 62px 65px;
}

.section__wrapper--contact {
    background: url(../images/bg_img.webp) no-repeat center / cover;
    padding-block: 61px 67px;
}

.section__wrapper--voice {
    background-color: #F8F8F8;
}

.section__wrapper--blog {
    background-color: #E7F3FE;
    padding: 60px 0 65px;
}


/* Worry Section */
.section__wrapper--worry .ttl__box{
	margin-bottom: 77px;
}

.worry__circles {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.worry__circles::before{
	display: block;
	content: "";
	background: url(../images/circle_before.webp) no-repeat center / cover;
	width: 224px;
	height: 206px;
	margin: 111px auto 48px;
	z-index: 1;
}

[class*="worry__circle--"] {
    position: absolute;
    width: 225px;
    height: 208px;
    flex-shrink: 0;
    padding-top: 60px;
}

.worry__circle--lend{
	background: url(../images/circle.webp) no-repeat center / cover;
	top: 105px;
	left: -7px;
}

.worry__circle--empty{
	background: url(../images/circle-1.webp) no-repeat center / cover;
	top: 6px;
	left: 221px;
	padding-top: 68px;
	padding-left: 12px;
}

.worry__circle--sell{
	background: url(../images/circle-2.webp) no-repeat center / cover;
	top: -56px;
	padding-top: 63px;
	padding-left: 10px;
}

.worry__circle--rent{
	background: url(../images/circle-3.webp) no-repeat center / cover;
	top: 7px;
	right: 225px;
}

.worry__circle--time{
	background: url(../images/circle-4.webp) no-repeat center / cover;
	top: 106px;
	right: -9px;
	padding-top: 51px;
	padding-right: 2px;
}

.worry__arrow {
    text-align: center;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 62px;
}

.worry__solution {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #000;
	font-family: "Meiryo", sans-serif;
	line-height: 1.2;
}

.txt--blue {
    color: #0065C4;
    font-size: 36px;
	font-family: "Meiryo", sans-serif;
	line-height: 1.2;
}

.worries__txt{
	font-size: 16px;
	font-weight: 700;
	color: #333;
	text-align: center;
	line-height: 1.5;
}

.worries__txt span{
	font-size: 16px;
	font-weight: 700;
	color: #1B6D82;
	text-align: center;
	line-height: 1.5;
}


/* Method Section */
.method__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.method__item {
    width: 48.5%;
    background: #fff;
    padding: 20px 20px 20px 20px;
    box-sizing: border-box;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 23px;
}

.method__icon-box {
    text-align: center;
    flex-shrink: 0;
    width: 176px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.method__name {
    color: #0067C7;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 0px;
    font-family: "Meiryo", sans-serif;
}

.method__icon {
    width: 100px;
    margin: 0px auto 0px;
}

.method__desc-box {
    width: calc(100% - 160px);
}

.method__merit, .method__demerit {
    border-radius: 5px;
    padding: 17px 15px 15px 18px;
    margin-bottom: 10px;
}

.method__merit {
    background: #3188D5;
    color: #fff;
    width: 315px;
    height: 111px;
}

.method__demerit {
    background: #EDEDED;
    color: #333;
    margin-bottom: 0;
    width: 315px;
    height: 111px;
}

.method__merit dt {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    color: #fff;
}

 .method__demerit dt{
	font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    color: #333;
 }

.method__merit dd {
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
}

.method__demerit dd{
	font-size: 16px;
    line-height: 1.5;
    color: #333;
}

/* Reason Section */
.section__wrapper--reason .ttl__box{
	margin-bottom: 103px;
}

.reason__list {
    display: flex;
    flex-direction: column;
    gap: 187px;
}

[class*="reason__item--"] {
	position: relative;
}

[class*="reason__item--"]::before{
	position: absolute;
	content: "";
	width: 910px;
	height: 360px;
	top: 0;
	bottom: 0;
	margin: auto;
	left: -391px;
}

[class*="reason__item--"]:nth-of-type(even):before{
	left: inherit;
	right: -389px;
}

.reason__item--reverse::before{
	background: url(../images/img.webp) no-repeat center / cover;
}

.reason__item--one-stop::before{
	background: url(../images/img-1.webp) no-repeat center / cover;
}

.reason__item--advice::before{
	background: url(../images/img-2.webp) no-repeat center / cover;
}

.reason__item--plan::before{
	background: url(../images/img-3.webp) no-repeat center / cover;
}

.reason__txt-box {
	margin-left: auto;
	width: 590px;
}

[class*="reason__item--"]:nth-of-type(even) .reason__txt-box {
	margin-left: 0;
	margin-right: auto;
}

.reason__img-box {
    width: 600px;
    height: 380px;
    position: relative;
}

.reason__img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px; /* Approximating the rounded look */
    box-shadow: 10px 10px 0px rgba(221, 233, 236, 1); /* Solid shadow effect from design perception */
}

/* Adjust shadow direction for reverse items if needed, or keep consistent */
.reason__item--reverse .reason__img-box img {
    box-shadow: -10px 10px 0px rgba(221, 233, 236, 1);
}


.reason__ttl {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 11px;
    line-height: 1.4;
    color: #0067C7;
    display: flex;
    align-items: center;
}

.reason__ttl .num {
    background: #0067C7;
    color: #fff;
    font-size: 22px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 11px;
    flex-shrink: 0;
    font-family: 'Meiryo', sans-serif;
    font-weight: bold;
    padding-top: 5px;
}

.reason__desc {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.reason__item:nth-of-type(4) .reason__ttl {
    align-items: flex-start; /* For multi-line title */
}

.reason__item:nth-of-type(4) .reason__ttl .num {
    margin-top: 5px;
}


/* Flow Section */

.main__list{
    display: flex;
    justify-content: space-between;
}

.flow__box{
	display: flex;
    flex-direction: column;
    gap: 10px;
}

[class*="flow__choice--"] p{
    width: 90px;
    height: 195px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    font-family: "Meiryo", sans-serif;
    line-height: 1.2;
    writing-mode: vertical-rl;
    letter-spacing: 4px;
}

.flow__choice--sale p{
	background: #0067c6;
}

.flow__choice--buy p{
	background: #1b6d81;
}

.flow__list {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    counter-reset: number;
    z-index: 0;
}

.flow__list::before{
    position: absolute;
    content: "";
    background: url(../images/arrow01.webp) no-repeat center / cover;
    width: 959px;
    height: 225px;
    top: 4px;
    bottom: 0;
    margin: auto;
    left: -32px;
    z-index: 0;
}

.flow__item {
    width: 100px;
    height: 400px;
    background: #fff;
    text-align: center;
    padding: 20px 5px;
    box-sizing: border-box;
    position: relative;
    counter-increment: number;
    z-index: 1;
}

.flow__item--conclusion{
    border-radius: 6px;
    border: 3px solid #0D85F0;
}

.flow__item:last-of-type{
    z-index: -1;
}

.flow__item::before{
    position: absolute;
    content: counter(number, decimal-leading-zero);
    font-size: 28px;
    font-weight: 400;
    color: #9C9C9C;
    line-height: 1;
    left: 0;
    right: 0;
    margin: auto;
    top: 42px;
}

.flow__item::after{
    position: absolute;
    content: "step";
    font-size: 16px;
    font-weight: 400;
    color: #9C9C9C;
    line-height: 1;
    right: 0;
    left: 0;
    margin: auto;
    top: 20px;
}

.flow__item.dif__height{
    height: 280px;
}

.flow__ttl {
    font-size: 20px;
    font-weight: bold;
    writing-mode: vertical-rl;
    margin: 0 auto;
    letter-spacing: 0.1em;
    padding-top: 70px;
    letter-spacing: 4px;
}

.conclusion__box{
    position: absolute;
    bottom: -4px;
    left: -211px;
}

.point__img{
    width: 199px;
}

.point__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Contact Section */
.contact__box {
    text-align: center;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact__tel p {
    margin-bottom: 10px;
}

.tel__number {
    position: relative;
    font-size: 30px;
    font-weight: bold;
    color: #333331;
    line-height: 1.5;
    margin-top: 12px;
    padding-left: 26px;
}

.tel__number::before{
    position: absolute;
    content: "";
    background: url(../images/icon-tel.webp) no-repeat center / cover;
    width: 24px;
    height: 24px;
    top: 0;
    bottom: 0;
    left: 48px;
    margin: auto;
}

.contact__btns {
    background-color: #fff;
    width: 360px;
    height: 170px;
    border-radius: 10px;
}

[class*="btn__txt--"]{
    font-size: 16px;
    font-weight: 400;
    color: #0067C7;
    letter-spacing: 3.2px;
    text-align: center;
    margin-top: 33px;
}

.btn{
    width: 320px;
    height: 60px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    border-radius: 50px;
    position: relative;
    margin: 18px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 32px;
}

.btn::after{
    position: absolute;
    content: "";
    background: url(../images/icon-arrow.webp) no-repeat center / cover;
    width: 8px;
    height: 12px;
    top: 0;
    bottom: 0;
    right: 19px;
    margin: auto;
}

.btn--mail {
    background: #0067C7;
}

.btn--mail::before{
    position: absolute;
    content: "";
    background: url(../images/icon-mail.webp) no-repeat center / cover;
    width: 26px;
    height: 22px;
    top: 0;
    bottom: 0;
    left: 97px;
    margin: auto;
}

.btn--assess {
    background: #1B6D82;
}

.btn--assess::before{
    position: absolute;
    content: "";
    background: url(../images/icon-satei.webp) no-repeat center / cover;
    width: 20px;
    height: 27px;
    top: 0;
    bottom: 0;
    left: 82px;
    margin: auto;
}

.tel__time {
    margin-top: 7px;
    color: #9C9C9C;
}

/* Voice & Blog (Simple Layout) */
/*スタッフ紹介とお客様の声*/

.section__wrapper--customer{
    padding-block: 61px 65px;
}

.section__wrapper--customer .ttl__box{
    margin-bottom: 19px;
}

.section__wrapper--staff .card__contents,
.section__wrapper--customer .card__contents,
.section__wrapper--blog .card__contents {
    width: 961px;
    margin: 0 auto;
}

.section__wrapper--staff .is-no-swiper{
    width: 267px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

[class*="blog__list--"]{
    margin-bottom: 21px;
}

.section__wrapper--staff .is-no-swiper [class*="blog__list--"],
.section__wrapper--customer .is-no-swiper [class*="blog__list--"]{
    margin-bottom: 0;
}

.blog__item--customer.swiper-slide {
    width: 300px;
}

.blog__item--customer.swiper-slide:not(:last-of-type){
    margin-right: 20px;
}

[class*="blog__item--"]{
    padding: 15px 15px 14px;
    border: 1px solid #D9D9D9;
    background-color: #fff;
    border-radius: 10px;
}

.is-no-swiper .blog__list--customer.swiper-wrapper,
.is-no-swiper .blog__list--staff.swiper-wrapper {
    justify-content: center;
}

.is-no-swiper .blog__list--customer .blog__item--customer,
.is-no-swiper .blog__list--staff .blog__item--staff{
    width: 300px;
}

.is-no-swiper .blog__list--customer .blog__item--customer:not(:last-of-type),
.is-no-swiper .blog__list--staff .blog__item--staff:not(:last-of-type){
    margin-right: 20px;
}

[class*="blog__img--"]{
    width: 270px;
    height: 203px;
}

[class*="blog__img--"] img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

[class*="blog__box--"]{
    margin-top: 11px;
}

[class*="blog__name--"]{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

[class*="blog__txt--"]{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cmn__more a{
    position: relative;
    width: 200px;
    height: 45px;
    margin: 21px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background-color: #fff;
    border: 1px solid #0D85F0;
    color: #0D85F0;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    padding-top: 5px;
    line-height: 1.5;
}


/*スワイパー*/

.section__cardslider .swiper-option-wrap {
    position: relative;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.cmn__section .swiper-button-prev {
    left: 450px;
}
.cmn__section .swiper-button-next {
    right: 450px;
}
.cmn__section .swiper-button-next,
.cmn__section .swiper-button-prev {
    position: unset;
    width: fit-content;
    height: fit-content;
    top: 415px;
    z-index: 1;
    margin: 0;
}
.cmn__section .swiper-button-prev::after,
.cmn__section .swiper-button-next::after {
    content: "";
    background: url(../images/icon_swiper_arrow.webp) no-repeat center / cover;
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
}

.cmn__section .swiper-button-prev:hover::after {
    transform: rotate(180deg); /* ← 左矢印は回転も維持 */
}
.cmn__section .swiper-button-prev::after {
    transform: rotate(180deg);
}
.swiper-pagination{
    position: unset;
    width: fit-content;
    height: fit-content;
}
.cmn__section .swiper-pagination{
    position: unset;
    width: fit-content!important;
    height: fit-content;
    z-index: 0;
}
.cmn__section .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #CBCBCB;
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) !important;
    opacity: 1;
}
.cmn__section .swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #0D85F0;
    opacity: 1;
}
.section__wrapper--sale .cmn__section .swiper-pagination-bullet-active{
    background-color: #DC3E60;
}

.cmn__more a::before{
    position: absolute;
    content: "";
    background-color: #0D85F0;
    width: 2px;
    height: 10px;
    right: 20px;
    transform: rotate(50deg);
    top: 20px;
}

.cmn__more a::after{
    position: absolute;
    content: "";
    background-color: #0D85F0;
    width: 2px;
    height: 10px;
    right: 20px;
    transform: rotate(-50deg);
    top: 15px;
}