@charset "UTF-8";

/* ▼▼▼ 弁護士紹介
=====================================*/
.title_box{background: url(../img/lawyers/title_bg.jpg)no-repeat top center/cover;}


/* ▼▼▼ 弁護士紹介一覧
=====================================*/
#lawyers.top .container.flex_box{
	align-items: flex-start;
	justify-content: space-between;
	max-width: 1109px;
	margin: 0 auto;
}
/* 弁護士リスト */
#lawyers.top section{
	width: calc(100% - 200px);
	}
	#lawyers_list{
		display: flex;
		flex-wrap: wrap;
	}
	#lawyers_list li{
		width: 26%;
		margin: 0 6.5% 6.5% 0;
		box-shadow: 1px 1px 15px rgba(0, 0, 0,.15);
		position: relative;
		z-index: 2;
	}
	#lawyers_list li::before{
		content: "";
		width: 100%;
		height: 100%;
		background: -moz-linear-gradient(-45deg, #255190 0%, #7ab5dc 100%);
		background: -webkit-linear-gradient(-45deg, #255190 0%,#7ab5dc 100%);
		background: linear-gradient(135deg, #255190 0%,#7ab5dc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#255190', endColorstr='#7ab5dc',GradientType=1 );
		position: absolute;
		top: 10px;
		left: -10px;
		z-index: -1;
	}
	#lawyers_list li a{
		display: block;
		height: 100%;
		background: #fff;
		position: relative;
		z-index: 1;
	}
	#lawyers_list li a:hover{
		opacity: 1;
	}
	#lawyers_list li figure{
		display: flex;
		width: 100%;
	}
	#lawyers_list li figure figcaption{
		width: 35px;
		padding-top: 10px;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		color: #7AB5DC;
		font-size: 10px;
		letter-spacing: .1em;
		line-height: 35px;
	}
	#lawyers_list li figure p{
		width: calc(100% - 35px);
	}
	#lawyers_list li figure p{
		overflow: hidden;
	}
	#lawyers_list li figure img{
		transition: .5s;
	}
	#lawyers_list li:hover figure img{
		transform:scale(1.1,1.1);
	}
	#lawyers_list li div.detail{
		padding: 20px 30px 20px 20px;
		position: relative;
	}
	#lawyers_list li div.detail::after{
		content: "";
		width: 7px;
		height: 7px;
		border-top: 2px solid #7AB5DC;
		border-left: 2px solid #7AB5DC;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 15px;
	}
	#lawyers_list li div.detail h2{
		margin-bottom: 5px;
		font-size: 20px;
		font-weight: bold;
	}
	#lawyers_list li div.detail p{
		margin-bottom: 3px;
		font-size: 12px;
		line-height: 1.4;
	}
	#lawyers_list li div.detail p.office{
		margin-bottom: 0;
		color: #BBB;
		font-weight: bold;
	}
/* サイド */
aside{
	width: 200px;
	margin: 100px 0;
	border: 1px solid #000;
	background: #fff;
	}
	aside ul li a{
		display: flex;
		align-items: center;
		height: 60px;
		padding: 0 35px 0 25px;
		line-height: 1.2;
		font-weight: bold;
		word-break: break-all;
		position: relative;
	}
	aside ul li a::after{
		content: "";
		width: 83%;
		height: 2px;
		background: url(../img/lawyers/line_dotted.png)no-repeat center center/100%;
		margin: auto;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	aside ul li:last-child a::after{
		display: none;
	}
	aside ul li a::before{
		content: "";
		width: 6px;
		height: 6px;
		border-top: 2px solid #7AB5DC;
		border-left: 2px solid #7AB5DC;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 25px;
	}

/* ▼▼▼ 弁護士紹介詳細
=====================================*/
#lawyers.detail section.sec_main{
	background: -moz-linear-gradient(-45deg, #255190 0%, #7ab5dc 100%);
	background: -webkit-linear-gradient(
	-45deg
	, #255190 0%,#7ab5dc 100%);
	background: linear-gradient(
	135deg
	, #255190 0%,#7ab5dc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#255190', endColorstr='#7ab5dc',GradientType=1 );
	border-bottom: 7px solid #000;
	margin-top: 140px;
	}
	#lawyers.detail section.sec_main .container{
		display: flex;
	}
	#lawyers.detail section.sec_main .container .txt{
		width: 55%;
		margin-right: 5%;
	}
	#lawyers.detail section.sec_main p,
	#lawyers.detail section.sec_main h2,
	#lawyers.detail section.sec_main a{
		color: #fff;
	}
	#lawyers.detail section.sec_main p.job{
		margin-bottom: 15px;
		font-size: 26px;
		font-weight: bold;
	}
	#lawyers.detail section.sec_main .flex_box{
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 40px;
	}
	#lawyers.detail section.sec_main .flex_box h2{
		margin: 0 20px 10px 0;
		font-size: 60px;
		line-height: 1;
	}
	#lawyers.detail section.sec_main .flex_box p{
		font-size: 24px;
		line-height: 1;
	}
	#lawyers.detail section.sec_main p.office,
	#lawyers.detail section.sec_main .tel-moji{
		font-size: 23px;
		padding-left: 30px;
		position: relative;
	}
	#lawyers.detail section.sec_main p.office{
		margin-bottom: 5px;
	}
	#lawyers.detail section.sec_main p.office::before,
	#lawyers.detail section.sec_main .tel-moji::before{
		content: "";
		position: absolute;
		top: 10px;
	}
	#lawyers.detail section.sec_main p.office::before{
		width: 23.92px;
		height: 24.37px;
		background: url(../img/lawyers/icon_house.svg)no-repeat top center/cover;
		left: 0;
	}
	#lawyers.detail section.sec_main .tel-moji::before{
		width: 19.05px;
		height: 24.84px;
		background: url(../img/lawyers/icon_tel.svg)no-repeat top center/cover;
		left: 2px;
	}
	#lawyers.detail section.sec_main .container .photo{
		width: 40%;
		position: relative;
	}
	#lawyers.detail section.sec_main .container .photo img{
		position: absolute;
		top: -160px;
	}
	#lawyers.detail section .inner{
		margin-bottom: 80px;
	}
	#lawyers.detail section .inner p{
	}
	#lawyers.detail section .inner:last-child{
		margin-bottom: 0;
	}
	/* 著作等 */
	#lawyers.detail section .inner.write_lawyers p{
		background: #E1E7EF;
    padding: 12px 20px;
	}
	#lawyers.detail section .inner.write_lawyers > p.past_seminar{
		background: none;
    padding: 0;
	}
	#lawyers.detail section .inner.write_lawyers > p.past_seminar2{
		background: none;
    padding: 0;
	}
	#lawyers.detail section .inner.write_lawyers .past_write_list{
		display: none;
	}
	#lawyers.detail section .inner.write_lawyers p:not(:last-child){
		margin-bottom: 10px;
	}
	/* セミナー */
	#lawyers.detail section .inner ul.seminar_list{
		margin-bottom: 40px;
	}
	#lawyers.detail section .inner ul.seminar_list li{
		padding-left: 20px;
		margin-bottom: 20px;
		position: relative;
	}
	#lawyers.detail section .inner ul.seminar_list li:last-child{
		margin-bottom: 0;
	}
	#lawyers.detail section .inner ul.seminar_list li::before{
		content: "";
		width: 10px;
		height: 10px;
		background: #7AB5DC;
		position: absolute;
		top: 10px;
		left: 0;
	}
	#lawyers.detail section .inner ul.seminar_list li a{
		text-decoration: underline;
	}
	#lawyers.detail section .inner ul.seminar_list li a:hover{
		text-decoration: none;
	}
	#lawyers.detail section .inner p.past_seminar{
		font-size: 24px;
		border-bottom: 2px solid #000;
		position: relative;
	}
	#lawyers.detail section .inner p.past_seminar2{
		font-size: 24px;
		border-bottom: 2px solid #000;
		position: relative;
	}
	#lawyers.detail section .inner p.past_seminar::after{
		content: "";
		width: 13px;
		height: 13px;
		border-top: 2px solid #7AB5DC;
		border-right: 2px solid #7AB5DC;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		position: absolute;
		top: 23%;
		right: 25px;
	}
	#lawyers.detail section .inner p.past_seminar2::after{
		content: "";
		width: 13px;
		height: 13px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		position: absolute;
		top: 23%;
		right: 25px;
	}
	#lawyers.detail section .inner p.past_seminar.close::after{
		top: 40%;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#lawyers.detail section .inner p.past_seminar2.close::after{
		top: 40%;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#lawyers.detail section .inner p.past_seminar:hover{
		cursor: pointer;
	}
	#lawyers.detail section .inner p.past_seminar2:hover{
		cursor: pointer;
	}
	#lawyers.detail section .inner ul.past_seminar_list{
		display: block;
		background: #F0F0F0;
		padding: 25px 4% 30px;
		margin-bottom: 0;
	}
	#lawyers.detail section .inner ul.past_seminar_list_add{
		display: none;
		background: #F0F0F0;
		padding: 25px 4% 30px;
		margin-bottom: 0;
	}

/* ▼▼▼ 多言語
===================================== */
#lawyers.detail section .inner ul.seminar_list li:lang(en)::before{
	top: 7px;
}
/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px){
	/* ▼▼▼ 弁護士紹介一覧
	=====================================*/
	/* 弁護士リスト */
	#lawyers.top section{
		width: 100%;
		padding-bottom: 30px;
		}
		#lawyers_list li{
			width: 44%;
			margin: 0 6% 30px 8px;
		}
		#lawyers_list li:nth-child(even){
			margin-right:0;
		}
		#lawyers_list li::before{
			top: 7px;
			left: -7px;
		}
		#lawyers_list li figure figcaption{
			width: 28px;
			line-height: 28px;
		}
		#lawyers_list li figure p{
			width: calc(100% - 27px);
		}
		#lawyers_list li div.detail{
			padding: 10px 25px 10px 15px;
		}
		#lawyers_list li div.detail::after{
			width: 5px;
			height: 5px;
			right: 12px;
		}
		#lawyers_list li div.detail h2{
			font-size: 16px;
		}
		#lawyers_list li div.detail p{
			font-size: 10px;
		}
	/* サイド */
	aside{
		width: 100%;
		margin: 0 0 60px;
		}
		aside ul{
			display: flex;
			flex-wrap: wrap;
		}
		aside ul li{
			width: 50%;
		}
		aside ul li a{
			padding: 0 30px 0 15px;
		}
		aside ul li a::after{
			width: 90%;
			bottom: -2px;
		}
		aside ul li a::before{
			width: 5px;
			height: 5px;
			right: 15px;
		}

/* ▼▼▼ 弁護士紹介詳細
=====================================*/
#lawyers.detail section.sec_main{
	border-bottom: 5px solid #000;
	padding: 40px 0;
	margin-top: 60px;
	}
	#lawyers.detail section.sec_main .container .txt{
		width: 48%;
		margin-right: 2%;
	}
	#lawyers.detail section.sec_main p.job{
		margin-bottom: 10px;
		font-size: 14px;
	}
	#lawyers.detail section.sec_main .flex_box{
		margin-bottom: 25px;
	}
	#lawyers.detail section.sec_main .flex_box h2{
		margin: 0 20px 10px 0;
		font-size: 26px;
		line-height: 1;
	}
	#lawyers.detail section.sec_main .flex_box p{
		font-size: 12px;
	}
	#lawyers.detail section.sec_main p.office,
	#lawyers.detail section.sec_main .tel-moji{
		padding-left: 25px;
		margin: 0;
		font-size: 14px;
	}
	#lawyers.detail section.sec_main p.office::before,
	#lawyers.detail section.sec_main .tel-moji::before{
		top: 5px;
	}
	#lawyers.detail section.sec_main p.office::before{
		width: 19px;
		height: 18px;
	}
	#lawyers.detail section.sec_main .tel-moji::before{
		width: 15px;
		height: 19px;
		left: 3px;
	}
	#lawyers.detail section.sec_main .container .photo{
		width: 50%;
	}
	#lawyers.detail section.sec_main .container .photo img{
		top: -70px;
	}
	#lawyers.detail section .inner{
		margin-bottom: 40px;
	}
	/* 著作等 */
	#lawyers.detail section .inner.write_lawyers p{
		padding: 15px 18px;
	}
	#lawyers.detail section .inner.write_lawyers p:not(:last-child){
		margin-bottom: 7px;
	}
	/* セミナー */
	#lawyers.detail section .inner p.past_seminar{
		padding-bottom: 3px;
		font-size: 18px;
	}
	#lawyers.detail section .inner p.past_seminar2{
		padding-bottom: 3px;
		font-size: 18px;
	}
	#lawyers.detail section .inner p.past_seminar::after{
		width: 8px;
		height: 8px;
		right: 10px;
	}
	#lawyers.detail section .inner p.past_seminar2::after{
		width: 8px;
		height: 8px;
		right: 10px;
	}
	#lawyers.detail section .inner ul.past_seminar_list{
		padding: 20px 14px;
	}
}
