@charset "utf-8";
/* CSS Document */


/* ---------------------------------------------------------------------------------------------

   PageTitle,Check（サービスページ／保険、家計、相続）

--------------------------------------------------------------------------------------------- */
.pageTitle-wrap{
    width: 100%;
    padding: 125px 0 175px 0;
    position: relative;
}
.pageTitle-wrap h1{
    line-height: 1;
    text-align: center;
    font-size: clamp(30px, 3vw, 36px); 
    text-shadow: 0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
    position: relative;
    z-index: 10;
    font-weight: normal;
}

.common-note-img{/*全共通*/
    position: absolute;
    left: 2%;
    bottom: 0;
    width: 200px;
    height: auto;
    z-index: 0;
}

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

.common-note-img{/*全共通*/
    width: 150px;
}
    
}
@media screen and (max-width:600px) {

.common-note-img{/*全共通*/
    width: 100px;
}
    
}


/*保険タイトル
-----------------------------------------------------------*/
#hoken-title{
    width: 100%;
    background-image: url("../images/hoken-title.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hoken-woman-img{
    position: absolute;
    right: 0;
    bottom: -25px;
    width: 300px;
    height: auto;
    z-index: 0;
}

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

.hoken-woman-img{
    width: 200px;
}
    
}
@media screen and (max-width:600px) {

.hoken-woman-img{
    width: 150px;
}
    
}
@media screen and (max-width:400px) {

.hoken-woman-img{
    width: 125px;
}
    
}


/*家計タイトル
-----------------------------------------------------------*/
#kakei-title{
    width: 100%;
    background-image: url("../images/kakei-title.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.kakei-woman-img{
    position: absolute;
    right: 0;
    bottom: -25px;
    width: 300px;
    height: auto;
}

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

.kakei-woman-img{
    width: 200px;
}
    
}
@media screen and (max-width:600px) {

.kakei-woman-img{
    width: 150px;
}
    
}
@media screen and (max-width:400px) {

.kakei-woman-img{
    width: 115px;
}
    
}


/*相続タイトル
-----------------------------------------------------------*/
#sozoku-title{
    width: 100%;
    background-image: url("../images/sozoku-title.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sozoku-woman-img{
    position: absolute;
    right: 0;
    bottom: -25px;
    width: 300px;
    height: auto;
}

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

.sozoku-woman-img{
    width: 200px;
}
    
}
@media screen and (max-width:600px) {

.sozoku-woman-img{
    width: 150px;
}
    
}
@media screen and (max-width:400px) {

.sozoku-woman-img{
    width: 125px;
}
    
}




/*CHECK
-----------------------------------------------------------*/
.check-wrap{
    width: 100%;
    padding-bottom: 50px;
}

.check-img{
    width: 200px;
    height: auto;
    margin: -75px auto 25px auto;
}

.check-h2{
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: clamp(18px, 3vw, 24px);
    padding: 10px 0;
    margin-bottom: 25px;
    background: rgb(255,255,255); 
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(202,75,74,1) 50%, rgba(255,255,255,1) 100%);
    text-shadow: 2px 2px 3px #ca4b4a;
    line-height: 1.5;
}

.check-list{
    /*text-align: center;*/
    font-size: clamp(14px, 2vw, 18px);
}
.check-list .fa-check-square{
    color: #ca4b4a;
}


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

.pageTitle-wrap{
    margin-top: 20px;
}
    
}

@media screen and (max-width:900px) {
    
.pageTitle-wrap{
    padding: 100px 0 150px 0;
}

.check-img{
    width: 150px;
}
    
}

@media screen and (max-width:700px) {
    
.pageTitle-wrap{
    padding: 75px 0 125px 0;
}

.check-img{
    width: 100px;
}
    
}


/* ---------------------------------------------------------------------------------------------

   FPにおまかせ！

--------------------------------------------------------------------------------------------- */
.fp-wrap{
    width: 100%;
    padding: 15px;
    background: url("../images/halftone-yellow.webp") repeat;
}

.fp-img{
    width: 640px;
    height: auto;
    margin: -100px auto 0 auto;
}

#fp .text-30{
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
}
#fp .text-30 span{
    color: #f00;
    font-family: 'Urbanist', sans-serif;
    font-size: clamp(24px, 2vw, 36px);
    line-height: 1.5;
}

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

.fp-wrap{
    margin-top: 50px;
}
    
.fp-img{
    width: 100%;
}
    
}



/* ---------------------------------------------------------------------------------------------

   Flow

--------------------------------------------------------------------------------------------- */
.flow-table th{
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1;
    padding: 10px;
    border-radius: 15px 15px 0 0;
    font-family: 'Urbanist', sans-serif;
    font-size: clamp(16px, 2vw, 18px);
    color: #fff;
}
.flow-table th span{
	font-size: clamp(30px, 2vw, 36px);
    font-family: 'Urbanist', sans-serif;
    line-height: 1;
    color: #fff;
}

.flow-table td{
    display: block;
    width: 100%;
    padding: 25px;
    background: #fbfaf5;
}

.img-box{
    float: left;
    margin-right: 3%;
    width: 25%;
}

.img-box img{
    width: 100%;
    height: auto;
    margin: 0 auto;
}

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

.img-box{
    float: none;
    width: 75%;
    margin: 0 auto 25px auto;
}
    
.img-box img{
    width: 75%;
}
    
}




/*保険背景
-----------------------------------------------------------*/
.hoken-img-box{
    background: url("../images/flow-hokenBack.png") no-repeat 0 0;
}

/*家計背景
-----------------------------------------------------------*/
.kakei-img-box{
    background: url("../images/flow-kakeiBack.png") no-repeat 0 0;
}

/*相続背景
-----------------------------------------------------------*/
.sozoku-img-box{
    background: url("../images/flow-sozokuBack.png") no-repeat 0 0;
}



.text-box{
    float: left;
    width: 72%;
}

.text-box h3{
    font-size: clamp(20px, 2vw, 24px);
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
}

.allow{
    width: 100%;
    text-align: center;
    line-height: 1;
}

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

.text-box{
    float: none;
    width: 100%;
}
    
}



/* ---------------------------------------------------------------------------------------------

   Reserve WEB予約・電話予約

--------------------------------------------------------------------------------------------- */
.web-reserve,.tel-reserve{
    display: block;
    padding: 25px;
    width: 300px;
    text-align: center;
    line-height: 1;
    margin: 15px auto 0 auto;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    border-radius: 50px;
    background: #ccc;
}

.web-reserve{
	background: #ca4b4a;
}
.web-reserve:hover{
	background: #f00;
}

.tel-reserve{
	background: #6592c0;
}
.tel-reserve:hover{
	background: #f00;
}

.reserve-text{
    text-align: center;
    margin-top: 25px;
    font-weight: bold;
}

.fa-angle-double-right{
    color: #fff;
    font-size: 20px;
}