@charset "utf-8";

/*----------------------------------------------------------------
 TopPage only
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
/*-----------------------------------------------------
 content:intro
-----------------------------------------------------*/
#intro{
	padding				: 25px 0 0 0;
	color				: #FFF;
	margin				: 0 0 calc(var(--separater-height) * -1) 0;
}

@media screen and (min-width: 1050px) {
#intro{
	margin				: 0 0 calc(var(--separater-height) * -1 * 1.3) 0;
	padding				: 50px 0 0 0;
}
}

/* mv
-----------------------------------------------------*/
#intro .mv{ position: relative; }

#intro .mv .slider{
	margin				: 0 calc(50% - 50vw);
	width				: 100vw;
}
#intro .mv .slider li{ list-style: none; }

/*-----------------------------------------------------
 content:copy
-----------------------------------------------------*/
#copy{
	background			: #FFF;
	margin				: var(--separater-height) 0;
	padding				: 1px 0;
}
#copy::before{
	content				:"";
	position			: absolute;
	top					: calc(var(--separater-height) * -1);
	left				: 0;
	width				: 0;
	height				: 0;
	border-style		: solid;
	transform			: rotate(180deg);
	border-width		: 0 0 var(--separater-height) 100vw ;
	border-color		: transparent  transparent  transparent #fff;
}
#copy::after{
	content				:"";
	position			: absolute;
	bottom					: calc(var(--separater-height) * -1);
	left				: 0;
	width				: 0;
	height				: 0;
	border-style		: solid;
	transform			: rotate(0);
	border-width		: 0 0 var(--separater-height) 100vw ;
	border-color		: transparent  transparent  transparent #fff;
}

/* text
-----------------------------------------------------*/
#copy .text{
	margin				: 30px 0 10px 0;
	padding				: 0 var(--content-padding);
	line-height			: 1.888;
}

@media screen and (min-width: 769px) {
#copy .text{
	padding				: 0 30px;
	margin				: calc(var(--separater-height) * 0.7) 0 10px 0;
	font-size			: 1.8rem;
}
}

/* banner
---------------------------------*/
#copy .text .banner{ margin: 2em 0 0 0; }
#copy .text .banner img{
	max-width			: 370px;
	width				: 50%;
	min-width			: 240px;
}

#copy .text .logo1{ margin: 2em 0 0 0; }
#copy .text .logo1 img{
	max-width			: 75px;
	width				: 50%;
	min-width			: 60px;
}
#copy .text .logo2{ margin: 0 0 2em 0; }
#copy .text .logo2 img{
	max-width			: 90px;
	width				: 50%;
	min-width			: 60px;
}

@media screen and (min-width: 769px) {
#copy .text .logo1 img{ max-width: 210px; }
#copy .text .logo2 img{ max-width: 248px; }
}



/*-----------------------------------------------------
 content:news
-----------------------------------------------------*/
#news .title{ color: #FFF; }




#report h3:not(class){
	color: #FFF;
	text-align: center;
	font-size: 2.2rem;
}

/*-----------------------------------------------------
 content:about
-----------------------------------------------------*/
#about{
	margin				: 0;
	padding				: 0 0 50px 0;
	background			: #FFF;
}

#about::after{
	content				:"";
	position			: absolute;
	bottom				: calc(var(--separater-height) * -1);
	left				: 0;
	width				: 0;
	height				: 0;
	border-style		: solid;
	border-width		: 0 0 var(--separater-height) 100vw ;
	border-color		: transparent  transparent  transparent #FFF;
}


/* container
-----------------------------------------------------*/

/* title
-----------------------------------------------------*/
#about .title{ color: var(--heading-color) }

#about p{ line-height: 2; }

#about .about-contents{
	padding: 0 var(--content-padding);
}

/*-----------------------------------------------------
 section:organization
-----------------------------------------------------*/
#organization{
	--border-color: #675d49;
	--group-bg-color: rgba(247, 238, 218,0.8);

margin: 0 0 50px 0; }
@media screen and (min-width: 769px) {
#organization{ margin: 0 0 75px 0; }
}

#organization h3{
	text-align: center;
}
#organization .text{
	margin: 0 auto;
	max-width: 700px;
}

#organization .organization-chart{
	font-size: 1.3rem;
	margin: 30px 0;
	font-feature-settings: "palt";
}
@media screen and (min-width: 769px) {
#organization .organization-chart{
	font-size: 1.7rem;
	margin: 60px 0;
}
}

#organization .role>dl{
	border: 1px solid var(--border-color);
	background: var(--group-bg-color);
	border-radius: 10px;
	font-weight: bold;
	color: #000;
}
#organization .role:not(.lips){
	margin: 0 auto 30px auto;
	max-width: 640px;
}
#organization .role>dl>dt{
	text-align: center;
	padding: 5px 10px;
	line-height: 1.2;
	font-size: 10px;
}
#organization .role>dl>dt small{
	font-size: 73.33333%;
}
#organization .role>dl>dt figure{
	padding: 10px 0;
	font-size: 1.5rem;
}
#organization .role>dl>dt figure img{
	max-width: 28vw;
}
#organization .role>dl>dt figure figcaption{
	margin: 10px 0 0 0;
}
#organization .role>dl>dd{
	padding: 0 15px 15px 15px;
}


@media screen and (min-width: 769px) {
#organization .role>dl{
	border: 2px solid var(--border-color);
	border-radius: 20px;
}
#organization .role>dl>dt{
	font-size: 17px;
	padding: 15px 0;
}
#organization .role>dl>dt figure{
	font-size: 2.4rem;
}
#organization .role>dl>dt figure figcaption{
	margin: 20px 0 0 0;
}
#organization .role>dl>dt figure small{
	font-size: 70.833333%;
}
#organization .role>dl>dt figure img{
	max-width: 203px;
}

#organization .role>dl>dd{
	padding: 0 30px 30px 30px;
}
}





#organization .group-list li{
	list-style: none;
}
#organization .group-list li:first-child:last-child .organization-list{
	margin: 0 auto;
}

#organization .organization-list{
	--item-border: #7c7c7b;
	--item-bg: #ffffff;
	--item-radius: 5px;
	--item-gap: 10px;
	--item-num: 2;
	--item-min-height: 40px;
	--item-small-font: 8px;
	--item-font: 10px;

	display				: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: calc(var(--item-gap) / 2) var(--item-gap);
	margin: calc(var(--item-gap) / 2) auto 0 auto;
}

#organization .organization-list>li{
	background: var(--item-bg);
	border: 1px solid var(--item-border);
	flex: 0 0 calc(calc(100% - calc(var(--item-gap) * calc(var(--item-num) - 1))) / var(--item-num));
	border-radius: var(--item-radius);

	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--item-min-height);
	line-height: 1.1;
}
@media screen and (min-width: 769px) {
#organization .organization-list{
	--item-radius: 10px;
	--item-gap: 15px;
	--item-num: 3;
	--item-min-height: 110px;
	--item-small-font: 12px;
	--item-font: 17px;
}
#organization .role:not(.lips) .organization-list{
	--item-gap: 55px;
	--item-num: 2;
	max-width: 480px;
}
#organization .organization-list>li{
	border: 2px solid var(--item-border);
}
}
@media screen and (min-width: 1050px) {
#organization .lips .organization-list{
	--item-gap: 20px;
	--item-num: 4;
}
}


#organization .organization{
	padding: 5px;
	font-size: var(--item-font);
}
#organization .organization small{
	font-size: var(--item-small-font);
	display: block;
}

@media screen and (max-width: 768px) {
#organization .organization figure>img{
	display: none;
}
#organization .organization br:not(.show){
	display: none;
}
}
@media screen and (min-width: 769px) {
#organization .organization figure{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
#organization .organization figure>img{
	width: 44px;
	height: 34px;
	object-fit: contain;
}
#organization .organization figure>figcaption{
	flex: 0 0 calc(100% - 52px);
}
}

#organization .osaka-u.attached-center .organization-list{
	--item-border: #0091bc;
	--item-bg: #e2eff7;
}

#organization .other-university .organization-list{
	--item-border: #ff6464;
	--item-bg: #ffefef;
}

#organization .company .organization-list{
	--item-border: #00d7bd;
	--item-bg: #dcfbf8;
}
#organization .government .organization-list{
	--item-border: #975c29;
	--item-bg: #dccbb0;
}
#organization .consortium .organization-list{
	--item-border: #ff8b00;
	--item-bg: #fff3e5;
}

@media screen and (min-width: 769px) {
#organization .consortium .organization-list,
#organization .local .organization-list{
	--item-min-height: 125px;
}
}

#organization .osaka-u.university{
	background: #e2eff7;
	border: 1px solid #0091bc;
	border-radius: 5px;
}
#organization .osaka-u.university .organization{
	display				: flex;
	align-items: center;
	flex-direction: row;
	padding: 0;
}
#organization .osaka-u.university .organization figure{
	flex: 3;
	text-align: center;
}
#organization .osaka-u.university .organization .department-list{
	--item-gap: 10px;
	--item-num: 3;
	flex: 7;

	display				: flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	font-size: 0.8rem;
	line-height: 1.2;
	gap: calc(var(--item-gap) / 2) var(--item-gap);
	padding: calc(var(--item-gap) / 2) 0;
}
#organization .osaka-u.university .organization .department-list>li{
	flex: 0 0 calc(calc(100% - calc(var(--item-gap) * calc(var(--item-num) - 1))) / var(--item-num));
}
@media screen and (min-width: 769px) {
#organization .osaka-u.university{
	border: 2px solid #0091bc;
	border-radius: 10px;
}
#organization .osaka-u.university .organization .department-list{
	--item-num: 4;
	font-size: 1.2rem;
}
#organization .osaka-u.university .organization figure{
	text-align: left;
	padding: 0 0 0 15px;
}
}
@media screen and (min-width: 1050px) {
#organization .osaka-u.university .organization .department-list{
	--item-gap: 15px;
	--item-num: 6;
	flex: 74%;
}
#organization .osaka-u.university .organization figure{
	flex: 26%;
	padding: 20px;
}
}



#organization .external{
	--arrow-size: 8px;
	position: relative;
	padding-top: 25px;
	z-index: 1;
}
#organization .external .role{
	position: relative;
}
#organization .external .role dl{
	z-index: 2;
	transform: translateZ(2);
}
#organization .external .arrow{
	display: block;
	height: 100%;
	border-left: calc(var(--arrow-size) / 2.5) solid var(--border-color);
	position: absolute;
	font-weight: bold;
	color:  var(--border-color);
	padding: 0 0 0 5px;
	font-size: 10px;
	z-index: 1;
	transform: translateZ(1);
}

#organization .external .arrow::before,
#organization .external .arrow::after{
	content: "";
	display: block;
	background: var(--border-color);
	height: calc(tan(60deg) * var(--arrow-size) / 2);
	width: var(--arrow-size);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	position: absolute;
	left: 0px;
}
#organization .external .arrow::before{
	top: -5px;
	transform: translateX(-70%);
}
#organization .external .arrow::after{
	bottom: -6px;
	transform: rotate(180deg) translateX(70%);
}

#organization .external>.arrow{
	height: 14px;
	top: 5px;
	left: calc(50%);
	transform: translateX(-50%) translateZ(1);
}
#organization .external>.arrow::before{
}
#organization .external .consortium .arrow{
	top: -20px;
	right: 20px;
	height: calc(100% + 20px + 24px);
}

@media screen and (min-width: 769px) {
#organization .external{
	--arrow-size: 15px;
	padding-top: 50px;
}
#organization .external .arrow{
	font-size: 17px;
}

#organization .external .arrow::before,
#organization .external .arrow::after{
	left: -1px;
}
#organization .external .arrow::before{
	top: -10px;
	transform: translateX(-65%);
}
#organization .external .arrow::after{
	bottom: -12px;
	transform: rotate(180deg) translateX(65%);
}

#organization .external>.arrow{
	height: 30px;
	top: 10px;
	left: calc(50% + 1em + 2.5px);
	transform: translateX(-50%) translateZ(1);
}
#organization .external .consortium .arrow{
	top: -40px;
	right: 40px;
	height: calc(100% + 40px + 18px);
}

}


/*-----------------------------------------------------
 section:member
-----------------------------------------------------*/
#member .title{ color: var(--heading-color); }
@media screen and (max-width: 768px) {
#member .container{ width: auto; }
}
@media screen and (min-width: 769px) {
#member{ margin: 0 0 60px 0; }
}



/* member-list
-----------------------------------------------------*/
#member .member-list:not(:last-child){
	margin: 30px 0;
}
#member .member-list a{ text-decoration: none; }
#member .member-list h4{
	margin: 10px 0;
	font-weight: bold;
	color: #303030;
}

#member .member-list ul{ border-bottom: 1px solid #ccc; }
#member .member-list li{
	border-top			: 1px solid #ccc;
	list-style			: none;
}
#member .member-list li span,
#member .member-list li a{
	position				: relative;
	display: block;
	padding					: 5px 0;
	line-height				: 1.8;
}

#member .member-list li a:hover{
	background			: #ffe7cc;
	color				: var(--text-color);
}
#member .member-list li a::after{
	content				: url(../../common/images/arrow-b.svg);
	position			: absolute;
	top					: 7px;
	right				: 0;
}
#member .member-list li strong{
	position			: relative;
	display				: block;
	grid-role			: position;
	padding				: 0;
	font-weight			: normal;
}

#member .member-list li em{
	grid-role			: name;
	font-weight			: bold;
}
#member .member-list li small{
	grid-role			: from;
	font-size			: 100%;
}

@media screen and (max-width: 768px) {
#member .member-list li small:before{ content: "［"; }
#member .member-list li small:after{ content: "］"; }
}


@media screen and (min-width: 769px) {
#member .member-list{ padding: 0 var(--content-padding); }
#member .member-list:not(:last-child){
	margin: 50px 0;
}
#member .member-list li span,
#member .member-list li a{
	display					: -ms-grid;
	display					: grid;

	-ms-grid-template-columns	: 200px 130px 1fr ;
	grid-template-columns		: 200px 130px 1fr ;
	-ms-grid-template-rows		: 1fr ;
	grid-template-rows			: 1fr ;
	gap							: 0px 0px;
	place-items: center stretch;
	grid-template-roles:
		"position name from";
}



#member .member-list li strong{
	padding				: 0 15px;
}
#member .member-list li strong::before,
#member .member-list li strong::after{
	content				: "";
	position			: absolute;
	left				: 0;
	z-index				: 2;
	display				: none;
	width				: 100%;
	height				: 1px;
	background			: var(--text-color);
}

#member .member-list li strong::before{ top: -6px; }
#member .member-list li strong::after{ bottom: -6px; }

#member .member-list li strong::before,
#member .member-list li:last-child strong::after{ display: block; }
#member .member-list li em{ 
	padding: 0 0 0 30px;
 }
}

@media screen and (min-width: 1050px) {
#member .member-list.wide li span,
#member .member-list.wide li a{
	-ms-grid-template-columns	: 345px 130px 1fr ;
	grid-template-columns		: 345px 130px 1fr ;
	-ms-grid-template-rows		: 1fr ;
	grid-template-rows			: 1fr ;
	gap							: 0px 0px;
	grid-template-roles:
		"position name from";
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#member .member-list li span,
#member .member-list li a{ display: block; }
#member .member-list li strong,
#member .member-list li em,
#member .member-list li small{ display: inline-block; }
#member .member-list li strong	{ width: 40%; }
#member .member-list li em		{ width: 15%; }
#member .member-list li small	{ width: 35%; }
}




/*-----------------------------------------------------
 content:vision
-----------------------------------------------------*/
#vision{
	background			: #FFF;
	margin				: var(--separater-height) 0 ;
	padding				: 1px 0;
}
#vision::before{
	content				:"";
	position			: absolute;
	top					: calc(var(--separater-height) * -1);
	left				: 0;
	width				: 0;
	height				: 0;
	border-style		: solid;
	transform			: rotate(180deg);
	border-width		: 0 0 var(--separater-height) 100vw ;
	border-color		: transparent  transparent  transparent #fff;
}
#vision::after{
	content				:"";
	position			: absolute;
	bottom					: calc(var(--separater-height) * -1);
	left				: 0;
	width				: 0;
	height				: 0;
	border-style		: solid;
	transform			: rotate(0);
	border-width		: 0 0 var(--separater-height) 100vw ;
	border-color		: transparent  transparent  transparent #fff;
}

/* container
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
/* #vision .container{ padding: 0 var(--content-padding); } */
}

#vision .title{ color: var(--heading-color); }


#vision h3{
	margin				: 0 0 20px 0;
	line-height			: 1.4;
	text-align			: center;
	font-size			: 2rem;
}
#vision h4{
	margin				: 0 0 15px 0;
	text-align			: center;
	line-height			: 1.53846;
	font-weight			: bold;
	font-size			: 2rem;
	color				: #645d4b;
}
#vision p{ line-height: 2; }

@media screen and (min-width: 769px) {
#vision h3{
	margin				: 0 0 30px 0;
	font-size			: 2.5rem;
}
#vision h4{
	margin				: 0 0 30px 0;
	font-size			: 2.2rem;
}
}

@media screen and (min-width: 1050px) {
#vision h3{
	margin				: 0 0 40px 0;
	font-size			: 3rem;
}
#vision h4{ font-size: 2.6rem; }
}

/* row
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
#vision .row>.col{ margin: 0 0 var(--content-padding)  0; }
#vision .row>.col:last-child{ margin: 0; }
}
@media screen and (min-width: 769px) {
#vision .section:last-child .row{ margin: 0; }
}

/* vision-contents
-----------------------------------------------------*/
#vision .vision-contents{
	margin				: 0 0 25px 0;
	padding				: var(--content-padding);
	background			: #FFF;
}
@media screen and (min-width: 769px) {
#vision .vision-contents{
	padding				: 0 30px 30px 30px;
	margin				: 0 0 50px 0;
}
}
@media screen and (min-width: 1050px) {
#vision .vision-contents{ padding: 0 50px 55px 50px; }
}

/* section
-----------------------------------------------------*/
#vision .section:not(:last-child){ margin: 0 0 40px 0; }

@media screen and (min-width: 769px) {
#vision .section:not(:last-child){ margin: 0 0 60px 0; }
}
@media screen and (min-width: 1050px) {
#vision .section:not(:last-child){ margin: 0 0 80px 0; }
}

/* workshop
-----------------------------------------------------*/
#vision .workshop{
	position			: relative;
	padding				: 30px;
	background			: #f7f1e4;
}
@media screen and (min-width: 769px) {
#vision .workshop{
	margin: 25px 0;
	padding				: 30px;
}
}

/* row
---------------------------------*/
@media screen and (min-width: 769px) {
#vision .workshop .row{
	gap: 0;
align-items: center; }
#vision .workshop .row>.col{
	flex: 0 1 calc(100% - 230px);
	margin: 0;
}
#vision .workshop .row>.col:nth-child(odd){
	flex: 0 0 200px;}
}

@media screen and (min-width: 1050px) {
}


/* text / image
---------------------------------*/
#vision .workshop .image{
	margin: 0;
	text-align: center; }
#vision .workshop .text{
	margin				: 0 0 15px 0;
}
@media screen and (min-width: 769px){
#vision .workshop .text{
	position: relative;
	top: -0.5em;
}	
}
@media screen and (min-width: 1050px) {
#vision .workshop .text{
	margin				: 0 0 15px 0;
	font-size			: 1.4rem;
}
}

/* link
---------------------------------*/
#vision .workshop .link .btn{
	padding				: 12px 20px;
}
#vision .workshop .link{
	margin: 0;
}
@media screen and (max-width: 768px) {

#vision .workshop .link .btn{ width: 100%; }
}
@media screen and (min-width: 769px){
#vision .workshop .link .btn{
	font-size			: 1.4rem;
}
}



/* item01
-----------------------------------------------------*/
#vision .item01 .main-image{ margin: 50px 0; }
#vision .item01 p{ margin: 0 0 1em 0; }
@media screen and (min-width: 769px) {
#vision .item01 .main-image{ margin: 80px 0; }
}
@media screen and (min-width: 1050px) {
#vision .item01{
	margin				: 0 auto 80px auto!important;
	width				: 700px;
}
}

/* item02
-----------------------------------------------------*/
#vision .item02 .vision01 h4{ color: #ff5144; }
#vision .item02 .vision02 h4{ color: #4d98ff; }
#vision .item02 .vision03 h4{ color: #12bd60; }
#vision .item02 .vision04 h4{ color: #a067ca; }
#vision .item02 h4>img{
	display				: block;
	margin				: 0 auto 10px auto;
}
#vision .item02 p{
	text-align			: justify;
	word-wrap			: break-word;
	text-justify		: inter-character;
}
#vision .item02 .row:not(:last-child){ margin: 0 0 20px 0; }
@media screen and (max-width: 768px) {
#vision h4{ font-size: 1.8rem; }
#vision .item02 h4>img{ width: 35vw; }
}
@media screen and (min-width: 769px) {
#vision .item02 .row{ margin: 0 0 50px 0; }
}

/* item03
-----------------------------------------------------*/
#vision .item03 h4{
	margin				: 0 0 10px 0;
	text-align			: left;
}

@media screen and (max-width: 768px) {
#vision .item03 .row{ flex-direction: column; }
#vision .item03 .row:not(:last-child){ margin: 0 0 30px 0; }
}
@media screen and (min-width: 769px) {
#vision .item03 h4{ margin: -8px 0 10px 0; }
#vision .item03 .row:not(:last-child){ margin: 10px 0 40px 0; }
}

/* icon-list
---------------------------------*/
#vision .item03 .icon-list{ margin: 5px 0 15px 0; }
#vision .item03 .icon-list li{
	display				: inline-block;
	list-style			: none;
	margin				: 0 2px 0 0;
}
#vision .item03 .icon-list img{ width: 24px; }
@media screen and (min-width: 769px) {
#vision .item03 .icon-list img{ width: 35px; }
}

/*-----------------------------------------------------
 content:sdgs
-----------------------------------------------------*/
#vision .sdgs{
	padding				: 50px 0;
}



#vision .sdgs p{
	line-height: 2;
}

#vision .sdgs p:not(:last-child){
	margin: 0 0 20px 0;
}

#vision .sdgs .sdgs-contents{
	--item-padding: 30px;
	background: #FFF;
	padding: 0 var(--item-padding);
}
#vision .sdgs .sdgs-contents .image{
	text-align: center;
	margin: 0 0 var(--item-padding) 0;
}

@media screen and (min-width: 769px) {
#vision .sdgs .sdgs-contents{
	--item-padding: 80px;
}
#vision .sdgs .sdgs-contents .image img{
	max-width: 75%;
}

}

/* title
-----------------------------------------------------*/
#vision .sdgs .title{
	color: #FFF;
}



/*-----------------------------------------------------
 content:research
-----------------------------------------------------*/
#research{
	padding				: 0 0 100px 0;
}

/* title
-----------------------------------------------------*/
#research h2.title{
	color: #FFF;
}

#research .research-item{
	--item-gap: 30px;
	background: #FFF;
	padding: var(--item-gap);
	margin: 0 0 var(--item-gap) 0;
}
#research .research-item [data-accordion="opener"]{
	cursor: pointer;
}
#research .research-item .title{
	padding: var(--item-gap) 0 0 0;
}
#research .research-item .title h3{
	margin: 0;
	font-size: 2rem;
	line-height: 1.4;
}
#research .research-item .leader{
	color: var(--heading-color);
	text-align: center;
	margin: 1em 0 0 0;
}
#research .research-item .title .leader .position{
	font-weight: normal;
}
#research .research-item h4{
	font-weight: bold;
	font-size: 1.6rem;
	margin: 1em 0 0.5em 0;
}
#research .research-item .opener{
	display: block;
	margin: var(--item-gap) 0 0 0;
}
#research .research-item .opener::before{
	content: 'READ MORE';
	color: var(--main-color);
	font-size: 1.2rem;
	display: block;
	margin: 0 0 3px 0;
}
#research .research-item.open .opener::before{
	content: 'CLOSE';
}
#research .research-item .opener::after{
	content: "";
	display: block;
	margin: 0 auto;
	width: 25px;
	height: 25px;
	background: url(../../common/images/arrow-b.svg) center center /contain no-repeat;
	transform: rotate(90deg);
	transition			: transform .3s ease-in-out;
}
#research .research-item.open .opener::after{
	background: url(../../common/images/close.png) center center /contain no-repeat;
	transform: rotate(0deg);

}
#research .research-item [data-accordion="content"]{
	margin: var(--item-gap) 0 0 0;
}
@media screen and (max-width: 768px) {
#research .research-item .row.row-reverse{
	display: flex;
	flex-direction: column-reverse;
}
}
@media screen and (min-width: 769px) {
#research .research-item{
	--item-gap: 15px;
}

#research .research-item .title{
	position: relative;
	padding: 0;
}
#research .research-item .title .text{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 100%;
	padding: 0 0 calc(var(--item-gap) * 1.5) 0;
}

#research .research-item .opener{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: var(--item-gap);
	width: 100%;
}
}
@media screen and (min-width: 1050px) {
#research .research-item{
	--item-gap: 50px;
}
#research .research-item .title h3{
	font-size: 2.6rem;
}
}



/*-----------------------------------------------------
 content:tracs
-----------------------------------------------------*/
#tracs{
	background			: #FFF;
	margin				: var(--separater-height) 0 0 0;
	padding				: 1px 0;
}
#tracs::before{
	content				:"";
	position			: absolute;
	top					: calc(var(--separater-height) * -1);
	left				: 0;
	width				: 0;
	height				: 0;
	border-style		: solid;
	transform			: rotate(180deg);
	border-width		: 0 0 var(--separater-height) 100vw ;
	border-color		: transparent  transparent  transparent #fff;
}

#tracs .btn{
	max-width: 700px;
	display: flex;
	align-items: center; 
	justify-content: center;
	position: relative;
	margin: 0 auto;
}
#tracs .btn::after {
	content: '';
	display: inline-block;
	width: 25px;
	height: 5px;
	border-bottom: solid 1px #FFF;
	border-right: solid 1px #FFF;
	position: absolute;
	right: 1em;
	top: 47.5%;
	transform: skew(45deg);
}
#tracs .btn:hover::after {
	border-bottom: solid 1px var(--main-color);
	border-right: solid 1px var(--main-color);
}
@media screen and (min-width: 769px) {
#tracs .btn{
	height: 100px;
	font-size: 1.625em;
}
#tracs .btn::after {
	right: 2em;
}
}


/* container
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
	/* #tracs .container{ padding: 0 var(--content-padding); } */
	}
	
	#tracs .title{ color: var(--heading-color); }
	
	
	#tracs h3{
		margin				: 0 0 20px 0;
		line-height			: 1.4;
		text-align			: center;
		font-size			: 2rem;
	}
	#tracs h4{
		margin				: 0 0 15px 0;
		text-align			: center;
		line-height			: 1.53846;
		font-weight			: bold;
		font-size			: 2rem;
		color				: #645d4b;
	}
	#tracs p{ line-height: 2; }
	
	@media screen and (min-width: 769px) {
	#tracs h3{
		margin				: 0 0 30px 0;
		font-size			: 2.5rem;
	}
	#tracs h4{
		margin				: 0 0 30px 0;
		font-size			: 2.2rem;
	}
	}
	
	@media screen and (min-width: 1050px) {
	#tracs h3{
		margin				: 0 0 40px 0;
		font-size			: 3rem;
	}
	#tracs h4{ font-size: 2.6rem; }
	}
	
	/* row
	-----------------------------------------------------*/
	@media screen and (max-width: 768px) {
	#tracs .row>.col{ margin: 0 0 var(--content-padding)  0; }
	#tracs .row>.col:last-child{ margin: 0; }
	}
	@media screen and (min-width: 769px) {
	#tracs .section:last-child .row{ margin: 0; }
	}
	
	/* tracs-contents
	-----------------------------------------------------*/
	#tracs .tracs-contents{
		margin				: 0 0 25px 0;
		padding				: var(--content-padding);
		background			: #FFF;
	}
	@media screen and (min-width: 769px) {
	#tracs .tracs-contents{
		padding				: 0 30px 30px 30px;
		margin				: 0 0 50px 0;
	}
	}
	@media screen and (min-width: 1050px) {
	#tracs .tracs-contents{ padding: 0 50px 55px 50px; }
	}
	
	/* section
	-----------------------------------------------------*/
	#tracs .section:not(:last-child){ margin: 0 0 40px 0; }
	
	@media screen and (min-width: 769px) {
	#tracs .section:not(:last-child){ margin: 0 0 60px 0; }
	}
	@media screen and (min-width: 1050px) {
	#tracs .section:not(:last-child){ margin: 0 0 80px 0; }
	}
	

/*-----------------------------------------------------
 content:contact
-----------------------------------------------------*/
#contact{
	margin				: var(--separater-height) 0 30px 0;
	color				: #FFF;
}
@media screen and (min-width: 769px) {
#contact{
	margin				: var(--separater-height) 0 100px 0;
	color				: #FFF;
}
}

/* container
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
#contact .container{ padding: 0 var(--content-padding); }
}
@media screen and (min-width: 1050px) {
#contact .container{ padding: 0 55px; }
}

/* contact-data
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
#contact .contact-data{ text-align: center; }
}

/* button
---------------------------------*/
#contact .contact-data .button .btn{
	display				: block;
	margin				: 0 auto 15px auto;
	padding				: 25px 0;
	background			: #FFF;
	color				: var(--main-color);
}
#contact .contact-data .button .btn:hover{
	border-color		: #FFF;
	background			: transparent;
	color				: #FFF;
}
@media screen and (max-width: 768px) {
#contact .contact-data .button .btn{ max-width: 325px; }
}
@media screen and (min-width: 769px) {
#contact .contact-data .button .btn{
	font-size			: 1.6rem;
	padding				: 30px 0;
}
}
@media screen and (min-width: 1050px) {
#contact .contact-data .button .btn{
	padding				: 42px 0;
	font-size			: 1.8rem;
}
}