@charset "utf-8";
/*-----------------------------------------------------

  layout.css

------------------------------------------------------*/


/*-----------------------------------------------------
  general　
-----------------------------------------------------*/


body{
  height: 100%;
  background: url(./../images/bg_repeat.jpg);
  font-family: "游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
  line-height: 1.5;
  font-size: 62.5%;
  color: #a24040;
}

*{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

a:link {text-decoration:none; color:#595959;}
a:visited {text-decoration:none; color:#595959;}
a:hover {text-decoration:none; color:#ab2548;}

.pc_kaigyou {
  display: block;
}

#body_bg {
  background: url(./../images/bg_rose_repeat.png) center -50px;
  background-repeat: repeat-y;
  position: relative;
  z-index: -9999;
}

#wrapper {
  width: 1000px;
  height: 5050px;
  background: #a24040;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: -9998;
  box-shadow: 0px 0px 10px rgba(0,0,0,1);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,1);
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,1);
}

#scroll {
  width: 100px;
  position: absolute;
  bottom: 15px;
  left: 50%;
  margin-left: -50px;
  font-family: 'PT Serif', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.8em;
  color: #fff;
  text-align: center;
  animation-name: anime1;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  background: url(../images/arrow_scroll.png) no-repeat center bottom 5px;
  padding-bottom: 20px;
  -webkit-transition: all .3s;
  transition: all .3s;
  opacity: 1;
  text-shadow: 0px 0px 15px #000, 0px 0px 15px #000;
  -moz-text-shadow: 0px 0px 15px #000, 0px 0px 15px #000;
  -webkit-text-shadow: 0px 0px 15px #000, 0px 0px 15px #000;
}

@keyframes anime1 {
0% { background-position: center bottom 5px;}
80% { background-position: center bottom 0;}
100% { background-position: center bottom 0;}
}

#scroll.hidden {
  opacity: 0;
}


/*---- btn ----*/

.inview .btn_kirarin a:before {
  display: block;
  position: absolute;
  z-index: 1;
  left: -10%;
  top: -30%;
  content: "";
  width: 6em;
  height: 160%;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
  background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
  background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
  animation-name: shiny;
  animation-duration: 2.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes shiny {
    0% {
        left: -30%;
    }
    20% {
        left: 120%;
    }
    100% {
        left: 120%;
    }
}
@-webkit-keyframes shiny {
    0% {
        left: -30%;
    }
    20% {
        left: 120%;
    }
    100% {
        left: 120%;
    }
}
@-moz-keyframes shiny {
    0% {
        left: -30%;
    }
    20% {
        left: 120%;
    }
    100% {
        left: 120%;
    }
}

.btn_area {
  width: 911px;
  height: 130px;
  text-align: center;
}

.btn_area p {
  margin-bottom: 7px;
}

.btn_area a {
  display: inline-block;
  width: 911px;
  height: 100px;
  position: relative;
  overflow: hidden;
}

.btn_area a:hover {
  opacity: 0.7;
}



.slideIn_header_left, .slideIn_header_right, .slideIn_left, .slideIn_right, .fadeInUp, .fadeIn, .fadeInSlow, .fadeInImage {
  opacity: 0;
}


.inview .slideIn_header_left {
  animation-name: slideIn_header_left;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes slideIn_header_left {
  0% {
    -webkit-transform: translate3d(-100px, 20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes slideIn_header_left {
  0% {
    -webkit-transform: translate3d(-100px, 20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes slideIn_header_left {
  0% {
    -webkit-transform: translate3d(-100px, 20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.inview .slideIn_header_right {
  animation-name: slideIn_header_right;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes slideIn_header_right {
  0% {
    -webkit-transform: translate3d(100px, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes slideIn_header_right {
  0% {
    -webkit-transform: translate3d(100px, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes slideIn_header_right {
  0% {
    -webkit-transform: translate3d(100px, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}


.inview .fadeIn {
  animation-name: fadeIn;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.inview .fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 0.5s;
  animation-delay: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes fadeInUp {
  0% {
    -webkit-transform: translate3d(0, 30px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  0% {
    -webkit-transform: translate3d(0, 30px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes fadeInUp {
  0% {
    -webkit-transform: translate3d(0, 30px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}



.inview .slideIn_left {
  animation-name: slideIn_left;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes slideIn_left {
  0% {
    -webkit-transform: translate3d(-100px, 0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes slideIn_left {
  0% {
    -webkit-transform: translate3d(-100px, 0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes slideIn_left {
  0% {
    -webkit-transform: translate3d(-100px, 0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.inview .slideIn_right {
  animation-name: slideIn_right;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}

@keyframes slideIn_right {
  0% {
    -webkit-transform: translate3d(100px, 0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes slideIn_right {
  0% {
    -webkit-transform: translate3d(100px, 0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes slideIn_right {
  0% {
    -webkit-transform: translate3d(100px, 0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}


.inview .fadeInImage {
  animation-name: fadeInImage;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 0.8s;
}

@keyframes fadeInImage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInImage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeInImage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.inview .flash {
  animation-name: flash;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes flash {
  0%,91%,96%,100%{
    opacity: 1;
  }

  92%{
    opacity: 0;
  }

  97%{
    opacity: 0;
  }
}


.inview .fadeInSlow {
  animation-name: fadeInSlow;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes fadeInSlow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInSlow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeInSlow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*-----------------------------------------------------
  contents
------------------------------------------------------*/

#contents {
  position: relative;
  height: 100%;
}

#bg_inner {
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  background: #fff;
  border: solid 8px #df9993;
  margin: 25px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -999;
}

#bg_top {
  height: 500px;
  padding: 33px 0 0 33px;
}

#bg_top_sp {
  width: 120px;
  height: 149px;
  position: absolute;
  top: 0px;
  right: 0px;
  background: url(./../images/bg_top_sp.png) no-repeat center center;
  background-size: 100% auto;
}

#title_area {
  width: 100%;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
}

#title {
  width: 693px;
  height: 220px;
  position: absolute;
  top: 210px;
  left: 50%;
  margin-left: -346px;
}

#rabbit {
  width: 163px;
  height: 181px;
  position: absolute;
  top: 30px;
  left: 70px;
}

#bg_gold {
  position: absolute;
  top: 428px;
  right: 388px;
}

#photo_matsudaira {
  position: absolute;
  top: 340px;
  right: 32px;
}

#message_01 {
  position: absolute;
  top: 450px;
  left: 65px;
}

#message_02 {
  position: absolute;
  top: 900px;
  right: 50px;
}

#message_03 {
  position: absolute;
  top: 1400px;
  left: 80px;
}

#message_04 {
  position: absolute;
  top: 1830px;
  right: 80px;
}

#message_05 {
  position: absolute;
  top: 3250px;
  right: 100px;
}

#message_last {
  position: absolute;
  top: 3450px;
  left: 50%;
  transform: translateX(-55%);
}

#photo_01 {
  position: absolute;
  top: 750px;
  left: 50px;
  z-index: -999;
}

#photo_02 {
  position: absolute;
  top: 1250px;
  right: 20px;
  z-index: -999;
}

#photo_03 {
  position: absolute;
  top: 1620px;
  left: 50px;
  z-index: -999;
}

#photo_04 {
  position: absolute;
  top: 2200px;
  right: 50px;
  z-index: -999;
}

#photo_05 {
  position: absolute;
  top: 2700px;
  left: 40px;
  z-index: -99;
}

#photo_06 {
  width: 454px;
  height: 550px;
  position: absolute;
  top: 3600px;
  left: 30px;
  z-index: -999;
}

#photo_07 {
  width: 436px;
  height: 570px;
  position: absolute;
  top: 4080px;
  right: 50px;
  z-index: -999;
}

#photo_last {
  position: absolute;
  top: 3700px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -999;
}


#footer_area {
  width: 100%;
  height: 980px;
  padding-top: 400px;
  position: absolute;
  top: 4185px;
  left: 0;
}

#bg_botom {
  width: 1000px;
  height: 496px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -999;
}

#footer_logo {
  width: 290px;
  height: 238px;
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -145px;
}

.to_contents {
  width: 369px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 999;
}

.to_contents a {
  display: block;
  width: 100%;
  height: 100%;
}
.to_contents img {
  width: 100%;
}

#kokuchi {
  margin-bottom: 30px;
}

#kokuchi p {
  font-size: 2em;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  color: #675435;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

/*-----------------------------------------------------
  Responsive
-----------------------------------------------------*/

.onlyPC { display: block;}
.onlySP { display: none;}


/*-----------------------------------------------------

  SP layout

------------------------------------------------------*/


@media screen and (max-width: 767px) {

.onlyPC { display: none;}
.onlySP { display: block;}


img { width: 100%; }


#wrapper {
  width: 100%;
  height: 3350px;
}

#bg_top_left {
  width: 200px;
  height: 208px;
}

#bg_top_right {
  width: 130px;
  height: 300px;
}

#title_area {
  width: 100%;
  height: 230px;
}

#title {
  width: 280px;
  height: auto;
  position: absolute;
  top: 90px;
  left: 50%;
  margin-left: -145px;
}

#rabbit {
  width: 75px;
  height: 81px;
  top: 10px;
  left: 40px;
}

#bg_top {
  height: auto;
  padding-right: 33px;
}

#bg_gold {
  width: 300px;
  height: auto;
  top: 170px;
  right: 0px;
}

#photo_matsudaira {
  width: 180px;
  top: 160px;
  right: 0px;
}

#photo_01 {
  width: 320px;
  height: auto;
  top: 350px;
  left: 50%;
  transform: translateX(-50%);
}

#photo_02 {
  width: 280px;
  height: auto;
  top: 800px;
  left: 50%;
  transform: translateX(-50%);
  right: inherit;
}

#photo_03 {
  width: 280px;
  height: auto;
  top: 1120px;
  left: 50%;
  transform: translateX(-50%);
}

#photo_04 {
  width: 280px;
  height: auto;
  top: 1590px;
  left: 50%;
  transform: translateX(-50%);
}

#photo_05 {
  width: 280px;
  height: auto;
  top: 2040px;
  left: 50%;
  transform: translateX(-50%);
}

#photo_06 {
  width: 180px;
  height: auto;
  top: 2300px;
  left: 0px;
}

#photo_07 {
  width: 190px;
  height: auto;
  top: 2170px;
  right: 25px;
}

#photo_last {
  width: 330px;
  height: auto;
  top: 2450px;
  left: 50%;
  transform: translateX(-50%);
}

#message_01 {
  width: 50%;
  top: 220px;
  left: 45px;
}

#message_02 {
  width: 230px;
  top: 670px;
  left: 50%;
  transform: translateX(-38%);
}

#message_03 {
  width: 233px;
  top: 1460px;
  left: 50%;
  transform: translateX(-56%);
}

#message_04 {
  width: 225px;
  top: 1830px;
  left: 50%;
  transform: translateX(-38%);
}

#message_05 {
  width: 190px;
  top: 2300px;
  left: 50%;
  transform: translateX(-58%);
}

#message_last {
  width: 250px;
  top: 2700px;
  left: 50%;
  transform: translateX(-50%);
}

#footer_area {
  width: 100%;
  height: 500px;
  top: 2860px;
  left: 0;
  padding-top: 230px;
}

#bg_botom {
  width: 100%;
  height: auto;
  left: 0;
}

#bg_botom img {
  width: 250px;
}

#footer_logo {
  width: 180px;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
}

.to_contents {
  width: 280px;
  margin: 0 auto 20px;
  position: relative;
  z-index: 999;
}

#kokuchi {
  margin-bottom: 20px;
}

#kokuchi p {
  font-size: 1rem;
  margin-bottom: 15px;
}

}