@charset "UTF-8";

:root{
 --dmk--maincolor: #1d2088;	/* DMKメインカラー（紺）： #1d2088 */
 --dmk--subcolor: #0883cd;	/* DMKアクセントカラー（水色）： #0080cc */
  --radius: 12px;
  --border: 1px solid #d8e3f2;
  --card-bg: #fff;
  --q-bg: #f8fbff;
  --q-color: #1a3e78;
  --text-color: #192c55;
  --muted: #7f9bbf;
  --shadow: 0 4px 14px rgba(26,62,120,.08);
  --transition: 240ms ease;
  --maxw: 920px;
  --card-radius: 22px;
  --card-shadow: 0 18px 40px rgba(0,0,0,0.12);

  --text-main: #1a3e78;
  --text-muted: #6a8c9e;

  --accent: #0883cd;           /* ラベルのアクセント（濃い線にも使用） */
  --line-strong: #0883cd;      /* 項目名用（濃い） */
  --line-weak: #cfe0ef;        /* 詳細用（薄い） */

  --maxw: 920px;
  --pad-x: 28px;
  --pad-y: 28px;
}


.contents{
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url('../images/bg.png');
	width:100%;
	background-repeat:repeat-y;
	background-size: contain;
}
/*===============
 求める人物像
===============*/
.section__header{	
	display: flex;
	flex-direction: column;
	margin-left:auto;
	width:90%;
}
.section__eyebrow{
	color: var(--dmk--subcolor);
	font-weight: 800;
	letter-spacing: .06em;
	font-size: clamp(12px, 2.6vw, 14px);
}
.section__title{
	font-size: clamp(20px, 4vw, 32px);
	font-weight: 800;
	margin: 0;
}

#sec-idealPerson{
	width:90%;
	margin:0 auto;
}
	

.idealPerson {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	margin:0 auto;
	flex-wrap: wrap;
	width:80%;
}

.idealPerson .card{
	width:40%;
	margin:20px;
}

.idealPerson .card h3{
	text-align: left;
	margin:0;
	padding:0;
	color:var(--dmk--subcolor);
}

.card ul{
	padding-left:0;
	
}

.card li{
	position: relative;
	padding-left: 25px;
	list-style-type: none;
	margin-bottom:10px;
}

 .card li:before {
	content: "";
	position: absolute;
	top: .35em;
	left: 6px;
	-webkit-transform: rotate(50deg);
	-ms-transform: rotate(50deg);
	transform: rotate(50deg);
	width: 3px;
	height: 7px;
	border-right: 2px solid var(--dmk--subcolor);
	border-bottom: 2px solid var(--dmk--subcolor);
}
 
.card li:after {
	content: "";
	position: absolute;
	top: .2em;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid var(--dmk--subcolor);
	border-radius: 2px;
}

/*===============
 採用メッセージ
===============*/
.mainMsg{
	display:flex;
	flex-direction: column;
	text-align:center;
	line-height: 2.0;
	letter-spacing: .06em;
	width:100%;
	
}

.mainMsg h2{
	color:var(--dmk--subcolor);
	
}
/*===============
 代表メッセージ
===============*/
#sec-topMessage{
	width: 90%;
	margin:0 auto;
}

@media screen and (max-width: 480px) {
	
	.contents{
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url('../images/bg_phone.png');
	}
	
	/* 採用メインメッセージ */
	.mainMsg {
		width:90%;
		margin:0 auto 50px;
	
	}
	
	.mainMsg h2{
		margin:0 auto 30px;
	}
	
	.mainMsg p{
		margin:0 auto;
		text-align: left;
	}

	.idealPerson {
		width:90%;
	}

	.idealPerson .card{
		width:100%;
	}
	
	/* 求める人物像 */
	.section__header{	
	  display: flex;
	  flex-direction: column;
	  margin-left:auto;
	  width:90%;
	}
	
	.section__eyebrow{
	  color: var(--dmk--subcolor);
	  font-weight: 800;
	  letter-spacing: .06em;
	  font-size: clamp(12px, 2.6vw, 14px);
	}
	
	.section__title{
	  font-size: clamp(20px, 4vw, 32px);
	  font-weight: 800;
	  margin: 0;
	}

}