@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 fonts
----------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/*----------------------------------------------------------------
 custom properties
----------------------------------------------------------------*/
:root {
	/* colors */
	--text-color		: #333;
	--heading-color		: #645d4b;
	--main-color		: #ff8800;
	--bg-color			: linear-gradient( to right, #ff6d43 0%, #ffbc1a 100%);

	/* separater */
	--separater-height	: 60px;

	/* padding */
	--content-padding	: 15px;

	/* font */
	--font-size			: 1.3rem;
}

@media screen and (min-width: 769px) {
:root {
	/* separater */
	--separater-height	: 120px;

	/* padding */
	--content-padding	: 0;

	/* font */
	--font-size			: 1.4rem;
}
}
@media screen and (min-width: 1050px) {
:root {
	/* separater */
	--separater-height	: 180px;
}
}

/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	background-image	: var(--bg-color);
	font-size			: var(--font-size);
	font-family			: 'Noto Sans JP',"ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro',"メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
	line-height			: 1.8;
	letter-spacing		: calc(10 / 1000 * 1em);
	color				: var(--text-color);
}

/* inline element
-----------------------------------------------------*/

/* link
----------------------------------*/
a{
	text-decoration		: underline;
	color				: currentColor;
}
a:hover{
	text-decoration		: none;
	color				: var(--main-color);
}

/*-----------------------------------------------------
 class
-----------------------------------------------------*/

/* separater line
-----------------------------------------------------*/
hr.separater{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}
/* br
-----------------------------------------------------*/
@media screen and (min-width: 769px) { .br_sp{ display: none; } }

/* hide
-----------------------------------------------------*/
@media screen and (max-width: 768px) { [data-hide=sp]{ display: none; } }
@media screen and (min-width: 769px) { [data-hide=pc]{ display: none; } }

/* view
-----------------------------------------------------*/
@media screen and (max-width: 768px) { [data-show=sp]{ display: block; } }
@media screen and (min-width: 769px) { [data-show=pc]{ display: block; } }


/* fixed
-----------------------------------------------------*/
.fixed{
	position			: fixed!important;
	top					: 0px;
	z-index				: 10;
}

/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/

/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.wrap{
	position			: relative;
}

#wrap{
	overflow			: hidden;
	width				: 100%;
}

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	position			: relative;
	clear				: both;
}
#header{
	position			: fixed;
	left				: 0;
	top					: 0;
	z-index				: 10;
	width				: 100%;
	background-image	: var(--bg-color);
	color				: #FFF;
}
@media screen and (min-width: 1050px) {
#header{ height: 80px; }
}

#contents{ margin: 60px 0 0 0; }
@media screen and (min-width: 769px) {
#contents{ margin: 80px 0 0 0; }
}
#footer{
	padding				: 50px 0;
	color				: #FFF;
}
@media screen and (min-width: 769px) {
#footer{ padding: 20px 0; }
}

/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.container{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	width				: 95vw;
}

@media screen and (min-width: 769px) {
.container		{ width: 660px; }
.container.wide	{ width: 760px; }
.container.slim	{ width: 560px; }
}

@media screen and (min-width: 1050px) {
.container		{ width: 960px; }
.container.wide	{ width: 960px; }
.container.slim	{ width: 720px; }
}

@media screen and (min-width: 1170px) {
.container.wide	{ width: 1110px; }
}



/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
.navigation>.navi>li>a:before{
	content				: attr(data-en);
	display				: block;
	font-size			: 1.4rem;
	font-weight			: bold;
}
@media screen and (min-width: 769px) {
.navigation>.navi{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: row;
}
.navigation>.navi>li{ margin: 0 10px; }
.navigation>.navi>li>a{
	display				: block;
	text-align			: center;
	text-decoration		: none;
	font-size			: 1rem;
}
.navigation>.navi>li>a:hover{
	color				: #FFF;
	opacity				: 0.5;
}
}


/*-----------------------------------------------------
 header
-----------------------------------------------------*/
/* logo
-----------------------------------------------------*/
#header .logo{
	--logo-width: 230px;
	position			: relative;
	z-index				: 101;
	width				: var(--logo-width);
	text-align			: center;
}
#header .logo>a{
	background			: #FFF;
	display				: block;
}
#header .logo>a:hover{ opacity: 0.5; }

@media screen and (min-width: 769px) {
#header .logo{ --logo-width: 240px; }
}
@media screen and (min-width: 1050px) {
#header .logo{ --logo-width: 340px; }
}

/* inner
-----------------------------------------------------*/
@media screen and (min-width: 769px) {
#header .inner{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-wrap			: wrap;
	flex-direction		: row;
	justify-content		: space-between;
	align-items			: flex-start;
}
}

/* navigation
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
#header .navigation{
	position			: fixed;
	left				: 0;
	top					: 0;
	z-index				: 100;
	width				: 100vw;
	height				: 100%;
	padding				: 65px 0 0 0;
	background			: #FFF;
	color				: var(--main-color);
}
#header .navigation>.navi{
	width				: 95vw;
	margin				: 0 auto;
	padding				: 0 15px;
}
#header .navigation>.navi>li>a{
	position			: relative;
	display				: block;
	padding				: 7px 15px;
	text-decoration		: none;
	font-weight			: bold;
	font-size			: 1.2rem;
	line-height			: 1.8;
}
#header .navigation>.navi>li>a:after{
	content				: "\f105";
	position			: absolute;
	left				: 0;
	top					: 9px;
	font-size			: 1.6rem;
	font-family			: "Font Awesome 5 Free";
}
}
@media screen and (min-width: 769px) {
#header .navigation						{ margin: 10px 10px 0 0; }
#header .navigation>.navi>li			{ margin: 0 3px; }
#header .navigation>.navi>li>a			{ font-size: 1rem; }
#header .navigation>.navi>li>a:before	{ font-size: 1.2rem; }
}
@media screen and (min-width: 769px) and (max-width: 829px){
#header .navigation>.navi>li			{ margin: 0 2px; }
#header .navigation>.navi>li>a			{ letter-spacing: -0.3px; }
#header .navigation>.navi>li>a:before	{ font-size: 1rem; }
}
@media screen and (min-width: 830px) {
#header .navigation>.navi>li			{ margin: 0 4px; }
#header .navigation>.navi>li>a:before	{ font-size: 1rem; }
}
@media screen and (min-width: 930px) {
#header .navigation>.navi>li			{ margin: 0 8px; }
#header .navigation>.navi>li>a:before	{ font-size: 1.2rem; }
}
@media screen and (min-width: 1050px) {
#header .navigation						{ margin: 17px 30px 0 0; }
#header .navigation>.navi>li			{ margin: 0 5px; }
#header .navigation>.navi>li>a			{ font-size: 1.2rem; }
#header .navigation>.navi>li>a:before	{ font-size: 1.4rem; }
}
@media screen and (min-width: 1120px) {
#header .navigation>.navi>li			{ margin: 0 10px; }
}

/*-----------------------------------------------------
 contents
-----------------------------------------------------*/
/* site-name
-----------------------------------------------------*/
#contents .site-name{
	position			: fixed;
	transform			: rotate(90deg);
	left				: -100px;
	top					: calc(50vh - 1em);
	z-index				: 10;
	font-size			: 1rem;
	font-style			: italic;
	color				: #FFF;
	display: none;
}
@media screen and (min-width: 769px) {
#contents .site-name{ left: -70px; }
}
/* content
-----------------------------------------------------*/
#contents .content{
	position			: relative;
	clear				: both;
}

/* section
-----------------------------------------------------*/
#contents .section{
	position			: relative;
	clear				: both;
}

/* heading
-----------------------------------------------------*/
#contents h3{
	margin				: 50px 0 15px 0;
	line-height			: 1.8;
	font-size			: 2rem;
	font-weight			: bold;
	color				: var(--heading-color);
}
@media screen and (min-width: 769px) {
#contents h3{
	margin				: 10px 0 20px 0;
	font-size			: 3rem;
}
}

/* title
-----------------------------------------------------*/
#contents .title{
	text-align			: center;
	font-weight			: bold;
}
#contents .title:before{
	content				: attr(data-en);
	display				: block;
	font-size			: 220%;
}

#contents h2.title{
	margin				: 0 0 30px 0;
	line-height			: 1.6;
	font-size			: 1.4rem;
}
#contents h3.title{
	margin				: 0 0 20px 0;
	line-height			: 1.8;
	font-size			: 1rem;
}
@media screen and (min-width: 769px) {
#contents h2.title{ margin: 0 0 60px 0; }
}

/* btn
-----------------------------------------------------*/
#contents .btn{
	position			: relative;
	display				: inline-block;
	padding				: 20px 40px;
	max-width			: 100%;
	border				: 1px solid transparent;
	background			: var(--main-color);
	text-align			: center;
	text-decoration		: none;
	line-height			: 1;
	font-size			: 1.5rem;
	font-weight			: bold;
	color				: #FFF;
}
#contents .btn:hover{
	border				: 1px solid currentColor;
	background			: transparent;
	color				: var(--main-color);
}
#contents .btn i.fas{
	display				: inline-block;
	margin				: 0 10px 0 0;
	vertical-align		: middle;
 	font-size			: 2rem;
}

@media screen and (min-width: 769px) {
#contents .btn{
	padding				: 20px 40px;
	font-size			: 1.8rem;
}
#contents .btn i.fas{
	vertical-align		: -1px;
 	font-size			: 2.5rem;
}
}


/* row
-----------------------------------------------------*/
#contents .row{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: column;
}

@media screen and (min-width: 769px) {
#contents .row{
	flex-direction		: row;
	flex-wrap			: wrap;
	justify-content		: space-between;
	gap: 40px;
}
#contents .row.row-reverse{
	flex-direction		: row-reverse;
}
#contents .row>.col{ flex: 1; }
/* #contents .row>.col:nth-child(odd){ margin: 0 40px 0 0; } */
}

@media screen and (min-width: 1050px) {
#contents .row{
	gap: 80px;
}
#contents .row>.col{ flex: 1; }
/* #contents .row>.col:nth-child(odd){ margin: 0 80px 0 0; } */
}

/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
/* logo
-----------------------------------------------------*/
#footer .logo{
	margin				: 0 0 65px 0;
	text-align			: center;
}
#footer .logo img{ width: 285px; }
@media screen and (min-width: 769px) {
#footer .logo img{ width: 460px; }
}
/* logo
-----------------------------------------------------*/
#footer .about p{
	margin: 0 0 2em 0;
}
#footer .about a:hover{
	color: #993300;
}
@media screen and (max-width: 768px) {
#footer .about{
	padding: 0 4vw;
}
}
@media screen and (min-width: 769px) {
#footer .about{
	width: 700px;
	margin: 0 auto 50px auto;
}
}
/* navigation
-----------------------------------------------------*/
#footer .navigation{
	margin				: 0 0 80px 0;
	padding				: 10px 0 0 0;
}
#footer .navigation>.navi{ justify-content: center; }

/* copy
-----------------------------------------------------*/
#footer .copy{ text-align: center; }
#footer .copy:after{
	font-size: 1rem;
	content:"©︎フォトニクス生命工学研究開発拠点"; }

#footer .copy>small{ font-size: 1rem; }
#footer .copy>small{ display: none; }