@charset "UTF-8";

/* ▼▼▼ 業務分野一覧
=====================================*/
.title_box{background: url(../img/practice_areas/title_bg_pc.jpg)no-repeat top center/cover;}

.read{
	margin-bottom: 120px;
	text-align: center;
}
/* タイトル背景文字 */
section .boder_title::before{
	content: "PRACTICE AREAS";
	color: #F8F8F8;
	font-size: 108px;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	position: absolute;
	top: -60px;
	z-index: -2;
	}
section ul.practice_areas_list{
	display: flex;
	flex-wrap: wrap;
	max-width: 930px;
	margin: 0 auto;
	}
	section ul.practice_areas_list li{
		width: 32.9%;
		margin: 2px;
	}
	section ul.practice_areas_list li > label{
		display: flex;
		align-items: center;
		height: 88px;
		padding: 0 10px;
		background: #F0F0F0;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.5;
		position: relative;
	}
	section ul.practice_areas_list li > label:hover{
		cursor: pointer;
	}
	section ul.practice_areas_list li > label span{
		margin-right: 10px;
	}
	section ul.practice_areas_list li > label::after{
		content: "";
		width: 8px;
		height: 8px;
		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: 20px;
	}
	/* ポップアップウインドウの設定 */
	.popup{
		box-shadow: 0 0 0 9999px rgba(180, 180, 180,.7);
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 80vw;
		height: 70vh;
		max-width: 1000px;
		max-height: 600px;
		z-index: 9999;
	}
	/* チェックボックスの初期設定 */
	.popup-on{
	  display: none;
	}
	/* チェックされたらポップアップウインドウを開く */
	/* .popup-on:checked + .popup{ */
	.popup-on:checked + .popup{
	  display: block;
	}
	/* 閉じるアイコン（右上） */
	.icon-close{
		width: 110px;
		height: 50px;
	  font-size: 40px;
		font-size: 32px;
		line-height: 50px;
		font-family: 'Oswald', sans-serif;
	  position: absolute;
		top: -60px;
	  right: 0;
		z-index: 99999;
	}
	.icon-close:hover{
		cursor: pointer;
	}
	/* 閉じるボタン */
	.icon-close::before,
	.icon-close::after{
		display: inline-block;
		content: "";
		width: 25px;
		height: 4px;
		background: #000;
		position: absolute;
		top: 25px;
		right: 0;
	}
	.icon-close::before{
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.icon-close::after{
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	/* ポップアップの内容 */
	.popup-content {
		background-color: #fff;
		width: 90vw;
		height: 70vh;
		max-width: 1000px;
		max-height: 600px;
		padding: 50px 7%;
		overflow-y: scroll;
	}
	.popup-content::before{
		content: "";
		width: 100%;
		height: 5px;
		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: 0;
		left: 0;
	}
	.popup-content h3{
		margin-bottom: 30px;
		font-size: 40px;
		text-align: center;
		line-height: 1.6;
	}
	.popup-content p{
		margin-bottom: 60px;
	}
	.popup-content p:last-child{
		margin-bottom: 0;
	}

/* ▼ 英語
----------------------------------------*/
section .boder_title:lang(en)::before{
	display: none;
}
section ul.practice_areas_list li:lang(en){
	width: 23.9%;
	background: #F0F0F0;
	padding: 25px 20px;
	margin: 5px;
	text-align: center;
	font-size: 20px;
	line-height: 1.2;
	}
	section ul.practice_areas_list li span:lang(en){
		display: block;
		text-align: center;
	}
	section ul.practice_areas_list li span:nth-child(2){
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		margin: 0 auto;
	}

/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px){
	.title_box{background: url(../img/practice_areas/title_bg_sp.jpg)no-repeat top center/cover;}

	.read{
		margin-bottom: 60px;
		text-align: left;
	}
	/* タイトル背景文字 */
	section .boder_title::before{
		font-size: 60px;
		top: -35px;
		white-space: nowrap;
		}
		section ul.practice_areas_list li{
			width: 48%;
			margin: 3px;
		}
		section ul.practice_areas_list li > label{
			padding: 0 30px 0 10px;
			font-size: 14px;
		}
		section ul.practice_areas_list li > label span{
			margin-right: 7px;
			max-width: 35px;
		}
		section ul.practice_areas_list li > label::after{
			width: 7px;
			height: 7px;
			right: 13px;
		}
		.popup{
			width: 90vw;
		}

		.popup::before{
			height: 500%;
			top: -250%;
		}
		/* 閉じるアイコン（右上） */
		.icon-close{
			width: 75px;
			height: 45px;
			font-size: 20px;
			top: -45px;
		}
		/* 閉じるボタン */
		.icon-close::before,
		.icon-close::after{
			width: 20px;
			height: 3px;
		}
		/* ポップアップの内容 */
		.popup-content::before{
			height: 4px;
		}
		.popup-content h3{
			margin-bottom: 20px;
			font-size: 24px;
		}
		.popup-content p{
			margin-bottom: 40px;
		}
	/* ▼ 英語
	----------------------------------------*/
	section ul.practice_areas_list li:lang(en){
		width: 47.9%;
		padding: 10px;
		margin: 3px;
		font-size: 14px;
		}
		section ul.practice_areas_list li span:lang(en) img{
			max-width:35px;
		}
		section ul.practice_areas_list li span:nth-child(2){
			height: 35px;
		}

}