@charset "utf-8";
/* CSS Document */
#wrapper { position: relative; overflow: inherit; }
/*-- headline ------------------------------------------------------------*/
#headline { padding: 15vh 4%; /*border-top: 1px solid var(--base-color); border-bottom: 1px solid var(--base-color);*/ position: relative; overflow: hidden; background:url("../img/second/headlineBg.png") center center no-repeat; background-size: cover; border-bottom: 1px solid #62c1b4; border-top: 1px solid #62c1b4; }
#headline h2 { color: #000; line-height: 1.5; letter-spacing: .05em; text-align: center; }
#headline .kika { position: absolute; top: 0; left: 0; width: 25vw;}
#headline .kika02 { position: absolute; bottom: 0; right: 0; width: 25vw; transform: rotate(-180deg);}
@media screen and (max-width: 599px) {
	#headline { padding: 10vh 4%; background:url("../img/second/headlineBg_sp.png") center center no-repeat; background-size: cover; }
	h2 { font-size: 2.4em; line-height: 1.0; }
}
@media screen and (min-width: 600px) {
	h2 { font-size: 3.0em; line-height: 1.0; }
	#content { margin-top: 5vh;}
}
@media screen and (min-width: 600px) and (max-width: 899px)  {
	#headline { padding: 10vh 4%; background:url("../img/second/headlineBg_sp.png") center center no-repeat; background-size: cover; }
}
@media screen and (min-width: 900px) and (max-width: 1079px)  {
}
@media screen and (min-width: 1080px) and (max-width: 1199px)  {
}
@media screen and (min-width: 1200px) and (max-width: 1479px)  {
}
@media screen and (min-width: 1480px) {
}


/*-- breadcrumbs ------------------------------------------------------------*/
#breadcrumbs { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; padding: 5px 2%; /*border-bottom: 1px solid var(--base-color); background: #edf1ef;*/ }
#breadcrumbs li { font-size: 0.8em; margin-right: 5px; display: inline-block; }
#breadcrumbs li:after { content: ">"; margin-left: 10px; }
#breadcrumbs li:last-child { margin-right: 0px; }
#breadcrumbs li:last-child:after { display: none; }
@media screen and (max-width: 599px) {
	#breadcrumbs { margin-bottom: 20px; }
	#breadcrumbs li { font-size: 0.7em; }
}

/*-- section ------------------------------------------------------------*/

@media screen and (max-width: 767px) {
	.flexContent { padding: 0 6%; }
	.thirdFlex { width: 100%; margin: 0 auto; }
	.flexContent aside { margin-bottom: 20px; }
	.flexContent aside .sideTtl { background: #f4f4f4; padding: 5px 10px; text-align: center; color: var(--base-color); border-top: 3px solid  var(--base-color); margin-bottom: 10px; position: relative; cursor: pointer; }
	.flexContent aside .sideTtl:after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
	.flexContent aside .sideTtl.active:after { content: "\f106"; font-family: "Font Awesome 5 Free"; font-weight: 900;}
	.flexContent aside li { margin-bottom: 10px; font-size: 0.9em; padding-left: 1.5em; text-indent: -1.5em; }
	.flexContent aside li:before { content: "├"; margin-right: 0.5em; color: var(--base-color); }
	.flexContent aside li.subMenu { margin-left: 0.5em; }
	.flexContent aside li.subMenu:before { content: "-"; margin-right: 0.5em; color: var(--base-color); }
	
	.flexContent main section { margin-bottom: 5vh; }
	
	.flexContent main .subTtl { /*background: var(--base-color);*/ color: var(--base-color); padding: 5px 0px; border-bottom: 1px solid #0d4920; position: relative; margin-bottom: 20px; letter-spacing: 0.05em; font-size: 1.3em; font-weight: bold; }
	.flexContent main .subTtl:after { content: ""; position: absolute; left: 0; bottom: -3px; background: var(--base-color); height: 3px; width: 40%; }
	
	.flexContent main .thirdFlex { display: flex; justify-content: flex-start; flex-wrap: wrap;}
	.flexContent main .thirdFlex li { width: 48%; margin: 0 4% 40px 0; }
	.flexContent main .thirdFlex li:nth-child(2n) { margin-right: 0px; }
	.flexContent main .thirdFlex li .subTtl02 { font-size: 1.0em; margin-bottom: 10px; }
	.flexContent main .thirdFlex li p { margin: 0 0 10px; text-align: left; font-size: 0.9em; }
	
	.fourthFlex { display: flex; justify-content: space-between; flex-wrap: wrap; }
	.fourthFlex li { width: 48%; margin-bottom: 20px; }
	.fourthFlex li p { margin: 20px 0 0; text-align: center; font-size: 0.9em; }
	
	.flexContent main .subTtl03 { font-size: 1.0em; text-align: left; font-weight: bold; padding-left: 2em; text-indent: -2.5em; margin-bottom: 10px; }
}
@media screen and (min-width: 768px) {
	.flexContent { display: flex; justify-content: space-between; max-width: 1600px; margin: 0 auto; width: 96%;}
	.flexContent aside { width: 300px; margin-right: 4%; }
	.flexContent aside .in-top { position: sticky; top: 10%; }
	.flexContent aside .sideTtl { background: #f4f4f4; padding: 5px 10px; text-align: center; color: var(--base-color); border-top: 3px solid  var(--base-color); margin-bottom: 10px;}
	.flexContent aside li { margin-bottom: 10px; font-size: 0.9em; padding-left: 1.5em; text-indent: -1.5em; }
	.flexContent aside li:before { content: "├"; margin-right: 0.5em; color: var(--base-color); }
	.flexContent aside li.subMenu { margin-left: 0.5em; }
	.flexContent aside li.subMenu:before { content: "-"; margin-right: 0.5em; color: var(--base-color); }
	
	.flexContent main { width: calc(96% - 300px);}
	.flexContent main .subTtl { /*background: var(--base-color);*/ color: var(--base-color); padding: 5px 5px; border-bottom: 1px solid #0d4920; position: relative; margin-bottom: 40px; letter-spacing: 0.05em;}
	.flexContent main .subTtl:after { content: ""; position: absolute; left: 0; bottom: -3px; background: var(--base-color); height: 3px; width: 20%; }
	.flexContent main .subTtl02 { font-size: 1.1em;  }
	.flexContent main section { margin-bottom: 10vh; }
	.flexContent main .subTtl03 { font-size: 1.1em; text-align: left; font-weight: bold; }
	
	.flexContent main .thirdFlex { display: flex; justify-content: flex-start; flex-wrap: wrap;}
	.flexContent main .thirdFlex li { width: 31%; margin: 0 3.5% 40px 0; }
	.flexContent main .thirdFlex li:nth-child(3n) { margin-right: 0px; }
	.flexContent main .thirdFlex li p { margin: 0 0 10px; text-align: left; font-size: 0.9em; }
	
	.fourthFlex { display: flex; justify-content: space-between; flex-wrap: wrap; }
	.fourthFlex li { width: 23%; margin: 0 auto 20px; }
	.fourthFlex li p { margin: 20px 0 0; text-align: center; font-size: 0.9em; }
	
	.imgFlex { display: flex; justify-content: flex-start; flex-wrap: wrap;}
	.imgFlex div { margin-right: 20px; margin-bottom: 20px; }
}
@media screen and (min-width: 768px) and (max-width: 899px) {
	.flexContent aside { width: 180px; }
	.flexContent main { width: calc(96% - 180px);}
	
	.thirdFlex { display: flex; justify-content: space-between; flex-wrap: wrap;}
	.thirdFlex li { width: 48%; margin: 0 auto 20px; }
	.thirdFlex li p { margin: 20px 0 0; text-align: center; }
	
	.fourthFlex li { width: 48%; margin: 0 auto 40px; }
}
@media screen and (min-width: 900px) and (max-width: 1289px) {
	.flexContent aside { width: 200px; }
	.flexContent main { width: calc(96% - 200px);}
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	.flexContent aside { width: 220px; }
	.flexContent main { width: calc(96% - 220px);}
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
	.flexContent aside { width: 240px; }
	.flexContent main { width: calc(96% - 240px);}
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
	.flexContent aside { width: 260px; }
	.flexContent main { width: calc(96% - 260px);}
}
@media screen and (min-width: 1490px) and (max-width: 1589px) {
	.flexContent aside { width: 280px; }
	.flexContent main { width: calc(96% - 280px);}
}


/*-- counter ------------------------------------------------------------*/
ol.numList { --prefix: ""; list-style-type: decimal; display: block; }

ol.numList.prefix-p { --prefix: "P"; }
ol.numList.prefix-r { --prefix: "R"; }
ol.numList.prefix-b { --prefix: "B"; }
ol.numList.prefix-l { --prefix: "L"; }
ol.numList.prefix-t { --prefix: "T"; }

ol.numList > li { margin-bottom: 2.5vh; padding-bottom: 2.5vh; border-bottom: 1px dotted #dedede; }
ol.numList > li::marker { color: transparent; font-size: 0; }
ol.numList > li::before { font-family:'Roboto Condensed', sans-serif; font-weight:bold; color: var(--sub-color); font-size: 1.5em; display: block; margin-bottom: 10px; line-height: 1.0; }
/* 値が1〜9（下から1〜9番目）: P001 など */
ol.numList > li:nth-last-child(-n+9)::before { content: var(--prefix) "00" counter(list-item) "."; }
/* 値が10〜99（下から10〜99番目）: P010 など */
ol.numList > li:nth-last-child(n+10)::before { content: var(--prefix) "0" counter(list-item) "."; }
/* 値が100以上（下から100番目以上）: P100 など */
ol.numList > li:nth-last-child(n+100)::before { content: var(--prefix) counter(list-item) "."; }

@media screen and (min-width: 768px) {
	ol.numList.prefix-p li a { display: block; margin-bottom: 20px; }
}
@media screen and (min-width: 900px) {
	ol.numList.prefix-p { display: flex; justify-content: flex-start; flex-wrap: wrap; }
	ol.numList.prefix-p li { width: 46%; margin-right: 8%; }
	ol.numList.prefix-p li:nth-child(2n) { margin-right: 0; }
}

.fa-link { margin-left: 1em;}
ol.numList.prefix-r li img { margin-top: 10px; }

/*-- 論文トグル ------------------------------------------------------------*/
.numList > li > p.clamp { 
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* ここで制限する行数を指定します */
	overflow: hidden;
	margin-bottom: 0;
}

.numList > li > p.clamp.open { -webkit-line-clamp: unset; transition: .3s; }
.toggle-btn { display: inline-block; margin: 0; color: #0056b3; /* リンクっぽい青色 */ background: none; border: none; cursor: pointer; font-size: 0.85em; text-decoration: underline; padding: 0; text-align: center; font-family:'Roboto Condensed', sans-serif; font-weight:bold; float: right; }
.toggle-btn:hover { color: #003d82;}

/*-- 3件表示 ------------------------------------------------------------*/
.toggle-list li:nth-child(n+5) { display: none; }
.hidden-line { display: none; }
.more-btn { display: block; margin: 0 auto; width: 150px; color: #0056b3; background: none; border: none; cursor: pointer; font-size: 0.85em; padding: 0; text-align: center; font-weight:bold; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.moreDiv { border-bottom: 1px solid #0056b3; position: relative; margin-top: 40px; }

.more-btn-resp { display: block; margin: 0 auto; width: 150px; color: #0056b3; background: none; border: none; cursor: pointer; font-size: 0.85em; padding: 0; text-align: center; font-weight:bold; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

@media (max-width: 899px) {
	.responsive-list li:nth-child(n+5) { display: none; }
	.responsive-list li:nth-child(4) .hidden-line-x { display: none; }
}

/* PC用（900px以上）：7番目以降を非表示 */
@media (min-width: 900px) {
	.responsive-list li:nth-child(n+9) { display: none; }
	.responsive-list li:nth-child(7) .hidden-line-x,
	.responsive-list li:nth-child(8) .hidden-line-x { display: none; }
}

/*-- member ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.in-flex { display: flex; flex-direction: column; }
	.in-flex .in-flex-Img { margin:0 auto 20px;;}
	.in-flex .in-flex-Txt .subTtl02 { text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--base-color); margin-bottom: 20px; font-size: 1.5em; width: 100%; }
	.in-flex .in-flex-Txt dl { margin-bottom: 20px; border-left: 5px solid var(--base-color); padding-left: 1em;}
	.in-flex .in-flex-Txt dl dt { font-weight: bold; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #dedede; }
}
@media screen and (min-width: 600px) {
	.in-flex { display: flex; justify-content: flex-start; }
	.in-flex .in-flex-Img { margin-right: 4%;}
	.in-flex .in-flex-Txt .subTtl02 { text-align: left; padding-bottom: 5px; border-bottom: 1px solid var(--base-color); margin-bottom: 20px; font-size: 1.5em; width: 100%; }
	.in-flex .in-flex-Txt dl { margin-bottom: 20px; border-left: 5px solid var(--base-color); padding-left: 1em;}
	.in-flex .in-flex-Txt dl dt { font-weight: bold; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #dedede; }
	
	.img640 { max-width: 640px; }
}

.toggle { position: relative; background: #f4f4f4; padding: 5px 0; cursor: pointer; }
.toggle:after { content: "\f067"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 50%; right: 1%; transform: translateY(-50%); opacity: 0.5;}
.toggle.active:after { content: "\f068"; font-family: "Font Awesome 5 Free"; font-weight: 900; }
@media screen and (max-width: 599px) {
	.toggle { padding:5px 6% 5px 0; text-indent: 0; }
	.toggle:after { right: 1%; font-size: 0.9em; text-indent: 0; }
}

@media screen and (min-width: 600px) {
.imgListFlex { display: flex; justify-content: flex-start; }
.imgListFlex img { height: fit-content; }
}
b { margin-left: 0.25em; }