@charset "UTF-8";
/*---------------------------------------------------
common
---------------------------------------------------*/
div.topConts {
    position: relative;
    padding: 0;
    background: #ECEAE7;
    width: 100%;
}
div.topConts div.cntTtlSet {
    width: 100%;
    text-align: center;
    margin: 40px auto;
    position: relative;
}
div.topConts div.cntTtlSet::after{
    line-height: 1em;
    content: "Message";
    display: block;
    position: absolute;
    left: 102%;
    top: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: 1;
}

div.topConts div.cntTtlSet h1 {
     width: 90%;
    margin: 0 auto 10px;
}
div.topConts div.cntTtlSet p {
     width: 90%;
    margin: 0 auto;
    text-align: left;
}

@media screen and (min-width:641px) {
    div.topConts div.cntTtlSet p {
    text-align: center;
}
}

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

@media screen and (min-width:1281px) {
    div.topConts div.cntTtlSet {
        margin: 80px auto;
    }
}

/* ==================================================
Body
================================================== */

.description {
    margin-bottom: 40px !important;
}


#contsArea .sub_title {
  font-size: 4.5vw;
  color: #0068AF;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}

#choice {
	width:100%;
	max-width:842px;
	margin:18px auto;
	padding:20px;
	border-radius:12px;
	background-color:#dedada;
}

#choice ul {
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

#choice li {
	margin:6px;
	padding:8px 40px;
	border-radius:20px;
	background-color:#fff;
  color: #0068AF;
  font-size: 14px;
  font-weight: 700;
	letter-spacing: 0.8px;
  text-align: center;
}

#choice li.is-active {
	background-color:#0068AF;
  color: #fff;
}

#choice li:Hover {
	background-color:#0068AF;
  color: #fff;
	cursor:pointer;
}


.message-list {
	width: 1240px;
	display: flex;
	margin: 40px auto;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.message-list .column-block {
	width:386px;
	margin:10px;
	background-color:#fff;
	border-radius:16px;
	position:relative;
}

.message-list .column-block .arrow_btn {
  width: 40px;
	position:absolute;
	bottom:16px;
	right:18px;
}

.message-list .column-block .figure-wrap {
	padding:16px 8px;
}


.message-list .column-block .figure-wrap .figure {
	border:none !important;
}

.message-list .column-block .figure {
	width:158px;
	display:inline-block;
}

.message-list .column-block .previous_job {
	width:200px;
	margin-top: 10px;
	margin-left: 5px;
	display:inline-block;
	vertical-align: top;
}

.message-list .column-block .previous_job .initial_box {
	width:100%;
	display:inline-block;
	vertical-align: middle;
}

.message-list .column-block .previous_job .initial_box .initial_name.man::before {
	margin: 0px 0 -8px 0;
	content: "";
  display: inline-block;
  aspect-ratio: 1 / 1;
  min-width: 0;
  width: 40px;
  text-indent: 0;
  scale: 1;
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  margin-right: 6px;
  background: rgba(0, 0, 0, 0) url(/assets/message/img/man.svg) no-repeat;
}

.message-list .column-block .previous_job .initial_box .initial_name.woman::before {
	margin: 0px 0 -8px 0;
	content: "";
  display: inline-block;
  aspect-ratio: 1 / 1;
  min-width: 0;
  width: 40px;
  text-indent: 0;
  scale: 1;
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  margin-right: 6px;
  background: rgba(0, 0, 0, 0) url(/assets/message/img/woman.svg) no-repeat;
}



.message-list .column-block .previous_job .initial_box .initial_name {
	margin: 0 0 0 6px;
	font-size:24px;
  font-weight: 700;
	color:#0068AF;
}

.message-list .column-block .previous_job .initial_box .initial_name span{
	font-size:14px;
  font-weight: 700;
	color:#0068AF;
}


.message-list .column-block .previous_job .initial_box .ttl-list {
	margin:6px 8px 6px 0;
	padding:2px 4px;
	border-top:solid 1px #707070;
	border-bottom:solid 1px #707070;
}

.message-list .column-block .previous_job .initial_box .ttl-list li {
	padding:6px 0 8px;
	letter-spacing: 0.8px;
	font-size: 12px;
	line-height: 1.2;
}

.message-list .column-block .previous_job .initial_box .ttl-list li:first-child {
	border-bottom:dotted 2px #707070;
}

.message-list .column-block .comment-wrap {
	width:354px;
	margin:0 auto;
}


.message-list .column-block .comment-wrap .previous_occupation {
	width:100%;
	padding:6px 20px 6px 32px;
	background-color:#E5F3FF;
	border-radius:16px;
	color:#0068AF;
}

.message-list .column-block .comment-wrap .previous_occupation::before {
	content: "前職の仕事：";
  display: inline-block;
  min-width: 0;
  width: 75px;
	font-size: 12px;
	color:#0068AF;
}

.message-list .column-block .comment-wrap .comment {
	margin:15px;
	font-size:18px;
  font-weight: 700;
	color:#0068AF;
  line-height: 1.7;
	letter-spacing: 1px;
}


/* -----------pop up---------------- */
.popup-block {
	width:100%;
	max-width:620px;
	margin:14px auto;
	padding: 36px;
	background-color:#fff;
	border-radius:16px;
	position:relative;
	text-align:left;
}

.popup-block:Hover {
	cursor:pointer;
}

.popup-block .close_btn {
  width: 136px;
	position:absolute;
	top:16px;
	right:18px;
}

.popup-block .figure-wrap {
	margin-bottom:20px;
	padding:0;
}


.popup-block .figure-wrap .figure {
	border:none !important;
}

.popup-block .figure {
	width:158px;
	display:inline-block;
}

.popup-block .previous_job {
	width:220px;
	margin-left: 20px;
	display:inline-block;
	vertical-align: bottom;
}

.popup-block .previous_job .initial_box {
	width:100%;
	display:inline-block;
	vertical-align: middle;
}

.popup-block .previous_job .initial_box .initial_name.man::before {
	margin: 0px 0 -8px 0;
	content: "";
  display: inline-block;
  aspect-ratio: 1 / 1;
  min-width: 0;
  width: 40px;
  text-indent: 0;
  scale: 1;
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  margin-right: 6px;
  background: rgba(0, 0, 0, 0) url(/assets/message/img/man.svg) no-repeat;
}

.popup-block .previous_job .initial_box .initial_name.woman::before {
	margin: 0px 0 -8px 0;
	content: "";
  display: inline-block;
  aspect-ratio: 1 / 1;
  min-width: 0;
  width: 40px;
  text-indent: 0;
  scale: 1;
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  margin-right: 6px;
  background: rgba(0, 0, 0, 0) url(/assets/message/img/woman.svg) no-repeat;
}



.popup-block .previous_job .initial_box .initial_name {
	margin: 0 0 0 6px;
	font-size:24px;
  font-weight: 700;
	color:#0068AF;
}

.popup-block .previous_job .initial_box .initial_name span{
	font-size:14px;
  font-weight: 700;
	color:#0068AF;
}


.popup-block .previous_job .initial_box .ttl-list {
	margin:6px 8px 0 0;
	padding:2px 4px;
	border-top:solid 1px #707070;
	border-bottom:solid 1px #707070;
}

.popup-block .previous_job .initial_box .ttl-list li {
	padding:6px 0 8px;
	letter-spacing: 0.8px;
	font-size: 12px;
	line-height: 1.2;
}

.popup-block .previous_job .initial_box .ttl-list li:first-child {
	border-bottom:dotted 2px #707070;
}

.popup-block .comment-wrap {
	width:100%;
	margin:0 auto;
}

.popup-block .comment-wrap .occupation {
	font-size:12px;
	color:#0068AF;
  margin-bottom: 2px;
}

.popup-block .comment-wrap .arrow {
	width:41px;
	margin:5px auto -12px;
}

.popup-block .comment-wrap .previous_occupation {
	width:100%;
	padding:10px 20px 10px 32px;
	background-color:#D7EBFD;
	color:#0068AF;
	border-top:solid 1px #0068AF;
	border-bottom:solid 1px #0068AF;
	font-size:18px;
	font-weight:700;
	text-align:center;
}

.popup-block .comment-wrap .current_occupation {
	width:100%;
	padding:10px 20px 10px 32px;
	background-color:#FDDDDF;
	color:#0068AF;
	border-top:solid 1px #0068AF;
	border-bottom:solid 1px #0068AF;
	font-size:18px;
	font-weight:700;
	text-align:center;
}

.popup-block .comment-wrap .comment {
	margin:15px;
	font-size:22px;
  font-weight: 700;
	color:#0068AF;
  line-height: 1.8;
}

.popup-block .comment-wrap .comment-detail {
	margin:15px;
	font-size:16px;
	color:#3E3A39;
  line-height: 1.8;
}




@media screen and (max-width:768px) {
	#choice {
	    width: 96%;
	    margin: 18px auto;
	    padding: 10px 4px;
	    border-radius: 12px;
	    background-color: #dedada;
	}
	#choice li {
	    margin: 6px;
	    padding: 8px 10px;
	    border-radius: 20px;
	    background-color: #fff;
	    color: #0068AF;
	    font-size: 14px;
	    font-weight: 700;
	    text-align: center;
	}

	.message-list {
		width:100%;
		display: flex;
		margin: 40px auto;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.message-list .column-block {
		width:100%;
		margin:14px 7px;
		background-color:#fff;
		border-radius:16px;
		position:relative;
	}

	.message-list .column-block .comment-wrap {
	    width: 100%;
	    margin: 0 auto;
	}

	.message-list .column-block .figure {
		width:135px;
		display:inline-block;
	}

	.message-list .column-block .previous_job {
		width:200px;
		margin-top: 10px;
		margin-left: 5px;
		display:inline-block;
		vertical-align: top;
	}

	.message-list .column-block .comment-wrap .previous_occupation {
		width:93%;
		margin:0 auto;
		padding:6px 20px 6px 32px;
		background-color:#E5F3FF;
		border-radius:10px;
		color:#0068AF;
		font-size: 14px;
	}

	.message-list .column-block .comment-wrap .previous_occupation::before {
		width: 72px;
	}


	.popup-block {
		width:100%;
		margin:14px auto;
		padding: 12px;
		background-color:#fff;
		border-radius:16px;
		position:relative;
		text-align:left;
	}

	.popup-block .close_btn {
	  width: 136px;
		margin:10px auto;
		position: initial;
	}

	.popup-block .figure {
		width:40%;
		display:inline-block;
	}

	.popup-block .previous_job {
		width:56%;
		margin-left: 10px;
		display:inline-block;
		vertical-align: bottom;
	}

	.popup-block .previous_job .initial_box .initial_name {
		font-size:22px;
	}

	.popup-block .comment-wrap .comment, .popup-block .comment-wrap .comment-detail {
		margin: 15px 0;
	}

	.remodal {
		padding: 20px !important;
	}

	#choice li {
	  font-size: 12px;
	}


}

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


.is-hide {
  display: none;
}