@charset "UTF-8";

/*ベースフォント設定*/
/*Font Awesome5*/
@media screen and (min-width: 1025px ) { /*PC*/ }
@media screen and (max-width: 599px ) { /*SP*/ }
@media screen and (max-width: 1024px ) and (min-width: 600px ) { /*TB*/ }
@-webkit-keyframes buruburu {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes buruburu {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@-webkit-keyframes buruburu2 {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -20px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes buruburu2 {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, -20px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 70%;
  }
  70% {
    opacity: 50%;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 70%;
  }
  70% {
    opacity: 50%;
  }
  100% {
    opacity: 100%;
  }
}
@-webkit-keyframes gradAnimeTime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gradAnimeTime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.fade {
  opacity: 0;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}
.fade.effect {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.slidein {
  opacity: 0;
  -webkit-transform: translateX(-300px);
      -ms-transform: translateX(-300px);
          transform: translateX(-300px);
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}
.slidein.effect {
  opacity: 1;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

@-webkit-keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.fade-list > * {
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
  opacity: 0;
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);
  position: relative;
}
.fade-list.effect > *:nth-child(1) {
  -webkit-animation: fadeUp 0.7s 0.1s 1 ease normal forwards;
          animation: fadeUp 0.7s 0.1s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.fade-list.effect > *:nth-child(2) {
  -webkit-animation: fadeUp 0.7s 0.2s 1 ease normal forwards;
          animation: fadeUp 0.7s 0.2s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.fade-list.effect > *:nth-child(3) {
  -webkit-animation: fadeUp 0.7s 0.3s 1 ease normal forwards;
          animation: fadeUp 0.7s 0.3s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.fade-list.effect > *:nth-child(4) {
  -webkit-animation: fadeUp 0.7s 0.4s 1 ease normal forwards;
          animation: fadeUp 0.7s 0.4s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.fade-list.effect > *:nth-child(5) {
  -webkit-animation: fadeUp 0.7s 0.5s 1 ease normal forwards;
          animation: fadeUp 0.7s 0.5s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.fade-list.effect > *:nth-child(6) {
  -webkit-animation: fadeUp 0.7s 0.6s 1 ease normal forwards;
          animation: fadeUp 0.7s 0.6s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.fade-list.effect > *:nth-child(7) {
  -webkit-animation: fadeUp 0.7s 0.7s 1 ease normal forwards;
          animation: fadeUp 0.7s 0.7s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.fade-list.effect > *:nth-child(8) {
  -webkit-animation: fadeUp 0.7s 0.8s 1 ease normal forwards;
          animation: fadeUp 0.7s 0.8s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.fade-list.effect > *:nth-child(9) {
  -webkit-animation: fadeUp 0.7s 0.9s 1 ease normal forwards;
          animation: fadeUp 0.7s 0.9s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.fade-list.effect > *:nth-child(10) {
  -webkit-animation: fadeUp 0.7s 1s 1 ease normal forwards;
          animation: fadeUp 0.7s 1s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.fade-list.effect > *:nth-child(11) {
  -webkit-animation: fadeUp 0.7s 1.1s 1 ease normal forwards;
          animation: fadeUp 0.7s 1.1s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.fade-list.effect > *:nth-child(12) {
  -webkit-animation: fadeUp 0.7s 1.2s 1 ease normal forwards;
          animation: fadeUp 0.7s 1.2s 1 ease normal forwards;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.move-img {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.move-img:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #fff;
  z-index: 1;
  -webkit-transform-origin: right center;
      -ms-transform-origin: right center;
          transform-origin: right center;
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
  transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
  transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
  transition: width 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s, -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
}
.move-img img {
  position: relative;
  width: 100%;
  height: auto;
  opacity: 0;
  left: -100%;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}
.move-img.effect img {
  opacity: 1;
  left: 0;
}
.move-img.effect:before {
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  width: 100%;
}

.blur {
  -ms-filter: blur(6px);
  -webkit-filter: blur(6px);
          filter: blur(6px);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}
.blur.effect {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -ms-filter: blur(0);
  -webkit-filter: blur(0);
          filter: blur(0);
}


/*共通------------------------------------------*/
#top_hed {
  display: none;
}

/*=============================================================================*/
/*ページ内コンテンツ===============================================================*/
/*=============================================================================*/
.top-area header {
  padding: 1em 0;
}
.top-area header h1 {
  font-family: "Teko", serif;
  font-weight: 500;
  font-size: 300%;
  text-shadow: -1px -1px 0px #fff, 1px 1px 0px #fff;
}

#top-mainview {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: stretch;
  -webkit-box-align: stretch;
          align-items: stretch;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}
#top-mainview header {
  width: 43%;
  position: relative;
}
#top-mainview header h1 {
  margin-bottom: 3em;
  max-width: 50%;
}
#top-mainview header .thum-slide {
  counter-reset: numlist;
  max-width: 70%;
  margin: 0 auto;
  position: absolute;
  bottom: 3em;
  left: 10%;
  width: 80%;
}
#top-mainview header .thum-slide li {
  font-size: 120%;
  margin-bottom: 10px;
  font-weight: bold;
  display: block;
  padding: 1em;
  padding-right: 3em;
  position: relative;
  background: #6a6a6a;
  color: #b6b6b6;
  cursor: pointer;
}
#top-mainview header .thum-slide li span {
  display: block;
  font-size: 80%;
}
#top-mainview header .thum-slide li:hover, #top-mainview header .thum-slide li.now {
  background: #a4784d;
  color: #fff;
  text-decoration: none;
}
#top-mainview header .thum-slide li:after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) scale(1);
      -ms-transform: translateY(-50%) scale(1);
          transform: translateY(-50%) scale(1);
  right: 10px;
  font-size: 2em;
  font-family: "Teko", sans-serif;
  font-weight: normal;
  counter-increment: numlist;
  content: "0" counter(numlist);
}
#top-mainview ul#top-slide {
  position: relative;
  width: 57%;
  aspect-ratio: 8/7;
  background: url("../img/bg-wood-black.jpg") repeat left top;
}
#top-mainview ul#top-slide li {
  opacity: 0;
  position: absolute;
  inset: 0;
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
}
#top-mainview ul#top-slide li.now {
  opacity: 1;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1024px ) and (min-width: 600px ), screen and (max-width: 599px ) {
  #top-mainview { /*SP*/ }
  #top-mainview header {
    display: none;
  }
  #top-mainview ul#top-slide {
    width: 100%;
  }
}

#top-event {
  background: url("../img/bg-wood-black.jpg") repeat-y left top, url("../img/bg-event-info.jpg") no-repeat right bottom;
  background-size: 40% auto, 60% auto;
  padding: 5em 0;
}
@media screen and (max-width: 1024px ) and (min-width: 600px ), screen and (max-width: 599px ) {
  #top-event {
    background: none;
  }
}
#top-event header {
  padding-bottom: 3em;
}
#top-event header aside {
  font-size: 90%;
  font-weight: bold;
}
#top-event ul.info-list a {
  background: rgba(255, 255, 255, 0.9);
}

.ev-title {
  color: #fff;
  font-size: 120%;
  padding: 1em 0;
  letter-spacing: 2px;
}
.ev-title:before {
  content: "―";
  margin-right: 5px;
}

#progress, #event-soon {
  position: relative;
  padding-left: 10%;
  padding-right: 3%;
}
#progress:before, #event-soon:before {
  z-index: 10;
  display: inline-block;
  padding-right: 10%;
  background: rgba(255, 255, 255, 0);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(33.3333333333%, rgba(255, 255, 255, 0)), color-stop(33.3333333333%, rgb(255, 255, 255)), color-stop(66.6666666667%, rgb(255, 255, 255)), color-stop(66.6666666667%, rgba(255, 255, 255, 0)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33.3333333333%, rgb(255, 255, 255) 33.3333333333%, rgb(255, 255, 255) 66.6666666667%, rgba(255, 255, 255, 0) 66.6666666667%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$statCol", endColorstr="$endCol",GradientType=1 );
  background-size: 50% 10%;
  background-repeat: no-repeat;
  background-position: right 50%;
  font-size: 110%;
  letter-spacing: 1px;
  position: absolute;
  top: 1em;
  left: 10px;
  color: #fff;
  font-family: "Teko", serif;
}
@media screen and (max-width: 1024px ) and (min-width: 600px ), screen and (max-width: 599px ) {
  #progress, #event-soon { /*SP*/
    padding-left: 3%;
  }
  #progress:before, #event-soon:before {
    display: none;
  }
}

#progress {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  margin-bottom: 5em;
}
#progress:before {
  content: "in Progress";
}
#progress dt {
  width: 35%;
  text-align: center;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.2));
  -moz-filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.2));
  -ms-filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.2));
  filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.2));
}
@media all and (-ms-high-contrast: none) {
  #progress dt {
    -webkit-box-shadow: 10px 10px 0 0 rgba(0, 0, 0, 0.2);
            box-shadow: 10px 10px 0 0 rgba(0, 0, 0, 0.2);
  }
}
#progress dt:hover {
  -webkit-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  -moz-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  -ms-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
@media all and (-ms-high-contrast: none) {
  #progress dt:hover {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
#progress dt a {
  display: block;
}
#progress dt a:hover {
  text-decoration: none;
}
#progress dt a:hover img {
  opacity: 1;
}
#progress dd {
  width: 65%;
  padding-left: 5%;
}
#progress dd h2 {
  font-size: 150%;
  letter-spacing: 1px;
}
#progress dd h2 span {
  display: block;
  font-size: 65%;
  font-weight: normal;
  color: #ae0000;
}
@media screen and (max-width: 1024px ) and (min-width: 600px ), screen and (max-width: 599px ) {
  #progress { /*SP*/
    background: #fff;
  }
  #progress dt {
    width: 100%;
    max-width: 400px;
    text-align: center;
    margin-bottom: 2em;
  }
  #progress dd {
    width: 90%;
    max-width: 500px;
  }
}
#progress .btn {
  margin-top: 3em;
}

.event-data {
  font-size: 90%;
  color: #555;
}

#event-soon {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: stretch;
  -webkit-box-align: stretch;
          align-items: stretch;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}
#event-soon:before {
  content: "Coming soon";
}
#event-soon li {
  width: 33.3%;
  padding: 0 4% 1em;
}
#event-soon li a {
  display: block;
  background: #fff;
  -webkit-filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.2));
  -moz-filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.2));
  -ms-filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.2));
  filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.2));
}
@media all and (-ms-high-contrast: none) {
  #event-soon li a {
    -webkit-box-shadow: 10px 10px 0 0 rgba(0, 0, 0, 0.2);
            box-shadow: 10px 10px 0 0 rgba(0, 0, 0, 0.2);
  }
}
#event-soon li a.closing dd {
  background: #eaeaea;
}
#event-soon li a.closing dd p.title {
  min-height: 2em;
}
#event-soon li a.closing dd:after {
  display: block;
  width: 100%;
  line-height: 1.8;
  font-size: 80%;
  color: #666;
  content: "期間中はギャラリーを利用できません。";
}
#event-soon li a:hover {
  text-decoration: none;
  -webkit-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  -moz-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  -ms-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
@media all and (-ms-high-contrast: none) {
  #event-soon li a:hover {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
#event-soon li a dl dt {
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}
#event-soon li a dl dt img {
  min-width: 100%;
  max-width: 120%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
#event-soon li a dl dd {
  padding: 1em 1em 2em;
  position: relative;
}
#event-soon li a dl dd .title {
  min-height: 3.5em;
}
#event-soon li a dl dd .soon-data {
  border-top: 1px solid #c1c1c1;
  margin-bottom: 0;
  font-size: 85%;
  width: 90%;
  color: #999;
  position: absolute;
  bottom: 7px;
  left: 5%;
}
@media screen and (max-width: 1024px ) and (min-width: 600px ), screen and (max-width: 599px ) {
  #event-soon li {
    width: 100%;
    margin-bottom: 2em;
  }
  #event-soon li a {
    -webkit-filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.2));
    -moz-filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.2));
    -ms-filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.2));
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.2));
    border: 1px solid #eaeaea;
  }
}
@media screen and (max-width: 1024px ) and (min-width: 600px ) and (-ms-high-contrast: none), screen and (max-width: 599px ) and (-ms-high-contrast: none) {
  #event-soon li a {
    -webkit-box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
            box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
  }
}
@media screen and (max-width: 1024px ) and (min-width: 600px ), screen and (max-width: 599px ) {
  #event-soon li a dl {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
    -ms-flex-pack: start;
    -webkit-box-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
  }
  #event-soon li a dl dt {
    width: 25%;
    padding-top: 25%;
  }
  #event-soon li a dl dd {
    width: 75%;
  }
}

#top-information {
  background: #f9f9f9;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  padding: 3em 0;
}
#top-information section {
  max-width: 650px;
  width: 65%;
}
#top-information aside {
  width: 35%;
  max-width: 500px;
}
@media screen and (max-width: 1024px ) and (min-width: 600px ), screen and (max-width: 599px ) {
  #top-information { /*SP*/ }
  #top-information section {
    width: 90%;
    margin-bottom: 3em;
  }
  #top-information aside {
    width: 80%;
  }
}

ul.info-list {
  width: 90%;
  margin: 0 auto 3em;
}
ul.info-list li {
  border-bottom: 1px solid #000;
}
ul.info-list a {
  display: block;
  padding: 1em;
  text-decoration: none;
}
ul.info-list a:hover {
  background: #fff;
}
ul.info-list a dl dt {
  margin-bottom: 10px;
  color: #666;
}
ul.info-list a dl dt span {
  display: inline-block;
  font-size: 90%;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 3px 3em;
  text-indent: 1px;
  margin-right: 10px;
}
ul.info-list a dl dd {
  font-size: 110%;
}

#top-bnr li {
  margin-bottom: 1.5em;
}
#top-bnr li a {
  display: block;
  -webkit-filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.1));
  -moz-filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.1));
  -ms-filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.1));
}
@media all and (-ms-high-contrast: none) {
  #top-bnr li a {
    -webkit-box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, 0.1);
  }
}

#top-about {
  padding: 5em 0;
}

.wide-info {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: stretch;
  -webkit-box-align: stretch;
          align-items: stretch;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  margin-bottom: 10vw;
}
.wide-info dt {
  min-width: 53vw;
  text-align: right;
  -webkit-filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1));
  -moz-filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1));
  -ms-filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1));
}
@media all and (-ms-high-contrast: none) {
  .wide-info dt {
    -webkit-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
  }
}
.wide-info dt img {
  min-width: 100%;
}
@media screen and (max-width: 1024px ) and (min-width: 600px ), screen and (max-width: 599px ) {
  .wide-info {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .wide-info dt {
    width: 100%;
    min-width: inherit;
    min-width: initial;
  }
  .wide-info dt img {
    min-width: inherit;
    min-width: initial;
  }
}
.wide-info dd {
  width: 100%;
  padding: 0 3%;
}
.wide-info dd .btn, .wide-info dd .more {
  margin-top: 3em;
}
.wide-info h2 {
  font-size: 300%;
  font-weight: normal;
  line-height: 1;
  padding: 1em 0;
  position: relative;
  z-index: 10;
}
.wide-info h2:after {
  display: inline-block;
  width: 17vw;
  height: 1px;
  background: #000;
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) scale(1);
      -ms-transform: translateY(-50%) scale(1);
          transform: translateY(-50%) scale(1);
}
.wide-info.left-box {
  background: url("../img/h2-left.jpg") no-repeat left top;
  padding-left: 5vw;
}
@media screen and (min-width: 1025px ) {
  .wide-info.left-box { /*SP*/ }
  .wide-info.left-box dt {
    -ms-flex-order: 2;
    -webkit-box-ordinal-group: 3;
            order: 2;
    text-align: right;
  }
  .wide-info.left-box dd {
    -ms-flex-order: 1;
    -webkit-box-ordinal-group: 2;
            order: 1;
  }
}
.wide-info.left-box h2 {
  padding-right: 3em;
}
.wide-info.left-box h2:after {
  right: -5vw;
}
.wide-info.right-box {
  background: url("../img/ttl-access-bg.jpg") no-repeat right top;
  padding-right: 5vw;
}
.wide-info.right-box h2 {
  text-align: right;
  padding-left: 3em;
}
.wide-info.right-box h2:after {
  left: -5vw;
}