@import url('https://fonts.googleapis.com/css2?family=BhuTuka+Expanded+One&family=Poppins:wght@400;500;600;700&display=swap');

:root{
    --header-height:3.5rem;/* =56px */



    /* ======Colors====== */
    /* color mode HSL(hue, saturation, lightness) */
    /* --hue:152; */

    /* --first-color:#6251DA;  */
    /* --first-color:hsl(var(--hue),24%,32%); */
    /* --first-color:hsl(74, 95%, 22%); */
    /* --first-color:#FF7B54; */
    /* --first-color:#FFD56B; */


    /* --first-color-alt:hsl(var(--hue),24%,28%); */
    /* --first-color-alt:#f9987a; */
    /* --first-color-alt:#f5e3b6; */

    --first-color-light:hsl(var(--hue),24%,66%);

    --first-color-lighten:#FFEA20; 
    /* --first-color-lighten:hsl(var(--hue),24%,92%); */
    /* --first-color-lighten:hsl(60, 88%, 71%); */
    /* --first-color-lighten:#FFD56B; */
    /* --first-color-lighten:#c9c5084b; */
    /* --first-color-lighten:#939B62; */
    /* --first-color-lighten:#FFEA20; */
    /* background: linear-gradient(220.55deg,#B7DCFF 0%,#FFA4F6 100%); */
    /* --title-color:hsl(var(--hue),4%,15%); */
    /* --text-color:hsl(var(--hue),4%,35%); */
    /* --text-color-light:hsl(var(--hue),4%,55%); */
    --body-color:hsl(var(--hue),0%,100%);
    --container-color:#FFF;
    /* ======Font and typography========= */
    /* 0.5rem=8px    1rem=16px */
    --body-font:'Poppins', sans-serif;
    --big-font-size:2rem;
    --h2-font-size:1.5rem;
    --h3-font-size:1.25rem;
    --h4-font-size:1rem;
    --normal-font-size:.938rem;
    --small-font-size:.813rem;
    --smaller-font-size:.75rem;
    /* ======Font weight========= */
    --font-medium:500;
    --font-semi-bold:600;
    /* ======Margenens Bottom========= */
     /* 0.5rem=8px    1rem=16px */
     --mb-0-5:.5rem;
     --mb-0-75:.75rem;
     --mb-1:1rem;
     --mb-1-5:1.5rem;
     --mb-2:2rem;
     --mb-2-5:2.5rem;
/* ======Z index========= */
    --z-tooltip:10;
    --z-fixed:100;
/* ======Responsiv typography========= */
}







body.lb-disable-scrolling {
  overflow: hidden;

}
.lightbox__body{
  background-color: var(--first-color-lighten);
  /* background: linear-gradient(220.55deg,#B7DCFF 0%,#FFA4F6 100%); */
}
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  /* background-color: black; */
  background-color: var(--first-color);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.9;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}




/* 


.lightbox ul{
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
}
.lightbox ul li{
  display: table-cell;
  width: 15%;

} */







.lightbox .lb-image {
  display: block;
  /* width: 500px; */
  height: auto;
  max-width: inherit;
  max-height: none;
  /* border-radius: 3px; */

  /* Image border */
  /* border: 4px solid white; */
  border: none;
}

.lightbox a img {
  border: none;
}
/* .lightbox li { */
  /* display: block; */
  /* margin-top: 50px; */
  /* margin-bottom: 50px; */
  /* padding-top: 50px; */
/* } */
.lb-outerContainer {
  position: relative;
  *zoom: 1;
  /* *zoom: 5; */
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: -15%;
  height: 100%;
  width: 130%;
  z-index: 10;
}
/* 画面が小さいと＜＞マークが切れるのを修正 */
@media screen and(min-width:576px){
/* 
  .lightbox {
    padding: 0 1rem;
  } */

  .lb-nav {
    /* position: absolute;
    top: 0; */
    left: 0%;
    /* height: 100%; */
    width: 20%;
    /* z-index: 10; */
  }
}



.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  /* background-color: red; */
  width: 34%;
  left: 0;
  float: left;
  background: url(../img/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 1;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  /* 自分で付け足したここからー－－－－－－－－－－－－ */
  opacity: 0.6;
  width: 80px;
  /* color: blue; */
  /* background-color: red; */
  /* ここまでー－－－－－－－－－－－－－－－－－－ */
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../img/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 1;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  /* 自分で付け足したここからー－－－－－－－－－－－－ */
  opacity: 0.6;
  width: 80px;
  /* background-color: blue; */
   /* ここまでー－－－－－－－－－－－－－－－－－－ */
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {/* ライトボックス写真下のタイトル　　　Caption１ とか書いてる */
  /* ^^^^^^^^^^^^^^^大きさ変えた */
  font-size: var(--h2-font-size);
  font-weight: bold;
  line-height: 1em;
  /* ^^^^^カラー^自分で付け足した^^^^^ */
  /* color: var(--first-color-lighten); */
}

.lb-data .lb-caption a {
  /* color: #4ae; */
  /* color: yellow; */
  width: 100px;
}



.lb-data .lb-number {/* ライトボックスのタイトルの下の注釈　　　Img 2-3  とか書いてる */
  display: block;
  clear: left;
  padding-bottom: 1em;
  /* font-size: 12px; */
  font-size: var(--h4-font-size);
  /* color: #999999; */
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}


.gallery__container{
  display: flex;
}
.gallery__container li{
  float: left;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-right: .5rem;
  padding-left: .5rem;
}