@charset "utf-8";

.company #anc1 {
	display: block;
	padding-top: 2rem;
	margin-top: -2rem;
}
.company #anc2 {
	display: block;
	padding-top: 10rem;
	margin-top: -10rem;
}

.business #anc1 {
	display: block;
	padding-top: 12rem;
	margin-top: -12rem;
}
.store #anc1 {
	display: block;
	padding-top: 0.5rem;
	margin-top: -0.5rem;
}
@media (max-width: 750px) {
	.store #anc1 {
		display: block;
		padding-top: 4rem;
		margin-top: -4rem;
	}
}
.csr #anc2 {
	display: block;
	padding-top: 10rem;
	margin-top: -10rem;
}
.csr #anc3 {
	display: block;
	padding-top: 8rem;
	margin-top: -8rem;
}
.csr #anc4 {
	display: block;
	padding-top: 10rem;
	margin-top: -10rem;
}
.csr #anc5 {
	display: block;
	padding-top: 8rem;
	margin-top: -8rem;
}
.csr #anc6 {
	display: block;
	padding-top: 6rem;
	margin-top: -6rem;
}
.recruit #anc2 {
	display: block;
	padding-top: 8rem;
	margin-top: -8rem;
}
.recruit #anc3 {
	display: block;
	padding-top: 5rem;
	margin-top: -5rem;
}
.recruit #anc4 {
	display: block;
	padding-top: 10rem;
	margin-top: -10rem;
}
.recruit #anc5 {
	display: block;
	padding-top: 6rem;
	margin-top: -6rem;
}

/*------------------------------------------------------------
TOP
------------------------------------------------------------*/
.slider{
	margin-bottom: 0.3%;
}

.swiper-button-next,.swiper-button-prev{

	background-color: #005CE3;
	color: #fff;
	height: 60px;}

.swiper [class^="swiper-button-"]::after{
	font-size: 15px;
	font-weight: bold;
	color: #fff;
}

.swiper-button-prev  {
	left: 0;
	right: auto;
}
.swiper-button-next {
	right: 0;
	left: auto;
}

.home .copy {
	max-width: 1920px;
	text-align: center;
	color: #fff;
	background-image: url('../../img/common/head_bg.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center left;
	padding: 1.5% 0;
	width: 100%;
	height: auto; /* 高さを自動に設定 */
	margin-bottom:1%;

}
.home .copy img{
	max-width: 50%;
	text-align: center;
	margin:auto;
	vertical-align: middle;
}

.home .copy2{
	max-width: 1920px;
	text-align: center;
	margin:auto;
}

@media (max-width: 750px) {
	.home .copy {
		display: flex; /* Flexbox レイアウトを有効化 */
		justify-content: center; /* 水平方向の中央配置 */
		align-items: center; /* 垂直方向の中央配置 */
		padding: 3.5% 0;
	}
	.home .copy img{
		max-width: 90%;
	}
	.home .copy2{
		max-width: 100vw;

	}
}
.news {
	margin: 2rem auto;
	width: 90%;
	max-width: 1720px; /* 最大幅を設定 */
}
.news h2 {
	text-align: left;
	margin-bottom: 4%;
}
.news h2 img{
	max-width: 30%;
	text-align: center;
	margin:auto;
}
.tablist {
	display: flex;
	margin-bottom: 2rem;
}

.tab {
	flex: 1;
	font-weight: bold; /* アクティブなタブのテキストを太字に */
	border-bottom: 3px solid transparent; /* 下線として透明なボーダーを追加 */
	cursor: pointer;
	text-align: center;
	padding: 10px 0;
	margin: 0 2px; /* タブ間の隙間を作るためのマージン */
	transition: color 0.3s; /* 色変更時のアニメーション */
}

.tab.active {
	border-bottom: 2px solid #005CE3; /* アクティブなタブの下線 */
	color: #005CE3; /* アクティブなタブのテキスト色 */
}

/* このスタイルを追加することで、非アクティブなタブの下にもう一度線が引かれることを防ぐ */
.tab:not(.active) {
	border-bottom: 3px solid #AAABAB;
}

.news dl {
	display: flex;
	width: 100%;
	margin-bottom: 2rem;
}

.news dt {
	text-align: left;
	flex: 1; /* 幅の割合を設定 */
	display: flex;
	align-items: center; /* 縦方向の中央寄せ */
	padding-left:1rem;
	/* 高さを指定する必要がある場合、ここで高さを設定します。 */
	font-size: clamp(10px, 1.5vw, 20px); 
	color: #848484;
}
.news dd {
	flex: 8; 
	text-align: left;
	padding-left: 2%;
	border-left: 2px solid #585858;
}
.news .icon {
	font-size: 0.7rem;
	font-weight: bold;
	border:1px solid;
	display: inline;
	padding: 0.1rem 2rem 0.1rem 2rem;
}
.news .color1{
	color: #52CA56 ;
}
.news .color2{	
	color: #52CA56 ;	
}
.news h3 {
	flex: 4; 
	text-align: left;
	font-size: clamp(10px, 2.5vw, 30px); 
	color: #585858;
	font-weight: bold;
}
.news p {
	flex: 4; 
	text-align: left;
	color: #848484;
}
.more-posts {
	background-image: url('../../img/common/more.png'); /* 画像のパスを指定 */
	background-size: cover;  /* 画像をボタンのサイズに合わせて調整 */
	background-position: center;  /* 画像の位置を中央に設定 */
	color: transparent; /* テキストの色を透明にして非表示にする */
	border: none; 
	width:6rem;
	height:6rem;
	background-color:#fff;
	cursor: pointer;
}



@media (max-width:750px) {

	.news {
		width: 90%; /* 最大幅を設定 */
		padding-left: 5%; /* 左の余白 */
		padding-right:5%; /* 右の余白 */
	}
	.news h2 img{
		max-width: 70%;

	}
	.tab {
		font-size:3vw;
	}

	.tablist {
		display: flex;
		margin-bottom: 2rem;
	}

	.tab {
		flex: 1;
		font-weight: bold; /* アクティブなタブのテキストを太字に */
		border-bottom: 3px solid transparent; /* 下線として透明なボーダーを追加 */
		cursor: pointer;
		text-align: center;
		padding: 10px 0;
		margin: 0 2px; /* タブ間の隙間を作るためのマージン */
		transition: color 0.3s; /* 色変更時のアニメーション */
	}

	.tab.active {
		border-bottom: 2px solid #005CE3; /* アクティブなタブの下線 */
		color: #005CE3; /* アクティブなタブのテキスト色 */
	}

	/* このスタイルを追加することで、非アクティブなタブの下にもう一度線が引かれることを防ぐ */
	.tab:not(.active) {
		border-bottom: 3px solid #AAABAB;
	}

	.news dl {
		display: block;
		width: 100%;
		margin-bottom: 2rem;
	}

	.news dt {
		display: flex; /* フレックスコンテナとして設定 */
		align-items: center; /* 子要素を縦方向の中心に揃える */
		justify-content: flex-start; /* 子要素を水平方向の開始点に揃える */
		padding-left: 1vw;
		font-size: 1.3rem;
		color: #848484;
	}

	.news dd {
		flex: none; 
		text-align: left;
		padding-left: 1vw;
		border-left: none;
	}
	.news .icon {
		margin-left: 1rem;;
		font-size: 0.8rem;
		font-weight: bold;
		border:1px solid;
		display: inline;
		padding: 0.0rem 2rem 0.0rem 2rem;
	}
	.news .color1{
		color: #52CA56 ;
	}
	.news .color2{	
		color: #52CA56 ;	
	}
	.news h3 {
		flex: none; 
		text-align: left;
		font-size: 6vw;
		color: #585858;
		font-weight: normal;
	}
	.home .news p {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;

	}
	.news p {
		flex: 4; 
		text-align: left;
		color: #848484;
	}

}










.point.box1 {
	background-image: url('../../img/top/point1.jpg');
}
.point.box2 {
	background-image: url('../../img/top/point2.jpg');
}
.point.box3 {
	background-image: url('../../img/top/point3.jpg');
}
.point {
	position: relative;
	width:100%;
	padding-top:38%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center center;
	margin-bottom: 5%;
	overflow: hidden;
}

.point .box {
	position:absolute;
	top:15%;
	left: 8%;
	text-align: left;
	width: 92%;

}
.point .box p{
	max-width: 100%;
	font-size: clamp(13px, 2.8vw, 50px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	color: #fff;
}
.point.box3 p{
	margin-top:-1%;
}

.point h2 img{
	margin-bottom: 2%; 
	width: 20%; 
}
.point.box2 h2 img{
	margin-top: 2%; 
}   
.point.box3 h2 img{
	margin-top: 1%; 
}    
.point .box .link img{
	width: 22%; 
	margin-bottom: 1%;
}
.point.box2 .link img{
	margin-bottom:2%; 
}
.point.box3 .link img{
	margin-bottom: 2%; 
}
.point .box .link a:hover{
	opacity: 0.8;
}
.point h3 {
	font-size: clamp(10px, 1.2vw, 25px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	text-align: center;
	display: inline-block;
	width: 15%;
	margin-bottom: 1%;
	padding: .2% 0; /* 上下に10px、左右に10pxの余白を設定 */
	background-color: #fff; /* 背景色を指定 */
	color: #005CE3;
	letter-spacing: .2rem;
}
.point_table {
	margin-bottom: 0.5%;
	font-size: clamp(10px, 1.5vw, 25px); /* 最小10px、ビューポート幅の1.2%、最大20px */
}
.point_table a{
	color:#fff;
	margin-right: 1%;
}
.arrow-right {
	display: inline-block;
	width: .6rem;
	height: .6rem;
	margin-right:.3rem;
	border-top: .2rem solid #fff;
	border-right: .2rem solid #fff;
	transform: rotate(45deg);
}

@media (max-width: 750px) {
	.point {
		padding-top:55%;
		margin-bottom: 5%;
	}

	.point .box {
		position:absolute;
		top:10%;
		left: 9%;
		text-align: left;
		width: 100%;


	}
	.point h2 img{
		margin-bottom: 2vw;
		width: auto; 
		height: 8vw; /* 例として50pxを設定。必要に応じて調整してください */ 
	}
	.point .box .link  img{
		margin-bottom: 0;
		width:auto;
		height: 7vw; /* 例として50pxを設定。必要に応じて調整してください */ 
	}
	.point.box2 .link {
		padding-bottom: 2%;
	}
	.point.box2 h2 img{
		margin-top: 2.5%;
		margin-bottom: 5%; 
	}    
	.point.box3 h2 img{
		margin-top: 0%;
		margin-bottom: 3%; 
	}    


	.point.box2 .link {
		margin-bottom:2%; 
	}
	.point.box3 .link {
		margin-bottom:2%; 
	}


	.point_table {
		margin-bottom: 0; 
		font-size: clamp(10px, 2.5vw, 25px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	}
	.point .box p{
		font-size: clamp(13px, 3.8vw, 50px); /* 最小10px、ビューポート幅の1.2%、最大20px */

	}


	.point h3 {
		text-align: center;
		width: 25vw;
		font-size: 2vw;
		margin-bottom: 1vw;
		padding: 0px 0px; /* 上下に10px、左右に10pxの余白を設定 */
	}


	.arrow-right {
		width: 1vw;
		height: 1vw;
		margin-right:1vw;
		border-top: 0.5vw solid #fff;
		border-right: 0.5vw solid #fff;
	}
	.point.box1 {
		background-image: url('../../img/top/point1sp.jpg');
	}
	.point.box2 {
		background-image: url('../../img/top/point2sp.jpg');
	}
	.point.box3 {
		background-image: url('../../img/top/point3sp.jpg');
	}
	.point .box p, .point h3, .point .link a {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 0; /* 余白の問題がこれらの要素に由来する場合 */
	}
} 



/*------------------------------------------------------------
company
------------------------------------------------------------*/
.company{
	margin-bottom: 5%;
}
.company .section1 {
	position: relative;
	width:100%;
	padding-top:58%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url('../../img/company/bg.jpg');
	color: #fff;
	margin-bottom: 5%;
	overflow: hidden;
}
.company .section1 .box {
	position:absolute;
	top:14%;
	left: 7%;
	text-align: left;
	width: 93%;
}
.company .section1 h2 {
	width: 30%;
	margin-bottom: 4%; 
}
.company .section1 .copy{
	width: 32%;
	margin-bottom:3.5vw;
}
.company .section1 h3 {
	font-size: clamp(8px, 1.2vw, 16px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	margin-bottom: 0; 
	font-weight: normal;

}

.company .section1 .box p{
	max-width: 100%;
	font-size: clamp(8px, 1.5vw, 30px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	font-weight: bold;
	margin-bottom: 1%; 
}


@media (max-width: 750px) {

	.company .section1 {
		position: relative;
		width:100%;
		padding-top:140%;
		background-size:cover;
		background-repeat: no-repeat;
		background-position: top center;
		background-image: url('../../img/company/bg_sp2.jpg');
		color: #fff;
		margin-bottom:2%;
		overflow: hidden;
	}
	.company .section1 .box {
		position:absolute;
		top:8%;
		left: 0;
		right: 0;
		text-align: left;
		width: 93%;
	}
	.company .section1 h2 {
		width: 30%;
		margin-bottom: 8%;
	}
	.company .section1 h2 img{
		position:absolute;
		left: 13%;
		width: 40vw;
		margin-bottom:5vw;
	}

	.company .section1 .copy{
		width:80%;
		margin:auto;
		text-align: center;
		margin-left: 12%;
	}
	.company .section1 .copy img{
		margin:0 auto 5% auto;
	}
	.company .section1 h3 {
		text-align: center;
		font-size: clamp(8px, 1.7vw, 16px); /* 最小10px、ビューポート幅の1.2%、最大20px */
		margin-bottom: 0; 
		font-weight: normal;

	}
	.company .section1 .box p{
		text-align: center;
		max-width: 100%;
		font-size: clamp(8px, 3vw, 30px); /* 最小10px、ビューポート幅の1.2%、最大20px */
		font-weight: bold;
		margin-bottom: 1%; 
	}
}




.company .section2{
	display: flex;
	justify-content: space-between;
	text-align: left;
	width: 90%;
	margin:auto;
}

.company .section2 h2 {
	font-size: 200%;
	color: #005CE3;
	margin-bottom: 1rem;
	letter-spacing: 0.5rem;
} 
.company .section2 h3 {
	display: flex; /* Flexbox コンテナとして設定 */
	align-items: center; /* 縦方向の中央寄せ */
	font-size: 150%;
	color: #585858;
	margin-bottom: 1rem;
}
.company .section2 h3 span{
	font-size: 130%;
	margin-left: 1rem;
}

.company .section2 .box1,.company .section2 .box2 {
	width: 49%; /* ボックスの幅を適宜調整 */
}
.company .section2 .box1 {
	padding-right: 3%;
	border-right: 2px solid #585858; /* 右側に白色のボーダーを追加 */
}
.company .section2 .box2 {
	padding-left: 3%;
}

.company .section2 dl {
	display: grid;
	grid-template-columns: 25% 75%; /* dtの幅とddの幅 */
	gap: 10px; /* dtとddの間の隙間 */
	width: 100%;
	margin-bottom: 5%; 
}

.company .section2 dt, .company .section2 dd {
	margin: 0;
}

.company .section2 dt {
	display: flex; /* Flexコンテナとして設定 */
	justify-content: center; /* 水平方向の中心に配置 */
	align-items: center; /* 垂直方向の中心に配置 */

	background-color: #0060F4; /* 背景色 */
	color: #fff;
	padding: 10px;
	margin: 0;
}
.company .section2 .map {
	margin: 10% 0 0 0;
}
.company .section2 .map iframe {
	width: 100%;
}
.company .section2 dd {
	padding: 10px; /* 余白はお好みで調整 */
}

@media (max-width: 750px) {
	.company .section2 {
		flex-direction: column; /* Flexboxの方向を縦に設定 */
	}
	.company .section2 .box1, .company .section2 .box2 {
		margin: auto;
		width: 95%; /* ボックスの幅を全幅に設定 */
		padding-right: 0; /* box1の右パディングをリセット */
		padding-left: 0; /* box2の左パディングをリセット */
		border-right: none; /* box1の右側のボーダーを除去 */
	}
	.company .section2 h2 {
		font-size: 140%;
		color: #005CE3;
		margin: 1rem;
		letter-spacing: 0.1rem;
	} 
	.company .section2 h3 {
		display: flex; /* Flexbox コンテナとして設定 */
		align-items: center; /* 縦方向の中央寄せ */
		font-size: 100%;
		color: #585858;
		margin: 0 0 1rem 1rem;
	}
	.company .section2 h3 span{
		font-size: 110%;
		margin-left: 1rem;
	}
	.company .section2 dl {
		margin-bottom: 0;
		grid-template-columns: 30% 70%; /* dtの幅とddの幅 */
	}
	.company .section2 dt {
		text-wrap: nowrap;
		padding: 5%;
		text-align: center;
	}
	.company .section2 dd {
		text-align: left;
		padding: 5%; /* 余白はお好みで調整 */
	}

}
/*------------------------------------------------------------
business
------------------------------------------------------------*/
.business {

}
.business .business_title{
	background-color: #006EFF;
	text-align: left;
}
.business .business_title img{
	margin: 2% 7%;
}
.business .listout{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 0 10% 0;
}

.business .listbox {
	position: relative;
	padding-top: 43%;
	box-sizing: border-box;
	width: calc(50% - 5px); /* 2列で表示するために幅を50%から余白の半分を引いた値に設定 */
	background-size:cover;
	background-repeat: no-repeat;
	background-position: top center;
	margin-bottom: 3%;
}
.business .listbox .box {
	position:absolute;
	top:58%;
	left: 0;
	right: 0;
	text-align: left;
	text-align: center;
	width: 60%; /* .point の幅に対する相対的な幅 */
	margin: auto;
}
.business h2{
	text-align: left;
	width: 50%; 
	margin: 3rem;
}
.business .listbox2{
	position: relative;
	padding-top: 23%;
	box-sizing: border-box;
	width: calc(50% - 5px); /* 2列で表示するために幅を50%から余白の半分を引いた値に設定 */
	background-size:contain;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-image: url('../../img/business/img6.jpg');
}
.business .listbox2 .box{
	position:absolute;
	top:0%;
	left: 0;
	right: 0;
}
.business .listbox2 p{
	background:rgba(37, 150, 255, 0.575);
	width: 60%;
	font-size: clamp(8px, 1.2vw, 30px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	border-radius: 15px;
	padding: 1rem 2rem;
	color: #fff;
	text-align: left;
	font-weight: bold;
	line-height: 200%;
}
.business .listbox2 h2{
	text-align: left;
	width: 100%; 
	margin:0 0 2% 0;

}
.business .listbox h3{
	text-align: center;
	margin: 5% auto 7% auto;
	width: 80%;
}
.business .listbox ul{

	display: flex; /* Flexboxを使用してアイテムをフレックスコンテナ内で配置 */
	flex-direction: column; /* アイテムを縦方向に並べる */
	align-items: center; /* アイテムを水平方向に中央揃え */
	text-align: center; /* テキストを中央揃え */
	margin: 0 auto 2% auto;
	color: #fff;
	font-size: clamp(10px, 1.2vw, 25px); /* 最小10px、ビューポート幅の1.2%、最大20px */
}
.business .listbox li{
	width: 100%;
	margin: 0 auto 3% 0;
	line-height: 100%;
}
.business .listbox li img {
	width: 5%; /* アイコンの幅を設定 */
	margin-right: 1%; /* アイコンとテキストの間隔 */
	vertical-align: middle; /* アイコンをテキストの中央に揃える */
}
.business .listbox .link img {
	width: 30%;
}
.business .listbox .link a:hover {
	opacity: 0.7;
}

@media (max-width: 750px) {
	.business .business_title img{
		margin: 5% 8%;
		width: 50%;
	}
	.business h2{
		width: 40%; 
		margin: 5% 8%;
	}
	.business .listout{
		display: flex;
		flex-direction: column; /* この行を追加: 子要素を縦方向に配置 */
		justify-content: flex-start; /* 縦並びの場合、このプロパティは不要かもしれませんが、必要に応じて調整してください */
		padding: 0 ;
		gap: 10px; /* 子要素間の間隔を設定。必要に応じて調整してください */
	}
	.business .listbox {
		padding-top: 86%;
		width: 100%; /* 幅を100%に変更 */
	} 
	.business .listbox2{
		padding-top: 106%;
		width: 100%; /* 幅を100%に変更 */
	}
	.business .listbox2 p{
		font-size: clamp(12px, 1.8vw, 30px); /* 最小10px、ビューポート幅の1.2%、最大20px */
		margin: 5% 8%;
	}
	.business .listbox2 h2{
		width: 40%; 
		margin: 5% 8%;
	}

	.business .listbox h3{
		margin: 5% auto 7% auto;
	}
	.business .listbox h3 img{
		height: 7vw;
	}
	.business .listbox ul{
		margin: 0 auto 1% auto;
		font-size: clamp(12px, 2.5vw, 25px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	}


}


.business .listbox:nth-child(1) {
	background-image: url('../../img/business/img1.jpg');
}
.business .listbox:nth-child(2)  {
	background-image: url('../../img/business/img2.jpg');
}
.business .listbox:nth-child(3)  {
	background-image: url('../../img/business/img3.jpg');
}
.business .listbox:nth-child(4)  {
	background-image: url('../../img/business/img4.jpg');
}
.business .listbox:nth-child(5)  {
	background-image: url('../../img/business/img5.jpg');
}

















/*------------------------------------------------------------
store
------------------------------------------------------------*/
.store{
	margin-bottom: 5%;
}
.store .section1 {
	position: relative;
	width:100%;
	padding-top:58%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: top center;
	color: #fff;
	margin-bottom: 2%;
}

.store .section1 .box{
	position:absolute;
	text-align: left;
	top:20%;
	left: 7%;
	width: 93%;
}

.store .section1 h2 {
	margin-bottom: 2vw; 
	width: 25%; 
}
.store .section1 p {
	margin-bottom: 1%; 
	width: 12%; 
}
.store .section1 h3 {
	margin-bottom: 2vw; 
	width: 30%; 
}


.store .section1 dl {
	display: flex;
	width: 50%;
	margin-bottom: 1%;
}

.store .section1 dt {
	padding:0 1%;
	width: 16%;
	display: flex;
	justify-content: center; /* 水平方向の中央寄せ */
	align-items: center; /* 縦方向の中央寄せ */
	font-size: clamp(10px, 1.2vw, 25px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	color: #0060F4;
	font-weight: bold;
	letter-spacing: .3rem;
	background-color: #fff;
	white-space: nowrap;  
	height: 5%; /* ここで高さを固定 */
}
.store .section1 dt::after {
	content: ""; /* 透明なコンテンツ */
	margin-right: -3%; /* 最後の文字の右側のスペースを相殺する */
}
.store .section1 dd {
	font-size: clamp(10px, 1.2vw, 25px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	text-align: left;
	font-weight: bold;
	margin-top: -.1%;
	padding-left: 1%;
}
.store.store1 .section1{  
	background-image: url('../../img/store/img1.jpg');
}
.store.store2 .section1{  
	background-image: url('../../img/store/img2.jpg');
}
.store.store3 .section1{  
	background-image: url('../../img/store/img3.jpg');
}
.store.store4 .section1{  
	background-image: url('../../img/store/img4.jpg');
}
.store.store5 .section1{  
	background-image: url('../../img/store/img5.jpg');
}


@media (max-width: 750px) {
	.store .section1 {
		position: relative;
		width:100%;
		padding-top:142%;
		background-size:cover;
		background-repeat: no-repeat;
		background-position: top center;
		color: #fff;
		margin-bottom: 5%;
	}

	.store .section1 .box{
		position:absolute;
		text-align: left;
		top:7%;
		left: 11%;
		width: 89%;
	}


	.store .section1 h2 {
		margin-bottom:4%; 
		line-height: 0;
		width: 40%; 
	}

	.store .section1 p {
		margin-bottom:2%; 
		line-height: 0;
		width: 20%; 
	}
	.store .section1 h3 {
		margin-bottom: 4%; 
		width: 50%; 
	}
	.store .section1 dl {
		margin-bottom: 2%;
		width: 75vw;
	}
	.store .section1 dt {
		width: 16vw;
		font-size: clamp(10px, 1.5vw, 25px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	}
	.store .section1 dt::after {
		margin-right: -6%; /* 最後の文字の右側のスペースを相殺する */
	}
	.store .section1 dd {
		font-size: clamp(10px, 1.5vw, 25px); /* 最小10px、ビューポート幅の1.2%、最大20px */
		text-align: left;
		font-weight: bold;
		margin-top: -.1%;
		padding-left: 2%;
		width: 60vw;
	}
	.store.store1 .section1{  
		background-image: url('../../img/store/img1sp.jpg');
	}
	.store.store2 .section1{  
		background-image: url('../../img/store/img2sp.jpg');
	}
	.store.store3 .section1{  
		background-image: url('../../img/store/img3sp.jpg');
	}
	.store.store4 .section1{  
		background-image: url('../../img/store/img4sp.jpg');
	}
	.store.store5 .section1{  
		background-image: url('../../img/store/img5sp.jpg');
	}
}


.store .section2{
	display: flex;
	justify-content: space-between;
	text-align: left;
	width: 90%;
	margin:auto;
}
.store .section2 h2 {
	font-size: 200%;
	color: #005CE3;
	margin-bottom: 1rem; 
	letter-spacing: 0.5rem;
} 
.store .section2 .box1,.store .section2 .box2 {
	width: 49%; /* ボックスの幅を適宜調整 */
}
.store .section2 .box1 {
	padding-right: 3%;
}
.store .section2 .box2 {
	padding-left: 3%;
}
.store .section2 .info {
	font-size: clamp(12px, 2vw, 35px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	line-height: 170%;
	color: #585858;
}
.store .section2 .info img {
	padding:0 0 3% 0;
}
.icons img {
	margin-right: 1%;
}
.store .section2 .map {
	margin: 0;
}
.store .section2 .map iframe {
	width: 100%;
}


@media (max-width: 750px) {

	.store .section2 .info {
		font-size: 100%;
		line-height: 170%;
	}
	.store .section2 .icons{
		padding:2% 0 10% 0;
	}
	.store .section2 .icons{
		padding:2% 0 5% 0;
	}
	.store .section2 .icons img{
		height: 10vw;
	}
	.store .section2 {
		flex-direction: column; /* Flexboxの方向を縦に設定 */
		align-items: center; /* 子要素を中央寄せ */
	}

	.store .section2 .box1, .store .section2 .box2 {
		width: 100%; /* ボックスの幅を全幅に設定 */
		padding-right: 0; /* box1の右パディングをリセット */
		padding-left: 0; /* box2の左パディングをリセット */
		border-right: none; /* box1の右側の境界線をリセット */
	}

	.store .section2 h2 {
		text-align: left; /* h2要素を中央寄せ */
		width: auto; /* h2の幅を自動に設定して中央寄せを有効化 */
		margin-left: 0; /* h2の左マージンをリセット */
		margin-right: 0; /* h2の右マージンをリセット */
	}
	.store .section2 .map {
		margin-bottom: 5%;
	}
}


.prs{
width: 96%;
  margin: auto;
  display: flex;
  gap: 10px;
  margin-bottom: 60px;
}


@media (max-width: 750px) {
.prs{
width: 92%;
  margin: auto;
  display: block;
  margin-bottom: 20px;
}
.prs img{margin-bottom: 10px;}
}






/*------------------------------------------------------------
.csr
------------------------------------------------------------*/
.csr{
	background-image: url('../../img/csr/box4_bg2.jpg'); /* 背景画像を設定 */
	background-position: right bottom; /* 背景画像を右下に固定 */
	background-size: 50% auto; /* 背景画像がコンテナを完全に覆うように */
	background-repeat: no-repeat; /* 背景画像を繰り返さない */
}  

.csr .section1 {
	position: relative;
	width:100%;
	padding-top:59%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url('../../img/csr/head_bg.jpg');
	color: #fff;
	margin-bottom: 4%; 
}
.csr .section1 .box {
	position:absolute;
	text-align: left;
	top:13%;
	left: 7%;
	width: 93%;
	height: 87%;
}
.csr .section1 h2 {
	margin-bottom: 4%; 
	width: 30%; 
}
.csr .section1 .copy{
	width: 35%;
	margin-bottom: 3%;
}
.csr .section1 .copy2{
	width: 33%;
}

@media (max-width: 750px) {
	.csr{
		background-image: url('../../img/csr/box4_bg2_sp.jpg'); /* 背景画像を設定 */
		background-position: center bottom; /* 背景画像を右下に固定 */
		background-size: 100% auto; /* 背景画像がコンテナを完全に覆うように */
		padding-bottom: 20vw;
	}  

	.csr .section1 {
		padding-top:141%;
		background-image: url('../../img/csr/head_bg_sp.jpg');
		margin-bottom: 4%; 
	}
	.csr .section1 .box {
		position:absolute;
		text-align: left;
		top:9%;
		left: 14%;
		width: 93%;
	}
	.csr .section1 h2 {
		margin-bottom: 2vw; 
		width:55vw; 
	}
	.csr .section1 .copy{
		width: 62vw;
		margin-bottom: 3%;
	}
	.csr .section1 .copy2{
		width: 59vw;
	}
}

.csr .section2{
	text-align: left;
	width: 90%;
	margin:auto;
}  

.csr .section2 h3 {
	width: 35%;
	margin-bottom: 3%;
}
.csr .section2 h4 {
	border-left: 6px solid #00C4B1;
	font-size: clamp(10px, 1.8vw, 35px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	letter-spacing: .2rem;
	margin-bottom:1%;
	color:#00C4B1;
	padding-left: 6px;
}



.csr .section2 p{
	font-size: clamp(10px, 1.2vw, 20px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	color: #585858;
	padding: 0 1% 1% 1%;
}

.csr .box1 .imgarea1  {
	margin: 0 0 5% 0;

}

.csr .box1 .imgarea1 .img-container {
	margin: 1.5rem 0;
	display: flex;
	justify-content: space-between;
	gap: 20px; /* 画像間のスペース */
}

.csr .box1 .img-container > div {
	width: calc(50% - 10px); /* img1とimg2を左右均等に配置、gapを考慮 */
	display: flex;
	flex-direction: column;
	align-items: center;
}

.csr .box1 .img-container img {
	width: 100%;
	display: block; /* 画像を要素のフル幅にして、下部にマージンがないようにする */
}

.csr .box1 .img-container .ttl {
	width: 100%;
	background-color:#A68864; /* タイトル背景色 */
	font-weight: bold;
	color: #fff; /* 文字色 */
	font-size: clamp(10px, 1.8vw, 35px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	letter-spacing: .3rem;
	text-align: center; /* センタリング */
	padding:1rem 0; /* 上下のパディング */
}
.csr .section2 .text-with-image {
	/* コンテナのスタイルを設定 */
	overflow: hidden; /* floatした要素の親要素の高さが0になるのを防ぐ */
}
.csr .section2 .text-with-image img {
	/* 画像を右下に配置するためのスタイル */
	float: right; /* 画像を右側に寄せる */
	margin-left:5%; /* テキストとの間隔 */
	width: 50%;
}
.csr .box4 {
	padding-bottom: 5%;
} 
.csr .section2 dl {
	border: 2px solid #A68864; /* ボーダーを黒で指定 */
	width: 40%; /* 幅を40%に設定 */
	display: flex; /* Flexboxを使用 */
	flex-wrap: wrap; /* 項目が複数行にわたる場合に折り返す */
	box-sizing: border-box; /* ボーダーとパディングを幅に含める */
	margin-bottom: 1rem; /* dl要素の下の余白 */
	color: #A68864;
	text-align: center;
	font-size: clamp(10px, 1.2vw, 20px); /* 最小10px、ビューポート幅の1.2%、最大20px */
}

.csr .section2 dt, .csr  .section2 dd {
	flex-basis: 50%; /* 幅を親要素の50%に設定 */
	box-sizing: border-box; /* ボーダーとパディングを幅に含める */
	padding:2%;
}
.csr .section2 dt {
	font-weight: bold;
	background-color: #fff;
}

.csr .section2 dd {
	background-color: #A68864; /* 背景色を薄いグレーに指定 */
	margin: 0; /* デフォルトのマージンを削除 */
	color: #fff;
}

.csr .box2,  .csr .box4,  .csr .box4 .fix{
	margin: 2% 0 0 0;
}
.csr .box4 .fix{
	margin: 4% 0 2.5% 0;
}

@media (max-width: 750px) {
	.csr .section2 h3 {
		width: 70%;
		margin:5% 0 5% 0;
	}
	.csr .section2 h4 {
		border-left: 6px solid #00C4B1;
		font-size: clamp(14px, 4.1vw, 36px); /* 最小10px、ビューポート幅の1.2%、最大20px */
		letter-spacing: 0rem;
		margin-bottom:4%;
		color:#00C4B1;
		padding-left: 6px;
	}

	.csr .section2 p{
		font-size: clamp(12px, 2.8vw, 20px); /* 最小10px、ビューポート幅の1.2%、最大20px */
		color: #585858;
		padding: 0 1% 1% 1%;
		margin-bottom: 4%;
	}


	.csr .box1 .imgarea1 .img-container {
		margin: 2% 0 8% 0;
		gap: 0;
		flex-direction: column; /* 列方向に配置 */
	}

	.csr .box1 .img-container > div {
		width: 100%; /* img1とimg2を左右均等に配置、gapを考慮 */
	}

	.csr .box1 .img-container img {
		width: 100%;
		margin-bottom: 1%;
		display: block; /* 画像を要素のフル幅にして、下部にマージンがないようにする */
	}
	.csr .box1 .img-container .img1 {
		margin-bottom: 3%;
	}

	.csr .box1 .img-container .ttl {
		font-size: clamp(12px, 4vw, 25px); /* 最小10px、ビューポート幅の1.2%、最大20px */
		letter-spacing: 0rem;
		text-align: center; /* センタリング */
		padding:1% 0; /* 上下のパディング */
	}



	.csr .section2 .text-with-image img {
		/* 画像を右下に配置するためのスタイル */
		float: none; /* 画像を右側に寄せる */
		margin-left:0%; /* テキストとの間隔 */
		width: 100%;
		margin-bottom: 4%;
	}


	.csr .box4{
		padding-bottom: 35%;
	}
	.csr .section2 dl {
		width: 90%; /* 幅を40%に設定 */
		margin:0 auto;
		margin-bottom: 1%; /* dl要素の下の余白 */
		font-size: clamp(10px, 1.2vw, 20px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	}


	.csr .box2,  .csr .box4,  .csr .box4 .fix{
		margin: 2% 0 0 0;
	}
	.csr .box4 .fix{
		margin: 4% 0 5% 0;
	}

}








/*------------------------------------------------------------
.recruit
------------------------------------------------------------*/
.recruit{
	margin-bottom: 5%;
	background-image: linear-gradient(to bottom, #E9EEF4 0%, #fff 25%, #fff 100%);
}

.recruit .section1 {
	position: relative;
	width:100%;
	padding-top:47%;
	background-size:cover;
	background-position: top center;
	background-image: url('../../img/recruit/bg.png');
	color: #fff;

}

.recruit .section1 .box {
	position:absolute;
	text-align: left;
	top:12%;
	left: 5%;
	width: 93%;
}
.recruit .section1 h2 {
	margin-bottom: 3%; 
	width: 22%; 
}
.recruit .section1 .copy{
	width: 52%; 
	margin-bottom: 3%;
}
.recruit .section1 .box p{
	margin-bottom: 2%;
	letter-spacing: .1rem;
	max-width: 100%;
	font-size: clamp(8px, 1.2vw, 22px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	color: #fff;
}
.recruit .section1 .copy2{
	font-size: clamp(8px, 1.8vw, 40px);
}


@media (max-width: 750px) {
	.recruit{
		margin-bottom: 5%;
		background-image: linear-gradient(to bottom, #E9EEF4 0%, #fff 25%, #fff 100%);
	}

	.recruit .section1 {
		padding-top:131%;
		background-image: url('../../img/recruit/bg_sp.jpg');
	}

	.recruit .section1 .box {
		top:15%;
		left: 8%;
	}
	.recruit .section1 h2 {
		margin-bottom: 8vw; 
		width: 30vw; 
	}
	.recruit .section1 .copy{
		width: 47vw; 
		margin-bottom:7vw;
	}
	.recruit .section1 .box p{
		margin-bottom:6vw;
		line-height: 3vw;
		letter-spacing: 0rem;
		max-width: 100%;
		font-size: clamp(10px, 2vw, 22px); /* 最小10px、ビューポート幅の1.2%、最大20px */
		color: #fff;
	}
	.recruit .section1 .copy2{
		line-height: 6vw;
		font-size: clamp(12px, 3.8vw, 40px);
	}
}



.recruit .section2{
	margin:auto;
	text-align: left;
	color: #585858;
} 
.recruit .section2 .box1{
	width: 85%;
	margin:auto;
}
.recruit .section2 .box2{
	width: 100%;
	margin:auto;
} 
.recruit .section2 .box3{
	width: 100%;
	margin: -5% auto 0 auto;
} 
.recruit .section2 .box4{
	width: 85%;
	margin:auto;
}  

.recruit .section2 .voice2{
	width: 85%;
	margin:auto;
} 
.recruit .section2 h3 {
	margin-bottom: 1rem;

}
.recruit .section2 h4{
	font-size: 250%;
	color: #00BEF4;
	margin: 2% 0 2% 3%;
	letter-spacing: .3rem;
}
.recruit .section2 p {
	font-size: clamp(8px, 1.8vw, 30px);
}
.recruit .box1 ul{
	margin:0 3%;
	font-size: clamp(8px, 1.8vw, 30px);
}
.recruit .box1 li{
	background-repeat: no-repeat; /* 背景画像を繰り返さない */
	background-position: 0 0; /* 背景画像を左上に配置 */
	padding-left: 3%; /* テキストとアイコンの間にスペースを設ける */
	background-size: 2.5%; /* アイコンのサイズを指定 */
	margin-bottom: 2%; /* リスト項目間の余白 */
	min-height: 2.5%; /* アイコンが収まるように最小高さを指定 */
	display: flex; /* Flexboxを使用 */
	align-items: center; /* アイコンとテキストを垂直方向の中心に揃える */
}

.recruit .box1 li:nth-child(1){
	background-image: url('../../img/recruit/list1.png'); /* アイコンの画像パスを指定 */
}
.recruit .box1 li:nth-child(2){
	background-image: url('../../img/recruit/list2.png'); /* アイコンの画像パスを指定 */
}
.recruit .box1 li:nth-child(3){
	background-image: url('../../img/recruit/list3.png'); /* アイコンの画像パスを指定 */
}

.recruit .box2 .inbox {
	margin-left:6%;
}
.recruit .box2 .inbox p {
	margin:0 4% ;
}

.recruit .box2 .box2img {
	margin-top: -1rem;
	z-index: -1;
}
.recruit .box3  {

}
.recruit .box3 h3 {
	margin-left:2% ;
}
.recruit .box3 p {
	margin:1% 5vw ;
	font-size: clamp(8px, 1.8vw, 40px);
}

.bluebox {
	position: relative;
	width:100%;
	padding-top:40%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url('../../img/recruit/box3bgttl.png');
	color: #fff;
}

.bluebox ul {
	position:absolute;
	text-align: left;
	top:25%;
	left: 9%;
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start; /* アイテムを左揃えに変更 */
	margin: auto; /* ulを中央寄せ */

}

.bluebox li {
	flex: 0 0 calc(50% - 10px); /* 各アイテムの幅を調整 */
	margin: 0.5% 0.2%; /* アイテム間のマージン */
	padding-left: 3%; /* アイコンのためのパディング */
	background-image: url('../../img/recruit/box3icon.png');
	background-repeat: no-repeat;
	background-position: 0px center;
	background-size: 5%;
	box-sizing: border-box;
	position: relative;
	font-size: clamp(8px, 1.6vw, 32px);
}



.recruit .box4 h3 {
	margin-bottom: 3%;
}
.recruit .box4 .content {
	padding: 0 3%;
}
.recruit .box4 .disc {
	padding-right:.5%;
	color: #009AF4;
}
.recruit .box4 .ttl {
	margin-bottom: 2%;
}
.recruit .box4 ul {
	font-size: clamp(8px, 1.2vw, 22px);
}
.recruit .box4 li {
	margin-bottom: 2%;
}
.recruit .voice1, .voice2 {
	display: flex; /* Flexboxの利用 */
	align-items: flex-start; /* アイテムを上端に揃える */
	margin-bottom: 5%; /* 下部の余白 */
}

.recruit .voice1 .ttl, .recruit .voice1 ul, .recruit .voice2 .ttl, .recruit .voice2 ul {
	flex: 1; /* 可能な限りの空間を占める */
}

.recruit .voice1 .img,.recruit  .voice2 .img {
	flex-basis: 330px; /* 画像のための基本幅、内容に応じて調整 */
	order: 2; /* .voice1の画像を右側に移動 */
}

.recruit .voice1 .ttl, .recruit .voice1 ul {
	order: 1; /* .voice1のテキストを左側に */
}

.recruit .voice2 {
	flex-direction: row-reverse; /* .voice2の子要素の順序を反転 */
}

.recruit .voice2 .img {
	order: 1; /* .voice2では画像を左側に */
}

.recruit .voice2 .ttl, .recruit .voice2 ul {
	order: 2; /* .voice2のテキストを右側に */
}
.recruit .voice2 .content {
	background-image: none;
}

.recruit .box5 {
	background-image: url('../../img/recruit/box5bg.png'); /* 背景画像を設定 */
	background-position: 90% 0; /* 背景画像を右側に配置 */
	background-repeat: no-repeat; /* 背景画像が繰り返されないように設定 */
	background-size: 10%; /* 背景画像がコンテナに収まるように調整 */
}

.recruit .box5 p{
	font-size: clamp(8px, 1.8vw, 30px);
	padding:10% 0 0 14%;
}


@media (max-width: 750px) {
	.recruit .section2 h3 {
		margin-bottom: 2%;
	}
	.recruit .section2 h4{
		font-size: clamp(14px, 4.8vw, 30px);
		color: #00BEF4;
		margin: 2% 0 2% 3%;
		letter-spacing: .1rem;
	}
	.recruit .section2 p {
		font-size: clamp(8px, 1.8vw, 30px);
	}  
	.recruit .section2 .box1{
		width: 100%;
		margin:auto;
	}
	.recruit .section2 .box1 h3{
		width: 100%;
		margin-bottom: 2%;
	} 
	.recruit .section2 .box1 h4{
		width: 80%;
		margin:0 auto 0 auto;
		margin-bottom: 2%;
	} 
	.recruit .section2 .box1 ul{
		width: 80%;
		margin:0 auto 0 auto;
		margin-bottom: 5%;
		font-size: clamp(12px, 3.5vw, 40px);
	} 

	.recruit .box1 li{
		background-repeat: no-repeat; /* 背景画像を繰り返さない */
		padding-left: 9%; /* テキストとアイコンの間にスペースを設ける */
		background-size: 6%; /* アイコンのサイズを指定 */
		margin-bottom: 2%; /* リスト項目間の余白 */
		min-height: 6%; /* アイコンが収まるように最小高さを指定 */
		background-position: left 2% ;
		display: flex; /* Flexboxを使用 */
		align-items: center; /* アイコンとテキストを垂直方向の中心に揃える */
	}

	.recruit .box1 li:nth-child(1){
		background-image: url('../../img/recruit/list1.png'); /* アイコンの画像パスを指定 */
	}
	.recruit .box1 li:nth-child(2){
		background-image: url('../../img/recruit/list2.png'); /* アイコンの画像パスを指定 */
	}
	.recruit .box1 li:nth-child(3){
		background-image: url('../../img/recruit/list3.png'); /* アイコンの画像パスを指定 */
	}
	.recruit .section2 .box2{
		width: 100%;
		margin:auto;
	} 
	.recruit .box2 .inbox {
		margin-left:0%;
	}
	.recruit .section2 .box2 h3{
		width: 100%;
		margin-bottom: 5%;
	} 
	.recruit .box2 .inbox p {
		margin:0 10% 0 10% ;
		font-size: clamp(12px, 3.5vw, 40px);
	}

	.recruit .box2 .box2img {

		margin: 5% 10% 0 4%;
		z-index: -1;
	}


	.recruit .section2 .box3{
		width: 100%;
		margin: 0 auto 0 auto;
	} 
	.recruit .box3 h3 {
		margin-left:0% ;
		width: 100%;
	}
	.recruit .box3 p {
		margin:1% 11vw ;
		font-size: clamp(12px, 3vw, 40px);
	}

	.recruit .section2 .box4{
		width: 100%;
		margin:auto;
	}  
	.recruit .section2 .box4 .voice1,.recruit .section2 .box4 .voice2{
		width: 85%;
		margin:auto;
	}  
	.recruit .section2 .box4 h3{
		width: 100%;
	}  
	.recruit .box4 h3 {
		margin-bottom: 3%;
	}
	.recruit .box4 .content {
		position: relative;
		padding: 0 3%;
	}

	.recruit .box4 .disc {
		padding-right:.5%;
		color: #009AF4;
	}
	.recruit .box4 .ttl {
		width: 64%;
		position:absolute;
	}
	.recruit .box4 .voice1 .ttl {

	}
	.recruit .box4 .voice2 .ttl {
		right: 0;
	}
	.recruit .box4 ul {
		padding-top: 15%;
		font-size: clamp(12px, 3vw, 40px);
	}
	.recruit .box4 li {
		margin-bottom: 5%;
	}

	/* Flexboxレイアウトを解除し、デフォルトのブロックレイアウトに戻します */
	.recruit .voice1, .recruit .voice2 {
		display: block;
		margin-bottom: 5%;
	}
	.recruit .voice2 .content {
		background-image: url('../../img/recruit/box5bg.png'); /* 背景画像を設定 */
		background-position: 90% 95%; /* 背景画像を右側に配置 */
		background-repeat: no-repeat; /* 背景画像が繰り返されないように設定 */
		background-size: 8%; /* 背景画像がコンテナに収まるように調整 */
		padding-bottom: 1%;
	}

	.recruit .voice1 .img {
		float: right;
		margin-left: 20px; /* 画像とテキストの間の余白 */
		margin-bottom: 20px; /* 画像の下にテキストを回り込ませるための余白 */
		width: 36%; /* 画像の幅、適宜調整してください */
	}

	.recruit .voice2 .img {
		float: left;
		margin-right: 20px; /* 画像とテキストの間の余白 */
		margin-bottom: 20px; /* 画像の下にテキストを回り込ませるための余白 */
		width: 36%; /* 画像の幅、適宜調整してください */
	}

	.recruit .box5 {
		background-image: none; /* 背景画像を設定 */
	}

	.recruit .box5 p{
		font-size: clamp(12px, 3vw, 40px);
		padding:0% 0 0 8%;
	}


	.bluebox {
		position: relative;
		width:80%;
		padding-top:95%;
		margin:0 auto 0 11%;
		background-image: url('../../img/recruit/box3bgttl_sp.png');
	}

	.bluebox ul {
		position: absolute;
		text-align: left;
		top: 13%;
		left: 4%;
		width: 90%;
		display: flex;
		flex-direction: column; /* アイテムを縦方向に配置 */
		justify-content: flex-start; /* アイテムを左揃えに */
		margin: auto; /* ulを中央寄せ */
	}

	.bluebox li {
		flex: 0 0 100%; /* 各アイテムの幅を100%に設定 */
		margin: 0 0 2.3vw 0; /* アイテム間のマージンを調整 */
		padding-left: 10%; /* アイコンのためのパディング */
		background-image: url('../../img/recruit/box3icon.png');
		background-repeat: no-repeat;
		background-position: 0px center;
		background-size: 7.5%;
		box-sizing: border-box;
		position: relative;
		font-size: clamp(10px, 3vw, 40px);
	}





}


/*------------------------------------------------------------
.job
------------------------------------------------------------*/
.job{
	margin-bottom: 5%;
	position: relative;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	height: auto; /* 高さを自動に設定 */
	background-image: url('../../img/job/bg.jpg');
	overflow: hidden;
}
.jobiconbg {
	position: absolute;
	top: 0; /* トップからの位置 */
	left: 0; /* 左からの位置 */
	width: 100%; /* 親要素の幅に合わせる */
	height: 100%; /* 親要素の高さに合わせる */
}

.jobiconbg img {
	position: absolute;
}
.job img.c01 {
	top:0;
	left: 0;
	width: ;
	z-index: 0;
}
.job img.c02 {
	top:0;
	left: 0;
	width: ;
	z-index: 6;
}
@media (max-width: 750px) {
	.job img.c01 {
		top:;
		left: 0;
		width: ;
		z-index: 0;
	}
	.job img.c02 {
		top:;
		left: 0;
		width: ;
		z-index: 6;
	}
}



.job .section1 {
	position: relative;
	width: 100%;
	padding-top:25%;
	color: #fff;
	margin-bottom: 2%;
	z-index: 5; 
}
.job .section1 h2 {
	width: 45%;
	margin: auto;
}
.job .section1 .box {
	position:absolute;
	top:28%;
	left: 0%;
	right: 0%;
	text-align: center;
	width: 100%;
	height: 100%;
}

.job .section2{
	position:relative;
	width: 80%;
	margin:auto;
	text-align: left;
	color: #585858;
	z-index: 5; 
} 

.job .section2 h3 {
	margin-bottom: 1rem;
	background-color: #00BEF4;
	color: #fff;
	border-radius: 10px;
	padding:0.7% 3%;
	font-size: clamp(8px, 2.5vw, 40px);  
	letter-spacing: .5rem;
}
.job .section2 p , .job .section2 ul{
	margin-bottom: 1rem;
	color: #585858;
	font-weight: bold;
	padding: 2% 1%;
	font-size: clamp(12px, 2.0vw, 30px);  
}

.job .section2 li{
	background-repeat: no-repeat; /* 背景画像を繰り返さない */
	background-position: center left; /* 背景画像を左上に配置 */
	padding-left: 3.5%; /* テキストとアイコンの間にスペースを設ける */
	background-size: 3%; /* アイコンのサイズを指定 */
	margin-bottom: 2%; /* リスト項目間の余白 */
	min-height: 5%; /* アイコンが収まるように最小高さを指定 */
	display: flex; /* Flexboxを使用 */
	align-items: center; /* アイコンとテキストを垂直方向の中心に揃える */
}
.job .section2 .time {
	display: inline-block; /* インラインブロック要素として扱う */
	width:20%; /* 十分な幅を指定 */
	text-align: left; /* テキストを左揃えにする */
	margin-right: 1%;
}
.job .section2 li:nth-child(1){
	background-image: url('../../img/job/list1.png'); /* アイコンの画像パスを指定 */
}
.job .section2 li:nth-child(2){
	background-image: url('../../img/job/list2.png'); /* アイコンの画像パスを指定 */
}
.job .section2 li:nth-child(3){
	background-image: url('../../img/job/list3.png'); /* アイコンの画像パスを指定 */
}


.job .section2 p span {
	color: #009AF4;
}



.job .box2 p {
	margin:0 10%;
	font-size: 140%;
}
.job table {
	margin-bottom: 1rem;
	background-color:#fff;
	font-size: clamp(8px, 1.5vw, 30px); /* 最小10px、ビューポート幅の1.2%、最大20px */
	font-weight: bold;
	border-collapse: collapse; /* ボーダーを1つにまとめる */
	width: 100%; /* テーブルの幅を指定 */
	z-index: 5; 
}
.job th,.job td {
	border: 1px solid #585858; /* セルのボーダー設定 */
	padding: 1% 2% .5% 2%;  /* セル内のパディング */
	line-height: 150%;
}
.job th {
	background-color: #00BEF4; /* ヘッダーの背景色（必要に応じて変更） */
	color: #fff;

}
.job td.thd {
	width: 18%;
}
.job td {

}
.job th span{
	font-size: 70%;
}
.job tr td:nth-child(1){
	color: #009AF4;
}

.flex-container {
	display: flex;
	align-items: center; /* 子要素を上下中央に配置 */
}


.job .section2 .box2 {
	position: relative;
	width:100%;
	padding-top:30%;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url('../../img/job/c_bg.png');
	display: flex; /* Flexboxを有効化 */
	justify-content: flex-end; /* 子要素をコンテナの終端（右側）に寄せる */
}

.job .section2 .box2 .content {
	position:absolute;
	text-align: left;
	top:27%;
	left: 33%;
	width: 67%;
	/* 必要に応じて追加のスタイリングをここに追加 */
}

.job .section2 .box2 h4 {
	color: #FFFF00;
	padding-bottom: 2%;
	width: 90%;
}
.job .section2 .box2 dl {
	display: flex; /* Flexbox を有効化 */
	flex-wrap: wrap; /* コンテンツが複数行になる場合に備えて折り返しを許可 */
	font-size: clamp(8px, 1.7vw, 30px);  
}

.job .section2 .box2 dt {
	display: flex; /* Flexboxを有効化 */
	align-items: center; /* 縦方向の中央揃え */
	justify-content: center; /* 横方向の中央揃え（テキストが複数行になる場合に有用） */
	flex-direction: column; /* 子要素を縦方向に並べる */
	text-align: center;
	vertical-align: middle;
	flex-basis: 4%;
	max-width: 5%;
	background-color: #fff;
	color: #009AF4;
	font-weight: bold;
	padding: 2% 0;
	writing-mode: vertical-rl;
}


.job .section2 .box2 dd {
	flex-basis: 95%; /* 残りの幅を占める */
	max-width: 95%; /* 最大幅も90%に設定 */
	margin-left: 0; /* Flexboxを使用する場合は不要なスペースを削除 */
	font-weight: bold;
	color: #fff; 
	line-height: 150%;
}
.job .section2 .box2 dd span {
	padding: 0 2%;
}





@media (max-width: 750px) {
	.job .section2 h3 {
		font-size: clamp(14px, 1.7vw, 30px); 
		letter-spacing: .2rem;
	}
	.job .section2 .box2 h4 {
		padding-bottom: .5vw;
	}
	.job .section2 .box2 dl {
		font-size: clamp(8px, 1.7vw, 30px); 
	}
	.job .section2 .box2 dt {
		padding: 0;
	}
	.job .section2 .box2 dd {
		line-height: 130%;
	}
	.job .section2 .box2 dd span {
		padding: 0 0 0 2%;
	}

	.job table {
		margin-bottom: 1rem;
		background-color:#fff;
		font-weight: bold;
		border-collapse: collapse; /* ボーダーを1つにまとめる */
		width: 100%; /* テーブルの幅を指定 */
	}
	.job td.thd {
		width: 17vw;
	}
	.job .section2 .time {
		width:22vw; /* 十分な幅を指定 */
	}
}
@media (max-width: 400px) {
	.job .section2 h3 {
		font-size: clamp(14px, 1.7vw, 30px); 
		letter-spacing: .2rem;
	}
	.job .section2 .box2 h4 {
		padding-bottom: 0;
	}
	.job .section2 .box2 dl {
		font-size: clamp(7px, 1vw, 30px); 
	}
	.job .section2 .box2 dd {
		line-height: 130%;
	}
	.job .section2 p , .job .section2 ul{
		padding: 2% 1%;
		font-size: clamp(11px, 1.5vw, 30px);  
	}

	.job .section2 .time {
		width:35%; /* 十分な幅を指定 */
	}

}
.nyusha{font-size:2rem; text-align: center; color: #5D5858; font-weight: bold;margin-bottom: 1rem;}
.nyusha2{font-size:1rem; text-align: center; color: #5D5858; margin-bottom:0.5rem;font-weight: bold;}

@media (max-width: 750px) {
	.nyusha{
font-size:1rem
	}
		.nyusha2{
font-size:0.5rem
	}
}

.cellRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.cellMain{
  flex: 0 0 auto;     /* 左は内容幅 */
  min-width: 220px;   /* お好みで調整 */
}

.cellNote{
  flex: 1 1 auto;     /* 右は残り幅 */
  display:block;      /* spanをブロック化 */
}

/* スマホは縦並び */
@media (max-width: 600px){
  .cellRow{
    flex-direction: column;
    gap:10px;
  }
  .cellMain{
    min-width: 0;
  }
}