@charset "UTF-8";
body {background:url(../../img/top/bg_top.png) center top no-repeat;}
/* ========================================================================================================
	アイキャッチ
======================================================================================================== */
.ly_top_img {
	width: calc(1200 / 1600 * 100%);
	margin: 0 auto 110px;
}

.ly_top_img span {
	display: block;
	width: 540px;
	margin: 200px auto 0;
}

/* 〇〇から探す
--------------------------------------------------- */
.ly_search {
	width: 742px;
	margin: 0 auto  176px;
	display: flex;
	justify-content: space-between;
}

.ly_search li {
	width: calc(358 / 742 * 100%);
	max-width: 358px;
	background-color: rgba(255,255,255,0.7);
}

.ly_search li:hover {
	opacity: 0.7;
}

.ly_search a {
	display: block;
	text-align: center;
	padding: calc(26 / 358 * 100%) 0;
	position: relative;
	font-size: 1.8rem;
	letter-spacing: 0.01em;
}

/* 右上の▲ */
.ly_search a::after {
	content: "";
	top: 5px;
	right: 5px;
	border-bottom: 1.2rem solid transparent;
	position: absolute;
	z-index: 1;
}

.ly_search .el_search-field a {color: #004098;}
.ly_search .el_search-field a::after {border-right: 1.2rem solid #004098;}

.ly_search .el_search-task a {color: #00A8A0;}
.ly_search .el_search-task a::after {border-right: 1.2rem solid #00A8A0;}

/* 分野から探す・課題から探す クリック時 */
.ly_search li.modal-open:nth-of-type(1) a {background: #004098;}
.ly_search li.modal-open:nth-of-type(1) a::after {border-right: 1.2rem solid #fff;}
.ly_search li.modal-open:nth-of-type(2) a {background: #00A8A0;}
.ly_search li.modal-open:nth-of-type(2) a::after {border-right: 1.2rem solid #fff;}
.ly_search .modal-open a {color: #fff;}

/* スライダー
--------------------------------------------------- */
.bl_slider-wrapper {
	padding-top: calc(15 / 1332 * 100%);
	width: 1332px;
	margin: 0 auto calc(98 / 1600 * 100%);
	background: #fff;
}

.slider {
	width: calc(1200 / 1332 * 100%);
	max-width: 1200px;
}

.bl-slide-item {width: calc(300 / 1200 * 100%);}

.bl-slide-item figure {
	margin-bottom: 20px;
	border-left: 1px solid #fff;
}

.bl-slide-item p {
	font-size: 1.3rem;
	font-weight: 400;
	margin: 0 10px 2rem;
}


/* ========================================================================================================
	Business field 事業領域
======================================================================================================== */
.bl_contents header {margin-bottom: calc(40 / 1200 * 100%);}
.el_top-headline_lv02 {line-height: 1;}

.el_top-headline_lv02 span:nth-of-type(1) {
	font-size: 5.9rem;
	font-weight: 500;
	margin-right: 50px;
	color: #DD594D;
}

.el_top-headline_lv02 span:nth-of-type(2) {
	font-size: 2.4rem;
	font-weight: 400;
}

/* 事業領域の画像
--------------------------------------------------- */
.business-field {
	margin-bottom: calc(98 / 1200 * 100%);
	justify-content: space-between;
}

.business-field .bl_one-third {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48%;
	max-width: 600px;
	margin: 0;
}

.business-field .bl_one-third:hover {
	background-color: #fff;
}

.business-field .bl_one-third a {
	display: block;
	padding: 102px 0;
	text-align: center;
	width: 100%;
	letter-spacing: 0.05em;
	font-size: 2rem;
	font-weight: 400;
	color: #fff;
	line-height: 1;
}

.business-field .bl_one-third a:hover {
	opacity: 0.7;
	text-decoration: none;
}


.business-field .bl_one-third:nth-of-type(1) a {background:url(../../img/top/img_top05.jpg) center center no-repeat;background-size: cover;}
.business-field .bl_one-third:nth-of-type(2) a {background:url(../../img/top/img_top06.jpg) center center no-repeat;background-size: cover;}

/* ========================================================================================================
	ニュース
======================================================================================================== */
.bl_news-area {
    width: 100%;
    border-bottom: 1px solid #BEBEBE;
    box-sizing: border-box;
    margin-bottom: calc(80 / 1200 * 100%);
}
.bl_news-area .bl_news-list {
	width: 100%;
	display: flex;
	font-size: 1.8rem;
	border-top: 1px solid #BEBEBE;
	padding: 1.6666666667% 2.0833333333%;
	align-items: baseline;
}
.bl_news-area .bl_news-list .el_news-data {
	width: 24.347826087%;
	margin-right: 4.347826087%;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	max-width: 150px;
}
.bl_news-area .bl_news-list .el_news-data .el_news-deay {
	width: 51.4285714286%;
	min-width: 150px;
}
.bl_news-area .bl_news-list .el_news-data .el_news-cat {
	display: block;
	width: 28.5714285714%;
	min-width: 80px;
	font-size: 1.4rem;
	line-height: 1;
	color: #fff;
	background: #808080;
	padding: 4px 0 6px;
	text-align: center;
	line-height: 1;
}
.bl_news-area .bl_news-list .el_news-content {
	display: flex;
	align-items: baseline;
	width: 100%;
	justify-content: space-between;
}
.bl_news-area .bl_news-list .el_news-content span {
	display: block;
	font-size:1.4rem;
}
.bl_news-area .bl_news-list .bl_entry-cat span {
	font-size: 1.2rem;
}
.bl_news-area .bl_news-list .el_news-content .el_news-text {
	width: auto;
	word-break: break-all;
}
.bl_news-area .bl_news-list .el_news-content .el_icon-pdf {
	width: auto;
	display: flex;
	align-items: center;
	font-size: 1.4rem;
	margin-left: 2%;
}
.bl_news-area .bl_news-list .el_news-content .el_icon-pdf::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 26px;
	min-width: 20px;
	margin-right: 10px;
	background: url(https://www.takeda-prn.co.jp/img/common/icon_pdf.png) 0 0/contain no-repeat;
}


.bl_entry-cat {
	width: 100%;
	display: flex;
	margin-top: 4px;
	column-gap: 5px;
}

.el_entry-catName {
	display: inline-block;

}

.el_entry-catText {
	display: block;
	border: 1px solid #dfdfdf;
	border-radius: 50px;
	padding: 1.5px 14px;
	line-height: 1.4;
	font-size: 1.2rem;
	color: #333;
}

.el_entry-catText:hover {
	text-decoration: none;
	/*opacity: 0.7;*/
}

/* ========================================================================================================
	コンテンツ下部のバナー群
======================================================================================================== */
.bottom-card {margin-bottom: calc(82 / 1600 * 100%);}

.el_half-card  {width: calc(100%  / 3);}
.el_half-card a  {
	display: flex;
	width: 100%;
	align-items: center;
	letter-spacing: 0.02em;
	padding: calc(91 / 800 * 100%) calc(84 / 800 * 100%);
	position: relative;
	height: 260px;
}

.el_half-card a:hover  {
	text-decoration: none;
	opacity: 0.7;
}

/* 矢印 */
.el_half-card a::before,
.el_half-card a::after {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 59px;
	margin: auto;
	content: "";
	vertical-align: middle;
}

.el_half-card a::before {
	width: 10px;
	right: 65px;
	height: 2px;
	background: #CDCDCD;
}

.el_half-card a::after {
	width: 11px;
	height: 11px;
	border-top: 2px solid #CDCDCD;
	border-right: 2px solid #CDCDCD;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* テキスト */
.el_half-card span {
	font-size: 2.4rem;
	line-height: 1;
	color: #fff;
	font-weight: 500;
}

.el_half-card span > span {
	font-size: 1.4rem;
	display: block;
	margin-top: 10px;
	font-weight: 400;
}

/* 背景画像 */
.el_half-card:nth-of-type(1) a {background:url(../../img/top/img_top08.jpg) left top no-repeat;background-size: cover;}
.el_half-card:nth-of-type(2) a {background:url(../../img/top/img_top10.jpg) right center no-repeat;background-size: cover;}
.el_half-card:nth-of-type(3) a {background:url(../../img/top/img_top11.jpg) right top no-repeat;background-size: cover;}


/* ========================================================================================================
	分野から探す モーダル部分
======================================================================================================== */
.modal01 .bl_one-third {
	background: #fff;
	width: calc(232 / 778 * 100%);
	max-width: 232px;
	margin: 0 calc(40 / 778 * 100%) calc(30 / 778 * 100%) 0;
}

.modal01 .bl_one-third:nth-of-type(3n) {
	margin: 0 0 calc(30 / 778 * 100%);
}

.modal01 a:hover {
	text-decoration: none;
	opacity: 0.7;
}

.modal01 span {
	display: block;
	font-size: 1.5rem;
	font-weight: 400;
	color: #DD594D;
	text-align: center;
	line-height: 1;
	padding: 10px 0;
}

/* ========================================================================================================
	課題から探す モーダル部分
======================================================================================================== */
.modal02 .el_task-list {
	width: calc(428 / 840 * 100%);
	max-width: 428px;
	background-color:rgba(255,255,255,0.85);
	margin-bottom: 4px;
}
.el_task-list a {
	position: relative;
	display: block;
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: 0.058em;
    line-height: 1;
    padding: 23px 0 23px 36px;
}

.el_task-list a::after {
	margin: auto;
	content: "";
	vertical-align: middle;
	position: absolute;
	top: -2px;
	bottom: 0;
	right: 15px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #DD594D;
	border-right: 2px solid #DD594D;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.el_task-list a:hover {
	text-decoration: none;
	opacity: 0.7;
}

.modal02 span {
	display: block;
	font-size: 1.5rem;
	font-weight: 400;
	color: #DD594D;
	text-align: center;
	line-height: 1;
	padding: 10px 0;
}

/* ========================================================================================================
	IE対応
======================================================================================================== */
.ie_box,
.browser_ie #fv {
	display: none;
}

.browser_ie .ie_box {
	display: block;
	width:100%;
	text-align: center;
	margin-top: -140px;
}



/* ========================================================================================================
	SP用CSS
	------------------------------------------------------------------------------------------------------
	@media all and (max-width: 750px)
======================================================================================================== */
@media all and (max-width: 750px) {
	body {
		background:url(../../img/top/sp_bg_top.jpg) center top no-repeat;
		background-size: contain;
	}

	/* ヘッダーの背景 */
	.ly_sp-header-ly_inner {
		background: none;
		transition:background 0.5s;
	}

	.ly_sp-header-ly_inner.scroll_bg {background:#FFF;}

	/* メインイメージ */
	.ly_top_img {
		width: 100%;
		margin: 0 auto calc(110 / 750 * 100%);
	}

	.ly_top_img span {
		width: calc(540 / 750 * 100%);
		margin: 0 auto;
		padding-top: calc(168 / 540 * 100%);
	}

	.ly_search {
		width: calc(690 / 750 * 100%);
		margin: 0 auto calc(94 / 690 * 100%);
		display: flex;
		justify-content: space-between;
	}

	.ly_search a {
		padding: calc(20.45 / 358 * 100%) 0;
		font-size: 1.4rem;
	}

/* 右上の▲ */
	.ly_search .el_search-field a::after {border-right: 0.6rem solid #004098;}
	.ly_search .el_search-task a::after {border-right: 0.6rem solid #00A8A0;}

	.ly_search a::after {
		top: 3px;
		right: 3px;
		border-bottom: 0.6rem solid transparent;
	}

/* ========================================================================================================
	スライダー部分
======================================================================================================== */
	.bl_slider-wrapper {
		padding: calc(52 / 750 * 100%) 0 0 calc(30 / 750 * 100%);
		width: 100%;
		max-width: 100%;
		margin: 0 0 calc(96 / 750 * 100%);
	}

	.slider {
		width: 100%;
		max-width: 100%;
	}

	.slick-slider .slick-track,
	.slick-slider .slick-list {padding: 0 20% 0 0!important;}
	.bl-slide-item {padding-right: calc(80 / 750 * 100%);}
/*
	.slide-item {width: calc(558 / 750 * 100%);}
*/
	.bl-slide-item p {
		font-size: 1.4rem;
		font-weight: 400;
		margin: 0;
	}

	.slider .slick-prev {display: none !important;}
	.slider .slick-next {
		right: 20px;
		border: 1px solid #C2C2C2;
		width: calc(90 / 750 * 100%);
		padding-top: calc(90 / 750 * 100%);
		border-radius: 30px;
		background: #FFFFFF;
		margin-top: calc(48 / 750 * 100%);
	}

	.slider .slick-next::before {right: 20px;}
	.slider .slick-next::after {right: 15px;}
	.slider .slick-next:hover {background: #fff;}
/* ========================================================================================================
	Business field 事業領域 部分
======================================================================================================== */
.el_top-headline_lv02 span:nth-of-type(1) {
		font-size: 3.6rem;
		margin-right: 0;
		display: block;
		padding-bottom: 4px;
	}

	.el_top-headline_lv02 span:nth-of-type(2) {font-size: 1.3rem;}
	.bl_contents header {margin-bottom: calc(40 / 750 * 100%);}

	.business-field .bl_one-third {
		width: 100%;
		max-width: 100%;
		margin-bottom: 4px;
	}

	.business-field li.bl_one-third .el_card_erea {
		padding: calc(158.7 / 750 * 100%) 0;
		font-size: 1.4rem;
		background-size: cover;
	}

  /* ========================================================================================================
  	ニュース
  ======================================================================================================== */
  .bl_news-area .bl_news-list {
	width: 100%;
	display: block;
	padding: calc(38 / 690 * 100%) calc(30 / 690 * 100%);
	font-size: 1.3rem;
	margin-bottom:0;
}
.bl_news-area .bl_news-list .el_news-data {
	width: 100%;
	margin-right: 0;
	display: block;
}
.bl_news-area .bl_news-list .el_news-data .el_news-deay {
	width: 35.7142857143%;
	min-width: 100px;
}
.bl_news-area .bl_news-list .el_news-data .el_news-cat {
	display: block;
	width: 28.5714285714%;
	min-width: 80px;
	font-size: 1.3rem;
}
.bl_news-area .bl_news-list .el_news-content {
	width: 100%;
	align-items: flex-end;
	flex-direction: column;
}
.bl_news-area .bl_news-list .el_news-content .el_news-text {
	max-width: 100%;
	width: 100%;
}
.bl_news-area .bl_news-list .el_news-content .el_icon-pdf {
	width: auto;
	font-size: 1.3rem;
	margin-left: 0;
	margin-top: 10px;
}

.bl_entry-cat {flex-wrap: wrap;}

.el_entry-catName {margin-bottom:5px;}
/* ========================================================================================================
	コンテンツ下部のバナー群
======================================================================================================== */
	.el_half-card {width: 100%;}
	.el_half-card a {
		height: auto;
		padding: calc(61 / 750 * 100%) calc(86 / 750 * 100%);
	}
	.el_half-card span {font-size: 2.6rem;}

	.el_half-card span > span {
		font-size: 1.2rem;
		margin-top: 12px;
	}

	.bottom-card {margin-bottom: calc(80 / 750 * 100%);}

/* ========================================================================================================
	モーダルウィンドウ部分
======================================================================================================== */
	.blocker {
		padding: 0 !important;
		width: 100% !important;
	}

	#type01, #type02 {
		width: 100%;
		border-radius: 0;
		position: fixed;
		left: 0;
		overflow: auto;
		height: 100vh;

	}

	.modal-inner {
		background: #fff;
		padding: calc(118 / 690 * 100%) 0 calc(63 / 690 * 100%);
	}

	.modal.modal01 a.close-modal,
	.modal.modal02 a.close-modal {
		top: 60px;
		right: 0;
		position: fixed;
	}

	.modal01 .bl_col03 {
		width: calc(690 / 750 * 100%);
		margin:0 auto;
		display: flex;
		flex-wrap: wrap;
	}

	.modal01 .bl_one-third {
		width: calc(276 / 690 * 100%);
		margin: 0 0 calc(50 / 690 * 100%) calc(46 / 690 * 100%);
	}

	.modal01 .bl_one-third:nth-of-type(3n) {
		margin: 0 0 calc(50 / 690 * 100%) calc(46 / 690 * 100%);
	}

	.modal01 .bl_one-third:nth-last-of-type(1),
	.modal01 .bl_one-third:nth-last-of-type(2) {
		margin: 0 0 0 calc(46 / 690 * 100%);
	}

	.modal01 span {
		font-size: 1.2rem;
		font-weight: 400;
		padding: 5px 0 0;
	}

	.modal02 .bl_col02 {
		width: calc(690 / 750 * 100%);
		margin:0 auto calc(63 / 690 * 100%);
	}

	.modal02 .el_task-list {
		width: 100%;
		margin-bottom: 2px;
	}

	.el_task-list a {
		font-size: 1.2rem;
		padding: calc(34 / 690 * 100%) 0 calc(34 / 690 * 100%) calc(36 / 690 * 100%);
		background-color:rgba(233,233,233,0.85);
	}

}