@charset "utf-8";
/*==================================================
ギャラリーのためのcss
===================================*/
body {
  background: #4b6c9f;
  background-attachment: fixed;
  /* background:linear-gradient(#4b6c9f, #2e486d);*/
}
li {
  list-style: none;
}
.wrapper {
  width: 100%;
  height: auto;
  padding: 40px 0 0 0;
  position: relative;
  z-index: 2;
}
.bg_kote {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: linear-gradient(#4b6c9f, #5071a0, #2e486d);
    background-image: url(https://edinter.itembox.design/item/campaign/2023/geni_logo_exhibition/img/glrukl04.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}
.top_text_area{
margin-bottom:10px;
padding-bottom:10px;
color:#fff;
border-bottom:2px dashed #fff;
line-height:1.8;
letter-spacing: 0.1em;
}
.glijsh_under_text_area{
width: 94%;
max-width: 1000px;
color:#fff;
margin:0 auto 30px;
text-align: left;
background:rgba(75,108,159,0.7);
border-bottom:2px dashed #fff;
line-height:1.8;
letter-spacing: 0.1em;
border:2px solid #fff;
border-radius: 10px;
padding: 10px 10px 5px;
}
.glie_atten{
width: 92%;
max-width: 500px;
margin: 0 auto 40px auto;
border:2px solid #fff;
border-radius: 10px;
padding: 10px 10px 5px;
background:rgba(75,108,159,0.7);
}
ul.glie_atten_wrap{
display: flex;
}

ul.glie_atten_wrap li:nth-of-type(1){
width: 13%;
}
ul.glie_atten_wrap li:nth-of-type(2){
width: 87%;
display: flex;
align-items: center;
padding:0 0 0 10px;
justify-content: center;
color:#fff;
letter-spacing: 0.1rem;
}
ul.glie_atten_wrap li:nth-of-type(1) img{

}

.geni_idea_gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 15px; /*ギャラリー左右に余白をつける*/
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  
}
.geni_idea_gallery li {
    FONT-WEIGHT: 500;
    margin-bottom: 60px;
    border-radius: 10px;
    transition: 0.3s;
    width: calc(140% / 4 - 170px );
    background: url(https://edinter.itembox.design/item/campaign/2023/geni_logo_exhibition/img/gakubuchi_sq01.jpg);
    background-size: contain;
    padding: 40px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .2);
}
.geni_idea_gallery li:hover {
  transition: 0.3s;
  background: url(https://edinter.itembox.design/item/campaign/2023/geni_logo_exhibition/img/gakubuchi_sq01.jpg);
  background-size: contain;
  padding: 0px;
}
.jusho_item_srrmn, .jusho_item_kame, .jusho_item_hitsuji, .jusho_item_madoti, .jusho_item_inko {
  background: url(https://edinter.itembox.design/item/campaign/2023/geni_logo_exhibition/img/gakubuchi_sq02.jpg) !important;
  background-size: contain !important;
  padding: 40px !important;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .7);
}
.jusho_item_imo {
  background: url(https://edinter.itembox.design/item/campaign/2023/geni_logo_exhibition/img/gakubuchi_sq02.jpg) !important;
  background-size: contain !important;
  padding: 45px !important;
  position: relative;
}
.jusho_item_srrmn:hover, .jusho_item_kame:hover, .jusho_item_hitsuji:hover, .jusho_item_madoti:hover, .jusho_item_inko:hover {
  background: url(https://edinter.itembox.design/item/campaign/2023/geni_logo_exhibition/img/gakubuchi_sq02.jpg) !important;
  background-size: contain !important;
  padding: 0px !important;
}
.jusho_item_imo:hover {
  background: url(https://edinter.itembox.design/item/campaign/2023/geni_logo_exhibition/img/gakubuchi_sq02.jpg) !important;
  background-size: contain !important;
  padding: 0px !important;
}
.jusho_item_srrmn::before, .jusho_item_kame::before, .jusho_item_hitsuji::before, .jusho_item_madoti::before, .jusho_item_inko::before, .jusho_item_imo::before {
  content: ''; /*何も入れない*/
  display: inline-block;
  width: 80px; /*画像の幅*/
  height: 100px; /*画像の高さ*/
  background-image: url(https://edinter.itembox.design/item/campaign/2023/geni_logo_exhibition/img/ribon02.png);
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  bottom: -10px;
  left: -10px;
  z-index: 2
}

.geni_logo_ten{
width: 92%;
max-width: 1000px;
margin: 0 auto 40px auto;
text-align: center;
}
.geni_logo_ten ul{
display: flex;
justify-content: space-around
}
.geni_logo_ten ul li{
text-align: center;
}
.geni_logo_ten ul li a{
color:#fff;
text-decoration: none;
}
.geni_logo_ten_arc{
border-bottom:1px dashed #fff;
margin:0 auto 10px;
padding:0 0 5px;
font-size:18px;
color:#fff;
}
.copyright_geni{
text-align: center;
color:#fff;
font-size:14px;
padding:0 0 10px 0;
}

.pc_oly {
  display: block;
}
.sp_oly {
  display: none;
}
/*ギャラリー内のイメージは横幅100%にする*/
.geni_idea_gallery img {
  width: 100%;
  height: auto;
  vertical-align: bottom; /*画像の下にできる余白を削除*/
  border-radius: 10px;
}
/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 1200px) {

  .geni_idea_gallery li {
    width: calc(100% / 3 - 20px);
	padding: 20px;
  }
  .bg_kote {
    background-size: 200%;
  }
  .pc_oly {
    display: none;
  }
  .sp_oly {
    display: block;
  }
}
@media only screen and (max-width: 768px) {
.geni_logo_ten ul li a {
    color: #fff;
    text-decoration: none;
    display: flex;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    justify-content: center;
    margin: 0 auto 15px;
}
.geni_logo_ten ul li a:hover {
background: #fff;
color:#4b6c9f;
}
.geni_logo_ten ul{
flex-direction: column;
}
.geni_logo_ten ul li{
text-align: left;
}
.geni_logo_ten {
    margin: 0 auto 20px auto;
}
.wrapper {
    padding: 30px 0 0 0;
}
.bg_kote {
    background-position: top left;
}

  
  .geni_idea_gallery li {
width: calc(100% / 2 - 40px);
    margin-bottom: 40px;
  }
  .geni_idea_gallery {
  padding: 0 0px;
    justify-content: space-around;
  }
  .jusho_item_srrmn, .jusho_item_kame, .jusho_item_hitsuji, .jusho_item_madoti, .jusho_item_inko {
  padding: 20px !important;

}
  .jusho_item_srrmn::before, .jusho_item_kame::before, .jusho_item_hitsuji::before, .jusho_item_madoti::before, .jusho_item_inko::before, .jusho_item_imo::before {
    content: ''; /*何も入れない*/
    display: inline-block;
    width: 40px;
    height: 50px;
    background-image: url(https://edinter.itembox.design/item/campaign/2023/geni_logo_exhibition/img/ribon02.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 2
  }
  .bg_kote {
    background-size: 350%;
  }
  /*========= レイアウトのためのCSS ===============*/
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  a {
    color: #333;
  }
  a:hover, a:active {
    text-decoration: none;
  }
  h1 {
    text-align: center;
    font-size: 6vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 30px 0;
  }
  p {
    margin: 0 10px 10px 10px;
    word-wrap: break-word;
  }
  /*画像を出現させるアニメーションCSS*/
  .flipLeft {
    animation-name: flipLeft;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    perspective-origin: left center;
    opacity: 0;
  }
  @keyframes flipLeft {
    from {
      transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
      opacity: 0;
    }
    to {
      transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
      opacity: 1;
    }
  }
  /*　キラッ　*/
  .shine span.mask {
    position: relative; /*キラッの基点となる位置を定義*/
    display: block;
    line-height: 0; /*行の高さを0にする*/
    overflow: hidden; /*拡大してはみ出る要素を隠す*/
    border-radius: 0;
  }
  .shine span.mask::before {
    position: absolute;
    content: "";
    width: 50%; /*キラッの横幅*/
    height: 100%; /*キラッの縦幅*/
    top: 0; /*.shine span.maskのトップ0を基点*/
    left: -75%; /*画面の見えていない左から右へ移動するスタート地点*/
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    transform: skewX(-25deg); /*背景白透過を斜めに*/
  }
  .shine span.mask:hover::before { /*hoverした時の変化*/
    animation: shine 0.7s; /*アニメーションの名前と速度を定義*/
  }
  @keyframes shine {
    100% {
      left: 125%; /*画面の見えていない左から右へ移動する終了地点*/
    }
  }
  /*========= レイアウトのためのCSS ===============*/
  a {
    color: #333;
    text-decoration: none;
  }
  .lead {
    text-align: center;
    padding: 50px 20px;
  }
  /*画像のレスポンシブ*/
  img {
    width: 100%;
    height: auto;
  }
  /*　横幅　*/
  .shine {
    width: 100%;
    margin: 0 auto; /*中央揃え*/
  }