@charset "utf-8";
/* CSS Document */
/* Ver.2.0.0: 2016.10.18 */
/* Ver.2.1.0: 2017.10.17 */

/*style for setup2*/
.container-fluid{
	padding-right:0px;
	padding-left:0px;
}

.slide img.sgcap{
	text-align:center;
}

.section .row{
	margin:0px 10px;
}

.section5 .slide img{
	right:0;
	left:0;
	margin:auto;
}


/*Animation*/

.YoutubeWrapper,.AnimationWrapper{
	position: relative ;
	margin-top: 1.5em ;
	margin-bottom: 1.2em ;
	padding-top: 30px ;
	padding-bottom: 50% ;
	overflow: hidden ;
}

.YoutubeWrapper iframe,.AnimationWrapper iframe {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	bottom:0;
	right:0;
	margin:auto;
}

.animation iframe{
	width:480px;
	height:267px;
    /* 21.05.12 iframeでスクロールが発生しなくなるのを予防する */
    pointer-events: none;
}


.SetupGuideWrapper10{
	position: relative ;
	padding-top: 69px ;
	padding-bottom: 30% ;
	overflow: hidden ;
}

.SetupGuideWrapper10 iframe{
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ;
}

iframe{
	border:none;
}


/*slide*/
h1.sd_title{
	font-size:22px;
	margin-top:50px;
}


div.setup_sp{
	font-size:25px;
	margin-bottom:0px;
}


.sg_slide{
	margin:10px;
}


/*jquery.fullpage.cssを上書き*/
.fp-controlArrow {
	top: 98%;
    bottom: 24px;
}

.fp-controlArrow.fp-prev {
    left: 5%;
    border-width: 12px 20px 12px 0;
    border-color: transparent #333 transparent transparent;
    margin-left:20px;
}
.fp-controlArrow.fp-next {
    right: 5%;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #333;
    margin-right:20px;
}


p.movie_link{
	margin-top:30px;
}


h3.want_title,h3.garally_title{
	margin-bottom:20px;
}

.thum{
	margin-bottom:20px;
}


#menu {
    position: fixed;
    top: 55px;
    left: -30px;
    z-index: 10;
    width: 100%;
    margin: 0;
}

#menu li {
    display: inline-block;
    margin: 3px;
    color: #000;
    background: #fff;
    background: rgba(230,230,230,.5);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#menu li a {
    display: block;
    padding: 3px 12px;
    color: #000;
    text-decoration: none;
}

#menu li a:hover {
	opacity: 0.6;
}

#menu li.active {
    background: #666;
    background: rgba(0,0,0,.4);
}

 #menu li.active a {
    color: #fff;
}

/*slide HWSetup*/
.pane {
	padding-bottom: 10px;
	margin: 0 20px auto;
	border-radius: 20px;
	box-shadow: 5px 0 5px 2px rgba(0,0,0,0.2);
	background-color: #ffffff;
}

.pane-end {
	padding-bottom: 10px;
	margin: 0 20px auto;
	border-radius: 20px;
	box-shadow: 5px 0 5px 2px rgba(0,0,0,0.2);
	background-color: #ffffff;
	border: 5px double #57abe6;
}

h1,h2,h3 {
	margin-bottom: 20px;
}

.menu_button a {
	color:#5a5a5a;
}
.menu_button a:hover {
	text-decoration: none;
}

.menu_button{
	text-align:center;
	margin-top:30px;
}

.menu_button_fun{
	background-color:#ffffff;
	background-image:url(../img/g-L-41-01.png);
background-size:auto 100%;
}

.menu_button_setup{
	background-color:#ffffff;
	background-image:url(../img/g-L-02-02.png);
	background-size:auto 100%;
}

.menu_button_support{
	background-color:#ffffff;
	background-image:url(../img/g-L-02-04.png);
	background-size:auto 100%;
}

.menu_button .panel-footer{
	padding-top:0px;
}

.menu_button .panel-body{
	padding:15px 3px 0;
	height:100%;
}

h4 span.goright_arrow{
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0px 8px 15px;
    border-color: transparent transparent transparent #333;
    margin: 0 5px;
}

h4#a_prepare_goright{
	text-align: right;
}

.menu_button a:link{
	color:#5a5a5a;
}

.menu_button a:hover{
	color:#5a5a5a;
}

/*menu button*/
.menu_button figure{
	position:relative;
	overflow:hidden;
	display:block;
	max-width:100%;
	height:auto;
}

.menu_button figcaption{
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.6);
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
	-webkit-transition:.5s;
	transition:.5s;
	opacity:0;
	padding:10px;
	border-radius:3px;
}

.menu_button figure:hover figcaption{
	-webkit-transform:rotateY(0);
	transform:rotateY(0);
	opacity:1;
	color:#FFFFFF;
}

.menu-icon {
	max-width: 45px;
	height: auto;
}


h3.t_congratulations{
	margin-top: 5px;
	margin-bottom: 15px;
}

h3.titlesetup{
	font-size: 26px;
}

.back-menu .btn{
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left:30px;
	padding-right:30px;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.3); 
}

.menu_button .panel-body {
	height:100%;
}

p.menu_button_title{
	font-size:16px;
}

p.skip-text {
	margin-top: 70px; 
}


.down_box{
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	top:90%;
}


.down_button{
	width: 40px;
	height: auto;
}

.pane-end .down_button{
	margin-top:30px;
}

.pane-end h3 {
	margin-top: 90px;
	margin-bottom: 120px;
}

img.Googleplay_btn{
	width:153px;
	height:auto;
}

p.dl_site{
	font-size:11px;
}


/* 2019.9.27 setup 2.2G PV style add*/
div.promote {
    margin: 40px 0;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

div.promote > iframe{
/*    max-width: 100%;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

h3#pre_install{
    font-size: 20px;
    margin: 40px 0;
}

div.smp_install{
    display: flex;
}

a.app_store_link{
    padding: 9px 0 0;
}
/* end */

/* 2021.4.21 add */
/* 設定がうまくいかない場合はこちら リンク */
p.smp_connect > a{
    text-align: left;
    white-space: normal;
    max-width: 280px;
}

p.smp_connect_rtl > a{
    text-align: right;
    white-space: normal;
    max-width: 280px;
}
/*  */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (max-width: 1078px) {
    .animation iframe{
        width:360px;
        height:200px;
    }

}

@media (max-width: 991px) {
    .SetupGuideWrapper10{
        position: relative ;
        padding-top: 69px ;
        overflow: hidden ;
    }

    .animation iframe{
        width:324px;
        height:180px;
    }

}

@media (max-width: 824px) {
    .SetupGuideWrapper10{
        position: relative ;
        padding-top: 69px ;
        padding-bottom: 70% ;
        overflow: hidden ;
    }

        .menu-icon {
            max-width: 40px;
            height: auto;
        }

    .animation iframe{
        width:288px;
        height:160px;
    }

}

@media (max-width: 767px) {
    .animation iframe{
        width:432px;
        height:240px;
    }
}

@media (max-width: 600px) {
    .SetupGuideWrapper10{
        padding-bottom: 90% ;
    }

    .animation iframe{
        width:360px;
        height:200px;
    }
    
    /* 2019 style add */
    div.smp_animation{
        margin: -30px 0 0;
    }
    /* end */
}

/* iPhone6,7,8 以下サイズ*/
@media (max-width: 600px) and (max-height: 700px){
    div.smp_animation{
        margin: -50px 0 -30px;
    }
}

@media (max-width: 480px) {
    h1.Announcemenu{
        font-size:28px;
    }

    h1.Announcesetup{
        font-size:30px;
    }

    .SetupGuideWrapper10{
        position: relative ;
        padding-top: 50px ;
        padding-bottom: 113% ;
        overflow: hidden ;
    }

    h4#a_prepare_goright{
        text-align: left;
    }
    .menu-icon {
        max-width: 35px;
        height: auto;
    }

    h3.titlesetup{
        font-size: 22px;
    }

    .fp-slidesNav.bottom{
        display: none;
    }

    .back-menu .btn{
        margin-bottom: 0px;
    }


    hr.hr_footer{
        margin-top:10px;
        margin-bottom:5px;
    }

    p.menu_button_title{
        font-size:11px;
    }

    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        padding-right:6px;
        padding-left:6px;
    }

    /* footer ul li{
        margin-bottom:5px !important;
    }

    footer ul li #copyright{
        margin-bottom:10px;
    } */

    h3.t_congratulations{
        font-size:16px;
    }

    .menu_button .panel{
        margin-bottom:0px;
        margin-top:0px;
    }

    .btn-small{
        font-size: 14px;
        padding: 6px 12px;
        margin-top: 10px;
    }

    .animation iframe{
        width:288px;
        height:160px;
    }

    p.skip-text {
        margin-top: 50px;
    }

    .pane-end .down_button{
        margin-top:10px;
    }

    /* 2019 style add */
    div.next_button{
        display: none;
    }

    /* end */
}

@media (max-width: 360px) {
.animation iframe{
	width:234px;
	height:130px;
}
    /* 2019 style add */
    div.promote{
        margin: 10px 0 10px;
    }
    
    h3#pre_install{
        font-size: 20px;
/*        margin: 0 0 10px;*/
    }
    
    div.smp_animation{
        margin: -30px 0 0;
    }
    
    h3.smp_install_title{
        margin: 0 0 10px;
        font-size: 20px;
    }
    
    .pane div.promote_block{
        margin-top: -20px;
    }
    
    div.next_button{
        display: none;
    }
    
    /* end */
}