/* ==========================================================================
   About Styles
   ========================================================================== */

.flL { float: left;}
.flR { float: right;}

.clrFix { /zoom: 1;}
.clrFix:after {
content: '';
display: block;
clear: both;
line-height: 0;
font-size: 0.1em;
}

.textright {
text-align:right;
}

/* Index Styles
   -------------------------------------------------------------------------- */
#main .index header {
	margin: 0 0 10px 0;
}

#main .index header p {
	margin: 20px 0 0 0;
}

#main .index .category-menu section h1           { border-left: solid 5px #339999;}
#main .index .category-menu section + section h1 { border-left: solid 5px #466CC1;}
#main .index .category-menu section + section h1.h1ora { border-left: solid 5px #E79701;}
#main .index .category-menu section + section h1.h1pink { border-left: solid 5px #d64a75;}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

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

	#sub {
		display: none;
	}

}

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

	#content {
    padding: 30px 0 5px;
	}

	#main header {
    margin: 0 0 0 0;
	}

	#sub {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}

	#sub p img {
		width: 290px;
	}

	#sub ul {
	}

}


/* Report Styles
   -------------------------------------------------------------------------- */
#main .report.box .box-bottom > header h1 {
	border-left: solid 5px #339999;
}
#main .report.archive.box .box-bottom > header h1 {
	font-size: 1.000em;
	line-height: 1.6;
	font-weight: bold;
	padding: 12px;
	background: #F4F7F7;
	border: #DDD solid 1px;
}
#main .report h2 {
	font-size: 1.214em;
	font-weight: bold;
}
#main .report.archive h2 {
	font-size: 1em;
	margin-bottom: 40px;
}
#main .report h2 + p {
	font-size: 0.857em;
}

/* ------------------------------ report-list */
#main .report .report-list {
	margin: 40px 0 10px 0;
	border-top: #DDD solid 1px;
}
#main .report .report-list section {
	overflow: hidden;
	/zoom: 1;
	border-bottom: #DDD solid 1px;
	padding: 15px 0;
}
#main .report .report-list section .thumb {
	float: left;
	margin: 0 20px 0 0;
}
#main .report .report-list section .term,
#main .report .report-list section h1 {
	overflow: hidden;
	/zoom: 1;
}
#main .report .report-list section .term {
	padding: 0 0 0 16px;
	background: url(/eco/career/story/results/img/icn_circle_report.png) 0 center no-repeat;
}

/* ------------------------------ report-archive */
#main .report .report-archive section {
	overflow: hidden;
	/zoom: 1;
	margin: -40px 0 10px 0;
	padding: 0 0 30px 0;
	border-bottom: #DDD solid 1px;
}
#main .report .report-archive h1 {
	font-weight: bold;
	margin: 40px 0 0 0;
	padding: 0 0 0 16px;
	background: url(/eco/career/story/results/img/icn_circle_report.png) 0 center no-repeat;
}

#main .report .report-archive dl {
	margin: 25px 0 0 0;
	display: block;
	overflow: hidden;
	/zoom: 1;
}
#main .report .report-archive dl dt {
	display: block;
	float: left;
}
#main .report .report-archive dl dd {
	display: block;
	overflow: hidden;
	/zoom: 1;
}
#main .report .report-archive p {
	margin: 25px 0 0 0;
}
#main .report .report-archive .flL,
#main .report .report-archive .flR {
	width: 320px;
}
#main .report .report-archive .image {
	margin: 20px 0 0 0;
	text-align: center;
}
#main .report .report-archive .images {
	display: block;
	overflow: hidden;
	/zoom: 1;
	margin: 25px 0 -10px -10px;
}
#main .report .report-archive .images > img {
	float: left;
	margin: 0 0 10px 10px;
}
#main .report .report-archive .btn {
	margin: 30px 0 0 0;
	text-align: center;
}
#main .report .report-archive .btn a img {
	background: url(/eco/career/story/common/img/bg_dot01.png) 0 0 repeat;
	padding: 10px;
}



/* Voice Styles
   -------------------------------------------------------------------------- */
#main .voice.box .box-bottom > header h1 {
	border-left: solid 5px #466CC1;
}

#main .voice .image {
	float: right;
	margin: 0 0 10px 20px;
}

#main .voice h2 {
	font-size: 1.214em;
	font-weight: bold;
}

#main .voice section {
	margin: 40px 0 0 0;
	padding: 0 0 34px 0;
	border-bottom: 3px dotted #DDD;
}

#main .voice section.mp0 {
padding-bottom:0;
}

#main .voice section h1 {
	font-size: 1.000em;
	font-weight: bold;
	padding: 10px;
	background: #F4F7F7;
	border: #DDD solid 1px;
}

#main .voice section h1 + p {
	margin: 20px 0 15px 0;
	padding: 0 0 15px 0;
}

#main .voice section h2 {
    font-size: 1.000em;
    font-weight: bold;
    margin: 40px 0 0 0;
    padding: 0 0 0 16px;
    background: url(/eco/career/story/results/img/icn_circle_report.png) 0 center no-repeat;
}

#main .voice section h2 + p {
margin: 25px 0 0 0;
}

#main .voice p + p {
	margin: 25px 0 0 0;
}

#main .voice section p.pline {
	margin: 20px 0 15px 0;
	padding: 0 0 15px 0;
}

.reportbox {
width: 100%;
padding-top: 2em;
display: -webkit-flex;
display:flex;
-webkit-flex-wrap: wrap;
word-wrap: break-word;
text-align: left;
}

.reportbox1 {
width: 23%;
padding: 1%;
}

.reportbox1 img {
margin: 0 auto;
}

#main .voice section .reportbox1 h1 + p {
margin-top: 0.5em;
}

.reportbox2 {
width: 310px;
margin-right: 1em;
}

.reportbox3 {
width: 640px;
margin-bottom: 1em;
}

.reportbox2:nth-of-type(even){
margin-right: 0;
}

.reportbox2 p span  {
width: 90px;
display: inline-block;
}

.reportbox2 p span.font_s {
font-size: 13px;
width:auto;
}

.reportbox2 img {
margin: 0 auto;
}

#main .voice section .reportbox2 h1 + p {
margin-top: 0.5em;
}

.imgclear {
clear: both;
}
#main .reportbox p + p {
margin-top: 16px;
}


/* ダウンロード Styles
   -------------------------------------------------------------------------- */
#main .download.box .box-bottom > header h1 {
	border-left: solid 5px #E79701;
}

#main .download .image {
	float: right;
	margin: 0 0 10px 20px;
}

#main .download h2 {
	font-size: 1.214em;
	font-weight: bold;
}

#main .download section {
	margin: 40px 0 0 0;
	padding: 0 0 34px 0;
	border-bottom: 3px dotted #DDD;
}

#main .download section h1 {
	font-size: 1.000em;
	font-weight: bold;
	padding: 10px;
	background: #F4F7F7;
	border: #DDD solid 1px;
}

#main .download section h1 + p {
	margin: 20px 0 15px 0;
	padding: 0 0 15px 0;
}

#main .download section h2 {
    font-size: 1.000em;
    font-weight: bold;
    margin: 40px 0 0 0;
    padding: 0 0 0 16px;
    background: url(/eco/career/story/results/img/icn_circle_report.png) 0 center no-repeat;
}

#main .download section h2 + p {
margin: 25px 0 0 0;
}

#main .download p + p {
	margin: 25px 0 0 0;
}

#main .download section p.pline {
	margin: 20px 0 15px 0;
	padding: 0 0 15px 0;
}

/*追加：メイン写真部分
------------------------------------------------------------*/
#category-title p {
	position: relative;
	margin: 0 auto;
	width: 1024px;
	height: 320px;
	background: url(/eco/career/story/common/img/bg_results_ttl.jpg) no-repeat left top;
}

@media screen and (max-width: 1023px) {
	#category-title p {
	width: 728px;
	background: url(/eco/career/story/common/img/bg_results_ttl_tb.jpg) no-repeat left top;
	}
}

/* インターンシップ Styles
   -------------------------------------------------------------------------- */
#main .internship.box .box-bottom > header h1 {
	border-left: solid 5px #d64a75;
}
#main .internship.archive.box .box-bottom > header h1 {
	font-size: 1.000em;
	line-height: 1.6;
	font-weight: bold;
	padding: 12px;
	background: #F4F7F7;
	border: #DDD solid 1px;
}
#main .internship h2 {
	font-size: 1.214em;
	font-weight: bold;
}
#main .internship.archive h2 {
	font-size: 1em;
	margin-bottom: 40px;
}
#main .internship h2 + p {
	font-size: 0.857em;
}

/* ------------------------------ internship-list */
#main .internship .internship-list {
	margin: 40px 0 10px 0;
	border-top: #DDD solid 1px;
}
#main .internship .internship-list section {
	overflow: hidden;
	/zoom: 1;
	border-bottom: #DDD solid 1px;
	padding: 15px 0;
}
#main .internship .internship-list section .thumb {
	float: left;
	margin: 0 20px 0 0;
}
#main .internship .internship-list section .term,
#main .internship .internship-list section h1 {
	overflow: hidden;
	/zoom: 1;
}
#main .internship .internship-list section .term {
	padding: 0 0 0 16px;
	background: url(/eco/career/story/results/img/icn_circle_report.png) 0 center no-repeat;
}

/* ------------------------------ internship-archive */
#main .internship .internship-archive section {
	overflow: hidden;
	/zoom: 1;
	margin: -40px 0 10px 0;
	padding: 0 0 30px 0;
	border-bottom: #DDD solid 1px;
}
#main .internship .internship-archive h1 {
	font-weight: bold;
	margin: 40px 0 0 0;
	padding: 0 0 0 16px;
	background: url(/eco/career/story/results/img/icn_circle_report.png) 0 center no-repeat;
}

#main .internship .internship-archive dl {
	margin: 25px 0 0 0;
	display: block;
	overflow: hidden;
	/zoom: 1;
}
#main .internship .internship-archive dl dt {
	display: block;
	float: left;
}
#main .internship .internship-archive dl dd {
	display: block;
	overflow: hidden;
	/zoom: 1;
}
#main .internship .internship-archive p {
	margin: 25px 0 0 0;
}
#main .internship .internship-archive .flL,
#main .internship .internship-archive .flR {
	width: 320px;
}
#main .internship .internship-archive .image {
	margin: 20px 0 0 0;
	text-align: center;
}
#main .internship .internship-archive .images {
	display: block;
	overflow: hidden;
	/zoom: 1;
	margin: 25px 0 -10px -10px;
}
#main .internship .internship-archive .images > img {
	float: left;
	margin: 0 0 10px 10px;
}
#main .internship .internship-archive .btn {
	margin: 30px 0 0 0;
	text-align: center;
}
#main .internship .internship-archive .btn a img {
	background: url(/eco/career/story/common/img/bg_dot01.png) 0 0 repeat;
	padding: 10px;
}


/*追加：ダウンロード
------------------------------------------------------------*/
.imgright {
width: 240px;
padding: 20px;
text-align: center;
border: none;
padding: 0;
margin: 0 auto 1em 1em;
}

.text-center-sp {
text-align: center;
}

/*追加：
------------------------------------------------------------*/
.imgright2 {
float: right;
margin: 0 0 20px 20px;
display: inline-block;
}

/*追加：フッター
------------------------------------------------------------*/
blockquote {
padding: 1em 2em;
margin-top:3em;
border:1px solid #CCC;
background-color:#F2F2F2;
overflow: hidden;
}

blockquote h4 {
font-weight: 700;
margin-top:20px;
}


/*追加：動画
------------------------------------------------------------*/
.moviearea {
text-align: center;
width: 500px;
margin: 2em auto 0 auto;
}
.moviebox {
  position:relative;
  width:100%;
  padding-top:56.25%;
  margin: 0 0 1em 0;
}
.moviebox iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}


/* 追加：ボタン ------------------------------------------------*/

#btbox {
text-align: center;
margin: 3em 0 1em 0;
}

#btbox a {
color :#666;
display: inline-block;
padding: 0.5em 3em;
background-color: #F4F4F4;
border:1px solid #CCC;
border-radius: 4px;
text-decoration: none;
}

#btbox a:hover {
background-color: #999;
}

@media screen and (max-width: 767px) {
	#category-title p {
	width: 100%;
	height: 150px;
	background: url(/eco/career/story/common/img/bg_results_ttl_sp.jpg) no-repeat left top;
	background-size: 100% auto;
	}
    #sub {
    display: block;
    position: static;
    top: inherit;
    left: inherit;
    margin: 15px 0 0 0;
    }
    .reportbox1 {
    width: 48%;
    padding: 1%;
    }
    #main .report .report-archive dl dt {
    width: 100%;
    display: block;
    }
    #main .report .report-archive dl dd {
    width: 100%;
    display: block;
    }
    .imgright {
    margin: 0 auto 1em auto;
    }
    .imgright2 {
    float: none;
    margin: 0 0 20px 0;
    display: block;
}
    #main .report .report-archive .images {
    margin: 1em auto;
    }
    #main .report .report-archive .images > img{
    float: none;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1em auto;
    }
    .moviearea {
    width: 100%;
    }
    #main .report .report-list section .term {
    background:none;
    padding: 0;
    }
}


/* 追加：左メニュー年度別 ------------------------------------------------*/


#sub ul li.year {
list-style-type: none;
}

#sub ul li.year a {
display: block;
padding: 0.2em 1em;
color: #FFF;
background-color: #E69201;
border-radius: 6px;
text-decoration: none;
}

#sub ul li.year ul {
list-style-type: disc;
padding-left: 26px;
}

#sub ul li.year ul li a {
color: #000;
padding: 0.2em 0;
text-align: left;
    background: url(/eco/career/story/common/img/bg_dot01.png);
}

/* 追加：参加者の声：マススオーバー ------------------------------------------------*/

.txtchange {
position: relative;
overflow: hidden;
padding: 5px;
}

.txtchange .txtchange2 {
width:100%;
height:100%;
visibility:	hidden;	/* 文字を表示しない */
position:absolute;
top:0;
left:0;
margin:auto;
text-align:center;
-webkit-transition:	all 0.4s step-end;
transition:	all 0.4s step-end;
}

.txtchange:hover .txtchange2 {
visibility:	visible;	/* 文字を表示する */
}


.txtchange .txtchange2 p {
color:#fff;
opacity:0;	/* ホバーが解除された時すぐ消えるように、文字を表示しない */
position:absolute;
top: 18%;
left:0;
right:0;
padding: 0 1em;
margin:auto;
z-index: 2;
text-align: left;
font-size:15px;
}

.txtchange .txtchange2 p.more {
top:80%;
transform: translateY(-50%);
text-align: center;
font-size:14px;
}

.txtchange .txtchange2 p.more2 {
top:50%;
transform: translateY(-50%);
text-align: center;
font-size:14px;
}

.txtchange .txtchange2 p.more a,
.txtchange .txtchange2 p.more2 a{
color: #FFF;
padding:0.2em 1em;
text-decoration:none;
border:1px solid #FFF;
}

.txtchange .txtchange2 p.more a:hover,
.txtchange .txtchange2 p.more2 a:hover{
background-color: #7e889b;
-webkit-transition: 0.6s;
transition: 0.6s;
}

.txtchange:hover .txtchange2 p {
opacity:1;	/* 文字を表示 */
}

.txtchange::before {
content: "";
width:100%;
height:	100%;
position:absolute;
top:0;
left:0;
background-color:	rgba(228,105,15,0.9);
-webkit-transition:	all 0.4s ease;
transition:	all 0.4s ease;
z-index:2;
}

.txtchange::before { top:100%;	/* 枠の左に置いて表示させない */}
.txtchange:hover::before {top:0;	/* 左にずらして表示する */}


.txtchange1 img {
width: 100%;
height: auto;
}