@charset "UTF-8";

/* PC */
.spOnly {
	display: none;
}
.tabletOnly {
	display: none;
}
.spCange {
	display: none;
}
#newTop_main_bk {
	position: relative;
	text-align: center;
	height: 569px;
	width: 100%;
	background: linear-gradient(to bottom, #1facd7 0%, #1facd7 60%, #0a448b 60%, #0a448b 100%);
}
#newTop_main {
	position: relative;
	text-align: center;
	height: 569px;
	width: 100%;
	background-image: url("../images/top_main_pc.png");
	background-size: 1263px;
	background-repeat: no-repeat;
	background-position: center;
	z-index:2;
	@media (max-width: 920px) {
		background-image: url("../images/top_main_tablet.png");
		background-size: cover;
	}
	@media (max-width: 428px) {
		height: 650px;
		background-image: url("../images/top_main_sp.png");
	}
	@media (max-width: 390px) {
		height: 600px;
		background-image: url("../images/top_main_sp.png");
	}
}
#newTop_main .Top_title {
	position: absolute;
	color: #fff;
	letter-spacing: 0.08em;
	top:78%;
	left: 50%;
	transform: translate(-50%,0);
	@media (max-width: 428px) {
		width: 100%;
		top:78%;
	}	
}
#newTop_main h2.Top_maintitle {
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
	font-size: 2rem;
	font-weight: bold;
	padding-bottom: 16px;
	border-bottom: 5px solid #1facd7;
	@media (max-width: 428px) {
		margin: 0 auto;
		width: 90%;
		font-size: 1.8rem;
		padding-bottom: 16px;
		border-bottom: 5px solid #1facd7;
	}
}
#newTop_main p.Top_subtitle {
	font-size: 1.2rem;
	line-height: 1.1em;
	margin-bottom: 16px;
}
h2.midashi {
	position: relative;
	display: inline-block;
	margin-bottom: 1em;
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
	font-size: 2rem;
	margin-bottom: 50px;
	@media screen and (max-width: 428px){
		font-size: 1.7rem;
		margin-bottom: 40px;
	}
}
h2.midashi:before {
	content: '';
	position: absolute;
	bottom: -22px;
	display: inline-block;
	width: 60px;
	height: 5px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #ffcc00;
	@media screen and (max-width: 428px){
		bottom: -22px;
	}
}
#d_blue_box {
	margin: 0 auto;
	width: 100%;
	padding: 60px 0 50px;
	background-color: #0a448b;
	text-align: center;
	box-sizing: border-box;
	@media (max-width: 1000px) {
		padding: 60px 2% 50px;
	}
}
#blue_box {
	margin: 0 auto;
	width: 100%;
	padding: 60px 0 50px;
	background-color: #0078bf;
	text-align: center;
	box-sizing: border-box;
	@media (max-width: 1000px) {
			padding: 60px 2% 50px;
	}
	@media (max-width: 428px) {
		margin-top: 80px;
		padding: 60px 2% 50px;
	}
	@media (max-width: 400px) {
		margin-top: 0;
		padding: 80px 2% 50px;
	}
}


/* pro-max用 の空白*/
@media (max-width: 428px) {
.pro_max {
	margin-top: -80px;
	@media (max-width: 400px) {
		margin-top: 0;
	}
}
}



#white_box {
	margin: 0 auto;
	width: 100%;
	padding: 60px 0 50px;
	background-color: #fff;
	text-align: center;
	box-sizing: border-box;
}
@media (max-width: 1000px) {
#white_box {
	padding: 60px 2% 50px;
}
}
#lite_blue_box {
	margin: 0 auto;
	width: 100%;
	padding: 60px 0 50px;
	background-color: #d2ecf4;
	text-align: center;
	box-sizing: border-box;
}
@media (max-width: 1000px) {
#lite_blue_box {
	padding: 60px 2% 50px;
}
}
.white_txt {
	color: #fff;
	font-weight: 800;
}
.d_blue_txt {
	color: #0a448b;
	font-weight: 800;
}
.blue_txt {
	color: #0078bf;
	font-weight: 800;
}
.cap_txt {
	font-size: 1.1rem;
	margin-bottom: 16px;
}
ol.def_list{
	counter-reset:list;
	list-style-type:none;
	font: 14px/1.6 'arial narrow', sans-serif;
	padding:0;
	text-align: left;
}
ol.def_list li{
	position: relative;
	padding: 0 0 0 20px;
	margin: 7px 0 8px 0px;
	font-weight: bold;
	font-size:14px;
	line-height: 1.4em;
}
ol.def_list li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #0078bf;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.def_list li:after{
  content: "";
  display: block;
  position: absolute;
  left: 6px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}



/* ------法人向け活用事例-----*/
#blue_box .white_block {
	max-width: 1000px;
	margin: 20px auto;
	background-color: #fff;
	padding: 30px;
	border-radius: 10px;
	text-align: left;
	box-sizing: border-box;
	box-shadow: 1px 1px 3px 4px rgba(0, 0, 0, 0.10);
}
.white_block .case_block {
	display: flex;
}
.white_block .case_block .clm01 {
	width:  80px;
}
.white_block .case_block .clm01 img {
	width:  50px;
}
.white_block .case_block .clm02 {
	width:  860px;
}
.white_block .case_block .clm02 .clm03 {
	display: flex;
	align-items: center;
}
.white_block .case_block .clm02 .clm03 .text_area {
	width:  508px;
}
.clm03 .text_area .case_title {
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
	font-size: 1.5rem;
	line-height: 2rem;
	margin: 10px 0 20px;
}
.clm03 .text_area .case_txt {
	line-height: 1.6rem;
}
.white_block .case_block .clm02 .clm03 .img_area {
	width:  352px;
	text-align: right;
}
.clm03 .img_area img {
	width:  332px;
}
.sky_blue_block {
	display: flex;
	justify-content: space-between;
	background-color: #d2ecf4;
	padding: 20px;
	margin-top: 20px;
	line-height: 1.8rem;
	box-sizing: border-box;
}
.sky_blue_block .left_box {
	width: 48%;
}
.sky_blue_block .right_box {
	width: 48%;
}

/* タブレット、スマホ */
@media (max-width: 1000px) {
.white_block .case_block .clm01 {
	width:  10%;
	margin: 0 20px 0 0;
}
.white_block .case_block .clm01 img {
	width:  100%;
}
.white_block .case_block .clm02 {
	width:  90%;
}
.white_block .case_block .clm02 .clm03 .img_area {
	width:  240px;
	padding-left:10px;
	text-align: right;
}
.clm03 .img_area img {
	width:  240px;
}
}
@media screen and (max-width: 750px) {
#blue_box .white_block {
	padding: 20px;
}
.white_block .case_block {
	display: block;
}
.white_block .case_block .clm01 {
	width:  100%;
	margin: 0;
	text-align: center;
}
.white_block .case_block .clm01 img {
	width:  15%;
}
.white_block .case_block .clm02 {
	width:  100%;
}
.white_block .case_block .clm02 .clm03 {
	display: block;
}
.white_block .case_block .clm02 .clm03 .text_area {
	width:  100%;
}
.clm03 .text_area .case_title {
	font-size: 1.3rem;
	margin: 20px 0 20px;
}
.white_block .case_block .clm02 .clm03 .img_area {
	width: 240px;
	padding: 20px 0 0;
		margin: 0 auto;
}
}



/* ------研修事例-----*/
h3.balloon_big {
	position: relative;
	display: inline-block;
	margin: 0 0 1.5em 0;
	padding: 7px 10px;
	width: 100%;
	max-width: 1000px;
	background: #0a448b;
	border-radius: 10px;
	box-sizing: border-box;
}
h3.balloon_big:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #0a448b;
}
h3.balloon_big .title {
	color: #fff;
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
	font-size: 2rem;
	font-weight: 800;
	padding: 18px 0;
}
@media (max-width: 1000px) {
h3.balloon_big .title {
	font-size: 1.7rem;
}
}
.gray_block {
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px;
	background: #e6e5e5;
	border-radius: 10px;
	box-sizing: border-box;
	@media screen and (max-width: 750px) {
	padding: 20px;
	}
}
.jirei_block {
	max-width: 1000px;
	margin: 0 auto;
	box-sizing: border-box;
}
.gray_block  img,
.jirei_block  img {
	width: 100%;
}

.schedule_block {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1000px;
	overflow-x: auto;
	margin: 0 auto 20px;
	padding-bottom: 6px;
	@media screen and (max-width: 900px) {
	width: 100%;
	}
}
.schedule_item {
	width: 320px;
	height: 250px;
	border-radius: 12px;
	border: 1px solid #ddd;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 20px;
	margin: 8px 10px;
	box-sizing: border-box;
	flex-shrink: 0;
	@media screen and (max-width: 750px) {
		width: 310px;
		padding: 12px;
	}
}
.schedule_item ol.def_list li {
	font-weight: normal;
}
.schedule_ti {
	position: relative;
	margin: 0 0 1.5em 0;
	padding: 14px 10px;
	background: #0078bf;
	border-radius: 6px;
	box-sizing: border-box;
	color: #fff;
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.3em;
}
.schedule_ti .smoll {
	font-size: 1rem
}
.schedule_ti::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border: 10px solid transparent;
	border-top-width: 10px;
	border-top-style: solid;
	border-top-color: transparent;
	border-top: 10px solid #0078bf;
}
.schedule_item .midashi {
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
	font-size: 1rem;
	color: rgb(0, 120, 191);
	font-weight: 800;
	line-height: 1.5em;
	margin: 15px 0px 20px;
	padding: 0px;
}
.triangle {
	background: #0078bf;
	height: calc(tan(70deg) * 30px / 2);
	width: 30px;
	margin: 0 10px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	flex-shrink: 0;
}



h4 {
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
	font-size:1.3rem;
	line-height: 1.8rem;
	
}
h4.kensyu_sabt {
	margin: 40px auto 10px;
	max-width: 1000px;
	text-align: left;
}
h4.kensyu_sabt::before {
	position: relative;
	top: 6px;
	right: 2px;
    content: ""; 
    display: inline-block; 
    background-image: url('../images/top_kensyu_sabt.png');
    background-size: 80%;
	background-repeat: no-repeat;
	width: 1.2em;
	height: 1.2em;
}
.blue_border {
	border-bottom: solid #0a448b 1px;
	max-width: 1000px;
	margin: 0 auto 30px;
	box-sizing: border-box;
}



/* ------ご活用会社-----*/
#corp_block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	max-width: 1000px;
	margin: 20px auto 0;
	padding: 0 30px;
	text-align: left;
	box-sizing: border-box;
}
#corp_block .logo_box {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 10px;
	max-width: 270px;
	height: 240px;
	box-sizing: border-box;
	box-shadow: 1px 1px 3px 4px rgba(0, 0, 0, 0.10);
	padding: 30px;
	margin: 0 1.3rem 2rem 1.3rem;
}
#corp_block .logo_box img {
	width: 100%;
}

/* タブレット、スマホ */
@media screen and (max-width: 1000px) {
#corp_block {
	justify-content: space-around;
	align-items: center;
	max-width: 100%;
}
#corp_block .logo_box {
		padding: 20px;
		width: 45%;
}
}
@media screen and (max-width: 428px) {
#corp_block {
	padding: 0;
	margin-bottom: 0;
}
#corp_block .logo_box {
	width: 45%;
	height: 180px;
	padding: 20px 12px 20px;
	margin: 0 0.5rem 1.7rem 0.5rem;
}
#corp_block .logo_box img {
	width: 100%;
}
}
@media screen and (max-width: 400px) {
#corp_block .logo_box {
	height: 160px;
}
}



.second_block {
    display: block;
    position: relative;
}
.second_block b {
    font-weight: 800;
}
.second_block .smoll {
	font-size: 1em;
}
.second_inner {
    width: 100%;
	margin: 30px auto 10px;
	box-sizing: border-box;
}
.second_chart ul {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
	border: none;
	box-sizing: border-box;
}
.second_chart ul li {
    width: 33%;
    background: #ddd;
	box-shadow: 1px 1px 3px 4px rgba(0, 0, 0, 0.10);
	box-sizing: border-box;
}
.second_chart ul li {
    width: 33%;
    background: #d2ecf4;
    display: flex;
    flex-flow: column;
    padding: 25px 20px 25px;
	position: relative;
	box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.10);
	box-sizing: border-box;
}
.second_chart ul li:first-child {
    z-index: 3;
}
.second_chart ul li:nth-child(2) {
    z-index: 2;
	background: #FFF;
	box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.10);
	box-sizing: border-box;
}
.second_chart .flow_span {
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
    text-align: center;
	font-size: 1rem;
	color: #fff;
    font-weight: 800;
    padding: 8px;
	background-color: #0078bf;
	box-sizing: border-box;
}
.second_chart ul li h3 {
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
    text-align: center;
	font-size: 1.2rem;
	color: #0078bf;
    font-weight: 800;
    margin: 20px 0 30px;
	padding: 0;
	box-sizing: border-box;
}
.second_chart ul li p {
    font-size: 0.9rem;
    line-height: 1.5rem;
    margin-bottom: 30px;
	padding-left: 5px;
	box-sizing: border-box;
}

.second_chart ul li:first-child:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #d2ecf4;
    top: 60px;
    position: absolute;
	right: -58px;
	box-sizing: border-box;
}
.second_chart ul li:nth-child(2):after {
    content: "";
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #FFF;
    top: 60px;
    position: absolute;
	right: -58px;
	box-sizing: border-box;
}
/* 2nd */
@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
	.second_inner {
    padding: 0;
	}
	.second_midashi p {
    text-align: left;
	}
	.second_midashi p br {
    display: none;
	}
	.second_chart ul {
    flex-flow: column;
	}
	.second_chart ul li {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
	}
	.second_chart ul li h3 {
    margin-bottom: 30px;
	}
	.second_chart ul li:first-child:after {
    top: 99.5%;
    position: absolute;
    right: 50%;
    left: 50%;
    margin: 0 auto;
    border-top: 20px solid #d2ecf4;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    transform: translate(-50%, 0px);
	}
	.second_chart ul li:nth-child(2):after {
    top: 99.5%;
    position: absolute;
    right: 50%;
    left: 50%;
    margin: 0 auto;
    border-top: 20px solid #FFF;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    transform: translate(-50%, 0px);
	}
}












/* ------4つのポイント-----*/
#point4_block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1000px;
	margin: 20px auto 0;
	text-align: left;
	box-sizing: border-box;
}
#point4_block .left_box01,
#point4_block .right_box02,
#point4_block .left_box03,
#point4_block .right_box04 {
	width: 49%;
	margin-bottom: 20px;
	background: #fff;
	border-radius: 10px;
	box-sizing: border-box;
	box-shadow: 1px 1px 3px 4px rgba(0, 0, 0, 0.10);
}
#point4_block .left_box01 img,
#point4_block .right_box02 img,
#point4_block .left_box03 img,
#point4_block .right_box04 img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* タブレット、スマホ */
@media screen and (max-width: 750px) {
#point4_block {
	display: block;
	max-width: 1000px;
	margin: 20px auto 0;
}
#point4_block .left_box01,
#point4_block .right_box02,
#point4_block .left_box03,
#point4_block .right_box04 {
	width: 100%;
	margin-bottom: 20px;
	background: #fff;
	border-radius: 10px;
	box-sizing: border-box;
	box-shadow: 1px 1px 3px 4px rgba(0, 0, 0, 0.10);
}
}
#point4_block .point_ti {
  font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
  font-size: 1.3rem;
  line-height: 1.7rem;
  margin-bottom: 0.6rem;
}
#point4_block .clm_box {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding:  20px 20px 40px 20px;
	text-align: left;
	line-height: 1.5rem;
	box-sizing: border-box;
}
#point4_block .clm_box .left_box {
	width: 13%;
}
#point4_block .clm_box .right_box {
	width: 87%;
	padding: 0 0 0 20px;
}



/* ------多彩な学習カリキュラム-----*/
/* スライダー全体 */
.slider-wrapper {
	display: flex; 
	overflow: hidden; /* はみ出たスライドを隠す */
	margin: 20px 0 40px;
}
/* スライド3枚のグループ */
.slider {
	animation: scroll-left 30s infinite linear .5s both;
	display: flex; 
}
/* スライド */
.slide {
	width: calc(100vw / 6); /* 6はスライドの枚数 */
	margin: 0 5px;
	cursor: pointer;
	overflow: hidden;
}
/* スライドの画像 */
.slide img {
	display: block;
	width: 100%;
	transition: transform 0.4s;
}
.slide:hover img {
	transform: scale(1.1);
}
/* CSSアニメーション */
@keyframes scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}
/* 一覧ボタン */
.curriculum-btn {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none !important ;
	color: #fff !important ;
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
	font-weight: bold;
	font-size: 25px;
	margin: 0 auto;
	border-radius: 10px;
	width: 400px;
	height: 80px;
	font-weight: bold;
	transition: 0.3s;
	box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.3);
	background-color: [object object];
	background-image: linear-gradient(150deg, rgba(10, 68, 139, 1), rgba(5, 120, 191, 1));
}
@media screen and (max-width: 768px) {
.slide {
	width: calc(100vw / 5); /* 6はスライドの枚数 */
}
.curriculum-btn {
	font-size: 1.3rem;
	width: 90%;
	height: 70px;
}
}
.curriculum-btn::before {
	content: ''; 
	position: absolute;
	left: 10px;
	top: 50%;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 8px solid #fff; 
	transform: translateY(-50%);
	transition: transform 0.3s;
}
.curriculum-btn:hover {
	transform: translateY(-5%);
	opacity: .7;
}
.curriculum-btn:hover::before {
	transform: translate(5px, -5px);
}
@media screen and (max-width: 428px) {
.slide {
	width: calc(100vw / 3); /* 6はスライドの枚数 */
}
}


/* ------導入の流れ-----*/
/* コンテナ */
.flow-container {
	max-width: 1000px;
	margin: 20px auto;
}
/* 各ステップのカード */
.step-card {
	display: flex;
	margin-bottom: 10px; 
        ackground-color: transparent;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}
/* 左側：青い矢印部分 */
.step-badge {
	flex: 0 0 240px; 
	background: linear-gradient(180deg, #0078bf 0%, #cbe8f2 80%, #cbe8f2 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 10px 40px 10px; 
	position: relative;
	text-align: center;
/* クリップパスで矢印の形を作る */
	clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
/* 右側の白ボックスとの隙間調整 */
	margin-right: -5px; 
	z-index: 2;
}
.step-number {
	position: relative;
	display: inline-block;
	margin: 0 0 1.5em 0;
	padding: 14px 10px 8px;
	width: 90%;
	background: #0a448b;
	border-radius: 10px;
	box-sizing: border-box;
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
	font-size: 1.2rem;
	font-weight: bold;
}
.step-number:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #0a448b;
}
.step-number span {
	font-size: 1.8rem; /* 数字を大きく */
}
.step-title {
	font-size: 1.2rem;
	font-weight: bold;
	font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ";
	line-height: 1.3rem;
	color: #0a448b;
}
.step-title .smoll {
	font-size: 0.85rem;
}
/* 右側：白い説明エリア */
.step-content {
	flex: 1;
	background-color: #fff;
	padding: 20px 30px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	text-align: left;
	line-height: 1.6rem;
/* 青い矢印の形状に合わせるための高さ調整 */
	min-height: 100px;
	margin-top: 10px; 
	margin-bottom: 30px; 
	z-index: 1;
}
.step-content p {
	font-size: 0.95rem;
	color: #444;
	margin: 0;
}
/* --- レスポンシブ対応 (タブレット・スマホ向け) --- */
@media (max-width: 1000px) {
.voice-container {
		margin: 2% ;
}
}
@media (max-width: 768px) {
.step-card {
	flex-direction: column;
	margin-bottom: 10px;
}
.step-badge {
	flex: auto;
	width: 80%;
	padding: 15px 10px 30px 10px;
	clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
	margin: 0 auto;
	margin-bottom: -20px; 
	box-sizing: border-box;
}
.step-content {
	margin: 0 auto;
	width:96%;
	border-radius: 8px;
	padding: 30px 20px 20px 20px;
	text-align: left;
	box-sizing: border-box;
}
}



/* ------お客様の声-----*/

/* コンテナ全体のスタイル (グリッドレイアウト) */
.voice-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px; 
    max-width: 1000px;
	margin: 30px auto;
	box-sizing: border-box;
}
/* 各ボックスのスタイル */
.voice-box {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 30px ;
	display: flex;
	box-sizing: border-box;
}
/* 画像ラッパーのスタイル */
.image-wrapper {
    flex-shrink: 0;
    margin-right: 25px;
	margin-top: -50px;
	margin-bottom: -10px;
	box-sizing: border-box;
}
/* 画像自体のスタイル */
.image-wrapper img {
    width: 130px;
    height: auto;
    display: block;
    border-radius: 50%;
    background-color: #fff;
}
/* テキストラッパーのスタイル */
.text-wrapper {
    flex: 1;
}
/* テキストのスタイル */
.text-wrapper p {
    margin: 0;
    line-height: 1.6;
	font-size: 16px;
	text-align: left;
}

.voice-baloon-bottom {
    display: flex;
    justify-content: center;
    position: relative;
	max-width: 200px;
	margin: 0 auto;
	margin-top: 20px;
    margin-bottom: 15px;
    padding: .8em 1.2em;
    border: 2px solid #0078bf;
    border-radius: 5px;
    background-color: #fff;
	color: #0078bf;
	font-weight: 800;
}
.voice-baloon-bottom::before,
.voice-baloon-bottom::after {
    position: absolute;
    bottom: -14px;
    width: 30px;
    height: 14px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}
.voice-baloon-bottom::before {
    background-color: #0078bf;
}
.voice-baloon-bottom::after {
    bottom: -11px;
    background-color: #fff;
}



/* --- レスポンシブ対応 (タブレット・スマホ向け) --- */
@media (max-width: 768px) {
.voice-container {
	grid-template-columns: 1fr;
	gap: 24px; 
}
.voice-box {
	padding: 25px 20px 25px 20px;
}
.image-wrapper img {
	width: 80px;
}
.image-wrapper {
	margin-right: 15px;
	margin-top: -36px;
	margin-bottom: -10px;
}
.text-wrapper p {
	font-size: 14px;
}
}





@media screen and (max-width: 750px){
/* SP */
.pcOnly {
	display: none;
}
.spOnly {
	display: block;
}
}



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


}