@charset "utf-8";
/********************************************************* 
 DACCAS EXHIBITION -- PHOTOGRAGH
 last-update - 2025.06.06
 *********************************************************/
:root {
  --color-white: #fff;
  --color-news: #971e25;
  --color-gry-dark: #555;
  --color-gry-smoke: #eee;
  --color-gry-light: #999;
}
html {
  scroll-behavior: smooth;
}
/* over-write */
.conts-heading-title {
  font-weight: bold;
}
button{
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
.link-btn-container {
  display: block;
}
a.link-not,
.product-menu__buy.link-not,
.link-btn--buy.link-not {
  pointer-events: none;
  background: #ccc;
}
/* onlinestore link button */
.product-menu--buy {
  padding: 0 0.5em;
  text-align: right;
  flex: 1 0 auto;
}
.product-menu__buy {
  padding: 0.4em 1.5em;
  margin: 0 auto;
  background: var(--c-red);
  border-radius: 4em;
  color: var(--c-wht);
  font-size: calc(var(--fs) * 1.4);
  display: inline-block;
  text-align: center;
}
@media (max-width: 500px) {
  .product-menu__buy {
    font-size: calc(var(--fs) * 1.3);
  }
}
.product-menu__buy:hover {
  color: var(--c-wht);
  text-decoration: none;
  filter: opacity(0.8);
}
@media screen and (min-width: 768px) {
  #headerNavi {
      z-index: 5;
  }
  #headerLogo-container {
      z-index: 10;
  }
}
/******************************
 CONTENTS
******************************/
.contents {
  background-image: url(/brand/fss/assets/image/special/gtm/kaiserin_photocon_bg-mono.jpg);
  background-attachment: fixed;
  background-color: #000;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
/******************************
 MAIN IMAGE
******************************/
.hero-image {
  width: 100vw;
  max-width: 100%;
  height: 1200px;
  margin: 0 auto;
  background-image: url("/brand/fss/assets/image/special/gtm/vsms0001-photo/vsms0001-photo.jpg");
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  background-repeat: no-repeat;
  background-position: top center;
  /* 初期状態および大画面時の設定を画像の正確なアスペクト比に合わせる */
  background-size: 2100px 1200px; /* 画像の本来のサイズ */
  position: relative;
  /* overflow: hidden; */
}
@media (max-width: 1050px) {
  .hero-image {
    background-size: auto 100%; /* 高さを100%に設定し、幅は自動調整 */
  }
}
.hero-cont {
  width: min(100%, 1050px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
}
.hero_logo {
  text-align: center;
  margin: 15% auto 0;
  width: 100%;
  padding: 0.5em calc(var(--rs) * 2) 0.5em;
  position: relative;
}
.hero_logo img {
  position: relative;
  filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 1)) drop-shadow(-4px -4px 3px rgba(0, 0, 0, 1));
}
.hero_logo:before {
  content: "";
  background: #eb8730;
  width: 100vw;
  height: 100%;
  margin: 0 calc(50% - 50vw);
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  z-index: -1;
}
/******************************
 GREET
******************************/
.outline {
  color: #fff;
  width: var(--w-md);
  max-width: 100%;
  padding: 0 calc(var(--rs) * 2);
  margin: 0 auto;
}
.greet-txt {
  font-size: calc(var(--fs) * 1.6);
  line-height: 1.8;
}
.greet-txt strong {
  font-size: calc(var(--fs) * 1.8);
  color: orange;
  line-height: 1.6;
  display: inline-block;
  padding-bottom: calc(var(--rs) * 1);
}
@media screen and (min-width: 768px) {
  .greet-txt {
    font-size: calc(var(--fs) * 1.8);
  }
  .greet-txt strong {
    font-size: calc(var(--fs) * 2.2);
  }
}
/******************************
 PHOTO CONTAINER
******************************/
.photo-wrap {
  
}
/* photo list  btn */
.photo-list {
  width: var(--w-md);
  max-width: 96%;
  padding: calc(var(--rs) * 1) calc(var(--rs) * 2);
  margin: calc(var(--rs) * 8) auto calc(var(--rs) *2);
  background: rgba(255,255,255,0.15);
  border-radius: 0.5rem;
  box-shadow: 0 0rem 0.4rem 0rem rgba(255,255,255,0.4), 0 0rem 0.4rem 0rem rgba(255,255,255,0.4) inset;
  display: flex;
  flex-wrap: wrap;
}
.photo-list li {
  width: calc(100% / 2);
  text-align: left;
  padding: calc(var(--rs) * 0.5);
}
@media screen and (min-width: 768px) {
  .photo-list li {
    width: calc(100% / 7);
    text-align: center;
  }
}
.listbtn {
  color: var(--c-link);
}
.listbtn:hover {
  color: var(--c-link-hover);
}
#container.fade {
  opacity: 0;
  pointer-events: none;
}
#container {
  transition: opacity 0.4s ease;
}
.photo-container {
  padding: 0 calc(var(--rs) * 2);
  margin: 0 auto;
}
.p-cont {
  transition: opacity 0.4s ease;
  padding: calc(var(--rs) * 4) 0 calc(var(--rs) * 4);
}
#container .p-cont:nth-of-type(even) {
  background: rgb(99,6,6,0.36);
}
/******************************
 ENTRY SHOP
******************************/
.entry-shop {
  font-size: calc(var(--fs) * 2.6);
  font-weight: bold;
  color: #fff;
  width: var(--w-xl);
  max-width: 96%;
  margin: 0 auto calc(var(--rs) * 1);
  padding: calc(var(--rs) * 0.4) calc(var(--rs) * 0.5) calc(var(--rs) * 0.2) 0.5em;
  border-left: 0.5em solid;
}
.photo-box {
  width: var(--w-xl);
  max-width: 96%;
  padding-bottom: calc(var(--rs) * 4);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--rs) * 2);
}
.photo-box--list {
  width: calc(100% / 2 - calc(var(--rs) * 1));
  text-align: center;
  background: rgba(0, 138, 203, 0.3);
  box-shadow: 0 0.5rem 1rem 0.5rem rgba(0, 0, 0, 0.8);
}
.photo-box--list h4 {
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  color: #fff;
  padding: 0.8em calc(var(--rs) * 1) 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .photo-box--list h4 {
    font-size: calc(var(--fs) * 2.2);
  }
}
.photo-block {
  display: flex;
  flex-wrap: wrap;
}
.gallery__list {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .gallery__list {
    width: 50%;
  }
}
.gallery__list > a {
  display: block;
  position: relative;
}
.gallery__list > a::before{
  content: url("/event/assets/image/hr/ic_magnify_blue_l.gif");
  position: absolute;
  right: 2px;
  tio: 0;
  z-index: 2;
}
.entry-comment {
  font-size: calc(var(--fs) * 1.4);
  color: #fff;
  text-align: left;
  padding: 1rem calc(var(--rs) * 1.5) 1rem;
}
@media screen and (min-width: 768px) {
  .entry-comment {
    font-size: calc(var(--fs) * 1.6);
  }
}
.entry-comment > dt {
  font-weight: bold;
  padding: 0 0 0.2em;
}
.entry-comment > dd {
  font-size: calc(var(--fs) * 1.4);
  line-height: 1.6;
}
.reset-cont {
  text-align: right;
  width: var(--w-lg);
  max-width: 100%;
  margin: 0 auto;
}
.reset {
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  color: #fff;
  text-align: right;
  padding-right: calc(var(--rs) * 2);
}
.reset:hover {
  filter: opacity(0.8);
}