body {
  font-family: "roboto", 
  "Helvetica Neue",
  "Arial",
    
"Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Meiryo",
    sans-serif;


}

.top-header{
  height: 80px;
  line-height: 22px;
  font-size: 1.2rem;
  color: #fff;
  background-color: #002147;
  display: flex;
  align-items: center;
  padding-top: 10px;
}

@media (max-width:1024px) {
  .navbar-brand {
    padding-right: 0 !important;
}  

}

.top-header a {
 color: #fff;
}

@media (max-width:992px) {
  .top-header{
    display: none;
}
}

.cover-text {
  position: absolute;
  padding: 30px;
  font-size: 2.5rem;
  color: #ffc107;
  z-index: 9;
}

@media (max-width: 1200px) { 
	
	.cover-text {
		padding: 12px;
		font-size: 2rem;
	}
}

@media (max-width: 767.98px) { 

.cover-text {
  padding: 12px;
  font-size: 1.5rem;
}
  }

/************************** navigation *****************************/
#navbarSupportedContent a {
  color: white;
  position: relative;
  text-decoration: none;  
  margin: 0 0px;
  font-size: 18px;
}
#navbarSupportedContent a:hover{
  text-decoration: none;
  color: orange;
}
#navbarSupportedContent a::after, #navbarSupportedContent  a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  top: 100%;
  left: 0;
  background: orange;
  transition: transform 0.5s;
  transform: scaleX(0);
  transform-origin: left;
}
#navbarSupportedContent a:hover::after {
  transform: scaleX(1);
}

#navbarSupportedContent .nav-link.active{
  color: orange;
   /*border-bottom: 2px solid currentColor !important;*/
}
@media (max-width:992px) { 

  #navbarSupportedContent a {
    color: white;
    position: relative;
    text-decoration: none;  
    margin: 0 80px;
    font-size: 14px;
  }
  #navbarSupportedContent a:hover{
    text-decoration: none;
  }
  #navbarSupportedContent a::after, #navbarSupportedContent  a::before { 
    background: none;
    transition: none;
    border-bottom: none;  
    }
}

/************************** bg-rules *****************************/

  .bg-rules{
    background-position: right;    
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .home-top {
    padding: 33px 0;
  }
  
  @media (min-width:1200px){
    .home-top{ 
        height: 400px;
    }
  }
  @media (max-width: 1199px) { 
    .home-top{ 
      height: 350px;
  }
  }
  @media (max-width: 767px) { 
    .home-top{ 
      height: 200px;
  }
  }

.page-top {
  padding: 33px 0;
}

@media (min-width:1200px){
  .page-top{ 
      height: 200px;
  }
}
@media (max-width: 1199px) { 
  .page-top{ 
    height: 170px;
}
}
@media (max-width: 767px) { 
  .page-top{ 
    height: 130px;
}
}
.home-top {
  background-image: url("../images/home-top.jpg");
}
.article-top {
  background-image: url("../images/article-top.jpg");
}

.article-top-about {
  background-image: url("../images/article-top-about.jpg");
}

.article-top-group {
  background-image: url("../images/top2.jpg");
}

.article-top-staff {
  background-image: url("../images/top5.jpg");
}

.article-top-beamline {
  background-image: url("../images/top7.jpg");
}

.article-top-policy {
  background-image: url("../images/top9.jpg");
}

.article-top-overlay{
  position: relative; 
}
.article-top-overlay::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(44,62,79,.15);
}

.article-title {
  color: #fff;
  /*border-bottom-style: solid;
  border-bottom-width: 9px;*/
  z-index: 1;
  position: relative;
  padding-left: 16px;
  margin-top: 40px;
  line-height: 40px;
  font-size: 40px;
  font-weight: 600;
  text-shadow: 1px 1px 2px white, 0 0 1em #2C3E4F, 0 0 0.2em rgb(6, 5, 10);
  margin-bottom: 47px;
}
@media screen and (max-width:767px) {
  .article-title {
    margin-top: 0;
    line-height: 28px;
    font-size: 1.3rem;
    margin-bottom: 0;
  }
  }

.page-title {
  color: #fff;
  /*border-bottom-style: solid;
  border-bottom-width: 9px;*/
  z-index: 1;
  position: relative;
  padding-left: 16px;
  margin-top: 108px;
  line-height: 60px;
  font-size: 40px;
  font-weight: 700;
  text-shadow: 1px 1px 2px white, 0 0 1em #2C3E4F, 0 0 0.2em rgb(6, 5, 10);
  margin-bottom: 47px;
}
@media screen and (max-width:768px) {
  .page-title {
    margin-top: 0;
    line-height: 28px;
    font-size: 1.3em;
    margin-bottom: 0;
  }
  }

.top_catch {
	width: 30%;
	position: absolute;
  top: 15%;
  left: 10%;
	z-index: 100;

}
.top_catch2  {
	font-weight: normal;
	font-size: 50px;
	line-height: 50px;
  color: white;
	position: absolute;
	z-index: 1000;
}

/************************* nav tabs publication-list *****************************/


#publication-list .nav-tabs {
  background-color: #f3f3f3;

}

#publication-list .tab-content {
  padding: 5px 15px;
}
#publication-list .nav-link {
  font-size: 18px;
  color: #002147;
  border-color: #002147;
  border-radius: 0%;
}
#publication-list .nav-tabs {
  border-bottom: 1px solid #002147;
}
#publication-list .nav-tabs .nav-link.active {
  border-color: #002147;
  border-radius: 0%;
  background-color: #002147;
  color: #EB8317;
}







/* start breadcrumb */
.breadcrumb {
  padding: 0;
  margin-bottom: 0;
  background-color: transparent;
}
.breadcrumb .breadcrumb-item{
  font-size: 15px;
}
/* end */

/* back to top button*/
#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 999;
  background: transparent;
  border-radius: 3px;
  border: 4px solid #5C6A77;
  color: #5C6A77;

 }


.category-head { 
  line-height: 37px;
}
.category-head::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background-color: inherit;
}

.cat-list li{
  width: 100%;
  margin-bottom: 12px;
}
.cat-list a {
  color: inherit;
  text-decoration: underline;
  padding: 8px 0 8px 40px;
  display: block;
  position: relative;
  background-color: #F9F9F9;
  margin-bottom: 0;
}
.cat-list a:hover {
  text-decoration: underline;
}
.cat-list a::before {
  background-color: inherit;
  content: "";
  position: absolute;
  left: 20px; 
  top: 17px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #002147;
  border-bottom: 5px solid transparent;
}
@media (max-width:768px) {

  .cat-list li { 
      margin-right: 4%;
      /*width: auto;*/
  }

  .cat-list a { 
      padding: 7px 25px 8px 40px; 
  }
}

.cat-list-indent li{
  width: 100%;
  margin-bottom: 12px;
}
.cat-list-indent a {
  color: inherit;
  text-decoration: underline;
  padding: 8px 0 8px 60px;
  display: block;
  position: relative;
  background-color: #F9F9F9;
  margin-bottom: 0;
}
.cat-list-indent a:hover {
  text-decoration: underline;
}
.cat-list-indent a::before {
  background-color: inherit;
  content: "";
  position: absolute;
  left: 50px; 
  top: 17px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 5px solid #002147;
  border-bottom: 5px solid transparent;
}
@media (max-width:768px) {

  .cat-list-indent li { 
      margin-right: 4%;
      /*width: auto;*/
  }

  .cat-list-indent a { 
      padding: 7px 25px 8px 60px; 
  }
}

.link-list li{
  width: 100%;
  margin-bottom: 4px;
}
.link-list a {
  color: inherit;
  padding: 10px 0 4px 40px;
  display: block;
  position: relative;
  margin-bottom: 0;
}
.link-list a:hover {
  text-decoration: underline;
}
.link-list a::before {
  background-color: inherit;
  content: "";
  position: absolute;
  left: 20px; 
  top: 17px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #002147;
  border-bottom: 5px solid transparent;
}
@media (max-width:768px) {

  .link-list li { 
      margin-right: 4%;
      width: auto;
  }

  .link-list a { 
      padding: 10px 25px 8px 40px; 
  }
}

.blog-recent-post{
  margin-top: 30px;
}
.recent-blog-btn {
  font-size: 14px;
  text-decoration: underline; 
}
.tags li {
  width: auto;
  margin-right: 12px;
}
.cat-tags li a{
  padding: 8px 25px;
}
.cat-tags a::before{
  display: none;
}

.cat span {
  margin-right: 7px; 
}
.date span , .fables-blog-date i{
  margin-right: 6px;
}
.blog-more {
  font-size: 14px;
  padding: 0;
}
.blog-more i{
  font-size: 11px;
}

.cat-tags1 li {

  margin: 5px;
  background-color: #f3f1f1;

  text-align: center;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}
.cat-tags1 li a{
  padding: 8px 10px;
  color: #382039;
}
.cat-tags1 a::before{
  display: none;
}


 

 footer {
    width: 100%;
    display: block;
    position: relative;
    color: #5C6A77;
    background-color: #EFEEEA;
    border-bottom-style: solid;
    border-bottom-width: 0px;
    border-bottom-color: #5C6A77;
    background-size: cover;
  }

#footer a {
    color: #5C6A77;
    transition: color 0.3s;
    text-decoration: none;
  }
#footer a:hover{
    color : #FF6D1F;
    text-decoration: underline;
  }
#footer li {
    list-style-type:none;	/*no list marker*/
  } 






/************************* a tag text-decoration  リンクの下線*****************************/
a {
  text-decoration:none; 
}
a:hover{
  text-decoration: underline;
}

/************************* table a tag text-decoration*****************************/
table {
 width: 100%;
}
.table-links a {
  color: inherit ;
  margin-bottom: 2px;
  /* padding: 2px;
*/}
/*table-links a:hover {
  color: #E54D42 ;
}
  */
th, td {
  padding: 2px;
}

/************************* table hover rowspanしているth上も色がつくように *****************************/
#publicBL tbody:hover,
#publicBL tr.hover,
#publicBL th.hover,
#publicBL td.hover,
#publicBL tr.hoverable:hover {
     background-color: #ecf5f8;
}

#publicBL .table-hover-color tbody tr:hover td{
  background: #d6e2e6;
}
/*.table-hover-color tbody tr:hover th{
  background: #d9f4fc;
}*/

/************************* accordion *****************************/
.accordion-002 {
  max-width: 5000px;
  margin-bottom: 7px;
  border: 2px solid #2C3E4F;
  border-radius: 5px;
}

.accordion-002 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0.5em 2em;
  border-radius: 1px;
  color: #2C3E4F;
  font-weight: 600;
  cursor: pointer;
}

.accordion-002 summary::-webkit-details-marker {
  display: none;
}

.accordion-002 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-bottom: 3px solid #2C3E4F;
  border-right: 3px solid #2C3E4F;
  content: '';
  transition: transform .3s;
}

.accordion-002[open] summary::after {
  transform: rotate(225deg);
}

.accordion-002 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: 0 2em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.accordion-002[open] p {
  transform: none;
  opacity: 1;
}



/* button */
.text-button a {
  background: transparent;
  border-radius: 5px;
  border: 1px solid #002147;
  position: relative;
  justify-content: space-around;
  margin: 3px auto;
  max-width: 70px;
  padding: 2px 4px;
  color: #002147;
  transition: 0.3s ease-in-out;
  font-size: 12px;
  font-weight: 400;
}
.text-button a:after {
  position: absolute;
  border-radius: 1px;
  transition: 0.2s ease-in-out;
  font-weight: 900;
  transform: translateY(-50%);
}
.text-button a:hover {
  color: #002147;
  background: #FFF
}


/* colors */
.light-background-color ,.light-active.active  {
  background-color: #F9F9F9; 
}
.main-background-color ,.main-before::before , .main-before::after ,.main-before a::before , .main-before a::after ,.main-active.active , .main-dots .owl-dot.active span ,.main-hover-background-color:hover{
  background-color: #EFEEEA !important;
}
.main-text-color{
  color: #2C3E4F ;
}
.main-hover-color:hover , .main-hover-color-link a:hover  {
  color: #2C3E4F ;
}
.main-text-color-link a:hover {
  color: #2C3E4F !important;
}
.main-border-color  {
  border-color: #2C3E4F !important;
}

.second-background-color ,.second-before::before , .second-before::after ,.second-hover-background-color:hover ,.second-active.active , .second-dots .owl-dot.active span{
  background-color: #002147 !important;
  transition: all ease-in-out .3s;
}

.third-hover-background-color:hover , .forth-hover-backround-color:hover , .main-hover-backround-color:hover{
  color: #DDDDDD;
}
.second-text-color{
  color: #002147 ;
}
.second-hover-color:hover , .second-hover-color-link a:hover{
  color: #002147  ;
}
.second-border-color {
  border-color: #002147 !important;
}
.second-hover-text-color:hover .main-text-color ,.second-hover-color:hover .third-text-color
,.second-hover-text-color:hover .fifth-border-color{
  color: #002147 !important;
}
.second-hover-text-color:hover .forth-text-color{
  border-color: #FF6D1F
}
.third-background-color , .third-after:after , .third-before:before{
  background-color: #EFEEEA; 
}
.third-text-color{
  color: #DDDDDD;
}
.third-hover-color:hover , .third-hover-color-link a:hover{
  color: #FF6D1F  ;
}
.third-border-color{
  border-color: #DDDDDD;
}
.forth-before ,.forth-after {
  position: relative;
}
.forth-background-color ,.forth-before a::before, .forth-after::after ,.forth-active.active , .forth-hover-backround-color:hover{
  background-color: #5C6A77 !important;
}
.forth-text-color{
  color: #5C6A77;
}
.forth-border-color{
  border-color: #5C6A77;
}
.fifth-background-color,.fifth-active.active {
  background-color:#99A2AA;
}
.fifth-text-color{
  color: brown;
}
.fifth-hover-color:hover , .fifth-hover-color-link a:hover{
  color: #99A2AA  ;
}
.fifth-border-color{
  border-color:#99A2AA;
}
.sixth-background-color ,.sixth-before::before , .sixth-before::after ,.sixth-before a::before , .sixth-before a::after ,.sixth-active.active , .sixth-dots .owl-dot.active span ,.sixth-hover-background-color:hover{
  background-color: #FF6D1F !important;
}
.light-grey-background{
  background-color: #ECF0F1;
}

.bg-white-hover:hover {
  background-color: #fff;
}

.sixth-border-color{
				border-color:  #0000cd !important;
}
.sixth-hover-color:hover , .sixth-hover-color-link a:hover{
				color:  #0000cd  ;
}

.seventh-text-color{
  color: #FF6D1F
}
.seventh-border-color{
  border-color: #FF6D1F !important;
}
.seventh-hover-color:hover , .seventh-hover-color-link a:hover{
  color: #FF6D1F  ;
}
.font-8{
  font-size: 8px;
}
.font-9{
  font-size: 9px;
}
.font-10{
  font-size: 10px;
}
.font-11{
  font-size: 11px;
}
.font-12{
  font-size: 12px;
}
.font-13{
  font-size: 13px;
}
.font-14{
  font-size: 14px;
}
.font-15{
  font-size: 15px;
}
.font-16{
  font-size: 16px;
}
.font-17{
  font-size: 17px;
}
.font-18{
  font-size: 18px;
}
.font-19 {
  font-size: 19px;
}
.font-20{
  font-size: 20px;
}
.font-22{
  font-size: 22px;
}
.font-23{
  font-size: 23px;
}
.font-25{
  font-size: 25px;
}
.font-26{
  font-size: 26px;
}
.font-30{
  font-size: 30px;
}
.font-35{
  font-size: 35px;
}
.font-40{
  font-size: 40px;
}


/************************* Image Hover Effects *****************************/
.image-container{ 
  overflow: hidden;
  position: relative; 
}
.image-container img{
  transition: all ease-in-out .4s;
  -o-transition: all ease-in-out .4s;
  -webkit-transition: all ease-in-out .4s;
  -moz-transition: all ease-in-out .4s;
}
.translate-effect-right img{ 
  max-width: none !important;
  width: calc(100% + 60px) !important;
  transition: opacity .35s,transform .45s;
  -webkit-transform: translate3d(-40px,0,0);
  transform: translate3d(-36px,0,0);
}
.translate-effect-right:hover img {
  opacity: .6;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.zoomIn-effect img{
  width: 100%;
}
.zoomIn-effect:hover img{
  transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
   
}
.zoomOut-effect img{
  transform: scale(1.5);
  -o-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
}
.zoomOut-effect:hover img{
  transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1); 
   
}
.rotateIn-effect:hover img{
  transform: rotate(8deg) scale(1.4);
  -o-transform: rotate(8deg) scale(1.4);
  -webkit-transform: rotate(8deg) scale(1.4);
  -moz-transform: rotate(8deg) scale(1.4);
   
}
.rotateOut-effect:hover img{
  transform: rotate(-8deg) scale(1.4);
  -o-transform: rotate(-8deg) scale(1.4);
  -webkit-transform: rotate(-8deg) scale(1.4);
  -moz-transform: rotate(-8deg) scale(1.4);
  
}
.shine-effect::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 9999;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.shine-effect:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
  left: 125%;
}
}
@keyframes shine {
100% {
  left: 125%;
}
}


/************************* NOT USED slow carousel *****************************/
.carousel-fade .carousel-item {
	opacity: 0;
	transition-duration: .6s;
	transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
	opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
	opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
	transform: translateX(0);
	transform: translate3d(0, 0, 0);
}



  .jumbotron {
    background-image: url("../images/top1.jpg");
    background-size: cover;
    background-position: center 40%;
    text-align: center;
  }


/************************** navigation *****************************/
#navigation a {
  color: white;  
}
#navigation a:hover{
  text-decoration: none;
/*  font-weight: 700;*/
}
#navigation .nav-link {
  border-bottom: 3px solid transparent;
}

#navigation .nav-link:hover {
  border-bottom: 3px solid #FF6D1F;

}

/*#navigation .nav-link:hover {
  font-weight: 500;
}*/


#navigation .nav-link.active {
  border-bottom: 3px solid #002147;
}

/* word */
.word-button a {
  background: #fff; /* transparent; */
  border-radius: 6px;
  border: 1px solid #0070C0;
  position: relative;
  justify-content: space-around;
  margin: 3px auto;
  max-width: 150px;
  padding: 1px 4px 2px;
  color: #0070C0;
  transition: 0.3s ease-in-out;
  font-size: 12px;
  font-weight: 400;
}
.word-button a:after {
  position: absolute;
  border-radius: 1px;
  transition: 0.2s ease-in-out;
  font-weight: 900;
  transform: translateY(-50%);
}
.word-button a:hover {
  color: #EEE;
  background: #0070C0
}
/************************* 「read more」ボタン *****************************/
.read-more-button a {
  position: relative;
  justify-content: space-around;
  margin: 3px auto;
  max-width: 150px;
  transition: 0.3s ease-in-out;
  background-color: #FF6D1F;
  color: white;
  border-radius: 3px;
  padding: 4px 14px;
  font-size: 0.8em;
  margin-left: 10px;
}
.read-more-button a:after {
  position: absolute;
  border-radius: 1px;
  transition: 0.2s ease-in-out;

  transform: translateY(-50%);
}
.read-more-button a:hover {
  color: #eee;
  background: #002147
}


.top-wrapper {
  position: relative;
  top: 60px;
}

.article-wrapper {
  margin-top: 60px;
  height: 25vh;
  width: 100%;
background: orange;
}
@media (max-width:992px) {
.article-wrapper{
  height: 15vh;
}
}
.article-wrapper h1 {
  position: relative;
  top: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #002147;
  opacity: 0.8;
}
@media (max-width:992px) {
  .article-wrapper h1{
    font-size: 2.0rem;
  }
  }
  
.article-wrapper001 {
  height: 25vh;
  width: 100%;
  background: orange;
}
@media (max-width:992px) {
.article-wrapper001{
  height: 15vh;
}
}
.article-wrapper001 h1 {
  position: relative;
  top: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #002147;
  opacity: 0.8;
}
@media (max-width:992px) {
  .article-wrapper001 h1{
    font-size: 2.0rem;
  }
  }

#navigation001 {
  height: 60px;
}
#navigation001 a:hover{
  color: #FF6D1F;
  text-decoration: none;
}
.dropdown-menu-dark {
  background-color: #002147;
}

#navigation001 .nav-link.active {
  color: #002147;
  font-weight: 600;
}

/************************* filtering *****************************/
.filtering ol {
  list-style: none;
}

.filtering a {
  text-decoration: none;
  color: inherit;
}

.target {
  margin-bottom: 2px;
  border-bottom: 1px solid #DDDDDD;
}

[value="all"]:checked ~ .targets [data-category] {
  display: block;
}
[value="BL16XU"]:checked ~ .targets .target:not([data-category~="BL16XU"]), 
[value="BL16B2"]:checked ~ .targets .target:not([data-category~="BL16B2"]), 
[value="XPS"]:checked ~ .targets .target:not([data-category~="XPS"]),
[value="imaging"]:checked ~ .targets .target:not([data-category~="imaging"]),
[value="XAS"]:checked ~ .targets .target:not([data-category~="XAS"]),
[value="XRD"]:checked ~ .targets .target:not([data-category~="XRD"]),
[value="others"]:checked ~ .targets .target:not([data-category~="others"]),
[value="battery"]:checked ~ .targets .target:not([data-category~="battery"]), 
[value="catalyst"]:checked ~ .targets .target:not([data-category~="catalyst"]),
[value="energy"]:checked ~ .targets .target:not([data-category~="energy"]),
[value="metals"]:checked ~ .targets .target:not([data-category~="metals"]),
[value="industry"]:checked ~ .targets .target:not([data-category~="industry"]),
[value="industry-others"]:checked ~ .targets .target:not([data-category~="industry-others"]) {
  display: none;
}
/*  ラジオボタンを非表示に */
input[type="radio"] {
  position: absolute;
  left: -9999px;
}
/*  以下はラベルのスタイル */
.filters {
  margin-bottom: 4px;
}
.filters * {
  display: inline-block;
}
.filters label {
  text-align: center;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.2s;
  background-color: #f3f1f1;
}
.filters label:hover {
  background: #333;
  color: #fff;
}
[value="all"]:checked ~ .filters [for="all"], 
[value="BL16XU"]:checked ~ .filters [for="BL16XU"], 
[value="BL16B2"]:checked ~ .filters [for="BL16B2"],
[value="XPS"]:checked ~ .filters [for="XPS"],
[value="imaging"]:checked ~ .filters [for="imaging"],
[value="XAS"]:checked ~ .filters [for="XAS"],
[value="XRD"]:checked ~ .filters [for="XRD"],
[value="others"]:checked ~ .filters [for="others"],
[value="battery"]:checked ~ .filters [for="battery"],
[value="catalyst"]:checked ~ .filters [for="catalyst"],
[value="energy"]:checked ~ .filters [for="energy"],
[value="metals"]:checked ~ .filters [for="metals"],
[value="industry"]:checked ~ .filters [for="industry"],
[value="industry-others"]:checked ~ .filters [for="industry-others"]{
  background: #333;
  color: #fff;
}

/************************* badges *****************************/
/* BL16XU */
.bl16xu-badge, .bl16xu-badge::after {
  content: 'BL16XU';
  background: #DB005B;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
  }
/* BL16B2 */
.bl16b2-badge, .bl16b2-badge::after {
  content: 'BL16B2';
  background: #4b0082;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
  }
  /* BL09XU */
.bl09xu-badge, .bl09xu-badge::after {
  content: 'BL09XU';
  background: #85409D;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
  }
/* BL08B2 */
.bl08b2-badge, .bl08b2-badge::after {
  content: 'BL08B2';
  background: #D17D98;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
  }
  /* BL14B1 */
.bl14b1-badge, .bl14b1-badge::after {
  content: 'BL14B1';
  background: #85409D;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
  }
  /* BL24XU */
.bl24xu-badge, .bl24xu-badge::after {
  content: 'BL24XU';
  background: #F075AE;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
  }
  /* BL33XU */
.bl33xu-badge, .bl33xu-badge::after {
  content: 'BL33XU';
  background: #A888B5;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
  }
  /* BL46XU */
.bl46xu-badge, .bl46xu-badge::after {
  content: 'BL46XU';
  background: #8B5DFF;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
  }
/* 光電子分光 */
.xps-badge, .xps-badge::after {
  content: '光電子分光';
  background: #016B61;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
/* X線イメージング */
.imaging-badge, .imaging-badge::after {
  content: 'X線イメージング';
  background: #56DFCF;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
/* X線・軟X線吸収分光 */
.xas-badge, .xas-badge::after {
  content: 'X線・軟X線吸収分光';
  background: #065084;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
 /* X線回折 */
.xrd-badge, .xrd-badge::after {
  content: 'X線回折';
  background: #36656B;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
  /* その他技術分野 */
.others-badge, .others-badge::after {
  content: 'その他技術分野';
  background: #E0A8A8 ;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
 /* 半導体・電池材料 */
.battery-badge, .battery-badge::after {
  content: '半導体・電池材料';
  background: midnightblue;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
  /* 触媒化学 */
.catalyst-badge, .catalyst-badge::after {
  content: '触媒化学';
  background: #00b7eb ;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
   /* 電気化学 */
.electrochemistry-badge, .electrochemistry-badge::after {
  content: '電気化学';
  background: #E4FF30 ;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
  /* エネルギー・資源 */
.energy-badge, .energy-badge::after {
  content: 'エネルギー・資源';
  background: #FF4646 ;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
  /* 金属・構造材料 */
.metals-badge, .metals-badge::after {
  content: '金属・構造材料';
  background: #547792 ;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
  /* 無機材料 */
.inorganics-badge, .inorganics-badge::after {
  content: '無機材料';
  background: #811844 ;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
  /* 産業利用 */
.industry-badge, .industry-badge::after {
  content: '産業利用';
  background: #57595B ;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
   /* 産業利用（その他） */
.industry-others-badge, .industry-others-badge::after {
  content: '産業利用（その他）';
  background: #452829 ;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
   /* 物質科学・材料科学 */
.materials-badge, .materials-badge::after {
  content: '物質科学・材料科学';
  background: #748873 ;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
    /* SPring-8/SACLA 利用研究成果集）
.sp8report-badge, .sp8report-badge::after {
  content: 'SPring-8/SACLA 利用研究成果集';
  background: #3E3F29 ;
  color: #FFF;
  font-size: 11px;
  padding: 1px;
  font-weight: 500;
  margin-right: 2px;
 }
 */

/***** 「過去の年報」開閉時のアニメーション（スムーズに） ******/ 
details {
  &::details-content {
    @media (prefers-reduced-motion: no-preference) {
      transition-duration: 300ms;
      transition-property: content-visibility, opacity;
      transition-behavior: allow-discrete;
    }
  }
  &:not([open])::details-content {
    opacity: 0;
  }
}