@charset "utf-8";

/*弊社の強み*/

/*FV*/
.FV__area__content{
    height:920px;
}

.FV__content{
    padding-top:30%;
    width:80%;
    margin:0 0 0 auto;
    text-align:right;
}
@media screen and (max-width:1366px){
    .FV__content{
        padding-top:40%;
    }
}
@media screen and (max-width:1080px){
    .FV__content{
        margin:0 auto;
        width:100%;
        padding-top:50%;
    }
}
@media screen and (max-width:708px){
    .FV__content{
        max-width:360px;
        padding-top:70%;
        text-align:left;
    }
}

.FV__content>.ttl-home{
    margin-right:20%;
}
@media screen and (max-width:1366px){
    .FV__content>.ttl-home{
        margin-right:30%;
    }
}
@media screen and (max-width:708px){
    .FV__content>.ttl-home{
        margin:0 auto;
    }
}

@media screen and (max-width:1080px){
    .FV__content>.ttl-home::before{
        margin-left:-30%;
    }
}
@media screen and (max-width:708px){
    .FV__content>.ttl-home::before{
        margin-left:auto;
        margin-right:auto;
    }
}

.FV__content>.txt{
    font-size:18px;
    font-family:'Noto serif JP';
    font-weight:500;
    line-height:2;
    text-align:right;
}
@media screen and (max-width:708px){
    .FV__content>.txt{
        text-align:left;
        font-size:14px;
    }
}

.FV__area-img{
    background: url(../../images/img/img_point/img_point_FV.png);
    background-repeat:no-repeat: ;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 920px;
}

/*ポイント一覧*/
.point{
    background-color:#EBECED;
}

.point>.container{
    max-width:none;
    padding-top:100px;
}
@media screen and (max-width:1080px){
    .point>.container{
        max-width:100%;
    }
}
@media screen and (max-width:708px){
    .point>.container{
        padding-top:80px;
    }
}

.point__item{
    margin:100px auto 100px auto;
    flex-wrap:wrap;
}
@media screen and (max-width:1080px){
    .point__item{
        display:flex;
    }
}

.point__item__explain{
    background-color:#E1DEDC;
    width:57.5%;
    height:600px;
    margin:0 0 auto 0;
}
@media screen and (max-width:1560px){
    .point__item__explain{
        height: 540px;
    }
}
@media screen and (max-width:1080px){
    .point__item__explain{
        width:708px;
        height:600px;
        margin:0 auto 0 0;
    }
}
@media screen and (max-width:708px){
    .point__item__explain{
        width:360px;
        height:auto;
        padding-bottom:60px;
    }
}

.point__item__explain__head{
    margin:10% 1% 5% 12%;
}
@media screen and (max-width:1560px){
    .point__item__explain__head{
        margin:10% 1% 5% 8%;
    }
}
@media screen and (max-width:1080px){
    .point__item__explain__head{
        display:flex;
    }
}
@media screen and (max-width:708px){
    .point__item__explain__head{
        display:block;
        margin-bottom:30px;
    }
}

.num{
    height:170px;
}
@media screen and (max-width:1560px){
    .num{
        height:140px;
    }
}

.num::after{
    content:'';
    position:absolute;
    width:800px;
    height:1px;
    background-color:#FFF;
    margin-top:-20px;
    margin-left:30px;
}
@media screen and (max-width:1560px){
    .num::after{
        margin-top:-20px;
    }
}
@media screen and (max-width:708px){
    .num::after{
        margin-left:10px;
        margin-top:-35px;
    }
}

.num01::after{
    width:532px;
    margin-left: 0;
    margin-top:-40px;
}
@media screen and (max-width:1560px){
    .num01::after{
        margin-top:-30px;
    }
}
@media screen and (max-width:1280px){
    .num01::after{
        width:420px;
    }
}
@media screen and (max-width:708px){
    .num01::after{
        width:300px;
        margin-left:10px;
        margin-top:-40px
    }
}

.num02::after{
    width:824px;
    margin-top:-40px;
}
@media screen and (max-width:1680px){
    .num02::after{
        width:624px;
    }
}
@media screen and (max-width:1560px){
    .num02::after{
        margin-top:-30px;
    }
}
@media screen and (max-width:1280px){
    .num02::after{
        width:520px;
    }
}
@media screen and (max-width:708px){
    .num02::after{
        width:300px;
        margin-left:10px;
        margin-top:-35px
    }
}

.num03::after{
    width:615px;
}
@media screen and (max-width:1280px){
    .num03::after{
        width:520px;
    }
}
@media screen and (max-width:708px){
    .num03::after{
        width:300px;
    }
}

.num04::after{
    width:576px;
}
@media screen and (max-width:1280px){
    .num04::after{
        width:520px;
    }
}
@media screen and (max-width:708px){
    .num04::after{
        width:300px;
    }
}

.num05::after{
    width:920px;
}
@media screen and (max-width:1280px){
    .num05::after{
        width:520px;
    }
}
@media screen and (max-width:708px){
    .num05::after{
        width:300px;
    }
}

.num06::after{
    width:643px;
}
@media screen and (max-width:1280px){
    .num06::after{
        width:520px;
    }
}
@media screen and (max-width:708px){
    .num06::after{
        width:300px;
    }
}

.num07::after{
    width:682px;
}
@media screen and (max-width:1280px){
    .num07::after{
        width:520px;
    }
}
@media screen and (max-width:708px){
    .num07::after{
        width:300px;
    }
}

.num08::after{
    width:749px;
}
@media screen and (max-width:1740px){
    .num08::after{
    width:624px;
    margin-top:10px;
}
}
@media screen and (max-width:1560px){
    .num08::after{
    margin-top:-20px;
}
}
@media screen and (max-width:1280px){
    .num08::after{
        width:520px;
    }
}
@media screen and (max-width:708px){
    .num08::after{
        width:300px;
        margin-top:-40px;
    }
}

.inner-num{
    width:232px;
    height:200px;
}
@media screen and (max-width:1560px){
    .inner-num{
        width:200px;
        height:172px;
    }
}

.num01>.inner-num{
    width:197px;
}
@media screen and (max-width:1560px){
    .num01>.inner-num{
        width:170px;
    }
}

.point__item__area-ttl{
    display: table;
}
@media screen and (max-width:708px){
    .point__item__area-ttl{
        margin:0 auto;
    }
}

.point__item__area-ttl01{
    padding-left:3%;
}

.point__item__area-ttl03{
    max-width:384px;
}
@media screen and (max-width:1560px){
    .point__item__area-ttl03{
        max-width:320px;
    }
}

@media screen and (max-width:708px){
    .point__item__area-ttl03{
        max-width:80%;
    }
}

.point__item__area-ttl05{
    max-width:70%;
}
@media screen and (max-width:1560px){
    .point__item__area-ttl05{
        max-width:520px;
    }
}
@media screen and (max-width:708px){
    .point__item__area-ttl05{
        max-width:85%;
    }
}

.point__item__area-ttl06{
    max-width:63%;
}
@media screen and (max-width:1560px){
    .point__item__area-ttl06{
        max-width: 450px;
    }
}
@media screen and (max-width:708px){
    .point__item__area-ttl06{
        max-width:none;
    }
}

.point__item__area-ttl08{
    max-width:60%;
}
@media screen and (max-width:1560px){
    .point__item__area-ttl08{
        max-width:438px;
    }
}
@media screen and (max-width:708px){
    .point__item__area-ttl08{
        max-width:98%;
    }
}

.point__item-ttl{
    font-size:46px;
    color:#333;
    margin:0;
    font-family:'Noto Serif JP';
    display: table-cell;
    vertical-align: middle;
    font-weight:500;
}
@media screen and (max-width:1560px){
    .point__item-ttl{
        font-size:36px;
    }
}
@media screen and (max-width:708px){
    .point__item-ttl{
        font-size:26px;
    }
}

.point__item-ttl01{
    font-size:56px;
}
@media screen and (max-width:1560px){
    .point__item-ttl01{
        font-size:46px;
    }
}
@media screen and (max-width:708px){
    .point__item-ttl01{
        font-size:36px;
    }
}

@media screen and (max-width:708px){
    .point__item-ttl02{
        font-size:30px;
    }
}

@media screen and (max-width:708px){
    .point__item-ttl03{
        font-size:30px;
    }
}

@media screen and (max-width:708px){
    .point__item-ttl04{
        font-size:30px;
    }
}

.point__item-ttl07{
    font-size:56px;
}
@media screen and (max-width:1560px){
    .point__item-ttl07{
        font-size:42px;
    }
}
@media screen and (max-width:708px){
    .point__item-ttl07{
        font-size:30px;
    }
}

.point__item__explain>.txt{
    margin:1% 18% 5% 12%;
    font-family:'Noto serif JP';
    font-size:20px;
    line-height:2;
    letter-spacing:0.1em;
    max-width:674px;
    font-weight:500;
}
@media screen and (max-width:1560px){
    .point__item__explain>.txt{
        margin:1% 18% 5% 8%;
    }
}
@media screen and (max-width:708px){
    .point__item__explain>.txt{
        font-size:16px;
        margin:1% 10% 5% 10%;
    }
}

.point__item__explain>.left-wide{
    margin-left:15%;
}
@media screen and (max-width:1560px){
    .point__item__explain>.left-wide{
        margin-left:10%;
    }
}
@media screen and (max-width:708px){
    .point__item__explain>.left-wide{
        margin-left:10%;
    }
}
	
.point__item__area-img{
    background-color:#FFF;
    width:42.5%;
    height:600px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width:1560px){
    .point__item__area-img{
        height:500px;
    }
}
@media screen and (max-width:1080px){
    .point__item__area-img{
        width:708px;
        height:600px;
        margin:0 0 0 auto;
    }
}
@media screen and (max-width:708px){
    .point__item__area-img{
        width:360px;
        height:380px;
    }
}

.point__item__area-img>img{
    width:70%;
    height:auto;
}
@media screen and (max-width:708px){
    .point__item__area-img>img{
        width:80%;
    }
}

.image-point>img{
    width:65%;
}
@media screen and (max-width:708px){
    .image-point>img{
        width:85%;
    }
}

.from-right{
    flex-wrap:wrap-reverse;
}

.from-left>.point__item__area-img{
    margin:200px auto auto -7.3% ;
}
@media screen and (max-width:1080px){
    .from-left>.point__item__area-img{
        margin:-60px 0 auto auto ;
    }
}

.from-right>.point__item__area-img{
    margin:200px -7.3% auto auto ;
}
@media screen and (max-width:1080px){
    .from-right>.point__item__area-img{
        margin:-60px 0 auto auto ;
    }
}

.point__item__area-img03>img{
    width:83%;
}

.figure-point{
    cursor: pointer;
}

.figure-point img{
    transition: transform .6s ease;
}

.figure-point:hover img{
    transform: scale(1.4);
}

.upper{
    z-index:30;
}

.lower{
    z-index:29;
}


/*過去取引物件*/
.cases{
    background-color:#E1DEDC;
}

.cases__area-select{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
@media screen and (max-width:708px){
    .cases__area-select{
        justify-content:center;
    }
}

.cases__area-select>li{
    margin:30px 0;
}

.btn-select{
    color:#3B4043;
    font-size:22px;
    font-family:'Noto Sans JP', sans-serif;
    font-weight:700;
    width:255px;
    height:80px;
    display:block;
    background-color:#FFF;
    line-height:80px;
    letter-spacing:0.1em;
    text-align:left;
    margin:0;
    padding-left:30px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}

.btn-select:hover{
	cursor:pointer;
	opacity:0.8;
}

.btn-select::after{
    content: '';
    background:url('../../images/icon/icon_market_arrow.svg');
    background-repeat:no-repeat;
    background-size:cover;
    width:14px;
    height:24px;
    position:absolute;
    margin-top:30px;
    margin-left:130px;
    transition: all .6s;
    transform: scale(1, 1);
    transform-origin: left;
}

.btn-select:hover::after{
    transform: scale(1, 1);
}


/*モダール*/
.no-scroll{
	overflow:hidden;
}

.area__modaal{
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	background:rgba(0,0,0,0.7);
	z-index:20000;
}

.off{
	display:none;
}

.on{
	display:inline;
}

.area__modaal__btn{
	position:absolute;
	width:60%;
	left: 0;
	right: 0;
	top:10%;
	transform: translateY(-10%);
    -webkit-transform: translateY(-10%);
    -ms-transform: translateY(-10%);
	margin: auto;
	text-align:right;
}
@media screen and (max-width:1080px){
	.area__modaal__btn{
		top:12%;
	}
}
@media screen and (max-width:708px){
	.area__modaal__btn{
		width:360px;
	}
}

.modaal__btn{
    width:60px;
    height:60px;
    line-height:60px;
    border-radius:50%;
    text-align: center;
    justify-content: center;
    margin:0 0 0 auto;
}

.modaal__btn:hover{
    cursor:pointer;
    opacity:0.8;
}

.modaal__btn>span{
	display:inline-block;
}

.modaal__btn>span::before, .modaal__btn>span::after{
	content: "";
	position: absolute;
	width: 2px; /* 棒の幅（太さ） */
	height: 60px; /* 棒の高さ */
	background: #FFF;
}

.modaal__btn>span::before{
	transform: translate(-50%,-50%) rotate(45deg);
}

.modaal__btn>span::after{
	transform: translate(-50%,-50%) rotate(-45deg);
}

.modaal__item{
    position:absolute;
    width:60%;
    height:50%;
    left: 0;
    right: 0;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    margin: auto;
    background-color:#FFF;
    padding:30px;
    border-radius:10px;
}
@media screen and (max-width:708px){
	.modaal__item{
		width:300px;
	}
}

.modaal_hover:hover{
	cursor:pointer;
}

.ttl-modaal{
    color: #707F89;
    font-family:'Noto Sans JP';
    font-size: 24px;
    font-weight:500;
    line-height:1.4;
    margin-bottom: 60px;
    text-align:center;
}
@media screen and (max-width:708px){
    .ttl-modaal{
		font-size:20px;
	}
}

.modaal__list{
	width:60%;
	height:70%;
	margin:0 auto;
	overflow-y:hidden;
	overflow-y: scroll;
}
@media screen and (max-width:708px){
	.modaal__list{
        width:90%;
	}
}

.modaal__list::-webkit-scrollbar{
    width:6px;
}

.modaal__list::-webkit-scrollbar-track{
    margin: 0 2px; 
    background: #EEE; 
    border-radius: 2px;
}

.modaal__list::-webkit-scrollbar-thumb { 
    border-radius: 2px; 
    background: #4A586D; 
}

.modaal__list>li{
    margin-bottom:30px;
    list-style: inside;
}

.modaal__list>li>a{
	color:#333;
	font-family:'Noto Sans JP';
	font-size:18px;
	line-height:1.4;
}
@media screen and (max-width:708px){
    .modaal__list>li>a{
        font-size:14px;
    }
}

.modaal__list>li>a:hover{
    opacity:0.8;
}