@charset "UTF-8";
body {animation: fadeIn 1.75s ease 0s 1 normal;-webkit-animation: fadeIn 1.75s ease 0s 1 normal;}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

/* header
------------------------------------------- */
.header {position: absolute;width: 100%;z-index: 150;transition: .3s;padding:1.5em;top:0;}
.header .head-logo {width:35%;display: block;transition: .3s;margin:0 0;}
.head-logo{animation-duration: 1.5s;animation-name: anime_logo;}

@keyframes anime_logo {
0% {opacity: 0;transform: translateY(0px);}
100% {opacity: 1;transform: translateY(0);}
}
@-webkit-keyframes anime_logo {
0% {
-webkit-transform: translateY(0px) scaleY(1);
-webkit-transform-origin: 0 0;
}
100% {
-webkit-transform: translateY(0) scaleY(1);
-webkit-transform-origin: 0 0;
}
}
.tgr-entry{position: fixed;width: 100%;background-color:rgba(0,0,0,0.6);bottom:0;z-index: 150;padding:1em;overflow:hidden;}
.tgr-entry a{color:#444;padding:1.25em 0;text-align:center;transition: .3s;font-size:4.75vw;font-weight:bold;display:block;border-radius:30px;background:#FFCAD4;}
@media screen and (max-width: 320px) {
.tgr-entry a{padding:.85em 0;}
}
@media screen and (max-width: 375px) {
.tgr-entry a{padding:1em 0;}
}
.tgr-entry a:after{content: "\f105";font-family: FontAwesome;color:#444;font-size:5vw;padding-left:1em;}



/* LP-contents
------------------------------------------- */
body.lp{background:#f6f6f6;overflow: hidden;}
.container-{background:#fff;color:#444;}
body.lp #mainVisual{position:relative;margin:0;}
body.lp #mainVisual img{margin:0;padding:0;}
body.lp #mainVisual h1{position:absolute;top:45%;left:0em;padding:0 5%;width:100%;}
body.lp #mainVisual h1 img{width:100%;}
body.lp #mainVisual p.main{position:absolute;top:8%;right:5%;padding:0;width:20%;}
body.lp #mainVisual p img{width:100%;}
body.lp #mainVisual p.main2{position:absolute;top:55%;right:2%;padding:0;width:32%;}

.campaign-box{position:relative;}
.campaign-box h2 {position:absolute;top:5%;left:12%;width:50%;}
.campaign-box h2 img{width:100%;}
.campaign-box .imgbox{position:absolute;top:22%;left:0%;width:100%;padding:0 15%;}
.campaign-box .imgbox img{margin-bottom:0%;}
.campaign-box .imgbox img:last-child{margin-top:-10%;} 

.point-box{position:relative;}
.point-box  h2 {position:absolute;top:-7%;left:0%;width:100%;}
.point-box  h2 img{width:100%;}
.point-box  h3 {position:absolute;top:0.5%;left:0%;width:100%;}
.point-box  h3 img{width:100%;}
.point-box .imgbox{position:absolute;top:14%;left:0%;width:100%;padding:0 0;}
.point-box .imgbox img{margin-bottom:0%;}

.movie_box{margin: 2.5em 0 5em 0;}
.movie_box h2 {
/* text-align: center; */
font-weight: bold;
font-size: 3em;
width: 80%;
margin: auto;}
/*.movie_box h2{text-align: center;font-weight: bold;font-size: 3em;}*/
iframe{margin: 2em auto 4em;display: block;max-width: 90%;/* width: 600px; */}


.point2-box{position:relative;}
.point2-box h2 {position:absolute;top:0%;left:-4%;width:100%;}
.point2-box h2 img{width:100%;}
.point2-box .imgbox{position:absolute;top:47%;width:100%;padding:0 3%}
.point2-box .imgbox ul{display:flex; flex-wrap:wrap;justify-content:space-between;width:100%}
.point2-box .imgbox li{width:49%;margin-bottom:3%;}
.point2-box .imgbox li img{width:100%;}

.recommend-box{position:relative;}
.recommend-box  h2 {position:absolute;top:1%;left:0%;width:100%;text-align:center;}
.recommend-box  h2 img{width:90%;}
.recommend-box .imgbox{position:absolute;top:35%;left:7%;width:85%; }
.recommend-box .imgbox img{margin-bottom:10%;}
.recommend-box  h3 {position:absolute;top:72%;left:0%;width:100%;text-align:center;}
.recommend-box  h3 img{width:40%;}

.beginner-box{position:relative;}
.beginner-box h2 {position:absolute;top:-12%;left:0%;width:100%;}
.beginner-box h2 img{width:100%;}
.beginner-box .imgbox{position:absolute;top:37%;left:0%;width:100%;padding:0 0;}
.beginner-box .imgbox img{margin-bottom:0%;}
.beginner-box .imgbox2 {position:absolute;top:81%;width:100%;padding:0 10%}
.beginner-box .imgbox2 ul{display:flex; flex-wrap:wrap;justify-content:space-between;width:100%;padding:0 4%}
.beginner-box .imgbox2 li{width:49%;margin-bottom:3%;}
.beginner-box .imgbox2 li img{width:100%;}

.effect-box{position:relative;}
.effect-box  h2 {position:absolute;top:4%;left:0%;width:100%;padding:0 23%;}
.effect-box  h2 img{width:100%;}
.effect-box  h3 {position:absolute;top:9%;left:0%;width:102%;padding:0 23%}
.effect-box  h3 img{width:100%;}
.effect-box  h4 {position:absolute;top:13%;left:0%;width:100%;padding:0 10%}
.effect-box  h4 img{width:100%;}
.effect-box .imgbox{position:absolute;top:17%;left:0%;width:107%;padding:0 0;}
.effect-box .imgbox img{margin-bottom:11%;}

.voice-box{position:relative;}
.voice-box  h2 {position:absolute;top:1%;left:28%;width:60%;padding:0 0}
.voice-box  h2 img{width:70%;}
.voice-box .imgbox{position:absolute;top:22%;left:0%;width:100%;padding:0 10%;}
.voice-box .imgbox img{margin-bottom:8%;}


.antivirus_box h2 img {margin: 3em 0 0 0;}
.antivirus_box img{margin: 3em 0 3em 0;}


.trial-box{position:relative;}
.trial-box .imgbox{position:absolute;top:7%;left:-6;width:100%;padding:0 0%;}
.trial-box .imgbox img{margin-bottom:2%;}
.trial-box .imgbox ul{padding:2em 2em 2em}
.trial-box .imgbox li{margin-bottom:10.5em;top:1%;position:relative;}
.trial-box .imgbox li img{margin-bottom:1em;width:100%;top:1%;position:relative;padding-left:1em;}
.trial-box .imgbox li p.t-num{font-size:8vw;font-family: 'Oswald', sans-serif;font-weight:300;line-height:1.0;position:absolute;top:-.6em;left:-.4em;color:#fff;border:3px solid #fff;padding:.3em .3em;border-radius:2px;background-color:#bfefdb;}
.trial-box .imgbox li:after{position: absolute;content: "\f107";font-family: FontAwesome;left: 50%;bottom: -1.25em;transform: translate(-50%,-0%);color:#bfefdb;font-size:8.5vw;}
.trial-box h2 img{    position: absolute;top: 98%;left: 6%;width: 100%;padding: 0 0;}
.trial-box h2 img{width:100%;}


.price-box{position:relative;margin-top: 42rem;}
.price-box  h2 img{position:absolute;top:10%;left:20%;width:60%;padding:0 0}
.price-box  h3 img{position:absolute;top:16%;left:20%;width:60%;padding:0 0}
.price-box .imgbox{position:absolute;top: 22%;left: 12%;width: 77%;}
.price-box .imgbox img{margin-bottom:5%;}
.price-box  h4 img{position:absolute;top:96%;left:12%;width:80%;padding:0 0}


.access-box{position:relative;}
.access-box h2{position:absolute;top:8%;left:0em;padding:0 5%;width:100%;}
.access-box h2 img{width:100%;}
.access-box h3{position:absolute;top:9%;right:1%;padding:0;width:95%;}
.access-box h3 img{width:100%;}
.access-box h4{position:absolute;top:8.5%;right:4.5%;padding:0;width:95%;}
.access-box h4 img{width:100%;}
.access-box h5{position:absolute;top:21%;right:0;padding:0 15%;width:100%;}
.access-box h5 img{width:100%;}
.access-box .imgbox{position:absolute;top:26%;left:0%;width 100%;padding:0 5%;}
.access-box .imgbox img{margin-bottom:3%;}


.qa-box{position:relative;margin-top: 377%;}


	
@media screen and (min-width: 768px) {
.header {padding:2.5em;}
.tgr-entry a{padding:.85em 0;border-radius:60px;}
	
/*body.lp #mainVisual h1{top:15%;left:2.5em;}	
body.lp #mainVisual h1 img{width:48%;}	*/
	
.all-wrap{width:640px;margin:0 auto;display:block;overflow:hidden;position:relative;}
.all-wrap .header,.tgr-entry{width:640px;}


.trial-desc{font-size:3vw;padding:4em 3.5em 3em;}
.trial-box ul{padding:1em 4em 2em}	
.trial-box li{margin-bottom:10em;}
.trial-box li span{display:block!important;}	
.trial-box li img{margin:0 auto 2em!important;}
.trial-box li p{font-size:3vw;}
.trial-item-box{padding:0em 3.5em 3em}


.access-box{padding:0 0;}	
.access-box .accshow .sc{margin-bottom:2em;}
.access-box .accshow .sc a{font-size:3vw;font-weight:bold;}
.accshow .sc a span{color:#fff;font-size:2vw;}	
.access-box .accshow p {font-size:2.5vw;margin-bottom:2em;}
.access-box .accshow p.tel{font-size:5.5vw;margin-bottom:.2em!important;}
.access-box .accshow iframe{width:100%;height:280px;}
.trial-box h2 img{position:absolute;top: 91%;left: 6%;width:100%;padding:0 0;}
@media screen and (min-width: 1000px) {
.tgr-entry a{border-radius:60px;font-size:2.75vw;}
.tgr-entry a:after{font-size:2.75vw;}	
	
/*.effect-box li p{font-size:2.5vw;line-height:1.7;}
.effect-box li:nth-child(2n) p{font-size:2.5vw;line-height:1.7;}
.nayami-txt{font-size:2.5vw;}
	
.feature-box li h3{font-size:4vw;}
.feature-box li p{font-size:2.5vw;line-height:1.7;}
.feature-box li p.num{top:-.2em;left:.1em;}
	
.welcome-box p{font-size:2vw;margin-bottom:2.5em;}
.welcome-box p.chart-ttl{font-size:3vw;margin-bottom:1em;}	
	
.voice-area .voice p{font-size:2.5vw;line-height:1.5;}
	
.genre-box ul li .detail .sub{margin-bottom:1.5em;}
.genre-box ul li .detail .sub span {font-size:1.5vw;}	
.genre-box ul li .detail h3 {font-size: 3vw;margin-bottom:.5em;}	
.genre-box ul li .detail .top_genre_desc {font-size: 2vw;line-height:1.7;}*/
	
.trial-desc{font-size:2.5vw;}
.trial-box li p{font-size:2.5vw;}
	
	
.access-box .accshow .sc{margin-bottom:2em;}
.access-box h3{font-size:5vw;}	
.access-box .accshow .sc a{font-size:2.5vw;font-weight:bold;}
.accshow .sc a span{color:#fff;font-size:1.5vw;}		
.access-box .accshow p {font-size:2.5vw;margin-bottom:2em;}
.access-box .accshow p.tel{font-size:5.5vw;margin-bottom:.2em!important;}
.access-box .accshow iframe{width:100%;height:280px;}
	
.access-box label {font-size:5vw;}
.access-box label:before{font-size:6.5vw;}
}


@media screen and (min-width: 1280px) {
.all-wrap{width:720px;margin:0 auto;display:block;overflow:hidden;position:relative;}
.all-wrap .header,.tgr-entry{width:720px;}
	
.tgr-entry a{border-radius:60px;font-size:2vw;}	
.tgr-entry a:hover{background:#f4aec4;color:#fff;}
.tgr-entry a:hover:after{color:#fff;}
	
/*.effect-box li p{font-size:20px;line-height:1.7;}
.effect-box li:nth-child(2n) p{font-size:20px;line-height:1.7;}
.nayami-txt{font-size:20px;}
	
.feature-box li h3{font-size:30px;;}
.feature-box li p{font-size:20px;line-height:1.7;}
.feature-box li p.num{top:-.1em;left:.3em;font-size:100px;}
	
.welcome-box p{font-size:20px;line-height:1.7;margin-bottom:2.5em;}
.welcome-box p.chart-ttl{font-size:28px;margin-bottom:1em;}	
	
.voice-area .voice p{font-size:20px;line-height:1.7;}
	
.genre-box ul li .detail .sub{margin-bottom:1.5em;}
.genre-box ul li .detail .sub span {font-size:16px;}	
.genre-box ul li .detail h3 {font-size: 30px;margin-bottom:.5em;padding-bottom:.5em;}	
.genre-box ul li .detail .top_genre_desc {font-size: 20px;line-height:1.7;}*/
	
.trial-box h2 img{width:100%;}	
.trial-desc{font-size:20px;}
.trial-box li p{font-size:20px;}
.trial-box li p.t-num{font-size:70px;top:-.6em;left:-.4em;padding:.2em .2em;}
.trial-box li:after{font-size:45px;bottom: -2em;}	
	
.access-box h3{font-size:36px;}	
.access-box .accshow .sc{margin-bottom:2em;}
.access-box .accshow .sc a{font-size:32px;font-weight:bold;}
.access-box .accshow p {font-size:20px;margin-bottom:2em;}
.access-box .accshow p.tel{font-size:30px;margin-bottom:.2em!important;}
.access-box .accshow iframe{width:100%;height:280px;}
	
.access-box label {font-size:40px;}
.access-box label:before{font-size:36px;}
.access-box .accshow .sc a{font-size:26px;}
.accshow .sc a span{color:#fff;font-size:18px;}		
.access-box .accshow .sc:before{font-size:26px;}	
}


/*============================================
  slide.css / TOP animetion
============================================*/
.section .block {position: relative;display: inline-block;color: transparent;overflow:hidden;}
.section span.block,.section3 span.block{width:100%;}
.section .block p.news-date{color: transparent;}
.section .block img,.section .block svg{opacity:0;	transition: 0s all .6s;overflow:hidden;}
.section .block:nth-of-type(2){color: transparent;}
.section .block:nth-of-type(3) {position: relative;width: 100%;color: transparent;transition: 0 all .6s;}

.section2 .block,.section3 .block {position: relative;display: inline-block;color: transparent;overflow:hidden;}
.section2 .block img{opacity:0;	transition: 0s all .6s;width:100%}
.section3 .block img{opacity:0;	transition: 0s all .6s;width:100%}
.section3 .block img:nth-of-type(2){opacity:0;	transition: 0s all 2s;}

.section .block::after {content: ""; display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #000; -webkit-transform: translateX(110vw) scaleX(1); transform: translateX(110vw) scaleX(1); -webkit-transform-origin: 0 0;
 transform-origin: 0 0;}
.section .block:nth-of-type(2)::after{background-color: #000;}
.section .block:nth-of-type(3)::after{background-color: transparent;}

.section2 .block::after {content: ""; display: block;position: absolute;top: 0;left: 0;width: 100%;height: 110%;background-color:rgba(255,255,255,.6); -webkit-transform: translateX(110vw) scaleX(1); transform: translateX(110vw) scaleX(1); -webkit-transform-origin: 0 0;transform-origin: 0 0;}
.section3 .block::after {content: ""; display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
background-image: linear-gradient( 109.6deg,  rgba(156,252,248,.8) 11.2%, rgba(110,123,251,.8) 91% ); -webkit-transform: translateX(110vw) scaleX(1); transform: translateX(110vw) scaleX(1); -webkit-transform-origin: 0 0;transform-origin: 0 0;}
.section3 .block:nth-of-type(2)::after{background-image:rgba(255,255,255,.7);}


/*.showクラス付与後*/
.section.show .block {transition: 0s all .5s;color:#000;}
.section.show .block:nth-of-type(2) {transition: 0s all .5s;color:#000;}
.section.show .block:nth-of-type(3)  {-webkit-animation: fade 5s forwards; animation: fade 5s forwards;color:#000;}
.section.show .block p.news-date{color: #999;}
.section.show .block img{opacity:1; transition: 0s all .5s;}

.section.show .block::after {-webkit-animation: anime_show .5s forwards; animation: anime_show .5s forwards;}
.section.show .block:nth-of-type(2):after{-webkit-animation-delay: .5s;animation-delay: .5s;}

.section2.show .block img{opacity:1; transition: 0s all .1s;}
.section2.show .block::after {-webkit-animation: anime_show .7s forwards; animation: anime_show .7s forwards;}

.section3.show .block img{opacity:1; transition: 0s all .1s;}
.section3.show .block img:nth-of-type(2){opacity:1; transition: 0s all 1.5s;}
.section3.show .block::after {-webkit-animation: anime_show .9s forwards; animation: anime_show .9s forwards;}
.section3.show .block:nth-of-type(2)::after {-webkit-animation: anime_show 1.3s forwards; animation: anime_show 1.3s forwards;}


@keyframes anime_show {
    0% {
        transform: translateX(-110vw) scaleX(1);/*Windowの外へ配置*/
        transform-origin: 0 0;
    }
    50% {
        transform: translateX(0) scaleX(1);
		transform-origin: 0 0;
    }
    100% {
        transform: translateX(0) scaleX(-110vw);
		transform-origin: 0 0;
    }
}
/* Chrome, Safari */
@-webkit-keyframes anime_show {
    0% {
        -webkit-transform: translateX(-110vw) scaleX(0);/*Windowの外へ配置*/
		-webkit-transform-origin: 0 0;
    }
    50% {
        -webkit-transform: translateX(0) scaleX(1);
		-webkit-transform-origin: 0 0;
    }
    100% {
        -webkit-transform: translateX(0) scaleX(-110vw);
		-webkit-transform-origin: 0 0;
    }
}