body {
	overflow-x: hidden;
  	font-family: 'Lato', 'Noto Sans JP', "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , sans-serif;
	color: #666;
	letter-spacing: 0.1em;
}

p {
  	line-height: 2.0;
}

a {
  	color: #572180;
}

a:hover {
  	color: rgba(0, 204, 153, .8)
}
:root {
	--color-primary:#20CC99;
	--color-shadow:#572180;
}
.text-primary {
  	color: #20CC99 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  	font-weight: 700;
  	font-family: 'Lato', 'Noto Sans JP', sans-serif;
}

.page-section {
  	padding: 50px 0 0;
}

h2.section-heading {
  	font-size: 38px;
  	margin-top: 0;
  	margin-bottom: 15px;
  	color: #572180;
	display: inline-block;
	border-bottom: 2px solid #CA516C;
	padding-bottom: 6px;
	letter-spacing: 0.1em;
	font-weight: normal;
}

.section-subheading {
  	font-size: 26px;
  	font-weight: bold;
  	/*margin-bottom: 75px;*/
  	text-transform: none;
  	color: #00664C;
	margin-left: 30px;
	letter-spacing: 0.1em;
 }

@media (max-width: 767.98px) {	
  	.page-section {
    	padding: 30px 0 0;
	}
	.page-section .col-md-4 {text-align: center;}
	h2.section-heading {
  		font-size: 28px;
	}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
	h2.section-heading {
  		font-size: 30px;
	}
}
.btn {
  font-family: 'Lato', 'Noto Sans JP', sans-serif;
  font-weight: 700;
}

.btn-xl {
  font-size: 18px;
  padding: 20px 40px;
}

/*.btn-primary {
	background-color: #20CC99;
  	border-color: #20CC99;
	border-radius: 0;
}*/
.btn-primary {
	border-color: #20CC99;
	color: #fff;
  	font-size: 16px;
  	font-weight: bold;
  	background-color: #20CC99;
  	padding: 18px 40px;
  	border-radius: 0;
  	position: relative;
  	z-index: 1;
  	display: inline-block;
  	transition: .3s;
}
.btn-primary::before {
	content: "";
  	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: 3px solid #20CC99;
	box-sizing: border-box;
	z-index: -1;
	transform: scale(1.2);
	opacity: 0;
	transition: transform ease .3s, opacity .3s;
}
.btn-primary:hover {
	color: #20CC99;
	background-color: #FFF;
	border-color: #20CC99;
}
.btn-primary:hover::before {
  transform: scale(1);
  opacity: 1;
}

.btn-primary:active, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle{
  background-color: rgba(32, 204, 153, .8) !important;
  border-color: rgba(32, 204, 153, 0.8) !important;
  color: white;
}

.btn-primary:active, .btn-primary:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(32, 204, 153, 0.8) !important;
  box-shadow: 0 0 0 0.2rem rgba(32, 204, 153, 0.8) !important;
}
.btn-primary i {padding-left: 0.5em;}

::-moz-selection {
  background: rgba(32, 204, 153, .3);
  text-shadow: none;
}

::selection {
  background: rgba(32, 204, 153, .3);
  text-shadow: none;
}

.btn-back {
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
	padding: 18px 40px;
  	border-radius: 0;
}
.btn-submit {
	color: #fff;
	background-color: #20CC99;
	border-color: #20CC99;
	padding: 18px 40px;
  	border-radius: 0;
}

img::-moz-selection {
  background: transparent;
}

img::selection {
  background: transparent;
}

img::-moz-selection {
  background: transparent;
}

#mainNav .navbar-toggler {
	font-size: 10px;
	right: 0;
	padding: 5px 8px;
	text-transform: uppercase;
	color: white;
	border: 0;
	background-color: #572180;
	font-family: 'Lato', 'Noto Sans JP', sans-serif;
	border-radius: 0;
}

#mainNav .navbar-brand {
	color: #666;
	margin-right: 0;
	margin-left: 20px;
}

#mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
  color: rgba(32, 204, 153, 0.8);
}

#mainNav .navbar-nav {padding-left: 1em!important;}
#mainNav .navbar-nav .nav-item .nav-link {
  font-weight: 400;
  padding: 0.75em 0.5em;
  letter-spacing: 1px;
  color: #666;
}

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
  color: rgba(32, 204, 153, 0.8);
}

#mainNav .container-fluid {padding-right: 0;}
.navbar {padding: 0.5rem 0;}
.navbar-expand-lg .navbar-collapse {
	background-color: white;
    border-radius: 50px 0 0 50px/50px 0 0 50px;
}
#mainNav.navbar-shrink {
    background-color: rgba(255, 255, 255, 0.8);
 }
.navbar-collapse {
	flex-grow: 0;
}

@media (max-width: 767.98px) {
	#mainNav .container-fluid {padding-right: 15px;}
	.navbar {background-color: #fff;}
	#mainNav .navbar-brand{flex-basis: 70%;}
	#mainNav .navbar-nav .nav-item .nav-link {
		padding: 0.75em 1.1em !important;
	}
	.navbar-expand-lg .navbar-collapse {border-radius: 0;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait){
	#mainNav .container-fluid {padding-right: 15px;}
	.navbar {background-color: #fff;}
	.navbar-expand-lg .navbar-collapse {border-radius: 0;}
	#mainNav .navbar-brand {flex-basis: 50%;}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape){
  #mainNav {
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
    transition: padding-top 0.3s, padding-bottom 0.3s;
    border: none;
  }
#mainNav .navbar-nav {font-size: 14px;line-height: 1.2;}
  #mainNav .navbar-brand {
	font-size: 1.75em;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
	flex-basis: 40%;
	  padding-right: 10px;
	}
  #mainNav.navbar-shrink {
    padding-top: 0;
    padding-bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.25em;
   }
}

/* masthead */
#masthead {
	background-image: url("../img/header-bg.jpg");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: cover;
}
#masthead .intro-text {
	padding-top: 150px;
	padding-bottom: 150px;
}
#masthead .intro-text .intro-lead-in {
	color: #CA516C;
	font-family: 'Lato', 'Noto Sans JP', sans-serif;
	letter-spacing: 0.1em;
	font-weight: normal;
	margin-bottom: 20px;
	font-size: 1.5rem;
}
#masthead .intro-text .intro-heading {
	font-size: 48px;
	font-weight: normal;
	margin-bottom: 25px;
	color: #572180;
	letter-spacing: 0.1em;
}
#masthead .intro-text p {
	font-size: 22px;
	color: #fff;
	/*text-shadow:var(--color-shadow) 1px 1px 3px, var(--color-shadow) -1px 1px 3px,
    var(--color-shadow) 0px -1px 3px, var(--color-shadow) -1px 0px 3px,
    var(--color-shadow) 1px 1px 2px, var(--color-shadow) -1px 1px 2px,
    var(--color-shadow) 1px -1px 2px, var(--color-shadow) -1px -1px 2px;*/
	line-height: 1.75;
	text-shadow:var(--color-shadow) 1px 1px 5px, var(--color-shadow) -1px 1px 5px,
    var(--color-shadow) 0px -1px 5px, var(--color-shadow) -1px 0px 5px,
    var(--color-shadow) 1px 1px 5px, var(--color-shadow) -1px 1px 5px,
    var(--color-shadow) 1px -1px 5px, var(--color-shadow) -1px -1px 5px;
}
@media (max-width: 767.98px) {
	#masthead {
		background-position: 5% center;
	}
	#masthead .intro-text {
		padding-top: 70px;
		padding-bottom: 200px;
	}
	#masthead .intro-text .intro-lead-in {margin-bottom: 10px;}
	#masthead .intro-text .intro-heading {
		font-size: 22px;
		letter-spacing: 0;
		margin-bottom: 10px;
	}
	#masthead .intro-text p {
		font-size: 16px;
	}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
	#masthead {
		background-position: 15% center;
	}
	#masthead .intro-text .intro-heading {
		font-size: 38px;
	}
}

.page-section .section-ttl {
	color: #CA516C;
	font-family: 'Lato', 'Noto Sans JP', sans-serif;
	letter-spacing: 0.1em;
	font-weight: normal;
	margin-bottom: 20px;
}

#research-flow h2 {
	color: #572180;
	font-size: 48px;
	letter-spacing: 0.1em;
	font-weight: normal;
}
#research-flow p {
	letter-spacing: 0.1em;
}
@media (max-width: 767.98px) {
	.page-section .section-ttl {margin-bottom: 8px;}
	#research-flow h2 {font-size: 24px;}
}

/* new information */
#news dl dd a {
	color: var(--color-primary);
}
#news dl dt {
	color: #CA516C;
	font-family: 'Lato', sans-serif;
	letter-spacing: 0.1em;
}
#news dl dd {margin-bottom: 15px;}
#news dl dd h5,#news dl dd h6 {
	margin-bottom: 0.2em;
}


#contents h4,
#links h4 {
	color: #CA516C;
	font-family: 'Lato', sans-serif;
	letter-spacing: 0.1em;
	font-weight: normal;
	margin-bottom: 20px;
}
#contents ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#contents ul li {
	border-bottom: 1px solid #CCCCCC;
	color: #999;
	padding: 15px 0;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	letter-spacing: 0.1em;
}
#contents ul li:first-child {
	border-top: 1px solid #CCCCCC;
}
#contents ul li .link-area {
	display: flex;
	align-items: center;
}
#contents ul li .link-area h3 a {
	color: var(--color-primary);
	font-size: 38px;
	font-weight: normal;
	background: linear-gradient(currentColor 0 0) 0 100% /var(--d, 0) 1px no-repeat;
  	transition:0.5s;
	text-decoration: none;
}
#contents ul li .link-area h3 a:hover {
  	--d: 100%;
}

#contents ul li .link-area p {
	margin-bottom: 0;
	color: #666;
	font-size: 16px;
	line-height: 1;
	margin-left: auto;
	letter-spacing: 0;
}
#links {margin-bottom: 80px;}
#links .banner-area {
	display: flex;
	flex-wrap: wrap;
}
#links .banner-area .banner-item {
	flex: 0 0 30%;
	margin-right: 15px;
	margin-bottom: 15px;
}

#links .banner-area a {
	display: block;
}
#links .banner-area a:hover {
	opacity: 0.8;
}

@media (max-width: 767.98px) {
	#contents ul li {font-size: 14px;}
	#contents ul li .link-area {flex-direction: column;align-items: flex-start;}
	#contents ul li .link-area h3 a {font-size: 24px;line-height: 1.2;}
	#contents ul li .link-area p {line-height: 1.2;margin-left: 0;}
	#links .banner-area {flex-direction: column;}
	#links .banner-area .banner-item {margin-right: 0;}
	#links .banner-area .banner-item img {width: 100%;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
	#contents ul li {font-size: 14px;}
	#contents ul li .link-area h3 a {font-size: 30px;}
}

.footer {
  	padding: 25px 0;
  	background-color: #EEF1F1;
	color: #666666;
}
.footer .footer-innerwrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 0 40px;
}
.footer .footer-innerwrap .footer-inner1 {
	flex-grow: 2;
}
.footer .footer-innerwrap .footer-inner2 {
	flex-grow: 1;
}
.footer .footer-innerwrap .footer-inner1 img {height: 54px;}
.footer .footer-innerwrap .footer-inner1 ul {
	margin: 20px 0 0 0;
	padding: 0;
	font-size: 14px;
}
.footer .footer-innerwrap .footer-inner1 ul li {
	display: inline-block;
	margin-right: 15px;
}
.footer .footer-innerwrap .footer-inner1 ul li:last-child {
	margin-right: 0;
} 
.footer .footer-innerwrap .footer-inner1 ul li a {
	display: block;
	color:#666666;
}	
.footer .footer-innerwrap .footer-inner2 .copyright {
	font-size: 86%;
  	line-height: 1.2;
  	margin-bottom: 0;
}
@media (max-width: 767.98px) {
	.footer .footer-innerwrap {
		flex-direction: column;
	}
	.footer .footer-innerwrap .footer-inner1 img {height: auto;}
	.footer .footer-innerwrap .footer-inner2 .copyright {
		margin-top: 20px;
	}
}

.scroll-to-top {
  position: fixed;
  right: 15px;
  bottom: 15px;
  display: none;
  width: 50px;
  height: 50px;
  text-align: center;
  color: white;
  background: rgba(52, 58, 64, 0.5);
  line-height: 45px;
}

.scroll-to-top:focus, .scroll-to-top:hover {
  color: white;
}

.scroll-to-top:hover {
  background: #343a40;
}

.scroll-to-top i {
  font-weight: 800;
}

/* Lower common */
#page-ttl {
	background: url(../img/bg-ttl.jpg) center center no-repeat;
	background-size: cover;
	height: 380px;
	width: 100%;
	display: flex;
	align-items: center;
}
#page-ttl img {
	width: 100%;
	height: auto;
}
#page-ttl .page-ttl-inner .en-ttl {
	color: #999999;
	font-size: 20px;
	font-family: 'Lato', sans-serif;
	letter-spacing: 0.1em;
}
#page-ttl .page-ttl-inner h1 {
	color: #572180;
	letter-spacing: 0.1em;
	font-family: 'Lato', 'Noto Sans JP', sans-serif;
	font-weight: normal;
}
@media (max-width: 767.98px) {
	#page-ttl {
		max-height: 250px;
		background-position: center right;
	}
	#page-ttl .page-ttl-inner .en-ttl {font-size: 16px;}
	#page-ttl .page-ttl-inner h1 {font-size: 28px;}
}

/* facilities */
#facilities #facilities-list #japanese-map {
	background: url(../img/facilities/japanmap.png) top center no-repeat;
	background-size: contain;
	height: 800px;
	position: relative;
	margin-bottom: 30px;
}
#facilities #facilities-list #japanese-map dl {
	display: flex;
	align-items: center;
}
#facilities #facilities-list #japanese-map dl dt {
	background-color: #572180;
	color: #fff;
	padding: 20px;
	text-align: center;
	font-size: 24px;
	font-weight: normal;
	margin-right: 15px;
	letter-spacing: 0.1em;
}
#facilities #facilities-list #japanese-map dl dd {
	font-size: 48px;
	color: #1F263F;
	width: 3em;
	font-family: 'Lato', sans-serif;
}
#facilities #facilities-list #japanese-map .facilities-number {
	font-size: 48px;
	color: #572180;
}
#facilities #facilities-list #japanese-map .facilities-number h3 {
	margin-bottom: 0;
	font-weight: 400;
	font-size: 24px;
	text-align: center;
	margin-bottom: 5px;
}
#facilities #facilities-list #japanese-map .facilities-number .hokkaido {
	position: absolute;
	top: 0;
	left: 560px;
}
#facilities #facilities-list #japanese-map .facilities-number .tohoku {
	position: absolute;
	top: 300px;
	left: 440px;
}
#facilities #facilities-list #japanese-map .facilities-number .cyubu {
	position: absolute;
	top: 400px;
	left: 280px;
}
#facilities #facilities-list #japanese-map .facilities-number .kanto {
	position: absolute;
	top: 480px;
	left: 440px;
}
#facilities #facilities-list #japanese-map .facilities-number .kinki {
	position: absolute;
	top: 550px;
	left: 220px;
}
#facilities #facilities-list #japanese-map .facilities-number .cyugoku {
	position: absolute;
	top: 520px;
	left: 60px;
}
#facilities #facilities-list #japanese-map .facilities-number .shikoku {
	position: absolute;
	top: 660px;
	left: 140px;
}
#facilities #facilities-list #japanese-map .facilities-number .kyushu {
	position: absolute;
	top: 670px;
	left: 0;
}
#facilities #facilities-list #japanese-map .facilities-number p {
	background-color: rgba(87, 33, 128, 0.3);
	padding: 0 30px;
	margin: 0;
	text-align: center;
	line-height: 1.2;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
}
#facilities #chart h3 {
	color: #fff;
	background-color: #572180;
	text-align: center;
	padding: 20px;
	font-size: 24px;
	letter-spacing: 0.1em;
	font-weight: normal;
}
#facilities #chart dl{margin-bottom: 30px;}
#facilities #chart dl dt {
	color: #572180;
	font-size: 24px;
	letter-spacing: 0.1em;
	font-weight: normal;
}
#facilities #chart dl dd {
	line-height: 1.8;
}
@media (max-width: 767.98px) {
	#facilities #facilities-list #japanese-map {height: auto;}
	#facilities #facilities-list #japanese-map dl {justify-content: center;}
	#facilities #facilities-list #japanese-map dl dt {font-size: 20px;padding: 10px;}
	#facilities #facilities-list #japanese-map dl dd {font-size: 30px;}
	#facilities #facilities-list #japanese-map .facilities-number h3 {font-size: 18px;}
	#facilities #facilities-list #japanese-map .facilities-number {font-size: 20px;width: 40%;margin:0 auto;}
	#facilities #facilities-list #japanese-map .facilities-number .hokkaido,
	#facilities #facilities-list #japanese-map .facilities-number .tohoku,
	#facilities #facilities-list #japanese-map .facilities-number .cyubu,
	#facilities #facilities-list #japanese-map .facilities-number .kanto,
	#facilities #facilities-list #japanese-map .facilities-number .kinki,
	#facilities #facilities-list #japanese-map .facilities-number .cyugoku,
	#facilities #facilities-list #japanese-map .facilities-number .shikoku,
	#facilities #facilities-list #japanese-map .facilities-number .kyushu {
		position: static;
		margin-bottom: 15px;
	}
}
.btn-area {margin: 10px 0 20px;}

/* outline */
.contents-ttl {
	color: #132C33;
	font-size: 24px;
	font-weight: normal;
	letter-spacing: 0.1em;
	line-height: 1.75;
}
.page-section figure {
	margin-bottom: 30px;
	text-align: center;
}
#outline #pi p {margin-bottom: 20px;}
#outline #pi .f1 img {width: 80%;}
#outline #pi .photo-area {
	display: flex;
	align-items: center;
}
#outline #pi .photo-area img {
	margin-right: 20px;
}
#outline #pi .photo-area .text-box span {
	font-size: 24px;
}
@media (max-width: 767.98px) {
	#outline #pi .f1 img {width: 100%;}
}

/* joining */
#joining .kome,
#contactForm span {
	color: #EA591F;
}
#contactForm .form-control {
	background-color: #F2F5F5;
	border: 1px solid #CCCCCC;
	border-radius: 0;
	padding: 20px;
}
#contactForm .form-control::placeholder {
    color: #CCCCCC;
}

/* links */
#collection i {color: #20CC99;margin-right:0.5em;}
#collection .col-md-6:nth-child(2n) {
	margin-bottom: 40px;
}
@media (max-width: 767.98px) {
	
}