@charset "UTF-8";
html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  color: #000000;
  text-align: center;
  font-family: "tga","Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック", YuGothic, "メイリオ", Meiryo, Arial, sans-serif;
  background: #ffffff;
  color: #010101;
}

a {
  color: #000000;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}

a:hover {
  color: #666666;
}

.alphaBtn {
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  opacity: 1;
  filter: alpha(opacity=100);
}

.alphaBtn:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 39px;
  height: 100%;
  background: #ffffff;
  border-right: 1px solid #ececec;
  z-index: 999;
}

nav ul {
  position: relative;
  top: 50%;
  margin-top: -215px;
}

nav ul.nav-top {
  margin-top: -215px;
}

nav li {
  margin: 15px 0;
  position: relative;
  cursor: pointer;
}

nav li.nav-page {
  margin: 18px 0;
}

nav li a {
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  opacity: 1;
  filter: alpha(opacity=100);
}

nav li a:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

nav li .line {
  width: 1px;
  height: 0;
  background: #000000;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  position: absolute;
  top: 50%;
  right: -1px;
}

nav li.current .line, nav li:hover .line {
  height: 100%;
  top: 0;
}

nav li.current {
  cursor: default;
}

.body-top nav li {
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}

.body-top nav li:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.body-top nav li:hover .line {
  height: 0;
  top: 50%;
}

.body-top nav li.current:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

.body-top nav li.current:hover .line {
  height: 100%;
  top: 0;
}

.body-top nav li.current:hover a:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

.body-top .left {
  padding-top: 263px;
}

.body-top .left-inner {
  padding-left: 40px;
}

.body-top .left-inner h1 {
  width: 100%;
  position: absolute;
  left: 20px;
  top: 0;
  text-align: center;
  padding-top: 120px;
  margin-bottom: 118px;
}

#base {
  width: 100%;
  min-width: 1100px;
}

.base-main {
  padding-left: 50%;
}

.base-main p {
  width: 100%;
}

#wrapper {
  width: 100%;
  height: 100%;
  min-width: 1100px;
  margin: 0 auto;
  background: #ffffff;
  position: relative;
  position: fixed;
  left: 0;
  top: 0;
}

#wrap {
  min-width: 1100px;
  overflow: hidden;
}

.layout {
  text-align: left;
  position: absolute;
  left: 0;
  top: 0;
}

.left {
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
}

.left-inner {
  padding-left: 40px;
}

.left-inner h1 {
  padding-top: 120px;
  margin-bottom: 118px;
}

#wrap {
  padding-left: 40px;
}

.page {
  position: relative;
  padding-bottom: 50px;
}

.page h1 {
  padding-top: 105px;
  margin-bottom: 58px;
  position: relative;
}

.page-title {
  font-size: 14px;
  margin-top: 25px;
}

.page .foot-btn {
  margin: 55px auto 50px auto;
}

.page .foot-copy {
  font-size: 10px;
}

.page-base {
  width: 100%;
  position: absolute;
  left: 0;
  top: 17px;
  text-align: center;
}

.page-base img {
  min-width: 1140px;
  max-width: 1160px;
}

.right {
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
  background: #ffffff;
  overflow: hidden;
}

.right-inner {
  position: relative;
  right: 0;
  top: 0;
}

.right-list {
  position: relative;
}

.right-list li {
  overflow: hidden;
  position: relative;
  padding-bottom: 0;
}

.right-list li:hover .right-list__photo {
  opacity: 0.3;
  filter: alpha(opacity=30);
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}

.right-list li:hover .right-list__name {
  opacity: 1;
  filter: alpha(opacity=100);
}

.right-list li a:hover {
  color: #000000;
}

.right-list__photo {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
  opacity: 1;
  filter: alpha(opacity=100);
  transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
}

.right-list__photo.right-list__photoC {
  top: -180px;
}

.right-list__photo.right-list__photoB {
  top: auto;
  bottom: -120px;
}

.right-list__name {
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 16px;
  margin-top: -8px;
}

.right-hover {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  display: none;
}

.right-hover li {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  opacity: 0;
  filter: alpha(opacity=0);
}

.right-nav {
  width: 35px;
  height: 30px;
  position: absolute;
  left: 50%;
  margin-left: -17px;
  opacity: 0;
  filter: alpha(opacity=0);
  display: none;
  cursor: pointer;
  overflow: hidden;
}

.right-nav img {
  position: relative;
  top: 0;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}

.right-nav:hover img {
  margin-top: -30px;
}

.prologue {
  font-size: 14px;
  line-height: 35px;
  position: relative;
  padding-bottom: 200px;
}

.prologue-banner {
  margin-top: 100px;
}

.prologue-link {
  margin: 128px 65px 0 65px;
  text-align: left;
  border-top: 1px solid #ececec;
}

.prologue-link1 {
  display: block;
  border-bottom: 1px solid #ececec;
  padding: 25px 0;
  position: relative;
}

.prologue-link2 {
  display: block;
  border-bottom: 1px solid #ececec;
  padding: 15px 0;
  position: relative;
}

.prologue-link__txt {
  font-size: 14px;
  line-height: 24px;
  padding-left: 15px;
  position: relative;
}

.prologue-link__txt2 {
  font-size: 13px;
  margin-top: 3px;
  line-height: 22px;
  padding-left: 15px;
  position: relative;
}

.prologue-link__txt2 span {
  font-size: 11px;
}

.prologue-link__arrow1 {
  width: 13px;
  font-size: 0;
  line-height: 0;
  height: 30px;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  right: 21px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}

.prologue-link__arrow2 {
  width: 13px;
  font-size: 0;
  line-height: 0;
  height: 30px;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  right: 13px;
  -webkit-transition: all 0.3s ease-out 0.1s;
  -moz-transition: all 0.3s ease-out 0.1s;
  -o-transition: all 0.3s ease-out 0.1s;
  transition: all 0.3s ease-out 0.1s;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}

.prologue-link a:hover .prologue-link__arrow1 {
  transform: rotateY(360deg);
  -webkit-transform: rotateY(360deg);
  right: 13px;
}

.prologue-link a:hover .prologue-link__arrow2 {
  transform: rotateY(360deg);
  -webkit-transform: rotateY(360deg);
  right: 5px;
}

.prologue-link__base {
  position: absolute;
  right: 0px;
  bottom: 0;
}

.index {
  width: 440px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}

.index-list {
  height: 304px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -152px;
}

.index-list li {
  font-size: 14px;
  line-height: 38px;
}

.index-list li span {
  font-size: 13px;
  line-height: 37px;
  letter-spacing: 0.04em;
}

.index-list li a {
  color: #000000;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  opacity: 1;
  filter: alpha(opacity=100);
}

.index-list li a:hover {
  color: #000000;
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.twitter {
  width: 440px;
  margin: 0 auto;
  text-align: left;
}

.twitter-profile {
  margin-bottom: 32px;
  padding-top: 100px;
}

.twitter-profile__icon {
  float: left;
  width: 68px;
}

.twitter-profile__name {
  float: left;
  padding-top: 4px;
}

.twitter-profile__un {
  font-size: 13px;
}

.twitter-profile__sn {
  font-size: 11px;
}

.twitter-date {
  font-size: 10px;
  margin-bottom: 3px;
}

.twitter-text {
  font-size: 12px;
  line-height: 19px;
  margin-bottom: 4px;
}

.twitter-action {
  margin-bottom: 17px;
}

.twitter-action li {
  width: 20px;
  height: 20px;
  font-size: 0;
  line-height: 0;
  float: left;
  margin-right: 1px;
}

.book-lead {
  font-size: 13px;
  line-height: 30px;
  position: relative;
  margin: 0 auto 47px auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 108px;
  border-bottom: 1px solid #ececec;
}

.book-lead span {
  font-size: 11px;
  line-height: 23px;
  display: block;
  margin-top: 13px;
}

.book-base1 {
  position: absolute;
  left: 0;
  bottom: 0;
}

.book-base2 {
  position: absolute;
  right: 0;
  bottom: 0;
}

.book-box {
  position: relative;
  padding-bottom: 40px;
}

.book-box__title {
  font-size: 11px;
  letter-spacing: 0.04em;
}

.book-box__name {
  font-size: 17px;
  line-height: 25px;
  margin-bottom: 14px;
}

.book-box__info {
  font-size: 13px;
  line-height: 25px;
  margin-bottom: 18px;
}

.book-box__price {
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.04em;
}

.book-photobook {
  margin-bottom: 87px;
}

.book-photobook .book-box__title {
  margin-bottom: 43px;
}

.book-photobook__inner {
  width: 435px;
  margin: 0 auto;
  position: relative;
}

.book-photobook__image {
  width: 170px;
  float: left;
  background: #fafafa;
  margin-right: 71px;
}

.book-photobook__image p {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.04em;
  padding-top: 69px;
}

.book-photobook__txt {
  float: left;
  text-align: left;
  padding-top: 42px;
}

.book-postcard {
  padding-bottom: 96px;
}

.book-postcard .book-box__title {
  margin-bottom: 57px;
}

.book-postcard__inner {
  max-width: 1042px;
  min-width: 990px;
  margin: 0 auto;
  position: relative;
}

.book-postcard__box {
  width: 505px;
  float: left;
}

.book-postcard__box2 {
  width: 515px;
  float: right;
}

.book-postcard__box2 .book-postcard__image {
  margin-right: 50px;
}

.book-postcard__image {
  float: left;
  margin-right: 33px;
}

.book-postcard__image p {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.04em;
  padding-top: 69px;
}

.book-postcard__txt {
  float: left;
  text-align: left;
  padding-top: 20px;
}

.book-postcard__info {
  font-size: 13px;
  line-height: 21px;
}

.book-postcard__info2 {
  font-size: 12px;
  margin: 5px 0 30px 0;
}

.book-postcard__info3 {
  font-size: 11px;
  margin: 7px 0 18px 0;
}

.book-postcard__note {
  font-size: 11px;
  line-height: 25px;
  text-align: left;
  padding: 21px 0 0 10px;
}

.asmart {
  border-bottom: 1px solid #ececec;
  padding: 57px 0 55px 0;
}

.asmart-inner {
  width: 410px;
  margin: 0 auto;
}

.asmart-txt {
  width: 210px;
  float: left;
  text-align: center;
}

.asmart-txt__text {
  font-size: 15px;
}

.asmart-txt a {
  font-size: 11px;
  text-decoration: underline;
}

.asmart-txt a:hover {
  text-decoration: none;
  color: #000000;
}

.asmart a img {
  position: relative;
}

.asmart a:hover img {
  -webkit-animation: asmarticon 0.2s linear 0s forwards;
  animation: asmarticon 0.2s linear 0s forwards;
}

.exhibition-base1 {
  position: absolute;
  left: 0;
  bottom: 0;
}

.exhibition-base2 {
  position: absolute;
  right: 0;
  bottom: 0;
}

.exhibition-logo {
  padding-top: 109px !important;
  margin-bottom: 51px !important;
}

.exhibition-logo__loft {
  margin-bottom: 45px;
}

.exhibition-lead {
  font-size: 13px;
  line-height: 30px;
  position: relative;
  margin: 0 auto 62px auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 70px;
  border-bottom: 1px solid #ececec;
}

.exhibition-lead span {
  font-size: 11px;
  line-height: 23px;
  display: block;
  margin-top: 13px;
}

.exhibition-box {
  padding-bottom: 64px;
  position: relative;
}

.exhibition-box1 {
  margin-bottom: 79px;
  padding-bottom: 82px;
}

.exhibition-box__inner {
  width: 900px;
  margin: 0 auto;
  position: relative;
}

.exhibition-box__image {
  width: 395px;
  float: left;
}

.exhibition-box__image1 {
  padding-top: 90px;
}

.exhibition-box__image ul {
  letter-spacing: -.40em;
  text-align: left;
  padding-top: 9px;
}

.exhibition-box__image ul li {
  letter-spacing: 0.04em;
  display: inline-block;
  vertical-align: top;
  font-size: 10px;
  line-height: 15px;
  padding-left: 5px;
}

.exhibition-box__image__desc1 {
  width: 89px;
}

.exhibition-box__image__desc2 {
  width: 128px;
}

.exhibition-box__image__desc3 {
  width: 91px;
}

.exhibition-box__image__desc4 {
  width: 66px;
}

.exhibition-box__txt {
  width: 405px;
  float: right;
  text-align: left;
}

.exhibition-box__txt2 {
  width: 422px;
  padding-top: 21px;
  padding-bottom: 22px;
}

.exhibition-box__txt2 dl dt {
  width: 66px !important;
}

.exhibition-box__txt2 dl dd {
  width: 340px !important;
}

.exhibition-box dl {
  margin-bottom: 4px;
}

.exhibition-box dl.exhibition-list {
  margin-bottom: 17px;
}

.exhibition-box dl.exhibition-list2 {
  margin-bottom: 26px;
}

.exhibition-box dl dt {
  width: 35px;
  float: left;
  font-size: 14px;
  line-height: 25px;
}

.exhibition-box dl dd {
  font-size: 14px;
  line-height: 25px;
  position: relative;
  width: 355px;
  float: left;
  padding-left: 13px;
}

.exhibition-box dl dd a {
  font-size: 13px;
  text-decoration: underline;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.exhibition-box dl dd a:hover {
  text-decoration: none;
}

.exhibition-box dl dd span {
  font-size: 11px;
  line-height: 21px;
}

.exhibition-box dl dd span.text2 {
  display: inline-block;
  margin-top: 8px;
}

.exhibition-title {
  font-size: 18px;
  position: relative;
  left: -12px;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}

.exhibition-title2 {
  margin-bottom: 32px;
}

.exhibition-separate {
  position: absolute;
  left: 0;
  top: 0;
}

.exhibition-tel {
  font-size: 14px !important;
  letter-spacing: 0.04em;
}

.exhibition-fee {
  font-size: 17px;
  border-bottom: 2px solid #ff5da6;
  position: absolute;
  left: 50%;
  margin-left: 466px;
  top: -28px;
  width: 70px;
  padding-bottom: 3px;
}

.exhibition-list__content {
  width: 500px;
  display: block;
}

.exhibition-list__content2 {
  width: 500px;
  font-size: 13px;
  line-height: 21px;
}

footer {
  width: 440px;
  margin: 0 auto;
  padding-top: 114px;
  padding-bottom: 50px;
  position: relative;
}

.banner {
  text-align: left;
  margin-bottom: 32px;
}

.copy {
  font-size: 9px;
  text-align: left;
}

.foot-btn {
  width: 25px;
  height: 21px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
}

.foot-btn__arrow2 {
  position: absolute;
  top: 8px;
  left: 0;
}

.foot-btn img {
  position: relative;
  top: 0;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}

.foot-btn:hover img {
  top: -5px;
}

.foot-btn__arrow2:hover img {
  top: -9px;
}

#loading {
  width: 100%;
  height: 100%;
  background: #ffffff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}

#loading .load {
  width: 245px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -123px;
  margin-top: -25px;
  opacity: 0;
  filter: alpha(opacity=0);
}

.path {
  max-width: 100%;
  height: auto;
  fill: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -370px;
  margin-top: -170px;
  z-index: 10;
}

.path {
  stroke: #000;
  fill: #fff;
  stroke-width: 0.5;
  stroke-DASHarray: 3000;
  stroke-DASHoffset: 3000;
  -moz-animation: lineAnime 3s ease-in 0.5s forwards;
  -webkit-animation: lineAnime 3s ease-in 0.5s forwards;
  -o-animation: lineAnime 3s ease-in 0.5s forwards;
  animation: lineAnime 3s ease-in 0.5s forwards;
}

@keyframes lineAnime {
  0% {
    stroke-DASHoffset: 3000;
    fill: #fff;
  }
  80% {
    stroke-DASHoffset: 2000;
    fill: #fff;
  }
  85% {
    stroke-DASHoffset: 0;
    fill: #000;
  }
  100% {
    stroke-DASHoffset: 0;
    fill: #000;
  }
}

@-moz-keyframes lineAnime {
  0% {
    stroke-DASHoffset: 3000;
    fill: #fff;
  }
  80% {
    stroke-DASHoffset: 2000;
    fill: #fff;
  }
  85% {
    stroke-DASHoffset: 0;
    fill: #000;
  }
  100% {
    stroke-DASHoffset: 0;
    fill: #000;
  }
}

@-webkit-keyframes lineAnime {
  0% {
    stroke-DASHoffset: 3000;
    fill: #fff;
  }
  80% {
    stroke-DASHoffset: 2000;
    fill: #fff;
  }
  85% {
    stroke-DASHoffset: 0;
    fill: #000;
  }
  100% {
    stroke-DASHoffset: 0;
    fill: #000;
  }
}

@-o-keyframes lineAnime {
  0% {
    stroke-DASHoffset: 3000;
    fill: #fff;
  }
  80% {
    stroke-DASHoffset: 2000;
    fill: #fff;
  }
  85% {
    stroke-DASHoffset: 0;
    fill: #000;
  }
  100% {
    stroke-DASHoffset: 0;
    fill: #000;
  }
}

@-ms-keyframes lineAnime {
  0% {
    stroke-DASHoffset: 3000;
    fill: #fff;
  }
  80% {
    stroke-DASHoffset: 2000;
    fill: #fff;
  }
  85% {
    stroke-DASHoffset: 0;
    fill: #000;
  }
  100% {
    stroke-DASHoffset: 0;
    fill: #000;
  }
}

#bg {
  width: 300%;
  height: 300%;
  background: #19e3d7;
  position: absolute;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  left: 120%;
  top: -20%;
  -webkit-animation: bgAnime 1s ease-in-out 3.4s forwards;
  animation: bgAnime 1s ease-in-out 3.4s forwards;
}

#bg2 {
  width: 300%;
  height: 300%;
  background: #ffffff;
  position: absolute;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  left: 120%;
  top: -20%;
  -webkit-animation: bgAnime 1s ease-in-out 4.8s forwards;
  animation: bgAnime 1s ease-in-out 4.8s forwards;
}

#bg3 {
  width: 300%;
  height: 300%;
  background: #ffffff;
  position: absolute;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  left: 0%;
  top: -20%;
  -webkit-animation: bgAnime2 1s ease-in-out 4.8s forwards;
  animation: bgAnime2 1s ease-in-out 4.8s forwards;
}

@keyframes bgAnime {
  0% {
    left: 120%;
  }
  100% {
    left: -120%;
  }
}

@-moz-keyframes bgAnime {
  0% {
    left: 120%;
  }
  100% {
    left: -120%;
  }
}

@-webkit-keyframes bgAnime {
  0% {
    left: 120%;
  }
  100% {
    left: -120%;
  }
}

@keyframes bgAnime2 {
  0% {
    left: 0%;
  }
  100% {
    left: -120%;
  }
}

@-moz-keyframes bgAnime2 {
  0% {
    left: 0%;
  }
  100% {
    left: -120%;
  }
}

@-webkit-keyframes bgAnime2 {
  0% {
    left: 0%;
  }
  100% {
    left: -120%;
  }
}

@keyframes asmarticon {
  0% {
    top: 0;
  }
  50% {
    top: -5px;
  }
  100% {
    top: 0;
  }
}

@-webkit-keyframes asmarticon {
  0% {
    top: 0;
  }
  50% {
    top: -5px;
  }
  100% {
    top: 0;
  }
}

.red {
  color: #cb0000;
}