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

  TOPPAGE

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

#toppage {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#toppage h3 {
    text-align: center;
    line-height: 230%;
}

#toppage h3 b {
    font-size: 250%;
    font-weight: 300;
    display: block;
    color: #333333;
}

#toppage h3 small {
    font-size: 100%;
    font-weight: 400;
}

#toppage .b_more {
    width: 250px;
    height: 50px;
    margin: 35px auto 0;
    position: relative;
}

#toppage .b_more a {
    font-weight: 400;
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #479030;
    background: #FFFFFF;
    border:  none;
    position: relative;
    z-index: 1;
    transition: 0.3s ease-in-out;
    overflow: hidden;
    text-align: center;
    line-height: 100%;
    border-radius: 0px;
}

#toppage .b_more.green a {
    /*background: #edffc7;*/
	background:#F2EFE8;
	color:#333;
}

/* #toppage .b_more a::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 120%;
    height: 100%;
    background: #479030;
    transform-origin: right top;
    transform: skewX(-30deg) scale(0, 1);
    transition: transform .3s;
} */
#toppage .b_more a::after {
	content: none;
}
#toppage .b_more a:hover {
    color: #fff !important;
    background: #479030;
}

/* #toppage .b_more a:hover::before {
    transform-origin: left top;
    transform: skewX(-30deg) scale(1, 1);
}*/
#toppage .b_more a:hover::after {
    right: 5%;
    color: #FFF;
}


/*** MAINIMG *******************************************************************/
#toppage .mainimg {
    position: relative;
    z-index: 1;
    height: 100%;
    margin: 0 auto;
}

#toppage .mainimg img {
    display: block;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

#toppage .mainimg video {
    display: block;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    filter: drop-shadow(0px 0px #000);
}

#toppage .mainimg .plane {
    position: absolute;
    top: 17%;
    left: calc(50% + 80px);
    z-index: 3;
    margin: auto;
    max-width: 1200px;
}

#toppage .mainimg .plane .main_plane {
    max-width: 540px;
    width: 100%;
}

#toppage .mainimg .plane .main_plane img {
    width: 100%;
}

#toppage .mainimg .plane ul {
    position: absolute;
    width: 380px;
    top: 15px;
    left: 135px;
}

#toppage .mainimg .plane ul li {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
}

#toppage .mainimg .plane ul li::before {
    content: "\f0da";
    color: #479030;
    font-family: "Font Awesome 5 Free";
    font: var(--fa-font-solid);
    font-size: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

#toppage .mainimg .plane ul span {
    margin: 0 15px;
}

#toppage .mainimg .plane ul a {
    color: #479030;
}

#toppage .mainimg .plane ul a:visited {
    color: #90C221;
}

#toppage .mainimg .plane {
    animation: 3s fuwafuwa infinite;
}

@keyframes fuwafuwa {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

#toppage .fv_area {
	background: #FFFFFF url(../movie/main-bg.gif);
    background-position: bottom center;
    background-repeat: repeat-x;
    background-size: auto;
}


/*
@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) {
    #toppage .fv_area {
        background: #FFFFFF url(../movie/main-bg-win.gif);
        background-position: bottom center;
        background-repeat: repeat-x;
        background-size: auto;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  _::-webkit-full-page-media, _:future, #toppage .fv_area {
        background: #FFFFFF url(../movie/main-bg-mac.gif);
        background-position: bottom center;
        background-repeat: repeat-x;
        background-size: auto;
    }
}

.win #toppage .fv_area {
        background: #FFFFFF url(../movie/main-bg-win.gif);
        background-position: bottom center;
        background-repeat: repeat-x;
        background-size: auto;
}

.mac #toppage .fv_area {
        background: #FFFFFF url(../movie/main-bg-mac.gif);
        background-position: bottom center;
        background-repeat: repeat-x;
        background-size: auto;
}

.mac.chrome #toppage .fv_area {
        background: #FFFFFF url(../movie/main-bg-win.gif);
        background-position: bottom center;
        background-repeat: repeat-x;
        background-size: auto;
}
 */

/*** CATCH *******************************************************************/
#toppage .catch {
    position: relative;
    width: 100%;
    height: auto;
}

#toppage .catch .text {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    z-index: 3;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
	pointer-events:none;
}

@media screen and (min-width: 1200px) {
    #toppage .catch .text {
        position: absolute;
        top: 100px;
    }
}

#toppage .catch h2 {
    font-family: "Hiragino Sans GB", sans-serif;
    font-weight: 500;
    font-size: 350%;
    letter-spacing: 0.15em;
    line-height: 120%;
    color: #70B84E;
    text-shadow: -2px -2px 0 #FFF, 2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px 2px 0 #FFF;
}

#toppage .catch .mid {
    font-size: 143%;
    font-weight: 400;
    letter-spacing: 0.41em;
    margin: 20px 0 15px;
    padding: 0 5px;
    color: #AC865A;

}

#toppage .catch .come-c {
    font-size: 100%;
    font-weight: 400;
    line-height: 190%;
    padding: 0 5px;
    display: inline-block;
    background: rgb(255 255 255 / 50%);
    border-radius: 10%;
    padding: 10px;
    margin-left: -3px
}


/*** ABOUT *******************************************************************/
#toppage .about {
    position: relative;
    padding: 100px 0 180px;
    background: #F8EEE0;
    top: -2px;
    z-index: 1;
}

#toppage .about .mid {
    font-size: 112.5%;
    font-weight: 700;
    margin: 30px 0 25px;
}

#toppage .about .about_list {
    max-width: 1130px;
    width: 100%;
    margin: 0 auto;
}

#toppage .about .about_list::after {
    display: block;
    clear: both;
    content: "";
}

#toppage .about .about_list .box {
    float: left;
    width: 340px;
}

#toppage .about .about_list .box:nth-child(3n+2) {
    margin: 0 55px;
}

#toppage .about .about_list .box::after {
    display: block;
    clear: both;
    content: "";
}

#toppage .about .about_list .box .photo {}

#toppage .about .about_list .box .photo img {
    width: 100%;
}

#toppage .about .about_list .box .mid {
    margin: 30px 0 20px;
    text-align: center;
}

#toppage .about .about_list .box .mid b {
    color: #333333;
    font-size: 137.5%;
    font-weight: 400;
}

#toppage .about .about_list .box .mid small {
    /* display: block;
    font-size: 62.5%;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: #479030; */
    display: none;
}

#toppage .about .about_list .box .come {
    font-weight: 400;
    letter-spacing: 0.1em;
    text-align: justify;
}


/*** NEW RELEASE *******************************************************************/
#toppage .news {
    padding: 80px 0;
    max-width: 1130px;
    width: 100%;
    margin: auto;
    position: relative;
    clear: both;
    overflow: hidden;
}

#toppage .news h3 {
    margin-bottom: 65px;
}

#toppage .news .news_list {
    clear: both;
    overflow: hidden;
}

#toppage .news .news_list ul {
    float: left;
    width: 48%;
    clear: right;
    background-image: linear-gradient(to right, #479030 10%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 8px 2px;
    background-repeat: repeat-x;
    padding: 20px 0;
    position: relative;
}

#toppage .news .news_list ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, #479030 10%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 8px 2px;
    background-repeat: repeat-x;
}

#toppage .news .news_list ul:nth-child(odd) {
    margin-right: 4%;
}

#toppage .news .news_list ul li.photo {
    width: 140px;
    height: 140px;
    float: left;
    margin-right: 30px;
}

#toppage .news .news_list ul li.photo img {
    width: 100%;
    height: 100vh;
    max-height: 140px;
    object-position: center;
    object-fit: cover;
    border-radius: 10px;
}

#toppage .news .news_list ul li.cate {
    width: 100%;
}

#toppage .news .news_list ul li.cate span {
    font-size: 85.7%;
    position: relative;
    margin-bottom: 0.5rem;
    background-image: linear-gradient(90deg, white 0%, black 0 100%, white 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.05rem;
    background-position: bottom;
    padding-bottom: 0.5em;
}

#toppage .news .news_list ul li.tit {
    margin: 6px 0;
}

#toppage .news .news_list ul li.tit a {
    font-size: 112.5%;
    font-weight: 700;
    display: block;
    color: #333333;
}

#toppage .news .news_list ul li.come {
    font-weight: 300;
    font-size: 93.8%;
    display: -webkit-box !important;
    text-align: justify;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 170%;
    margin-bottom: 13px;
}

#toppage .news .news_list ul li.day {
    font-weight: 400;
    font-family: "Noto Sans JP";
}

#toppage .news .b_more {
    float: right;
}

#toppage .news .news_list ul li.tit a:hover {
    color: #90cc47;
}


/*** INSTAGRAM *******************************************************************/
#toppage .insta {
    padding: 282px 0 80px;
    position: relative;
    width: 100%;
    overflow: hidden;
    display: block;
    margin: auto;
}

#toppage .insta::before {
    content: "";
    position: absolute;
    top: 180px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100vh;
    height: 100vh;
    background: #F2EFE8;
    border-radius: 50%;
    transform-origin: top;
    transform: scale(6);
}

#toppage .insta h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 45px;
}

#toppage .insta h3 b {
    color: #333333;
    letter-spacing: 0.3rem;
}

#toppage .insta h3::before {
    content: "";
    position: absolute;
    background: url(../image/sns_insta.png) no-repeat center;
    background-size: 100%;
    width: 31px;
    height: 31px;
    top: -40px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}

#toppage .insta h3::after {
    content: "";
    position: absolute;
    background: url(../../image/top/insta_h3-bg.svg) no-repeat center;
    background-size: 100%;
    width: 328px;
    height: 248px;
    top: -282px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}

#toppage #sb_instagram.sbi_col_5 #sbi_images .sbi_item {
    border-radius: 10px;
}

@charset "UTF-8";
.my-insta-box {
  width: 100%;
  overflow: hidden;
}
.my-insta-box .bx-viewport {
  overflow: visible !important;
}
.my-insta-box #sb_instagram {
  max-width: 100% !important;
  width: 100% !important;
}
.my-insta-box .sbi_item {
  width: 213px !important;
  max-width: 55.3333333333vw !important;
}
@media (min-width: 1400px) {
  .my-insta-box .sbi_item {
    width: 15.2142857143vw !important;
  }
}
.my-insta-box .sbi_photo {
  height: 211px !important;
  max-height: 76vw !important;
}
@media (min-width: 1400px) {
  .my-insta-box .sbi_photo {
    height: 15.214vw !important;
  }
}

/*
@mediaの数値やその中のサイズ設定は基本サイズやホームページの基本サイズに合わせてお好みで調整してください。
*/

/*** BANNER *******************************************************************/
#toppage .banner {
    padding: 70px 0;
    max-width: 500px;
    width: 100%;
    margin: auto;
}

#toppage .banner h3 {
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 18px;
}

#toppage .banner h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 500px;
    height: 2px;
    background-image: linear-gradient(to right, #479030 10%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 8px 2px;
    background-repeat: repeat-x;
}

#toppage .banner ul {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

#toppage .banner ul li {
    width: 110px;
}

#toppage .banner ul li a {
    text-decoration: none;
    display: block;
    color: #333333;
    text-align: center;
}

#toppage .banner ul li b {
    font-size: 75%;
    font-weight: 300;
}




/*** ACCESS *******************************************************************/
#toppage .access {}

#toppage .access iframe {
    width: 100%;
    margin-bottom: -8px;
}

@media only screen and (min-width:701px) and (max-width:1149px) {
    #toppage .mainimg img.sub2 {
        left: 358px;
    }

    #toppage .mainimg img.sub3 {
        left: 175px;
    }

    #toppage .mainimg img.sub4 {
        left: 439px;
    }

    #toppage .mainimg img.sub5 {
        left: 545px;
    }

    #toppage .mainimg img.sub6 {
        left: 547px;
    }

    #toppage .mainimg img.sub7 {
        left: 677px;
    }

    #toppage .mainimg img.sub8 {
        left: 869px;
    }

    #toppage .mainimg img.sub9 {
        left: 233px;
    }

    #toppage .mainimg img.sub10 {
        left: 231px;
    }

    #toppage .mainimg img.sub11 {
        left: 591px;
    }

    #toppage .mainimg img.sub12 {
        left: 590px;
    }

    #toppage .mainimg img.sub13 {
        left: 660px;
    }

    #toppage .mainimg img.sub14 {
        left: 123.5px;
    }

    #toppage .mainimg img.sub15 {
        left: 235px;
    }

    #toppage .mainimg img.sub16 {
        left: 563px;
    }

    #toppage .mainimg img.sub17 {
        left: 673px;
    }

    #toppage .mainimg img.sub18 {
        left: 572px;
    }

    #toppage .mainimg img.sub19 {
        left: 229.5px;
    }

    #toppage .mainimg img.sub20 {
        left: 412.5px;
    }

    #toppage .mainimg img.sub21 {
        left: 337px;
    }

    #toppage .mainimg img.sub22 {
        left: 939px;
    }

    #toppage .mainimg img.sub23 {
        left: 305px;
    }

    #toppage .mainimg img.sub24 {
        left: 166px;
    }

    #toppage .mainimg img.sub25 {
        left: 721px;
    }

    #toppage .mainimg img.sub26 {
        left: 716px;
    }
}

/* アニメーション */
#toppage .mainimg img[class^="sub"] {
    /*animetion-name:;*/
    /*animation-duration:;*/
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#toppage .mainimg img.sub2 {
    animation-name: sub2;
    animation-duration: 10.0s;
}

#toppage .mainimg img.sub3 {
    animation-name: sub3;
    animation-duration: 3.0s;
}

#toppage .mainimg img.sub4 {
    animation-name: sub3;
    animation-duration: 3.0s;
    animation-delay: 1.0s
}

#toppage .mainimg img.sub5 {
    animation-name: sub5;
    animation-duration: a;
}

#toppage .mainimg img.sub6 {
    animation-name: sub6;
    animation-duration: 5.0s;
}

#toppage .mainimg img.sub7 {}

#toppage .mainimg img.sub8 {
    animation-name: sub8;
    animation-duration: 2.0s;
}

#toppage .mainimg img.sub9 {}

#toppage .mainimg img.sub10 {
    animation-name: sub10;
    animation-duration: 10.0s;
}

#toppage .mainimg img.sub11 {}

#toppage .mainimg img.sub12 {
    animation-name: sub10;
    animation-duration: 9.0s;
    animation-delay: 2.3s;
}

#toppage .mainimg img.sub13 {}

#toppage .mainimg img.sub14 {
    animation-name: sub14;
    animation-duration: 15.0s;
}

#toppage .mainimg img.sub15 {
    animation-name: sub15;
    animation-duration: 5.0s;
}

#toppage .mainimg img.sub16 {
    animation-name: sub16;
    animation-duration: 9.0s;
}

#toppage .mainimg img.sub17 {
    animation-name: sub17;
    animation-duration: 9.0s;
}

#toppage .mainimg img.sub25 {
    animation-name: sub25;
    animation-duration: 3.0s;
    transform-origin: 55% center 0;
}

@keyframes sub1 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, -5px);
    }
}

@keyframes sub2 {

    0%,
    100% {
        transform: translateY(20%);
    }

    10%,
    90% {
        transform: translateY(19%);
    }

    50% {
        transform: translateY(-100%);
    }

    40%,
    60% {
        transform: translateY(-99%);
    }
}

@keyframes sub3 {

    0%,
    50%,
    100% {
        transform: translate(0, 0);
    }

    6.25% {
        transform: translate(-1%, -5%);
    }

    12.5% {
        transform: translate(0, -10%);
    }

    18.75% {
        transform: translate(5%, -11%);
    }

    25% {
        transform: translate(10%, -10%);
    }

    31.25% {
        transform: translate(11%, -5%);
    }

    37.5% {
        transform: translate(10%, 0);
    }

    43.75% {
        transform: translate(5%, 1%);
    }

    56.25% {
        transform: translate(-5%, -1%);
    }

    62.5% {
        transform: translate(-10%, 0);
    }

    68.75% {
        transform: translate(-11%, 5%);
    }

    75% {
        transform: translate(-10%, 10%);
    }

    81.25% {
        transform: translate(-5%, 11%);
    }

    87.5% {
        transform: translate(0, 10%);
    }

    93.75% {
        transform: translate(1%, 5%);
    }
}

@keyframes sub6 {

    0%,
    100% {
        opacity: 0;
        transform: translateX(2.5%);
    }

    40% {
        opacity: 1.0;
        transorm: translateX(0%);
    }

    80% {
        opacity: 0;
        transform: translateX(-2.5%);
    }
}

@keyframes sub8 {

    0%,
    30%,
    100% {
        transform: translate(0, 0);
    }

    5%,
    15%,
    25% {
        transform: translate(-5%, -1%);
    }

    10%,
    20% {
        transform: translate(5%, 1%);
    }
}

@keyframes sub10 {

    0%,
    100% {
        opacity: 0;
        transform: translateX(2.5%);
    }

    40% {
        opacity: 1.0;
        transorm: translateX(0%);
    }

    80% {
        opacity: 0;
        transform: translateX(-2.5%);
    }
}

@keyframes sub14 {

    0%,
    100% {
        transform: translateX(10%);
    }

    10%,
    90% {
        transform: translateX(9%);
    }

    50% {
        transform: translateX(-10%);
    }

    40%,
    60% {
        transform: translateX(-9%);
    }
}

@keyframes sub15 {

    0%,
    100% {
        transform: translateX(3%);
    }

    10%,
    90% {
        transform: translateX(2%);
    }

    50% {
        transform: translateX(-3%);
    }

    40%,
    60% {
        transform: translateX(-2%);
    }
}

@keyframes sub16 {

    0%,
    100% {
        transform: translateX(-3%);
    }

    10%,
    90% {
        transform: translateX(-2%);
    }

    50% {
        transform: translateX(3%);
    }

    40%,
    60% {
        transform: translateX(2%);
    }
}

@keyframes sub17 {

    0%,
    100% {
        transform: translateX(10%);
    }

    10%,
    90% {
        transform: translateX(9%);
    }

    50% {
        transform: translateX(-10%);
    }

    40%,
    60% {
        transform: translateX(-9%);
    }
}

@keyframes sub25 {

    0%,
    20%,
    40%,
    100% {
        transform: rotate(0deg);
    }

    10%,
    30% {
        transform: rotate(20deg);
    }
}

/* ローディング画面 ここから */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #fff;
    text-align: center;
}

#loading_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#loading .kvArea {
    width: 100%;
}

#loading .kvArea .img_box {
    text-align: center;
}

#loading .kvArea .img_box img {
    max-width: 100%;
    height: auto;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1.2s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    opacity: 1;
}

@keyframes fadeUpAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-100px);
    }
}

/* ローディング画面　ここまで */