@charset "UTF-8";
                               
                                body {
                                    min-width: 100vw;
                                    color: #333;
                                    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
                                    font-size: 100%;
                                    position: static;
                                    font-family: MyFont;
                                    letter-spacing: 0.15em;
                                    overflow-x: hidden;
                                }
                                
                                img {
                                    border: none;
                                    vertical-align: bottom;
                                    max-width: 100%;
                                    display: block;
                                }
                                
                                .move_bg {
                                    position: relative;
                                }
                                
                                .move_con {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                }
                                
                                .cv_btn {
                                    animation-name: cv_btn;
                                    animation-delay: 0s;
                                    animation-duration: 1.5s;
                                    animation-timing-function: ease-in-out;
                                    animation-iteration-count: infinite;
                                }
                                
                                @keyframes cv_btn {
                                    0% {
                                        transform: translateY(0);
                                    }
                                    50% {
                                        transform: translateY(-5px);
                                    }
                                    100% {
                                        transform: translateY(0);
                                    }
                                }
                                
                                .main,
                                .footer {
                                    width: 640px;
                                    margin: 0 auto;
                                    text-align: center;
                                }
                                /* スクロールアニメ共通 */
                                /* スクロールアニメ共通 */
                                /* silica_3 */
                                
                                .move_bubble {
                                    transform: scale(0);
                                    transform-origin: bottom;
                                }
                                
                                .move_bubble.isShow {
                                    animation-name: an_bubble;
                                    animation-duration: 0.3s;
                                    transform: scale(1);
                                }
                                
                                @keyframes an_bubble {
                                    0% {
                                        transform: scale(0);
                                    }
                                    100% {
                                        transform: scale(1);
                                    }
                                }
                                
                                .model {
                                    top: 30%;
                                    width: 27.3%;
                                    right: 0;
                                    margin: auto;
                                    /* box-sizing: border-box; */
                                    padding-right: 6px;
                                }
                                
                                .bubble_01 {
                                    top: 34%;
                                    width: 45%;
                                    left: 2%;
                                }
                                
                                .bubble_02 {
                                    width: 43%;
                                    top: 45.5%;
                                    left: 56%;
                                }
                                
                                .bubble_03 {
                                    width: 39%;
                                    top: 52.5%;
                                    left: 2%;
                                }
                                
                                .bubble_04 {
                                    width: 38%;
                                    top: 62.2%;
                                    left: 61%;
                                }
                                
                                .bubble_05 {
                                    width: 43%;
                                    top: 71.5%;
                                    left: 2.5%;
                                }
                                /* silica_3 */
                                /* cv */
                                
                                .cv {
                                    top: 74.5%;
                                    left: 0;
                                    right: 0;
                                    width: 87%;
                                    margin: auto;
                                    animation-name: cv_btn;
                                    animation-delay: 0s;
                                    animation-duration: 1.5s;
                                    animation-timing-function: ease-in-out;
                                    animation-iteration-count: infinite;
                                    transform: scale(0.85);
									    cursor: pointer;
                                }
                                
                                @keyframes cv_btn {
                                    0% {
                                        transform: scale(0.85);
                                    }
                                    50% {
                                        transform: scale(1.0);
                                    }
                                    100% {
                                        transform: scale(0.85);
                                    }
                                }
                                /* cv */
                                /* silica_22 */
                                
                                .base_silica_22 {
                                    overflow: hidden;
                                }
                                /* silica_22 */
                                /* キャッチコピー */
                                
                                .copy1 {
                                    width: 33%;
                                    top: 19%;
                                    left: 60%;
                                }
                                
                                .copy2 {
                                    width: 34%;
                                    top: 33%;
                                    left: 60%;
                                }
                                
                                .copy3 {
                                    width: 27%;
                                    top: 19%;
                                    left: 67%;
                                }
                                
                                .copy4 {
                                    width: 45%;
                                    top: 26%;
                                    left: 53%;
                                }
                                
                                .slide_p {
                                    width: 84%;
                                    top: 36.7%;
                                    left: 2%;
                                    z-index: 2;
                                }
                                
                                .slide_back {
                                    width: 88%;
                                    top: 36%;
                                    left: 0%;
                                }
                                
                                .movie_back {
                                    width: 94%;
                                    height: 360px;
                                    top: 32%;
                                    left: 0;
                                    right: 0;
                                    margin: auto;
                                    position: absolute;
                                }
                                
                                .video {
                                    width: 100%;
                                }
                                /* キャッチコピー */
                                /* メダル */
                                
                                .medal_all {
                                    width: 95%;
                                    display: flex;
                                    justify-content: space-between;
                                    top: 77%;
                                    left: 0;
                                    right: 0;
                                    margin: auto;
                                }
                                
                                .medal_box:nth-of-type(2) {
                                    margin: 0 1%;
                                }
                                
                                .medal_01,
                                .medal_02,
                                .medal_03 {
                                    margin-top: -20%;
                                }
                                
                                .medal_bubble_01,
                                .medal_bubble_02,
                                .medal_bubble_03 {
                                    width: 90%;
                                    left: 0;
                                    right: 0;
                                    margin: auto;
                                    position: relative;
                                    z-index: 2;
                                }
                                
                                .reflection {
                                    display: inline-block;
                                    position: relative;
                                    overflow: hidden;
                                }
                                
                                .reflection:after {
                                    content: "";
                                    height: 100%;
                                    width: 30px;
                                    position: absolute;
                                    top: -180px;
                                    left: 0;
                                    background-color: #fff;
                                    opacity: 0;
                                    box-sizing: border-box;
                                    padding-bottom: 1%;
                                    -webkit-transform: rotate(45deg);
                                    -webkit-animation: reflection 2s ease-in-out infinite;
                                }
                                
                                @keyframes reflection {
                                    0% {
                                        -webkit-transform: scale(0) rotate(45deg);
                                        opacity: 0;
                                    }
                                    80% {
                                        -webkit-transform: scale(0) rotate(45deg);
                                        opacity: 0.5;
                                    }
                                    81% {
                                        -webkit-transform: scale(4) rotate(45deg);
                                        opacity: 1;
                                    }
                                    100% {
                                        -webkit-transform: scale(50) rotate(45deg);
                                        opacity: 0;
                                    }
                                }
                                
                                @-webkit-keyframes shine {
                                    0% {
                                        left: -75%;
                                    }
                                    65% {
                                        left: -75%;
                                    }
                                    100% {
                                        left: 125%;
                                    }
                                }
                                
                                @keyframes shine {
                                    0% {
                                        left: -75%;
                                    }
                                    65% {
                                        left: -75%;
                                    }
                                    100% {
                                        left: 125%;
                                    }
                                }
                                /* メダル */
                                
                                @media screen and (max-width:640px) {
                                    .main {
                                        width: 100%;
                                        margin: 0 auto;
                                        text-align: center;
                                    }
                                    .movie_back {
                                        width: 94%;
                                        background: #000;
                                        height: auto;
                                        top: 34%;
                                        left: 0;
                                        right: 0;
                                        margin: auto;
                                        position: absolute;
                                    }
                                }
                                
                                @-webkit-keyframes shine {
                                    0% {
                                        left: -75%;
                                    }
                                    65% {
                                        left: -75%;
                                    }
                                    100% {
                                        left: 125%;
                                    }
                                }
                                
                                @keyframes shine {
                                    0% {
                                        left: -75%;
                                    }
                                    65% {
                                        left: -75%;
                                    }
                                    100% {
                                        left: 125%;
                                    }
                                }
                                
                                .supervision {
                                    top: 20%;
                                    left: auto;
                                    right: 0%;
                                    width: 33%;
                                }

                                @media screen and (max-width:640px) {
.copy {
    display: block;
    font-size: 10px;
    padding: 15px;
}
}

/* 下から */

.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
}
    
@keyframes fadeUpAnime{
    from {
    opacity: 0;
    transform: translateY(100px);
    }

    to {
    opacity: 1;
    transform: translateY(0);
    }
}


.move_appear{
	top:auto;
	bottom:-8%;
	 animation-name:appear_anime;
    animation-duration:0.2s;
}
@keyframes appear_anime{
    0% {
	bottom:-30%;
    }
    100% {
	bottom:-10%;
    }
}


.img04{
	position:relative;
	z-index:2;
}


.rabi1 {
    width: 18%;
    top: 37.5%;
    left: 5%;
    animation-name: rabi1;
    animation-delay: 0s;
    animation-duration: 4.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes rabi1 {
    0% {
        transform: rotate(0deg);
    }
    90% {
        transform: rotate(5deg);
    }
    95% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}
.rabi2 {
	width: 18%;
    top: 77%;
    left: 5%;
    animation-name: rabi2;
    animation-delay: 0.3s;
    animation-duration: 4.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes rabi2 {
    0% {
        transform: rotate(0deg);
    }
    90% {
        transform: rotate(5deg);
    }
    95% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}

.cv_usa1{
	    width: 89%;
    top: 78.5%;
    left: 3%;
    right: 0;
    margin: auto;
}
.cv_usa2{
	    width: 89%;
    top: 79%;
    left: 3%;
    right: 0;
    margin: auto;
}
.cv_usa3 {
    width: 79%;
    top: 75.5%;
    left: 0;
    right: 0;
    margin: auto;
}
.usa_youtube {
    width: 94%;
    top: 43%;
    left: 0;
    right: 0;
    margin: auto;
}