@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700);

/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:1rem;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:1rem;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 *  一般・共通設定
 ================================================*/
body {color: #333;margin: 0;padding: 0;width: 100%;height: 100%;position: relative;font-size:1rem;line-height: 1.6;font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
body.detail{background-attachment: fixed;background:#eee;}

#box{width:1100px;margin:50px auto;background:#fff;box-shadow: 0 0 8px #ccc;}
#contents,
#job {width:1000px;margin:0 auto;background:#fff;}
a {color:#0066AA;}
a:hover {color:#144d8d;}

h1 {font-size:2.3rem;text-align:center;padding:1em 0;font-weight:bold;}
h2 {font-size:1.6rem;text-align:center;}
h3 {margin: 1.5em auto;font-size:1.4rem;font-weight:bold;border-bottom: solid 2px #eee;padding-bottom: 10px;position: relative;}
h4 {margin-bottom:0.25em;font-size:1.1rem;text-align:center;margin:1em 0;}

p {margin:0 0 1em 0; white-space: pre-wrap;}
img {vertical-align:bottom;}
em {font-weight:bold;}
strong {font-weight:bold;color:#ff0000;}
pre {margin:1em 0;padding:1em;}

blockquote {background: #f8f8f8;padding: 20px;border-left: 3px solid #ccc;margin-bottom: 40px;}

ul,ol,dl {margin:0 0 1em 0;}
ul li {list-style:disc;}
ol li {list-style:decimal;}
li {margin-left:2em;}

table {width:100%;/* margin-bottom:2em; */border-collapse:collapse;border:none;}
table tr:first-child th{display:block;padding:2px 0 2px 20px;margin: 20px 0;text-align:left;border-left:3px solid #000;border-top:none;background:#fff;width:100%;font-size:1.3rem;}

table th {padding:20px 15px;text-align:center;vertical-align:middle;border-top:1px solid #ddd;background:#f8f8f8;width:30%;}
table td {padding:20px 15px;text-align:left;border-top:1px solid #ddd;width:70%;line-height:1.8em;}
table tr:last-child th {border-bottom:1px solid #ddd;}
table td:last-child {border-bottom:1px solid #ddd;}

/*
.oubo:first-of-type {
	display: none;
}
*/

/*================================================
 *  汎用クラス
 ================================================*/
.imgC img,
.imgL img,
.imgR img{max-width:100%;}

/* 写真中央寄せ */
.imgC {
	clear:both;
	overflow:hidden;
	margin-bottom:30px;
	text-align:center;
}
.imgC img {
	border-radius:5px;
	margin-bottom:1em;
}

/* 写真左寄せ */
.imgL {
	clear:both;
	overflow:hidden;
	margin-bottom:30px;
}
.imgL img {
	float:left;
	margin:0 1em 1em 0;
}

/* 写真右寄せ */
.imgR {
	clear:both;
	overflow:hidden;
	margin-bottom:30px;
}
.imgR img {
	float:right;
	margin:0 0 1em 1em;
}

/* 3カラム（スマートフォンでは1カラム) */
.threeCol {

}
.threeColInner {
	overflow:hidden;
	margin-right:-3%;
}


/*================================================
 *  PCのみデザイン
 ================================================*/
@media screen and (min-width:979px) {

	.threeColInner div,
	#job.oldView .threeColInner div {
		width:31%;
		float:left;
		margin:0 2% 2% 0;
	}

	.threeColInner img {
		width:100%;
		margin-bottom:0.5em;
	}
	.photoText p{
		width:100%;
		margin:10px auto 20px auto;
		font-size:1rem;
	}
	
	/* 3カラム（スマートフォンでは1カラム) */
	#job .threeColInner div {
		width:23%;
		float:left;
		margin:0 2% 2% 0;
	}
	#job .threeColInner div:nth-child(4n+1) {
		clear:both;
	}
	#job.oldView .threeColInner div:nth-child(3n+1){
		clear:both;
	}
	#job.oldView .threeColInner div:nth-child(4n+1) {
		clear:none;
	}
}


/*================================================
 *  ヘッダー
 ================================================*/
header {width:100%;height:500px;overflow:hidden;}
header.saiyo {width:100%;height:200px;overflow:hidden;margin-bottom: 50px;}
header {
	position:relative;
	background-position: top center !important;
	background-attachment: fixed !important;
	background-size: cover !important;
	-moz-background-size: cover !important;
	-webkit-background-size: cover !important;
	-o-background-size: cover !important;
}

header .maintitle,
header p,
header .powered {
	position:absolute;
	color:#fff;
	text-align:center;
	width: 100%;
}
header .powered{
	top:10px;
	left:10px;
	text-align: left;
}
header .maintitle{
	top:180px;
	font-weight:bold;
}
header.saiyo p.title{
	top:30px;
	font-weight:bold;
	font-size:2.3rem;
}
header.saiyo p.description{
	top:120px;
	font-size:1rem;
}

#wrap {
	background: url(../images/bg_kv.gif);
	width: 100%;
	height: 100%;
}

.detail .powered {
	padding:10px 0 0 10px;
	background: #fff;
}

/*================================================
 *  ヘッダーテキスト
 ================================================*/
#headerText{
	width:1000px;
	margin:50px auto;
}
p.logo img {
	max-width: 40%;
}
p.logo {
	text-align: center;
	margin: 5%;
}

/*================================================
 *  JOB
 ================================================*/
/*後で外す
#job h1,
#job h4 {display: none;}
#job .threeCol {margin-top: 50px;}
.saiyo #wrap {background: rgba(0, 85, 170, 0.8);}
header.saiyo {height: 300px;}
header.saiyo h1 {top: 10px;}
header.saiyo h2 {top: 150px;}
*/



.jobText a{
	display:block;
	margin: 0;
	text-decoration:none;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.jobText a:hover{
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	text-decoration: none;
}
.jobText h3{
	font-size: 0.9rem;
	margin: 0.2em auto;
	border:none;
	text-align:left;
	width: 95%;
	display: block;
	height: 3em;
	overflow: hidden;
	line-height: 1.5em;
	font-weight:normal;
	background: url(../images/icon_arrow.png) no-repeat left 10px;
	padding: 0 10px;
}
.jobText p{
	overflow: hidden;
	text-overflow: ellipsis;
	line-height:1.2em;
	padding:0;
	margin:0 auto;
	font-size:0.85rem;
	width: 95%;
	display: block;
}
.category_name {
	font-size: 1.3rem;
	font-weight:bold;
	margin-bottom: 0.5em;
}

#job.oldView .jobText h3{
	font-weight:bold;
}
#job.oldView .jobText a p{
	color:#333;
}
#job.oldView .jobText p{
	white-space: nowrap;
	line-height:1em;
	margin:2%;
	padding:2%;
	border-bottom:1px #ccc dotted;
}

/*================================================
 *  detail
 ================================================*/
.boxInner{
	width:90%;
	margin:10px auto;
}


.boxInner h1 {font-size:1.5rem;text-align:left;padding:1em 0 0.2em 0;margin-bottom:1.5em;font-weight:normal;}
.boxInner h2 {font-size:1.3rem;text-align:left;}
.boxInner h3 {margin: 1.5em auto;font-size:1.2rem;font-weight:bold;border-bottom: solid 4px #eee;padding-bottom: 10px;position: relative;}

.boxInner div:first-of-type h3{display:none;}

.oubo {
	width: 100%;
	margin: 60px auto 100px auto;
	text-align: center;
}
.oubo a {
	width: 320px;
	display:block;
	margin: 0px auto;
	padding:10px 0;
	text-align: center;
	text-decoration:none;
	font-size:1.2rem;
	font-weight: bold;
	border:3px double #fff;
	color:#fff;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	/*background:url(/pict/white_arrow.png) center right no-repeat #000;*/
}
.oubo a:hover {
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	text-decoration:none;
/*
	background:#000;
	border:2px solid #000;
	color:#fff;
	font-size:24px;
*/
}

.boxInner > .imgC img ,
.boxInner > .imgL img ,
.boxInner > .imgR img {
	max-width:32%;
}

p.endMsg {
	font-size: 1.2rem;
	text-align:center;
	margin:40px 0;
}

.backBtn a{
	margin: 0 auto 30px auto;
	text-align: center;
	background: #111;
	width: 50%;
	padding: 10px 0;
	color: #fff;
	text-decoration:none;
	display:block;
}
.backBtn a:hover{
	opacity:0.8;
}
.category_detail {
	font-size: 30px;
	text-align: center;
	padding-top: 60px;
	margin-bottom: 60px;
	padding-bottom: 25px;
	position: relative;
}
.category_detail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #333;
    width:30%;
    margin:auto;
}

/*================================================
 *  フッター
 ================================================*/
footer {
	clear:both;
	padding:2% 0;
	font-size:0.85rem;
	text-align:center;
	background:#fff;
}

/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {
	body.detail{background-size: cover;background-attachment: fixed;}
	p,p.logo{margin:0;}
	#box,
	#job,
	#contents,
	#headerText {
		box-sizing:border-box;
		width:100%;
		margin:0;
		overflow: hidden;
		background:#fff;
	}

	#contents,
	#headerText {
		box-sizing:border-box;
		padding:20px;
	}
	#box{
		background:none;
	}
	.boxInner{
		box-sizing:border-box;
		width:100%;
		padding:0 20px 0.1px 20px;
		margin:0 auto;
		background:#fff;
	}
}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	body.detail{font-size: 0.9rem;}
	p.logo{padding:20px 0;}
	p.logo img {max-width: 50%;}

	header {
		height: 500px;
		padding:0;
		background-image:none !important;
	}

	header::before{
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		content: "";
		z-index: -1;
	}
	header.saiyo{
	margin:0;
	}
	.category_name {margin-left:7%;margin-bottom:0;}

	h1 {font-size:2rem;text-align:center;padding:1em 0;font-weight:bold;}
	h2 {font-size:1.3rem;text-align:center;}
	h3 {margin: 0 auto 1em auto;font-size:1.2rem;font-weight:bold;border-bottom: solid 4px #eee;padding-bottom: 10px;position: relative;}
	header h1{
		top:150px;
		font-weight:bold;
		line-height: 1.3em;
	}
	header h2{
		top:300px;
	}
	.imgC {
		margin-bottom:30px;
	}
	.imgC img {
		max-width:100%;
	}

	.imgL {
		margin-bottom:30px;
	}
	.imgL img {
		float:none;
		max-width:100%;
		margin-right:0;
		width:100%;
	}

	.imgR {
		margin-bottom:30px;
	}
	.imgR img {
		float:none;
		max-width:100%;
		margin-left:0;
		width:100%;
	}

	.twoCol {
		margin-right:0;
		margin-bottom:30px;
	}
	.twoColInner {
		margin-right:0;
	}
	.twoColInner div {
		float:none;
		width:100%;
	}

	.threeCol {
		margin-bottom:30px;
	}
	.threeColInner {
		margin-right:0;
	}
	.threeColInner div {
		float:none;
		width:100%;
		margin:1em auto;
	}
	.threeColInner div img {
		max-width:100%;
	}
	#job .threeColInner {
		margin:0 5% 5% 5%;
	}
	#job .threeColInner div{
		width: 46%;
		margin: 2%;
		float: left;
	}
	.threeColInner div:nth-child(2n+1){
		clear:both;
	}
	.boxInner > .imgC img ,
	.boxInner > .imgL img ,
	.boxInner > .imgR img {
		max-width:100%;
		width:100%;
	}
	.detail h1,
	.detail h3{
		text-align:left;
		font-weight:bold;
	}
	.detail h1{font-size:1.2rem;text-align: center;}
	.detail h3{font-size:0.9rem;font-weight: normal;}

	.jobText{float:none;width:90%;margin:0 auto;}
	.jobText img{
		width:100%;
		margin:0 auto;
		padding-bottom:5px;
		border-radius: 0;
	}
	.detail .powered {
		padding: 10px 0 30px 10px;
		background: #fff;
	}

	p.endMsg {
		font-size: 1rem;
		text-align:center;
		padding:40px 0;
		margin: 0;
		background:#fff;
	}
	.backBtn{
		background: #fff;
		padding: 20px 0;
	}
	.backBtn a{
		margin: 0 auto;
		text-align: center;
		background: #111;
		width: 80%;
		padding: 10px 0;
		color: #fff;
		text-decoration:none;
		display:block;
	}
	.backBtn a:hover{
		opacity:0.8;
	}
	.oubo {
		margin: 30px auto 50px auto;
	}

}


/* color ------------------------*/

h3{border-color: #000;}
.boxInner h1{border-bottom: 2px solid #000;}
.saiyo #wrap{background:rgba(0, 0, 0, 0.8);}
table tr:first-child th{border-left:3px solid  #000;}
.oubo a{background-color: #000;}
.oubo a:hover{background:#fff;border:3px double #000;color:#000;}



.cc_980000 h3{border-color: #980000;}
.cc_ff0000 h3{border-color: #ff0000;}
.cc_ff9900 h3{border-color: #ff9900;}
.cc_ffff00 h3{border-color: #ffff00;}
.cc_00ff00 h3{border-color: #6DD900;}
.cc_00ffff h3{border-color: #00ffff;}
.cc_4a86e8 h3{border-color: #4a86e8;}
.cc_0000ff h3{border-color: #0000ff;}
.cc_9900ff h3{border-color: #9900ff;}
.cc_ff00ff h3{border-color: #ff00ff;}

.cc_980000 .boxInner h1{border-bottom: 2px solid #980000;}
.cc_ff0000 .boxInner h1{border-bottom: 2px solid #ff0000;}
.cc_ff9900 .boxInner h1{border-bottom: 2px solid #ff9900;}
.cc_ffff00 .boxInner h1{border-bottom: 2px solid #ffff00;}
.cc_00ff00 .boxInner h1{border-bottom: 2px solid #6DD900;}
.cc_00ffff .boxInner h1{border-bottom: 2px solid #00ffff;}
.cc_4a86e8 .boxInner h1{border-bottom: 2px solid #4a86e8;}
.cc_0000ff .boxInner h1{border-bottom: 2px solid #0000ff;}
.cc_9900ff .boxInner h1{border-bottom: 2px solid #9900ff;}
.cc_ff00ff .boxInner h1{border-bottom: 2px solid #ff00ff;}

.cc_980000 .saiyo #wrap{background:rgba(152, 0, 0, 0.8);}
.cc_ff0000 .saiyo #wrap{background:rgba(255, 0, 0, 0.8);}
.cc_ff9900 .saiyo #wrap{background:rgba(255, 153, 0, 0.8);}
.cc_ffff00 .saiyo #wrap{background:rgba(255, 255, 0, 0.8);}
.cc_00ff00 .saiyo #wrap{background:rgba(109, 217, 0, 0.8);}
.cc_00ffff .saiyo #wrap{background:rgba(0, 255, 255, 0.8);}
.cc_4a86e8 .saiyo #wrap{background:rgba(74, 134, 232, 0.8);}
.cc_0000ff .saiyo #wrap{background:rgba(0, 0, 255, 0.8);}
.cc_9900ff .saiyo #wrap{background:rgba(153, 0, 255, 0.8);}
.cc_ff00ff .saiyo #wrap{background:rgba(255, 0, 255, 0.8);}

.cc_980000 table tr:first-child th{border-left:3px solid  #980000;}
.cc_ff0000 table tr:first-child th{border-left:3px solid  #ff0000;}
.cc_ff9900 table tr:first-child th{border-left:3px solid  #ff9900;}
.cc_ffff00 table tr:first-child th{border-left:3px solid  #ffff00;}
.cc_00ff00 table tr:first-child th{border-left:3px solid  #6DD900;}
.cc_00ffff table tr:first-child th{border-left:3px solid  #00ffff;}
.cc_4a86e8 table tr:first-child th{border-left:3px solid  #4a86e8;}
.cc_0000ff table tr:first-child th{border-left:3px solid  #0000ff;}
.cc_9900ff table tr:first-child th{border-left:3px solid  #9900ff;}
.cc_ff00ff table tr:first-child th{border-left:3px solid  #ff00ff;}

.cc_980000 .oubo a{background-color: #980000;}
.cc_ff0000 .oubo a{background-color: #ff0000;}
.cc_ff9900 .oubo a{background-color: #ff9900;}
.cc_ffff00 .oubo a{background-color: #ffff00;}
.cc_00ff00 .oubo a{background-color: #6DD900;}
.cc_00ffff .oubo a{background-color: #00ffff;}
.cc_4a86e8 .oubo a{background-color: #4a86e8;}
.cc_0000ff .oubo a{background-color: #0000ff;}
.cc_9900ff .oubo a{background-color: #9900ff;}
.cc_ff00ff .oubo a{background-color: #ff00ff;}

.cc_980000 .oubo a:hover{background:#fff;border:3px double #980000;color:#980000;}
.cc_ff0000 .oubo a:hover{background:#fff;border:3px double #ff0000;color:#ff0000;}
.cc_ff9900 .oubo a:hover{background:#fff;border:3px double #ff9900;color:#ff9900;}
.cc_ffff00 .oubo a:hover{background:#fff;border:3px double #ffff00;color:#ffff00;}
.cc_00ff00 .oubo a:hover{background:#fff;border:3px double #6DD900;color:#6DD900;}
.cc_00ffff .oubo a:hover{background:#fff;border:3px double #00ffff;color:#00ffff;}
.cc_4a86e8 .oubo a:hover{background:#fff;border:3px double #4a86e8;color:#4a86e8;}
.cc_0000ff .oubo a:hover{background:#fff;border:3px double #0000ff;color:#0000ff;}
.cc_9900ff .oubo a:hover{background:#fff;border:3px double #9900ff;color:#9900ff;}
.cc_ff00ff .oubo a:hover{background:#fff;border:3px double #ff00ff;color:#ff00ff;}


/**/
/**/