/* ===================================================================
CSS
 file name  :  staff.css
=================================================================== */

/* =====================================
ページタイトル
======================================== */
h2#page_title{
	background-image: url(../images/staff/ttl_staff.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	h2#page_title{
		background-image: url(../images/staff/ttl_staff@2x.png);
	}
}
@media print, screen and (min-width: 769px) {
/* =====================================
スタッフ一覧
======================================== */
  .s_wrap_full {
      font-size: 16px;
      line-height: 1.8;
      margin: 70px 0 0;
  }
	.staff_list_title_img{
		width: 1024px;
		margin: 20px auto auto;
		text-align:left;
	}
	.staff_list{
		display: flex;
		flex-wrap: wrap;
		width: 1024px;
		margin: 20px auto auto;
	}
	.staff_list li{
		width: 232px;
		text-align: center;
		margin: 30px 12px auto 12px;
	}
	.staff_list li a{
		text-decoration: none;
	}
	.staff_list li a:hover{
		text-decoration: underline;
	}
	.staff_list li .name{
		margin-top: 10px;
		margin-left: 5px;
		text-align: left;
		font-weight: 600;
		font-size: 110%;
	}
	.staff_list li .kana{
		margin-left: 10px;
		font-weight: 300;
		font-size: 80%;
		color: #666;
	}
	.staff_list li .skill {
        position: relative;
        background: #c0b3a0;
        font-size: 11px;
        font-size: 1.1rem;
        letter-spacing: 0.01em;
        padding: 5px;
        color: #fff;
        display: inline-block;
		float:left;
		margin-top: 5px;
		border-right: solid 1px #fff;
		font-weight: 600;
    }

/* =====================================
スタッフ詳細
======================================== */
  .s_wrap {
    font-size: 16px;
    line-height:1.8;
  }
	.staff_d_main{
		background: #00306D;
		display: flex;
		justify-content: center;
	}
	.staff_d_main .photo01{
		width: 670px;
	}
	.staff_d_main .photo01 img{
		width: 670px;
		height: 430px;
		object-fit: cover;
	}
	.staff_d_main .profile{
		width: 270px;
		margin-left: 60px;
		color: #FFFFFF;
		font-size: 12px;
		letter-spacing: 0.2em
	}
	.staff_d_main .profile .chiefagent{
		margin-top: 120px;
	}
	.staff_d_main .profile .chiefagent img{
		width:110px;
	}
	.staff_d_main .profile .name{
		margin-top: 170px;
		font-size: 32px;
	}
	.staff_d_main .profile .chiefagent + .name{
		margin-top: 20px;
	}
	.staff_d_main .profile .position{
		margin-top: 80px;
	}
	.btn_area{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.btn_area .btn{
		width: 480px;
		background: #00306D;
		padding: 15px;
		box-sizing: border-box;
		margin: 10px;
	}
	.btn_area .btn:hover{
		background: #003D8B;
	}
	.btn_area .btn::before {
		content: "\f105";
		font-family: "Font Awesome 5 Free";
		font-weight : 900;
		padding-right:7px;
	}
	h3.sub_title{
		margin:0;
		padding:45px 0 0 0;
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: auto 36px;
		color:#00306D;
		text-align:center;
	}
	h3.sub_title.comment{
		background-image:url(../images/staff/comment.png);
	}
	h3.sub_title.favorite{
		background-image:url(../images/staff/favorite.png)
	}
	.comment_main{
		margin-top: 70px;
		padding-bottom: 50px;
		color:#00306D;
		font-size: 24px;
		border-bottom: 1px dashed #00306D;
	}
	.comment_text dt{
		color: #00306D;
		font-weight: bold;
		padding-left: 90px;
		background: url(../images/common/line.png) no-repeat left 14px;
		margin-top: 50px;
	}
	.comment_text dd{
		margin-top: 40px;
	}
	.photo02{
		margin-top: 50px;
		text-align: center;
	}
	.col2{
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	.col2 .photo03{
		margin-top: 50px;
		padding-left: 50px;
	}
	.photo_favorite{
		width: 780px;
		margin: 50px auto auto auto;
		text-align: center;
	}
	.photo_favorite img{
		max-width: 780px;
		max-height: 453px;
	}
	.photo_favorite p{
		text-align:left;
	}
	a.back_btn{
		width: 500px;
		margin: 70px auto auto auto;
		border: 1px solid #00306D;
		background: #FFFFFF;
		padding: 15px 0;
		color: #00306D;
	}
	a.back_btn:hover{
		background: #00306D;
		color: #FFFFFF;
	}
	.back_btn::before {
		content: "\f104";
		font-family: "Font Awesome 5 Free";
		font-weight : 900;
		padding-right:7px;
	}
}
@media screen and (max-width: 768px) {
/* =====================================
スタッフ一覧
======================================== */
	.staff_list_title_img{
		width: 100%;
		margin: 20px auto auto;
		text-align:left;
	}
	.staff_list{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}
	.staff_list li{
		width: 50%;
		text-align: center;
		padding:10px 10px 0 10px;
		box-sizing: border-box;
	}
	.staff_list li a{
		text-decoration: none;
	}
	.staff_list li a:hover{
		text-decoration: underline;
	}
	.staff_list li .name{
		margin-top: 5px;
		margin-left: 5px;
		text-align: left;
		font-weight: 600;
		font-size: 110%;
	}
	.staff_list li .kana{
		margin-left: 10px;
		font-weight: 300;
		font-size: 80%;
		color: #666;
	}
	.staff_list li .skill {
        position: relative;
        background: #c0b3a0;
        font-size: 11px;
        font-size: 1.1rem;
        letter-spacing: 0.01em;
        padding: 5px;
        color: #fff;
        display: inline-block;
		float:left;
		margin-top: 5px;
		border-right: solid 1px #fff;
		font-weight: 600;
    }
/* =====================================
スタッフ詳細
======================================== */
  .s_wrap {
    width:auto;
    margin:auto;
  }
	.staff_d_main .photo01{
		text-align: center;
	}
	.staff_d_main .profile{
		background: #00306D;
		color: #FFFFFF;
		padding: 20px;
		text-align: center;
	}
	.staff_d_main .profile .chiefagent{
		margin-bottom: 20px;
	}
	.staff_d_main .profile .chiefagent img{
		width:90px;
	}
	.staff_d_main .profile .name{
		font-size: 160%;
	}
	.staff_d_main .profile .position{
		margin-top: 10px;
	}
	.btn_area{
		margin:auto 20px;
	}
	.btn_area .btn{
		background: #00306D;
		margin-top: 20px;
		padding: 10px;
		box-sizing: border-box;
	}
	.btn_area .btn:hover{
		background: #003D8B;
	}
	.btn_area .btn::before {
		content: "\f105";
		font-family: "Font Awesome 5 Free";
		font-weight : 900;
		padding-right:7px;
	}
	h3.sub_title{
		margin:30px 0 0;
		padding:30px 0 0 0;
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: auto 24px;
		color:#00306D;
		text-align:center;
	}
	h3.sub_title.comment{
		background-image:url(../images/staff/comment.png);
	}
	h3.sub_title.favorite{
		background-image:url(../images/staff/favorite.png)
	}
	.comment_main{
		padding: 20px;
		color:#00306D;
		font-size: 120%;
		border-bottom: 1px dashed #00306D;
	}
	.comment_text{
		margin: 20px;
	}
	.comment_text dt{
		color: #00306D;
		font-weight: bold;
		padding-left: 30px;
		background: url(../images/common/line_sp.png) no-repeat left 10px;
		margin-top: 20px;
	}
	.comment_text dd{
		margin-top: 20px;
	}
	.comment_text dt:first-child{
		margin-top: 0px;
	}
	.photo02,
	.photo03{
		margin: 20px 20px auto 20px;
		text-align: center;
	}
	.photo_favorite{
		margin: 20px 20px auto 20px;
	}
	a.back_btn{
		margin: 20px 20px auto 20px;
		border: 1px solid #00306D;
		background: #FFFFFF;
		padding: 15px 0;
		color: #00306D;
	}
	a.back_btn:hover{
		background: #00306D;
		color: #FFFFFF;
	}
	.back_btn::before {
		content: "\f104";
		font-family: "Font Awesome 5 Free";
		font-weight : 900;
		padding-right:7px;
	}
}