/* =========================
  トップページで使うスタイル
========================= */

.home_indexpage .top_area { 
	background: url(../img/bg_top.jpg) no-repeat center top; 
	height:760px;
	background-size:cover;
}
.catchcopy {
	padding:200px 0 90px;
	text-align:center;
	color:#003760;
	text-shadow: 2px 2px 3px #fff,-2px 2px 3px #fff,2px -2px 3px #fff,-2px -2px 3px #fff;
	font-size:3.8rem;
	letter-spacing: 0.6rem;
	font-family: 'Noto Serif JP', serif;
	line-height:1.7;
}

.top_area ul {
   max-width:1000px;
   width:100%;
   margin:0 auto;
	display: flex;
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
}

.top_area ul li { text-align:center; width:220px;}
.top_area ul li a { color:#222; }
.top_area ul li a:hover, .top_area ul li a:focus { color:#3bb9f8; }
.top_area ul li img { margin:0 0 1rem; }
.top_area ul li span { display:inline-block; }
.top_area ul li span:before{
	font-family: FontAwesome;
	padding-right: 5px ;
	content: '\f138' ;
	color:#005ca2;
	font-weight: 400;
}

@media screen and (max-width: 768px) {
	.home_indexpage .top_area { 
		background: url(../img/bg_top_sp.png) no-repeat center 4rem,linear-gradient(to bottom, #35afd8 0%,#40b4da 60%,#ffffff 90%);
		height:auto;
		background-size:contain;
	}
	.catchcopy {
		padding:10rem 0 3rem;
		font-size:2.4rem;
		letter-spacing: 0.2rem;
	}
	.top_area ul {
		max-width:100%;
		padding:0 2% 4rem;
		flex-wrap: wrap;
		  -ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.top_area ul li a:hover, .top_area ul li a:focus { color:#222; }
	.top_area ul li { width:48%; font-size:1.3rem;}
	.top_area ul li img { margin:2rem 0 0.5rem; }
}

/* h2 */

.thoughts_area .thoughts_box h2,
.about_01 h2,
.about_02 h2,
.about_03 h2 {
	text-align:center;
	color:#005ca2;
	font-family: 'Noto Serif JP', serif;
	font-weight:500;
	font-size:3.6rem;
	letter-spacing: 0.5rem;
}

.about_01 h2,
.about_02 h2,
.about_03 h2 {
	margin-bottom:7.6rem;
}

@media screen and (max-width: 768px) {
	.thoughts_area .thoughts_box h2,
	.about_01 h2,
	.about_02 h2,
	.about_03 h2 {
		font-size:2.5rem;
		letter-spacing: 0.1rem;
	}
	.about_01 h2,
	.about_02 h2,
	.about_03 h2 {
		margin-bottom:0;
		padding:0 5%;
	}
}

/* カネカの思い */

.thoughts_area {
	background: url(../img/bg_thoughts.png) no-repeat left top #e0f3fe;
	padding:60px;
	width:100%;
	position:relative;
	margin-bottom:12rem;
	height:480px;
}

.thoughts_area .thoughts_box{
	max-width:660px;
	width:50%;
	background-color:#fff;
	padding:40px 40px 50px;
	position: absolute;
    top: calc(0% + 4rem);
    right: calc(0% + 5rem);
	box-shadow: 0px 0px 24px 0px #cfdce5;
}

.thoughts_area .thoughts_box h2 {
	margin-bottom:1em;
}

.thoughts_area .thoughts_box p {
	letter-spacing:0.08rem;
}

@media screen and (max-width: 768px) {
	.thoughts_area {
		background: none #e0f3fe;
		padding:2rem 2rem;
		margin-bottom:5rem;
		height:auto;
	}
	.thoughts_area .thoughts_box{
		max-width:100%;
		width:100%;
		padding:2rem 1.5rem;
		position: relative;
		top: auto;
		right: auto;
		box-shadow: 0px 0px 5px 0px #cfdce5;
	}
	.thoughts_area .thoughts_box h2 {
		margin-bottom:0.6em;
	}
}

/* 幹細胞について */

.about_01 {
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #f0fcf9 30%, #ddeefa 60%, #ffffff 90%);
	background: -webkit-linear-gradient(top, #ffffff 0%,#f0fcf9 30%,#ddeefa 60%,#ffffff 90%);
	background: linear-gradient(to bottom, #ffffff 0%,#f0fcf9 30%,#ddeefa 60%,#ffffff 90%);
	margin-bottom:5rem;
}

.description_container {
   max-width:1060px;
   width:100%;
   margin:7rem auto 0;
}

.description_container.green {
   margin:10rem auto 0;
}

.about_01 .box_980 p {
	letter-spacing:0.2rem;
	font-size:1.8rem;
}

.description_container:after {
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
	content: '[.]';
	overflow:hidden;
}

.description_container .illust {
	width:45%;
	padding:2rem 4rem;
	text-align:center;
	background-color:#fff;
	box-shadow: 0px 0px 24px 0px #ddd;
	z-index:10;
	float:left;
}

.description_container.blue .illust img {
	width:90%;
}

.description_container .text {
	width:55%;
	padding:6rem 6rem;
	margin-top:45px;
	float:left;
	z-index:5;
}

.description_container.blue .text {
	box-shadow:5rem 5rem 0 0 #c7e1f5;
	float:right;
	/*background: url(../img/bg_text_blue.gif) no-repeat left 6rem #f3fbff;*/
	background: #f3fbff;
}

.description_container.green .text {
	box-shadow:-5rem 5rem 0 0 #cee8ef;
	/*background: url(../img/bg_text_green.gif) no-repeat right 6rem #f5fdfb;*/
	background: #f5fdfb;
}

.description_container .text dt {
	color:#444;
	font-size:2.8rem;
	font-weight:bold;
	letter-spacing:0.2rem;
	text-align:center;
	margin-bottom:1em;
}

.description_container .text dd {
	letter-spacing:0.08rem;
	line-height:1.8;
	font-size:1.7rem;
}

@media screen and (max-width: 768px) {
	.about_01 { border-bottom: 1px solid #ccc; padding-bottom:4rem;}
	.description_container {
		max-width:100%;
		width:100%;
		margin:3rem auto 0;
	}
	.about_01 .box_980 {
		margin:3rem 0;
	}
	.about_01 .box_980 p {
		letter-spacing:0;
		font-size:1.6rem;
	}
	
	.description_container.green {
		margin:2rem auto 0;
	}
	.description_container .illust,
	.description_container .text {
		float:none;
	}
	.description_container .text {
		width:100%;
		padding:2rem 2rem;
	}
	
	.description_container.blue .text {
		box-shadow:none;
		float:none;
		background: none;
		width:100%;
		margin-top:0;
	}
	.description_container.green .text {
		box-shadow:none;
		background: none;
		width:100%;
		margin-top:0;
	}
	.description_container .text dt {
		font-size:2.2rem;
	}
	.description_container .text dd {
		letter-spacing:0;
		font-size:1.6rem;
	}
	.description_container .illust {
		width:85%;
		padding:2rem 1rem;
		margin:1rem auto;
	}
}

/* 自家細胞移植と他家細胞移植について */
/* 幹細胞を用いた再生・細胞医療について */

.about_container {
	display:flex;
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
   width:82%;
   margin:0 auto;
   padding-bottom:2rem;
}

.about_container .flex-box {
	width:46%;
	border-bottom:10px solid #9be1fb;
	background-color:#f3fbff;
}

.about_container .flex-box p {
	background-color:#fff;
	text-align:center;
	padding:2rem 5rem 0;
}

.about_container .flex-box dl {
	padding:4rem 4rem 3rem;
}

.about_container .flex-box dt {
	color:#444;
	font-size:2.6rem;
	font-weight:bold;
	letter-spacing:0.2rem;
	text-align:center;
	margin-bottom:1em;
}

.about_container .flex-box dd {
	letter-spacing:0.08rem;
	line-height:1.8;
}

.about_02 {
	padding-top:14rem;
	background: url(../img/bg_about_02.png) no-repeat left top, linear-gradient(#ffffff, #dcebf1);
}

.about_03 {
	padding-top:14rem;
	background: url(../img/bg_about_03.png) no-repeat right top, linear-gradient(#dcebf1, #ffffff);
	margin-bottom:10rem;
}

.about_03 .about_container .flex-box p {
	padding:2rem 3rem 0;
}

@media screen and (max-width: 768px) {
	.about_container {
		display:block;
	   width:100%;
	   padding:2rem 5%;
	}
	.about_container .flex-box {
		width:100%;
		margin-bottom:4rem;
	}
	.about_02,.about_03 {
		padding-top:0;
		background:none;
	}
	.about_03 { margin-bottom:5rem; }
	.about_03 .about_container .flex-box p,
	.about_container .flex-box p {
		border:1px solid #ddd;
		padding:1rem 2rem 0;
	}
	.about_container .flex-box dl {
		padding:2rem 2rem 2rem;
	}
	.about_container .flex-box dt {
		font-size:2.2rem;
		margin-bottom:0.5em;
	}
	
}