@charset "utf-8";

/* ==========================================================================
   Base
   ============================================================================= */

.jpnf {
   font-family: 'Noto Sans JP', sans-serif;
}
html {
   font-size: 62.5%;
}
body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, Roboto, "Droid Sans", sans-serif;
   font-size: 14px;
   font-size: 1.4rem;
   letter-spacing: 0.05em;
   line-height: 160%;
   color: #69534B;
   background: url(../img/bg2026.png);
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: 100%;
   overflow-x:hidden;
}
a {
   color:#4B8637;
}
a:hover {
   color:#4B8637;
}
a:visited {
   color: #4B8637;
}
a:active, a:focus {
   outline:0;
}
a:link, a:visited {
   text-decoration: none;
}
a:hover, a:active, a:focus {
   text-decoration: none;
}
p {
   margin: 0;
   padding: 0;
}
h3 {
   padding:0;
   font-weight: 600;
}
h3 a {
   color: #2A2121;
   line-height: 1.5;
}
h3, h4, h5 {
   margin: 1rem 0;
   font-weight: 500;
   font-size: 1.8rem;
   line-height: 1.4;
   font-weight:   600;
}
img {
   image-rendering: -webkit-optimize-contrast;
}
.spV {
   display:block;
}
.tabV {
   display: none;
}
.pcV {
   display: none;
}
.pctabV {
   display: none;
}
#footer {
   position: relative;
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 400;
   font-size: 1.0rem;
   line-height: 1.4;
   text-align: center;
   color: #69534B;
   letter-spacing: 0.1rem;
}
#footer .inner {
   margin:0 auto;
   padding:2vw 0;
   background: none;
}
#footer a img {
   height: 15px;
   width: auto;
   padding: 0 6px
}
#footer a:hover img {
   opacity: 0.8;
}
#footer ul.sns li a {
   color: #69534B;
}
#footer ul.sns li a:hover {
   background:#59A239;
   color: #fff;
}
#footer ul.sns {
   margin: 20px auto;
   text-align: center;
}
#footer ul.sns li {
   display: inline-block;
}
#footer ul.sns li a {
   background-color:#fff;
   padding:0;
   margin: 0 5px;
   width: 40px;
   height: 40px;
   line-height: 34px;
   text-align: center;
   border-radius: 50%;
   font-size: 14px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: none;
}
#top {
   position: relative;
   height: 170vw;
   width: 100%;
   overflow: hidden;
}
.toplogo {
   position: relative;
   text-align: center;
   width: 100%;
   height: 180vw;
   z-index: 19;
  transition-duration: .5s;
}
.toplogo img {
   width: 39%;
   max-width: 360px;
   height: auto;
   margin-top: 51vw;
   display: inline-block;
   animation: action1 .5s;
}
.topcatch {
   position: absolute;
   text-align: center;
   width: 100%;
   height: auto;
   z-index: 20;
  transition-duration: .5s;
}
.topcatch img {
   width: 23vw;
   height: auto;
   margin-top: 26vw;
   display: inline-block;
   animation: action1 .5s;
}
.topbg {
  animation: action1 .8s;
}
.c-btn {
   position: absolute;
   bottom: 0;
   left:   -5px;
   width: 60px;
   height: auto;
   z-index: 50;
   background: #fff;
   color: #69534B;
   writing-mode: vertical-rl;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 5px;
   border: 5px solid #E5817D;
}
.c-btn p {
   font-family: 'Noto Sans JP', sans-serif;
   font-weight: 600;
   font-size: 1.4rem;
   margin: 1rem 0;
}
a:hover .c-btn {
   transform: translateY(-10px);

}
.bg_base {
   position: absolute;
   width: 100%;
   height: 170vw;
   top:0;
   background:transparent url(../img/bg_sp2026.png) no-repeat right top;
   background-size:  cover;
   image-rendering: -webkit-optimize-contrast;
   z-index: 2;
}
.bg_a1 {
   position: absolute;
   top: 11vw;
   left: 32vw;
   width: 11vw;
   z-index: 3;
}
.bg_a2 {
   position: absolute;
   top: 11vw;
   right: 30vw;
   width: 12vw;
   z-index: 4;
}
.bg_a3 {
   position: absolute;
   top: 20vw;
   left: 12vw;
   width: 17vw;
   z-index: 5;
}
.bg_a4 {
   position: absolute;
   top: 121vw;
   right: 5vw;
   width: 16.5vw;
   z-index: 6;
}
.bg_a5 {
   position: absolute;
   top: 123vw;
   left: 25vw;
   width: 15vw;
   z-index: 7;
}
.bg_a6 {
   position: absolute;
   top: 120vw;
   right: 21vw;
   width: 19vw;
   z-index: 8;
   animation: floatStep 2s steps(4) infinite;
}
.bg_a1 img, .bg_a2 img, .bg_a3 img, .bg_a4 img, .bg_a5 img, .bg_a6 img {
   width: 100%;
   height: auto;
}
.btn_gallery {
   position: absolute;
   top: 150vw;
   width: 32vw;
   height: auto;
   right: 0;
   bottom: 0;
   z-index: 21;
  animation: action2 .5s;
}
.btn_gallery img {
   width: 100%;
}
a:hover .btn_gallery {
   transform: translateY(-10px);
}
.partner {
 color: #000
}
.partner div {
   width: 100%;
   padding: 0 0 10px;
   box-sizing: border-box;
}
.partner div ul {
   display: block;
   align-items: center;
   font-size: 1.2rem;
   color: #69534B;
}
.partner div ul li {
   color: #69534B;
   font-weight: 900;
}
.partner div ul li:nth-child(1) {
  width: 100%;
  color: #69534B;
  font-weight: 900;
}
.partner a {
   color: #69534B;
}

@media screen and (min-width: 520px) {
  .spV {
     display:none;
  }
  .tabV {
     display: block;
  }
  .pcV {
     display: none;
  }
  .pctabV {
     display: block;
  }
  .partner div ul {
     margin-right: 20px;
  }
  #top {
     height: 100vw;
     width: 100vw;
     max-height: 100vw;
     overflow: hidden;
  }
  .Topimg {
     height: 90%;
  }
  .toplogo img {
     max-width: 280px;
  }
  .topcatch img {
     width: 19vw;
     margin-top: 13.5vw;
  }
  .topbg {
     position: absolute;
     width: 100%;
     height: auto;
     top: 0;
     height:   100vw;
     overflow:   hidden;
  }
  .toplogo {
     height:100vw;
  }
  .toplogo img {
     width: 50%;
     max-width: 31vw;
     height: auto;
     margin-top: 31vw;
     animation: action1 .5s;
  }
  .bg_base {
     position: absolute;
     width: 100%;
     height:100vw;
     top:0;
     background:transparent url(../img/bg_tab2026.png) no-repeat center top;
     background-size:   100% auto;
     image-rendering: -webkit-optimize-contrast;
     z-index: 2;
  }
  .bg_a1 {
     top: 4vw;
     left: 33vw;
     width: 9vw;
  }
  .bg_a2 {
     position: absolute;
     right: 31vw;
     top: 3vw;
     width: 10vw;
     z-index: 4;
  }
  .bg_a3 {
     top: 14vw;
     left: 10vw;
     width: 13vw;
     z-index: 5;
  }
  .bg_a4 {
     position: absolute;
     top: 71vw;
     right: 19vw;
     width: 13.5vw;
     z-index: 5;
  }
   .bg_a5 {
     position: absolute;
     top: 83vw;
     left: 27vw;
     width: 12.5vw;
     z-index: 5;
  }
   .bg_a6 {
     position: absolute;
     top: 80vw;
     right: 26vw;
     width: 17vw;
     z-index: 5;
  }
  .btn_gallery {
     top: 84vw;
     width: 25vw;
     right: 2vw;
  }
  .partner div {
     margin: 0;
     width: auto;
  }
  .partner div ul {
     font-size: 1.0rem;
     margin-right: 5px;
  }
  .partner div ul li:nth-child(1) {
     width: auto;
     padding: 0 5px 0 0;
  }
  .partner div ul li {
     padding: 0 5px 0 0;
  }
  .partner div ul li a img {
     height: 15px;
     width: auto;
  }
}
@media screen and (min-width: 960px) {
  .spV {
     display:none;
  }
  .tabV {
     display: none;
  }
  .pcV {
     display: inline-block;
  }
  .pctabV {
     display: block;
  }
  #footer .inner {
     padding:  0;
  }
  #footer, .partner div ul {
     font-size: 1.4rem;
  }
  #footer ul.sns {
     margin: 10px auto;
     text-align: center;
  }
  .partner div ul {
     margin-right: 20px;
  }
  #top {
     overflow: hidden;
     max-height: 39vw;
  }
  .Topimg {
     height: 90%;
     transition-duration: .5s;
  }
  .topbg {
     height: 39vw
  }
  .toplogo {
     position: relative;
     text-align: center;
     width: 100%;
     height: 39vw;
     z-index: 20;
     transition-duration: .5s;
  }
  .toplogo img {
     width: 14.5vw;
     margin-top: 10.5vw;
  }
  .topcatch img {
     width: 8vw;
     margin-top: 3vw;
  }
  .bg_base {
     position: absolute;
     width: 100%;
     top:0;
     background:transparent url(../img/bg_pc2026.png) no-repeat center top;
     background-size:  100% auto;
  }
  .bg_a1 {
     top: 2vw;
     left: 40.4vw;
     width: 4vw;
  }
  .bg_a2 {
     top: 1vw;
     right: 40vw;
     width: 5vw;
  }
  .bg_a3 {
     top: 6vw;
     left: 12vw;
     width: 6.5vw;
     height: auto;
  }
  .bg_a4 {
     top: 19.5vw;
     right: 3vw;
     width: 8vw;
     z-index: 5;
  }
  .bg_a5 {
     top: 29.5vw;
     left: 35vw;
     width: 7vw;
     z-index: 5;
  }
  .bg_a6 {
     top: 27.5vw;
     right: 32.5vw;
     width: 10vw;
     z-index: 5;
  }
  .btn_gallery {
     top: 30vw;
     width: 14vw;
  }
  .c-btn p {
   font-size: 1.8rem;
}
}
@keyframes action1 {
  0% {
     opacity:  0;
  }
  100% {
     opacity:    1;
  }
}
@keyframes action2 {
  0% {
     transform: scale(1, 1);
  }
  80% {
     transform: scale(1.1, 1.1);
  }
  100% {
     transform: scale(1, 1);
  }
}
/*anim*/
.bg_a2 img,.bg_a4 img{
    position: absolute;
    will-change: opacity;
 }
.bg_a2 .static {
  animation: toggleStatic 4s infinite steps(1);
}
.bg_a2 .anim {
  animation: toggleAnim 4s infinite steps(1);
}
.bg_a4 .static {
  animation: toggleStatic 5s infinite steps(1);
}
.bg_a4 .anim {
  animation: toggleAnim 5s infinite steps(1);
}

@keyframes toggleStatic {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes toggleAnim {
  0%, 49%   { opacity: 0; }
  50%, 100% { opacity: 1; }
}