@charset "utf-8";

/*--------------------------------------------------------------------------------------------------------------------------------------------- 
commons
---------------------------------------------------------------------------------------------------------------------------------------------*/

* {margin: 0; padding: 0; }

:root {
  --font-honbun: "Inter","Source Han Serif JP", "源ノ明朝", "Noto Serif CJK JP","Hiragino Mincho ProN", "Hiragino Mincho Pro",
  "Yu Mincho", "游明朝体", "MS PMincho",serif;
  --font-midashi: "Inter","Yu Gothic", "YuGothic", "游ゴシック体","Hiragino Kaku Gothic ProN", "Hiragino Sans",
  "Noto Sans CJK JP", "Meiryo",sans-serif;
  --black:#212121;
  --gray:#848587;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  background: #fff;
  font-family: var(--font-honbun);
  color: var(--black);
  font-size: 1.6rem;
  line-height:2;
  letter-spacing:0.05em;
  font-feature-settings: "palt";
  font-display: optional;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  position: relative;
  overscroll-behavior: none;
}

a {
  color: var(--black);
  text-decoration:underline;
}

a:hover {
  color: var(--gray);
  text-decoration: none;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

a:hover img {
  opacity: 0.75;
  filter: alpha(opacity=75);
}

a img {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  display: block;
}

.navigation{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100px;
/*z-index: 99;*/
}

.navigation_wrap {
  width:94%;
  margin:0 auto;
  height:100px;
}

.menu{
  width: 26px;
  height: 21px;
  position: fixed;
  z-index: 100;
  top:44px;
  right:5%;
  cursor:pointer;
}

.menu__line{
  background: #fff;
  display: block;
  height: 3px;
  position: absolute;
  transition:transform .3s;
  width: 100%;
  border-radius: 30px;
}
.menu__line--center{top: 9px;}

.menu__line--bottom{bottom: 0;}

.menu__line.black {
  background: #000; /* 白地で見えるように黒に */
}

.menu__line--top.active{
  top: 8px;
  transform: rotate(45deg);
  background:var(--black)!important;
}

.menu__line--center.active{
  transform:scaleX(0);
  background:var(--black);
}

.menu__line--bottom.active{
  bottom: 10px;
  transform: rotate(135deg);
  background:var(--black);
}

.lang{
  position: absolute;
  top:40px;
  left:5%;
  font-size:1.5rem;
  font-weight:500;
  display: flex;
  list-style-type: none;
  z-index:20;
}

.lang li:first-child{margin-right:15px;}

.lang li:first-child::after{
  content:"｜";
  color: rgba(255, 255, 255, 0.6);
  padding-left:15px;
}

.lang a{
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.lang a:hover{color: var(--black);}

.lang a.now{
  color: #fff;
  font-weight:700;
  text-decoration: none;
}

.navigation.active .lang{display: none;}

.lang02{
  position: absolute;
  top:40px;
  left:5%;
  font-size:1.5rem;
  font-weight:500;
  display: flex;
  list-style-type: none;
  z-index:200;
}

.lang02 li:first-child{margin-right:15px;}

.lang02 li:first-child::after{
  content:"｜";
  color: rgba(0, 0, 0, 0.6);
  padding-left:15px;
}

.lang02 a{
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.lang02 a:hover{color: var(--black);}

.lang02 a.now{
  color: #000;
  font-weight:700;
  text-decoration: none;
}

.navigation.active .lang li:first-child::after,
.navigation.active .lang a {color: rgba(0, 0, 0, 0.3);}

.navigation.active .lang a:hover {color: var(--black);}

.navigation.active .lang a.now {
  color: var(--black);
  font-weight: 700;
}

.gnav{
  background: rgba(255,255,255,0.94);
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 99;
}

.gnav__wrap{
  display:flex;
  flex-flow: column;
  justify-content:space-between;
  width: 100%;
  height:100%;
  position: absolute;
  padding: 0 40px 46px;
}

.gnav__menu__wrap{
  margin-top: 130px;
  padding-left:2.6%;
}

.gnav__menu__item{margin: 15px 0;}

.gnav__menu__item a{
  color: var(--black);
  font-family:var(--font-midashi);
  font-size: 1.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: .5s;
}

.gnav__menu__item a:hover{color: var(--gray);}

.submenu .gnav__menu__item a{
  font-size:1.6rem;
  margin-left:2.4%;
}

.nav_logo{width: 220px;}

.bg{
  width: 100%;
height:100svh;
/*height: calc(var(--real-vh) * 100);*/
display: block;
background-image: url(../img/main.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}

.exhibit_main{
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 80%;
  max-width: 740px;
}

.exhibit_title{margin-bottom: 60px;}

.open-info {
  background: rgb(140, 140, 140, 0.3);
  backdrop-filter: blur(50px) brightness(0.9);
  -webkit-backdrop-filter: blur(50px) brightness(0.9);
  border-radius: 5px;
  color: #fff;
  max-width: 320px;
  margin:0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
/*padding: 24px 40px 30px;*/
}

body#en .open-info {
  max-width: 380px;
}

.open-info-box{
  text-align: center;
  margin:25px auto 20px;
}

body#en .open-info-box{
  margin:30px auto;
}

#open-date {
  font-family: var(--font-midashi);
  font-size: 1.5rem;
  line-height:1.5;
  font-weight: 700;
}

#open-time {
  font-family: var(--font-midashi);
  font-size: 2.4rem;
  font-weight: 700;
  margin-top:8px;
  line-height:1;
}

body#en #open-time {
  font-family: var(--font-midashi);
  font-size: 2.2rem;
  font-weight: 700;
  margin-top: 6px;
}

.container{
  max-width: 1120px;
  width:86%;
  margin: 0 auto;
  padding:0;
}

#exhibition {
  width: 100%;
  margin: 0 auto 80px;
  padding: 80px 0 120px;
  font-family: var(--font-honbun);
  ccolor: var(--black);
  border-bottom:1px solid #C7C7C7;
}

.exhibition-outline{
  width: 75%;
  max-width: 840px;
  margin-left: auto;
  margin-right: 0;
}

h1.exhibition-title {
  width: 100%;
  max-width:350px;
  font-weight: 700;
  margin-bottom: 75px;
}

h1.exhibition-title img{width: 100%;}

.exhibition-lead {
  line-height: 2;
  margin-bottom: 75px;
  text-align:justify;
}

body#en .exhibition-lead {
  text-align:left;
}

.exhibition-info{
  font-family: var(--font-midashi);
  font-weight:700;
  font-size:2.4rem;
  line-height:1.75;
  color: var(--black);
  margin-bottom: 35px;
}

.exhibition-info span{font-size:2rem;}

.exhibition-info p.notes {
  font-family: var(--font-honbun);
  font-size:1.5rem;
  font-weight:normal;
  line-height: 2;
}

.exhibition-credit {
  font-size:1.5rem;
  font-weight:normal;
  line-height: 2;
  margin-top: 40px;
}

#works {
  margin: 0 auto;
  padding:0;
}

h2.head-title{
  font-family:var(--font-midashi);
  font-size:3.2rem;
  margin-bottom: 10px;
}

.work-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding:55px 0 120px;
  border-bottom:1px solid #C7C7C7;
}

.work-image {
  flex: 1 1 540px;
  max-width: 540px;
}

.work-image h3, .work-image h4{display: none;}

.work-image img {
  width: 100%;
  height: auto;
  display: block;
}

.work-image p.photo_credit{
  font-size: 1.1rem;
  line-height:1.85;
  color:var(--gray);
  margin-top:10px;
}

.work-text {
  flex: 1 1 540px;
  max-width: 540px;
  margin-top:-11px;
}

.work-text h3 {
  font-family:var(--font-midashi);
  font-size: 2.4rem;
  font-weight: 700;
  line-height:1.75;
  margin-bottom: 25px;
}

.work-text p {
  line-height: 2;
  text-align:justify;
  margin-bottom: 30px;
}

body#en .work-text p {
  text-align:left;
}

.work-text p.credit {
  font-size: 1.4rem;
  line-height:1.85;
  color:var(--gray);
  margin-bottom: 0;
}

/*body#en .work-text p.credit{
margin-top: 30px;
}*/


.works-type-b{margin-bottom: 100px;}

.works-type-b .work-item:last-child{border-bottom:none;}

#works03-a{
  border-bottom:1px solid #C7C7C7;
  margin-bottom: -100px;
}

.works-type-b .work-image.small {
  flex: 1 1 348px;
  max-width: 348px;
}

.works-type-b .work-text.wide {
  flex: 1 1 734px;
  max-width: 734px;
}

.works-type-b .work-subtitle {
  font-family:var(--font-midashi);
  font-size: 1.6rem;
  font-weight: 700;
}

.works-type-b .work-title {
  font-family:var(--font-midashi);
  font-size: 21px;
  font-weight: 700;
  line-height:1.75;
  margin-bottom: 20px;
}

footer{
  display: flex;
  justify-content:space-between;
  padding:36px 6%;
  border-top:1px solid #C7C7C7;
}

.footer-logo{width: 60px;}

.footer-copyright{font-size:11px;}

span.italic{font-style:italic; padding-right:3px;}

span.strong{font-weight:700;}

/************************************** スマホ対応 *****************************************/

@media (max-width: 767px) {

  html{scroll-behavior: auto;}

  body {font-size: 1.4rem;}

  .navigation_wrap {width:90%;}

  .menu{right:5%;}

  .gnav{height:100dvh;}

  .gnav__wrap{
    padding:22% 0 0%;
    justify-content:start;
    gap:5.5dvh;
    height:100dvh;
  }

  .lang, .lang02{font-size:1.3rem;}

  .gnav__menu__wrap{
    padding-left:0;
    width: 90%;
    margin:0 auto;
  }

  .gnav__menu__item{margin: 12px 0;}

  .gnav__menu__item a{font-size: 1.6rem;}

  .submenu .gnav__menu__item a{
    font-size:1.4rem;
    margin-left:4%;
  }

  .nav_logo{padding-left:5%;}

  .bg {
    animation: bg-pan 56s ease-in-out infinite;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
  }

  @keyframes bg-pan {
    0% {background-position: center center;}
    25% {background-position: 90% center;}
    75% {background-position: 10% center;}
    95% {background-position: center center;}
  }

  .open-info {
    color: #fff;
    max-width: 300px;
    width: 100%;
    border-radius: 6px;
  }

  #open-date {font-size: 1.3rem;}

  #open-time {font-size: 2rem;}

  body#en #open-time {font-size: 1.8rem;}

  #exhibition {
    width: 100%;
    margin: 0 auto 60px;
    padding: 60px 0;
  }

  .exhibition-outline{
    width: 100%;
    max-width: 100%;
  }

  h1.exhibition-title {
    max-width:240px;
    margin-bottom: 50px;
  }

  .exhibition-lead {margin-bottom: 50px;}

  .exhibition-info{
    font-size:1.6rem;
    margin-bottom: 30px;
  }

  .exhibition-info span{font-size:1.6rem;}

  .exhibition-info p.notes {font-size:1.3rem;}

  .exhibition-credit {
    font-size:1.3rem;
    font-weight:normal;
    line-height: 2;
    margin-top: 30px;
  }

  h2.head-title{
    font-size:2.4rem;
    margin-bottom: 35px;
  }

  .work-item {
    flex-direction: column;
    gap: 24px;
    padding:0 0 85px;
    margin-bottom: 40px;
  }

  .work-text h3, .work-text h4{display:none;}

  .work-image h3{
    display:  block;
    font-family:var(--font-midashi);
    font-size:2rem;
    line-height:1.5;
  }

  .work-image h4{
    display:  block;
    font-size:1.6rem;
  }

  .work-image img{margin:20px auto;}

  .work-image p.photo_credit{
    margin-top:-5px;
    margin-bottom: 20px;
  }

  .work-image,
  .work-text {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .works-type-b .work-item {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 50px;
  }

  #works03-a{
    border-bottom:1px solid #C7C7C7;
    margin-bottom: 50px;
  }

  .works-type-b .work-image.small,
  .works-type-b .work-text.wide {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .work-text p.credit {font-size: 1.2rem;}

  .works-type-b{margin-bottom:0;}

  .works-type-b .work-subtitle {font-size: 1.6rem;}

  .works-type-b .work-title{
   font-size: 2rem;
   line-height:1.5;
 }


}