@charset "utf-8";

/* 「紙芝居を楽しむ」カテゴリー
   ============================================================ */


/* デジタル紙芝居ギャラリーの作品
   ---------------------------------------- */

.body-gallery {
  position: relative;
}

.gallery_title {
  background-image: url("../_img/gallery_title_box.jpg");
  background-repeat: no-repeat;
  width: 360px;
  height: 60px;
  -webkit-background-size: 360px 60px;
  background-size: 360px 60px;
  position: absolute;
  left: 320px;
  top: 592px;
  z-index: 2;
}
.gallery_title h1 {
  font-size: 16px;
  text-align: center;
  margin: 20px auto;
  width: 320px;
}

.gallery_frame {
  background-image: url("../_img/gallery_frame.jpg");
  background-repeat: no-repeat;
  width: 894px;
  height: 575px;
  -webkit-background-size: 894px 575px;
  background-size: 894px 575px;
  position: absolute;
  left: 53px;
  top: 20px;
}
.gallery_frame iframe {
  margin: 210px 0 0 225px;
  width: 445px;
  height: 275px;
}

.btn_previous {
  position: absolute;
  left: 55px;
  top: 642px;
}
.btn_previous a {
  background-image: url("../_img/btn_previous.jpg");
  background-repeat: no-repeat;
  width: 165px;
  height: 64px;
  -webkit-background-size: 165px 64px;
  background-size: 165px 64px;
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: all 0.15s ease 0s;
  transition: all 0.15s ease 0s;
}
.btn_previous a {/*hover用画像事前読み込み用*/
  background-image:
    url("../_img/btn_previous.jpg"),/*最前面*/
    url("../_img/btn_previous_on.jpg");
}
.btn_previous a:hover {
  background-image: url("../_img/btn_previous_on.jpg");
}

.btn_next {
  position: absolute;
  left: 778px;
  top: 642px;
}
.btn_next a {
  background-image: url("../_img/btn_next.jpg");
  background-repeat: no-repeat;
  width: 174px;
  height: 64px;
  -webkit-background-size: 174px 64px;
  background-size: 174px 64px;
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: all 0.15s ease 0s;
  transition: all 0.15s ease 0s;
}
.btn_next a {/*hover用画像事前読み込み用*/
  background-image:
    url("../_img/btn_next.jpg"),/*最前面*/
    url("../_img/btn_next_on.jpg");
}
.btn_next a:hover {
  background-image: url("../_img/btn_next_on.jpg");
}

.btn_coupling {
  position: absolute;
  left: 421px;
  top: 669px;
}
.btn_coupling1 {
  position: absolute;
  left: 336px;
  top: 669px;
}
.btn_coupling2 {
  position: absolute;
  left: 506px;
  top: 669px;
}

.btn_coupling a,
.btn_coupling1 a,
.btn_coupling2 a {
  font-size: 18px;
  font-family:'Hiragino Mincho ProN', serif;
  text-decoration: none;
  color: #ffffff;
  background-image: url("../_img/btn_coupling.png");
  background-repeat: no-repeat;
  white-space: nowrap;
  vertical-align: middle;
  padding: 12px 0 0 44px;
  width: 159px;
  height: 51px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.15s ease 0s;
  transition: all 0.15s ease 0s;
}
.btn_coupling1 a:hover,
.btn_coupling2 a:hover,
.btn_coupling a:hover {
  opacity: 0.8;
}

.btn-close {
  position: absolute;
  left: 900px;
  top: 15px;
  -webkit-transition: all 0.15s ease 0s;
  transition: all 0.15s ease 0s;
}
.btn-close:hover {
  opacity: 0.8;
}