@charset "utf-8";


.menu-anchor {
    margin-top: -100px;
    padding-top: 100px;
}

.underttl-area{
	margin: 0;
}

/* -----------------------------------------------------------
    cmn-intro-area 導入
-------------------------------------------------------------- */
.cmn-intro-area{
	padding: 60px 0 60px;
}

.cmn-intro-area .sec-ttl {
	margin: 0 auto;
}

.cmn-intro-area .sec-ttl .sub-catch{
	color:  var(--blue);
	font-size: 2.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.professionals .cmn-intro-area .sub-catch {
	line-height: 1.6;
	margin: 0 0 10px;
}

.cmn-intro-area .inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
.cmn-intro-area .text-wrap{
	width: 640px;
}
.cmn-intro-area .section-catch{
	margin: 0 0 30px;
}
.cmn-intro-area .basic-txt{
	margin: 20px 0 0;
}

.cmn-intro-area .img{
	width: 500px;
}
.cmn-intro-area .img img{
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
}

.cmn-intro-area .more-btn{
	display: none;
}

@media screen and (max-width: 768px){
	
	.cmn-intro-area{
		padding: 20px 20px;
	}
	.cmn-intro-area .sec-ttl .sub-catch{
		font-size: 2.0rem;
	}
	
	.professionals .cmn-intro-area .sub-catch {
		font-size: 2.0rem;
		text-align: left;
		margin: 0;
	}
	.cmn-intro-area .inner{
		display: block;
	}
	.cmn-intro-area .text-wrap{
		width: 100%;
	}
	.cmn-intro-area .sec-ttl .sec-catch {
		padding: 0;
		font-size: 2.2rem;
		line-height: 1.6;
	}
	.cmn-intro-area .basic-txt{
		font-size: 1.5rem;
		margin: 15px 0 0;
	}

	.cmn-intro-area .img{
		width: 100%;
		text-align: center;
		position: relative;
		z-index: 0;
		margin: 20px 0 0px;
	}
	.cmn-intro-area .img img{
		height: 200px;
		margin: 0 auto 0;
		border-radius: 10px;
	}
	.cmn-intro-area .text-wrapper .more-btn {
        display: block;
        color: var(--blue);
        background: #fff;
        border: 1px solid var(--blue);
        border-radius: 50px;
        padding: 5px 20px;
        margin: 10px auto 0;
        cursor: pointer;
        font-size: 1.4rem;
        font-weight: bold;
        min-width: 115px;
    }
		/* スマホのみ折りたたみ */

	.cmn-intro-area .text-wrapper .basic-txt{
		max-height:120px;
		position: relative;
		overflow:hidden;
		transition:0.3s;
	}
	
	.cmn-intro-area .text-wrapper .basic-txt::after{
		content:"";
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		height:60px;
		background:linear-gradient(
		  rgba(255,255,255,0),
		  rgba(255,255,255,1)
		);
	  }

	.cmn-intro-area .text-wrapper .basic-txt.open{
		max-height:1000px;
	}

	.cmn-intro-area .text-wrapper .basic-txt.open::after{
		display: none;
	}

}

/* -----------------------------------------------------------
    worries-area　よくあるお悩み
-------------------------------------------------------------- */
.worries-area{
	position: relative;
	min-height: 100%;
	background: var(--bg-gray);
	z-index: 1;
	height: 100%;
	margin: 80px 0 0px;
	padding: 100px 0 200px;
}

.worries-area .sec-catch {
    font-size: 2.2rem;
	letter-spacing: .05em;
    margin: 20px 0;
}

.worries-area .box-list {
	padding: 30px 0px;
	position: relative;
}

.worries-area .box-list .col-list {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	position: relative;
}
.worries-area .box-list .col-list::after {
    content: "";
    position: absolute;
    bottom: -65px;
    right: 420px;
    display: block;
    width: 44px;
    height: 44px;
    background: url(../img/icon-worries.png) no-repeat top right / contain;
	display: none;
}
.worries-area .col-list li::before{
	display: none;
}
.worries-area .box-list .col-list li {
   	width: calc( ( 100% - 20px ) / 2 );
    text-align: center;
    line-height: 1.6;
    padding: 0 0 0 0px;
    position: relative;
	margin: 0;
}

.worries-area .box-list .col-list li p{
    font-size: 1.6rem;
}

.worries-area .issue_balloon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    padding: 30px 20px;
	background: #fff;
	border: solid 3px #bdc6e4;
    border-radius: 10px;
	font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.5;
	
}

.professionals .worries-area .issue_balloon {
    position: relative;
    display: block;
	text-align: left;
    font-size: 1.4rem;
	height: 280px;
	padding: 30px;
}

.professionals .worries-area .issue_balloon .bold{
    font-size: 2rem;
	margin: 0 0 10px;
	color: #6167ab;
}

.worries-area .img-box{
}

.worries-area .issue_fg {    
	position: relative;
    z-index: 1;
    margin: 0 auto 0;
    /*width: 300px;*/
    text-align: center;
}

.worries-area .issue_fg img{
	width: 300px;
}

.worries-area .arrow_down {
    font-size: 40px;
    position: relative;
    width: 0.6em;
    height: 1em;
    top: 20px;
    margin: 0 auto;
    background-color: var(--main);
}

.worries-area .arrow_down::before {
    position: absolute;
    top: 0.8em;
    left: -0.5em;
    width: 0;
    height: 0;
    content: "";
    border-top: 0.8em solid var(--main);
    border-left: 0.8em solid transparent;
    border-right: 0.8em solid transparent;
}

.worries-area .arrow {
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.0rem;
    color: var(--main);
    transition: all .2s;
    margin: 20px auto 20px;
}

.worries-area .anser-box{
	background: #fff;
	border: 2px solid var(--main);
	padding: 30px 20px;
	margin: 30px auto 0;
	border-radius: 10px;
	text-align: center;
}

.worries-area .anser-box .title{
	color: var(--main);
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.8;
	margin: 0 0 10px;
}

@media screen and (max-width: 768px){

	.worries-area{
		margin: 40px auto 10px;
		padding: 40px 20px 50px;
	}
	
	.worries-area .sec-catch {
		font-size: 1.8rem;
		text-align: left;
		margin: 20px 0;
	}
	
	.worries-area .box-list{
		padding: 0;
	}
	.worries-area .box-list .col-list {
		display: block;
	}
	.worries-area .box-list .col-list li {
		width: 100%;
		padding: 0 0 10px 0px;
	}
	.worries-area .box-list .col-list::after {
		content: "";
		position: absolute;
		bottom: -35px;
		right: 40px;
		width: 34px;
		height: 34px;
	}

	.worries-area .box-list .col-list li p{
		font-size: 1.5rem;
		line-height: 1.6;
	}

	.worries-area .box-list .col-list li .bold{
		margin: 0 0 5px;
	}
	.worries-area .issue_balloon{
		height: auto;
		padding: 15px 15px;
		border-radius: 5px;
		text-align: left;
		justify-content: flex-start;
	}
	
	.professionals .worries-area .issue_balloon {
		height: auto;
		font-size: 1.4rem;
		padding: 15px 15px;
	}
	
	
	.professionals .worries-area .issue_balloon .bold{
		font-size: 1.7rem;
		margin: 0 0 5px;
	}
	
	.worries-area .img-box{
		padding: 0;
	}
	
	.worries-area .issue_fg {
		top: auto;
		margin: 0 auto 0;
	}
	
	.worries-area .issue_fg::after {
		top: -10px;
        right: -14%;
	}
	
	.worries-area .issue_fg img{
		max-width: 240px;
		width: 100%;
	}
	.worries-area .arrow {
		font-size: 4.0rem;
		margin: 20px auto 20px;
	}
	.worries-area .box-list .basic-txt{
		margin: 0;
		display: none;
		padding: 0 20px 20px; 
	}
	
	.worries-area .anser-box {
		margin: 0;
		border-radius: 5px;
		padding: 20px 15px;
		text-align: left;
	}

	.worries-area .anser-box .title{
		font-size: 2.2rem;
		text-align: left;
		line-height: 1.5;
	}


	#rental-office .worries-area .anser-box .title{
		font-size: 1.6rem;
		text-align: left;
	}

}

/* -----------------------------
	目次
-------------------------------- */
.cmn-index-block {
	margin: 0 auto;
	width: 1200px;
	transition: all .3s;
}

.cmn-index-btn {
	background: #fff;
	color: var(--main);
	font-weight: bold;
	line-height: 1.5;
	font-size: 1.5rem;
	padding: 10px 25px 10px 40px;
	border-radius: 30px;
	display: inline-block;
	position: relative;
	box-shadow: 0 3px 15px rgba(0,0,0,.1);
	cursor: pointer;
	transition: all .3s;
	display: none;
}

.cmn-index-btn .accordion-icon {
	right: initial;
	left: 15px;
	width: 12px;
	height: 12px;
	position: absolute;
    top: 50%;
    z-index: 1;
}

.accordion-icon, .accordion-icon span {
    display: inline-block;
    transition: all .3s;
    box-sizing: border-box;
}

.cmn-index-btn .accordion-icon span {
	/*background: #fff;*/
	background: var(--main);
}

.cmn-index-btn .accordion-icon span {
	position: absolute;
    width: 100%;
	height: 2px;
    background-color: var(--main);
}

.cmn-index-btn .accordion-icon span:nth-of-type(1) {
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.cmn-index-btn .accordion-icon span:nth-of-type(2) {
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
.cmn-index-btn.active .accordion-icon span:nth-of-type(1) {
	display:none;
}
.cmn-index-btn.active .accordion-icon span:nth-of-type(2) {
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}


.cmn-index-more {
}

.cmn-index-list {
	display: flex;
	align-items: center;
	width: 100%;
	background: var(--bg-blue);
	padding: 15px 15px 15px 70px;
	position: relative;
	border-radius: 5px;
}
.cmn-index-list::before{
    position: absolute;
    display: inline-block;
    content: "MENU";
    left: -30px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	background: var(--main);
	font-size: 1.4rem;
	line-height: 1;
	font-family: var(--cat);
	line-height: 1;
	color: #fff;
	letter-spacing: 2px;
	font-weight: 600;
	padding: 10px 15px 7px 15px;
	border-radius: 50px;
}
.cmn-index-list li {
}

.cmn-index-list li a {
	font-weight: 500;
	display: inline-block;
	position: relative;
	line-height: 1.5;
	padding: 8px 16px;
	border-radius: 3px;
}

/*追従後*/
#nav_sp {
	transition: 0.3s;
}
#nav_sp.sp-nav-fix {
	position: fixed;
	top: 110px;
	left: 15px;
	margin: 0;
	z-index: 310;
	transition: 0.3s;
}
#nav_sp.sp-nav-fix.cmn-index-block {
	width: fit-content;
	max-width: 1250px;
}
#nav_sp.sp-nav-fix .cmn-index-btn {
	display: inline-block;
}
#nav_sp.sp-nav-fix .cmn-index-more {
	display: none;
	margin: 5px 0 0;
}
#nav_sp.sp-nav-fix .cmn-index-list {
	padding: 12px 10px;
	background: var(--bg-blue);
	box-shadow: 0px 3px 20px rgba(0, 0, 0, .08);
}
#nav_sp.sp-nav-fix .cmn-index-list::before {
	display: none;
}
#nav_sp.sp-nav-fix .cmn-index-list a {
    padding: 8px 15px;
    border-radius: 3px;
    font-size: 1.5rem;
}


@media (hover: hover) and (pointer: fine) {
	.cmn-index-list li a:hover {
		opacity: 1;
		background: var(--main);
		color: #fff;
	}
	
	.cmn-index-btn:hover {
		box-shadow: none;
	}
	.cmn-index-btn:hover .accordion-icon span {
	}
}

@media screen and (max-width: 768px){
	.cmn-index-block {
		margin: 0;
		width: 100%;
		padding: 0 20px;
		transition: 0.3s;
		position: relative;
		z-index: 310;
	}
	
	.cmn-index-btn {
		display: inline-block;
		z-index: 310;
		border: 1px solid var(--main);
	}
	
	.cmn-index-more {
		display: none;
		margin: -20px 0 0!important;
	}
	
	.cmn-index-list {
		display: block!important;
		/*background: var(--beige02)!important;*/
		padding: 30px!important;
		position: relative!important;
		box-shadow: none!important;
		/*z-index: 5;*/
	}
	.cmn-index-list::before{
		display: none;
	}

	.cmn-index-list li a {
		padding: 12px 0 8px 16px;
		display: block;
		border-bottom: 1px var(--main) dashed;
	}
	.cmn-index-list li a:hover {
		background: none;
		color: #00100E;
	}
	
	.cmn-index-list li a::before {
		top: 10px;
	}
	.cmn-index-list li a::before {
		content: "\f105";
		display: inline-block;
		top: 12px;
		left: 0;
		position: absolute;
		font-size: 1.5rem;
		font-family: "FontAwesome";
		color: var(--main);
	}
	
	
	/*追従後*/
	#nav_sp {
		transition: 0.3s;
	}
	#nav_sp.sp-nav-fix {
		position: fixed;
		top: 10px;
		left: 0;
		/*z-index: 5;*/
		margin: 0;
	}

	#nav_sp.sp-nav-fix.cmn-index-block {
		width: calc( 100% - 65px);
		padding: 0 0 0 10px;
	}

	#nav_sp.sp-nav-fix .cmn-index-list {
		/*background: #fff !important;*/
        box-shadow: 0px 3px 20px rgba(0, 0, 0, .08) !important;;
	}

	#nav_sp.sp-nav-fix .cmn-index-list li{
		width: 100%;
	}

	#nav_sp.sp-nav-fix .cmn-index-list li a {
		width: 100%;
	}

	#nav_sp.sp-nav-fix .cmn-index-more {
	}
	
	#nav_sp.sp-nav-fix.index-wrap {
		margin: 0;
		padding: 0;
	}
}

/* -----------------------------------------------------------
    強み
-------------------------------------------------------------- */

.reason-area{
    padding: 50px 0 100px;
	background: var(--blue);
	position: relative;
}

.reason-area::before,.reason-area::after {    
	position: absolute;
    display: block;
    content: "";
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 120px;
    top: -119px;
    z-index: 1;
    background-color: var(--blue);
}

.reason-area::before {
    clip-path: polygon(100% 100%, 0% 100% , 0.00% 22.96%, 1.43% 24.67%, 2.86% 26.58%, 4.29% 28.65%, 5.71% 30.86%, 7.14% 33.18%, 8.57% 35.60%, 10.00% 38.07%, 11.43% 40.58%, 12.86% 43.09%, 14.29% 45.57%, 15.71% 48.00%, 17.14% 50.35%, 18.57% 52.58%, 20.00% 54.68%, 21.43% 56.62%, 22.86% 58.37%, 24.29% 59.93%, 25.71% 61.26%, 27.14% 62.35%, 28.57% 63.20%, 30.00% 63.78%, 31.43% 64.10%, 32.86% 64.15%, 34.29% 63.93%, 35.71% 63.45%, 37.14% 62.70%, 38.57% 61.69%, 40.00% 60.45%, 41.43% 58.97%, 42.86% 57.29%, 44.29% 55.42%, 45.71% 53.38%, 47.14% 51.19%, 48.57% 48.88%, 50.00% 46.48%, 51.43% 44.01%, 52.86% 41.51%, 54.29% 39.00%, 55.71% 36.51%, 57.14% 34.07%, 58.57% 31.71%, 60.00% 29.45%, 61.43% 27.33%, 62.86% 25.36%, 64.29% 23.57%, 65.71% 21.98%, 67.14% 20.61%, 68.57% 19.48%, 70.00% 18.59%, 71.43% 17.96%, 72.86% 17.60%, 74.29% 17.50%, 75.71% 17.68%, 77.14% 18.12%, 78.57% 18.83%, 80.00% 19.79%, 81.43% 21.00%, 82.86% 22.43%, 84.29% 24.08%, 85.71% 25.92%, 87.14% 27.94%, 88.57% 30.11%, 90.00% 32.40%, 91.43% 34.78%, 92.86% 37.24%, 94.29% 39.74%, 95.71% 42.25%, 97.14% 44.75%, 98.57% 47.20%, 100.00% 49.57%);
}

.reason-area::after {
    top: auto;
    bottom: -124px;
    height: 125px;
    /* background: url(../img/deco-frame-bottom.png) no-repeat center bottom / cover; */
    clip-path: polygon(100% 0%, 0% 0%, 0.00% 44.89%, 1.43% 42.39%, 2.86% 39.88%, 4.29% 37.38%, 5.71% 34.92%, 7.14% 32.53%, 8.57% 30.23%, 10.00% 28.06%, 11.43% 26.03%, 12.86% 24.18%, 14.29% 22.52%, 15.71% 21.07%, 17.14% 19.85%, 18.57% 18.88%, 20.00% 18.15%, 21.43% 17.70%, 22.86% 17.51%, 24.29% 17.59%, 25.71% 17.94%, 27.14% 18.55%, 28.57% 19.42%, 30.00% 20.55%, 31.43% 21.90%, 32.86% 23.48%, 34.29% 25.25%, 35.71% 27.21%, 37.14% 29.33%, 38.57% 31.58%, 40.00% 33.93%, 41.43% 36.37%, 42.86% 38.86%, 44.29% 41.37%, 45.71% 43.87%, 47.14% 46.34%, 48.57% 48.75%, 50.00% 51.06%, 51.43% 53.26%, 52.86% 55.31%, 54.29% 57.19%, 55.71% 58.89%, 57.14% 60.37%, 58.57% 61.63%, 60.00% 62.65%, 61.43% 63.41%, 62.86% 63.91%, 64.29% 64.15%, 65.71% 64.11%, 67.14% 63.81%, 68.57% 63.24%, 70.00% 62.41%, 71.43% 61.33%, 72.86% 60.01%, 74.29% 58.47%, 75.71% 56.72%, 77.14% 54.79%, 78.57% 52.70%, 80.00% 50.47%, 81.43% 48.13%, 82.86% 45.71%, 84.29% 43.23%, 85.71% 40.72%, 87.14% 38.21%, 88.57% 35.73%, 90.00% 33.31%, 91.43% 30.98%, 92.86% 28.77%, 94.29% 26.69%, 95.71% 24.78%, 97.14% 23.05%, 98.57% 21.53%, 100.00% 20.23%);
}

@media screen and (max-width: 1500px) {
}
/* point-wrap */
.reason-area .point-wrap{
	margin: 40px 0 0;
}

.reason-area .point-list{
	display: flex;
	gap: 70px 0;
	flex-wrap: wrap;
}
.reason-area .point-list li{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.reason-area .point-list li.point-contents{
	border-bottom: #eee 2px dashed;
    padding: 0 0 80px;
}

.reason-area .point-list li.point-contents.list{
	display: block;
}
.reason-area .point-list li.point-contents:last-child{
	border-bottom: none;
    padding: 0 0 0px;
}

.reason-area .point-img{
    width: 500px;
    height: 440px;
    border-radius: 10px;
}
.reason-area .point-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.reason-area .point-ttl-wrap{
	width: calc(100% - 550px);
}
.reason-area .point-ttl-wrap .feature-num {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    line-height: 1.3;
    font-size: 1.8rem;
    font-weight: 600;
    width: 171px;
	margin: 8px 0px 19px;
    z-index: 1;
}

.reason-area .point-ttl-wrap .feature-num::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: url(../img/fukidashi04.svg) center / cover, no-repeat;
    aspect-ratio: 171 / 55;
    width: 171px;
    z-index: -1;
}
.reason-area .point-ttl-wrap .section-sub-catch{
	font-size: 1.8rem;
    letter-spacing: .1rem;
    color: #fff;
	font-weight: 600;
	margin: 5px 0 0;
	color: var(--yellow);
	color: #FFF33C;
}
.reason-area .point-ttl-wrap .section-catch{
    color: #fff;
	font-size: 2.6rem;
	line-height: 1.6;
	font-weight: 600;
}
.reason-area .point-ttl-wrap .basic-txt{
    color: #fff;
	font-size: 1.5rem;
	margin: 15px 0 0;
	font-weight: 500;
}

.reason-area .more-btn{
	display: none;
}

.reason-area .cmn-line {
    background-image: linear-gradient(to right, #ffffff30 0%, #ffffff33 50%, transparent 50%);
}

@media screen and (max-width: 768px){

	.reason-area{
		padding: 20px 20px 0px;
	}
	
	.reason-area::before,.reason-area::after {        
		height: 60px;
        top: -59px;
    }
	.reason-area::after {
        top: auto;
        bottom: -60px;
        height: 60px;
    }
	.reason-area .flex-box{
		display: block;
		margin: 0 0 10px;
	}
	.reason-area .point-ttl-wrap .section-sub-catch {
		font-size: 1.8rem;
		line-height: 1.6;
		margin: 5px 0;
	}
	.reason-area .flex-box .sec-catch{
		font-size: 2.0rem;
        line-height: 1.6;
		margin: 10px 0 0;
	}

	.reason-area .text-wrap{
		padding: 0;
	}
	
	/* point-wrap */
	.reason-area .point-wrap{
		border-radius: 0;
		padding: 10px 0 30px;
		margin: 0 0 0;
	}

	.reason-area .point-list{
		gap: 30px 0;
	}
	.reason-area .point-list li{
		display: block;
		line-height: 1.8;
		margin: 0 0 0;
	}
	.reason-area .point-list li:first-child{
		margin: 0;
	}
	.reason-area .point-list li.point-contents {
		padding: 0 0 0;
		border-bottom: none;
	}
	.reason-area .point-img{
		width: 100%;
		height: 220px;
		text-align: center;
	}
	.reason-area .point-img img{
		border-radius: 10px;
	}
	.reason-area .point-img.pt img{
		object-position: center top;
	}
	
	.reason-area .point-ttl-wrap{
		padding: 10px 0 0;
		width: 100%;
	}
	
	.reason-area .point-ttl-wrap .feature-num{
		font: 900 1.6rem / 1.6 var(--lato);

	}
	.reason-area .point-ttl-wrap .feature-num::before{
		top: -6px;
		left: 50%;
		width: 146px;
	}
	.reason-area .point-ttl-wrap .section-catch{
		font-size: 2.2rem;
	}
	.reason-area .point-ttl-wrap .section-catch.sub{
		font-size: 1.7rem;
	}
	.reason-area .point-ttl-wrap .basic-txt{
		margin: 5px 0 0;
	}
	
	.reason-area .point-ttl-wrap .basic-txt{
		max-height:120px;
		overflow:hidden;
		position:relative;
		transition:0.4s;
	}
	
	.reason-area .point-ttl-wrap .basic-txt::after{
		content:"";
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		height:60px;
		background:linear-gradient(rgba(255, 255, 255, 0), rgb(22 115 177));
	}
	.reason-area .point-ttl-wrap .basic-txt.open::after{
		display:none;
	}
	.reason-area .more-btn{
		display: block;
        background: #fff;
        color: var(--blue);
        border: 1px solid #fff;
        border-radius: 50px;
        padding: 5px 20px;
        margin: 10px auto 0;
        cursor: pointer;
        font-size: 1.4rem;
        font-weight: bold;
		min-width: 115px;
	}

	/* スマホのみ折りたたみ */

	.reason-area .basic-txt{
		max-height:120px;
		overflow:hidden;
		transition:0.3s;
	}

	.reason-area .basic-txt.open{
		max-height:1000px;
	}

}

/* -----------------------------------------------------------
     お客様の声
-------------------------------------------------------------- */
.case-area {
	padding: 100px 0;
    position: relative;
}
.case-area .voice-header .basic-txt{
	margin: 15px 0 0;
	font-size: 2.0rem;
}

.case-area .voice-header .sub-catch{
	font-size: 2.0rem;
	margin: 20px 0 0;
}

/* リスト */
.case-area .voice-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin: 40px 0 0;
}

/* カード */
.case-area .voice-item {
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 30px;
	background: var(--blue01);
	border-radius: 10px;
	/*border: 1px solid var(--gray01);*/
	transition: all .3s ease;
}

/* 人物画像 */
.case-area .voice-persona {
	flex: 0 0 120px;
}

.case-area .voice-persona img {
	width: 130px;
	object-fit: cover;
	border-radius: 50%;
	border: 5px solid var(--bg-main);
}

/* プロフィール */
.case-area .voice-profile {
	flex: 1;
}

/* タイトル */
.case-area .voice-profile-ttl {    
	font-size: 2.4rem;
    line-height: 1.6;
    font-weight: 600;
	margin-bottom: 20px;
	padding-bottom: 9px;
    border-bottom: 1px solid var(--blue);
}

/* dl */
.case-area .voice-profile-dl dl {
	display: inline-flex;
    margin: 0 12px 12px 0;
    flex-wrap: wrap;
}
.case-area .voice-profile-dl dd.voice {
    margin: 0 0px 10px 0;
}

/* dt */
.case-area .voice-profile-dl dt {
	min-width: 60px;
	font-weight: 500;
	text-align: center;
	color: #fff;
	background: var(--main);
	padding: 4px 10px;
	border-radius: 3px;
	height: fit-content;
	line-height: 1.2;
}

/* dd */
.case-area .voice-profile-dl dd {
	line-height: 1.7;
	color: var(--gray);
	margin: 0 0 0 10px;
}

@media screen and (max-width: 768px) {
    .case-area {
		padding: 40px 0;
	}

	.case-area .voice-header .sub-catch{
		margin: 15px 0;
		line-height: 1.6;
		font-size: 1.8rem;
	}
	
	/* リスト */
	.case-area .voice-list {
		margin: 0px 0 0;
		gap: 20px;
	}
	
	.case-area .sec-catch {
        font-size: 2.4rem;
        text-align: left;
    }
	
	.case-area .basic-txt {
        margin: 10px 0;
    }

	/* カード */
	.case-area .voice-item {
		display: block;
		padding: 30px 15px 10px;
	}

	/* 人物画像 */
	.case-area .voice-persona {
		text-align: center;
	}

	.case-area .voice-persona img {
		width: 100px;
	}

	/* タイトル */
	.case-area .voice-profile-ttl {    
		font-size: 1.8rem;
		text-align: left;
		margin: 10px 0;
	}

	/* dl */
	.case-area .voice-profile-dl dl {
		display: contents;
		margin-bottom: 12px;
	}

	/* dt */
	.case-area .voice-profile-dl dt {
		font-size: 1.3rem;
	}

	/* dd */
	.case-area .voice-profile-dl dd {
		font-size: 1.4rem;
        margin: 5px 0 0;
        text-align: center;
	}
	.case-area .voice-profile-dl dd.voice {
		text-align: left;
	}
}


/* -----------------------------------------------------------
    関連事例
-------------------------------------------------------------- */

.relation-area {
	padding: 150px 0 50px;    
    position: relative;
}
.relation-area::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/bg-works.png) center / cover, no-repeat;
    aspect-ratio: 1512 / 1114;
    left: -150px;
    top: 150px;
    width: 1132px;
    z-index: -1;
}

.relation-area::after {
    content: "";
    display: block;
    position: absolute;
    background: url(../img/bg-works02.png) center / cover, no-repeat;
    aspect-ratio: 811 / 715;
    height: 600px;
    right: -250px;
    bottom: -280px;
    z-index: -1;
}

.relation-area .sub-catch {
	margin: 20px 0 0;
	line-height: 1.6;
}

@media screen and (max-width: 768px) {
	
	.relation-area {
		padding: 80px 20px 40px;
	}
	.relation-area .sec-catch {
		font-size: 2.0rem;
		text-align: left;
		margin: 20px 0;
	}
	
	.relation-area::before {
		left: -122px;
        top: 30px;
        width: 400px;
	}

	.relation-area::after {
		height: 200px;
        right: -97px;
        bottom: -138px;
	}
	
	.relation-area .sub-catch {
		text-align: left;
	}
	
}
/* -----------------------------------------------------------
    サービス紹介
-------------------------------------------------------------- */

.service-area {
	padding: 100px 0;
    background: var(--bg-blue);
	background: url(../img/dot.png);
    position: relative;
}

.service-area .cmn-secttl .sub-catch {
	margin: 20px 0 0;
	line-height: 1.6;
}

.professionals .flex-box{
	display: flex;
	justify-content: center;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0 0;
}
.professionals .flex-box .img {
    width: 500px;
}

.professionals .flex-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.professionals .service-area .txt-box{
	width: 670px;
}

.professionals .service-area .basic-txt{
	font-size: 1.7rem;
	text-align: left;
}

.service-area .btn-lp-link{
	margin: 40px 0 0;
	text-align: center;
}

.service-area .btn_sub_txt {
	text-align: center;
    position: relative;
    display: flex;
	gap: 10px;
    align-items: end;
    justify-content: center;
	font-size: 1.8rem;
	line-height: 1.5;
	margin: 0 0 10px;
}
.service-area .btn_sub_txt::before, 
.service-area .btn_sub_txt::after {
    content: "";
    width: 25px;
    height: 2px;
    background-color: var(--main);
    margin: 0px 4px 15px;
}
.service-area .btn_sub_txt::before {
    transform: rotate(45deg);
}
.service-area .btn_sub_txt::after {
    transform: rotate(-45deg);
}

.service-area .job_link_box .job_link_btn {
	margin: 15px auto 0;
	text-align: center;
    width: initial;
}
.service-area .cmn_btn.service_btn {    
	text-align: center;
    display: block;
    width: 450px;
    height: 70px;
    margin: 20px auto 0;
}
.service-area .cmn_btn.service_btn a{    
	text-align: center;
    display: inline-block;
    width: 450px;
    height: 70px;
    margin: 0 auto;
    font-family: 'Catamaran', sans-serif;
    font-weight: bold;
    background: var(--main) url(../img/icon-wht-link-lp.png) no-repeat right 30px top 25px;
    color: #fff;
    letter-spacing: .1em;
    padding: 20px 0;
    font-size: 1.6rem;
	border-radius: 50px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
}

.service-area .cmn_btn.service_btn a:hover {
	background: #2e9fea url(../img/icon-wht-link-lp.png) no-repeat right 30px top 25px;
	box-shadow: none;
}

@media screen and (max-width: 768px) {
	
	.service-area {
		padding: 40px 0px;
	}
	
	.service-area .cmn-secttl{
		padding: 0px 20px;
	}
	
	.service-area .cmn-secttl .sub-catch {
		text-align: left;
	}
	
	.professionals .flex-box{
		display: block;
		padding: 20px 0 0;
	}
	.professionals .flex-box .img {
		width: 100%;
	}
	.professionals .service-area .cmn_btn.service_btn,
	.professionals .service-area .txt-box{
		width: 100%;
	}

	.service-area .btn_sub_txt::before, .service-area .btn_sub_txt::after {
		margin: 0px 4px 5px;
	}
	.professionals .service-area .basic-txt{
		font-size: 1.6rem;
		margin: 10px 0 0;
	}
	
	.service-area .cmn_btn.service_btn a{
		width: 100%;
	}
	
	.service-area .btn_sub_txt{
		font-size: 1.5rem;
	}
	
	.service-area .btn-lp-link {
		margin: 15px 0 0;
		text-align: center;
	}

	.service-area .sec-catch{    
		font-size: 2.2rem;
		text-align: left;
		margin: 20px 0 0;
	}
}

/* -----------------------------------------------------------
 BEFORE AFTER
-------------------------------------------------------------- */

.before-after-area{
	padding:100px 0;
    z-index: -2;
}

.before-after-area .cmn-secttl::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/before-after-ill.png) center / cover, no-repeat;
    aspect-ratio: 200 / 150;
    left: 400px;
    top: -28px;
    width: 160px;
}

.before-after-area .basic-txt{
	margin:40px 0 0;
	font-size: 2.2rem;
	text-align: center;
	font-weight: 600;
}

.before-after-area .ba-box{
	display:flex;
	gap:40px;
	justify-content: space-between;
	padding: 40px 0 0;
}


.before-after-area .ba-card{
	width: calc((100% - 100px) / 2);
	padding:35px;
	border-radius: 0px 10px 10px 0;
	position: relative;
}

.before-after-area .ba-card.before{  
	border: 1px solid var(--gray01);
	background:#fff;
    border-radius: 10px;
}

.before-after-area .ba-card.before::before {
	font: 900 3.0rem / 1 var(--webicon);
    content: "\f061";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -65px;
    color: var(--main);
}

.before-after-area .ba-card.before h3{
	color:var(--gray);
}

	/* AFTER */
.before-after-area .ba-card.after{  
	border: 2px solid var(--blue);
	background:#fff;
    border-radius: 10px;
}

.before-after-area .ba-card.after h3{
	color: var(--blue);
    border-bottom: solid 1px var(--blue);
}

	/* TITLE */

.before-after-area .ba-card h3{
	font-size:2.4rem;
	margin-bottom:20px;
	margin-bottom: 16px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    padding: 0 0 10px;
    border-bottom: solid 1px var(--gray01);
	font-weight: 600;
}

	/* LIST */
.before-after-area .ba-card ul{
	padding:0;
}

.before-after-area .ba-card li{
	font-size: 1.7rem;
    line-height: 1.6;
    margin: 15px 0 0;
    padding: 0 0 0 30px;
    position: relative;
    font-weight: 500;
}

	/* CHECK ICON */
.before-after-area .ba-card li svg {
    position: absolute;
    left: 0;
    top: 2px;
}

.ba-card.before li::before{
	content: "・";
    position: absolute;
    left: 0;
    top: -6px;
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--gray);
}
@media screen and (max-width: 768px) {

	.before-after-area{
		padding: 10px 0 40px;
	}

	.before-after-area .basic-txt{
		font-size: 1.8rem;
        text-align: left;
        margin: 20px 0 0;
		line-height: 1.6;
		font-weight: 500;
	}

	.before-after-area .ba-box{
		display:block;
		padding: 20px 0 0;
	}

	.before-after-area .ba-card{
		width:100%;
		padding:20px 20px 20px 10px;
		position: relative;
	}

	.before-after-area .ba-card.before{
		margin: 0 0 50px;
	}

	.before-after-area .ba-card.before::before {
		font: 900 3.0rem / 1 var(--webicon);
		content: "\f063";
		display: block;
		position: absolute;
		top: 110%;
		transform: translateY(-50%);
		right: 50%;
		color: var(--main);
	}

	.beauty .before-after-area .ba-card.before::before {
		top: 105%;
	}

	.before-after-area .ba-card.before h3{
		color:var(--gray);
	}

		/* AFTER */
	.before-after-area .ba-card.after{  
		border: 2px solid var(--blue);
		background:#fff;
		border-radius: 10px;
	}

	.before-after-area .ba-card.after h3{
		color: var(--blue);
	}

		/* TITLE */

	.before-after-area .ba-card h3{
		font-size:2.0rem;
		margin-bottom:20px;
		font-weight:700;
		padding: 0 0 10px 10px;
	}

		/* LIST */
	.before-after-area .ba-card ul{
		padding:0;
	}

	.before-after-area .ba-card li{
		font-size: 1.6rem;
		line-height: 1.6;
		margin: 10px 0 0;
		padding: 0 0 0 30px;
	}

		/* CHECK ICON */
	.before-after-area .ba-card li svg {
	}

	.ba-card.before li::before{
	}

}