/* ===================================================================
CSS
 file name  :  staff.css
=================================================================== */
@media screen and (min-width: 769px) {
/* PC用のスタイル記述 */
#staff_list{
	margin-left:-20px;
}
#staff_list li{
	border:1px solid #CCD7E3;
	width:220px;
	float:left;
	margin-bottom:30px;
	margin-left:20px;
	box-sizing:border-box;
	-moz-box-shadow:0px 13px 34px -13px #aaaaaa;
	-webkit-box-shadow:0px 13px 34px -13px #aaaaaa;
	box-shadow:0px 13px 34px -13px #aaaaaa;
}
#staff_list li a{
	padding:4px;
	display:block;
	box-sizing:border-box;
	text-decoration:none;
	color:#00306D;
}
#staff_list li .name{
	text-align:center;
	padding:5px 0;
	height:30px;
}
#staff_list li .name .thanks_icon{
	width:30px;
	margin-left:10px;
}
.name .thanks_icon2
{
    width:50px;
    height:34px;
    color:#FFFFFF;
    background-image:url("/images/thanks/voice_count.png");
    background-repeat: no-repeat;
    background-size:50px 34px;
    padding-left: 6px;
    padding-top: 3px;
    display: inline-block;
}
#staff_list li .movie{
	height:28px;
}
#staff_detail{
	border-top:3px solid #00306D;
	border-left:1px solid #CCD7E3;
	border-right:1px solid #CCD7E3;
	border-bottom:1px solid #CCD7E3;
	padding:30px;
	box-sizing:border-box;
}
#staff_detail #photo{
	float:left;
	width:210px;
}
#staff_detail #outline{
	float:right;
	width:400px;
}
#staff_detail #outline #name{
	color:#00306D;
	font-size:140%;
	font-weight:bold;
	line-height:1;
}
#staff_detail #outline dl{
	font-size:90%;
	margin-bottom:30px;
}
#staff_detail #outline dt{
	color:#00306D;
	width:90px;
	margin-top:10px;
}
#staff_detail #outline dd{
	padding-left:90px;
	margin-top:-1.8em;
}
#staff_detail #comment{
	padding:20px;
	background:#DFE6EE;
}
#p_photo li{
	float:left;
	margin-right:20px;
	margin-top:20px;
}
#back{
	margin:30px auto;
	width:300px;
}
#back .btn{
	margin:30px auto;
	background:#00306D;
	color:#FFFFFF;
	padding:5px 0;
}

.right_thanks,
.left_thanks
{
    background-color: #ffe9e5;
    padding:10px;
    font-size:14px;
}
.right_thanks_title,
.left_thanks_title
{   
    color: #fb7d77;
    font-weight:bold;
    font-size:18px;
    text-align:center;
}
.right_thanks
{
    position:relative;
    margin-bottom:10px;
    line-height:2;
    padding-bottom:40px;
}
.right_thanks_icon
{
    position:absolute;
    top:0;
    right:10px;
}
.left_thanks
{
    margin-top:10px;
}
.voice_title_count
{
    position:relative;
    text-align:center;
}
.voice_title_count span
{
    position:absolute;
    color:#df5555;
    right:235px;
    font-size:30px;
    top: -8px;
}
}
@media screen and (max-width: 768px) {
/* スマートフォン用のスタイル記述 */
#staff_list{
	margin-right:2%;
}
#staff_list li{
	border:1px solid #CCD7E3;
	width:30%;
	float:left;
	margin-bottom:10px;
	margin-left:2%;
}
#staff_list li a{
	padding:4px;
	display:block;
	box-sizing:border-box;
	text-decoration:none;
	color:#00306D;
}
#staff_list li .name{
	text-align:center;
	padding:5px 0;
	height:20px;
}
#staff_list li .name .thanks_icon{
	width:20px;
	margin-left:10px;
}
.name .thanks_icon2
{
    width:30px;
    height:20px;
    color:#FFFFFF;
    background-image:url("/images/thanks/voice_count.png");
    background-repeat: no-repeat;
    background-size:30px 20px;
    padding-left: 3px;
    display: inline-block;
}
#staff_list li .movie{
	height:21px;
}
#staff_detail{
	border-top:3px solid #00306D;
	box-sizing:border-box;
}
#staff_detail #photo{
	width:50%;
	margin:10px auto;
}
#staff_detail #outline #name{
	background:#DFE6EE;
	color:#00306D;
	font-size:140%;
	font-weight:bold;
	line-height:1;
	padding:7px;
	text-align:center;
}
#staff_detail #outline dl{
	margin:auto 10px 10px 10px;
}
#staff_detail #outline dt{
	color:#00306D;
	width:80px;
	margin-top:10px;
}
#staff_detail #outline dd{
	padding-left:80px;
	margin-top:-1.8em;
}
#staff_detail #comment{
	padding:10px;
	background:#DFE6EE;
}
#p_photo{
	margin:10px;
}
#p_photo li{
	float:left;
	width:45%;
	margin-right:5%;
	text-align:center;
}
#back{
	margin:10px;
}
#back .btn{
	background:#00306D;
	color:#FFFFFF;
	padding:7px 0;
}

.right_thanks,
.left_thanks
{
    background-color: #ffe9e5;
    padding:10px;
    font-size:14px;
}
.right_thanks_title,
.left_thanks_title
{   
    color: #fb7d77;
    font-weight:bold;
    font-size:18px;
    text-align:center;
}
.right_thanks
{
    margin-bottom:10px;
    line-height:2;
    text-align:center;
}
.left_thanks
{
    margin-top:10px;
    margin-bottom:10px;
}
.voice_title_count
{
    position:relative;
    text-align:center;
}
.voice_title_count span
{
    position:absolute;
    color:#df5555;
    font-size:20px;
    right:27.5%;
    top: -3px;
}
}
/*　API　ありがとうの声用　*/

.title01 {
	width: 100%;
	background-image: url(../images/thanks/title_bg.png);
	margin:auto;
	margin-top: 50px;
	text-align: center;
}
.movie_bnr + .title01 {
	margin-top: 20px;
}
.page_navi {
    margin-top: 10px;
    text-align: center;
}

.page_navi .page_num {
    font-size: 140%;
    font-weight: bold;
}


.more_btn {
	margin-top: 10px;
	text-align: center;
	margin-bottom: 20px;
}
.more_btn a {
	width: 80%;
	border: 1px solid #CCC;
	background:#FFF;
	text-decoration: none;
	padding: 10px 30%;
	text-align: center;
}
.more_btn a:hover{
	border:1px solid #9C8278;
	background-color: #ECE6DB;
	color:#9C8278;
}
.more_btn a.on {
    border: 1px solid #9C8278;
	background:#9C8278;
	color:    #FFF;
    font-weight: bold;
}


.more_btn span{
	margin: auto;
}


.thanks_voice {
	width:90%;
	float:none;
	margin: 30px auto;
	color: #666;
	text-align:left;
	padding-top:4px;
	padding-left:5px;
	box-sizing:border-box;
	border-bottom:1px solid #DDDDDD;
	font-size:14px;
	background:#ECE6DB;
}
.user img {
	width:25%;
	padding: 3px;
	border: 1px solid #CCC;
	background-color: #FFF;
	margin-right:5px;
	float:left;
}
.user .name {
    top: 30px;
    right: 5px;
	background-color: #fff;
	margin-right: 5px;
	margin-left: 27%;
	color: #333;
	padding:0px 10px 0px 10px;
}
.user a {
	text-decoration: none;
}
.details {
	padding: 10px 0 10px 20px;
	font-size: 90%;
	line-height: normal;
	color:#666;
}
.details2 {
	padding: 10px 0 10px 20px;
	font-size: 90%;
	line-height: normal;
}
.details3 {
	background:#9C8278;
	padding: 10px;
	font-size: 90%;
	line-height: normal;
	color: #FFF;
	margin-top: -23px;
	margin-right: 5px;
	float: right;
}
.thanks_voice li {
	display:block;
	border-left:1px solid #DDDDDD;
	border-right:1px solid #DDDDDD;
	border-bottom:1px solid #DDDDDD;
	background:#FCFAF3;
	padding:12px 20px;
	box-sizing:border-box;
	font-size:100%;
	text-decoration:none;
	line-height:140%;
	margin-right: 5px;
}
.thanks_voice li .date {
	color: #666;
}
.thanks_voice li .date div{
	color:#FFFFFF;
	font-size:10px;
	background:#9C8278;
	padding:0 6px;
	border-radius:3px;
	display:inline;
}
.thanks_voice li.reply{
	background-color: #FFFFCC;
	color:#666666;
}
.thanks_voice li.reply .date {
	color: #9C8278;
	font-weight:bold;
}
.btn_list a{
	display:block;
	color:#FFFFFF;
	background:#9C8278;
	text-align:center;
	padding:5px 0;
	text-decoration:none;
	font-size:90%;
}
.btn_list a:hover{
	background:#707070;
}