@charset "UTF-8";
/* CSS Document */

#main_contents{
	padding: 0 20px;
	box-sizing: border-box;
	max-width: 1180px;
}

.resume_col_wrap{
	display: flex;
	flex-wrap: wrap;
/*	justify-content: center;*/
}

/*--------------------------------------------------------------
1.0 resume
--------------------------------------------------------------*/
.resume_main_col {
	width: 70%;
	box-sizing: border-box;
	margin-right: 4%;
}

.resume_side_col{
	width: 26%;
	box-sizing: border-box;
}
/*--------------------------------------------------------------
1.1 resume top
--------------------------------------------------------------*/
.resume-list li{
	padding:10px;
}
.resume-list li:hover{
	box-shadow: 0px 0px 6px rgb(0 0 0 / 25%);
}

.resume-list li a:hover{
	text-decoration: none;
}

.resume-list li h3{
	margin-bottom: 10px;
	font-size: 24px;
	font-size:2.4rem;
    	position: relative;
    	padding-left: 42px;
    	border-bottom: 1px solid #009FE7;
    	padding-top: 5px;
    	padding-bottom: 5px;
}

.resume-list li h3:before{
	content: "";
	background: url(../com/principle/image/message-pen.svg);
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.resume-list li .resume-des{
	color:#555;
}

.resume-list li .resume-more{
    	padding: 0;
    	margin-top: 10px;
    	color: #009FE7;
    	text-align: right;
}

.resume-list li .resume-more::after{
    	content: '\e84e';
    	font-family: "fontello";
    	display: inline-block;
    	text-decoration: none;
    	width: 1em;
    	margin-right: 0.2em;
   	text-align: center;
    	line-height: 1em;
}

.resume_main_col .resume-entry .resume-content{
	font-size: 16px;
	font-size:1.6rem;
	margin-bottom: 30px;
}

.resume_main_col .resume-entry .return,.resume_main_col .resume .return{
	width: 200px;
	margin: 0 auto;
	border: 1px solid #ccc;
}

.resume_main_col .resume-entry .return a,.resume_main_col .resume .return a{
	background: #f2f2f2;
	padding: 8px 0;
	display: block;
	text-align: center;
}

.resume_main_col .resume-entry .return a:hover,.resume_main_col .resume .return a:hover{
	background: #777777;
	color:#fff;
	text-decoration: none;
}

.resume_main_col .resume-entry .return a:after,.resume_main_col .resume .return a:after{
	content:'\f105';
	font-family: "fontello";
	display: inline-block;
	text-decoration: none;
	width: 1em;
	text-align: center;
	line-height: 1em;
	font-size: 16px;
	font-size:1.6rem;
	color:#777777;
}

.resume-entry .article_list{
	margin: 100px 0 50px;
}

.resume-entry .article_list p{
	color: #fff;
	font-size: 12px;
	font-size:1.2rem;
	background: #777;
	display: inline-block;
	padding: 3px 10px;
	margin-bottom: 8px;
}

.resume-entry .article_list a{
	display: block;
	padding: 10px;
	position: relative;
}

.resume-entry .article_list .prev{
	width: 50%;
	float: left;
	box-sizing: border-box;
	position: relative;
	border-right: 1px solid #ddd;
}

.resume-entry .article_list .prev h4,
.resume-entry .article_list .prev p{
	margin-left: 30px;
	font-weight: 500;
}

.resume-entry .article_list .prev a:before{
	content:'\f104';
  font-family: "fontello";
  text-decoration: none;
  width: 1em;
  margin-right: 30px;
  text-align: center;
  line-height: 1em;
	color:#999;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-size: 30px;
	font-size:3.0rem;
}

.resume-entry .article_list .next{
	width: 50%;
	float: right;
	text-align: right;
	box-sizing: border-box;
	position: relative;
}

.resume-entry .article_list .next a:before{
	content:'\f105';
  font-family: "fontello";
  text-decoration: none;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  line-height: 1em;
	color:#999;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	font-size: 30px;
	font-size:3.0rem;
}

.resume-entry .article_list .next h4,
.resume-entry .article_list .next p{
	margin-right: 30px;
	font-weight: 500;
}

.resume-entry .resume-content .image_area{
    max-width: 798px;
    width: 100%;
    display: -ms-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    box-sizing: content-box;
    justify-content: space-between;
}

.resume-entry .resume-content .image_area li {
    width: 48%;
    margin: 1%;
} 



/*--------------------------------------------------------------
1.2 resume main
--------------------------------------------------------------*/
.resume_main_col h2{
	font-weight: 700;
	border-left: 10px solid #6AD2FF;
	padding-left: 14px;
	margin-bottom: 25px;
	line-height: 1.5;
}

.resume_main_col h3{
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 15px;
}

.resume_main_col .page_nav{
	text-align: center;
	font-size: 0;
}

.resume_main_col .page_nav span{
	display: inline-block;
}

.resume_main_col .page_nav span.current_page{
	background: #2BBFFF;
	color: #fff;
	border-radius: 5px;
	padding: .3em 1em;
	display: inline-block;
	margin: 0 2px;
	font-size: 14px;
	font-size: 1.4rem;
}

.resume_main_col .page_nav a.link_page,
.resume_main_col .page_nav a.link_next,
.resume_main_col .page_nav a.link_before{
	background: #dddddd;
	color: #333333;
	border-radius: 5px;
	padding: .3em 1em;
	display: inline-block;
	font-size: 14px;
	font-size: 1.4rem;
	margin: 0 2px;
}

.resume_main_col .page_nav a.link_page:hover,
.resume_main_col .page_nav a.link_next:hover,
.resume_main_col .page_nav a.link_before:hover{
	background: #2BBFFF;
	color: #fff;
	text-decoration: none;
}

.resume_main_col .year_nav{
	margin: 50px 0 30px;
}

.resume_main_col .year_nav a{
	display: block;
	padding: 10px;
	position: relative;
	font-size: 30px;
	font-size: 3.0rem;
	color: #999;
	font-weight: 700;
}

.resume_main_col .year_nav .next{
	width: 50%;
	float: left;
	box-sizing: border-box;
	position: relative;
	border-right: 1px solid #ddd;
	font-weight: 500;
	padding-left: 24px;
}

.resume_main_col .year_nav .next a:before{
	content:'\f104';
	font-family: "fontello";
	text-decoration: none;
	width: 1em;
	text-align: center;
	line-height: 1em;
	color:#999;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-size: 24px;
	font-size: 2.4rem;
	margin-left: -24px;
}

.resume_main_col .year_nav .prev{
	width: 50%;
	float: right;
	text-align: right;
	box-sizing: border-box;
	position: relative;
	font-weight: 500;
	padding-right: 24px;
}

.resume_main_col .year_nav .prev a:before{
	content:'\f105';
	font-family: "fontello";
	text-decoration: none;
	width: 1em;
	text-align: center;
	line-height: 1em;
	color:#999;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	font-size: 24px;
	font-size: 2.4rem;
	margin-right: -24px;
}


/*------------------------------
1.3 resume side
------------------------------*/

.resume_side_col ul a:hover{
	color: #fff;
	background: #6AD2FF;
	text-decoration: none;
}

/*.resume_side_col ul a:before {
	content: '\e84e';
	font-family: "fontello";
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	line-height: 1em;
	color: #999;
	position: absolute;
	left: calc(100% - 17px);
	top: 50%;
	transform: translateY(-50%);
}
*/

.resume_side_col ul a:hover:before{
	color: #fff;
}

.resume_side_col .article-nav h3{
	font-size: 20px;
	font-size:2.0rem;
	border-bottom: 2px solid #cccccc;
	line-height: 1.0;
	padding-bottom: 10px;
}

.resume_side_col .article-nav ul{
	border-bottom: 1px solid #eee;
	margin-bottom: 50px;
}

.resume_side_col .article-nav li a{
	display: block;
	padding: 10px 5px;
	position: relative;
	font-size: 16px;
	font-size:1.6rem;
}

.resume_side_col .article-nav li a:before{
	position: absolute;
	left: calc(100% - 17px);
	top: 50%;
	transform: translateY(-50%);
}

.resume_side_col .article-nav li a:after{
	content: none;
}

/*------------------------------
1.4 resume other
------------------------------*/
.resume_main_col .return{
	width: 200px;
	margin: 0 auto;
	border: 1px solid #ccc;
	margin-top:20px;
}

.resume_main_col .return a{
	background: #f2f2f2;
	padding: 8px 0;
	display: block;
	text-align: center;
}

.resume_main_col .return a:hover{
	background: #777777;
	color:#fff;
	text-decoration: none;
}

.resume_main_col .return a:after{
	content:'\f105';
	font-family: "fontello";
	display: inline-block;
	text-decoration: none;
	width: 1em;
	text-align: center;
	line-height: 1em;
	font-size: 16px;
	font-size: 1.6rem;
	color:#777777;
}

.resume_main_col .article_list{
	margin: 100px 0 50px;
}

.resume_main_col .article_list p{
	color: #fff;
	font-size: 12px;
	font-size: 1.2rem;
	background: #777;
	display: inline-block;
	padding: 3px 10px;
	margin-bottom: 8px;
}

.resume_main_col .article_list a{
	display: block;
	padding: 10px;
	position: relative;
}

.resume_main_col .article_list .prev{
	width: 50%;
	float: left;
	box-sizing: border-box;
	position: relative;
	border-right: 1px solid #ddd;
}

.resume_main_col .article_list .prev h4,
.resume_main_col .article_list .prev p{
	margin-left: 30px;
	font-weight: 500;
}

.resume_main_col .article_list .prev a:before{
	content:'\f104';
  font-family: "fontello";
  text-decoration: none;
  width: 1em;
  margin-right: 30px;
  text-align: center;
  line-height: 1em;
	color:#999;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-size: 30px;
	font-size: 3.0rem;
}

.resume_main_col .article_list .next{
	width: 50%;
	float: right;
	text-align: right;
	box-sizing: border-box;
	position: relative;
}

.resume_main_col .article_list .next a:before{
	content:'\f105';
  font-family: "fontello";
  text-decoration: none;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  line-height: 1em;
	color:#999;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	font-size: 30px;
	font-size: 3.0rem;
}

.resume_main_col .article_list .next h4,
.resume_main_col .article_list .next p{
	margin-right: 30px;
	font-weight: 500;
}