@charset "UTF-8";

/* ▼▼▼ トップ
======================================================*/
/* ▼ 共通
----------------------------------------*/
.oswald{
	letter-spacing: .05em;
}
section h2.oswald{
	margin-bottom: 40px;
	font-size: 50px;
	}
	section h2.oswald span{
		display: block;
		color: #969696;
		font-size: 16px;
		font-family: 'Noto Serif JP', serif;
	}
	section h2.oswald + p{
		margin-bottom: 50px;
	}

#main{
	background: none;
}
/* ▼ 背景動画
----------------------------------------*/
#bg_video{
	width: 100%;
	height: 100vh;
	position: fixed;
	top:0;
	z-index: -1;

	}
	#bg_video::before{
		content: "";
		width: 100%;
		height: 100%;
		background: rgba(23, 49, 85,.25);
		position: absolute;
		top: 0;
		left: 0;
	}
	#bg_video video{
		min-width: 100%;
	  min-height: 100vh;
	}
/* ▼ メインビジュアル
----------------------------------------*/
#mv{
	height: 100vh;
	min-height: 568px;
	position: relative;
	font-size: 0;
	}
	#mv .mv_read{
		height: 345px;
		background: url(../img/top/mv_logo.svg)no-repeat center center/contain;
		padding: 100px 0;
		margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
	}
	#mv .mv_read p{
		color: #fff;
		text-align: center;
		font-size: 20px;
		line-height: 1;
	}
	#mv .mv_read p.oswald{
		margin-bottom: 20px;
		font-size: 96px;
	}
	#mv .mv_read p:nth-child(2){
		font-weight: bold;
		letter-spacing: .2em;
	}
	/* 緊急情報 */
	#mv .caution{
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		background: #fff;
		border-left: 10px solid #C33636;
		padding: 0;
		margin: auto;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 1;
		}
		#mv .caution dt{
			width: 140px;
			color: #C33636;
			font-size: 16px;
			font-weight: bold;
			text-align: center;
			letter-spacing: .15em;
			position: relative;
		}
		#mv .caution dt::after{
			content: "";
			width: 1px;
			height: 150%;
			background: #C33636;
			position: absolute;
			top: -20%;
			right: 0;
		}
		#mv .caution dd{
			width: calc(100% - 140px);
		}
		#mv .caution dd a{
			display: flex;
			align-items: center;
			height: 60px;
			padding:0 5%;
			font-size: 14px;
		}
		#mv .caution dd .data{
			margin-right: 4%;
		}
		#mv .caution dd p{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		/* IEのみ */
		@media all and (-ms-high-contrast: none) {
			#mv .caution dd p{
				font-family: '小塚ゴシック',sans-serif;
			}
		}
		#mv .caution.arrow::before{
			right: 20px;
		}

/* ▼ TOPICS & SEMINAR
----------------------------------------*/
#sec_01 .flex_box{
	justify-content: space-between;
	}
	#sec_01 .flex_box > div{
		width: 45%;
	}
	#sec_01 .flex_box > div h2{
		text-align: center;
	}
	#sec_01 .flex_box > div h2 span{
		text-align: center;
	}
	#sec_01 .flex_box .article_list{
		margin-bottom: 60px;
	}
	#sec_01 .flex_box .article_list a{
		display: block;
		border-bottom: 1px solid #fff;
		padding: 25px 5% 25px 0;
	}
	#sec_01 .flex_box .article_list a:first-child{
		border-top: 1px solid #fff;
	}
	#sec_01 .flex_box .article_list a p:nth-child(1){
		margin-bottom: 5px;
		font-size: 12px;
		font-weight:bold;
	}
	#sec_01 .flex_box .article_list a p span.cat::after{
		content: "｜";
	}
	#sec_01 .flex_box .article_list a p span.cat2::after{
		/*content: "｜";*/
	}
	#sec_01 .flex_box .article_list a p.arrow_s:before{
		border-top:1px solid #fff;
		border-right:1px solid #fff;
		right: -20px;
	}
	#sec_01 .btn a{
		margin: auto;
	}

/* ▼ COMPANY & BUSINESS
----------------------------------------*/
#sec_02{
	padding: 0;
	background: #fff;
	}
	#sec_02 .flex_box > div{
		flex: 1;
	}
	#sec_02 .flex_box > div .txt{
		width: 75%;
		background: #fff;
		padding: 40px;
		margin: -80px auto 80px;
		position: relative;
	}
	#sec_02 .flex_box > div .txt h2,
	#sec_02 .flex_box > div .txt h2 span,
	#sec_02 .flex_box > div .txt p{
		text-align: center;
	}
	#sec_02 .btn a{
		margin: auto;
	}

/* ▼ message
----------------------------------------*/
#message{
	height: 600px;
	position: relative;
	}
	#message::before{
		opacity: .55;
		content: "";
		width: 100%;
		height: 100%;
		background: #6b90c6; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #6b90c6 0%, #1f54a2 100%);
		background: -webkit-linear-gradient(-45deg,  #6b90c6 0%,#1f54a2 100%);
		background: linear-gradient(135deg,  #6b90c6 0%,#1f54a2 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90c6', endColorstr='#1f54a2',GradientType=1 );
		position: absolute;
		top: 0;
		left: 0;
	}
	#message::after{
		content: "";
		width: 70vw;
		max-width: 907px;
		height: 374px;
		background: url(../img/top/message.png)no-repeat center center/contain;
		position: absolute;
		top: 90px;
		right: -70px;
	}
	#message h2{
		margin-bottom: 40px;
		color: #fff;
		font-size: 28px;
		letter-spacing: .3em;
	}
	#message h2 span{
		font-size: 50px;
		position: relative;
		font-weight: bold;
	}
	#message h2 + p{
		margin-bottom: 50px;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		line-height: 2.3;
	}

/* ▼ LAWYERS & RECRUIT共通
----------------------------------------*/
.bg_white{
	background: #fff;
	clear: both;
	}
	.bg_fixed{
		max-height: 500px;
		overflow: hidden;
	}
	.bg_fixed .flex_box{
		align-items: center;
	}
	.bg_fixed .txt{
		width: 40%;
		padding:90px 6%;
		background: #173156;
		color: #fff;
	}

/* ▼ LAWYERS
----------------------------------------*/
#lawyers{
	padding-bottom: 0;
	}
	#lawyers h2.oswald,
	#recruit h2.oswald{
		font-size: 60px;
	}
	#lawyers .bg_fixed{
		background-image: url(../img/top/lawyers_img01_pc.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}
	#lawyers .bg_fixed .txt{
		float: right;
	}

/* ▼ RECRUIT
----------------------------------------*/
#recruit .bg_fixed{
	background-image: url(../img/top/recruit_img01_pc.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

/* ▼ RECRUIT
----------------------------------------*/
#download{
	padding-bottom: 0;
}
#download .bg_fixed{
	background-image: url(../img/top/download.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
/* ▼ CONTACT
----------------------------------------*/
.footer_contact{
	padding: 90px 0;
	background: #F8F8F8;
	overflow: hidden;
	position: relative;
	}
	.footer_contact > p.oswald{
		color: #fff;
		font-size: 220px;
		line-height: 1;
		position: absolute;
		top: -35px;
		right: -10px;
	}
	.footer_contact .flex_box > div{
		flex: 1;
		padding: 0 4%;
		position: relative;
	}
	.footer_contact .flex_box > div:not(:last-child)::after{
		content: "";
		width: 1px;
		height: 190px;
		background: #000;
		position: absolute;
		top: 0;
		right: 0;
	}
	.footer_contact .flex_box > div h2{
		margin-bottom: 30px;
		font-size: 24px;
		text-align: center;
	}
	.footer_contact .flex_box > div .tel-moji{
		max-width: 328px;
		background: #173156;
		padding: 3px;
		margin: 0 auto 20px;
		color: #fff;
		font-size: 28px;
		text-align: center;
		position: relative;
	}
	.footer_contact .flex_box > div .tel-moji::before{
		display: inline-block;
		content: "";
		width: 17px;
		height: 22px;
		background: url(../img/icon_tel.svg)no-repeat center center/cover;
		margin:0 15px 0 -15px;
	}
	.footer_contact .flex_box > div .fax{
		margin-bottom: 10px;
		font-size: 18px;
		text-align: center;
	}
	.footer_contact .flex_box > div .address{
		text-align: center;
		line-height: 1.6;
	}

/* ▼▼▼ 多言語
===================================== */
section:lang(en){
	padding: 70px 0;
}
section#sec_01 h2.oswald:lang(en){
	margin-bottom: 20px;
	font-size: 34px;
	text-align: left;
}
section#sec_01 h2.oswald + p:lang(en){
	margin-bottom: 0;
	text-align: left;
}
/* ▼▼▼ 768px〜1200px
======================================================*/
@media screen and (max-width: 1200px){
	section h2.oswald,
	section h2.oswald + p{
		margin-bottom: 20px;
	}
}
/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px){
	/* ▼ 共通
	----------------------------------------*/
	section h2.oswald{
		margin-bottom: 30px;
		font-size: 38px!Important;
		text-align: center;
		}
		section h2.oswald span{
			text-align: center;
		}
		section h2.oswald + p{
			margin-bottom: 30px;
			text-align: center;
		}

	/* ▼ 背景動画
	----------------------------------------*/

	/* ▼ メインビジュアル
	----------------------------------------*/
	#mv{
		height: auto;
		min-height: unset;
		}
	#mv p.sp video{
		width: 100%;
	}
	#mv .mv_read{
		height: 85px;
		padding: 16px 0;
		}
		#mv .mv_read p{
			font-size: 11px;
		}
		#mv .mv_read p.oswald{
			margin-bottom: 10px;
			font-size: 29px;
		}
		/* 緊急情報 */
		#mv .caution{
			height: auto;
			border-left: 6px solid #C33636;
			position: relative;
			}
			#mv .caution dt{
				width: 80px;
				font-size: 14px;
				letter-spacing: 0;
			}
			#mv .caution dt::after{
			}
			#mv .caution dd{
				width: calc(100% - 90px);
			}
			#mv .caution dd a{
				display: block;
				height: auto;
				padding: 2% 7%;
				font-size: 12px;
			}
			#mv .caution dd .data{
				font-size: 12px;
			}
			#mv .caution dd p{
				max-height: 42px;
				line-height: 1.6;
			}
			#mv .caution.arrow::before{
				right: 15px;
			}

	/* ▼ TOPICS & SEMINAR
	----------------------------------------*/
	#sec_01 .flex_box > div{
		width: 100%;
		margin-bottom: 65px;
		}
		#sec_01 .flex_box .article_list{
			margin-bottom: 40px;
		}
		#sec_01 .flex_box .article_list a{
			padding: 20px 5% 20px 0;
		}
		#sec_01 .flex_box .article_list a p.arrow_s:before{
			right: -15px;
		}

	/* ▼ COMPANY & BUSINESS
	----------------------------------------*/
	#sec_02{
		overflow: auto;
		}
		#sec_02 .flex_box > div .txt{
			width: 85%;
			padding: 30px 20px;
			margin: -50px auto 50px;
		}
	/* ▼ message
	----------------------------------------*/
	#message{
		height: auto;
		padding: 60px 0 ;
		}
		#message::after{
			width: 70vw;
			height: 120px;
			top: 0;
			right: -13px;
		}
		#message h2{
			margin-bottom: 20px;
			font-size: 16px;
		}
		#message h2 span{
			font-size: 29px;
		}
		#message h2 + p{
			max-width: 65%;
			margin-bottom: 35px;
			font-size: 14px;
		}

	/* ▼ LAWYERS & RECRUIT共通
	----------------------------------------*/
	.bg_fixed{
		padding-top: 250px;
		max-height: unset;
		background-position: top center;
		background-size: 130%!Important;
		background-attachment: unset!Important;
	}
	.bg_fixed .txt{
		flex: none;
		width: 100%;
		padding: 40px 20px 50px;
	}
	.btn.white a{
		margin: 0 auto;
	}
	/* ▼ LAWYERS
	----------------------------------------*/
	#lawyers .bg_fixed{
		background-image: url(../img/top/lawyers_img01_sp.jpg);
	}
	/* ▼ RECRUIT
	----------------------------------------*/
	#recruit .bg_fixed{
		background-image: url(../img/top/recruit_img01_sp.jpg);
	}
	/* ▼ CONTACT
	----------------------------------------*/
	.footer_contact{
		padding: 15px 0;
		}
		.footer_contact > p.oswald{
			color: #fff;
			font-size: 90px;
			top: -15px;
			right: 0;
			letter-spacing: -.03em;
		}
		.footer_contact .flex_box > div{
			padding: 30px 25px;
		}
		.footer_contact .flex_box > div:not(:last-child)::after{
			width: 100%;
			height: 1px;
			top: inherit;
			bottom: 0;
			right: 0;
			left: 0;
		}
		.footer_contact .flex_box > div h2{
			margin-bottom: 15px;
			font-size: 20px;
		}
		.footer_contact .flex_box > div .tel-moji{
			margin: 0 auto 15px;
			font-size: 23px;
		}
		.footer_contact .flex_box > div .tel-moji::before{
			vertical-align: -2px;
		}
	/* ▼▼▼ 多言語
	===================================== */
	section:lang(en){
		padding: 50px 0;
	}
}