@charset "utf-8";

/* ============================================

   01 - 情報BOX                                 */

/* --------------------------------------------
   style
----------------------------------------------- */

.wrapper {
  background: url("../img/box/bac-base.png");
}

.none {
  display: none !important;
}
.shown {
  animation: fadeIn 0.4s ease forwards;
}
.hidden {
  animation: fadeOut 0.4s ease forwards;
}

/* -----[ ナビ ]----- */

.side {
  float: left;
  width: 370px;
}
.btn-back {
  width: 217px;
  height: 90px;
  margin: 25px 0 8px 140px;
  overflow: hidden;
}
.btn-back:active img {
  margin-top: -90px;
}
.side-nav li {
  width: 370px;
  overflow: hidden;
}
.side-nav li:active:not(.active) {
  margin: 3px 0 -3px;
}
.side-nav li.active img,
.side-nav li:active img {
  margin-left: -370px;
}

/* -----[ 詳細 ]----- */

.main {
  position: relative;
  float: right;
  width: 1550px;
  height: 100%;
  padding: 50px 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #ecefc5;
}
.detail {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.detail-ttl {
  margin-bottom: .5em;
  color: #3e7c3e;
  font-size: 40px;
}
.detail-ttl span {
  display: inline-block;
  width: 84px;
  height: 70px;
  margin-right: 24px;
  background: url("../img/box/ico-book.png") no-repeat 0 5px;
  text-align: center;
}
.detail-txt {
  margin-bottom: 40px;
}
.detail-txt a {
  display: inline-block;
  position: relative;
  margin: 0 .25em;
  color: #3e7c3e;
  text-decoration: none;
}
.detail-txt a::before {
  margin-right: .25em;
  content: url("../img/box/ico-help.png");
}
.detail-txt a::after {
  position: absolute;
  bottom: .2em;
  left: 22px;
  width: calc(100% - 22px);
  height: 2px;
  background-color: #3e7c3e;
  content: "";
}
.detail-img {
  padding: 20px;
  background-color: #fff;
  text-align: center;
}
.btn-prev,
.btn-next {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 75px;
  height: 75px;
  margin: auto 0;
  overflow: hidden;
  line-height: 200;
}
.btn-prev {
  left: 0;
  background: url("../img/box/btn-prev.png") no-repeat 0 top;
}
.btn-next {
  right: 0;
  background: url("../img/box/btn-next.png") no-repeat 0 top;
}
/*
.btn-prev:active,
.btn-next:active {
  background-position: 0 bottom;
}
*/
.btn-prev a,
.btn-next a {
  display: block;
  height: 100%;
}

/* -----[ ポップアップ ]----- */

.popup {
  display: -webkit-flex;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}
.popup-inner {
  position: relative;
  width: 800px;
  margin: auto;
  padding: 45px 50px 40px;
  border: 10px solid #a3d8a3;
  border-radius: 40px;
  background-color: #fff;
}
.popup-ttl {
  color: #3e7c3e;
  font-size: 40px;
}
.ico-close {
  position: absolute;
  top: -47px;
  right: -54px;
  width: 89px;
  height: 89px;
  overflow: hidden;
  background: url("../img/box/ico-close.png") no-repeat 0 0;
  line-height: 200;
  cursor: pointer;
}
.ico-close:active {
  background-position: 0 -89px;
}

@keyframes fadeIn {
  0% {
    visibility: visible;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}