@charset "utf-8";

/*----------------------------------------------------
 elements
----------------------------------------------------*/
body {
	background:#bbb;
	color: #4b4b4b;
	font-size: 0.9em;
	line-height: 1.6em;
	-webkit-text-size-adjust: none; /* フォントサイズ自動調整 */
}

a {
	-webkit-tap-highlight-color: transparent;
	color: #ec1c24;
	text-decoration: underline;
}

a:link {
	color: #ec1c24;
}

a:visited {
	color: #ec1c24;
}

a:hover {
	color: #ec1c24;
}

a:active {
	color: #ec1c24;
}

img {
	vertical-align: top;
}

img:not([width]) {
	zoom: .5; /* Retinaディスプレイ対応のためimg要素は半分の大きさに */
}

p, dl, ol, ul {
}

ol, ul {
}

#container img {
	width: 100%;
}

/*----------------------------------------------------
 main
----------------------------------------------------*/
#container {
	margin: 0 auto;
	text-align:left;
	width:100%;
	background: url(../img/bg.png) repeat-y;
	background-size: 100%;
	position: relative;
}
p {
	margin: 0 auto;
}

header {
	width: 100%;
}
header h1 {
	width: 100%;
	margin: 0 auto;
}
section {
	width: 100%;
	margin: 1rem auto 0;
}
section p {
	width: 94%;
	margin: 0.2rem auto 0;
}
.img_profile {
	width: 100%;
}
.main_area {
	width: 93%;
	margin: 1rem auto 0;
	padding: 3% 0;
	background: rgba(255,255,255,0.7);
	border: 3px solid #ec1c24;
	border-radius: 8px;
}
.interview_area {
	width: 100%;
	display: none;
}
.interview_area.on {
	display: block;
}
.img_interview_yoko {
	width: 94%;
	margin: 1rem auto 0;
}
.img_interview_yoko + p {
	margin: 1rem auto 0;
}
.img_interview_tate {
	width: 70%;
	margin: 1rem auto 0;
}
.img_interview_tate + p {
	margin: 1rem auto 0;
}
section p.txt_interviewer {
	font-weight: 700;
	margin: 1rem auto;
}
section p.txt_interviewer + p {
	margin: 0 auto 0;
}
.pagenate {
	width: 94%;
	margin: 2.4rem auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pagenate .btn_page {
	width: 7%;
	margin-right: 2%;
	padding: 2%;
	background: #e0e0e0;
	text-align: center;
	font-weight: 700;
	cursor: pointer;
}
.pagenate .btn_page.last {
	
}
.pagenate .btn_page.on {
	background: #ec1c24;
	color: #fff;
	cursor: default;
}
.pagenate .rev,
.pagenate .next {
	width: 10%;
	padding-top: 12%;
	box-sizing: border-box;
}
.pagenate .rev {
	margin-right: 2%;
	background: url(../img/arrow_left_off.png) no-repeat;
	background-size: 50%;
	background-position: center center;
}
.pagenate .rev.on {
	background: url(../img/arrow_left_on.png) no-repeat;
	background-size: 50%;
	background-position: center center;
	cursor: pointer;
}
.pagenate .next {
	margin-right: 0;
	background: url(../img/arrow_right_off.png) no-repeat;
	background-size: 50%;
	background-position: center center;
}
.pagenate .next.on {
	background: url(../img/arrow_right_on.png) no-repeat;
	background-size: 50%;
	background-position: center center;
	cursor: pointer;
}
/***test用*****/
/*
.pagenate .rev.on:hover {
	background: #f00;
}
.pagenate .next.on:hover {
	background: #f00;
}
*/
.item_area {
	width: 94%;
	margin: 2rem auto 0;
	background: #fff400;
	border: 2px solid #000;
	border-radius: 8px;
	padding-bottom: 0;
}
.img_sofbi {
	width: 100%;
	position: relative;
	z-index: 5;
}
.ttl_get {
	width: 100%;
	margin-top: -3rem;
	position: relative;
	z-index: 9;
}
.item_info {
	margin-top: 1.4rem;
	position: relative;
	padding-bottom: 1.4rem;
	z-index: 10;
}
section .item_info p {
	width: 90%;
	font-size: 0.9em;
}
.btn_detail {
	width: 90%;
	margin: 0.2rem auto 0;
	display: block;
	position: relative;
	z-index: 11;
}
#go_top {
	position: fixed;
	bottom: 4%;
	right: 3%;
	width: 14%;
	z-index: 30;
}

footer {
	width:100%;
	margin-top: 3rem;
	padding: 0 0 1rem;
	background: transparent;
}

.txt_copy {
	margin: 0 auto 0;
	width:100%;
	color: #000;
	font-size: 0.7em;
	text-align: center;
	line-height: 1.6em;
}


/*-----------------------------------------------------------------*/	
/*SNSボタン*/
/* SNS */
#container .sns_area_wrap {
	width: 100%;
	margin-top: 5%;
}
#container .sns_area {
	width: 52%;
	margin: 0 auto;
}
#container .sns_area:after {
	content: "";
	clear: both;
	display: block;
}
#container .sns_area li {
	display: block;
	float: left;
	width: 31%;
	margin-right: 3%;
	font-size: 0;
}
#container .sns_area li:last-child {
	margin-right:0;
}
/*----------------------------------------------------------------*/	

@media screen and (min-width: 768px){
	body {
		font-size: 1.4em;
	}
}
@media screen and (min-width: 800px) {
	body {
		font-size: 0.9em;
	}
	#container {
		margin-left: auto;
		margin-right: auto;
		width: 800px;
	}
	.main_area {
		width: 94%;
	}
	.pagenate .rev {
		background-size: 45%;
	}
	.pagenate .rev.on {
		background-size: 45%;
	}
	.pagenate .next {
		background-size: 45%;
	}
	.pagenate .next.on {
		background-size: 45%;
	}
	#go_top {
		position: fixed;
		bottom: 9%;
		right: 3%;
		width: 7%;
	}
	
	/* SNS */
	#container .sns_area {
		width: 38%;
	}
	#container .sns_area li {
		width: 30%;
		margin-right: 5%;
	}
	
}
@media screen and (min-width: 820px) {
	body {
		font-size: 1.4em;
	}
}
@media screen and (min-width: 821px) {
	body {
		font-size: 0.9em;
	}
}
@media screen and (min-width: 1024px) {
	body {
	}
}
@media screen and (max-width: 480px){

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

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

}

.img_40per {
	width: 40%;
}
.img_50per {
	width: 50%;
}
.img_60per {
	width: 60%;
}
.img_70per {
	width: 70%;
}
.img_80per {
	width: 80%;
}
.img_90per {
	width: 90%;
}
.img_100per {
	width: 100%;
}
.pdt_20per {
	padding-top: 20%;
}
.pdt_30per {
	padding-top: 30%;
}
.pdt_40per {
	padding-top: 40%;
}
.pdt_50per {
	padding-top: 50%;
}
.pdt_60per {
	padding-top: 60%;
}
.pdt_70per {
	padding-top: 70%;
}
.pdt_80per {
	padding-top: 80%;
}
.pdt_90per {
	padding-top: 90%;
}
.pdt_100per {
	padding-top: 100%;
}
.mgl_25per {
	margin-left: 25%;
}
.mgl_33per {
	margin-left: 33%;
}
.mgt0per {
	margin-top: 0% !important;
}
.mgt1per {
	margin-top: 1% !important;
}
.mgt2per {
	margin-top: 2% !important;
}
.mgt3per {
	margin-top: 3% !important;
}
.mgt4per {
	margin-top: 4% !important;
}
.mgt5per {
	margin-top: 5% !important;
}
.mgt6per {
	margin-top: 6% !important;
}
.mgl2per {
	margin-left: 2% !important;
}
.mgb2per {
	margin-bottom: 2% !important;
}
.mgb3per {
	margin-bottom: 3% !important;
}
.mgb4per {
	margin-bottom: 4% !important;
}
.mgb5per {
	margin-bottom: 5% !important;
}
.mgb6per {
	margin-bottom: 6% !important;
}
.mgb7per {
	margin-bottom: 7% !important;
}
.mgb8per {
	margin-bottom: 8% !important;
}
.mgb9per {
	margin-bottom: 9% !important;
}
.mgb10per {
	margin-bottom: 10% !important;
}

.pdb_4per {
	padding-bottom: 4%;
}
.pdb_6per {
	padding-bottom: 6%;
}
.pdb_8per {
	padding-bottom: 8%;
}
.pdb_10per {
	padding-bottom: 10%;
}
.pdb_12per {
	padding-bottom: 12%;
}

.txt_red {
	color: #e10c39;
}
.txt_blue {
	color: #0b4990;
}
.txt_center {
	text-align: center;
}
.txt_left {
	text-align: left !important;
}
.txt_bold {
	font-weight: 700;
}