@charset "UTF-8";
header {
  margin-bottom: 0;
}
#brightener-content {
  position: relative;
}
#loading {
  background: rgba(0,0,0,.2);
  position: absolute;
  top: 0;
  bottom: 0;
  width:100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 99;
  padding-top: 20%;
}
#loading span {
  font-size: 10rem;
  color: #fff;
}
#main-visual {
  opacity: 1;
  margin: -8px auto;
  display: flex;
  max-width: 1080px;
}
#main-visual > img {
  width: 100%;
}
#main-visual ul {
  display: flex;
  flex-wrap: wrap;
  width: 33.3%;
}
#main-visual li img {
  display: block;
  width: 100%;
  max-width: 100%;
}
#main-visual ul li {
  width: 50%;
}
#main-visual .box {
  display: flex;
  align-items: center;
  justify-content: center;
}
#main-visual ul li.x2 {
  width: 100%;
  position: relative;
}
#main-visual .overlay {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 50%;
}
#main-visual .logo {
  box-sizing: border-box;
  z-index: 10;
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
}
#main-visual .logo.logo-1 {
  background-image: url('/assets-scalable/brightener/img/logo/001.png');
  z-index: auto;
}
#main-visual .logo.logo-2 {
  background-image: url('/assets-scalable/brightener/img/logo/002.png');
  z-index: auto;
}
#main-visual .logo.logo-3 {
  background-image: url('/assets-scalable/brightener/img/logo/003.png');
  z-index: auto;
}
#main-visual .logo img {
  display: none;
}
#main-visual .bg-beige {
  background-color: #b4a073;
}
#main-visual .bg-navy {
  background-color: #012169;
}
#main-visual .bg-touqoise {
  background-color: #0081a6;
}

#main-content {
  opacity: 1;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
h2 {
  margin-top: 150px;
}
h2 img {
  height: 50px;
  width: auto;
}
.sub-content {
  margin: 50px auto;
}
.member-list {
  width: 720px;
  margin: 50px auto;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}
.member-list a {
  width: 33%;
  display:block;
  color: #333;
  text-decoration: underline;
  box-sizing: border-box;
  padding: 0 30px;
  margin-bottom: 50px;
}
.pictures {
  position: relative;
}
img.frame {
  position:absolute;
  width: 100%;
}
img.members-picture {
  padding-top: 2%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  width: 100%;
}
.kanji-name {
  font-weight:bold;
  padding-top: 1em;
}
.roma-name {
  font-size: 80%;
}
.movie-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 50px auto 150px auto;
}
.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.container {
  margin: 0 auto;
  max-width: 1080px;
  width: 100%;
}
.row {
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}
.row .col {
  float: left;
  box-sizing: border-box;
  padding: 0 0;
  min-height: 1px;
}
.jlpga section h2 {
  color: #1e551e;
  font-size: 2rem;
  font-weight: bold;
  background: url(/assets-scalable/jlpga/img/bar_pc.png) no-repeat;
  background-size: contain;
  background-position: bottom;
  margin: 50px 0 15px;
  padding: 0 0 25px;
  line-height: 110%;
}
.jlpga .container-photo-video .col-gallery {
  padding: 0;
  margin: 0;
}
.col.l4.s12.col-gallery {
  padding-top: 20px;
}
.row .col {
  float: left;
  box-sizing: border-box;
  min-height: 1px;
}
ul:not(.browser-default)>li {
  list-style-type: none;
}
.col-gallery ul > li.gallery-half {
  width: 50%;
  float: left;
}
.col-gallery ul > li > a img {
  display: flex;
  padding: 1px;
}
img.responsive-img, video.responsive-video {
  max-width: 100%;
  height: auto;
}
.jlpga section .bottom-action {
  clear: both;
  text-align: right;
  padding: 20px 0;
  border-top: 1px solid #ccc;
}
.container-photo-video{
  padding: 10px 0;
}
.container-photo-video .container .row .col .mark h2{
  color: #b4a073;
  font-size:50px;
  padding-bottom: 10px;
  padding-left: 50px;
  line-height: 34px;
  display: flex;
  justify-content: flex-start;
  margin-top: 50px;
}
.container-photo-video .container .row .col .mark {
  background: linear-gradient(to top, #012169 0% 20%, rgba(0,0,0,0) 0 100%);
}
.container-photo-video h2 {
  margin-top: 0px;
  margin-bottom: 30px;
}
#right-menu {
  opacity: 1;
  margin: -8px auto;
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  max-width: 1080px;
  position: relative;
  z-index: auto;
}
.pastSelectwrap {
  width: 240px;
  margin-top: 3px;
  margin-right: 30px;
  position: relative;
}
.pastSelect {
  position: static;
}
.selectArea.pastSelect .selectBtn {
  width: 260px;
  height: 28px;
  display: inline-block;
  line-height: 1.3;
  color: #000;
  float: left;
  cursor: pointer;
}
.selectArea .selectBtn {
  position: relative;
  border: #e0e0e0 1px solid;
  text-indent: 0.5em;
}
.selectArea .arrow {
  position: relative;
  margin-left: -23px;
  cursor: pointer;
}
.arrow img {
  padding-bottom: 5px;
}
.selectArea.pastSelect select {
  width: 260px;
  margin-top: 5px;
  left:0;
}
.selectArea select {
  /*年度が増えれば必要*/
  /*height: auto;*/
  height: 80px;
  position: absolute;
  z-index: 9999;
  text-indent: 0.5em;
}
.content-img-video {
  padding: initial;
}
.box-slider .box-slider-inner .box-slider-ttl {
  font-weight: bold;
}
.container-photo-video a {
  text-decoration: none!important;
}
.box-slider .box-slider-inner .box-slider-ttl span {
  font-weight: bold;
}
.box-slider .box-slider-inner .box-slider-ttl {
  background: url(/assets-scalable/brightener/img/content-img/icon-title-content-01.png) no-repeat left top;
  background-size: 40px auto;
}
.box-slider .box-slider-inner:nth-of-type(2) .box-slider-ttl {
  background: url(/assets-scalable/brightener/img/content-img/icon-title-content-02.png) no-repeat left top;
  background-size: 40px auto;
}
@media screen and (max-width: 992px){
  header {
    margin-bottom: 35px;
  }
  #main-content {
    padding: 0 3%;
  }
  h2 {
    margin-top: 70px;
  }
  h2 img {
    height: 30px;
    max-width: 100%;
  }
  .sub-content {
    margin: 30px auto;
    text-align: left;
  }
  .member-list {
    width: 100%;
    margin: 30px auto;
  }
  .member-list a {
    padding: 0 10px;
    margin-bottom: 30px;
  }
  .kanji-name {
    padding-top: 0.5em;
  }
  .roma-name {
    font-size: 60%;
  }
  .row .col.l4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
  }
  .arrow {
    width: 10px;
  }
  .selectArea .arrow img {
    width: 11px;
  }
  .container-photo-video .container .row .col .mark h2 {
    padding-left: 20px;
    font-size: 30px;
    line-height: 20px;
    margin-top: 15px;
  }
  .sp-tab-content {
    background-image: initial;
  }
  img.frame {
    z-index: 1;
  }
  .selectArea.pastSelect select {
    width: 275px;
  }
  .selectArea .arrow, .selectBtn {
    display: none !important;
  }
  .selectArea select {
    display: block !important;
    height: 35px;
    background-position: 97% center;
  }
}
body {
  padding-top:0 !important;
  color: #333;
}
.group-img {
  display: flex;
  flex-wrap: wrap;
  padding:16px 8px 8px;
  gap:8px;
  position: relative;
  background: #fff;
}
.group-img::after {
  background-image: url(/assets-scalable/brightener/img/main-visual/img-0.png);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  position: absolute;
  width:55%;
  height: 100%;
  bottom:0px;
  right: 34px;
  content:"";
  z-index: 2;
}
.group-img > * {
  position: relative;
}
.group-img > [class^="block-"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap:8px;
}
.block-top .col-left {
  width:calc(40% - 4px);
}
.block-top .col-right {
  width:calc(60% - 4px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap:8px;
}
.group-img > [class^="block-"] .item {
  width:calc((100% - 32px)/5);
  background: #fbfaf8;
  opacity: 0.7;
}
.group-img > [class^="block-"] .item > img {
  height:100%;
  object-fit: cover;
  width:100%;
  opacity: 0;
  animation-name: fadein;
  animation-fill-mode: both;
  animation-duration: 3.3s;
}
.group-img > [class^="block-"] .item.twice {
  width:100%;
  background: transparent;
  opacity: 1;
}
.block-top .col-right .item {
  width:calc((100% - 16px)/3);
}
.block-top .col-right .item:nth-child(1) > img {
  animation-delay: 1s;
}
.block-top .col-right .item:nth-child(2) > img {
  animation-delay: 0.4s;
}
.block-top .col-right .item:nth-child(3) > img {
  animation-delay: 0.1s;
}
.block-top .col-right .item:nth-child(4) > img {
  animation-delay: 1.5s;
}
.block-top .col-right .item:nth-child(5) > img {
  animation-delay: 2.7s;
}
.block-top .col-right .item:nth-child(6) > img {
  animation-delay: 0.7s;
}
.block-bottom .item:nth-child(1) > img {
  animation-delay: 1.8s;
}
.block-bottom .item:nth-child(2) > img {
  animation-delay: 2.4s;
}
.block-bottom .item:nth-child(3) > img {
  animation-delay: 2.1s;
}
.block-bottom .item:nth-child(4) > img {
  animation-delay: 3s;
}
.block-bottom .item:nth-child(5) > img {
  animation-delay: 1.3s;
}
.block-top .col-left .item.twice > img {
  animation-delay: 3.3s;
}

@-webkit-keyframes fadein {
	0% {opacity:0;}
	100% {opacity: 1;}
}
@keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.fadein {
	-webkit-animation-name: fadein;
	animation-name:fadein;
}
@media(max-width:767px) {
  .group-img, .group-img > [class^="block-"], .block-top .col-right{
    gap:6px;
  }
  .block-top .col-left {
    width:calc(40% - 3px);
  }
  .block-top .col-right {
    width:calc(60% - 3px);
  }
  .group-img > [class^="block-"] .item {
    width:calc((100% - 24px)/5);
  }
  .block-top .col-right .item {
    width:calc((100% - 12px)/3);
  }
  .group-img {
    padding:8px;
  }
  .group-img::after {
    right:12px;
  }
}