@charset "utf-8";
#mv{padding-top: 110px;}
#mv div{
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url("../images/top/mv_pc.jpg");
	height: 690px;
	width: 100%;
}
#mv img{display: none;}
@media screen and (max-width:1440px) and (min-width:1050px){
	#mv div{
		background-size: 139%;
		height: 48vw;
	}
}
#importantsection{
	background-color: #f8f6f6;
	padding: 20px 0;
}
#importantsection .rapperfix{
	background-color: #fff;
	box-shadow: 0 0 3px rgba(0,0,0,.15);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding: 20px 2%;
}
#importantsection .rapperfix .leftbox{
	width: 22%;
	text-align: center;
	box-sizing: border-box;
	background-color: #fc215f;
	font-size: 1.8rem;
	line-height: 1.3;
	padding: 28px 5%;
	color: #fff;
	font-weight: 500;
}
#importantsection .rapperfix .rightbox{
	width: 74%;
	font-size: 1.5rem;
	letter-spacing: 0.088em;
	line-height: 1.4;
}
#importantsection .rapperfix .rightbox ul li:not(:last-child){margin-bottom: 5px;}
#importantsection .rapperfix .rightbox ul li a{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
#importantsection .rapperfix .rightbox ul li a span{transition: .4s;}
#importantsection .rapperfix .rightbox ul li a .date{
	width: 17%;
	color: #7b8084;
	font-weight: 700;
}

#importantsection .rapperfix .rightbox ul li a .title{
	width: 82%;
	color: #684c46;
}
.section_base h2{
	text-align: center;
	font-size: 3.3rem;
	letter-spacing: 0.15em;
	font-weight: 300;
	color: #353535;
}
#section1{
	padding: 75px 0 100px;
	background: url("../images/common/bg_01.png") no-repeat 40% -70px;
}
#section1 .tab_nav{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content:center;
	margin: 60px auto;
}
#section1 .tab_nav li{
	line-height: 1.3;
	font-size: 1.8rem;
	-webkit-transform: skewX(150deg);
	-moz-transform: skewX(150deg);
	transform: skewX(150deg);
}
#section1 .tab_nav li:not(:first-child){
	border-left: solid 1px #d2d2d2;
	color: #b5c5dc;
}
#section1 .tab_nav li a{
	display:block;
	transform: skewX(-150deg);
	padding:0 2em;
	color: #a1a5a8;
}
#section1 .tab_nav li.select a{color: #071b2b;}
#section1 .news_contents{display: none;}
#section1 .news_contents.default{display: block;}
#section1 .news_list li{
	padding: 0 2% 25px;
	margin-bottom: 25px;
}
#section1 .news_list li:not(:last-child){border-bottom: solid 1px #ddd;}
#section1 .news_list li a{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#section1 .news_list li a .date{
	position: relative;
	width: 22%;
	font-weight: 500;
	letter-spacing: 0.0375em;
}
#section1 .news_list li a .date::after{
	text-align: center;
	content: "カテゴリ";
	line-height: 1;
	padding: 6px 0.25em;
	background-color: #666;
	font-size: 1.2rem;
	letter-spacing: 0;
	display: inline-block;
	margin-left:0.75em;
	color: #fff;
	min-width: 100px;
	box-sizing: border-box;
}
#section1 .news_list li.category1 a .date::after{background-color:#011e97;content: "お知らせ";}
#section1 .news_list li.category2 a .date::after{background-color:#1b77d4;content: "医療関係者向け";letter-spacing: -0.02em;}
#section1 .news_list li.category3 a .date::after{background-color:#01978e;content: "プレスリリース";}
#section1 .news_list li.category4 a .date::after{background-color:#01973d;content: "事業活動報告";letter-spacing: -0.02em;}
#section1 .news_list li a .title{width: 78%;}
@media screen and (max-width:1200px) and (min-width:1050px){
	#section1 .news_list li a .date{width: 25%;}
	#section1 .news_list li a .title{width: 74%;}
}
#section2 > div > ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding: 0 1.66%;
}
#section2 > div > ul li{
	width: 48.5%;
	margin-top: 50px;
}
#section2 > div > ul li a,
#section2 > div > ul li a span,
#section2 > div > ul li a .imgbox img{
	position: relative;
	display: block;
	transition: .35s;
}
#section2 > div > ul li a .imgbox{
	overflow: hidden;
	border-radius: 7px;
	background-color: #fff;
}
#section2 > div > ul li a .titlebox{
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 2.0rem;
	letter-spacing: 0.15em;
	background-color: #fff;
	padding: 17px 2.5em 11px;
	line-height: 1.4;
	border-top-left-radius: 7px;
	font-weight: 500;
}
#section2 > div > ul li a .titlebox::after{
	transition: .35s;
	position: absolute;
	content: " ";
	border-left: solid 1.5px #0928a5;
	border-bottom: solid 1.5px #0928a5;
	width: 12px;
	height: 12px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	top:50%;
	right:7.5%;
	margin-top: -2px;
}
#section3{
	padding: 160px 0 200px;
	background: url("../images/common/bg_02.png") no-repeat 40% 0;
}
#section3 ul{
	padding-top: 85px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content:center;
}
#section3 ul li{
	margin: 0 20px;
	overflow: hidden;
}
#section3 ul li a{
	position: relative;
	text-align: center;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items: center;
	width: 370px;
	height: 480px;
	border-radius: 10px;
	background-color: #014892;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	font-size: 2.25rem;
	letter-spacing: 0.125em;
	color: #fff;
	overflow: hidden;
}
#section3 ul li a::after{
	position: absolute;
	content: " ";
	width: 100%;
	height: 100%;
	background-color: #014892;
	top: 0;
	left: 0;
	opacity: 0;
	transition: .35s;
}
#section3 ul li.know01 a{background-image: url("../images/top/section2_img01.jpg");}
#section3 ul li.know02 a{background-image: url("../images/top/section2_img02.jpg");}
#section3 ul li a span{
	z-index: 2;
	position: relative;
	display: inline-block;
	padding: 0 1em;
}
#section3 ul li a span::after{
	transition: .35s;
	position: absolute;
	content: " ";
	border-left: solid 1.5px #fff;
	border-bottom: solid 1.5px #fff;
	width: 12px;
	height: 12px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	top:50%;
	right:0;
	margin-top: -6px;
}
/*----------------------------------------------------------------------------------
PCのみ
----------------------------------------------------------------------------------*/
@media screen and (min-width:1051px){
	#importantsection .rapperfix .rightbox ul li a:hover .date,
	#section1 .news_list li a:hover .date{color: #014892;}
	#importantsection .rapperfix .rightbox ul li a:hover .title,
	#section1 .news_list li a:hover .title{color: #014892;text-decoration: underline;}
	#section1 .tab_nav li a:hover{color: #014892;}
	#section2 > div > ul li a:hover .imgbox{background-color: #014892;}
	#section2 > div > ul li a:hover .imgbox img{opacity: .75;}
	#section2 > div > ul li a:hover .titlebox{color: #014892;}
	#section2 > div > ul li a:hover .titlebox::after{right: 5%;}
	#section3 ul li a:hover::after{opacity: .3;}
	#section3 ul li a:hover span::after{right: -2%;}
}
/*----------------------------------------------------------------------------------
タブレット・SP
----------------------------------------------------------------------------------*/
@media screen and (max-width:1050px){
	#mv{padding-top: 70px;}
}
/*----------------------------------------------------------------------------------
タブレット
----------------------------------------------------------------------------------*/
@media screen and (max-width:1050px) and (min-width:641px){
	#mv div{
		background-size: 139%;
		height: 48vw;
	}
	#importantsection .rapperfix .leftbox,
	#importantsection .rapperfix .rightbox{width: 100%;}
	#importantsection .rapperfix .leftbox{padding: 12px 5%;}
	#importantsection .rapperfix .rightbox{margin-top: 20px;}
	#section1 .news_list li a .date::after{margin-left: 0;}
	#section2 > div > ul li a .titlebox{font-size: 1.65rem;}
	#section3 ul li{width: 40%;}
	#section3 ul li a{
		width: 100%;
		height: 60vw;
		background-size: auto 100%;
	}
}
/*----------------------------------------------------------------------------------
SP
----------------------------------------------------------------------------------*/
@media screen and (max-width: 640px){
	#mv div{
		background: none;
		height: auto;
	}
	#mv img{display: block;}
	#importantsection{padding: 24px 0;}
	#importantsection .rapperfix{
		background-color: #fff;
		display: block;
		padding: 0;
	}
	#importantsection .rapperfix .leftbox,
	#importantsection .rapperfix .rightbox{
		width: 100%;
		padding: 17px 5%;
		box-sizing: border-box;
	}
	#importantsection .rapperfix .leftbox{font-size: 1.5rem;}
	#importantsection .rapperfix .rightbox{font-size: 1.3rem;}
	#importantsection .rapperfix .rightbox ul li{margin-bottom: 15px!important;}
	#importantsection .rapperfix .rightbox ul li a{display: block;}
	#importantsection .rapperfix .rightbox ul li a .date,
	#importantsection .rapperfix .rightbox ul li a .title{
		width: 100%;
		display: block;
	}
	.section_base h2{
		font-size: 2.15rem;
		letter-spacing: 0.1em;
	}
	#section1{
		padding: 55px 0 70px;
		background-size: 45% auto;
		background-position: 10% -10px;
	}
	#section1 .tab_nav{margin: 30px auto;}
	#section1 .tab_nav li{font-size: 1.3rem;}
	#section1 .tab_nav li a{
		padding:0 0.75em;
		letter-spacing: -0.05em;
	}
	#section1 .news_list li{
		padding: 0 0 20px;
		margin-bottom: 20px;
	}
	#section1 .news_list li a{display: block;}
	#section1 .news_list li a .date,
	#section1 .news_list li a .title{
		width: 100%;
		display: block;
	}
	#section1 .news_list li a .date::after{
		position: absolute;
		right: 0;
		padding: 5px 0.15em;
		font-size: 1rem;
		margin-left:0.2em;
	}
	#section2{padding-bottom: 30px;}
	#section2 > div > ul{
		display: block;
		padding: 0;
	}
	#section2 > div > ul li{
		width: 100%;
		margin-top: 30px;
	}
	#section2 > div > ul li a .titlebox{
		position: relative;
		font-size: 1.5rem;
		padding: 17px 2.5em 0;
		text-align: center;
	}
	#section2 > div > ul li a .titlebox::after{
		width: 10px;
		height: 10px;
		right:5%;
		margin-top: 2px;
	}
	#section3{
		padding: 50px 0 60px;
		background-size: 45% auto;
		background-position: 10% 0;
	}
	#section3 ul{
		padding-top: 40px;
		display: block;
	}
	#section3 ul li{margin: 0 0 20px;}
	#section3 ul li a{
		text-align: left;
		display: block;
		width: 100%;
		height: auto;
		border: solid 1px #ddd;
		background-color: #fff;
		background-size: 30% auto;
		background-position: left center;
		font-size: 1.45rem;
		letter-spacing: 0.1em;
		color: #071b2b;
		padding: 32px 5% 32px 36%;
		box-sizing: border-box;
		font-weight: 500;
	}
	#section3 ul li a span{
		padding: 0;
		display: block;
	}
	#section3 ul li a span::after{
		border-left: solid 1.5px #021e8c;
		border-bottom: solid 1.5px #021e8c;
		width: 8px;
		height: 8px;
		top:50%;
		right:0;
		margin-top: -4px;
	}
}