/* ******************************************************************
 *	File name		: style.css
 *	Summary			: css base
 * ******************************************************************
 */

/* -----------------------------------------------------------------
   second base
----------------------------------------------------------------- */

main{
	position:relative;
	width:100%;
	max-width:100%;
	margin:0 auto;
	padding:170px 0 0;
	}
	#second_base{
		position:relative;
		width:1470px;
		max-width:100%;
		margin:0 auto;
		padding-left:435px;
	}
	#fixleft{
		position:absolute;
		top:0px;
		left:0px;
		width:435px;
		padding-left:35px;
	}
	#main_contents{
		position:relative;
	}
	#main_img{
		position:relative;
		width:100%;
		height:auto;
		margin:0 0 100px;
		padding-right:35px;
		-moz-border-radius:20px 0 0 20px;
		-webkit-border-radius:20px 0 0 20px;
		border-radius:20px 0 0 20px;
		overflow:hidden;
}

#sub_nav{
	position:relative;
	width:200px;
	z-index:100;
	transition-duration:0.5s;
	}
	#sub_nav.fix_nav{
		position:fixed;
		top:100px;
		padding:20px;
		background:rgba(255,255,255,0.9);
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
		border-radius:15px;
		z-index:100;
	}
	#sub_nav.end_nav{
		opacity:0;
	}
	#sub_nav ul{
		width:100%;
		border-top:1px solid rgba(59,65,130,0.2);
	}
	#sub_nav ul li{
		border-bottom:1px solid rgba(59,65,130,0.2);
	}
	#sub_nav ul li a{
		display:block;
		position:relative;
		padding:10px 0 10px 30px;
		font-weight:normal;
		font-size:0.9rem;
		text-align:left;
		transition-duration:0.5s;
		color:var(--base-color);
		overflow:hidden;
		}
		#sub_nav.end_nav ul li a{
			height:0px;
			padding:0px 0 0px 35px;
	}
	#sub_nav ul li a:hover{
		font-weight:bold;
		text-decoration:none;
		background:rgba(59,65,130,0.1);
	}
	#sub_nav ul li.active a{
		font-weight:bold;
	}
	#sub_nav ul li.active a::before,
	#sub_nav ul li.active a::after{
		content:" ";
		position:absolute;
		}
		#sub_nav ul li.active a::before{
			top:15px;
			left:15px;
			width:2px;
			height:12px;
			background:#3B4182;
		}
		#sub_nav ul li.active a::after{
			top:17px;
			left:11px;
			width:8px;
			height:8px;
			border-bottom:2px solid #3B4182;
			border-right:2px solid #3B4182;
			transform:rotate(45deg);
}

/* --- responsive --- */
@media only screen and (max-width:1100px){
	main{
		padding:80px 0 0;
		}
		#second_base{
			padding-left:0px;
		}
		#fixleft{
			position:relative;
			top:0px;
			left:0px;
			width:100%;
			margin:0 0 30px;
			padding:0 35px;
		}
		#main_img{
			width:calc(100% - 70px);
			height:auto;
			left:35px;
			margin:0 0 50px;
			padding-right:0px;
			-moz-border-radius:20px;
			-webkit-border-radius:20px;
			border-radius:20px;
			overflow:hidden;
	}
	#sub_nav{
		position:relative;
		width:100%;
		z-index:100;
		}
		#sub_nav.fix_nav{
			position:relative;
			top:0px;
		}
		#sub_nav ul{
			display:-webkit-flex;
			display:flex;
			-webkit-box-pack:justify;
			-ms-flex-pack:justify;
			justify-content:space-between;
			flex-wrap:wrap;
			border:none;
		}
		#sub_nav ul li{
			width:48%;
			margin:0 0 5px;
			border:1px solid rgba(59,65,130,0.2);
		}
		#sub_nav ul li a{
			padding:10px;
			text-align:center;
	}
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#fixleft{
		padding:0 20px;
	}
	#main_img{
		width:calc(100% - 40px);
		left:20px;
		margin:0 0 20px;
	}
	#sub_nav ul li a{
		padding:5px;
		font-size:0.8rem;
	}
}

/* -----------------------------------------------------------------
   second_base_100
----------------------------------------------------------------- */

#second_base_100{
	position:relative;
	width:1470px;
	max-width:100%;
	margin:0 auto;
	padding-bottom:calc(5vw + 50px);
	text-align:center;
	}
	#second_base_100 #pnkz{
		margin:0 0 40px !important;
		padding:0 35px;
	}
	#second_base_100 .page_title,
	#second_base_100 .page_title p{
		text-align:center !important;
}

/* -----------------------------------------------------------------
   section
----------------------------------------------------------------- */

#main_contents section{
	width:100%;
	padding-left:35px;
	padding-right:35px;
	padding-bottom:calc(10vw + 50px);
	}
	#main_contents section.bg_gray{
		background:#F2F2F2;
}

#main_contents section object{
	position:absolute;
	top:-9.7vw;
	left:0px;
	width:100%;
	height:10.4vw;
}
#main_contents section .contents{
	position:relative;
	width:1400px;
	max-width:100%;
	padding:0px;
	margin:0 auto;
	padding:0px 0 0px 400px;
}
#main_contents section .contents_100{
	position:relative;
	width:1400px;
	max-width:100%;
	padding:0px;
	margin:0 auto;
	text-align:left;
	padding:0px;
}

/* --- responsive --- */
@media only screen and (max-width:1100px){
	#main_contents section{
		padding-left:20px;
		padding-right:20px;
		}
		#main_contents section.bg_gray{
			background:#F2F2F2;
	}
	#main_contents section .contents{
		width:767px;
		padding:0px;
	}
}

/* -----------------------------------------------------------------
   h
----------------------------------------------------------------- */

#main_contents h3{
	position:relative;
	margin:0 0 40px;
	padding:0 0 0px;
	font-weight:bold;
	font-size:2.3rem;
	text-align:left;
	line-height:1.2;
	color:var(--base-color);
	}
	#main_contents h3.h3_blue{
		color:var(--base-color);
		line-height:1.5;
	}
	#main_contents h3 *{
		color:var(--base-color);
	}
	#main_contents h3 span{
		display:block;
		margin:0 0 7px;
		font-weight:bold;
		font-size:1.2rem;
		color:var(--base-color);
	}
	#main_contents h3 span.title_ex{
		display:inline-block;
		margin:0 0 0 10px;
		font-weight:bold;
		font-size:1.0rem;
		color:#000;
}

#main_contents h4{
	position:relative;
	margin:0 0 15px;
	font-weight:500;
	font-size:1.5rem;
	text-align:left;
	line-height:1.75;
}

/* --- responsive --- */
@media only screen and (max-width:500px){
	#main_contents h3{
		font-size:1.7rem;
		}
		#main_contents h3 span{
			font-size:1.0rem;
	}
}

/* -----------------------------------------------------------------
   p
----------------------------------------------------------------- */

main p{
	margin:0 auto 25px;
	font-size:1.1rem;
	text-align:left;
	line-height:2;
}
@media only screen and (max-width:767px){
	main p{
		margin:0 auto 20px;
		font-size:1.0rem;
	}
}

/* -----------------------------------------------------------------
   figure
----------------------------------------------------------------- */

figcaption{
	margin:5px 0 0;
	text-align:left
}
@media only screen and (max-width:767px){
	figcaption{
		margin:3px 0 0;
		font-size:0.87rem;
	}
}

/* -----------------------------------------------------------------
   pnkz
----------------------------------------------------------------- */

#pnkz{
	display:-webkit-flex;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:100%;
	height:30px;
	margin:0 auto 100px;
	padding:0px;
	max-width:100%;
	text-align:left;
	background:none;
	list-style:none;
	z-index:100;
	}
	#pnkz *{
		font-size:0.87rem;
		color:#000;
	}
	#pnkz ul{
		position:relative;
		width:100%;
		max-width:100%;
		margin:0 auto;
		list-style:none;
	}
	#pnkz ul li{
		display:inline-block;
		position:relative;
		padding-left:20px;
		color:var(--base-color);
		}
		#pnkz ul li:first-child{
			padding-left:0px;
		}
		#pnkz ul li::before{
			content:" ";
			position:absolute;
			top:calc(50% - 3px);
			left:-5px;
			width:7px;
			height:7px;
			border-top:1px solid var(--base-color);
			border-right:1px solid var(--base-color);
			margin:0 10px;
			transform:scale(1,0.7) rotate(45deg);
		}
		#pnkz ul li:first-child::before{
			display:none;
		}
		#pnkz ul li a{
			text-decoration:underline;
			color:var(--base-color);
}
/* --- responsive --- */
@media only screen and (max-width:1100px){
	#pnkz{
		display:none;
	}
}

/* -----------------------------------------------------------------
   page_title
----------------------------------------------------------------- */

.page_title{
	position:relative;
	margin:0 0 50px;
	text-align:left;
	}
	.page_title *{
		color:var(--base-color);
	}
	.page_title p{
		font-size:1.1rem;
		margin:0 0 7px;
	}
	.page_title p br{
	}
	.page_title h2{
		margin:0 0 20px;
		font-weight:bold;
		font-size:4.0rem;
		line-height:1;
}

/* --- responsive --- */
@media only screen and (max-width:1100px){
	.page_title{
		margin:0 0 30px;
	}
	.page_title br{
		display:none;
	}
	.page_title p{
		font-size:1.0rem !important;
	}
	.page_title h2{
		font-size:2.0rem !important;
	}
}

/* -----------------------------------------------------------------
   more_read
----------------------------------------------------------------- */

.more_read{
	position:relative;
	bottom:0px;
	left:0px;
	width:100%;
	height:70px;
	text-align:center;
	transition-duration:0.5s;
	opacity:1;
	}
	.more_read span{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:relative;
		width:336px;
		max-width:80%;
		height:70px;
		margin:0 auto;
		font-weight:bold;
		font-size:1.2rem;
		background:#3C4183;
		border:1px solid #3C4183;
		-moz-border-radius:35px;
		-webkit-border-radius:35px;
		border-radius:35px;
		color:#FFF;
		cursor:pointer;
		transition-duration:0.5s;
		z-index:10;
		overflow:hidden;
	}
	.more_read span:hover{
		background:#FFF;
		color:#3C4183;
}
.more_read::before{
	content:" ";
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	height:200px;
	background:linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0));
	z-index:0;
}
.bg_gray .more_read::before{
	background:linear-gradient(0deg, rgba(242,242,242,1), rgba(242,242,242,1), rgba(242,242,242,0));
}

.read_contents{
	position:relative;
	overflow:hidden;
}
.read_contents.open_read .more_read{
	margin-top:0px !important;
	opacity:0;
	}
	.read_contents.open_read .more_read span{
		height:0px;
		border:none;
}

/* -----------------------------------------------------------------
   table
----------------------------------------------------------------- */

table{
	position:relative;
	min-width:25%;
	margin-bottom:20px;
	border-collapse:collapse;
	border-spacing:0px;
	border-top:1px solid #BBBBBB;
	border-left:1px solid #BBBBBB;
	line-height:2;
	}
	table th,
	table td{
		padding:5px 10px 3px 10px;
		font-size:1rem;
		text-align:left;
		border-right:1px solid #BBBBBB;
		border-bottom:1px solid #BBBBBB;
	}
	table th{
		min-width:120px;
		font-weight:bold;
		color:rgba(59,65,130,1);
		background:none;
		vertical-align:middle;
	}	
	.color-black table th{
		color:#FFF;
	}
	table td{
		font-weight:normal;
}
/* th */
table.th_fwn th{font-weight:normal;}
table.th_center th{text-align:center;}
table.th_left th{text-align:left;}
table.th_right th{text-align:right;}
table.th_middle th{vertical-align:middle;}

/* td */
table.td_fwb th{font-weight:bold;}
table.td_center td{text-align:center;}
table.td_left td{text-align:left;}
table.td_right td{text-align:right;}
table.td_middle td{vertical-align:middle;}

/* ex */
table .bg_blue{background:rgba(0,97,177,0.1);}
table .bg_blue2{background:rgba(0,97,177,0.2);}
table .bg_green{background:rgba(111,185,44,0.1);}
table .bg_green2{background:rgba(111,185,44,0.2);}


/* --- responsive --- */
@media only screen and (max-width:767px){
	table{
		width:100%;
	}
	table th,
	table td{
		font-size:0.94rem;
	}

	table.change_sp_table{
		border:none;
	}
	table.change_sp_table th,
	table.change_sp_table td{
		display:block;
		border:none;
		}
		table.change_sp_table td:last-child{
			border-bottom:1px dotted rgba(0,0,0,0.3);
			margin:0 0 15px;
	}
}

/*-----------------------------------
  sp kumikawari
-----------------------------------*/

table.break_table{}

/* --- responsive --- */
@media only screen and (max-width:767px){
	table.break_table tr{
		display:block;
		margin:0 0 20px;
	}
	table.break_table th,
	table.break_table td{
		display:block;
		width:100% !important;
		padding:0px 10px 0px 10px;
	}
}

table.noborder,
table.noborder tr,
table.noborder th,
table.noborder td{
	border:none;
}




/* -----------------------------------------------------------------
   tableset_01
----------------------------------------------------------------- */

table.tableset_01{
	width:100%;
	border:none;
	}
	table.tableset_01 th,
	table.tableset_01 td{
		padding:5px;
		font-weight:normal;
		font-size:1.0rem;
		text-align:left;
		color:#000;
		border:none;
		background:none;
		vertical-align:text-top;
		}
		table.tableset_01 th *,
		table.tableset_01 td *{
			font-weight:normal;
			font-size:1.0rem !important;
			text-align:left;
	}
	table.tableset_01 th{
		font-weight:bold;
		color:var(--base-color);
	}

@media only screen and (max-width:767px){
	table.tableset_01 th,
	table.tableset_01 td{
		display:block;
		padding:0px;
		font-size:1.0rem;
	}
	table.tableset_01 th{
		display:block;
		color:rgba(59,65,130,1);
	}
	table.tableset_01 td{
		margin:0 0 20px;
	}
}

/* -----------------------------------------------------------------
   ul
----------------------------------------------------------------- */

ul.disc{
	margin-bottom:15px;
	padding-left:20px;
	list-style:disc !important;
	}
	ul.disc > li{
		line-height:1.5;
		margin-bottom:4px;
	}
	ul.disc > li:before,
	ul.disc > li:after{
		display: none;
}
ul.normal,
ol.normal{
	margin-bottom:15px;
	padding-left:0px !important;
	list-style:none !important;
	}
	ul.normal > li{
		line-height:1.5;
		margin-bottom:4px;
		list-style-image:none !important;
}
ul.num{
	margin-bottom:15px;
	padding-left:20px;
	list-style:decimal !important;
	}
	ul.num > li{
		line-height:1.5;
		margin-bottom:4px;
}
ul.abc{
	margin-bottom:15px;
	padding-left:20px;
	list-style:lower-latin !important;
	}
	ul.abc > li{
		line-height:1.5;
		margin-bottom:4px;
}
ul.roma{
	margin-bottom:15px;
	padding-left:20px;
	list-style:lower-roman !important;
	}
	ul.roma > li{
		line-height:1.5;
		margin-bottom:4px;
}
ul.roma2{
	margin-bottom:15px;
	padding-left:20px;
	list-style:upper-roman !important;
	}
	ul.roma2 > li{
		line-height:1.5;
		margin-bottom:4px;
}
ul.try{
	}
	ul.try li{
		position:relative;
		line-height:1.5;
		margin-bottom:6px;
		padding-left:15px;
	}
	ul.try li:after{
		display:block;
		content:" ";
		position:absolute;
		top:5px;
		left:2px;
		border: 6px solid transparent;
		border-left: 6px solid #619DE5;
	}
	.base_green ul.try li:after{
		border-left: 6px solid rgba(111,185,44,1);
}
ul.disc_b,
ul.disc_g{
	padding-left:1em;
	list-style:none;
	}
	ul.disc_b li,
	ul.disc_g li{
		position:relative;
		margin-bottom:7px;
		text-indent:-1em;
		line-height:1.5;
	}
	ul.disc_b li:before,
	ul.disc_g li:before{
		content:" ";
		display:inline-block;
		position:relative;
		width:9px;
		height:9px;
		margin:0 4px 0 0;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
	}
	ul.disc_b li:before{
		background:#0061B1;
	}
	ul.disc_g li:before{
		background:#6EB92C;
}

ul.ul_kakko{
	position:relative;
	}
	ul.ul_kakko::before,
	ul.ul_kakko::after{
		content:" ";
		position:absolute;
		z-index:-1;
	}
	ul.ul_kakko::before{
		top:0px;
		left:3px;
		width:7px;
		height:100%;
		background:#000;
	}
	ul.ul_kakko::after{
		top:1px;
		left:4px;
		width:6px;
		height:calc(100% - 2px);
		background:#FFF;
}

ol{
	margin-bottom:15px;
	padding-left:20px;
	list-style:decimal;
	}
	ol > li{
		line-height:1.5;
		margin-bottom:7px;
}
@media only screen and (max-width:767px){
	main ul li{
		font-size:1.0rem !important;
	}
}

/* -----------------------------------------------------------------
   accordion
----------------------------------------------------------------- */

.accordion{
	position:relative;
	margin-top:-1px;
	margin-bottom:0px !important;
	border-top:1px solid #3C4183;
	border-bottom:1px solid #3C4183;
	}
	/*
	.accordion:has(.active){
		background:rgba(59,65,130,0.1);
	}
	*/
	.accordion_title{
		position:relative;
		margin:0px !important;
		padding:15px 70px 15px 20px;
		font-weight:bold;
		background:linear-gradient(0deg, rgba(59,65,130,0), rgba(59,65,130,0.0));
		color:var(--base-color);
		cursor:pointer;
		transition-duration:0.5s;
	}
	.accordion_title:hover{
		background:linear-gradient(0deg, rgba(59,65,130,0), rgba(59,65,130,0.1));
	}
	.accordion::before{
		content:" ";
		position:absolute;
		top:13px;
		right:20px;
		width:36px;
		height:36px;
		border:1px solid rgba(59,65,130,1);
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		background:rgba(59,65,130,1);
		}
		.accordion:has(.active)::before{
			background:rgba(255,255,255,1);
	}
	.accordion_title::before,
	.accordion_title::after{
		content:" ";
		position:absolute;
		top:32px;
		right:31px;
		width:15px;
		height:2px;
		background:#FFF;
	}
	.accordion_title::after{
		transition-duration:0.5s;
		width:15px;
		right:31px;
		transform:rotate(90deg);
		}
		.accordion_title.active::after{
			width:0px;
			right:38px;
		}
		.accordion_title.active::before,
		.accordion_title.active::after{
			background:rgba(59,65,130,1);
	}
	.accordion_title + div{
		display:none;
		padding-bottom:30px;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
}

.accordion_fake{
	position:relative;
	margin-top:-1px;
	margin-bottom:0px !important;
	border-top:1px solid #3C4183;
	border-bottom:1px solid #3C4183;
	}
	.accordion_fake p{
		position:relative;
		margin:0px !important;
		padding:15px 40px 15px 20px;
		font-weight:bold;
		background:rgba(59,65,130,0.05);
		transition-duration:0.5s;
	}

/* -----------------------------------------------------------------
   section
----------------------------------------------------------------- */

section.fadein{
	transition:0.8s ease-in-out;
	transform:translateY(30px);
	opacity:0;
}
section.fadein.active{
	transform:translateY(0px);
	opacity:1;
}

section{
	position:relative;
	width:1240px;
	max-width:100%;
	margin:0 auto;
}
.contents{
	position:relative;
	width:1440px;
	max-width:100%;
	margin:0 auto;
	padding:20px 20px 90px;
}
.contents_box{
	position:relative;
	width:900px;
	max-width:100%;
	margin:0 auto 90px;
	padding:0px;
}

/* --- responsive --- */
@media screen and (max-width:767px){
}

/* ----- */

.section_title{
	position:relative;
	left:-20px;
	width:900px;
	max-width:calc(100% + 80px);
	margin:0 auto 20px;
	padding:20px;
	text-align:left;
	line-height:1.5;
	color:#3B4182;
	}
	.section_title h2{
		font-weight:600;
		font-size:2.8rem;
	}
	.section_title p{
		font-weight:400;
		font-size:1.2rem;
		letter-spacing:2px;
}

/* --- responsive --- */
@media screen and (max-width:1040px){
	.section_title{
		left:0px;
		width:100%;
		max-width:100%;
		padding:0px;
	}
}
/* --- responsive --- */
@media screen and (max-width:640px){
	.section_title h2{
		font-size:2.0rem;
	}
	.section_title p{
		font-size:1.0rem;
	}
}

/* -----------------------------------------------------------------
   more_btn
----------------------------------------------------------------- */

.more_btn{
	display:inline-block;
	position:absolute;
	top:80px;
	right:calc(50% - 500px);
	height:56px;
	z-index:100;
	}
	.more_btn::before{
		content:" ";
		position:absolute;
		top:0px;
		right:0px;
		width:54px;
		height:54px;
		background:var(--base-color);
		border:1px solid var(--base-color);
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		z-index:0;
		transition-duration:0.5s;
	}
	.more_btn:hover::before{
		background:#FFF;
	}
	.more_btn a{
		display:block;
		position:relative;
		width:100%;
		height:54px;
		padding:17px 80px 0 20px;
		font-weight:bold;
		color:var(--base-color);
		z-index:10;
	}
	.more_btn a:hover{
		text-decoration:none;
	}
	.more_btn a::before,
	.more_btn a::after{
		content:" ";
		position:absolute;
	}
	.more_btn a::before{
		top:28px;
		right:16px;
		width:22px;
		height:1px;
		background:#FFF;
	}
	.more_btn a::after{
		top:22px;
		right:17px;
		width:12px;
		height:12px;
		border-top:1px solid #FFF;
		border-right:1px solid #FFF;
		transform:rotate(45deg);
	}
	.more_btn a:hover::before{
		background:var(--base-color);
	}
	.more_btn a:hover::after{
		border-top:1px solid var(--base-color);
		border-right:1px solid var(--base-color);
}

.bg_blue .more_btn::before{
		border:1px solid #FFF;
	}
	.bg_blue .more_btn a{
		color:#FFF;
	}
	.bg_blue .more_btn a{
		color:#FFF;
}

/* --- responsive --- */
@media screen and (max-width:1100px){
	.more_btn{
		display:inline-block;
		position:relative;
		top:40px;
		right:0px;
		padding-bottom:100px;
	}
}

/* -----------------------------------------------------------------
   back_btn
----------------------------------------------------------------- */

.back_btn{
	position:relative;
	padding:30px 20px　50px;
	text-align:center;
}
.back_btn p{
	display:inline-block;
	position:relative;
	height:56px;
	margin:0 auto;
	text-align:center;
	z-index:100;
	}
	.back_btn p::before{
		content:" ";
		position:absolute;
		top:0px;
		right:0px;
		width:54px;
		height:54px;
		background:var(--base-color);
		border:1px solid var(--base-color);
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
		z-index:0;
		transition-duration:0.5s;
	}
	.back_btn p:hover::before{
		background:#FFF;
	}
	.back_btn a{
		display:block;
		position:relative;
		width:100%;
		height:54px;
		padding:12px 80px 0 20px;
		font-weight:bold;
		color:var(--base-color);
		z-index:10;
	}
	.back_btn a:hover{
		text-decoration:none;
	}
	.back_btn a::before,
	.back_btn a::after{
		content:" ";
		position:absolute;
	}
	.back_btn a::before{
		top:28px;
		right:16px;
		width:22px;
		height:1px;
		background:#FFF;
	}
	.back_btn a::after{
		top:22px;
		right:17px;
		width:12px;
		height:12px;
		border-top:1px solid #FFF;
		border-right:1px solid #FFF;
		transform:rotate(45deg);
	}
	.back_btn a:hover::before{
		background:var(--base-color);
	}
	.back_btn a:hover::after{
		border-top:1px solid var(--base-color);
		border-right:1px solid var(--base-color);
}


/* -----------------------------------------------------------------
   works
----------------------------------------------------------------- */

section.works{
	width:100%;
	padding-left:0px;
	padding-right:0px;
}
section.works #works_list{
	overflow:hidden;
}
section.works .title_box{
	border:1px solid red;
	margin:0 0 0px !important;
}
section.works #works_list ul{
	position:relative;
	width:2270px;
	text-align:left;
	}
	section.works #works_list ul li{
		display:inline-block;
		position:relative;
		top:0px;
		width:414px;
		height:540px;
		margin-left:40px;
		padding:20px;
		}
		section.works #works_list ul li::before{
			content:" ";
			display:block;
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:100%;
			background:#F2F2F2;
			transition-duration:0.5s;
		}
		section.works #works_list ul li:hover::before{
			background:#196C19;
		}
		section.works #works_list ul li a{
			display:block;
			position:relative;
			width:100%;
			height:100%;
			padding:15px;
			text-align:left;
			-moz-border-radius:15px;
			-webkit-border-radius:15px;
			border-radius:15px;
			background:#FFF;
			color:#484E8A;
	}
	section.works #works_list ul li figure{
		display:block;
		position:relative;
		width:100%;
		margin:0 0 15px;
		-moz-border-radius:15px 15px 0 0;
		-webkit-border-radius:15px 15px 0 0;
		border-radius:15px 15px 0 0;
		overflow:hidden;
		}
		section.works #works_list ul li figure img{
			transform:scale(1,1);
			transition-duration:0.5s;
		}
		section.works #works_list ul li.active figure img{
			transform:scale(1.1,1.1);
	}
	section.works #works_list ul li p{
		padding:0 10px;
		font-size:1.2rem;
		line-height:1.5;
	}
	section.works #works_list ul li .w_category{
		position:relative;
		width:100%;
		margin:0 0 10px;
		text-align:left;
		}
		section.works #works_list ul li .w_category span{
			display:inline-block;
			position:relative;
			margin:0 7px 0 0;
			padding:5px 15px;
			font-size:1.0rem;
			background:#196C19;
			color:#FFF;
	}
	section.works #works_list ul li .num{
		display:inline-block;
		margin:0 10px 7px;
		padding:0px;
		font-size:0.9rem;
		border-bottom:1px solid #196C19;
		line-height:1;
	}
	section.works #works_list ul li .date{
		position:absolute;
		bottom:-10px;
		right:20px;
		font-size:0.9rem;
		color:#999;
}

#other_works_section_title{
	position:relative;
	width:100%;
	margin:0 auto 10px;
	padding:20px;
	text-align:center;
	line-height:1.5;
	}
	#other_works_section_title h3{
		font-size:2.0rem;
		text-align:center;
		color:#3B4182;
}

/* --- responsive --- */
@media only screen and (max-width:1100px){
	section.works #works{
		padding-bottom:100px !important;
	}
	section.works #works .section_title{
		margin:0 0 0px;
	}
	section.works #works .contents{
		padding:50px 40px 0px;
	}
}
@media screen and (max-width:767px){
	section.works #works_list ul{
		position:relative;
		width:1085px;
		text-align:left;
	}
	section.works #works_list ul li{
		width:207px !important;
		height:auto;
		margin-left:10px;
		padding:10px;
		}
		section.works #works_list ul li a{
			padding:10px 10px 40px;
	}
	section.works #works_list ul li p{
		padding:0px;
		font-size:0.9rem;
	}
	section.works #works_list ul li .w_category{
		position:relative;
		width:100%;
		margin:0 0 10px;
		text-align:left;
	}
	section.works #works_list ul li .num{
		margin:0 0px 7px;
	}
	section.works #works_list ul li .date{
		bottom:10px;
		right:10px;
		font-size:0.8rem;
	}
}

/* -----------------------------------------------------------------
   table_scroll
----------------------------------------------------------------- */

/* --- responsive --- */
@media screen and (max-width:767px){
	.table_scroll{
		overflow:auto;
		margin-bottom:20px;
		cursor:pointer;
		}
		.table_scroll table{
			margin-bottom:10px;
			width:767px !important;
			max-width:767px !important;
		}
		.table_scroll::-webkit-scrollbar{
			height:10px;
		}
		.table_scroll::-webkit-scrollbar-track{
			background: #555;
			-moz-border-radius:6px;
			-webkit-border-radius:6px;
			border-radius:6px;
		}
		.table_scroll::-webkit-scrollbar-thumb {
			background: #BCBCBC;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
			border-radius:5px;
	}
}

/* -----------------------------------------------------------------
   ul
----------------------------------------------------------------- */

#main_contents ul{
	list-style:none;
	}
	#main_contents ul li{
		margin:0 0 12px;
		font-size:1.2rem;
		text-align:left;
}

#main_contents ul.disc{
	padding-left:20px;
	list-style:disc;
}

/* -----------------------------------------------------------------
   colorbox
----------------------------------------------------------------- */

.colorbox{
	position:relative;
	width:900px;
	max-width:100%;
	margin:50px auto;
	padding:40px;
	text-align:left;
	background:rgba(0,0,0,0.1);
}
.colorbox p{
	font-size: 1.05rem;
}
.colorbox p:last-child{
	margin:0px;
}

/* -----------------------------------------------------------------
   border_box
----------------------------------------------------------------- */

.border_box{
	position:relative;
	width:900px;
	max-width:100%;
	margin:50px auto;
	padding:40px;
	text-align:left;
	border:1px solid #000;
}

/* -----------------------------------------------------------------
   btn
----------------------------------------------------------------- */

.btn_big{
	position:relative;
	width:900px;
	max-width:100%;
	height:135px;
	text-align:center;
	background:linear-gradient(45deg, #1354C5, #60A0DB);
	margin: 60px auto 100px;	
	}
	.btn_big::before,
	.btn_big::after{
		content:" ";
		position:absolute;
		transition-duration:0.5s;
	}
	.btn_big::before{
		top:calc(50% - 25px);
		right:60px;
		width:50px;
		height:50px;
		background:#FFF;
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		border-radius:50%;
	}
	.btn_big a{
		display:-webkit-flex;
		display:flex;
		justify-content:flex-start;
		align-items:center;
		position:relative;
		width:100%;
		height:100%;
		padding:0 150px 0 45px;
		font-weight:500;
		color:#FFF;
		transition-duration:0.5s;
		letter-spacing:3px;
		z-index:100;
	}
	.btn_big a:hover{
		text-decoration:none;
		background:rgba(0,0,0,0.1);
	}
	.btn_big a::before,
	.btn_big a::after{
		content:" ";
		position:absolute;
		right:75px;
		transition-duration:0.5s;
	}
	.btn_big a::before{
		top:calc(50%);
		width:17px;
		height:1px;
		background:#1354C5;
	}
	.btn_big a::after{
		top:calc(50% - 5px);
		width:10px;
		height:10px;
		border-top:1px solid #1354C5;
		border-right:1px solid #1354C5;
		transform:rotate(45deg);
	}
	.btn_big a:hover::before{
		right:77px;
		transform:rotate(90deg);
	}
	.btn_big a:hover::after{
		right:80px;
	}

/* --- responsive --- */
@media screen and (max-width:767px){
	.btn_big{
		width:100%;
	}
	.btn_big a{
		width:100%;
	}
}
@media screen and (max-width: 480px) {
    .btn_big a {
        line-height: 1;
		padding: 0px 100px 0 30px;
        text-align: left;
    }
	.btn_big::before {
		right: 30px;
	}
	.btn_big a::before, .btn_big a::after {
		right: 48px;
	}
	.btn_big a:hover::after {
		right: 50px;
	}
	.btn_big a:hover::before {
		right: 48px;
	}
}