@charset "utf-8";
/* トップページのみ　お客様の声*/
	.voice-inner {
    margin: 0 auto;
    display: flex;
    align-items: center;
}


.voice-heading {
    display: flex;
    align-items: center;
    color: var(--violet);
    font-weight: bold;
    line-height: 1;
    justify-content: center;
}


.voice-heading-bubble {
    background-color:  var(--violet);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 15px; 
}


.voice-heading-bubble::before {
    content: "";
    position: absolute;
    right: 98%; 
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
    border-color: transparent var(--violet) transparent transparent;
}


.voice-description {
    font-weight: bold;
    line-height: 1.5;
    position: relative;
    text-align: center;
}


.fukidashi-slider{
max-width: 2880px;
margin: 0 auto;
position: relative;
}





.fukidashi-slider-mask{
position: absolute;
height: 100%;
width: 32%;
background:#ffe3dd;
z-index: 970;
}


/* 共通スタイル */
.slick-prev-custom,
.slick-next-custom {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 990;
    font-size: 2.5em;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    cursor: pointer; /* クリック可能であることを示す */
}

/* 戻る矢印（左） */
.slick-prev-custom {
    left: 33%;
}
.slick-prev-custom::before {
    content: '\f053'; /* FontAwesomeのコード */
}

/* 進む矢印（右） */
.slick-next-custom {
    right: 1.5%;
}
.slick-next-custom::before {
    content: '\f054';
}


.voice-fukidashi-staff-pc{
	    position: absolute;
    bottom: 0;
    left: 5%;
    width: 30%;
    height: auto;
    display: block;
    z-index: 980;
	}
	
	.voice-fukidashi-pc{
	position: absolute;
    top: -40%;
    left: 3%;
    width: 12%;
    height: auto;
    display: block;
    z-index: 990;
	}
	
	
	.voice-fukidashi-staff-sp{
display: none;
	}
	
	.voice-fukidashi-sp{
display:none;
	}
	

@media screen and (max-width: 1199px) {
    
    .voice-inner {
        flex-direction: column; /* 縦並び */
        width: 100%;
    }

   
    .voice-heading-text {
        font-size: clamp(2rem, 8vw, 5rem);
    }

    .voice-heading-bubble {
        width: clamp(3rem, 12vw, 7rem);
        height: clamp(3rem, 12vw, 7rem);
        font-size: clamp(3.5rem, 0.5rem + 6.25vw, 4.5rem);
        margin-left: clamp(10px, 2vw, 20px);
    }

    .voice-heading-bubble::before {
        border-width: clamp(8px, 1.5vw, 15px); /* 三角形のサイズも可変に */
    }

    .voice-description {
        margin-top: 30px;
        font-size: clamp(1rem, 4vw, 2rem);
        padding: 0 70px 20px; /* 線を入れるための余白 */
    }


    .sp-br {
        display: block;
    }
	
	
	

}


@media screen and (min-width: 1200px) {

    .voice-inner {
        flex-direction: row; /* 横並び */
        justify-content: center; /* 中央寄せ */
        max-width: 980px; /* PC幅最大値 */
        width: 100%;
		padding-bottom: 20px;
    }

    
    .voice-heading-text {
        font-size: 60px; /* または rem/vw */
    }

    .voice-heading-bubble {
        width: 90px;
        height: 90px;
        font-size: 56px;
        margin-left: 20px;
    }

    .voice-heading-bubble::before {
        border-width: 15px;
    }

    .voice-description {
        margin-left: 40px; /* タイトルとの距離 */
        text-align: left;
        font-size: 24px;
        /* 斜め線はPCでは非表示 */
    }
    
   

    /* PCでは改行を無効化 */
    .sp-br {
        display: none;
    }
}



@media screen and (min-width: 1199px) {


    .voice-fukidashi-text {
        font-size: clamp(16px, 5vw, 32px);
    }
}

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


.voice-fukidashi-wrapper-sp{
position: relative;
}


.voice-fukidashi-contents-sp{
padding-left: 30%;
}

.fukidashi-slider-mask{
display: none;
}

.voice-fukidashi-staff-pc{
	  display: none;
	}
	
	.voice-fukidashi-pc{
	display: none;
	}
	
	
		.voice-fukidashi-staff-sp{
display: block;
        position: absolute;
        width: 35%;
        height: auto;
        bottom: 0;
        z-index: 1;
	}
	
	.voice-fukidashi-sp{
display: block;
        position: absolute;
        width: 25%;
        height: auto;
        top: -10px;
        z-index: 2;
        left: 5%;
	}
	
.slick-prev-custom {
    left: 10px;
	 font-size: 2em;
}

.slick-next-custom {
    right: 30px;
	 font-size: 2em;
}
}


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

.voice-fukidashi-contents-sp {
        padding-left: 27%;
    }

	
		.voice-fukidashi-staff-sp{
display: block;
        position: absolute;
        width: 50%;
        height: auto;
        bottom: 0;
        left: -8%;
        z-index: 1;
    }
	
	
	.voice-fukidashi-sp{
        display: block;
        position: absolute;
        width: 25%;
        height: auto;
        top: -35px;
        z-index: 2;
        left: 5%;
	}
	

}


@media screen and (max-width: 480px) {
    .voice-fukidashi-contents-sp{
        padding-left: var(--content-padding-medium);
    }
	
	
	
	.voice-heading-text {
        font-size:clamp(2.625rem, 1.125rem + 7.5vw, 3.375rem);
    }
	
	.voice-heading-bubble::before {
        border-width: clamp(0.5rem, 0.25rem + 1.25vw, 0.625rem); /* 三角形のサイズも可変に */
    }
	
	.voice-heading-bubble {
        width: clamp(4.375rem, 4.125rem + 1.25vw, 4.5rem);
        height: clamp(4.375rem, 4.125rem + 1.25vw, 4.5rem);
    }

	
	.voice-fukidashi-contents-sp .border-box-gold-wrapper {
    transform: scale(0.70);
        transform-origin: center;
        margin-left: 30%;
}

.voice-fukidashi-sp{
      width: 25%;
        height: auto;
        top: inherit;
        left: 20%;
        bottom: 0;
	}
	
}